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
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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