observablehq / framework

A static site generator for data apps, dashboards, reports, and more. Observable Framework combines JavaScript on the front-end for interactive graphics with any language on the back-end for data analysis.
https://observablehq.com/framework/
ISC License
2.13k stars 85 forks source link

JSX + React #1429

Closed mbostock closed 3 weeks ago

mbostock commented 3 weeks ago

Extracted from #1216, this implements client-side support for JSX with React. It looks like this:

```jsx
import {Counter} from "./components/Counter.js";

display(<Counter title="Hello, JSX" />);


In JSX blocks, you can only display one thing at a time; subsequent calls to `display` will replace whatever was displayed previously. Also, you can only display React elements.

TODO:

- [x] JSX code blocks
- [x] JSX modules
- [x] `React` built-in
- [x] `ReactDOM` built-in
- [x] Handle syntax errors during JSX transpilation
- [x] Implicit (singular) `createRoot` within `display`
- [x] Documentation
- [x] Tests

Future work:

- Allow JSX in inline expressions `${<Component />}` (requires acorn-jsx)?
- Allow JSX in Markdown directly (à la MDX)?

Fixes #971.
mbostock commented 3 weeks ago

Hmm, I found a bug where if you move a JSX block to a new location during preview, it doesn’t get relocated (because we do the special treatment for root._nodes but that doesn’t apply to root._root). I think/hope I can fix that pretty easily though.

Edit: Fixed, but still working on the documentation and then I’ll push up some commits.