Просмотр исходного кода

refactor(vapor): compact createSlot options into flags

daiwei 3 недель назад
Родитель
Сommit
0007880996

+ 1 - 1
packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap

@@ -291,7 +291,7 @@ export function render(_ctx) {
   const n3 = t0()
   const n1 = _child(n3)
   _setInsertionState(n1, null, 0)
-  const n0 = _createSlot("default", null)
+  const n0 = _createSlot("default")
   _setInsertionState(n3, null, 1)
   const n2 = _createAssetComponent("Comp")
   return n3

+ 2 - 2
packages/compiler-vapor/__tests__/transforms/__snapshots__/logicalIndex.spec.ts.snap

@@ -284,7 +284,7 @@ const t0 = _template("<div><span>A</span>", 1)
 export function render(_ctx) {
   const n1 = t0()
   _setInsertionState(n1, null, 1)
-  const n0 = _createSlot("default", null)
+  const n0 = _createSlot("default")
   return n1
 }"
 `;
@@ -296,7 +296,7 @@ const t0 = _template("<div><span>A", 1)
 export function render(_ctx) {
   const n1 = t0()
   _setInsertionState(n1, 0, 0)
-  const n0 = _createSlot("default", null)
+  const n0 = _createSlot("default")
   return n1
 }"
 `;

+ 9 - 9
packages/compiler-vapor/__tests__/transforms/__snapshots__/transformSlotOutlet.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`compiler: transform <slot> outlets > default slot outlet 1`] = `
 "import { createSlot as _createSlot } from 'vue';
 
 export function render(_ctx) {
-  const n0 = _createSlot("default", null)
+  const n0 = _createSlot("default")
   return n0
 }"
 `;
@@ -52,7 +52,7 @@ exports[`compiler: transform <slot> outlets > dynamically named slot outlet 1`]
 "import { createSlot as _createSlot } from 'vue';
 
 export function render(_ctx) {
-  const n0 = _createSlot(() => (_ctx.foo + _ctx.bar), null)
+  const n0 = _createSlot(() => (_ctx.foo + _ctx.bar))
   return n0
 }"
 `;
@@ -61,7 +61,7 @@ exports[`compiler: transform <slot> outlets > dynamically named slot outlet with
 "import { createSlot as _createSlot } from 'vue';
 
 export function render(_ctx) {
-  const n0 = _createSlot(() => (_ctx.name), null)
+  const n0 = _createSlot(() => (_ctx.name))
   return n0
 }"
 `;
@@ -71,7 +71,7 @@ exports[`compiler: transform <slot> outlets > error on unexpected custom directi
 
 export function render(_ctx) {
   const _directive_foo = _resolveDirective("foo")
-  const n0 = _createSlot("default", null)
+  const n0 = _createSlot("default")
   return n0
 }"
 `;
@@ -80,7 +80,7 @@ exports[`compiler: transform <slot> outlets > error on unexpected custom directi
 "import { createSlot as _createSlot } from 'vue';
 
 export function render(_ctx) {
-  const n0 = _createSlot("default", null)
+  const n0 = _createSlot("default")
   return n0
 }"
 `;
@@ -115,7 +115,7 @@ exports[`compiler: transform <slot> outlets > slot outlet with scopeId and slott
 "import { createSlot as _createSlot } from 'vue';
 
 export function render(_ctx) {
-  const n0 = _createSlot("default", null, null, true)
+  const n0 = _createSlot("default", null, null, 1)
   return n0
 }"
 `;
@@ -124,7 +124,7 @@ exports[`compiler: transform <slot> outlets > slot outlet with scopeId and slott
 "import { createSlot as _createSlot } from 'vue';
 
 export function render(_ctx) {
-  const n0 = _createSlot("default", null)
+  const n0 = _createSlot("default")
   return n0
 }"
 `;
@@ -133,7 +133,7 @@ exports[`compiler: transform <slot> outlets > slot outlet without scopeId should
 "import { createSlot as _createSlot } from 'vue';
 
 export function render(_ctx) {
-  const n0 = _createSlot("default", null)
+  const n0 = _createSlot("default")
   return n0
 }"
 `;
@@ -142,7 +142,7 @@ exports[`compiler: transform <slot> outlets > statically named slot outlet 1`] =
 "import { createSlot as _createSlot } from 'vue';
 
 export function render(_ctx) {
-  const n0 = _createSlot("foo", null)
+  const n0 = _createSlot("foo")
   return n0
 }"
 `;

