Comments (8)
That's pretty cool. Is there a reason that the root node needs to be a different component type? Could that not be inferred by it being the outermost node?
Some ideas. Although they might be a little ambitious:
- It would be cool if hovering a node in the code (or actually moving the caret onto a node) highlighted that node in the preview. And vice versa.
- It would be cool if there was some kind of dev-tools like functionality. Possibly it would be better to have that instead of a compile error on an invalid property?
- It would be cool if it was possible to get IDE-like code completion, red underlining, etc in the code editor.
from yoga.
The compile errors and exceptions on invalid input are more disruptive right that I would prefer.
The current implementation ends up using pretty stock “react-live”, which is oriented towards rendering a fragment of a react component, with any context passed in.
That’s part of why root node is special. It will:
- Recurse the tree of (no-op) React children, converting to a tree of styles.
- Converting the tree of styles into Yoga nodes, then measurements.
- Rendering an absolutely positioned box for where each Yoga node lands.
Wed also ideally add a config node. Right now I have it using default yoga config (no web defaults).
Correlating on hover/selection is something that would be helpful, but is not nicely exposed.
from yoga.
Some thoughts:
-
Instead of trying to make a polished series of forms, it would be simpler, and probably a better UX, to present a CSS style code editor instead
Hmm... at that point perhaps it would make sense to make it just accept HTML (or JSX). I don't find the UI for creating nodes very intuitive either.
-
It occurs to me that UI-wise there isn't really anything Yoga-specific about the playground. It's essentially just a Flexbox playground that happens to use Yoga layout. It could be cool to add an option to layout with other layout engines too. I partially have Taffy in mind of course. But from a Yoga a perspective, the more useful comparison may the browser engine. If you could input the same HTML and get it to render with either the browser you're using or Yoga that could be super helpful to debugging layout issues. I've seen people use the Expo playground for this, but that requires emulating an entire mobile OS to run Yoga layout. It would be awesome in the Yoga playground could serve this role.
-
I wonder if it would make more sense to make the playground it's own standalone component rather than closely integrating it with the docs. Then it could be used for other scenarios (such as reproducing layout bugs, debugging tests, etc) too. It could still be embedded within the docs, but it wouldn't be invalidated if you ever want to change docs hosting framework in future.
from yoga.
Hmm... at that point perhaps it would make sense to make it just accept HTML (or JSX). I don't find the UI for creating nodes very intuitive either.
I've seen people use the Expo playground for this, but that requires emulating an entire mobile OS to run Yoga layout. It would be awesome in the Yoga playground could serve this role.
react-live
does seem to highlight JSX snippets as a main use case. We can also customize JSX parsing I think: https://babeljs.io/docs/babel-plugin-transform-react-jsx#custom
Something like this could be nice:
<Config useWebDefaults={true}>
<Node width={200} height={200} padding={20} >
<Node flex={1} minHeight="50%" />
<Node flex={1} />
<Node flex={1} />
</Node>
</Config>
Probably with some more extra attributes depending on how we would need to visually distinguish the nodes.
from yoga.
I wonder if it would make more sense to make the playground it's own standalone component rather than closely integrating it with the docs.
I particularly wanted to get rid of antd
, or at least the version previously being used, because it brought in a lot of warnings, and enough was linked in that it nearly doubled the cumulative bundle size.
For context, without antd
, we get bundles that look like this, where the red square is a 48KB when gzipped (including base64 encoded Yoga wasm, C++ runtime, and JS bindings).
I want to goal on the colors, typography, Tab UI, responsive grid lengths, shadow styles, etc be consistent with the rest of the documentation. Docusaurus's CSS library is available independent of Docusaurus, which makes taking a dependency on it a decent boundary, giving some good design primitives for a documentation oriented site. https://infima.dev/docs/getting-started/introduction/
For stuff like the live codeblock component, I think I'd also want to reuse Docusaurus primitive in the playground, for UI consistency. But I think that might be the only place that will need to depend on Docusaurus primitives (so the editor UI would not be usable outside Docusaurus).
it wouldn't be invalidated if you ever want to change docs hosting framework in future.
I think it is likely Yoga will stay on Docusaurus for some time. It is used by, and has a symbiotic relationship with a lot of other Meta OSS projects.
- https://reactnative.dev
- https://create-react-app.dev/
- https://hermesengine.dev/
- https://relay.dev
- https://componentkit.org/
- https://facebook.github.io/metro/
- https://fbflipper.com
from yoga.
We can also customize JSX parsing I think: https://babeljs.io/docs/babel-plugin-transform-react-jsx#custom
Yeah, I don't even think the parsing needs to change. I believe the snippet above is valid vanilla JSX. You just set which function it calls (instead of React.createElement) to create nodes to a function of your choice, and everything ought to just work :)
Depending on Infima as the UI library definitely seems reasonable.
Regarding the editor, it looks like https://reactnative.dev/ is not using the built in editor component. Rather it's using this Docusaurus plugin (https://github.com/facebook/react-native-website/tree/main/plugins/remark-snackplayer) to automatically embed https://github.com/expo/snack, which ends up looking like:
(https://reactnative.dev/docs/flexbox)
IMO something like Expo Snack but which could render in-browser but with layout provided by Yoga would be ideal. Perhaps it would even make sense to add this to Expo Snack itself?
from yoga.
Current iteration:
Yoga.JSX.Reduced.mov
from yoga.
Im going to count this as done for now.
from yoga.
Related Issues (20)
- Flex shorthand in UseWebDefaults should set basis to 0 instead of auto HOT 3
- React Native iOS build failed HOT 1
- top position is wrong when previous item's height is 0.5, on 3x scale screen HOT 1
- API proposal to get the computed measure size of a node HOT 9
- Proposal: Integrate with google/oss-fuzz for continuous fuzz testing? HOT 8
- Can a Yoga Node have multiple owners? HOT 3
- [JS] Reduce WASM call overhead HOT 6
- Add App Privacy Manifest? HOT 1
- `flexBasis` doesn't recalculate when rotating the screen HOT 1
- __dirname is not defined in ES module scope HOT 3
- RuntimeError with WebAssembly in @react-pdf/yoga on Node.js Server HOT 3
- Why can't we round node width/height directly in roundLayoutResultsToPixelGrid()? HOT 3
- The typescript definitions link in the standalone documentation is incorrect HOT 2
- Build of v3 with GCC11 fails HOT 3
- Add a CMake option to not build the tests HOT 2
- Add Conan badge HOT 1
- Percentage padding not updated when the parent size changes HOT 4
- Discrepancy between playground and C++ HOT 1
- Where is the operation interface?
- Where is the operation interface? HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from yoga.