@storybook/svelte 10.0.0-beta.1 → 10.0.0-beta.11

package/dist/_browser-chunks/{chunk-6F5NZ26N.js → chunk-4ZGG6PUN.js}

@@ -131,7 +131,7 @@ addons.getChannel().on(RESET_STORY_ARGS, ({ storyId }) => {
   storyIdsToRemountFromResetArgsEvent.add(storyId);
 });
 var componentsByDomElement = /* @__PURE__ */ new Map();
-function renderToCanvas({
+async function renderToCanvas({
   storyFn,
   title,
   name,
@@ -171,6 +171,7 @@ function renderToCanvas({
       props
     });
     componentsByDomElement.set(canvasElement, { mountedComponent, props });
+    await svelte.tick();
   } else {
     Object.assign(existingComponent.props, {
       storyFn,
@@ -179,6 +180,7 @@ function renderToCanvas({
       title,
       showError
     });
+    await svelte.tick();
   }
   showMain();
   return () => {

package/dist/entry-preview.js

@@ -5,7 +5,7 @@ import {
   parameters,
   render,
   renderToCanvas
-} from "./_browser-chunks/chunk-6F5NZ26N.js";
+} from "./_browser-chunks/chunk-4ZGG6PUN.js";
 import "./_browser-chunks/chunk-JFJ5UJ7Q.js";
 export {
   decorateStory as applyDecorators,

package/dist/index.d.ts

@@ -1,30 +1,20 @@
 import { WebRenderer, Canvas, Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations, StoryAnnotationsOrFn, ComposedStoryFn, Store_CSFExports, StoriesWithPartialProps } from 'storybook/internal/types';
 export { ArgTypes, Args, Parameters, StrictArgs } from 'storybook/internal/types';
-import * as svelte from 'svelte';
-import { SvelteComponent, ComponentConstructorOptions, ComponentEvents, ComponentProps, ComponentType as ComponentType$1 } from 'svelte';
+import { Component, ComponentProps } from 'svelte';
 import { Simplify, SetOptional } from 'type-fest';
 import PreviewRender from '@storybook/svelte/internal/PreviewRender.svelte';
 
-type ComponentType<Props extends Record<string, any> = any, Events extends Record<string, any> = any> = new (options: ComponentConstructorOptions<Props>) => {
-    [P in keyof SvelteComponent<Props> as P extends `$$${string}` ? never : P]: SvelteComponent<Props, Events>[P];
-};
-type Svelte5ComponentType<Props extends Record<string, any> = any> = typeof svelte extends {
-    mount: any;
-} ? svelte.Component<Props, any, any> : never;
-interface SvelteRenderer<C extends SvelteComponent | Svelte5ComponentType = SvelteComponent> extends WebRenderer {
-    component: ComponentType<this['T'] extends Record<string, any> ? this['T'] : any> | Svelte5ComponentType<this['T'] extends Record<string, any> ? this['T'] : any>;
-    storyResult: this['T'] extends Record<string, any> ? SvelteStoryResult<this['T'], C extends SvelteComponent ? ComponentEvents<C> : {}> : SvelteStoryResult;
-    mount: (Component?: ComponentType | Svelte5ComponentType, options?: Record<string, any> & {
-        props: Record<string, any>;
+interface SvelteRenderer<C extends Component<any, any, any> = Component<any, any, any>> extends WebRenderer {
+    component: Component<this['T'] extends Record<string, any> ? this['T'] : any>;
+    storyResult: this['T'] extends Record<string, any> ? SvelteStoryResult<this['T']> : SvelteStoryResult;
+    mount: (Component?: C, options?: Record<string, any> & {
+        props: ComponentProps<C>;
     }) => Promise<Canvas>;
 }
-interface SvelteStoryResult<Props extends Record<string, any> = any, Events extends Record<string, any> = any> {
-    Component?: ComponentType<Props> | Svelte5ComponentType<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;
-    };
+interface SvelteStoryResult<Props extends Record<string, any> = any, Exports extends Record<string, any> = any, Bindings extends keyof Props | '' = string> {
+    Component?: Component<Props, Exports, Bindings>;
     props?: Props;
-    decorator?: ComponentType<Props> | Svelte5ComponentType<Props>;
+    decorator?: Component<Props, Exports, Bindings>;
 }
 
 /**
@@ -32,13 +22,13 @@ interface SvelteStoryResult<Props extends Record<string, any> = any, Events exte
  *
  * @see [Default export](https://storybook.js.org/docs/api/csf#default-export)
  */
-type Meta<CmpOrArgs = Args> = CmpOrArgs extends SvelteComponent<infer Props> | Svelte5ComponentType<infer Props> ? ComponentAnnotations<SvelteRenderer<CmpOrArgs>, Props> : ComponentAnnotations<SvelteRenderer, CmpOrArgs>;
+type Meta<CmpOrArgs = Args> = CmpOrArgs extends Component<infer Props> ? ComponentAnnotations<SvelteRenderer<CmpOrArgs>, Props> : ComponentAnnotations<SvelteRenderer, CmpOrArgs>;
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
-type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends SvelteComponent<infer Props> | Svelte5ComponentType<infer Props> ? AnnotatedStoryFn<SvelteRenderer, Props> : AnnotatedStoryFn<SvelteRenderer, TCmpOrArgs>;
+type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends Component<infer Props> ? AnnotatedStoryFn<SvelteRenderer, Props> : AnnotatedStoryFn<SvelteRenderer, TCmpOrArgs>;
 /**
  * Story object that represents a CSFv3 component example.
  *
@@ -48,7 +38,7 @@ type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
     render?: ArgsStoryFn<SvelteRenderer, any>;
     component: infer Comp;
     args?: infer DefaultArgs;
-} ? Simplify<ComponentProps<Comp extends ComponentType$1<infer Component> ? Component : Comp extends Svelte5ComponentType ? Comp : never> & ArgsFromMeta<SvelteRenderer, MetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<SvelteRenderer<Comp extends ComponentType$1<infer Component> ? Component : Comp extends Svelte5ComponentType ? Comp : never>, TArgs, SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>> : never : MetaOrCmpOrArgs extends SvelteComponent | Svelte5ComponentType ? StoryAnnotations<SvelteRenderer<MetaOrCmpOrArgs>, ComponentProps<MetaOrCmpOrArgs>> : StoryAnnotations<SvelteRenderer, MetaOrCmpOrArgs>;
+} ? Simplify<ComponentProps<Comp extends Component<any, any, any> ? Comp : never> & ArgsFromMeta<SvelteRenderer, MetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<SvelteRenderer<Comp extends Component<any, any, any> ? Comp : never>, TArgs, SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>> : never : MetaOrCmpOrArgs extends Component<any, any, any> ? StoryAnnotations<SvelteRenderer<MetaOrCmpOrArgs>, ComponentProps<MetaOrCmpOrArgs>> : StoryAnnotations<SvelteRenderer, MetaOrCmpOrArgs>;
 
 type Decorator<TArgs = StrictArgs> = DecoratorFunction<SvelteRenderer, TArgs>;
 type Loader<TArgs = StrictArgs> = LoaderFunction<SvelteRenderer, TArgs>;

package/dist/index.js

@@ -1,7 +1,7 @@
 import {
   entry_preview_exports,
   renderToCanvas
-} from "./_browser-chunks/chunk-6F5NZ26N.js";
+} from "./_browser-chunks/chunk-4ZGG6PUN.js";
 import {
   __name
 } from "./_browser-chunks/chunk-JFJ5UJ7Q.js";

package/dist/preset.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_oy7dmfe0z9d from 'node:url';
-import CJS_COMPAT_NODE_PATH_oy7dmfe0z9d from 'node:path';
-import CJS_COMPAT_NODE_MODULE_oy7dmfe0z9d from "node:module";
+import CJS_COMPAT_NODE_URL_5alxob4ufr6 from 'node:url';
+import CJS_COMPAT_NODE_PATH_5alxob4ufr6 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_5alxob4ufr6 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_oy7dmfe0z9d.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_oy7dmfe0z9d.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_oy7dmfe0z9d.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_5alxob4ufr6.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_5alxob4ufr6.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_5alxob4ufr6.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "10.0.0-beta.1",
+  "version": "10.0.0-beta.11",
   "description": "Storybook Svelte renderer: Develop, document, and test UI components in isolation.",
   "keywords": [
     "storybook",
@@ -59,17 +59,16 @@
     "type-fest": "~2.19"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@sveltejs/vite-plugin-svelte": "^6.2.0",
     "@testing-library/svelte": "^5.2.4",
-    "expect-type": "^1.1.0",
-    "svelte": "^5.20.5",
-    "svelte-check": "^4.1.4",
+    "svelte": "^5.39.5",
+    "svelte-check": "^4.3.2",
     "sveltedoc-parser": "^4.2.1",
     "typescript": "^5.8.3",
     "vite": "^7.0.4"
   },
   "peerDependencies": {
-    "storybook": "^10.0.0-beta.1",
+    "storybook": "^10.0.0-beta.11",
     "svelte": "^5.0.0"
   },
   "publishConfig": {

package/static/PreviewRender.svelte

@@ -26,4 +26,9 @@
   });
 </script>
 
-<DecoratorHandler {Component} {props} />
+<svelte:boundary>
+  {#snippet pending()}
+    <div id="sb-pending-async-component-notice">Pending async component...</div>
+  {/snippet}
+  <DecoratorHandler {Component} {props} />
+</svelte:boundary>

package/svelte.config.js

@@ -0,0 +1,16 @@
+//! this config isn't actually used, it's just here to tell svelte-check that we have async enabled
+
+const config = {
+  kit: {
+    experimental: {
+      remoteFunctions: true,
+    },
+  },
+  compilerOptions: {
+    experimental: {
+      async: true,
+    },
+  },
+};
+
+export default config;