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

[greglittlefield-wf]

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

[aviary2-wf]

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.

[aaronlademann-wf]

Any benefit to making the fallback be const {}?

[greglittlefield-wf]

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

[aaronlademann-wf]

+1

[aaronlademann-wf]

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

[aaronlademann-wf]

❤️

[aaronlademann-wf]

QA +1

@Workiva/release-management-pp