From 9563ce7e78951a71e91138807759e3c438d41cef Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 12 Oct 2022 20:37:32 +0200
Subject: [PATCH] more typesafe CSF3 types for svelte

---
 code/addons/highlight/package.json            |   6 +-
 code/lib/core-common/src/index.ts             |   1 +
 .../core-common/src/utils/satisfies.ts}       |   0
 code/package.json                             |   7 +-
 code/renderers/react/package.json             |   1 -
 .../react/src/__test__/CSF3.test.tsx          |   9 +-
 code/renderers/svelte/package.json            |   6 +-
 .../svelte/src/___test___/Button.svelte       |  12 +
 .../svelte/src/___test___/CSF3.test.ts        | 226 ++++++++++++++++++
 .../svelte/src/___test___/Decorator.svelte    |   8 +
 .../svelte/src/___test___/Decorator2.svelte   |   8 +
 .../svelte/src/docs/extractArgTypes.test.ts   |   1 +
 .../svelte/src/docs/extractArgTypes.ts        |   2 +-
 .../docs/extractComponentDescription.test.ts  |   1 +
 .../svelte/src/docs/sourceDecorator.test.ts   |   7 +-
 .../svelte/src/docs/sourceDecorator.ts        |   2 +-
 code/renderers/svelte/src/globals.ts          |   1 -
 code/renderers/svelte/src/public-types.ts     |  55 ++++-
 code/renderers/svelte/src/render.ts           |   9 +-
 code/renderers/svelte/src/types.ts            |  36 ++-
 code/renderers/svelte/src/typings.d.ts        |   4 +-
 .../svelte/template/components/Button.svelte  |   2 +-
 .../svelte/template/components/index.js       |  12 +-
 .../svelte/templates/PreviewRender.svelte     |   9 +-
 .../svelte/templates/SlotDecorator.svelte     |   1 +
 code/renderers/svelte/tsconfig.json           |   4 +-
 code/yarn.lock                                |  74 +++---
 package.json                                  |   3 +-
 scripts/tasks/check.ts                        |   2 +-
 29 files changed, 417 insertions(+), 92 deletions(-)
 rename code/{renderers/react/src/__test__/utils.ts => lib/core-common/src/utils/satisfies.ts} (100%)
 create mode 100644 code/renderers/svelte/src/___test___/Button.svelte
 create mode 100644 code/renderers/svelte/src/___test___/CSF3.test.ts
 create mode 100644 code/renderers/svelte/src/___test___/Decorator.svelte
 create mode 100644 code/renderers/svelte/src/___test___/Decorator2.svelte

diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
index dad00fa7e4db..92a6e14cea96 100644
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@@ -58,15 +58,15 @@
     "@types/webpack-env": "^1.16.0",
     "typescript": "~4.6.3"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "bundler": {
     "entries": [
       "./src/index.ts",
       "./src/highlight.ts"
     ]
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
diff --git a/code/lib/core-common/src/index.ts b/code/lib/core-common/src/index.ts
index 5b95a7716571..034c4a9301c6 100644
--- a/code/lib/core-common/src/index.ts
+++ b/code/lib/core-common/src/index.ts
@@ -28,6 +28,7 @@ export * from './utils/normalize-stories';
 export * from './utils/readTemplate';
 export * from './utils/findDistEsm';
 export * from './utils/symlinks';
+export * from './utils/satisfies';
 
 export * from './types';
 
diff --git a/code/renderers/react/src/__test__/utils.ts b/code/lib/core-common/src/utils/satisfies.ts
similarity index 100%
rename from code/renderers/react/src/__test__/utils.ts
rename to code/lib/core-common/src/utils/satisfies.ts
diff --git a/code/package.json b/code/package.json
index fc972e5f977e..fb1d8add2da6 100644
--- a/code/package.json
+++ b/code/package.json
@@ -111,6 +111,7 @@
   ],
   "resolutions": {
     "@nrwl/cli": "14.6.1",
+    "@storybook/csf": "portal:/Users/kasperpeulen/code/storybook/csf",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/experimental-utils": "5.3.0",
     "@typescript-eslint/parser": "^5.15.0",
@@ -336,7 +337,8 @@
     "ts-jest": "^26.4.4",
     "ts-node": "^10.4.0",
     "tsup": "^6.2.2",
-    "typescript": "4.7.4",
+    "type-fest": "2.19.0",
+    "typescript": "~4.6.3",
     "util": "^0.12.4",
     "vite": "^3.1.7",
     "wait-on": "^5.2.1",
@@ -346,6 +348,9 @@
     "window-size": "^1.1.1",
     "zx": "^7.0.3"
   },
+  "devDependencies": {
+    "expect-type": "^0.14.2"
+  },
   "dependenciesMeta": {
     "@compodoc/compodoc": {
       "built": false
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index ae3c052755f8..68049a8d6747 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -76,7 +76,6 @@
     "@babel/core": "^7.11.5",
     "@jest/globals": "^26.6.2",
     "@types/util-deprecate": "^1.0.0",
-    "expect-type": "^0.14.2",
     "jest-specific-snapshot": "^4.0.0",
     "require-from-string": "^2.0.2",
     "typescript": "~4.6.3"
diff --git a/code/renderers/react/src/__test__/CSF3.test.tsx b/code/renderers/react/src/__test__/CSF3.test.tsx
index 89bbb79aa3ea..94a73fee27bc 100644
--- a/code/renderers/react/src/__test__/CSF3.test.tsx
+++ b/code/renderers/react/src/__test__/CSF3.test.tsx
@@ -1,12 +1,11 @@
-import React, { KeyboardEventHandler, ReactNode } from 'react';
-import { expectTypeOf } from 'expect-type';
 import { describe, test } from '@jest/globals';
+import { satisfies } from '@storybook/core-common';
 import { StoryAnnotations } from '@storybook/csf';
+import { expectTypeOf } from 'expect-type';
+import React, { KeyboardEventHandler, ReactNode } from 'react';
 import { SetOptional } from 'type-fest';
-
-import { Meta, StoryObj } from '../public-types';
 import { DecoratorFn } from '../public-api';
-import { satisfies } from './utils';
+import { Meta, StoryObj } from '../public-types';
 import { ReactFramework } from '../types';
 
 type ReactStory<Args, RequiredArgs> = StoryAnnotations<ReactFramework, Args, RequiredArgs>;
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index ace782a2c08d..5a9a28bf74de 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -50,7 +50,7 @@
     "*.d.ts"
   ],
   "scripts": {
-    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
@@ -63,10 +63,12 @@
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "sveltedoc-parser": "^4.2.1"
+    "sveltedoc-parser": "^4.2.1",
+    "type-fest": "2.19.0"
   },
   "devDependencies": {
     "svelte": "^3.31.2",
+    "svelte-check": "^2.9.2",
     "typescript": "~4.6.3"
   },
   "peerDependencies": {
diff --git a/code/renderers/svelte/src/___test___/Button.svelte b/code/renderers/svelte/src/___test___/Button.svelte
new file mode 100644
index 000000000000..b7fd6e8e325c
--- /dev/null
+++ b/code/renderers/svelte/src/___test___/Button.svelte
@@ -0,0 +1,12 @@
+<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>
diff --git a/code/renderers/svelte/src/___test___/CSF3.test.ts b/code/renderers/svelte/src/___test___/CSF3.test.ts
new file mode 100644
index 000000000000..84cc18481ea3
--- /dev/null
+++ b/code/renderers/svelte/src/___test___/CSF3.test.ts
@@ -0,0 +1,226 @@
+import { describe, test } from '@jest/globals';
+import { satisfies } from '@storybook/core-common';
+import { ComponentAnnotations, StoryAnnotations } from '@storybook/csf';
+import { expectTypeOf } from 'expect-type';
+import { ComponentProps, SvelteComponentTyped } from 'svelte';
+
+import { DecoratorFn, Meta, StoryObj } from '../public-types';
+import { SvelteFramework } from '../types';
+import Button from './Button.svelte';
+import Decorator from './Decorator.svelte';
+import Decorator2 from './Decorator2.svelte';
+
+type SvelteStory<Component extends SvelteComponentTyped, Args, RequiredArgs> = StoryAnnotations<
+  SvelteFramework<Component>,
+  Args,
+  RequiredArgs
+>;
+
+describe('Meta', () => {
+  test('Generic parameter of Meta can be a component', () => {
+    const meta: Meta<Button> = {
+      component: Button,
+      args: {
+        label: 'good',
+        disabled: false,
+      },
+    };
+
+    expectTypeOf(meta).toEqualTypeOf<
+      ComponentAnnotations<SvelteFramework<Button>, { disabled: boolean; label: string }>
+    >();
+  });
+
+  test('Generic parameter of Meta can be the props of the component', () => {
+    const meta: Meta<{ disabled: boolean; label: string }> = {
+      component: Button,
+      args: { label: 'good', disabled: false },
+    };
+
+    expectTypeOf(meta).toEqualTypeOf<
+      ComponentAnnotations<SvelteFramework, { disabled: boolean; label: string }>
+    >();
+  });
+
+  test('Events are inferred from component', () => {
+    const meta: Meta<Button> = {
+      component: Button,
+      args: {
+        label: 'good',
+        disabled: false,
+      },
+      render: (args) => ({
+        Component: Button,
+        props: args,
+        on: {
+          mousemove: (event) => {
+            expectTypeOf(event).toEqualTypeOf<MouseEvent>();
+          },
+        },
+      }),
+    };
+  });
+
+  test('Events fallback to custom events when no component is specified', () => {
+    const meta: Meta<{ disabled: boolean; label: string }> = {
+      component: Button,
+      args: { label: 'good', disabled: false },
+      render: (args) => ({
+        Component: Button,
+        props: args,
+        on: {
+          mousemove: (event) => {
+            expectTypeOf(event).toEqualTypeOf<CustomEvent>();
+          },
+        },
+      }),
+    };
+  });
+});
+
+describe('StoryObj', () => {
+  test('✅ Required args may be provided partial in meta and the story', () => {
+    const meta = satisfies<Meta<Button>>()({
+      component: Button,
+      args: { label: 'good' },
+    });
+
+    type Actual = StoryObj<typeof meta>;
+    type Expected = SvelteStory<
+      Button,
+      { disabled: boolean; label: string },
+      { disabled: boolean; label?: string }
+    >;
+    expectTypeOf<Actual>().toEqualTypeOf<Expected>();
+  });
+
+  test('❌ The combined shape of meta args and story args must match the required args.', () => {
+    {
+      const meta = satisfies<Meta<Button>>()({ component: Button });
+
+      type Expected = SvelteStory<
+        Button,
+        { disabled: boolean; label: string },
+        { disabled: boolean; label: string }
+      >;
+      expectTypeOf<StoryObj<typeof meta>>().toEqualTypeOf<Expected>();
+    }
+    {
+      const meta = satisfies<Meta<Button>>()({
+        component: Button,
+        args: { label: 'good' },
+      });
+      // @ts-expect-error disabled not provided ❌
+      const Basic: StoryObj<typeof meta> = {};
+
+      type Expected = SvelteStory<
+        Button,
+        { disabled: boolean; label: string },
+        { disabled: boolean; label?: string }
+      >;
+      expectTypeOf(Basic).toEqualTypeOf<Expected>();
+    }
+    {
+      const meta = satisfies<Meta<{ label: string; disabled: boolean }>>()({ component: Button });
+      const Basic: StoryObj<typeof meta> = {
+        // @ts-expect-error disabled not provided ❌
+        args: { label: 'good' },
+      };
+
+      type Expected = SvelteStory<
+        Button,
+        { disabled: boolean; label: string },
+        { disabled: boolean; label: string }
+      >;
+      expectTypeOf(Basic).toEqualTypeOf<Expected>();
+    }
+  });
+
+  test('Component can be used as generic parameter for StoryObj', () => {
+    type Actual = StoryObj<Button>;
+
+    type Expected = SvelteStory<
+      Button,
+      { disabled: boolean; label: string },
+      { disabled: boolean; label: string }
+    >;
+
+    expectTypeOf<Actual>().toEqualTypeOf<Expected>();
+  });
+});
+
+type ThemeData = 'light' | 'dark';
+
+describe('Story args can be inferred', () => {
+  test('Correct args are inferred when type is widened for render function', () => {
+    const meta = satisfies<Meta<ComponentProps<Button> & { theme: ThemeData }>>()({
+      component: Button,
+      args: { disabled: false },
+      render: (args, { component }) => {
+        return {
+          Component: component,
+          props: args,
+        };
+      },
+    });
+
+    const Basic: StoryObj<typeof meta> = { args: { theme: 'light', label: 'good' } };
+
+    type Expected = SvelteStory<
+      Button,
+      { theme: ThemeData; disabled: boolean; label: string },
+      { theme: ThemeData; disabled?: boolean; label: string }
+    >;
+    expectTypeOf(Basic).toEqualTypeOf<Expected>();
+  });
+
+  const withDecorator: DecoratorFn<Decorator> = (storyFn, { args: { decoratorArg } }) => ({
+    Component: Decorator,
+    props: { decoratorArg },
+  });
+
+  test('Correct args are inferred when type is widened for decorators', () => {
+    type Props = ComponentProps<Button> & { decoratorArg: string };
+
+    const meta = satisfies<Meta<Props>>()({
+      component: Button,
+      args: { disabled: false },
+      decorators: [withDecorator],
+    });
+
+    const Basic: StoryObj<typeof meta> = { args: { decoratorArg: 'title', label: 'good' } };
+
+    type Expected = SvelteStory<
+      Button,
+      Props,
+      { decoratorArg: string; disabled?: boolean; label: string }
+    >;
+    expectTypeOf(Basic).toEqualTypeOf<Expected>();
+  });
+
+  test('Correct args are inferred when type is widened for multiple decorators', () => {
+    type Props = ComponentProps<Button> & { decoratorArg: string; decoratorArg2: string };
+
+    const secondDecorator: DecoratorFn<Decorator2> = (storyFn, { args: { decoratorArg2 } }) => ({
+      Component: Decorator2,
+      props: { decoratorArg2 },
+    });
+
+    const meta = satisfies<Meta<Props>>()({
+      component: Button,
+      args: { disabled: false },
+      decorators: [withDecorator, secondDecorator],
+    });
+
+    const Basic: StoryObj<typeof meta> = {
+      args: { decoratorArg: '', decoratorArg2: '', label: 'good' },
+    };
+
+    type Expected = SvelteStory<
+      Button,
+      Props,
+      { decoratorArg: string; decoratorArg2: string; disabled?: boolean; label: string }
+    >;
+    expectTypeOf(Basic).toEqualTypeOf<Expected>();
+  });
+});
diff --git a/code/renderers/svelte/src/___test___/Decorator.svelte b/code/renderers/svelte/src/___test___/Decorator.svelte
new file mode 100644
index 000000000000..4fc5241ba9d4
--- /dev/null
+++ b/code/renderers/svelte/src/___test___/Decorator.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let decoratorArg: string;
+</script>
+
+<div>
+  Decorator: {decoratorArg}
+  <slot />
+</div>
diff --git a/code/renderers/svelte/src/___test___/Decorator2.svelte b/code/renderers/svelte/src/___test___/Decorator2.svelte
new file mode 100644
index 000000000000..57d98a6e2676
--- /dev/null
+++ b/code/renderers/svelte/src/___test___/Decorator2.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let decoratorArg2: string;
+</script>
+
+<div>
+  Decorator: {decoratorArg2}
+  <slot />
+</div>
diff --git a/code/renderers/svelte/src/docs/extractArgTypes.test.ts b/code/renderers/svelte/src/docs/extractArgTypes.test.ts
index c1911ffa3d1d..dcde4dddcce6 100644
--- a/code/renderers/svelte/src/docs/extractArgTypes.test.ts
+++ b/code/renderers/svelte/src/docs/extractArgTypes.test.ts
@@ -1,3 +1,4 @@
+import { describe, expect } from '@jest/globals';
 import svelteDoc from 'sveltedoc-parser';
 import * as fs from 'fs';
 import { createArgTypes } from './extractArgTypes';
diff --git a/code/renderers/svelte/src/docs/extractArgTypes.ts b/code/renderers/svelte/src/docs/extractArgTypes.ts
index 900d55b336a2..080367309c23 100644
--- a/code/renderers/svelte/src/docs/extractArgTypes.ts
+++ b/code/renderers/svelte/src/docs/extractArgTypes.ts
@@ -89,7 +89,7 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
 
 /**
  * Function to convert the type from sveltedoc-parser to a storybook type
- * @param typeName
+ * @param type
  * @returns string
  */
 const parseTypeToControl = (type: JSDocType | undefined): any => {
diff --git a/code/renderers/svelte/src/docs/extractComponentDescription.test.ts b/code/renderers/svelte/src/docs/extractComponentDescription.test.ts
index 3e6eb3e779c3..f2e7866f6394 100644
--- a/code/renderers/svelte/src/docs/extractComponentDescription.test.ts
+++ b/code/renderers/svelte/src/docs/extractComponentDescription.test.ts
@@ -1,3 +1,4 @@
+import { describe, expect, test } from '@jest/globals';
 import { extractComponentDescription } from './extractComponentDescription';
 
 describe('extractComponentDescription', () => {
diff --git a/code/renderers/svelte/src/docs/sourceDecorator.test.ts b/code/renderers/svelte/src/docs/sourceDecorator.test.ts
index 006a7bb4de05..eaa26616f792 100644
--- a/code/renderers/svelte/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/svelte/src/docs/sourceDecorator.test.ts
@@ -1,12 +1,13 @@
+import { describe, expect, test } from '@jest/globals';
 import type { Args } from '@storybook/api';
 import { generateSvelteSource } from './sourceDecorator';
 
 expect.addSnapshotSerializer({
   print: (val: any) => val,
-  test: (val) => typeof val === 'string',
+  test: (val: unknown) => typeof val === 'string',
 });
 
-function generateForArgs(args: Args, slotProperty: string = null) {
+function generateForArgs(args: Args, slotProperty: string | null = null) {
   return generateSvelteSource({ name: 'Component' }, args, {}, slotProperty);
 }
 
@@ -42,6 +43,6 @@ describe('generateSvelteSource', () => {
     `);
   });
   test('component is not set', () => {
-    expect(generateSvelteSource(null, null, null, null)).toBeNull();
+    expect(generateSvelteSource(null, {}, {}, null)).toBeNull();
   });
 });
diff --git a/code/renderers/svelte/src/docs/sourceDecorator.ts b/code/renderers/svelte/src/docs/sourceDecorator.ts
index d7b04f91c9df..05d90ffc5188 100644
--- a/code/renderers/svelte/src/docs/sourceDecorator.ts
+++ b/code/renderers/svelte/src/docs/sourceDecorator.ts
@@ -89,7 +89,7 @@ export function generateSvelteSource(
   component: any,
   args: Args,
   argTypes: ArgTypes,
-  slotProperty?: string
+  slotProperty?: string | null
 ): string | null {
   const name = getComponentName(component);
 
diff --git a/code/renderers/svelte/src/globals.ts b/code/renderers/svelte/src/globals.ts
index aabe0fd8fb42..a2fb5c9dad10 100644
--- a/code/renderers/svelte/src/globals.ts
+++ b/code/renderers/svelte/src/globals.ts
@@ -1,4 +1,3 @@
-// @ts-expect-error (Converted from ts-ignore)
 import global from 'global';
 
 const { window: globalWindow } = global;
diff --git a/code/renderers/svelte/src/public-types.ts b/code/renderers/svelte/src/public-types.ts
index d3d0eb46616b..2b70cad29e8f 100644
--- a/code/renderers/svelte/src/public-types.ts
+++ b/code/renderers/svelte/src/public-types.ts
@@ -1,9 +1,14 @@
 import type {
+  AnnotatedStoryFn,
   Args,
+  ArgsStoryFn,
   ComponentAnnotations,
+  DecoratorFunction,
+  LoaderFunction,
   StoryAnnotations,
-  AnnotatedStoryFn,
 } from '@storybook/csf';
+import { ComponentProps, ComponentType, SvelteComponent, SvelteComponentTyped } from 'svelte';
+import { SetOptional, Simplify, UnionToIntersection } from 'type-fest';
 import { SvelteFramework } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
@@ -13,8 +18,9 @@ export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<SvelteFramework, TArgs>;
-
+export type Meta<CmpOrArgs = Args> = CmpOrArgs extends SvelteComponentTyped<infer Props>
+  ? ComponentAnnotations<SvelteFramework<CmpOrArgs>, Props>
+  : ComponentAnnotations<SvelteFramework, CmpOrArgs>;
 /**
  * Story function that represents a CSFv2 component example.
  *
@@ -27,11 +33,40 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<SvelteFramework, TArgs>;
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<SvelteFramework, TArgs>;
+// TODO extract common args inference independent of framework
+export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
+  render?: ArgsStoryFn<SvelteFramework, infer RArgs>;
+  component?: ComponentType<infer Component>;
+  loaders?: (infer Loaders)[];
+  args?: infer DefaultArgs;
+  decorators?: (infer Decorators)[];
+}
+  ? Simplify<
+      ComponentProps<Component> & RArgs & DecoratorsArgs<Decorators> & LoaderArgs<Loaders>
+    > extends infer TArgs
+    ? StoryAnnotations<
+        SvelteFramework<Component>,
+        TArgs,
+        SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
+      >
+    : never
+  : MetaOrCmpOrArgs extends SvelteComponentTyped
+  ? StoryAnnotations<
+      SvelteFramework<MetaOrCmpOrArgs>,
+      ComponentProps<MetaOrCmpOrArgs>,
+      ComponentProps<MetaOrCmpOrArgs>
+    >
+  : StoryAnnotations<SvelteFramework, MetaOrCmpOrArgs>;
 
-/**
- * Story function that represents a CSFv3 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+type DecoratorsArgs<Decorators> = UnionToIntersection<
+  Decorators extends DecoratorFn<infer Component> ? ComponentProps<Component> : unknown
+>;
+
+type LoaderArgs<Loaders> = UnionToIntersection<
+  Loaders extends LoaderFunction<SvelteFramework, infer Args> ? Args : unknown
+>;
+
+export type DecoratorFn<Component extends SvelteComponentTyped> = DecoratorFunction<
+  SvelteFramework<SvelteComponent>,
+  ComponentProps<Component>
+>;
diff --git a/code/renderers/svelte/src/render.ts b/code/renderers/svelte/src/render.ts
index e436d26b41f0..c190aa269f8b 100644
--- a/code/renderers/svelte/src/render.ts
+++ b/code/renderers/svelte/src/render.ts
@@ -1,15 +1,14 @@
-// @ts-expect-error (Converted from ts-ignore)
 import global from 'global';
-
 import type { ArgsStoryFn } from '@storybook/csf';
 import type { RenderContext } from '@storybook/store';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import PreviewRender from '@storybook/svelte/templates/PreviewRender.svelte';
+import { SvelteComponentTyped } from 'svelte';
+import PreviewRender from '../templates/PreviewRender.svelte';
+
 import { SvelteFramework } from './types';
 
 const { document } = global;
 
-let previousComponent: SvelteFramework['component'] = null;
+let previousComponent: SvelteComponentTyped | null = null;
 
 function cleanUpPreviousStory() {
   if (!previousComponent) {
diff --git a/code/renderers/svelte/src/types.ts b/code/renderers/svelte/src/types.ts
index d4c7d2b2cc32..2354c2c78ee3 100644
--- a/code/renderers/svelte/src/types.ts
+++ b/code/renderers/svelte/src/types.ts
@@ -1,4 +1,6 @@
-import type { StoryContext as StoryContextBase } from '@storybook/csf';
+import type { AnyFramework, StoryContext as StoryContextBase } from '@storybook/csf';
+import { ComponentConstructorOptions, ComponentEvents } from 'svelte';
+import type { SvelteComponentTyped } from 'svelte';
 
 export type { RenderContext } from '@storybook/core-client';
 
@@ -23,12 +25,30 @@ interface MountProps {
   text: string;
 }
 
-interface WrapperData {
-  innerStyle: string;
-  style: string;
+type ComponentType<
+  Props extends Record<string, any> = any,
+  Events extends Record<string, any> = any
+> = new (options: ComponentConstructorOptions<Props>) => {
+  [P in keyof SvelteComponentTyped<Props> as P extends `$$${string}`
+    ? never
+    : P]: SvelteComponentTyped<Props, Events>[P];
+};
+
+export interface SvelteFramework<C extends SvelteComponentTyped = SvelteComponentTyped>
+  extends AnyFramework {
+  component: ComponentType<this['T'] extends Record<string, any> ? this['T'] : any>;
+  storyResult: this['T'] extends Record<string, any>
+    ? SvelteStoryResult<this['T'], ComponentEvents<C>>
+    : SvelteStoryResult;
 }
 
-export type SvelteFramework = {
-  component: any;
-  storyResult: any;
-};
+export interface SvelteStoryResult<
+  Props extends Record<string, any> = any,
+  Events extends Record<string, any> = any
+> {
+  Component?: ComponentType<Props>;
+  on?: Record<string, any> extends Events
+    ? Record<string, (event: CustomEvent) => void>
+    : { [K in keyof Events as string extends K ? never : K]?: (event: Events[K]) => void };
+  props?: Props;
+}
diff --git a/code/renderers/svelte/src/typings.d.ts b/code/renderers/svelte/src/typings.d.ts
index 48e7ba6228fd..2f4eb9cf4fd9 100644
--- a/code/renderers/svelte/src/typings.d.ts
+++ b/code/renderers/svelte/src/typings.d.ts
@@ -1,3 +1 @@
-declare module '@storybook/svelte/templates/SlotDecorator.svelte';
-declare module '@storybook/svelte/templates/PreviewRender.svelte';
-declare module '@storybook/svelte/templates/HOC.svelte';
+declare module 'global';
diff --git a/code/renderers/svelte/template/components/Button.svelte b/code/renderers/svelte/template/components/Button.svelte
index 9f4f69357087..a047b51b548a 100644
--- a/code/renderers/svelte/template/components/Button.svelte
+++ b/code/renderers/svelte/template/components/Button.svelte
@@ -30,7 +30,7 @@
   /**
    * Optional click handler
    */
-  export let onClick = (event) => {
+  let onClick = (event) => {
     dispatch('click', event);
   };
 </script>
diff --git a/code/renderers/svelte/template/components/index.js b/code/renderers/svelte/template/components/index.js
index e01d07856369..508c604d2963 100644
--- a/code/renderers/svelte/template/components/index.js
+++ b/code/renderers/svelte/template/components/index.js
@@ -1,9 +1,9 @@
-import globalThis from 'global';
+import globalThis from "global";
 
-import Button from './Button.svelte';
-import Pre from './Pre.svelte';
-import Form from './Form.svelte';
-import Html from './Html.svelte';
+import Button from "./Button.svelte";
+import Pre from "./Pre.svelte";
+import Form from "./Form.svelte";
+import Html from "./Html.svelte";
 
 globalThis.Components = { Button, Pre, Form, Html };
-globalThis.storybookRenderer = 'svelte';
+globalThis.storybookRenderer = "svelte";
diff --git a/code/renderers/svelte/templates/PreviewRender.svelte b/code/renderers/svelte/templates/PreviewRender.svelte
index 5c2925fb78b7..1bac0ee6ae6e 100644
--- a/code/renderers/svelte/templates/PreviewRender.svelte
+++ b/code/renderers/svelte/templates/PreviewRender.svelte
@@ -17,12 +17,15 @@
     on,
     Wrapper,
     WrapperData = {},
-  } = storyFn(); 
+  } = storyFn();
 
-   const eventsFromArgTypes = Object.fromEntries(Object.entries(storyContext.argTypes)
+
+  const eventsFromArgTypes = Object.fromEntries(Object.entries(storyContext.argTypes)
       .filter(([k, v]) => v.action && props[k] != null)
       .map(([k, v]) => [v.action, props[k]]));
-    
+
+  console.log(eventsFromArgTypes);
+
   const events = {...eventsFromArgTypes, ...on};
 
   if (!Component) {
diff --git a/code/renderers/svelte/templates/SlotDecorator.svelte b/code/renderers/svelte/templates/SlotDecorator.svelte
index bd51e06f4271..037ae909ce00 100644
--- a/code/renderers/svelte/templates/SlotDecorator.svelte
+++ b/code/renderers/svelte/templates/SlotDecorator.svelte
@@ -15,6 +15,7 @@
   }
 
   if (on) {
+    console.log(on);
     // Attach svelte event listeners.
     Object.keys(on).forEach((eventName) => {
       onMount(() => getInstance().$on(eventName, on[eventName]));
diff --git a/code/renderers/svelte/tsconfig.json b/code/renderers/svelte/tsconfig.json
index 88fbabf6e314..1179ad52bc32 100644
--- a/code/renderers/svelte/tsconfig.json
+++ b/code/renderers/svelte/tsconfig.json
@@ -1,9 +1,11 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "module": "ESNext",
+    "skipLibCheck": true,
     "strict": true,
     "resolveJsonModule": true
   },
   "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*"]
+  "exclude": []
 }
diff --git a/code/yarn.lock b/code/yarn.lock
index f9014c52b87d..968fe2ad63af 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -7615,32 +7615,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/csf@npm:0.0.2--canary.4566f4d.1":
-  version: 0.0.2--canary.4566f4d.1
-  resolution: "@storybook/csf@npm:0.0.2--canary.4566f4d.1"
-  dependencies:
-    lodash: ^4.17.15
-  checksum: dc0fe9940a47fbba9762275083816953da07a188f0315a631c307716b16a7073586a4d229df6b177dfb4b01604667e2bb24c13d6bfcb137d2f4d306874a590f4
-  languageName: node
-  linkType: hard
-
-"@storybook/csf@npm:0.0.2--canary.49.258942b.0":
-  version: 0.0.2--canary.49.258942b.0
-  resolution: "@storybook/csf@npm:0.0.2--canary.49.258942b.0"
-  dependencies:
-    lodash: ^4.17.15
-  checksum: f765e427fa086ea00a313a107672a092a607e8086cd0d126fb8a3f6cf305af16db8cba8a0a9b81594fa378ade7d6842ab682d951c45c4b3ee74406b83e989404
-  languageName: node
-  linkType: hard
-
-"@storybook/csf@npm:^0.0.1":
-  version: 0.0.1
-  resolution: "@storybook/csf@npm:0.0.1"
+"@storybook/csf@portal:/Users/kasperpeulen/code/storybook/csf::locator=%40storybook%2Froot%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/csf@portal:/Users/kasperpeulen/code/storybook/csf::locator=%40storybook%2Froot%40workspace%3A."
   dependencies:
     lodash: ^4.17.15
-  checksum: 7b0f75763415f9147692a460b44417ee56ea9639433716a1fd4d1df4c8b0221cbc71b8da0fbed4dcecb3ccd6c7ed64be39f5c255c713539a6088a1d6488aaa24
   languageName: node
-  linkType: hard
+  linkType: soft
 
 "@storybook/docs-mdx@npm:0.0.1-canary.12433cf.0":
   version: 0.0.1-canary.12433cf.0
@@ -8295,7 +8276,6 @@ __metadata:
     acorn-jsx: ^5.3.1
     acorn-walk: ^7.2.0
     escodegen: ^2.0.0
-    expect-type: ^0.14.2
     global: ^4.4.0
     html-tags: ^3.1.0
     jest-specific-snapshot: ^4.0.0
@@ -8481,6 +8461,7 @@ __metadata:
     eslint-plugin-storybook: ^0.6.4
     esm: ^3.2.25
     execa: ^5.0.0
+    expect-type: ^0.14.2
     express: ^4.17.1
     fs-extra: ^9.0.1
     github-release-from-changelog: ^2.1.1
@@ -8536,7 +8517,8 @@ __metadata:
     ts-loader: ^9.2.8
     ts-node: ^10.4.0
     tsup: ^6.2.2
-    typescript: 4.7.4
+    type-fest: 2.19.0
+    typescript: ~4.6.3
     util: ^0.12.4
     verdaccio: ^4.10.0
     verdaccio-auth-memory: ^9.7.2
@@ -8757,7 +8739,9 @@ __metadata:
     react: 16.14.0
     react-dom: 16.14.0
     svelte: ^3.31.2
+    svelte-check: ^2.9.2
     sveltedoc-parser: ^4.2.1
+    type-fest: 2.19.0
     typescript: ~4.6.3
   peerDependencies:
     "@babel/core": "*"
@@ -14632,7 +14616,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.0.0, chokidar@npm:^3.4.0, chokidar@npm:^3.5.1, chokidar@npm:^3.5.2, chokidar@npm:^3.5.3":
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.0.0, chokidar@npm:^3.4.0, chokidar@npm:^3.4.1, chokidar@npm:^3.5.1, chokidar@npm:^3.5.2, chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
   dependencies:
@@ -35620,7 +35604,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sade@npm:^1.7.3":
+"sade@npm:^1.7.3, sade@npm:^1.7.4":
   version: 1.8.1
   resolution: "sade@npm:1.8.1"
   dependencies:
@@ -37773,6 +37757,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svelte-check@npm:^2.9.2":
+  version: 2.9.2
+  resolution: "svelte-check@npm:2.9.2"
+  dependencies:
+    "@jridgewell/trace-mapping": ^0.3.9
+    chokidar: ^3.4.1
+    fast-glob: ^3.2.7
+    import-fresh: ^3.2.1
+    picocolors: ^1.0.0
+    sade: ^1.7.4
+    svelte-preprocess: ^4.0.0
+    typescript: "*"
+  peerDependencies:
+    svelte: ^3.24.0
+  bin:
+    svelte-check: bin/svelte-check
+  checksum: 74466baae06839cdac247db88af3ebd4bdaa5e2b9332f8420e501cb4731541722aa69baecf8f269e96cbf6a79027fc59b742449f4ca04b2d6981df3c6842a4cd
+  languageName: node
+  linkType: hard
+
 "svelte-dev-helper@npm:^1.1.9":
   version: 1.1.9
   resolution: "svelte-dev-helper@npm:1.1.9"
@@ -37849,7 +37853,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte-preprocess@npm:^4.10.6":
+"svelte-preprocess@npm:^4.0.0, svelte-preprocess@npm:^4.10.6":
   version: 4.10.7
   resolution: "svelte-preprocess@npm:4.10.7"
   dependencies:
@@ -39153,6 +39157,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"type-fest@npm:2.19.0, type-fest@npm:^2.17.0, type-fest@npm:^2.19.0":
+  version: 2.19.0
+  resolution: "type-fest@npm:2.19.0"
+  checksum: a5a7ecf2e654251613218c215c7493574594951c08e52ab9881c9df6a6da0aeca7528c213c622bc374b4e0cb5c443aa3ab758da4e3c959783ce884c3194e12cb
+  languageName: node
+  linkType: hard
+
 "type-fest@npm:^0.11.0":
   version: 0.11.0
   resolution: "type-fest@npm:0.11.0"
@@ -39202,13 +39213,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^2.17.0, type-fest@npm:^2.19.0":
-  version: 2.19.0
-  resolution: "type-fest@npm:2.19.0"
-  checksum: a5a7ecf2e654251613218c215c7493574594951c08e52ab9881c9df6a6da0aeca7528c213c622bc374b4e0cb5c443aa3ab758da4e3c959783ce884c3194e12cb
-  languageName: node
-  linkType: hard
-
 "type-is@npm:~1.6.17, type-is@npm:~1.6.18":
   version: 1.6.18
   resolution: "type-is@npm:1.6.18"
diff --git a/package.json b/package.json
index 08611ecd69e3..16048ed0f762 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
     "task": "echo 'Installing Script Dependencies...'; cd scripts; yarn install >/dev/null; yarn task",
     "get-template": "cd scripts; yarn get-template",
     "test": "cd code; yarn test",
-    "lint": "cd code; yarn lint"
+    "lint": "cd code; yarn lint",
+    "nx": "cd code; yarn nx"
   },
   "packageManager": "yarn@3.2.3"
 }
diff --git a/scripts/tasks/check.ts b/scripts/tasks/check.ts
index 7bbad848ac46..57a819617b0b 100644
--- a/scripts/tasks/check.ts
+++ b/scripts/tasks/check.ts
@@ -1,7 +1,7 @@
 import { exec } from '../utils/exec';
 import type { Task } from '../task';
 
-const command = `nx run-many --target="check" --all --parallel --exclude=@storybook/addon-storyshots,@storybook/addon-storyshots-puppeteer`;
+const command = `nx run-many --target="check" --all --parallel=8 --exclude=@storybook/addon-storyshots,@storybook/addon-storyshots-puppeteer`;
 
 export const check: Task = {
   description: 'Compile the source code of the monorepo',