From f880bd295d258667afbec7076fae4bbdfab2d29f Mon Sep 17 00:00:00 2001 From: Jason Jean Date: Thu, 4 Feb 2021 16:56:44 -0500 Subject: [PATCH] feat(react): remove references to angular devkit from @nrwl/web (#4705) --- .../migrations/update-9-4-0/babelrc-9-4-0.ts | 2 +- .../src/migrations}/utils/rules.ts | 0 packages/web/.eslintrc.json | 2 +- packages/web/builders.json | 3 +- packages/web/package.json | 4 - .../web/src/builders/file-server/compat.ts | 5 + .../builders/file-server/file-server.impl.ts | 5 +- packages/web/src/utils/config.spec.ts | 3 +- .../web/src/utils/devserver.config.spec.ts | 2 +- packages/web/src/utils/devserver.config.ts | 2 +- packages/web/src/utils/normalize.spec.ts | 9 +- packages/web/src/utils/source-root.ts | 13 -- packages/web/src/utils/testing.ts | 56 --------- ...ator_spec.ts => bundle-calculator.spec.ts} | 0 .../augment-index-html.spec.ts.snap | 7 ++ ...tml_spec.ts => augment-index-html.spec.ts} | 50 +------- ...spec.ts => build-browser-features.spec.ts} | 114 +++++++----------- 17 files changed, 72 insertions(+), 205 deletions(-) rename packages/{web/src => react/src/migrations}/utils/rules.ts (100%) create mode 100644 packages/web/src/builders/file-server/compat.ts delete mode 100644 packages/web/src/utils/source-root.ts delete mode 100644 packages/web/src/utils/testing.ts rename packages/web/src/utils/third-party/cli-files/utilities/{bundle-calculator_spec.ts => bundle-calculator.spec.ts} (100%) create mode 100644 packages/web/src/utils/third-party/cli-files/utilities/index-file/__snapshots__/augment-index-html.spec.ts.snap rename packages/web/src/utils/third-party/cli-files/utilities/index-file/{augment-index-html_spec.ts => augment-index-html.spec.ts} (66%) rename packages/web/src/utils/third-party/utils/{build-browser-features_spec.ts => build-browser-features.spec.ts} (65%) diff --git a/packages/react/src/migrations/update-9-4-0/babelrc-9-4-0.ts b/packages/react/src/migrations/update-9-4-0/babelrc-9-4-0.ts index 9723c772df..1183236485 100644 --- a/packages/react/src/migrations/update-9-4-0/babelrc-9-4-0.ts +++ b/packages/react/src/migrations/update-9-4-0/babelrc-9-4-0.ts @@ -9,7 +9,7 @@ import { stripIndent, stripIndents, } from '@angular-devkit/core/src/utils/literals'; -import { initRootBabelConfig } from '@nrwl/web/src/utils/rules'; +import { initRootBabelConfig } from '../utils/rules'; import { addDepsToPackageJson, formatFiles } from '@nrwl/workspace'; let addedEmotionPreset = false; diff --git a/packages/web/src/utils/rules.ts b/packages/react/src/migrations/utils/rules.ts similarity index 100% rename from packages/web/src/utils/rules.ts rename to packages/react/src/migrations/utils/rules.ts diff --git a/packages/web/.eslintrc.json b/packages/web/.eslintrc.json index b6ddf614e6..5c720ddb20 100644 --- a/packages/web/.eslintrc.json +++ b/packages/web/.eslintrc.json @@ -7,7 +7,7 @@ "excludedFiles": ["./src/migrations/**"], "rules": { "no-restricted-imports": [ - "warn", + "error", "@nrwl/workspace", "@angular-devkit/core", "@angular-devkit/schematics", diff --git a/packages/web/builders.json b/packages/web/builders.json index ca2c83f5b5..29c847d08e 100644 --- a/packages/web/builders.json +++ b/packages/web/builders.json @@ -1,5 +1,4 @@ { - "$schema": "@angular-devkit/architect/src/builders-schema.json", "builders": { "build": { "implementation": "./src/builders/build/compat", @@ -17,7 +16,7 @@ "description": "Serve a web application" }, "file-server": { - "implementation": "./src/builders/file-server/file-server.impl", + "implementation": "./src/builders/file-server/compat", "schema": "./src/builders/file-server/schema.json", "description": "Serve a web application from a folder" } diff --git a/packages/web/package.json b/packages/web/package.json index 15f6539db7..7094713876 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -32,10 +32,6 @@ "@nrwl/devkit": "*", "@nrwl/jest": "*", "@nrwl/linter": "*", - "@angular-devkit/architect": "~0.1100.1", - "@angular-devkit/build-webpack": "~0.1100.1", - "@angular-devkit/core": "~11.0.1", - "@angular-devkit/schematics": "~11.0.1", "@babel/core": "7.9.6", "@babel/preset-env": "7.9.6", "@babel/plugin-proposal-class-properties": "7.8.3", diff --git a/packages/web/src/builders/file-server/compat.ts b/packages/web/src/builders/file-server/compat.ts new file mode 100644 index 0000000000..094efc4231 --- /dev/null +++ b/packages/web/src/builders/file-server/compat.ts @@ -0,0 +1,5 @@ +import { convertNxExecutor } from '@nrwl/devkit'; + +import fileServerExecutor from './file-server.impl'; + +export default convertNxExecutor(fileServerExecutor); diff --git a/packages/web/src/builders/file-server/file-server.impl.ts b/packages/web/src/builders/file-server/file-server.impl.ts index 144b75cd4c..93ca981d38 100644 --- a/packages/web/src/builders/file-server/file-server.impl.ts +++ b/packages/web/src/builders/file-server/file-server.impl.ts @@ -1,11 +1,10 @@ -import { JsonObject } from '@angular-devkit/core'; import watch from 'node-watch'; import { exec, execSync } from 'child_process'; import { ExecutorContext } from '@nrwl/devkit'; import ignore from 'ignore'; import { readFileSync } from 'fs-extra'; -export interface FileServerOptions extends JsonObject { +export interface FileServerOptions { host: string; port: number; ssl: boolean; @@ -141,7 +140,7 @@ export default async function ( process.stderr.write(chunk); }); - return new Promise((res) => { + return new Promise<{ success: boolean }>((res) => { serve.on('exit', (code) => { if (code == 0) { res({ success: true }); diff --git a/packages/web/src/utils/config.spec.ts b/packages/web/src/utils/config.spec.ts index bc77018086..9e38caf9c0 100644 --- a/packages/web/src/utils/config.spec.ts +++ b/packages/web/src/utils/config.spec.ts @@ -5,7 +5,6 @@ import { LicenseWebpackPlugin } from 'license-webpack-plugin'; import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'; import { ProgressPlugin } from 'webpack'; import { BuildBuilderOptions } from './types'; -import { normalize } from '@angular-devkit/core'; import CircularDependencyPlugin = require('circular-dependency-plugin'); import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); import * as CopyWebpackPlugin from 'copy-webpack-plugin'; @@ -21,7 +20,7 @@ describe('getBaseWebpackPartial', () => { tsConfig: 'tsconfig.json', fileReplacements: [], root: '/root', - sourceRoot: normalize('/root/src'), + sourceRoot: '/root/src', statsJson: false, }; (( diff --git a/packages/web/src/utils/devserver.config.spec.ts b/packages/web/src/utils/devserver.config.spec.ts index 9975780e1c..e663e1fa95 100644 --- a/packages/web/src/utils/devserver.config.spec.ts +++ b/packages/web/src/utils/devserver.config.spec.ts @@ -167,7 +167,7 @@ describe('getDevServerConfig', () => { }); it('should open the url if --open is passed', () => { - mockServer.options.open = true; + serveInput.open = true; const { devServer: result } = getDevServerConfig( root, sourceRoot, diff --git a/packages/web/src/utils/devserver.config.ts b/packages/web/src/utils/devserver.config.ts index cf37920657..2926b1c15b 100644 --- a/packages/web/src/utils/devserver.config.ts +++ b/packages/web/src/utils/devserver.config.ts @@ -67,7 +67,7 @@ function getDevServerPartial( }); logger.info(`NX Web Development Server is listening at ${serverUrl}`); - if (server.options.open) { + if (options.open) { opn(serverUrl, { wait: false, }); diff --git a/packages/web/src/utils/normalize.spec.ts b/packages/web/src/utils/normalize.spec.ts index 4b947ab18d..8855aad459 100644 --- a/packages/web/src/utils/normalize.spec.ts +++ b/packages/web/src/utils/normalize.spec.ts @@ -1,13 +1,12 @@ import { normalizeBuildOptions, normalizePackageOptions } from './normalize'; import { BuildBuilderOptions, PackageBuilderOptions } from './types'; -import { Path, normalize } from '@angular-devkit/core'; import * as fs from 'fs'; describe('normalizeBuildOptions', () => { let testOptions: BuildBuilderOptions; let root: string; - let sourceRoot: Path; + let sourceRoot: string; beforeEach(() => { testOptions = { @@ -29,7 +28,7 @@ describe('normalizeBuildOptions', () => { webpackConfig: 'apps/nodeapp/webpack.config', }; root = '/root'; - sourceRoot = normalize('apps/nodeapp/src'); + sourceRoot = 'apps/nodeapp/src'; }); it('should resolve main from root', () => { @@ -117,7 +116,7 @@ describe('normalizeBuildOptions', () => { describe('normalizePackageOptions', () => { let testOptions: PackageBuilderOptions; let root: string; - let sourceRoot: Path; + let sourceRoot: string; beforeEach(() => { testOptions = { @@ -129,7 +128,7 @@ describe('normalizePackageOptions', () => { rollupConfig: 'apps/nodeapp/rollup.config', }; root = '/root'; - sourceRoot = normalize('apps/nodeapp/src'); + sourceRoot = 'apps/nodeapp/src'; }); it('should resolve both node modules and relative path for babelConfig/rollupConfig', () => { diff --git a/packages/web/src/utils/source-root.ts b/packages/web/src/utils/source-root.ts deleted file mode 100644 index ecb390e107..0000000000 --- a/packages/web/src/utils/source-root.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { BuilderContext } from '@angular-devkit/architect'; - -export async function getSourceRoot(context: BuilderContext): Promise { - const projectMeta = await context.getProjectMetadata(context.target.project); - if (projectMeta.sourceRoot) { - return projectMeta.sourceRoot as string; - } else { - context.reportStatus('Error'); - const message = `${context.target.project} does not have a sourceRoot. Please define one.`; - context.logger.error(message); - throw new Error(message); - } -} diff --git a/packages/web/src/utils/testing.ts b/packages/web/src/utils/testing.ts deleted file mode 100644 index 773b2792f3..0000000000 --- a/packages/web/src/utils/testing.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { join } from 'path'; - -import { schema } from '@angular-devkit/core'; -import { Rule, Tree } from '@angular-devkit/schematics'; -import { SchematicTestRunner } from '@angular-devkit/schematics/testing'; -import { Architect } from '@angular-devkit/architect'; -import { TestingArchitectHost } from '@angular-devkit/architect/testing'; - -import { MockBuilderContext } from '@nrwl/workspace/testing'; - -const testRunner = new SchematicTestRunner( - '@nrwl/web', - join(__dirname, '../../collection.json') -); - -testRunner.registerCollection( - '@nrwl/jest', - join(__dirname, '../../../jest/collection.json') -); - -testRunner.registerCollection( - '@nrwl/cypress', - join(__dirname, '../../../cypress/collection.json') -); - -export function runSchematic( - schematicName: string, - options: T, - tree: Tree -) { - return testRunner.runSchematicAsync(schematicName, options, tree).toPromise(); -} - -export function callRule(rule: Rule, tree: Tree) { - return testRunner.callRule(rule, tree).toPromise(); -} - -export async function getTestArchitect() { - const architectHost = new TestingArchitectHost('/root', '/root'); - const registry = new schema.CoreSchemaRegistry(); - registry.addPostTransform(schema.transforms.addUndefinedDefaults); - - const architect = new Architect(architectHost, registry); - - await architectHost.addBuilderFromPackage(join(__dirname, '../..')); - - return [architect, architectHost] as [Architect, TestingArchitectHost]; -} - -export async function getMockContext() { - const [architect, architectHost] = await getTestArchitect(); - - const context = new MockBuilderContext(architect, architectHost); - await context.addBuilderFromPackage(join(__dirname, '../..')); - return context; -} diff --git a/packages/web/src/utils/third-party/cli-files/utilities/bundle-calculator_spec.ts b/packages/web/src/utils/third-party/cli-files/utilities/bundle-calculator.spec.ts similarity index 100% rename from packages/web/src/utils/third-party/cli-files/utilities/bundle-calculator_spec.ts rename to packages/web/src/utils/third-party/cli-files/utilities/bundle-calculator.spec.ts diff --git a/packages/web/src/utils/third-party/cli-files/utilities/index-file/__snapshots__/augment-index-html.spec.ts.snap b/packages/web/src/utils/third-party/cli-files/utilities/index-file/__snapshots__/augment-index-html.spec.ts.snap new file mode 100644 index 0000000000..df3f4e3a60 --- /dev/null +++ b/packages/web/src/utils/third-party/cli-files/utilities/index-file/__snapshots__/augment-index-html.spec.ts.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`augment-index-html can generate index.html 1`] = `""`; + +exports[`augment-index-html should emit correct script tags when having 'module' and 'non-module' js 1`] = `""`; + +exports[`augment-index-html should not add 'module' and 'non-module' attr to js files which are in both module formats 1`] = `""`; diff --git a/packages/web/src/utils/third-party/cli-files/utilities/index-file/augment-index-html_spec.ts b/packages/web/src/utils/third-party/cli-files/utilities/index-file/augment-index-html.spec.ts similarity index 66% rename from packages/web/src/utils/third-party/cli-files/utilities/index-file/augment-index-html_spec.ts rename to packages/web/src/utils/third-party/cli-files/utilities/index-file/augment-index-html.spec.ts index c8ba726b7c..9c53a68985 100644 --- a/packages/web/src/utils/third-party/cli-files/utilities/index-file/augment-index-html_spec.ts +++ b/packages/web/src/utils/third-party/cli-files/utilities/index-file/augment-index-html.spec.ts @@ -5,7 +5,6 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ -import { tags } from '@angular-devkit/core'; import { AugmentIndexHtmlOptions, FileInfo, @@ -19,13 +18,10 @@ describe('augment-index-html', () => { baseHref: '/', sri: false, files: [], - loadOutputFile: async (_fileName: string) => '', + loadOutputFile: (_fileName: string) => '', entrypoints: ['scripts', 'polyfills', 'main', 'styles'], }; - const oneLineHtml = (html: TemplateStringsArray) => - tags.stripIndents`${html}`.replace(/(\>\s+)/g, '>'); - it('can generate index.html', async () => { const source = augmentIndexHtml({ ...indexGeneratorOptions, @@ -39,18 +35,7 @@ describe('augment-index-html', () => { }); const html = await source; - expect(html).toEqual(oneLineHtml` - - - - - - - - - - - `); + expect(html).toMatchSnapshot(); }); it(`should emit correct script tags when having 'module' and 'non-module' js`, async () => { @@ -79,22 +64,7 @@ describe('augment-index-html', () => { }); const html = await source; - expect(html).toEqual(oneLineHtml` - - - - - - - - - - - - - - - `); + expect(html).toMatchSnapshot(); }); it(`should not add 'module' and 'non-module' attr to js files which are in both module formats`, async () => { @@ -119,18 +89,6 @@ describe('augment-index-html', () => { }); const html = await source; - expect(html).toEqual(oneLineHtml` - - - - - - - - - - - - `); + expect(html).toMatchSnapshot(); }); }); diff --git a/packages/web/src/utils/third-party/utils/build-browser-features_spec.ts b/packages/web/src/utils/third-party/utils/build-browser-features.spec.ts similarity index 65% rename from packages/web/src/utils/third-party/utils/build-browser-features_spec.ts rename to packages/web/src/utils/third-party/utils/build-browser-features.spec.ts index 21dc0724eb..939852e4f5 100644 --- a/packages/web/src/utils/third-party/utils/build-browser-features_spec.ts +++ b/packages/web/src/utils/third-party/utils/build-browser-features.spec.ts @@ -6,72 +6,61 @@ * found in the LICENSE file at https://angular.io/license */ -import { TestProjectHost } from '@angular-devkit/architect/testing'; -import { getSystemPath, join } from '@angular-devkit/core'; +import { fs, vol } from 'memfs'; +jest.mock('fs', () => fs); import { ScriptTarget } from 'typescript'; + +// Disable browserslist cache so that each test resolves a new config. +process.env.BROWSERSLIST_DISABLE_CACHE = 'true'; + import { BuildBrowserFeatures } from './build-browser-features'; -const devkitRoot = (global as any)._DevKitRoot; // tslint:disable-line:no-any -const workspaceRoot = join( - devkitRoot, - 'tests/angular_devkit/build_angular/hello-world-app/' -); - -const host = new TestProjectHost(workspaceRoot); - describe('BuildBrowserFeatures', () => { - let workspaceRootSysPath = ''; beforeEach(async () => { - await host.initialize().toPromise(); - workspaceRootSysPath = getSystemPath(host.root()); + vol.fromJSON( + { + '.browserslistrc': '', + }, + '/root' + ); }); - afterEach(async () => host.restore().toPromise()); - describe('isDifferentialLoadingNeeded', () => { it('should be true for for IE 9-11 and ES2015', () => { - host.writeMultipleFiles({ - browserslist: 'IE 9-11', - }); + fs.writeFileSync('/root/.browserslistrc', 'IE 9-11'); const buildBrowserFeatures = new BuildBrowserFeatures( - workspaceRootSysPath, + '/root', ScriptTarget.ES2015 ); expect(buildBrowserFeatures.isDifferentialLoadingNeeded()).toBe(true); }); it('should be false for Chrome and ES2015', () => { - host.writeMultipleFiles({ - browserslist: 'last 1 chrome version', - }); + fs.writeFileSync('/root/.browserslistrc', 'last 1 chrome version'); const buildBrowserFeatures = new BuildBrowserFeatures( - workspaceRootSysPath, + '/root', ScriptTarget.ES2015 ); expect(buildBrowserFeatures.isDifferentialLoadingNeeded()).toBe(false); }); it('detects no need for differential loading for target is ES5', () => { - host.writeMultipleFiles({ - browserslist: 'last 1 chrome version', - }); + fs.writeFileSync('/root/.browserslistrc', 'last 1 chrome version'); const buildBrowserFeatures = new BuildBrowserFeatures( - workspaceRootSysPath, + '/root', ScriptTarget.ES5 ); expect(buildBrowserFeatures.isDifferentialLoadingNeeded()).toBe(false); }); it('should be false for Safari 10.1 when target is ES2015', () => { - host.writeMultipleFiles({ - browserslist: 'Safari 10.1', - }); + fs.writeFileSync('/root/.browserslistrc', 'Safari 10.1'); const buildBrowserFeatures = new BuildBrowserFeatures( - workspaceRootSysPath, + '/root', ScriptTarget.ES2015 ); expect(buildBrowserFeatures.isDifferentialLoadingNeeded()).toBe(false); @@ -80,48 +69,40 @@ describe('BuildBrowserFeatures', () => { describe('isFeatureSupported', () => { it('should be true for es6-module and Safari 10.1', () => { - host.writeMultipleFiles({ - browserslist: 'Safari 10.1', - }); + fs.writeFileSync('/root/.browserslistrc', 'Safari 10.1'); const buildBrowserFeatures = new BuildBrowserFeatures( - workspaceRootSysPath, + '/root', ScriptTarget.ES2015 ); expect(buildBrowserFeatures.isFeatureSupported('es6-module')).toBe(true); }); it('should be false for es6-module and IE9', () => { - host.writeMultipleFiles({ - browserslist: 'IE 9', - }); + fs.writeFileSync('/root/.browserslistrc', 'IE 9'); const buildBrowserFeatures = new BuildBrowserFeatures( - workspaceRootSysPath, + '/root', ScriptTarget.ES2015 ); expect(buildBrowserFeatures.isFeatureSupported('es6-module')).toBe(false); }); it('should be true for es6-module and last 1 chrome version', () => { - host.writeMultipleFiles({ - browserslist: 'last 1 chrome version', - }); + fs.writeFileSync('/root/.browserslistrc', 'last 1 chrome version'); const buildBrowserFeatures = new BuildBrowserFeatures( - workspaceRootSysPath, + '/root', ScriptTarget.ES2015 ); expect(buildBrowserFeatures.isFeatureSupported('es6-module')).toBe(true); }); it('should be true for es6-module and Edge 18', () => { - host.writeMultipleFiles({ - browserslist: 'Edge 18', - }); + fs.writeFileSync('/root/.browserslistrc', 'Edge 18'); const buildBrowserFeatures = new BuildBrowserFeatures( - workspaceRootSysPath, + '/root', ScriptTarget.ES2015 ); expect(buildBrowserFeatures.isFeatureSupported('es6-module')).toBe(true); @@ -130,63 +111,56 @@ describe('BuildBrowserFeatures', () => { describe('isNoModulePolyfillNeeded', () => { it('should be false for Safari 10.1 when target is ES5', () => { - host.writeMultipleFiles({ - browserslist: 'Safari 10.1', - }); + fs.writeFileSync('/root/.browserslistrc', 'Safari 10.1'); const buildBrowserFeatures = new BuildBrowserFeatures( - workspaceRootSysPath, + '/root', ScriptTarget.ES5 ); expect(buildBrowserFeatures.isNoModulePolyfillNeeded()).toBe(false); }); it('should be false for Safari 10.1 when target is ES2015', () => { - host.writeMultipleFiles({ - browserslist: 'Safari 10.1', - }); + fs.writeFileSync('/root/.browserslistrc', 'Safari 10.1'); const buildBrowserFeatures = new BuildBrowserFeatures( - workspaceRootSysPath, + '/root', ScriptTarget.ES2015 ); expect(buildBrowserFeatures.isNoModulePolyfillNeeded()).toBe(false); }); it('should be true for Safari 9+ when target is ES2015', () => { - host.writeMultipleFiles({ - browserslist: 'Safari >= 9', - }); + fs.writeFileSync('/root/.browserslistrc', 'Safari >= 9'); const buildBrowserFeatures = new BuildBrowserFeatures( - workspaceRootSysPath, + '/root', ScriptTarget.ES2015 ); expect(buildBrowserFeatures.isNoModulePolyfillNeeded()).toBe(true); }); it('should be false for Safari 9+ when target is ES5', () => { - host.writeMultipleFiles({ - browserslist: 'Safari >= 9', - }); + fs.writeFileSync('/root/.browserslistrc', 'Safari >= 9'); const buildBrowserFeatures = new BuildBrowserFeatures( - workspaceRootSysPath, + '/root', ScriptTarget.ES5 ); expect(buildBrowserFeatures.isNoModulePolyfillNeeded()).toBe(false); }); it('should be false when not supporting Safari 10.1 target is ES2015', () => { - host.writeMultipleFiles({ - browserslist: ` - Edge 18 - IE 9 - `, - }); + fs.writeFileSync( + '/root/.browserslistrc', + ` + Edge 18 + IE 9 + ` + ); const buildBrowserFeatures = new BuildBrowserFeatures( - workspaceRootSysPath, + '/root', ScriptTarget.ES2015 ); expect(buildBrowserFeatures.isNoModulePolyfillNeeded()).toBe(false);