feat: add cordova-builders ng-add (#467)

Author: mhartington

.gitignore

@@ -1,3 +1,7 @@
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
 node_modules
 **/*.js
 **/*.d.ts

package-lock.json

@@ -0,0 +1,52 @@
+import type { Rule, Tree } from '@angular-devkit/schematics';
+import { chain, SchematicsException } from '@angular-devkit/schematics';
+import { getWorkspace } from '@schematics/angular/utility/workspace';
+
+import { addArchitectBuilder, getDefaultAngularAppName } from './../utils/config';
+import type { Schema as AddOptions } from './schema';
+
+function addCordovaBuilder(projectName: string): Rule {
+  return (host: Tree) => {
+    addArchitectBuilder(host, projectName, 'ionic-cordova-serve', {
+      builder: '@ionic/cordova-builders:cordova-serve',
+      options: {
+        cordovaBuildTarget: `${projectName}:ionic-cordova-build`,
+        devServerTarget: `${projectName}:serve`,
+      },
+      configurations: {
+        production: {
+          cordovaBuildTarget: `${projectName}:ionic-cordova-build:production`,
+          devServerTarget: `${projectName}:serve:production`,
+        },
+      },
+    });
+    addArchitectBuilder(host, projectName, 'ionic-cordova-build', {
+      builder: '@ionic/cordova-builders:cordova-build',
+      options: {
+        browserTarget: `${projectName}:build`,
+      },
+      configurations: {
+        production: {
+          browserTarget: `${projectName}:build:production`,
+        },
+      },
+    });
+    return host;
+  };
+}
+
+export default function ngAdd(options: AddOptions): Rule {
+  return async (host: Tree) => {
+    const workspace = await getWorkspace(host);
+    if (!options.project) {
+      options.project = getDefaultAngularAppName(workspace);
+    }
+    const project = workspace.projects.get(options.project);
+
+    if (!project || project.extensions.projectType !== 'application') {
+      throw new SchematicsException(`Ionic Add requires a project type of "application".`);
+    }
+
+    return chain([addCordovaBuilder(options.project)]);
+  };
+}

packages/cordova-builders/add/index.ts

@@ -0,0 +1,3 @@
+export interface Schema {
+  project?: string;
+}

packages/cordova-builders/add/schema.d.ts

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "ionicNgAdd",
+  "title": "Ionic Add options",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+  },
+  "required": []
+}

packages/cordova-builders/add/schema.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add Cordova builders to your project",
+      "factory": "./add",
+      "schema": "./add/schema.json"
+    }
+  }
+}

packages/cordova-builders/collection.json

@@ -38,6 +38,8 @@
     "@angular-devkit/architect": "^0.1300.1",
     "@angular-devkit/build-angular": "^13.0.1",
     "@angular-devkit/core": "^13.0.1",
+    "@angular-devkit/schematics": "^13.0.1",
+    "@schematics/angular": "^13.0.1",
     "cheerio": "^1.0.0-rc.10",
     "colorette": "^2.0.16",
     "copy-webpack-plugin": "^9.0.1",
@@ -51,5 +53,6 @@
     "typescript": ">=4.4.2 <4.5"
   },
   "builders": "./builders.json",
+  "schematics": "./collection.json",
   "gitHead": "35dbfaa5d93cb165387321a3f8a0f43e604f5d02"
 }

packages/cordova-builders/package.json

@@ -0,0 +1,70 @@
+import type { Tree } from '@angular-devkit/schematics';
+import { SchematicsException } from '@angular-devkit/schematics';
+
+const CONFIG_PATH = 'angular.json';
+
+export function getDefaultAngularAppName(config: any): string {
+  const projects = config.projects;
+  const projectNames = Object.keys(projects);
+
+  for (const projectName of projectNames) {
+    const projectConfig = projects[projectName];
+    if (isAngularBrowserProject(projectConfig)) {
+      return projectName;
+    }
+  }
+
+  return projectNames[0];
+}
+
+export function addArchitectBuilder(
+  host: Tree,
+  projectName: string,
+  builderName: string,
+  builderOpts: any
+): void | never {
+  const config = readConfig(host);
+  const appConfig = getAngularAppConfig(config, projectName);
+  appConfig.architect[builderName] = builderOpts;
+  writeConfig(host, config);
+}
+
+export function readConfig(host: Tree): any {
+  const sourceText = host.read(CONFIG_PATH)?.toString('utf-8');
+  if (!sourceText) {
+    return;
+  }
+  return JSON.parse(sourceText);
+}
+
+export function writeConfig(host: Tree, config: JSON): void {
+  host.overwrite(CONFIG_PATH, JSON.stringify(config, null, 2));
+}
+
+function isAngularBrowserProject(projectConfig: any): boolean {
+  if (projectConfig.projectType === 'application') {
+    const buildConfig = projectConfig.architect.build;
+    return buildConfig.builder === '@angular-devkit/build-angular:browser';
+  }
+
+  return false;
+}
+
+export function getAngularAppConfig(config: any, projectName: string): any | never {
+  // eslint-disable-next-line no-prototype-builtins
+  if (!config.projects.hasOwnProperty(projectName)) {
+    throw new SchematicsException(`Could not find project: ${projectName}`);
+  }
+
+  const projectConfig = config.projects[projectName];
+  if (isAngularBrowserProject(projectConfig)) {
+    return projectConfig;
+  }
+
+  if (config.projectType !== 'application') {
+    throw new SchematicsException(`Invalid projectType for ${projectName}: ${config.projectType}`);
+  } else {
+    const buildConfig = projectConfig.architect.build;
+    throw new SchematicsException(`Invalid builder for ${projectName}: ${buildConfig.builder}`);
+  }
+}