Make astexplorer standalone / embeddable

People reached out to be and showed interest in an embeddable version of astexplorer. This thread should explore how this would look like and what needs to be done.

I think there are two ways to achieve this and ideally we can support both:

1. Make astexplorer configurable via the URL so it can be embedded via an <iframe>.
2. Create a (more) reusable React component that can be used wherever React can be rendered.
3. ?

1. <iframe>

This should be fairly straightforward. The URL could contain UI options, such as the chosen parser, chosen transform, which visualization to show, whether switching parsers is allowed or not, etc. Basically just ways to configure how astexplorer looks like and optimize it a bit for smaller space (e.g. instead of side-by-side panes we could have tabs).

2. Dedicated React component

This probably requires bigger refactoring but could also be the most flexible solution since it could be used outside of browser environments (e.g. Electron apps). The component would be close to the main component in app.js but provide more configuration options. There some open questions:

• Should the toolbar be part of such a component?
• If yes, how would lazy loading the parsers work if we don’t have any control over the build step?

Maybe the easier solution is to let the calling code pass the available parsers to the component. They would have to comply with our interface, but that shouldn’t be too bad.

It would also be great if the calling code could add custom visualization / output panes (e.g. the transpiled code like in https://babeljs.io/repl/).

[fkling]

Current idea/plan: Create a script that can be loaded and which exposes an API that lets you render astexplorer into a given element. Something like:

<link href="path/to/astexplorer.css" />
<script src="path/to/astexplorer_embed.js"></script>
<script>
  astexplorer.render({
    parser: 'acorn',
    parserSettings: {
      // ...
    },
    code: '...',
   // transform: ...
   // etc.
  }, someElement);
</script>

That would make it easy to configure examples. For that I still have to do

• Namespace CSS rules
• Create embeddable entry script
• Create API
• Make parser settings settable from the outside (not only inside each parser).

[LunaticMuch]

This issue is quite old. Any progress done?