theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(compiler-core): wrap slot functions with render context

Browse Source
This commit is contained in:
Evan You 2020-03-16 11:23:29 -04:00
parent bcb750bb3a
commit ecd7ce60d5
13 changed files with 114 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
View File

@ -19,7 +19,7 @@ export const render = _withId(function render(_ctx, _cache) {
`; `;
exports[`scopeId compiler support should wrap default slot 1`] = ` exports[`scopeId compiler support should wrap default slot 1`] = `
"import { createVNode as _createVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\" "import { createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = _withScopeId(\\"test\\") const _withId = _withScopeId(\\"test\\")
export const render = _withId(function render(_ctx, _cache) { export const render = _withId(function render(_ctx, _cache) {
@ -28,14 +28,14 @@ export const render = _withId(function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_component_Child, null, { return (_openBlock(), _createBlock(_component_Child, null, {
default: _withId(() => [ default: _withId(() => [
_createVNode(\\"div\\") _createVNode(\\"div\\")
]), ], _ctx),
_: 1 _: 1
})) }))
})" })"
`; `;
exports[`scopeId compiler support should wrap dynamic slots 1`] = ` exports[`scopeId compiler support should wrap dynamic slots 1`] = `
"import { createVNode as _createVNode, resolveComponent as _resolveComponent, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\" "import { createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = _withScopeId(\\"test\\") const _withId = _withScopeId(\\"test\\")
export const render = _withId(function render(_ctx, _cache) { export const render = _withId(function render(_ctx, _cache) {
@ -47,7 +47,7 @@ export const render = _withId(function render(_ctx, _cache) {
name: \\"foo\\", name: \\"foo\\",
fn: _withId(() => [ fn: _withId(() => [
_createVNode(\\"div\\") _createVNode(\\"div\\")
]) ], _ctx)
} }
: undefined, : undefined,
_renderList(_ctx.list, (i) => { _renderList(_ctx.list, (i) => {
@ -55,7 +55,7 @@ export const render = _withId(function render(_ctx, _cache) {
name: i, name: i,
fn: _withId(() => [ fn: _withId(() => [
_createVNode(\\"div\\") _createVNode(\\"div\\")
]) ], _ctx)
} }
}) })
]), 1024 /* DYNAMIC_SLOTS */)) ]), 1024 /* DYNAMIC_SLOTS */))
@ -63,7 +63,7 @@ export const render = _withId(function render(_ctx, _cache) {
`; `;
exports[`scopeId compiler support should wrap named slots 1`] = ` exports[`scopeId compiler support should wrap named slots 1`] = `
"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\" "import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = _withScopeId(\\"test\\") const _withId = _withScopeId(\\"test\\")
export const render = _withId(function render(_ctx, _cache) { export const render = _withId(function render(_ctx, _cache) {
@ -72,10 +72,10 @@ export const render = _withId(function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_component_Child, null, { return (_openBlock(), _createBlock(_component_Child, null, {
foo: _withId(({ msg }) => [ foo: _withId(({ msg }) => [
_createTextVNode(_toDisplayString(msg), 1 /* TEXT */) _createTextVNode(_toDisplayString(msg), 1 /* TEXT */)
]), ], _ctx),
bar: _withId(() => [ bar: _withId(() => [
_createVNode(\\"div\\") _createVNode(\\"div\\")
]), ], _ctx),
_: 1 _: 1
})) }))
})" })"

6
packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
View File

@ -239,14 +239,14 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist expr
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
default: ({ foo }) => [ default: _withCtx(({ foo }) => [
_createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */) _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
], ], _ctx),
_: 1 _: 1
})) }))
} }

58
packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
View File

