feat(compiler): support native v-slot directive

Author: zhiyuanzmj

packages/compiler/src/compile.ts

@@ -17,6 +17,7 @@ import { transformText } from './transforms/transformText'
 import { transformVBind } from './transforms/vBind'
 import { transformVOn } from './transforms/vOn'
 import { transformVSlot } from './transforms/vSlot'
+import { transformVSlots } from './transforms/vSlots'
 import { transformVModel } from './transforms/vModel'
 import { transformVShow } from './transforms/vShow'
 import { transformVHtml } from './transforms/vHtml'
@@ -113,6 +114,7 @@ export function getBaseTransformPreset(): TransformPreset {
       transformTemplateRef,
       transformText,
       transformElement,
+      transformVSlots,
       transformVSlot,
       transformChildren,
     ],

packages/compiler/src/index.ts

@@ -17,6 +17,7 @@ export { transformTemplateRef } from './transforms/transformTemplateRef'
 export { transformVBind } from './transforms/vBind'
 export { transformVOn } from './transforms/vOn'
 export { transformVSlot } from './transforms/vSlot'
+export { transformVSlots } from './transforms/vSlots'
 export { transformVModel } from './transforms/vModel'
 export { transformVShow } from './transforms/vShow'
 export { transformVHtml } from './transforms/vHtml'

packages/compiler/src/transform.ts

@@ -19,7 +19,7 @@ import {
   type RootNode,
 } from './ir'
 import { newBlock, newDynamic } from './transforms/utils'
