Vue3: Improve CSF3 types

[kasperpeulen]

What I did

This PR provides improved type safety for Vue3 stories (similar to what we changed to React and Svelte) but requires vue-tsc instead of tsc (And the Volar VS Code extension for editor support):
https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin

To unlock the full potential of this PR, TS 4.9 is needed, for the new satisfies operator. But, this also improves the types for TS<4.9 users.

Typesafe args

We changed StoryObj and Meta to increase type safety for when the user provides args partially in meta.

Considering a Component like this:

<script setup lang="ts">
defineProps<{ disabled: boolean; label: string }>();

const emit = defineEmits<{
    (e: 'myChangeEvent', id: number): void;
    (e: 'myClickEvent', id: number): void;
}>();

</script>

<template>
    <button :disabled="disabled" @change="emit('myChangeEvent', 0)" @click="emit('myClickEvent', 0)">
        {{ label }}
    </button>
</template>

<style scoped>

</style>

It is valid to provide args like this:

import Button from './Button.vue';

// ✅ valid
const meta = {
  component: Button,
  args: { disabled: false },
} satisfies Meta<typeof Button>;

// or const meta = Meta<typeof Button> = { ... } in TS<4.9

export default meta;

type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  args: { label: 'good' }
};

While it is invalid to forget an arg, in either meta or the story:

// ❌ invalid
const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export const Basic: Story = {
  args: { label: 'good' }
};

// ❌ invalid
const meta = {
  component: Button,
  args: { label: 'good' }
} satisfies Meta<typeof Button>;

export const Basic: Story = {};

Changed Meta to make sure both a Component, as the Props of the component can be used:

const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;

export const meta = {
  component: Button,
} satisfies Meta<{label: string; disabled: boolean} >;

export default meta;

If the component is used, you will have enhanced autocompletion for events (maybe in a future version also for slots, when we support that):

const meta = {
  component: Button,
  args: {
    label: 'good',
    disabled: false,
    onMyChangeEvent: (value) => {
      expectTypeOf(value).toEqualTypeOf<number>();
    },
  },
} satisfies Meta<{ disabled: boolean; label: string }>;

Typesafe decorators/loaders

Decorators now accept a new generic arg argument to be specified:

const withDecorator: DecoratorFn<{ decoratorArg: string }> = (
  storyFn,
  { args: { decoratorArg } }
) => h(Decorator, { decoratorArg }, h(storyFn()));

And the type of meta/story will check if this arg is part of the generic type:

type Props = ButtonProps & { decoratorArg: string };

const meta = satisfies<Meta<Props>>()({
  component: Button,
  args: { disabled: false },
  decorators: [withDecorator],
});

type Story = StoryObj<typeof meta>;
const Basic: Story = { args: { decoratorArg: 0, label: 'good' } };

I also fixed some typescript issues in other files in this package.

How to test

You can test it by running: yarn nx run @storybook/vue3:check

[tmeasday]

LGTM!

[tmeasday]

Suggested change

	export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
	export type StoryObj<TMetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {

Generally we've gone with a convention that a type variable is prefaced with T to distinguish from a concrete type. WDYT?

[kasperpeulen]

I don't know, not a big fan, but also not necessarily against it. I understand that it may be something useful if you want to do:

type GenericType<TComponent extends Component> = ...

But I'm also not sure if it really becomes more readable if you use it everywhere.

I'm okay with adopting it, I would have to change some stuff then in the other renderers as well :D

[kasperpeulen]

Shall I adopt this convention in a separate PR?

[shilman]

Great stuff 🙌

[shilman]

🎉 nice!!! ❤️