refactor: rename to v-scope

Author: edison1105

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

@@ -1,38 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`compiler: v-let transform complex expression 1`] = `
+exports[`compiler: v-scope 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, [
+    ((a=_ctx.foo + _ctx.bar) => _createElementVNode("div", null, [
+      ((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 */)
     ]))()
   ]))
 }"
 `;
 
-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`] = `
+exports[`compiler: v-scope transform nested v-scope 1`] = `
 "import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
@@ -46,7 +31,7 @@ export function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: v-let transform ok v-if 1`] = `
+exports[`compiler: v-scope 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) {
@@ -60,7 +45,7 @@ export function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: v-let transform on v-for 1`] = `
+exports[`compiler: v-scope 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) {
@@ -74,19 +59,19 @@ export function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: v-let transform should work 1`] = `
+exports[`compiler: v-scope 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 */)
+    ((a=1, b=2) => _createElementVNode("div", null, [
+      _createTextVNode(_toDisplayString(a) + " " + _toDisplayString(b), 1 /* TEXT */)
     ]))()
   ]))
 }"
 `;
 
-exports[`compiler: v-let transform work with variable 1`] = `
+exports[`compiler: v-scope 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) {

packages/compiler-core/__tests__/transforms/vLet.spec.ts renamed to packages/compiler-core/__tests__/transforms/vScope.spec.ts

@@ -1,6 +1,6 @@
 import { baseCompile, CompilerOptions } from '../../src'
 
-describe('compiler: v-let transform', () => {
+describe('compiler: v-scope transform', () => {
   function compile(content: string, options: CompilerOptions = {}) {
     return baseCompile(`<div>${content}</div>`, {
       mode: 'module',
@@ -10,24 +10,20 @@ describe('compiler: v-let transform', () => {
   }
 
   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">
+        `<div v-scope="{ a:1, b:2 }">
         {{a}} {{b}}
       </div>`
       )
     ).toMatchSnapshot()
   })
 
-  test('nested v-let', () => {
+  test('nested v-scope', () => {
     expect(
       compile(
-        `<div v-let="a=1">
-        <span v-let="b=1">{{a}}{{b}}</span>
+        `<div v-scope="{ a:1 }">
+        <span v-scope="{ b:1 }">{{ a }}{{ b }}</span>
       </div>`
       )
     ).toMatchSnapshot()
@@ -36,8 +32,8 @@ describe('compiler: v-let transform', () => {
   test('work with variable', () => {
     expect(
       compile(
-        `<div v-let="a=msg">
-        <span v-let="b=a">{{b}}</span>
+        `<div v-scope="{ a:msg }">
+        <span v-scope="{ b:a }">{{ b }}</span>
       </div>`
       )
     ).toMatchSnapshot()
@@ -46,19 +42,18 @@ describe('compiler: v-let transform', () => {
   test('complex expression', () => {
     expect(
       compile(`
-        <div v-let="a=foo+bar">
-          <span v-let="b=a+baz">{{b}}</span>
+        <div v-scope="{ a:foo + bar }">
+          <span v-scope="{ b:a + baz }">{{ b }}</span>
         </div>
-        <div v-let="x=y=z">{{x}}{{y}}{{z}}</div>
-        <div v-let="exp=getExp()">{{exp}}</div>
+        <div v-scope="{ exp:getExp() }">{{ exp }}</div>
         `)
     ).toMatchSnapshot()
   })
 
   test('on v-for', () => {
     expect(
       compile(`
-      <div v-for="i in [1,2,3]" v-let="a=i+1">
+      <div v-for="i in [1,2,3]" v-scope="{ a:i+1 }">
         {{ a }}
       </div>
     `)
@@ -68,7 +63,7 @@ describe('compiler: v-let transform', () => {
   test('ok v-if', () => {
     expect(
       compile(`
-      <div v-if="ok" v-let="a=true" >
+      <div v-if="ok" v-scope="{ a:true }" >
         {{ a }}
       </div>
     `)
@@ -77,11 +72,11 @@ describe('compiler: v-let transform', () => {
 
   test('error', () => {
     const onError = jest.fn()
-    expect(compile(`<div v-let="a=,b=1">{{a}}</div>`, { onError }))
+    expect(compile(`<div v-scope="{ a:, b:1 }">{{ a }}</div>`, { onError }))
     expect(onError.mock.calls).toMatchInlineSnapshot(`
       [
         [
-          [SyntaxError: Error parsing JavaScript expression: Unexpected token (1:3)],
+          [SyntaxError: Error parsing JavaScript expression: Unexpected token (1:5)],
         ],
       ]
     `)

packages/compiler-core/src/compile.ts

@@ -18,7 +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'
+import { trackVScopeScopes, transformScope } from './transforms/vScope'
 
 export type TransformPreset = [
   NodeTransform[],
@@ -33,7 +33,7 @@ export function getBaseTransformPreset(
       transformOnce,
       transformIf,
       transformMemo,
-      transformLet,
+      transformScope,
       transformFor,
       ...(__COMPAT__ ? [transformFilter] : []),
       ...(!__BROWSER__ && prefixIdentifiers
@@ -48,7 +48,7 @@ export function getBaseTransformPreset(
       transformSlotOutlet,
       transformElement,
       trackSlotScopes,
-      trackVLetScopes,
+      trackVScopeScopes,
       transformText
     ],
     {

packages/compiler-core/src/index.ts

@@ -52,7 +52,11 @@ export {
   trackVForSlotScopes,
   trackSlotScopes
 } from './transforms/vSlot'
-export { transformLet, trackVLetScopes } from './transforms/vLet'
+export {
+  transformScope,
+  trackVScopeScopes,
+  transformScopeExpression
+} from './transforms/vScope'
 export {
   transformElement,
   resolveComponentType,

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

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

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

@@ -48,6 +48,7 @@ import {
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
 import { PatchFlags, PatchFlagNames } from '@vue/shared'
+import { transformScopeExpression } from './vScope'
 
 export const transformFor = createStructuralDirectiveTransform(
   'for',
@@ -61,7 +62,7 @@ export const transformFor = createStructuralDirectiveTransform(
       ]) as ForRenderListExpression
       const isTemplate = isTemplateNode(node)
       const memo = findDir(node, 'memo')
-      const vLet = findDir(node, 'let')
+      const vScope = findDir(node, 'scope')
       const keyProp = findProp(node, `key`)
       const keyExp =
         keyProp &&
@@ -230,9 +231,12 @@ export const transformFor = createStructuralDirectiveTransform(
           )
         } else {
           let child
-          if (vLet) {
+          if (vScope) {
             child = createCallExpression(
-              createFunctionExpression([vLet.exp!], childBlock)
+              createFunctionExpression(
+                transformScopeExpression(vScope.exp!),
+                childBlock
+              )
             )
           } else {
             child = childBlock

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

@@ -302,7 +302,7 @@ function createChildrenCodegenNode(
       | BlockCodegenNode
       | MemoExpression
 
-    const vnodeCall = findDir(firstChild, 'let')
+    const vnodeCall = findDir(firstChild, 'scope')
       ? (((ret as CallExpression).callee as FunctionExpression)
           .returns as VNodeCall)
       : getMemoedVNodeCall(ret)

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

@@ -0,0 +1,71 @@
+import { NodeTransform } from '../transform'
+import { findDir } from '../utils'
+import {
+  createCallExpression,
+  createFunctionExpression,
+  createSimpleExpression,
+  ExpressionNode,
+  NodeTypes,
+  PlainElementNode,
+  SimpleExpressionNode
+} from '../ast'
+import { stringifyExpression } from './transformExpression'
+
+const seen = new WeakSet()
+const extractKeyValueRE = /(\w+)\s*:\s*"*(.*?)"*\s*[,}\n]/g
+
+export const transformScope: NodeTransform = (node, context) => {
+  if (node.type === NodeTypes.ELEMENT) {
+    const dir = findDir(node, 'scope')
+    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(
+            transformScopeExpression(dir.exp!),
+            codegenNode
+          )
+        )
+      }
+    }
+  }
+}
+
+export function transformScopeExpression(
+  exp: string | ExpressionNode
+): ExpressionNode[] {
+  const params: SimpleExpressionNode[] = []
+  const rExpString = stringifyExpression(exp)
+  let match
+  while ((match = extractKeyValueRE.exec(rExpString))) {
+    params.push(createSimpleExpression(`${match[1]}=${match[2]}`))
+  }
+  return params
+}
+
+export const trackVScopeScopes: NodeTransform = (node, context) => {
+  if (node.type === NodeTypes.ELEMENT) {
+    const vLet = findDir(node, 'scope')
+    if (vLet) {
+      const keys: string[] = []
+      let match
+      while ((match = extractKeyValueRE.exec(vLet.exp!.loc.source))) {
+        keys.push(match[1])
+      }
+      if (!__BROWSER__ && context.prefixIdentifiers) {
+        keys.forEach(context.addIdentifiers)
+      }
+      return () => {
+        if (!__BROWSER__ && context.prefixIdentifiers) {
+          keys.forEach(context.removeIdentifiers)
+        }
+      }
+    }
+  }
+}