diff --git a/README.md b/README.md index 1d285b1c9..39c04551a 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ and add an HTML element with a unique identifier where you’ll mount your OverR ```html - +
@@ -68,21 +68,21 @@ and add an HTML element with a unique identifier where you’ll mount your OverR - + ``` > __Note:__ When serving your application in production, use `packages/react/react_with_react_dom_prod.js` - file instead of the un-minified `react.js` / `react_dom.js` files shown in the example above. + file instead of the un-minified `react.js` / `react_dom.js` files shown in the example above. 4. Import the `over_react` and `react_dom` libraries into `your_app_name.dart`, and initialize React within your Dart application. Then [build a custom component](#building-custom-components) and mount / render it into the HTML element you created in step 3. > Be sure to namespace the `react_dom.dart` import as `react_dom` to avoid collisions with `UiComponent.render` - when [creating custom components](#building-custom-components). + when [creating custom components](#building-custom-components). ```dart import 'dart:html'; @@ -95,7 +95,7 @@ mount / render it into the HTML element you created in step 3. // Mount / render your component. react_dom.render(Foo()(), querySelector('#react_mount_point')); - } + } ``` 5. Run `pub run build_runner serve` in the root of your Dart project. @@ -109,24 +109,24 @@ properly. Unfortunately, this is a known limitation in the analysis server at th When running tests on code that uses our [builder] _(or any code that imports `over_react`)_, __you must run your tests using build_runner__. ->**Warning:** Do **_not_** run tests via `pub run build_runner test` in a package while another instance of `build_runner` +>**Warning:** Do **_not_** run tests via `pub run build_runner test` in a package while another instance of `build_runner` (e.g. `pub run build_runner serve`)is running in that same package. [This workflow is unsupported by build_runner](https://github.com/dart-lang/build/issues/352#issuecomment-461554316) -1. Run tests through build_runner, and specify the platform to be a browser platform. Example: +1. Run tests through build_runner, and specify the platform to be a browser platform. Example: ```bash $ pub run build_runner test -- -p chrome test/your_test_file.dart ``` - + 1. When running tests in `over_react`, our `dart_test.yaml` specifies some handy presets for running tests in DDC and dart2js: > **Note:** These presets exist only in `over_react`. * To run tests in `over_react` compiled via DDC, run: ```bash - $ pub run build_runner -- -P dartdevc + $ pub run build_runner test -- -P dartdevc ``` * To run tests in `over_react` compiled via dart2js, run: ```bash - $ pub run build_runner -r -- -P dart2js + $ pub run build_runner test -r -- -P dart2js ```   @@ -145,7 +145,7 @@ The `over_react` library functions as an additional "layer" atop the [Dart react which handles the underlying JS interop that wraps around [React JS][react-js]. The library strives to maintain a 1:1 relationship with the React JS component class and API. -To do that, an OverReact component is comprised of four core pieces that are each wired up +To do that, an OverReact component is comprised of four core pieces that are each wired up via our builder using an analogous [annotation]. 1. [UiFactory](#uifactory) @@ -184,7 +184,7 @@ class _$FooProps extends UiProps { ``` * Note: The [builder] will make the concrete getters and setters available in a generated class which has the same name as the class annotated with `@Props()`, but without the `_$` prefix (which would be `FooProps` in the above code). -The generated class will also have the same API. So, consumers who wish to extend the functionality of `_$FooProps` should +The generated class will also have the same API. So, consumers who wish to extend the functionality of `_$FooProps` should extend the generated version, `FooProps`.   @@ -202,7 +202,7 @@ class _$FooProps extends UiProps { @Component() class FooComponent extends UiComponent { - // ... + // ... } void bar() { @@ -285,7 +285,7 @@ class _$FooState extends UiState { > UiState is optional, and won’t be used for every component. * Note: The [builder] will make the concrete getters and setters available in a generated class which has the same name as the class annotated with `@State()`, but without the `_$` prefix (which would be `FooState` in the above code). -The generated class will also have the same API. So, consumers who wish to extend the functionality of `_$FooState` should +The generated class will also have the same API. So, consumers who wish to extend the functionality of `_$FooState` should use the generated version, `FooState`.   @@ -662,7 +662,7 @@ Now that we’ve gone over how to [use the `over_react` package in your project] the [anatomy of a component](#anatomy-of-an-overreact-component) and the [DOM components](#dom-components-and-props) that you get for free from OverReact, you're ready to start building your own custom React UI components. -1. Start with one of the [component boilerplate templates](#component-boilerplate-templates) below +1. Start with one of the [component boilerplate templates](#component-boilerplate-templates) below (Or, use OverReact's [code snippets for Intellij and Vs Code](https://github.com/Workiva/over_react/blob/master/snippets/README.md)). * [Component](#component-boilerplate) _(props only)_ * [Stateful Component](#stateful-component-boilerplate) _(props + state)_ diff --git a/lib/src/util/react_wrappers.dart b/lib/src/util/react_wrappers.dart index 0b38ec6ce..030bfe1f6 100644 --- a/lib/src/util/react_wrappers.dart +++ b/lib/src/util/react_wrappers.dart @@ -260,27 +260,27 @@ T getDartComponent(/* ReactElement|ReactComponent|Ele // in the test output when running `ddev test`. print(unindent( ''' - * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * WARNING: `getDartComponent` - * - * react-dart 4.0 no longer supports retrieving Dart components from - * `ReactElement` (pre-mounted VDOM instances) in order to prevent memory leaks. - * - * This call to `getDartComponent` will return `null`. - * - * Start using the mounted JS component instance instead: - * - * Example: - * // Before - * var vdom = Button()('Click me'); - * react_dom.render(vdom, mountNode); - * var dartInstance = getDartComponent(vdom); - * - * // Fixed - * var vdom = Button()('Click me'); - * var jsInstance = react_dom.render(vdom, mountNode); - * var dartInstance = getDartComponent(jsInstance); - * + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * WARNING: `getDartComponent` + * + * react-dart 4.0 no longer supports retrieving Dart components from + * `ReactElement` (pre-mounted VDOM instances) in order to prevent memory leaks. + * + * This call to `getDartComponent` will return `null`. + * + * Start using the mounted JS component instance instead: + * + * Example: + * // Before + * var vdom = Button()('Click me'); + * react_dom.render(vdom, mountNode); + * var dartInstance = getDartComponent(vdom); + * + * // Fixed + * var vdom = Button()('Click me'); + * var jsInstance = react_dom.render(vdom, mountNode); + * var dartInstance = getDartComponent(jsInstance); + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ''' )); diff --git a/pubspec.yaml b/pubspec.yaml index df95e2980..0dfcc88a8 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -37,5 +37,5 @@ dev_dependencies: dart_dev: ^2.0.0 dependency_validator: ^1.2.2 mockito: ^4.0.0 - over_react_test: ^2.2.0 + over_react_test: ^2.4.0 test: ^1.0.0 diff --git a/test/over_react/component_declaration/component_base_test.dart b/test/over_react/component_declaration/component_base_test.dart index 6f1282a9e..3339e2430 100644 --- a/test/over_react/component_declaration/component_base_test.dart +++ b/test/over_react/component_declaration/component_base_test.dart @@ -947,7 +947,6 @@ dynamic getDartChildren(var renderedInstance) { return getProps(renderedInstance)['children']; } - UiFactory TestComponent = ([Map props]) => new TestComponentProps(props); class TestComponentProps extends UiProps { diff --git a/test/over_react/dom/render_test.dart b/test/over_react/dom/render_test.dart index 8d07929bb..9bfa9bae7 100644 --- a/test/over_react/dom/render_test.dart +++ b/test/over_react/dom/render_test.dart @@ -92,11 +92,6 @@ main() { }); group('throws', () { - test('when `element` is `null`', () { - expect(() => react_dom.render(null, mountNode), throwsA(anything)); - expect(mountNode.children, isEmpty); - }); - test('when `mountNode` is `null`', () { expect(() => react_dom.render(Dom.div()('oh hai'), null), throwsA(anything)); }); diff --git a/test/over_react/util/react_wrappers_test.dart b/test/over_react/util/react_wrappers_test.dart index 806f9f12e..4c4385bf9 100644 --- a/test/over_react/util/react_wrappers_test.dart +++ b/test/over_react/util/react_wrappers_test.dart @@ -227,16 +227,23 @@ main() { }); group('updates the "key" and "ref" props properly', () { - const Map originalKeyRefProps = const { + var originalRefCalled = false; + var cloneRefCalled = false; + Map originalKeyRefProps = { 'key': 'original', - 'ref': 'original' + 'ref': (ref) { originalRefCalled = true; } }; - const Map overrideKeyRefProps = const { + Map overrideKeyRefProps = { 'key': 'clone', - 'ref': 'clone' + 'ref': allowInterop((ref) { cloneRefCalled = true; }) }; + tearDown((){ + originalRefCalled = false; + cloneRefCalled = false; + }); + test('for a plain React JS component', () { var original = (Dom.div()..addProps(originalKeyRefProps))(testChildren); var clone = cloneElement(original, overrideKeyRefProps); @@ -264,7 +271,7 @@ main() { // Verify that "key" and "ref" are overridden according to React expect(clone.key, equals(overrideKeyRefProps['key'])); - expect(clone.ref, equals(overrideKeyRefProps['ref'])); + expect(cloneRefCalled, isTrue); var renderedClone = react_test_utils.findRenderedComponentWithTypeV2(renderedHolder, TestComponentFactory);