New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make astexplorer standalone / embeddable #70

Open
fkling opened this Issue Dec 8, 2015 · 4 comments

Comments

Projects
None yet
4 participants
@fkling
Owner

fkling commented Dec 8, 2015

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

This comment has been minimized.

Show comment
Hide comment
@ai

ai Dec 31, 2015

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.

ai commented Dec 31, 2015

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

This comment has been minimized.

Show comment
Hide comment
@RReverser

RReverser Jan 1, 2016

Collaborator

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.

Collaborator

RReverser commented Jan 1, 2016

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

This comment has been minimized.

Show comment
Hide comment
@fkling

fkling Apr 6, 2016

Owner

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

fkling commented Apr 6, 2016

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

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Oct 17, 2016

Collaborator

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

Collaborator

hzoo commented Oct 17, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment