search

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 support for Media Queries to stylex shim #149

Closed necolas closed 5 months ago

necolas commented 5 months ago

Updates the Media Query support to modern stylex syntax.

Plus 25-35% faster results for css.props benchmarks.

github-actions[bot] commented 5 months ago

compressed-size: runtime library

Size change: -0.22 kB Total size: 19.07 kB

Filename: gzip (minify) kB size kB change % change
./packages/react-strict-dom/dist/native/index.js 15.18 (49.01) -0.22 (-0.79) -1.4% (-1.6%) 🟢
View unchanged | Filename: gzip (minify) | kB size | kB change | % change | | :--- | :--- | :--- | :--- | | `./packages/react-strict-dom/dist/dom/index.js` | **2.94** (8.79) | **0.00** (0.00) | **0.0%** (0.0%) | | `./packages/react-strict-dom/dist/dom/runtime.js` | **0.95** (2.33) | **0.00** (0.00) | **0.0%** (0.0%) |
github-actions[bot] commented 5 months ago

RSD benchmarks (for native)

Base e58795c2

react-strict-dom@0.0.15 benchmarks npm run build:benchmarks && node --jitless benchmarks/run.js

react-strict-dom@0.0.15 build:benchmarks rollup --config ./tools/rollup-benchmarks.config.js

css.create ops/sec deviation (%) samples
small 1,167,997 0.23 95
small with units 442,877 0.29 94
small with variables 677,006 1.03 95
several small 320,178 2.07 94
large 214,661 0.87 94
large with polyfills 145,167 0.63 97
complex 107,111 0.19 95
unsupported 207,221 0.23 96
css.createTheme ops/sec deviation (%) samples
simple theme 221,895 0.19 98
polyfill theme 209,419 0.43 95
css.props ops/sec deviation (%) samples
small 172,076 0.51 91
small with units 147,446 0.24 95
small with variables 78,559 0.20 94
small with variables of units 59,979 0.28 95
large 68,406 0.36 93
large with polyfills 20,398 0.20 93
complex 15,876 0.40 94
unsupported 53,793 0.30 94
simple merge 139,612 0.31 95
wide merge 11,678 0.41 94
deep merge 11,586 0.31 93
internals ops/sec deviation (%) samples
extractStyleThemes 461,103 0.14 91
flattenStyle 652,544 0.38 93

Patch 2fd67d99

react-strict-dom@0.0.15 benchmarks npm run build:benchmarks && node --jitless benchmarks/run.js

react-strict-dom@0.0.15 build:benchmarks rollup --config ./tools/rollup-benchmarks.config.js

css.create ops/sec deviation (%) samples
small 1,188,921 0.22 94
small with units 445,691 0.29 96
small with variables 666,689 0.32 95
several small 331,083 0.29 94
large 219,547 0.14 95
large with polyfills 144,538 1.12 96
complex 111,342 0.50 96
unsupported 209,710 1.61 93
css.createTheme ops/sec deviation (%) samples
simple theme 221,963 0.17 95
polyfill theme 210,643 0.18 96
css.props ops/sec deviation (%) samples
small 226,305 0.51 89
small with units 195,312 0.24 93
small with variables 105,438 0.24 95
small with variables of units 77,038 0.22 96
large 89,972 0.55 93
large with polyfills 25,314 0.29 94
complex 19,104 1.48 93
unsupported 66,298 0.24 94
simple merge 182,330 0.24 95
wide merge 14,569 0.18 95
deep merge 14,387 0.28 93
internals ops/sec deviation (%) samples
extractStyleThemes 462,212 0.18 93
flattenStyle 653,992 0.18 98
necolas commented 5 months ago

RSD benchmarks (for native)

Summary of https://github.com/facebook/react-strict-dom/pull/149#issuecomment-2184246539

