CPLAT-4304 Expose React Fragments

.travis.yml

@@ -7,7 +7,7 @@ script:
   - git diff --exit-code
   - pub run dart_dev analyze
   # TODO: Remove ignore on analyzer once the wdesk ecosystem is all on a Dart 2 compat major version and we no longer need a "pinned" dep
-  - pub run dependency_validator --no-fatal-pins -i coverage,build_web_compilers,analyzer,build_runner,built_value_generator
+  - pub run dependency_validator --no-fatal-pins -i analyzer,build_runner,build_web_compilers,built_value_generator
   # run tests on ddc output
   - pub run build_runner test --delete-conflicting-outputs -- -P dartdevc
   # run tests on dart2js output

CHANGELOG.md

@@ -1,5 +1,14 @@
 # OverReact Changelog
 
+## 2.4.4
+
+> Complete `2.4.4` Changsets:
+>
+> - [Dart 2](https://github.com/Workiva/over_react/compare/2.4.3+dart2...2.4.4+dart2)
+> - Dart 1 (no changes)
+
+* [#310] Upgrade to dart 2.4, analyzer 0.36.x, and build_web_compilers 2.x
+
 ## 2.4.3
 
 > Complete `2.4.3` Changsets:

Dockerfile

@@ -1,4 +1,4 @@
-FROM google/dart:2.1.0
+FROM google/dart:2.4
 
 # Expose env vars for git ssh access
 ARG GIT_SSH_KEY

lib/over_react.dart

@@ -40,6 +40,7 @@ export 'src/component/callback_typedefs.dart';
 export 'src/component/error_boundary.dart';
 export 'src/component/error_boundary_mixins.dart';
 export 'src/component/dom_components.dart';
+export 'src/component/fragment_component.dart';
 export 'src/component/dummy_component.dart';
 export 'src/component/prop_mixins.dart';
 export 'src/component/prop_typedefs.dart';

lib/src/component/fragment_component.dart

@@ -0,0 +1,44 @@
+// Copyright 2019 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.
+
+import 'package:over_react/src/component_declaration/component_base.dart'
+    as component_base;
+import 'package:over_react/src/component_declaration/builder_helpers.dart'
+    as builder_helpers;
+import 'package:react/react_client.dart';
+import 'package:react/src/react_client/js_backed_map.dart';
+import 'package:react/react.dart' as react;
+
+class FragmentProps extends component_base.UiProps
+    with builder_helpers.GeneratedClass
+    implements builder_helpers.UiProps {
+  // Initialize to a JsBackedMap so that copying can be optimized
+  // when converting props during ReactElement creation.
+  FragmentProps([Map props]) : this.props = props ?? new JsBackedMap();
+
+  @override
+  ReactJsComponentFactoryProxy componentFactory = react.Fragment;
+
+  @override
+  final Map props;
+
+  @override
+  String get propKeyNamespace => '';
+}
+
+/// Fragment component that allows the wrapping of children without the necessity of using
+/// an element that adds an additional layer to the DOM (div, span, etc).
+///
+/// See: <https://reactjs.org/docs/fragments.html>
+FragmentProps Fragment() => new FragmentProps();

pubspec.yaml

@@ -1,5 +1,5 @@
 name: over_react
-version: 2.4.3+dart2
+version: 2.4.4+dart2
 description: A library for building statically-typed React UI components using Dart.
 homepage: https://github.com/Workiva/over_react/
 authors:
@@ -9,9 +9,7 @@ environment:
   sdk: '>=2.1.0 <3.0.0'
 
 dependencies:
-  # analyzer >= 0.33.0 breaks the builder, and analyzer < 0.32.4 is Dart 2 incompatible. Wdesk currently resolves to
-  # 0.30.x, so we need the lower bound
-  analyzer: ^0.35.0
+  analyzer: '>=0.35.0 <0.37.0'
   build: ^1.0.0
   built_redux: ^7.4.2
   built_value: '>=5.4.4 <7.0.0'
@@ -28,20 +26,18 @@ dependencies:
   platform_detect: ^1.3.4
   quiver: ">=0.25.0 <1.0.0"
 dev_dependencies:
-  build_resolvers: ^1.0.3
-  build_runner: ^1.3.1
-  build_test: ^0.10.6
-  build_web_compilers: ^1.2.0
+  build_resolvers: ^1.0.5
+  build_runner: ^1.5.2
+  build_test: ^0.10.8
+  build_web_compilers: ^2.1.1
   built_value_generator: ^6.0.0
-  coverage: ">=0.10.0 <0.12.4"
   dart2_constant: ^1.0.0
   dart_dev: ^2.0.0
   dependency_validator: ^1.2.2
   mockito: ^4.0.0
   over_react_test: ^2.5.0
   test: ^1.0.0
 
-
 dependency_overrides:
   react:
     git:

test/over_react/component/fixtures/dummy_component.dart

@@ -0,0 +1,47 @@
+// Copyright 2019 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.
+
+import 'package:over_react/over_react.dart';
+
+// ignore: uri_has_not_been_generated
+part 'dummy_component.over_react.g.dart';
+
+@Factory()
+// ignore: undefined_identifier
+UiFactory<DummyProps> Dummy = _$Dummy;
+
+@Props()
+class _$DummyProps extends UiProps {
+  Function onComponentDidMount;
+}
+
+// AF-3369 This will be removed once the transition to Dart 2 is complete.
+// ignore: mixin_of_non_class, undefined_class
+class DummyProps extends _$DummyProps with _$DummyPropsAccessorsMixin {
+  // ignore: undefined_identifier, undefined_class, const_initialized_with_non_constant_value
+  static const PropsMeta meta = _$metaForDummyProps;
+}
+
+@Component2()
+class DummyComponent extends UiComponent2<DummyProps> {
+  @override
+  void componentDidMount() {
+    props.onComponentDidMount();
+  }
+
+  @override
+  render() {
+    return (Dom.button()..addTestId('DummyButton'))('oh hai');
+  }
+}

test/over_react/component/fragment_component_test.dart

@@ -0,0 +1,70 @@
+// Copyright 2019 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 fragment_component_test;
+
+import 'package:over_react/over_react.dart';
+import 'package:over_react_test/over_react_test.dart';
+import 'package:test/test.dart';
+
+import 'fixtures/dummy_component.dart';
+
+void main() {
+  group('Fragment', () {
+    test('renders only its children', () {
+      var wrappingDivRef;
+
+      renderAttachedToDocument(
+        (Dom.div()
+          ..ref = (ref) {
+            wrappingDivRef = ref;
+          })(Fragment()(
+          Dom.div()(),
+          Dom.div()(),
+          Dom.div()(),
+          Dom.div()(),
+        )),
+      );
+
+      expect(wrappingDivRef.children, hasLength(4));
+    });
+
+    test('passes the key properly onto the fragment', () {
+      var callCount = 0;
+      var jacket = mount(
+        (Fragment()..key = 1)(
+          (Dummy()
+            ..onComponentDidMount = () {
+              callCount++;
+            })(),
+        ),
+      );
+
+      expect(callCount, 1);
+
+      jacket.rerender(
+        (Fragment()..key = 2)(
+          (Dummy()
+            ..onComponentDidMount = () {
+              callCount++;
+            })(),
+        ),
+      );
+
+      expect(callCount, 2,
+          reason:
+              'Dummy should have been remounted as a result of Fragment key changing');
+    });
+  });
+}