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

Add 'compat' API to wrap RN elements #232

Closed necolas closed 2 weeks ago

necolas commented 3 weeks ago

Although it's not recommended, we have internal component forks that need to delegate to RN elements within RSD trees. This API makes that possible, while preserving the props conversion and rendering the necessary contexts to allow switching back to RSD elements within the subtree.

As implemented, it currently requires a type annotation to be used on the nativeProps arg.

// Foo.native.js
import { compat } from 'react-strict-dom'
import { View } from 'react-native'

function Foo(props) {
  return (
    <compat.native aria-label={props.label} style={styles.foo}>
      {(nativeProps: React.PropsOf<View>) => <View {...nativeProps}>{/**/}</View>}
    </compat.native>
  )
}
github-actions[bot] commented 3 weeks 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,488 2,488 1.00
· minified 8,586 8,586 1.00
react-strict-dom/dist/dom/runtime.js
· compressed 850 850 1.00
· minified 2,404 2,404 1.00
react-strict-dom/dist/native/index.js
· compressed 15,651 15,860 1.01 +
· minified 58,387 59,389 1.02 +
github-actions[bot] commented 3 weeks 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,134,413 1,155,683 1.02 +
· small with units 447,480 447,384 1.00 -
· small with variables 699,163 684,026 0.98 -
· several small 327,514 326,598 1.00 -
· large 215,292 215,975 1.00 +
· large with polyfills 151,016 149,260 0.99 -
· complex 103,077 102,149 0.99 -
· unsupported 224,628 224,540 1.00 -
css.createTheme
· simple theme 225,409 225,645 1.00 +
· polyfill theme 212,319 211,401 1.00 -
css.props
· small 247,021 247,026 1.00 +
· small with units 192,930 192,814 1.00 -
· small with variables 106,285 107,130 1.01 +
· small with variables of units 75,580 75,434 1.00 -
· large 105,167 105,189 1.00 +
· large with polyfills 37,432 37,181 0.99 -
· complex 24,095 23,869 0.99 -
· unsupported 154,859 154,862 1.00 +
· simple merge 165,225 164,754 1.00 -
· wide merge 18,223 18,116 0.99 -
· deep merge 17,922 17,878 1.00 -
· themed merge 32,368 32,546 1.01 +