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

Refactor native stylex shim #146

Closed necolas closed 5 months ago

necolas commented 5 months ago

Move all the parsing, dev-time checks, and basic value polyfills into the preprocessing step (e.g., 'create'). Limit object creation and mutation in 'create' and 'props'.

Includes a bug fix for 'letterSpacing'.

github-actions[bot] commented 5 months ago

compressed-size: runtime library

Size change: +0.00 kB Total size: 19.29 kB

Filename: gzip (minify) kB size kB change % change
./packages/react-strict-dom/dist/native/index.js 15.40 (49.80) +0.00 (+0.41) 0.0% (+0.8%)
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 0ebc6254

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,032,696 0.37 93
small with units 487,486 0.28 96
small with variables 639,759 0.16 95
several small 338,181 0.33 95
large 300,812 0.29 93
large with polyfills 177,917 0.16 97
complex 110,121 0.12 92
unsupported 236,728 0.53 94
css.createTheme ops/sec deviation (%) samples
simple theme 223,807 0.20 95
polyfill theme 212,267 0.20 96
css.props ops/sec deviation (%) samples
small 183,390 0.14 95
small with units 158,068 0.71 93
small with variables 91,078 0.19 95
small with variables of units 66,941 0.35 91
large 61,211 0.20 94
large with polyfills 20,829 0.17 96
complex 12,038 0.32 95
unsupported 64,112 0.28 95
simple merge 149,185 0.19 95
wide merge 10,259 0.27 96
deep merge 10,189 0.19 96
internals ops/sec deviation (%) samples
extractStyleThemes 458,883 0.15 99
flattenStyle 651,890 0.26 95

Patch 4c820942

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 574,899 0.70 92
small with units 260,818 0.30 94
small with variables 308,078 0.67 92
several small 179,344 0.33 96
large 145,389 1.16 91
large with polyfills 89,591 0.39 93
complex 62,625 0.35 90
unsupported 143,728 0.51 90
css.createTheme ops/sec deviation (%) samples
simple theme 223,164 0.20 93
polyfill theme 211,423 0.58 96
css.props ops/sec deviation (%) samples
small 165,581 0.45 89
small with units 142,431 0.29 90
small with variables 83,620 0.27 92
small with variables of units 60,384 0.32 94
large 67,090 0.41 92
large with polyfills 21,151 0.20 91
complex 15,373 0.25 95
unsupported 82,888 0.40 94
simple merge 135,840 0.29 95
wide merge 11,377 0.21 93
deep merge 11,253 0.24 92
internals ops/sec deviation (%) samples
extractStyleThemes 462,122 0.12 99
flattenStyle 651,194 0.12 95
github-actions[bot] commented 5 months ago

RSD benchmarks (for native)

Base 0ebc6254

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,050,014 0.33 95
small with units 496,950 0.25 95
small with variables 650,475 1.05 97
several small 342,639 0.60 95
large 302,516 0.24 94
large with polyfills 178,235 0.54 95
complex 111,370 0.14 98
unsupported 241,144 0.22 92
css.createTheme ops/sec deviation (%) samples
simple theme 224,239 0.25 95
polyfill theme 212,914 0.17 94
css.props ops/sec deviation (%) samples
small 184,631 0.72 97
small with units 159,347 0.20 96
small with variables 91,636 0.16 96
small with variables of units 67,736 0.46 96
large 61,693 0.19 97
large with polyfills 20,908 0.43 96
complex 12,100 0.46 94
unsupported 64,567 0.28 96
simple merge 150,362 0.14 96
wide merge 10,422 0.26 95
deep merge 10,309 0.15 94
internals ops/sec deviation (%) samples
extractStyleThemes 459,094 0.17 98
flattenStyle 656,983 0.23 98

Patch 0e05f64d

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 815,301 0.28 94
small with units 305,213 0.31 93
small with variables 369,747 0.51 95
several small 224,144 0.23 96
large 193,868 0.27 95
large with polyfills 111,755 0.19 95
complex 83,177 0.20 96
unsupported 194,687 0.25 96
css.createTheme ops/sec deviation (%) samples
simple theme 223,409 0.56 94
polyfill theme 211,947 0.16 92
css.props ops/sec deviation (%) samples
small 170,893 0.41 93
small with units 146,244 0.66 93
small with variables 89,952 1.03 94
small with variables of units 63,458 0.38 94
large 68,049 0.43 93
large with polyfills 21,737 0.31 95
complex 15,747 0.26 96
unsupported 86,142 0.52 92
simple merge 139,682 0.24 95
wide merge 11,524 0.21 94
deep merge 11,396 0.29 95
internals ops/sec deviation (%) samples
extractStyleThemes 457,570 0.40 94
flattenStyle 652,602 0.14 94
github-actions[bot] commented 5 months ago

RSD benchmarks (for native)

