rework the useScript hook

Author: Philipp Molitor

src/hooks/__tests__/useScript.test.tsx

@@ -44,7 +44,6 @@ describe('useScript()', () => {
     expect(state).toStrictEqual<ScriptStatus>('loading');
   });
 
-  // TODO
   it('is in "active" state when the "onload" event was triggered', async () => {
     const { result } = renderHook(() => useScript(scriptUrl));
 
@@ -61,6 +60,22 @@ describe('useScript()', () => {
     expect(result.current[0]).toStrictEqual<ScriptStatus>('active');
   });
 
+  it('is in "error" state when the "onerror" event was triggered', async () => {
+    const { result } = renderHook(() => useScript(scriptUrl));
+
+    expect(result.current[0]).toStrictEqual<ScriptStatus>('loading');
+
+    const element = document.querySelector(
+      `script[src="${scriptUrl}"]`
+    ) as HTMLScriptElement;
+
+    act(() => {
+      fireEvent.error(element);
+    });
+
+    expect(result.current[0]).toStrictEqual<ScriptStatus>('error');
+  });
+
   it('is in "unloaded" state when the source is removed', async () => {
     const { result } = renderHook(() => useScript(scriptUrl));
 
@@ -73,7 +88,7 @@ describe('useScript()', () => {
     expect(result.current[0]).toStrictEqual<ScriptStatus>('unloaded');
   });
 
-  it('creates a new script and discards the old one when changing the source URL', async () => {
+  it('reuses the old script tag when changing the source URL', async () => {
     const newUrl = 'https://test.com/loader.js';
     const { result } = renderHook(() => useScript(scriptUrl));
 
@@ -88,12 +103,11 @@ describe('useScript()', () => {
       result.current[1](newUrl);
     });
 
-    expect(result.current[0]).toStrictEqual<ScriptStatus>('loading');
-    expect(element).not.toBeInTheDocument();
-
     const newElement = document.querySelector(
       `script[src="${newUrl}"]`
     ) as HTMLScriptElement;
+
+    expect(element).not.toBeInTheDocument();
     expect(newElement).toBeInTheDocument();
   });
 
@@ -114,4 +128,56 @@ describe('useScript()', () => {
     expect(result.current[0]).toStrictEqual<ScriptStatus>('loading');
     expect(element).toBeInTheDocument();
   });
+
+  it('handles an existing script', async () => {
+    const script = document.createElement('script');
+    script.src = scriptUrl;
+    document.body.appendChild(script);
+
+    const { result } = renderHook(() => useScript(scriptUrl));
+
+    const element = document.querySelector(
+      `script[src="${scriptUrl}"]`
+    ) as HTMLScriptElement;
+
+    expect(result.current[0]).toStrictEqual<ScriptStatus>('loading');
+    expect(element.src).toStrictEqual(scriptUrl);
+
+    act(() => {
+      result.current[1](scriptUrl);
+    });
+
+    expect(result.current[0]).toStrictEqual<ScriptStatus>('loading');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('removes the <script> tag when setting the source to undefined', async () => {
+    const { result } = renderHook(() => useScript(scriptUrl));
+
+    const element = document.querySelector(
+      `script[src="${scriptUrl}"]`
+    ) as HTMLScriptElement;
+
+    expect(element).toBeInTheDocument();
+
+    act(() => {
+      result.current[1]();
+    });
+
+    expect(element).not.toBeInTheDocument();
+  });
+
+  it('removes the <script> tag on unmount', async () => {
+    const { unmount } = renderHook(() => useScript(scriptUrl));
+
+    const element = document.querySelector(
+      `script[src="${scriptUrl}"]`
+    ) as HTMLScriptElement;
+
+    expect(element).toBeInTheDocument();
+
+    unmount();
+
+    expect(element).not.toBeInTheDocument();
+  });
 });

src/hooks/useScript.ts

@@ -11,13 +11,6 @@ export type UseScriptValue = [
 
 export type ScriptStatus = 'unloaded' | 'loading' | 'active' | 'error';
 
-function setScriptDataAttribute(
-  script: HTMLScriptElement | undefined,
-  status: ScriptStatus
-) {
-  script?.setAttribute('data-state', status);
-}
-
 export const useScript = (src?: string): UseScriptValue => {
   const [source, setSource] = useState<string | undefined>(src);
   const [scriptState, setScriptState] = useState<ScriptStatus>(
@@ -26,55 +19,37 @@ export const useScript = (src?: string): UseScriptValue => {
 
   // on state change
   useEffect(() => {
-    // get a reference to the script element
-    let script = document.querySelector(`script[src="${src}"]`) as
+    let script = document.querySelector(`script[src="${source}"]`) as
       | HTMLScriptElement
       | undefined;
 
-    // unload the script
     if (!source) {
       setScriptState('unloaded');
-      if (script) script.remove();
       return;
     }
 
     // if script is not in DOM yet, add it
-    if (!script) {
+    if (source && !script) {
       script = document.createElement('script');
       script.src = source;
       script.async = true;
-      setScriptDataAttribute(script, 'loading');
 
-      // callback on script load/error to update the script data attribute
-      const setAttributeCallback = (event: Event) => {
-        setScriptDataAttribute(
-          script,
+      // callback on script load/error to update the hooks state
+      const setStateCallback = (event: Event) => {
+        setScriptState(
           (event.type as keyof HTMLElementEventMap) === 'load'
             ? 'active'
             : 'error'
         );
       };
 
-      // attach callback to event handlers
-      script.addEventListener('load', setAttributeCallback);
-      script.addEventListener('error', setAttributeCallback);
+      script.addEventListener('load', setStateCallback);
+      script.addEventListener('error', setStateCallback);
 
       // attach the script to the DOM
       document.body.appendChild(script);
     }
 
-    // callback on script load/error to update the hooks state
-    const setStateCallback = (event: Event) => {
-      setScriptState(
-        (event.type as keyof HTMLElementEventMap) === 'load'
-          ? 'active'
-          : 'error'
-      );
-    };
-
-    script.addEventListener('load', setStateCallback);
-    script.addEventListener('error', setStateCallback);
-
     // eslint-disable-next-line consistent-return
     return () => {
       if (script) script.remove();