From eb3888f2676ece9549bafe35d28bf345e84b51e5 Mon Sep 17 00:00:00 2001
From: motea927 <motea927@yahoo.com.tw>
Date: Sat, 17 Jun 2023 10:52:46 +0800
Subject: [PATCH 1/3] feat!: :boom: replace directive to plugin

BREAKING CHANGE: remove all directive
---
 packages/core/directive.ts | 57 -------------------------------
 packages/core/main.ts      |  2 +-
 packages/core/plugins.d.ts |  7 ++++
 packages/core/plugins.ts   | 70 ++++++++++++++++++++++++++++++++++++++
 packages/core/shared.ts    | 16 ++++-----
 playgrounds/App.vue        |  6 ++--
 playgrounds/main.ts        |  7 ++--
 plugins/i18n-html.ts       | 11 ++++++
 8 files changed, 101 insertions(+), 75 deletions(-)
 delete mode 100644 packages/core/directive.ts
 create mode 100644 packages/core/plugins.d.ts
 create mode 100644 packages/core/plugins.ts
 create mode 100644 plugins/i18n-html.ts

diff --git a/packages/core/directive.ts b/packages/core/directive.ts
deleted file mode 100644
index 014cc29..0000000
--- a/packages/core/directive.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { Directive } from 'vue'
-import { watchEffect } from 'vue'
-import type { BindingObj, Options } from './shared'
-import {
-  getDefaultString,
-  sanitizeHtml,
-  hasGlobalOptions,
-  setGlobalOptions,
-  handleDefaultString,
-  getBindingValue
-} from './shared'
-
-export type SafeHtmlDirective = Directive<
-  HTMLElement,
-  string | (() => string) | BindingObj
->
-
-const stopWatchMap = new WeakMap<HTMLElement, () => void>()
-
-export const vSafeHtml: SafeHtmlDirective = {
-  beforeMount(el, binding) {
-    const stopWatch = watchEffect(() => {
-      if (!binding.value) return
-
-      const bindingValue = getBindingValue(binding.value)
-      const defaultString =
-        typeof binding.value === 'string' || typeof binding.value === 'function'
-          ? getDefaultString()
-          : getDefaultString(binding.value.defaultString)
-      const sanitizeConfig =
-        typeof binding.value === 'string' || typeof binding.value === 'function'
-          ? undefined
-          : binding.value.sanitizeConfig
-
-      if (
-        handleDefaultString(el, bindingValue, defaultString, sanitizeConfig)
-      ) {
-        return
-      }
-
-      const sanitizeResult = sanitizeHtml(bindingValue, sanitizeConfig)
-      el.innerHTML = sanitizeResult
-    })
-    stopWatchMap.set(el, stopWatch)
-  },
-  beforeUnmount(el) {
-    stopWatchMap.get(el)?.()
-    stopWatchMap.delete(el)
-  }
-}
-
-export const createDirective = (options?: Options) => {
-  if (!hasGlobalOptions() && options) {
-    setGlobalOptions(options)
-  }
-  return vSafeHtml
-}
diff --git a/packages/core/main.ts b/packages/core/main.ts
index 19c3b43..f3dd176 100644
--- a/packages/core/main.ts
+++ b/packages/core/main.ts
@@ -1,3 +1,3 @@
 export { setGlobalOptions } from './shared'
-export { vSafeHtml, createDirective } from './directive'
 export { UseSafeHtml } from './components'
