feat(compiler): support v-text directive

Author: zhiyuanzmj

docs/features/directives.md

@@ -8,7 +8,7 @@ Vue built-in directives for JSX.
 |      `v-slot`, `v-slots`      | :white_check_mark: | :white_check_mark: |
 |            `v-for`            | :white_check_mark: | :white_check_mark: |
 |           `v-model`           | :white_check_mark: | :white_check_mark: |
-|           `v-html`            | :white_check_mark: |         /          |
+|      `v-html`, `v-text`       | :white_check_mark: |         /          |
 |           `v-once`            | :white_check_mark: |         /          |
 
 ## Dynamic Arguments

packages/compiler/src/compile.ts

@@ -31,6 +31,7 @@ import { transformVOnce } from './transforms/vOnce'
 import { transformVShow } from './transforms/vShow'
 import { transformVSlot } from './transforms/vSlot'
 import { transformVSlots } from './transforms/vSlots'
+import { transformVText } from './transforms/vText'
 import type { ExpressionStatement, JSXElement, JSXFragment } from '@babel/types'
 import type { CompilerOptions as BaseCompilerOptions } from '@vue/compiler-dom'
 
@@ -123,7 +124,6 @@ export function getBaseTransformPreset(): TransformPreset {
       transformTemplateRef,
       transformText,
       transformElement,
-      transformVSlots,
       transformVSlot,
       transformChildren,
     ],
@@ -133,6 +133,8 @@ export function getBaseTransformPreset(): TransformPreset {
       model: transformVModel,
       show: transformVShow,
       html: transformVHtml,
+      text: transformVText,
+      slots: transformVSlots,
     },
   ]
 }

packages/compiler/src/transforms/vSlots.ts

@@ -1,36 +1,24 @@
 import { createCompilerError, ErrorCodes } from '@vue/compiler-dom'
 import { IRSlotType } from '../ir'
 import { isJSXComponent, resolveExpression, resolveLocation } from '../utils'
-import type { NodeTransform } from '../transform'
-import type { JSXAttribute } from '@babel/types'
+import type { DirectiveTransform } from '../transform'
 
-export const transformVSlots: NodeTransform = (node, context) => {
-  if (node.type !== 'JSXElement' || !isJSXComponent(node)) return
+export const transformVSlots: DirectiveTransform = (dir, node, context) => {
+  if (!isJSXComponent(node)) return
 
-  const {
-    openingElement: { attributes },
-    children,
-  } = node
-
-  const vSlotsIndex = attributes.findIndex(
-    (attr) =>
-      attr.type === 'JSXAttribute' && attr.name.name.toString() === 'v-slots',
-  )
-  const vSlotsDir = attributes[vSlotsIndex] as JSXAttribute
-  if (vSlotsDir && vSlotsDir.value?.type === 'JSXExpressionContainer') {
-    attributes.splice(vSlotsIndex, 1)
+  if (dir.value?.type === 'JSXExpressionContainer') {
     context.slots = [
       {
         slotType: IRSlotType.EXPRESSION,
-        slots: resolveExpression(vSlotsDir.value.expression, context),
+        slots: resolveExpression(dir.value.expression, context),
       },
     ]
 
-    if (children.length) {
+    if (node.children.length) {
       context.options.onError(
         createCompilerError(
           ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE,
-          resolveLocation(children[0].loc, context),
+          resolveLocation(node.children[0].loc, context),
         ),
       )
     }

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

@@ -15,13 +15,13 @@ const compileWithSlots = makeCompile({
   nodeTransforms: [
     transformText,
     transformElement,
-    transformVSlots,
     transformVSlot,
     transformChildren,
   ],
   directiveTransforms: {
     bind: transformVBind,
     on: transformVOn,
+    slots: transformVSlots,
   },
 })