fix: fix watchEffect

Yizack · Jun 19, 2023 · a39b984 · a39b984
1 parent 5e397a6
commit a39b984
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/src/runtime/components/Twemoji.vue b/src/runtime/components/Twemoji.vue
@@ -124,7 +124,10 @@ const loadSVG = async () => {
     body: svgFetch.replace(/<\/*svg[^>]*>/g, '')
   }
 }
-watchEffect(() => codePoint.value)
+watchEffect(async () => {
+  codePoint.value[parsed.value] = parsed.value
+  !props.png && await loadSVG()
+});
 
 !props.png && await loadSVG()
 </script>

diff --git a/src/runtime/components/Twemojify.vue b/src/runtime/components/Twemojify.vue
@@ -18,27 +18,34 @@ const props = defineProps({
 const twemojify = useState(`twemojify:${props.png ? 'png' : 'svg'}`, () => ({}) as { [key: string]: string })
 const parsedText = ref(props.text)
 
-const emojis = parse(props.text, { assetType: props.png ? 'png' : 'svg' })
 
-for (const { url, indices, text } of emojis) {
-  if (twemojify.value[text]) {
+const loadTwemojify = async () => {
+  const emojis = parse(props.text, { assetType: props.png ? 'png' : 'svg' })
+  for (const { url, indices, text } of emojis) {
+    if (twemojify.value[text]) {
+      parsedText.value = parsedText.value.replace(props.text.slice(...indices), twemojify.value[text])
+      continue
+    }
+
+    if (props.png) {
+      twemojify.value[text] = `<img src="${url}" class="twemojify" />`
+    }
+    else {
+      const svgFetch = await $fetch(url).then(async (res: any) => await res.text()).catch(() => '')
+      const svgBody = svgFetch.replace(/<\/*svg[^>]*>/g, '')
+      const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="twemojify">${svgBody}</svg>`
+      twemojify.value[text] = svg
+    }
     parsedText.value = parsedText.value.replace(props.text.slice(...indices), twemojify.value[text])
-    continue
-  }
-  
-  if (props.png) {
-    twemojify.value[text] = `<img src="${url}" class="twemojify" />`
-  }
-  else {
-    const svgFetch = await $fetch(url).then(async (res: any) => await res.text()).catch(() => '')
-    const svgBody = svgFetch.replace(/<\/*svg[^>]*>/g, '')
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="twemojify">${svgBody}</svg>`
-    twemojify.value[text] = svg
   }
-  parsedText.value = parsedText.value.replace(props.text.slice(...indices), twemojify.value[text])
-}
+};
+
+watchEffect(async () => {
+  parsedText.value = props.text
+  await loadTwemojify()
+});
 
-watchEffect(() => parsedText.value)
+await loadTwemojify()
 </script>
 
 <!-- eslint-disable vue/no-v-html -->