feat(compiler): support v-html

zhiyuanzmj · zhiyuanzmj · commit 419b6f72032a · 2024-07-07T11:52:05.000+08:00
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![NPM version](https://img.shields.io/npm/v/unplugin-vue-jsx-vapor?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-vue-jsx-vapor)
 
-Convert Vue JSX to Vapor.
+Converts Vue JSX to Vapor.
 
 [Playground](https://stackblitz.com/github/unplugin/unplugin-vue-jsx-vapor?file=playground%2FApp.vue)
 
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "unplugin-vue-jsx-vapor",
   "version": "1.0.2",
   "packageManager": "pnpm@9.4.0",
-  "description": "Convert JSX to Vapor",
+  "description": "Converts Vue JSX to Vapor",
   "type": "module",
   "keywords": [
     "unplugin",
diff --git a/playground/App.vue b/playground/App.vue
@@ -6,6 +6,7 @@ import For from './for.vue'
 import Slot from './slot.vue'
 import Model from './model.vue'
 import Show from './show.vue'
+import Html from './html.vue'
 
 export default defineComponent({
   setup() {
@@ -57,6 +58,11 @@ export default defineComponent({
           <legend>v-show</legend>
           <Show />
         </fieldset>
+
+        <fieldset>
+          <legend>v-html</legend>
+          <Html />
+        </fieldset>
       </>
     )
   },
diff --git a/playground/for.vue b/playground/for.vue
@@ -7,10 +7,10 @@ export default defineComponent({
 
     return (
       <div>
-        <input value={count.value} onInput={e => count.value = e.target.value} type="number" />
+        <input v-model={count.value} type="number" />
 
-        {Array.from({length: count.value}).map((item,index) =>{
-          if(item > 1){
+        {Array.from({ length: count.value }).map((item, index) => {
+          if (item > 1) {
             return <div>({index}) lg 1</div>
           } else {
             return <div>({index}) lt 1</div>
diff --git a/playground/html.vue b/playground/html.vue
@@ -0,0 +1,14 @@
+<script setup lang="tsx">
+import { ref } from 'vue'
+
+let foo = ref('<div style="color: red;">foo</div>')
+
+
+const Render = (
+  <>
+    <input v-model={foo.value} style="width: 100%" />
+    <div v-html={foo.value} />
+  </>
+)
+defineRender(Render)
+</script>
diff --git a/src/core/compiler/compile.ts b/src/core/compiler/compile.ts
@@ -30,6 +30,7 @@ import { transformVOn } from './transforms/vOn'
 import { transformVSlot } from './transforms/vSlot'
 import { transformVModel } from './transforms/vModel'
 import { transformVShow } from './transforms/vShow'
+import { transformVHtml } from './transforms/vHtml'
 import type { JSXElement, JSXFragment, Program } from '@babel/types'
 
 export interface VaporCodegenResult
@@ -137,6 +138,7 @@ export function getBaseTransformPreset(
       on: transformVOn,
       model: transformVModel,
       show: transformVShow,
+      html: transformVHtml,
     },
   ]
 }
diff --git a/src/core/compiler/index.ts b/src/core/compiler/index.ts
@@ -15,3 +15,4 @@ export { transformVOn } from './transforms/vOn'
 export { transformVSlot } from './transforms/vSlot'
 export { transformVModel } from './transforms/vModel'
 export { transformVShow } from './transforms/vShow'
+export { transformVHtml } from './transforms/vHtml'
diff --git a/src/core/compiler/transforms/vHtml.ts b/src/core/compiler/transforms/vHtml.ts
@@ -0,0 +1,11 @@
+import { transformVHtml as _transformVHtml } from '@vue-vapor/compiler-vapor'
+import { resolveDirectiveNode, resolveNode } from '../utils'
+import type { DirectiveTransform } from '../transform'
+
+export const transformVHtml: DirectiveTransform = (dir, node, context) => {
+  return _transformVHtml(
+    resolveDirectiveNode(dir, context),
+    resolveNode(node, context),
+    context as any,
+  )
+}
diff --git a/src/core/compiler/utils.ts b/src/core/compiler/utils.ts
@@ -215,7 +215,7 @@ export function resolveNode(
   return {
     type: NodeTypes.ELEMENT,
     props,
-    children: [],
+    children: node.children as any[],
     tag,
     loc,
     ns: Namespaces.HTML,
diff --git a/test/transforms/__snapshots__/vHtml.spec.ts.snap b/test/transforms/__snapshots__/vHtml.spec.ts.snap
@@ -0,0 +1,34 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`v-html > should convert v-html to innerHTML 1`] = `
+"import { renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue/vapor';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  _renderEffect(() => _setHtml(n0, _ctx.code))
+  return n0
+}"
+`;
+
+exports[`v-html > should raise error and ignore children when v-html is present 1`] = `
+"import { renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue/vapor';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  _renderEffect(() => _setHtml(n0, _ctx.test))
+  return n0
+}"
+`;
+
+exports[`v-html > should raise error if has no expression 1`] = `
+"import { setHtml as _setHtml, template as _template } from 'vue/vapor';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  _setHtml(n0, "")
+  return n0
+}"
+`;
diff --git a/test/transforms/vHtml.spec.ts b/test/transforms/vHtml.spec.ts
@@ -0,0 +1,117 @@
+import { describe, expect, test, vi } from 'vitest'
+import { BindingTypes, DOMErrorCodes, NodeTypes } from '@vue-vapor/compiler-dom'
+import {
+  IRNodeTypes,
+  transformChildren,
+  transformElement,
+  transformVHtml,
+} from '../../src/core/compiler/index'
+import { makeCompile } from './_utils'
+
+const compileWithVHtml = makeCompile({
+  nodeTransforms: [transformElement, transformChildren],
+  directiveTransforms: {
+    html: transformVHtml,
+  },
+})
+
+describe('v-html', () => {
+  test('should convert v-html to innerHTML', () => {
+    const { code, ir, helpers, vaporHelpers } = compileWithVHtml(
+      `<div v-html={code}></div>`,
+      {
+        bindingMetadata: {
+          code: BindingTypes.SETUP_REF,
+        },
+      },
+    )
+
+    expect(vaporHelpers).contains('setHtml')
+    expect(helpers.size).toBe(0)
+
+    expect(ir.block.operation).toEqual([])
+    expect(ir.block.effect).toMatchObject([
+      {
+        expressions: [
+          {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'code',
+            isStatic: false,
+          },
+        ],
+        operations: [
+          {
+            type: IRNodeTypes.SET_HTML,
+            element: 0,
+            value: {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: 'code',
+              isStatic: false,
+            },
+          },
+        ],
+      },
+    ])
+
+    expect(code).matchSnapshot()
+  })
+
+  test('should raise error and ignore children when v-html is present', () => {
+    const onError = vi.fn()
+    const { code, ir, helpers, vaporHelpers } = compileWithVHtml(
+      `<div v-html={test}>hello</div>`,
+      {
+        onError,
+      },
+    )
+
+    expect(vaporHelpers).contains('setHtml')
+    expect(helpers.size).toBe(0)
+
+    // children should have been removed
+    expect(ir.template).toEqual(['<div></div>'])
+
+    expect(ir.block.operation).toEqual([])
+    expect(ir.block.effect).toMatchObject([
+      {
+        expressions: [
+          {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'test',
+            isStatic: false,
+          },
+        ],
+        operations: [
+          {
+            type: IRNodeTypes.SET_HTML,
+            element: 0,
+            value: {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: 'test',
+              isStatic: false,
+            },
+          },
+        ],
+      },
+    ])
+
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: DOMErrorCodes.X_V_HTML_WITH_CHILDREN }],
+    ])
+
+    expect(code).matchSnapshot()
+    // children should have been removed
+    expect(code).contains('template("<div></div>")')
+  })
+
+  test('should raise error if has no expression', () => {
+    const onError = vi.fn()
+    const { code } = compileWithVHtml(`<div v-html></div>`, {
+      onError,
+    })
+    expect(code).matchSnapshot()
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: DOMErrorCodes.X_V_HTML_NO_EXPRESSION }],
+    ])
+  })
+})
diff --git a/tsup.config.ts b/tsup.config.ts
@@ -1,7 +1,18 @@
 import type { Options } from 'tsup'
 
 export default {
-  entryPoints: ['src/*.ts', 'src/core/compiler/index.ts'],
+  entry: {
+    vite: 'src/vite.ts',
+    astro: 'src/astro.ts',
+    esbuild: 'src/esbuild.ts',
+    nuxt: 'src/nuxt.ts',
+    rollup: 'src/rollup.ts',
+    rspack: 'src/rspack.ts',
+    types: 'src/types.ts',
+    webpack: 'src/webpack.ts',
+    index: 'src/index.ts',
+    compiler: 'src/core/compiler/index.ts',
+  },
   clean: true,
   format: ['cjs', 'esm'],
   dts: true,

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,7 @@ import { transformVOn } from './transforms/vOn'`
`30`	`30`	`import { transformVSlot } from './transforms/vSlot'`
`31`	`31`	`import { transformVModel } from './transforms/vModel'`
`32`	`32`	`import { transformVShow } from './transforms/vShow'`
	`33`	`+import { transformVHtml } from './transforms/vHtml'`
`33`	`34`	`import type { JSXElement, JSXFragment, Program } from '@babel/types'`
`34`	`35`
`35`	`36`	`export interface VaporCodegenResult`
`@@ -137,6 +138,7 @@ export function getBaseTransformPreset(`
`137`	`138`	`on: transformVOn,`
`138`	`139`	`model: transformVModel,`
`139`	`140`	`show: transformVShow,`
	`141`	`+ html: transformVHtml,`
`140`	`142`	`},`
`141`	`143`	`]`
`142`	`144`	`}`