feat(schematics): add prompt to add global typography class (#17602)

crisbeto · mmalerba · commit c08050d19e94 · 2019-11-04T10:43:10.000-08:00
Adds a prompts to the `ng-add` schematic that allows the user to set the global `mat-typography` class on the `body`.
diff --git a/src/cdk/schematics/utils/html-manipulation.ts b/src/cdk/schematics/utils/html-manipulation.ts
@@ -27,7 +27,7 @@ export function appendHtmlElementToHead(host: Tree, htmlFilePath: string, elemen
   const headTag = getHtmlHeadTagElement(htmlContent);
 
   if (!headTag) {
-    throw `Could not find '<head>' element in HTML file: ${htmlFileBuffer}`;
+    throw Error(`Could not find '<head>' element in HTML file: ${htmlFileBuffer}`);
   }
 
   // We always have access to the source code location here because the `getHeadTagElement`
@@ -45,13 +45,54 @@ export function appendHtmlElementToHead(host: Tree, htmlFilePath: string, elemen
 
 /** Parses the given HTML file and returns the head element if available. */
 export function getHtmlHeadTagElement(htmlContent: string): DefaultTreeElement | null {
+  return getElementByTagName('head', htmlContent);
+}
+
+/** Adds a class to the body of the document. */
+export function addBodyClass(host: Tree, htmlFilePath: string, className: string): void {
+  const htmlFileBuffer = host.read(htmlFilePath);
+
+  if (!htmlFileBuffer) {
+    throw new SchematicsException(`Could not read file for path: ${htmlFilePath}`);
+  }
+
+  const htmlContent = htmlFileBuffer.toString();
+  const body = getElementByTagName('body', htmlContent);
+
+  if (!body) {
+    throw Error(`Could not find <body> element in HTML file: ${htmlFileBuffer}`);
+  }
+
+  const classAttribute = body.attrs.find(attribute => attribute.name === 'class');
+
+  if (classAttribute) {
+    const hasClass = classAttribute.value.split(' ').map(part => part.trim()).includes(className);
+
+    if (!hasClass) {
+      const classAttributeLocation = body.sourceCodeLocation!.attrs.class;
+      const recordedChange = host
+        .beginUpdate(htmlFilePath)
+        .insertRight(classAttributeLocation.endOffset - 1, ` ${className}`);
+      host.commitUpdate(recordedChange);
+    }
+  } else {
+    const recordedChange = host
+      .beginUpdate(htmlFilePath)
+      .insertRight(body.sourceCodeLocation!.startTag.endOffset - 1, ` class="${className}"`);
+    host.commitUpdate(recordedChange);
+  }
+}
+
+/** Finds an element by its tag name. */
+function getElementByTagName(tagName: string, htmlContent: string):
+  DefaultTreeElement | null {
   const document = parseHtml(htmlContent, {sourceCodeLocationInfo: true}) as DefaultTreeDocument;
   const nodeQueue = [...document.childNodes];
 
   while (nodeQueue.length) {
     const node = nodeQueue.shift() as DefaultTreeElement;
 
-    if (node.nodeName.toLowerCase() === 'head') {
+    if (node.nodeName.toLowerCase() === tagName) {
       return node;
     } else if (node.childNodes) {
       nodeQueue.push(...node.childNodes);
diff --git a/src/cdk/schematics/utils/index.ts b/src/cdk/schematics/utils/index.ts
@@ -10,7 +10,7 @@ export * from './ast';
 export * from './ast/ng-module-imports';
 export * from './build-component';
 export * from './get-project';
-export * from './html-head-element';
+export * from './html-manipulation';
 export * from './parse5-element';
 export * from './project-index-file';
 export * from './project-main-file';
diff --git a/src/material/schematics/ng-add/index.spec.ts b/src/material/schematics/ng-add/index.spec.ts
@@ -313,4 +313,66 @@ describe('ng-add schematic', () => {
           .toBe('custom-theme', 'Expected the old custom theme content to be unchanged.');
     });
   });
+
+  it('should add the global typography class if the body has no classes', async () => {
+    const tree = await runner.runSchematicAsync('ng-add-setup-project', {
+      typography: true
+    }, appTree).toPromise();
+    const workspace = getWorkspace(tree);
+    const project = getProjectFromWorkspace(workspace);
+
+    const indexFiles = getProjectIndexFiles(project);
+    expect(indexFiles.length).toBe(1);
+
+    indexFiles.forEach(indexPath => {
+      const buffer = tree.read(indexPath)!;
+      expect(buffer.toString()).toContain('<body class="mat-typography">');
+    });
+  });
+
+  it('should add the global typography class if the body has existing classes', async () => {
+    appTree.overwrite('projects/material/src/index.html', `
+      <html>
+        <head></head>
+        <body class="one two"></body>
+      </html>
+    `);
+
+    const tree = await runner.runSchematicAsync('ng-add-setup-project', {
+      typography: true
+    }, appTree).toPromise();
+
+    const workspace = getWorkspace(tree);
+    const project = getProjectFromWorkspace(workspace);
+    const indexFiles = getProjectIndexFiles(project);
+    expect(indexFiles.length).toBe(1);
+
+    indexFiles.forEach(indexPath => {
+      const buffer = tree.read(indexPath)!;
+      expect(buffer.toString()).toContain('<body class="one two mat-typography">');
+    });
+  });
+
+  it('should not add the global typography class if it exists already', async () => {
+    appTree.overwrite('projects/material/src/index.html', `
+      <html>
+        <head></head>
+        <body class="one mat-typography two"></body>
+      </html>
+    `);
+
+    const tree = await runner.runSchematicAsync('ng-add-setup-project', {
+      typography: true
+    }, appTree).toPromise();
+
+    const workspace = getWorkspace(tree);
+    const project = getProjectFromWorkspace(workspace);
+    const indexFiles = getProjectIndexFiles(project);
+    expect(indexFiles.length).toBe(1);
+
+    indexFiles.forEach(indexPath => {
+      const buffer = tree.read(indexPath)!;
+      expect(buffer.toString()).toContain('<body class="one mat-typography two">');
+    });
+  });
 });
diff --git a/src/material/schematics/ng-add/schema.json b/src/material/schematics/ng-add/schema.json
@@ -27,6 +27,12 @@
         ]
       }
     },
