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 createStrictDOMComponent prop creation #164

Closed necolas closed 4 months ago

necolas commented 4 months ago

Prerequisite for replacing View with ViewNativeComponent.

Also an alternative to https://github.com/facebook/react-strict-dom/pull/131

github-actions[bot] commented 4 months ago

compressed-size: runtime library

Size change: +0.84 kB Total size: 20.27 kB

Filename: gzip (minify) kB size kB change % change
./packages/react-strict-dom/dist/native/index.js 16.38 (52.84) +0.84 (+2.69) +5.4% (+5.4%) 🔴
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 4 months ago

RSD benchmarks (for native)

Base 5b8ec7fc

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

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

css.create ops/sec deviation (%) samples
small 1,180,444 0.22 94
small with units 445,448 0.66 94
small with variables 658,806 0.16 97
several small 327,984 1.22 94
large 215,952 1.39 87
large with polyfills 151,783 0.69 91
complex 104,613 0.20 94
unsupported 232,851 0.32 95
css.createTheme ops/sec deviation (%) samples
simple theme 222,806 0.19 91
polyfill theme 211,000 0.16 95
css.props ops/sec deviation (%) samples
small 232,481 0.37 91
small with units 186,647 0.36 96
small with variables 104,335 0.17 96
small with variables of units 74,980 0.26 96
large 94,046 0.29 93
large with polyfills 25,594 0.23 97
complex 17,722 0.21 94
unsupported 74,370 0.18 97
simple merge 160,136 0.19 94
wide merge 13,665 0.32 96
deep merge 13,490 0.30 93
internals ops/sec deviation (%) samples
extractStyleThemes 421,222 0.64 98
flattenStyle 639,508 0.20 97

Patch 20151de4

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

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

css.create ops/sec deviation (%) samples
small 1,195,898 0.32 92
small with units 451,675 0.32 94
small with variables 669,298 0.30 96
several small 331,445 1.25 93
large 220,411 0.34 94
large with polyfills 152,964 0.38 93
complex 105,514 0.26 95
unsupported 233,077 0.25 94
css.createTheme ops/sec deviation (%) samples
simple theme 222,161 0.21 96
polyfill theme 211,681 0.24 93
css.props ops/sec deviation (%) samples
small 235,851 0.34 93
small with units 188,516 0.16 91
small with variables 104,746 0.20 94
small with variables of units 74,172 0.42 94
large 100,000 0.34 94
large with polyfills 25,646 0.82 93
complex 17,770 0.33 91
unsupported 75,200 0.26 95
simple merge 161,830 0.25 93
wide merge 13,570 0.28 96
deep merge 13,398 0.27 93
internals ops/sec deviation (%) samples
extractStyleThemes 424,796 0.63 95
flattenStyle 652,099 0.15 98
github-actions[bot] commented 4 months ago

RSD benchmarks (for native)

Base 5b8ec7fc

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

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

css.create ops/sec deviation (%) samples
small 1,170,601 0.53 95
small with units 442,183 0.48 94
small with variables 673,988 1.77 94
several small 327,694 1.48 89
large 218,188 1.17 93
large with polyfills 153,534 0.19 97
complex 104,705 0.16 96
unsupported 231,713 0.35 94
css.createTheme ops/sec deviation (%) samples
simple theme 228,255 0.19 92
polyfill theme 215,570 0.35 95
css.props ops/sec deviation (%) samples
small 232,455 0.37 92
small with units 185,461 0.15 90
small with variables 103,356 0.25 94
small with variables of units 74,710 0.27 95
large 93,775 0.32 92
large with polyfills 24,500 0.48 91
complex 17,243 0.73 92
unsupported 71,325 0.51 93
simple merge 153,879 0.35 92
wide merge 12,961 0.51 88
deep merge 13,109 0.71 92
internals ops/sec deviation (%) samples
extractStyleThemes 418,628 0.43 89
flattenStyle 651,765 0.14 97

Patch 812e4ab7

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

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

css.create ops/sec deviation (%) samples
small 1,170,653 0.58 95
small with units 438,474 0.71 93
small with variables 655,927 0.52 97
several small 331,263 0.89 92
large 219,409 0.22 97
large with polyfills 150,900 0.76 96
complex 103,391 0.43 91
unsupported 225,234 0.58 88
css.createTheme ops/sec deviation (%) samples
simple theme 224,071 0.42 92
polyfill theme 216,119 0.24 95
css.props ops/sec deviation (%) samples
small 231,872 0.55 92
small with units 185,570 0.42 91
small with variables 102,629 0.23 95
small with variables of units 73,690 0.41 94
large 98,099 0.66 87
large with polyfills 25,594 0.34 91
complex 17,319 0.52 95
unsupported 73,332 0.26 95
simple merge 161,066 0.22 93
wide merge 13,055 0.54 92
deep merge 12,993 1.27 90
internals ops/sec deviation (%) samples
extractStyleThemes 411,012 0.59 94
flattenStyle 639,495 0.53 94
github-actions[bot] commented 4 months ago

