Add app layer presets

app/angular/src/client/preview/config.ts

@@ -1,3 +1,3 @@
 export { render, renderToDOM } from './render';
 
-export const parameters = { framework: 'react' };
+export const parameters = { framework: 'angular' };

app/angular/src/client/preview/render.ts

@@ -1,13 +1,15 @@
 import { RenderContext } from '@storybook/store';
+import { ArgsStoryFn } from '@storybook/csf';
 
 import { renderNgApp } from './angular/helpers';
-import { AngularFramework, Story } from './types-6-0';
+import { AngularFramework } from './types-6-0';
 
 import { RendererFactory } from './angular-beta/RendererFactory';
 
 export const rendererFactory = new RendererFactory();
 
-export const render: Story = (props) => ({ props });
+export const render: ArgsStoryFn<AngularFramework> = (props) => ({ props });
+
 export async function renderToDOM(
   {
     storyFn,

app/ember/preset.js

@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};

app/ember/src/client/preview/config.ts

@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'ember' };

app/ember/src/client/preview/index.ts

@@ -1,9 +1,9 @@
 import { start } from '@storybook/core/client';
 
 import './globals';
-import render from './render';
+import { renderToDOM } from './render';
 
-const { configure: coreConfigure, clientApi, forceReRender } = start(render);
+const { configure: coreConfigure, clientApi, forceReRender } = start(renderToDOM);
 
 export const {
   setAddon,

app/ember/src/client/preview/render.ts

@@ -60,7 +60,7 @@ function render(options: OptionsArgs, el: HTMLElement) {
     });
 }
 
-export default function renderMain(
+export function renderToDOM(
   { storyFn, kind, name, showMain, showError }: RenderContext<EmberFramework>,
   domElement: HTMLElement
 ) {

app/html/preset.js

@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};

app/html/src/client/preview/config.ts

@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'html' };

app/html/src/client/preview/index.ts

@@ -4,7 +4,7 @@ import { ClientStoryApi, Loadable } from '@storybook/addons';
 import { HtmlFramework } from './types-6-0';
 
 import './globals';
-import render from './render';
+import { renderToDOM } from './render';
 import { IStorybookSection } from './types';
 
 const framework = 'html';
@@ -18,7 +18,7 @@ interface ClientApi extends ClientStoryApi<HtmlFramework['storyResult']> {
   raw: () => any; // todo add type
 }
 
-const api = start(render);
+const api = start(renderToDOM);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

app/html/src/client/preview/render.ts

@@ -7,7 +7,7 @@ import { HtmlFramework } from './types-6-0';
 
 const { Node } = global;
 
-export default function renderMain(
+export function renderToDOM(
   { storyFn, kind, name, showMain, showError, forceRemount }: RenderContext<HtmlFramework>,
   domElement: HTMLElement
 ) {

app/preact/preset.js

@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};

app/preact/src/client/preview/config.ts

@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'preact' };

app/preact/src/client/preview/index.ts

@@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
 import { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
-import render from './render';
+import { renderToDOM } from './render';
 import { IStorybookSection } from './types';
 import { PreactFramework } from './types-6-0';
 
@@ -18,7 +18,7 @@ export interface ClientApi extends ClientStoryApi<PreactFramework['storyResult']
 }
 
 const framework = 'preact';
-const api = start(render);
+const api = start(renderToDOM);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

app/preact/src/client/preview/render.tsx

@@ -36,7 +36,7 @@ const StoryHarness: preact.FunctionalComponent<{
   return content;
 };
 
-export default function renderMain(
+export function renderToDOM(
   { storyFn, title, name, showMain, showError, forceRemount }: RenderContext<PreactFramework>,
   domElement: HTMLElement
 ) {

app/react/preset.js

@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};

app/react/src/client/preview/config.ts

@@ -0,0 +1,3 @@
+export { render, renderToDOM } from './render';
+
+export const parameters = { framework: 'react' };

app/server/preset.js

@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};

app/server/src/client/preview/config.ts

@@ -0,0 +1,3 @@
+export { render, renderToDOM } from './render';
+
+export const parameters = { framework: 'server' };

app/server/src/client/preview/index.ts

@@ -1,8 +1,8 @@
 import { start } from '@storybook/core/client';
