Make astexplorer standalone / embeddable

[fkling]

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/).

[ai]

Here is my talk about CSS isolation if you will think about React component: http://ai.github.io/postcss-isolation

Selectors isolation from Inline Styles is not enough.

[RReverser]

IMO iframe is the best (time-proven + framework-agnostic) way to resolve this, but need to work out the details - how it will look like, what can be customized etc.

[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).

[hzoo]

Would be great to get the babel repl to use it (although we want to be able to specify external presets/plugins and options)

[olafurpg]

I would love to be able to embed AST explorer on our website https://scalameta.org/docs/trees/scalafiddle.html We already embed a "ScalaFiddle playground" through an iframe to interact with our public APIs and it would be great if we could do something similar with AST explorer.

BTW thank you for AST explorer. It's been very helpful in educating our users how to implement refactorings for Scala source code.

[LunaticMuch]

This issue is quite old. Any progress done?

[0xdevalias]

See Also:

• State of the Project #625
• Path to astexplorer v3 #304
• Any plans to encapsulate parsers as NPM package? #646
• Feature request: Tree of JavaScript scopes (eslint-scope) #510
• Show JSON path #310