feat(compiler): support v-text directive

Author: zhiyuanzmj

packages/compiler/src/index.ts

@@ -24,3 +24,4 @@ export { transformVHtml } from './transforms/vHtml'
 export { transformVFor } from './transforms/vFor'
 export { transformVIf } from './transforms/vIf'
 export { transformVOnce } from './transforms/vOnce'
+export { transformVText } from './transforms/vText'

packages/compiler/src/transforms/vText.ts

@@ -0,0 +1,11 @@
+import { transformVText as _transformVText } from '@vue/compiler-vapor'
+import { resolveDirectiveNode, resolveNode } from '../utils'
+import type { DirectiveTransform } from '../transform'
+
+export const transformVText: DirectiveTransform = (dir, node, context) => {
+  return _transformVText(
+    resolveDirectiveNode(dir, context),
+    resolveNode(node, context),
+    context as any,
+  )
+}

packages/compiler/test/transforms/__snapshots__/vIf.spec.ts.snap

@@ -2,6 +2,7 @@
 
 exports[`compiler: v-if > comment between branches 1`] = `
 "
+  const n17 = t3()
   const n1 = _createIf(() => ("ok"), () => {
     const n3 = t0()
     return n3
@@ -12,7 +13,7 @@ exports[`compiler: v-if > comment between branches 1`] = `
     const n14 = t2()
     return n14
   }), true)
-  return n1
+  return [n1, n17]
 "
 `;
 
@@ -36,7 +37,8 @@ exports[`compiler: v-if > template v-if 1`] = `
     const n2 = t0()
     const n3 = t1()
     const n4 = t2()
-    _setText(n4, () => (msg))
+    const x4 = _child(n4)
+    _renderEffect(() => _setText(x4, _toDisplayString(msg)))
     return [n2, n3, n4]
   })
   return n0

packages/compiler/test/transforms/__snapshots__/vText.spec.ts.snap

@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`v-text > should convert v-text to setText 1`] = `
+"
+  const n0 = t0()
+  const x0 = _child(n0)
+  _renderEffect(() => _setText(x0, _toDisplayString(str.value)))
+  return n0
+"
+`;
+
+exports[`v-text > should raise error and ignore children when v-text is present 1`] = `
+"
+  const n0 = t0()
+  const x0 = _child(n0)
+  _renderEffect(() => _setText(x0, _toDisplayString(test)))
+  return n0
+"
+`;
+
+exports[`v-text > should raise error if has no expression 1`] = `
+"
+  const n0 = t0()
+  return n0
+"
+`;

packages/compiler/test/transforms/vIf.spec.ts

@@ -8,7 +8,7 @@ import {
   transformElement,
   transformText,
   transformVIf,
-  // transformVText,
+  transformVText,
 } from '../../src'
 import { makeCompile } from './_utils'
 
@@ -21,7 +21,7 @@ const compileWithVIf = makeCompile({
     transformChildren,
   ],
   directiveTransforms: {
-    // text: transformVText,
+    text: transformVText,
   },
 })
 
@@ -69,12 +69,28 @@ describe('compiler: v-if', () => {
 
   test('template v-if', () => {
     const { code, ir } = compileWithVIf(
-      `<template v-if={ok}><div/>hello<p>{msg}</p></template>`,
+      `<template v-if={ok}><div/>hello<p v-text={msg}></p></template>`,
     )
     expect(code).matchSnapshot()
 
-    expect(ir.template).toEqual(['<div></div>', 'hello', '<p></p>'])
-    expect(ir.block.effect).toEqual([])
+    expect(ir.template).toEqual(['<div></div>', 'hello', '<p> </p>'])
+    expect((ir.block.operation[0] as IfIRNode).positive.effect).toMatchObject([
+      {
+        operations: [
+          {
+            type: IRNodeTypes.SET_TEXT,
+            element: 4,
+            values: [
+              {
+                content: 'msg',
+                type: NodeTypes.SIMPLE_EXPRESSION,
+                isStatic: false,
+              },
+            ],
+          },
+        ],
+      },
+    ])
     expect((ir.block.operation[0] as IfIRNode).positive.dynamic).toMatchObject({
       id: 1,
       children: {
@@ -218,11 +234,17 @@ describe('compiler: v-if', () => {
         <p v-else-if="orNot"/>
         {/* bar */}
         <template v-else>fine</template>
+        <div v-text="text" />
       </>
     `,
     )
     expect(code).toMatchSnapshot()
-    expect(ir.template).toEqual(['<div></div>', '<p></p>', 'fine'])
+    expect(ir.template).toEqual([
+      '<div></div>',
+      '<p></p>',
+      'fine',
+      '<div>text</div>',
+    ])
   })
 
   describe.todo('errors')

packages/compiler/test/transforms/vText.spec.ts

@@ -0,0 +1,115 @@
+import { describe, expect, test, vi } from 'vitest'
+import { BindingTypes, DOMErrorCodes, NodeTypes } from '@vue/compiler-dom'
+import {
+  IRNodeTypes,
+  transformChildren,
+  transformElement,
+  transformVText,
+} from '../../src'
+import { makeCompile } from './_utils'
+
+const compileWithVText = makeCompile({
+  nodeTransforms: [transformElement, transformChildren],
+  directiveTransforms: {
+    text: transformVText,
+  },
+})
+
+describe('v-text', () => {
+  test('should convert v-text to setText', () => {
+    const { code, ir, helpers } = compileWithVText(`<div v-text={str}></div>`, {
+      bindingMetadata: {
+        str: BindingTypes.SETUP_REF,
+      },
+    })
+
+    expect(helpers).contains('setText')
+    expect(ir.block.operation).toMatchObject([
+      {
+        type: IRNodeTypes.GET_TEXT_CHILD,
+        parent: 0,
+      },
+    ])
+
+    expect(ir.block.effect).toMatchObject([
+      {
+        expressions: [
+          {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'str',
+            isStatic: false,
+          },
+        ],
+        operations: [
+          {
+            type: IRNodeTypes.SET_TEXT,
+            element: 0,
+            values: [
+              {
+                type: NodeTypes.SIMPLE_EXPRESSION,
+                content: 'str',
+                isStatic: false,
+              },
+            ],
+          },
+        ],
+      },
+    ])
+
+    expect(code).matchSnapshot()
+  })
+
+  test('should raise error and ignore children when v-text is present', () => {
+    const onError = vi.fn()
+    const { code, ir, preamble } = compileWithVText(
+      `<div v-text={test}>hello</div>`,
+      {
+        onError,
+      },
+    )
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: DOMErrorCodes.X_V_TEXT_WITH_CHILDREN }],
+    ])
+
+    // children should have been removed
+    expect(ir.template).toEqual(['<div> </div>'])
+
+    expect(ir.block.effect).toMatchObject([
+      {
+        expressions: [
+          {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'test',
+            isStatic: false,
+          },
+        ],
+        operations: [
+          {
+            type: IRNodeTypes.SET_TEXT,
+            element: 0,
+            values: [
+              {
+                type: NodeTypes.SIMPLE_EXPRESSION,
+                content: 'test',
+                isStatic: false,
+              },
+            ],
+          },
+        ],
+      },
+    ])
+
+    expect(code).matchSnapshot()
+    // children should have been removed
+    expect(preamble).contains('template("<div> </div>", true)')
+  })
+
+  test('should raise error if has no expression', () => {
+    const onError = vi.fn()
+    const { code } = compileWithVText(`<div v-text></div>`, { onError })
+    expect(code).matchSnapshot()
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: DOMErrorCodes.X_V_TEXT_NO_EXPRESSION }],
+    ])
+  })
+})