Make astexplorer standalone / embeddable about astexplorer

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

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

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

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

[LunaticMuch]

This issue is quite old. Any progress done?

[0xdevalias]

See Also:

• #625
• #304
• #646
• #510
• #310