feat: simplify stackblitz examples using standalone (#1211)

Updates the Stackblitz examples to incorporate the standalone changes from the main repo and to reduce the amount of files we need to generate.

Author: crisbeto

.aspect/rules/external_repository_action_cache/npm_translate_lock_LTE4Nzc1MDcwNjU=

@@ -1,6 +1,6 @@
 # Input hashes for repository rule npm_translate_lock(name = "npm", pnpm_lock = "//:pnpm-lock.yaml").
 # This file should be checked into version control along with the pnpm-lock.yaml file.
 .npmrc=-1306950124
-pnpm-lock.yaml=-22712478
-yarn.lock=902473453
-package.json=861975370
+pnpm-lock.yaml=-1654047057
+yarn.lock=-726322771
+package.json=1829293188

package.json

@@ -35,7 +35,7 @@
     "@angular/cdk-experimental": "^16.0.0",
     "@angular/common": "^16.0.0",
     "@angular/compiler": "^16.0.0",
-    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#5d7786c0abcb58e0dfe2e4922f1cf58e6e55e61f",
+    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#c29cd4e5f092902d2cca0f589c8de6c379e96789",
     "@angular/core": "^16.0.0",
     "@angular/forms": "^16.0.0",
     "@angular/google-maps": "^16.0.0",

pnpm-lock.yaml

@@ -7,7 +7,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {NgModule} from '@angular/core';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {ButtonExamplesModule} from '@angular/components-examples/material/button';
+import {ButtonOverviewExample} from '@angular/components-examples/material/button';
 
 const docItemsId = 'button';
 
@@ -56,7 +56,7 @@ describe('ComponentViewer', () => {
     MatButtonModule,
     MatIconModule,
     NoopAnimationsModule,
-    ButtonExamplesModule,
+    ButtonOverviewExample,
   ],
 })
 class TestExampleModule { }

src/app/pages/component-viewer/component-viewer.spec.ts

@@ -65,9 +65,8 @@
   </div>
 
   <div class="docs-example-viewer-body" *ngIf="view !== 'snippet'">
-    <ng-template *ngIf="_exampleComponentType && _exampleModuleFactory && !example?.includes('harness')"
-                 [ngComponentOutlet]="_exampleComponentType"
-                 [ngComponentOutletNgModuleFactory]="_exampleModuleFactory"></ng-template>
+    <ng-template *ngIf="_exampleComponentType && !example?.includes('harness')"
+                 [ngComponentOutlet]="_exampleComponentType"></ng-template>
     <div *ngIf="example?.includes('harness')">
       This example contains tests. Open in Stackblitz to run the tests.
     </div>

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

@@ -15,7 +15,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {DocsAppTestingModule} from '../../testing/testing-module';
 import {DocViewerModule} from '../doc-viewer/doc-viewer-module';
 import {ExampleViewer} from './example-viewer';
-import {AutocompleteExamplesModule} from '@angular/components-examples/material/autocomplete';
+import {AutocompleteOverviewExample} from '@angular/components-examples/material/autocomplete';
 import {MatTabGroupHarness} from '@angular/material/tabs/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
@@ -243,7 +243,7 @@ describe('ExampleViewer', () => {
     CommonModule,
     ReactiveFormsModule,
     NoopAnimationsModule,
-    AutocompleteExamplesModule,
+    AutocompleteOverviewExample,
   ],
 })
 class TestExampleModule {}

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

@@ -3,12 +3,10 @@ import {
   ElementRef,
   HostBinding,
   Input,
-  NgModuleFactory,
   OnInit,
   QueryList,
   Type,
   ViewChildren,
-  ɵNgModuleFactory,
 } from '@angular/core';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {Clipboard} from '@angular/cdk/clipboard';