-import { ClientStoryApi, Loadable, StoryFn, Args } from '@storybook/addons';
+import { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
-import { renderMain as renderToDOM } from './render';
+import { renderToDOM, render } from './render';
 import { IStorybookSection, ServerFramework } from './types';
 
 const framework = 'server';
@@ -16,8 +16,6 @@ interface ClientApi extends ClientStoryApi<ServerFramework['storyResult']> {
   raw: () => any; // todo add type
 }
 
-const render: StoryFn = (args: Args) => {};
-
 const api = start(renderToDOM, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {

app/server/src/client/preview/render.ts

@@ -1,9 +1,9 @@
 /* eslint-disable no-param-reassign */
 import global from 'global';
 import dedent from 'ts-dedent';
-import { Args, ArgTypes } from '@storybook/api';
 import { RenderContext } from '@storybook/store';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
+import { StoryFn, Args, ArgTypes } from '@storybook/csf';
 import { FetchStoryHtmlType, ServerFramework } from './types';
 
 const { fetch, Node } = global;
@@ -40,7 +40,9 @@ const buildStoryArgs = (args: Args, argTypes: ArgTypes) => {
   return storyArgs;
 };
 
-export async function renderMain(
+export const render: StoryFn<ServerFramework> = (args: Args) => {};
+
+export async function renderToDOM(
   {
     id,
     title,

app/svelte/preset.js

@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};

app/svelte/src/client/preview/config.ts

@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'svelte' };

app/svelte/src/client/preview/index.ts

@@ -2,9 +2,11 @@ import { start } from '@storybook/core/client';
 import { decorateStory } from './decorators';
 
 import './globals';
-import render from './render';
+import { renderToDOM } from './render';
 
-const { configure: coreConfigure, clientApi, forceReRender } = start(render, { decorateStory });
+const { configure: coreConfigure, clientApi, forceReRender } = start(renderToDOM, {
+  decorateStory,
+});
 
 export const {
   setAddon,

app/svelte/src/client/preview/render.ts

@@ -15,7 +15,7 @@ function cleanUpPreviousStory() {
   previousComponent = null;
 }
 
-export default function render(
+export function renderToDOM(
   { storyFn, kind, name, showMain, showError }: RenderContext<SvelteFramework>,
   domElement: HTMLElement
 ) {

app/vue/preset.js

@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};

app/vue/src/client/preview/config.ts

@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'vue' };

app/vue/src/client/preview/index.ts

@@ -9,7 +9,7 @@ import './globals';
 import { IStorybookSection, StoryFnVueReturnType } from './types';
 import { VueFramework } from './types-6-0';
 
-import render, { VALUES } from './render';
+import { renderToDOM, VALUES } from './render';
 import { extractProps } from './util';
 
 export const WRAPS = 'STORYBOOK_WRAPS';
@@ -100,7 +100,7 @@ interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
   load: (...args: any[]) => void;
 }
 
-const api = start(render, { decorateStory });
+const api = start(renderToDOM, { decorateStory });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

app/vue/src/client/preview/render.ts

@@ -19,7 +19,7 @@ const root = new Vue({
   },
 });
 
-export default function render(
+export function renderToDOM(
   {
     title,
     name,

app/vue3/preset.js

@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};

app/vue3/src/client/preview/config.ts

@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'vue3' };

app/vue3/src/client/preview/index.ts

@@ -9,7 +9,7 @@ import './globals';
 import { IStorybookSection } from './types';
 import { VueFramework } from './types-6-0';
 
-import render, { storybookApp } from './render';
+import { renderToDOM, storybookApp } from './render';
 
 /*
   This normalizes a functional component into a render method in ComponentOptions.
@@ -87,7 +87,7 @@ interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
   app: App;
 }
 
-const api = start(render, { decorateStory });
+const api = start(renderToDOM, { decorateStory });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

app/vue3/src/client/preview/render.ts

@@ -23,7 +23,7 @@ export const storybookApp = createApp({
   },
 });
 
-export default function render(
+export function renderToDOM(
   { title, name, storyFn, showMain, showError, showException }: RenderContext<VueFramework>,
   domElement: HTMLElement
 ) {

app/web-components/preset.js

@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};

app/web-components/src/client/preview/config.ts

@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'web-components' };

app/web-components/src/client/preview/index.ts

@@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
 import { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
-import render from './render';
+import { renderToDOM } from './render';
 import { IStorybookSection } from './types';
 import { WebComponentsFramework } from './types-6-0';
 
@@ -18,7 +18,7 @@ interface ClientApi extends ClientStoryApi<WebComponentsFramework['storyResult']
   raw: () => any; // todo add type
 }
 
-const api = start(render);
+const api = start(renderToDOM);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

app/web-components/src/client/preview/render.ts

@@ -11,7 +11,7 @@ import { WebComponentsFramework } from './types-6-0';
 
 const { Node } = global;
 
-export default function renderMain(
+export function renderToDOM(
   { storyFn, kind, name, showMain, showError, forceRemount }: RenderContext<WebComponentsFramework>,
   domElement: HTMLElement
 ) {