search

Workiva / react-dart

Dart Bindings for React JS
BSD 2-Clause "Simplified" License
412 stars 67 forks source link

Release react 5.0.0 (stable) #224

Closed aaronlademann-wf closed 4 years ago

aaronlademann-wf commented 4 years ago

This stable, major release of react includes:

ReactJS 16.x Support

Full list of 5.0.0 Changes

🚨 NOTE: This will be the last release of react that supports the Dart 1 SDK. 🚨

Breaking Changes

ReactJS 16 breaking changes

Source: https://reactjs.org/blog/2017/09/26/react-v16.0.html#breaking-changes

Breakage Migration path
Errors in the render and lifecycle methods now unmount the component tree by default. To prevent this, add error boundaries to the appropriate places in the UI.This can be done easily via the OverReact ErrorBoundary utility component.
Unitless props.style string values are no longer auto-converted to px.This has been a warning since React 15.0.0. Change values from Strings to nums, or add a unit explicitly to string
react_dom.render calls within React lifecycle methods are no longer guaranteed to be synchronous, and may return null Either: Use Portals to render content in a different DOM treeUpdate code to handle async mounting
setState callbacks (second argument) now fire immediately after componentDidMount / componentDidUpdate instead of after all components have rendered. Transfer callback logic into componentDidUpdate.
It is not safe to re-render into a container that was modified by something other than React. This worked previously in some cases but was never supported. We now emit a warning in this case. Instead you should clean up your component trees using unmountComponentAtNode.
Bool values used in non-bool props are no longer stringified, and are ignored. In most cases, passing bool values to these props is a programmer error, and should be replaced with the correct attribute values. .toString() the value in any places where "false" or "true" are needed.
Previously, changing the ref to a component would always detach the ref before that component’s render is called. Now, we change the ref later, when applying the changes to the DOM. Should not affect most usages.
When replacing <A /> with <B />, B.componentWillMount now always happens before A.componentWillUnmount. Previously, A.componentWillUnmount could fire first in some cases. Should not affect most usages. If it does, switching from componentWillMount to componentDidMount should resolve the issue, and will be functionally equivalent in most cases.

Dart API breaking changes

Breakage Migration path
The react_server.dart entrypoint has been removed None
The react_test.dart entrypoint has been removed None
Component.bind is removed Set up event handler manually.
react_test_utils.SimulateNative is removed Use react_test_utils.Simulate instead.
jsify is removed from js_interop_helpers.dart Use dart:js, and replace jsify with JsObject.jsify.
getProperty / setProperty are removed from js_interop_helpers.dart Use the same functions from dart:js instead.
ReactComponentFactory is removed Use ReactComponentFactoryProxy instead.
emptyJsMap is removed Use newObject() from dart:js_util instead.
EmptyObject is removed Use the class instance created by calling newObject() from dart:js_util instead.
ReactComponent.isMounted is removed Set up your own flags using component lifecycle methods.
semveraudit-wf commented 4 years ago

Public API Changes

Release PR detected; using previous release (4.9.2) as the diff base.

Recommendation: **:bangbang: Major version bump (fyi @Workiva/semver-audit-group )** ```diff @@ line 24: package:react/react_server.dart @@ - typedef String OwnerFactory([String ownerId, num position, String key]); // Removing a typedef is a major change. ``` ```diff @@ line 39: package:react/react_client/js_interop_helpers.dart @@ - _GetPropertyFn get getProperty; // Removing a top-level variable is a major change. ``` ```diff @@ line 285: package:react/react_client/react_interop.dart @@ - ReactClassConfig createReactDartComponentClassConfig(ReactDartInteropStatics dartInteropStatics, ComponentStatics componentStatics, [JsComponentConfig jsConfig]); // Removing a top-level function is a major change. ``` ```diff - react/react_test.dart // Removing an entry point is a major change. ``` ```diff - react/react_server.dart // Removing an entry point is a major change. ```
Click to see 30 more API Changes

