feat: v-let work with v-if and v-for

Author: edison1105

packages/compiler-core/__tests__/transforms/__snapshots__/vLet.spec.ts.snap

@@ -9,6 +9,12 @@ export function render(_ctx, _cache) {
       ((b=a+_ctx.baz) => _createElementVNode("span", null, [
         _createTextVNode(_toDisplayString(b), 1 /* TEXT */)
       ]))()
+    ]))(),
+    ((x=_ctx.y=_ctx.z) => _createElementVNode("div", null, [
+      _createTextVNode(_toDisplayString(x) + _toDisplayString(_ctx.y) + _toDisplayString(_ctx.z), 1 /* TEXT */)
+    ]))(),
+    ((exp=_ctx.getExp()) => _createElementVNode("div", null, [
+      _createTextVNode(_toDisplayString(exp), 1 /* TEXT */)
     ]))()
   ]))
 }"
@@ -40,6 +46,34 @@ export function render(_ctx, _cache) {
 }"
 `;
 
+exports[`compiler: v-let transform ok v-if 1`] = `
+"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from "vue"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, [
+    (_ctx.ok)
+      ? ((a=true) => (_openBlock(), _createElementBlock("div", { key: 0 }, [
+          _createTextVNode(_toDisplayString(a), 1 /* TEXT */)
+        ])))()
+      : _createCommentVNode("v-if", true)
+  ]))
+}"
+`;
+
+exports[`compiler: v-let transform on v-for 1`] = `
+"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode } from "vue"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, [
+    (_openBlock(), _createElementBlock(_Fragment, null, _renderList([1,2,3], (i) => {
+      return ((a=i+1) => _createElementVNode("div", null, [
+        _createTextVNode(_toDisplayString(a), 1 /* TEXT */)
+      ]))()
+    }), 64 /* STABLE_FRAGMENT */))
+  ]))
+}"
+`;
+
 exports[`compiler: v-let transform should work 1`] = `
 "import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 

packages/compiler-core/__tests__/transforms/vLet.spec.ts

@@ -1,10 +1,11 @@
-import { baseCompile } from '../../src'
+import { baseCompile, CompilerOptions } from '../../src'
 
 describe('compiler: v-let transform', () => {
-  function compile(content: string) {
+  function compile(content: string, options: CompilerOptions = {}) {
     return baseCompile(`<div>${content}</div>`, {
       mode: 'module',
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
+      ...options
     }).code
   }
 
@@ -13,35 +14,76 @@ describe('compiler: v-let transform', () => {
   })
 
   test('multiple declare', () => {
-    expect(compile(
-      `<div v-let="a=1,  b=2">
+    expect(
+      compile(
+        `<div v-let="a=1,  b=2">
         {{a}} {{b}}
       </div>`
-    )).toMatchSnapshot()
+      )
+    ).toMatchSnapshot()
   })
 
   test('nested v-let', () => {
-    expect(compile(
-      `<div v-let="a=1">
+    expect(
+      compile(
+        `<div v-let="a=1">
         <span v-let="b=1">{{a}}{{b}}</span>
       </div>`
-    )).toMatchSnapshot()
+      )
+    ).toMatchSnapshot()
   })
 
   test('work with variable', () => {
-    expect(compile(
-      `<div v-let="a=msg">
+    expect(
+      compile(
+        `<div v-let="a=msg">
         <span v-let="b=a">{{b}}</span>
       </div>`
-    )).toMatchSnapshot()
+      )
+    ).toMatchSnapshot()
   })
 
   test('complex expression', () => {
-    expect(compile(
-      `<div v-let="a=foo+bar">
-        <span v-let="b=a+baz">{{b}}</span>
-      </div>`
-    )).toMatchSnapshot()
+    expect(
+      compile(`
+        <div v-let="a=foo+bar">
+          <span v-let="b=a+baz">{{b}}</span>
+        </div>
+        <div v-let="x=y=z">{{x}}{{y}}{{z}}</div>
+        <div v-let="exp=getExp()">{{exp}}</div>
+        `)
+    ).toMatchSnapshot()
+  })
+
+  test('on v-for', () => {
+    expect(
+      compile(`
+      <div v-for="i in [1,2,3]" v-let="a=i+1">
+        {{ a }}
+      </div>
+    `)
+    ).toMatchSnapshot()
   })
 
+  test('ok v-if', () => {
+    expect(
+      compile(`
+      <div v-if="ok" v-let="a=true" >
+        {{ a }}
+      </div>
+    `)
+    ).toMatchSnapshot()
+  })
+
+  test('error', () => {
+    const onError = jest.fn()
+    expect(compile(`<div v-let="a=,b=1">{{a}}</div>`, { onError }))
+    expect(onError.mock.calls).toMatchInlineSnapshot(`
+      [
+        [
+          [SyntaxError: Error parsing JavaScript expression: Unexpected token (1:3)],
+        ],
+      ]
+    `)
+  })
 })

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

@@ -61,6 +61,7 @@ export const transformFor = createStructuralDirectiveTransform(
       ]) as ForRenderListExpression
       const isTemplate = isTemplateNode(node)
       const memo = findDir(node, 'memo')
+      const vLet = findDir(node, 'let')
       const keyProp = findProp(node, `key`)
       const keyExp =
         keyProp &&
@@ -228,10 +229,19 @@ export const transformFor = createStructuralDirectiveTransform(
             createSimpleExpression(String(context.cached++))
           )
         } else {
+          let child
+          if (vLet) {
+            child = createCallExpression(
+              createFunctionExpression([vLet.exp!], childBlock)
+            )
+          } else {
+            child = childBlock
+          }
+
           renderExp.arguments.push(
             createFunctionExpression(
               createForLoopParams(forNode.parseResult),
-              childBlock,
+              child,
               true /* force newline */
             ) as ForIteratorExpression
           )

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

@@ -23,7 +23,10 @@ import {
   locStub,
   CacheExpression,
   ConstantTypes,
-  MemoExpression
+  MemoExpression,
+  VNodeCall,
+  CallExpression,
+  FunctionExpression
 } from '../ast'
 import { createCompilerError, ErrorCodes } from '../errors'
 import { processExpression } from './transformExpression'
@@ -298,7 +301,12 @@ function createChildrenCodegenNode(
     const ret = (firstChild as ElementNode).codegenNode as
       | BlockCodegenNode
       | MemoExpression
-    const vnodeCall = getMemoedVNodeCall(ret)
+
+    const vnodeCall = findDir(firstChild, 'let')
+      ? (((ret as CallExpression).callee as FunctionExpression)
+          .returns as VNodeCall)
+      : getMemoedVNodeCall(ret)
+
     // Change createVNode to createBlock.
     if (vnodeCall.type === NodeTypes.VNODE_CALL) {
       makeBlock(vnodeCall, context)

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

@@ -38,4 +38,28 @@ describe('ssr: v-let', () => {
       }"
     `)
   })
+
+  test('ok v-if', () => {
+    expect(
+      compile(`
+      <div v-if="ok" v-let="a=true" >
+        {{ a }}
+      </div>
+    `).code
+    ).toMatchInlineSnapshot(`
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        if (_ctx.ok) {
+          _push(\`<div\${_ssrRenderAttrs(_attrs)}>\`)
+          ;((a=true) => {
+            _push(\`\${_ssrInterpolate(a)}\`)
+          })()
+          _push(\`</div>\`)
+        } else {
+          _push(\`<!---->\`)
+        }
+      }"
+    `)
+  })
 })