chore: minor tweaks

Author: yyx990803

packages/compiler-core/src/transforms/vSlot.ts

@@ -100,12 +100,12 @@ export const trackVForSlotScopes: NodeTransform = (node, context) => {
 
 export type SlotFnBuilder = (
   slotProps: ExpressionNode | undefined,
-  vForProps: ExpressionNode | undefined,
+  vForExp: ExpressionNode | undefined,
   slotChildren: TemplateChildNode[],
   loc: SourceLocation
 ) => FunctionExpression
 
-const buildClientSlotFn: SlotFnBuilder = (props, _vFor, children, loc) =>
+const buildClientSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) =>
   createFunctionExpression(
     props,
     children,
@@ -139,9 +139,6 @@ export function buildSlots(
     hasDynamicSlots = hasScopeRef(node, context.identifiers)
   }
 
-  let vFor: DirectiveNode | undefined
-  let vForProps: ExpressionNode | undefined
-
   // 1. Check for slot with slotProps on component itself.
   //    <Comp v-slot="{ prop }"/>
   const onComponentSlot = findDir(node, 'slot', true)
@@ -150,12 +147,10 @@ export function buildSlots(
     if (arg && !isStaticExp(arg)) {
       hasDynamicSlots = true
     }
-    vFor = findDir(node, 'for')
-    if (vFor) vForProps = vFor.exp
     slotsProperties.push(
       createObjectProperty(
         arg || createSimpleExpression('default', true),
-        buildSlotFn(exp, vForProps, children, loc)
+        buildSlotFn(exp, undefined, children, loc)
       )
     )
   }
@@ -207,12 +202,10 @@ export function buildSlots(
       hasDynamicSlots = true
     }
 
-    vFor = findDir(slotElement, 'for')
-    if (vFor) vForProps = vFor.exp
-    else vForProps = undefined
+    const vFor = findDir(slotElement, 'for')
     const slotFunction = buildSlotFn(
       slotProps,
-      vForProps,
+      vFor?.exp,
       slotChildren,
       slotLoc
     )

packages/compiler-ssr/__tests__/ssrComponent.spec.ts

@@ -181,27 +181,30 @@ describe('ssr: components', () => {
     })
 
     test('v-for slot', () => {
-      expect(
-        compile(`<foo>
-        <template v-for="key in names" v-slot:[key]="{ msg }">{{ msg + key + bar }}</template>
-      </foo>`).code
-      ).toMatchInlineSnapshot(`
+      const { code } = compile(`<foo>
+      <template v-for="(key, index) in names" v-slot:[key]="{ msg }">{{ msg + key + index + bar }}</template>
+    </foo>`)
+      expect(code).not.toMatch(`_ctx.msg`)
+      expect(code).not.toMatch(`_ctx.key`)
+      expect(code).not.toMatch(`_ctx.index`)
+      expect(code).toMatch(`_ctx.bar`)
+      expect(code).toMatchInlineSnapshot(`
         "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require(\\"vue\\")
         const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           const _component_foo = _resolveComponent(\\"foo\\")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
-            _renderList(_ctx.names, (key) => {
+            _renderList(_ctx.names, (key, index) => {
               return {
                 name: key,
                 fn: _withCtx(({ msg }, _push, _parent, _scopeId) => {
                   if (_push) {
-                    _push(\`\${_ssrInterpolate(msg + key + _ctx.bar)}\`)
+                    _push(\`\${_ssrInterpolate(msg + key + index + _ctx.bar)}\`)
                   } else {
                     return [
-                      _createTextVNode(_toDisplayString(msg + key + _ctx.bar), 1 /* TEXT */)
+                      _createTextVNode(_toDisplayString(msg + key + index + _ctx.bar), 1 /* TEXT */)
                     ]
                   }
                 })

packages/compiler-ssr/src/transforms/ssrTransformComponent.ts

@@ -152,7 +152,7 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
     const wipEntries: WIPSlotEntry[] = []
     wipMap.set(node, wipEntries)
 
-    const buildSSRSlotFn: SlotFnBuilder = (props, _vFor, children, loc) => {
+    const buildSSRSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) => {
       const param0 = (props && stringifyExpression(props)) || `_`
       const fn = createFunctionExpression(
         [param0, `_push`, `_parent`, `_scopeId`],
@@ -279,7 +279,7 @@ const vnodeDirectiveTransforms = {
 
 function createVNodeSlotBranch(
   props: ExpressionNode | undefined,
-  vFor: ExpressionNode | undefined,
+  vForExp: ExpressionNode | undefined,
   children: TemplateChildNode[],
   parentContext: TransformContext
 ): ReturnStatement {
@@ -306,8 +306,8 @@ function createVNodeSlotBranch(
     tag: 'template',
     tagType: ElementTypes.TEMPLATE,
     isSelfClosing: false,
-    // important: provide v-slot="props" and v-for="exp" on the wrapper for proper
-    // scope analysis
+    // important: provide v-slot="props" and v-for="exp" on the wrapper for
+    // proper scope analysis
     props: [
       {
         type: NodeTypes.DIRECTIVE,
@@ -320,7 +320,7 @@ function createVNodeSlotBranch(
       {
         type: NodeTypes.DIRECTIVE,
         name: 'for',
-        exp: vFor,
+        exp: vForExp,
         arg: undefined,
         modifiers: [],
         loc: locStub

packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts

@@ -39,7 +39,7 @@ export function ssrTransformSuspense(
       wipEntry.slotsExp = buildSlots(
         node,
         context,
-        (_props, _vFor, children, loc) => {
+        (_props, _vForExp, children, loc) => {
           const fn = createFunctionExpression(
             [],
             undefined, // no return, assign body later