fix(useScriptTag): unload should remove script tag (vitest-dev#1114)

chaii3 · Dec 31, 2021 · 970fe23 · 970fe23
1 parent cb1654b
commit 970fe23
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 3 deletions.
diff --git a/packages/core/useScriptTag/index.test.ts b/packages/core/useScriptTag/index.test.ts
@@ -27,6 +27,33 @@ describe('useScriptTag', () => {
  expect(scriptTagElement()).toBeInstanceOf(HTMLScriptElement)
  })
 
+ it('should re-use the same src for multiple loads', async() => {
+ const addChildListener = vitest.spyOn(document.head, 'appendChild')
+
+ expect(addChildListener).not.toBeCalled()
+
+ expect(scriptTagElement()).toBeNull()
+
+ const vm = useSetup(() => {
+ const script1 = useScriptTag(src, () => {}, { immediate: false, manual: true })
+ const script2 = useScriptTag(src, () => {}, { immediate: false, manual: true })
+
+ return {
+ script1,
+ script2,
+ }
+ })
+
+ await vm.script1.load(false)
+ await vm.script2.load(false)
+
+ expect(vm.script1.scriptTag.value).not.toBeNull()
+ expect(vm.script2.scriptTag.value).not.toBeNull()
+
+ expect(addChildListener).toBeCalledTimes(1)
+ expect(scriptTagElement()).toBeInstanceOf(HTMLScriptElement)
+ })
+
  it('should remove script tag on unmount', async() => {
  const removeChildListener = vitest.spyOn(document.head, 'removeChild')
 
@@ -90,4 +117,36 @@ describe('useScriptTag', () => {
 
  expect(vm.scriptTag).toBeNull()
  })
+
+ it('should remove script tag on unload call after multiple loads', async() => {
+ const removeChildListener = vitest.spyOn(document.head, 'removeChild')
+
+ expect(removeChildListener).not.toBeCalled()
+
+ expect(scriptTagElement()).toBeNull()
+
+ const vm = useSetup(() => {
+ const script1 = useScriptTag(src, () => {}, { immediate: false, manual: true })
+ const script2 = useScriptTag(src, () => {}, { immediate: false, manual: true })
+
+ return {
+ script1,
+ script2,
+ }
+ })
+
+ // Multiple Loads
+ await vm.script1.load(false)
+ await vm.script2.load(false)
+
+ expect(scriptTagElement()).toBeInstanceOf(HTMLScriptElement)
+
+ vm.script1.unload()
+ vm.script2.unload()
+
+ expect(vm.script1.scriptTag.value).toBeNull()
+ expect(vm.script2.scriptTag.value).toBeNull()
+ expect(removeChildListener).toBeCalledTimes(1)
+ expect(scriptTagElement()).toBeNull()
+ })
 })
diff --git a/packages/core/useScriptTag/index.ts b/packages/core/useScriptTag/index.ts
@@ -156,10 +156,12 @@ export function useScriptTag(
 
  _promise = null
 
- if (scriptTag.value) {
- document.head.removeChild(scriptTag.value)
+ if (scriptTag.value)
  scriptTag.value = null
- }
+
+ const el = document.querySelector(`script[src="${src}"]`) as HTMLScriptElement
+ if (el)
+ document.head.removeChild(el)
  }
 
  if (immediate && !manual)