@@ -66,9 +64,6 @@ export class ExampleViewer implements OnInit {
   /** Component type for the current example. */
   _exampleComponentType: Type<any> | null = null;
 
-  /** Module factory that declares the example component. */
-  _exampleModuleFactory: NgModuleFactory<any> | null = null;
-
   /** View of the example component. */
   @Input() view: Views | undefined;
 
@@ -206,15 +201,10 @@ export class ExampleViewer implements OnInit {
   /** Loads the component and module factory for the currently selected example. */
   private async _loadExampleComponent() {
     if (this._example != null) {
-      const {componentName, module} = EXAMPLE_COMPONENTS[this._example];
+      const {componentName} = EXAMPLE_COMPONENTS[this._example];
       // Lazily loads the example package that contains the requested example.
       const moduleExports = await loadExample(this._example);
       this._exampleComponentType = moduleExports[componentName];
-      // The components examples package is built with Ivy. This means that no factory files are
-      // generated. To retrieve the factory of the AOT compiled module, we simply pass the module
-      // class symbol to Ivy's module factory constructor. There is no equivalent for View Engine,
-      // where factories are stored in separate files. Hence the API is currently Ivy-only.
-      this._exampleModuleFactory = new ɵNgModuleFactory(moduleExports[module.name]);
 
       // Since the data is loaded asynchronously, we can't count on the native behavior
       // that scrolls the element into view automatically. We do it ourselves while giving

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

@@ -10,7 +10,7 @@ const testExampleBasePath = `/docs-content/examples-source/cdk/my-comp/${testExa
 const FAKE_DOCS: {[key: string]: string} = {
   /* eslint-disable @typescript-eslint/naming-convention */
   '/assets/stack-blitz/src/index.html': '<material-docs-example></material-docs-example>',
-  '/assets/stack-blitz/src/app/app.module.ts':
+  '/assets/stack-blitz/src/main.ts':
       `import {MaterialDocsExample} from './material-docs-example';`,
   /* eslint-enable @typescript-eslint/naming-convention */
   [`${testExampleBasePath}/test.ts`]: 'ExampleComponent',
@@ -50,7 +50,7 @@ describe('StackBlitzWriter', () => {
 
     // Fake the example in the `EXAMPLE_COMPONENTS`. The stack blitz writer relies on
     // module information for the example in order to read the example sources from disk.
-    EXAMPLE_COMPONENTS[testExampleId] = {module: {importSpecifier: 'cdk/my-comp'}} as LiveExample;
+    EXAMPLE_COMPONENTS[testExampleId] = {importPath: 'cdk/my-comp'} as LiveExample;
   });
 
   afterEach(() => {
@@ -109,11 +109,10 @@ describe('StackBlitzWriter', () => {
     const expectedFiles = jasmine.objectContaining({
       /* eslint-disable @typescript-eslint/naming-convention */
       'angular.json': 'fake',
-      'src/main.ts': 'fake',
+      'src/main.ts': `import {ExampleComponent} from './test';`,
       'src/test.ts': 'fake',
       'src/index.html': `<this-is-the-comp-name></this-is-the-comp-name>`,
-      'src/app/app.module.ts': `import {ExampleComponent, AdditionalComp} from './test';`,
-      'src/app/test.ts': `ExampleComponent
+      'src/example/test.ts': `ExampleComponent
 
 /**  Copyright ${new Date().getFullYear()} Google LLC. All Rights Reserved.
     Use of this source code is governed by an MIT-style license that

src/app/shared/stack-blitz/stack-blitz-writer.spec.ts

@@ -42,14 +42,9 @@ export const TEMPLATE_FILES = [
   'tsconfig.spec.json',
   'src/index.html',
   'src/main.ts',
-  'src/material.module.ts',
-  'src/polyfills.ts',
   'src/styles.scss',
   'src/test.ts',
   'src/theme.scss',
-  'src/app/app.module.ts',
-  'src/environments/environment.prod.ts',
-  'src/environments/environment.ts',
 ];
 
 const PROJECT_TAGS = ['angular', 'material', 'cdk', 'web', 'example'];
@@ -130,7 +125,7 @@ export class StackBlitzWriter {
     const tasks: Promise<unknown>[] = [];
     const liveExample = EXAMPLE_COMPONENTS[exampleId];
     const exampleBaseContentPath =
-      `${DOCS_CONTENT_PATH}/${liveExample.module.importSpecifier}/${exampleId}/`;
+      `${DOCS_CONTENT_PATH}/${liveExample.importPath}/${exampleId}/`;
 
     for (const relativeFilePath of TEMPLATE_FILES) {
       tasks.push(
@@ -147,7 +142,7 @@ export class StackBlitzWriter {
       // Note: Since we join with paths from the example data, we normalize
       // the final target path. This is necessary because StackBlitz does
       // not and paths like `./bla.ts` would result in a directory called `.`.
-      const targetPath = normalizePath(`src/app/${relativeFilePath}`);
+      const targetPath = normalizePath(`src/example/${relativeFilePath}`);
 
       tasks.push(
         this._loadFile(exampleBaseContentPath + relativeFilePath)
@@ -209,26 +204,19 @@ export class StackBlitzWriter {
         .replace(/\${title}/g, data.description);
     } else if (fileName === '.stackblitzrc') {
       fileContent = fileContent.replace(/\${startCommand}/, isTest ? 'turbo test' : 'turbo start');
-    } else if (fileName === 'src/app/app.module.ts') {
-      const joinedComponentNames = data.componentNames.join(', ');
+    } else if (fileName === 'src/main.ts') {
+      const mainComponentName = data.componentNames[0];
+
       // Replace the component name in `main.ts`.
       // Replace `import {MaterialDocsExample} from 'material-docs-example'`
       // will be replaced as `import {ButtonDemo} from './button-demo'`
-      fileContent = fileContent.replace(/{MaterialDocsExample}/g, `{${joinedComponentNames}}`);
-
-      // Replace `declarations: [MaterialDocsExample]`
-      // will be replaced as `declarations: [ButtonDemo]`
-      fileContent = fileContent.replace(
-        /declarations: \[MaterialDocsExample]/g,
-        `declarations: [${joinedComponentNames}]`
-      );
+      fileContent = fileContent.replace(/{MaterialDocsExample}/g, `{${mainComponentName}}`);
 
-      // Replace `bootstrap: [MaterialDocsExample]`
-      // will be replaced as `bootstrap: [ButtonDemo]`
-      // This assumes the first component listed in the main component
+      // Replace `bootstrapApplication(MaterialDocsExample,`
+      // will be replaced as `bootstrapApplication(ButtonDemo,`
       fileContent = fileContent.replace(
-        /bootstrap: \[MaterialDocsExample]/g,
-        `bootstrap: [${data.componentNames[0]}]`
+        /bootstrapApplication\(MaterialDocsExample,/g,
+        `bootstrapApplication(${mainComponentName},`
       );
 
       const dotIndex = data.indexFilename.lastIndexOf('.');

src/app/shared/stack-blitz/stack-blitz-writer.ts

@@ -26,7 +26,7 @@
             "outputPath": "dist/example-app",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -96,7 +96,7 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",