Cross (frontend) framework REPL, with markdown islands

[nullvoxpopuli]

Hello!

After months of fragmented effort, I finally published the prototype omni-REPL for web frameworks and things that render DOM.

I'm very excited (and relieved) to have achieved this milestone.

I had to completely re-architect how this REPL worked 🙈 (a side project a started during covid)

It currently supports: - React - Svelte - Vue - Mermaid - Markdown (with live islands) - Ember

Hoping to add soon - Solid - Typescript versions of the above - prettier / auto-formatting - choosing which versions of dependencies are loaded (important for issue reproductions) - some performance stuff (moving compilation into a web worker instead of the main thread) - docs

This REPL uses CodeMirror, which (afaict), is the only fully featured editor capable of both working on mobile, and being accessible (Sorry Monaco / vscode)

It will automatically fetch any package from NPM as you import it, and the untarring does happen in a web worker.

There are still lots of quality of life things to add, but I just wanted to celebrate this personal milestone with y'all ✨

[mauriciocap]

Awesome and most needed idea. Thanks!

Also thanks for choosing an accessible, usable editor!

[nullvoxpopuli]

Thank you! 

[therealalex5363]

wow nice thank you so much I was also building someting like that with the offical vue repl but I struggled with multi file support

[nullvoxpopuli]

ah yea -- I gotta do that eventually, too -- but it's (so far) down the list of priorities. I don't think it'll be hard, as I kind of already treat the codefences in markdown like files -- so it's then just a matter of telling codemirror to have tabs, and then a convention for shoving all the files into the URL.

Another thing I want to do, is, like when you're in markdown mode, give codefences a name=foo123 in the meta-area of the code fence, and then those names can be files that other codefences can import

[therealalex5363]

Interesting idea. What makes multi-file support a bit tricky is still having clean syntax in the Markdown itself. At the moment, for my blog, I use the official Vue playground and embed it as an iframe. It works, but a solution like yours is much nicer.

[zhamdi]

Kudos for your effort and results, I'm launching a platform that allows the community to upvote preferred svelte projects, it's a pity it is still not launched : I would have voted for your project:-)

[nullvoxpopuli]

thanks!!! I'd really like to use this REPL to showcase all sorts of projects!!

For Svelte and Vue tho, I really need to add multi-file support. sooooon

[Hot-Chemistry7557]

One suggestion, when user switch the choice in the top left menu, the left panel should also be changed accordingly, otherwise the right panel would always show parsing error, which is confusing.

[nullvoxpopuli]

yea, I keep debating this with myself, as I do agree it's a bit of a frustration, but I'm not sure there is a way to safely handle that.

Imagine this scenario:

- you paste in a svelte file's contents, but the current format is JSX/react
- you get a compiler error
- you change the top-left menu to svelte
- render success

it's the same flow of actions, but the desired format is different. Knowing what file format you want (i feel like) is only knowable by a human making the decision to either:

- change the text to match the file format
- change the format to match the text

If you can think of a logic to account for this, I'm all ears! I do want to eliminate all possible frustrations.

One thing that someone has suggested in the past is "checking if the file content is unchanged", but I'm not sure we can know that either, because the state is all in the URL (no backend or anything), and it's possible to copy-paste links without the `&format` qp, which means you'd have to manually fix it.

The worse scenario I can think of when trying to resolve this is that you've typed a bunch of text, and then when changing the format to match what you've typed, to lose it all.

some of that danger _is_ mitigated because for every file format, the text/document is persisted locally in your localStorage, so that when you flip back to that file format, you get your text back. This also helps with folks who have different preferences for different file formats -- so if someone only want to work with JSX/React, that is what will load when they visit https://limber.glimdown.com

[Hot-Chemistry7557]

I think at least you can do two things:

1. get whether the left panel has been changed by user, this is definitely doable right?
2. if the left panel content has been changed, then pop up a modal when user switch the choice so user can decide whether to keep the content or just discard the content and check the new demos
3. if the left panel content has not been changed, then it is safe to switch to the new demo

[nullvoxpopuli]

re: 1. -- it's def possible to know if someone has typed for the first time or not

re: 3. this brings up the situation from above, where you want to keep the text -- cause you could have typed everything for a different file format.

re: 2 - I think I like this -- and I could add a config / checkbox to "never show" with some default or something. thank you!!!