RSD benchmarks (for native)

Base 5b8ec7fc

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

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

css.create ops/sec deviation (%) samples
small 1,124,618 1.04 93
small with units 441,359 0.34 96
small with variables 668,123 0.20 96
several small 327,575 0.26 93
large 217,467 0.39 95
large with polyfills 152,445 0.19 96
complex 104,675 0.16 95
unsupported 228,577 0.26 95
css.createTheme ops/sec deviation (%) samples
simple theme 223,308 0.17 97
polyfill theme 212,530 0.13 96
css.props ops/sec deviation (%) samples
small 212,456 0.25 90
small with units 181,229 0.15 97
small with variables 99,166 0.14 95
small with variables of units 73,654 0.18 98
large 84,475 0.31 89
large with polyfills 24,437 0.26 95
complex 17,310 0.22 92
unsupported 68,373 1.56 93
simple merge 156,912 0.12 97
wide merge 13,532 0.24 91
deep merge 13,453 0.33 93
internals ops/sec deviation (%) samples
extractStyleThemes 399,657 0.35 93
flattenStyle 623,415 0.16 95

Patch 67b6ce02

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

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

css.create ops/sec deviation (%) samples
small 1,186,307 0.19 94
small with units 440,567 0.58 94
small with variables 674,895 0.19 94
several small 328,061 0.29 95
large 219,676 0.19 95
large with polyfills 151,201 0.59 94
complex 104,365 0.24 95
unsupported 230,982 0.24 97
css.createTheme ops/sec deviation (%) samples
simple theme 225,777 0.16 97
polyfill theme 214,978 0.19 97
css.props ops/sec deviation (%) samples
small 236,270 0.44 92
small with units 188,139 0.33 92
small with variables 104,761 0.15 95
small with variables of units 74,574 0.23 95
large 100,704 0.61 91
large with polyfills 25,717 0.29 96
complex 17,947 0.31 96
unsupported 73,627 0.33 95
simple merge 161,615 0.23 92
wide merge 13,607 0.18 93
deep merge 13,474 0.30 95
internals ops/sec deviation (%) samples
extractStyleThemes 424,580 0.18 96
flattenStyle 654,394 0.08 96
github-actions[bot] commented 4 months ago

RSD benchmarks (for native)

Base 5b8ec7fc

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

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

css.create ops/sec deviation (%) samples
small 1,195,638 0.23 93
small with units 450,005 1.13 95
small with variables 685,473 0.29 95
several small 330,259 1.14 93
large 219,473 0.27 94
large with polyfills 153,774 0.17 96
complex 105,864 0.14 96
unsupported 232,746 0.26 96
css.createTheme ops/sec deviation (%) samples
simple theme 229,472 0.18 96
polyfill theme 217,195 0.19 94
css.props ops/sec deviation (%) samples
small 233,879 0.38 93
small with units 187,520 0.29 93
small with variables 104,121 0.94 95
small with variables of units 74,862 0.28 96
large 93,720 0.31 97
large with polyfills 25,176 0.28 92
complex 17,451 0.41 94
unsupported 74,298 0.26 93
simple merge 159,179 0.26 93
wide merge 13,549 0.21 96
deep merge 13,371 0.35 95
internals ops/sec deviation (%) samples
extractStyleThemes 427,467 0.22 97
flattenStyle 655,170 0.12 94

Patch 1e408189

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

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

css.create ops/sec deviation (%) samples
small 1,204,811 0.26 95
small with units 438,691 0.23 97
small with variables 671,222 0.18 95
several small 326,739 0.32 95
large 217,002 0.22 95
large with polyfills 150,638 0.16 96
complex 103,746 0.21 95
unsupported 230,998 0.25 96
css.createTheme ops/sec deviation (%) samples
simple theme 229,660 0.16 97
polyfill theme 217,067 0.45 94
css.props ops/sec deviation (%) samples
small 232,552 0.57 90
small with units 188,586 0.26 92
small with variables 104,179 0.20 96
small with variables of units 73,708 0.36 93
large 98,276 0.67 91
large with polyfills 25,686 0.26 93
complex 17,643 0.38 90
unsupported 74,357 0.30 95
simple merge 159,742 1.71 91
wide merge 13,615 0.22 93
deep merge 13,353 0.36 96
internals ops/sec deviation (%) samples
extractStyleThemes 426,965 0.13 96
flattenStyle 653,757 0.14 98
github-actions[bot] commented 4 months ago