+export { createI18nHtml } from './plugins'
diff --git a/packages/core/plugins.d.ts b/packages/core/plugins.d.ts
new file mode 100644
index 0000000..e806d93
--- /dev/null
+++ b/packages/core/plugins.d.ts
@@ -0,0 +1,7 @@
+import type { $i18nHtml } from './plugins'
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $i18nHtml: typeof $i18nHtml
+  }
+}
diff --git a/packages/core/plugins.ts b/packages/core/plugins.ts
new file mode 100644
index 0000000..e7b88b7
--- /dev/null
+++ b/packages/core/plugins.ts
@@ -0,0 +1,70 @@
+import type { App } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { Options, BindingObj } from './shared'
+import {
+  setGlobalOptions,
+  getBindingValue,
+  getDefaultString,
+  handleDefaultString,
+  sanitizeHtml
+} from './shared'
+
+const generateHtml =
+  (getContentText: (binding: string | BindingObj) => string) =>
+  (binding: string | BindingObj): string => {
+    if (!binding) return ''
+
+    const contentText = getContentText(binding)
+    const defaultString =
+      typeof binding === 'string'
+        ? getDefaultString()
+        : getDefaultString(binding.defaultString)
+    const sanitizeConfig =
+      typeof binding === 'string' ? undefined : binding.sanitizeConfig
+
+    const defaultStringResult = handleDefaultString(
+      contentText,
+      defaultString,
+      sanitizeConfig
+    )
+
+    if (defaultStringResult !== false) {
+      return defaultStringResult
+    }
+
+    const sanitizeResult = sanitizeHtml(contentText, sanitizeConfig)
+
+    return sanitizeResult
+  }
+
+export const $safeHtml = generateHtml(getBindingValue)
+
+export const $i18nHtml = generateHtml((binding) => {
+  if (!useI18n) {
+    console.warn(`[mt-v-safe-html]: can not find vue-i18n`)
+    return ''
+  }
+  const { t } = useI18n()
+  const i18nContentKey = getBindingValue(binding)
+  return getBindingValue(() => t(i18nContentKey))
+})
+
+export const createSafeHtml = {
+  install: (app: App, options?: Options) => {
+    if (options) {
+      setGlobalOptions(options)
+    }
+
+    app.config.globalProperties.$safeHtml = $safeHtml
+  }
+}
+
+export const createI18nHtml = {
+  install: (app: App, options?: Options) => {
+    if (options) {
+      setGlobalOptions(options)
+    }
+
+    app.config.globalProperties.$i18nHtml = $i18nHtml
+  }
+}
diff --git a/packages/core/shared.ts b/packages/core/shared.ts
index 37d4aa9..3fbfcb3 100644
--- a/packages/core/shared.ts
+++ b/packages/core/shared.ts
@@ -1,5 +1,6 @@
 import DOMPurify from 'dompurify'
 import type { Config } from 'dompurify'
