cleanup

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

@@ -3,4 +3,4 @@ import './globals';
 export { render, renderToDOM } from './render';
 export { decorateStory } from './decorateStory';
 
-export const parameters = { framework: 'angular' };
+export const parameters = { framework: 'angular' as const };

frameworks/angular/src/client/preview/index.ts

@@ -7,7 +7,7 @@ import decorateStory from './decorateStory';
 import type { IStorybookSection } from './types';
 import type { AngularFramework } from './types-6-0';
 
-const framework = 'angular';
+const FRAMEWORK = 'angular';
 
 interface ClientApi extends ClientStoryApi<AngularFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -23,11 +23,11 @@ const api = start(renderToDOM, { decorateStory, render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
-    framework,
+    framework: FRAMEWORK,
   });
 };
 
-export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args);
+export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
 export const addDecorator: ClientApi['addDecorator'] = api.clientApi
   .addDecorator as ClientApi['addDecorator'];
 export const addParameters: ClientApi['addParameters'] = api.clientApi

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

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

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

@@ -8,9 +8,9 @@ const { configure: coreConfigure, clientApi, forceReRender } = start(renderToDOM
 export const { setAddon, addDecorator, addParameters, clearDecorators, getStorybook, raw } =
   clientApi;
 
-const framework = 'ember';
+const FRAMEWORK = 'ember';
 export const storiesOf = (kind: string, m: any) =>
-  clientApi.storiesOf(kind, m).addParameters({ framework });
-export const configure = (loadable: any, m: any) => coreConfigure(framework, loadable, m);
+  clientApi.storiesOf(kind, m).addParameters({ framework: FRAMEWORK });
+export const configure = (loadable: any, m: any) => coreConfigure(FRAMEWORK, loadable, m);
 
 export { forceReRender };

frameworks/ember/standalone.js

@@ -1,7 +0,0 @@
-const build = require('@storybook/core-server/standalone');
-
-async function buildStandalone(options) {
-  return build(options);
-}
-
-module.exports = buildStandalone;

frameworks/html-webpack5/standalone.js

@@ -1,7 +0,0 @@
-const build = require('@storybook/core-server/standalone');
-
-async function buildStandalone(options) {
-  return build(options);
-}
-
-module.exports = buildStandalone;

frameworks/preact-webpack5/standalone.js

@@ -1,7 +0,0 @@
-const build = require('@storybook/core-server/standalone');
-
-async function buildStandalone(options) {
-  return build(options);
-}
-
-module.exports = buildStandalone;

frameworks/react-webpack5/standalone.js

@@ -1,7 +0,0 @@
-const build = require('@storybook/core-server/standalone');
-
-async function buildStandalone(options) {
-  return build(options);
-}
-
-module.exports = buildStandalone;

frameworks/server-webpack5/standalone.js

@@ -1,7 +0,0 @@
-const build = require('@storybook/core-server/standalone');
-
-async function buildStandalone(options) {
-  return build(options);
-}
-
-module.exports = buildStandalone;

frameworks/standalone.test.ts

@@ -1,28 +0,0 @@
-import build from '@storybook/core-server/standalone';
-
-jest.mock('@storybook/core-server/standalone');
-
-describe.each([
-  ['angular'],
-  ['ember'],
-  ['html-webpack5'],
-  ['preact-webpack5'],
-  ['react-webpack5'],
-  ['server-webpack5'],
-  ['svelte-webpack5'],
-  ['vue-webpack5'],
-  ['vue3-webpack5'],
-  ['web-components-webpack5'],
-])('%s', (app) => {
-  it('should run standalone', async () => {
-    // eslint-disable-next-line import/no-dynamic-require, global-require
-    const storybook = require(`@storybook/${app}/standalone`);
-
-    await storybook({
-      mode: 'static',
-      outputDir: '',
-    });
-
-    expect(build).toHaveBeenCalled();
-  });
-});

frameworks/svelte-webpack5/standalone.js

@@ -1,7 +0,0 @@
-const build = require('@storybook/core-server/standalone');
-
-async function buildStandalone(options) {
-  return build(options);
-}
-
-module.exports = buildStandalone;

frameworks/vue-webpack5/standalone.js

@@ -1,7 +0,0 @@
-const build = require('@storybook/core-server/standalone');
-
-async function buildStandalone(options) {
-  return build(options);
-}
-
-module.exports = buildStandalone;

frameworks/vue3-webpack5/standalone.js

@@ -1,7 +0,0 @@
-const build = require('@storybook/core-server/standalone');
-
-async function buildStandalone(options) {
-  return build(options);
-}
-
-module.exports = buildStandalone;

frameworks/web-components-webpack5/standalone.js

@@ -1,7 +0,0 @@
-const build = require('@storybook/core-server/standalone');
-
-async function buildStandalone(options) {
-  return build(options);
-}
-
-module.exports = buildStandalone;

renderers/html/src/config.ts

@@ -1,5 +1,5 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { framework: 'html', ...docsParams };
+export const parameters = { framework: 'html' as const, ...docsParams };
 export { decorators } from './docs/config';
-export * from './preview/config';
+export { renderToDOM } from './render';

renderers/html/src/docs/config.ts

@@ -6,9 +6,12 @@ export const decorators = [sourceDecorator];
 export const parameters = {
   docs: {
     inlineStories: true,
+    transformSource: undefined as unknown,
     source: {
       type: SourceType.DYNAMIC,
       language: 'html',
+      code: undefined as unknown,
+      excludeDecorators: undefined as unknown,
     },
   },
 };

renderers/html/src/docs/sourceDecorator.test.ts

@@ -1,6 +1,7 @@
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
-import { addons, StoryContext, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/addons';
 import { sourceDecorator } from './sourceDecorator';
+import { StoryContext } from '../types';
 
 jest.mock('@storybook/addons');
 const mockedAddons = addons as jest.Mocked<typeof addons>;
@@ -13,21 +14,28 @@ expect.addSnapshotSerializer({
 
 const tick = () => new Promise((r) => setTimeout(r, 0));
 
-const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
-  id: `html-test--${name}`,
-  kind: 'js-text',
-  name,
-  parameters,
-  args,
-  argTypes: {},
-  globals: {},
-  ...extra,
-});
+const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext =>
+  ({
+    id: `html-test--${name}`,
+    kind: 'js-text',
+    name,
+    parameters,
+    componentId: '',
+    title: '',
+    story: '',
+    args,
+    argTypes: {},
+    globals: {},
+    initialArgs: {},
+
+    ...extra,
+  } as StoryContext);
 
 describe('sourceDecorator', () => {
   let mockChannel: { on: jest.Mock; emit?: jest.Mock };
   beforeEach(() => {
     mockedAddons.getChannel.mockReset();
+    // @ts-ignore
     mockedUseEffect.mockImplementation((cb) => setTimeout(cb, 0));
 
     mockChannel = { on: jest.fn(), emit: jest.fn() };

renderers/html/src/docs/sourceDecorator.ts

@@ -2,11 +2,12 @@
 /* global window */
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 import { addons, useEffect } from '@storybook/addons';
-import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf';
+import type { PartialStoryFn } from '@storybook/csf';
 import dedent from 'ts-dedent';
-import type { HtmlFramework } from '..';
+import { HtmlFramework, StoryContext } from '../types';
+import { StoryFn } from '../public-types';
 
-function skipSourceRender(context: StoryContext<HtmlFramework>) {
+function skipSourceRender(context: StoryContext) {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -26,18 +27,16 @@ function defaultTransformSource(source: string) {
   return dedent(source);
 }
 
-function applyTransformSource(source: string, context: StoryContext<HtmlFramework>): string {
+function applyTransformSource(source: string, context: StoryContext): string {
   const docs = context.parameters.docs ?? {};
   const transformSource = docs.transformSource ?? defaultTransformSource;
+  // @ts-ignore
   return transformSource(source, context);
 }
 
-export function sourceDecorator(
-  storyFn: PartialStoryFn<HtmlFramework>,
-  context: StoryContext<HtmlFramework>
-) {
+export function sourceDecorator(storyFn: PartialStoryFn<HtmlFramework>, context: StoryContext) {
   const story = context?.parameters.docs?.source?.excludeDecorators
-    ? (context.originalStoryFn as ArgsStoryFn<HtmlFramework>)(context.args, context)
+    ? (context.originalStoryFn as StoryFn)(context.args, context)
     : storyFn();
 
   let source: string | undefined;

renderers/html/src/index.ts

@@ -1,15 +1,7 @@
-export {
-  storiesOf,
-  setAddon,
-  addDecorator,
-  addParameters,
-  configure,
-  getStorybook,
-  forceReRender,
-  raw,
-} from './preview';
+import './globals';
 
-export * from './preview/types-6-0';
+export * from './public-api';
+export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();

renderers/html/src/preview/config.ts

@@ -1 +0,0 @@
-export { renderToDOM } from './render';

renderers/html/src/preview/types-7-0.ts

@@ -1,14 +0,0 @@
-import type { Args } from '@storybook/csf';
-
-import type { StoryObj } from './types-6-0';
-
-export type { StoryFn, StoryObj, Meta } from './types-6-0';
-
-// NOTE these types are reversed from the way they are in types-6-0 and types-6-3
-
-/**
- * Story function that represents a CSFv3 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type Story<TArgs = Args> = StoryObj<TArgs>;

renderers/html/src/preview/types.ts

@@ -1,18 +0,0 @@
-export type { RenderContext } from '@storybook/core-client';
-
-export type StoryFnHtmlReturnType = string | Node;
-
-export interface IStorybookStory {
-  name: string;
-  render: (context: any) => any;
-}
-
-export interface IStorybookSection {
-  kind: string;
-  stories: IStorybookStory[];
-}
-
-export interface ShowErrorArgs {
-  title: string;
-  description: string;
-}

renderers/html/src/public-api.ts

@@ -1,13 +1,11 @@
 /* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
-import { HtmlFramework } from './types-6-0';
+import type { HtmlFramework, IStorybookSection } from './types';
 
-import './globals';
 import { renderToDOM } from './render';
-import type { IStorybookSection } from './types';
 
-const framework = 'html';
+const FRAMEWORK = 'html';
 
 interface ClientApi extends ClientStoryApi<HtmlFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -22,11 +20,11 @@ const api = start(renderToDOM);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
-    framework,
+    framework: FRAMEWORK,
   });
 };
 
-export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args);
+export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
 export const addDecorator: ClientApi['addDecorator'] = api.clientApi
   .addDecorator as ClientApi['addDecorator'];
 export const addParameters: ClientApi['addParameters'] = api.clientApi

renderers/html/src/public-types.ts

@@ -4,15 +4,9 @@ import type {
   StoryAnnotations,
   AnnotatedStoryFn,
 } from '@storybook/csf';
+import { HtmlFramework } from './types';
 
-import type { StoryFnHtmlReturnType } from './types';
-
-export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
-
-export type HtmlFramework = {
-  component: HTMLElement;
-  storyResult: StoryFnHtmlReturnType;
-};
+export type { Args, ArgTypes, Parameters } from '@storybook/csf';
 
 /**
  * Metadata to configure the stories for a component.
@@ -35,12 +29,11 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlFramework, TArgs>;
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<HtmlFramework, TArgs>;
 
+// NOTE these types are reversed from the way they are in types-6-0 and types-6-3
+
 /**
- * Story function that represents a CSFv2 component example.
+ * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- *
- * NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type.
- *
  */
-export type Story<TArgs = Args> = StoryFn<TArgs>;
+export type Story<TArgs = Args> = StoryObj<TArgs>;

renderers/html/src/render.ts

@@ -3,7 +3,7 @@ import global from 'global';
 import dedent from 'ts-dedent';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
 import type { RenderContext } from '@storybook/store';
-import { HtmlFramework } from './types-6-0';
+import type { HtmlFramework } from './types';
 
 const { Node } = global;
 

renderers/html/src/types.ts

@@ -0,0 +1,30 @@
+import type { StoryContext as DefaultStoryContext } from '@storybook/csf';
+import { parameters } from './config';
+
+export type { RenderContext } from '@storybook/core-client';
+
+export type StoryFnHtmlReturnType = string | Node;
+
+export interface IStorybookStory {
+  name: string;
+  render: (context: any) => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export type HtmlFramework = {
+  component: HTMLElement;
+  storyResult: StoryFnHtmlReturnType;
+};
+
+export type StoryContext = DefaultStoryContext<HtmlFramework> & {
+  parameters: DefaultStoryContext<HtmlFramework>['parameters'] & typeof parameters;
+};

renderers/preact/preview.js

@@ -1 +1 @@
-export * from './dist/esm/preview/config';
+export * from './dist/esm/config';

renderers/preact/src/config.ts

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

renderers/preact/src/index.ts

@@ -1,12 +1,7 @@
-export {
-  storiesOf,
-  setAddon,
-  addDecorator,
-  addParameters,
-  configure,
-  getStorybook,
-  forceReRender,
-  raw,
-} from './preview';
+export * from './globals';
 
-export * from './preview/types-6-0';
+export * from './public-api';
+export * from './public-types';
+
+// optimization: stop HMR propagation in webpack
+module?.hot?.decline();

renderers/preact/src/preview/config.ts

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

renderers/preact/src/preview/types-7-0.ts

@@ -1,14 +0,0 @@
-import type { Args } from '@storybook/csf';
-
-import type { StoryObj } from './types-6-0';
-
-export type { StoryFn, StoryObj, Meta } from './types-6-0';
-
-// NOTE these types are reversed from the way they are in types-6-0 and types-6-3
-
-/**
- * Story function that represents a CSFv3 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type Story<TArgs = Args> = StoryObj<TArgs>;

renderers/preact/src/public-api.ts

@@ -2,10 +2,8 @@
 import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
-import './globals';
 import { renderToDOM } from './render';
-import type { IStorybookSection } from './types';
-import type { PreactFramework } from './types-6-0';
+import type { IStorybookSection, PreactFramework } from './types';
 
 export interface ClientApi extends ClientStoryApi<PreactFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -17,16 +15,16 @@ export interface ClientApi extends ClientStoryApi<PreactFramework['storyResult']
   load: (...args: any[]) => void;
 }
 
-const framework = 'preact';
+const FRAMEWORK = 'preact';
 const api = start(renderToDOM);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
-    framework,
+    framework: FRAMEWORK,
   });
 };
 
-export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args);
+export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
 export const addDecorator: ClientApi['addDecorator'] = api.clientApi
   .addDecorator as ClientApi['addDecorator'];
 export const addParameters: ClientApi['addParameters'] = api.clientApi

renderers/preact/src/public-types.ts

@@ -1,19 +1,13 @@
-import type { AnyComponent } from 'preact';
 import type {
   Args,
   ComponentAnnotations,
   StoryAnnotations,
   AnnotatedStoryFn,
 } from '@storybook/csf';
-import type { StoryFnPreactReturnType } from './types';
+import { PreactFramework } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
 
-export type PreactFramework = {
-  component: AnyComponent<any, any>;
-  storyResult: StoryFnPreactReturnType;
-};
-
 /**
  * Metadata to configure the stories for a component.
  *
@@ -36,11 +30,8 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<PreactFramework, TArgs>;
 export type StoryObj<TArgs = Args> = StoryAnnotations<PreactFramework, TArgs>;
 
 /**
- * Story function that represents a CSFv2 component example.
+ * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- *
- * NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type.
- *
  */
-export type Story<TArgs = Args> = StoryFn<TArgs>;
+export type Story<TArgs = Args> = StoryObj<TArgs>;

renderers/preact/src/render.tsx

@@ -1,8 +1,7 @@
 import * as preact from 'preact';
 import dedent from 'ts-dedent';
-import { RenderContext } from '@storybook/store';
-import { StoryFnPreactReturnType } from './types';
-import { PreactFramework } from './types-6-0';
+import type { RenderContext } from '@storybook/store';
+import type { StoryFnPreactReturnType, PreactFramework } from './types';
 
 let renderedStory: Element;
 

renderers/preact/src/types.ts

@@ -1,3 +1,5 @@
+import type { AnyComponent } from 'preact';
+
 export type { RenderContext } from '@storybook/core-client';
 
 export type StoryFnPreactReturnType = string | Node | preact.JSX.Element;
@@ -16,3 +18,8 @@ export interface IStorybookSection {
   kind: string;
   stories: IStorybookStory[];
 }
+
+export type PreactFramework = {
+  component: AnyComponent<any, any>;
+  storyResult: StoryFnPreactReturnType;
+};

renderers/react/src/index.ts

@@ -1,7 +1,9 @@
-export * from './public-api';
-export * from './testing-api';
+import './globals';
 
+export * from './public-api';
 export * from './public-types';
 
+export * from './testing-api';
+
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();

renderers/react/src/public-api.tsx

@@ -2,9 +2,8 @@
 import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
-import './globals';
 import { renderToDOM, render } from './render';
-import type { IStorybookSection, ReactFramework } from '../types';
+import type { IStorybookSection, ReactFramework } from './types';
 
 interface ClientApi extends ClientStoryApi<ReactFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -14,17 +13,17 @@ interface ClientApi extends ClientStoryApi<ReactFramework['storyResult']> {
   forceReRender(): void;
   raw: () => any; // todo add type
 }
-const framework = 'react';
+const FRAMEWORK = 'react';
 
 const api = start(renderToDOM, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
-    framework,
+    framework: FRAMEWORK,
   });
 };
 
-export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args);
+export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
 export const addDecorator: ClientApi['addDecorator'] = api.clientApi
   .addDecorator as ClientApi['addDecorator'];
 export type DecoratorFn = Parameters<typeof addDecorator>[0];

renderers/server/preview.js

@@ -1 +1 @@
-export * from './dist/esm/preview/config';
+export * from './dist/esm/config';

renderers/server/src/config.ts

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

renderers/server/src/index.ts

@@ -1,13 +1,7 @@
-export {
-  storiesOf,
-  setAddon,
-  addDecorator,
-  addParameters,
-  configure,
-  getStorybook,
-  forceReRender,
-  raw,
-} from './preview';
+import './globals';
+
+export * from './public-api';
+export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();

renderers/server/src/preview/config.ts

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

renderers/server/src/public-api.ts

@@ -1,11 +1,10 @@
 import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
-import './globals';
 import { renderToDOM, render } from './render';
 import type { IStorybookSection, ServerFramework } from './types';
 
-const framework = 'server';
+const FRAMEWORK = 'server';
 
 interface ClientApi extends ClientStoryApi<ServerFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -20,11 +19,11 @@ const api = start(renderToDOM, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
-    framework,
+    framework: FRAMEWORK,
   });
 };
 
-export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args);
+export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
 export const { addDecorator, addParameters, clearDecorators, setAddon, getStorybook, raw } =
   api.clientApi;
 

renderers/server/src/public-types.ts

@@ -0,0 +1,37 @@
+import type {
+  Args,
+  ComponentAnnotations,
+  StoryAnnotations,
+  AnnotatedStoryFn,
+} from '@storybook/csf';
+import { ServerFramework } from './types';
+
+export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
+
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+export type Meta<TArgs = Args> = ComponentAnnotations<ServerFramework, TArgs>;
+
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ServerFramework, TArgs>;
+
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export type StoryObj<TArgs = Args> = StoryAnnotations<ServerFramework, TArgs>;
+
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export type Story<TArgs = Args> = StoryObj<TArgs>;

renderers/server/src/render.ts

@@ -3,7 +3,7 @@ import global from 'global';
 import dedent from 'ts-dedent';
 import type { RenderContext } from '@storybook/store';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
-import type { StoryFn, Args, ArgTypes } from '@storybook/csf';
+import type { StoryFn, Args, ArgTypes } from './public-types';
 import type { FetchStoryHtmlType, ServerFramework } from './types';
 
 const { fetch, Node } = global;

renderers/server/src/types.ts

@@ -1,8 +1,9 @@
-import type { StoryContext } from '@storybook/csf';
+import type { StoryContext as StoryContextBase } from '@storybook/csf';
 
 export type { RenderContext } from '@storybook/core-client';
 
 export type StoryFnServerReturnType = any;
+export type StoryContext = StoryContextBase<ServerFramework>;
 
 export type ServerFramework = {
   component: string;
@@ -13,7 +14,7 @@ export type FetchStoryHtmlType = (
   url: string,
   id: string,
   params: any,
-  context: StoryContext<ServerFramework>
+  context: StoryContext
 ) => Promise<string | Node>;
 
 export interface IStorybookStory {

renderers/svelte/src/config.ts

@@ -1,5 +1,7 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { framework: 'svelte', ...docsParams };
+export const parameters = { framework: 'svelte' as const, ...docsParams };
 export { decorators, argTypesEnhancers } from './docs/config';
-export * from './preview/config';
+
+export { render, renderToDOM } from './render';
+export { decorateStory as applyDecorators } from './decorators';

renderers/svelte/src/index.ts

@@ -1,13 +1,7 @@
-export {
-  storiesOf,
-  setAddon,
-  addDecorator,
-  addParameters,
-  configure,
-  getStorybook,
-  forceReRender,
-  raw,
-} from './preview';
+import './globals';
+
+export * from './public-api';
+export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();

renderers/svelte/src/preview/config.ts

@@ -1,4 +0,0 @@
-export { render, renderToDOM } from './render';
-export { decorateStory as applyDecorators } from './decorators';
-
-export const parameters = { framework: 'svelte' };

renderers/svelte/src/public-api.ts

@@ -1,7 +1,6 @@
 import { start } from '@storybook/core-client';
 import { decorateStory } from './decorators';
 
-import './globals';
 import { render, renderToDOM } from './render';
 
 const {
@@ -16,9 +15,9 @@ const {
 export const { setAddon, addDecorator, addParameters, clearDecorators, getStorybook, raw } =
   clientApi;
 
-const framework = 'svelte';
+const FRAMEWORK = 'svelte';
 export const storiesOf = (kind: string, m: any) =>
-  clientApi.storiesOf(kind, m).addParameters({ framework });
-export const configure = (loadable: any, m: any) => coreConfigure(framework, loadable, m);
+  clientApi.storiesOf(kind, m).addParameters({ framework: FRAMEWORK });
+export const configure = (loadable: any, m: any) => coreConfigure(FRAMEWORK, loadable, m);
 
 export { forceReRender };

renderers/svelte/src/public-types.ts

@@ -0,0 +1,37 @@
+import type {
+  Args,
+  ComponentAnnotations,
+  StoryAnnotations,
+  AnnotatedStoryFn,
+} from '@storybook/csf';
+import { SvelteFramework } from './types';
+
+export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
+
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+export type Meta<TArgs = Args> = ComponentAnnotations<SvelteFramework, TArgs>;
+
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<SvelteFramework, TArgs>;
+
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export type StoryObj<TArgs = Args> = StoryAnnotations<SvelteFramework, TArgs>;
+
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export type Story<TArgs = Args> = StoryObj<TArgs>;

renderers/svelte/src/render.ts

@@ -23,7 +23,7 @@ export function renderToDOM(
 ) {
   cleanUpPreviousStory();
 
-  const target = document.getElementById('root');
+  const target = domElement || document.getElementById('root');
 
   target.innerHTML = '';
 

renderers/svelte/src/types.ts

@@ -1,5 +1,9 @@
+import type { StoryContext as StoryContextBase } from '@storybook/csf';
+
 export type { RenderContext } from '@storybook/core-client';
 
+export type StoryContext = StoryContextBase<SvelteFramework>;
+
 export interface ShowErrorArgs {
   title: string;
   description: string;

renderers/vue/src/config.ts

@@ -1,5 +1,7 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { framework: 'vue', ...docsParams };
+export const parameters = { framework: 'vue' as const, ...docsParams };
 export { decorators, argTypesEnhancers } from './docs/config';
-export * from './preview/config';
+
+export { render, renderToDOM } from './render';
+export { decorateStory as applyDecorators } from './decorateStory';

renderers/vue/src/decorateStory.ts

@@ -2,8 +2,7 @@ import Vue, { VueConstructor, ComponentOptions } from 'vue';
 import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 
-import type { StoryFnVueReturnType } from './types';
-import type { VueFramework } from './types-6-0';
+import type { StoryFnVueReturnType, VueFramework } from './types';
 import { extractProps } from './util';
 import { VALUES } from './render';
 

renderers/vue/src/docs/sourceDecorator.ts

@@ -1,15 +1,14 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
 
-import type { StoryContext } from '@storybook/csf';
 import { addons } from '@storybook/addons';
 import { logger } from '@storybook/client-logger';
 import type Vue from 'vue';
 
 import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
-import type { VueFramework } from '../preview/types-6-0';
+import type { StoryContext } from '../types';
 
-export const skipSourceRender = (context: StoryContext<VueFramework>) => {
+export const skipSourceRender = (context: StoryContext) => {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -23,7 +22,7 @@ export const skipSourceRender = (context: StoryContext<VueFramework>) => {
   return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
 };
 
-export const sourceDecorator = (storyFn: any, context: StoryContext<VueFramework>) => {
+export const sourceDecorator = (storyFn: any, context: StoryContext) => {
   const story = storyFn();
 
   // See ../react/jsxDecorator.tsx

renderers/vue/src/index.ts

@@ -1,15 +1,7 @@
-export {
-  storiesOf,
-  setAddon,
-  addDecorator,
-  addParameters,
-  configure,
-  getStorybook,
-  forceReRender,
-  raw,
-} from './preview';
+import './globals';
 
-export * from './preview/types-6-0';
+export * from './public-api';
+export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();

renderers/vue/src/preview/config.ts

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

renderers/vue/src/preview/types-7-0.ts

@@ -1,14 +0,0 @@
-import type { Args } from '@storybook/csf';
-
-import type { StoryObj } from './types-6-0';
-
-export type { StoryFn, StoryObj, Meta } from './types-6-0';
-
-// NOTE these types are reversed from the way they are in types-6-0 and types-6-3
-
-/**
- * Story function that represents a CSFv3 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type Story<TArgs = Args> = StoryObj<TArgs>;

renderers/vue/src/public-api.ts

@@ -2,13 +2,11 @@
 import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
-import './globals';
-import type { IStorybookSection } from './types';
-import type { VueFramework } from './types-6-0';
+import type { IStorybookSection, VueFramework } from './types';
 import { renderToDOM, render } from './render';
 import { decorateStory } from './decorateStory';
 
-const framework = 'vue';
+const FRAMEWORK = 'vue';
 
 interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -24,11 +22,11 @@ const api = start(renderToDOM, { decorateStory, render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
-    framework,
+    framework: FRAMEWORK,
   });
 };
 
-export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args);
+export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
 export const addDecorator: ClientApi['addDecorator'] = api.clientApi
   .addDecorator as ClientApi['addDecorator'];
 export const addParameters: ClientApi['addParameters'] = api.clientApi

renderers/vue/src/public-types.ts

@@ -1,19 +1,13 @@
-import type { Component, AsyncComponent } from 'vue';
 import type {
   Args,
   ComponentAnnotations,
   StoryAnnotations,
   AnnotatedStoryFn,
 } from '@storybook/csf';
-import type { StoryFnVueReturnType } from './types';
+import { VueFramework } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
 
-export type VueFramework = {
-  component: Component<any, any, any, any> | AsyncComponent<any, any, any, any>;
-  storyResult: StoryFnVueReturnType;
-};
-
 /**
  * Metadata to configure the stories for a component.
  *
@@ -36,11 +30,8 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<VueFramework, TArgs>;
 export type StoryObj<TArgs = Args> = StoryAnnotations<VueFramework, TArgs>;
 
 /**
- * Story function that represents a CSFv2 component example.
+ * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- *
- * NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type.
- *
  */
-export type Story<TArgs = Args> = StoryFn<TArgs>;
+export type Story<TArgs = Args> = StoryObj<TArgs>;

renderers/vue/src/render.ts

@@ -4,7 +4,7 @@ import Vue from 'vue';
 import type { RenderContext } from '@storybook/store';
 import type { ArgsStoryFn } from '@storybook/csf';
 import { CombinedVueInstance } from 'vue/types/vue';
-import type { VueFramework } from './types-6-0';
+import type { VueFramework } from './types';
 
 export const COMPONENT = 'STORYBOOK_COMPONENT';
 export const VALUES = 'STORYBOOK_VALUES';

renderers/vue/src/types.ts

@@ -1,4 +1,5 @@
-import { Component } from 'vue';
+import type { StoryContext as StoryContextBase } from '@storybook/csf';
+import type { Component, AsyncComponent } from 'vue';
 
 export type { RenderContext } from '@storybook/core-client';
 
@@ -10,6 +11,8 @@ export interface ShowErrorArgs {
 // TODO: some vue expert needs to look at this
 export type StoryFnVueReturnType = string | Component;
 
+export type StoryContext = StoryContextBase<VueFramework>;
+
 export interface IStorybookStory {
   name: string;
   render: (context: any) => any;
@@ -19,3 +22,8 @@ export interface IStorybookSection {
   kind: string;
   stories: IStorybookStory[];
 }
+
+export type VueFramework = {
+  component: Component<any, any, any, any> | AsyncComponent<any, any, any, any>;
+  storyResult: StoryFnVueReturnType;
+};

renderers/vue3/src/config.ts

@@ -1,5 +1,7 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { framework: 'vue3', ...docsParams };
+export const parameters = { framework: 'vue3' as const, ...docsParams };
 export { argTypesEnhancers } from './docs/config';
-export * from './preview/config';
+
+export { render, renderToDOM } from './render';
+export { decorateStory as applyDecorators } from './decorateStory';

renderers/vue3/src/decorateStory.ts

@@ -3,7 +3,7 @@ import { h } from 'vue';
 import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 
-import type { VueFramework } from './types-6-0';
+import type { VueFramework } from './types';
 
 /*
   This normalizes a functional component into a render method in ComponentOptions.

renderers/vue3/src/index.ts

@@ -1,16 +1,7 @@
-export {
-  storiesOf,
-  setAddon,
-  addDecorator,
-  addParameters,
-  configure,
-  getStorybook,
-  forceReRender,
-  raw,
-  setup,
-} from './preview';
+import './globals';
 
-export * from './preview/types-6-0';
+export * from './public-api';
+export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();

renderers/vue3/src/preview/config.ts

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

renderers/vue3/src/preview/types-7-0.ts

@@ -1,14 +0,0 @@
-import type { Args } from '@storybook/csf';
-
-import type { StoryObj } from './types-6-0';
-
-export type { StoryFn, StoryObj, Meta } from './types-6-0';
-
-// NOTE these types are reversed from the way they are in types-6-0 and types-6-3
-
-/**
- * Story function that represents a CSFv3 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type Story<TArgs = Args> = StoryObj<TArgs>;

renderers/vue3/src/public-api.ts

@@ -2,14 +2,12 @@ import type { App } from 'vue';
 import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
-import './globals';
-import type { IStorybookSection } from './types';
-import type { VueFramework } from './types-6-0';
+import type { IStorybookSection, VueFramework } from './types';
 import { decorateStory } from './decorateStory';
 
 import { render, renderToDOM } from './render';
 
-const framework = 'vue3';
+const FRAMEWORK = 'vue3';
 
 interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -26,11 +24,11 @@ const api = start(renderToDOM, { decorateStory, render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
-    framework,
+    framework: FRAMEWORK,
   });
 };
 
-export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args);
+export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
 export const { addDecorator } = api.clientApi;
 export const { addParameters } = api.clientApi;
 export const { clearDecorators } = api.clientApi;

renderers/vue3/src/public-types.ts

@@ -1,19 +1,13 @@
-import type { ConcreteComponent } from 'vue';
 import type {
   Args,
   ComponentAnnotations,
   StoryAnnotations,
   AnnotatedStoryFn,
 } from '@storybook/csf';
-import type { StoryFnVueReturnType } from './types';
+import { VueFramework } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
 
-export type VueFramework = {
-  component: ConcreteComponent<any>;
-  storyResult: StoryFnVueReturnType;
-};
-
 /**
  * Metadata to configure the stories for a component.
  *
@@ -35,12 +29,11 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<VueFramework, TArgs>;
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<VueFramework, TArgs>;
 
+// NOTE these types are reversed from the way they are in types-6-0 and types-6-3
+
 /**
- * Story function that represents a CSFv2 component example.
+ * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- *
- * NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type.
- *
  */
-export type Story<TArgs = Args> = StoryFn<TArgs>;
+export type Story<TArgs = Args> = StoryObj<TArgs>;

renderers/vue3/src/render.ts

@@ -3,8 +3,7 @@ import { createApp, h } from 'vue';
 import type { RenderContext } from '@storybook/store';
 import type { ArgsStoryFn } from '@storybook/csf';
 
-import { StoryFnVueReturnType } from './types';
-import { VueFramework } from './types-6-0';
+import { StoryFnVueReturnType, VueFramework } from './types';
 
 export const render: ArgsStoryFn<VueFramework> = (props, context) => {
   const { id, component: Component } = context;

renderers/vue3/src/types.ts

@@ -1,4 +1,5 @@
-import { ConcreteComponent } from 'vue';
+import type { StoryContext as StoryContextBase } from '@storybook/csf';
+import type { ConcreteComponent } from 'vue';
 
 export type { RenderContext } from '@storybook/core-client';
 
@@ -9,6 +10,8 @@ export interface ShowErrorArgs {
 
 export type StoryFnVueReturnType = ConcreteComponent<any>;
 
+export type StoryContext = StoryContextBase<VueFramework>;
+
 export interface IStorybookStory {
   name: string;
   render: (context: any) => any;
@@ -18,3 +21,8 @@ export interface IStorybookSection {
   kind: string;
   stories: IStorybookStory[];
 }
+
+export type VueFramework = {
+  component: ConcreteComponent<any>;
+  storyResult: StoryFnVueReturnType;
+};

renderers/web-components/src/config.ts

@@ -1,5 +1,5 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { framework: 'web-components', ...docsParams };
+export const parameters = { framework: 'web-components' as const, ...docsParams };
 export { decorators, argTypesEnhancers } from './docs/config';
 export { renderToDOM } from './render';

renderers/web-components/src/index.ts

@@ -2,6 +2,8 @@ import global from 'global';
 
 const { window, EventSource } = global;
 
+export * from './globals';
+
 export * from './public-types';
 export * from './public-api';
 export * from './framework-api';

renderers/web-components/src/public-api.ts

@@ -2,11 +2,10 @@
 import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
-import './globals';
 import { renderToDOM } from './render';
 import type { IStorybookSection, WebComponentsFramework } from './types';
 
-const framework = 'web-components';
+const FRAMEWORK = 'web-components';
 
 interface ClientApi extends ClientStoryApi<WebComponentsFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -21,11 +20,11 @@ const api = start(renderToDOM);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
-    framework,
+    framework: FRAMEWORK,
   });
 };
 
-export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args);
+export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
 export const addDecorator: ClientApi['addDecorator'] = api.clientApi
   .addDecorator as ClientApi['addDecorator'];
 export const addParameters: ClientApi['addParameters'] = api.clientApi

renderers/web-components/src/types.ts

@@ -1,12 +1,4 @@
-import type {
-  ComponentAnnotations,
-  StoryAnnotations,
-  AnnotatedStoryFn,
-  Args,
-  ArgTypes,
-  Parameters,
-  StoryContext as StoryContextBase,
-} from '@storybook/csf';
+import type { StoryContext as StoryContextBase } from '@storybook/csf';
 import type { TemplateResult, SVGTemplateResult } from 'lit-html';
 
 export type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult;