feat: add expiresIn app config for local storage caching

playground/nuxt.config.ts

@@ -1,5 +1,11 @@
 export default defineNuxtConfig({
-  modules: ['../src/module'],
-  nuxtTwemoji: {},
+  modules: ['nuxt-twemoji'],
+  twemoji: {
+
+  },
   devtools: { enabled: true },
+  compatibilityDate: '2024-07-14',
+  imports: {
+    autoImport: true,
+  },
 })

playground/package.json

@@ -8,6 +8,7 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
-    "nuxt": "latest"
+    "nuxt": "latest",
+    "nuxt-twemoji": "latest"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - "playground"

src/module.ts

@@ -1,16 +1,21 @@
 import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit'
+import { schema } from './schema'
+import type { ModuleOptions } from './types'
 
-export interface ModuleOptions {}
+export type { ModuleOptions }
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: 'nuxt-twemoji',
-    configKey: 'nuxtTwemoji',
+    configKey: 'twemoji',
     compatibility: {
       nuxt: '>=3.0.0',
     },
   },
-  setup() {
+  defaults: {
+    expiresIn: schema['expiresIn'].$default,
+  },
+  setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
     addComponent({
       name: 'Twemoji',
@@ -27,5 +32,23 @@ export default defineNuxtModule<ModuleOptions>({
       global: true,
       filePath: resolve('./runtime/components/TwemojiParse.vue'),
     })
+
+    // Merge options to app.config
+    const runtimeOptions = Object.fromEntries(
+      Object.entries(options)
+        .filter(([key]) => key in schema),
+    )
+    nuxt.options.appConfig.twemoji = Object.assign(
+      nuxt.options.appConfig.twemoji || {},
+      runtimeOptions,
+    )
+    // Define types
+    nuxt.hook('schema:extend', (schemas) => {
+      schemas.push({
+        appConfig: {
+          twemoji: schema,
+        },
+      })
+    })
   },
 })

src/runtime/components/Twemoji.vue

@@ -1,8 +1,9 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
 import { ref, computed, defineComponent, h, watch } from 'vue'
+import type { NuxtTwemojiRuntimeOptions } from '../../types'
 import type { EmojiDefinition } from './../assets/emojis'
-import { useState } from '#imports'
+import { useState, useAppConfig } from '#imports'
 
 const props = defineProps({
   emoji: {
@@ -98,6 +99,23 @@ const component = computed (() => {
 
 const loadSVG = async () => {
   if (svgTwemojis.value[parsed.value] || !isValid.value) return
+
+  if (import.meta.client) {
+    const { expiresIn } = useAppConfig().twemoji as NuxtTwemojiRuntimeOptions
+    const expiry = localStorage.getItem(`twemoji-expiry`)
+    if (!expiresIn || Date.now() > Number(expiry)) {
+      console.log(expiresIn)
+      localStorage.removeItem(`twemoji-${parsed.value}`)
+      localStorage.setItem(`twemoji-expiry`, String(Date.now() + expiresIn * 1000)) // expires after 1 year
+    }
+
+    const cached = localStorage.getItem(`twemoji-${parsed.value}`)
+    if (cached) {
+      svgTwemojis.value[parsed.value] = { body: cached }
+      return
+    }
+  }
+
   isFetching.value = true
   let svgFetch = await fetchSVG()
   isFetching.value = false
@@ -113,6 +131,10 @@ const loadSVG = async () => {
 
   const svgBody = svgFetch.replace(/<\/*svg[^>]*>/g, '')
   svgTwemojis.value[parsed.value] = { body: svgBody }
+
+  if (import.meta.client) {
+    localStorage.setItem(`twemoji-${parsed.value}`, svgBody)
+  }
 }
 
 watch(() => props, async () => {

src/schema.ts

@@ -0,0 +1,10 @@
+export const schema = {
+  expiresIn: {
+    $default: 3.154e+7,
+    $schema: {
+      title: 'Default SVG cache expiration time',
+      description: 'Time in seconds for the SVG local storage cache to expire, defaults to 1 year',
+      tsType: 'number',
+    },
+  },
+}

src/types.ts

@@ -0,0 +1,15 @@
+export interface NuxtTwemojiRuntimeOptions {
+  /**
+   * Default SVG cache expiration time
+   *
+   * Time in seconds for the SVG local storage cache to expire, defaults to 1 year
+   *
+   * @default 3.154e+7
+   *
+   */
+  expiresIn: number
+}
+
+export interface ModuleOptions extends Partial<NuxtTwemojiRuntimeOptions> {
+  mode?: 'client' | 'server' | 'universal'
+}