+    "typography": {
+      "type": "boolean",
+      "default": false,
+      "description": "Whether to set up global typography styles.",
+      "x-prompt": "Set up global Angular Material typography styles?"
+    },
     "animations": {
       "type": "boolean",
       "default": true,
diff --git a/src/material/schematics/ng-add/schema.ts b/src/material/schematics/ng-add/schema.ts
@@ -15,4 +15,7 @@ export interface Schema {
 
   /** Name of pre-built theme to install. */
   theme: 'indigo-pink' | 'deeppurple-amber' | 'pink-bluegrey' | 'purple-green' | 'custom';
+
+  /** Whether to set up global typography styles. */
+  typography: boolean;
 }
diff --git a/src/material/schematics/ng-add/setup-project.ts b/src/material/schematics/ng-add/setup-project.ts
@@ -19,7 +19,7 @@ import {getWorkspace} from '@schematics/angular/utility/config';
 import {getAppModulePath} from '@schematics/angular/utility/ng-ast-utils';
 import {addFontsToIndex} from './fonts/material-fonts';
 import {Schema} from './schema';
-import {addThemeToAppStyles} from './theming/theming';
+import {addThemeToAppStyles, addTypographyClass} from './theming/theming';
 
 /** Name of the Angular module that enables Angular browser animations. */
 const browserAnimationsModuleName = 'BrowserAnimationsModule';
@@ -39,6 +39,7 @@ export default function(options: Schema): Rule {
     addThemeToAppStyles(options),
     addFontsToIndex(options),
     addMaterialAppStyles(options),
+    addTypographyClass(options),
   ]);
 }
 
diff --git a/src/material/schematics/ng-add/theming/theming.ts b/src/material/schematics/ng-add/theming/theming.ts
@@ -10,10 +10,12 @@ import {normalize} from '@angular-devkit/core';
 import {WorkspaceProject, WorkspaceSchema} from '@angular-devkit/core/src/experimental/workspace';
 import {SchematicsException, Tree} from '@angular-devkit/schematics';
 import {
+  addBodyClass,
   defaultTargetBuilders,
   getProjectFromWorkspace,
   getProjectStyleFile,
   getProjectTargetOptions,
+  getProjectIndexFiles,
 } from '@angular/cdk/schematics';
 import {InsertChange} from '@schematics/angular/utility/change';
 import {getWorkspace} from '@schematics/angular/utility/config';
@@ -45,6 +47,23 @@ export function addThemeToAppStyles(options: Schema): (host: Tree) => Tree {
   };
 }
 
+/** Adds the global typography class to the body element. */
+export function addTypographyClass(options: Schema): (host: Tree) => Tree {
+  return function(host: Tree): Tree {
+    const workspace = getWorkspace(host);
+    const project = getProjectFromWorkspace(workspace, options.project);
+    const projectIndexFiles = getProjectIndexFiles(project);
+
+    if (!projectIndexFiles.length) {
+      throw new SchematicsException('No project index HTML file could be found.');
+    }
+
+    projectIndexFiles.forEach(indexFilePath => addBodyClass(host, indexFilePath, 'mat-typography'));
+
+    return host;
+  };
+}
+
 /**
  * Insert a custom theme to project style file. If no valid style file could be found, a new
  * Scss file for the custom theme will be created.

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,12 @@`
`27`	`27`	`]`
`28`	`28`	`}`
`29`	`29`	`},`
	`30`	`+ "typography": {`
	`31`	`+ "type": "boolean",`
	`32`	`+ "default": false,`
	`33`	`+ "description": "Whether to set up global typography styles.",`
	`34`	`+ "x-prompt": "Set up global Angular Material typography styles?"`
	`35`	`+ },`
`30`	`36`	`"animations": {`
`31`	`37`	`"type": "boolean",`
`32`	`38`	`"default": true,`
Original file line number	Diff line number	Diff line change
`@@ -15,4 +15,7 @@ export interface Schema {`
`15`	`15`
`16`	`16`	`/** Name of pre-built theme to install. */`
`17`	`17`	`theme: 'indigo-pink' \| 'deeppurple-amber' \| 'pink-bluegrey' \| 'purple-green' \| 'custom';`
	`18`	`+`
	`19`	`+ /** Whether to set up global typography styles. */`
	`20`	`+ typography: boolean;`
`18`	`21`	`}`