From 06dee292545bd0fd9310b38bdd87a471cf4079ad Mon Sep 17 00:00:00 2001
From: Steve Lee <steve@fullmeasure.co.uk>
Date: Fri, 17 Jan 2025 18:15:10 +0000
Subject: [PATCH 1/5] Pass children to button

---
 examples/Button.stories.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/examples/Button.stories.svelte b/examples/Button.stories.svelte
index 5c37cd97..0b546afb 100644
--- a/examples/Button.stories.svelte
+++ b/examples/Button.stories.svelte
@@ -7,6 +7,7 @@
   } from '@storybook/addon-svelte-csf';
   import { fn } from '@storybook/test';
 
+  import type { Snippet } from 'svelte'
   import Button from './components/Button.svelte';
 
   const onclickFn = fn().mockName('onclick');
@@ -20,6 +21,7 @@
     tags: ['autodocs'],
     args: {
       onclick: onclickFn,
+      children: 'Click me' as unknown as Snippet<[]>
     },
     argTypes: {
       backgroundColor: { control: 'color' },
@@ -37,7 +39,7 @@
 </script>
 
 {#snippet template(args: Args<typeof Story>, context: StoryContext<typeof Story>)}
-  <Button {...args}>{'Click me'}</Button>
+  <Button {...args}>{args.children}</Button>
 {/snippet}
 
 <!-- Only use this sparingly as the main CTA. -->

From 8ba1b43bf6d6b34396c126cc37cea2b43e4768ed Mon Sep 17 00:00:00 2001
From: Steve Lee <steve@opendirective.com>
Date: Sat, 25 Jan 2025 21:43:39 +0000
Subject: [PATCH 2/5] Fix destructured mount in play Addresses
 storybookjs/addon-svelte-csf#270

---
 src/runtime/create-runtime-stories.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/runtime/create-runtime-stories.ts b/src/runtime/create-runtime-stories.ts
index 89947402..5edc639a 100644
--- a/src/runtime/create-runtime-stories.ts
+++ b/src/runtime/create-runtime-stories.ts
@@ -68,7 +68,10 @@ export const createRuntimeStories = (Stories: Component, meta: Meta<Cmp>) => {
        * The 'play' function should be delegated to the real play Story function
        * in order to be run into the component scope.
        */
-      storyObj.play = (storyContext) => {
+      function params(fn) { return fn.toString().match(/[^(]*\(([^)]*)/)?.slice(1) ?? [] }
+      const isMounting = params(storyObj.play).filter((p) => /\{\s*mount\s*\}/.test(p)).length != 0
+      storyObj.play = isMounting ? function ({ mount }) { return playDelegator(arguments[0]) } : (storyContext) => playDelegator(storyContext);
+      function playDelegator(storyContext) {
         const delegate = storyContext.playFunction?.__play;
 
         if (delegate) {

From c1bfb5aa0ecc3dc10d7b19dd47e19733bd391e24 Mon Sep 17 00:00:00 2001
From: Steve Lee <steve@opendirective.com>
Date: Tue, 28 Jan 2025 15:47:11 +0000
Subject: [PATCH 3/5] Fixed regex to allow other props & prettyprint

---
 src/runtime/create-runtime-stories.ts | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/runtime/create-runtime-stories.ts b/src/runtime/create-runtime-stories.ts
index 5edc639a..33c0a2c4 100644
--- a/src/runtime/create-runtime-stories.ts
+++ b/src/runtime/create-runtime-stories.ts
@@ -68,9 +68,21 @@ export const createRuntimeStories = (Stories: Component, meta: Meta<Cmp>) => {
        * The 'play' function should be delegated to the real play Story function
        * in order to be run into the component scope.
        */
-      function params(fn) { return fn.toString().match(/[^(]*\(([^)]*)/)?.slice(1) ?? [] }
-      const isMounting = params(storyObj.play).filter((p) => /\{\s*mount\s*\}/.test(p)).length != 0
-      storyObj.play = isMounting ? function ({ mount }) { return playDelegator(arguments[0]) } : (storyContext) => playDelegator(storyContext);
+      function params(fn) {
+        return (
+          fn
+            .toString()
+            .match(/[^(]*\(([^)]*)/)
+            ?.slice(1) ?? []
+        );
+      }
+      const isMounting =
+        params(storyObj.play).filter((p) => /\{.*,?\s*mount\s*,?.*\}/.test(p)).length != 0;
+      storyObj.play = isMounting
+        ? function ({ mount }) {
+            return playDelegator(arguments[0]);
+          }
+        : (storyContext) => playDelegator(storyContext);
       function playDelegator(storyContext) {
         const delegate = storyContext.playFunction?.__play;
 
@@ -80,7 +92,7 @@ export const createRuntimeStories = (Stories: Component, meta: Meta<Cmp>) => {
 
         // @ts-expect-error WARN: It should not affect user perspective- the problem lies in this addon's type `SvelteRenderer` missing type constrains or default generic parameter type
         return play(storyContext);
-      };
+      }
     }
 
     stories[exportName] = storyObj;

From 78fccc56da6bdf891a6186159603957c017e12aa Mon Sep 17 00:00:00 2001
From: Steve Lee <steve@opendirective.com>
Date: Tue, 28 Jan 2025 15:57:04 +0000
Subject: [PATCH 4/5] Pass playDelegator directly

---
 src/runtime/create-runtime-stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/create-runtime-stories.ts b/src/runtime/create-runtime-stories.ts
index 33c0a2c4..bfddb5b0 100644
--- a/src/runtime/create-runtime-stories.ts
+++ b/src/runtime/create-runtime-stories.ts
@@ -82,7 +82,7 @@ export const createRuntimeStories = (Stories: Component, meta: Meta<Cmp>) => {
         ? function ({ mount }) {
             return playDelegator(arguments[0]);
           }
-        : (storyContext) => playDelegator(storyContext);
+        : playDelegator;
       function playDelegator(storyContext) {
         const delegate = storyContext.playFunction?.__play;
 

From edf3992d91efc10cb8df0167e09ec8fcfc883f08 Mon Sep 17 00:00:00 2001
From: Steve Lee <steve@opendirective.com>
Date: Wed, 29 Jan 2025 13:56:12 +0000
Subject: [PATCH 5/5] Add tests

---
 tests/stories/Mountable.stories.svelte | 55 ++++++++++++++++++++++++++
 tests/stories/Mountable.svelte         | 20 ++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 tests/stories/Mountable.stories.svelte
 create mode 100644 tests/stories/Mountable.svelte

diff --git a/tests/stories/Mountable.stories.svelte b/tests/stories/Mountable.stories.svelte
new file mode 100644
index 00000000..66197201
--- /dev/null
+++ b/tests/stories/Mountable.stories.svelte
@@ -0,0 +1,55 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { within, expect, fn } from '@storybook/test';
+
+  import Mountable from './stories/Mountable.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Play() mount',
+    component: Mountable,
+    tags: ['xautodocs'],
+    argTypes: {},
+    args: {
+      text: 'Mountable',
+      onMounted: fn(),
+    },
+  });
+</script>
+
+<!-- play no mount -->
+<Story
+  name="Play no mount"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText('Mountable')).toBeInTheDocument();
+  }}
+></Story>
+
+<!-- play and mount only -->
+<Story
+  name="With mount only"
+  play={async ({ mount }) => {
+    console.log('Pre');
+    await mount();
+    console.log('Post');
+  }}
+></Story>
+
+<!-- play and mount -->
+<Story
+  name="With mount"
+  play={async ({ args, mount, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // passing test does no show pre mount, so we test after mount
+    const preMountLabel = canvas.queryByText('Mountable');
+
+    await mount();
+
+    expect(preMountLabel).toBeNull(); // Here so shows in Component Test panel
+
+    expect(canvas.getByText('Mountable')).toBeInTheDocument();
+    expect(args.onMounted).toHaveBeenCalled();
+  }}
+></Story>
diff --git a/tests/stories/Mountable.svelte b/tests/stories/Mountable.svelte
new file mode 100644
index 00000000..1a395d6d
--- /dev/null
+++ b/tests/stories/Mountable.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  interface Props {
+    /** Is this the principal call to action on the page? */
+    text: string
+    /** The onclick event handler */
+    onMounted: () => void
+  }
+
+  const { text, onMounted }: Props = $props()
+
+  onMount(() => {
+    onMounted()
+  })
+</script>
+
+<div>
+  {text}
+</div>