feat(react): migrate @nrwl/web schematics to devkit (nrwl#4666)

Author: FrozenPandaz

.prettierignore

@@ -7,13 +7,14 @@ packages/workspace/src/generators/**/files/**/*.json
 packages/workspace/src/core/dep-graph/vendor.js
 packages/angular/src/schematics/**/files/**/*.json
 packages/angular/src/migrations/**/files/**/*.json
-packages/web/src/schematics/**/files/**/*.json
+packages/web/src/generators/**/files/**/*.json
 packages/node/src/schematics/**/files/**/*.json
 packages/express/src/schematics/**/files/**/*.json
 packages/nest/src/schematics/**/files/**/*.json
 packages/react/src/schematics/**/files/**/*.json
 packages/jest/src/schematics/**/files/**/*.json
 packages/**/schematics/**/files/**/*.html
+packages/**/generators/**/files/**/*.html
 /.vscode
 /.idea
 /.github

packages/cypress/collection.json

@@ -3,7 +3,7 @@
   "version": "0.1",
   "schematics": {
     "init": {
-      "factory": "./src/generators/init/init#initSchematic",
+      "factory": "./src/generators/init/init#cypressInitSchematic",
       "schema": "./src/generators/init/schema.json",
       "description": "Initialize the @nrwl/cypress plugin",
       "aliases": ["ng-add"],
@@ -18,7 +18,7 @@
   },
   "generators": {
     "init": {
-      "factory": "./src/generators/init/init#initGenerator",
+      "factory": "./src/generators/init/init#cypressInitGenerator",
       "schema": "./src/generators/init/schema.json",
       "description": "Initialize the @nrwl/cypress plugin",
       "aliases": ["ng-add"],

packages/cypress/index.ts

@@ -1 +1,2 @@
 export { cypressProjectGenerator } from './src/generators/cypress-project/cypress-project';
+export { cypressInitGenerator } from './src/generators/init/init';

packages/cypress/src/generators/cypress-project/cypress-project.ts

@@ -76,7 +76,7 @@ async function addLinter(host: Tree, options: CypressProjectSchema) {
     ],
   });
 
-  if (options.linter !== Linter.EsLint) {
+  if (!options.linter || options.linter !== Linter.EsLint) {
     return installTask;
   }
 
@@ -127,6 +127,8 @@ function normalizeOptions(host: Tree, options: Schema): CypressProjectSchema {
         options.name
       )
     : joinPathFragments(appsDir, options.name);
+
+  options.linter = options.linter || Linter.EsLint;
   return {
     ...options,
     projectName,

packages/cypress/src/generators/cypress-project/schema.d.ts

@@ -4,7 +4,7 @@ export interface Schema {
   project?: string;
   name: string;
   directory?: string;
-  linter: Linter;
+  linter?: Linter;
   js?: boolean;
   skipFormat?: boolean;
 }

packages/cypress/src/generators/init/init.spec.ts

@@ -2,7 +2,7 @@ import { readJson, Tree, updateJson } from '@nrwl/devkit';
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 
 import { cypressVersion } from '../../utils/versions';
-import initGenerator from './init';
+import { cypressInitGenerator } from './init';
 
 describe('init', () => {
   let tree: Tree;
@@ -21,7 +21,7 @@ describe('init', () => {
       json.devDependencies[existing] = existingVersion;
       return json;
     });
-    initGenerator(tree);
+    cypressInitGenerator(tree);
     const packageJson = readJson(tree, 'package.json');
 
     expect(packageJson.devDependencies.cypress).toBeDefined();

packages/cypress/src/generators/init/init.ts

@@ -24,9 +24,9 @@ function updateDependencies(host: Tree) {
   );
 }
 
-export function initGenerator(host: Tree) {
+export function cypressInitGenerator(host: Tree) {
   return updateDependencies(host);
 }
 
-export default initGenerator;
-export const initSchematic = convertNxGenerator(initGenerator);
+export default cypressInitGenerator;
+export const cypressInitSchematic = convertNxGenerator(cypressInitGenerator);

packages/jest/index.ts

@@ -4,3 +4,4 @@ export {
 } from './src/utils/config/update-config';
 export { jestConfigObjectAst } from './src/utils/config/functions';
 export { jestProjectGenerator } from './src/generators/jest-project/jest-project';
+export { jestInitGenerator } from './src/generators/init/init';

packages/jest/src/generators/jest-project/jest-project.ts

@@ -23,6 +23,10 @@ function normalizeOptions(options: JestProjectSchema) {
     options.testEnvironment = '';
   }
 
+  if (!options.hasOwnProperty('supportTsx')) {
+    options.supportTsx = false;
+  }
+
   // if we support TSX or babelJest we don't support angular(html templates)
   if (options.supportTsx || options.babelJest) {
     options.skipSerializers = true;

packages/jest/src/generators/jest-project/schema.d.ts

@@ -1,13 +1,13 @@
 export interface JestProjectSchema {
   project: string;
-  supportTsx: boolean;
+  supportTsx?: boolean;
   /**
    * @deprecated
    */
-  skipSetupFile: boolean;
-  setupFile: 'angular' | 'web-components' | 'none';
-  skipSerializers: boolean;
+  skipSetupFile?: boolean;
+  setupFile?: 'angular' | 'web-components' | 'none';
+  skipSerializers?: boolean;
   testEnvironment?: 'node' | 'jsdom' | '';
-  babelJest: boolean;
-  skipFormat: boolean;
+  babelJest?: boolean;
+  skipFormat?: boolean;
 }

packages/linter/src/generators/init/init.ts

@@ -15,7 +15,7 @@ import {
 import { Linter } from '../utils/linter';
 
 export interface LinterInitOptions {
-  linter: Linter;
+  linter?: Linter;
 }
 
 const globalTsLintConfiguration = {
@@ -197,9 +197,9 @@ function initEsLint(tree: Tree) {
 }
 
 export function lintInitGenerator(tree: Tree, options: LinterInitOptions) {
-  if (options.linter === Linter.TsLint) {
-    return initTsLint(tree);
-  } else if (options.linter === Linter.EsLint) {
+  if (!options.linter || options.linter === Linter.EsLint) {
     return initEsLint(tree);
+  } else if (options.linter === Linter.TsLint) {
+    return initTsLint(tree);
   }
 }

packages/linter/src/generators/lint-project/lint-project.ts

@@ -13,7 +13,7 @@ import { lintInitGenerator } from '../init/init';
 
 interface LintProjectOptions {
   project: string;
-  linter: Linter;
+  linter?: Linter;
   eslintFilePatterns?: string[];
   tsConfigPaths?: string[];
   skipFormat: boolean;

packages/react/src/schematics/library/library.ts

@@ -46,10 +46,10 @@ import {
 } from '../../utils/versions';
 import { Schema } from './schema';
 import { libsDir } from '@nrwl/workspace/src/utils/ast-utils';
-import { initRootBabelConfig } from '@nrwl/web/src/utils/rules';
 import { updateBabelJestConfig } from '../../rules/update-babel-jest-config';
 import { names, offsetFromRoot } from '@nrwl/devkit';
 import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
+import init from '../init/init';
 
 export interface NormalizedSchema extends Schema {
   name: string;
@@ -76,6 +76,11 @@ export default function (schema: Schema): Rule {
       options.style = 'none';
     }
     return chain([
+      init({
+        ...options,
+        e2eTestRunner: 'none',
+        skipFormat: true,
+      }),
       addLintFiles(options.projectRoot, options.linter, {
         localConfig: reactEslintJson,
         extraPackageDeps: extraEslintDependencies,
@@ -125,7 +130,6 @@ export default function (schema: Schema): Rule {
         {}
       ),
       updateAppRoutes(options, context),
-      initRootBabelConfig(),
       formatFiles(options),
     ])(host, context);
   };

packages/tao/src/shared/workspace.ts

@@ -44,7 +44,10 @@ export interface WorkspaceConfiguration {
   /**
    * Default generator collection. It is used when no collection is provided.
    */
-  cli?: { defaultCollection: string };
+  cli?: {
+    packageManager?: 'npm' | 'yarn' | 'pnpm';
+    defaultCollection?: string;
+  };
 }
 
 /**

packages/web/collection.json

@@ -4,15 +4,30 @@
   "extends": ["@nrwl/workspace"],
   "schematics": {
     "init": {
-      "factory": "./src/schematics/init/init",
-      "schema": "./src/schematics/init/schema.json",
+      "factory": "./src/generators/init/init#webInitSchematic",
+      "schema": "./src/generators/init/schema.json",
       "description": "Add @nrwl/web to a project",
       "hidden": true
     },
 
     "application": {
-      "factory": "./src/schematics/application/application",
-      "schema": "./src/schematics/application/schema.json",
+      "factory": "./src/generators/application/application#applicationSchematic",
+      "schema": "./src/generators/application/schema.json",
+      "aliases": ["app"],
+      "description": "Create an application"
+    }
+  },
+  "generators": {
+    "init": {
+      "factory": "./src/generators/init/init#webInitGenerator",
+      "schema": "./src/generators/init/schema.json",
+      "description": "Add @nrwl/web to a project",
+      "hidden": true
+    },
+
+    "application": {
+      "factory": "./src/generators/application/application#applicationGenerator",
+      "schema": "./src/generators/application/schema.json",
       "aliases": ["app"],
       "description": "Create an application"
     }

packages/web/index.ts

@@ -1 +1 @@
-export { applicationGenerator } from './src/schematics/application/application';
+export { applicationGenerator } from './src/generators/application/application';

packages/web/src/builders/build/build.impl.ts

@@ -33,9 +33,9 @@ import { ExtraEntryPoint } from '../../utils/third-party/browser/schema';
 
 export interface WebBuildBuilderOptions extends BuildBuilderOptions {
   index: string;
-  budgets: any[];
-  baseHref: string;
-  deployUrl: string;
+  budgets?: any[];
+  baseHref?: string;
+  deployUrl?: string;
 
   extractCss?: boolean;
   crossOrigin?: CrossOriginValue;
@@ -49,6 +49,8 @@ export interface WebBuildBuilderOptions extends BuildBuilderOptions {
   vendorChunk?: boolean;
   commonChunk?: boolean;
 
+  namedChunks?: boolean;
+
   stylePreprocessingOptions?: any;
   subresourceIntegrity?: boolean;