Add support for Babel 7

[chasenlehara]

This was asked about in Slack: https://bitovi-community.slack.com/archives/CFDDX9MJS/p1559748953000400

[marshallswain]

Upgrading StealJS to use Babel 7

Babel Migration Guide

steal

Question: why do some modules get imported with double @, like "@@babel-code-frame"?

Bundled Dependencies in /ext

• [ ] /ext/babel-code-frame.js bundled external dependency.
  • [ ] Need to replace with updated version: https://github.com/babel/babel/tree/master/packages/babel-code-frame
• [ ] /ext/babel.js
  • [ ] This looks like it might be @babel/core
  • [ ] The babylon utility is now called @babel/parser.

Other files

• [ ] .eslintignore: update babel ignored files if the filenames end up changing.
• [ ] Gruntfile.js
  • [ ] babel-standalone becomes @babel/standalone.
• [ ] main.js
  • [ ] applyBabelPlugin maybe a couple of lines that might need updating.
  • [ ] stealPath: { around line 1986 will need updated package names.
    • [ ] babel becomes @babel/core.
    • [ ] babel-runtime is now @babel/runtime
  • [ ] line 3489 replace babel-standalone
  • [ ] babel-standalone becomes @babel/standalone.
  • [ ] Line 3521, may need to update babel/external-helpers.
• [ ] babel-plugin-steal-test
• [ ] babel-preset-steal-test
• [ ] steal-with-promises
  • [ ] getPresetOrPluginName? may need updating at line 2680. Unsure what a plugin looks like.
  • [ ] getBabelEnv what is process.env.BABEL_ENV
  • [ ] includesPresetOrPluginName? line 2695 same as previous line
  • [ ] processBabelPlugins? at line 2705
  • [ ] doProcessPlugins at line 2755 needs to gather all new plugins.
  • [ ] isBuiltinPlugin at line 2797
  • [ ] getNpmPluginNameOrPath at line 2827
  • [ ] getBabelPlugins at line 2836.
  • [ ] getBabelPresets how should we handle presets like react and stage-0? Year-named presets are deprecated and should be replaced by preset-env.
  • [ ] getBabelVersion show correct fallback version number. (update from 6 to 7)
  • [ ] getBabelOptions
    • [ ] any new options?
    • [ ] update babel version number
  • [ ] processBabelPresets line 2927 may need to update the list of presets used, remove deprecated, use preset-env.
  • [ ] doProcessPresets same as previous line.
  • [ ] isBuiltinPreset update for new module name/prefix. Needs to work with both babel- and @babel/
  • [ ] getNpmPresetNameOrPath same as previous line.
  • [ ] addESModuleFlagPlugin at line 3051 - validate functionality.
  • [ ] babelTranspile at line 3122, update babel version number.
  • [ ] es6 at line 4600, update babel-standalone to @babel/standalone.
  • [ ] stealPath option: replace paths at line 8159, maybe? These might be ok?

this.paths["babel"] = dirname+"/ext/babel.js";
this.paths["babel-runtime"] = dirname+"/ext/babel-runtime.js";
this.paths["@@babel-code-frame"] = dirname+"/ext/babel-code-frame.js";

• [ ] steal.js seems to be nearly identical to steal-with-promises.js. Can we deprecate non-promise version?
  • [ ] isBuiltinPlugin at line 1527, support modules prefixed with babel- and @babel/.
  • [ ] getNpmPluginNameOrPath support both module prefixes.
  • [ ] getNpmPluginNameOrPath same as previous line.
  • [ ] getBabelPresets update presets?
  • [ ] getBabelVersion at line 1615, update version
  • [ ] isBuiltinPreset at line 1747, update module format to support babel- and @babel/
  • [ ] getNpmPresetNameOrPath same as above.
  • [ ] see rest of above
• [ ] config.js update names around line 293.
• [ ] src/base/base.js update npm module names.
• [ ] src/base/lib/extension-es6.js update npm module names.
• [ ] src/loader/index.js update npm module names. deprecate or remove in favor of the promise version on the next line?
  • [ ] Also the same function edits as steal-with-promises.
• [ ] src/loader/loader-with-promises.js update npm module names.
  • [ ] Also the same function edits as steal-with-promises.
• [ ] src/loader/lib/transpiler.js update npm module names.
  • [ ] Also the same function edits as steal-with-promises.

Babel-related Tests

Same as `steal-tools?

• [ ] worker-babel.js, update module prefixes
• [ ] babel_plugins_test.js
  • [ ] 4 tests
• [ ] babel_presents_test.js
  • [ ] 3 tests
• [ ] export_global_js_test.js
  • [ ] 3 tests
• [ ] export_test.js
  • [ ] 1 test, might just work without change because it only specifies 'babel' in the target options.
• [ ] multibuild_test.js
  • [ ] 3 tests

Docs

• [ ] Migration Guide
  • [ ] Replace any babel-preset-es2015 or other years with babel-preset-env
• [ ] config-babelOptions.md

steal-tools

Babel Modules & Related Files

• [ ] babel-standalone with `@babel/standalone

  • [ ] process_babel_plugins.js
  • [ ] treeshake.js

• [ ] babel-minify stays the same https://babeljs.io/docs/en/babel-minify

  • [ ] minify_js.js

• [ ] babel-plugin-steal-test

  • [ ] Probably need to update syntax for Babel 7
  • [ ] Keep the same module name. It's a test module so we won't be publishing it in the @babel/ org. This means we need to make sure babel module detection supports babel- and @babel/ prefixes.

• [ ] shim.js - not sure how this is used.

• [ ] transpile.js

  • [ ] handles processBabelPlugins and processBabelPresets
  • [ ] see if babelOptions need to change. Seems unlikely.

Babel-related Tests

• [ ] babel_plugins_test.js
  • [ ] 4 tests
• [ ] babel_presents_test.js
  • [ ] 3 tests
• [ ] export_global_js_test.js
  • [ ] 3 tests
• [ ] export_test.js
  • [ ] 1 test, might just work without change because it only specifies 'babel' in the target options.
• [ ] multibuild_test.js
  • [ ] 3 tests

These next tests are for general babel functionality and should likely continue to work without changes after the upgrade.

• [ ] test/babel/
• [ ] test/babel_child/
• [ ] test/babel_env_plugins/
• [ ] test/babel_env_presets/
• [ ] test/babel_local_plugins/ has a few lines that may need updating.
• [ ] test/babel_local_presets/ has a few lines that may need updating.
• [ ] test/babel_npm_plugins/
• [ ] test/babel_npm_presets/

Docs

• [ ] transpiler.md update requires.

[pYr0x]

hey marshallswain,

i don't think there is any benefit to upgrade stealJS. There are several alternatives like viteJS and rollup. Loading a website with stealJS in production takes a long time compared to viteJS and rollup. Even in development these tools are much faster then stealJS (which is loading package.json -files). i usually requested 100 files in dev, Even with deps-bundles.

i converted my projects to viteJS and rollup if i don't care about IE. Otherwise, I use webpack.

stealjs was a nice project, but missed the boat with other projects

[marshallswain]

Thanks, @pYr0x,we were actually looking and fixing some really large projects using Steal, but determined that the upgrade would not have fixed the particular issue we were having because Babel is unable to transform the code in question with any existing plugins.

I agree with you on Vite being amazing. I use it for all of my personal projects, now. It's so fast that you don't have time to think, let alone take a short break, between code changes. I keep having the thought to make a stache adapter for it because it would save so much development time. Maybe someday I will actually do it.

[pYr0x]

here is a vite-stache-plugin https://github.com/pYr0x/vite-plugin-stache i created some other plugins for snowpack and rollup as well: https://github.com/pYr0x?tab=repositories

[marshallswain]

@pYr0x Oh wow. That's awesome! Thanks for sharing. I'll try it out!