Skip to content

Commit

Permalink
refactor: rename to v-scope
Browse files Browse the repository at this point in the history
  • Loading branch information
edison1105 committed Dec 3, 2022
1 parent 3e243d7 commit 2625719
Show file tree
Hide file tree
Showing 13 changed files with 127 additions and 117 deletions.
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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()
Expand All @@ -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()
Expand All @@ -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>
`)
Expand All @@ -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>
`)
Expand All @@ -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)],
],
]
`)
Expand Down
6 changes: 3 additions & 3 deletions packages/compiler-core/src/compile.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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[],
Expand All @@ -33,7 +33,7 @@ export function getBaseTransformPreset(
transformOnce,
transformIf,
transformMemo,
transformLet,
transformScope,
transformFor,
...(__COMPAT__ ? [transformFilter] : []),
...(!__BROWSER__ && prefixIdentifiers
Expand All @@ -48,7 +48,7 @@ export function getBaseTransformPreset(
transformSlotOutlet,
transformElement,
trackSlotScopes,
trackVLetScopes,
trackVScopeScopes,
transformText
],
{
Expand Down
6 changes: 5 additions & 1 deletion packages/compiler-core/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/compiler-core/src/transforms/transformExpression.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
10 changes: 7 additions & 3 deletions packages/compiler-core/src/transforms/vFor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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 &&
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/compiler-core/src/transforms/vIf.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
51 changes: 0 additions & 51 deletions packages/compiler-core/src/transforms/vLet.ts

This file was deleted.

71 changes: 71 additions & 0 deletions packages/compiler-core/src/transforms/vScope.ts
Original file line number Diff line number Diff line change
@@ -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)
}
}
}
}
}
Loading

0 comments on commit 2625719

Please sign in to comment.