JS-object-based props/state, Component2 initial impl, JsMap #161

greglittlefield-wf · 2019-03-04T20:28:22Z

Changes

Initial implementation of JS-object-based props/state

Implemented in new Component2 base class
- This API is extremely far from final; it currently contains pieces that will be removed or completely reworked before release
Dart component props are now stored directly on the JS props object, as opposed to within a Dart object stored as an internal prop
Dart component state is now also stored directly on the JS state object, as opposed to completely within the Dart layer

Advantages:

Props/state are now visible/mutable in the React Dev Tools, greatly improving the Dart component debugging experience
Complexity of the Dart/JS bindings are reduced significantly by leveraging React JS logic more directly, allowing easier maintenance and reduced risk of bugs
- This will be especially important when implementing the new React lifecycle methods and concurrent mode
Performance is increased by a small amount by avoiding Dart Map overhead

JsBackedMap

A Dart class that adapts JS objects to the Dart Map interface, allowing properties to be easily read/written directly.

Used as the basis for props/state Maps used in Component2's fields and lifecycle methods
Used to replace some existing logic in ReactDomComponentFactory that served similar functions, removing an extra copy in DOM ReactElement creation

Etc.

Update tests to run on Component2
Add basic tests for JsBackedMap (more test coverage will come in a later PR)
Bump SDK constraint to be Dart-2-only
Remove Dart 1 build from CI

Testing

CI passes

# Conflicts: # example/test/react_test_components.dart # lib/react.dart # lib/react_client.dart # lib/react_client/react_interop.dart # test/factory/common_factory_tests.dart # test/lifecycle_test.dart

…rt_1 Also add polyfills to build # Conflicts: # example/test/react_test_components.dart # js_src/dart_helpers.js # lib/react.js # lib/react_client/react_interop.dart # lib/react_prod.js # lib/react_with_addons.js # lib/react_with_react_dom_prod.js # test/ReactSetStateTestComponent.js # test/lifecycle_test.dart

# Conflicts: # package.json

aaronlademann-wf

Additional feedback here: greglittlefield-wf#2

aaronlademann-wf · 2019-03-05T20:44:46Z

lib/react.dart

@@ -7,7 +7,8 @@ library react;

 import 'package:react/src/typedefs.dart';

-typedef Component ComponentFactory();
+// todo revert this?
+typedef T ComponentFactory<T extends Component>();


I don't see any reason to revert it... its not a breaking API change as far as I can tell....

lib/react_client/react_interop.dart

…view CR feedback for JS map stuff

kealjones-wk

Looks super good! so excited, just some nits and questions.

lib/react.dart

lib/react_client.dart

lib/react.dart

lib/react_client.dart

kealjones-wk · 2019-03-06T17:34:05Z

lib/src/react_client/js_backed_map.dart

