fkling / fkling/astexplorer

Make astexplorer standalone / embeddable

Open
#70 7 comments 11 reactions 0 assignees View on GitHub
help wanted needs discussion
Dominant language
JavaScript
Stars
6.5k
Forks
772
PR merge metrics
No merged PRs in 30d

Description

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 ``.
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](http://electron.atom.io/) 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/).

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.