Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1519
See https://github.com/facebook/docusaurus/issues/9629
We use prism to render the code for the inline editor. Prism renders colors to style directly, and the color chosen is dependent on a setting that may not be available at SSR time.
This adds an SSR-specific representation of the code, missing some of the nuances in token colorization (similar to https://github.com/facebook/docusaurus/pull/7373). This adds a little bit of jank compared to perfect SSR, but fixes cases where the mode is incorrect, and is a lot less jank then the more generic solution used by theme-live-codeblock of keeping the rendering of the opposite color until rehydration.
Preview: https://yoga-website-next-git-fork-nickgerleman-exp-2f8171-fbopensource.vercel.app/
Reviewed By: yungsters
Differential Revision: D52163722
fbshipit-source-id: 312dc52134f0084d40f78147190151700ee10ff7
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1518
We allow arbitrary code in the query param, that static site generation doesn't know about. Current experience in production build is confusing, since you can see a flash of one set of code (playground default), quickly change to another. It is less confusing to have it go from blank to code showing.
Reviewed By: yungsters
Differential Revision: D52162928
fbshipit-source-id: fc7b51455682351a0616be8b9ecf557122d3a8db
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1516
Right now playground links are URL encoded base64 of the code content. This leads to some pretty long links.
Running a service, or needing to auth to some other service, seems like a lot more headache than it is worth, so this change instead tries to make the URLs a bit more reasonable.
One minor saving is that we're URL encoding base64, instead of just representing using the url-safe variant of base64. But we can get more savings, even in small examples, using compression. This adds a popular, small, library to do that.
Reviewed By: yungsters
Differential Revision: D52161884
fbshipit-source-id: 9f5d131f27e25a611501c2e3bf3907e83c2e3da1
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1517
Accidentally using a combination of prettier default vs with `--no-bracket-spacing`
Reviewed By: yungsters
Differential Revision: D52162274
fbshipit-source-id: a0e629717060c17b63fa6144d775a590258580ac
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1515
The out-of-the-box docusaurus template doesn't enable linting for React components. This enables those, fixes the errors, and does dome cleanup around the area (e.g. autofocus is a lot more sane).
Reviewed By: vincentriemer
Differential Revision: D52156109
fbshipit-source-id: f32fede3ec4f8a42ecb7f9d77caa2a30581f35ee
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1514
On machines with scrollbars, we shouldn't show them unconditionally, and the toolbar should be in the area within them.
This also fixes a couple bugs:
1. Preview not rendering based on correct code when light/dark mode changes
2. Crash on start on mobile safari
3. Incorrect rendering of preview on mobile safari
This also fixes a bug where the playground re-rendering (e.g. on theme change) makes the preview snap back to the initial code passes.
https://yoga-website-next-git-fork-nickgerleman-exp-194d90-fbopensource.vercel.app/
Reviewed By: shwanton
Differential Revision: D52145666
fbshipit-source-id: 50184305987aab4cbcd066f37582997dfdc78c02
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1500
Inspired by the frequent usage of Expo snacks to run RN, to repro Yoga issues, this replaces the Playground port with a new ground up Playground UI. This UI right now is pretty simple, with a JSX editor which creates a Yoga tree, which is then rendered using the WebAssembly variant of Yoga.
There are a lot of ways we can continue to improve this, but this merges the foundation. Subjectively, I find this more useful as a tool to play with Yoga behavior than the GUI.
This also replaces some of the bits of the homepage, and adds a playground entrypoint (though it's pretty identical to the one I've been testing on the home page).
Reviewed By: yungsters
Differential Revision: D51963201
fbshipit-source-id: 1265cb1784151b685686e189d47ecd42cbacdf8f
Summary:
Fixes https://github.com/facebook/yoga/issues/1417
This dramatically simplifies the matrix of Node vs web, ASM vs WASM, sync vs async compilation, or CommonJS vs ES Modules. We have one variant, using wasm, with ESModule top-level await to do async compilation. Web/node share the same binary, and we base64 encode the WASM into a wrapper JS file for compatibility with Node and bundlers.
This has some downsides, like requiring an environment with top level await, but also has upsides, like a consistent, sync looking API compatible with older Yoga, and mitigating TypeScript issues with package exports and typings resolution.
As part of this work I also removed `ts-node` from the toolchain (at the cost of a couple of config files needing to be vanilla JS).
Pull Request resolved: https://github.com/facebook/yoga/pull/1433
Test Plan:
1. `yarn test`
2. `yarn lint`
3. `yarn tsc`
4. `yarn benchmark`
5. `yarn build` website-next
6. `yarn lint` website-next
7. Locally test website-next
8. Examine package artifact created by GitHub
9. All Automation passes
Reviewed By: yungsters
Differential Revision: D50453324
Pulled By: NickGerleman
fbshipit-source-id: fe1192acc69e57fa69a1ff056dd7b5844d2198d5
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1331
This lifts and copies code from the Yoga Playground component of the old website, to the new one, using a live workspace version of JS Yoga. This may eventually be used if the new website is fleshed out, but this also gives us real-world validation of the Yoga bindings in a web scenario, compared to the Node test runner. There is still some cleanup here needed, but we are able to bundle, typecheck, and render the playground now.
The code here is mostly the same as before, but I removed some of the cruftier bits (e.g. URL shortener that goes to some private Heroku instance), and needed to do some tweaks for the new Yoga package, and TypeScript.
This is currently using `yoga-layout/sync`, the asmjs bindings. But I had previously checked bundling against the wasm ones.
Reviewed By: cortinico
Differential Revision: D46884439
fbshipit-source-id: f53f0855c131cd2b81975bf05f71c43713600616
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1312
This starts us transitioning the Yoga website off of an ancient version of Gatsby by initializing a new Docusaurus project. This commit adds a new stock project, to be filled in later, then fixes license lint errors.
Note that this seems to have init'd using npm, but in the next diff I convert this to yarn workspaces anyway.
Reviewed By: yungsters
Differential Revision: D46884434
fbshipit-source-id: 7a0a4dddc144ad2d22cd18a02e8dcb9ff2184489