+  @override
+  bool containsKey(Object key) {
+//    if (!_isValidKey(key)) return false;
+//    assert(_isValidKey(key));


and again, more guff

kealjones-wk · 2019-03-06T17:36:36Z

lib/src/react_client/js_backed_map.dart

+
+// overridden for to avoid cast in case the implementation of keys changes
+//  @override
+//  int get length => _Object.keys(jsObject).length;


from line 99 to here all can probably go, unless the worry of implementation change is still relevant then id probably un-comment it out.

lib/react.dart

kealjones-wk · 2019-03-06T17:44:05Z

lib/react.dart

+  ///
+  /// Will be removed when [Component] is removed in the `6.0.0` release.
+  @Deprecated('6.0.0')
+  void replaceState(Map newState, [SetStateCallback callback]) =>


Why is this deprecated in Component2 and not in Component? why do we even need this in Component2?

Good point, it should probably be deprecated in Component, along with any other non-lifecycle members that will be unsupported in Component2.

I will add "non lifecycle members of Component" to our deprecation ticket.

I say we do that in the PR where we add all the other deprecations

lib/react_client.dart

kealjones-wk

+10

aaronlademann-wf

+1

greglittlefield-wf added 30 commits August 22, 2018 16:17

Add JsBackedMap

bbaf170

Component2 that uses JS props directly

f4a25b9

Remove unnecessary return

ee4b95d

Fix prop/state updating ordering, fix defaultProps

598e911

Fix JsBackedMap remove bug/typo

b775866

Fix Dart component children not being wrapped in lists

b476da5

Add flag to detect Dart component classes

3ec45cf

Get factory tests passing

e8607c1

Fix/update lifecycle tests

48ec4e0

Fix modification of children

2356435

Improve JsBackedMap default constructor perf

9834c84

Add polyfills for Object.assign and Reflect.deleteProperty for IE11

7ed7dc1

Merge remote tracking branch 'origin/master' into js_map_perf/dart_1

3242470

# Conflicts: # example/test/react_test_components.dart # lib/react.dart # lib/react_client.dart # lib/react_client/react_interop.dart # test/factory/common_factory_tests.dart # test/lifecycle_test.dart

Redo children test changes that were discarded in the merge

0ed7e5c

dartfmt

4965761

Use object-assign package

6a6064a

Move polyfills to top

2081498

Merge branch '5.0.0-wip' into js_map_perf/dart_1

7eadd80

# Conflicts: # package.json

Optimize props map copying on DOM components

47cfa9c

Add JsBackMap value tests

504d538

Add operator== and hashCode to JsBackedMap

549009e

Cleanup

af27724

dartfmt

6c18bf6

Fix bindings after a bad merge with 5.0.0-wip

e433546

Regenerate JS

7f2b9be

Run lifecycle tests on Component and Component2

76b76fb

dartfmt

936a40c

Revert conversion of examples to Component2

5f9d6dd

Misc cleanup

55879fd

Clean up Component/Component2 delineation

86419ca

greglittlefield-wf changed the title ~~JS-object-based props, Component2 initial impl, JsMap~~ JS-object-based props/state, Component2 initial impl, JsMap Mar 4, 2019

greglittlefield-wf added 2 commits March 4, 2019 13:53

Fix dependency_validator infractions

a7cd2b6

Bump SDK constraint to Dart-2-only, remove Dart 1 build from CI

ee377ec

greglittlefield-wf force-pushed the js_map_perf/dart_2 branch from 1351650 to ee377ec Compare March 4, 2019 20:54

aaronlademann-wf added 2 commits March 5, 2019 14:13

Extend Component2

ae33bee

Update deprecation annotations / comments

68933d5

aaronlademann-wf mentioned this pull request Mar 5, 2019

CR feedback for JS map stuff greglittlefield-wf/react-dart#2

Merged

aaronlademann-wf requested changes Mar 5, 2019

View reviewed changes

Merge pull request #2 from aaronlademann-wf/js_map_perf/dart_2_adl-re…

e3fb375

…view CR feedback for JS map stuff

aaronlademann-wf mentioned this pull request Mar 6, 2019

CPLAT-4303: React 16 New Context #160

Merged

4 tasks

Workiva deleted a comment from thegregorator Mar 6, 2019

Address CR feedback, misc typing cleanup

ee873c1

greglittlefield-wf force-pushed the js_map_perf/dart_2 branch from fa614be to ee873c1 Compare March 6, 2019 17:43

kealjones-wk requested changes Mar 6, 2019

View reviewed changes

Implement displayName via runtimeType only in DDC, cleanup

5f2005b

kealjones-wk approved these changes Mar 6, 2019

View reviewed changes

aaronlademann-wf approved these changes Mar 6, 2019

View reviewed changes

greglittlefield-wf merged commit 591d27d into Workiva:5.0.0-wip Mar 6, 2019

greglittlefield-wf mentioned this pull request Mar 14, 2019

CPLAT-2272: Add UiComponent2 (JS-backed maps) Workiva/over_react#271

Merged

aaronlademann-wf added this to the 5.0.0 milestone Apr 4, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JS-object-based props/state, Component2 initial impl, JsMap #161

JS-object-based props/state, Component2 initial impl, JsMap #161

greglittlefield-wf commented Mar 4, 2019 •

edited

Loading

aaronlademann-wf left a comment

aaronlademann-wf Mar 5, 2019

kealjones-wk left a comment

kealjones-wk Mar 6, 2019

kealjones-wk Mar 6, 2019

kealjones-wk Mar 6, 2019

greglittlefield-wf Mar 6, 2019

aaronlademann-wf Mar 6, 2019

greglittlefield-wf Mar 6, 2019

kealjones-wk left a comment

aaronlademann-wf left a comment

JS-object-based props/state, Component2 initial impl, JsMap #161

JS-object-based props/state, Component2 initial impl, JsMap #161

Conversation

greglittlefield-wf commented Mar 4, 2019 • edited Loading

Changes

Initial implementation of JS-object-based props/state

JsBackedMap

Etc.

Testing

aaronlademann-wf left a comment

Choose a reason for hiding this comment

aaronlademann-wf Mar 5, 2019

Choose a reason for hiding this comment

kealjones-wk left a comment

Choose a reason for hiding this comment

kealjones-wk Mar 6, 2019

Choose a reason for hiding this comment

kealjones-wk Mar 6, 2019

Choose a reason for hiding this comment

kealjones-wk Mar 6, 2019

Choose a reason for hiding this comment

greglittlefield-wf Mar 6, 2019

Choose a reason for hiding this comment

aaronlademann-wf Mar 6, 2019

Choose a reason for hiding this comment

greglittlefield-wf Mar 6, 2019

Choose a reason for hiding this comment

kealjones-wk left a comment

Choose a reason for hiding this comment

aaronlademann-wf left a comment

Choose a reason for hiding this comment

greglittlefield-wf commented Mar 4, 2019 •

edited

Loading