Suite BASE PATCH Ratio
css.create      
small 1,167,997 1,185,168 1.01
small with units 442,877 451,649 1.02
small with variables 677,006 685,491 1.01
several small 320,178 333,809 1.04
large 214,661 220,777 1.03
large with polyfills 145,167 154,434 1.06
complex 107,111 111,304 1.04
unsupported 207,221 229,945 1.11
css.createTheme      
simple theme 221,895 223,425 1.01
polyfill theme 209,419 211,883 1.01
css.props      
small 172,076 231,403 1.34
small with units 147,446 194,007 1.32
small with variables 78,559 106,967 1.36
small with variables of units 59,979 77,279 1.29
large 68,406 92,929 1.36
large with polyfills 20,398 26,184 1.28
complex 15,876 19,649 1.24
unsupported 53,793 74,362 1.38
simple merge 139,612 181,741 1.30
wide merge 11,678 14,853 1.27
deep merge 11,586 14,777 1.28
internals      
extractStyleThemes 461,103 461,059 1.00
flattenStyle 652,544 655,972 1.01
github-actions[bot] commented 5 months ago

RSD benchmarks (for native)

Base e58795c2

react-strict-dom@0.0.15 benchmarks npm run build:benchmarks && node --jitless benchmarks/run.js

react-strict-dom@0.0.15 build:benchmarks rollup --config ./tools/rollup-benchmarks.config.js

css.create ops/sec deviation (%) samples
small 1,162,507 1.45 93
small with units 453,566 0.25 96
small with variables 680,421 0.12 96
several small 333,413 0.28 93
large 219,489 0.22 97
large with polyfills 144,384 0.59 93
complex 106,954 0.16 95
unsupported 207,375 0.30 96
css.createTheme ops/sec deviation (%) samples
simple theme 223,230 0.17 95
polyfill theme 211,809 0.15 94
css.props ops/sec deviation (%) samples
small 171,387 0.49 92
small with units 147,251 0.25 93
small with variables 77,967 0.25 96
small with variables of units 59,875 0.28 94
large 67,934 0.76 93
large with polyfills 20,440 0.23 96
complex 15,931 0.33 95
unsupported 54,216 0.22 94
simple merge 140,187 0.28 95
wide merge 11,693 0.17 95
deep merge 11,591 0.28 94
internals ops/sec deviation (%) samples
extractStyleThemes 459,172 0.29 94
flattenStyle 653,070 0.16 97

Patch 59fa9295

react-strict-dom@0.0.15 benchmarks npm run build:benchmarks && node --jitless benchmarks/run.js

react-strict-dom@0.0.15 build:benchmarks rollup --config ./tools/rollup-benchmarks.config.js

css.create ops/sec deviation (%) samples
small 1,185,168 0.25 93
small with units 451,649 0.31 95
small with variables 685,491 0.23 97
several small 333,809 0.31 92
large 220,777 0.22 95
large with polyfills 154,434 0.14 96
complex 111,304 0.19 95
unsupported 229,945 0.24 95
css.createTheme ops/sec deviation (%) samples
simple theme 223,425 0.19 97
polyfill theme 211,883 0.16 96
css.props ops/sec deviation (%) samples
small 231,403 0.60 88
small with units 194,007 0.28 92
small with variables 106,967 0.31 94
small with variables of units 77,279 0.27 92
large 92,929 0.71 89
large with polyfills 26,184 0.25 96
complex 19,649 0.18 94
unsupported 74,362 0.31 93
simple merge 181,741 0.30 96
wide merge 14,853 1.03 95
deep merge 14,777 0.27 92
internals ops/sec deviation (%) samples
extractStyleThemes 461,059 0.09 99
flattenStyle 655,972 0.17 93
nmn commented 5 months ago

Does this also handle :hover, :focus and :active in the new syntax?

github-actions[bot] commented 5 months ago

RSD benchmarks (for native)

Base 53261fc5

react-strict-dom@0.0.15 benchmarks npm run build:benchmarks && node --jitless benchmarks/run.js

react-strict-dom@0.0.15 build:benchmarks rollup --config ./tools/rollup-benchmarks.config.js

css.create ops/sec deviation (%) samples
small 1,173,004 0.20 95
small with units 450,558 0.33 96
small with variables 676,001 1.23 94
several small 329,117 1.05 93
large 215,740 1.08 94
large with polyfills 145,595 0.20 96
complex 107,458 0.17 96
unsupported 208,175 0.33 96
css.createTheme ops/sec deviation (%) samples
simple theme 223,463 0.19 93
polyfill theme 210,389 0.16 95
css.props ops/sec deviation (%) samples
small 166,855 0.38 91
small with units 148,107 0.29 94
small with variables 76,842 0.30 94
small with variables of units 59,485 0.27 94
large 66,219 0.40 92
large with polyfills 20,265 0.24 92
complex 15,790 0.34 95
unsupported 53,224 0.29 90
simple merge 140,159 0.19 96
wide merge 11,507 0.23 92
deep merge 11,438 0.28 96
internals ops/sec deviation (%) samples
extractStyleThemes 457,185 0.17 92
flattenStyle 651,786 0.21 96

