From 29e2fccb52e8f3a7b00c806979ef8a919d6676df Mon Sep 17 00:00:00 2001 From: Jack Hsu Date: Mon, 12 Dec 2022 14:44:26 -0500 Subject: [PATCH] feat(webpack): remove support for legacy browsers --- .../packages/react/generators/init.json | 2 +- .../packages/webpack/executors/webpack.json | 4 - e2e/nx-run/src/affected-graph.test.ts | 1 - e2e/web/src/web.test.ts | 17 -- .../react/plugins/component-testing/index.ts | 1 - packages/react/plugins/storybook/index.ts | 7 - .../application/application.spec.ts | 15 -- .../files/common/.browserslistrc__tmpl__ | 16 -- .../files/common/src/polyfills.ts__tmpl__ | 7 - .../generators/application/lib/add-project.ts | 4 - packages/react/src/generators/init/init.ts | 2 - .../react/src/generators/init/schema.json | 2 +- packages/web/babel.ts | 1 - .../application/application.spec.ts | 1 - .../src/generators/application/application.ts | 4 - .../files/app/src/polyfills.ts__tmpl__ | 7 - packages/webpack/package.json | 2 - .../dev-server/lib/get-dev-server-config.ts | 2 - .../webpack/lib/get-webpack-config.ts | 32 +--- .../webpack/lib/normalize-options.ts | 6 +- .../webpack/src/executors/webpack/schema.d.ts | 1 - .../webpack/src/executors/webpack/schema.json | 4 - .../src/executors/webpack/webpack.impl.ts | 102 ++++------- packages/webpack/src/utils/config.ts | 64 +++---- packages/webpack/src/utils/models.ts | 1 - .../webpack/build-browser-features.spec.ts | 161 ------------------ .../utils/webpack/build-browser-features.ts | 78 --------- .../src/utils/webpack/package-chunk-sort.ts | 2 - .../src/utils/webpack/partials/browser.ts | 9 +- .../src/utils/webpack/partials/common.ts | 66 +------ .../index-file/index-html-generator.ts | 11 +- .../plugins/index-html-webpack-plugin.ts | 7 +- .../src/utils/webpack/write-index-html.ts | 20 +-- 33 files changed, 79 insertions(+), 580 deletions(-) delete mode 100644 packages/react/src/generators/application/files/common/.browserslistrc__tmpl__ delete mode 100644 packages/react/src/generators/application/files/common/src/polyfills.ts__tmpl__ delete mode 100644 packages/web/src/generators/application/files/app/src/polyfills.ts__tmpl__ delete mode 100644 packages/webpack/src/utils/webpack/build-browser-features.spec.ts delete mode 100644 packages/webpack/src/utils/webpack/build-browser-features.ts diff --git a/docs/generated/packages/react/generators/init.json b/docs/generated/packages/react/generators/init.json index 1dc4ad03259eb1..5122a0829ac2be 100644 --- a/docs/generated/packages/react/generators/init.json +++ b/docs/generated/packages/react/generators/init.json @@ -37,7 +37,7 @@ "default": false }, "skipHelperLibs": { - "description": "Do not install helpers libs (tslib, core-js, regenerator-runtime).", + "description": "Do not install tslib.", "type": "boolean", "default": false, "hidden": true diff --git a/docs/generated/packages/webpack/executors/webpack.json b/docs/generated/packages/webpack/executors/webpack.json index b5205f93070602..978e1a70b5f4b2 100644 --- a/docs/generated/packages/webpack/executors/webpack.json +++ b/docs/generated/packages/webpack/executors/webpack.json @@ -307,10 +307,6 @@ "description": "Extract CSS into a `.css` file.", "default": true }, - "es2015Polyfills": { - "description": "Conditional polyfills loaded in browsers which do not support `ES2015`.", - "type": "string" - }, "subresourceIntegrity": { "type": "boolean", "description": "Enables the use of subresource integrity validation.", diff --git a/e2e/nx-run/src/affected-graph.test.ts b/e2e/nx-run/src/affected-graph.test.ts index b34b5be8cf3891..04afebbace74ee 100644 --- a/e2e/nx-run/src/affected-graph.test.ts +++ b/e2e/nx-run/src/affected-graph.test.ts @@ -597,7 +597,6 @@ describe('Nx Affected and Graph Tests', () => { expect(() => checkFilesExist('project-graph.html')).not.toThrow(); expect(() => checkFilesExist('static/styles.css')).not.toThrow(); expect(() => checkFilesExist('static/runtime.js')).not.toThrow(); - expect(() => checkFilesExist('static/polyfills.js')).not.toThrow(); expect(() => checkFilesExist('static/main.js')).not.toThrow(); expect(() => checkFilesExist('static/environment.js')).not.toThrow(); diff --git a/e2e/web/src/web.test.ts b/e2e/web/src/web.test.ts index 2f7e345e6dfdb6..c6857607704f61 100644 --- a/e2e/web/src/web.test.ts +++ b/e2e/web/src/web.test.ts @@ -112,23 +112,6 @@ describe('Web Components Applications', () => { checkFilesExist(`dist/libs/${libName}/_should_keep.txt`); }, 120000); - it('should do another build if differential loading is needed', async () => { - const appName = uniq('app'); - - runCLI( - `generate @nrwl/web:app ${appName} --bundler=webpack --no-interactive` - ); - - updateFile(`apps/${appName}/browserslist`, `IE 9-11`); - - runCLI(`build ${appName} --outputHashing=none`); - - checkFilesExist( - `dist/apps/${appName}/main.js`, - `dist/apps/${appName}/main.es5.js` - ); - }, 120000); - it('should emit decorator metadata when it is enabled in tsconfig', async () => { const appName = uniq('app'); runCLI( diff --git a/packages/react/plugins/component-testing/index.ts b/packages/react/plugins/component-testing/index.ts index 7c1a226effdf74..a463049bea9418 100644 --- a/packages/react/plugins/component-testing/index.ts +++ b/packages/react/plugins/component-testing/index.ts @@ -222,7 +222,6 @@ function buildTargetWebpack( const defaultWebpack = getWebpackConfig( context, options, - true, isScriptOptimizeOn, { root: ctProjectConfig.root, diff --git a/packages/react/plugins/storybook/index.ts b/packages/react/plugins/storybook/index.ts index e62db3befd13bc..38f98ba9b69148 100644 --- a/packages/react/plugins/storybook/index.ts +++ b/packages/react/plugins/storybook/index.ts @@ -1,11 +1,7 @@ import { - ExecutorContext, joinPathFragments, logger, - ProjectGraph, readJsonFile, - readNxJson, - TargetConfiguration, workspaceRoot, } from '@nrwl/devkit'; import { getBaseWebpackPartial } from '@nrwl/webpack/src/utils/config'; @@ -17,7 +13,6 @@ import { gte } from 'semver'; import { Configuration, DefinePlugin, WebpackPluginInstance } from 'webpack'; import * as mergeWebpack from 'webpack-merge'; import { mergePlugins } from './merge-plugins'; -import { readProjectsConfigurationFromProjectGraph } from 'nx/src/project-graph/project-graph'; const reactWebpackConfig = require('../webpack'); @@ -119,14 +114,12 @@ export const webpack = async ( target: 'web', }; - const esm = true; const isScriptOptimizeOn = storybookWebpackConfig.mode !== 'development'; const extractCss = storybookWebpackConfig.mode === 'production'; // ESM build for modern browsers. const baseWebpackConfig = mergeWebpack.merge([ getBaseWebpackPartial(builderOptions, { - esm, isScriptOptimizeOn, skipTypeCheck: true, }), diff --git a/packages/react/src/generators/application/application.spec.ts b/packages/react/src/generators/application/application.spec.ts index 12c42801e930b2..2c2cd18375d006 100644 --- a/packages/react/src/generators/application/application.spec.ts +++ b/packages/react/src/generators/application/application.spec.ts @@ -73,7 +73,6 @@ describe('app', () => { await applicationGenerator(appTree, schema); expect(appTree.exists('apps/my-app/.babelrc')).toBeTruthy(); - expect(appTree.exists('apps/my-app/.browserslistrc')).toBeTruthy(); expect(appTree.exists('apps/my-app/src/main.tsx')).toBeTruthy(); expect(appTree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy(); expect(appTree.exists('apps/my-app/src/app/app.spec.tsx')).toBeTruthy(); @@ -312,7 +311,6 @@ describe('app', () => { main: 'apps/my-app/src/main.tsx', baseHref: '/', outputPath: 'dist/apps/my-app', - polyfills: 'apps/my-app/src/polyfills.ts', scripts: [], styles: ['apps/my-app/src/styles.css'], tsConfig: 'apps/my-app/tsconfig.app.json', @@ -810,19 +808,6 @@ describe('app', () => { ).toBeUndefined(); }); - it('should add required polyfills for core-js and regenerator', async () => { - await applicationGenerator(appTree, { - ...schema, - }); - - const polyfillsSource = appTree - .read('apps/my-app/src/polyfills.ts') - .toString(); - - expect(polyfillsSource).toContain('regenerator'); - expect(polyfillsSource).toContain('core-js'); - }); - describe('--skipWorkspaceJson', () => { it('should update workspace with defaults when --skipWorkspaceJson=false', async () => { await applicationGenerator(appTree, { diff --git a/packages/react/src/generators/application/files/common/.browserslistrc__tmpl__ b/packages/react/src/generators/application/files/common/.browserslistrc__tmpl__ deleted file mode 100644 index f1d12df4faa25a..00000000000000 --- a/packages/react/src/generators/application/files/common/.browserslistrc__tmpl__ +++ /dev/null @@ -1,16 +0,0 @@ -# This file is used by: -# 1. autoprefixer to adjust CSS to support the below specified browsers -# 2. babel preset-env to adjust included polyfills -# -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries -# -# If you need to support different browsers in production, you may tweak the list below. - -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major version -last 2 iOS major versions -Firefox ESR -not IE 9-11 # For IE 9-11 support, remove 'not'. \ No newline at end of file diff --git a/packages/react/src/generators/application/files/common/src/polyfills.ts__tmpl__ b/packages/react/src/generators/application/files/common/src/polyfills.ts__tmpl__ deleted file mode 100644 index 2adf3d05b6fcf4..00000000000000 --- a/packages/react/src/generators/application/files/common/src/polyfills.ts__tmpl__ +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`. - * - * See: https://github.com/zloirock/core-js#babel - */ -import 'core-js/stable'; -import 'regenerator-runtime/runtime'; diff --git a/packages/react/src/generators/application/lib/add-project.ts b/packages/react/src/generators/application/lib/add-project.ts index 804900447a4d12..384e0a84e34ca9 100644 --- a/packages/react/src/generators/application/lib/add-project.ts +++ b/packages/react/src/generators/application/lib/add-project.ts @@ -57,10 +57,6 @@ function createBuildTarget(options: NormalizedSchema): TargetConfiguration { options.appProjectRoot, maybeJs(options, `src/main.tsx`) ), - polyfills: joinPathFragments( - options.appProjectRoot, - maybeJs(options, 'src/polyfills.ts') - ), tsConfig: joinPathFragments(options.appProjectRoot, 'tsconfig.app.json'), assets: [ joinPathFragments(options.appProjectRoot, 'src/favicon.ico'), diff --git a/packages/react/src/generators/init/init.ts b/packages/react/src/generators/init/init.ts index 171384eca47c3e..a50b41672a5818 100755 --- a/packages/react/src/generators/init/init.ts +++ b/packages/react/src/generators/init/init.ts @@ -52,8 +52,6 @@ function updateDependencies(host: Tree, schema: InitSchema) { }; if (!schema.skipHelperLibs) { - dependencies['core-js'] = '^3.6.5'; - dependencies['regenerator-runtime'] = '0.13.7'; dependencies['tslib'] = tsLibVersion; } diff --git a/packages/react/src/generators/init/schema.json b/packages/react/src/generators/init/schema.json index 1f907f6d259378..1c6800c0244a90 100644 --- a/packages/react/src/generators/init/schema.json +++ b/packages/react/src/generators/init/schema.json @@ -34,7 +34,7 @@ "default": false }, "skipHelperLibs": { - "description": "Do not install helpers libs (tslib, core-js, regenerator-runtime).", + "description": "Do not install tslib.", "type": "boolean", "default": false, "hidden": true diff --git a/packages/web/babel.ts b/packages/web/babel.ts index 516b2f5962e454..78967e3ecef0ad 100644 --- a/packages/web/babel.ts +++ b/packages/web/babel.ts @@ -43,7 +43,6 @@ module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) { ? { targets: { node: 'current' }, loose: true } : { // Allow importing core-js in entrypoint and use browserlist to select polyfills. - // This is needed for differential loading as well. useBuiltIns: options.useBuiltIns ?? 'entry', corejs: 3, // Do not transform modules to CJS diff --git a/packages/web/src/generators/application/application.spec.ts b/packages/web/src/generators/application/application.spec.ts index 9589fd298889e8..47b671143bb658 100644 --- a/packages/web/src/generators/application/application.spec.ts +++ b/packages/web/src/generators/application/application.spec.ts @@ -344,7 +344,6 @@ describe('app', () => { baseHref: '/', main: 'apps/my-app/src/main.ts', outputPath: 'dist/apps/my-app', - polyfills: 'apps/my-app/src/polyfills.ts', scripts: [], styles: ['apps/my-app/src/styles.css'], tsConfig: 'apps/my-app/tsconfig.app.json', diff --git a/packages/web/src/generators/application/application.ts b/packages/web/src/generators/application/application.ts index 2f6d5211ba71c2..6f91829cb21656 100644 --- a/packages/web/src/generators/application/application.ts +++ b/packages/web/src/generators/application/application.ts @@ -91,10 +91,6 @@ async function setupBundler(tree: Tree, options: NormalizedSchema) { 'src/index.html' ); buildOptions.baseHref = '/'; - buildOptions.polyfills = joinPathFragments( - options.appProjectRoot, - 'src/polyfills.ts' - ); buildOptions.styles = [ joinPathFragments(options.appProjectRoot, `src/styles.${options.style}`), ]; diff --git a/packages/web/src/generators/application/files/app/src/polyfills.ts__tmpl__ b/packages/web/src/generators/application/files/app/src/polyfills.ts__tmpl__ deleted file mode 100644 index 2adf3d05b6fcf4..00000000000000 --- a/packages/web/src/generators/application/files/app/src/polyfills.ts__tmpl__ +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`. - * - * See: https://github.com/zloirock/core-js#babel - */ -import 'core-js/stable'; -import 'regenerator-runtime/runtime'; diff --git a/packages/webpack/package.json b/packages/webpack/package.json index f229622684b8d7..7ac95bea513fdc 100644 --- a/packages/webpack/package.json +++ b/packages/webpack/package.json @@ -34,8 +34,6 @@ "@nrwl/workspace": "file:../workspace", "autoprefixer": "^10.4.9", "babel-loader": "^8.2.2", - "browserslist": "^4.21.4", - "caniuse-lite": "^1.0.30001394", "chalk": "4.1.0", "chokidar": "^3.5.1", "copy-webpack-plugin": "^10.2.4", diff --git a/packages/webpack/src/executors/dev-server/lib/get-dev-server-config.ts b/packages/webpack/src/executors/dev-server/lib/get-dev-server-config.ts index eae0b8b7a76056..cfbe56ca770aff 100644 --- a/packages/webpack/src/executors/dev-server/lib/get-dev-server-config.ts +++ b/packages/webpack/src/executors/dev-server/lib/get-dev-server-config.ts @@ -23,7 +23,6 @@ export function getDevServerConfig( const webpackConfig = getWebpackConfig( context, buildOptions, - true, typeof buildOptions.optimization === 'boolean' ? buildOptions.optimization : buildOptions.optimization?.scripts @@ -53,7 +52,6 @@ export function getDevServerConfig( deployUrl, sri: subresourceIntegrity, moduleEntrypoints: [], - noModuleEntrypoints: ['polyfills-es5'], }) ); diff --git a/packages/webpack/src/executors/webpack/lib/get-webpack-config.ts b/packages/webpack/src/executors/webpack/lib/get-webpack-config.ts index 10cdf2f3a50af5..85c5d0c82e1e0f 100644 --- a/packages/webpack/src/executors/webpack/lib/get-webpack-config.ts +++ b/packages/webpack/src/executors/webpack/lib/get-webpack-config.ts @@ -1,7 +1,6 @@ import * as path from 'path'; import { posix, resolve } from 'path'; import { readTsConfig } from '@nrwl/workspace/src/utilities/typescript'; -import { ScriptTarget } from 'typescript'; import { getHashDigest, interpolateName } from 'loader-utils'; import type { Configuration } from 'webpack'; @@ -34,7 +33,6 @@ interface GetWebpackConfigOverrides { export function getWebpackConfig( context: ExecutorContext, options: NormalizedWebpackExecutorOptions, - esm?: boolean, isScriptOptimizeOn?: boolean, overrides?: GetWebpackConfigOverrides ): Configuration { @@ -53,19 +51,11 @@ export function getWebpackConfig( sourceRoot = project.sourceRoot; } - if (isScriptOptimizeOn) { - // Angular CLI uses an environment variable (NG_BUILD_DIFFERENTIAL_FULL) - // to determine whether to use the scriptTargetOverride - // or the tsConfig target - // We want to force the target if overridden - tsConfig.options.target = ScriptTarget.ES5; - } const wco: any = { root: workspaceRoot, projectRoot: resolve(workspaceRoot, projectRoot), sourceRoot: resolve(workspaceRoot, sourceRoot), buildOptions: convertBuildOptions(options), - esm, console, tsConfig, tsConfigPath: options.tsConfig, @@ -75,18 +65,12 @@ export function getWebpackConfig( _getBaseWebpackPartial( context, options, - esm, isScriptOptimizeOn, tsConfig.options.emitDecoratorMetadata, overrides ), options.target === 'web' - ? getPolyfillsPartial( - options.polyfills, - options.es2015Polyfills, - esm, - isScriptOptimizeOn - ) + ? getPolyfillsPartial(options.polyfills, isScriptOptimizeOn) : {}, options.target === 'web' ? getStylesPartial( @@ -105,7 +89,6 @@ export function getWebpackConfig( function _getBaseWebpackPartial( context: ExecutorContext, options: NormalizedWebpackExecutorOptions, - esm: boolean, isScriptOptimizeOn: boolean, emitDecoratorMetadata: boolean, overrides?: GetWebpackConfigOverrides @@ -113,7 +96,6 @@ function _getBaseWebpackPartial( let partial = getBaseWebpackPartial( options, { - esm, isScriptOptimizeOn, emitDecoratorMetadata, configuration: overrides?.configuration ?? context.configurationName, @@ -271,33 +253,23 @@ export function getStylesPartial( export function getPolyfillsPartial( polyfills: string, - es2015Polyfills: string, - esm: boolean, isScriptOptimizeOn: boolean ): Configuration { const config = { entry: {} as { [key: string]: string[] }, }; - if (polyfills && esm && isScriptOptimizeOn) { + if (polyfills && isScriptOptimizeOn) { // Safari 10.1 supports