--- ```diff @@ line 36: package:react/react_server.dart @@ - typedef Component ComponentFactory(); // Removing a typedef is a major change. ``` ```diff @@ line 411: package:react/react_server.dart @@ - void setServerConfiguration(); // Removing a top-level function is a major change. ``` ```diff @@ line 65: package:react/react_client/js_interop_helpers.dart @@ - _SetPropertyFn get setProperty; // Removing a top-level variable is a major change. ``` ```diff @@ line 639: package:react/react_client.dart @@ - SyntheticDataTransfer syntheticDataTransferFactory(Object dt); + SyntheticDataTransfer syntheticDataTransferFactory(events.SyntheticDataTransfer dt); // `type` of `dt` has changed. // Changing a parameter signature is a major change. ``` ```diff @@ line 323: package:react/react_test_utils.dart @@ - bool isElementOfType(dynamic element, ReactComponentFactory componentFactory); // Removing a top-level function is a major change. ``` ```diff @@ line 293: package:react/react_test_utils.dart @@ - bool isCompositeComponentWithType(instance, ReactComponentFactory componentFactory); // Removing a top-level function is a major change. ``` ```diff @@ line 93: package:react/react_client/js_interop_helpers.dart @@ - EmptyObject jsify(Map map); // Removing a top-level function is a major change. ``` ```diff @@ line 41: package:react/react_test.dart @@ - void setTestConfiguration(); // Removing a top-level function is a major change. ``` ```diff @@ line 33: package:react/react_client.dart @@ - typedef ReactElement ReactComponentFactory(Map props, [dynamic children]); // Removing a typedef is a major change. ``` ```diff @@ line 29: package:react/react_test_utils.dart @@ - dynamic getComponentType(ReactComponentFactory componentFactory); // Removing a top-level function is a major change. ``` ```diff @@ line 343: package:react/react_test_utils.dart @@ - List scryRenderedComponentsWithType(tree, ReactComponentFactory componentFactory); // Removing a top-level function is a major change. ``` ```diff @@ line 31: package:react/react_client.dart @@ - EmptyObject get emptyJsMap; // Removing a top-level variable is a major change. ``` ```diff @@ line 30: package:react/react_server.dart @@ - typedef OwnerFactory ReactComponentFactory(Map props, [dynamic children]); // Removing a typedef is a major change. ``` ```diff @@ line 33: package:react/react_test.dart @@ - dynamic initializeComponent(Component component, [Map props = const {}, List children, redraw, Ref ref]); // Removing a top-level function is a major change. ``` ```diff @@ line 257: package:react/react_test_utils.dart @@ - dynamic findRenderedComponentWithType(tree, ReactComponentFactory componentFactory); // Removing a top-level function is a major change. ``` ```diff @@ line 31: package:react/react_client/react_interop.dart @@ class ReactDom {} + ReactPortal createPortal(dynamic children, Element container); // Adding abstract members breaks all subclasses. ``` ```diff @@ line 150: package:react/react_client/react_interop.dart @@ class ReactComponent {} - bool isMounted(); // Removing a method is a major change. ``` ```diff @@ line 10: package:react/react_test.dart @@ - class MarkupDescription {} // Removing a class is a major change. - List get children; // Removing a field is a major change. - String get tag; // Removing a field is a major change. - MarkupDescription(this.tag, this.props, this.children); // Removing a constructor is a major change. - Map get props; // Removing a field is a major change. From dart:core/object.dart - dynamic noSuchMethod(Invocation invocation); // Removing a method is a major change. - bool ==(other); // Removing a method is a major change. - Type get runtimeType; // Removing a field is a major change. - String toString(); // Removing a method is a major change. - int get hashCode; // Removing a field is a major change. ``` ```diff @@ line 684: package:react/react.dart @@ class SyntheticClipboardEvent extends SyntheticEvent {} - SyntheticClipboardEvent(bubbles, cancelable, currentTarget, _defaultPrevented, _preventDefault, stopPropagation, eventPhase, isTrusted, nativeEvent, target, timeStamp, type, this.clipboardData); + SyntheticClipboardEvent(bool bubbles, bool cancelable, dynamic currentTarget, bool defaultPrevented, dynamic preventDefault, dynamic stopPropagation, num eventPhase, bool isTrusted, dynamic nativeEvent, dynamic target, num timeStamp, String type, this.clipboardData); // `type` of `bubbles` has changed. // Changing a parameter signature is a major change. ``` ```diff @@ line 693: package:react/react.dart @@ class SyntheticKeyboardEvent extends SyntheticEvent {} - SyntheticKeyboardEvent(bubbles, cancelable, currentTarget, _defaultPrevented, _preventDefault, stopPropagation, eventPhase, isTrusted, nativeEvent, target, timeStamp, type, this.altKey, this.char, this.charCode, this.ctrlKey, this.locale, this.location, this.key, this.keyCode, this.metaKey, this.repeat, this.shiftKey); + SyntheticKeyboardEvent(bool bubbles, bool cancelable, dynamic currentTarget, bool defaultPrevented, dynamic preventDefault, dynamic stopPropagation, num eventPhase, bool isTrusted, dynamic nativeEvent, dynamic target, num timeStamp, String type, this.altKey, this.char, this.charCode, this.ctrlKey, this.locale, this.location, this.key, this.keyCode, this.metaKey, this.repeat, this.shiftKey); // `type` of `bubbles` has changed. // Changing a parameter signature is a major change. ``` ```diff @@ line 734: package:react/react.dart @@ class SyntheticFocusEvent extends SyntheticEvent {} - SyntheticFocusEvent(bubbles, cancelable, currentTarget, _defaultPrevented, _preventDefault, stopPropagation, eventPhase, isTrusted, nativeEvent, target, timeStamp, type, this.relatedTarget); + SyntheticFocusEvent(bool bubbles, bool cancelable, dynamic currentTarget, bool defaultPrevented, dynamic preventDefault, dynamic stopPropagation, num eventPhase, bool isTrusted, dynamic nativeEvent, dynamic target, num timeStamp, String type, this.relatedTarget); // `type` of `bubbles` has changed. // Changing a parameter signature is a major change. ``` ```diff @@ line 81: package:react/react_client/js_interop_helpers.dart @@ - class EmptyObject {} // Removing a class is a major change. - EmptyObject(); // Removing a constructor is a major change. From dart:core/object.dart - Type get runtimeType; // Removing a field is a major change. - String toString(); // Removing a method is a major change. - dynamic noSuchMethod(Invocation invocation); // Removing a method is a major change. - bool ==(other); // Removing a method is a major change. - int get hashCode; // Removing a field is a major change. ``` ```diff @@ line 15: package:react/react.dart @@ class Component {} - dynamic bind(key); // Removing a method is a major change. ``` ```diff @@ line 889: package:react/react.dart @@ class SyntheticUIEvent extends SyntheticEvent {} - SyntheticUIEvent(bubbles, cancelable, currentTarget, _defaultPrevented, _preventDefault, stopPropagation, eventPhase, isTrusted, nativeEvent, target, timeStamp, type, this.detail, this.view); + SyntheticUIEvent(bool bubbles, bool cancelable, dynamic currentTarget, bool _defaultPrevented, dynamic _preventDefault, dynamic stopPropagation, num eventPhase, bool isTrusted, dynamic nativeEvent, dynamic target, num timeStamp, String type, this.detail, this.view); // `type` of `bubbles` has changed. // Changing a parameter signature is a major change. ``` ```diff @@ line 806: package:react/react.dart @@ class SyntheticTouchEvent extends SyntheticEvent {} - SyntheticTouchEvent(bubbles, cancelable, currentTarget, _defaultPrevented, _preventDefault, stopPropagation, eventPhase, isTrusted, nativeEvent, target, timeStamp, type, this.altKey, this.changedTouches, this.ctrlKey, this.metaKey, this.shiftKey, this.targetTouches, this.touches); + SyntheticTouchEvent(bool bubbles, bool cancelable, dynamic currentTarget, bool defaultPrevented, dynamic preventDefault, dynamic stopPropagation, num eventPhase, bool isTrusted, dynamic nativeEvent, dynamic target, num timeStamp, String type, this.altKey, this.changedTouches, this.ctrlKey, this.metaKey, this.shiftKey, this.targetTouches, this.touches); // `type` of `bubbles` has changed. // Changing a parameter signature is a major change. ``` ```diff @@ line 743: package:react/react.dart @@ class SyntheticFormEvent extends SyntheticEvent {} - SyntheticFormEvent(bubbles, cancelable, currentTarget, _defaultPrevented, _preventDefault, stopPropagation, eventPhase, isTrusted, nativeEvent, target, timeStamp, type); + SyntheticFormEvent(bool bubbles, bool cancelable, dynamic currentTarget, bool defaultPrevented, dynamic preventDefault, dynamic stopPropagation, num eventPhase, bool isTrusted, dynamic nativeEvent, dynamic target, num timeStamp, String type); // `type` of `bubbles` has changed. // Changing a parameter signature is a major change. ``` ```diff @@ line 759: package:react/react.dart @@ class SyntheticMouseEvent extends SyntheticEvent {} - SyntheticMouseEvent(bubbles, cancelable, currentTarget, _defaultPrevented, _preventDefault, stopPropagation, eventPhase, isTrusted, nativeEvent, target, timeStamp, type, this.altKey, this.button, this.buttons, this.clientX, this.clientY, this.ctrlKey, this.dataTransfer, this.metaKey, this.pageX, this.pageY, this.relatedTarget, this.screenX, this.screenY, this.shiftKey); + SyntheticMouseEvent(bool bubbles, bool cancelable, dynamic currentTarget, bool defaultPrevented, dynamic preventDefault, dynamic stopPropagation, num eventPhase, bool isTrusted, dynamic nativeEvent, dynamic target, num timeStamp, String type, this.altKey, this.button, this.buttons, this.clientX, this.clientY, this.ctrlKey, this.dataTransfer, this.metaKey, this.pageX, this.pageY, this.relatedTarget, this.screenX, this.screenY, this.shiftKey); // `type` of `bubbles` has changed. // Changing a parameter signature is a major change. ``` ```diff @@ line 899: package:react/react.dart @@ class SyntheticWheelEvent extends SyntheticEvent {} - SyntheticWheelEvent(bubbles, cancelable, currentTarget, _defaultPrevented, _preventDefault, stopPropagation, eventPhase, isTrusted, nativeEvent, target, timeStamp, type, this.deltaX, this.deltaMode, this.deltaY, this.deltaZ); + SyntheticWheelEvent(bool bubbles, bool cancelable, dynamic currentTarget, bool defaultPrevented, dynamic preventDefault, dynamic stopPropagation, num eventPhase, bool isTrusted, dynamic nativeEvent, dynamic target, num timeStamp, String type, this.deltaX, this.deltaMode, this.deltaY, this.deltaZ); // `type` of `bubbles` has changed. // Changing a parameter signature is a major change. ``` ```diff @@ line 137: package:react/react_test_utils.dart @@ - class SimulateNative {} // Removing a class is a major change. - void submit(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void dragStart(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void contextMenu(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void drop(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void dragEnd(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void focus(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void keyUp(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void transitionEnd(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void blur(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void touchCancel(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void keyDown(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void dragEnter(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void doubleClick(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void mouseUp(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void animationEnd(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void dragOver(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void mouseMove(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void scroll(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void input(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void copy(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void dragLeave(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void mouseDown(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void animationIteration(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void click(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void drag(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void cut(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void wheel(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void mouseOver(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void paste(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void mouseOut(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void touchStart(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void animationStart(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void touchEnd(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - void touchMove(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. - SimulateNative(); // Removing a constructor is a major change. - void dragExit(componentOrNode, [Map eventData = const {}]); // Removing a method is a major change. From dart:core/object.dart - bool ==(other); // Removing a method is a major change. - int get hashCode; // Removing a field is a major change. - Type get runtimeType; // Removing a field is a major change. - dynamic noSuchMethod(Invocation invocation); // Removing a method is a major change. - String toString(); // Removing a method is a major change. ``` ```diff @@ line 280: package:react/react_client/react_interop.dart @@ + void throwErrorFromJS(error); // Adding a top-level function is a minor change. ``` ---

2 more changes could not be displayed on this comment. Showing results for d7b251b8994471b4d14f5f1d6985a42c2d4ffc4f > Reported by the dart semver audit client 2.0.1
kealjones-wk commented 4 years ago

+1