Docs: Add proper playground

[nmn]

https://stylex-docusaurus-nxsbvzf80-nmn.vercel.app

For now, this is a proof of concept. I have used a webcontainer to successfully compile and show the output of a file.

The next step is to make improvements until there is a minimal viable experience.

Fixes #732

[github-actions]

compressed-size: runtime library

Size change: 0.00 kB
Total size: 2.36 kB

View unchanged

Filename: gzip (minify)	kB size	kB change	% change
./packages/stylex/lib/stylex.js	1.02 (3.53)	0.00 (0.00)	0.0% (0.0%)
./packages/stylex/lib/StyleXSheet.js	1.34 (3.41)	0.00 (0.00)	0.0% (0.0%)

[github-actions]

compressed-size: e2e bundles

Size change: 0.00 kB
Total size: 1119.56 kB

View unchanged

Filename: gzip (minify)	kB size	kB change	% change
./apps/rollup-example/.build/bundle.js	1005.35 (9859.61)	0.00 (0.00)	0.0% (0.0%)
./apps/rollup-example/.build/stylex.css	114.22 (456.05)	0.00 (0.00)	0.0% (0.0%)

[necolas]

Nice! This direction is definitely better IMO.

Seeing all this JS to null out properties is kinda 😬 Still think the RN way is objectively better, esp for perf.

Maybe we should also remove the inject calls from the playground output, because it might confuse people after the docs talk about "no runtime style injection"

[nmn]

Yup. Need to tweak some settings to remove the inject calls and add a settings screen to tweak the resolution mode.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
stylex	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 29, 2023 11:03pm

[nmn]

Much better output: https://stylex-6piprzpqr-fbopensource.vercel.app/playground/

[necolas]

This output is interesting. We often focus on gzip/br size over the wire, but once unpacked by the browser the minified size matters, and patterns like this minify worse than patterns that don't duplicate the common strings. Not to mention we're creating more objects here too

  const props = {
    0: {
      className: "xjyslct xng3xce x1t391ir x1awj2ng x12oqio5 x12ulsxz xdqyycr"
    },
    1: {
      className: "xjyslct xng3xce x1t391ir x1awj2ng x12oqio5 x12ulsxz xdqyycr x4zgh4k"
    }
  }[!!em << 0];

[necolas]

How do we test this locally? I get this error that prevents the output showing

[nestorvanz]

Remove this?

[nestorvanz]

Awaiting a non-function prop?

[nmn]

How do we test this locally? I get this error that prevents the output showing

I finally figured this out. As long as you npm run build && npm run serve, it is not testable locally.

[nmn]

once unpacked by the browser the minified size matters

We can pack this into smaller string expressions, but it's hard to do that while maintaining className order. We used to do that in the past.

[nmn]

Seeing all this JS to null out properties is kinda 😬

Here are the plans to improve this situation:

1. More fine-grained pre-computation. Currently the entire styles constant is removed or none of it. We can remove just the rules within that can be pre-compiled.
2. We can detect objects that are used within the same file and figure out which null values can be removed. e.g. any object that is always used as the first argument to stylex.props doesn't need any null values.
3. We can detect which properties are never used in the entire project and remove the null values for those properties globally.

[github-actions]

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.

@stylexjs/[email protected] size:compare
./size-compare.js /tmp/tmp.LXTMCpVmtH /tmp/tmp.D9VuWw2Qp8

Results	Base	Patch	Ratio
stylex/lib/stylex.js
· compressed	729	729	1.00
· minified	2,541	2,541	1.00
stylex/lib/StyleXSheet.js
· compressed	1,266	1,266	1.00
· minified	3,776	3,776	1.00
rollup-example/.build/bundle.js
· compressed	567,110	567,110	1.00
· minified	10,232,512	10,232,512	1.00
rollup-example/.build/stylex.css
· compressed	100,626	100,626	1.00
· minified	757,176	757,176	1.00