refactor: prepare for docs-content changes in v10.1

package.json

@@ -18,7 +18,7 @@
     "build:content": "yarn upgrade @angular/components-examples",
     "build:sm": "ng build --prod --source-map",
     "prod-build": "ng build --prod",
-    "postinstall": "webdriver-manager update --gecko false && ngcc --async false --properties es2015 browser module main --first-only --create-ivy-entry-points",
+    "postinstall": "webdriver-manager update --gecko false",
     "publish-prod": "bash ./tools/deploy.sh stable prod",
     "publish-dev": "bash ./tools/deploy.sh",
     "publish-beta": "bash ./tools/deploy.sh stable beta"
@@ -30,7 +30,7 @@
     "@angular/cdk-experimental": "^10.0.2",
     "@angular/common": "^10.0.1",
     "@angular/compiler": "^10.0.1",
-    "@angular/components-examples": "angular/material2-docs-content#10.0.x",
+    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#33b7ab32041e2845fb82497ff304c86690fded90",
     "@angular/core": "^10.0.1",
     "@angular/forms": "^10.0.1",
     "@angular/google-maps": "^10.0.2",

src/app/shared/example-viewer/example-viewer.spec.ts

@@ -76,7 +76,7 @@ describe('ExampleViewer', () => {
 
   it('should expand to TS tab', async(async () => {
     component.example = exampleKey;
-    component.file = 'file.ts';
+    component.file = EXAMPLE_COMPONENTS[exampleKey].primaryFile;
     component.view = 'snippet';
     component.toggleCompactView();
 
@@ -112,18 +112,18 @@ describe('ExampleViewer', () => {
 
   it('should print an error message about incorrect file type', async(() => {
     spyOn(console, 'error');
+    component.example = exampleKey;
     component.file = 'file.bad';
     component.selectCorrectTab();
 
     expect(console.error).toHaveBeenCalledWith(
-      'Unexpected file type: bad. Expected html, ts, or css.');
+      `Could not find tab for file extension: "bad".`);
   }));
 
   it('should set and return example properly', async(() => {
     component.example = exampleKey;
     const data = component.exampleData;
-    // TODO(jelbourn): remove `as any` once LiveExample is updated to have optional members.
-    expect(data).toEqual(EXAMPLE_COMPONENTS[exampleKey] as any);
+    expect(data).toEqual(EXAMPLE_COMPONENTS[exampleKey]);
   }));
 
   it('should print an error message about missing example', async(() => {
@@ -159,14 +159,32 @@ describe('ExampleViewer', () => {
     it('should be able to render additional files', () => {
       EXAMPLE_COMPONENTS['additional-files'] = {
         ...EXAMPLE_COMPONENTS[exampleKey],
-        additionalFiles: ['some-additional-file.html'],
+        files: [
+          'additional-files-example.ts',
+          'additional-files-example.html',
+          'additional-files-example.css',
+          'some-additional-file.html'
+        ],
       };
 
       component.example = 'additional-files';
 
       expect(component._getExampleTabNames())
         .toEqual(['HTML', 'TS', 'CSS', 'some-additional-file.html']);
     });
+
+    it('should be possible for example to not have CSS or HTML files', () => {
+      EXAMPLE_COMPONENTS['additional-files'] = {
+        ...EXAMPLE_COMPONENTS[exampleKey],
+        files: [
+          'additional-files-example.ts',
+        ],
+      };
+
+      component.example = 'additional-files';
+
+      expect(component._getExampleTabNames()).toEqual(['TS']);
+    });
   });
 
   describe('copy button', () => {

src/app/shared/example-viewer/example-viewer.ts

@@ -17,6 +17,9 @@ export type Views = 'snippet' | 'full' | 'demo';
 /** Regular expression that matches a file name and its extension */
 const fileExtensionRegex = /(.*)\.(\w+)/;
 
+/** Preferred order for files of an example displayed in the viewer. */
+const preferredExampleFileOrder = ['HTML', 'TS', 'CSS'];
+
 @Component({
   selector: 'example-viewer',
   templateUrl: './example-viewer.html',
@@ -28,7 +31,7 @@ export class ExampleViewer implements OnInit {
   /** The tab to jump to when expanding from snippet view. */
   selectedTab: number = 0;
 
-  /** Map of example files that should be displayed in the view-source tab. */
+  /** Map of example files that should be displayed in the view-source tab in order. */
   exampleTabs: {[tabName: string]: string};
 
   /** Data for the currently selected example. */
@@ -79,21 +82,24 @@ export class ExampleViewer implements OnInit {
     }
   }
 
+  /** Selects a given tab based on the example file of the compact view. */
   selectCorrectTab() {
-    const fileType = this.file?.split('.').slice(-1)[0];
-    switch (fileType) {
-      case 'html':
-        this.selectedTab = 0;
-        break;
-      case 'ts':
-        this.selectedTab = 1;
-        break;
-      case 'css':
-        this.selectedTab = 2;
-        break;
-      default:
-        console.error(`Unexpected file type: ${fileType}. Expected html, ts, or css.`);
+    if (!this.file || !this.exampleTabs) {
+      return;
     }
+
+    const extension = this.file.substring(this.file.lastIndexOf('.') + 1);
+    const exampleTabNames = this._getExampleTabNames();
+
+    for (let i = 0; i < exampleTabNames.length; i++) {
+      const tabName = exampleTabNames[i];
+      if (tabName.toLowerCase() === extension || tabName.endsWith(`.${extension}`)) {
+        this.selectedTab = i;
+        return;
+      }
+    }
+
+    console.error(`Could not find tab for file extension: "${extension}".`);
   }
 
   toggleCompactView() {
@@ -129,12 +135,19 @@ export class ExampleViewer implements OnInit {
       fileName = `${contentBeforeDot}-${contentAfterDot}.html`;
     }
 
-    const examplePath = `${this.exampleData.module.importSpecifier}/${this.example}`;
-    return `/docs-content/examples-highlighted/${examplePath}/${fileName}`;
+    return `/docs-content/examples-highlighted/${this.exampleData.packagePath}/${fileName}`;
   }
 
   _getExampleTabNames() {
-    return Object.keys(this.exampleTabs);
+    return Object.keys(this.exampleTabs).sort((a, b) => {
+      let indexA = preferredExampleFileOrder.indexOf(a);
+      let indexB = preferredExampleFileOrder.indexOf(b);
+      // Files which are not part of the preferred example file order should be
+      // moved after all items with a preferred index.
+      if (indexA === -1) indexA = preferredExampleFileOrder.length;
+      if (indexB === -1) indexB = preferredExampleFileOrder.length;
+      return (indexA - indexB) || 1;
+    });
   }
 
   /** Loads the component and module factory for the currently selected example. */
@@ -158,22 +171,28 @@ export class ExampleViewer implements OnInit {
   }
 
   private _generateExampleTabs() {
-    const examplePath = `${this.exampleData.module.importSpecifier}/${this.example}`;
-    const docsContentPath = `/docs-content/examples-highlighted/${examplePath}`;
-
-    this.exampleTabs = {
-      HTML: `${docsContentPath}/${this.example}-example-html.html`,
-      TS: `${docsContentPath}/${this.example}-example-ts.html`,
-      CSS: `${docsContentPath}/${this.example}-example-css.html`,
-    };
+    const docsContentPath = `/docs-content/examples-highlighted/${this.exampleData.packagePath}`;
+    // Name of the default example files. If files with such name exist within the example,
+    // we provide a shorthand for them within the example tabs (for less verbose tabs).
+    const exampleBaseFileName = `${this.example}-example`;
 
-    const additionalFiles = this.exampleData.additionalFiles || [];
+    this.exampleTabs = {};
 
-    additionalFiles.forEach((fileName: string) => {
+    for (const fileName of this.exampleData.files) {
       // Since the additional files refer to the original file name, we need to transform
       // the file name to match the highlighted HTML file that displays the source.
       const fileSourceName = fileName.replace(fileExtensionRegex, '$1-$2.html');
-      this.exampleTabs[fileName] = `${docsContentPath}/${fileSourceName}`;
-    });
+      const importPath = `${docsContentPath}/${fileSourceName}`;
+
+      if (fileName === `${exampleBaseFileName}.ts`) {
+        this.exampleTabs['TS'] = importPath;
+      } else if (fileName === `${exampleBaseFileName}.css`) {
+        this.exampleTabs['CSS'] = importPath;
+      } else if (fileName === `${exampleBaseFileName}.html`) {
+        this.exampleTabs['HTML'] = importPath;
+      } else {
+        this.exampleTabs[fileName] = importPath;
+      }
+    }
   }
 }

yarn.lock

@@ -202,15 +202,9 @@
   dependencies:
     tslib "^2.0.0"
 
-"@angular/components-examples@angular/material2-docs-content#10.0.x":
-  version "10.0.2-sha-ba5c2feb0"
-  resolved "https://codeload.github.com/angular/material2-docs-content/tar.gz/00da8d7f03897721fd841b7829f37a9afc06ed7f"
-  dependencies:
-    tslib "^2.0.0"
-
-"@angular/components-examples@https://github.com/angular/material2-docs-content.git#fd76eb77418b2193f243be0570b727e63728e3e3":
-  version "10.0.1-sha-55d50750e"
-  resolved "https://github.com/angular/material2-docs-content.git#fd76eb77418b2193f243be0570b727e63728e3e3"
+"@angular/components-examples@https://github.com/angular/material2-docs-content.git#33b7ab32041e2845fb82497ff304c86690fded90":
+  version "10.1.0-next.0-sha-57f20bfb9"
+  resolved "https://github.com/angular/material2-docs-content.git#33b7ab32041e2845fb82497ff304c86690fded90"
   dependencies:
     tslib "^2.0.0"