diff --git a/package.json b/package.json
index 987d6b9..3b0ab59 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
"@storybook/test": "^8.1.0",
"@storybook/types": "^8.1.0",
"@sveltejs/package": "^2.2.0",
- "@sveltejs/vite-plugin-svelte": "^3.1.0",
+ "@sveltejs/vite-plugin-svelte": "4.0.0-next.1",
"@total-typescript/ts-reset": "^0.5.1",
"@tsconfig/svelte": "^5.0.0",
"@types/estree": "^1.0.5",
@@ -77,11 +77,10 @@
"prettier": "^3.0.0",
"rimraf": "^5.0.7",
"storybook": "^8.1.0",
- "svelte": "5.0.0-next.133",
+ "svelte": "5.0.0-next.135",
"svelte-check": "^3.5.0",
"svelte-loader": "^3.1.7",
"svelte-package": "^0.1.0",
- "type-fest": "^4.18.2",
"typescript": "^5.1.6",
"vite": "^5.2.10",
"vitest": "^1.5.2"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 361e214..d64ba9c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -46,10 +46,10 @@ importers:
version: 8.1.0
'@storybook/svelte':
specifier: ^8.1.0
- version: 8.1.0(prettier@3.2.5)(svelte@5.0.0-next.133)
+ version: 8.1.0(prettier@3.2.5)(svelte@5.0.0-next.135)
'@storybook/svelte-vite':
specifier: ^8.1.0
- version: 8.1.0(@babel/core@7.24.5)(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12)))(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(prettier@3.2.5)(svelte@5.0.0-next.133)(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.12))
+ version: 8.1.0(@babel/core@7.24.5)(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12)))(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(prettier@3.2.5)(svelte@5.0.0-next.135)(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.12))
'@storybook/test':
specifier: ^8.1.0
version: 8.1.0(@jest/globals@29.7.0)(jest@29.7.0(@types/node@20.12.12))(vitest@1.6.0(@types/node@20.12.12)(jsdom@24.0.0))
@@ -58,10 +58,10 @@ importers:
version: 8.1.0
'@sveltejs/package':
specifier: ^2.2.0
- version: 2.3.1(svelte@5.0.0-next.133)(typescript@5.4.5)
+ version: 2.3.1(svelte@5.0.0-next.135)(typescript@5.4.5)
'@sveltejs/vite-plugin-svelte':
- specifier: ^3.1.0
- version: 3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12))
+ specifier: 4.0.0-next.1
+ version: 4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12))
'@total-typescript/ts-reset':
specifier: ^0.5.1
version: 0.5.1
@@ -105,20 +105,17 @@ importers:
specifier: ^8.1.0
version: 8.1.0(@babel/preset-env@7.24.5(@babel/core@7.24.5))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
svelte:
- specifier: 5.0.0-next.133
- version: 5.0.0-next.133
+ specifier: 5.0.0-next.135
+ version: 5.0.0-next.135
svelte-check:
specifier: ^3.5.0
- version: 3.7.1(@babel/core@7.24.5)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.133)
+ version: 3.7.1(@babel/core@7.24.5)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.135)
svelte-loader:
specifier: ^3.1.7
- version: 3.2.0(svelte@5.0.0-next.133)
+ version: 3.2.0(svelte@5.0.0-next.135)
svelte-package:
specifier: ^0.1.0
- version: 0.1.0(@sveltejs/kit@2.5.8(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12)))
- type-fest:
- specifier: ^4.18.2
- version: 4.18.2
+ version: 0.1.0(@sveltejs/kit@2.5.8(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12)))
typescript:
specifier: ^5.1.6
version: 5.4.5
@@ -2550,25 +2547,25 @@ packages:
peerDependencies:
svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
- '@sveltejs/vite-plugin-svelte-inspector@2.1.0':
+ '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.1':
resolution:
{
- integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==,
+ integrity: sha512-slACwpEW8e/+I9MGjrdss4qJMobYtLrdu07m5BJ29rubm0lYXL3KKTqORYA5WTvRtpZfbYjsw1WfMOj9XasnJw==,
}
- engines: { node: ^18.0.0 || >=20 }
+ engines: { node: ^18.0.0 || ^20.0.0 || >=22 }
peerDependencies:
- '@sveltejs/vite-plugin-svelte': ^3.0.0
- svelte: ^4.0.0 || ^5.0.0-next.0
+ '@sveltejs/vite-plugin-svelte': ^4.0.0-next.1
+ svelte: ^5.0.0-next.96 || ^5.0.0
vite: ^5.0.0
- '@sveltejs/vite-plugin-svelte@3.1.0':
+ '@sveltejs/vite-plugin-svelte@4.0.0-next.1':
resolution:
{
- integrity: sha512-sY6ncCvg+O3njnzbZexcVtUqOBE3iYmQPJ9y+yXSkOwG576QI/xJrBnQSRXFLGwJNBa0T78JEKg5cIR0WOAuUw==,
+ integrity: sha512-FJBcgRhzWnEvNy8eqHlHKl2oea3+2rA9WAMnZdXJjEMJBpl/6IkhgcCMd7qRw0Qbb1BA66qsSD36UcSngUwqgA==,
}
- engines: { node: ^18.0.0 || >=20 }
+ engines: { node: ^18.0.0 || ^20.0.0 || >=22 }
peerDependencies:
- svelte: ^4.0.0 || ^5.0.0-next.0
+ svelte: ^5.0.0-next.96 || ^5.0.0
vite: ^5.0.0
'@testing-library/dom@9.3.4':
@@ -9273,15 +9270,6 @@ packages:
peerDependencies:
svelte: '>=3.19.0'
- svelte-hmr@0.16.0:
- resolution:
- {
- integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==,
- }
- engines: { node: ^12.20 || ^14.13.1 || >= 16 }
- peerDependencies:
- svelte: ^3.19.0 || ^4.0.0
-
svelte-loader@3.2.0:
resolution:
{
@@ -9345,10 +9333,10 @@ packages:
svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
typescript: ^4.9.4 || ^5.0.0
- svelte@5.0.0-next.133:
+ svelte@5.0.0-next.135:
resolution:
{
- integrity: sha512-tiflIJKv8oATg7OC1sX5IyKPHuFp1K2EpE3xIzpFyIj9tE7UC5UAM8/9R6/sWQjDT5Jw31RA731uUVIwZBeE9w==,
+ integrity: sha512-RHvbV5Rhbq+mfy96++OM4EAjuJWMiPk8/BVFg2zVO31HiTN/8nmO2RGxikt4hjFa/vyOmW5La03Erv4zpClSRw==,
}
engines: { node: '>=18' }
@@ -9705,13 +9693,6 @@ packages:
}
engines: { node: '>=12.20' }
- type-fest@4.18.2:
- resolution:
- {
- integrity: sha512-+suCYpfJLAe4OXS6+PPXjW3urOS4IoP9waSiLuXfLgqZODKw/aWwASvzqE886wA0kQgGy0mIWyhd87VpqIy6Xg==,
- }
- engines: { node: '>=16' }
-
type-is@1.6.18:
resolution:
{
@@ -12761,15 +12742,15 @@ snapshots:
memoizerific: 1.11.3
qs: 6.12.1
- '@storybook/svelte-vite@8.1.0(@babel/core@7.24.5)(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12)))(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(prettier@3.2.5)(svelte@5.0.0-next.133)(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.12))':
+ '@storybook/svelte-vite@8.1.0(@babel/core@7.24.5)(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12)))(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(prettier@3.2.5)(svelte@5.0.0-next.135)(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.12))':
dependencies:
'@storybook/builder-vite': 8.1.0(prettier@3.2.5)(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.12))
'@storybook/node-logger': 8.1.0
- '@storybook/svelte': 8.1.0(prettier@3.2.5)(svelte@5.0.0-next.133)
- '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12))
+ '@storybook/svelte': 8.1.0(prettier@3.2.5)(svelte@5.0.0-next.135)
+ '@sveltejs/vite-plugin-svelte': 4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12))
magic-string: 0.30.10
- svelte: 5.0.0-next.133
- svelte-preprocess: 5.1.4(@babel/core@7.24.5)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.133)(typescript@5.4.5)
+ svelte: 5.0.0-next.135
+ svelte-preprocess: 5.1.4(@babel/core@7.24.5)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.135)(typescript@5.4.5)
sveltedoc-parser: 4.2.1
ts-dedent: 2.2.0
vite: 5.2.11(@types/node@20.12.12)
@@ -12790,7 +12771,7 @@ snapshots:
- typescript
- vite-plugin-glimmerx
- '@storybook/svelte@8.1.0(prettier@3.2.5)(svelte@5.0.0-next.133)':
+ '@storybook/svelte@8.1.0(prettier@3.2.5)(svelte@5.0.0-next.135)':
dependencies:
'@storybook/client-logger': 8.1.0
'@storybook/core-events': 8.1.0
@@ -12798,7 +12779,7 @@ snapshots:
'@storybook/global': 5.0.0
'@storybook/preview-api': 8.1.0
'@storybook/types': 8.1.0
- svelte: 5.0.0-next.133
+ svelte: 5.0.0-next.135
sveltedoc-parser: 4.2.1
ts-dedent: 2.2.0
type-fest: 2.19.0
@@ -12857,13 +12838,13 @@ snapshots:
'@types/express': 4.17.21
file-system-cache: 2.3.0
- '@sveltejs/adapter-static@2.0.3(@sveltejs/kit@2.5.8(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12)))':
+ '@sveltejs/adapter-static@2.0.3(@sveltejs/kit@2.5.8(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12)))':
dependencies:
- '@sveltejs/kit': 2.5.8(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12))
+ '@sveltejs/kit': 2.5.8(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12))
- '@sveltejs/kit@2.5.8(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12))':
+ '@sveltejs/kit@2.5.8(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12))':
dependencies:
- '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12))
+ '@sveltejs/vite-plugin-svelte': 4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12))
'@types/cookie': 0.6.0
cookie: 0.6.0
devalue: 5.0.0
@@ -12875,39 +12856,38 @@ snapshots:
sade: 1.8.1
set-cookie-parser: 2.6.0
sirv: 2.0.4
- svelte: 5.0.0-next.133
+ svelte: 5.0.0-next.135
tiny-glob: 0.2.9
vite: 5.2.11(@types/node@20.12.12)
- '@sveltejs/package@2.3.1(svelte@5.0.0-next.133)(typescript@5.4.5)':
+ '@sveltejs/package@2.3.1(svelte@5.0.0-next.135)(typescript@5.4.5)':
dependencies:
chokidar: 3.6.0
kleur: 4.1.5
sade: 1.8.1
semver: 7.6.2
- svelte: 5.0.0-next.133
- svelte2tsx: 0.7.8(svelte@5.0.0-next.133)(typescript@5.4.5)
+ svelte: 5.0.0-next.135
+ svelte2tsx: 0.7.8(svelte@5.0.0-next.135)(typescript@5.4.5)
transitivePeerDependencies:
- typescript
- '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12))':
+ '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.1(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12))':
dependencies:
- '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12))
+ '@sveltejs/vite-plugin-svelte': 4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12))
debug: 4.3.4
- svelte: 5.0.0-next.133
+ svelte: 5.0.0-next.135
vite: 5.2.11(@types/node@20.12.12)
transitivePeerDependencies:
- supports-color
- '@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12))':
+ '@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12))':
dependencies:
- '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12))
+ '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.1(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12))
debug: 4.3.4
deepmerge: 4.3.1
kleur: 4.1.5
magic-string: 0.30.10
- svelte: 5.0.0-next.133
- svelte-hmr: 0.16.0(svelte@5.0.0-next.133)
+ svelte: 5.0.0-next.135
vite: 5.2.11(@types/node@20.12.12)
vitefu: 0.2.5(vite@5.2.11(@types/node@20.12.12))
transitivePeerDependencies:
@@ -17516,7 +17496,7 @@ snapshots:
supports-preserve-symlinks-flag@1.0.0: {}
- svelte-check@3.7.1(@babel/core@7.24.5)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.133):
+ svelte-check@3.7.1(@babel/core@7.24.5)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.135):
dependencies:
'@jridgewell/trace-mapping': 0.3.25
chokidar: 3.6.0
@@ -17524,8 +17504,8 @@ snapshots:
import-fresh: 3.3.0
picocolors: 1.0.1
sade: 1.8.1
- svelte: 5.0.0-next.133
- svelte-preprocess: 5.1.4(@babel/core@7.24.5)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.133)(typescript@5.4.5)
+ svelte: 5.0.0-next.135
+ svelte-preprocess: 5.1.4(@babel/core@7.24.5)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.135)(typescript@5.4.5)
typescript: 5.4.5
transitivePeerDependencies:
- '@babel/core'
@@ -17540,49 +17520,45 @@ snapshots:
svelte-dev-helper@1.1.9: {}
- svelte-hmr@0.14.12(svelte@5.0.0-next.133):
- dependencies:
- svelte: 5.0.0-next.133
-
- svelte-hmr@0.16.0(svelte@5.0.0-next.133):
+ svelte-hmr@0.14.12(svelte@5.0.0-next.135):
dependencies:
- svelte: 5.0.0-next.133
+ svelte: 5.0.0-next.135
- svelte-loader@3.2.0(svelte@5.0.0-next.133):
+ svelte-loader@3.2.0(svelte@5.0.0-next.135):
dependencies:
loader-utils: 2.0.4
- svelte: 5.0.0-next.133
+ svelte: 5.0.0-next.135
svelte-dev-helper: 1.1.9
- svelte-hmr: 0.14.12(svelte@5.0.0-next.133)
+ svelte-hmr: 0.14.12(svelte@5.0.0-next.135)
- svelte-package@0.1.0(@sveltejs/kit@2.5.8(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12))):
+ svelte-package@0.1.0(@sveltejs/kit@2.5.8(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12))):
dependencies:
- '@sveltejs/adapter-static': 2.0.3(@sveltejs/kit@2.5.8(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.133)(vite@5.2.11(@types/node@20.12.12)))
+ '@sveltejs/adapter-static': 2.0.3(@sveltejs/kit@2.5.8(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12)))(svelte@5.0.0-next.135)(vite@5.2.11(@types/node@20.12.12)))
transitivePeerDependencies:
- '@sveltejs/kit'
- svelte-preprocess@5.1.4(@babel/core@7.24.5)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.133)(typescript@5.4.5):
+ svelte-preprocess@5.1.4(@babel/core@7.24.5)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.135)(typescript@5.4.5):
dependencies:
'@types/pug': 2.0.10
detect-indent: 6.1.0
magic-string: 0.30.10
sorcery: 0.11.0
strip-indent: 3.0.0
- svelte: 5.0.0-next.133
+ svelte: 5.0.0-next.135
optionalDependencies:
'@babel/core': 7.24.5
postcss: 8.4.38
postcss-load-config: 4.0.2(postcss@8.4.38)
typescript: 5.4.5
- svelte2tsx@0.7.8(svelte@5.0.0-next.133)(typescript@5.4.5):
+ svelte2tsx@0.7.8(svelte@5.0.0-next.135)(typescript@5.4.5):
dependencies:
dedent-js: 1.0.1
pascal-case: 3.1.2
- svelte: 5.0.0-next.133
+ svelte: 5.0.0-next.135
typescript: 5.4.5
- svelte@5.0.0-next.133:
+ svelte@5.0.0-next.135:
dependencies:
'@ampproject/remapping': 2.3.0
'@jridgewell/sourcemap-codec': 1.4.15
@@ -17806,8 +17782,6 @@ snapshots:
type-fest@2.19.0: {}
- type-fest@4.18.2: {}
-
type-is@1.6.18:
dependencies:
media-typer: 0.3.0
diff --git a/src/components/Story.svelte b/src/components/Story.svelte
index 0af5cd8..09500f5 100644
--- a/src/components/Story.svelte
+++ b/src/components/Story.svelte
@@ -1,11 +1,11 @@
-{#if render && children}
- {@render children({ ...rendererContext.componentAnnotations, context: rendererContext.storyContext })}
+{#if isCurrentlyViewed}
+ {#if children}
+ {@render children(childrenProps)}
+ {:else if childrenTemplate}
+ {@render childrenTemplate(childrenProps)}
+ {/if}
{/if}
diff --git a/src/components/StoryRenderer.svelte b/src/components/StoryRenderer.svelte
index ecf8943..dd43fe2 100644
--- a/src/components/StoryRenderer.svelte
+++ b/src/components/StoryRenderer.svelte
@@ -1,40 +1,24 @@
-
-{#if render}
- {@render children({ ...rendererContext.componentAnnotations, context: rendererContext.storyContext })}
-{/if}
diff --git a/src/components/context.svelte.ts b/src/components/context.svelte.ts
index bbc536a..e3f0f26 100644
--- a/src/components/context.svelte.ts
+++ b/src/components/context.svelte.ts
@@ -6,36 +6,20 @@ import {
setContext,
type ComponentProps,
type SvelteComponent,
+ type Snippet,
} from 'svelte';
-import type { SetRequired } from 'type-fest';
const KEYS = {
extractor: 'storybook-stories-extractor-context',
renderer: 'storybook-story-renderer-context',
+ renderSnippet: 'storybook-stories-render-snippet-context',
} as const;
export interface StoriesExtractorContextProps {
isExtracting: boolean;
- register: {
- template: (template: AddonTemplateObj) => void;
- story: (story: AddonStoryObj) => void;
- };
+ register: (story: StoryObj) => void;
}
-export type AddonTemplateObj = Omit<
- StoryObj,
- 'render'
-> & {
- id: string;
-};
-
-export type AddonStoryObj = Omit<
- SetRequired, 'name'>,
- 'render'
-> & {
- templateId?: AddonTemplateObj['id'];
-};
-
export function buildStoriesExtractorContext(
props: StoriesExtractorContextProps
) {
@@ -58,40 +42,31 @@ export type RegistrationContext = ReturnType<
export type StoriesRepository = {
meta: Meta;
- templates: Map>;
- stories: Map>;
+ stories: Map>;
};
export function createStoriesExtractorContext(
repository: StoriesRepository
): void {
- const { templates, stories } = repository;
+ const { stories } = repository;
const ctx = buildStoriesExtractorContext({
isExtracting: true,
- register: {
- template: (t) => {
- templates.set(t.id, t);
- },
- story: (s) => {
- stories.set(s.name, s);
- },
+ register: (s) => {
+ stories.set(s.name as string, s);
},
});
setContext(KEYS.extractor, ctx);
}
-export function useStoriesExtractorContext() {
+export function useStoriesExtractor() {
if (!hasContext(KEYS.extractor)) {
setContext(
KEYS.extractor,
buildStoriesExtractorContext({
isExtracting: false,
- register: {
- template: () => {},
- story: () => {},
- },
+ register: () => {},
})
);
}
@@ -102,7 +77,6 @@ export function useStoriesExtractorContext()
interface StoryRendererContextProps {
componentAnnotations: ComponentAnnotations>>;
storyContext: StoryContext>;
- currentTemplateId: string | undefined;
currentStoryName: StoryName | undefined;
}
@@ -110,13 +84,11 @@ function buildStoryRendererContext(
props: StoryRendererContextProps
) {
let currentStoryName = $state(props.currentStoryName);
- let currentTemplateId = $state(props.currentTemplateId);
let storyContext = $state(props.storyContext);
let componentAnnotations = $state(props.componentAnnotations);
function set(props: StoryRendererContextProps) {
currentStoryName = props.currentStoryName;
- currentTemplateId = props.currentTemplateId;
componentAnnotations = props.componentAnnotations;
storyContext = props.storyContext;
}
@@ -128,9 +100,6 @@ function buildStoryRendererContext(
get storyContext() {
return storyContext;
},
- get currentTemplateId() {
- return currentTemplateId;
- },
get currentStoryName() {
return currentStoryName;
},
@@ -145,19 +114,64 @@ export type StoryRendererContext = ReturnType
function createStoryRendererContext(): void {
const ctx = buildStoryRendererContext({
currentStoryName: undefined,
- currentTemplateId: undefined,
componentAnnotations: {},
- // FIXME: What is missing to be done to satisfy the default?
+ // @ts-expect-error FIXME: I don't know how to satisfy this one
storyContext: {},
});
setContext(KEYS.renderer, ctx);
}
-export function useStoryRendererContext() {
+export function useStoryRenderer() {
if (!hasContext(KEYS.renderer)) {
createStoryRendererContext();
}
return getContext>(KEYS.renderer);
}
+
+type StoryChildrenTemplate = Snippet<
+ [
+ ComponentAnnotations> & {
+ context: StoryContext>;
+ },
+ ]
+>;
+function createStoryChildrenTemplateContext() {
+ let template = $state>();
+
+ function set(snippet?: StoryChildrenTemplate) {
+ template = snippet;
+ }
+
+ return {
+ get template() {
+ return template;
+ },
+ set,
+ };
+}
+
+type StoryChildrenTemplateContext = ReturnType<
+ typeof createStoryChildrenTemplateContext
+>;
+
+export function useStoryChildrenTemplate() {
+ if (!hasContext(KEYS.renderSnippet)) {
+ setContext(KEYS.renderSnippet, createStoryChildrenTemplateContext());
+ }
+
+ return getContext>(KEYS.renderSnippet).template;
+}
+
+export function setTemplate(
+ snippet?: StoryChildrenTemplate
+): void {
+ if (!hasContext(KEYS.renderSnippet)) {
+ setContext(KEYS.renderSnippet, createStoryChildrenTemplateContext());
+ }
+
+ const ctx = getContext>(KEYS.renderSnippet);
+
+ ctx.set(snippet);
+}
diff --git a/src/index.ts b/src/index.ts
index 10697e1..5635afa 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,11 +1,12 @@
///
import Story from './components/Story.svelte';
-import Template from './components/Template.svelte';
+
+import { setTemplate } from './components/context.svelte.js';
// FIXME: We don't use webpack anymore(?)
if (module?.hot?.decline) {
module.hot.decline();
}
-export { Template, Story };
+export { Story, setTemplate };
diff --git a/src/parser/collect-stories.ts b/src/parser/collect-stories.ts
index 9971188..6e484ea 100644
--- a/src/parser/collect-stories.ts
+++ b/src/parser/collect-stories.ts
@@ -17,13 +17,13 @@ const createFragment = document.createDocumentFragment
/**
* @module
- * Called from a webpack loader and a jest transformation.
+ * Called from a bundler.
*
- * It mounts a Stories component in a context which disables
- * the rendering of every and but instead
- * collects names and properties.
+ * It mounts the Stories components in a context which disables
+ * the rendering of every ``,
+ * but instead collects names and properties.
*
- * For every discovered , it creates a storyFn which
+ * For every discovered ``, it creates a `StoryFn` which
* instantiate the main Stories component: Every Story but
* the one selected is disabled.
*/
@@ -44,7 +44,6 @@ export default (
const repository: StoriesRepository = {
meta,
- templates: new Map(),
stories: new Map(),
};
@@ -62,23 +61,17 @@ export default (
logger.error(`Error in mounting stories ${e.toString()}`, e);
}
- const stories: Record> = {};
+ const stories: Record> = {};
for (const [name, story] of repository.stories) {
- const { templateId } = story;
- const template = templateId && repository.templates.get(templateId);
- const templateMeta = templateId && storiesFileMeta.fragment.templates[templateId];
const storyMeta = storiesFileMeta.fragment.stories[name];
- // FIXME: What exactly is missing?
// NOTE: We can't use StoryObj, because `@storybook/svelte` accepts `StoryFn` for now
- const storyFn: StoryFn = (args, storyContext) => {
+ const storyFn: StoryFn = (args, storyContext) => {
return {
Component: StoryRenderer,
props: {
- ...meta,
storyName: story.name,
- templateId,
Stories,
storyContext,
args,
@@ -86,40 +79,35 @@ export default (
};
};
storyFn.storyName = story.name;
- storyFn.args = combineArgs(meta.args, { ...template?.args, ...story.args });
+ storyFn.args = combineArgs(meta.args, story.args);
storyFn.parameters = combineParameters(
meta.parameters,
- template?.parameters,
story.parameters,
- templateMeta?.description || storyMeta.description
+ storyMeta.description
? {
docs: {
description: {
- story: storyMeta.description ?? templateMeta?.description,
+ story: storyMeta.description,
},
},
}
- : undefined,
- templateMeta?.rawSource || storyMeta.rawSource
- ? {
- docs: {
- source: {
- code: storyMeta.rawSource ?? templateMeta?.rawSource,
- },
- },
- storySource: {
- source: storyMeta.rawSource ?? templateMeta?.rawSource,
- },
- }
: undefined
+ // storyMeta.rawSource
+ // ? {
+ // docs: {
+ // source: {
+ // code: storyMeta.rawSource,
+ // },
+ // },
+ // storySource: {
+ // source: storyMeta.rawSource,
+ // },
+ // }
+ // : undefined,
);
- storyFn.tags = combineTags(
- ...(meta.tags ?? []),
- ...(template?.tags ?? []),
- ...(story.tags ?? [])
- );
+ storyFn.tags = combineTags(...(meta.tags ?? []), ...(story.tags ?? []));
- const play = meta.play ?? template?.play ?? story.play;
+ const play = meta.play ?? story.play;
if (play) {
/*
diff --git a/src/parser/extract-stories.ts b/src/parser/extract-stories.ts
index 94dd4b0..536649a 100644
--- a/src/parser/extract-stories.ts
+++ b/src/parser/extract-stories.ts
@@ -6,9 +6,7 @@ import { walkOnInstance } from './walkers/instance.js';
import { walkOnFragment } from './walkers/fragment.js';
/**
- * Parse a Svelte component and extract stories.
- * @param rawSource Component Source
- * @returns Map of storyName -> source
+ * Parse raw stories file component in Svelte format and extract stories.
*/
export function extractStories(rawSource: string): StoriesFileMeta {
const { ast }: { ast: Root } = compile(rawSource, { modernAst: true });
@@ -19,7 +17,7 @@ export function extractStories(rawSource: string): StoriesFileMeta {
const fragmentMeta = walkOnFragment({
fragment,
rawSource,
- addonComponents: instanceMeta.addonComponents,
+ addonComponentName: instanceMeta.addonComponentName,
});
return {
diff --git a/src/parser/types.ts b/src/parser/types.ts
index 9a2cbfc..a08f7ca 100644
--- a/src/parser/types.ts
+++ b/src/parser/types.ts
@@ -1,7 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/svelte';
+import type { Meta } from '@storybook/svelte';
-export const ADDON_COMPONENT_NAMES = ['Story', 'Template'] as const;
-export type AddonComponentName = (typeof ADDON_COMPONENT_NAMES)[number];
+export const ADDON_COMPONENT_NAME = 'Story';
/**
* Data extracted from the static analytic of a single stories file - `*.stories.svelte`.
@@ -17,7 +16,8 @@ export interface StoriesFileMeta {
* from the single stories file - `*.stories.svelte`.
*/
export interface InstanceMeta extends Pick {
- addonComponents: Record;
+ // Can be overriden with `import { Story as S } ...`
+ addonComponentName: typeof ADDON_COMPONENT_NAME | (string & {});
}
/**
@@ -33,25 +33,9 @@ export interface ModuleMeta extends Pick {
* from the single stories file - `*.stories.svelte`.
*/
export interface FragmentMeta {
- templates: Record;
stories: Record;
}
-/**
- * Meta extracted from static analysis of the single component
- * in the stories file - `*.stories.svelte`.
- */
-export interface TemplateMeta {
- /**
- * Template id, which is used by `` - addon component
- * @default "default"
- */
- id: string;
- description?: StoryMeta['description'];
- /** Raw source for children _(what is inside the ... tags)_ */
- rawSource?: string;
-}
-
/**
* Meta extracted from static analysis of the single component
* in the stories file - `*.stories.svelte`.
@@ -66,11 +50,6 @@ export interface StoryMeta {
* @default "Default"
*/
name: string;
- /**
- * Template id to use.
- * @default "default"
- */
- templateId?: string;
/**
* Description of the story, will display above the sample in docs mode.
*/
diff --git a/src/parser/walkers/component.ts b/src/parser/walkers/component.ts
index f914388..c17712c 100644
--- a/src/parser/walkers/component.ts
+++ b/src/parser/walkers/component.ts
@@ -1,118 +1,94 @@
-import { logger } from "@storybook/client-logger";
-import dedent from "dedent";
-import type { Attribute, Component, SnippetBlock } from "svelte/compiler";
+import { logger } from '@storybook/client-logger';
+import dedent from 'dedent';
+import type { Attribute, Component, SnippetBlock } from 'svelte/compiler';
-export function getStoryName(attributes: Component["attributes"]) {
- return getStringFromAttribute("name", attributes) ?? "Default";
-}
-
-export function getDescription(node: Component) {
- const { parent } = node;
-
- if (parent?.type === "Comment") {
- return dedent`${parent.data}`;
- }
+export function getStoryName(attributes: Component['attributes']) {
+ return getStringFromAttribute('name', attributes) ?? 'Default';
}
export function getStoryId({
- attributes,
- name,
- storiesIds,
+ attributes,
+ name,
+ storiesIds,
}: {
- attributes: Component["attributes"];
- name: string;
- storiesIds: Set;
+ attributes: Component['attributes'];
+ name: string;
+ storiesIds: Set;
}) {
- const id = getStringFromAttribute("id", attributes);
+ const id = getStringFromAttribute('id', attributes);
- if (id) {
- return id;
- }
+ if (id) {
+ return id;
+ }
- let generated = name.replace(/\W+(.|$)/g, (_, chr) => chr.toUpperCase());
+ let generated = name.replace(/\W+(.|$)/g, (_, chr) => chr.toUpperCase());
- if (storiesIds.has(generated)) {
- logger.warn(
- `Story name conflict with exports - Please add an explicit id for story ${name}`,
- );
- generated += hashCode(name);
- }
+ if (storiesIds.has(generated)) {
+ logger.warn(`Story name conflict with exports - Please add an explicit id for story ${name}`);
+ generated += hashCode(name);
+ }
- return generated;
+ return generated;
}
function hashCode(str: string) {
- const h = str
- .split("")
- .reduce((prev, curr) => ((prev << 5) - prev + curr.charCodeAt(0)) | 0, 0);
+ const h = str.split('').reduce((prev, curr) => ((prev << 5) - prev + curr.charCodeAt(0)) | 0, 0);
- return Math.abs(h).toString(16);
+ return Math.abs(h).toString(16);
}
-export function getStringFromAttribute(
- name: string,
- attributes: Component["attributes"],
-) {
- const attribute = lookupAttribute(name, attributes);
+export function getStringFromAttribute(name: string, attributes: Component['attributes']) {
+ const attribute = lookupAttribute(name, attributes);
- if (!attribute) {
- return;
- }
+ if (!attribute) {
+ return;
+ }
- const { value } = attribute;
+ const { value } = attribute;
- if (value === true) {
- throw new Error(`Attribute 'name' is not a string`);
- }
+ if (value === true) {
+ throw new Error(`Attribute 'name' is not a string`);
+ }
- if (value.length === 1 && value[0].type === "Text") {
- return value[0].data;
- }
+ if (value.length === 1 && value[0].type === 'Text') {
+ return value[0].data;
+ }
- throw new Error(`Attribute "name" is not static`);
+ throw new Error(`Attribute "name" is not static`);
}
-export function lookupAttribute(
- name: string,
- attributes: Component["attributes"],
-) {
- return attributes.find((node) => {
- if (node.type === "Attribute" && node.name === name) {
- return node.value;
- }
- }) as Attribute | undefined;
+export function lookupAttribute(name: string, attributes: Component['attributes']) {
+ return attributes.find((node) => {
+ if (node.type === 'Attribute' && node.name === name) {
+ return node.value;
+ }
+ }) as Attribute | undefined;
}
-export function getChildrenRawSource({
- node,
- rawSource,
-}: {
- node: Component;
- rawSource: string;
-}) {
- const { fragment } = node;
- const { nodes } = fragment;
+export function getChildrenRawSource({ node, rawSource }: { node: Component; rawSource: string }) {
+ const { fragment } = node;
+ const { nodes } = fragment;
- // Ignore addon components without children
- if (nodes.length === 0) {
- return;
- }
+ // Ignore addon components without children
+ if (nodes.length === 0) {
+ return;
+ }
- const snippetBlockChildren = nodes.find(
- (c) => c.type === "SnippetBlock" && c.expression.name === "children",
- ) as SnippetBlock | undefined;
+ const snippetBlockChildren = nodes.find(
+ (c) => c.type === 'SnippetBlock' && c.expression.name === 'children'
+ ) as SnippetBlock | undefined;
- if (snippetBlockChildren) {
- const { body } = snippetBlockChildren;
- const { nodes } = body;
- const { start } = nodes[0];
- const { end } = nodes[nodes.length - 1];
+ if (snippetBlockChildren) {
+ const { body } = snippetBlockChildren;
+ const { nodes } = body;
+ const { start } = nodes[0];
+ const { end } = nodes[nodes.length - 1];
- return dedent`${rawSource.slice(start, end)}`;
- }
+ return dedent`${rawSource.slice(start, end)}`;
+ }
- const { start } = nodes[0];
- const { end } = nodes[nodes.length - 1];
+ const { start } = nodes[0];
+ const { end } = nodes[nodes.length - 1];
- return dedent`${rawSource.slice(start, end)}`;
+ return dedent`${rawSource.slice(start, end)}`;
}
diff --git a/src/parser/walkers/components/shared.ts b/src/parser/walkers/components/shared.ts
deleted file mode 100644
index d372cee..0000000
--- a/src/parser/walkers/components/shared.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import dedent from 'dedent';
-import type { Attribute, Component, SnippetBlock } from 'svelte/compiler';
-
-export function getStringFromAttribute(name: string, attributes: Component['attributes']) {
- const attribute = lookupAttribute(name, attributes);
-
- if (!attribute) {
- return;
- }
-
- const { value } = attribute;
-
- if (value === true) {
- throw new Error(`Attribute 'name' is not a string`);
- }
-
- if (value.length === 1 && value[0].type === 'Text') {
- return value[0].data;
- }
-
- throw new Error(`Attribute "name" is not static`);
-}
-
-export function lookupAttribute(name: string, attributes: Component['attributes']) {
- return attributes.find((node) => {
- if (node.type === 'Attribute' && node.name === name) {
- return node.value;
- }
- }) as Attribute | undefined;
-}
-
-export function getComponentChildrenRawSource({
- node,
- rawSource,
-}: {
- node: Component;
- rawSource: string;
-}) {
- const { fragment } = node;
- const { nodes } = fragment;
-
- // Ignore addon components without children
- if (nodes.length === 0) {
- return;
- }
-
- const snippetBlockChildren = nodes.find(
- (c) => c.type === 'SnippetBlock' && c.expression.name === 'children'
- ) as SnippetBlock | undefined;
-
- if (snippetBlockChildren) {
- const { body } = snippetBlockChildren;
- const { nodes } = body;
- const { start } = nodes[0];
- const { end } = nodes[nodes.length - 1];
-
- return dedent`${rawSource.slice(start, end)}`;
- }
-
- const { start } = nodes[0];
- const { end } = nodes[nodes.length - 1];
-
- return dedent`${rawSource.slice(start, end)}`;
-}
diff --git a/src/parser/walkers/components/story.ts b/src/parser/walkers/components/story.ts
deleted file mode 100644
index 4f38631..0000000
--- a/src/parser/walkers/components/story.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { logger } from '@storybook/client-logger';
-import dedent from 'dedent';
-import type { Component } from 'svelte/compiler';
-
-import { getStringFromAttribute } from './shared.js';
-
-export function getStoryName(attributes: Component['attributes']) {
- return getStringFromAttribute('name', attributes) ?? 'Default';
-}
-
-export function getStoryTemplateId({
- attributes,
- hasChildren,
-}: {
- attributes: Component['attributes'];
- hasChildren: boolean;
-}) {
- return getStringFromAttribute('templateId', attributes) ?? (hasChildren ? 'default' : undefined);
-}
-
-export function getDescription(node: Component) {
- const { parent } = node;
-
- if (parent?.type === 'Comment') {
- return dedent`${parent.data}`;
- }
-}
-
-export function getStoryId({
- attributes,
- name,
- storiesIds,
-}: {
- attributes: Component['attributes'];
- name: string;
- storiesIds: Set;
-}) {
- const id = getStringFromAttribute('id', attributes);
-
- if (id) {
- return id;
- }
-
- let generated = name.replace(/\W+(.|$)/g, (_, chr) => chr.toUpperCase());
-
- if (storiesIds.has(generated)) {
- logger.warn(`Story name conflict with exports - Please add an explicit id for story ${name}`);
- generated += hashCode(name);
- }
-
- return generated;
-}
-
-function hashCode(str: string) {
- const h = str.split('').reduce((prev, curr) => ((prev << 5) - prev + curr.charCodeAt(0)) | 0, 0);
-
- return Math.abs(h).toString(16);
-}
diff --git a/src/parser/walkers/components/template.ts b/src/parser/walkers/components/template.ts
deleted file mode 100644
index cf4be54..0000000
--- a/src/parser/walkers/components/template.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { Component } from 'svelte/compiler';
-
-import { getStringFromAttribute } from './shared.js';
-
-export function getTemplateId(attributes: Component['attributes']) {
- return getStringFromAttribute('id', attributes);
-}
diff --git a/src/parser/walkers/fragment.ts b/src/parser/walkers/fragment.ts
index f3b4c0e..31b42b4 100644
--- a/src/parser/walkers/fragment.ts
+++ b/src/parser/walkers/fragment.ts
@@ -1,81 +1,48 @@
-import { logger } from '@storybook/client-logger';
-import { type Root, type SvelteNode } from 'svelte/compiler';
+import dedent from 'dedent';
+import { type Comment, type Root, type SvelteNode } from 'svelte/compiler';
import { walk, type Visitors } from 'zimmerframe';
-import {
- getDescription,
- getStoryId,
- getStoryName,
- getStoryTemplateId,
-} from './components/story.js';
-import { getComponentChildrenRawSource } from './components/shared.js';
-import { getTemplateId } from './components/template.js';
-import {
- type FragmentMeta,
- type InstanceMeta,
- type StoryMeta,
- type TemplateMeta,
-} from '../types.js';
+import { getChildrenRawSource, getStoryId, getStoryName } from './component.js';
+import { type FragmentMeta, type InstanceMeta, type StoryMeta } from '../types.js';
/** NOTE: Fragment is the 'html' code - not the one innside `