From d368fa2fa4721958fde276be5625460273ccd809 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Wed, 10 Mar 2021 21:53:25 +0200
Subject: [PATCH] fix(docs-infra): avoid unnecessarily loading Custom Elements
 ES5 shim (#41162)

The custom elements spec is not compatible with ES5 style classes. This
means ES2015 code compiled to ES5 will not work with a native
implementation of Custom Elements. To support browsers that natively
support Custom Elements but not ES2015 modules, we load
`@webcomponents/custom-elements/src/native-shim.js`, which minimally
augments the native implementation to be compatible with ES5 code.
(See [here][1] for more details.)

Previously, the shim was included in `polyfills.ts`, which meant it was
loaded in all browsers (even those supporting ES2015 modules and thus
not needing the shim).

This commit moves the shim from `polyfills.ts` to a `nomodule` script
tag in `index.html`. This will ensure that it is only loaded in browsers
that do not support ES2015 modules and thus do not needed the shim.

NOTE:
This commit also reduces size of the polyfills bundle by ~400B
(52609B --> 52215B).

[1]: https://www.npmjs.com/package/@webcomponents/custom-elements#es5-vs-es2015

PR Close #41162
---
 aio/angular.json                        | 10 ----------
 aio/ngsw-config.json                    |  2 ++
 aio/src/index.html                      | 12 ++++++++++++
 aio/src/polyfills.ts                    |  8 --------
 goldens/size-tracking/aio-payloads.json |  6 +++---
 5 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/aio/angular.json b/aio/angular.json
index 74fea74c3f..6a9bacc6a3 100644
--- a/aio/angular.json
+++ b/aio/angular.json
@@ -45,11 +45,6 @@
               "src/generated",
               "src/pwa-manifest.json",
               "src/google385281288605d160.html",
-              {
-                "glob": "custom-elements.min.js",
-                "input": "node_modules/@webcomponents/custom-elements",
-                "output": "/assets/js"
-              },
               {
                 "glob": "native-shim.js",
                 "input": "node_modules/@webcomponents/custom-elements/src",
@@ -157,11 +152,6 @@
               "src/generated",
               "src/pwa-manifest.json",
               "src/google385281288605d160.html",
-              {
-                "glob": "custom-elements.min.js",
-                "input": "node_modules/@webcomponents/custom-elements",
-                "output": "/assets/js"
-              },
               {
                 "glob": "native-shim.js",
                 "input": "node_modules/@webcomponents/custom-elements/src",
diff --git a/aio/ngsw-config.json b/aio/ngsw-config.json
index 4e9b552019..cfcd69c181 100644
--- a/aio/ngsw-config.json
+++ b/aio/ngsw-config.json
@@ -13,6 +13,7 @@
           "/assets/js/*.js",
           "/*.css",
           "/*.js",
+          "!/assets/js/native-shim.js",
           "!/*-es5*.js"
         ],
         "urls": [
@@ -39,6 +40,7 @@
       "resources": {
         "files": [
           "/assets/images/favicons/**",
+          "/assets/js/native-shim.js",
           "/*-es5*.js",
           "!/**/_unused/**"
         ]
diff --git a/aio/src/index.html b/aio/src/index.html
index d8c7b34674..884786ab03 100644
--- a/aio/src/index.html
+++ b/aio/src/index.html
@@ -108,6 +108,18 @@
       <b><i>This website requires JavaScript.</i></b>
     </h2>
   </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)
+  -->
+  <script src="assets/js/native-shim.js" nomodule></script>;
+
 </body>
 
 </html>
diff --git a/aio/src/polyfills.ts b/aio/src/polyfills.ts
index f9fc413d4c..ced2732a9c 100644
--- a/aio/src/polyfills.ts
+++ b/aio/src/polyfills.ts
@@ -65,11 +65,3 @@ import 'zone.js';  // Included with Angular CLI.
  */
 // Custom Elements polyfill. Required for browsers that do not natively support Custom Elements.
 import '@webcomponents/custom-elements';
-// 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)
-import '@webcomponents/custom-elements/src/native-shim';
diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json
index 18cd9550d2..8bec747595 100755
--- a/goldens/size-tracking/aio-payloads.json
+++ b/goldens/size-tracking/aio-payloads.json
@@ -4,7 +4,7 @@
       "uncompressed": {
         "runtime-es2015": 3033,
         "main-es2015": 450953,
-        "polyfills-es2015": 52343
+        "polyfills-es2015": 52215
       }
     }
   },
@@ -13,7 +13,7 @@
       "uncompressed": {
         "runtime-es2015": 3033,
         "main-es2015": 451402,
-        "polyfills-es2015": 52493
+        "polyfills-es2015": 52215
       }
     }
   },
@@ -22,7 +22,7 @@
       "uncompressed": {
         "runtime-es2015": 3153,
         "main-es2015": 437005,
-        "polyfills-es2015": 52493
+        "polyfills-es2015": 52215
       }
     }
   }