@storybook/addon-svelte-csf 4.0.7 → 4.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -2
- package/dist/components/RenderContext.svelte +17 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,7 +14,7 @@ It supports:
|
|
|
14
14
|
## Example
|
|
15
15
|
|
|
16
16
|
```svelte
|
|
17
|
-
<script
|
|
17
|
+
<script context="module">
|
|
18
18
|
import Button from './Button.svelte';
|
|
19
19
|
|
|
20
20
|
export const meta = {
|
|
@@ -33,7 +33,10 @@ It supports:
|
|
|
33
33
|
</script>
|
|
34
34
|
|
|
35
35
|
<Template let:args>
|
|
36
|
-
|
|
36
|
+
<!--👇 'on:click' allows to forward event to addon-actions -->
|
|
37
|
+
<Button {...args}
|
|
38
|
+
on:click
|
|
39
|
+
on:click={handleClick}>
|
|
37
40
|
You clicked: {count}
|
|
38
41
|
</Button>
|
|
39
42
|
</Template>
|
|
@@ -48,6 +51,9 @@ It supports:
|
|
|
48
51
|
</Story>
|
|
49
52
|
```
|
|
50
53
|
|
|
54
|
+
Actions are automatically registered by Storybook. To be used by this addon, you just have to forward the event (`on:click` in the previous example).
|
|
55
|
+
|
|
56
|
+
|
|
51
57
|
## Getting Started
|
|
52
58
|
|
|
53
59
|
1. `npm install --save-dev @storybook/addon-svelte-csf` or `yarn add --dev @storybook/addon-svelte-csf`
|
|
@@ -9,9 +9,25 @@
|
|
|
9
9
|
export let args = {};
|
|
10
10
|
export let storyContext = {};
|
|
11
11
|
|
|
12
|
+
/** @type {import('svelte').SvelteComponent} */
|
|
13
|
+
let instance;
|
|
14
|
+
|
|
12
15
|
createRenderContext($$props);
|
|
13
16
|
|
|
17
|
+
// events are static and don't need to be reactive
|
|
18
|
+
const eventsFromArgTypes = Object.fromEntries(
|
|
19
|
+
Object.entries(storyContext.argTypes)
|
|
20
|
+
.filter(([k, v]) => v.action && args[k] != null)
|
|
21
|
+
.map(([k, v]) => [v.action, args[k]])
|
|
22
|
+
);
|
|
23
|
+
|
|
14
24
|
$: setStoryRenderContext(args, storyContext);
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
$: if (instance) {
|
|
28
|
+
Object.entries(eventsFromArgTypes).forEach(([event, handler]) => instance.$on(event, handler));
|
|
29
|
+
}
|
|
30
|
+
|
|
15
31
|
</script>
|
|
16
32
|
|
|
17
|
-
<svelte:component this={Stories} />
|
|
33
|
+
<svelte:component this={Stories} bind:this={instance}/>
|