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

greglittlefield-wf · 2019-03-14T23:40:46Z

Ultimate problem:

Add over_react analogues of Component2, introduced in react-dart to implement JS-object-based props/state and to serve as the basis for React 16 lifecycle methods.

See Workiva/react-dart#161 for more context

Changes

Initial implementation of JS-object-based props/state of UiComponent2/UiStatefulComponent2` base classes
- This API is extremely far from final; it currently contains pieces that will be removed or completely reworked before release
Update props/state typing mechanism in component classes
- Generate an additional UiProps class implementation for each component that can only be backed by JS maps, and override the return type of typedPropsFactoryJs/props to match this.
  This allows dart2js to make some optimizations. For instance:
  
  For the access of props.isOpen within a component, as we start to inline things (for the purposes of understanding what's going on under the hood), then it looks like this:
```
props.isOpen;
props.props['isOpen'];             // inline FooProps.isOpen typed getter
props.props.backingMap['isOpen'];  // inline UiProps.operator[]
```
  So, we're eventually accessing a property on the Map backingMap.
  
  But if backingMap is a JsBackedMap, we can go one layer deeper:
```
props.props.backingMap['isOpen'];
getProperty(props.props.backingMap.jsMap, 'isOpen'); // inline JsBackedMap.operator[]
```
  Now, onto dart2js, which performs actual inlining in certain cases (like prop accesses).
  
  When dart2js only knows that backingMap is a Map, it emits the following code, wherein
  $index$asx performs type-checking on the map and key, and then performs an interceptor lookup on the backing map before finally calling into the actual key lookup function.
```
J.$index$asx(this._cachedTypedProps.props.backingMap, 'isOpen');
```
  However, when dart2js knows that backingMap is a JsMap, it can skip that step and emit
  code that directly accesses the JS property
```
this._cachedTypedProps.props.backingMap.jsMap.isOpen;
```
Add integration tests for UiComponent2 to serve as a smoke branch as we finalize this work.
- Remove deprecated @Required annotation that was being tested, as well as related tests
Update components in web/ to use Ui(Stateful)Component2
Update boilerplate with new link to dart-lang/sdk issue
Add ignores for deprecation warnings introduced by react-dart 5.0.0-wip
Duplicate examples in web/ with UiComponent2 versions

Testing

CI passes
Play around with web/component2/ examples and verify their props/state show up in the dev tools as expected!

Potential areas of regression:

Builder

FYA: @aaronlademann-wf @kealjones-wk
FYI: @evanweible-wf @corwinsheahan-wf @maxwellpeterson-wf

# Conflicts: # lib/over_react.dart # lib/src/component_declaration/component_base.dart # lib/src/transformer/impl_generation.dart # pubspec.yaml

… Component2

…previous member order

aviary2-wf · 2019-03-14T23:41:08Z

Security Insights

No security relevant content was detected by automated scans.

Action Items

Review PR for security impact; comment "security review required" if needed or unsure
Verify aviary.yaml coverage of security relevant code

Questions or Comments? Reach out on Slack: #support-infosec.

aaronlademann-wf

Should probably go ahead and deprecate all the old component classes.

lib/src/builder/generation/impl_generation.dart

aaronlademann-wf · 2019-03-15T16:51:44Z

lib/src/builder/generation/impl_generation.dart

+        ..writeln('  // of `_$propsOrState` in the constructor body is necessary to work around a DDC bug: https://github.com/dart-lang/sdk/issues/36217')
+        // TODO need to remove this workaround once https://github.com/dart-lang/sdk/issues/36217 is fixed get nice dart2js output
+        ..writeln('  $plainMapImplName(Map backingMap) : this._$propsOrState = {}, super._() {')
+        ..writeln('     this._$propsOrState = backingMap ?? {};')


Any benefit to making the fallback be const {}?

We can't because this map backs the returned props object, which can be mutated.

lib/src/component_declaration/component_base.dart

lib/src/component_declaration/builder_helpers.dart

lib/src/component_declaration/component_base.dart

pubspec.yaml

web/src/demo_components/button.dart

CPLAT-3300: CP Code Review and PR Merging Team agreement update

…d validation

aaronlademann-wf

+1

aaronlademann-wf · 2019-03-20T20:19:30Z

lib/over_react.dart

@@ -27,7 +27,7 @@ export 'package:react/react.dart' show
    SyntheticUIEvent,
    SyntheticWheelEvent;

-// FIXME use public entrypoint
+// FIXME 3.0.0-wip use public entrypoint


Created https://jira.atl.workiva.net/browse/CPLAT-5026

aaronlademann-wf · 2019-03-20T20:30:47Z

lib/src/component_declaration/component_base.dart

@@ -31,6 +30,9 @@ import 'package:w_common/disposable.dart';

 export 'package:over_react/src/component_declaration/component_type_checking.dart' show isComponentOfType, isValidElementOfType;

+part 'component_base/component_base_2.dart';


aaronlademann-wf

QA +1

@Workiva/release-management-pp

greglittlefield-wf added 24 commits August 23, 2018 12:02

Update dart2js flags for testing

dc7a13d

Support Component2

9b47b97

Optimize typed props caching

4208192

Optimize props so that dart2js knows it's always using a JsBackedMap

6f32516

Optimize cachedTypedProps impl

81fd68f

Get $index to output

cce8d79

Merge remote-tracking branch 'origin/master' into js_map_perf/dev

300a0f8

# Conflicts: # lib/over_react.dart # lib/src/component_declaration/component_base.dart # lib/src/transformer/impl_generation.dart # pubspec.yaml

Update Component2 check

16af7aa

Fix generated code errors/lints

54cd8d2

Fix Component2 props/state type errors

2e5faa3

Fix bad equality check, update to latest react-dart branch

efbf79a

Commit generated files

eb25e3b

Merge remote-tracking branch 'origin/master' into js_map_perf/dart2

5857ed6

Get JS-backed maps working for state, conditionally generate code for…

5933fb8

… Component2

Commit generated code

320f273

Fix tests that use non-resolved AST

a67049c

Improve ordering of generated props impl members

4a1dc43

Further updates to generated code to improve readability and restore …

b1b62f5

…previous member order

Commit generated files

61cf306

Remove leftover file

fc210c4

Add notes about inlining and updated constructor bug

29d194f

Recommit generated files

a7fb937

Add integration tests for Component2

9f5c063

Cleanup

e4665a4

greglittlefield-wf requested a review from a team as a code owner March 14, 2019 23:40

rmconsole-wf added the Merge Requirements Unmet label Mar 14, 2019

greglittlefield-wf changed the title ~~Js map perf/dart2~~ CPLAT-2272: Add UiComponent2 (JS-backed maps) Mar 14, 2019

greglittlefield-wf added 2 commits March 14, 2019 16:43

Use https dep override so Travis can pub get

bc5afbd

Commit generated files

5119634

Fix typo and commit generated files

147fcff

aaronlademann-wf requested changes Mar 15, 2019

View reviewed changes

greglittlefield-wf and others added 16 commits March 15, 2019 14:53

DRY up DisposableManagerV7 impl, update deprecation warnings

f9c5792

Address compoennt_base feedback, organize better

bd62327

Address other feedback, mark TODOs/FIXMEs with "3.0.0-wip"

9c6ae03

Update CONTRIBUTING and PR_TEMPLATE, remove CODEOWNERS

96ed5a7

Silence deprecations introduced by 5.0.0-wip, misc cleanup

2240989

Add overrides to Component-implemented methods, remove lifecycle-base…

da6591d

…d validation

Change examples back to UiComponent

17fc4d1

Use both UiComponent and UiComponent2 in web example

78de0fb

Merge remote-tracking branch 'origin/master' into js_map_perf/dart2

26576c1

Regenerate files

7528758

Skip required prop tests

d663b1b

Update builder gold files

dd0ef86

Add missing skipped tests

0ae6f6a

Prefix Component2 integration tests

6376bde

Remove deprecated @required() annotation and related tests

580604f

aaronlademann-wf approved these changes Mar 20, 2019

View reviewed changes

rmconsole-wf added Merge Requirements Met and removed Merge Requirements Unmet labels Mar 20, 2019

aaronlademann-wf approved these changes Mar 20, 2019

View reviewed changes

rmconsole-wf added the RM Ready label Mar 20, 2019

rmconsole6-wk merged commit e08f05d into 3.0.0-wip Mar 20, 2019

rmconsole6-wk deleted the js_map_perf/dart2 branch March 20, 2019 20:47

aaronlademann-wf mentioned this pull request May 1, 2019

CPLAT-5211 Add @Component2 annotation #289

Merged

9 tasks

aaronlademann-wf added this to the 3.1.0 (ReactJS 16 Lifecycle Methods) milestone May 1, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

greglittlefield-wf commented Mar 14, 2019 •

edited

Loading

aviary2-wf commented Mar 14, 2019

aaronlademann-wf left a comment

aaronlademann-wf Mar 15, 2019

greglittlefield-wf Mar 15, 2019

aaronlademann-wf left a comment

aaronlademann-wf Mar 20, 2019

aaronlademann-wf Mar 20, 2019

aaronlademann-wf left a comment

		@@ -31,6 +30,9 @@ import 'package:w_common/disposable.dart';

		export 'package:over_react/src/component_declaration/component_type_checking.dart' show isComponentOfType, isValidElementOfType;

		part 'component_base/component_base_2.dart';

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

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

Conversation

greglittlefield-wf commented Mar 14, 2019 • edited Loading

Ultimate problem:

Changes

Testing

Potential areas of regression:

aviary2-wf commented Mar 14, 2019

Security Insights

Action Items

aaronlademann-wf left a comment

Choose a reason for hiding this comment

aaronlademann-wf Mar 15, 2019

Choose a reason for hiding this comment

greglittlefield-wf Mar 15, 2019

Choose a reason for hiding this comment

aaronlademann-wf left a comment

Choose a reason for hiding this comment

aaronlademann-wf Mar 20, 2019

Choose a reason for hiding this comment

aaronlademann-wf Mar 20, 2019

Choose a reason for hiding this comment

aaronlademann-wf left a comment

Choose a reason for hiding this comment

greglittlefield-wf commented Mar 14, 2019 •

edited

Loading