+ 1 - 1
packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap

@@ -323,7 +323,7 @@ exports[`compiler: v-for > v-for on slot outlet marks fragment block 1`] = `
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
-    const n2 = _createSlot(() => (_for_item0.value.name), null)
+    const n2 = _createSlot(() => (_for_item0.value.name))
     return n2
   }, (item) => (item.id), 16)
   return n0

+ 1 - 1
packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap

@@ -66,7 +66,7 @@ const t0 = _template("<div>", 1)
 export function render(_ctx) {
   const n1 = t0()
   _setInsertionState(n1, null, 0)
-  const n0 = _createSlot("default", null, null, null, true)
+  const n0 = _createSlot("default", null, null, 2)
   return n1
 }"
 `;

+ 8 - 8
packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap

@@ -149,7 +149,7 @@ export function render(_ctx) {
     "default": _withVaporCtx(() => {
       const n1 = _createComponentWithFallback(_component_Comp, null, {
         "default": _withVaporCtx(() => {
-          const n0 = _createSlot("default", null)
+          const n0 = _createSlot("default")
           return n0
         })
       })
@@ -166,7 +166,7 @@ exports[`compiler: transform slot > forwarded slots > <slot> tag only 1`] = `
 export function render(_ctx) {
   const n1 = _createAssetComponent("Comp", null, {
     "default": _withVaporCtx(() => {
-      const n0 = _createSlot("default", null)
+      const n0 = _createSlot("default")
       return n0
     })
   }, true)
@@ -180,7 +180,7 @@ exports[`compiler: transform slot > forwarded slots > <slot> tag w/ template 1`]
 export function render(_ctx) {
   const n2 = _createAssetComponent("Comp", null, {
     "default": _withVaporCtx(() => {
-      const n0 = _createSlot("default", null)
+      const n0 = _createSlot("default")
       return n0
     })
   }, true)
@@ -195,7 +195,7 @@ export function render(_ctx) {
   const n3 = _createAssetComponent("Comp", null, {
     "default": _withVaporCtx(() => {
       const n0 = _createFor(() => (_ctx.b), (_for_item0) => {
-        const n2 = _createSlot("default", null)
+        const n2 = _createSlot("default")
         return n2
       }, undefined, 16)
       return n0
@@ -212,7 +212,7 @@ export function render(_ctx) {
   const n3 = _createAssetComponent("Comp", null, {
     "default": _withVaporCtx(() => {
       const n0 = _createIf(() => (_ctx.ok), () => {
-        const n2 = _createSlot("default", null)
+        const n2 = _createSlot("default")
         return n2
       }, null, 1)
       return n0
@@ -391,7 +391,7 @@ export function render(_ctx) {
   const _component_Bar = _resolveComponent("Bar")
   const n6 = t0()
   _setInsertionState(n6, null, 0)
-  const n0 = _createSlot("foo", null)
+  const n0 = _createSlot("foo")
   _setInsertionState(n6, null, 1)
   const n1 = _createIf(() => (true), () => {
     const n3 = _createComponentWithFallback(_component_Foo)
@@ -603,7 +603,7 @@ export function render(_ctx) {
       _withVaporCtx(() => (_createForSlots(_ctx.slots, (_, name) => ({
         name: name,
         fn: _withVaporCtx(() => {
-          const n0 = _createSlot(() => (name), null)
+          const n0 = _createSlot(() => (name))
           return n0
         })
       }))))
@@ -768,7 +768,7 @@ exports[`compiler: transform slot > withVaporCtx optimization > slot with slot o
 export function render(_ctx) {
   const n2 = _createAssetComponent("Comp", null, {
     "default": _withVaporCtx(() => {
-      const n0 = _createSlot("default", null)
+      const n0 = _createSlot("default")
       return n0
     })
   }, true)

+ 5 - 4
packages/compiler-vapor/__tests__/transforms/transformSlotOutlet.spec.ts

@@ -1,4 +1,5 @@
 import { ErrorCodes, NodeTypes } from '@vue/compiler-dom'
+import { VaporSlotFlags } from '@vue/shared'
 import {
   IRNodeTypes,
   transformChildren,
@@ -284,7 +285,7 @@ describe('compiler: transform <slot> outlets', () => {
       slotted: false,
     })
     expect(code).toMatchSnapshot()
-    expect(code).toContain('true')
+    expect(code).toContain(String(VaporSlotFlags.NO_SLOTTED))
     expect(ir.block.dynamic.children[0].operation).toMatchObject({
       type: IRNodeTypes.SLOT_OUTLET_NODE,
       id: 0,
@@ -295,7 +296,7 @@ describe('compiler: transform <slot> outlets', () => {
       },
       props: [],
       fallback: undefined,
-      noSlotted: true,
+      flags: VaporSlotFlags.NO_SLOTTED,
     })
   })
 
@@ -315,7 +316,7 @@ describe('compiler: transform <slot> outlets', () => {
       },
       props: [],
       fallback: undefined,
-      noSlotted: false,
+      flags: 0,
     })
   })
 
@@ -334,7 +335,7 @@ describe('compiler: transform <slot> outlets', () => {
       },
       props: [],
       fallback: undefined,
-      noSlotted: false,
+      flags: 0,
     })
   })
 })

