facebook / react-strict-dom

React Strict DOM (RSD) standardizes the development of styled React components for web and native.
https://facebook.github.io/react-strict-dom
MIT License
3.2k stars 161 forks source link

CSS transition polyfill initial state improvement #174

Closed necolas closed 4 months ago

necolas commented 4 months ago

Adds support for CSS transitions when an element doesn't include transitions in the initial state. This supports the use case where a mounted component is updated to add CSS transition styles. It should be re-rendered as an Animated component instead of printing an error about not having an initial transition state.

The 'useStyleTransition' hook is also moved out of 'createStrictDOMComponent' and into the 'useStyleProps' hook.

github-actions[bot] commented 4 months ago

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better. Results Base Patch Ratio
react-strict-dom/dist/dom/index.js
· compressed 2,563 2,563 1.00
· minified 8,788 8,788 1.00
react-strict-dom/dist/dom/runtime.js
· compressed 818 818 1.00
· minified 2,330 2,330 1.00
react-strict-dom/dist/native/index.js
· compressed 14,635 14,596 1.00 -
· minified 53,347 52,933 0.99 -
github-actions[bot] commented 4 months ago

workflow: benchmarks/perf (native)

Comparison of performance test results, measured in operations per second. Larger is better. Results Base Patch Ratio
css.create
· small 1,151,073 1,122,222 0.97 -
· small with units 442,330 446,663 1.01 +
· small with variables 679,067 681,464 1.00 +
· several small 324,312 329,594 1.02 +
· large 216,739 216,318 1.00 -
· large with polyfills 153,345 151,404 0.99 -
· complex 104,683 105,030 1.00 +
· unsupported 230,056 232,363 1.01 +
css.createTheme
· simple theme 228,863 229,329 1.00 +
· polyfill theme 215,673 216,242 1.00 +
css.props
· small 237,258 237,121 1.00 -
· small with units 187,617 186,913 1.00 -
· small with variables 105,596 105,022 0.99 -
· small with variables of units 74,707 74,864 1.00 +
· large 103,068 102,846 1.00 -
· large with polyfills 25,975 26,027 1.00 +
· complex 18,071 18,091 1.00 +
· unsupported 75,234 74,620 0.99 -
· simple merge 161,765 159,351 0.99 -
· wide merge 13,597 13,708 1.01 +
· deep merge 13,411 13,469 1.00 +
· themed merge 31,318 31,608 1.01 +