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

Vue3: Fix TS 5.0 compat with vue-component-type-helpers #22814

Merged
merged 2 commits into from
May 26, 2023
Merged

Vue3: Fix TS 5.0 compat with vue-component-type-helpers #22814

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1c604e3
Vue3: Use type helpers of the official vue-component-type-helpers to …
kasperpeulen May 26, 2023
6bc2261
Merge branch 'next' into kasper/fix-vue-types-for-ts5
shilman May 26, 2023
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
3 changes: 2 additions & 1 deletion code/renderers/vue3/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@
"@storybook/preview-api": "7.1.0-alpha.24",
"@storybook/types": "7.1.0-alpha.24",
"ts-dedent": "^2.0.0",
"type-fest": "2.19.0"
"type-fest": "2.19.0",
"vue-component-type-helpers": "^1.6.5"
},
"devDependencies": {
"@digitak/esrun": "^3.2.2",
Expand Down
46 changes: 11 additions & 35 deletions code/renderers/vue3/src/public-types.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,23 @@ import type { ComponentAnnotations, StoryAnnotations } from '@storybook/types';
import { expectTypeOf } from 'expect-type';
import type { SetOptional } from 'type-fest';
import { h } from 'vue';
import type { ComponentOptions, FunctionalComponent, VNodeChild } from 'vue';
import type { Decorator, Meta, StoryObj } from './public-types';
import type { ComponentPropsAndSlots, Decorator, Meta, StoryObj } from './public-types';
import type { VueRenderer } from './types';
import BaseLayout from './__tests__/BaseLayout.vue';
import Button from './__tests__/Button.vue';
import DecoratorTsVue from './__tests__/Decorator.vue';
import Decorator2TsVue from './__tests__/Decorator2.vue';

type ButtonProps = ComponentPropsAndSlots<typeof Button>;

describe('Meta', () => {
test('Generic parameter of Meta can be a component', () => {
const meta: Meta<typeof Button> = {
component: Button,
args: { label: 'good', disabled: false },
};

expectTypeOf(meta).toEqualTypeOf<
ComponentAnnotations<
VueRenderer,
{
readonly disabled: boolean;
readonly label: string;
onMyChangeEvent?: (id: number) => any;
onMyClickEvent?: (id: number) => any;
}
>
>();
expectTypeOf(meta).toEqualTypeOf<ComponentAnnotations<VueRenderer, ButtonProps>>();
});

test('Generic parameter of Meta can be the props of the component', () => {
Expand Down Expand Up @@ -66,13 +57,6 @@ describe('Meta', () => {
});

describe('StoryObj', () => {
type ButtonProps = {
readonly disabled: boolean;
readonly label: string;
onMyChangeEvent?: ((id: number) => any) | undefined;
onMyClickEvent?: ((id: number) => any) | undefined;
};

test('✅ Required args may be provided partial in meta and the story', () => {
const meta = satisfies<Meta<typeof Button>>()({
component: Button,
Expand Down Expand Up @@ -123,15 +107,9 @@ describe('StoryObj', () => {

type ThemeData = 'light' | 'dark';

type ComponentProps<Component> = Component extends ComponentOptions<infer P>
? P
: Component extends FunctionalComponent<infer P>
? P
: never;

describe('Story args can be inferred', () => {
test('Correct args are inferred when type is widened for render function', () => {
type Props = ComponentProps<typeof Button> & { theme: ThemeData };
type Props = ButtonProps & { theme: ThemeData };

const meta = satisfies<Meta<Props>>()({
component: Button,
Expand All @@ -153,7 +131,7 @@ describe('Story args can be inferred', () => {
) => h(DecoratorTsVue, { decoratorArg }, h(storyFn()));

test('Correct args are inferred when type is widened for decorators', () => {
type Props = ComponentProps<typeof Button> & { decoratorArg: string };
type Props = ButtonProps & { decoratorArg: string };

const meta = satisfies<Meta<Props>>()({
component: Button,
Expand All @@ -168,7 +146,10 @@ describe('Story args can be inferred', () => {
});

test('Correct args are inferred when type is widened for multiple decorators', () => {
type Props = ComponentProps<typeof Button> & { decoratorArg: string; decoratorArg2: string };
type Props = ButtonProps & {
decoratorArg: string;
decoratorArg2: string;
};

const secondDecorator: Decorator<{ decoratorArg2: string }> = (
storyFn,
Expand Down Expand Up @@ -208,12 +189,7 @@ test('Infer type of slots', () => {
},
};

type Props = {
readonly otherProp: boolean;
header?: ((headerProps: { title: string }) => any) | VNodeChild;
default?: ((defaultProps: {}) => any) | VNodeChild;
footer?: ((footerProps: {}) => any) | VNodeChild;
};
type Props = ComponentPropsAndSlots<typeof BaseLayout>;

type Expected = StoryAnnotations<VueRenderer, Props, Props>;
expectTypeOf(Basic).toEqualTypeOf<Expected>();
Expand Down
27 changes: 11 additions & 16 deletions code/renderers/vue3/src/public-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@ import type {
ComponentAnnotations,
DecoratorFunction,
LoaderFunction,
ProjectAnnotations,
StoryAnnotations,
StoryContext as GenericStoryContext,
StrictArgs,
ProjectAnnotations,
} from '@storybook/types';
import type { SetOptional, Simplify, RemoveIndexSignature } from 'type-fest';
import type { ComponentOptions, ConcreteComponent, FunctionalComponent, VNodeChild } from 'vue';
import type { Constructor, RemoveIndexSignature, SetOptional, Simplify } from 'type-fest';
import type { FunctionalComponent, VNodeChild } from 'vue';
import type { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
import type { VueRenderer } from './types';

export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
Expand Down Expand Up @@ -49,7 +50,7 @@ export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
args?: infer DefaultArgs;
}
? Simplify<
ComponentProps<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>
ComponentPropsAndSlots<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>
> extends infer TArgs
? StoryAnnotations<
VueRenderer,
Expand All @@ -59,24 +60,18 @@ export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
: never
: StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;

type ExtractSlots<C> = C extends new (...args: any[]) => { $slots: infer T }
? AllowNonFunctionSlots<Partial<RemoveIndexSignature<T>>>
: unknown;
type ExtractSlots<C> = AllowNonFunctionSlots<Partial<RemoveIndexSignature<ComponentSlots<C>>>>;

type AllowNonFunctionSlots<Slots> = {
[K in keyof Slots]: Slots[K] | VNodeChild;
};

export type ComponentProps<C> = C extends ComponentOptions<infer P>
? P & ExtractSlots<C>
: C extends FunctionalComponent<infer P>
? P
: unknown;
export type ComponentPropsAndSlots<C> = ComponentProps<C> & ExtractSlots<C>;

type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends ConcreteComponent<any>
? unknown extends ComponentProps<TCmpOrArgs>
? TCmpOrArgs
: ComponentProps<TCmpOrArgs>
type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Constructor<any>
? ComponentPropsAndSlots<TCmpOrArgs>
: TCmpOrArgs extends FunctionalComponent<any>
? ComponentPropsAndSlots<TCmpOrArgs>
: TCmpOrArgs;

/**
Expand Down
8 changes: 8 additions & 0 deletions code/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7455,6 +7455,7 @@ __metadata:
type-fest: 2.19.0
typescript: ~4.9.3
vue: ^3.2.47
vue-component-type-helpers: ^1.6.5
vue-tsc: ^1.2.0
peerDependencies:
vue: ^3.0.0
Expand Down Expand Up @@ -31158,6 +31159,13 @@ __metadata:
languageName: node
linkType: hard

"vue-component-type-helpers@npm:^1.6.5":
version: 1.7.8
resolution: "vue-component-type-helpers@npm:1.7.8"
checksum: 82560704241cad12858e197593b18398bfd43c0319b93f0102723975b392a6319bcd9a5912859ebef0a26965d2301836252713af7e0cfe71a0312237ad64ca16
languageName: node
linkType: hard

"vue-docgen-api@npm:^4.40.0, vue-docgen-api@npm:^4.44.23, vue-docgen-api@npm:^4.46.0":
version: 4.64.1
resolution: "vue-docgen-api@npm:4.64.1"
Expand Down