angular-cli/packages/schematics/angular/web-worker/index.ts

/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * 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 { JsonParseMode, parseJsonAst, strings, tags } from '@angular-devkit/core';
import {
  Rule, SchematicContext, SchematicsException, Tree,
  apply, applyTemplates, chain, mergeWith, move, noop, url,
} from '@angular-devkit/schematics';
import { appendValueInAstArray, findPropertyInAstObject } from '../utility/json-utils';
import { parseName } from '../utility/parse-name';
import { buildDefaultPath, getWorkspace, updateWorkspace } from '../utility/workspace';
import { BrowserBuilderOptions, LintBuilderOptions } from '../utility/workspace-models';
import { Schema as WebWorkerOptions } from './schema';


function addConfig(options: WebWorkerOptions, root: string, tsConfigPath: string): Rule {
  return (host: Tree, context: SchematicContext) => {
    context.logger.debug('updating project configuration.');

    const tsConfigRules = [];

    // Add tsconfig.worker.json.
    const relativePathToWorkspaceRoot = root.split('/').map(x => '..').join('/');
    tsConfigRules.push(mergeWith(apply(url('./files/worker-tsconfig'), [
      applyTemplates({ ...options, relativePathToWorkspaceRoot }),
      move(root),
    ])));

    // Add project tsconfig.json.
    // The project level tsconfig.json with webworker lib is for editor support since
    // the dom and webworker libs are mutually exclusive.
    // Note: this schematic does not change other tsconfigs to use the project-level tsconfig.
    const projectTsConfigPath = `${root}/tsconfig.json`;
    if (host.exists(projectTsConfigPath)) {
      // If the file already exists, alter it.
      const buffer = host.read(projectTsConfigPath);
      if (buffer) {
        const tsCfgAst = parseJsonAst(buffer.toString(), JsonParseMode.Loose);
        if (tsCfgAst.kind != 'object') {
          throw new SchematicsException('Invalid tsconfig. Was expecting an object');
        }
        const optsAstNode = findPropertyInAstObject(tsCfgAst, 'compilerOptions');
        if (optsAstNode && optsAstNode.kind != 'object') {
          throw new SchematicsException(
            'Invalid tsconfig "compilerOptions" property; Was expecting an object.');
        }
        const libAstNode = findPropertyInAstObject(tsCfgAst, 'lib');
        if (libAstNode && libAstNode.kind != 'array') {
          throw new SchematicsException('Invalid tsconfig "lib" property; expected an array.');
        }
        const newLibProp = 'webworker';
        if (libAstNode && !libAstNode.value.includes(newLibProp)) {
          const recorder = host.beginUpdate(projectTsConfigPath);
          appendValueInAstArray(recorder, libAstNode, newLibProp);
          host.commitUpdate(recorder);
        }
      }
    } else {
      // Otherwise create it.
      tsConfigRules.push(mergeWith(apply(url('./files/project-tsconfig'), [
        applyTemplates({ ...options, relativePathToWorkspaceRoot }),
        move(root),
      ])));
    }

    // Add worker glob exclusion to tsconfig.app.json.
    const workerGlob = '**/*.worker.ts';
    const buffer = host.read(tsConfigPath);
    if (buffer) {
      const tsCfgAst = parseJsonAst(buffer.toString(), JsonParseMode.Loose);
      if (tsCfgAst.kind != 'object') {
        throw new SchematicsException('Invalid tsconfig. Was expecting an object');
      }
      const filesAstNode = findPropertyInAstObject(tsCfgAst, 'exclude');
      if (filesAstNode && filesAstNode.kind != 'array') {
        throw new SchematicsException('Invalid tsconfig "exclude" property; expected an array.');
      }

      if (filesAstNode && filesAstNode.value.indexOf(workerGlob) == -1) {
        const recorder = host.beginUpdate(tsConfigPath);
        appendValueInAstArray(recorder, filesAstNode, workerGlob);
        host.commitUpdate(recorder);
      }
    }

    return chain([
      // Add tsconfigs.
      ...tsConfigRules,
    ]);
  };
}

function addSnippet(options: WebWorkerOptions): Rule {
  return (host: Tree, context: SchematicContext) => {
    context.logger.debug('Updating appmodule');

    if (options.path === undefined) {
      return;
    }

    const siblingModules = host.getDir(options.path).subfiles
      // Find all files that start with the same name, are ts files, and aren't spec files.
      .filter(f => f.startsWith(options.name) && f.endsWith('.ts') && !f.endsWith('spec.ts'))
      // Sort alphabetically for consistency.
      .sort();

    if (siblingModules.length === 0) {
      // No module to add in.
      return;
    }

    const siblingModulePath = `${options.path}/${siblingModules[0]}`;
    const logMessage = 'console.log(`page got message: ${data}`);';
    const workerCreationSnippet = tags.stripIndent`
      if (typeof Worker !== 'undefined') {
        // Create a new
        const worker = new Worker('./${options.name}.worker', { type: 'module' });
        worker.onmessage = ({ data }) => {
          ${logMessage}
        };
        worker.postMessage('hello');
      } else {
        // Web Workers are not supported in this environment.
        // You should add a fallback so that your program still executes correctly.
      }
    `;

    // Append the worker creation snippet.
    const originalContent = host.read(siblingModulePath);
    host.overwrite(siblingModulePath, originalContent + '\n' + workerCreationSnippet);

    return host;
  };
}

export default function (options: WebWorkerOptions): Rule {
  return async (host: Tree) => {
    const workspace = await getWorkspace(host);

    if (!options.project) {
      throw new SchematicsException('Option "project" is required.');
    }
    if (!options.target) {
      throw new SchematicsException('Option (target) is required.');
    }

    const project = workspace.projects.get(options.project);
    if (!project) {
      throw new SchematicsException(`Invalid project name (${options.project})`);
    }
    const projectType = project.extensions['projectType'];
    if (projectType !== 'application') {
      throw new SchematicsException(`Web Worker requires a project type of "application".`);
    }

    const projectTarget = project.targets.get(options.target);
    if (!projectTarget) {
      throw new Error(`Target is not defined for this project.`);
    }
    const projectTargetOptions = (projectTarget.options || {}) as unknown as BrowserBuilderOptions;

    if (options.path === undefined) {
      options.path = buildDefaultPath(project);
    }
    const parsedPath = parseName(options.path, options.name);
    options.name = parsedPath.name;
    options.path = parsedPath.path;
    const root = project.root || project.sourceRoot || '';

    const needWebWorkerConfig = !projectTargetOptions.webWorkerTsConfig;
    if (needWebWorkerConfig) {
      const workerConfigPath = `${root.endsWith('/') ? root : root + '/'}tsconfig.worker.json`;
      projectTargetOptions.webWorkerTsConfig = workerConfigPath;

      // add worker tsconfig to lint architect target
      const lintTarget = project.targets.get('lint');
      if (lintTarget) {
        const lintOptions = (lintTarget.options || {}) as unknown as LintBuilderOptions;
        lintOptions.tsConfig = (lintOptions.tsConfig || []).concat(workerConfigPath);
      }
    }

    const templateSource = apply(url('./files/worker'), [
      applyTemplates({ ...options, ...strings }),
      move(parsedPath.path),
    ]);

    return chain([
      // Add project configuration.
      needWebWorkerConfig ? addConfig(options, root, projectTargetOptions.tsConfig) : noop(),
      needWebWorkerConfig ? updateWorkspace(workspace) : noop(),
      // Create the worker in a sibling module.
      options.snippet ? addSnippet(options) : noop(),
      // Add the worker.
      mergeWith(templateSource),
    ]);
  };
}