-
Notifications
You must be signed in to change notification settings - Fork 58
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Expose react_dom.render and react_dom.unmountComponentAtNode
- Loading branch information
1 parent
e15dd2e
commit 2c6af28
Showing
20 changed files
with
357 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| // Copyright 2018 Workiva Inc. | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
|
|
||
| /// Exposes a typed version of `react_dom.render` and `react_dom.unmountComponentAtNode` | ||
| /// from the [`react` package](https://pub.dartlang.org/packages/react) so that `over_react` consumers | ||
| /// do not have to declare a direct dependency on the `react` package in their `pubspec.yaml`. | ||
| /// | ||
| /// This allows us to insulate our consumers from "breaking" internal changes in the `react` package. | ||
| /// | ||
| /// > __It is strongly suggested that consumers namespace when importing this library to avoid | ||
| /// collisions when creating custom `UiComponent`s.__ | ||
| /// | ||
| /// import 'package:over_react/react_dom.dart' as react_dom; | ||
| /// import 'package:over_react/over_react.dart'; | ||
| library over_react.react_dom; | ||
|
|
||
| import 'dart:html'; | ||
|
|
||
| import 'package:over_react/over_react.dart'; | ||
| import 'package:react/react_dom.dart' as react_dom show render, unmountComponentAtNode; | ||
|
|
||
| /// Renders the provided [vDomComponent] into the DOM in the provided [mountNode] | ||
| /// and returns a reference to it based on its type: | ||
| /// | ||
| /// 1. Returns an [Element] if [vDomComponent] is a [Dom] component _(e.g. [Dom.div])_. | ||
| /// 2. Returns a React `Component` if [vDomComponent] is a composite component. | ||
| /// 3. Returns `null` if [vDomComponent] is null, or if [vDomComponent] is a stateless component. | ||
| /// | ||
| /// > If the [vDomComponent] was previously rendered into the [mountNode], this will perform an update on it and only | ||
| /// mutate the DOM as necessary to reflect the latest React component. | ||
| /// | ||
| /// > Use [unmountComponentAtNode] to unmount the instance. | ||
| /// | ||
| /// > Proxies [react_dom.render]. | ||
| dynamic render(ReactElement vDomComponent, Element mountNode) { | ||
| if (vDomComponent == null) return null; | ||
|
|
||
| return react_dom.render(vDomComponent, mountNode); | ||
| } | ||
|
|
||
| /// Removes a React `Component` that was mounted via [render] from the DOM | ||
| /// and cleans up its event handlers and state. | ||
| /// | ||
| /// > Returns `false` if no `Component` was mounted in the [mountNode] specified via [render], otherwise returns `true`. | ||
| bool unmountComponentAtNode(Element mountNode) { | ||
| return react_dom.unmountComponentAtNode(mountNode); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 42 additions & 0 deletions
42
test/over_react/dom/fixtures/dummy_composite_component.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import 'package:over_react/over_react.dart'; | ||
|
|
||
| @Factory() | ||
| UiFactory<TestCompositeComponentProps> TestCompositeComponent; | ||
|
|
||
| @Props() | ||
| class TestCompositeComponentProps extends UiProps { | ||
| Function onComponentDidMount; | ||
| Function onComponentWillUnmount; | ||
| Function onComponentDidUpdate; | ||
| } | ||
|
|
||
| @Component() | ||
| class TestCompositeComponentComponent extends UiComponent<TestCompositeComponentProps> { | ||
| @override | ||
| void componentDidMount() { | ||
| if (props.onComponentDidMount != null) { | ||
| props.onComponentDidMount(); | ||
| } | ||
| } | ||
|
|
||
| @override | ||
| void componentDidUpdate(_, __) { | ||
| if (props.onComponentDidUpdate != null) { | ||
| props.onComponentDidUpdate(); | ||
| } | ||
| } | ||
|
|
||
| @override | ||
| void componentWillUnmount() { | ||
| super.componentWillUnmount(); | ||
|
|
||
| if (props.onComponentWillUnmount != null) { | ||
| props.onComponentWillUnmount(); | ||
| } | ||
| } | ||
|
|
||
| @override | ||
| render() { | ||
| return Dom.div()('oh hai'); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| // Copyright 2018 Workiva Inc. | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
|
|
||
| library render_test; | ||
|
|
||
| import 'dart:html'; | ||
|
|
||
| import 'package:over_react/over_react.dart'; | ||
| import 'package:over_react/react_dom.dart' as react_dom; | ||
| import 'package:test/test.dart'; | ||
|
|
||
| import 'fixtures/dummy_composite_component.dart'; | ||
|
|
||
| main() { | ||
| group('`react_dom.render`', () { | ||
| var renderedInstance; | ||
| Element mountNode; | ||
|
|
||
| setUp(() { | ||
| mountNode = new DivElement(); | ||
| document.body.append(mountNode); | ||
| }); | ||
|
|
||
| tearDown(() { | ||
| mountNode.remove(); | ||
| mountNode = null; | ||
| renderedInstance = null; | ||
| }); | ||
|
|
||
| group('mounts and renders', () { | ||
| group('a composite component into the DOM', () { | ||
| int componentDidMountCount; | ||
| int componentDidUpdateCount; | ||
|
|
||
| setUp(() { | ||
| componentDidMountCount = 0; | ||
| componentDidUpdateCount = 0; | ||
|
|
||
| renderedInstance = react_dom.render((TestCompositeComponent() | ||
| ..onComponentDidMount = () { componentDidMountCount++; } | ||
| ..onComponentDidUpdate = () { componentDidUpdateCount++; } | ||
| )(), mountNode); | ||
| }); | ||
|
|
||
| test('', () { | ||
| expect(componentDidMountCount, 1); | ||
| }); | ||
|
|
||
| test('and returns a `Component` reference', () { | ||
| expect(renderedInstance, isNotNull); | ||
| }); | ||
|
|
||
| test('within the provided `mountNode`', () { | ||
| expect(findDomNode(renderedInstance), mountNode.children.single); | ||
| }); | ||
|
|
||
| test('and re-renders it when `react_dom.render` is called again for the same mountNode', () { | ||
| react_dom.render((TestCompositeComponent() | ||
| ..onComponentDidMount = () { componentDidMountCount++; } | ||
| ..onComponentDidUpdate = () { componentDidUpdateCount++; } | ||
| )(), mountNode); | ||
|
|
||
| expect(componentDidMountCount, 1); | ||
| expect(componentDidUpdateCount, 1); | ||
| }); | ||
| }); | ||
|
|
||
| group('a Dom component into the DOM', () { | ||
| setUp(() { | ||
| renderedInstance = react_dom.render(Dom.div()('oh hai'), mountNode); | ||
| }); | ||
|
|
||
| test('and returns an `Element` reference', () { | ||
| expect(renderedInstance, const isInstanceOf<Element>()); | ||
| }); | ||
|
|
||
| test('within the provided `mountNode`', () { | ||
| expect(renderedInstance, mountNode.children.single); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| test('returns null when null is provided', () { | ||
| renderedInstance = react_dom.render(null, mountNode); | ||
|
|
||
| expect(mountNode.children, isEmpty); | ||
| }); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| // Copyright 2018 Workiva Inc. | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
|
|
||
| library unmount_test; | ||
|
|
||
| import 'dart:html'; | ||
|
|
||
| import 'package:over_react/react_dom.dart' as react_dom; | ||
| import 'package:test/test.dart'; | ||
|
|
||
| import 'fixtures/dummy_composite_component.dart'; | ||
|
|
||
| main() { | ||
| group('`react_dom.unmountComponentAtNode`', () { | ||
| Element mountNode; | ||
| bool unmountComponentAtNodeReturnValue; | ||
|
|
||
| setUp(() { | ||
| mountNode = new DivElement(); | ||
| document.body.append(mountNode); | ||
| }); | ||
|
|
||
| tearDown(() { | ||
| mountNode.remove(); | ||
| mountNode = null; | ||
| }); | ||
|
|
||
| group('when called on a mountNode that has a mounted component:', () { | ||
| int componentDidMountCount; | ||
| bool componentWillUnmount; | ||
|
|
||
| setUp(() { | ||
| componentDidMountCount = 0; | ||
| componentWillUnmount = false; | ||
|
|
||
| react_dom.render((TestCompositeComponent() | ||
| ..onComponentDidMount = () { componentDidMountCount++; } | ||
| ..onComponentWillUnmount = () { componentWillUnmount = true; } | ||
| )(), mountNode); | ||
|
|
||
| expect(componentDidMountCount, 1, reason: 'test setup sanity check'); | ||
|
|
||
| unmountComponentAtNodeReturnValue = react_dom.unmountComponentAtNode(mountNode); | ||
| }); | ||
|
|
||
| test('unmounts the component', () { | ||
| expect(componentWillUnmount, isTrue); | ||
| }); | ||
|
|
||
| test('removes the rendered component from the DOM', () { | ||
| expect(mountNode.children, isEmpty); | ||
| }); | ||
|
|
||
| test('returns true', () { | ||
| expect(unmountComponentAtNodeReturnValue, isTrue); | ||
| }); | ||
| }); | ||
|
|
||
| test('returns false when called on a mountNode that does not have a mounted component', () { | ||
| expect(react_dom.unmountComponentAtNode(mountNode), isFalse); | ||
| }); | ||
| }); | ||
| } |
Oops, something went wrong.