From 8c939dcb40ea12dfa8c3e5de0cb04d33f0a1e6f4 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Thu, 11 Mar 2021 13:42:35 +0200
Subject: [PATCH] fix(docs-infra): fix angular.io on browsers that support
 Custom Elements but not ES2015 (#41183)

Before #41162, angular.io was broken on IE 11 due to missing a polyfill
for an API (`Reflect.construct()`) needed by the Custom Elements ES5
shim. #41162 tried to fix this by loading the necessary polyfill
(`es.reflect.construct.js`) on browsers that do not support ES2015
modules (including IE 11).

It turns out that the fix in #41162 was itself broken, because the
`es.reflect.consruct.js` script (included directly in the page via a
`<script>` tag) was in CommonJS format (which cannot run in the browser
as is). By chance, this still allowed browsers that supported neither
Custom Elements nor ES2015 modules (such as IE 11) to work correctly as
a side-effect of loading the `@webcomponents/custom-elements` polyfill
after the Custom Elements ES5 shim (`native-shim.js`). However, on the
few browsers that natively support Custom Elements but not ES2015
modules, angular.io would still be broken.

This commit correctly fixes angular.io on all browsers by properly
bundling the polyfills and transpiling to ES5.

Implementation-wise, we use [esbuild][1] for bundling the polyfills (and
converting from CommonJS to a browser-compatible, IIFE-based format) and
[swc][2] for downleveling the code to ES5 (since `esbuild` only supports
ES2015+).

[1]: https://esbuild.github.io/
[2]: https://swc.rs/

PR Close #41183
---
 aio/angular.json                         |  24 +----
 aio/ngsw-config.json                     |   5 +-
 aio/package.json                         |   5 ++
 aio/src/custom-elements-es5-polyfills.js |  15 ++++
 aio/src/index.html                       |  18 ++--
 aio/yarn.lock                            | 108 ++++++++++++++++++++++-
 6 files changed, 137 insertions(+), 38 deletions(-)
 create mode 100644 aio/src/custom-elements-es5-polyfills.js

diff --git a/aio/angular.json b/aio/angular.json
index 4940d34a23..7799e38f68 100644
--- a/aio/angular.json
+++ b/aio/angular.json
@@ -44,17 +44,7 @@
               "src/assets",
               "src/generated",
               "src/pwa-manifest.json",
-              "src/google385281288605d160.html",
-              {
-                "glob": "native-shim.js",
-                "input": "node_modules/@webcomponents/custom-elements/src",
-                "output": "/assets/js"
-              },
-              {
-                "glob": "es.reflect.construct.js",
-                "input": "node_modules/core-js/modules",
-                "output": "/assets/js"
-              }
+              "src/google385281288605d160.html"
             ],
             "styles": [
               "src/styles/main.scss"
@@ -156,17 +146,7 @@
               "src/assets",
               "src/generated",
               "src/pwa-manifest.json",
-              "src/google385281288605d160.html",
-              {
-                "glob": "native-shim.js",
-                "input": "node_modules/@webcomponents/custom-elements/src",
-                "output": "/assets/js"
-              },
-              {
-                "glob": "es.reflect.construct.js",
-                "input": "node_modules/core-js/modules",
-                "output": "/assets/js"
-              }
+              "src/google385281288605d160.html"
             ],
             "styles": [
               "src/styles/main.scss"
diff --git a/aio/ngsw-config.json b/aio/ngsw-config.json
index 15ff26a591..ce6c12bfaf 100644
--- a/aio/ngsw-config.json
+++ b/aio/ngsw-config.json
@@ -13,8 +13,6 @@
           "/assets/js/*.js",
           "/*.css",
           "/*.js",
-          "!/assets/js/es.reflect.construct.js",
-          "!/assets/js/native-shim.js",
           "!/*-es5*.js"
         ],
         "urls": [
@@ -41,8 +39,7 @@
       "resources": {
         "files": [
           "/assets/images/favicons/**",
-          "/assets/js/es.reflect.construct.js",
-          "/assets/js/native-shim.js",
+          "/generated/js/custom-elements-es5-polyfills.js",
           "/*-es5*.js",
           "!/**/_unused/**"
         ]
diff --git a/aio/package.json b/aio/package.json
index ecf325e6eb..92e37538c9 100644
--- a/aio/package.json
+++ b/aio/package.json
@@ -77,8 +77,10 @@
     "~~audit-web-app": "node scripts/audit-web-app",
     "~~check-env": "node scripts/check-environment",
     "~~clean-generated": "node --eval \"require('shelljs').rm('-rf', 'src/generated')\"",
+    "pre~~build": "yarn ~~build-ce-es5-polyfills",
     "~~build": "ng build --configuration=stable",
     "post~~build": "yarn build-404-page",
+    "~~build-ce-es5-polyfills": "esbuild src/custom-elements-es5-polyfills.js --bundle --minify | swc --config=minify=true --filename=custom-elements-es5-polyfills.js --out-file=src/generated/js/custom-elements-es5-polyfills.js --no-swcrc",
     "~~light-server": "light-server --bind=localhost --historyindex=/index.html --no-reload"
   },
   "//engines-comment": "Keep this in sync with /package.json and /aio/tools/examples/shared/package.json",
@@ -109,6 +111,8 @@
     "@angular-devkit/build-angular": "0.1102.2",
     "@angular/cli": "11.2.2",
     "@angular/compiler-cli": "11.2.3",
+    "@swc/cli": "^0.1.35",
+    "@swc/core": "^1.2.50",
     "@types/jasmine": "~3.6.0",
     "@types/lunr": "^2.3.2",
     "@types/node": "^12.7.9",
@@ -124,6 +128,7 @@
     "dgeni": "^0.4.13",
     "dgeni-packages": "^0.28.4",
     "entities": "^1.1.1",
+    "esbuild": "^0.9.0",
     "eslint": "^3.19.0",
     "eslint-plugin-jasmine": "^2.2.0",
     "find-free-port": "^2.0.0",
diff --git a/aio/src/custom-elements-es5-polyfills.js b/aio/src/custom-elements-es5-polyfills.js
new file mode 100644
index 0000000000..ed34c2c8ae
--- /dev/null
+++ b/aio/src/custom-elements-es5-polyfills.js
@@ -0,0 +1,15 @@
+/**
+ * Custom Elements polyfills for browsers that natively support Custom Elements but not ES2015
+ * modules.
+ *
+ * NOTE:
+ * Chrome, Firefox and Safari should not need these, because they added support for ES2015 modules
+ * before Custom Elements. It is still required for some other (less common) browsers:
+ *   - UC browser for android 11.8 (~3.5% global usage)
+ *   - Samsung browser 5.0-8.1 (~0.43% global usage)
+ *   - Opera 41-47 (~0.02% global usage)
+ */
+// @ts-nocheck
+
+require('core-js/modules/es.reflect.construct');  // Required by `native-shim.js`.
+require('@webcomponents/custom-elements/src/native-shim');
diff --git a/aio/src/index.html b/aio/src/index.html
index d1c727d45c..990b09bd90 100644
--- a/aio/src/index.html
+++ b/aio/src/index.html
@@ -110,16 +110,16 @@
   </noscript>
 
   <!--
-    Custom Element ES5 shim. Required for browsers that natively support Custom Elements, but do not
-    support ES2015 modules.
-    NOTE: Chrome, Firefox and Safari should not need this, because they added support for ES2015
-          modules before Custom Elements. It is still required for some other (less common) browsers:
-          - UC browser for android 11.8 (~3.5% global usage)
-          - Samsung browser 5.0-8.1 (~0.43% global usage)
-          - Opera 41-47 (~0.02% global usage)
+    Custom Elements polyfills required for browsers that natively support Custom Elements but not
+    ES2015 modules. (See `custom-elements-es5-polyfills.js` for more info.)
+
+    NOTE:
+    The polyfills here will be loaded before the ones in `polyfills.ts` (including
+    `@webcomponents/custom-elements`). This is fine, because the polyfills here are only needed on
+    browsers that natively support Custom Elements, on which `@webcomponents/custom-elements` will
+    be a no-op (so the order of loading does not matter).
   -->
-  <script src="assets/js/es.reflect.construct.js" nomodule></script>;
-  <script src="assets/js/native-shim.js" nomodule></script>;
+  <script src="generated/js/custom-elements-es5-polyfills.js" nomodule></script>
 
 </body>
 
diff --git a/aio/yarn.lock b/aio/yarn.lock
index c85a289324..98861aa78d 100644
--- a/aio/yarn.lock
+++ b/aio/yarn.lock
@@ -1603,6 +1603,11 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@napi-rs/triples@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@napi-rs/triples/-/triples-1.0.2.tgz#2ce4c6a78568358772008f564ee5009093d20a19"
+  integrity sha512-EL3SiX43m9poFSnhDx4d4fn9SSaqyO2rHsCNhETi9bWPmjXK3uPJ0QpPFtx39FEdHcz1vJmsiW41kqc0AgvtzQ==
+
 "@ngtools/webpack@11.2.2":
   version "11.2.2"
   resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-11.2.2.tgz#647862ed19761796c7f84d5fb3305661d2a3af67"
@@ -1612,6 +1617,14 @@
     enhanced-resolve "5.7.0"
     webpack-sources "2.2.0"
 
+"@node-rs/helper@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@node-rs/helper/-/helper-1.1.0.tgz#4fcbbebae3b81932d1ff3e431c7cd3886b504742"
+  integrity sha512-r43YnnrY5JNzDuXJdW3sBJrKzvejvFmFWbiItUEoBJsaPzOIWFMhXB7i5j4c9EMXcFfxveF4l7hT+rLmwtjrVQ==
+  dependencies:
+    "@napi-rs/triples" "^1.0.2"
+    tslib "^2.1.0"
+
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
@@ -1778,6 +1791,80 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
   integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==
 
+"@swc/cli@^0.1.35":
+  version "0.1.35"
+  resolved "https://registry.yarnpkg.com/@swc/cli/-/cli-0.1.35.tgz#e939fd374e889e3329ebdc48988e9e489d06f002"
+  integrity sha512-jjgfm8s+ueNAS8QaStpEXctn0O0AVfRR1vAocsFQyLysQkmbsnp8OyajaKgaLSUsdf4ZWlF8pKATPUPp869UEQ==
+  dependencies:
+    commander "^7.1.0"
+    convert-source-map "^1.6.0"
+    glob "^7.1.3"
+    lodash "^4.17.21"
+    slash "3.0.0"
+    source-map "^0.7.3"
+
+"@swc/core-android-arm64@^1.2.50":
+  version "1.2.50"
+  resolved "https://registry.yarnpkg.com/@swc/core-android-arm64/-/core-android-arm64-1.2.50.tgz#763e5ad1a899e2ff0a914c8ac8134e573d8dc733"
+  integrity sha512-aPJGhHqRkNncZnG5fCRhdX9JHGQ7SJBykm7ER/F6nNuvuSTYbuv4wGLYzNVi2UmeSMQQH/9j1D5xcX8STGIgsw==
+
+"@swc/core-darwin-arm64@^1.2.50":
+  version "1.2.50"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.2.50.tgz#1ed630edef1b8864d3793e4133988b7281511239"
+  integrity sha512-ginmLsDGswvaENSDxhevBpq63iKAxKtVS0P53b9KvfOhRDtQpnXMIxc3iYeyII8D2QDR0HOQu/c1n2b6sUIuBQ==
+
+"@swc/core-darwin-x64@^1.2.50":
+  version "1.2.50"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.2.50.tgz#2e794feb5071cf4e7e20cedde872f4dfb77cd031"
+  integrity sha512-HJ2CFuzxIXwoo22jHr1ntuveqoHN0hbY7mUTXaRLWh9468TMeGmD20rm7l9FnOsBVH9m9psHGpOVNOUSEXg6tw==
+
+"@swc/core-linux-arm-gnueabihf@^1.2.50":
+  version "1.2.50"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.2.50.tgz#c7b9e2b35c7d9997004d6138c1c8115e14744cb7"
+  integrity sha512-y1rsaqmbO/rezCifX30ilqTKaeN4yp0pDpHri6hAMKqHOzNGZTrY7p3nmiCd425gFVpM72gcGNrDqbt9IqeOPA==
+
+"@swc/core-linux-arm64-gnu@^1.2.50":
+  version "1.2.50"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.2.50.tgz#1f41ac1fae0438641773098f254c9e1d72563d1f"
+  integrity sha512-eh1xpvPNoXiZBrkKLoM1JDXAH5U7zK+kebC7lXsPjPuPVGENfknAoT3oQvyohWnE7pf1nOPBiDX7wOT4T2e1Pw==
+
+"@swc/core-linux-x64-gnu@^1.2.50":
+  version "1.2.50"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.2.50.tgz#57ca45b5b5e67a12ff90b5f50a23559be65840e6"
+  integrity sha512-2I5OX66FQejeiJ4fuPS18AQieVk6H8Z2LfOgCuDMK2ZRQdc3gBe1rYVhZyCGdYXQ76mUlo6+phSy5qI63d172Q==
+
+"@swc/core-linux-x64-musl@^1.2.50":
+  version "1.2.50"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.2.50.tgz#c9225ec94618e75a5260264db7cd3122930e68f1"
+  integrity sha512-370yPM7+8tzEdiV3Y+RzkzukRfYeDiOS6oRCtpTqGmfh9RUhxyKQFM/gYRi77Qpgq6LnvY1eUQh+WrioCAztXg==
+
+"@swc/core-win32-ia32-msvc@^1.2.50":
+  version "1.2.50"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.2.50.tgz#8aca2e009d49f2cff44fe924115104565ce59d5c"
+  integrity sha512-sQOXq79ge8Bv07rh1bHZwiH5qXg8do28HdzhI8/VaFAh3K+8zTqOdF9DuOlf0Z/sE23znbbQcp3Hz30+5jhgWg==
+
+"@swc/core-win32-x64-msvc@^1.2.50":
+  version "1.2.50"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.2.50.tgz#383ac624bdf0d7865013c6482392319afe2e8462"
+  integrity sha512-NmxSnkj7PYkN+e060tf0LR7knrdCzUobSmQrMwWlaC5dACHREFlo00mocL8AwB3WOZKvNp4MQv1cH3EaGbIpKw==
+
+"@swc/core@^1.2.50":
+  version "1.2.50"
+  resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.2.50.tgz#d70daed948c9bb0ba8084e804e7fb2b1fcf0e19c"
+  integrity sha512-v4geRnqPqNBOAhWIT0ntcbw09mOxNy5XaGp4Nulxefpdpr8QUxPa1/9fLRPAbYjojT8yiqDtcLdx+yk+stFhpA==
+  dependencies:
+    "@node-rs/helper" "^1.0.0"
+  optionalDependencies:
+    "@swc/core-android-arm64" "^1.2.50"
+    "@swc/core-darwin-arm64" "^1.2.50"
+    "@swc/core-darwin-x64" "^1.2.50"
+    "@swc/core-linux-arm-gnueabihf" "^1.2.50"
+    "@swc/core-linux-arm64-gnu" "^1.2.50"
+    "@swc/core-linux-x64-gnu" "^1.2.50"
+    "@swc/core-linux-x64-musl" "^1.2.50"
+    "@swc/core-win32-ia32-msvc" "^1.2.50"
+    "@swc/core-win32-x64-msvc" "^1.2.50"
+
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
@@ -3950,6 +4037,11 @@ commander@^4.0.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.1.0.tgz#f2eaecf131f10e36e07d894698226e36ae0eb5ff"
+  integrity sha512-pRxBna3MJe6HKnBGsDyMv8ETbptw3axEdYHoqNh7gu5oDcew8fs0xnivZGm06Ogk8zGAJ9VX+OPEr2GXEQK4dg==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -4113,7 +4205,7 @@ content-type@^1.0.4, content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@1.7.0, convert-source-map@^1.5.1, convert-source-map@^1.7.0:
+convert-source-map@1.7.0, convert-source-map@^1.5.1, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
   integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
@@ -5391,6 +5483,11 @@ es6-weak-map@^2.0.1, es6-weak-map@^2.0.2:
     es6-iterator "^2.0.3"
     es6-symbol "^3.1.1"
 
+esbuild@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.9.0.tgz#b8320df85048ed1637c6b59ee52abba248936d3c"
+  integrity sha512-IqYFO7ZKHf0y4uJpJfGqInmSRn8jMPMbyI1W0Y2PSjSjJcVP538tC8TleJAS4Y8QeqwajqBTwFKayWVzYlMIgg==
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -8708,6 +8805,11 @@ lodash@^4.17.19:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
@@ -12337,7 +12439,7 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
-slash@^3.0.0:
+slash@3.0.0, slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
@@ -13490,7 +13592,7 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tslib@2.1.0:
+tslib@2.1.0, tslib@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
   integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==