Merge branch 'dev' into beta

.eslintrc.cjs

@@ -18,5 +18,5 @@ module.exports = {
     'unicorn/no-null': 0,
     'import/named': 0
   },
-  ignorePatterns: ['**/dist/**/**.*']
+  ignorePatterns: ['**/dist/**/**.*', '**/pnpm-lock.yaml']
 }

.github/workflows/ci.yml

@@ -5,11 +5,13 @@ on:
       - 'docs/**'
     branches:
       - main
+      - beta
   pull_request:
     paths-ignore:
       - 'docs/**'
     branches:
       - main
+      - beta
 
 jobs:
   build:
@@ -33,13 +35,50 @@ jobs:
           node-version: ${{ matrix.node }}
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --no-frozen-lockfile
       - name: Build
-        run: pnpm run build
+        run: pnpm run build:core
       - name: Cache dist
         uses: actions/cache@v3
         with:
-          path: dist
+          path: packages/core/dist
+          key: ${{ github.sha }}
+
+  build-nuxt:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-20.04]
+        node: [18]
+
+    timeout-minutes: 10
+    needs:
+      - build
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Use Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'pnpm'
+      - name: Restore core dist cache
+        uses: actions/cache@v3
+        with:
+          path: packages/core/dist
+          key: ${{ github.sha }}
+      - name: Install dependencies
+        run: pnpm install --no-frozen-lockfile
+
+      - name: Build
+        run: pnpm run build:nuxt
+      - name: Cache nuxt dist
+        uses: actions/cache@v3
+        with:
+          path: packages/nuxt/dist
           key: ${{ github.sha }}
 
   test:
@@ -100,10 +139,51 @@ jobs:
       - name: Restore dist cache
         uses: actions/cache@v3
         with:
-          path: dist
+          path: packages/core/dist
+          key: ${{ github.sha }}
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release --branches ${GITHUB_REF#refs/heads/}
+
+  build-release-nuxt:
+    if: |
+      github.event_name == 'push' &&
+      contains(github.event.head_commit.message, 'nuxt')
+    needs:
+      - build
+      - build-nuxt
+      - test
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-20.04]
+        node: [18]
+
+    timeout-minutes: 20
+    environment: release
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Use Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Restore dist cache
+        uses: actions/cache@v3
+        with:
+          path: packages/nuxt/dist
           key: ${{ github.sha }}
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npx semantic-release --branches main
+        run: cd packages/nuxt && npx semantic-release --branches ${GITHUB_REF#refs/heads/}

.gitignore

@@ -27,3 +27,11 @@ coverage
 *.sln
 *.sw?
 .eslintcache
+
+# Nuxt
+.nuxt
+.output
+.vercel_build_output
+.build-*
+.env
+.netlify

README.md

@@ -18,7 +18,6 @@
 
 A lightweight, flexible, and robust XSS sanitizer's Vue plugin based on [DOMPurify](https://github.com/cure53/DOMPurify).
 <!-- https://raw.githubusercontent.com/motea927/mt-v-safe-html/main/packages/docs/public/mt-v-safe-html.png -->
-> **Warning**: The library is under development. Recommend not to use.
 
 ## 💪 Motivation
 For any commercial projects, we often had to provide html configuration (maybe from API) for customers, but there is a worry our customer may use error syntax or unintentionally copy xss syntax from the Internet.

package.json

@@ -8,36 +8,44 @@
     "email": "motea927@yahoo.com.tw"
   },
   "license": "MIT",
+  "release": {
+    "branches": [
+      "main",
+      "beta"
+    ]
+  },
   "scripts": {
-    "dev:core": "pnpm run build-only --watch & vite",
-    "dev:docs": "pnpm run build-only --watch & pnpm -r --filter ./packages/docs run dev",
-    "build": "run-p type-check build-only",
-    "build:docs": "pnpm -r --filter ./packages/docs run build",
-    "preview": "vite preview",
+    "dev:core": "pnpm -r --filter ./packages/core run build:watch & pnpm -r --filter ./playgrounds/vite-vue3 dev",
+    "dev:nuxt": "pnpm -r --filter ./packages/core run build:watch & pnpm -r --filter ./packages/nuxt dev",
+    "dev:docs": "pnpm -r --filter ./docs run dev",
+    "build:core": "pnpm -r --filter ./packages/core run build",
+    "build:nuxt": "pnpm -r --filter ./packages/nuxt run dev:build && pnpm -r --filter ./packages/nuxt run prepack",
+    "build:docs": "pnpm -r --filter ./docs run build",
     "test:unit": "vitest",
     "coverage": "vitest run --coverage",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint --cache --fix --ext .ts,.mjs,.cjs . && prettier --write -c packages",
     "prepare": "husky install"
   },
   "type": "module",
   "files": [
-    "dist"
+    "packages/core/dist"
   ],
