From e88814bbe171e0ea55ed4d01d1ee75d85c6e6a93 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Wed, 19 Jan 2022 00:33:38 +0800
Subject: [PATCH 1/3] Svelte: Add CSF3 framework render function

---
 app/svelte/src/client/preview/config.ts              |  2 +-
 app/svelte/src/client/preview/render.ts              | 12 ++++++++++++
 .../src/stories/button.stories.js                    |  7 +++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/app/svelte/src/client/preview/config.ts b/app/svelte/src/client/preview/config.ts
index 4549936701a7..88c2fe7b5a53 100644
--- a/app/svelte/src/client/preview/config.ts
+++ b/app/svelte/src/client/preview/config.ts
@@ -1,4 +1,4 @@
-export { renderToDOM } from './render';
+export { render, renderToDOM } from './render';
 export { decorateStory } from './decorators';
 
 export const parameters = { framework: 'svelte' };
diff --git a/app/svelte/src/client/preview/render.ts b/app/svelte/src/client/preview/render.ts
index 4b2e4a9a81fb..62f6a6f35f56 100644
--- a/app/svelte/src/client/preview/render.ts
+++ b/app/svelte/src/client/preview/render.ts
@@ -1,4 +1,5 @@
 import global from 'global';
+import { ArgsStoryFn } from '@storybook/csf';
 import { RenderContext } from '@storybook/store';
 import { SvelteFramework } from './types';
 import PreviewRender from './PreviewRender.svelte';
@@ -37,3 +38,14 @@ export function renderToDOM(
 
   showMain();
 }
+
+export const render: ArgsStoryFn<SvelteFramework> = (args, context) => {
+  const { id, component: Component } = context;
+  if (!Component) {
+    throw new Error(
+      `Unable to render story ${id} as the component annotation is missing from the default export`
+    );
+  }
+
+  return { Component, props: args };
+};
diff --git a/examples/svelte-kitchen-sink/src/stories/button.stories.js b/examples/svelte-kitchen-sink/src/stories/button.stories.js
index 51dd804077d5..58bf8020c196 100644
--- a/examples/svelte-kitchen-sink/src/stories/button.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/button.stories.js
@@ -24,3 +24,10 @@ Square.args = {
   rounded: false,
   text: 'Square',
 };
+
+export const WithDefaultRender = {
+  args: {
+    rounded: false,
+    text: 'Magic!',
+  },
+};

From dbbf7c281628eb746c98345ee789872938bb9965 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 18 Jan 2022 21:27:12 +0100
Subject: [PATCH 2/3] Svelte: add render function to project annotations

---
 app/svelte/src/client/preview/index.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/svelte/src/client/preview/index.ts b/app/svelte/src/client/preview/index.ts
index 98a669e180b0..5bcf4b5ad8ec 100644
--- a/app/svelte/src/client/preview/index.ts
+++ b/app/svelte/src/client/preview/index.ts
@@ -2,18 +2,21 @@ import { start } from '@storybook/core/client';
 import { decorateStory } from './decorators';
 
 import './globals';
-import { renderToDOM } from './render';
+import { render, renderToDOM } from './render';
 
-const {
-  configure: coreConfigure,
-  clientApi,
-  forceReRender,
-} = start(renderToDOM, {
+const { configure: coreConfigure, clientApi, forceReRender } = start(renderToDOM, {
   decorateStory,
+  render,
 });
 
-export const { setAddon, addDecorator, addParameters, clearDecorators, getStorybook, raw } =
-  clientApi;
+export const {
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+  raw,
+} = clientApi;
 
 const framework = 'svelte';
 export const storiesOf = (kind: string, m: any) =>

From 7aa1426571b00fd93e5e05b745decd0f8e3503f4 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 18 Jan 2022 23:42:01 +0100
Subject: [PATCH 3/3] update storyshots snapshots in svelte-kitchen-sink

---
 .../__snapshots__/button.stories.storyshot    | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot
index 33a9896cd07a..9cecda9f29c6 100644
--- a/examples/svelte-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot
@@ -85,3 +85,23 @@ exports[`Storyshots Button Square 1`] = `
   </p>
 </section>
 `;
+
+exports[`Storyshots Button With Default Render 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+     
+    <br />
+     
+    Magic!
+     
+  </button>
+</section>
+`;