react 5.5.1

react: ^5.5.1 copied to clipboard

• Exclude propTypes from Dart2js output.
• Deprecate registerComponent.
  • Accidentally overlooked when Component was deprecated

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

New Features

• #244 Add support for HTML Composition events
• #263 Add support for SyntheticEvent.persist()

Fixes / Updates

• #261 Stop errors thrown within the call stack of Component.render() from being swallowed
• #256 Documentation updates (thanks @barriehadfield !!!)

JS Dependency Updates

• #255 Bump acorn from 6.4.0 to 6.4.1
• #260 Bump lodash from 4.17.15 to 4.17.19

• Unpin the react-redux JS dependency to allow versions 7.1.1 and higher.
• Run over_react tests as part of the CI process to prevent another situation where changing JS dependencies regressed tightly coupled libs like over_react_redux (like the one that required the 5.2.1 hotfix).
• #242 Implement StrictMode Component

• Temporarily pin react-redux dependency to version 7.1.0 to prevent widespread test failures as a result of Provider being converted into a function component with hooks.

• #190 Fix null value handling in setStateWithUpdater
• #235 Fix null value handling in getDerivedStateFromError interop
• #238 Fix js package security vulnerability
• #236 Expose componentZone to allow overriding the zone in which Component2 lifecycle methods are run, for testing

• Improve the documentation for deprecated Component2 lifecycle methods.

Full ReactJS 16.x Component Lifecycle Support

• The new Component2 class replaces the now deprecated Component class.
  • Faster
  • Improved dev experience
  • Easier to maintain
  • Easier integration with JS libs
    • ReactJsComponentFactoryProxy makes it easy to use JS components with Dart!
      • Check out this example of MaterialUI components!
  • Supports new lifecycle methods, allowing us to use Concurrent Mode in the future
    • componentWillMount => componentDidMount
    • componentWillReceiveProps => getDerivedStateFromProps (new)
    • componentWillUpdate => getSnapshotBeforeUpdate (new)
    • componentDidCatch / getDerivedStateFromError (new)
      • Adds support for error boundaries.

Portals

• "Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component."

Improved, stable Context API

• "Context provides a way to pass data through the component tree without having to pass props down manually at every level. … Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult."

Fragments

• "A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM."
• Component.render can now return Fragments (multiple children) or other values like strings and lists instead of just a single ReactElement

New and improved ref API: React.createRef

React Redux is now included in the JS bundles and exposed via window.ReactRedux.

Full list of 5.1.0 Changes

Pull in 4.9.2 changes that were accidentally reverted as part of 5.0.0.

• #220 Fix bug where reading dataTransfer sometimes threw during synthetic event conversion

ReactJS 16.x Support

• The underlying .js files provided by this package are now ReactJS version 16.
• Support for the new / updated lifecycle methods from ReactJS 16 will be released in version 5.1.0.

Full list of 5.0.0 Changes

Full List of Breaking Changes

• #220 Fix bug where reading dataTransfer sometimes threw during synthetic event conversion

• #205 Fix context setter typing to match getter and not fail implicit_casts: false

• #202 Add bindings for transition / animation events
• #198 Updates in preparation for 5.0.0 release

• #197 Fix Dart component callback refs with typed arguments not working in Dart 2 dynamic ref argument (worked):

  Foo({'ref': (ref) => _fooRef = ref})
  

  non-dynamic ref argument (did not work):

  Foo({'ref': (FooComponent ref) => _fooRef = ref})
  

• #181: Remove unnecessary zoning on event handlers that interferes with testing

  • Handlers triggered by real events will now always be called in the root zone.

    In most cases, handlers were already running in the root zone, so this should not affect behavior. See #179 for more details.

  • When testing, you previous had to bind event handlers or callbacks triggered by event handlers to zones when using expect or expectAsync.

    var renderedInstance = renderIntoDocument(
      Button({}, {
        'onButtonPress': Zone.current.bindUnaryCallback(expectAsync((e) {
          // ...
        }, reason: 'onButtonPress not called')),
        'onClick': Zone.current.bindUnaryCallback((e) {
          expect(e.defaultPrevented, isTrue);
        }),
      }),
    );
    
    // ...
    Simulate.click(buttonNode);
    

    Now, handlers will be called in the zone they're triggered from, which makes testing events easier and more predictable:

    var renderedInstance = renderIntoDocument(
      Button({}, {
        'onButtonPress': expectAsync((e) {
          // ...
        }, reason: 'onButtonPress not called'),
        'onClick': (e) {
          expect(e.defaultPrevented, isTrue);
        },
      }),
    );
    
    // ...
    Simulate.click(buttonNode);
    

• #182: Deprecate emptyJsMap:
  • Use newObject() from dart:js_util instead

• #162: Add jsifyAndAllowInterop, deprecate some obsolete JS utils:
  • Deprecate jsify, setProperty, and getProperty; use versions from dart:js_util instead
  • Deprecate EmptyObject; use newObject from dart:js_util instead
• #170: Reformat with line length of 120 for better readability

• #162: Important Deprecations

  These deprecations are being put in place to prepare consumers for the upcoming 5.0.0 release which will include support for React JS version 16.x

  • react_server.dart and Dart VM server-side rendering
    • Server-side rendering via react_dom_server.dart, though untested, is still in place
  • Legacy context APIs
  • isMounted
  • react_test_utils.SimulateNative
  • String Component.refs
  • Component.replaceStates
  • Component.bind
  • Component.transferComponentState

• #155: Clean the lint trap.

• #159: Update the type for unconverted js style prop map to be Map<String, dynamic>.

• #152: Format all files using dartfmt.
• #153: New unconvertJsProps utility function.

• Improvement: Dart 2 compatible!