feat(compiler): support v-slot

zhiyuanzmj · zhiyuanzmj · commit a5fe2b06ee5b · 2024-07-04T02:43:46.000+08:00
diff --git a/package.json b/package.json
@@ -159,5 +159,10 @@
     "vite": "^5.3.2",
     "vitest": "^1.6.0",
     "webpack": "^5.92.1"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "@vue-vapor/compiler-vapor@3.20240702.0-b44ca85": "patches/@vue-vapor__compiler-vapor@3.20240702.0-b44ca85.patch"
+    }
   }
 }
diff --git a/patches/@vue-vapor__compiler-vapor@3.20240702.0-b44ca85.patch b/patches/@vue-vapor__compiler-vapor@3.20240702.0-b44ca85.patch
@@ -0,0 +1,13 @@
+diff --git a/dist/compiler-vapor.cjs.js b/dist/compiler-vapor.cjs.js
+index 8f54d6d74f28eef89b0c9234de66fa02d95d477a..eb05dacd92822ab1b12e3025a0d97204f53fc530 100644
+--- a/dist/compiler-vapor.cjs.js
++++ b/dist/compiler-vapor.cjs.js
+@@ -1392,7 +1392,7 @@ function genRawSlots(slots, context) {
+   return genMulti(
+     DELIMITERS_ARRAY_NEWLINE,
+     ...slots.map(
+-      (slot) => slot.slotType === 0 ? genStaticSlots(slot, context) : genDynamicSlot(slot, context, true)
++      (slot) => slot.slotType === 0 ? genStaticSlots(slot, context) : slot.slotType === 4 ? slot.slots.content : genDynamicSlot(slot, context, true)
+     )
+   );
+ }
diff --git a/playground/App.vue b/playground/App.vue
@@ -3,6 +3,7 @@ import { defineComponent, ref } from 'vue'
 import Count2 from './Count.vue'
 import If from './if.vue'
 import For from './for.vue'
