- Add Dart wrapper for React lazy
- Internal release tooling changes
- Internal release tooling changes
- Internal release tooling changes
- Tests - switch from mockito to mocktail
Add a new ReactNode
type, which aliases Object?
to mimic the React JS Typescript type.
Breaking change - fix nullability/typings for ReactDom.findDomNode
and ReactDom.render
from package:react/react_client/react_interop.dart
:
-Element findDOMNode(dynamic object);
+Element? findDOMNode(dynamic object);
-ReactComponent render(ReactElement component, Element element);
+dynamic render(dynamic component, Element element);
The previous typings were incorrect:
findDOMNode
returns null in many cases, but its return type was incorrectly non-nullable.render
returns null for some cases (function components,null
),Element
for DOM components, andCharacterData
for strings and numbers, but was incorrectly typed as non-nullableReactComponent
. Thecomponent
argument also acceptsnull
and other "ReactNode" arguments to rendered, but its type is incorrectly non-nullable and restricted to justReactElement
.
These typings only affect these APIs under the ReactDom
class in package:react/react_client/react_interop.dart, and not the top-level Function
-typed findDOMNode
and render
APIs exported from package:react/react_dom.dart
, which most consumers use.
Because these typings were incorrect and will lead to runtime errors in some cases, and the changes have a low likelihood of causing breakages, we feel it's appropriate to release these changes as a patch.
- Migrate to null safety
- Remove deprecated APIs (see below)
- Minor API breakages to support null safety migration and improve typing (see below)
ReducerHook
andStateHook
class constructors (use hook functions instead)Ref
class constructors: default anduseRefInit
(usecreateRef
anduseRef
instead)forwardRef
(useforwardRef2
instead)main
(usehtmlMain
instead)memo
(usememo2
instead)- APIs that have been no-ops since react-dart 6.0.0
SyntheticEvent
memberspersist
andisPersistent
unconvertJsEventHandler
- APIs that were never intended for public use:
ComponentStatics
,ComponentStatics2
InteropContextValue
JsComponentConfig
,JsComponentConfig2
JsError
JsPropValidator
React.createFactory
ReactDartContextInternal
ReactDartInteropStatics
ReactElementStore
createReactDartComponentClass
,createReactDartComponentClass2
markChildValidated
markChildrenValidated
ReducerHook
,StateHook
, andRef
are now@sealed
and may not be inherited from- All
PropValidatorInfo
arguments are required
- Top-level DOM factories exported from
package:react/react.dart
(react.div
,react.span
, etc.) are now typed asReactDomComponentFactoryProxy
instead ofdynamic
- The return types of
ReactComponentFactoryProxy
methodscall
andbuild
are nowReactElement
instead ofdynamic
- This matches the type returned from
build
for all subclasses, which is whatβs returned by call, and reflects the type returned at runtime - Has potential to cause some static analysis issues, but for the most part should not affect anything since
ReactElement
is typically treated as an opaque type
- This matches the type returned from
-
Changes to public-but-internal APIs:
ReactDartComponentInternal
constructor now takes a required argument,props
field isfinal
initComponentInternal
arguments are typed to reflect runtime assumptions
-
Component
andComponent2
membersprops
/state
/jsThis
are now late, and will now throw instead of being null if accessed before initialized.It should be very uncommon for components to be affected by this change, and any affected components are likely doing something wrong to begin with.
These fields are only uninitialized:
- for mounting component instances:
- in component class constructors (which we don't encourage)
- in component class field initializers (except for lazy
late
ones)
- in "static" lifecycle methods like
getDerivedStateFromProps
anddefaultProps
Examples of code affected:
class FooComponent extends Component2 { // `props` would have always been null when this is initialized, but in 7.0.0 accessing it throws. final something = (props ?? {})['something']; // We strongly discourage declaring Dart constructors in component classes; // for initialization logic, use componentDidMount instead. FooComponent() { // `props` would have always been null here, but in 7.0.0 accessing it throws. print(props); } @override getDerivedStateFromProps(nextProps, prevState) { // `props` would have always been null here, but in 7.0.0 accessing it throws. print(props); return {}; } }
- for mounting component instances:
- #372, #374 Add and update deprecations in preparation for 7.0.0 release, add WIP changelog
- #372 Add APIs in preparation for null safety:
htmlMain
- replacement for deprecatedreact.main
, to be removed in 7.0.0useRefInit
-useRef
can't be used to create non-nullable-typed refs, butuseRefInit
can
- #366 Fix lints and eliminate most implicit casts
- #357 Export Suspense component
- #354 Raise analyzer minimum & unpin meta
- #355 Pin mockito 5
- #356 Unpin mockito, fix CI
- #350 Return
jsUndefined
instead ofnull
when children prop is empty
- #344 Fix identityHashCode error when forwarding props containing JSX children
- #336 Publish JS bundles to Workiva CDN
- #333 Remove old, unused file from bin/
- #327 Fix stable ci build
- #328 Work around $identityHash being added to JS objects passed into jsifyAndAllowInterop
- #308 Bump elliptic from 6.5.3 to 6.5.4
- #311 Bump ssri from 6.0.1 to 6.0.2
- #312 Bump lodash from 4.17.20 to 4.17.21
- #313 Bump browserslist from 4.16.1 to 4.16.6
- #318 Bump path-parse from 1.0.6 to 1.0.7
- #323 Raise the Dart SDK minimum to at least 2.11.0
- #315 Upgrade CI to run using Dart 2.13
- #309 Update README.md
- #325 Upgrade dependency_validator
- #321 Fix missing Dart component names in error boundary
componentStack
- #319 Add
baseURI
polyfill for IE 11 compatibility on Dart 2.13.
- #316 Export
generateJsProps
.
- #305 Fix
JsBackedMap
for Dart 2.12.
This stable, major release of react includes:
The underlying .js
files provided by this package are now ReactJS version 17.0.1
.
- #289 Update most deprecations that were slated for removal in v6.0.0 to be slated for removal in v7.0.0 instead. To keep the migration to v6.0.0 as easy as possible, only APIs that are known to be completely unused will be removed in v6.0.0. Therefore, most APIs that were marked for removal in v6.0.0 will remain until the v7.0.0 release. This PR updated deprecation annotations to reflect this.
- #287 Deprecate
SyntheticEvent.isFormEvent
. Because form events do not exist as their own type in ReactJS, this helper will be removed in v6.0.0. Instead, check for the expected form event types.
- #282 Add
SyntheticEvent
helpers that eliminate the need to use synthetic event class constructors. Additionally, added utilities to assist in type checking events without manually using theis
keyword.
- #280 Update React dev JS files to include a workaround to a DDC bug when using Chrome 86+ (fixed in Dart 2.9.3)
- #275 Add
forwardRef2
/memo2
to fix "jsification" of Dart props- Deprecates
forwardRef
/memo
- Deprecates
- #274 (Security update) Bump serialize-javascript JS dependency to version
3.1.0
- #258 Exclude
propTypes
from Dart2js output.- Deprecate
registerComponent
.- Accidentally overlooked when
Component
was deprecated
- Accidentally overlooked when
- Deprecate
- #276 Allow null ref value in
useImperativeHandle
hook
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!
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
- 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 ofProvider
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 deprecatedComponent
class.- Faster
- Improved dev experience
- Easier to maintain
- Easier integration with JS libs
ReactJsComponentFactoryProxy
makes it easy to use JS components with Dart!
- 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 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."
- "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
.
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
.
- #220 Fix bug where reading
dataTransfer
sometimes threw during synthetic event conversion
- #205 Fix
context
setter typing to match getter and not failimplicit_casts: false
- #197 Fix Dart component callback refs with typed arguments not working in Dart 2
dynamic ref argument (worked):
non-dynamic ref argument (did not work):
Foo({'ref': (ref) => _fooRef = ref})
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
orexpectAsync
.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()
fromdart:js_util
instead
- Use
- #162: Add
jsifyAndAllowInterop
, deprecate some obsolete JS utils:- Deprecate
jsify
,setProperty
, andgetProperty
; use versions fromdart:js_util
instead - Deprecate
EmptyObject
; usenewObject
fromdart:js_util
instead
- Deprecate
- #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.xreact_server.dart
and Dart VM server-side rendering- Server-side rendering via
react_dom_server.dart
, though untested, is still in place
- Server-side rendering via
- Legacy
context
APIs isMounted
react_test_utils.SimulateNative
- String
Component.ref
s Component.replaceState
sComponent.bind
Component.transferComponentState
-
#155: Clean the lint trap.
- #159: Update the type for unconverted js
style
prop map to beMap<String, dynamic>
.
- Improvement: Dart 2 compatible!