build: update dependencies and add script to optimize scene images

- update to Angular 11.2.5 for faster rebuild times
- update puppeteer, typescript, light-server, karma, firebase-tools, rxjs, zone.js
- update stackblitz dependencies as well
- update lighthouse and skipped HTTPS audits based on
  angular/angular@2cd66ee
- use imagemin with pngquant to optimize the PNG images generated for the component scenes
  - Annie used pngquant to do this once in 7/20 and this tries to match those quality settings and sizes
- fix warning about SpecReporter's displayStacktrace option
- reduce audit perf min since we see 28 sometimes in CI
- switch to the new Firebase emulators since `firebase serve` is deprecated

Author: Splaktar

.gitignore

@@ -41,6 +41,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 firebase-debug.log
+ui-debug.log
 .firebase/
 /typings
 

firebase.json

@@ -87,5 +87,14 @@
       "tmp",
       "deploy"
     ]
+  },
+  "emulators": {
+    "hosting": {
+      "port": 4200
+    },
+    "ui": {
+      "enabled": true,
+      "port": 4202
+    }
   }
 }

package.json

@@ -9,21 +9,21 @@
     "start:jit": "ng serve --aot=false",
     "start:prod": "ng serve --prod",
     "start:scenes": "ng serve scenes",
-    "start:static": "firebase serve --only hosting --port 4200",
+    "start:emulators": "firebase emulators:start",
     "lint": "ng lint",
     "test": "ng test",
-    "pree2e": "webdriver-manager update",
     "e2e": "ng e2e",
-    "generate-scenes": "ng e2e --port 4201 scenes",
     "build": "ng build",
     "build:scenes": "ng build scenes",
     "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 --properties es2015 browser module main --first-only --create-ivy-entry-points",
+    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
     "publish-prod": "bash ./tools/deploy.sh stable prod",
     "publish-dev": "bash ./tools/deploy.sh",
     "publish-beta": "bash ./tools/deploy.sh stable beta",
+    "scenes:generate": "ng e2e --port 4201 scenes && yarn scenes:optimize",
+    "scenes:optimize": "node tools/optimize-scene-screenshots",
     "test:audit:a11y": "node tools/audit-docs-a11y",
     "test:audit:a11y:localhost": "run-p --race \"~~light-server -s dist/material-angular-io -p 4200 --quiet\" \"test:audit:a11y http://localhost:4200\" --",
     "test:audit:a11y:ci": "run-p --race \"~~light-server -s ../dist/material-angular-io -p 4200 --quiet\" \"test:audit:a11y http://localhost:4200\" --",
@@ -34,55 +34,58 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^11.1.2",
+    "@angular/animations": "^11.2.5",
     "@angular/cdk": "^11.2.4",
     "@angular/cdk-experimental": "^11.2.4",
-    "@angular/common": "^11.1.2",
-    "@angular/compiler": "^11.1.2",
+    "@angular/common": "^11.2.5",
+    "@angular/compiler": "^11.2.5",
     "@angular/components-examples": "angular/material2-docs-content#11.2.x",
-    "@angular/core": "^11.1.2",
-    "@angular/forms": "^11.1.2",
+    "@angular/core": "^11.2.5",
+    "@angular/forms": "^11.2.5",
     "@angular/google-maps": "^11.2.4",
     "@angular/material": "^11.2.4",
     "@angular/material-experimental": "^11.2.4",
     "@angular/material-moment-adapter": "^11.2.4",
-    "@angular/platform-browser": "^11.1.2",
-    "@angular/platform-browser-dynamic": "^11.1.2",
-    "@angular/router": "^11.1.2",
+    "@angular/platform-browser": "^11.2.5",
+    "@angular/platform-browser-dynamic": "^11.2.5",
+    "@angular/router": "^11.2.5",
     "@angular/youtube-player": "^11.2.4",
     "material-components-web": "10.0.0-canary.2ed2d829b.0",
     "moment": "^2.29.1",
-    "rxjs": "^6.6.3",
+    "rxjs": "^6.6.6",
     "tslib": "^2.1.0",
-    "zone.js": "^0.11.3"
+    "zone.js": "^0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1101.4",
-    "@angular/cli": "^11.1.4",
-    "@angular/compiler-cli": "^11.1.2",
-    "@angular/localize": "^11.1.2",
-    "@types/jasmine": "^3.6.0",
-    "@types/node": "^12.19.12",
+    "@angular-devkit/build-angular": "^0.1102.4",
+    "@angular/cli": "^11.2.4",
+    "@angular/compiler-cli": "^11.2.5",
+    "@angular/localize": "^11.2.5",
+    "@types/imagemin": "^7.0.0",
+    "@types/jasmine": "^3.6.6",
+    "@types/node": "^12.20.5",
     "@types/shelljs": "~0.8.8",
     "codelyzer": "^6.0.1",
-    "firebase-tools": "^9.2.1",
+    "firebase-tools": "^9.6.0",
+    "imagemin": "^7.0.1",
+    "imagemin-pngquant": "^9.0.2",
     "jasmine-core": "^3.6.0",
