Refactor: moving script generation into scriptCache

Author: stevematney

src/scriptCache.ts

@@ -94,3 +94,59 @@ export function removeScriptUpdater(
     (currentUpdater) => currentUpdater !== updater
   );
 }
+
+const getNewScript = (source: string): HTMLScriptElement => {
+  const newScript = document.createElement("script");
+  newScript.async = true;
+  newScript.setAttribute("src", source);
+  return newScript;
+};
+
+const setupListeners = (scriptRef: HTMLScriptElement, source: string): void => {
+  const removeListeners = () => {
+    scriptRef.removeEventListener("load", loadEvent);
+    scriptRef.removeEventListener("error", errorEvent);
+  };
+
+  const generateScriptEventListener = (
+    getResultingCachedScript: (ev: Event) => Partial<CachedScript>
+  ) => (ev: Event) => {
+    updateCachedScript(source, getResultingCachedScript(ev));
+    removeListeners();
+  };
+
+  const loadEvent = generateScriptEventListener(() => ({
+    loading: false,
+    failed: false,
+  }));
+
+  const errorEvent = generateScriptEventListener((err: ErrorEvent) => ({
+    loading: false,
+    failed: true,
+    failureEvent: err,
+  }));
+
+  scriptRef.addEventListener("load", loadEvent);
+  scriptRef.addEventListener("error", errorEvent);
+};
+
+export function retrieveCachedScript(source: string): CachedScript {
+  return document.querySelector<HTMLScriptElement>(`script[src="${source}"]`)
+    ? (() => {
+        const cachedScriptInfo = getFromWindowCache(source);
+        // if we did not create the script, assume it has loaded
+        if (!cachedScriptInfo.scriptCreated)
+          return updateCachedScript(source, {
+            loading: false,
+            failed: false,
+          });
+
+        return cachedScriptInfo;
+      })()
+    : (() => {
+        const newRef = getNewScript(source);
+        setupListeners(newRef, source);
+        document.body.appendChild(newRef);
+        return updateCachedScript(source, { scriptCreated: true });
+      })();
+}

src/scriptloader-support/index.tsx

@@ -1,46 +1,10 @@
 import {
-  getFromWindowCache,
-  updateCachedScript,
   CachedScript,
   addScriptUpdater,
   removeScriptUpdater,
+  retrieveCachedScript,
 } from "../scriptCache";
 
-const getNewScript = (source: string): HTMLScriptElement => {
-  const newScript = document.createElement("script");
-  newScript.async = true;
-  newScript.setAttribute("src", source);
-  return newScript;
-};
-
-const setupListeners = (scriptRef: HTMLScriptElement, source: string): void => {
-  const removeListeners = () => {
-    scriptRef.removeEventListener("load", loadEvent);
-    scriptRef.removeEventListener("error", errorEvent);
-  };
-
-  const generateScriptEventListener = (
-    getResultingCachedScript: (ev: Event) => Partial<CachedScript>
-  ) => (ev: Event) => {
-    updateCachedScript(source, getResultingCachedScript(ev));
-    removeListeners();
-  };
-
-  const loadEvent = generateScriptEventListener(() => ({
-    loading: false,
-    failed: false,
-  }));
-
-  const errorEvent = generateScriptEventListener((err: ErrorEvent) => ({
-    loading: false,
-    failed: true,
-    failureEvent: err,
-  }));
-
-  scriptRef.addEventListener("load", loadEvent);
-  scriptRef.addEventListener("error", errorEvent);
-};
-
 export const waitForScript = (source: string): Promise<void> =>
   new Promise<void>((resolve, reject) => {
     const updater = ({ loading, failed, failureEvent }: CachedScript) => {
@@ -53,36 +17,11 @@ export const waitForScript = (source: string): Promise<void> =>
         removeScriptUpdater(source, updater);
       }
     };
-    const handleExistingScript = (ref) => {
-      const cachedScriptInfo = getFromWindowCache(source);
-      if (!cachedScriptInfo.scriptCreated) {
-        // if we did not create the script, assume it has loaded
-        updater(
-          updateCachedScript(source, {
-            loading: false,
-            failed: false,
-          })
-        );
-      } else if (!cachedScriptInfo.loading) {
-        updater(cachedScriptInfo);
-      } else {
-        addScriptUpdater(source, updater);
-      }
-    };
-    const handleNewScript = () => {
-      const newRef = getNewScript(source);
-      updater(updateCachedScript(source, { scriptCreated: true }));
-      addScriptUpdater(source, updater);
-      setupListeners(newRef, source);
-      document.body.appendChild(newRef);
-    };
-    const scriptRef = document.querySelector<HTMLScriptElement>(
-      `script[src="${source}"]`
-    );
+    const cachedScriptInfo = retrieveCachedScript(source);
 
-    if (scriptRef) {
-      handleExistingScript(scriptRef);
+    if (!cachedScriptInfo.loading) {
+      updater(cachedScriptInfo);
     } else {
-      handleNewScript();
+      addScriptUpdater(source, updater);
     }
   });