From 2625719fb47b30fe80b40b3916320cc584de10c5 Mon Sep 17 00:00:00 2001 From: edison1105 Date: Sat, 3 Dec 2022 19:59:00 +0800 Subject: [PATCH] refactor: rename to v-scope --- ...{vLet.spec.ts.snap => vScope.spec.ts.snap} | 35 +++------ .../{vLet.spec.ts => vScope.spec.ts} | 33 ++++----- packages/compiler-core/src/compile.ts | 6 +- packages/compiler-core/src/index.ts | 6 +- .../src/transforms/transformExpression.ts | 4 +- packages/compiler-core/src/transforms/vFor.ts | 10 ++- packages/compiler-core/src/transforms/vIf.ts | 2 +- packages/compiler-core/src/transforms/vLet.ts | 51 ------------- .../compiler-core/src/transforms/vScope.ts | 71 +++++++++++++++++++ .../{ssrVLet.spec.ts => ssrVScope.spec.ts} | 11 +-- packages/compiler-ssr/src/index.ts | 4 +- .../src/transforms/ssrTransformElement.ts | 9 +-- packages/shared/src/index.ts | 2 +- 13 files changed, 127 insertions(+), 117 deletions(-) rename packages/compiler-core/__tests__/transforms/__snapshots__/{vLet.spec.ts.snap => vScope.spec.ts.snap} (72%) rename packages/compiler-core/__tests__/transforms/{vLet.spec.ts => vScope.spec.ts} (62%) delete mode 100644 packages/compiler-core/src/transforms/vLet.ts create mode 100644 packages/compiler-core/src/transforms/vScope.ts rename packages/compiler-ssr/__tests__/{ssrVLet.spec.ts => ssrVScope.spec.ts} (86%) diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vLet.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vScope.spec.ts.snap similarity index 72% rename from packages/compiler-core/__tests__/transforms/__snapshots__/vLet.spec.ts.snap rename to packages/compiler-core/__tests__/transforms/__snapshots__/vScope.spec.ts.snap index 3dac60e0d88..da0b4d8b27f 100644 --- a/packages/compiler-core/__tests__/transforms/__snapshots__/vLet.spec.ts.snap +++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vScope.spec.ts.snap @@ -1,18 +1,15 @@ // 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 */) ]))() @@ -20,19 +17,7 @@ export function render(_ctx, _cache) { }" `; -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) { diff --git a/packages/compiler-core/__tests__/transforms/vLet.spec.ts b/packages/compiler-core/__tests__/transforms/vScope.spec.ts similarity index 62% rename from packages/compiler-core/__tests__/transforms/vLet.spec.ts rename to packages/compiler-core/__tests__/transforms/vScope.spec.ts index 3f4d8466b6e..051b24fb437 100644 --- a/packages/compiler-core/__tests__/transforms/vLet.spec.ts +++ b/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(`
${content}
`, { mode: 'module', @@ -10,24 +10,20 @@ describe('compiler: v-let transform', () => { } test('should work', () => { - expect(compile(`
{{a}}
`)).toMatchSnapshot() - }) - - test('multiple declare', () => { expect( compile( - `
+ `
{{a}} {{b}}
` ) ).toMatchSnapshot() }) - test('nested v-let', () => { + test('nested v-scope', () => { expect( compile( - `
- {{a}}{{b}} + `
+ {{ a }}{{ b }}
` ) ).toMatchSnapshot() @@ -36,8 +32,8 @@ describe('compiler: v-let transform', () => { test('work with variable', () => { expect( compile( - `
- {{b}} + `
+ {{ b }}
` ) ).toMatchSnapshot() @@ -46,11 +42,10 @@ describe('compiler: v-let transform', () => { test('complex expression', () => { expect( compile(` -
- {{b}} +
+ {{ b }}
-
{{x}}{{y}}{{z}}
-
{{exp}}
+
{{ exp }}
`) ).toMatchSnapshot() }) @@ -58,7 +53,7 @@ describe('compiler: v-let transform', () => { test('on v-for', () => { expect( compile(` -
+
{{ a }}
`) @@ -68,7 +63,7 @@ describe('compiler: v-let transform', () => { test('ok v-if', () => { expect( compile(` -
+
{{ a }}
`) @@ -77,11 +72,11 @@ describe('compiler: v-let transform', () => { test('error', () => { const onError = jest.fn() - expect(compile(`
{{a}}
`, { onError })) + expect(compile(`
{{ a }}
`, { onError })) expect(onError.mock.calls).toMatchInlineSnapshot(` [ [ - [SyntaxError: Error parsing JavaScript expression: Unexpected token (1:3)], + [SyntaxError: Error parsing JavaScript expression: Unexpected token (1:5)], ], ] `) diff --git a/packages/compiler-core/src/compile.ts b/packages/compiler-core/src/compile.ts index 1803987b84c..43040327b83 100644 --- a/packages/compiler-core/src/compile.ts +++ b/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 ], { diff --git a/packages/compiler-core/src/index.ts b/packages/compiler-core/src/index.ts index be00778f37d..5025898e424 100644 --- a/packages/compiler-core/src/index.ts +++ b/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, diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts index 79b602ca7da..43c69559688 100644 --- a/packages/compiler-core/src/transforms/transformExpression.ts +++ b/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) { diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts index e9c6af09c91..16c12857d3d 100644 --- a/packages/compiler-core/src/transforms/vFor.ts +++ b/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 diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts index b96379e13d9..7c4e2a217b4 100644 --- a/packages/compiler-core/src/transforms/vIf.ts +++ b/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) diff --git a/packages/compiler-core/src/transforms/vLet.ts b/packages/compiler-core/src/transforms/vLet.ts deleted file mode 100644 index 46597ec308f..00000000000 --- a/packages/compiler-core/src/transforms/vLet.ts +++ /dev/null @@ -1,51 +0,0 @@ -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) - } - } - } - } -} \ No newline at end of file diff --git a/packages/compiler-core/src/transforms/vScope.ts b/packages/compiler-core/src/transforms/vScope.ts new file mode 100644 index 00000000000..bf98b874104 --- /dev/null +++ b/packages/compiler-core/src/transforms/vScope.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) + } + } + } + } +} diff --git a/packages/compiler-ssr/__tests__/ssrVLet.spec.ts b/packages/compiler-ssr/__tests__/ssrVScope.spec.ts similarity index 86% rename from packages/compiler-ssr/__tests__/ssrVLet.spec.ts rename to packages/compiler-ssr/__tests__/ssrVScope.spec.ts index 59ce66001a6..a43055daf66 100644 --- a/packages/compiler-ssr/__tests__/ssrVLet.spec.ts +++ b/packages/compiler-ssr/__tests__/ssrVScope.spec.ts @@ -1,8 +1,9 @@ import { compile } from '../src' -describe('ssr: v-let', () => { +describe('ssr: v-scope', () => { test('basic', () => { - expect(compile(`
{{a}}
`).code).toMatchInlineSnapshot(` + expect(compile(`
{{a}}
`).code) + .toMatchInlineSnapshot(` "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer") return function ssrRender(_ctx, _push, _parent, _attrs) { @@ -18,8 +19,8 @@ describe('ssr: v-let', () => { test('nested', () => { expect( compile( - `
-
{{a}} {{b}}
+ `
+
{{a}} {{b}}
` ).code ).toMatchInlineSnapshot(` @@ -42,7 +43,7 @@ describe('ssr: v-let', () => { test('ok v-if', () => { expect( compile(` -
+
{{ a }}
`).code diff --git a/packages/compiler-ssr/src/index.ts b/packages/compiler-ssr/src/index.ts index f49f065fb51..8a380e9e5cc 100644 --- a/packages/compiler-ssr/src/index.ts +++ b/packages/compiler-ssr/src/index.ts @@ -12,7 +12,7 @@ import { transformBind, transformStyle, transformOn, - trackVLetScopes + trackVScopeScopes } from '@vue/compiler-dom' import { ssrCodegenTransform } from './ssrCodegenTransform' import { ssrTransformElement } from './transforms/ssrTransformElement' @@ -66,7 +66,7 @@ export function compile( ssrTransformElement, ssrTransformComponent, trackSlotScopes, - trackVLetScopes, + trackVScopeScopes, transformStyle, ...(options.nodeTransforms || []) // user transforms ], diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts index 77972e7cda1..ac21b06f672 100644 --- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts +++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts @@ -31,7 +31,8 @@ import { TransformContext, PropsExpression, findDir, - createFunctionExpression + createFunctionExpression, + transformScopeExpression } from '@vue/compiler-dom' import { escapeHtml, @@ -434,10 +435,10 @@ export function ssrProcessElement( if (rawChildren) { context.pushStringPart(rawChildren) } else if (node.children.length) { - // process v-let - const dir = findDir(node, 'let') + // process v-scope + const dir = findDir(node, 'scope') if (dir) { - const letFn = createFunctionExpression(dir.exp!) + const letFn = createFunctionExpression(transformScopeExpression(dir.exp!)) letFn.body = processChildrenAsStatement(node, context) context.pushStatement(createCallExpression(letFn)) } else { diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts index 55eaf28aa14..2c93f3a4639 100644 --- a/packages/shared/src/index.ts +++ b/packages/shared/src/index.ts @@ -94,7 +94,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,let' + 'bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo,scope' ) const cacheStringFunction = string>(fn: T): T => {