// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`scopeId compiler support should push scopeId for hoisted nodes 1`] = `
-"import { createVNode as _createVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
-const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
+"import { createVNode as _createVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createBlock as _createBlock, setScopeId as _setScopeId } from \\"vue\\"
-_pushScopeId(\\"test\\")
+_setScopeId(\\"test\\")
const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */)
-_popScopeId()
+_setScopeId(null)
-export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"div\\", null, [
_hoisted_1,
_createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
_hoisted_2
]))
-})"
+}"
`;
exports[`scopeId compiler support should wrap default slot 1`] = `
-"import { createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
-const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
+"import { createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
-export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
const _component_Child = _resolveComponent(\\"Child\\")
return (_openBlock(), _createBlock(_component_Child, null, {
- default: _withId(() => [
+ default: _withCtx(() => [
_createVNode(\\"div\\")
]),
_: 1 /* STABLE */
}))
-})"
+}"
`;
exports[`scopeId compiler support should wrap dynamic slots 1`] = `
-"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 = /*#__PURE__*/_withScopeId(\\"test\\")
+"import { createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
-export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
const _component_Child = _resolveComponent(\\"Child\\")
return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
(_ctx.ok)
? {
name: \\"foo\\",
- fn: _withId(() => [
+ fn: _withCtx(() => [
_createVNode(\\"div\\")
])
}
_renderList(_ctx.list, (i) => {
return {
name: i,
- fn: _withId(() => [
+ fn: _withCtx(() => [
_createVNode(\\"div\\")
])
}
})
]), 1024 /* DYNAMIC_SLOTS */))
-})"
+}"
`;
exports[`scopeId compiler support should wrap named slots 1`] = `
-"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 = /*#__PURE__*/_withScopeId(\\"test\\")
+"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
-export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
const _component_Child = _resolveComponent(\\"Child\\")
return (_openBlock(), _createBlock(_component_Child, null, {
- foo: _withId(({ msg }) => [
+ foo: _withCtx(({ msg }) => [
_createTextVNode(_toDisplayString(msg), 1 /* TEXT */)
]),
- bar: _withId(() => [
+ bar: _withCtx(() => [
_createVNode(\\"div\\")
]),
_: 1 /* STABLE */
}))
-})"
-`;
-
-exports[`scopeId compiler support should wrap render function 1`] = `
-"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
-const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
-
-export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
- return (_openBlock(), _createBlock(\\"div\\"))
-})"
+}"
`;
import { baseCompile } from '../src/compile'
-import {
- WITH_SCOPE_ID,
- PUSH_SCOPE_ID,
- POP_SCOPE_ID
-} from '../src/runtimeHelpers'
+import { SET_SCOPE_ID } from '../src/runtimeHelpers'
import { PatchFlags } from '@vue/shared'
import { genFlagText } from './testUtils'
+/**
+ * Ensure all slot functions are wrapped with _withCtx
+ * which sets the currentRenderingInstance and currentScopeId when rendering
+ * the slot.
+ */
describe('scopeId compiler support', () => {
test('should only work in module mode', () => {
expect(() => {
}).toThrow(`"scopeId" option is only supported in module mode`)
})
- test('should wrap render function', () => {
- const { ast, code } = baseCompile(`<div/>`, {
- mode: 'module',
- scopeId: 'test'
- })
- expect(ast.helpers).toContain(WITH_SCOPE_ID)
- expect(code).toMatch(`const _withId = /*#__PURE__*/_withScopeId("test")`)
- expect(code).toMatch(
- `export const render = /*#__PURE__*/_withId((_ctx, _cache) => {`
- )
- expect(code).toMatchSnapshot()
- })
-
test('should wrap default slot', () => {
const { code } = baseCompile(`<Child><div/></Child>`, {
mode: 'module',
scopeId: 'test'
})
- expect(code).toMatch(`default: _withId(() => [`)
+ expect(code).toMatch(`default: _withCtx(() => [`)
expect(code).toMatchSnapshot()
})
scopeId: 'test'
}
)
- expect(code).toMatch(`foo: _withId(({ msg }) => [`)
- expect(code).toMatch(`bar: _withId(() => [`)
+ expect(code).toMatch(`foo: _withCtx(({ msg }) => [`)
+ expect(code).toMatch(`bar: _withCtx(() => [`)
expect(code).toMatchSnapshot()
})
scopeId: 'test'
}
)
- expect(code).toMatch(/name: "foo",\s+fn: _withId\(/)
- expect(code).toMatch(/name: i,\s+fn: _withId\(/)
+ expect(code).toMatch(/name: "foo",\s+fn: _withCtx\(/)
+ expect(code).toMatch(/name: i,\s+fn: _withCtx\(/)
expect(code).toMatchSnapshot()
})
hoistStatic: true
}
)
- expect(ast.helpers).toContain(PUSH_SCOPE_ID)
- expect(ast.helpers).toContain(POP_SCOPE_ID)
+ expect(ast.helpers).toContain(SET_SCOPE_ID)
expect(ast.hoists.length).toBe(2)
expect(code).toMatch(
[
- `_pushScopeId("test")`,
+ `_setScopeId("test")`,
`const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, "hello", ${genFlagText(
PatchFlags.HOISTED
)})`,
`const _hoisted_2 = /*#__PURE__*/_createVNode("div", null, "world", ${genFlagText(
PatchFlags.HOISTED
)})`,
- `_popScopeId()`
+ `_setScopeId(null)`
].join('\n')
)
expect(code).toMatchSnapshot()
SET_BLOCK_TRACKING,
CREATE_COMMENT,
CREATE_TEXT,
- PUSH_SCOPE_ID,
- POP_SCOPE_ID,
- WITH_SCOPE_ID,
+ SET_SCOPE_ID,
WITH_DIRECTIVES,
CREATE_BLOCK,
OPEN_BLOCK,
indent,
deindent,
newline,
- scopeId,
ssr
} = context
+
const hasHelpers = ast.helpers.length > 0
const useWithBlock = !prefixIdentifiers && mode !== 'module'
- const genScopeId = !__BROWSER__ && scopeId != null && mode === 'module'
const isSetupInlined = !__BROWSER__ && !!options.inline
// preambles
? createCodegenContext(ast, options)
: context
if (!__BROWSER__ && mode === 'module') {
- genModulePreamble(ast, preambleContext, genScopeId, isSetupInlined)
+ genModulePreamble(ast, preambleContext, isSetupInlined)
} else {
genFunctionPreamble(ast, preambleContext)
}
? args.map(arg => `${arg}: any`).join(',')
: args.join(', ')
- if (genScopeId) {
- if (isSetupInlined) {
- push(`${PURE_ANNOTATION}_withId(`)
- } else {
- push(`const ${functionName} = ${PURE_ANNOTATION}_withId(`)
- }
- }
- if (isSetupInlined || genScopeId) {
+ if (isSetupInlined) {
push(`(${signature}) => {`)
} else {
push(`function ${functionName}(${signature}) {`)
deindent()
push(`}`)
- if (genScopeId) {
- push(`)`)
- }
-
return {
ast,
code: context.code,
function genModulePreamble(
ast: RootNode,
context: CodegenContext,
- genScopeId: boolean,
inline?: boolean
) {
const {
push,
- helper,
newline,
- scopeId,
optimizeImports,
- runtimeModuleName
+ runtimeModuleName,
+ scopeId,
+ mode
} = context
- if (genScopeId) {
- ast.helpers.push(WITH_SCOPE_ID)
- if (ast.hoists.length) {
- ast.helpers.push(PUSH_SCOPE_ID, POP_SCOPE_ID)
- }
+ const genScopeId = !__BROWSER__ && scopeId != null && mode === 'module'
+ if (genScopeId && ast.hoists.length) {
+ ast.helpers.push(SET_SCOPE_ID)
}
// generate import statements for helpers
newline()
}
- if (genScopeId) {
- push(
- `const _withId = ${PURE_ANNOTATION}${helper(WITH_SCOPE_ID)}("${scopeId}")`
- )
- newline()
- }
-
genHoists(ast.hoists, context)
newline()
// push scope Id before initializing hoisted vnodes so that these vnodes
// get the proper scopeId as well.
if (genScopeId) {
- push(`${helper(PUSH_SCOPE_ID)}("${scopeId}")`)
+ push(`${helper(SET_SCOPE_ID)}("${scopeId}")`)
newline()
}
})
if (genScopeId) {
- push(`${helper(POP_SCOPE_ID)}()`)
+ push(`${helper(SET_SCOPE_ID)}(null)`)
newline()
}
context.pure = false
node: FunctionExpression,
context: CodegenContext
) {
- const { push, indent, deindent, scopeId, mode } = context
+ const { push, indent, deindent } = context
const { params, returns, body, newline, isSlot } = node
- // slot functions also need to push scopeId before rendering its content
- const genScopeId =
- !__BROWSER__ && isSlot && scopeId != null && mode !== 'function'
- if (genScopeId) {
- push(`_withId(`)
- } else if (isSlot) {
+ if (isSlot) {
+ // wrap slot functions with owner context
push(`_${helperNameMap[WITH_CTX]}(`)
}
push(`(`, node)
deindent()
push(`}`)
}
- if (genScopeId || isSlot) {
+ if (isSlot) {
push(`)`)
}
}
export const CAPITALIZE = Symbol(__DEV__ ? `capitalize` : ``)
export const TO_HANDLER_KEY = Symbol(__DEV__ ? `toHandlerKey` : ``)
export const SET_BLOCK_TRACKING = Symbol(__DEV__ ? `setBlockTracking` : ``)
-export const PUSH_SCOPE_ID = Symbol(__DEV__ ? `pushScopeId` : ``)
-export const POP_SCOPE_ID = Symbol(__DEV__ ? `popScopeId` : ``)
-export const WITH_SCOPE_ID = Symbol(__DEV__ ? `withScopeId` : ``)
+export const SET_SCOPE_ID = Symbol(__DEV__ ? `setScopeId` : ``)
export const WITH_CTX = Symbol(__DEV__ ? `withCtx` : ``)
export const UNREF = Symbol(__DEV__ ? `unref` : ``)
export const IS_REF = Symbol(__DEV__ ? `isRef` : ``)
[CAPITALIZE]: `capitalize`,
[TO_HANDLER_KEY]: `toHandlerKey`,
[SET_BLOCK_TRACKING]: `setBlockTracking`,
- [PUSH_SCOPE_ID]: `pushScopeId`,
- [POP_SCOPE_ID]: `popScopeId`,
- [WITH_SCOPE_ID]: `withScopeId`,
+ [SET_SCOPE_ID]: `setScopeId`,
[WITH_CTX]: `withCtx`,
[UNREF]: `unref`,
[IS_REF]: `isRef`
mode: 'module'
}).code
).toMatchInlineSnapshot(`
- "import { withScopeId as _withScopeId } from \\"vue\\"
- import { ssrRenderAttrs as _ssrRenderAttrs } from \\"@vue/server-renderer\\"
- const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxx\\")
+ "import { ssrRenderAttrs as _ssrRenderAttrs } from \\"@vue/server-renderer\\"
- export const ssrRender = /*#__PURE__*/_withId((_ctx, _push, _parent, _attrs) => {
+ export function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
- })"
+ }"
`)
})
mode: 'module'
}).code
).toMatchInlineSnapshot(`
- "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode, withScopeId as _withScopeId } from \\"vue\\"
+ "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\"
- const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxx\\")
- export const ssrRender = /*#__PURE__*/_withId((_ctx, _push, _parent, _attrs) => {
+ export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
- default: _withId((_, _push, _parent, _scopeId) => {
+ default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_push(\`foo\`)
} else {
}),
_: 1 /* STABLE */
}, _parent))
- })"
+ }"
`)
})
mode: 'module'
}).code
).toMatchInlineSnapshot(`
- "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, withScopeId as _withScopeId } from \\"vue\\"
+ "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\"
- const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxx\\")
- export const ssrRender = /*#__PURE__*/_withId((_ctx, _push, _parent, _attrs) => {
+ export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
- default: _withId((_, _push, _parent, _scopeId) => {
+ default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
} else {
}),
_: 1 /* STABLE */
}, _parent))
- })"
+ }"
`)
})
mode: 'module'
}).code
).toMatchInlineSnapshot(`
- "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, withScopeId as _withScopeId } from \\"vue\\"
+ "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\"
- const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxx\\")
- export const ssrRender = /*#__PURE__*/_withId((_ctx, _push, _parent, _attrs) => {
+ export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_bar = _resolveComponent(\\"bar\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
- default: _withId((_, _push, _parent, _scopeId) => {
+ default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
_push(_ssrRenderComponent(_component_bar, null, {
- default: _withId((_, _push, _parent, _scopeId) => {
+ default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_push(\`<span data-v-xxxxxxx\${_scopeId}></span>\`)
} else {
}
}),
_: 1 /* STABLE */
- }, _parent))
+ }, _parent, _scopeId))
} else {
return [
_createVNode(\\"span\\", null, \\"hello\\"),
_createVNode(_component_bar, null, {
- default: _withId(() => [
+ default: _withCtx(() => [
_createVNode(\\"span\\")
]),
_: 1 /* STABLE */
}),
_: 1 /* STABLE */
}, _parent))
- })"
+ }"
`)
})
})
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
+ _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, null)
}"
`)
})
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- _ssrRenderSlot(_ctx.$slots, \\"foo\\", {}, null, _push, _parent)
+ _ssrRenderSlot(_ctx.$slots, \\"foo\\", {}, null, _push, _parent, null)
}"
`)
})
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- _ssrRenderSlot(_ctx.$slots, _ctx.bar.baz, {}, null, _push, _parent)
+ _ssrRenderSlot(_ctx.$slots, _ctx.bar.baz, {}, null, _push, _parent, null)
}"
`)
})
_ssrRenderSlot(_ctx.$slots, \\"foo\\", {
p: 1,
bar: \\"2\\"
- }, null, _push, _parent)
+ }, null, _push, _parent, null)
}"
`)
})
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, () => {
_push(\`some \${_ssrInterpolate(_ctx.fallback)} content\`)
- }, _push, _parent)
+ }, _push, _parent, null)
+ }"
+ `)
+ })
+
+ test('with scopeId', async () => {
+ expect(
+ compile(`<slot/>`, {
+ scopeId: 'hello'
+ }).code
+ ).toMatchInlineSnapshot(`
+ "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"@vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\")
+ }"
+ `)
+ })
+
+ test('with forwarded scopeId', async () => {
+ expect(
+ compile(`<Comp><slot/></Comp>`, {
+ scopeId: 'hello'
+ }).code
+ ).toMatchInlineSnapshot(`
+ "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require(\\"vue\\")
+ const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ const _component_Comp = _resolveComponent(\\"Comp\\")
+
+ _push(_ssrRenderComponent(_component_Comp, _attrs, {
+ default: _withCtx((_, _push, _parent, _scopeId) => {
+ if (_push) {
+ _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\" + _scopeId)
+ } else {
+ return [
+ _renderSlot(_ctx.$slots, \\"default\\")
+ ]
+ }
+ }),
+ _: 3 /* FORWARDED */
+ }, _parent))
}"
`)
})
vnodeBranch
)
}
+
+ // component is inside a slot, inherit slot scope Id
+ if (context.withSlotScopeId) {
+ node.ssrCodegenNode!.arguments.push(`_scopeId`)
+ }
+
if (typeof component === 'string') {
// static component
context.pushStatement(
`_ctx.$slots`,
slotName,
slotProps || `{}`,
- `null`, // fallback content placeholder.
+ // fallback content placeholder. will be replaced in the process phase
+ `null`,
`_push`,
- `_parent`
+ `_parent`,
+ context.scopeId ? `"${context.scopeId}-s"` : `null`
]
)
}
context: SSRTransformContext
) {
const renderCall = node.ssrCodegenNode!
+
// has fallback content
if (node.children.length) {
const fallbackRenderFn = createFunctionExpression([])
// _renderSlot(slots, name, props, fallback, ...)
renderCall.arguments[3] = fallbackRenderFn
}
+
+ // Forwarded <slot/>. Add slot scope id
+ if (context.withSlotScopeId) {
+ const scopeId = renderCall.arguments[6] as string
+ renderCall.arguments[6] =
+ scopeId === `null` ? `_scopeId` : `${scopeId} + _scopeId`
+ }
+
context.pushStatement(node.ssrCodegenNode!)
}
ComponentPublicInstance,
Ref,
cloneVNode,
- provide,
- withScopeId
+ provide
} from '@vue/runtime-test'
import { KeepAliveProps } from '../../src/components/KeepAlive'
test('should work with cloned root due to scopeId / fallthrough attrs', async () => {
const viewRef = ref('one')
const instanceRef = ref<any>(null)
- const withId = withScopeId('foo')
const App = {
__scopeId: 'foo',
- render: withId(() => {
+ render: () => {
return h(KeepAlive, null, {
default: () => h(views[viewRef.value], { ref: instanceRef })
})
- })
+ }
}
render(h(App), root)
expect(serializeInner(root)).toBe(`<div foo>one</div>`)
Fragment,
createCommentVNode
} from '../../src'
-import { PatchFlags } from '@vue/shared/src'
+import { PatchFlags } from '@vue/shared'
describe('renderSlot', () => {
it('should render slot', () => {
return [createVNode('div', null, 'foo', PatchFlags.TEXT)]
},
// mock instance
- {} as any
+ { type: {} } as any
)
// manual invocation should not track
+++ /dev/null
-import { withScopeId } from '../../src/helpers/scopeId'
-import { h, render, nodeOps, serializeInner } from '@vue/runtime-test'
-
-describe('scopeId runtime support', () => {
- const withParentId = withScopeId('parent')
- const withChildId = withScopeId('child')
-
- test('should attach scopeId', () => {
- const App = {
- __scopeId: 'parent',
- render: withParentId(() => {
- return h('div', [h('div')])
- })
- }
- const root = nodeOps.createElement('div')
- render(h(App), root)
- expect(serializeInner(root)).toBe(`<div parent><div parent></div></div>`)
- })
-
- test('should attach scopeId to components in parent component', () => {
- const Child = {
- __scopeId: 'child',
- render: withChildId(() => {
- return h('div')
- })
- }
- const App = {
- __scopeId: 'parent',
- render: withParentId(() => {
- return h('div', [h(Child)])
- })
- }
-
- const root = nodeOps.createElement('div')
- render(h(App), root)
- expect(serializeInner(root)).toBe(
- `<div parent><div child parent></div></div>`
- )
- })
-
- test('should work on slots', () => {
- const Child = {
- __scopeId: 'child',
- render: withChildId(function(this: any) {
- return h('div', this.$slots.default())
- })
- }
- const withChild2Id = withScopeId('child2')
- const Child2 = {
- __scopeId: 'child2',
- render: withChild2Id(() => h('span'))
- }
- const App = {
- __scopeId: 'parent',
- render: withParentId(() => {
- return h(
- Child,
- withParentId(() => {
- return [h('div'), h(Child2)]
- })
- )
- })
- }
- const root = nodeOps.createElement('div')
- render(h(App), root)
- // slot content should have:
- // - scopeId from parent
- // - slotted scopeId (with `-s` postfix) from child (the tree owner)
- expect(serializeInner(root)).toBe(
- `<div child parent>` +
- `<div parent child-s></div>` +
- // component inside slot should have:
- // - scopeId from template context
- // - slotted scopeId from slot owner
- // - its own scopeId
- `<span child2 parent child-s></span>` +
- `</div>`
- )
- })
-
- // #1988
- test('should inherit scopeId through nested HOCs with inheritAttrs: false', () => {
- const withParentId = withScopeId('parent')
- const App = {
- __scopeId: 'parent',
- render: withParentId(() => {
- return h(Child)
- })
- }
-
- function Child() {
- return h(Child2, { class: 'foo' })
- }
-
- function Child2() {
- return h('div')
- }
- Child2.inheritAttrs = false
-
- const root = nodeOps.createElement('div')
- render(h(App), root)
-
- expect(serializeInner(root)).toBe(`<div parent></div>`)
- })
-})
--- /dev/null
+import {
+ h,
+ render,
+ nodeOps,
+ serializeInner,
+ renderSlot
+} from '@vue/runtime-test'
+import { setScopeId, withCtx } from '../src/componentRenderContext'
+
+describe('scopeId runtime support', () => {
+ test('should attach scopeId', () => {
+ const App = {
+ __scopeId: 'parent',
+ render: () => h('div', [h('div')])
+ }
+ const root = nodeOps.createElement('div')
+ render(h(App), root)
+ expect(serializeInner(root)).toBe(`<div parent><div parent></div></div>`)
+ })
+
+ test('should attach scopeId to components in parent component', () => {
+ const Child = {
+ __scopeId: 'child',
+ render: () => h('div')
+ }
+ const App = {
+ __scopeId: 'parent',
+ render: () => h('div', [h(Child)])
+ }
+
+ const root = nodeOps.createElement('div')
+ render(h(App), root)
+ expect(serializeInner(root)).toBe(
+ `<div parent><div child parent></div></div>`
+ )
+ })
+
+ // :slotted basic
+ test('should work on slots', () => {
+ const Child = {
+ __scopeId: 'child',
+ render(this: any) {
+ return h('div', renderSlot(this.$slots, 'default'))
+ }
+ }
+ const Child2 = {
+ __scopeId: 'child2',
+ render: () => h('span')
+ }
+ const App = {
+ __scopeId: 'parent',
+ render: () => {
+ return h(
+ Child,
+ withCtx(() => {
+ return [h('div'), h(Child2)]
+ })
+ )
+ }
+ }
+ const root = nodeOps.createElement('div')
+ render(h(App), root)
+ // slot content should have:
+ // - scopeId from parent
+ // - slotted scopeId (with `-s` postfix) from child (the tree owner)
+ expect(serializeInner(root)).toBe(
+ `<div child parent>` +
+ `<div parent child-s></div>` +
+ // component inside slot should have:
+ // - scopeId from template context
+ // - slotted scopeId from slot owner
+ // - its own scopeId
+ `<span child2 parent child-s></span>` +
+ `</div>`
+ )
+ })
+
+ // #2892
+ test(':slotted on forwarded slots', async () => {
+ const Wrapper = {
+ __scopeId: 'wrapper',
+ render(this: any) {
+ // <div class="wrapper"><slot/></div>
+ return h('div', { class: 'wrapper' }, [
+ renderSlot(this.$slots, 'default')
+ ])
+ }
+ }
+
+ const Slotted = {
+ __scopeId: 'slotted',
+ render(this: any) {
+ // <Wrapper><slot/></Wrapper>
+ return h(Wrapper, null, {
+ default: withCtx(() => [renderSlot(this.$slots, 'default')])
+ })
+ }
+ }
+
+ // simulate hoisted node
+ setScopeId('root')
+ const hoisted = h('div', 'hoisted')
+ setScopeId(null)
+
+ const Root = {
+ __scopeId: 'root',
+ render(this: any) {
+ // <Slotted><div>hoisted</div><div>{{ dynamic }}</div></Slotted>
+ return h(Slotted, null, {
+ default: withCtx(() => {
+ return [hoisted, h('div', 'dynamic')]
+ })
+ })
+ }
+ }
+
+ const root = nodeOps.createElement('div')
+ render(h(Root), root)
+ expect(serializeInner(root)).toBe(
+ `<div class="wrapper" wrapper slotted root>` +
+ `<div root wrapper-s slotted-s>hoisted</div>` +
+ `<div root wrapper-s slotted-s>dynamic</div>` +
+ `</div>`
+ )
+
+ const Root2 = {
+ __scopeId: 'root',
+ render(this: any) {
+ // <Slotted>
+ // <Wrapper>
+ // <div>hoisted</div><div>{{ dynamic }}</div>
+ // </Wrapper>
+ // </Slotted>
+ return h(Slotted, null, {
+ default: withCtx(() => [
+ h(Wrapper, null, {
+ default: withCtx(() => [hoisted, h('div', 'dynamic')])
+ })
+ ])
+ })
+ }
+ }
+ const root2 = nodeOps.createElement('div')
+ render(h(Root2), root2)
+ expect(serializeInner(root2)).toBe(
+ `<div class="wrapper" wrapper slotted root>` +
+ `<div class="wrapper" wrapper root wrapper-s slotted-s>` +
+ `<div root wrapper-s>hoisted</div>` +
+ `<div root wrapper-s>dynamic</div>` +
+ `</div>` +
+ `</div>`
+ )
+ })
+
+ // #1988
+ test('should inherit scopeId through nested HOCs with inheritAttrs: false', () => {
+ const App = {
+ __scopeId: 'parent',
+ render: () => {
+ return h(Child)
+ }
+ }
+
+ function Child() {
+ return h(Child2, { class: 'foo' })
+ }
+
+ function Child2() {
+ return h('div')
+ }
+ Child2.inheritAttrs = false
+
+ const root = nodeOps.createElement('div')
+ render(h(App), root)
+
+ expect(serializeInner(root)).toBe(`<div parent></div>`)
+ })
+})
import { ShapeFlags, PatchFlags } from '@vue/shared'
import { h, reactive, isReactive, setBlockTracking } from '../src'
import { createApp, nodeOps, serializeInner } from '@vue/runtime-test'
-import { setCurrentRenderingInstance } from '../src/componentRenderUtils'
+import { setCurrentRenderingInstance } from '../src/componentRenderContext'
describe('vnode', () => {
test('create with just tag', () => {
// ref normalizes to [currentRenderingInstance, ref]
test('cloneVNode ref normalization', () => {
- const mockInstance1 = {} as any
- const mockInstance2 = {} as any
+ const mockInstance1 = { type: {} } as any
+ const mockInstance2 = { type: {} } as any
setCurrentRenderingInstance(mockInstance1)
const original = createVNode('div', { ref: 'foo' })
})
test('cloneVNode ref merging', () => {
- const mockInstance1 = {} as any
- const mockInstance2 = {} as any
+ const mockInstance1 = { type: {} } as any
+ const mockInstance2 = { type: {} } as any
setCurrentRenderingInstance(mockInstance1)
const original = createVNode('div', { ref: 'foo' })
import { isFunction } from '@vue/shared'
import { currentInstance } from './component'
-import { currentRenderingInstance } from './componentRenderUtils'
+import { currentRenderingInstance } from './componentRenderContext'
import { warn } from './warning'
export interface InjectionKey<T> extends Symbol {}
} from '@vue/shared'
import { SuspenseBoundary } from './components/Suspense'
import { CompilerOptions } from '@vue/compiler-core'
-import {
- currentRenderingInstance,
- markAttrsAccessed
-} from './componentRenderUtils'
+import { markAttrsAccessed } from './componentRenderUtils'
+import { currentRenderingInstance } from './componentRenderContext'
import { startMeasure, endMeasure } from './profiling'
export type Data = Record<string, unknown>
} from './componentOptions'
import { EmitsOptions, EmitFn } from './componentEmits'
import { Slots } from './componentSlots'
-import {
- currentRenderingInstance,
- markAttrsAccessed
-} from './componentRenderUtils'
+import { markAttrsAccessed } from './componentRenderUtils'
+import { currentRenderingInstance } from './componentRenderContext'
import { warn } from './warning'
import { UnionToIntersection } from './helpers/typeUtils'
--- /dev/null
+import { ComponentInternalInstance } from './component'
+import { isRenderingCompiledSlot } from './helpers/renderSlot'
+import { closeBlock, openBlock } from './vnode'
+
+/**
+ * mark the current rendering instance for asset resolution (e.g.
+ * resolveComponent, resolveDirective) during render
+ */
+export let currentRenderingInstance: ComponentInternalInstance | null = null
+export let currentScopeId: string | null = null
+
+export function setCurrentRenderingInstance(
+ instance: ComponentInternalInstance | null
+) {
+ currentRenderingInstance = instance
+ currentScopeId = (instance && instance.type.__scopeId) || null
+}
+
+/**
+ * Set scope id when creating hoisted vnodes.
+ * @private compiler helper
+ */
+export function setScopeId(id: string | null) {
+ currentScopeId = id
+}
+
+/**
+ * Wrap a slot function to memoize current rendering instance
+ * @private compiler helper
+ */
+export function withCtx(
+ fn: Function,
+ ctx: ComponentInternalInstance | null = currentRenderingInstance
+) {
+ if (!ctx) return fn
+ const renderFnWithContext = (...args: any[]) => {
+ // If a user calls a compiled slot inside a template expression (#1745), it
+ // can mess up block tracking, so by default we need to push a null block to
+ // avoid that. This isn't necessary if rendering a compiled `<slot>`.
+ if (!isRenderingCompiledSlot) {
+ openBlock(true /* null block that disables tracking */)
+ }
+ const prevInstance = currentRenderingInstance
+ setCurrentRenderingInstance(ctx)
+ const res = fn(...args)
+ setCurrentRenderingInstance(prevInstance)
+ if (!isRenderingCompiledSlot) {
+ closeBlock()
+ }
+ return res
+ }
+ // mark this as a compiled slot function.
+ // this is used in vnode.ts -> normalizeChildren() to set the slot
+ // rendering flag.
+ renderFnWithContext._c = true
+ return renderFnWithContext
+}
import { isHmrUpdating } from './hmr'
import { NormalizedProps } from './componentProps'
import { isEmitListener } from './componentEmits'
-
-/**
- * mark the current rendering instance for asset resolution (e.g.
- * resolveComponent, resolveDirective) during render
- */
-export let currentRenderingInstance: ComponentInternalInstance | null = null
-
-export function setCurrentRenderingInstance(
- instance: ComponentInternalInstance | null
-) {
- currentRenderingInstance = instance
-}
+import { setCurrentRenderingInstance } from './componentRenderContext'
/**
* dev only flag to track whether $attrs was used during render.
} = instance
let result
- currentRenderingInstance = instance
+ setCurrentRenderingInstance(instance)
if (__DEV__) {
accessedAttrs = false
}
handleError(err, instance, ErrorCodes.RENDER_FUNCTION)
result = createVNode(Comment)
}
- currentRenderingInstance = null
+ setCurrentRenderingInstance(null)
return result
}
} from '@vue/shared'
import { warn } from './warning'
import { isKeepAlive } from './components/KeepAlive'
-import { withCtx } from './helpers/withRenderContext'
+import { withCtx } from './componentRenderContext'
import { isHmrUpdating } from './hmr'
export type Slot = (...args: any[]) => VNode[]
instance,
parentSuspense,
isSVG,
+ vnode.slotScopeIds,
optimized
)
queuePostRenderEffect(() => {
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
optimized: boolean,
// platform-specific impl passed from renderer
rendererInternals: RendererInternals
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized,
rendererInternals
)
anchor,
parentComponent,
isSVG,
+ slotScopeIds,
+ optimized,
rendererInternals
)
}
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
optimized: boolean,
rendererInternals: RendererInternals
) {
hiddenContainer,
anchor,
isSVG,
+ slotScopeIds,
optimized,
rendererInternals
))
null,
parentComponent,
suspense,
- isSVG
+ isSVG,
+ slotScopeIds
)
// now check if we have encountered any async deps
if (suspense.deps > 0) {
anchor,
parentComponent,
null, // fallback tree will not have suspense context
- isSVG
+ isSVG,
+ slotScopeIds
)
setActiveBranch(suspense, vnode.ssFallback!)
} else {
anchor: RendererNode | null,
parentComponent: ComponentInternalInstance | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
+ optimized: boolean,
{ p: patch, um: unmount, o: { createElement } }: RendererInternals
) {
const suspense = (n2.suspense = n1.suspense)!
null,
parentComponent,
suspense,
- isSVG
+ isSVG,
+ slotScopeIds,
+ optimized
)
if (suspense.deps <= 0) {
suspense.resolve()
anchor,
parentComponent,
null, // fallback tree will not have suspense context
- isSVG
+ isSVG,
+ slotScopeIds,
+ optimized
)
setActiveBranch(suspense, newFallback)
}
null,
parentComponent,
suspense,
- isSVG
+ isSVG,
+ slotScopeIds,
+ optimized
)
if (suspense.deps <= 0) {
suspense.resolve()
anchor,
parentComponent,
null, // fallback tree will not have suspense context
- isSVG
+ isSVG,
+ slotScopeIds,
+ optimized
)
setActiveBranch(suspense, newFallback)
}
anchor,
parentComponent,
suspense,
- isSVG
+ isSVG,
+ slotScopeIds,
+ optimized
)
// force resolve
suspense.resolve(true)
null,
parentComponent,
suspense,
- isSVG
+ isSVG,
+ slotScopeIds,
+ optimized
)
if (suspense.deps <= 0) {
suspense.resolve()
anchor,
parentComponent,
suspense,
- isSVG
+ isSVG,
+ slotScopeIds,
+ optimized
)
setActiveBranch(suspense, newBranch)
} else {
null,
parentComponent,
suspense,
- isSVG
+ isSVG,
+ slotScopeIds,
+ optimized
)
if (suspense.deps <= 0) {
// incoming branch has no async deps, resolve now.
hiddenContainer: RendererElement,
anchor: RendererNode | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
optimized: boolean,
rendererInternals: RendererInternals,
isHydrating = false
anchor,
parentComponent,
null, // fallback tree will not have suspense context
- isSVG
+ isSVG,
+ slotScopeIds,
+ optimized
)
setActiveBranch(suspense, fallbackVNode)
}
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
optimized: boolean,
rendererInternals: RendererInternals,
hydrateNode: (
vnode: VNode,
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
+ slotScopeIds: string[] | null,
optimized: boolean
) => Node | null
): Node | null {
document.createElement('div'),
null,
isSVG,
+ slotScopeIds,
optimized,
rendererInternals,
true /* hydrating */
(suspense.pendingBranch = vnode.ssContent!),
parentComponent,
suspense,
+ slotScopeIds,
optimized
)
if (suspense.deps === 0) {
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
optimized: boolean,
internals: RendererInternals
) {
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
}
currentContainer,
parentComponent,
parentSuspense,
- isSVG
+ isSVG,
+ slotScopeIds
)
// even in block tree mode we need to make sure all root-level nodes
// in the teleport inherit previous DOM references so that they can
currentAnchor,
parentComponent,
parentSuspense,
- isSVG
+ isSVG,
+ slotScopeIds,
+ false
)
}
vnode: TeleportVNode,
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
+ slotScopeIds: string[] | null,
optimized: boolean,
{
o: { nextSibling, parentNode, querySelector }
container: Element,
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
+ slotScopeIds: string[] | null,
optimized: boolean
) => Node | null
): Node | null {
parentNode(node)!,
parentComponent,
parentSuspense,
+ slotScopeIds,
optimized
)
vnode.targetAnchor = targetNode
target,
parentComponent,
parentSuspense,
+ slotScopeIds,
optimized
)
}
import { isFunction, EMPTY_OBJ, makeMap } from '@vue/shared'
import { warn } from './warning'
import { ComponentInternalInstance, Data } from './component'
-import { currentRenderingInstance } from './componentRenderUtils'
+import { currentRenderingInstance } from './componentRenderContext'
import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
import { ComponentPublicInstance } from './componentPublicInstance'
? PatchFlags.STABLE_FRAGMENT
: PatchFlags.BAIL
)
+ // TODO (optimization) only add slot scope id if :slotted is used
+ if (rendered.scopeId) {
+ rendered.slotScopeIds = [rendered.scopeId + '-s']
+ }
isRenderingCompiledSlot--
return rendered
}
-import { currentRenderingInstance } from '../componentRenderUtils'
import {
currentInstance,
ConcreteComponent,
ComponentOptions,
getComponentName
} from '../component'
+import { currentRenderingInstance } from '../componentRenderContext'
import { Directive } from '../directives'
import { camelize, capitalize, isString } from '@vue/shared'
import { warn } from '../warning'
+++ /dev/null
-// SFC scoped style ID management.
-// These are only used in esm-bundler builds, but since exports cannot be
-// conditional, we can only drop inner implementations in non-bundler builds.
-
-import { withCtx } from './withRenderContext'
-
-export let currentScopeId: string | null = null
-const scopeIdStack: string[] = []
-
-/**
- * @private
- */
-export function pushScopeId(id: string) {
- scopeIdStack.push((currentScopeId = id))
-}
-
-/**
- * @private
- */
-export function popScopeId() {
- scopeIdStack.pop()
- currentScopeId = scopeIdStack[scopeIdStack.length - 1] || null
-}
-
-/**
- * @private
- */
-export function withScopeId(id: string): <T extends Function>(fn: T) => T {
- return ((fn: Function) =>
- withCtx(function(this: any) {
- pushScopeId(id)
- const res = fn.apply(this, arguments)
- popScopeId()
- return res
- })) as any
-}
+++ /dev/null
-import { Slot } from '../componentSlots'
-import {
- setCurrentRenderingInstance,
- currentRenderingInstance
-} from '../componentRenderUtils'
-import { ComponentInternalInstance } from '../component'
-import { isRenderingCompiledSlot } from './renderSlot'
-import { closeBlock, openBlock } from '../vnode'
-
-/**
- * Wrap a slot function to memoize current rendering instance
- * @private
- */
-export function withCtx(
- fn: Slot,
- ctx: ComponentInternalInstance | null = currentRenderingInstance
-) {
- if (!ctx) return fn
- const renderFnWithContext = (...args: any[]) => {
- // If a user calls a compiled slot inside a template expression (#1745), it
- // can mess up block tracking, so by default we need to push a null block to
- // avoid that. This isn't necessary if rendering a compiled `<slot>`.
- if (!isRenderingCompiledSlot) {
- openBlock(true /* null block that disables tracking */)
- }
- const owner = currentRenderingInstance
- setCurrentRenderingInstance(ctx)
- const res = fn(...args)
- setCurrentRenderingInstance(owner)
- if (!isRenderingCompiledSlot) {
- closeBlock()
- }
- return res
- }
- renderFnWithContext._c = true
- return renderFnWithContext
-}
return
}
hasMismatch = false
- hydrateNode(container.firstChild!, vnode, null, null)
+ hydrateNode(container.firstChild!, vnode, null, null, null)
flushPostFlushCbs()
if (hasMismatch && !__TEST__) {
// this error should show up in production
vnode: VNode,
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
+ slotScopeIds: string[] | null,
optimized = false
): Node | null => {
const isFragmentStart = isComment(node) && node.data === '['
vnode,
parentComponent,
parentSuspense,
+ slotScopeIds,
isFragmentStart
)
vnode,
parentComponent,
parentSuspense,
+ slotScopeIds,
optimized
)
}
vnode,
parentComponent,
parentSuspense,
+ slotScopeIds,
optimized
)
}
// when setting up the render effect, if the initial vnode already
// has .el set, the component will perform hydration instead of mount
// on its sub-tree.
+ vnode.slotScopeIds = slotScopeIds
const container = parentNode(node)!
const hydrateComponent = () => {
mountComponent(
vnode as TeleportVNode,
parentComponent,
parentSuspense,
+ slotScopeIds,
optimized,
rendererInternals,
hydrateChildren
parentComponent,
parentSuspense,
isSVGContainer(parentNode(node)!),
+ slotScopeIds,
optimized,
rendererInternals,
hydrateNode
vnode: VNode,
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
+ slotScopeIds: string[] | null,
optimized: boolean
) => {
optimized = optimized || !!vnode.dynamicChildren
el,
parentComponent,
parentSuspense,
+ slotScopeIds,
optimized
)
let hasWarned = false
container: Element,
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
+ slotScopeIds: string[] | null,
optimized: boolean
): Node | null => {
optimized = optimized || !!parentVNode.dynamicChildren
vnode,
parentComponent,
parentSuspense,
+ slotScopeIds,
optimized
)
} else {
null,
parentComponent,
parentSuspense,
- isSVGContainer(container)
+ isSVGContainer(container),
+ slotScopeIds
)
}
}
vnode: VNode,
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
+ slotScopeIds: string[] | null,
optimized: boolean
) => {
+ const { slotScopeIds: fragmentSlotScopeIds } = vnode
+ if (fragmentSlotScopeIds) {
+ slotScopeIds = slotScopeIds
+ ? slotScopeIds.concat(fragmentSlotScopeIds)
+ : fragmentSlotScopeIds
+ }
+
const container = parentNode(node)!
const next = hydrateChildren(
nextSibling(node)!,
container,
parentComponent,
parentSuspense,
+ slotScopeIds,
optimized
)
if (next && isComment(next) && next.data === ']') {
vnode: VNode,
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
+ slotScopeIds: string[] | null,
isFragment: boolean
): Node | null => {
hasMismatch = true
next,
parentComponent,
parentSuspense,
- isSVGContainer(container)
+ isSVGContainer(container),
+ slotScopeIds
)
return next
}
// For compiler generated code
// should sync with '@vue/compiler-core/src/runtimeConstants.ts'
-export { withCtx } from './helpers/withRenderContext'
+export { withCtx, setScopeId } from './componentRenderContext'
export { renderList } from './helpers/renderList'
export { toHandlers } from './helpers/toHandlers'
export { renderSlot } from './helpers/renderSlot'
export { createSlots } from './helpers/createSlots'
-export { pushScopeId, popScopeId, withScopeId } from './helpers/scopeId'
export {
openBlock,
createBlock,
// change without notice between versions. User code should never rely on them.
import { createComponentInstance, setupComponent } from './component'
-import {
- renderComponentRoot,
- setCurrentRenderingInstance
-} from './componentRenderUtils'
+import { renderComponentRoot } from './componentRenderUtils'
+import { setCurrentRenderingInstance } from './componentRenderContext'
import { isVNode, normalizeVNode } from './vnode'
const _ssrUtils = {
parentComponent?: ComponentInternalInstance | null,
parentSuspense?: SuspenseBoundary | null,
isSVG?: boolean,
+ slotScopeIds?: string[] | null,
optimized?: boolean
) => void
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
optimized: boolean,
start?: number
) => void
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
isSVG: boolean,
- optimized?: boolean
+ slotScopeIds: string[] | null,
+ optimized: boolean
) => void
type PatchBlockChildrenFn = (
fallbackContainer: RendererElement,
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
- isSVG: boolean
+ isSVG: boolean,
+ slotScopeIds: string[] | null
) => void
type MoveFn = (
parentComponent = null,
parentSuspense = null,
isSVG = false,
+ slotScopeIds = null,
optimized = false
) => {
// patching & not same type, unmount old tree
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
break
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
} else if (shapeFlag & ShapeFlags.COMPONENT) {
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
} else if (shapeFlag & ShapeFlags.TELEPORT) {
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized,
internals
)
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized,
internals
)
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
optimized: boolean
) => {
isSVG = isSVG || (n2.type as string) === 'svg'
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
} else {
- patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized)
+ patchElement(
+ n1,
+ n2,
+ parentComponent,
+ parentSuspense,
+ isSVG,
+ slotScopeIds,
+ optimized
+ )
}
}
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
optimized: boolean
) => {
let el: RendererElement
let vnodeHook: VNodeHook | undefined | null
- const {
- type,
- props,
- shapeFlag,
- transition,
- scopeId,
- patchFlag,
- dirs
- } = vnode
+ const { type, props, shapeFlag, transition, patchFlag, dirs } = vnode
if (
!__DEV__ &&
vnode.el &&
parentComponent,
parentSuspense,
isSVG && type !== 'foreignObject',
+ slotScopeIds,
optimized || !!vnode.dynamicChildren
)
}
}
}
// scopeId
- setScopeId(el, scopeId, vnode, parentComponent)
+ setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent)
}
if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
Object.defineProperty(el, '__vnode', {
const setScopeId = (
el: RendererElement,
- scopeId: string | false | null,
vnode: VNode,
+ scopeId: string | null,
+ slotScopeIds: string[] | null,
parentComponent: ComponentInternalInstance | null
) => {
if (scopeId) {
hostSetScopeId(el, scopeId)
}
- if (parentComponent) {
- const treeOwnerId = parentComponent.type.__scopeId
- // vnode's own scopeId and the current patched component's scopeId is
- // different - this is a slot content node.
- if (treeOwnerId && treeOwnerId !== scopeId) {
- hostSetScopeId(el, treeOwnerId + '-s')
+ if (slotScopeIds) {
+ for (let i = 0; i < slotScopeIds.length; i++) {
+ hostSetScopeId(el, slotScopeIds[i])
}
+ }
+ if (parentComponent) {
let subTree = parentComponent.subTree
- if (__DEV__ && subTree.type === Fragment) {
+ if (__DEV__ && subTree.patchFlag & PatchFlags.DEV_ROOT_FRAGMENT) {
subTree =
filterSingleRoot(subTree.children as VNodeArrayChildren) || subTree
}
if (vnode === subTree) {
+ const parentVNode = parentComponent.vnode
setScopeId(
el,
- parentComponent.vnode.scopeId,
- parentComponent.vnode,
+ parentVNode,
+ parentVNode.scopeId,
+ parentVNode.slotScopeIds,
parentComponent.parent
)
}
parentSuspense,
isSVG,
optimized,
+ slotScopeIds,
start = 0
) => {
for (let i = start; i < children.length; i++) {
parentComponent,
parentSuspense,
isSVG,
- optimized
+ optimized,
+ slotScopeIds
)
}
}
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
optimized: boolean
) => {
const el = (n2.el = n1.el!)
el,
parentComponent,
parentSuspense,
- areChildrenSVG
+ areChildrenSVG,
+ slotScopeIds
)
if (__DEV__ && parentComponent && parentComponent.type.__hmrId) {
traverseStaticChildren(n1, n2)
null,
parentComponent,
parentSuspense,
- areChildrenSVG
+ areChildrenSVG,
+ slotScopeIds,
+ false
)
}
fallbackContainer,
parentComponent,
parentSuspense,
- isSVG
+ isSVG,
+ slotScopeIds
) => {
for (let i = 0; i < newChildren.length; i++) {
const oldVNode = oldChildren[i]
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
true
)
}
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
optimized: boolean
) => {
const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''))!
const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''))!
- let { patchFlag, dynamicChildren } = n2
+ let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2
if (patchFlag > 0) {
optimized = true
}
+ // check if this is a slot fragment with :slotted scope ids
+ if (fragmentSlotScopeIds) {
+ slotScopeIds = slotScopeIds
+ ? slotScopeIds.concat(fragmentSlotScopeIds)
+ : fragmentSlotScopeIds
+ }
+
if (__DEV__ && isHmrUpdating) {
// HMR updated, force full diff
patchFlag = 0
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
} else {
container,
parentComponent,
parentSuspense,
- isSVG
+ isSVG,
+ slotScopeIds
)
if (__DEV__ && parentComponent && parentComponent.type.__hmrId) {
traverseStaticChildren(n1, n2)
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
}
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
optimized: boolean
) => {
+ n2.slotScopeIds = slotScopeIds
if (n1 == null) {
if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
;(parentComponent!.ctx as KeepAliveContext).activate(
initialVNode.el as Node,
subTree,
instance,
- parentSuspense
+ parentSuspense,
+ null
)
if (__DEV__) {
endMeasure(instance, `hydrate`)
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized = false
) => {
const c1 = n1 && n1.children
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
return
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
return
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
} else {
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
}
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
optimized: boolean
) => {
c1 = c1 || EMPTY_ARR
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
}
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized,
commonLength
)
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
isSVG: boolean,
+ slotScopeIds: string[] | null,
optimized: boolean
) => {
let i = 0
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
} else {
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
} else {
anchor,
parentComponent,
parentSuspense,
- isSVG
+ isSVG,
+ slotScopeIds,
+ optimized
)
i++
}
parentComponent,
parentSuspense,
isSVG,
+ slotScopeIds,
optimized
)
patched++
anchor,
parentComponent,
parentSuspense,
- isSVG
+ isSVG,
+ slotScopeIds,
+ optimized
)
} else if (moved) {
// move if:
import { DirectiveBinding } from './directives'
import { TransitionHooks } from './components/BaseTransition'
import { warn } from './warning'
-import { currentScopeId } from './helpers/scopeId'
import { TeleportImpl, isTeleport } from './components/Teleport'
-import { currentRenderingInstance } from './componentRenderUtils'
+import {
+ currentRenderingInstance,
+ currentScopeId
+} from './componentRenderContext'
import { RendererNode, RendererElement } from './renderer'
import { NULL_DYNAMIC_COMPONENT } from './helpers/resolveAssets'
import { hmrDirtyComponents } from './hmr'
props: (VNodeProps & ExtraProps) | null
key: string | number | null
ref: VNodeNormalizedRef | null
- scopeId: string | null // SFC only
+ /**
+ * SFC only. This is assigned on vnode creation using currentScopeId
+ * which is set alongside currentRenderingInstance.
+ */
+ scopeId: string | null
+ /**
+ * SFC only. This is assigned to:
+ * - Slot fragment vnodes with :slotted SFC styles.
+ * - Component vnodes (during patch/hydration) so that its root node can
+ * inherit the component's slotScopeIds
+ */
+ slotScopeIds: string[] | null
children: VNodeNormalizedChildren
component: ComponentInternalInstance | null
dirs: DirectiveBinding[] | null
key: props && normalizeKey(props),
ref: props && normalizeRef(props),
scopeId: currentScopeId,
+ slotScopeIds: null,
children: null,
component: null,
suspense: null,
: normalizeRef(extraProps)
: ref,
scopeId: vnode.scopeId,
+ slotScopeIds: vnode.slotScopeIds,
children:
__DEV__ && patchFlag === PatchFlags.HOISTED && isArray(children)
? (children as VNode[]).map(deepCloneVNode)
createApp,
h,
createCommentVNode,
- withScopeId,
resolveComponent,
ComponentOptions,
ref,
defineComponent,
createTextVNode,
- createStaticVNode
+ createStaticVNode,
+ withCtx
} from 'vue'
import { escapeHtml } from '@vue/shared'
import { renderToString } from '../src/renderToString'
describe('scopeId', () => {
// note: here we are only testing scopeId handling for vdom serialization.
// compiled srr render functions will include scopeId directly in strings.
- const withId = withScopeId('data-v-test')
- const withChildId = withScopeId('data-v-child')
test('basic', async () => {
- expect(
- await render(
- withId(() => {
- return h('div')
- })()
- )
- ).toBe(`<div data-v-test></div>`)
+ const Foo = {
+ __scopeId: 'data-v-test',
+ render() {
+ return h('div')
+ }
+ }
+
expect(await render(h(Foo))).toBe(`<div data-v-test></div>`)
})
test('with slots', async () => {
const Child = {
__scopeId: 'data-v-child',
- render: withChildId(function(this: any) {
+ render: function(this: any) {
return h('div', this.$slots.default())
- })
+ }
}
const Parent = {
__scopeId: 'data-v-test',
- render: withId(() => {
+ render: () => {
return h(Child, null, {
- default: withId(() => h('span', 'slot'))
+ default: withCtx(() => h('span', 'slot'))
})
- })
+ }
}
expect(await render(h(Parent))).toBe(
-import { createApp, withScopeId } from 'vue'
+import { createApp, mergeProps, withCtx } from 'vue'
import { renderToString } from '../src/renderToString'
import { ssrRenderComponent, ssrRenderAttrs, ssrRenderSlot } from '../src'
-describe('ssr: scoped id on component root', () => {
- test('basic', async () => {
- const withParentId = withScopeId('parent')
-
+describe('ssr: scopedId runtime behavior', () => {
+ test('id on component root', async () => {
const Child = {
ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
push(`<div${ssrRenderAttrs(attrs)}></div>`)
}
const Comp = {
- ssrRender: withParentId((ctx: any, push: any, parent: any) => {
+ __scopeId: 'parent',
+ ssrRender: (ctx: any, push: any, parent: any) => {
push(ssrRenderComponent(Child), null, null, parent)
- })
+ }
}
const result = await renderToString(createApp(Comp))
expect(result).toBe(`<div parent></div>`)
})
- test('inside slot', async () => {
- const withParentId = withScopeId('parent')
-
+ test('id and :slotted on component root', async () => {
const Child = {
+ // <div></div>
ssrRender: (_: any, push: any, _parent: any, attrs: any) => {
push(`<div${ssrRenderAttrs(attrs)} child></div>`)
}
const Wrapper = {
__scopeId: 'wrapper',
ssrRender: (ctx: any, push: any, parent: any) => {
- ssrRenderSlot(ctx.$slots, 'default', {}, null, push, parent)
+ // <slot/>
+ ssrRenderSlot(
+ ctx.$slots,
+ 'default',
+ {},
+ null,
+ push,
+ parent,
+ 'wrapper-s'
+ )
}
}
const Comp = {
- ssrRender: withParentId((_: any, push: any, parent: any) => {
+ __scopeId: 'parent',
+ ssrRender: (_: any, push: any, parent: any) => {
+ // <Wrapper><Child/></Wrapper>
push(
ssrRenderComponent(
Wrapper,
null,
{
- default: withParentId((_: any, push: any, parent: any) => {
- push(ssrRenderComponent(Child, null, null, parent))
- }),
+ default: withCtx(
+ (_: any, push: any, parent: any, scopeId: string) => {
+ push(ssrRenderComponent(Child, null, null, parent, scopeId))
+ }
+ ),
_: 1
} as any,
parent
)
)
- })
+ }
}
const result = await renderToString(createApp(Comp))
expect(result).toBe(`<!--[--><div parent wrapper-s child></div><!--]-->`)
})
+
+ // #2892
+ test(':slotted on forwarded slots', async () => {
+ const Wrapper = {
+ __scopeId: 'wrapper',
+ ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
+ // <div class="wrapper"><slot/></div>
+ push(
+ `<div${ssrRenderAttrs(
+ mergeProps({ class: 'wrapper' }, attrs)
+ )} wrapper>`
+ )
+ ssrRenderSlot(
+ ctx.$slots,
+ 'default',
+ {},
+ null,
+ push,
+ parent,
+ 'wrapper-s'
+ )
+ push(`</div>`)
+ }
+ }
+
+ const Slotted = {
+ __scopeId: 'slotted',
+ ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
+ // <Wrapper><slot/></Wrapper>
+ push(
+ ssrRenderComponent(
+ Wrapper,
+ attrs,
+ {
+ default: withCtx(
+ (_: any, push: any, parent: any, scopeId: string) => {
+ ssrRenderSlot(
+ ctx.$slots,
+ 'default',
+ {},
+ null,
+ push,
+ parent,
+ 'slotted-s' + scopeId
+ )
+ }
+ ),
+ _: 1
+ } as any,
+ parent
+ )
+ )
+ }
+ }
+
+ const Root = {
+ __scopeId: 'root',
+ // <Slotted><div></div></Slotted>
+ ssrRender: (_: any, push: any, parent: any, attrs: any) => {
+ push(
+ ssrRenderComponent(
+ Slotted,
+ attrs,
+ {
+ default: withCtx(
+ (_: any, push: any, parent: any, scopeId: string) => {
+ push(`<div root${scopeId}></div>`)
+ }
+ ),
+ _: 1
+ } as any,
+ parent
+ )
+ )
+ }
+ }
+
+ const result = await renderToString(createApp(Root))
+ expect(result).toBe(
+ `<div class="wrapper" root slotted wrapper>` +
+ `<!--[--><!--[--><div root slotted-s wrapper-s></div><!--]--><!--]-->` +
+ `</div>`
+ )
+ })
})
comp: Component,
props: Props | null = null,
children: Slots | SSRSlots | null = null,
- parentComponent: ComponentInternalInstance | null = null
+ parentComponent: ComponentInternalInstance | null = null,
+ slotScopeId?: string
): SSRBuffer | Promise<SSRBuffer> {
return renderComponentVNode(
createVNode(comp, props, children),
- parentComponent
+ parentComponent,
+ slotScopeId
)
}
slotProps: Props,
fallbackRenderFn: (() => void) | null,
push: PushFn,
- parentComponent: ComponentInternalInstance
+ parentComponent: ComponentInternalInstance,
+ slotScopeId?: string | null
) {
// template-compiled slots are always rendered as fragments
push(`<!--[-->`)
const slotFn = slots[slotName]
if (slotFn) {
- const scopeId = parentComponent && parentComponent.type.__scopeId
const slotBuffer: SSRBufferItem[] = []
const bufferedPush = (item: SSRBufferItem) => {
slotBuffer.push(item)
slotProps,
bufferedPush,
parentComponent,
- scopeId ? ` ${scopeId}-s` : ``
+ slotScopeId ? ' ' + slotScopeId : ''
)
if (Array.isArray(ret)) {
// normal slot
export function renderComponentVNode(
vnode: VNode,
- parentComponent: ComponentInternalInstance | null = null
+ parentComponent: ComponentInternalInstance | null = null,
+ slotScopeId?: string
): SSRBuffer | Promise<SSRBuffer> {
const instance = createComponentInstance(vnode, parentComponent, null)
const res = setupComponent(instance, true /* isSSR */)
warn(`[@vue/server-renderer]: Uncaught error in serverPrefetch:\n`, err)
})
}
- return p.then(() => renderComponentSubTree(instance))
+ return p.then(() => renderComponentSubTree(instance, slotScopeId))
} else {
- return renderComponentSubTree(instance)
+ return renderComponentSubTree(instance, slotScopeId)
}
}
function renderComponentSubTree(
- instance: ComponentInternalInstance
+ instance: ComponentInternalInstance,
+ slotScopeId?: string
): SSRBuffer | Promise<SSRBuffer> {
const comp = instance.type as Component
const { getBuffer, push } = createBuffer()
// inherited scopeId
const scopeId = instance.vnode.scopeId
- const treeOwnerId = instance.parent && instance.parent.type.__scopeId
- const slotScopeId =
- treeOwnerId && treeOwnerId !== scopeId ? treeOwnerId + '-s' : null
if (scopeId || slotScopeId) {
attrs = { ...attrs }
if (scopeId) attrs[scopeId] = ''
- if (slotScopeId) attrs[slotScopeId] = ''
+ if (slotScopeId) attrs[slotScopeId.trim()] = ''
}
// set current rendering instance for asset resolution
projects / thirdparty / vuejs / core.git / commitdiff
