refactor(@schematics/angular): update universal to use new workspace rules

Author: clydin

packages/schematics/angular/universal/index.ts

@@ -8,7 +8,6 @@
 import {
   Path,
   basename,
-  experimental,
   join,
   normalize,
   parseJson,
@@ -32,52 +31,44 @@ import {
 import * as ts from '../third_party/github.com/Microsoft/TypeScript/lib/typescript';
 import { findNode, getDecoratorMetadata } from '../utility/ast-utils';
 import { InsertChange } from '../utility/change';
-import { getWorkspace, updateWorkspace } from '../utility/config';
 import { addPackageJsonDependency, getPackageJsonDependency } from '../utility/dependencies';
 import { findBootstrapModuleCall, findBootstrapModulePath } from '../utility/ng-ast-utils';
-import { getProject } from '../utility/project';
-import { getProjectTargets, targetBuildNotFoundError } from '../utility/project-targets';
-import { Builders, WorkspaceTargets } from '../utility/workspace-models';
+import { targetBuildNotFoundError } from '../utility/project-targets';
+import { getWorkspace, updateWorkspace } from '../utility/workspace';
+import { BrowserBuilderOptions, Builders } from '../utility/workspace-models';
 import { Schema as UniversalOptions } from './schema';
 
-
-function getFileReplacements(target: WorkspaceTargets) {
-  const fileReplacements =
-    target.build &&
-    target.build.configurations &&
-    target.build.configurations.production &&
-    target.build.configurations.production.fileReplacements;
-
-  return fileReplacements || [];
-}
-
 function updateConfigFile(options: UniversalOptions, tsConfigDirectory: Path): Rule {
-  return (host: Tree) => {
-    const workspace = getWorkspace(host);
-    const clientProject = getProject(workspace, options.clientProject);
-    const projectTargets = getProjectTargets(clientProject);
-
-    projectTargets.server = {
-      builder: Builders.Server,
-      options: {
-        outputPath: `dist/${options.clientProject}-server`,
-        main: `${clientProject.root}src/main.server.ts`,
-        tsConfig: join(tsConfigDirectory, `${options.tsconfigFileName}.json`),
-      },
-      configurations: {
-        production: {
-          fileReplacements: getFileReplacements(projectTargets),
-          sourceMap: false,
-          optimization: {
-            scripts: false,
-            styles: true,
+  return updateWorkspace(workspace => {
+    const clientProject = workspace.projects.get(options.clientProject);
+    if (clientProject) {
+      const buildTarget = clientProject.targets.get('build');
+      let fileReplacements;
+      if (buildTarget && buildTarget.configurations && buildTarget.configurations.production) {
+        fileReplacements = buildTarget.configurations.production.fileReplacements;
+      }
+
+      clientProject.targets.add({
+        name: 'server',
+        builder: Builders.Server,
+        options: {
+          outputPath: `dist/${options.clientProject}-server`,
+          main: `${clientProject.root}src/main.server.ts`,
+          tsConfig: join(tsConfigDirectory, `${options.tsconfigFileName}.json`),
+        },
+        configurations: {
+          production: {
+            fileReplacements,
+            sourceMap: false,
+            optimization: {
+              scripts: false,
+              styles: true,
+            },
           },
         },
-      },
-    };
-
-    return updateWorkspace(workspace);
-  };
+      });
+    }
+  });
 }
 
 function findBrowserModuleImport(host: Tree, modulePath: string): ts.Node {
@@ -99,13 +90,9 @@ function findBrowserModuleImport(host: Tree, modulePath: string): ts.Node {
   return browserModuleNode;
 }
 
-function wrapBootstrapCall(options: UniversalOptions): Rule {
+function wrapBootstrapCall(mainFile: string): Rule {
   return (host: Tree) => {
-    const clientTargets = getProjectTargets(host, options.clientProject);
-    if (!clientTargets.build) {
-      throw targetBuildNotFoundError();
-    }
-    const mainPath = normalize('/' + clientTargets.build.options.main);
+    const mainPath = normalize('/' + mainFile);
     let bootstrapCall: ts.Node | null = findBootstrapModuleCall(host, mainPath);
     if (bootstrapCall === null) {
       throw new SchematicsException('Bootstrap module not found.');
@@ -172,18 +159,17 @@ function findCallExpressionNode(node: ts.Node, text: string): ts.Node | null {
   return foundNode;
 }
 
-function addServerTransition(options: UniversalOptions): Rule {
+function addServerTransition(
+  options: UniversalOptions,
+  mainFile: string,
+  clientProjectRoot: string,
+): Rule {
   return (host: Tree) => {
-    const clientProject = getProject(host, options.clientProject);
-    const clientTargets = getProjectTargets(clientProject);
-    if (!clientTargets.build) {
-      throw targetBuildNotFoundError();
-    }
-    const mainPath = normalize('/' + clientTargets.build.options.main);
+    const mainPath = normalize('/' + mainFile);
 
     const bootstrapModuleRelativePath = findBootstrapModulePath(host, mainPath);
     const bootstrapModulePath = normalize(
-      `/${clientProject.root}/src/${bootstrapModuleRelativePath}.ts`);
+      `/${clientProjectRoot}/src/${bootstrapModuleRelativePath}.ts`);
 
     const browserModuleImport = findBrowserModuleImport(host, bootstrapModulePath);
     const appId = options.appId;
@@ -214,8 +200,7 @@ function addDependencies(): Rule {
   };
 }
 
-function getTsConfigOutDir(host: Tree, targets: experimental.workspace.WorkspaceTool): string {
-  const tsConfigPath = targets.build.options.tsConfig;
+function getTsConfigOutDir(host: Tree, tsConfigPath: string): string {
   const tsConfigBuffer = host.read(tsConfigPath);
   if (!tsConfigBuffer) {
     throw new SchematicsException(`Could not read ${tsConfigPath}`);
@@ -233,18 +218,24 @@ function getTsConfigOutDir(host: Tree, targets: experimental.workspace.Workspace
 }
 
 export default function (options: UniversalOptions): Rule {
-  return (host: Tree, context: SchematicContext) => {
-    const clientProject = getProject(host, options.clientProject);
-    if (clientProject.projectType !== 'application') {
+  return async (host: Tree, context: SchematicContext) => {
+    const workspace = await getWorkspace(host);
+
+    const clientProject = workspace.projects.get(options.clientProject);
+    if (!clientProject || clientProject.extensions.projectType !== 'application') {
       throw new SchematicsException(`Universal requires a project type of "application".`);
     }
-    const clientTargets = getProjectTargets(clientProject);
-    const outDir = getTsConfigOutDir(host, clientTargets);
-    if (!clientTargets.build) {
+
+    const clientBuildTarget = clientProject.targets.get('build');
+    if (!clientBuildTarget) {
       throw targetBuildNotFoundError();
     }
+    const clientBuildOptions =
+      (clientBuildTarget.options || {}) as unknown as BrowserBuilderOptions;
+
+    const outDir = getTsConfigOutDir(host, clientBuildOptions.tsConfig);
 
-    const clientTsConfig = normalize(clientTargets.build.options.tsConfig);
+    const clientTsConfig = normalize(clientBuildOptions.tsConfig);
     const tsConfigExtends = basename(clientTsConfig);
     // this is needed because prior to version 8, tsconfig might have been in 'src'
     // and we don't want to break the 'ng add @nguniversal/express-engine schematics'
@@ -281,8 +272,8 @@ export default function (options: UniversalOptions): Rule {
       mergeWith(rootSource),
       addDependencies(),
       updateConfigFile(options, tsConfigDirectory),
-      wrapBootstrapCall(options),
-      addServerTransition(options),
+      wrapBootstrapCall(clientBuildOptions.main),
+      addServerTransition(options, clientBuildOptions.main, clientProject.root),
     ]);
   };
 }

packages/schematics/angular/universal/index_spec.ts

@@ -57,22 +57,27 @@ describe('Universal Schematic', () => {
     appTree = schematicRunner.runSchematic('application', appOptions, appTree);
   });
 
-  it('should create a root module file', () => {
-    const tree = schematicRunner.runSchematic('universal', defaultOptions, appTree);
+  it('should create a root module file', async () => {
+    const tree = await schematicRunner.runSchematicAsync('universal', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/projects/bar/src/app/app.server.module.ts';
     expect(tree.exists(filePath)).toEqual(true);
   });
 
-  it('should create a main file', () => {
-    const tree = schematicRunner.runSchematic('universal', defaultOptions, appTree);
+  it('should create a main file', async () => {
+    const tree = await schematicRunner.runSchematicAsync('universal', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/projects/bar/src/main.server.ts';
     expect(tree.exists(filePath)).toEqual(true);
     const contents = tree.readContent(filePath);
     expect(contents).toMatch(/export { AppServerModule } from '\.\/app\/app\.server\.module'/);
   });
 
-  it('should create a tsconfig file for the workspace project', () => {
-    const tree = schematicRunner.runSchematic('universal', workspaceUniversalOptions, appTree);
+  it('should create a tsconfig file for the workspace project', async () => {
+    const tree = await schematicRunner
+      .runSchematicAsync('universal', workspaceUniversalOptions, appTree)
+      .toPromise();
+    debugger;
     const filePath = '/tsconfig.server.json';
     expect(tree.exists(filePath)).toEqual(true);
     const contents = tree.readContent(filePath);
@@ -90,8 +95,9 @@ describe('Universal Schematic', () => {
       .server.options.tsConfig).toEqual('tsconfig.server.json');
   });
 
-  it('should create a tsconfig file for a generated application', () => {
-    const tree = schematicRunner.runSchematic('universal', defaultOptions, appTree);
+  it('should create a tsconfig file for a generated application', async () => {
+    const tree = await schematicRunner.runSchematicAsync('universal', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/projects/bar/tsconfig.server.json';
     expect(tree.exists(filePath)).toEqual(true);
     const contents = tree.readContent(filePath);
@@ -109,15 +115,17 @@ describe('Universal Schematic', () => {
       .server.options.tsConfig).toEqual('projects/bar/tsconfig.server.json');
   });
 
-  it('should add dependency: @angular/platform-server', () => {
-    const tree = schematicRunner.runSchematic('universal', defaultOptions, appTree);
+  it('should add dependency: @angular/platform-server', async () => {
+    const tree = await schematicRunner.runSchematicAsync('universal', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/package.json';
     const contents = tree.readContent(filePath);
     expect(contents).toMatch(/\"@angular\/platform-server\": \"/);
   });
 
-  it('should update workspace with a server target', () => {
-    const tree = schematicRunner.runSchematic('universal', defaultOptions, appTree);
+  it('should update workspace with a server target', async () => {
+    const tree = await schematicRunner.runSchematicAsync('universal', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/angular.json';
     const contents = tree.readContent(filePath);
     const config = JSON.parse(contents.toString());
@@ -137,22 +145,24 @@ describe('Universal Schematic', () => {
     expect(fileReplacements[0].with).toEqual('projects/bar/src/environments/environment.prod.ts');
   });
 
-  it('should add a server transition to BrowerModule import', () => {
-    const tree = schematicRunner.runSchematic('universal', defaultOptions, appTree);
+  it('should add a server transition to BrowerModule import', async () => {
+    const tree = await schematicRunner.runSchematicAsync('universal', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/projects/bar/src/app/app.module.ts';
     const contents = tree.readContent(filePath);
     expect(contents).toMatch(/BrowserModule\.withServerTransition\({ appId: 'serverApp' }\)/);
   });
 
-  it('should wrap the bootstrap call in a DOMContentLoaded event handler', () => {
-    const tree = schematicRunner.runSchematic('universal', defaultOptions, appTree);
+  it('should wrap the bootstrap call in a DOMContentLoaded event handler', async () => {
+    const tree = await schematicRunner.runSchematicAsync('universal', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/projects/bar/src/main.ts';
     const contents = tree.readContent(filePath);
     expect(contents)
       .toMatch(/document.addEventListener\('DOMContentLoaded', \(\) => {[\w\W]+;[\r\n]}\);/);
   });
 
-  it('should wrap the bootstrap declaration in a DOMContentLoaded event handler', () => {
+  it('should wrap the bootstrap declaration in a DOMContentLoaded event handler', async () => {
     const filePath = '/projects/bar/src/main.ts';
     appTree.overwrite(
       filePath,
@@ -175,15 +185,16 @@ describe('Universal Schematic', () => {
       `,
     );
 
-    const tree = schematicRunner.runSchematic('universal', defaultOptions, appTree);
+    const tree = await schematicRunner.runSchematicAsync('universal', defaultOptions, appTree)
+      .toPromise();
     const contents = tree.readContent(filePath);
     expect(contents).toMatch(
       /document.addEventListener\('DOMContentLoaded', \(\) => {[\n\r\s]+bootstrap\(\)/,
     );
   });
 
-  it('should install npm dependencies', () => {
-    schematicRunner.runSchematic('universal', defaultOptions, appTree);
+  it('should install npm dependencies', async () => {
+    await schematicRunner.runSchematicAsync('universal', defaultOptions, appTree).toPromise();
     expect(schematicRunner.tasks.length).toBe(1);
     expect(schematicRunner.tasks[0].name).toBe('node-package');
     expect((schematicRunner.tasks[0].options as {command: string}).command).toBe('install');