Update link and script tags

edgio-docs · Jul 9, 2024 · a56eb89 · a56eb89
1 parent f41d433
commit a56eb89
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/examples/polyfill_io-replace/edge-functions/main.js b/examples/polyfill_io-replace/edge-functions/main.js
@@ -6,17 +6,34 @@ export async function handleHttpRequest(request, context) {
     '//polyfill.io',
   ];
 
-  const transformerDefinitions = srcPrefixes.map((prefix) => ({
-    selector: `script[src^="${prefix}"]`,
-    element: async (el) => {
-      const src = el.get_attribute('src');
-      el.set_attribute('src', src.replace(prefix, baseReplacementUrl));
+  const transformerDefinitions = srcPrefixes.flatMap((prefix) => [
+    // Replace the polyfill.io script tag(s) with the new CDN URL
+    {
+      selector: `script[src^="${prefix}"]`,
+      element: async (el) => {
+        const src = el.get_attribute('src');
+        el.set_attribute(
+          'src',
+          src.replace(prefix, `${baseReplacementUrl}/polyfill`)
+        );
+      },
     },
-  }));
+
+    // Replace the polyfill.io link tag(s) with the new CDN URL
+    {
+      selector: `link[href^="${prefix}"]`,
+      element: async (el) => {
+        const src = el.get_attribute('href');
+        el.set_attribute('href', src.replace(prefix, baseReplacementUrl));
+      },
+    },
+  ]);
 
   // Get the HTML from static test file and stream the response body through the HtmlTransformer
-  return fetch('/polyfill.io-usage', { edgio: { origin: 'edgio_self' } }).then(
-    (response) => HtmlTransformer.stream(transformerDefinitions, response)
+  return fetch('/polyfill.io-example', {
+    edgio: { origin: 'edgio_self' },
+  }).then((response) =>
+    HtmlTransformer.stream(transformerDefinitions, response)
   );
 
   // Use the following code to serve the original content from your origin server

diff --git a/examples/polyfill_io-replace/public/polyfill.io.html b/examples/polyfill_io-replace/public/polyfill.io.html
@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sample Page with Polyfill.io</title>
 
-    <!-- Polyfill assets -->
+    <!-- Polyfill.io assets -->
+    <link rel="preconnect" href="https://polyfill.io" />
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
     <script src="http://polyfill.io/v3/polyfill.min.js?features=es6"></script>
     <script src="//polyfill.io/v3/polyfill.min.js?features=Array.prototype.includes"></script>

diff --git a/examples/polyfill_io-replace/routes.js b/examples/polyfill_io-replace/routes.js
@@ -9,7 +9,7 @@ export default new Router()
   })
 
   // Serve a static HTML file that includes the polyfill.io script tags
-  .match('/polyfill.io-usage', ({ serveStatic }) => {
+  .match('/polyfill.io-example', ({ serveStatic }) => {
     serveStatic('public/polyfill.io.html');
   })