-  "main": "./dist/main.umd.cjs",
-  "module": "./dist/main.js",
+  "main": "./packages/core/dist/index.umd.cjs",
+  "module": "./packages/core/dist/index.js",
   "exports": {
     ".": {
-      "import": "./dist/main.js",
-      "require": "./dist/main.umd.cjs"
-    }
+      "types": "./packages/core/dist/index.d.ts",
+      "import": "./packages/core/dist/index.js",
+      "require": "./packages/core/dist/index.umd.cjs"
+    },
+    "./*": "./packages/core/dist/*"
   },
-  "types": "./dist/main.d.ts",
+  "types": "./packages/core/dist/index.d.ts",
   "dependencies": {
     "dompurify": "^3.0.3"
   },
   "devDependencies": {
+    "@nuxt/devtools": "^0.6.6",
     "@rushstack/eslint-patch": "^1.2.0",
     "@tsconfig/node18": "^2.0.1",
     "@types/dompurify": "^3.0.2",
@@ -55,6 +63,7 @@
     "husky": "^8.0.3",
     "jsdom": "^22.0.0",
     "npm-run-all": "^4.1.5",
+    "nuxt": "^3.6.1",
     "prettier": "^2.8.8",
     "sass": "^1.63.3",
     "semantic-release": "^20.1.0",

packages/core/main.ts → packages/core/index.ts

@@ -1,7 +1,8 @@
 import type { BindingObj, BindingI18nObj } from './shared'
 
-export { setGlobalOptions } from './shared'
-export { createI18nHtml, createSafeHtml } from './plugins'
+export { setGlobalOptions, getBindingValue } from './shared'
+export type { Options } from './shared'
+export * from './plugins'
 
 export {}
 declare module 'vue' {

packages/core/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "mt-v-safe-html",
+  "version": "0.0.0",
+  "description": "",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "build-only": "vite build",
+    "build:watch": "pnpm run build-only --watch",
+    "type-check": "vue-tsc --noEmit -p ../../tsconfig.vitest.json --composite false"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.umd.cjs",
+      "import": "./dist/index.js"
+    },
+    "./*": "./dist/*"
+  },
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}

packages/core/__tests__/plugins.spec.ts → packages/core/plugins/__tests__/plugins.spec.ts

@@ -1,9 +1,8 @@
 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'
+import type { Options, BindingObj } from '../../shared'
+import { setGlobalOptions, createSafeHtml, createI18nHtml } from '../../index'
 
 beforeEach(() => {
   setGlobalOptions(undefined)

packages/core/plugins/createI18nHtml.ts

@@ -0,0 +1,26 @@
+import type { App } from 'vue'
+import { useI18n } from 'vue-i18n'
+import DOMPurify from 'dompurify'
+import { setGlobalOptions, getBindingValue } from '../shared'
+import type { Options } from '../shared'
+import { generateHtml } from './generateHtml'
+
+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))
+}, DOMPurify.sanitize)
+
+export const createI18nHtml = {
+  install: (app: App, options?: Options) => {
+    if (options) {
+      setGlobalOptions(options)
+    }
+
+    app.config.globalProperties.$i18nHtml = $i18nHtml
+  }
+}

packages/core/plugins/createSafeHtml.ts

@@ -0,0 +1,16 @@
+import type { App } from 'vue'
+import DOMPurify from 'dompurify'
+import { setGlobalOptions, getBindingValue } from '../shared'
+import type { Options } from '../shared'
+import { generateHtml } from './generateHtml'
+
+const $safeHtml = generateHtml(getBindingValue, DOMPurify.sanitize)
+export const createSafeHtml = {
+  install: (app: App, options?: Options) => {
+    if (options) {
+      setGlobalOptions(options)
+    }
+
+    app.config.globalProperties.$safeHtml = $safeHtml
+  }
+}