Release react 5.5.0

[aaronlademann-wf]

This release of react includes...

New Features

• 🎉 🎉 🎉 Support for function components, memo and hooks!!! 🎉 🎉 🎉

  Sooooo much work from so many amazing people made this possible, but to summarize:

  • 221 Add support for function components

  • 252 Add support for memo higher order component

  • Hooks, hooks, and more hooks!

    • 223 useState

    • 233 useCallback

    • 237 useContext

    • 227 useEffect

    • 248 useLayoutEffect

    • 232 useReducer

    • 245 useRef

    • 250 useMemo

    • 247 useImperativeHandle

    • 246 useDebugValue

  
  It works like this...

  Define the component:

  import 'package:react/react.dart' as react;
  
  final SomeWidget = react.registerFunctionComponent(_SomeWidget, displayName: 'SomeWidget');
  
  _SomeWidget(Map props) {
    // You can use hooks in here, too!
  
    return react.div({}, [
      // Some children...
    ]);
  }

  Render the component (exact same consumer API as a class-based component):

  import 'package:react/react_dom.dart' as react_dom;
  import 'some_widget.dart'; // Where your component is defined
  
  main() {
    final renderedWidget = SomeWidget({
      // put some props here
    }, [
      // put some children here!
    ]);
  
    react_dom.render(renderedWidget, querySelector('#idOfSomeNodeInTheDom'));
  }

  Check out all the function component and hooks examples for more information!

Fixes / Updates

• 253 Deprecate setClientConfiguration.

  • It is no longer necessary - and can be removed from your implementations

• 273 Make JsBackedMap.values compatible with MSIE 11

---

Changesets committed directly to the WIP branch that need review:

1. https://github.com/cleandart/react-dart/pull/265/files/cf43b36..066c138
2. https://github.com/cleandart/react-dart/pull/265/files/9714657..75d6611

(Click on "Changes from X commits..." to see commit messages for more context)

[semveraudit-wf]

Public API Changes

Recommendation: :bangbang: Major version bump (fyi @Workiva/semver-audit-group )

@@ line 6: package:react/src/prop_validator.dart @@
-  typedef PropValidator<T> = Error Function(T props, PropValidatorInfo info)
+  typedef PropValidator<TProps> = Error Function(TProps props, PropValidatorInfo info)
// `type` of `props` has changed.
// Changing a parameter signature is a major change.

@@ line 104: package:react/src/context.dart @@
-  Context createContext<TValue>([TValue defaultValue, int Function(TValue, TValue) calculateChangedBits])
+  Context<TValue> createContext<TValue>([TValue defaultValue, int Function(TValue, TValue) calculateChangedBits])
// `return_type` of `createContext` has changed from `Context` to `Context<TValue>`.
// Changing a top-level function is a major change.

@@ line 503: package:react/react.dart @@
abstract class Component2 implements Component
-     Context get contextType
+     Context<dynamic> get contextType
//    `type` of `contextType` has changed from `Context` to `Context<dynamic>`.
//    Changing a class field is a major change.

@@ line 839: package:react/react_client.dart @@
class ReactDomComponentFactoryProxy extends ReactComponentFactoryProxy
-     ReactDomComponentFactoryProxy ReactDomComponentFactoryProxy(dynamic name)
+     ReactDomComponentFactoryProxy ReactDomComponentFactoryProxy(String name)
//    `type` of `name` has changed.
//    Changing a parameter signature is a major change.

@@ line 125: package:react/react_client/react_interop.dart @@
-  ReactJsComponentFactoryProxy forwardRef(dynamic Function(Map<dynamic, dynamic>, Ref<dynamic>) wrapperFunction)
+  ReactJsComponentFactoryProxy forwardRef(dynamic Function(Map<dynamic, dynamic>, Ref<dynamic>) wrapperFunction, {String displayName = 'Anonymous'})
// `displayName` was added.
// Adding an optional parameter is a minor change.

Click to see 30 more API Changes

--- ```diff @@ line 2742: package:react/react.dart @@ - void setReactConfiguration(dynamic domCreator, dynamic customRegisterComponent, {ReactDartComponentFactoryProxy2 Function(Component2 Function(), {Component2Bridge Function(Component2) bridgeFactory, Iterable skipMethods}) customRegisterComponent2}) + void setReactConfiguration(dynamic domCreator, dynamic customRegisterComponent, {ReactDartComponentFactoryProxy2 Function(Component2 Function(), {Component2Bridge Function(Component2) bridgeFactory, Iterable skipMethods}) customRegisterComponent2, ReactDartFunctionComponentFactoryProxy Function(dynamic Function(JsBackedMap), {String displayName}) customRegisterFunctionComponent}) // `customRegisterFunctionComponent` was added. // Adding an optional parameter is a minor change. ``` ```diff @@ line 125: package:react/react_client/react_interop.dart @@ - ReactJsComponentFactoryProxy forwardRef(dynamic Function(Map, Ref) wrapperFunction) + ReactJsComponentFactoryProxy forwardRef(dynamic Function(Map, Ref) wrapperFunction, {String displayName = 'Anonymous'}) // `displayName` was added. // Adding an optional parameter is a minor change. ``` ```diff @@ line 1968: package:react/react.dart @@ + ReactDartFunctionComponentFactoryProxy Function(dynamic Function(JsBackedMap), {String displayName}) registerFunctionComponent // Adding a top-level variable is a minor change. ``` ```diff @@ line 670: package:react/react_client/react_interop.dart @@ + dynamic get jsNull // Adding a top-level variable is a minor change. ``` ```diff @@ line 395: package:react/hooks.dart @@ + Ref useRef([T initialValue]) // Adding a top-level function is a minor change. ``` ```diff @@ line 293: package:react/react_client/react_interop.dart @@ + ReactJsComponentFactoryProxy memo(ReactDartFunctionComponentFactoryProxy factory, {bool Function(Map, Map) areEqual}) // Adding a top-level function is a minor change. ``` ```diff @@ line 293: package:react/react_client/react_interop.dart @@ + ReactJsComponentFactoryProxy memo(ReactDartFunctionComponentFactoryProxy factory, {bool Function(Map, Map) areEqual}) // Adding a top-level function is a minor change. ``` ```diff @@ line 143: package:react/hooks.dart @@ + void useEffect(dynamic Function() sideEffect, [List

[greglittlefield-wf]

Semver changes look good to me, and should not actually be considered major. Specifically

• Passing any other type into ReactDomComponentFactoryProxy would have resulted in a runtime error,
• Previously returning Context<dynamic> from createContext is considered a bug, and changing it shouldn't cause issues

[aaronlademann-wf]

+1 to https://github.com/cleandart/react-dart/pull/265/files/cf43b36..066c138 and https://github.com/cleandart/react-dart/pull/265/files/9714657..75d6611