+import { ref } from 'vue'
 import { isValidate } from './validate'
 
 type SanitizeConfig = Config & {
@@ -16,41 +17,40 @@ export type BindingObj = {
   htmlString: string | (() => string)
 } & Options
 
-let globalOptions: Options | undefined
+const globalOptions = ref<Options | undefined>()
 
 export function getDefaultString(
   componentDefaultString?: string
 ): string | undefined {
-  return componentDefaultString ?? globalOptions?.defaultString
+  return componentDefaultString ?? globalOptions.value?.defaultString
 }
 
 const { sanitize } = DOMPurify
 export function sanitizeHtml(html: string, sanitizeConfig?: SanitizeConfig) {
-  const overrideSanitizeConfig = globalOptions?.sanitizeConfig || sanitizeConfig
+  const overrideSanitizeConfig =
+    globalOptions.value?.sanitizeConfig || sanitizeConfig
   return overrideSanitizeConfig
     ? sanitize(html, overrideSanitizeConfig)
     : sanitize(html)
 }
 
 export function setGlobalOptions(options: Options | undefined) {
-  globalOptions = options
+  globalOptions.value = options
 }
 
 export function hasGlobalOptions(): boolean {
-  return globalOptions !== undefined
+  return globalOptions.value !== undefined
 }
 
 // Handle default string
 export function handleDefaultString(
-  el: HTMLElement,
   bindingValue: string,
   defaultString: string | undefined,
   sanitizeConfig?: Options['sanitizeConfig']
 ) {
   if (defaultString && !isValidate(bindingValue)) {
     const sanitizeDefaultResult = sanitizeHtml(defaultString, sanitizeConfig)
-    el.innerHTML = sanitizeDefaultResult
-    return true
+    return sanitizeDefaultResult
   }
   return false
 }
diff --git a/playgrounds/App.vue b/playgrounds/App.vue
index 502a5ce..47e252c 100644
--- a/playgrounds/App.vue
+++ b/playgrounds/App.vue
@@ -35,13 +35,11 @@
 
     <div>
       <h2>components</h2>
-      <UseSafeHtml :html-string="inValidHtmlString" :as="'span'"></UseSafeHtml>
     </div>
 
     <div>
       <h2>i18n</h2>
-      <p v-html="$t('message')"></p>
-      <p v-safe-html="() => $t('message')"></p>
+      <p v-html="$i18nHtml('message')"></p>
       <button @click="handleClickChangeMessage">change message</button>
     </div>
   </div>
@@ -50,7 +48,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { UseSafeHtml } from '../dist/main'
+
 const inValidHtmlString = ref(`<div> invalid</div></div>`)
 const validHtmlString = ref(`<div> valid alert('valid');</div>`)
 const linkHtmlString = ref(
diff --git a/playgrounds/main.ts b/playgrounds/main.ts
index 291e87e..7c5444f 100644
--- a/playgrounds/main.ts
+++ b/playgrounds/main.ts
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
-import { createDirective } from '../dist/main'
+import { createI18nHtml } from '../dist/main'
 import App from './App.vue'
 
 const i18n = createI18n({
@@ -15,9 +15,6 @@ const i18n = createI18n({
 })
 
 createApp(App)
-  .directive(
-    'safe-html',
-    createDirective({ defaultString: 'globalDefaultString' })
-  )
   .use(i18n)
+  .use(createI18nHtml, { defaultString: 'globalDefaultString' })
   .mount('#app')
diff --git a/plugins/i18n-html.ts b/plugins/i18n-html.ts
new file mode 100644
index 0000000..6fba438
--- /dev/null
+++ b/plugins/i18n-html.ts
@@ -0,0 +1,11 @@
+import type { App } from 'vue'
+
+export const i18nHtml = {
+  install: (app: App, options) => {
+    app.config.globalProperties.$translate = (key: string) => {
+      // retrieve a nested property in `options`
+      // using `key` as the path
+      return `${key} plugin`
+    }
+  }
+}

From 266a00d4c1d3484714b1615b65d72036eb9a5f04 Mon Sep 17 00:00:00 2001
From: motea927 <motea927@yahoo.com.tw>
Date: Sat, 17 Jun 2023 16:18:25 +0800
Subject: [PATCH 2/3] feat: add plugins unit test

---
 packages/core/__tests__/directive.spec.ts | 149 --------------
 packages/core/__tests__/plugins.spec.ts   | 234 ++++++++++++++++++++++
 packages/core/main.ts                     |   2 +-
 packages/core/plugins.d.ts                |   3 +-
 playgrounds/App.vue                       |   2 +-
 playgrounds/main.ts                       |   4 +-
 6 files changed, 240 insertions(+), 154 deletions(-)
 delete mode 100644 packages/core/__tests__/directive.spec.ts
 create mode 100644 packages/core/__tests__/plugins.spec.ts

diff --git a/packages/core/__tests__/directive.spec.ts b/packages/core/__tests__/directive.spec.ts
deleted file mode 100644
index 0ad1dfa..0000000
--- a/packages/core/__tests__/directive.spec.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
-import { createDirective } from '../directive'
-import { setGlobalOptions } from '../shared'
-import type { Options, BindingObj } from '../shared'
-
-const mountGlobalElement = (
-  htmlString: string | (() => string) | BindingObj,
-  globalOptions?: Options
-) => {
-  const Component = {
-    template: '<div v-safe-html="htmlString"></div>'
-  }
-  const wrapper = shallowMount(Component, {
-    data: function () {
-      return {
-        htmlString
-      }
-    },
-    global: {
-      directives: {
-        'safe-html': createDirective(globalOptions)
-      }
-    }
-  })
-  return wrapper
-}
-
-beforeEach(() => {
-  setGlobalOptions(undefined)
-})
-
-describe('Global directive', () => {
-  describe('Basic Global directive htmlString can work', () => {
-    const htmlString = `<p>this is html</p>`
-
-    it('pure string params', () => {
-      const wrapper = mountGlobalElement(htmlString)
-      expect(wrapper.html()).toContain(htmlString)
-    })
-
-    it('function string params', () => {
-      const wrapper = mountGlobalElement(() => htmlString)
-      expect(wrapper.html()).toContain(htmlString)
-    })
-
-    it('obj params', () => {
-      const wrapper = mountGlobalElement({ htmlString })
-      expect(wrapper.html()).toContain(htmlString)
-    })
-  })
-
-  describe('Global default string can work', () => {
-    const notMatchHtmlString = '<div>something</div></div>'
-    const matchHtmlString = '<div>something</div>'
-    const defaultString = 'not match error'
-
-    it('pure string params', () => {
-      const errorWrapper = mountGlobalElement(notMatchHtmlString, {
-        defaultString
-      })
-      const correctWrapper = mountGlobalElement(matchHtmlString, {
-        defaultString
-      })
-
-      expect(errorWrapper.html()).toContain(defaultString)
-      expect(correctWrapper.html()).toContain(matchHtmlString)
-    })
-
-    it('function string params', () => {
-      const errorWrapper = mountGlobalElement(() => notMatchHtmlString, {
-        defaultString
-      })
-      const correctWrapper = mountGlobalElement(() => matchHtmlString, {
-        defaultString
-      })
-
-      expect(errorWrapper.html()).toContain(defaultString)
-      expect(correctWrapper.html()).toContain(matchHtmlString)
-    })
-
-    it('obj params', () => {
-      const errorWrapper = mountGlobalElement(
-        { htmlString: notMatchHtmlString },
-        {
-          defaultString
-        }
-      )
-      const correctWrapper = mountGlobalElement(
-        { htmlString: matchHtmlString },
-        {
-          defaultString
-        }
-      )
-
-      expect(errorWrapper.html()).toContain(defaultString)
-      expect(correctWrapper.html()).toContain(matchHtmlString)
-    })
-  })
-
-  describe('Global sanitize config can work', () => {
-    const htmlString = `
-    <a
-      rel="noopener noreferrer"
-      target="_blank"
-      href="https://github.com/motea927/mt-v-safe-html"
-    >
-      link
-    </a>
-  `
-    const sanitizeConfig = { ADD_ATTR: ['target'] }
-
-    it('pure string params', () => {
-      const noConfigWrapper = mountGlobalElement(htmlString)
-
-      const configWrapper = mountGlobalElement(htmlString, {
-        sanitizeConfig
-      })
-
-      expect(noConfigWrapper.find('a').attributes('target')).toBeFalsy()
-      expect(configWrapper.find('a').attributes('target')).toContain('_blank')
-    })
-
-    it('function string params', () => {
-      const noConfigWrapper = mountGlobalElement(() => htmlString)
-
-      const configWrapper = mountGlobalElement(htmlString, {
-        sanitizeConfig
-      })
-
-      expect(noConfigWrapper.find('a').attributes('target')).toBeFalsy()
-      expect(configWrapper.find('a').attributes('target')).toContain('_blank')
-    })
-
-    it('obj params', () => {
-      const noConfigWrapper = mountGlobalElement(() => htmlString)
-
-      const configWrapper = mountGlobalElement(
-        { htmlString },
-        {
-          sanitizeConfig
-        }
-      )
-
-      expect(noConfigWrapper.find('a').attributes('target')).toBeFalsy()
-      expect(configWrapper.find('a').attributes('target')).toContain('_blank')
-    })
-  })
-})
diff --git a/packages/core/__tests__/plugins.spec.ts b/packages/core/__tests__/plugins.spec.ts
new file mode 100644
index 0000000..dd7e2c7
--- /dev/null
+++ b/packages/core/__tests__/plugins.spec.ts
@@ -0,0 +1,234 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import { createSafeHtml, createI18nHtml } from '../main'
+import { setGlobalOptions } from '../shared'
+import type { Options, BindingObj } from '../shared'
+
+beforeEach(() => {
+  setGlobalOptions(undefined)
+})
+
+const mountWithSafeHtml = (
+  htmlString: string | (() => string) | BindingObj,
+  globalOptions?: Options
+) => {
+  const Component = {
+    template: `<div v-html="$safeHtml(htmlString)"></div>`
+  }
+
+  return shallowMount(Component, {
+    data: function () {
+      return {
+        htmlString
+      }
+    },
+    global: {
+      plugins: [[createSafeHtml, globalOptions]]
+    }
+  })
+}
+
+describe('$safeHtml', () => {
+  describe('string input', () => {
+    it('Render correctly with valid html', () => {
+      const htmlString = '<p>this is html</p>'
+      const wrapper = mountWithSafeHtml(htmlString)
+      expect(wrapper.html()).toContain(htmlString)
+    })
+
+    it('Render global default string when not match html', () => {
+      const htmlString = '<p>this is html</p></p>'
+      const defaultString = 'globalDefaultString'
+      const wrapper = mountWithSafeHtml(htmlString, { defaultString })
+      expect(wrapper.html()).toContain(defaultString)
+    })
+
+    it('Render sanitize result without defaultString when not match html', () => {
+      const htmlString = '<p>this is html</p></p>'
+      const wrapper = mountWithSafeHtml(htmlString)
+      expect(wrapper.html()).toContain('<p>this is html</p>')
+    })
+
+    it('sanitize config can work', () => {
+      const htmlString = `
+    <a
+      rel="noopener noreferrer"
+      target="_blank"
+      href="https://github.com/motea927/mt-v-safe-html"
+    >
+      link
+    </a>
+  `
+      const sanitizeConfig = { ADD_ATTR: ['target'] }
+
+      const noConfigWrapper = mountWithSafeHtml(htmlString)
+      const configWrapper = mountWithSafeHtml(htmlString, {
+        sanitizeConfig
+      })
+
+      expect(noConfigWrapper.find('a').attributes('target')).toBeFalsy()
+      expect(configWrapper.find('a').attributes('target')).toContain('_blank')
+    })
+  })
+
+  describe('function input', () => {
+    it('Render correct result when function return string', () => {
+      // eslint-disable-next-line unicorn/consistent-function-scoping
+      const htmlString = () => '<p>this is html</p></p>'
+      const wrapper = mountWithSafeHtml(htmlString)
+      expect(wrapper.html()).toContain('<p>this is html</p>')
+    })
+
+    it('Render global default string when function throw new error', () => {
+      // eslint-disable-next-line unicorn/consistent-function-scoping
+      const htmlString = function gg() {
+        throw new Error('fail')
+      }
+      const defaultString = 'globalDefaultString'
+      const wrapper = mountWithSafeHtml(htmlString, { defaultString })
+      expect(wrapper.html()).toContain(defaultString)
+    })
+
+    it('Render empty content without default string when function throw new error', () => {
+      // eslint-disable-next-line unicorn/consistent-function-scoping
+      const htmlString = function gg() {
+        throw new Error('fail')
+      }
+
+      const wrapper = mountWithSafeHtml(htmlString)
+      expect(wrapper.html()).toContain('<div></div>')
+    })
+
+    it('sanitize config can work', () => {
+      const htmlString = `
+    <a
+      rel="noopener noreferrer"
+      target="_blank"
+      href="https://github.com/motea927/mt-v-safe-html"
+    >
+      link
+    </a>
+  `
+      const sanitizeConfig = { ADD_ATTR: ['target'] }
+
+      const noConfigWrapper = mountWithSafeHtml(() => htmlString)
+      const configWrapper = mountWithSafeHtml(() => htmlString, {
+        sanitizeConfig
+      })
+
+      expect(noConfigWrapper.find('a').attributes('target')).toBeFalsy()
+      expect(configWrapper.find('a').attributes('target')).toContain('_blank')
+    })
+  })
+
+  describe('binding obj', () => {
+    it('object input can correct render with valid html ', () => {
+      const htmlString = '<p>this is html</p>'
+      const bindingObj = {
+        htmlString
+      }
+      const wrapper = mountWithSafeHtml(bindingObj)
+      expect(wrapper.html()).toContain(htmlString)
+    })
+
+    it('object input can render global default string with not match html ', () => {
+      const htmlString = '<p>this is html</p></p>'
+      const defaultString = 'globalDefaultString'
+
+      const bindingObj = {
+        htmlString
+      }
+      const wrapper = mountWithSafeHtml(bindingObj, { defaultString })
+      expect(wrapper.html()).toContain(defaultString)
+    })
+
+    it('object input can render components default string with not match html ', () => {
+      const htmlString = '<p>this is html</p></p>'
+      const globalDefaultString = 'globalDefaultString'
+      const componentsDefaultString = 'componentsDefaultString'
+      const bindingObj = {
+        htmlString,
+        defaultString: componentsDefaultString
+      }
+      const wrapper = mountWithSafeHtml(bindingObj, {
+        defaultString: globalDefaultString
+      })
+      expect(wrapper.html()).toContain(componentsDefaultString)
+    })
+
+    it('sanitize config can work', () => {
+      const htmlString = `
+      <a
+        rel="noopener noreferrer"
+        target="_blank"
+        href="https://github.com/motea927/mt-v-safe-html"
+      >
+        link
+      </a>
+    `
+
+      const bindingObj = {
+        htmlString
+      }
+
+      const sanitizeConfig = { ADD_ATTR: ['target'] }
+
+      const noConfigWrapper = mountWithSafeHtml(bindingObj)
+      const configWrapper = mountWithSafeHtml(bindingObj, {
+        sanitizeConfig
+      })
+
+      expect(noConfigWrapper.find('a').attributes('target')).toBeFalsy()
+      expect(configWrapper.find('a').attributes('target')).toContain('_blank')
+    })
+  })
+})
+
+const mountWithI18nHtml = (message: string, globalOptions?: Options) => {
+  const Component = {
+    template: `<div v-html="$i18nHtml('hello')"></div>`
+  }
+
+  return shallowMount(Component, {
+    global: {
+      plugins: [
+        [createI18nHtml, globalOptions],
+        [
+          createI18n({
+            legacy: false,
+            locale: 'en',
+            fallbackLocale: 'en',
+            globalInjection: true,
+            messages: {
+              en: {
+                hello: message
+              }
+            }
+          })
+        ]
+      ]
+    }
+  })
+}
+
+describe('$i18nHtml', () => {
+  it('Render correct when use normal message', () => {
+    const message = '<p>i18n message</p>'
+    const wrapper = mountWithI18nHtml(message)
+    expect(wrapper.html()).toContain(message)
+  })
+
+  it('Render default string when use not match message', () => {
+    const defaultString = 'globalDefaultString'
+    const message = '<p>i18n message</p></p>'
+    const wrapper = mountWithI18nHtml(message, { defaultString })
+    expect(wrapper.html()).toContain(defaultString)
+  })
+
+  it('Render sanitize result when use not match message without defaultString', () => {
+    const message = '<p>i18n message</p></p>'
+    const wrapper = mountWithI18nHtml(message)
+    expect(wrapper.html()).toContain('<p>i18n message</p>')
+  })
+})
diff --git a/packages/core/main.ts b/packages/core/main.ts
index f3dd176..681f2f1 100644
--- a/packages/core/main.ts
+++ b/packages/core/main.ts
@@ -1,3 +1,3 @@
 export { setGlobalOptions } from './shared'
 export { UseSafeHtml } from './components'
-export { createI18nHtml } from './plugins'
+export { createI18nHtml, createSafeHtml } from './plugins'
diff --git a/packages/core/plugins.d.ts b/packages/core/plugins.d.ts
index e806d93..7c0e097 100644
--- a/packages/core/plugins.d.ts
+++ b/packages/core/plugins.d.ts
@@ -1,7 +1,8 @@
-import type { $i18nHtml } from './plugins'
+import type { $i18nHtml, $safeHtml } from './plugins'
 
 declare module 'vue' {
   interface ComponentCustomProperties {
     $i18nHtml: typeof $i18nHtml
+    $safeHtml: typeof $safeHtml
   }
 }
diff --git a/playgrounds/App.vue b/playgrounds/App.vue
index 47e252c..59a368a 100644
--- a/playgrounds/App.vue
+++ b/playgrounds/App.vue
@@ -39,7 +39,7 @@
 
     <div>
       <h2>i18n</h2>
-      <p v-html="$i18nHtml('message')"></p>
+      <p v-html="$safeHtml(`<p style='color: red;'>123</p>`)"></p>
       <button @click="handleClickChangeMessage">change message</button>
     </div>
   </div>
diff --git a/playgrounds/main.ts b/playgrounds/main.ts
index 7c5444f..df34297 100644
--- a/playgrounds/main.ts
+++ b/playgrounds/main.ts
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
-import { createI18nHtml } from '../dist/main'
+import { createI18nHtml, createSafeHtml } from '../dist/main'
 import App from './App.vue'
 
 const i18n = createI18n({
@@ -16,5 +16,5 @@ const i18n = createI18n({
 
 createApp(App)
   .use(i18n)
-  .use(createI18nHtml, { defaultString: 'globalDefaultString' })
+  .use(createSafeHtml, { defaultString: 'globalDefaultString' })
   .mount('#app')

From 6256e475e710938705365598c40cfbe175816c7c Mon Sep 17 00:00:00 2001
From: motea927 <motea927@yahoo.com.tw>
Date: Sat, 17 Jun 2023 16:22:14 +0800
Subject: [PATCH 3/3] feat!: :boom: remove components

BREAKING CHANGE: remove components usage
---
 packages/core/components.ts | 53 -------------------------------------
 packages/core/main.ts       |  1 -
 vite.config.ts              |  5 ++--
 3 files changed, 3 insertions(+), 56 deletions(-)
 delete mode 100644 packages/core/components.ts

diff --git a/packages/core/components.ts b/packages/core/components.ts
deleted file mode 100644
index c17deca..0000000
--- a/packages/core/components.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { defineComponent, h } from 'vue'
-import type { PropType } from 'vue'
-import type { BindingObj } from './shared'
-import { getDefaultString, sanitizeHtml, getBindingValue } from './shared'
-import { isValidate } from './validate'
-
-type Props = BindingObj & {
-  /**
-   * The element that the component should be rendered as
-   *
-   * @default 'div'
-   */
-  as?: object | string
-}
-
-export const UseSafeHtml = defineComponent({
-  name: 'UseSafeHtml',
-  props: {
-    htmlString: {
-      type: [String, Function] as PropType<Props['htmlString']>,
-      required: true
-    },
-    defaultString: String as PropType<Props['defaultString']>,
-    sanitizeConfig: Object as PropType<Props['sanitizeConfig']>,
-    as: String as PropType<Props['as']>
-  },
-  computed: {
-    bindingValue(): string {
-      return getBindingValue(this.htmlString)
-    }
-  },
-  render() {
-    const componentDefaultString = getDefaultString(this.defaultString)
-    const hasDefaultString = componentDefaultString !== undefined
-
-    if (hasDefaultString && !isValidate(this.bindingValue)) {
-      const sanitizeDefaultResult = sanitizeHtml(
-        componentDefaultString,
-        this.sanitizeConfig
-      )
-
-      return h(this.as || 'div', {
-        innerHTML: sanitizeDefaultResult
-      })
-    }
-
-    const sanitizeResult = sanitizeHtml(this.bindingValue, this.sanitizeConfig)
-
-    return h(this.as || 'div', {
-      innerHTML: sanitizeResult
-    })
-  }
-})
diff --git a/packages/core/main.ts b/packages/core/main.ts
index 681f2f1..ef32db9 100644
--- a/packages/core/main.ts
+++ b/packages/core/main.ts
@@ -1,3 +1,2 @@
 export { setGlobalOptions } from './shared'
-export { UseSafeHtml } from './components'
 export { createI18nHtml, createSafeHtml } from './plugins'
diff --git a/vite.config.ts b/vite.config.ts
index 5a481d0..e1da9d9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -32,12 +32,13 @@ export default defineConfig({
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
-      external: ['vue'],
+      external: ['vue', 'vue-i18n'],
       output: {
         // Provide global variables to use in the UMD build
         // for externalized deps
         globals: {
-          vue: 'Vue'
+          vue: 'Vue',
+          'vue-i18n': 'vue-i18n'
         }
       }
     }