feat(@angular/pwa): support customized workspace configurations with add

Author: clydin

packages/angular/pwa/BUILD

@@ -24,11 +24,10 @@ ts_library(
             "**/*_spec_large.ts",
         ],
     ),
-    # Borrow the compile-time deps of the typescript compiler
-    # Just to avoid an extra npm install action.
-    node_modules = "@build_bazel_rules_typescript_tsc_wrapped_deps//:node_modules",
     deps = [
         "//packages/angular_devkit/core",
         "//packages/angular_devkit/schematics",
+        "@rxjs",
+        # @typings: node
     ],
 )

packages/angular/pwa/package.json

@@ -12,6 +12,7 @@
     "@angular-devkit/core": "0.0.0",
     "@angular-devkit/schematics": "0.0.0",
     "@schematics/angular": "0.0.0",
-    "typescript": "~2.6.2"
+    "parse5-html-rewriting-stream": "^5.1.0",
+    "rxjs": "^6.0.0"
   }
 }

packages/angular/pwa/pwa/index.ts

@@ -5,7 +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 { Path, join, normalize } from '@angular-devkit/core';
+import {
+  JsonParseMode,
+  experimental,
+  getSystemPath,
+  join,
+  normalize,
+  parseJson,
+} from '@angular-devkit/core';
 import {
   Rule,
   SchematicContext,
@@ -19,153 +26,190 @@ import {
   template,
   url,
 } from '@angular-devkit/schematics';
-import { getWorkspace, getWorkspacePath } from '../utility/config';
+import { Observable } from 'rxjs';
+import { Readable, Writable } from 'stream';
 import { Schema as PwaOptions } from './schema';
 
+const RewritingStream = require('parse5-html-rewriting-stream');
 
-function addServiceWorker(options: PwaOptions): Rule {
-  return (host: Tree, context: SchematicContext) => {
-    context.logger.debug('Adding service worker...');
-
-    const swOptions = {
-      ...options,
-    };
-    delete swOptions.title;
-
-    return externalSchematic('@schematics/angular', 'service-worker', swOptions);
-  };
-}
 
-function getIndent(text: string): string {
-  let indent = '';
+function getWorkspace(
+  host: Tree,
+): { path: string, workspace: experimental.workspace.WorkspaceSchema } {
+  const possibleFiles = [ '/angular.json', '/.angular.json' ];
+  const path = possibleFiles.filter(path => host.exists(path))[0];
 
-  for (const char of text) {
-    if (char === ' ' || char === '\t') {
-      indent += char;
-    } else {
-      break;
-    }
+  const configBuffer = host.read(path);
+  if (configBuffer === null) {
+    throw new SchematicsException(`Could not find (${path})`);
   }
-
-  return indent;
+  const content = configBuffer.toString();
+
+  return {
+    path,
+    workspace: parseJson(
+      content,
+      JsonParseMode.Loose,
+    ) as {} as experimental.workspace.WorkspaceSchema,
+  };
 }
 
-function updateIndexFile(options: PwaOptions): Rule {
-  return (host: Tree, context: SchematicContext) => {
-    const workspace = getWorkspace(host);
-    const project = workspace.projects[options.project as string];
-    let path: string;
-    const projectTargets = project.targets || project.architect;
-    if (project && projectTargets && projectTargets.build && projectTargets.build.options.index) {
-      path = projectTargets.build.options.index;
-    } else {
-      throw new SchematicsException('Could not find index file for the project');
-    }
+function updateIndexFile(path: string): Rule {
+  return (host: Tree) => {
     const buffer = host.read(path);
     if (buffer === null) {
       throw new SchematicsException(`Could not read index file: ${path}`);
     }
-    const content = buffer.toString();
-    const lines = content.split('\n');
-    let closingHeadTagLineIndex = -1;
-    let closingBodyTagLineIndex = -1;
-    lines.forEach((line, index) => {
-      if (closingHeadTagLineIndex === -1 && /<\/head>/.test(line)) {
-        closingHeadTagLineIndex = index;
-      } else if (closingBodyTagLineIndex === -1 && /<\/body>/.test(line)) {
-        closingBodyTagLineIndex = index;
-      }
-    });
 
-    const headIndent = getIndent(lines[closingHeadTagLineIndex]) + '  ';
-    const itemsToAddToHead = [
-      '<link rel="manifest" href="manifest.json">',
-      '<meta name="theme-color" content="#1976d2">',
-    ];
+    const rewriter = new RewritingStream();
 
-    const bodyIndent = getIndent(lines[closingBodyTagLineIndex]) + '  ';
-    const itemsToAddToBody = [
-      '<noscript>Please enable JavaScript to continue using this application.</noscript>',
-    ];
+    let needsNoScript = true;
+    rewriter.on('startTag', (startTag: { tagName: string }) => {
+      if (startTag.tagName === 'noscript') {
+        needsNoScript = false;
+      }
 
-    const updatedIndex = [
-      ...lines.slice(0, closingHeadTagLineIndex),
-      ...itemsToAddToHead.map(line => headIndent + line),
-      ...lines.slice(closingHeadTagLineIndex, closingBodyTagLineIndex),
-      ...itemsToAddToBody.map(line => bodyIndent + line),
-      ...lines.slice(closingBodyTagLineIndex),
-    ].join('\n');
+      rewriter.emitStartTag(startTag);
+    });
 
-    host.overwrite(path, updatedIndex);
+    rewriter.on('endTag', (endTag: { tagName: string }) => {
+      if (endTag.tagName === 'head') {
+        rewriter.emitRaw('  <link rel="manifest" href="manifest.json">\n');
+        rewriter.emitRaw('  <meta name="theme-color" content="#1976d2">\n');
+      } else if (endTag.tagName === 'body' && needsNoScript) {
+        rewriter.emitRaw(
+          '  <noscript>Please enable JavaScript to continue using this application.</noscript>\n',
+        );
+      }
 
-    return host;
+      rewriter.emitEndTag(endTag);
+    });
+
+    return new Observable<Tree>(obs => {
+      const input = new Readable({
+        encoding: 'utf8',
+        read(): void {
+          this.push(buffer);
+          this.push(null);
+        },
+      });
+
+      const chunks: Array<Buffer> = [];
+      const output = new Writable({
+        write(chunk: string | Buffer, encoding: string, callback: Function): void {
+          chunks.push(typeof chunk === 'string' ? Buffer.from(chunk, encoding) : chunk);
+          callback();
+        },
+        final(callback: (error?: Error) => void): void {
+          const full = Buffer.concat(chunks);
+          host.overwrite(path, full.toString());
+          callback();
+          obs.next(host);
+          obs.complete();
+        },
+      });
+
+      input.pipe(rewriter).pipe(output);
+    });
   };
 }
 
-function addManifestToAssetsConfig(options: PwaOptions) {
+export default function (options: PwaOptions): Rule {
   return (host: Tree, context: SchematicContext) => {
+    if (!options.title) {
+      options.title = options.project;
+    }
+    const {path: workspacePath, workspace } = getWorkspace(host);
 
-    const workspacePath = getWorkspacePath(host);
-    const workspace = getWorkspace(host);
-    const project = workspace.projects[options.project as string];
+    if (!options.project) {
+      throw new SchematicsException('Option "project" is required.');
+    }
 
+    const project = workspace.projects[options.project];
     if (!project) {
-      throw new Error(`Project is not defined in this workspace.`);
+      throw new SchematicsException(`Project is not defined in this workspace.`);
     }
 
-    const assetEntry = join(normalize(project.root), 'src', 'manifest.json');
+    if (project.projectType !== 'application') {
+      throw new SchematicsException(`PWA requires a project type of "application".`);
+    }
 
+    // Find all the relevant targets for the project
     const projectTargets = project.targets || project.architect;
-    if (!projectTargets) {
-      throw new Error(`Targets are not defined for this project.`);
+    if (!projectTargets || Object.keys(projectTargets).length === 0) {
+      throw new SchematicsException(`Targets are not defined for this project.`);
     }
 
-    ['build', 'test'].forEach((target) => {
-
-      const applyTo = projectTargets[target].options;
-      const assets = applyTo.assets || (applyTo.assets = []);
-
-      assets.push(assetEntry);
+    const buildTargets = [];
+    const testTargets = [];
+    for (const targetName in projectTargets) {
+      const target = projectTargets[targetName];
+      if (!target) {
+        continue;
+      }
 
-    });
+      if (target.builder === '@angular-devkit/build-angular:browser') {
+        buildTargets.push(target);
+      } else if (target.builder === '@angular-devkit/build-angular:karma') {
+        testTargets.push(target);
+      }
+    }
 
+    // Add manifest to asset configuration
+    const assetEntry = join(normalize(project.root), 'src', 'manifest.json');
+    for (const target of [...buildTargets, ...testTargets]) {
+      if (target.options) {
+        if (target.options.assets) {
+          target.options.assets.push(assetEntry);
+        } else {
+          target.options.assets = [ assetEntry ];
+        }
+      } else {
+        target.options = { assets: [ assetEntry ] };
+      }
+    }
     host.overwrite(workspacePath, JSON.stringify(workspace, null, 2));
 
-    return host;
-  };
-}
+    // Find all index.html files in build targets
+    const indexFiles = new Set<string>();
+    for (const target of buildTargets) {
+      if (target.options && target.options.index) {
+        indexFiles.add(target.options.index);
+      }
 
-export default function (options: PwaOptions): Rule {
-  return (host: Tree, context: SchematicContext) => {
-    const workspace = getWorkspace(host);
-    if (!options.project) {
-      throw new SchematicsException('Option "project" is required.');
-    }
-    const project = workspace.projects[options.project];
-    if (project.projectType !== 'application') {
-      throw new SchematicsException(`PWA requires a project type of "application".`);
+      if (!target.configurations) {
+        continue;
+      }
+      for (const configName in target.configurations) {
+        const configuration = target.configurations[configName];
+        if (configuration && configuration.index) {
+          indexFiles.add(configuration.index);
+        }
+      }
     }
 
-    const sourcePath = join(project.root as Path, 'src');
+    // Setup sources for the assets files to add to the project
+    const sourcePath = join(normalize(project.root), 'src');
     const assetsPath = join(sourcePath, 'assets');
-
-    options.title = options.title || options.project;
-
     const rootTemplateSource = apply(url('./files/root'), [
       template({ ...options }),
-      move(sourcePath),
+      move(getSystemPath(sourcePath)),
     ]);
     const assetsTemplateSource = apply(url('./files/assets'), [
       template({ ...options }),
-      move(assetsPath),
+      move(getSystemPath(assetsPath)),
     ]);
 
+    // Setup service worker schematic options
+    const swOptions = { ...options };
+    delete swOptions.title;
+
+    // Chain the rules and return
     return chain([
-      addServiceWorker(options),
+      externalSchematic('@schematics/angular', 'service-worker', swOptions),
       mergeWith(rootTemplateSource),
       mergeWith(assetsTemplateSource),
-      updateIndexFile(options),
-      addManifestToAssetsConfig(options),
+      ...[...indexFiles].map(path => updateIndexFile(path)),
     ])(host, context);
   };
 }