Patch 5fd6c3b1

react-strict-dom@0.0.15 benchmarks npm run build:benchmarks && node --jitless benchmarks/run.js

react-strict-dom@0.0.15 build:benchmarks rollup --config ./tools/rollup-benchmarks.config.js

css.create ops/sec deviation (%) samples
small 1,177,737 0.22 94
small with units 449,769 0.26 95
small with variables 680,835 0.22 95
several small 332,403 0.30 93
large 218,989 0.21 96
large with polyfills 152,582 0.18 97
complex 110,790 0.19 95
unsupported 228,613 0.41 94
css.createTheme ops/sec deviation (%) samples
simple theme 224,136 0.21 97
polyfill theme 210,463 0.23 96
css.props ops/sec deviation (%) samples
small 227,012 0.53 92
small with units 193,667 0.22 93
small with variables 104,485 0.22 93
small with variables of units 76,564 0.39 91
large 89,583 0.43 88
large with polyfills 25,675 0.30 94
complex 19,142 0.27 94
unsupported 73,348 0.40 93
simple merge 180,450 0.32 92
wide merge 14,613 0.19 95
deep merge 14,391 0.25 94
internals ops/sec deviation (%) samples
extractStyleThemes 458,744 0.09 94
flattenStyle 653,607 0.10 94
github-actions[bot] commented 5 months ago

RSD benchmarks (for native)

Base f3079b21

react-strict-dom@0.0.15 benchmarks npm run build:benchmarks && node --jitless benchmarks/run.js

react-strict-dom@0.0.15 build:benchmarks rollup --config ./tools/rollup-benchmarks.config.js

css.create ops/sec deviation (%) samples
small 1,158,729 1.24 94
small with units 438,338 1.70 95
small with variables 664,877 0.78 93
several small 331,520 0.30 96
large 216,454 0.70 92
large with polyfills 144,438 0.71 90
complex 105,873 0.18 94
unsupported 206,597 0.33 93
css.createTheme ops/sec deviation (%) samples
simple theme 223,404 0.18 97
polyfill theme 210,907 0.16 96
css.props ops/sec deviation (%) samples
small 170,471 0.40 94
small with units 146,749 0.25 91
small with variables 77,777 0.24 97
small with variables of units 59,602 0.30 92
large 67,863 0.39 94
large with polyfills 20,338 0.21 97
complex 15,757 0.33 94
unsupported 53,101 0.62 93
simple merge 138,335 0.70 90
wide merge 11,542 0.21 97
deep merge 11,371 0.31 94
internals ops/sec deviation (%) samples
extractStyleThemes 455,314 1.14 93
flattenStyle 650,712 0.11 97

Patch 72260a5d

react-strict-dom@0.0.15 benchmarks npm run build:benchmarks && node --jitless benchmarks/run.js

react-strict-dom@0.0.15 build:benchmarks rollup --config ./tools/rollup-benchmarks.config.js

css.create ops/sec deviation (%) samples
small 1,172,309 0.87 93
small with units 443,904 0.27 96
small with variables 664,373 0.36 95
several small 329,830 0.30 93
large 217,865 0.41 95
large with polyfills 152,777 0.25 96
complex 109,101 0.65 92
unsupported 227,609 0.94 94
css.createTheme ops/sec deviation (%) samples
simple theme 221,726 1.02 93
polyfill theme 211,874 0.14 93
css.props ops/sec deviation (%) samples
small 229,728 1.20 89
small with units 193,294 0.28 92
small with variables 106,631 0.24 96
small with variables of units 76,716 0.45 95
large 91,764 1.13 90
large with polyfills 26,019 0.72 94
complex 19,427 0.59 96
unsupported 74,006 0.43 90
simple merge 178,996 1.11 92
wide merge 14,690 0.69 95
deep merge 14,568 0.37 95
internals ops/sec deviation (%) samples
extractStyleThemes 462,177 0.15 95
flattenStyle 654,815 0.15 93
necolas commented 5 months ago

Merged c828b742ddbec250daafe6c9e94c0313e1adf5e4