fixup! refactor: update stackblitz examples write to use webcontainers for v13 compatibility

Update version in package.json file

Author: devversion

src/app/shared/stack-blitz/stack-blitz-button.html

@@ -1,6 +1,5 @@
-<button mat-icon-button type="button" (click)="openStackBlitz()" [disabled]="isDisabled"
-        [attr.aria-label]="isDisabled ? 'Building StackBlitz example...' : 'Edit this example in StackBlitz'"
-        [matTooltip]="isDisabled ? 'Building ' + exampleData?.description + ' StackBlitz example...' :
-        'Edit ' + exampleData?.description + ' example in StackBlitz'">
+<button mat-icon-button type="button" (click)="openStackBlitz()"
+        aria-label="Edit this example in StackBlitz"
+        [matTooltip]="'Edit ' + exampleData?.description + ' example in StackBlitz'">
   <mat-icon>open_in_new</mat-icon>
 </button>

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

@@ -1,4 +1,4 @@
-import {Component, HostListener, Input, NgModule} from '@angular/core';
+import {Component, Input, NgModule, NgZone} from '@angular/core';
 import {ExampleData} from '@angular/components-examples';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
@@ -10,15 +10,6 @@ import {StackBlitzWriter} from './stack-blitz-writer';
   templateUrl: './stack-blitz-button.html',
 })
 export class StackBlitzButton {
-  /**
-   * The button becomes disabled if the user hovers over the button before the StackBlitz
-   * is ready for opening. After the StackBlitz is ready, the button becomes enabled again.
-   *
-   * The StackBlitz preparation usually happens extremely quickly, but we handle the case of the
-   * StackBlitz not yet being ready for people with poor network connections or slow devices.
-   */
-  isDisabled = false;
-
   exampleData: ExampleData | undefined;
 
   /**
@@ -31,30 +22,33 @@ export class StackBlitzButton {
    */
   private _openStackBlitzFn: (() => void) | null = null;
 
-  @HostListener('mouseover')
-  onMouseOver() {
-    this.isDisabled = this._openStackBlitzFn === null;
-  }
-
   @Input()
-  set example(example: string | undefined) {
-    if (example) {
-      const isTest = example.includes('harness');
-      this.exampleData = new ExampleData(example);
-      this.stackBlitzWriter.createStackBlitzForExample(example, this.exampleData, isTest)
-        .then(openFn => {
-          this._openStackBlitzFn = openFn;
-          this.isDisabled = false;
-        });
+  set example(exampleId: string | undefined) {
+    if (exampleId) {
+      this.exampleData = new ExampleData(exampleId);
+      this._prepareStackBlitzForExample(exampleId, this.exampleData);
     } else {
-      this.isDisabled = true;
+      this.exampleData = undefined;
+      this._openStackBlitzFn = null;
     }
   }
 
-  constructor(private stackBlitzWriter: StackBlitzWriter) {}
+  constructor(private stackBlitzWriter: StackBlitzWriter, private ngZone: NgZone) {}
+
+  openStackBlitz(): void {
+    if (this._openStackBlitzFn === null) {
+      alert('StackBlitz is not ready yet. Please try again in a few seconds.');
+    } else {
+      this._openStackBlitzFn?.();
+    }
+  }
 
-  async openStackBlitz(): Promise<void> {
-    this._openStackBlitzFn?.();
+  private _prepareStackBlitzForExample(exampleId: string, data: ExampleData): void {
+    this.ngZone.runOutsideAngular(async () => {
+      const isTest = exampleId.includes('harness');
+      this._openStackBlitzFn = await this.stackBlitzWriter
+        .createStackBlitzForExample(exampleId, data, isTest);
+    });
   }
 }
 

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

@@ -66,26 +66,32 @@ export class StackBlitzWriter {
   constructor(private _http: HttpClient, private _ngZone: NgZone) {}
 
   /** Opens a StackBlitz for the specified example. */
-  async createStackBlitzForExample(exampleId: string, data: ExampleData,
-                                   isTest: boolean): Promise<() => void> {
-    // Run outside the zone since this form doesn't interact with Angular
+  createStackBlitzForExample(exampleId: string, data: ExampleData,
+                             isTest: boolean): Promise<() => void> {
+    // Run outside the zone since the creation doesn't interact with Angular
     // and the file requests can cause excessive change detections.
-    return await this._ngZone.runOutsideAngular(async () => {
+    return this._ngZone.runOutsideAngular(async () => {
       const files = await this._buildInMemoryFileDictionary(data, exampleId, isTest);
       const exampleMainFile = `src/app/${data.indexFilename}`;
 
       return () => {
-        this._openStackBlitz(`Angular Components - ${exampleId} example`, exampleMainFile, files);
+        this._openStackBlitz({
+          files,
+          title: `Angular Components - ${data.description}`,
+          description: `${data.description}\n\nAuto-generated from: https://material.angular.io`,
+          openFile: exampleMainFile,
+        });
       };
     });
   }
 
-  /** Opens a new WebContainer-based StackBlitz with the given files. */
-  private _openStackBlitz(title: string, openFile: string, files: FileDictionary): void {
+  /** Opens a new WebContainer-based StackBlitz for the given files. */
+  private _openStackBlitz({title, description, openFile, files}:
+      {title: string, description: string, openFile: string, files: FileDictionary}): void {
     stackblitz.openProject({
       title,
       files,
-      description: title,
+      description,
       template: PROJECT_TEMPLATE,
       tags: PROJECT_TAGS,
     }, {openFile});
@@ -147,15 +153,22 @@ export class StackBlitzWriter {
    */
   private _replaceExamplePlaceholders(data: ExampleData, fileName: string,
                                       fileContent: string, isTest: boolean): string {
+    // Replaces the version placeholder in the `index.html` and `package.json` file.
+    // Technically we invalidate the `package-lock.json` file for the StackBlitz boilerplate
+    // by dynamically changing the version in the `package.json`, but the Turbo package manager
+    // seems to be able to partially re-use the lock file to speed up the module tree computation,
+    // so providing a lock file is still reasonable while modifying the `package.json`.
+    if (fileName === 'src/index.html' || fileName === 'package.json') {
+      fileContent = fileContent.replace(/\${version}/g, MAT_VERSION.full);
+    }
 
     if (fileName === 'src/index.html') {
       // Replace the component selector in `index,html`.
       // For example, <material-docs-example></material-docs-example> will be replaced as
       // <button-demo></button-demo>
       fileContent = fileContent
         .replace(/material-docs-example/g, data.selectorName)
-        .replace(/\${title}/g, data.description)
-        .replace(/\${version}/g, MAT_VERSION.full);
+        .replace(/\${title}/g, data.description);
     } else if (fileName === '.stackblitzrc') {
       fileContent = fileContent
         .replace(/\${startCommand}/, isTest ? 'turbo test' : 'turbo start');

src/assets/stack-blitz/package.json

@@ -11,12 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "13.0.0-rc.0",
-    "@angular/cdk": "13.0.0-rc.0",
+    "@angular/cdk": "${version}",
     "@angular/common": "13.0.0-rc.0",
     "@angular/compiler": "13.0.0-rc.0",
     "@angular/core": "13.0.0-rc.0",
     "@angular/forms": "13.0.0-rc.0",
-    "@angular/material": "13.0.0-rc.0",
+    "@angular/material": "${version}",
     "@angular/platform-browser": "13.0.0-rc.0",
     "@angular/platform-browser-dynamic": "13.0.0-rc.0",
     "@angular/router": "13.0.0-rc.0",

src/assets/stack-blitz/src/main.ts

@@ -1,3 +1,5 @@
+import {VERSION as CDK_VERSION} from '@angular/cdk';
+import {VERSION as MAT_VERSION} from '@angular/material/core';
 import {enableProdMode} from '@angular/core';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
@@ -8,5 +10,9 @@ if (environment.production) {
   enableProdMode();
 }
 
+/* eslint-disable no-console */
+console.info('Angular CDK version', CDK_VERSION.full);
+console.info('Angular Material version', MAT_VERSION.full);
+
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.error(err));