Nwb: Babel 7

[insin]

Essential

• [x] Compatibility issues with babel-plugin-inferno
• [x] Drop use of loose mode, as extending built-ins works as expected now, but breaks with loose mode
• [x] babel-plugin-react-transform doesn't work with Babel 7 and is deprecated - switch to react-hot-loader
• [x] Issue with babel-plugin-add-module-exports for ES5 builds: https://github.com/59naga/babel-plugin-add-module-exports/issues/61
• [x] stage-X presets are being removed - created a babel-preset-proposals preset we'll use to handle this instead
• [x] plugin-transform-runtime removed its moduleName option https://github.com/babel/babel/pull/8266
  
  
  
  • Workaround would be to require local installation of @babel/runtime - we could do this automatically for quick commands
  
  

Nice to have

• [x] Hot Module Replacement - babel-plugin-react-transform doesn't work with Babel 7 and is deprecated.

  Replaced with react-hot-loader (which also supports patching component methods defined with class properties! o/) and react-hot-loader-loader to mark the main app module for hot reloading without having to add it to your app code.

• [ ] render() error handling - babel-plugin-react-transform did this really nicely, but it's been removed from the latest react-hot-loader, so you need to deal with render() errors yourself by wrapping with your own error boundary.

  Also not sure if error boundaries preserve state and allow for recovery by fixing render(), which is where babel-plugin-react-transform's HMR handling came in handy when working deep in a component tree.

  Could try using https://github.com/smooth-code/error-overlay-webpack-plugin as a guide to integrating create-react-app's error overlay (does it allow for recovery or it is one-and-done?)

[mikkelwf]

Babel 7 is a dependency for new react fragments --> https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

[xtuc]

I'll subscribe to this issue, let me know if you have any issue when upgrade to Babel 7.

Btw you seem to rely on babel-preset-stage-*, I would recommend you using babel-preset-env instead.

[insin]

Thanks @xtuc 👍

The babel-preset-env docs say it won't include the stage-x plugins - I would definitely use babel-preset-env for that instead if it supported passing a stage number.

[xtuc]

Sorry I forgot to say that instead of the stage-x presets it's better to use the individual proposal/syntax plugins. For example for destructing: babel-plugin-transform-destructuring.

Stage presets are subject to breaking changes quite often since proposal are moving.

[insin]

True, will need to come up with an alternative way to allow specification of individual plugins for nwb.

[insin]

For component libraries/web modules, we should ensure export extensions are enabled independently of stage presets #364

[xtuc]

babel-preset-env: { target: "current" } will make the trick since it will transpile whatever features you used against the current Node environment.

[insin]

Istanbul fix for Babel 7 compat (tests currently generate Unable to process function body node type: ArrowFunctionExpression warning messages): https://github.com/istanbuljs/istanbuljs/pull/125

[insin]

Branch for Babel 7 work: https://github.com/insin/nwb/tree/babel7

Only 2 errors! https://travis-ci.org/insin/nwb/jobs/328192310 (But many things are actually broken when you try, e.g. babel-plugin-react-transform doesn't work any more)

I think I the first one might be an issue with Babel 7 - if you're extending a builtin (we can remove the hacks in the constructor once this works) and using @babel/preset-env with loose: true config and targeting Node.js 4 as we are, the inheritsLoose helper seems to conflict with the wrapNativeSuper helper:

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}

function _wrapNativeSuper(Class) {
  if (typeof Class !== "function") {
    throw new TypeError("Super expression must either be null or a function");
  }
  if (typeof _cache !== "undefined") {
    if (_cache.has(Class)) return _cache.get(Class);
    _cache.set(Class, Wrapper);
  }
  function Wrapper() {}
  Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writeable: true, configurable: true } });
  return _sPO(Wrapper, _sPO(function Super() {
    return _construct(Class, arguments, _gPO(this).constructor);
  }, Class));
}

This works if you change the line which sets the constructor in inheritsLoose to Object.defineProperty(subClass.prototype, 'constructor', {value: subClass});

Second error is testing a new Inferno app, no idea yet:

Module build failed: TypeError: Property arguments[1] of CallExpression expected node to be of a type ["Expression","SpreadElement","JSXNamespacedName"] but instead got "JSXIdentifier"

Edit: this seems to be related to JSX in the entry module?

[xtuc]

We indeed changed the way extending a native class works, and it seems to be broken in loose mode as you mentioned.

Edit: after playing around with some code, I just go what you was saying. You will need to remove the constructor hack yes.

The second bug sounds strange to me, could you please maybe open an issue on the inferno preset?

[insin]

Found the issue with using react-hot-loader and verified that it works locally when you hard-code a constant instead: https://github.com/gaearon/react-hot-loader/issues/807

[insin]

Since stage-X presets are being removed, I propose adding a new babel.experimental flag to nwb's config, with settings equivalent to some/quite (default - current stage 2 plugins and above plus export-default-from) and all/very (all experimental plugins).

[insin]

@babel/plugin-transform-runtime has removed its moduleName option - nwb relied on this for global usage and for quick development commands, as it allowed the plugin to generate imports with the absolute path to the babel-runtime in nwb's dependencies.

ERROR  in ./demo/src/index.js
Module build failed (from C:/Users/Jonny/repos/nwb/node_modules/babel-loader/lib/index.js):
Error: [BABEL] C:\Users\Jonny\repos\nwb-manual-testsuite\react-component\demo\src\index.js: The 'moduleName' option has been removed. @babel/transform-runtime no longer supports arbitrary runtimes. (While processing: "C:\\Users\\Jonny\\repos\\nwb\\node_modules\\@babel\\plugin-transform-runtime\\lib\\index.js")

With the moduleName option removed, the runtime can no longer be resolved as this dependency is being managed by nwb, away from the working directory and not in require() scope:

ERROR  in ./demo/src/index.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/esm/extends' in 'C:\Users\Jonny\repos\nwb-manual-testsuite\react-component\demo\src'

[ugeng]

Hi, @insin! Thank you for your great work at nwb!
Did I understand correctly that babel7 isn't supported yet?

[tgreen7]

Any updates on this? Will nwb be adding support for babel 7?

[A11oW]

How we can help with update to babel 7?

[insin]

Implemented in 44530220491c4ba3483d0f2b4abca8db3e6286cd