feat: v-let ssr

Author: edison1105

packages/compiler-core/src/codegen.ts

@@ -781,13 +781,14 @@ function genNullableArgs(args: any[]): CallExpression['arguments'] {
 // JavaScript
 function genCallExpression(node: CallExpression, context: CodegenContext) {
   const { push, helper, pure } = context
-  let callee 
+  let callee
   if (isString(node.callee)) {
-    callee = node.callee 
+    callee = node.callee
   } else if (isSymbol(node.callee)) {
     callee = helper(node.callee)
   } else {
     // anonymous function.
+    if (context.inSSR) push(';')
     push(`(`)
     genNode(node.callee, context)
     push(`)`)

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

@@ -0,0 +1,41 @@
+import { compile } from '../src'
+
+describe('ssr: v-let', () => {
+  test('basic', () => {
+    expect(compile(`<div v-let="a=1">{{a}}</div>`).code).toMatchInlineSnapshot(`
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}>\`)
+        ;((a=1) => {
+          _push(\`\${_ssrInterpolate(a)}\`)
+        })()
+        _push(\`</div>\`)
+      }"
+    `)
+  })
+
+  test('nested', () => {
+    expect(
+      compile(
+        `<div v-let="a=1">
+            <div v-let="b=2">{{a}} {{b}}</div>
+        </div>`
+      ).code
+    ).toMatchInlineSnapshot(`
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}>\`)
+        ;((a=1) => {
+          _push(\`<div>\`)
+          ;((b=2) => {
+            _push(\`\${_ssrInterpolate(a)} \${_ssrInterpolate(b)}\`)
+          })()
+          _push(\`</div>\`)
+        })()
+        _push(\`</div>\`)
+      }"
+    `)
+  })
+})

packages/compiler-ssr/src/index.ts

@@ -11,7 +11,8 @@ import {
   noopDirectiveTransform,
   transformBind,
   transformStyle,
-  transformOn
+  transformOn,
+  trackVLetScopes
 } from '@vue/compiler-dom'
 import { ssrCodegenTransform } from './ssrCodegenTransform'
 import { ssrTransformElement } from './transforms/ssrTransformElement'
@@ -65,6 +66,7 @@ export function compile(
       ssrTransformElement,
       ssrTransformComponent,
       trackSlotScopes,
+      trackVLetScopes,
       transformStyle,
       ...(options.nodeTransforms || []) // user transforms
     ],

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

@@ -29,7 +29,9 @@ import {
   AttributeNode,
   buildDirectiveArgs,
   TransformContext,
-  PropsExpression
+  PropsExpression,
+  findDir,
+  createFunctionExpression
 } from '@vue/compiler-dom'
 import {
   escapeHtml,
@@ -51,7 +53,11 @@ import {
   SSR_INCLUDE_BOOLEAN_ATTR,
   SSR_GET_DIRECTIVE_PROPS
 } from '../runtimeHelpers'
-import { SSRTransformContext, processChildren } from '../ssrCodegenTransform'
+import {
+  SSRTransformContext,
+  processChildren,
+  processChildrenAsStatement
+} from '../ssrCodegenTransform'
 
 // for directives with children overwrite (e.g. v-html & v-text), we need to
 // store the raw children so that they can be added in the 2nd pass.
@@ -428,7 +434,15 @@ export function ssrProcessElement(
   if (rawChildren) {
     context.pushStringPart(rawChildren)
   } else if (node.children.length) {
-    processChildren(node, context)
+    // process v-let
+    const dir = findDir(node, 'let')
+    if (dir) {
+      const letFn = createFunctionExpression(dir.exp!)
+      letFn.body = processChildrenAsStatement(node, context)
+      context.pushStatement(createCallExpression(letFn))
+    } else {
+      processChildren(node, context)
+    }
   }
 
   if (!isVoidTag(node.tag)) {