-    "jasmine-spec-reporter": "^5.0.2",
-    "karma": "~5.2.1",
+    "jasmine-spec-reporter": "^6.0.0",
+    "karma": "~6.2.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-firefox-launcher": "^2.1.0",
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.5.4",
-    "light-server": "^2.6.2",
-    "lighthouse": "~7.0.0",
+    "light-server": "^2.9.1",
+    "lighthouse": "~7.2.0",
     "lighthouse-logger": "~1.2.0",
     "npm-run-all": "^4.1.5",
     "protractor": "^7.0.0",
-    "puppeteer": "5.4.1",
+    "puppeteer": "~8.0.0",
     "shelljs": "^0.8.4",
     "ts-node": "^8.10.2",
     "tslint": "^6.1.3",
-    "typescript": "4.1.2"
+    "typescript": "~4.1.5"
   }
 }

scenes/e2e/protractor.conf.js

@@ -2,6 +2,7 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
+const { StacktraceOption } = require('jasmine-spec-reporter/built/configuration');
 const { SpecReporter } = require('jasmine-spec-reporter');
 
 /**
@@ -27,6 +28,6 @@ exports.config = {
     require('ts-node').register({
       project: require('path').join(__dirname, './tsconfig.json')
     });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: StacktraceOption.PRETTY } }));
   }
-};
+};

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

@@ -73,9 +73,9 @@ const dependencies = {
   '@angular/router': angularVersion,
   'angular-in-memory-web-api': '~0.11.0',
   'moment': '^2.29.1',
-  'rxjs': '^6.6.3',
+  'rxjs': '^6.6.6',
   'tslib': '^2.1.0',
-  'zone.js': '^0.11.3',
+  'zone.js': '^0.11.4',
 };
 
 const testDependencies = {
@@ -90,13 +90,13 @@ const testDependencies = {
   '@angular/platform-browser': angularVersion,
   '@angular/platform-browser-dynamic': angularVersion,
   '@angular/router': angularVersion,
-  '@types/jasmine': '^3.6.0',
+  '@types/jasmine': '^3.6.6',
   'angular-in-memory-web-api': '~0.11.0',
   'jasmine-core': '^3.6.0',
   'moment': '^2.29.1',
-  'rxjs': '^6.6.3',
+  'rxjs': '^6.6.6',
   'tslib': '^2.1.0',
-  'zone.js': '^0.11.3',
+  'zone.js': '^0.11.4',
 };
 
 /**

src/assets/screenshots/autocomplete.scene.png

@@ -24,20 +24,20 @@
     "@angular/router": "^11.0.0",
     "angular-in-memory-web-api": "~0.11.0",
     "moment": "^2.29.1",
-    "rxjs": "^6.6.3",
-    "tslib": "^2.0.3",
-    "zone.js": "^0.11.2"
+    "rxjs": "^6.6.6",
+    "tslib": "^2.1.0",
+    "zone.js": "^0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1101.0",
-    "@angular/cli": "^11.1.0",
+    "@angular-devkit/build-angular": "^0.1102.4",
+    "@angular/cli": "^11.2.4",
     "@angular/compiler-cli": "^11.0.0",
     "@angular/language-service": "^11.0.0",
     "@angular/localize": "^11.0.0",
-    "@types/node": "^12.19.12",
+    "@types/node": "^12.20.5",
     "codelyzer": "^6.0.1",
     "ts-node": "^8.10.2",
     "tslint": "~6.1.3",
-    "typescript": "~4.1.2"
+    "typescript": "~4.1.5"
   }
 }

src/assets/screenshots/badge.scene.png

@@ -32,7 +32,7 @@ const MIN_SCORES_PER_PAGE = [
     url: '',
     minScores: {
       'pwa': 70,
-      'performance': 30,
+      'performance': 28,
       'seo': 98,
       'best-practices': 100,
       'accessibility': 100

src/assets/screenshots/bottom-sheet.scene.png

@@ -17,7 +17,7 @@ const LIGHTHOUSE_FLAGS = {
   logLevel : process.env.CI ? 'error' : 'info'
 }; // Be less verbose on CI.
 const SKIPPED_HTTPS_AUDITS = [
-  'redirects-http', 'uses-http2', 'uses-long-cache-ttl', 'canonical', 'uses-text-compression'
+  'uses-long-cache-ttl', 'canonical', 'uses-text-compression'
 ];
 const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer';
 const WAIT_FOR_SW_DELAY = 5000;

src/assets/screenshots/button-toggle.scene.png

@@ -0,0 +1,25 @@
+#!/bin/env node
+'use strict';
+
+const imagemin = require('imagemin');
+const imageminPngquant = require('imagemin-pngquant');
+
+/**
+ * Runs imagemin with pngquant to optimize the PNG images generated for the component scenes.
+ *
+ * Usage:
+ * ```sh
+ * node tools/optimize-scene-screenshots
+ * ```
+ */
+
+// Imports
+const sh = require('shelljs');
+sh.set('-e');
+
+imagemin(['src/assets/screenshots/*.png'], {
+  destination: 'src/assets/screenshots',
+  plugins: [imageminPngquant({quality: [0.4, 0.6]})]
+})
+.then(() => console.log('Optimization complete.'))
+.catch(error => console.error);