Merge pull request #17276 from storybookjs/15498-svelte-default-rende…

…r-function

Svelte: Add CSF3 default render function

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' };

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) =>

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 };
+};

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>
+`;

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!',
+  },
+};