From a569e7427b7688887452ef85e2033b287fcd79ae Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Sun, 21 May 2023 19:32:28 +0200
Subject: [PATCH] feat: twemoji component for nuxt

- Nuxt 3 ready
- Get emoji by character
- Get emoji by codepoint
- SVG rendering by default
- Insert as PNG image fetched from the jsdelivr CDN
---
 src/module.ts                      | 21 +++++++++
 src/runtime/components/Twemoji.vue | 74 ++++++++++++++++++++++++++++++
 2 files changed, 95 insertions(+)
 create mode 100644 src/module.ts
 create mode 100644 src/runtime/components/Twemoji.vue

diff --git a/src/module.ts b/src/module.ts
new file mode 100644
index 0000000..d1d9ca5
--- /dev/null
+++ b/src/module.ts
@@ -0,0 +1,21 @@
+import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit'
+
+export interface ModuleOptions {}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: 'nuxt-twemoji',
+    configKey: 'nuxtTwemoji',
+    compatibility: {
+      nuxt: '^3.0.0'
+    }
+  },
+  setup () {
+    const { resolve } = createResolver(import.meta.url)
+    addComponent({
+      name: 'Twemoji',
+      global: true,
+      filePath: resolve('./runtime/components/Twemoji.vue')
+    })
+  }
+})
diff --git a/src/runtime/components/Twemoji.vue b/src/runtime/components/Twemoji.vue
new file mode 100644
index 0000000..62eefaf
--- /dev/null
+++ b/src/runtime/components/Twemoji.vue
@@ -0,0 +1,74 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script setup>
+import { ref, computed, defineComponent, h, watchEffect } from 'vue'
+import twemoji from 'twemoji'
+import { version } from 'twemoji/package.json'
+import { useState } from '#imports'
+
+const props = defineProps({
+  emoji: {
+    type: String,
+    required: true
+  },
+  size: {
+    type: String,
+    default: '1em'
+  },
+  png: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const isHex = computed(() => (/^[0-9A-Fa-f]{1,6}(-[0-9A-Fa-f]{1,6})?$/i).test(props.emoji.replace(/u\+/ig, '')))
+
+const components = useState('components', () => ({}))
+const codePoint = useState('codepPoint', () => ({}))
+const isFetching = ref(false)
+
+const parsed =  computed(() => isHex.value ? props.emoji.toLowerCase().replace(/u\+/ig, '') : twemoji.convert.toCodePoint(props.emoji))
+codePoint.value[parsed.value] = parsed.value
+console.log(props.emoji.toLowerCase());
+const cdn = 'https://cdn.jsdelivr.net/gh/twitter/twemoji'
+const emojiLinkPNG = computed(() => `${cdn}@${version}/assets/72x72/${codePoint.value[parsed.value]}.png`)
+
+const emojiLinkSVG = computed(() => `${cdn}@${version}/assets/svg/${codePoint.value[parsed.value]}.svg`)
+const fetchSVG = () => $fetch(emojiLinkSVG.value).then(async (res) => await res.text()).catch(() => undefined)
+
+const component = computed(() => defineComponent(components.value[parsed.value]))
+
+const loadSVG = async () => {
+  isFetching.value = true
+  let svg = await fetchSVG()
+  isFetching.value = false
+  const split = parsed.value.split('-')
+  while (!svg && split.length > 1) {
+    split.pop()
+    codePoint.value[parsed.value] = split.join('-')
+    svg = await fetchSVG()
+  }
+  if (!svg) return
+  components.value[parsed.value] = h('svg', {
+    class: 'twemoji',
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 36 36',
+    innerHTML: svg.replace(/<svg[^>]*>/, '').replace(/<\/svg>/, '')
+  })
+}
+watchEffect(() => codePoint.value, loadSVG)
+!props.png && await loadSVG()
+</script>
+
+<template>
+  <span v-if="isFetching" />
+  <img v-else-if="png" class="twemoji" :src="emojiLinkPNG" :alt="emoji" :style="{ width: size, height: size }">
+  <Component :is="component" v-else-if="component" :width="size" :height="size" />
+  <span v-else>{{ isHex ? emoji : null }}</span>
+</template>
+
+<style>
+.twemoji {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>