Breaking: Drop support for Node.js 8 - Node.js 10.13.0 is now the min…

…imum required version - closes #547 Breaking: Remove support for deprecated babel.stage and webpack.uglify config Breaking: Remove default polyfills for Promise, fetch() and Object.assign() - import react-app-polyfill in your app if you need polyfills Update dependencies which have dropped Node 8
insin · May 12, 2020 · d0da9d6 · d0da9d6
1 parent 6163fa0
commit d0da9d6
Show file tree

Hide file tree

Showing 26 changed files with 48 additions and 225 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -2,9 +2,9 @@ sudo: false
 
 language: node_js
 node_js:
-  - 8
   - 10
   - 12
+  - 14
 
 cache:
   directories:

diff --git a/CHANGES.md b/CHANGES.md
@@ -1,3 +1,24 @@
+# `next` branch
+
+## Breaking Changes
+
+- Node.js 8 is no longer supported; Node.js 10.13.0 is now the minimum required version, as per many of nwb's dependencies.
+- Removed support for deprecated `babel.stage` and `webpack.uglify` config.
+- Removed default polyfills for `Promise`, `fetch()` and `Object.assign()` and deprecated `polyfill` config.
+  - If you need to support older browsers, you will need to provide the necessary polyfills yourself.
+  - The [react-app-polyfill](https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill#react-app-polyfill) module provides polyfills for IE 9-11, and for stable language features - its instructions also work for apps using nwb.
+- file-loader v6.0.0 [changed its default hashing algorithm](https://github.com/webpack-contrib/file-loader/blob/master/CHANGELOG.md#600-2020-03-17).
+
+## Dependencies
+
+- chalk: v3.0.0 → [v4.0.0](https://github.com/chalk/chalk/releases/tag/v4.0.0)
+- file-loader: v4.3.0 → [v6.0.0](https://github.com/webpack-contrib/file-loader/blob/master/CHANGELOG.md#600-2020-03-17)
+- fs-extra: v8.1.0 → [v9.0.0](https://github.com/jprichardson/node-fs-extra/blob/master/CHANGELOG.md#900--2020-03-19)
+- karma: v4.4.1 → [v5.0.5](https://github.com/karma-runner/karma/blob/master/CHANGELOG.md#505-2020-05-07)
+- karma-mocha: v1.3.0 → [v2.0.1](https://github.com/karma-runner/karma-mocha/blob/master/CHANGELOG.md#201-2020-04-29)
+- terser-webpack-plugin v2.3.6 → [v3.0.1](https://github.com/webpack-contrib/terser-webpack-plugin/blob/master/CHANGELOG.md#301-2020-05-06)
+- url-loader: v2.3.0→ [v4.1.0](https://github.com/webpack-contrib/url-loader/blob/master/CHANGELOG.md)
+
 # 0.24.6 / 2020-05-12
 
 ## Dependencies

diff --git a/appveyor.yml b/appveyor.yml
@@ -5,7 +5,7 @@ branches:
 
 environment:
   matrix:
-  - nodejs_version: "8"
+  - nodejs_version: "12"
 
 install:
   - ps: Install-Product node $env:nodejs_version x64

diff --git a/docs/Configuration.md b/docs/Configuration.md
@@ -68,7 +68,6 @@ The configuration object can include the following properties:
 
 - nwb Configuration
   - [`type`](#type-string-required-for-generic-build-commands)
-  - [`polyfill`](#polyfill-boolean) - control automatic polyfilling
 - [Babel Configuration](#babel-configuration)
   - [`babel`](#babel-object)
   - [`babel.cherryPick`](#cherrypick-string--arraystring) - enable cherry-picking for destructured `import` statements
@@ -140,18 +139,6 @@ If configured, it must be one of the following:
 - `'web-app'`
 - `'web-module'`
 
-#### `polyfill`: `Boolean`
-
-For apps, nwb will provide polyfills for `Promise`, `fetch` and `Object.assign` by default.
-
-To disable this, set `polyfill` to `false`:
-
-```js
-module.exports = {
-  polyfill: false
-}
-```
-
 ### Babel Configuration
 
 #### `babel`: `Object`
@@ -378,10 +365,6 @@ module.exports = {
 }
 ```
 
-##### `stage`: `Number | false`
-
-*deprecated in v0.24.0 - use [`babel.proposals` config](#proposals-object--false) instead*
-
 ##### `config`: `Function`
 
 Finally, if you need *complete* control, provide a `babel.config()` function which will be given the generated config.

diff --git a/docs/FAQ.md b/docs/FAQ.md
@@ -63,10 +63,6 @@ If you only need CSS Modules for some of the stylesheets you'll be importing, yo
 
 ### What can I configure to reduce bundle size?
 
-#### Disable default polyfills
-
-If you don't need the `Promise`, `fetch` and `Object.assign` polyfills nwb provides by default, configuring [`polyfill: false`](/docs/Configuration.md#polyfill-boolean) (or passing a [`--no-polyfill` flag](/docs/guides/QuickDevelopment.md#options-for-run-and-build-commands) when using Quick Development commands) will shave ~4KB off the gzipped vendor bundle.
-
 #### Enable cherry-picking for destructuring imports
 
 If you're using destructuring imports with libraries like React Router and React Bootstrap (e.g. `import {Button} from 'react-bootstrap'`), you're bundling the whole library, instead of just the bits you need.

diff --git a/docs/Features.md b/docs/Features.md
@@ -5,7 +5,6 @@
 - Provides tooling for [React](https://facebook.github.io/react/) apps and components, [Preact](https://preactjs.com/) apps, [Inferno](https://infernojs.org/) apps, and vanilla JS web apps and npm modules.
 - Use modern JavaScript features, and JSX.
 - Use proposed JavaScript features now.
-- Default polyfills and configuration allow use of [`Promise`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) (with [rejection tracking](https://www.2ality.com/2016/04/unhandled-rejections.html) enabled), [`fetch()`](https://developer.mozilla.org/en/docs/Web/API/Fetch_API), [`async`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)/[`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await), [generators](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/function*) and [`Object.assign()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) in any browser.
 - Import CSS (and font resources) and images to be managed by Webpack.
 - [Autoprefixed](https://github.com/postcss/autoprefixer#autoprefixer-) CSS, so you don't need to write browser prefixes; you can also configure your own [PostCSS](https://postcss.org/) plugins.
 - Plugin modules which add support for the [Sass](https://github.com/insin/nwb-sass), [Less](https://github.com/insin/nwb-less) and [Stylus](https://github.com/insin/nwb-stylus) stylesheet languages.

diff --git a/docs/Testing.md b/docs/Testing.md
@@ -136,7 +136,7 @@ module.exports = {
 
 #### Automatic Babel Polyfill
 
-A context module is commonly used to load polyfills to allow tests to run in browsers missing certain features, but you don't need to worry about that if you were just going to use `babel-polyfill` - nwb automatically injects Babel's polyfill into Karma tests for you.
+A context module is commonly used to load polyfills to allow tests to run in browsers missing certain features, but you don't need to worry about that if you were just going to use `@babel/polyfill` - nwb automatically injects Babel's polyfill into Karma tests for you.
 
 #### Configuring Testing Libraries
 

diff --git a/docs/guides/QuickDevelopment.md b/docs/guides/QuickDevelopment.md
@@ -118,10 +118,6 @@ Don't use a rendering shim, run the provided entry module directly - see [Opting
 
 The default HTML template provided contains a `<div>` which the app is rendered into, with a default `id` of `'app'`. You can change the `id` with this setting.
 
-#### `--no-polyfill`
-
-Disable inclusion of nwb's default polyfills for `Promise`, `fetch()` and `Object.assign()` - you can use this to shave a few KB off the final bundle size if you're not using these features, are only supporting browsers which support them natively, or would prefer to provide your own polyfills, etc.
-
 #### `--title`
 
 Contents for `<title>` - defaults to the type of app you're serving, e.g. `'Preact App'`
@@ -177,7 +173,6 @@ Create a build of a React project which uses Inferno or Preact as the runtime vi
   - Decorators.
   - Export extensions.
 
-- Polyfills for `Promise`,  `fetch()` and `Object.assign()`, which can be disabled with a `--no-polyfill` flag if you don’t need them or want to provide your own.
 - Import images and stylesheets into JavaScript like any other module, to be handled by Webpack as part of its build.
 
   ```js

diff --git a/docs/guides/ReactApps.md b/docs/guides/ReactApps.md
@@ -148,7 +148,6 @@ Without any configuration, the main features you get are:
 - Use proposed JavaScript features which make writing React apps more convenient:
   - Class properties, for avoiding boilerplate when writing classes.
   - Decorators, for libraries which are intended to be used with them.
-- Polyfills for  `Promise`,  `fetch` and `Object.assign`.
 - Import stylesheets (and font resources), images and JSON into JavaScript, to be handled by Webpack.
 - Autoprefixed CSS, so you don't need to write browser prefixes.
 

diff --git a/package.json b/package.json
@@ -26,17 +26,17 @@
     "polyfills.js"
   ],
   "engines": {
-    "node": ">=8.9.0"
+    "node": ">=10.13.0"
   },
   "dependencies": {
-    "chalk": "3.0.0",
+    "chalk": "4.0.0",
     "copy-template-dir": "1.4.0",
     "cross-spawn": "7.0.2",
     "debug": "4.1.1",
     "detect-port": "1.3.0",
     "figures": "3.2.0",
     "filesize": "6.1.0",
-    "fs-extra": "8.1.0",
+    "fs-extra": "9.0.0",
     "gzip-size": "5.1.1",
     "inquirer": "7.1.0",
     "minimist": "1.2.5",
@@ -67,10 +67,10 @@
     "babel-preset-proposals": "0.3.0",
     "react-refresh": "0.8.2",
 
-    "karma": "4.4.1",
+    "karma": "5.0.5",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage": "2.0.2",
-    "karma-mocha": "1.3.0",
+    "karma-mocha": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "karma-phantomjs-launcher": "1.0.4",
     "karma-sourcemap-loader": "0.3.7",
@@ -91,16 +91,16 @@
     "copy-webpack-plugin": "5.1.1",
     "css-loader": "3.5.3",
     "eventsource-polyfill": "0.9.6",
-    "file-loader": "4.3.0",
+    "file-loader": "6.0.0",
     "html-webpack-plugin": "4.3.0",
     "mini-css-extract-plugin": "0.9.0",
     "@insin/npm-install-webpack-plugin": "5.0.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "open": "7.0.3",
     "postcss-loader": "3.0.0",
     "style-loader": "1.2.1",
-    "terser-webpack-plugin": "2.3.6",
-    "url-loader": "2.3.0",
+    "terser-webpack-plugin": "3.0.1",
+    "url-loader": "4.1.0",
     "webpack-dev-middleware": "3.7.2",
     "webpack-dev-server": "3.11.0",
     "webpack-hot-middleware": "2.25.0"

diff --git a/polyfills.js b/polyfills.js
diff --git a/src/appCommands.js b/src/appCommands.js
@@ -78,10 +78,6 @@ export function createBuildConfig(args: Object, extra: Object = {}) {
     config.plugins.copy = [{from: path.resolve('public'), to: dist, ignore: ['.gitkeep']}]
   }
 
-  if (args.polyfill === false || args.polyfills === false) {
-    config.polyfill = false
-  }
-
   return merge(config, extra)
 }
 

diff --git a/src/commands/inferno.js b/src/commands/inferno.js
@@ -55,7 +55,6 @@ Commands:
       ${opt('--host')}         hostname to bind the dev server to
       ${opt('--mount-id')}     id for the <div> the app will render into ${opt('[default: app]')}
       ${opt('--no-fallback')}  disable serving of the index page from any path
-      ${opt('--no-polyfill')}  disable inclusion of default polyfills
       ${opt('--port')}         port to run the dev server on ${opt('[default: 3000]')}
       ${opt('--reload')}       auto reload the page if hot reloading fails
       ${opt('--title')}        contents for <title> ${opt('[default: Inferno App]')}
@@ -70,7 +69,6 @@ Commands:
     Options:
       ${opt('--force')}        don't shim rendering, use the given entry module directly
       ${opt('--mount-id')}     id for the <div> the app will render into ${opt('[default: app]')}
-      ${opt('--no-polyfill')}  disable bundling of default polyfills
       ${opt('--title')}        contents for <title> ${opt('[default: Inferno App]')}
       ${opt('--vendor')}       create a 'vendor' bundle for node_modules/ modules
 `)

diff --git a/src/commands/preact.js b/src/commands/preact.js
@@ -55,7 +55,6 @@ Commands:
       ${opt('--host')}         hostname to bind the dev server to
       ${opt('--mount-id')}     id for the <div> the app will render into ${opt('[default: app]')}
       ${opt('--no-fallback')}  disable serving of the index page from any path
-      ${opt('--no-polyfill')}  disable inclusion of default polyfills
       ${opt('--port')}         port to run the dev server on ${opt('[default: 3000]')}
       ${opt('--reload')}       auto reload the page if hot reloading fails
       ${opt('--title')}        contents for <title> ${opt('[default: Preact App]')}
@@ -70,7 +69,6 @@ Commands:
     Options:
       ${opt('--force')}        don't shim rendering, use the given entry module directly
       ${opt('--mount-id')}     id for the <div> the app will render into ${opt('[default: app]')}
-      ${opt('--no-polyfill')}  disable bundling of default polyfills
       ${opt('--title')}        contents for <title> ${opt('[default: Preact App]')}
       ${opt('--vendor')}       create a 'vendor' bundle for node_modules/ modules
 `)

diff --git a/src/commands/react.js b/src/commands/react.js
@@ -56,7 +56,6 @@ Commands:
       ${opt('--mount-id')}     id for the <div> the app will render into ${opt('[default: app]')}
       ${opt('--no-fallback')}  disable serving of the index page from any path
       ${opt('--no-hmr')}       disable use of Fast Refresh for Hot Module Replacement
-      ${opt('--no-polyfill')}  disable inclusion of default polyfills
       ${opt('--port')}         port to run the dev server on ${opt('[default: 3000]')}
       ${opt('--reload')}       auto reload the page if hot reloading fails
       ${opt('--title')}        contents for <title> ${opt('[default: React App]')}
@@ -71,7 +70,6 @@ Commands:
     Options:
       ${opt('--force')}        don't shim rendering, use the given entry module directly
       ${opt('--mount-id')}     id for the <div> the app will render into ${opt('[default: app]')}
-      ${opt('--no-polyfill')}  disable bundling of default polyfills
       ${opt('--title')}        contents for <title> ${opt('[default: React App]')}
       ${opt('--vendor')}       create a 'vendor' bundle for node_modules/ modules
 

diff --git a/src/commands/web.js b/src/commands/web.js
@@ -55,7 +55,6 @@ Commands:
       ${opt('--mount-id')}     id for the <div> in the default HTML ${opt('[default: app]')}
       ${opt('--no-fallback')}  disable serving of the index page from any path
       ${opt('--no-reload')}    disable auto reloading on changes
-      ${opt('--no-polyfill')}  disable inclusion of default polyfills
       ${opt('--port')}         port to run the dev server on ${opt('[default: 3000]')}
       ${opt('--title')}        contents for <title> ${opt('[default: Web App]')}
 
@@ -68,7 +67,6 @@ Commands:
 
     Options:
       ${opt('--mount-id')}     id for the <div> in the default HTML ${opt('[default: app]')}
-      ${opt('--no-polyfill')}  disable bundling of default polyfills
       ${opt('--title')}        contents for <title> ${opt('[default: Web App]')}
       ${opt('--vendor')}       create a 'vendor' bundle for node_modules/ modules
 `)

diff --git a/src/config/babel.js b/src/config/babel.js
@@ -1,37 +1,7 @@
 import {validateOptions} from 'babel-preset-proposals'
 import chalk from 'chalk'
 
-import {padLines, pluralise as s, toSource, typeOf} from '../utils'
-
-// TODO Remove - deprecated
-let warnedAboutStageConfig = false
-const STAGE_3_PROPOSALS = {
-  dynamicImport: true,
-  importMeta: true,
-  classProperties: true,
-  numericSeparator: true,
-  // Actually Stage 4, but still...
-  exportNamespaceFrom: true,
-}
-const STAGE_2_PROPOSALS = {
-  ...STAGE_3_PROPOSALS,
-  decorators: true,
-  functionSent: true,
-  logicalAssignmentOperators: true,
-  throwExpressions: true,
-}
-const STAGE_1_PROPOSALS = {
-  ...STAGE_2_PROPOSALS,
-  exportDefaultFrom: true,
-  pipelineOperator: true,
-  doExpressions: true,
-}
-const PROPOSALS_BY_STAGE = {
-  0: {all: true},
-  1: STAGE_1_PROPOSALS,
-  2: STAGE_2_PROPOSALS,
-  3: STAGE_3_PROPOSALS,
-}
+import {pluralise as s, typeOf} from '../utils'
 
 export function processBabelConfig({report, userConfig}) {
   let {
@@ -45,7 +15,6 @@ export function processBabelConfig({report, userConfig}) {
     react,
     reactConstantElements,
     runtime,
-    stage,
     config,
     ...unexpectedConfig
   } = userConfig.babel
@@ -189,57 +158,6 @@ export function processBabelConfig({report, userConfig}) {
     }
   }
 
-  // TODO Remove - deprecated
-  // stage
-  if ('stage' in userConfig.babel) {
-    let hasProposalsConfig = 'proposals' in userConfig.babel
-    let deprecationMessages = [
-      'Deprecated as of nwb v0.24.0, as Babel 7 no longer has preset-stage-X presets',
-      'Use babel.proposals config instead to enable the required proposal plugins',
-    ]
-
-    if (typeOf(stage) === 'number') {
-      if (stage < 0 || stage > 3) {
-        report.error(
-          'babel.stage',
-          stage,
-          `Must be between ${chalk.cyan(0)} and ${chalk.cyan(3)}`
-        )
-      }
-      else if (!hasProposalsConfig) {
-        deprecationMessages.push(
-          `For now, nwb will enable proposal plugins corresponding to the final version of preset-stage-${stage}`,
-          `This is equivalent to the following babel.proposals config:`,
-          '',
-          ...padLines(toSource(PROPOSALS_BY_STAGE[stage])).split('\n')
-        )
-        userConfig.babel.proposals = {...PROPOSALS_BY_STAGE[stage]}
-      }
-    }
-    else if (stage !== false) {
-      report.error(
-        'babel.stage',
-        stage,
-        `Must be a ${chalk.cyan('Number')} between ${chalk.cyan(0)} and ${chalk.cyan(3)} (to choose a stage preset), ` +
-        `or ${chalk.cyan('false')} (to disable use of a stage preset)`
-      )
-    }
-    else {
-      if (!hasProposalsConfig) {
-        deprecationMessages.push(
-          `For now, nwb will disable use of proposal plugins`,
-          `This is equivalent to configuring ${chalk.cyan('babel.proposals = false')}`
-        )
-        userConfig.babel.proposals = false
-      }
-    }
-
-    if (!warnedAboutStageConfig) {
-      report.deprecated('babel.stage', ...deprecationMessages)
-      warnedAboutStageConfig = true
-    }
-  }
-
   // config
   if ('config' in userConfig.babel && typeOf(config) !== 'function') {
     report.error(