Merge pull request #3 from WTW-IM/scriptloader-helpers

Update: utilizing promises for loading scripts

Author: stevematney

.eslintrc.js

@@ -31,7 +31,7 @@ module.exports = {
   extends: baseExtends,
   ignorePatterns: ["dist/**/*"],
   env: { es6: true },
-  parserOptions: { ecmaVersion: 2017 },
+  parserOptions: { ecmaVersion: 2021, sourceType: "module" },
   overrides: [
     {
       files: ["src/**/*", "./index.ts", "./jest.config.ts"],
@@ -52,7 +52,7 @@ module.exports = {
       },
     },
     {
-      files: ["./*.js"],
+      files: ["./*.js", "./scriptloader-support/*.js"],
       env: { node: true },
     },
     {

package.json

@@ -3,9 +3,14 @@
   "version": "1.3.0",
   "description": "A React Component for reacting to scripts loading.",
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./scriptloader-support": "./dist/scriptloader-support/index.js"
+  },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "scriptloader-support"
   ],
   "scripts": {
     "test": "eslint --quiet . && tsc --noEmit --project ./tsconfig.json && jest",

scriptloader-support/index.d.ts

@@ -0,0 +1 @@
+export * from "../src/scriptloader-support";

scriptloader-support/index.js

@@ -0,0 +1,2 @@
+const exports = require("../dist/src/scriptloader-support");
+module.exports = exports;

src/hooks/useScriptLoader.ts

@@ -1,19 +1,5 @@
-import { useCallback, useEffect } from "react";
-
-import {
-  getFromWindowCache,
-  updateCachedScript,
-  CachedScript,
-  addScriptUpdater,
-  removeScriptUpdater,
-} from "../scriptCache";
-
-const getNewScript = (source: string): HTMLScriptElement => {
-  const newScript = document.createElement("script");
-  newScript.async = true;
-  newScript.setAttribute("src", source);
-  return newScript;
-};
+import { useCallback, useEffect, useRef } from "react";
+import { waitForScript } from "../scriptloader-support";
 
 export interface ScriptLoaderConfiguration {
   onSuccess: () => void;
@@ -25,105 +11,35 @@ export interface ScriptLoader {
   (config: ScriptLoaderConfiguration): void;
 }
 
-interface CachedScriptUpdater extends ScriptLoader {}
-
-const useCachedScriptUpdater: CachedScriptUpdater = ({
-  onSuccess,
-  onFailure,
-  source,
-}) => {
-  const updater = useCallback(
-    ({ loading, failed, failureEvent }: CachedScript) => {
-      if (!loading && !failed) {
-        onSuccess();
-      }
-      if (!loading && failed) {
-        onFailure(failureEvent);
-      }
-    },
-    [onSuccess, onFailure]
-  );
-
-  useEffect(() => {
-    addScriptUpdater(source, updater);
-    return () => removeScriptUpdater(source, updater);
-  }, [updater, source]);
-
-  useEffect(() => {
-    // run updater with already cached info
-    updater(getFromWindowCache(source));
-  }, [source, updater]);
-};
-
 const useScriptLoader: ScriptLoader = (config) => {
-  const { source } = config;
-  useCachedScriptUpdater(config);
-
-  const setupListeners = useCallback(
-    (scriptRef: HTMLScriptElement): (() => 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);
-
-      return removeListeners;
+  const {
+    source,
+    onSuccess,
+    onFailure = () => {
+      //noop
     },
-    [source]
+  } = config;
+  const isMounted = useRef(true);
+  useEffect(() => () => (isMounted.current = false));
+  const successFunc = useCallback(() => isMounted.current && onSuccess(), [
+    onSuccess,
+  ]);
+  const errorFunc = useCallback(
+    (err: ErrorEvent) => isMounted.current && onFailure(err),
+    [onFailure]
   );
 
   useEffect(() => {
-    let scriptRef = document.querySelector<HTMLScriptElement>(
-      `script[src="${source}"]`
-    );
-    const scriptExists = Boolean(scriptRef);
-
-    if (scriptExists) {
-      const cachedScriptInfo = getFromWindowCache(source);
-      if (!cachedScriptInfo.scriptCreated) {
-        // if we did not create the script, assume it has loaded
-        updateCachedScript(source, {
-          loading: false,
-          failed: false,
-        });
-        return;
+    const waitForSource = async () => {
+      try {
+        await waitForScript(source);
+        successFunc();
+      } catch (err) {
+        errorFunc(err as ErrorEvent);
       }
-
-      // if we are not loading, do nothing
-      if (!cachedScriptInfo.loading) return;
-
-      // if we are loading and we did create the script, listen
-      return setupListeners(scriptRef);
-    }
-
-    // if we did not create the script, create it
-    scriptRef = getNewScript(source);
-    updateCachedScript(source, { scriptCreated: true });
-    const removeListeners = setupListeners(scriptRef);
-    document.body.appendChild(scriptRef);
-
-    return removeListeners;
-  }, [source, setupListeners]);
+    };
+    void waitForSource();
+  }, [source, successFunc, errorFunc]);
 };
 
 export default useScriptLoader;

src/scriptloader-support/index.tsx

@@ -0,0 +1,95 @@
+import {
+  getFromWindowCache,
+  updateCachedScript,
+  CachedScript,
+  addScriptUpdater,
+  removeScriptUpdater,
+} 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);
+
+  return removeListeners;
+};
+
+export const waitForScript = (source: string): Promise<void> => {
+  let scriptRef = document.querySelector<HTMLScriptElement>(
+    `script[src="${source}"]`
+  );
+  const scriptExists = Boolean(scriptRef);
+  const scriptPromise = new Promise<void>((resolve, reject) => {
+    const updater = ({ loading, failed, failureEvent }: CachedScript) => {
+      if (!loading && !failed) {
+        resolve();
+        removeScriptUpdater(source, updater);
+      }
+      if (!loading && failed) {
+        reject(failureEvent);
+        removeScriptUpdater(source, updater);
+      }
+    };
+    addScriptUpdater(source, updater);
+    updater(getFromWindowCache(source));
+  });
+
+  if (scriptExists) {
+    const cachedScriptInfo = getFromWindowCache(source);
+    if (!cachedScriptInfo.scriptCreated) {
+      // if we did not create the script, assume it has loaded
+      updateCachedScript(source, {
+        loading: false,
+        failed: false,
+      });
+      return scriptPromise;
+    }
+
+    // if we are not loading, do nothing
+    if (!cachedScriptInfo.loading) return scriptPromise;
+
+    // if we are loading and we did create the script, listen
+    setupListeners(scriptRef, source);
+    return scriptPromise;
+  }
+
+  // if we did not create the script, create it
+  scriptRef = getNewScript(source);
+  updateCachedScript(source, { scriptCreated: true });
+  setupListeners(scriptRef, source);
+  document.body.appendChild(scriptRef);
+
+  return scriptPromise;
+};

tsconfig.json

@@ -11,7 +11,10 @@
     "module": "commonjs",
     "moduleResolution": "node",
     "target": "ES5",
-    "typeRoots": ["node_modules/@types"]
+    "typeRoots": ["node_modules/@types"],
+    "paths": {
+      "scriptloader-support/*": ["./src/scriptloader-support/*"]
+    }
   },
   "include": ["src", "./index.ts", "./jest.config.ts"]
 }