+ 3 - 4
packages/compiler-vapor/src/generators/slotOutlet.ts

@@ -10,7 +10,7 @@ export function genSlotOutlet(
   context: CodegenContext,
 ): CodeFragment[] {
   const { helper } = context
-  const { id, name, fallback, noSlotted, once } = oper
+  const { id, name, fallback, flags } = oper
   const [frag, push] = buildCodeFragment()
 
   const nameExpr = name.isStatic
@@ -28,10 +28,9 @@ export function genSlotOutlet(
     ...genCall(
       helper('createSlot'),
       nameExpr,
-      genRawProps(oper.props, context) || 'null',
+      genRawProps(oper.props, context),
       fallbackArg,
-      noSlotted && 'true', // noSlotted
-      once && 'true', // v-once
+      flags ? String(flags) : undefined,
     ),
   )
 

+ 1 - 2
packages/compiler-vapor/src/ir/index.ts

@@ -249,8 +249,7 @@ export interface SlotOutletIRNode extends BaseIRNode, EffectBoundary {
   name: SimpleExpressionNode
   props: IRProps[]
   fallback?: BlockIRNode
-  noSlotted?: boolean
-  once?: boolean
+  flags: number
   parent?: number
   anchor?: number
   logicalIndex?: number

+ 10 - 3
packages/compiler-vapor/src/transforms/transformSlotOutlet.ts

@@ -19,7 +19,7 @@ import {
   type IRProps,
   type VaporDirectiveNode,
 } from '../ir'
-import { camelize, extend } from '@vue/shared'
+import { VaporSlotFlags, camelize, extend } from '@vue/shared'
 import { newBlock } from './utils'
 import { buildProps } from './transformElement'
 
@@ -100,6 +100,14 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
 
   return () => {
     exitBlock && exitBlock()
+    let flags = 0
+    if (context.options.scopeId && !context.options.slotted) {
+      flags |= VaporSlotFlags.NO_SLOTTED
+    }
+    if (context.inVOnce) {
+      flags |= VaporSlotFlags.ONCE
+    }
+
     context.dynamic.operation = {
       type: IRNodeTypes.SLOT_OUTLET_NODE,
       id,
@@ -107,8 +115,7 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
       name: slotName,
       props: irProps,
       fallback,
-      noSlotted: !!(context.options.scopeId && !context.options.slotted),
-      once: context.inVOnce,
+      flags,
     }
   }
 }

+ 2 - 7
packages/runtime-vapor/__tests__/componentSlots.spec.ts

@@ -34,6 +34,7 @@ import {
   toDisplayString,
   useSlots,
 } from '@vue/runtime-dom'
+import { VaporSlotFlags } from '@vue/shared'
 import { makeRender } from './_utils'
 import type { DynamicSlot } from '../src/componentSlots'
 import { setElementText, setText } from '../src/dom/prop'
@@ -1780,13 +1781,7 @@ describe('component: slots', () => {
     test('work with v-once', async () => {
       const Child = defineVaporComponent({
         setup() {
-          return createSlot(
-            'default',
-            null,
-            undefined,
-            undefined,
-            true /* once */,
-          )
+          return createSlot('default', null, undefined, VaporSlotFlags.ONCE)
         },
       })
 

+ 2 - 1
packages/runtime-vapor/__tests__/scopeId.spec.ts

@@ -6,6 +6,7 @@ import {
   ref,
   renderSlot,
 } from '@vue/runtime-dom'
+import { VaporSlotFlags } from '@vue/shared'
 import {
   VaporTransition,
   createComponent,
@@ -274,7 +275,7 @@ describe('scopeId', () => {
         // <div><slot/></div>
         const n1 = template('<div wrapper></div>', 1)() as any
         setInsertionState(n1)
-        createSlot('default', null, undefined, true /* noSlotted */)
+        createSlot('default', null, undefined, VaporSlotFlags.NO_SLOTTED)
         return n1
       },
     })

+ 12 - 4
packages/runtime-vapor/src/componentSlots.ts

@@ -1,4 +1,11 @@
-import { EMPTY_OBJ, NO, hasOwn, isArray, isFunction } from '@vue/shared'
+import {
+  EMPTY_OBJ,
+  NO,
+  VaporSlotFlags,
+  hasOwn,
+  isArray,
+  isFunction,
+} from '@vue/shared'
 import { type Block, type BlockFn, insert } from './block'
 import { rawPropsProxyHandlers, resolveFunctionSource } from './componentProps'
 import {
@@ -181,8 +188,7 @@ export function createSlot(
   name: string | (() => string),
   rawProps?: LooseRawProps | null,
   fallback?: VaporSlot,
-  noSlotted?: boolean,
-  once?: boolean,
+  flags: number = 0,
 ): Block {
   if (isInteropEnabled && isCollectingVdomSlotVNodes) {
     // A Vapor <slot/> cannot expose child vnode metadata without real slot
@@ -200,7 +206,8 @@ export function createSlot(
   const slotProps = rawProps
     ? new Proxy(rawProps, rawPropsProxyHandlers)
     : EMPTY_OBJ
-  const scopeId = !noSlotted && instance.type.__scopeId
+  const scopeId =
+    !(flags & VaporSlotFlags.NO_SLOTTED) && instance.type.__scopeId
   const slotScopeIds = scopeId ? [`${scopeId}-s`] : null
 
   let fragment: VaporFragment
@@ -220,6 +227,7 @@ export function createSlot(
     slotFragment.forwarded =
       currentSlotOwner != null && currentSlotOwner !== currentInstance
     const isDynamicName = isFunction(name)
+    const once = !!(flags & VaporSlotFlags.ONCE)
 
     const renderSlot = () => {
       const slotName = isFunction(name) ? name() : name

+ 9 - 0
packages/shared/src/vaporFlags.ts

@@ -44,3 +44,12 @@ export enum TemplateFlags {
   ROOT = 1,
   STATIC = 1 << 1,
 }
+
+/**
+ * Flags used by vapor slot outlets, shared between the compiler and the
+ * runtime.
+ */
+export enum VaporSlotFlags {
+  NO_SLOTTED = 1,
+  ONCE = 1 << 1,
+}