Svelte: Improve CSF3 types

[kasperpeulen]

What I did

This PR provides improved type safety for Svelte stories (similar to what we changed to React) but requires svelte-check instead of tsc (Svelte for VS Code extension for editor support):
https://github.com/sveltejs/language-tools/tree/master/packages/svelte-check

Requires the satisfies keyword available in TS ≥ 4.9:
microsoft/TypeScript#46827

Built on top of this CSF PR:
ComponentDriven/csf#51

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 lang="ts">
  import { createEventDispatcher } from 'svelte';

  export let disabled: boolean;
  export let label: string;

  const dispatch = createEventDispatcher();
</script>

<button on:click={(e) => dispatch('clicked', e)} on:dblclick on:mousemove {disabled}>
  {label}
</button>

It is valid to provide args like this:

import Button from './Button.svelte';

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

export default meta;

type Story = StoryObj<typeof meta>;

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

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

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

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

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

export const Basic = {} satisfies Story;

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

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

export default meta;

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

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 },
  render: (args) => ({
    Component: Button,
    props: args,
    on: {
      mousemove: (event) => {
        expectTypeOf(event).toEqualTypeOf<CustomEvent>();
      },
    },
  }),
} 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 } }
) => ({
  Component: Decorator,
  props: { decoratorArg },
});

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

type Props = ComponentProps<Button> & { 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' } };

How to test

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

@benmccann @j3rem1e If you could have a look :)

[socket-security]

Socket Security Report

👍 No new dependency issues detected in pull request

Socket.dev scan summary

Issue	Status
Did you mean?	✅ no new possible package typos
Install scripts	✅ no new install scripts
Telemetry	✅ no new telemetry
Troll package	✅ no new troll packages
Malware	✅ no new malware
Native code	✅ no new native modules

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore [email protected] [email protected]

⚠️ Please accept the latest app permissions to ensure bot commands work properly. Accept the new permissions here.

Powered by socket.dev

[benmccann]

The PR description mentions TypeScript 4.9, but that's not released yet and it looks like this is using ~4.6.3?

It looks like there's tons of merge conflicts on this PR

[kasperpeulen]

The PR description mentions TypeScript 4.9, but that's not released yet and it looks like this is using ~4.6.3?

It looks like there's tons of merge conflicts on this PR

@benmccann Yes, I'm working on upgrading to TS 4.9 in this branch:
#19462

But that is blocked by TS 4.9 being released (and the ecosystem around it ESLint and prettier).
I will also update the svelte template in that branch later this week (for npx sb init).

This PR can be merged independently of that though, as satisfies is only used in user code, not in library code.

Resolving the merge conflicts 😅

[JReinhold]

This looks really good!

I'm still not sure what the impact is of using satisfies and TS 4.9 for our users, but I think you've discussed this earlier with people so I trust that it is under control.

[JReinhold]

downgrade?

[ndelangen]

More likely ensuring we use the same version everywhere.

[JReinhold]

I love these type tests. 💪

[JReinhold]

unless this has an effect, I'd remove this line.

[ndelangen]

I think It's likely required, because of:

storybook/code/tsconfig.json

Lines 20 to 29 in 962ed90

	"exclude": [
	"dist",
	"**/dist",
	"node_modules",
	"**/node_modules",
	"**/*.spec.ts",
	"**/__tests__",
	"**/*.test.ts",
	"**/setup-jest.ts"
	],