Support for JSX format as a Markdown alternative

[mhalle]

JSX is a format/language that allows JavaScript to be embedded consistently in an HTML-like syntax and to output HTML primitives. Originally written for React, it has been incorporated into a variety of other projects. JSX allows an intuitive mixing of markup and JavaScript elements.

As such, it seems like a natural fit for Framework.

While Framework uses markdown with islands of JavaScript, in fact it seems to rely heavily on HTML markup rather than just straight markdown. That's what JSX is meant for. It might be worth looking to see how easily a JSX parser could be dropped in as a markdown alternative format.

An alternative would be to use MDX, which allows JSX in markdown: https://mdxjs.com/table-of-components/

[samjamead]

I have enjoyed working with Observable Framework projects, but each time I open a repo I find myself wishing I was writing JSX. Even just for syntax highlighting and prettifying in the code editor!

I also frequently find myself wanting to mapping over arrays and return components.

[sbarre]

Support for MDX would be incredibly useful for what I'm working on now. I need to generate the same report many (20+) times and right now it feels bad to copy/paste the Markdown across many files.

MDX/JSX would allow for a lot more re-usability across pages if we can build actual components. But maybe there's more thought to put in here due to the reactivity aspects?

I would be willing to try to attempt the PR for this if someone can give me perhaps some starting hints or direction?

I've starting digging into the code a bit already, but I assume the maintainers would have a more opinionated or informed view of how this should be done within the existing codebase structure.

Much like there is a markdown.ts file that handles .md files from the top-level, would you envision an mdx.ts file? Or would this live in the javascript folder and happen during transpilation with a custom loader?

From the MDX docs, there's a few different ways to go about this it seems.. You can parse the MDX server-side, or you can do it with an existing loader like Rollup (which I see the Framework uses, but perhaps not at the right time in the build process?)

Any thoughts?

[mhalle]

It's kind of funny / mind bending to think about visualization and reactivity here.

I see two directions to go to add jsx-like functionality to Observable (non exclusive): add new parsers, or make Observable Framework data science capabilities available to other reactive frameworks. (To be clear, both are likely major projects.)

Here's how I see it. Observable provides lots of great tools for visualization. Observable 1 implemented them in a spreadsheet-style reactivity model. Observable 2 / Framework keeps the visualization piece but moves to a reactive page model with Markdown as its top level, JS islands, and HTML as an escape hatch that seems to be needed fairly often right now.

The issue is that we have other programming models of and established frameworks for reactivity. React, Vue, Svelte, Solid.js, etc. And we also have syntax sugar like JSX and MDX that can make them more HTML-like or more text document like. These frameworks are well established and people know how to use them.

There is no question about the amazing value that Observable's visualization and data science capabilities bring to people.

The open question is whether the reactive page model of Framework is "better enough" than the other existing reactive models out there.

Framework functionality that could be embedded in other reactive frameworks would sure help increase the uptake of Observable, but might also fragment the community around language.

In some ways, Observable 1 notebooks are the best distinctly different model for visualization that also promotes data and code sharing in a community (though I understand that isn't what commercial paying customers might want).

[mbostock]

I’m working on this in #1216. 👍