RSD benchmarks (for native)

Base 5b8ec7fc

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

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

css.create ops/sec deviation (%) samples
small 1,164,937 1.92 92
small with units 453,399 0.27 97
small with variables 685,267 0.16 94
several small 336,215 0.28 94
large 221,458 0.21 96
large with polyfills 153,851 0.15 98
complex 104,690 0.18 96
unsupported 234,586 0.22 98
css.createTheme ops/sec deviation (%) samples
simple theme 225,410 0.20 94
polyfill theme 213,353 0.36 97
css.props ops/sec deviation (%) samples
small 233,426 1.22 93
small with units 186,165 0.25 93
small with variables 104,781 0.13 98
small with variables of units 74,567 0.22 96
large 94,180 0.40 95
large with polyfills 25,419 0.18 95
complex 17,716 0.45 94
unsupported 74,102 0.27 94
simple merge 160,691 0.14 96
wide merge 13,746 0.24 94
deep merge 13,471 0.90 94
internals ops/sec deviation (%) samples
extractStyleThemes 429,262 0.17 97
flattenStyle 656,716 0.07 98

Patch 9c7e0cc2

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

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

css.create ops/sec deviation (%) samples
small 1,192,457 0.19 96
small with units 449,979 0.65 95
small with variables 683,888 0.16 95
several small 329,193 1.68 94
large 221,929 0.20 96
large with polyfills 154,950 0.20 94
complex 105,561 0.18 94
unsupported 234,507 0.20 96
css.createTheme ops/sec deviation (%) samples
simple theme 225,975 0.15 95
polyfill theme 211,004 1.58 93
css.props ops/sec deviation (%) samples
small 237,354 0.34 90
small with units 186,987 0.25 93
small with variables 105,554 0.18 94
small with variables of units 74,376 1.36 95
large 100,123 0.38 95
large with polyfills 25,749 0.25 97
complex 17,850 0.25 94
unsupported 73,982 0.24 92
simple merge 162,323 0.24 93
wide merge 13,629 0.19 96
deep merge 13,476 0.25 94
internals ops/sec deviation (%) samples
extractStyleThemes 429,229 0.14 96
flattenStyle 659,054 0.16 96
github-actions[bot] commented 4 months ago

RSD benchmarks (for native)

Base e4c51cf1

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

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

css.create ops/sec deviation (%) samples
small 1,217,564 0.17 98
small with units 452,937 0.26 96
small with variables 666,587 1.21 96
several small 332,138 0.97 95
large 221,811 0.27 97
large with polyfills 153,523 0.66 97
complex 105,313 0.15 96
unsupported 232,597 0.26 97
css.createTheme ops/sec deviation (%) samples
simple theme 226,607 0.19 96
polyfill theme 214,714 0.18 95
css.props ops/sec deviation (%) samples
small 234,000 0.33 91
small with units 186,845 0.22 93
small with variables 103,892 0.36 94
small with variables of units 75,082 0.27 94
large 94,078 0.39 92
large with polyfills 25,405 0.22 95
complex 17,776 0.32 93
unsupported 74,503 0.21 95
simple merge 159,806 0.12 92
wide merge 13,656 0.79 91
deep merge 13,572 0.26 95
internals ops/sec deviation (%) samples
extractStyleThemes 425,603 0.15 99
flattenStyle 652,395 0.10 94

Patch 9bbd8c0a

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

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

css.create ops/sec deviation (%) samples
small 1,192,628 0.38 94
small with units 449,816 0.32 96
small with variables 680,085 0.20 97
several small 332,323 0.34 92
large 218,249 0.19 96
large with polyfills 152,544 0.13 98
complex 104,214 0.15 96
unsupported 230,339 0.18 95
css.createTheme ops/sec deviation (%) samples
simple theme 228,050 0.15 96
polyfill theme 215,568 0.14 96
css.props ops/sec deviation (%) samples
small 236,075 0.20 90
small with units 187,708 0.24 91
small with variables 105,151 0.24 94
small with variables of units 75,226 0.30 94
large 99,997 0.46 94
large with polyfills 26,058 0.20 94
complex 18,102 0.31 93
unsupported 74,425 0.20 96
simple merge 162,063 0.30 91
wide merge 13,758 0.20 94
deep merge 13,606 0.29 95
internals ops/sec deviation (%) samples
extractStyleThemes 427,676 0.15 96
flattenStyle 645,354 0.15 97