@ -1,36 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`compiler: transform component slots dynamically named slots 1`] = ` exports[`compiler: transform component slots dynamically named slots 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
[_ctx.one]: ({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)], [_ctx.one]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)], _ctx),
[_ctx.two]: ({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)], [_ctx.two]: _withCtx(({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)], _ctx),
_: 1 _: 1
}, 1024 /* DYNAMIC_SLOTS */)) }, 1024 /* DYNAMIC_SLOTS */))
}" }"
`; `;
exports[`compiler: transform component slots implicit default slot 1`] = ` exports[`compiler: transform component slots implicit default slot 1`] = `
"const { createVNode: _createVNode, resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { createVNode: _createVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
default: () => [ default: _withCtx(() => [
_createVNode(\\"div\\") _createVNode(\\"div\\")
], ], _ctx),
_: 1 _: 1
})) }))
}" }"
`; `;
exports[`compiler: transform component slots named slot with v-for w/ prefixIdentifiers: true 1`] = ` exports[`compiler: transform component slots named slot with v-for w/ prefixIdentifiers: true 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, renderList: _renderList, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
@ -39,7 +39,7 @@ return function render(_ctx, _cache) {
_renderList(_ctx.list, (name) => { _renderList(_ctx.list, (name) => {
return { return {
name: name, name: name,
fn: () => [_toDisplayString(name)] fn: _withCtx(() => [_toDisplayString(name)], _ctx)
} }
}) })
]), 1024 /* DYNAMIC_SLOTS */)) ]), 1024 /* DYNAMIC_SLOTS */))
@ -47,7 +47,7 @@ return function render(_ctx, _cache) {
`; `;
exports[`compiler: transform component slots named slot with v-if + prefixIdentifiers: true 1`] = ` exports[`compiler: transform component slots named slot with v-if + prefixIdentifiers: true 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
@ -56,7 +56,7 @@ return function render(_ctx, _cache) {
(_ctx.ok) (_ctx.ok)
? { ? {
name: \\"one\\", name: \\"one\\",
fn: (props) => [_toDisplayString(props)] fn: _withCtx((props) => [_toDisplayString(props)], _ctx)
} }
: undefined : undefined
]), 1024 /* DYNAMIC_SLOTS */)) ]), 1024 /* DYNAMIC_SLOTS */))
@ -68,7 +68,7 @@ exports[`compiler: transform component slots named slot with v-if + v-else-if +
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { resolveComponent: _resolveComponent, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
@ -76,16 +76,16 @@ return function render(_ctx, _cache) {
ok ok
? { ? {
name: \\"one\\", name: \\"one\\",
fn: () => [\\"foo\\"] fn: _withCtx(() => [\\"foo\\"], _ctx)
} }
: orNot : orNot
? { ? {
name: \\"two\\", name: \\"two\\",
fn: (props) => [\\"bar\\"] fn: _withCtx((props) => [\\"bar\\"], _ctx)
} }
: { : {
name: \\"one\\", name: \\"one\\",
fn: () => [\\"baz\\"] fn: _withCtx(() => [\\"baz\\"], _ctx)
} }
]), 1024 /* DYNAMIC_SLOTS */)) ]), 1024 /* DYNAMIC_SLOTS */))
} }
@ -97,7 +97,7 @@ exports[`compiler: transform component slots named slot with v-if 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { resolveComponent: _resolveComponent, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
@ -105,7 +105,7 @@ return function render(_ctx, _cache) {
ok ok
? { ? {
name: \\"one\\", name: \\"one\\",
fn: () => [\\"hello\\"] fn: _withCtx(() => [\\"hello\\"], _ctx)
} }
: undefined : undefined
]), 1024 /* DYNAMIC_SLOTS */)) ]), 1024 /* DYNAMIC_SLOTS */))
@ -114,14 +114,14 @@ return function render(_ctx, _cache) {
`; `;
exports[`compiler: transform component slots named slots 1`] = ` exports[`compiler: transform component slots named slots 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
one: ({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)], one: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)], _ctx),
two: ({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)], two: _withCtx(({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)], _ctx),
_: 1 _: 1
})) }))
}" }"
@ -132,16 +132,16 @@ exports[`compiler: transform component slots named slots w/ implicit default slo
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createVNode: _createVNode, resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { createVNode: _createVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
one: () => [\\"foo\\"], one: _withCtx(() => [\\"foo\\"], _ctx),
default: () => [ default: _withCtx(() => [
\\"bar\\", \\"bar\\",
_createVNode(\\"span\\") _createVNode(\\"span\\")
], ], _ctx),
_: 1 _: 1
})) }))
} }
@ -149,36 +149,36 @@ return function render(_ctx, _cache) {
`; `;
exports[`compiler: transform component slots nested slots scoping 1`] = ` exports[`compiler: transform component slots nested slots scoping 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Inner = _resolveComponent(\\"Inner\\") const _component_Inner = _resolveComponent(\\"Inner\\")
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
default: ({ foo }) => [ default: _withCtx(({ foo }) => [
_createVNode(_component_Inner, null, { _createVNode(_component_Inner, null, {
default: ({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)], default: _withCtx(({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)], _ctx),
_: 1 _: 1
}, 1024 /* DYNAMIC_SLOTS */), }, 1024 /* DYNAMIC_SLOTS */),
\\" \\", \\" \\",
_toDisplayString(foo), _toDisplayString(foo),
_toDisplayString(_ctx.bar), _toDisplayString(_ctx.bar),
_toDisplayString(_ctx.baz) _toDisplayString(_ctx.baz)
], ], _ctx),
_: 1 _: 1
})) }))
}" }"
`; `;
exports[`compiler: transform component slots on-component default slot 1`] = ` exports[`compiler: transform component slots on-component default slot 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
default: ({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)], default: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)], _ctx),
_: 1 _: 1
})) }))
}" }"

6
packages/compiler-core/src/codegen.ts
View File

@ -768,6 +768,8 @@ function genFunctionExpression(
if (genScopeId) { if (genScopeId) {
push(`_withId(`) push(`_withId(`)
} else if (isSlot) {
push(`_withCtx(`)
} }
push(`(`, node) push(`(`, node)
if (isArray(params)) { if (isArray(params)) {
@ -796,8 +798,8 @@ function genFunctionExpression(
deindent() deindent()
push(`}`) push(`}`)
} }
if (genScopeId) { if (genScopeId || isSlot) {
push(`)`) push(`, _ctx)`)
} }
} }

4
packages/compiler-core/src/runtimeHelpers.ts
View File

@ -26,6 +26,7 @@ export const SET_BLOCK_TRACKING = Symbol(__DEV__ ? `setBlockTracking` : ``)
export const PUSH_SCOPE_ID = Symbol(__DEV__ ? `pushScopeId` : ``) export const PUSH_SCOPE_ID = Symbol(__DEV__ ? `pushScopeId` : ``)
export const POP_SCOPE_ID = Symbol(__DEV__ ? `popScopeId` : ``) export const POP_SCOPE_ID = Symbol(__DEV__ ? `popScopeId` : ``)
export const WITH_SCOPE_ID = Symbol(__DEV__ ? `withScopeId` : ``) export const WITH_SCOPE_ID = Symbol(__DEV__ ? `withScopeId` : ``)
export const WITH_CTX = Symbol(__DEV__ ? `withCtx` : ``)
// Name mapping for runtime helpers that need to be imported from 'vue' in // Name mapping for runtime helpers that need to be imported from 'vue' in
// generated code. Make sure these are correctly exported in the runtime! // generated code. Make sure these are correctly exported in the runtime!
@ -56,7 +57,8 @@ export const helperNameMap: any = {
[SET_BLOCK_TRACKING]: `setBlockTracking`, [SET_BLOCK_TRACKING]: `setBlockTracking`,
[PUSH_SCOPE_ID]: `pushScopeId`, [PUSH_SCOPE_ID]: `pushScopeId`,
[POP_SCOPE_ID]: `popScopeId`, [POP_SCOPE_ID]: `popScopeId`,
[WITH_SCOPE_ID]: `withScopeId` [WITH_SCOPE_ID]: `withScopeId`,
[WITH_CTX]: `withCtx`
} }
export function registerRuntimeHelpers(helpers: any) { export function registerRuntimeHelpers(helpers: any) {

4
packages/compiler-core/src/transforms/vSlot.ts
View File

@ -25,7 +25,7 @@ import {
import { TransformContext, NodeTransform } from '../transform' import { TransformContext, NodeTransform } from '../transform'
import { createCompilerError, ErrorCodes } from '../errors' import { createCompilerError, ErrorCodes } from '../errors'
import { findDir, isTemplateNode, assert, isVSlot, hasScopeRef } from '../utils' import { findDir, isTemplateNode, assert, isVSlot, hasScopeRef } from '../utils'
import { CREATE_SLOTS, RENDER_LIST } from '../runtimeHelpers' import { CREATE_SLOTS, RENDER_LIST, WITH_CTX } from '../runtimeHelpers'
import { parseForExpression, createForLoopParams } from './vFor' import { parseForExpression, createForLoopParams } from './vFor'
const isStaticExp = (p: JSChildNode): p is SimpleExpressionNode => const isStaticExp = (p: JSChildNode): p is SimpleExpressionNode =>
@ -119,6 +119,8 @@ export function buildSlots(
slots: SlotsExpression slots: SlotsExpression
hasDynamicSlots: boolean hasDynamicSlots: boolean
} { } {
context.helper(WITH_CTX)
const { children, loc } = node const { children, loc } = node
const slotsProperties: Property[] = [] const slotsProperties: Property[] = []
const dynamicSlots: (ConditionalExpression | CallExpression)[] = [] const dynamicSlots: (ConditionalExpression | CallExpression)[] = []

52
packages/compiler-ssr/__tests__/ssrComponent.spec.ts
View File

@ -3,7 +3,7 @@ import { compile } from '../src'
describe('ssr: components', () => { describe('ssr: components', () => {
test('basic', () => { test('basic', () => {
expect(compile(`<foo id="a" :prop="b" />`).code).toMatchInlineSnapshot(` expect(compile(`<foo id="a" :prop="b" />`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {
@ -20,7 +20,7 @@ describe('ssr: components', () => {
test('dynamic component', () => { test('dynamic component', () => {
expect(compile(`<component is="foo" prop="b" />`).code) expect(compile(`<component is="foo" prop="b" />`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {
@ -32,7 +32,7 @@ describe('ssr: components', () => {
expect(compile(`<component :is="foo" prop="b" />`).code) expect(compile(`<component :is="foo" prop="b" />`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { resolveDynamicComponent: _resolveDynamicComponent } = require(\\"vue\\") "const { resolveDynamicComponent: _resolveDynamicComponent, withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {
@ -44,14 +44,14 @@ describe('ssr: components', () => {
describe('slots', () => { describe('slots', () => {
test('implicit default slot', () => { test('implicit default slot', () => {
expect(compile(`<foo>hello<div/></foo>`).code).toMatchInlineSnapshot(` expect(compile(`<foo>hello<div/></foo>`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, createVNode: _createVNode, createTextVNode: _createTextVNode } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {
const _component_foo = _resolveComponent(\\"foo\\") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, null, { _push(_ssrRenderComponent(_component_foo, null, {
default: (_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
_push(\`hello<div\${_scopeId}></div>\`) _push(\`hello<div\${_scopeId}></div>\`)
} else { } else {
@ -60,7 +60,7 @@ describe('ssr: components', () => {
_createVNode(\\"div\\") _createVNode(\\"div\\")
] ]
} }
}, }, _ctx),
_: 1 _: 1
}, _parent)) }, _parent))
}" }"
@ -70,14 +70,14 @@ describe('ssr: components', () => {
test('explicit default slot', () => { test('explicit default slot', () => {
expect(compile(`<foo v-slot="{ msg }">{{ msg + outer }}</foo>`).code) expect(compile(`<foo v-slot="{ msg }">{{ msg + outer }}</foo>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {
const _component_foo = _resolveComponent(\\"foo\\") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, null, { _push(_ssrRenderComponent(_component_foo, null, {
default: ({ msg }, _push, _parent, _scopeId) => { default: _withCtx(({ msg }, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
_push(\`\${_ssrInterpolate(msg + _ctx.outer)}\`) _push(\`\${_ssrInterpolate(msg + _ctx.outer)}\`)
} else { } else {
@ -85,7 +85,7 @@ describe('ssr: components', () => {
_createTextVNode(_toDisplayString(msg + _ctx.outer), 1 /* TEXT */) _createTextVNode(_toDisplayString(msg + _ctx.outer), 1 /* TEXT */)
] ]
} }
}, }, _ctx),
_: 1 _: 1
}, _parent)) }, _parent))
}" }"
@ -99,14 +99,14 @@ describe('ssr: components', () => {
<template v-slot:named>bar</template> <template v-slot:named>bar</template>
</foo>`).code </foo>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {
const _component_foo = _resolveComponent(\\"foo\\") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, null, { _push(_ssrRenderComponent(_component_foo, null, {
default: (_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
_push(\`foo\`) _push(\`foo\`)
} else { } else {
@ -114,8 +114,8 @@ describe('ssr: components', () => {
_createTextVNode(\\"foo\\") _createTextVNode(\\"foo\\")
] ]
} }
}, }, _ctx),
named: (_, _push, _parent, _scopeId) => { named: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
_push(\`bar\`) _push(\`bar\`)
} else { } else {
@ -123,7 +123,7 @@ describe('ssr: components', () => {
_createTextVNode(\\"bar\\") _createTextVNode(\\"bar\\")
] ]
} }
}, }, _ctx),
_: 1 _: 1
}, _parent)) }, _parent))
}" }"
@ -136,7 +136,7 @@ describe('ssr: components', () => {
<template v-slot:named v-if="ok">foo</template> <template v-slot:named v-if="ok">foo</template>
</foo>`).code </foo>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, createTextVNode: _createTextVNode, createSlots: _createSlots } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {
@ -146,7 +146,7 @@ describe('ssr: components', () => {
(_ctx.ok) (_ctx.ok)
? { ? {
name: \\"named\\", name: \\"named\\",
fn: (_, _push, _parent, _scopeId) => { fn: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
_push(\`foo\`) _push(\`foo\`)
} else { } else {
@ -154,7 +154,7 @@ describe('ssr: components', () => {
_createTextVNode(\\"foo\\") _createTextVNode(\\"foo\\")
] ]
} }
} }, _ctx)
} }
: undefined : undefined
]), _parent)) ]), _parent))
@ -168,7 +168,7 @@ describe('ssr: components', () => {
<template v-for="key in names" v-slot:[key]="{ msg }">{{ msg + key + bar }}</template> <template v-for="key in names" v-slot:[key]="{ msg }">{{ msg + key + bar }}</template>
</foo>`).code </foo>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {
@ -178,7 +178,7 @@ describe('ssr: components', () => {
_renderList(_ctx.names, (key) => { _renderList(_ctx.names, (key) => {
return { return {
name: key, name: key,
fn: ({ msg }, _push, _parent, _scopeId) => { fn: _withCtx(({ msg }, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
_push(\`\${_ssrInterpolate(msg + key + _ctx.bar)}\`) _push(\`\${_ssrInterpolate(msg + key + _ctx.bar)}\`)
} else { } else {
@ -186,7 +186,7 @@ describe('ssr: components', () => {
_createTextVNode(_toDisplayString(msg + _ctx.key + _ctx.bar), 1 /* TEXT */) _createTextVNode(_toDisplayString(msg + _ctx.key + _ctx.bar), 1 /* TEXT */)
] ]
} }
} }, _ctx)
} }
}) })
]), _parent)) ]), _parent))
@ -209,14 +209,14 @@ describe('ssr: components', () => {
</template> </template>
</foo>`).code </foo>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode, createCommentVNode: _createCommentVNode } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode, createCommentVNode: _createCommentVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {
const _component_foo = _resolveComponent(\\"foo\\") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, null, { _push(_ssrRenderComponent(_component_foo, null, {
foo: ({ list }, _push, _parent, _scopeId) => { foo: _withCtx(({ list }, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
if (_ctx.ok) { if (_ctx.ok) {
_push(\`<div\${_scopeId}><!--[-->\`) _push(\`<div\${_scopeId}><!--[-->\`)
@ -238,8 +238,8 @@ describe('ssr: components', () => {
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode(\\"v-if\\", true)
] ]
} }
}, }, _ctx),
bar: ({ ok }, _push, _parent, _scopeId) => { bar: _withCtx(({ ok }, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
if (ok) { if (ok) {
_push(\`<div\${_scopeId}><!--[-->\`) _push(\`<div\${_scopeId}><!--[-->\`)
@ -261,7 +261,7 @@ describe('ssr: components', () => {
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode(\\"v-if\\", true)
] ]
} }
}, }, _ctx),
_: 1 _: 1
}, _parent)) }, _parent))
}" }"
@ -287,7 +287,7 @@ describe('ssr: components', () => {
expect(compile(`<keep-alive><foo/></keep-alive>`).code) expect(compile(`<keep-alive><foo/></keep-alive>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {

26
packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
View File

@ -23,14 +23,14 @@ describe('ssr: scopeId', () => {
scopeId scopeId
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {
const _component_foo = _resolveComponent(\\"foo\\") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, null, { _push(_ssrRenderComponent(_component_foo, null, {
default: (_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
_push(\`foo\`) _push(\`foo\`)
} else { } else {
@ -38,7 +38,7 @@ describe('ssr: scopeId', () => {
_createTextVNode(\\"foo\\") _createTextVNode(\\"foo\\")
] ]
} }
}, }, _ctx),
_: 1 _: 1
}, _parent)) }, _parent))
}" }"
@ -51,14 +51,14 @@ describe('ssr: scopeId', () => {
scopeId scopeId
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, createVNode: _createVNode } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {
const _component_foo = _resolveComponent(\\"foo\\") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, null, { _push(_ssrRenderComponent(_component_foo, null, {
default: (_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
_push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`) _push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
} else { } else {
@ -66,7 +66,7 @@ describe('ssr: scopeId', () => {
_createVNode(\\"span\\", null, \\"hello\\") _createVNode(\\"span\\", null, \\"hello\\")
] ]
} }
}, }, _ctx),
_: 1 _: 1
}, _parent)) }, _parent))
}" }"
@ -79,7 +79,7 @@ describe('ssr: scopeId', () => {
scopeId scopeId
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, createVNode: _createVNode } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {
@ -87,11 +87,11 @@ describe('ssr: scopeId', () => {
const _component_bar = _resolveComponent(\\"bar\\") const _component_bar = _resolveComponent(\\"bar\\")
_push(_ssrRenderComponent(_component_foo, null, { _push(_ssrRenderComponent(_component_foo, null, {
default: (_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
_push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`) _push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
_push(_ssrRenderComponent(_component_bar, null, { _push(_ssrRenderComponent(_component_bar, null, {
default: (_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
_push(\`<span data-v-xxxxxxx\${_scopeId}></span>\`) _push(\`<span data-v-xxxxxxx\${_scopeId}></span>\`)
} else { } else {
@ -99,21 +99,21 @@ describe('ssr: scopeId', () => {
_createVNode(\\"span\\") _createVNode(\\"span\\")
] ]
} }
}, }, _ctx),
_: 1 _: 1
}, _parent)) }, _parent))
} else { } else {
return [ return [
_createVNode(\\"span\\", null, \\"hello\\"), _createVNode(\\"span\\", null, \\"hello\\"),
_createVNode(_component_bar, null, { _createVNode(_component_bar, null, {
default: () => [ default: _withCtx(() => [
_createVNode(\\"span\\") _createVNode(\\"span\\")
], ], _ctx),
_: 1 _: 1
}) })
] ]
} }
}, }, _ctx),
_: 1 _: 1
}, _parent)) }, _parent))
}" }"

4
packages/compiler-ssr/__tests__/ssrSuspense.spec.ts
View File

@ -3,7 +3,7 @@ import { compile } from '../src'
describe('ssr compile: suspense', () => { describe('ssr compile: suspense', () => {
test('implicit default', () => { test('implicit default', () => {
expect(compile(`<suspense><foo/></suspense>`).code).toMatchInlineSnapshot(` expect(compile(`<suspense><foo/></suspense>`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {
@ -30,7 +30,7 @@ describe('ssr compile: suspense', () => {
</template> </template>
</suspense>`).code </suspense>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent } = require(\\"vue\\") "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"@vue/server-renderer\\") const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) { return function ssrRender(_ctx, _push, _parent) {

1
packages/runtime-core/src/componentRenderUtils.ts
View File

@ -18,7 +18,6 @@ import { warn } from './warning'
// resolveComponent, resolveDirective) during render // resolveComponent, resolveDirective) during render
export let currentRenderingInstance: ComponentInternalInstance | null = null export let currentRenderingInstance: ComponentInternalInstance | null = null
// exposed for server-renderer only
export function setCurrentRenderingInstance( export function setCurrentRenderingInstance(
instance: ComponentInternalInstance | null instance: ComponentInternalInstance | null
) { ) {

8
packages/runtime-core/src/helpers/scopeId.ts
View File

@ -2,6 +2,9 @@
// These are only used in esm-bundler builds, but since exports cannot be // These are only used in esm-bundler builds, but since exports cannot be
// conditional, we can only drop inner implementations in non-bundler builds. // conditional, we can only drop inner implementations in non-bundler builds.
import { ComponentInternalInstance } from '../component'
import { withCtx } from './withRenderContext'
export let currentScopeId: string | null = null export let currentScopeId: string | null = null
const scopeIdStack: string[] = [] const scopeIdStack: string[] = []
@ -20,13 +23,14 @@ export function popScopeId() {
export function withScopeId(id: string): <T extends Function>(fn: T) => T { export function withScopeId(id: string): <T extends Function>(fn: T) => T {
if (__BUNDLER__) { if (__BUNDLER__) {
return ((fn: Function) => { return ((fn: Function, ctx?: ComponentInternalInstance) => {
return function(this: any) { function renderWithId(this: any) {
pushScopeId(id) pushScopeId(id)
const res = fn.apply(this, arguments) const res = fn.apply(this, arguments)
popScopeId() popScopeId()
return res return res
} }
return ctx ? withCtx(renderWithId, ctx) : renderWithId
}) as any }) as any
} else { } else {
return undefined as any return undefined as any

16
packages/runtime-core/src/helpers/withRenderContext.ts Normal file
View File

@ -0,0 +1,16 @@
import { Slot } from '../componentSlots'
import { ComponentInternalInstance } from '../component'
import {
setCurrentRenderingInstance,
currentRenderingInstance
} from '../componentRenderUtils'
export function withCtx(fn: Slot, ctx: ComponentInternalInstance) {
return function renderFnWithContext() {
const owner = currentRenderingInstance
setCurrentRenderingInstance(ctx)
const res = fn.apply(null, arguments)
setCurrentRenderingInstance(owner)
return res
}
}

1
packages/runtime-core/src/index.ts
View File

@ -85,6 +85,7 @@ export {
// For compiler generated code // For compiler generated code
// should sync with '@vue/compiler-core/src/runtimeConstants.ts' // should sync with '@vue/compiler-core/src/runtimeConstants.ts'
export { withCtx } from './helpers/withRenderContext'
export { withDirectives } from './directives' export { withDirectives } from './directives'
export { export {
resolveComponent, resolveComponent,