fix: multiple Tweet component (#1309) (#1318)

slidevjs · Feb 21, 2024 · be807d4 · be807d4
1 parent 900b37c
commit be807d4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/packages/client/builtin/Tweet.vue b/packages/client/builtin/Tweet.vue
@@ -7,9 +7,9 @@ Usage:
 -->
 
 <script setup lang="ts">
-import { useScriptTag } from '@vueuse/core'
 import { getCurrentInstance, onMounted, ref } from 'vue'
 import { isDark } from '../logic/dark'
+import { useTweetScript } from '../composables/useTweetScript'
 
 const props = defineProps<{
   id: string | number
@@ -41,21 +41,10 @@ async function create() {
 }
 
 // @ts-expect-error global
-if (window?.twttr?.widgets) {
+if (window?.twttr?.widgets)
   onMounted(create)
-}
-else {
-  useScriptTag(
-    'https://platform.twitter.com/widgets.js',
-    () => {
-      if (vm.isMounted)
-        create()
-      else
-        onMounted(create, vm)
-    },
-    { async: true },
-  )
-}
+else
+  useTweetScript(vm, create)
 </script>
 
 <template>

diff --git a/packages/client/composables/useTweetScript.ts b/packages/client/composables/useTweetScript.ts
@@ -0,0 +1,17 @@
+import { createSharedComposable, useScriptTag } from '@vueuse/core'
+import type { ComponentInternalInstance } from 'vue'
+import { onMounted } from 'vue'
+
+export const useTweetScript = createSharedComposable(
+  (vm: ComponentInternalInstance, create: () => void) =>
+    useScriptTag(
+      'https://platform.twitter.com/widgets.js',
+      () => {
+        if (vm.isMounted)
+          create()
+        else
+          onMounted(create, vm)
+      },
+      { async: true },
+    ),
+)