over_react

• [#500] Improve error messages for boilerplate-related issues
  • This notably includes major improvements to build/analyzer errors for function components

• [#621] Add WithTransition wrapper component to enable "controlled" transitions using props

• [#628] Fix Redux dev tools middleware console logging when hierarchicalLoggingEnabled is false

• [#620] Fix issue where uiForwardRef/memo components were being passed JSified props (by consuming react-dart's forwardRef2/memo2)
• [#618] Add makeMapStateToProps/etc. arguments to connect to enable creation of closures specific to component instances
• [#625] Address analyzer lints / hints

Bug Fixes

• [#623] Include deprecation annotations on legacy props mixins

Other Changes

• [#487] Readme Improvements
• [#619] Redux example app: Replace deprecated ExpansionPanel with new Accordion from MaterialUi

New Features

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

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

  • [#606] Add support for function components
  • [#613] Add support for memo higher order component
  • [#611] Hooks, hooks, and more hooks!
    • useState
    • useCallback
    • useContext
    • useEffect
    • useLayoutEffect
    • useReducer
    • useRef
    • useMemo
    • useImperativeHandle
    • useDebugValue

  <p><br>It works like this...</p>

  Define the component

  mixin FancyBorderProps on UiProps {
    String color;
  }
  
  UiFactory<FancyBorderProps> FancyBorder = uiFunction(
    (props) {
      // props is typed as a `FancyBorderProps`
      // whatever you return here will be rendered
      return (Dom.div()..className = 'fancy-border border-${props.color}')(
        props.children,
      );
    },
    $FancyBorderConfig, // ignore: undefined_identifier
  );
  

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

  import 'package:over_react/over_react.dart';
  import 'fancy_border.dart'; // Where your component is defined
  
  main() {
    final renderedWidget = (FancyBorder()..color = /* some color value */)(
      // put some children here!
    );
  
    react_dom.render(renderedWidget, querySelector('#idOfSomeNodeInTheDom'));
  }
  

Other Changes

• [#612] Deprecate forwardRef / add uiForwardRef as its replacement

Library Changes:

• [#499] Add PureComponentMixin
  • Allows you to build components similar to React.PureComponent!
• [#462], [#608] Redux connect performance optimizations
• [#501] Add code snippet for Redux connected components

Analyzer Plugin Changes:

• [#603] Add tests for "toggle stateful" assist
• [#604] Restore analyzer plugin Git history

• Add OverReact Analyzer Plugin (beta) ⚡️

  A Dart analyzer plugin for OverReact, bringing analysis-time checks and behavior to IDEs using the Dart Analysis Server (including JetBrains IDEs and VS Code).

  Functionality includes checking for issues that cause React warnings/errors at runtime, linting for best practices, adding "assists" for common edits to component syntax and boilerplate, and more!

• [#498] Fix missing allowInterop call in OverReactReduxDevToolsMiddleware.handleEventFromRemote

• Documentation updates

  • [#489] Docs: Update FluxUiPropsMixin example
  • [#492] Docs: Note that props can only be declared in mixins

• [#496] Emit a build error for mismatched components in the new boilerplate

• [#494] Widen analyzer range to include 0.39.x

• [#488] Add missing _ to factory assignment in boilerplate snippets
• [#490] Allow static members in concrete props/state classes in new, mixin-based boilerplate

• Introduce new and improved component boilerplate syntax 🎉

  See our migration guide for more information around these changes, including why we made them and how to convert existing components to use thew new syntax.

  The existing boilerplate syntax will be deprecated in a future release.

• [#469] Throw helpful error when connect, connectFlux, and forwardRef are passed an invalid component.

• [#468] Allow redux.dart version 4

• [#459] Add support for connected components that use w_flux stores and actions.

• connect/forwardRef HOC type checking:
  • Fix error when passing ReactElements of these HOCs into isComponentOfType
  • Treat HOC types as subtypes of the components they wrap, as expected.

• [#461] Fix accidental jsification of Map/Function Dart props in certain cases when using connect

• [#439] Add over_react_redux example app
• [#447] Add StrictMode component
• [#452] Add built_redux to Redux transition Docs
• [#453] Fix rem measurement bug

• [#435] Fix issue with ErrorBoundary that causes errors thrown within the render phase of the component lifecycle to bubble up to parent ErrorBoundary components, which resulted in entire consumer applications locking up / crashing / unmounting.
  • DEPRECATIONS: ErrorBoundaryMixin, ErrorBoundaryPropsMixin and ErrorBoundaryStateMixin are deprecated and will be removed in the 4.0.0 release.
    • To create a custom error boundary moving forward, create an HOC that wraps around the ErrorBoundary component instead.
• [#433] Refactor propTypes tests
• [#440] Make over_react_redux tests compatible with version ^7.1.1 of the redux JS library
• [#442] Remove Dart 2.4.1 phase from the CI build
• [#428] Add examples of components that have render methods that return Fragment, List, num and String

• Remove dead code in UiProps.build that was unnecessarily slowing down dart2js compilation
• Fix README typos

• Fix ErrorBoundary infinite loop when multiple errors are thrown at the same time during remount
• Fix connect's mapStateToOwnPropsWithProps not getting called

• Replace usage / mention of UiComponent2.getPropKey which had to be deprecated in the 3.1.2 release.
• Add a stub for UiComponent2.redraw with a deprecated annotation so that consumers would correctly see it as being deprecated.
  • Previously, this method would not show up as deprecated because certain IDEs would default to the base implementation (Component.redraw) - instead of the newer, deprecated Component2.redraw.

• Fixes an issue that prevents UiComponent instances from being declared as sub-types of UiComponent2 instances via the subtypeOf argument in a Component2() annotation.

• Restore the public getPropKey function that was accidentally made private in the 3.1.0 release.

• Restore the xmlLang, xmlSpace, y1, y2, y members that were accidentally removed from SvgProps in the 3.1.0 release.

Full React JS 16.x Component Lifecycle Support

• The new UiComponent2 classes^＊ replace the now deprecated UiComponent classes.

  ^＊(UiComponent2, UiStatefulComponent2, FluxUiComponent2)

  • Faster
    • Initial renders ~10% faster
    • Re-renders ~7 - 30% faster
  • Improved developer experience

    • Props and state values now show up in the React DevTools just as they would if you were using React JS, and primitive values (strings, numbers, booleans) can be edited live, just like in React JS!

  • 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
    • <s>componentWillMount</s> => componentDidMount
    • <s>componentWillReceiveProps</s> => getDerivedStateFromProps (new)
    • <s>componentWillUpdate</s> => getSnapshotBeforeUpdate (new)
    • componentDidCatch / getDerivedStateFromError (new)
      • Adds support for error boundaries.
      • OverReact also provides an ErrorBoundary component out of the box that you can wrap around your components, and an ErrorBoundaryMixin that you can use as a starting point to build your own custom error boundary component!

Learn more about upgrading to UiComponent2

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."

New over_react_redux.dart Library

• To take full advantage of the new stable Context API, we have built atop the awesome redux.dart library to make it easy to set up redux provider(s) / consumer(s) for OverReact components that enable granular, targeted updates!
  • Check out some examples by cloning this project locally, running webdev serve from the root of the project, and navigating to http://localhost:8080/over_react_redux/.
  • Use it in your project by upgrading your UiComponents to UiComponent2 and importing package:over_react/over_react_redux.dart!
• We've even got some sweet redux dev tools you can use to make the inspection of connected state a breeze!

Learn more about using over_react_redux.dart

Portals

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

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."
• UiComponent.render() can now return a ReactFragment (multiple children) or other values like strings and lists instead of just a single ReactElement.

No more Dart 1 SDK support

• With the release of 3.1.0 comes the end of our +dart1 / +dart2 dual releases that we have been maintaining for over a year. Time to upgrade to Dart 2!

Full list of 3.1.0 Changes