docs: site perf updates (#532)

QwikDev · May 25, 2022 · 1cc7c16 · 1cc7c16
1 parent 9cb517c
commit 1cc7c16
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 141 deletions.
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@builder.io/partytown": "^0.5.4",
-    "@builder.io/qwik": "0.0.20-8",
+    "@builder.io/qwik": "0.0.20",
     "@builder.io/qwik-city": "0.0.6",
     "@cloudflare/kv-asset-handler": "0.2.0",
     "@cloudflare/workers-types": "^3.10.0",

diff --git a/packages/docs/public/repl/repl-server.html b/packages/docs/public/repl/repl-server.html
@@ -25,105 +25,124 @@
     </style>
   </head>
   <body>
-    <script type="module">
-      const clientId = location.hash.split('#')[1];
+    <script>
+      (() => {
+        const clientId = location.hash.split('#')[1];
 
-      const updateApp = (result) => {
-        const iframe = document.createElement('iframe');
-        iframe.classList.add('loading');
-        iframe.src = `/repl/${result.clientId}/`;
-        iframe.dataset.buildId = result.buildId;
+        const updateApp = (result) => {
+          const iframe = document.createElement('iframe');
+          iframe.classList.add('loading');
+          iframe.src = `/repl/${result.clientId}/`;
+          iframe.dataset.buildId = result.buildId;
 
-        iframe.addEventListener('load', () => {
-          if (!iframe.nextElementSibling) {
-            // last iframe is the active one, others before it should get removed
-            iframe.classList.remove('loading');
-            const iframes = iframe.parentElement.querySelectorAll('iframe');
-            for (let i = iframes.length - 1; i >= 0; i--) {
-              const otherIframe = iframes[i];
-              if (otherIframe !== iframe) {
-                otherIframe.remove();
+          iframe.addEventListener('load', () => {
+            if (!iframe.nextElementSibling) {
+              // last iframe is the active one, others before it should get removed
+              iframe.classList.remove('loading');
+              const iframes = iframe.parentElement.querySelectorAll('iframe');
+              for (let i = iframes.length - 1; i >= 0; i--) {
+                const otherIframe = iframes[i];
+                if (otherIframe !== iframe) {
+                  otherIframe.remove();
+                }
               }
             }
-          }
-        });
+          });
 
-        document.body.appendChild(iframe);
-      };
+          document.body.appendChild(iframe);
+        };
 
-      let swRegistration = null;
+        let swRegistration = null;
 
-      const receiveMessageFromMainApp = (ev) => {
-        if (swRegistration && swRegistration.active) {
-          try {
-            if (ev.data) {
-              swRegistration.active.postMessage(ev.data);
+        const receiveMessageFromMainApp = (ev) => {
+          if (swRegistration && swRegistration.active) {
+            try {
+              if (ev.data) {
+                swRegistration.active.postMessage(ev.data);
+              }
+            } catch (e) {
+              console.error('receiveMessageFromMainApp', e, ev.data);
             }
-          } catch (e) {
-            console.error('receiveMessageFromMainApp', e, ev.data);
           }
-        }
-      };
-
-      const sendMessageToMain = (msg) => {
-        if (window.parent !== window && msg.clientId === clientId) {
-          window.parent.postMessage(msg, '*');
-        }
-      };
+        };
 
-      const receiveMessageFromSw = (ev) => {
-        const msg = ev.data;
-        if (msg) {
-          sendMessageToMain(msg);
-          if (msg.type === 'result') {
-            updateApp(msg);
+        const sendMessageToMain = (msg) => {
+          if (window.parent !== window && msg.clientId === clientId) {
+            window.parent.postMessage(msg, '*');
           }
-        }
-      };
+        };
 
-      const receiveMessageFromUserApp = (ev) => {
-        if (ev.data) {
-          const msg = JSON.parse(ev.data);
-          if (msg?.type === 'event') {
+        const receiveMessageFromSw = (ev) => {
+          const msg = ev.data;
+          if (msg) {
             sendMessageToMain(msg);
+            if (msg.type === 'result') {
+              updateApp(msg);
+            }
           }
-        }
-      };
+        };
 
-      const replReady = () => {
-        console.debug(`Qwik REPL server "${clientId}" ready`);
-        navigator.serviceWorker.addEventListener('message', receiveMessageFromSw);
-        window.addEventListener('message', receiveMessageFromUserApp);
-        sendMessageToMain({ type: 'replready', clientId: clientId });
-      };
+        const receiveMessageFromUserApp = (ev) => {
+          if (ev.data) {
+            const msg = JSON.parse(ev.data);
+            if (msg?.type === 'event') {
+              sendMessageToMain(msg);
+            }
+          }
+        };
+
+        let loadTmr = null;
+
+        const replReady = () => {
+          clearTimeout(loadTmr);
+          console.debug(`Qwik REPL server "${clientId}" ready`);
+          navigator.serviceWorker.addEventListener('message', receiveMessageFromSw);
+          window.addEventListener('message', receiveMessageFromUserApp);
+          sendMessageToMain({ type: 'replready', clientId: clientId });
+        };
 
-      if (clientId) {
-        navigator.serviceWorker
-          .register('/repl/repl-sw.js', {
-            scope: '/repl/',
-          })
-          .then(
-            (reg) => {
-              swRegistration = reg;
-              if (swRegistration.active) {
-                replReady();
-              } else if (swRegistration.installing) {
-                swRegistration.installing.addEventListener('statechange', (ev) => {
-                  if (ev.target.state == 'activated') {
-                    replReady();
-                  }
-                });
+        if (clientId) {
+          loadTmr = setTimeout(() => {
+            console.error(`Qwik REPL server "${clientId}" has not initialized`);
+          }, 10000);
+
+          navigator.serviceWorker
+            .register('/repl/repl-sw.js', {
+              scope: '/repl/',
+            })
+            .then(
+              (reg) => {
+                swRegistration = reg;
+                if (swRegistration.active) {
+                  console.debug(
+                    `Qwik REPL server "${clientId}" service worker registration active`
+                  );
+                  replReady();
+                } else if (swRegistration.installing) {
+                  swRegistration.installing.addEventListener('statechange', (ev) => {
+                    if (ev.target.state == 'activated') {
+                      replReady();
+                    } else {
+                      console.debug(
+                        `Qwik REPL server "${clientId}" statechange: ${ev.target.state}`
+                      );
+                    }
+                  });
+                }
+              },
+              (err) => {
+                console.error(
+                  `Qwik REPL Server "${clientId}" service worker registration failed:`,
+                  err
+                );
               }
-            },
-            (err) => {
-              console.error('Repl Service worker registration failed:', err);
-            }
-          );
+            );
 
-        window.addEventListener('message', receiveMessageFromMainApp);
-      } else {
-        console.error('Qwik REPL server missing client id');
-      }
+          window.addEventListener('message', receiveMessageFromMainApp);
+        } else {
+          console.error('Qwik REPL server missing client id');
+        }
+      })();
     </script>
   </body>
 </html>
diff --git a/packages/docs/src/components/head/head.tsx b/packages/docs/src/components/head/head.tsx
@@ -7,6 +7,9 @@ export const Head = () => (
     <title>Qwik</title>
     <meta name="viewport" content="width=device-width" />
 
+    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net/" />
+    <link rel="dns-prefetch" href="https://cdn.builder.io/" />
+
     <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
     <link rel="icon" href="/favicons/favicon.svg" type="image/svg+xml" />
 
@@ -50,11 +53,10 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     />
 
     <script
-      src="//cdn.jsdelivr.net/npm/@builder.io/persist-attribution@latest/dist/persist-attribution.min.js"
+      type="text/partytown"
+      src="https://cdn.jsdelivr.net/npm/@builder.io/[email protected]/dist/persist-attribution.min.js"
       id="persist-attribution-init"
       data-send-page-view-events="true"
-      async
-      defer
     />
   </>
 );
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
@@ -44,21 +44,21 @@ export const Header = component$(
                 <span>Docs</span>
               </a>
             </li>
-            {/* <li>
+            <li>
               <a href="/examples/introduction/hello-world" onClickQrl={closeMenu}>
                 <span>Examples</span>
               </a>
-            </li> */}
+            </li>
             {/* <li>
               <a href="/tutorial/introduction/basics" onClickQrl={closeMenu}>
                 <span>Tutorial</span>
               </a>
             </li> */}
-            {/* <li>
+            <li>
               <a href="/playground" onClickQrl={closeMenu}>
                 <span>Playground</span>
               </a>
-            </li> */}
+            </li>
             <li>
               <a href="https://github.com/BuilderIO/qwik" target="_blank" onClickQrl={closeMenu}>
                 <span class="md:hidden">Github</span>

diff --git a/packages/docs/src/components/repl/repl-options.tsx b/packages/docs/src/components/repl/repl-options.tsx
@@ -2,7 +2,7 @@ import type { ReplAppInput } from './types';
 
 export const ReplOptions = ({ input, versions }: ReplOptionsProps) => {
   return (
-    <div class="output-detail detail-options" key="options">
+    <div class="output-detail detail-options">
       <StoreOption
         label="Entry Strategy"
         inputProp="entryStrategy"

diff --git a/packages/docs/src/components/repl/repl-version.ts b/packages/docs/src/components/repl/repl-version.ts
@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
+
 export const getReplVersion = async (version: string | undefined) => {
   let versions: string[] = [];
   let npmData: NpmData | null = null;
@@ -6,14 +8,17 @@ export const getReplVersion = async (version: string | undefined) => {
     npmData = JSON.parse(localStorage.getItem(NPM_STORAGE_KEY)!);
     if (isExpiredNpmData(npmData)) {
       // fetch most recent NPM version data
+      console.debug(`Qwik REPL, fetch npm data: ${QWIK_NPM_DATA}`);
       const npmRsp = await fetch(QWIK_NPM_DATA);
       npmData = await npmRsp.json();
       npmData!.timestamp = Date.now();
 
       localStorage.setItem(NPM_STORAGE_KEY, JSON.stringify(npmData));
+    } else {
+      console.debug(`Qwik REPL, using cached npm data`);
     }
   } catch (e) {
-    console.warn(e);
+    console.warn('getReplVersion', e);
   }
 
   if (npmData && Array.isArray(npmData.versions)) {
@@ -22,6 +27,7 @@ export const getReplVersion = async (version: string | undefined) => {
         return true;
       }
       if (npmData?.tags.latest === v || npmData?.tags.next === v) {
+        // always include "latest" and "next" tags
         return true;
       }
       if (v.includes('-')) {
@@ -34,7 +40,7 @@ export const getReplVersion = async (version: string | undefined) => {
         return false;
       }
       if (isNaN(parts[2] as any)) {
-        // last part must have letters in it
+        // last part cannot have letters in it
         return false;
       }
       // mini-semver check, must be >= than 0.0.20
@@ -53,10 +59,24 @@ export const getReplVersion = async (version: string | undefined) => {
       } else if (versions.includes(npmData.tags.next)) {
         // fallback to "next" if "latset" isn't valid
         version = npmData.tags.next;
+      } else {
+        version = versions[0];
       }
     }
   }
 
+  if (!npmData) {
+    console.debug(`Qwik REPL, npm data not found`);
+  }
+
+  if (!Array.isArray(versions) || versions.length === 0) {
+    console.debug(`Qwik REPL, versions not found`);
+  }
+
+  if (!version) {
+    console.debug(`Qwik REPL, version not found`);
+  }
+
   return { version, versions };
 };
 

diff --git a/packages/docs/src/components/repl/repl.tsx b/packages/docs/src/components/repl/repl.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import {
   component$,
   Host,
@@ -85,6 +86,8 @@ export const Repl = component$(async (props: ReplProps) => {
       store.serverUrl = `/repl/repl-server.html#${store.clientId}`;
 
       window.addEventListener('message', (ev) => receiveMessageFromReplServer(ev, store));
+    } else {
+      console.debug(`Qwik REPL version not set`);
     }
   });