Make library and react-components presets compile down to ES5 #948

acconrad · 2018-06-09T16:57:39Z

This solves #781 by using babel-preset-env#forceAllTransforms to compile the library package down to ES5.

#722 is also solved via eb7a6c2

edmorley

Hi! Thank you for the PR.

On master we're using Babel 7, which has deprecated the uglify option, It's been replaced by forceAllTransforms: true:
https://new.babeljs.io/docs/en/babel-preset-env#targetsuglify
babel/babel-preset-env#264

Other thoughts:

should we also make an equivalent change to @neutrinojs/react-components, to fix the related react-components preset should compile down to es5 by default #722 at the same time?
should we use specific browser versions instead of forcing all transforms?

acconrad · 2018-06-09T18:17:55Z

Hi @edmorley ! The PR is fixed per your instructions. library and react-component both now feature forceAllTransforms: true to compile down to ES5. Should make it in time for v9 release :)

eliperelman · 2018-06-14T16:39:01Z

I believe the way CRA solves this is to use ie9 as the browser to compile to. Any more thoughts here?

edmorley · 2018-06-14T17:45:08Z

packages/react-components/index.js

    externals: opts.externals !== false && {},
    style: { extract: { plugin: { filename: '[name].css' } } }
  }, opts);

+  Object.assign(options, {
+    babel: compileLoader.merge({


The react-components preset inherits from the react preset, which already configures @babel/preset-env. As such I don't think we need to add this here, and instead could just override the targets passed to the react preset.

@edmorley so the entire Object.assign portion can be safely ignored?

Yeah I believe so. I'd just set default values for options.targets and let those be passed down to the react (and thus web) presets.

Not sure this is entirely true.

So I see that basically every package starts with an empty babel object and builds on it ->

https://github.com/mozilla-neutrino/neutrino-dev/blob/master/packages/react/index.js#L20

https://github.com/mozilla-neutrino/neutrino-dev/blob/master/packages/web/index.js#L85

Also it appears as if web (which is under react, which is under react-components) already builds out the default browser list:

https://github.com/mozilla-neutrino/neutrino-dev/blob/master/packages/web/index.js#L70

So I can see removing some of the params I've already provided, but I still think I need to use this Object.assign pattern to at least include the new ES5 component.

The reason the other presets start with an empty babel object, is that they need to customise the list of plugins used.

However for this PR, the only thing that needs changing, is the list of browser/node targets, which can be passed down via the standard options, and will cause the existing web preset functionality to use them:
https://github.com/mozilla-neutrino/neutrino-dev/blob/e597c615e2c76e9986b6262249e35001a00efc0f/packages/web/index.js#L94

eliperelman · 2018-06-26T13:53:46Z

@acconrad could you rebase this please?

acconrad · 2018-06-26T14:11:09Z

all set @eliperelman !

edmorley · 2018-07-01T17:35:04Z

packages/react-components/index.js

    externals: opts.externals !== false && {},
    style: { extract: { plugin: { filename: '[name].css' } } }
  }, opts);

+  Object.assign(options, {
+    babel: compileLoader.merge({


The reason the other presets start with an empty babel object, is that they need to customise the list of plugins used.

However for this PR, the only thing that needs changing, is the list of browser/node targets, which can be passed down via the standard options, and will cause the existing web preset functionality to use them:
https://github.com/mozilla-neutrino/neutrino-dev/blob/e597c615e2c76e9986b6262249e35001a00efc0f/packages/web/index.js#L94

edmorley · 2018-07-01T17:35:30Z

packages/library/index.js

@@ -27,6 +27,7 @@ module.exports = (neutrino, opts = {}) => {
      presets: [
        [require.resolve('@babel/preset-env'), {
          debug: neutrino.options.debug,
+          forceAllTransforms: true,


I don't think we want forceAllTransforms for the same reasons as mentioned previously -- a specific browser/node target is probably best.

so what are those targets then?

CRA uses ie9 to compile for ES5.

do there need to be targets for other browsers? i thought you needed to specify them for each type

For the browser targets, Babel essentially reduces support down to the least common denominator. With ie9 being pretty low, it outputs code to the least common denominator of ES5.

All that to say, by specifying ie9, all the output code is ES5 which all of the other browsers will happily use.

…o library-to-es5

acconrad · 2018-07-10T17:18:03Z

@edmorley I think that takes care of adding in the browser support to ie 9, is there anything else that needs modification? I think I added in the options piece for react-components as well

edmorley · 2018-07-10T17:31:27Z

Could you also update the README for the two packages?
https://github.com/mozilla-neutrino/neutrino-dev/blame/master/packages/react-components/README.md#L18
https://github.com/mozilla-neutrino/neutrino-dev/blame/master/packages/library/README.md#L11
https://github.com/mozilla-neutrino/neutrino-dev/blame/master/packages/library/README.md#L261

For the change to the react-components README, I think the browser versions reference needs to be moved out of the "Modern Babel compilation ..." line (since it's under the "partially extends" section), and to a new bullet specific to that package.

acconrad · 2018-07-10T18:25:34Z

all set @edmorley - documentation updated

eliperelman · 2018-07-11T13:36:25Z

packages/react-components/README.md

@@ -14,8 +14,9 @@ other Neutrino middleware, so you can build, test, and publish multiple React co
 - Support for React Hot Loader
 - Write JSX in .js or .jsx files
 - Support for importing web workers with `.worker.*` file extensions
+- Compiles down to ES5 for all major browsers with support up to IE 9


Can you change this to say "Compiles to ES5 to support major browsers, publishing to npm, and library interoperability"

edmorley · 2018-07-13T15:11:55Z

@acconrad, there are conflicts with master (I think due to the use of merge rather than rebase, otherwise GitHub would normally be able to handle them) - could you rebase?

* Reduce number of airbnb-base rules that are globally disabled * Remove redundant lint `include` from .neutrinorc.js Since `include` is only used by `eslint-loader`, and all linting for this monorepo occurs via the ESLint CLI, bypassing it. * Lint repo root .eslintrc.js too (and any other future dotfiles) This also means the `.eslintignore` entry for `.neutrinorc.js` can be removed, since ESLint doesn't ignore dotfiles specified via globs. The `lint` script's glob has to be double quoted and escaped, to ensure it works correctly on Windows. * Lint tests too * Lint the create-projects templates directory too The `vue` dependency was added to fix: `Unable to resolve path to module 'vue' import/no-unresolved` ...but will also have the benefit of meaning we get a Renovate PR when it's time to update the pinned version of Vue in create-project's version matrix. * Lint JSX too Files with extension `.jsx` are now linted, which gives coverage of the various JSX create-project template files. (Doing the same for `.vue` turned out to be much more of a pain, since it requires a different parser/plugin/rules than the ones used by the AirBnb preset - so not bothering for now.) * Use --report-unused-disable-directives

) Since otherwise warnings are not even printed (such as those that are emitted by `eslint-loader` when `failOnError` is `false`).

The `tests` directory was already added to the `lint` script command by create-project, however it was not yet listed in the `include` for `eslint-loader`. The testing presets already update `envs` accordingly, to prevent errors from mocha/jest/... globals. The redundant `eslint.extensions` option has been removed, since that was only used by the ESLint Node API, which we no longer use. Fixes neutrinojs#331.

This significantly improves the performance when using ESLint via its CLI (ie the `yarn lint` command configured by create-project), and also via `eslint-loader` (when using `yarn start` or `yarn build`): https://eslint.org/docs/user-guide/command-line-interface#caching https://github.com/webpack-contrib/eslint-loader#cache-default-false Fixes neutrinojs#954.

…rinojs#957) * Clean up imports of package matrix Imports directly from `matrix.js` instead of via `utils.js`, and renames `projects` to `presets` to be more accurate, and avoid the conflation with `this.data.project`. * Install a matching version of Neutrino packages Now create-project always installs the same major version of Neutrino monorepo packages as found in create-project's `package.json`. This avoids problems where the preset's templates, script entries or other dependencies have changed in a non-backwards-compatible way between Neutrino major versions. * Stop using lerna canary mode for publishing Since we need the `package.json` version bumps to be left in the working directory (which doesn't happen with canary mode), so that `create-project` can read the correct version when determining the matching monorepo package versions. This also works around the bug where Verdaccio rejects alphanumeric prerelease identifiers that start with a number (ie a proportion of SHAs). The `--npm-tag latest` is no longer required, since non-canary mode defaults to `latest`.

…#958) * Clean up lerna configuration - Moves `--force-publish` to the config file. - Removes redundant `packages` option (since `useWorkspaces` set). - Moves `gitRemote` under the publish command options, since it's not used by any other commands. * Use lerna exact mode when publishing This makes lerna use exact versions rather than caret ranges when updating the inter-monorepo package dependency versions, which makes it possible to install historic versions of monorepo packages without them using a mixture of old and new minor/patch versions. See: https://github.com/lerna/lerna#--exact-1 * Bump version to 9.0.0-0 prerelease To make it clearer that `master` is for the upcoming Neutrino 9, and also start using exact versions. The peer dependencies had to be updated manually, and have to use a pre-release identifier to prevent yarn warnings spam when using presets with pre-release `neutrino`.

And adjust `HelloWorld` method ordering to fix a new `react/sort-comp` failure from a `eslint-plugin-react` breaking change in a minor version: ``` packages\create-project\commands\init\templates\react-components\src\components\HelloWorld\index.jsx 11:3 error defaultProps should be placed after propTypes react/sort-comp ```

* Update dependency eslint-config-airbnb to v17 * Bump minimum eslint-plugin-{import,react} To match airbnb-config's peer dependency, and since it actually needs features only available on the newer versions. Fixes: ``` node_modules/eslint-config-airbnb/rules/react.js: Configuration for rule "react/jsx-no-target-blank" is invalid: Value [{"enforceDynamicLinks":"always"}] should NOT have more than 0 items. ``` * Fix new eslint errors ``` packages/create-project/commands/init/index.js 40:12 error Unnecessary 'else' after 'return' no-else-return packages/create-project/commands/init/templates/preact/src/App.jsx 12:13 error `Welcome to ` must be placed on a new line react/jsx-one-expression-per-line 12:24 error `{this.state.name}` must be placed on a new line react/jsx-one-expression-per-line 12:25 error Must use destructuring state assignment react/destructuring-assignment packages/create-project/commands/init/templates/react-components/src/components/HelloWorld/index.jsx 20:12 error Must use destructuring props assignment react/destructuring-assignment 24:26 error Must use destructuring props assignment react/destructuring-assignment 38:29 error Must use destructuring state assignment react/destructuring-assignment 38:66 error `Hello World!` must be placed on a new line react/jsx-one-expression-per-line 39:9 error Missing an explicit type attribute for button react/button-has-type 39:44 error `Change color` must be placed on a new line react/jsx-one-expression-per-line packages/create-project/commands/init/templates/react/src/App.jsx 13:13 error `Welcome to ` must be placed on a new line react/jsx-one-expression-per-line 13:24 error `{this.state.name}` must be placed on a new line react/jsx-one-expression-per-line 13:25 error Must use destructuring state assignment react/destructuring-assignment ``` The `componentWillReceiveProps` usage was removed since its use is now discouraged, and the behaviour of not letting new props override current state seems fine. See: https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

…ojs#966) Follow-up to neutrinojs#957 that fixes the "is a monorepo package" check to also include the main `neutrino` package, and not just the monorepo presets themselves. Before: `Installing devDependencies: @neutrinojs/react@^9.0.0-0, neutrino, ...` After: `Installing devDependencies: @neutrinojs/react@^9.0.0-0, neutrino@^9.0.0-0, ...`

acconrad · 2018-07-13T15:26:20Z

Ugh this rebase got all screwed up, I'm closing this repo and re-opening off of master to make this all cleaner

…994) To ensure that their output is fully ES5 compatible. Fixes #722. Fixes #781. Supersedes #948.

Library package compiles down to ES5

8f4b49f

edmorley reviewed Jun 9, 2018

View reviewed changes

PR fixes

0ed6e45

Add es5 support for react-components as well

eb7a6c2

acconrad force-pushed the library-to-es5 branch from c521f19 to eb7a6c2 Compare June 9, 2018 18:28

edmorley reviewed Jun 14, 2018

View reviewed changes

Simplify option overloading

578dbf8

Merge branch 'master' into library-to-es5

93b6a0a

edmorley added the breaking change label Jul 1, 2018

edmorley suggested changes Jul 1, 2018

View reviewed changes

edmorley changed the title ~~Library package compiles down to ES5~~ Make library and react-components presets compile down to ES5 Jul 1, 2018

acconrad added 2 commits July 10, 2018 13:13

simplify down to a set of browsers to compile down to

0fc8120

Merge branch 'library-to-es5' of github.com:acconrad/neutrino-dev int…

abb0547

…o library-to-es5

simplify react-components

81dacf6

acconrad force-pushed the library-to-es5 branch from 4c397a5 to 81dacf6 Compare July 10, 2018 17:23

update documentation

3e872a7

eliperelman reviewed Jul 11, 2018

View reviewed changes

acconrad and others added 2 commits July 11, 2018 09:46

update documentation

1ea5e30

Remove stray whitespace

f2efeb9

edmorley approved these changes Jul 13, 2018

View reviewed changes

eliperelman approved these changes Jul 13, 2018

View reviewed changes

Library package compiles down to ES5

0791cee

acconrad and others added 21 commits July 13, 2018 11:15

PR fixes

61e8071

Add es5 support for react-components as well

97447ba

Update babel monorepo to v7.0.0-beta.51

d76299e

Simplify option overloading

d3e93e0

karma: Use 'minimal' rather than 'errors-only' for stats (neutrinojs#952

54c6653

) Since otherwise warnings are not even printed (such as those that are emitted by `eslint-loader` when `failOnError` is `false`).

Update dependency eslint-config-airbnb-base to v13

ca2ae9d

Update dependency babel-loader to v8.0.0-beta.4

ae6aa71

simplify down to a set of browsers to compile down to

a573461

simplify react-components

6692a14

update documentation

9450246

update documentation

948eb69

resolve merge conflict

2e5199c

acconrad closed this Jul 13, 2018

acconrad deleted the library-to-es5 branch July 13, 2018 15:35

acconrad mentioned this pull request Jul 13, 2018

Target IE9 as the browser to support ES5 compilation #994

Merged

edmorley pushed a commit that referenced this pull request Jul 13, 2018

Make the library and react-components presets target IE9 by default (#…

3440500

…994) To ensure that their output is fully ES5 compatible. Fixes #722. Fixes #781. Supersedes #948.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make library and react-components presets compile down to ES5 #948

Make library and react-components presets compile down to ES5 #948

acconrad commented Jun 9, 2018 •

edited

Loading

edmorley left a comment

acconrad commented Jun 9, 2018

eliperelman commented Jun 14, 2018

edmorley Jun 14, 2018

acconrad Jun 14, 2018

edmorley Jun 14, 2018

acconrad Jun 14, 2018 •

edited

Loading

edmorley Jul 1, 2018

eliperelman commented Jun 26, 2018

acconrad commented Jun 26, 2018

edmorley Jul 1, 2018

edmorley Jul 1, 2018 •

edited

Loading

acconrad Jul 1, 2018

eliperelman Jul 2, 2018

acconrad Jul 2, 2018

eliperelman Jul 10, 2018

eliperelman Jul 10, 2018

acconrad commented Jul 10, 2018 •

edited

Loading

edmorley commented Jul 10, 2018

acconrad commented Jul 10, 2018

eliperelman Jul 11, 2018

acconrad Jul 11, 2018

edmorley commented Jul 13, 2018

acconrad commented Jul 13, 2018

Make library and react-components presets compile down to ES5 #948

Make library and react-components presets compile down to ES5 #948

Conversation

acconrad commented Jun 9, 2018 • edited Loading

edmorley left a comment

Choose a reason for hiding this comment

acconrad commented Jun 9, 2018

eliperelman commented Jun 14, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

acconrad Jun 14, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eliperelman commented Jun 26, 2018

acconrad commented Jun 26, 2018

Choose a reason for hiding this comment

edmorley Jul 1, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

acconrad commented Jul 10, 2018 • edited Loading

edmorley commented Jul 10, 2018

acconrad commented Jul 10, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

edmorley commented Jul 13, 2018

acconrad commented Jul 13, 2018

acconrad commented Jun 9, 2018 •

edited

Loading

acconrad Jun 14, 2018 •

edited

Loading

edmorley Jul 1, 2018 •

edited

Loading

acconrad commented Jul 10, 2018 •

edited

Loading