Skip to content

Commit

Permalink
wip: exclude legacy slots from $scopedSlots
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed May 5, 2021
1 parent b14de6c commit 7f93c76
Show file tree
Hide file tree
Showing 7 changed files with 80 additions and 28 deletions.
5 changes: 5 additions & 0 deletions packages/compiler-core/src/ast.ts
Original file line number Diff line number Diff line change
Expand Up @@ -352,6 +352,11 @@ export interface FunctionExpression extends Node {
* withScopeId() wrapper
*/
isSlot: boolean
/**
* __COMPAT__ only, indicates a slot function that should be excluded from
* the legacy $scopedSlots instance property.
*/
isNonScopedSlot?: boolean
}

export interface ConditionalExpression extends Node {
Expand Down
3 changes: 3 additions & 0 deletions packages/compiler-core/src/codegen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -878,6 +878,9 @@ function genFunctionExpression(
push(`}`)
}
if (isSlot) {
if (__COMPAT__ && node.isNonScopedSlot) {
push(`, undefined, true`)
}
push(`)`)
}
}
Expand Down
16 changes: 11 additions & 5 deletions packages/compiler-core/src/transforms/vSlot.ts
Original file line number Diff line number Diff line change
Expand Up @@ -129,11 +129,6 @@ export function buildSlots(
const slotsProperties: Property[] = []
const dynamicSlots: (ConditionalExpression | CallExpression)[] = []

const buildDefaultSlotProperty = (
props: ExpressionNode | undefined,
children: TemplateChildNode[]
) => createObjectProperty(`default`, buildSlotFn(props, children, loc))

// If the slot is inside a v-for or another v-slot, force it to be dynamic
// since it likely uses a scope variable.
let hasDynamicSlots = context.scopes.vSlot > 0 || context.scopes.vFor > 0
Expand Down Expand Up @@ -302,6 +297,17 @@ export function buildSlots(
}

if (!onComponentSlot) {
const buildDefaultSlotProperty = (
props: ExpressionNode | undefined,
children: TemplateChildNode[]
) => {
const fn = buildSlotFn(props, children, loc)
if (__COMPAT__) {
fn.isNonScopedSlot = true
}
return createObjectProperty(`default`, fn)
}

if (!hasTemplateSlots) {
// implicit default slot (on component)
slotsProperties.push(buildDefaultSlotProperty(undefined, children))
Expand Down
11 changes: 9 additions & 2 deletions packages/runtime-core/src/compat/instance.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import {
} from './renderHelpers'
import { resolveFilter } from '../helpers/resolveAssets'
import { resolveMergedOptions } from '../componentOptions'
import { Slots } from '../componentSlots'
import { InternalSlots, Slots } from '../componentSlots'

export type LegacyPublicInstance = ComponentPublicInstance &
LegacyPublicProperties
Expand Down Expand Up @@ -103,7 +103,14 @@ export function installCompatInstanceProperties(map: PublicPropertiesMap) {

$scopedSlots: i => {
assertCompatEnabled(DeprecationTypes.INSTANCE_SCOPED_SLOTS, i)
return __DEV__ ? shallowReadonly(i.slots) : i.slots
const res: InternalSlots = {}
for (const key in i.slots) {
const fn = i.slots[key]!
if (!(fn as any)._nonScoped) {
res[key] = fn
}
}
return res
},

$on: i => on.bind(null, i),
Expand Down
1 change: 1 addition & 0 deletions packages/runtime-core/src/compat/renderFn.ts
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,7 @@ function convertLegacySlots(vnode: VNode): VNode {
for (const key in slots) {
const slotChildren = slots[key]
slots[key] = () => slotChildren
slots[key]._nonScoped = true
}
}
}
Expand Down
6 changes: 5 additions & 1 deletion packages/runtime-core/src/componentRenderContext.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@ export const withScopeId = (_id: string) => withCtx
*/
export function withCtx(
fn: Function,
ctx: ComponentInternalInstance | null = currentRenderingInstance
ctx: ComponentInternalInstance | null = currentRenderingInstance,
isNonScopedSlot?: boolean // __COMPAT__ only
) {
if (!ctx) return fn
const renderFnWithContext = (...args: any[]) => {
Expand All @@ -83,5 +84,8 @@ export function withCtx(
// this is used in vnode.ts -> normalizeChildren() to set the slot
// rendering flag.
renderFnWithContext._c = true
if (__COMPAT__ && isNonScopedSlot) {
renderFnWithContext._nonScoped = true
}
return renderFnWithContext
}
66 changes: 46 additions & 20 deletions packages/vue-compat/__tests__/instance.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -251,30 +251,56 @@ test('INSTANCE_LISTENERS', () => {
).toHaveBeenWarned()
})

test('INSTANCE_SCOPED_SLOTS', () => {
let slots: Slots
new Vue({
template: `<child v-slot="{ msg }">{{ msg }}</child>`,
components: {
child: {
compatConfig: { RENDER_FUNCTION: false },
render() {
slots = this.$scopedSlots
describe('INSTANCE_SCOPED_SLOTS', () => {
test('explicit usage', () => {
let slots: Slots
new Vue({
template: `<child v-slot="{ msg }">{{ msg }}</child>`,
components: {
child: {
compatConfig: { RENDER_FUNCTION: false },
render() {
slots = this.$scopedSlots
}
}
}
}
}).$mount()
}).$mount()

expect(slots!.default!({ msg: 'hi' })).toMatchObject([
{
type: Text,
children: 'hi'
}
])
expect(slots!.default!({ msg: 'hi' })).toMatchObject([
{
type: Text,
children: 'hi'
}
])

expect(
deprecationData[DeprecationTypes.INSTANCE_SCOPED_SLOTS].message
).toHaveBeenWarned()
expect(
deprecationData[DeprecationTypes.INSTANCE_SCOPED_SLOTS].message
).toHaveBeenWarned()
})

test('should not include legacy slot usage in $scopedSlots', () => {
let normalSlots: Slots
let scopedSlots: Slots
new Vue({
template: `<child><div>default</div></child>`,
components: {
child: {
compatConfig: { RENDER_FUNCTION: false },
render() {
normalSlots = this.$slots
scopedSlots = this.$scopedSlots
}
}
}
}).$mount()

expect('default' in normalSlots!).toBe(true)
expect('default' in scopedSlots!).toBe(false)

expect(
deprecationData[DeprecationTypes.INSTANCE_SCOPED_SLOTS].message
).toHaveBeenWarned()
})
})

test('INSTANCE_ATTR_CLASS_STYLE', () => {
Expand Down

0 comments on commit 7f93c76

Please sign in to comment.