refactor(@schematics/angular): update app-shell to use new workspace rules

clydin · clydin · commit a331b7c7c439 · 2019-04-11T14:06:22.000-04:00
diff --git a/packages/schematics/angular/app-shell/index.ts b/packages/schematics/angular/app-shell/index.ts
@@ -5,13 +5,14 @@
  * 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 { dirname, experimental, join, normalize } from '@angular-devkit/core';
+import { dirname, join, normalize } from '@angular-devkit/core';
 import {
   Rule,
   SchematicContext,
   SchematicsException,
   Tree,
   chain,
+  noop,
   schematic,
 } from '@angular-devkit/schematics';
 import { Schema as ComponentOptions } from '../component/schema';
@@ -26,11 +27,10 @@ import {
   isImported,
 } from '../utility/ast-utils';
 import { Change, InsertChange } from '../utility/change';
-import { getWorkspace, updateWorkspace } from '../utility/config';
 import { getAppModulePath } from '../utility/ng-ast-utils';
-import { getProject } from '../utility/project';
-import { getProjectTargets, targetBuildNotFoundError } from '../utility/project-targets';
-import { Builders, WorkspaceProject } from '../utility/workspace-models';
+import { targetBuildNotFoundError } from '../utility/project-targets';
+import { getWorkspace, updateWorkspace } from '../utility/workspace';
+import { BrowserBuilderOptions, Builders, ServerBuilderOptions } from '../utility/workspace-models';
 import { Schema as AppShellOptions } from './schema';
 
 function getSourceFile(host: Tree, path: string): ts.SourceFile {
@@ -46,18 +46,17 @@ function getSourceFile(host: Tree, path: string): ts.SourceFile {
 
 function getServerModulePath(
   host: Tree,
-  project: experimental.workspace.WorkspaceProject,
-  architect: experimental.workspace.WorkspaceTool,
+  projectRoot: string,
+  mainPath: string,
 ): string | null {
-  const mainPath = architect.server.options.main;
   const mainSource = getSourceFile(host, mainPath);
   const allNodes = getSourceNodes(mainSource);
   const expNode = allNodes.filter(node => node.kind === ts.SyntaxKind.ExportDeclaration)[0];
   if (!expNode) {
     return null;
   }
   const relativePath = (expNode as ts.ExportDeclaration).moduleSpecifier as ts.StringLiteral;
-  const modulePath = normalize(`/${project.root}/src/${relativePath.text}.ts`);
+  const modulePath = normalize(`/${projectRoot}/src/${relativePath.text}.ts`);
 
   return modulePath;
 }
@@ -97,14 +96,8 @@ function getComponentTemplate(host: Tree, compPath: string, tmplInfo: TemplateIn
 
 function getBootstrapComponentPath(
   host: Tree,
-  project: WorkspaceProject,
+  mainPath: string,
 ): string {
-  const projectTargets = getProjectTargets(project);
-  if (!projectTargets.build) {
-    throw targetBuildNotFoundError();
-  }
-
-  const mainPath = projectTargets.build.options.main;
   const modulePath = getAppModulePath(host, mainPath);
   const moduleSource = getSourceFile(host, modulePath);
 
@@ -131,15 +124,11 @@ function getBootstrapComponentPath(
 }
 // end helper functions.
 
-function validateProject(options: AppShellOptions): Rule {
+function validateProject(mainPath: string): Rule {
   return (host: Tree, context: SchematicContext) => {
     const routerOutletCheckRegex = /<router\-outlet.*?>([\s\S]*?)<\/router\-outlet>/;
 
-    const clientProject = getProject(host, options.clientProject);
-    if (clientProject.projectType !== 'application') {
-      throw new SchematicsException(`App shell requires a project type of "application".`);
-    }
-    const componentPath = getBootstrapComponentPath(host, clientProject);
+    const componentPath = getBootstrapComponentPath(host, mainPath);
     const tmpl = getComponentTemplateInfo(host, componentPath);
     const template = getComponentTemplate(host, componentPath, tmpl);
     if (!routerOutletCheckRegex.test(template)) {
@@ -152,12 +141,7 @@ function validateProject(options: AppShellOptions): Rule {
 }
 
 function addUniversalTarget(options: AppShellOptions): Rule {
-  return (host: Tree, context: SchematicContext) => {
-    const architect = getProjectTargets(host, options.clientProject);
-    if (architect.server) {
-      return host;
-    }
-
+  return () => {
     // Copy options.
     const universalOptions = {
       ...options,
@@ -177,39 +161,38 @@ function addUniversalTarget(options: AppShellOptions): Rule {
 }
 
 function addAppShellConfigToWorkspace(options: AppShellOptions): Rule {
-  return (host: Tree) => {
+  return () => {
     if (!options.route) {
       throw new SchematicsException(`Route is not defined`);
     }
 
-    const workspace = getWorkspace(host);
-    const projectTargets = getProjectTargets(workspace, options.clientProject);
-    projectTargets['app-shell'] = {
-      builder: Builders.AppShell,
-      options: {
-        browserTarget: `${options.clientProject}:build`,
-        serverTarget: `${options.clientProject}:server`,
-        route: options.route,
-      },
-      configurations: {
-        production: {
-          browserTarget: `${options.clientProject}:build:production`,
-          serverTarget: `${options.clientProject}:server:production`,
-        },
-      },
-    };
+    return updateWorkspace(workspace => {
+      const project = workspace.projects.get(options.clientProject);
+      if (!project) {
+        return;
+      }
 
-    return updateWorkspace(workspace);
+      project.targets.add({
+        name: 'app-shell',
+        builder: Builders.AppShell,
+        options: {
+          browserTarget: `${options.clientProject}:build`,
+          serverTarget: `${options.clientProject}:server`,
+          route: options.route,
+        },
+        configurations: {
+          production: {
+            browserTarget: `${options.clientProject}:build:production`,
+            serverTarget: `${options.clientProject}:server:production`,
+          },
+        },
+      });
+    });
   };
 }
 
-function addRouterModule(options: AppShellOptions): Rule {
+function addRouterModule(mainPath: string): Rule {
   return (host: Tree) => {
-    const projectTargets = getProjectTargets(host, options.clientProject);
-    if (!projectTargets.build) {
-      throw targetBuildNotFoundError();
-    }
-    const mainPath = projectTargets.build.options.main;
     const modulePath = getAppModulePath(host, mainPath);
     const moduleSource = getSourceFile(host, modulePath);
     const changes = addImportToModule(moduleSource, modulePath, 'RouterModule', '@angular/router');
@@ -245,11 +228,22 @@ function getMetadataProperty(metadata: ts.Node, propertyName: string): ts.Proper
 }
 
 function addServerRoutes(options: AppShellOptions): Rule {
-  return (host: Tree) => {
-    const clientProject = getProject(host, options.clientProject);
-    const architect = getProjectTargets(clientProject);
-    // const mainPath = universalArchitect.build.options.main;
-    const modulePath = getServerModulePath(host, clientProject, architect);
+  return async (host: Tree) => {
+    // The workspace gets updated so this needs to be reloaded
+    const workspace = await getWorkspace(host);
+    const clientProject = workspace.projects.get(options.clientProject);
+    if (!clientProject) {
+      throw new Error('Universal schematic removed client project.');
+    }
+    const clientServerTarget = clientProject.targets.get('server');
+    if (!clientServerTarget) {
+      throw new Error('Universal schematic did not add server target to client project.');
+    }
+    const clientServerOptions = clientServerTarget.options as unknown as ServerBuilderOptions;
+    if (!clientServerOptions) {
+      throw new SchematicsException('Server target does not contain options.');
+    }
+    const modulePath = getServerModulePath(host, clientProject.root, clientServerOptions.main);
     if (modulePath === null) {
       throw new SchematicsException('Universal/server module not found.');
     }
@@ -296,9 +290,6 @@ function addServerRoutes(options: AppShellOptions): Rule {
       }
       host.commitUpdate(recorder);
     }
-
-
-    return host;
   };
 }
 
@@ -313,12 +304,26 @@ function addShellComponent(options: AppShellOptions): Rule {
 }
 
 export default function (options: AppShellOptions): Rule {
-  return chain([
-    validateProject(options),
-    addUniversalTarget(options),
-    addAppShellConfigToWorkspace(options),
-    addRouterModule(options),
-    addServerRoutes(options),
-    addShellComponent(options),
-  ]);
+  return async tree => {
+    const workspace = await getWorkspace(tree);
+    const clientProject = workspace.projects.get(options.clientProject);
+    if (!clientProject || clientProject.extensions.projectType !== 'application') {
+      throw new SchematicsException(`A client project type of "application" is required.`);
+    }
+    const clientBuildTarget = clientProject.targets.get('build');
+    if (!clientBuildTarget) {
+      throw targetBuildNotFoundError();
+    }
+    const clientBuildOptions =
+      (clientBuildTarget.options || {}) as unknown as BrowserBuilderOptions;
+
+    return chain([
+      validateProject(clientBuildOptions.main),
+      clientProject.targets.has('server') ? noop() : addUniversalTarget(options),
+      addAppShellConfigToWorkspace(options),
+      addRouterModule(clientBuildOptions.main),
+      addServerRoutes(options),
+      addShellComponent(options),
+    ]);
+  };
 }
diff --git a/packages/schematics/angular/app-shell/index_spec.ts b/packages/schematics/angular/app-shell/index_spec.ts
@@ -44,22 +44,24 @@ describe('App Shell Schematic', () => {
   });
 
 
-  it('should ensure the client app has a router-outlet', () => {
+  it('should ensure the client app has a router-outlet', async () => {
     appTree = schematicRunner.runSchematic('workspace', workspaceOptions);
     appTree = schematicRunner.runSchematic('application', {...appOptions, routing: false}, appTree);
-    expect(() => {
-      schematicRunner.runSchematic('appShell', defaultOptions, appTree);
-    }).toThrowError();
+    await expectAsync(
+      schematicRunner.runSchematicAsync('appShell', defaultOptions, appTree).toPromise(),
+    ).toBeRejected();
   });
 
-  it('should add a universal app', () => {
-    const tree = schematicRunner.runSchematic('appShell', defaultOptions, appTree);
+  it('should add a universal app', async () => {
+    const tree = await schematicRunner.runSchematicAsync('appShell', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/projects/bar/src/app/app.server.module.ts';
     expect(tree.exists(filePath)).toEqual(true);
   });
 
-  it('should add app shell configuration', () => {
-    const tree = schematicRunner.runSchematic('appShell', defaultOptions, appTree);
+  it('should add app shell configuration', async () => {
+    const tree = await schematicRunner.runSchematicAsync('appShell', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/angular.json';
     const content = tree.readContent(filePath);
     const workspace = JSON.parse(content);
@@ -71,19 +73,21 @@ describe('App Shell Schematic', () => {
     expect(target.configurations.production.serverTarget).toEqual('bar:server:production');
   });
 
-  it('should add router module to client app module', () => {
-    const tree = schematicRunner.runSchematic('appShell', defaultOptions, appTree);
+  it('should add router module to client app module', async () => {
+    const tree = await schematicRunner.runSchematicAsync('appShell', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/projects/bar/src/app/app.module.ts';
     const content = tree.readContent(filePath);
     expect(content).toMatch(/import { RouterModule } from \'@angular\/router\';/);
   });
 
-  it('should not fail when AppModule have imported RouterModule already', () => {
+  it('should not fail when AppModule have imported RouterModule already', async () => {
     const updateRecorder = appTree.beginUpdate('/projects/bar/src/app/app.module.ts');
     updateRecorder.insertLeft(0, 'import { RouterModule } from \'@angular/router\';');
     appTree.commitUpdate(updateRecorder);
 
-    const tree = schematicRunner.runSchematic('appShell', defaultOptions, appTree);
+    const tree = await schematicRunner.runSchematicAsync('appShell', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/projects/bar/src/app/app.module.ts';
     const content = tree.readContent(filePath);
     expect(content).toMatch(/import { RouterModule } from \'@angular\/router\';/);
@@ -119,43 +123,48 @@ describe('App Shell Schematic', () => {
       tree.delete('/projects/bar/src/app/app.component.html');
     }
 
-    it('should not re-add the router outlet (external template)', () => {
+    it('should not re-add the router outlet (external template)', async () => {
       const htmlPath = '/projects/bar/src/app/app.component.html';
       appTree.overwrite(htmlPath, '<router-outlet></router-outlet>');
-      const tree = schematicRunner.runSchematic('appShell', defaultOptions, appTree);
+      const tree = await schematicRunner.runSchematicAsync('appShell', defaultOptions, appTree)
+        .toPromise();
 
       const content = tree.readContent(htmlPath);
       const matches = content.match(/<router\-outlet><\/router\-outlet>/g);
       const numMatches = matches ? matches.length : 0;
       expect(numMatches).toEqual(1);
     });
 
-    it('should not re-add the router outlet (inline template)', () => {
+    it('should not re-add the router outlet (inline template)', async () => {
       makeInlineTemplate(appTree, '<router-outlet></router-outlet>');
-      const tree = schematicRunner.runSchematic('appShell', defaultOptions, appTree);
+      const tree = await schematicRunner.runSchematicAsync('appShell', defaultOptions, appTree)
+        .toPromise();
       const content = tree.readContent('/projects/bar/src/app/app.component.ts');
       const matches = content.match(/<router\-outlet><\/router\-outlet>/g);
       const numMatches = matches ? matches.length : 0;
       expect(numMatches).toEqual(1);
     });
   });
 
-  it('should add router imports to server module', () => {
-    const tree = schematicRunner.runSchematic('appShell', defaultOptions, appTree);
+  it('should add router imports to server module', async () => {
+    const tree = await schematicRunner.runSchematicAsync('appShell', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/projects/bar/src/app/app.server.module.ts';
     const content = tree.readContent(filePath);
     expect(content).toMatch(/import { Routes, RouterModule } from \'@angular\/router\';/);
   });
 
-  it('should define a server route', () => {
-    const tree = schematicRunner.runSchematic('appShell', defaultOptions, appTree);
+  it('should define a server route', async () => {
+    const tree = await schematicRunner.runSchematicAsync('appShell', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/projects/bar/src/app/app.server.module.ts';
     const content = tree.readContent(filePath);
     expect(content).toMatch(/const routes: Routes = \[/);
   });
 
-  it('should import RouterModule with forRoot', () => {
-    const tree = schematicRunner.runSchematic('appShell', defaultOptions, appTree);
+  it('should import RouterModule with forRoot', async () => {
+    const tree = await schematicRunner.runSchematicAsync('appShell', defaultOptions, appTree)
+      .toPromise();
     const filePath = '/projects/bar/src/app/app.server.module.ts';
     const content = tree.readContent(filePath);
     expect(content)
@@ -164,8 +173,9 @@ describe('App Shell Schematic', () => {
       .toMatch(/ServerModule,\r?\n\s*RouterModule\.forRoot\(routes\),/);
   });
 
-  it('should create the shell component', () => {
-    const tree = schematicRunner.runSchematic('appShell', defaultOptions, appTree);
+  it('should create the shell component', async () => {
+    const tree = await schematicRunner.runSchematicAsync('appShell', defaultOptions, appTree)
+      .toPromise();
     expect(tree.exists('/projects/bar/src/app/app-shell/app-shell.component.ts')).toBe(true);
     const content = tree.readContent('/projects/bar/src/app/app.server.module.ts');
     expect(content).toMatch(/app\-shell\.component/);
