Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(types): allow scoped slots to return a single VNode #9563

Merged
merged 3 commits into from Feb 28, 2019
Merged

fix(types): allow scoped slots to return a single VNode #9563

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
46e7115
fix(types): allow scoped slots to return a single VNode
KaelWD Feb 24, 2019
51c445b
Update vnode.d.ts
yyx990803 Feb 28, 2019
caba8e4
Update vnode.d.ts
yyx990803 Feb 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions types/test/options-test.ts
View file
Open in desktop
Expand Up @@ -323,6 +323,10 @@ Vue.component('component-with-scoped-slot', {
item: (props: ScopedSlotProps) => [h('span', [props.msg])]
}
}),
h('child', [
// return single VNode (will be normalized to an array)
(props: ScopedSlotProps) => h('span', [props.msg])
]),
h('child', {
// Passing down all slots from parent
scopedSlots: this.$scopedSlots
Expand Down
3 changes: 2 additions & 1 deletion types/vnode.d.ts
View file
Open in desktop
@@ -1,7 +1,8 @@
import { Vue } from "./vue";

export type ScopedSlot = (props: any) => VNode | VNode[] | string | undefined;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess the return type should have similar type with VNodeChildren as it is normalized as same as vnode children.

vue/src/core/vdom/helpers/normalize-scoped-slots.js

Lines 42 to 51 in 8a80086

function normalizeScopedSlot(normalSlots, key, fn) {
const normalized = scope => {
let res = fn(scope || {})
res = res && typeof res === 'object' && !Array.isArray(res)
? [res] // single vnode
: normalizeChildren(res)
return res && res.length === 0
? undefined
: res
}

Maybe it will be:

type ScopedSlot = (props: any) => ScopedSlotReturn;
type ScopedSlotReturn = VNode | string | boolean | null | undefined | ScopedSlotReturnArray;
interface ScopedSlotReturnArray extends Array<ScopedSlotReturn> {}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@KaelWD are you planning to update the PR according to the suggestion?

// Scoped slots are guaranteed to return Array of VNodes starting in 2.6
export type ScopedSlot = (props: any) => ScopedSlotChildren;
export type NormalizedScopedSlot = (props: any) => ScopedSlotChildren;
export type ScopedSlotChildren = VNode[] | undefined;

// Relaxed type compatible with $createElement
Expand Down
4 changes: 2 additions & 2 deletions types/vue.d.ts
View file
Open in desktop
Expand Up @@ -12,7 +12,7 @@ import {
ThisTypedComponentOptionsWithRecordProps,
WatchOptions,
} from "./options";
import { VNode, VNodeData, VNodeChildren, ScopedSlot } from "./vnode";
import { VNode, VNodeData, VNodeChildren, ScopedSlot, NormalizedScopedSlot } from "./vnode";
import { PluginFunction, PluginObject } from "./plugin";

export interface CreateElement {
Expand All @@ -28,7 +28,7 @@ export interface Vue {
readonly $children: Vue[];
readonly $refs: { [key: string]: Vue | Element | Vue[] | Element[] };
readonly $slots: { [key: string]: VNode[] | undefined };
readonly $scopedSlots: { [key: string]: ScopedSlot | undefined };
readonly $scopedSlots: { [key: string]: NormalizedScopedSlot | undefined };
readonly $isServer: boolean;
readonly $data: Record<string, any>;
readonly $props: Record<string, any>;
Expand Down