diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index b52675b730fe..a51bb88163c7 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -52,7 +52,7 @@ "@storybook/svelte": "workspace:*", "@sveltejs/vite-plugin-svelte": "^2.4.2", "magic-string": "^0.30.0", - "svelte-preprocess": "^5.0.4", + "svelte-preprocess": "^5.1.1", "sveltedoc-parser": "^4.2.1", "ts-dedent": "^2.2.0" }, diff --git a/code/renderers/svelte/src/render.ts b/code/renderers/svelte/src/render.ts index cb196d0fcedb..e81f5164be0a 100644 --- a/code/renderers/svelte/src/render.ts +++ b/code/renderers/svelte/src/render.ts @@ -1,6 +1,5 @@ /* eslint-disable no-param-reassign */ import type { RenderContext, ArgsStoryFn } from '@storybook/types'; -import type { SvelteComponentTyped } from 'svelte'; import { RESET_STORY_ARGS } from '@storybook/core-events'; // ! DO NOT change this PreviewRender import to a relative path, it will break it. // ! A relative import will be compiled at build time, and Svelte will be unable to @@ -14,7 +13,10 @@ import { createRoot } from 'svelte'; import type { SvelteRenderer } from './types'; -const componentsByDomElement = new Map(); +const componentsByDomElement = new Map< + SvelteRenderer['canvasElement'], + ReturnType +>(); function teardown(canvasElement: SvelteRenderer['canvasElement']) { if (!componentsByDomElement.has(canvasElement)) { diff --git a/code/renderers/svelte/templates/PreviewRender.svelte b/code/renderers/svelte/templates/PreviewRender.svelte index 581aa4d78e05..fb08019c682b 100644 --- a/code/renderers/svelte/templates/PreviewRender.svelte +++ b/code/renderers/svelte/templates/PreviewRender.svelte @@ -6,15 +6,12 @@ export let kind; export let storyFn; export let showError; - export let storyContext; let { /** @type {SvelteComponent} */ Component, /** @type {any} */ props = {}, - /** @type {{[string]: () => {}}} Attach svelte event handlers */ - on, } = storyFn(); let firstTime = true; @@ -28,7 +25,6 @@ return { Component, props, - on, } } return storyFn(); @@ -37,12 +33,6 @@ // reactive, re-render on storyFn change $: ({ Component, props = {}, on } = getStoryFnValue(storyFn)); - const eventsFromArgTypes = Object.fromEntries( - Object.entries(storyContext.argTypes) - .filter(([k, v]) => v.action && props[k] != null) - .map(([k, v]) => [v.action, props[k]]) - ); - if (!Component) { showError({ title: `Expecting a Svelte component from the story: "${name}" of "${kind}".`, @@ -55,4 +45,4 @@ } - + diff --git a/code/renderers/svelte/templates/SlotDecorator.svelte b/code/renderers/svelte/templates/SlotDecorator.svelte index a438eaa3603a..1e02890ca3f7 100644 --- a/code/renderers/svelte/templates/SlotDecorator.svelte +++ b/code/renderers/svelte/templates/SlotDecorator.svelte @@ -4,21 +4,12 @@ export let decorator = undefined; export let Component; export let props = {}; - export let on = undefined; - - let instance; - let decoratorInstance; - - function getInstance() { - // instance can be undefined if a decorator doesn't have - return instance || decoratorInstance; - } {#if decorator} - - + + {:else} - + {/if} diff --git a/code/yarn.lock b/code/yarn.lock index c5699bc39d0b..2ad072d71691 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7216,7 +7216,7 @@ __metadata: "@types/node": "npm:^18.0.0" magic-string: "npm:^0.30.0" svelte: "npm:^5.0.0-next.15" - svelte-preprocess: "npm:^5.0.4" + svelte-preprocess: "npm:^5.1.1" sveltedoc-parser: "npm:^4.2.1" ts-dedent: "npm:^2.2.0" typescript: "npm:^5.3.2" @@ -27582,9 +27582,9 @@ __metadata: languageName: node linkType: hard -"svelte-preprocess@npm:^5.0.4": - version: 5.0.4 - resolution: "svelte-preprocess@npm:5.0.4" +"svelte-preprocess@npm:^5.1.0": + version: 5.1.0 + resolution: "svelte-preprocess@npm:5.1.0" dependencies: "@types/pug": "npm:^2.0.6" detect-indent: "npm:^6.1.0" @@ -27601,7 +27601,7 @@ __metadata: sass: ^1.26.8 stylus: ^0.55.0 sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0 - svelte: ^3.23.0 || ^4.0.0-next.0 || ^4.0.0 + svelte: ^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0 typescript: ">=3.9.5 || ^4.0.0 || ^5.0.0" peerDependenciesMeta: "@babel/core": @@ -27624,13 +27624,13 @@ __metadata: optional: true typescript: optional: true - checksum: 1ed64b96a91327a47992df0b82df708b5cda92e1da211edbedaf411e633a0be5a8425d19f996abc8dcef52dadd26b5474924dd9eeb30a7b409bf60c33b689d6c + checksum: fb40153aa282edadad68221fcf82db1b7c67a208941b136c529fd843d1e8b595d79e9d39e5f252672e11a8b62c621ccf2078de4a57e5adbb89e13046998ae597 languageName: node linkType: hard -"svelte-preprocess@npm:^5.1.0": - version: 5.1.0 - resolution: "svelte-preprocess@npm:5.1.0" +"svelte-preprocess@npm:^5.1.1": + version: 5.1.1 + resolution: "svelte-preprocess@npm:5.1.1" dependencies: "@types/pug": "npm:^2.0.6" detect-indent: "npm:^6.1.0" @@ -27670,7 +27670,7 @@ __metadata: optional: true typescript: optional: true - checksum: fb40153aa282edadad68221fcf82db1b7c67a208941b136c529fd843d1e8b595d79e9d39e5f252672e11a8b62c621ccf2078de4a57e5adbb89e13046998ae597 + checksum: 8de6571ddca032dc7a33c37a6cd7caa72eeabf6acbe81924e26f14e9f5de8bbf2806c86d1ac3cb435923c3953d0d9365dfbe2a8c94cd3b383ecfe50957e1b8f9 languageName: node linkType: hard