Base 629ba594

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,043,363 0.59 94
small with units 473,176 3.01 90
small with variables 665,948 0.15 96
several small 345,425 0.26 95
large 302,653 0.39 94
large with polyfills 178,372 0.24 93
complex 111,877 0.18 93
unsupported 239,864 0.25 95
css.createTheme ops/sec deviation (%) samples
simple theme 222,215 0.64 95
polyfill theme 211,143 0.17 97
css.props ops/sec deviation (%) samples
small 182,719 0.67 95
small with units 159,350 0.15 94
small with variables 90,653 0.16 93
small with variables of units 67,894 0.31 91
large 61,430 0.17 95
large with polyfills 20,930 0.20 94
complex 13,162 0.26 97
unsupported 41,127 0.25 93
simple merge 149,923 0.17 94
wide merge 11,165 0.15 95
deep merge 11,022 0.26 95
internals ops/sec deviation (%) samples
extractStyleThemes 458,815 0.73 97
flattenStyle 652,733 0.38 95

Patch 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,172,614 0.90 96
small with units 449,601 0.36 93
small with variables 665,060 0.27 95
several small 333,292 0.33 93
large 219,313 0.26 94
large with polyfills 143,894 0.18 97
complex 106,195 0.36 94
unsupported 207,268 0.26 97
css.createTheme ops/sec deviation (%) samples
simple theme 222,811 0.18 95
polyfill theme 211,193 0.15 96
css.props ops/sec deviation (%) samples
small 171,573 0.39 94
small with units 149,422 0.30 93
small with variables 77,526 0.52 96
small with variables of units 59,941 0.62 93
large 68,417 0.45 94
large with polyfills 20,490 0.26 93
complex 15,971 0.24 92
unsupported 54,613 0.31 94
simple merge 140,837 0.27 95
wide merge 11,752 0.22 95
deep merge 11,632 0.30 93
internals ops/sec deviation (%) samples
extractStyleThemes 462,193 0.13 96
flattenStyle 657,873 0.06 95
necolas commented 5 months ago

RSD benchmarks (for native)

See https://github.com/facebook/react-strict-dom/pull/149 for stacked diff that makes css.props +25% faster

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

Suite BASE PATCH Ratio
css.create      
small 1,043,363 1,172,614 1.12
small with units 473,176 449,601 0.95
small with variables 665,948 665,060 1.00
several small 345,425 333,292 0.96
large 302,653 219,313 0.72
large with polyfills 178,372 143,894 0.81
complex 111,877 106,195 0.95
unsupported 239,864 207,268 0.86
css.createTheme      
simple theme 222,215 222,811 1.00
polyfill theme 211,143 211,193 1.00
css.props      
small 182,719 171,573 0.94
small with units 159,350 149,422 0.94
small with variables 90,653 77,526 0.86
small with variables of units 67,894 59,941 0.88
large 61,430 68,417 1.11
large with polyfills 20,930 20,490 0.98
complex 13,162 15,971 1.21
unsupported 41,127 54,613 1.33
simple merge 149,923 140,837 0.94
wide merge 11,165 11,752 1.05
deep merge 11,022 11,632 1.06
internals      
extractStyleThemes 458,815 462,193 1.01
flattenStyle 652,733 657,873 1.01
github-actions[bot] commented 5 months ago

RSD benchmarks (for native)

Base 629ba594

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,050,906 0.32 92
small with units 496,340 0.95 94
small with variables 654,495 0.14 97
several small 344,631 0.45 93
large 305,696 0.27 91
large with polyfills 176,103 1.01 94
complex 111,434 0.22 97
unsupported 236,989 0.19 97
css.createTheme ops/sec deviation (%) samples
simple theme 221,532 0.16 95
polyfill theme 210,162 0.14 96
css.props ops/sec deviation (%) samples
small 184,038 0.79 97
small with units 160,065 0.19 92
small with variables 91,092 0.35 95
small with variables of units 67,394 0.68 94
large 61,223 0.41 98
large with polyfills 20,988 0.19 94
complex 13,159 0.26 96
unsupported 41,324 0.21 96
simple merge 150,764 0.16 95
wide merge 11,006 0.73 93
deep merge 10,955 0.29 96
internals ops/sec deviation (%) samples
extractStyleThemes 458,017 0.16 96
flattenStyle 648,398 0.18 96

Patch 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,162,081 0.20 97
small with units 438,646 0.25 98
small with variables 663,718 0.21 96
several small 324,909 0.36 97
large 215,471 0.25 97
large with polyfills 144,790 0.19 96
complex 105,870 0.17 92
unsupported 205,073 0.25 94
css.createTheme ops/sec deviation (%) samples
simple theme 223,134 0.23 95
polyfill theme 209,359 0.32 97
css.props ops/sec deviation (%) samples
small 172,030 0.32 92
small with units 146,731 0.44 94
small with variables 77,330 0.17 96
small with variables of units 59,247 0.35 93
large 68,225 0.79 90
large with polyfills 20,248 0.27 94
complex 15,782 0.26 95
unsupported 54,056 0.28 95
simple merge 138,771 0.24 94
wide merge 11,563 0.21 94
deep merge 11,452 0.30 93
internals ops/sec deviation (%) samples
extractStyleThemes 458,490 0.15 95
flattenStyle 647,688 0.08 95