New Babel REPL

[xtuc]

Following the discussion with @hzoo @compuIves.

• We can use Codesandbox directly (replace)
  • Loading external plugins works out of the box (via dependencies in package.json + sync'd)
  • Multiple files/file explorer support
  • Dynamic .babelrc config (we can match the UI to the config so it can teach users about babelrc as well as give a matching UI for the tooling)
  • We could embed it into our website, instead of "try it out" links.
  • Replace https://github.com/babel/website/pull/1518?
  • Can work with Ives to figure out if we need to change babel-standalone or babel-core in some way (fs, etc)
• Is is ok if we throw away parts of the current REPL? (Use the UI/sidebar, replace the editor parts)

• Use the REPL but use codesandbox's API/backend parts and keep the repl react component

  • Future wants: custom UI for AST/ASTExplorer/creating plugins, babel-time-travel, even outputting multiple outputs (different env configs?)

[alyssagrubio]

+1 for keeping the REPL & using codesandbox API/backend.

We use the Babel REPL in much of our instructional materials bc it's simplicity makes it the perfect starting point for beginners. CodeSandBox has been instrumental in our teachings about React specifically, but the full editing environment is confusing for learners who aren't already familiar with how Babel works 🙂

[xtuc]

Interesting, I wasn't aware of that.

The issue with the current REPL is that we can't introduce more features because of the UI.

A codesandbox is shareable, and looking like a local editor, isn't it better for your instructional materials?

[alyssagrubio]

@xtuc the lack of "features" in the repl is it's main feature imo. The current UI/layout makes it very easy to reason about what babel is/how it works.

For more advanced use cases codesandbox is excellent (we use it to teach about babelrc, etc), but these learnings are only relevant after the learner has become familiar with babel's core purpose itself in the isolated repl.

I should also mention that I personally use the repl frequently to see how various parts of my code are being compiled, and have become attached to the simple UI and speed :)

[CompuIves]

I completely agree with your points on simplicity and speed, I think we should keep this and have it as the main priority.

The idea I'm currently thinking of is keeping everything of the UI intact, except for one new sidebar item: a file explorer. This explorer has two files: .babelrc and index.js. The index.js is opened by default, with the code on the left and transpiled version on the right. However, you can also decide to open .babelrc, which shows the generated .babelrc based on the settings in the sidebar. For example, if you have es2015 preset selected in the sidebar it's also added in .babelrc.. That's a 2 way sync, so if you change .babelrc you can see the sidebar settings update, and the other way around as well. This would keep the current simplicity, and also open up the possibility to learn how .babelrc is configured by playing with the UI.

Another change is that the code would be transpiled by the same bundler as CodeSandbox, which opens up the possiblity of running custom plugins and custom presets if they're defined in .babelrc.

I'm curious what everyone thinks of this idea 😄

[existentialism]

The issue with the current REPL is that we can't introduce more features because of the UI.

This seems more of a design problem than a REPL problem though?

The idea I'm currently thinking of is keeping everything of the UI intact, except for one new sidebar item: a file explorer.

👍

Sounds exactly what @hzoo and I were thinking! How can we help? :)

[xtuc]

The idea I'm currently thinking of is keeping everything of the UI intact, except for one new sidebar item: a file explorer.

Yes :+1:, @CompuIves let us know if you need any help! You can broadcast in the #website Babel slack channel.

[alyssagrubio]

@CompuIves would the current unique link URL functionality be preserved too? We use that feature heavily, so if that's staying then this sounds 👍 !

Let me know if/how I can help!

[CompuIves]

@CompuIves would the current unique link URL functionality be preserved too? We use that feature heavily, so if that's staying then this sounds 👍 !

Yep, that should stay as well 😄.

I'll have a PR with some documentation up 🔜

[alyssagrubio]

This sounds amazing! I would love to help. I tinkered around quite a bit in the repo last week so I'm reasonably familiar with the stack now.

[CompuIves]

That's great! I'm planning on opening a PR for it today, but first I need to have the sandpack organization to publish the library. I saw that you registered the name on npm. Would you mind transferring ownership of the sandpack organization to me so we can move forward @alyssagrubio?

[CompuIves]

Opened a POC PR here: https://github.com/babel/website/pull/1600

[existentialism]

@alyssagrubio ping re: sandpack org!

[CompuIves]

@alyssagrubio ping re: sandpack org!

[xtuc]

@alyssagrubio ping re: sandpack org!