WIP: feat v-let

Author: edison1105

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

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`compiler: v-let transform complex expression 1`] = `
+"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    ((a=_ctx.foo+_ctx.bar) => _createElementVNode(\\"div\\", null, [
+      ((b=a+_ctx.baz) => _createElementVNode(\\"span\\", null, [
+        _createTextVNode(_toDisplayString(b), 1 /* TEXT */)
+      ]))()
+    ]))()
+  ]))
+}"
+`;
+
+exports[`compiler: v-let transform multiple declare 1`] = `
+"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    ((a=1,  b=2) => _createElementVNode(\\"div\\", null, [
+      _createTextVNode(_toDisplayString(a) + \\" \\" + _toDisplayString(b), 1 /* TEXT */)
+    ]))()
+  ]))
+}"
+`;
+
+exports[`compiler: v-let transform nested v-let 1`] = `
+"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    ((a=1) => _createElementVNode(\\"div\\", null, [
+      ((b=1) => _createElementVNode(\\"span\\", null, [
+        _createTextVNode(_toDisplayString(a) + _toDisplayString(b), 1 /* TEXT */)
+      ]))()
+    ]))()
+  ]))
+}"
+`;
+
+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\\"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    ((a=1) => _createElementVNode(\\"div\\", null, [
+      _createTextVNode(_toDisplayString(a), 1 /* TEXT */)
+    ]))()
+  ]))
+}"
+`;
+
+exports[`compiler: v-let transform work with variable 1`] = `
+"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    ((a=_ctx.msg) => _createElementVNode(\\"div\\", null, [
+      ((b=a) => _createElementVNode(\\"span\\", null, [
+        _createTextVNode(_toDisplayString(b), 1 /* TEXT */)
+      ]))()
+    ]))()
+  ]))
+}"
+`;

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

@@ -0,0 +1,47 @@
+import { baseCompile } from '../../src'
+
+describe('compiler: v-let transform', () => {
+  function compile(content: string) {
+    return baseCompile(`<div>${content}</div>`, {
+      mode: 'module',
+      prefixIdentifiers: true
+    }).code
+  }
+
+  test('should work', () => {
+    expect(compile(`<div v-let="a=1">{{a}}</div>`)).toMatchSnapshot()
+  })
+
+  test('multiple declare', () => {
+    expect(compile(
+      `<div v-let="a=1,  b=2">
+        {{a}} {{b}}
+      </div>`
+    )).toMatchSnapshot()
+  })
+
+  test('nested v-let', () => {
+    expect(compile(
+      `<div v-let="a=1">
+        <span v-let="b=1">{{a}}{{b}}</span>
+      </div>`
+    )).toMatchSnapshot()
+  })
+
+  test('work with variable', () => {
+    expect(compile(
+      `<div v-let="a=msg">
+        <span v-let="b=a">{{b}}</span>
+      </div>`
+    )).toMatchSnapshot()
+  })
+
+  test('complex expression', () => {
+    expect(compile(
+      `<div v-let="a=foo+bar">
+        <span v-let="b=a+baz">{{b}}</span>
+      </div>`
+    )).toMatchSnapshot()
+  })
+
+})

packages/compiler-core/src/ast.ts

@@ -137,6 +137,7 @@ export interface PlainElementNode extends BaseElementNode {
     | SimpleExpressionNode // when hoisted
     | CacheExpression // when cached by v-once
     | MemoExpression // when cached by v-memo
+    | CallExpression
     | undefined
   ssrCodegenNode?: TemplateLiteral
 }
@@ -323,7 +324,7 @@ export type JSChildNode =
 
 export interface CallExpression extends Node {
   type: NodeTypes.JS_CALL_EXPRESSION
-  callee: string | symbol
+  callee: string | symbol | FunctionExpression
   arguments: (
     | string
     | symbol

packages/compiler-core/src/codegen.ts

@@ -779,11 +779,23 @@ function genNullableArgs(args: any[]): CallExpression['arguments'] {
 // JavaScript
 function genCallExpression(node: CallExpression, context: CodegenContext) {
   const { push, helper, pure } = context
-  const callee = isString(node.callee) ? node.callee : helper(node.callee)
+  let callee 
+  if (isString(node.callee)) {
+    callee = node.callee 
+  } else if (isSymbol(node.callee)) {
+    callee = helper(node.callee)
+  } else {
+    // anonymous function.
+    push(`(`)
+    genNode(node.callee, context)
+    push(`)`)
+  }
+
   if (pure) {
     push(PURE_ANNOTATION)
   }
-  push(callee + `(`, node)
+  callee && push(callee)
+  push(`(`, node)
   genNodeList(node.arguments, context)
   push(`)`)
 }

packages/compiler-core/src/compile.ts

@@ -18,6 +18,7 @@ import { transformModel } from './transforms/vModel'
 import { transformFilter } from './compat/transformFilter'
 import { defaultOnError, createCompilerError, ErrorCodes } from './errors'
 import { transformMemo } from './transforms/vMemo'
+import { trackVLetScopes, transformLet } from './transforms/vLet'
 
 export type TransformPreset = [
   NodeTransform[],
@@ -32,6 +33,7 @@ export function getBaseTransformPreset(
       transformOnce,
       transformIf,
       transformMemo,
+      transformLet,
       transformFor,
       ...(__COMPAT__ ? [transformFilter] : []),
       ...(!__BROWSER__ && prefixIdentifiers
@@ -46,6 +48,7 @@ export function getBaseTransformPreset(
       transformSlotOutlet,
       transformElement,
       trackSlotScopes,
+      trackVLetScopes,
       transformText
     ],
     {

packages/compiler-core/src/index.ts

@@ -52,6 +52,7 @@ export {
   trackVForSlotScopes,
   trackSlotScopes
 } from './transforms/vSlot'
+export { transformLet, trackVLetScopes } from './transforms/vLet'
 export {
   transformElement,
   resolveComponentType,

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

@@ -296,7 +296,7 @@ function getConstantTypeOfHelperCall(
 ): ConstantTypes {
   if (
     value.type === NodeTypes.JS_CALL_EXPRESSION &&
-    !isString(value.callee) &&
+    isSymbol(value.callee) &&
     allowHoistedHelperSet.has(value.callee)
   ) {
     const arg = value.arguments[0] as JSChildNode

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

@@ -69,8 +69,8 @@ export const transformExpression: NodeTransform = (node, context) => {
           dir.exp = processExpression(
             exp,
             context,
-            // slot args must be processed as function params
-            dir.name === 'slot'
+            // slot and let args must be processed as function params
+            dir.name === 'slot' || dir.name === 'let' 
           )
         }
         if (arg && arg.type === NodeTypes.SIMPLE_EXPRESSION && !arg.isStatic) {

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

@@ -0,0 +1,51 @@
+import { NodeTransform } from '../transform'
+import { findDir } from '../utils'
+import {
+  createCallExpression,
+  createFunctionExpression,
+  NodeTypes,
+  PlainElementNode
+} from '../ast'
+
+const seen = new WeakSet()
+
+export const transformLet: NodeTransform = (node, context) => {
+  if (node.type === NodeTypes.ELEMENT) {
+    const dir = findDir(node, 'let')
+    if (!dir || seen.has(node)) {
+      return
+    }
+    seen.add(node)
+    return () => {
+      const codegenNode =
+        node.codegenNode ||
+        (context.currentNode as PlainElementNode).codegenNode
+      if (codegenNode && codegenNode.type === NodeTypes.VNODE_CALL) {
+        node.codegenNode = createCallExpression(createFunctionExpression(
+          [dir.exp!],
+          codegenNode,
+        ))
+      }
+    }
+  }
+}
+
+
+export const trackVLetScopes: NodeTransform = (node, context) => {
+  if (
+    node.type === NodeTypes.ELEMENT
+  ) {
+    const vLet = findDir(node, 'let')
+    if (vLet) {
+      const vLetExp = vLet.exp
+      if (!__BROWSER__ && context.prefixIdentifiers) {
+        vLetExp && context.addIdentifiers(vLetExp)
+      }
+      return () => {
+        if (!__BROWSER__ && context.prefixIdentifiers) {
+          vLetExp && context.removeIdentifiers(vLetExp)
+        }
+      }
+    }
+  }
+}

packages/compiler-core/src/utils.ts

@@ -42,7 +42,7 @@ import {
   WITH_MEMO,
   OPEN_BLOCK
 } from './runtimeHelpers'
-import { isString, isObject, hyphenate, extend, NOOP } from '@vue/shared'
+import { isString, isObject, hyphenate, extend, NOOP, isSymbol } from '@vue/shared'
 import { PropsExpression } from './transforms/transformElement'
 import { parseExpression } from '@babel/parser'
 import { Expression } from '@babel/types'
@@ -351,7 +351,7 @@ function getUnnormalizedProps(
     props.type === NodeTypes.JS_CALL_EXPRESSION
   ) {
     const callee = props.callee
-    if (!isString(callee) && propsHelperSet.has(callee)) {
+    if (isSymbol(callee) && propsHelperSet.has(callee)) {
       return getUnnormalizedProps(
         props.arguments[0] as PropsExpression,
         callPath.concat(props)

packages/shared/src/index.ts

@@ -92,7 +92,7 @@ export const isReservedProp = /*#__PURE__*/ makeMap(
 )
 
 export const isBuiltInDirective = /*#__PURE__*/ makeMap(
-  'bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo'
+  'bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo,let'
 )
 
 const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {