# Babel (Per PR) REPL Ideas

> https://github.com/babel/sandboxes

## Babel Version Comparison

- Is it useful to compare the output of babel between two different versions? - comparing output for bugs, code difference, code size, helping determine when I change was made, making a history of how things have changed.
- How do you even load 2 versions of something in the browser?
- https://unpkg.com/
- https://unpkg.com/browse/@babel/standalone@7.10.4/
- https://unpkg.com/@babel/standalone@7.10.4/, load and then rename window.Babel?
- Visualizing output size based on version or options, why is output larger/smaller
- analytics idea: https://github.com/babel/notes/issues/34
- like astexplorer, highlight input code, use that to show "patterns" in code (IIFE, react, etc)
- can we create a sort of dictionary to name not just individual AST nodes (`;` == `EmptyStatement`), but things like `((function () { // code })())` is an [IIFE](https://en.wikipedia.org/wiki/Immediately_invoked_function_expression) and helping teach that to all types of experienced programmers? (and extensible so you can define your own based on codebase, sort of like a linter). Essentially want to visit/match/select patterns and help give names to them at minimum
- Maybe explain why you might write code in a certain why, use github to find examples of a pattern in the real world. Could even link to how other languages do a similar thing (help python programmer learn javascript)
- ast spec: https://github.com/babel/babel/blob/main/packages/babel-parser/ast/spec.md

---

- Teaching how babel works interactively
- general concepts applicable to other tooling/languages: parser/printer/compiler/AST/tokens/etc (thinking https://regexone.com to learn regex, or same with HTML/CSS/SQL/etc)
- specific things in implementation of babel (aka how to write plugins, many examples of how to do x with examples), use babel-handbook, use code we've written in babel plugins or 3rd party ones.

---

- [ ] redo the handbook, make it interactive (https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md)
- this is just a copy paste https://github.com/babel/website/pull/1726, I'd like to see https://regexone.com/ type idea
- [ ] add examples of code: https://github.com/babel/website/pull/1220
- I'd like to be able to click on some buttons/dropdown of examples of various syntax

### Current Output
[](https://codesandbox.io/s/zjlv9)
> https://pkg.csb.dev/babel/babel/commit/949d7d9e/@babel/core
> We could certainly use some of these ideas for the actual repl at babeljs.io/repl though

## Codesandbox feature requests
- [ ] Support importing dependencies dynamically (`import()`) - hack with adding scripts to the document https://codesandbox.io/s/babel-plugin-import-modules-ws1yz?file=/src/standalone.js
- [ ] Support importing multiple versions of Babel to compare the outputs (bundler support for different versions/aliasing)
- [] Nicolo: be able to customize the github comment: codesandboxes should retain the name from the template so people know what to click on
- [ ] Brian: possible to have a shared sandbox that is updated on the fly (keeps state)?
- Modify Define API so that you can have a base sandbox that you can overwrite files (if `source.js` is in the template we can overwrite it when forking)

## Custom Plugin Support
- [x] write in whatever syntax (compile that plugin with babel itself)
- [ ] be able to write test cases from input/outputs?
- [ ] be able to import tests from fixtures?
- [ ] publish a gist from this to test?
- [ ] find a way to import from babel itself and make a PR?
- [ ] template to create new package into monorepo?
- [ ] Be able to modify the parser inline with a fork of `@babel/parser`?

### Writing a Plugin
- Easier to generate code to assert a certain node (matcher) or generate a node (builder, t.StringLiteral)

#### Matcher?

const matcher = astMatcher('__any.method(__str_foo, [__arr_opts])')

https://github.com/dumberjs/ast-matcher

const isRequire = matches({
    "type": "VariableDeclaration",
    "declarations": (decs) => decs.length === 1 && isRequireDeclarator(decs[0]),
    "kind": "var"
});

http://nene.github.io/2016/04/02/matches-ast

{
  FunctionExpression(path: NodePath<t.FunctionExpression>): void {
    const argumentNameMatcher = m.capture(m.anyString())
    const matcher = m.functionExpression(
      m.anything(),
      [m.identifier(argumentNameMatcher)],
      m.blockStatement([
        m.returnStatement(m.fromCapture(m.identifier(argumentNameMatcher))),
      ])
    )

    if (matcher.match(path.node)) {
      path.replaceWith(t.identifier('IDENTITY'))
    }
  },
};

https://github.com/codemod-js/codemod/blob/master/packages/matchers/README.md

https://blog.scottlogic.com/2016/06/22/xslt-inspired-ast-transforms.html

## Output
- [ ] option to show AST with code folding/highlighting (ASTExplorer)
- example: https://github.com/babel/website/pull/1933
- [ ] show AST at all steps in the transformation (babel-time-travel)
- archived repo: https://github.com/babel/babel-time-travel
- PR to add to current repl https://github.com/babel/website/pull/1736
- [ ] possible to show sourcemaps? https://github.com/babel/website/pull/1655

## Config
- autocomplete for names?
- choose from a list of options
- auto populate based on files changed?

https://github.com/babel/babel/issues/10617
https://github.com/babel/babel/blob/master/packages/babel-core/src/index.js
https://github.com/parcel-bundler/parcel/blob/8551183608cbaa640fbe8ef7e74c9cd9c1d350e3/packages/transformers/babel/src/config.js
https://github.com/zeit/next.js/blob/23941cdca2a41aac3e6a332461e459cc33a99028/packages/next/build/webpack/loaders/next-babel-loader.js

## REPLs
- https://codesandbox.io/s/babel-plugin-options-only-test-ru9gu?file=/src/App.js