Merge pull request #20 from motea927/dev

build: move vue, vue-i18n to devDependencies

package.json

@@ -35,14 +35,12 @@
   },
   "types": "./dist/main.d.ts",
   "dependencies": {
-    "@types/dompurify": "^3.0.2",
-    "dompurify": "^3.0.3",
-    "vue": "^3.3.2",
-    "vue-i18n": "9.3.0-beta.19"
+    "dompurify": "^3.0.3"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
     "@tsconfig/node18": "^2.0.1",
+    "@types/dompurify": "^3.0.2",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^18.16.8",
     "@vitejs/plugin-vue": "^4.2.3",
@@ -64,6 +62,8 @@
     "vite": "^4.3.5",
     "vite-plugin-dts": "^2.3.0",
     "vitest": "^0.31.0",
+    "vue": "^3.3.2",
+    "vue-i18n": "9.3.0-beta.19",
     "vue-tsc": "^1.6.4"
   }
 }

packages/core/main.ts

@@ -1,2 +1,11 @@
+import type { BindingObj, BindingI18nObj } from './shared'
+
+declare module '@vue/runtime-core' {
+  export interface ComponentCustomProperties {
+    $i18nHtml: (binding: string | BindingI18nObj) => string
+    $safeHtml: (binding: string | BindingObj) => string
+  }
+}
+
 export { setGlobalOptions } from './shared'
 export { createI18nHtml, createSafeHtml } from './plugins'

packages/docs/content/0.index.md

@@ -20,7 +20,7 @@ snippet: pnpm add mt-v-safe-html
 ---
 
 #title
-A good alternative for v-html.
+A good guard method before using v-html.
 
 #description
 A lightweight, flexible, and robust XSS sanitizer's Vue directive based on DOMPurify.

playgrounds/App.vue

@@ -1,67 +1,24 @@
 <template>
   <div>
-    <h1>v-safe-html</h1>
-    <div>
-      <h2>invalid test</h2>
-      <div v-safe-html="inValidHtmlString"></div>
-      <div v-safe-html="{ htmlString: inValidHtmlString }"></div>
-      <div
-        v-safe-html="{
-          htmlString: inValidHtmlString,
-          defaultString: 'components default string'
-        }"
-      ></div>
-    </div>
-
-    <div>
-      <h2>valid test</h2>
-      <div v-safe-html="validHtmlString"></div>
-      <div v-safe-html="{ htmlString: validHtmlString }"></div>
-
-      <div v-safe-html="linkHtmlString"></div>
-      <div v-safe-html="{ htmlString: linkHtmlString }"></div>
-      <div
-        v-safe-html="{
-          htmlString: linkHtmlString,
-          sanitizeConfig
-        }"
-      ></div>
-    </div>
-
-    <div>
-      <h2>data set</h2>
-      <div v-safe-html="dataSetHtmlString"></div>
-    </div>
-
-    <div>
-      <h2>components</h2>
-    </div>
+    <h1>mt-v-safe-html</h1>
+    <NotMatchTest />
+    <ValidTest />
+    <DataSet />
 
     <div>
       <h2>i18n</h2>
       <p v-html="$safeHtml(`<p style='color: red;'>123</p>`)"></p>
-      <p v-html="$t('message')"></p>
+      <p v-html="$i18nHtml('message')"></p>
       <button @click="handleClickChangeMessage">change message</button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-
-const inValidHtmlString = ref(`<div> invalid</div></div>`)
-const validHtmlString = ref(`<div> valid alert('valid');</div>`)
-const linkHtmlString = ref(
-  `<a href="http://google.com.tw" target="_blank" rel="noopener noreferrer">
-    link
-  </a>`
-)
-const sanitizeConfig = { ADD_ATTR: ['target'] }
-
-const dataSetHtmlString = ref(`
-  <div data-test="{"1":1}">dataset</div>
-`)
+import NotMatchTest from './NotMatchTest.vue'
+import ValidTest from './ValidTest.vue'
+import DataSet from './DataSet.vue'
 
 const { setLocaleMessage } = useI18n()
 const handleClickChangeMessage = () => {

playgrounds/DataSet.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h2>data set</h2>
+    <div v-html="$safeHtml(dataSetHtmlString)"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const dataSetHtmlString = ref(`
+  <div data-test="{"1":1}">dataset</div>
+`)
+</script>

playgrounds/NotMatchTest.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h2>invalid test</h2>
+    <div v-html="$safeHtml(inValidHtmlString)"></div>
+    <div v-html="$safeHtml({ htmlString: inValidHtmlString })"></div>
+    <div
+      v-html="
+        $safeHtml({
+          htmlString: inValidHtmlString,
+          defaultString: componentsDefaultString
+        })
+      "
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const inValidHtmlString = ref(`<div> invalid</div></div>`)
+const componentsDefaultString = 'components default string'
+</script>

playgrounds/ValidTest.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h2>valid test</h2>
+    <div v-html="$safeHtml(xssHtmlString)"></div>
+    <div v-html="$safeHtml({ htmlString: xssHtmlString })"></div>
+
+    <div v-html="$safeHtml(linkHtmlString)"></div>
+    <div v-html="$safeHtml({ htmlString: linkHtmlString })"></div>
+    <div
+      v-html="
+        $safeHtml({
+          htmlString: linkHtmlString,
+          sanitizeConfig
+        })
+      "
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const xssHtmlString = ref(`<img src=1 onerror=alert(1)>`)
+const linkHtmlString = ref(
+  `<a href="http://google.com.tw" target="_blank" rel="noopener noreferrer" style="color: blue;">
+    link
+  </a>`
+)
+const sanitizeConfig = { ADD_ATTR: ['target'] }
+</script>

playgrounds/main.ts

@@ -17,4 +17,5 @@ const i18n = createI18n({
 createApp(App)
   .use(i18n)
   .use(createSafeHtml, { defaultString: 'globalDefaultString' })
+  .use(createI18nHtml)
   .mount('#app')