+import Slot from './slot.vue'
 
 export default defineComponent({
   setup() {
@@ -39,6 +40,11 @@ export default defineComponent({
           <legend>v-for</legend>
           <For></For>
         </fieldset>
+
+        <fieldset>
+          <legend>v-slot</legend>
+          <Slot></Slot>
+        </fieldset>
       </>
     )
   },
diff --git a/playground/for.vue b/playground/for.vue
@@ -6,7 +6,7 @@ export default defineComponent({
     const count = ref(3)
 
     return (
-      <div style="text-align:center">
+      <div>
         <input value={count.value} onInput={e => count.value = e.target.value} type="number" />
 
         {Array.from({length: count.value}).map((item,index) =>{
diff --git a/playground/slot.vue b/playground/slot.vue
@@ -0,0 +1,15 @@
+<script lang="tsx">
+import { defineComponent } from 'vue'
+
+const Comp = (props, { slots }) => (
+  <>{slots.default ? <slots.default /> : <div>default slot</div>}</>
+)
+
+let slots = { default: () => <div>foo</div> }
+
+export default defineComponent({
+  setup(props) {
+    return <Comp v-slots={slots}></Comp>
+  },
+})
+</script>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/core/compiler/compile.ts b/src/core/compiler/compile.ts
@@ -5,11 +5,11 @@ import {
   defaultOnError,
 } from '@vue-vapor/compiler-dom'
 import { extend, isString } from '@vue-vapor/shared'
+import { babelParse } from '@vue-macros/common'
 import {
   type VaporCodegenResult as BaseVaporCodegenResult,
   generate,
 } from '@vue-vapor/compiler-vapor'
-import { babelParse } from '@vue-macros/common'
 import {
   type DirectiveTransform,
   type NodeTransform,
@@ -27,6 +27,7 @@ import {
 import { transformText } from './transforms/transformText'
 import { transformVBind } from './transforms/vBind'
 import { transformVOn } from './transforms/vOn'
+import { transformVSlot } from './transforms/vSlot'
 import type { JSXElement, JSXFragment, Program } from '@babel/types'
 
 export interface VaporCodegenResult
@@ -124,7 +125,7 @@ export function getBaseTransformPreset(
   prefixIdentifiers?: boolean,
 ): TransformPreset {
   return [
-    [transformText, transformElement, transformChildren],
+    [transformText, transformElement, transformVSlot, transformChildren],
     {
       bind: transformVBind,
       on: transformVOn,
diff --git a/src/core/compiler/index.ts b/src/core/compiler/index.ts
@@ -15,3 +15,4 @@ export { transformElement } from './transforms/transformElement'
 export { transformChildren } from './transforms/transformChildren'
 export { transformVBind } from './transforms/vBind'
 export { transformVOn } from './transforms/vOn'
+export { transformVSlot } from './transforms/vSlot'
diff --git a/src/core/compiler/ir/component.ts b/src/core/compiler/ir/component.ts
@@ -37,6 +37,7 @@ export enum IRSlotType {
   DYNAMIC,
   LOOP,
   CONDITIONAL,
+  EXPRESSION,
 }
 export interface IRSlotsStatic {
   slotType: IRSlotType.STATIC
@@ -59,9 +60,13 @@ export interface IRSlotDynamicConditional {
   positive: IRSlotDynamicBasic
   negative?: IRSlotDynamicBasic | IRSlotDynamicConditional
 }
+export interface IRSlotsExpression {
+  slotType: IRSlotType.EXPRESSION
+  slots: SimpleExpressionNode
+}
 
 export type IRSlotDynamic =
   | IRSlotDynamicBasic
   | IRSlotDynamicLoop
   | IRSlotDynamicConditional
-export type IRSlots = IRSlotsStatic | IRSlotDynamic
+export type IRSlots = IRSlotsStatic | IRSlotDynamic | IRSlotsExpression
diff --git a/src/core/compiler/transforms/transformChildren.ts b/src/core/compiler/transforms/transformChildren.ts
@@ -4,13 +4,16 @@ import {
   type TransformContext,
   transformNode,
 } from '../transform'
+import { isComponentNode } from '../utils'
 import type { Node } from '@babel/types'
 
 export const transformChildren: NodeTransform = (node, context) => {
   const isFragment =
-    node.type === IRNodeTypes.ROOT || node.type === 'JSXFragment'
+    node.type === IRNodeTypes.ROOT ||
+    node.type === 'JSXFragment' ||
+    isComponentNode(node)
 
-  if (!isFragment && node.type !== 'JSXElement') return
+  if (node.type !== 'JSXElement' && !isFragment) return
 
   Array.from(node.children).forEach((child, index) => {
     if (child.type === 'JSXText' && !child.value.trim()) {
diff --git a/src/core/compiler/transforms/vSlot.ts b/src/core/compiler/transforms/vSlot.ts
@@ -0,0 +1,86 @@
+import {
+  IRSlotType,
+  type IRSlots,
+  type IRSlotsStatic,
+  type SlotBlockIRNode,
+} from '../ir'
+import { isComponentNode, resolveExpression } from '../utils'
+import {  newBlock } from './utils'
+import type { JSXAttribute, JSXElement } from '@babel/types'
+import type { NodeTransform, TransformContext } from '../transform'
+
+export const transformVSlot: NodeTransform = (node, context) => {
+  if (node.type !== 'JSXElement') return
+  if (!isComponentNode(node)) return
+
+  const { openingElement, children } = node
+  const vSlotsIndex = openingElement.attributes.findIndex(
+    (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'v-slots',
+  )
+  const vSlotsDir = openingElement.attributes[vSlotsIndex] as JSXAttribute
+  if (vSlotsDir && vSlotsDir.value?.type === 'JSXExpressionContainer') {
+    node.openingElement.attributes.splice(vSlotsIndex, 1)
+    context.slots = [
+      {
+        slotType: IRSlotType.EXPRESSION,
+        slots: resolveExpression(vSlotsDir.value.expression, context),
+      },
+    ]
+  }
+
+  if (children.length) {
+    return transformComponentSlot(node, context)
+  }
+}
+
+function transformComponentSlot(node: JSXElement, context: TransformContext) {
+  const { children } = node
+  const nonWhitespaceChildren = children.filter(() =>
+    isNonWhitespaceContent(node),
+  )
+
+  const [block, onExit] = createSlotBlock(node, context)
+
+  const { slots } = context
+
+  return () => {
+    onExit()
+
+    if (nonWhitespaceChildren.length) {
+      registerSlot(slots, block)
+      context.slots = slots
+    }
+  }
+}
+
+function ensureStaticSlots(slots: IRSlots[]): IRSlotsStatic {
+  let lastSlots = slots.at(-1)!
+  if (!slots.length || lastSlots.slotType !== IRSlotType.STATIC) {
+    slots.push(
+      (lastSlots = {
+        slotType: IRSlotType.STATIC,
+        slots: {},
+      }),
+    )
+  }
+  return lastSlots
+}
+
+function registerSlot(slots: IRSlots[], block: SlotBlockIRNode) {
+  const staticSlots = ensureStaticSlots(slots)
+  staticSlots.slots.default = block
+}
+
+function createSlotBlock(
+  slotNode: JSXElement,
+  context: TransformContext,
+): [SlotBlockIRNode, () => void] {
+  const block: SlotBlockIRNode = newBlock(slotNode)
+  const exitBlock = context.enterBlock(block)
+  return [block, exitBlock]
+}
+
+function isNonWhitespaceContent(node: JSXElement['children'][0]): boolean {
+  if (node.type !== 'JSXText') return true
+  return !!node.value.trim()
+}
diff --git a/src/core/compiler/utils.ts b/src/core/compiler/utils.ts
@@ -154,7 +154,9 @@ export function resolveLocation(
       }
 }
 
-export function isComponentNode(node: JSXElement) {
+export function isComponentNode(node: Node): node is JSXElement {
+  if (node.type !== 'JSXElement') return false
+
   const { openingElement } = node
   if (openingElement.name.type === 'JSXIdentifier') {
     const name = openingElement.name.name
diff --git a/test/transforms/_utils.ts b/test/transforms/_utils.ts
@@ -32,6 +32,7 @@ export function makeCompile(options: CompilerOptions = {}) {
     }
     const ir = transform(ast, {
       prefixIdentifiers: true,
+      expressionPlugins: ['typescript', 'jsx'],
       ...options,
       ...overrideOptions,
     }) as any
diff --git a/test/transforms/vSlot.spec.ts b/test/transforms/vSlot.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -159,5 +159,10 @@`
`159`	`159`	`"vite": "^5.3.2",`
`160`	`160`	`"vitest": "^1.6.0",`
`161`	`161`	`"webpack": "^5.92.1"`
	`162`	`+ },`
	`163`	`+ "pnpm": {`
	`164`	`+ "patchedDependencies": {`
	`165`	`+ "@vue-vapor/[email protected]": "patches/@[email protected]"`
	`166`	`+ }`
`162`	`167`	`}`
`163`	`168`	`}`