-import { findProp, getText, isConstantExpression } from './utils'
+import { findProp, getText, isConstantExpression, isTemplate } from './utils'
 import type { JSXAttribute, JSXElement, JSXFragment } from '@babel/types'
 
 export type NodeTransform = (
@@ -267,11 +267,11 @@ export function createStructuralDirectiveTransform(
   return (node, context) => {
     if (node.type === 'JSXElement') {
       const {
-        openingElement: { attributes, name },
+        openingElement: { attributes },
       } = node
       // structural directive transforms are not concerned with slots
       // as they are handled separately in vSlot.ts
-      if (getText(name, context) === 'template' && findProp(node, 'v-slot')) {
+      if (isTemplate(node) && findProp(node, 'v-slot')) {
         return
       }
       const exitFns = []

packages/compiler/src/transforms/transformChildren.ts

@@ -4,14 +4,14 @@ import {
   type TransformContext,
   transformNode,
 } from '../transform'
-import { isJSXComponent } from '../utils'
+import { isJSXComponent, isTemplate } from '../utils'
 import type { Node } from '@babel/types'
 
 export const transformChildren: NodeTransform = (node, context) => {
   const isFragment =
     node.type === IRNodeTypes.ROOT ||
     node.type === 'JSXFragment' ||
-    isJSXComponent(node)
+    (node.type === 'JSXElement' && (isTemplate(node) || isJSXComponent(node)))
 
   if (node.type !== 'JSXElement' && !isFragment) return
 

packages/compiler/src/transforms/transformElement.ts

@@ -14,6 +14,7 @@ import {
 } from '../ir'
 import {
   isJSXComponent,
+  isTemplate,
   resolveExpression,
   resolveSimpleExpression,
 } from '../utils'
@@ -36,7 +37,7 @@ const isDirectiveRegex = /^v-[a-z]/
 export const transformElement: NodeTransform = (node, context) => {
   return function postTransformElement() {
     ;({ node } = context)
-    if (node.type !== 'JSXElement') return
+    if (node.type !== 'JSXElement' || isTemplate(node)) return
 
     const {
       openingElement: { name },
@@ -54,10 +55,19 @@ export const transformElement: NodeTransform = (node, context) => {
       isComponent,
     )
 
+    let { parent } = context
+    while (
+      parent &&
+      parent.parent &&
+      parent.node.type === 'JSXElement' &&
+      isTemplate(parent.node)
+    ) {
+      parent = parent.parent
+    }
     const singleRoot =
-      context.root === context.parent &&
-      context.parent.node.children.filter((child) => !isJSXComponent(child))
-        .length === 1
+      context.root === parent &&
+      parent.node.children.filter((child) => !isJSXComponent(child)).length ===
+        1
     ;(isComponent ? transformComponentElement : transformNativeElement)(
       tag,
       propsResult,
@@ -248,6 +258,7 @@ function transformProp(
       : prop.name.type === 'JSXNamespacedName'
         ? prop.name.namespace.name
         : ''
+  name = name.split('_')[0]
 
   if (
     !isDirectiveRegex.test(name) &&

packages/compiler/src/transforms/transformText.ts

@@ -8,6 +8,7 @@ import {
   getLiteralExpressionValue,
   isEmptyText,
   isJSXComponent,
+  isTemplate,
   resolveExpression,
   resolveJSXText,
 } from '../utils'
@@ -35,6 +36,7 @@ export const transformText: NodeTransform = (node, context) => {
 
   if (
     node.type === 'JSXElement' &&
+    !isTemplate(node) &&
     !(isJSXComponent(node) as boolean) &&
     isAllTextLike(node.children)
   ) {

packages/compiler/src/transforms/utils.ts

@@ -14,6 +14,7 @@ import {
   type IRDynamicInfo,
   type IRNodeTypes,
 } from '../ir/index'
+import { isTemplate } from '../utils'
 import type { TransformContext } from '../transform'
 
 export function newDynamic(): IRDynamicInfo {
@@ -48,10 +49,8 @@ export function createBranch(
   return [branch, exitBlock]
 }
 
-export function wrapFragment(
-  node: JSXElement | JSXFragment | Expression,
-): JSXFragment {
-  if (node.type === 'JSXFragment') {
+export function wrapFragment(node: JSXElement | JSXFragment | Expression) {
+  if (node.type === 'JSXFragment' || isTemplate(node)) {
     return node
   }
 

packages/compiler/src/transforms/vFor.ts

@@ -2,27 +2,24 @@ import {
   ErrorCodes,
   type SimpleExpressionNode,
   createCompilerError,
-  forAliasRE,
   isConstantNode,
 } from '@vue/compiler-dom'
-import { parseExpression } from '@babel/parser'
 import { DynamicFlag, IRNodeTypes } from '../ir'
 import {
   findProp,
-  getText,
   isJSXComponent,
   propToExpression,
   resolveExpression,
+  resolveExpressionWithFn,
   resolveLocation,
-  resolveSimpleExpression,
 } from '../utils'
 import {
   type NodeTransform,
   type TransformContext,
   createStructuralDirectiveTransform,
 } from '../transform'
 import { createBranch } from './utils'
-import type { JSXAttribute, JSXElement, Node } from '@babel/types'
+import type { JSXAttribute, JSXElement } from '@babel/types'
 
 export const transformVFor: NodeTransform = createStructuralDirectiveTransform(
   'for',
@@ -34,16 +31,8 @@ export function processFor(
   dir: JSXAttribute,
   context: TransformContext,
 ) {
-  if (!dir.value) {
-    context.options.onError(
-      createCompilerError(
-        ErrorCodes.X_V_FOR_NO_EXPRESSION,
-        resolveLocation(dir.loc, context),
-      ),
-    )
-    return
-  }
-  if (!forAliasRE) {
+  const { value, index, key, source } = getForParseResult(dir, context)
+  if (!source) {
     context.options.onError(
       createCompilerError(
         ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION,
@@ -53,25 +42,6 @@ export function processFor(
     return
   }
 
-  let value: SimpleExpressionNode | undefined,
-    index: SimpleExpressionNode | undefined,
-    key: SimpleExpressionNode | undefined,
-    source: SimpleExpressionNode
-  if (
-    dir.value.type === 'JSXExpressionContainer' &&
-    dir.value.expression.type === 'BinaryExpression'
-  ) {
-    if (dir.value.expression.left.type === 'SequenceExpression') {
-      const expressions = dir.value.expression.left.expressions
-      value = expressions[0] && resolveValueExpression(expressions[0], context)
-      key = expressions[1] && resolveExpression(expressions[1], context)
-      index = expressions[2] && resolveExpression(expressions[2], context)
-    } else {
-      value = resolveValueExpression(dir.value.expression.left, context)
-    }
-    source = resolveExpression(dir.value.expression.right, context)
-  }
-
   const keyProp = findProp(node, 'key')
   const keyProperty = keyProp && propToExpression(keyProp, context)
   const isComponent = isJSXComponent(node)
@@ -106,16 +76,43 @@ export function processFor(
   }
 }
 
-function resolveValueExpression(node: Node, context: TransformContext) {
-  const text = getText(node, context)
-  return node.type === 'Identifier'
-    ? resolveSimpleExpression(text, false, node.loc)
-    : resolveSimpleExpression(
-        text,
-        false,
-        node.loc,
-        parseExpression(`(${text})=>{}`, {
-          plugins: ['typescript'],
-        }),
-      )
+export function getForParseResult(
+  dir: JSXAttribute,
+  context: TransformContext,
+) {
+  let value: SimpleExpressionNode | undefined,
+    index: SimpleExpressionNode | undefined,
+    key: SimpleExpressionNode | undefined,
+    source: SimpleExpressionNode | undefined
+  if (dir.value) {
+    if (
+      dir.value.type === 'JSXExpressionContainer' &&
+      dir.value.expression.type === 'BinaryExpression'
+    ) {
+      if (dir.value.expression.left.type === 'SequenceExpression') {
+        const expressions = dir.value.expression.left.expressions
+        value =
+          expressions[0] && resolveExpressionWithFn(expressions[0], context)
+        key = expressions[1] && resolveExpression(expressions[1], context)
+        index = expressions[2] && resolveExpression(expressions[2], context)
+      } else {
+        value = resolveExpressionWithFn(dir.value.expression.left, context)
+      }
+      source = resolveExpression(dir.value.expression.right, context)
+    }
+  } else {
+    context.options.onError(
+      createCompilerError(
+        ErrorCodes.X_V_FOR_NO_EXPRESSION,
+        resolveLocation(dir.loc, context),
+      ),
+    )
+  }
+
+  return {
+    value,
+    index,
+    key,
+    source,
+  }
 }