From f8e00228123505266e20141c24584066e272da5d Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 3 Oct 2025 10:26:21 +0200 Subject: [PATCH 1/4] build: remove unnecessary file from Stackblitz template We don't need a `.gitignore` in the Stackblitz template. --- .../shared/stackblitz/stackblitz-writer.ts | 1 - docs/src/assets/stackblitz/.gitignore | 46 ------------------- 2 files changed, 47 deletions(-) delete mode 100644 docs/src/assets/stackblitz/.gitignore diff --git a/docs/src/app/shared/stackblitz/stackblitz-writer.ts b/docs/src/app/shared/stackblitz/stackblitz-writer.ts index 1dcd5c1c5bd5..8c7a4f5cb33a 100644 --- a/docs/src/app/shared/stackblitz/stackblitz-writer.ts +++ b/docs/src/app/shared/stackblitz/stackblitz-writer.ts @@ -39,7 +39,6 @@ const TEMPLATE_PATH = '/assets/stackblitz/'; * file from the boilerplate. */ export const TEMPLATE_FILES = [ - '.gitignore', '.stackblitzrc', 'angular.json', 'karma.conf.js', diff --git a/docs/src/assets/stackblitz/.gitignore b/docs/src/assets/stackblitz/.gitignore deleted file mode 100644 index 105c00f22e08..000000000000 --- a/docs/src/assets/stackblitz/.gitignore +++ /dev/null @@ -1,46 +0,0 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. - -# compiled output -/dist -/tmp -/out-tsc -# Only exists if Bazel was run -/bazel-out - -# dependencies -/node_modules - -# profiling files -chrome-profiler-events*.json - -# IDEs and editors -/.idea -.project -.classpath -.c9/ -*.launch -.settings/ -*.sublime-workspace - -# IDE - VSCode -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json -.history/* - -# misc -/.angular/cache -/.sass-cache -/connect.lock -/coverage -/libpeerconnection.log -npm-debug.log -yarn-error.log -testem.log -/typings - -# System Files -.DS_Store -Thumbs.db From cc870f39b95105cebca5d13e3de7e1c20409c980 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 3 Oct 2025 10:27:22 +0200 Subject: [PATCH 2/4] build: fix Stackblitz examples on Firefox The Stackblitz examples were hanging on the build step, because we had an import of `@angular/material` in the `styles.scss`. These changes switch to using a pre-built theme. Fixes #31823. Fixes #31973. Fixes #28934. --- docs/package.json | 2 +- .../shared/stackblitz/stackblitz-writer.ts | 2 +- docs/src/assets/stackblitz/angular.json | 14 ++++-------- docs/src/assets/stackblitz/src/styles.css | 10 +++++++++ docs/src/assets/stackblitz/src/styles.scss | 22 ------------------- pnpm-lock.yaml | 2 +- 6 files changed, 17 insertions(+), 35 deletions(-) create mode 100644 docs/src/assets/stackblitz/src/styles.css delete mode 100644 docs/src/assets/stackblitz/src/styles.scss diff --git a/docs/package.json b/docs/package.json index 9fe70f663905..ec9a6ddce954 100644 --- a/docs/package.json +++ b/docs/package.json @@ -46,7 +46,7 @@ "@angular/router": "catalog:", "@angular/ssr": "catalog:", "@angular/youtube-player": "workspace:*", - "@stackblitz/sdk": "^1.5.2", + "@stackblitz/sdk": "^1.11.0", "moment": "^2.29.1", "path-normalize": "^6.0.13", "rxjs": "catalog:", diff --git a/docs/src/app/shared/stackblitz/stackblitz-writer.ts b/docs/src/app/shared/stackblitz/stackblitz-writer.ts index 8c7a4f5cb33a..015225ff41f5 100644 --- a/docs/src/app/shared/stackblitz/stackblitz-writer.ts +++ b/docs/src/app/shared/stackblitz/stackblitz-writer.ts @@ -49,7 +49,7 @@ export const TEMPLATE_FILES = [ 'tsconfig.spec.json', 'src/index.html', 'src/main.ts', - 'src/styles.scss', + 'src/styles.css', 'src/test.ts', ]; diff --git a/docs/src/assets/stackblitz/angular.json b/docs/src/assets/stackblitz/angular.json index 1f72421563cf..50b3897f59a6 100644 --- a/docs/src/assets/stackblitz/angular.json +++ b/docs/src/assets/stackblitz/angular.json @@ -28,12 +28,9 @@ "browser": "src/main.ts", "polyfills": ["zone.js", "@angular/localize/init"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", + "inlineStyleLanguage": "css", "assets": ["src/assets"], - "styles": ["src/styles.scss"], - "stylePreprocessorOptions": { - "includePaths": ["node_modules/"] - }, + "styles": ["src/styles.css", "@angular/material/prebuilt-themes/azure-blue.css"], "scripts": [] }, "configurations": { @@ -92,12 +89,9 @@ "polyfills": ["zone.js", "zone.js/testing"], "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", - "inlineStyleLanguage": "scss", + "inlineStyleLanguage": "css", "assets": ["src/assets"], - "stylePreprocessorOptions": { - "includePaths": ["node_modules/"] - }, - "styles": ["src/styles.scss"], + "styles": ["src/styles.css", "@angular/material/prebuilt-themes/azure-blue.css"], "scripts": [] } } diff --git a/docs/src/assets/stackblitz/src/styles.css b/docs/src/assets/stackblitz/src/styles.css new file mode 100644 index 000000000000..0b9b177cade2 --- /dev/null +++ b/docs/src/assets/stackblitz/src/styles.css @@ -0,0 +1,10 @@ +body { + font-family: Roboto, 'Helvetica Neue', sans-serif; + margin: 0; + padding: 30px; + height: 100%; +} + +html { + height: 100%; +} diff --git a/docs/src/assets/stackblitz/src/styles.scss b/docs/src/assets/stackblitz/src/styles.scss deleted file mode 100644 index 125bc0b99e3f..000000000000 --- a/docs/src/assets/stackblitz/src/styles.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use '@angular/material' as mat; - -body { - font-family: Roboto, 'Helvetica Neue', sans-serif; - margin: 0; - padding: 30px; - height: 100%; - - @include mat.theme(( - color: ( - theme-type: light, - primary: mat.$azure-palette, - tertiary: mat.$blue-palette, - ), - typography: Roboto, - density: 0, - )); -} - -html { - height: 100%; -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9920c3b441b9..238c45ce6e09 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -408,7 +408,7 @@ importers: specifier: workspace:* version: link:../src/youtube-player '@stackblitz/sdk': - specifier: ^1.5.2 + specifier: ^1.11.0 version: 1.11.0 moment: specifier: ^2.29.1 From 9f6a40098356098af78e080b7ccd7bb37c59e17c Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 3 Oct 2025 10:28:30 +0200 Subject: [PATCH 3/4] build: open correct file in Stackblitz editor The path for the file that Stackblitz should open in the editor was wrong which meant that it would open any random file. These changes correct the path. --- docs/src/app/shared/stackblitz/stackblitz-writer.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/docs/src/app/shared/stackblitz/stackblitz-writer.ts b/docs/src/app/shared/stackblitz/stackblitz-writer.ts index 015225ff41f5..8a0c3d48e8a1 100644 --- a/docs/src/app/shared/stackblitz/stackblitz-writer.ts +++ b/docs/src/app/shared/stackblitz/stackblitz-writer.ts @@ -53,9 +53,6 @@ export const TEMPLATE_FILES = [ 'src/test.ts', ]; -const PROJECT_TAGS = ['angular', 'material', 'cdk', 'web', 'example']; -const PROJECT_TEMPLATE = 'node'; - /** * Type describing an in-memory file dictionary, representing a * directory and its contents. @@ -82,7 +79,7 @@ export class StackBlitzWriter { // and the file requests can cause excessive change detections. return this._ngZone.runOutsideAngular(async () => { const files = await this._buildInMemoryFileDictionary(data, exampleId, isTest); - const exampleMainFile = `src/app/${data.indexFilename}`; + const exampleMainFile = `src/example/${data.indexFilename}`; return () => { this._openStackBlitz({ @@ -112,8 +109,8 @@ export class StackBlitzWriter { title, files, description, - template: PROJECT_TEMPLATE, - tags: PROJECT_TAGS, + template: 'node', + tags: ['angular', 'material', 'cdk', 'web', 'example'], }, {openFile}, ); From 26615c35959c50c5cafda04052ce56ccd960efcc Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sat, 4 Oct 2025 16:09:01 +0200 Subject: [PATCH 4/4] build: test-based Stackblitz examples not working Fixes that opening the testing examples wasn't actually running the tests. It seems like our approach using the `.stackblitzrc` file stopped working at some point. --- .../shared/stackblitz/stackblitz-writer.spec.ts | 3 ++- .../src/app/shared/stackblitz/stackblitz-writer.ts | 14 +++++++------- docs/src/assets/stackblitz/.stackblitzrc | 4 ---- 3 files changed, 9 insertions(+), 12 deletions(-) delete mode 100644 docs/src/assets/stackblitz/.stackblitzrc diff --git a/docs/src/app/shared/stackblitz/stackblitz-writer.spec.ts b/docs/src/app/shared/stackblitz/stackblitz-writer.spec.ts index 82ab6bb89225..772427a49b4f 100644 --- a/docs/src/app/shared/stackblitz/stackblitz-writer.spec.ts +++ b/docs/src/app/shared/stackblitz/stackblitz-writer.spec.ts @@ -113,7 +113,8 @@ describe('StackBlitzWriter', () => { expect(openProjectSpy).toHaveBeenCalledTimes(1); expect(openProjectSpy).toHaveBeenCalledWith(jasmine.objectContaining({files: expectedFiles}), { - openFile: 'src/app/test.ts', + openFile: 'src/example/test.ts', + startScript: 'start', }); })); }); diff --git a/docs/src/app/shared/stackblitz/stackblitz-writer.ts b/docs/src/app/shared/stackblitz/stackblitz-writer.ts index 8a0c3d48e8a1..c62142999dd1 100644 --- a/docs/src/app/shared/stackblitz/stackblitz-writer.ts +++ b/docs/src/app/shared/stackblitz/stackblitz-writer.ts @@ -39,7 +39,6 @@ const TEMPLATE_PATH = '/assets/stackblitz/'; * file from the boilerplate. */ export const TEMPLATE_FILES = [ - '.stackblitzrc', 'angular.json', 'karma.conf.js', 'package.json', @@ -87,6 +86,7 @@ export class StackBlitzWriter { title: `Angular Components - ${data.description}`, description: `${data.description}\n\nAuto-generated from: https://material.angular.dev`, openFile: exampleMainFile, + startScript: isTest ? 'test' : 'start', }); }; }); @@ -98,11 +98,13 @@ export class StackBlitzWriter { description, openFile, files, + startScript, }: { title: string; description: string; openFile: string; files: FileDictionary; + startScript: string; }): void { stackblitz.openProject( { @@ -112,7 +114,10 @@ export class StackBlitzWriter { template: 'node', tags: ['angular', 'material', 'cdk', 'web', 'example'], }, - {openFile}, + { + openFile, + startScript, + }, ); } @@ -199,11 +204,6 @@ export class StackBlitzWriter { fileContent = fileContent .replace(/material-docs-example/g, data.selectorName) .replace(/\${title}/g, data.description); - } else if (fileName === '.stackblitzrc') { - fileContent = fileContent.replace( - /\${startCommand}/, - isTest ? 'npm run test' : 'npm run start', - ); } else if (fileName === 'src/main.ts') { const mainComponentName = data.componentNames[0]; diff --git a/docs/src/assets/stackblitz/.stackblitzrc b/docs/src/assets/stackblitz/.stackblitzrc deleted file mode 100644 index 839f0a257f66..000000000000 --- a/docs/src/assets/stackblitz/.stackblitzrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "installDependencies": true, - "startCommand": "${startCommand}" -}