Merge pull request #22261 from storybookjs/norbert/fix-21820-second-e…

…dition

fix bad typings file caused by egoist/tsup#782

code/addons/backgrounds/src/preview.tsx

@@ -1,8 +1,9 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import { withBackground } from './decorators/withBackground';
 import { withGrid } from './decorators/withGrid';
 import { PARAM_KEY } from './constants';
 
-export const decorators = [withGrid, withBackground];
+export const decorators: Addon_DecoratorFunction[] = [withGrid, withBackground];
 export const parameters = {
   [PARAM_KEY]: {
     grid: {

code/addons/links/src/preview.ts

@@ -1,3 +1,4 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import { withLinks } from './index';
 
-export const decorators = [withLinks];
+export const decorators: Addon_DecoratorFunction[] = [withLinks];

code/addons/measure/src/preview.tsx

@@ -1,7 +1,8 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import { withMeasure } from './withMeasure';
 import { PARAM_KEY } from './constants';
 
-export const decorators = [withMeasure];
+export const decorators: Addon_DecoratorFunction[] = [withMeasure];
 
 export const globals = {
   [PARAM_KEY]: false,

code/addons/outline/src/preview.tsx

@@ -1,7 +1,8 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import { withOutline } from './withOutline';
 import { PARAM_KEY } from './constants';
 
-export const decorators = [withOutline];
+export const decorators: Addon_DecoratorFunction[] = [withOutline];
 
 export const globals = {
   [PARAM_KEY]: false,

code/frameworks/nextjs/src/preview.tsx

@@ -1,3 +1,4 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import './config/preview';
 import { ImageDecorator } from './images/decorator';
 import { RouterDecorator } from './routing/decorator';
@@ -14,7 +15,7 @@ function addNextHeadCount() {
 
 addNextHeadCount();
 
-export const decorators = [
+export const decorators: Addon_DecoratorFunction<any>[] = [
   StyledJsxDecorator,
   ImageDecorator,
   RouterDecorator,

code/lib/builder-manager/src/index.ts

@@ -15,7 +15,6 @@ import { wrapManagerEntries } from './utils/managerEntries';
 import type {
   BuilderBuildResult,
   BuilderFunction,
-  BuilderStartOptions,
   BuilderStartResult,
   Compilation,
   ManagerBuilder,
@@ -282,7 +281,7 @@ export const bail: ManagerBuilder['bail'] = async () => {
   }
 };
 
-export const start = async (options: BuilderStartOptions) => {
+export const start: ManagerBuilder['start'] = async (options) => {
   asyncIterator = starter(options);
   let result;
 
@@ -294,7 +293,7 @@ export const start = async (options: BuilderStartOptions) => {
   return result.value;
 };
 
-export const build = async (options: BuilderStartOptions) => {
+export const build: ManagerBuilder['build'] = async (options) => {
   asyncIterator = builder(options);
   let result;
 

code/renderers/html/src/config.ts

@@ -1,6 +1,7 @@
 import { parameters as docsParams } from './docs/config';
+import type { Parameters } from './types';
 
-export const parameters = { renderer: 'html' as const, ...docsParams };
+export const parameters: Parameters = { renderer: 'html', ...docsParams };
 
 export { decorators, argTypesEnhancers } from './docs/config';
 export { renderToCanvas, render } from './render';

code/renderers/html/src/docs/config.ts

@@ -1,19 +1,23 @@
+import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
 import { SourceType, enhanceArgTypes } from '@storybook/docs-tools';
 
 import { sourceDecorator } from './sourceDecorator';
+import type { Parameters, StoryFnHtmlReturnType } from '../types';
 
-export const decorators = [sourceDecorator];
+export const decorators: Addon_DecoratorFunction<StoryFnHtmlReturnType>[] = [
+  sourceDecorator as Addon_DecoratorFunction<StoryFnHtmlReturnType>,
+];
 
-export const parameters = {
+export const parameters: Partial<Parameters> = {
   docs: {
     story: { inline: true },
     source: {
       type: SourceType.DYNAMIC,
       language: 'html',
-      code: undefined as unknown,
-      excludeDecorators: undefined as unknown,
+      code: undefined,
+      excludeDecorators: undefined,
     },
   },
 };
 
-export const argTypesEnhancers = [enhanceArgTypes];
+export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];

code/renderers/html/src/types.ts

@@ -3,8 +3,7 @@ import type {
   StoryContext as DefaultStoryContext,
   WebRenderer,
 } from '@storybook/types';
-
-import type { parameters } from './config';
+import type { SourceType } from '@storybook/docs-tools';
 
 export type { RenderContext } from '@storybook/types';
 
@@ -24,6 +23,19 @@ export interface HtmlRenderer extends WebRenderer {
   storyResult: StoryFnHtmlReturnType;
 }
 
+export interface Parameters {
+  renderer: 'html';
+  docs?: {
+    story: { inline: boolean };
+    source: {
+      type: SourceType.DYNAMIC;
+      language: 'html';
+      code: any;
+      excludeDecorators: any;
+    };
+  };
+}
+
 export type StoryContext = DefaultStoryContext<HtmlRenderer> & {
-  parameters: DefaultStoryContext<HtmlRenderer>['parameters'] & typeof parameters;
+  parameters: DefaultStoryContext<HtmlRenderer>['parameters'] & Parameters;
 };

code/renderers/preact/src/config.ts

@@ -2,4 +2,4 @@ import { parameters as docsParams } from './docs/config';
 
 export { renderToCanvas, render } from './render';
 
-export const parameters = { renderer: 'preact' as const, ...docsParams };
+export const parameters: {} = { renderer: 'preact' as const, ...docsParams };

code/renderers/react/src/config.ts

@@ -1,6 +1,6 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { renderer: 'react', ...docsParams };
+export const parameters: {} = { renderer: 'react', ...docsParams };
 
 export { decorators, argTypesEnhancers } from './docs/config';
 

code/renderers/react/src/docs/config.ts

@@ -1,16 +1,18 @@
+import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
 import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
 
 import { extractArgTypes } from './extractArgTypes';
 import { jsxDecorator } from './jsxDecorator';
+import type { StoryFnReactReturnType } from '../types';
 
-export const parameters = {
+export const parameters: {} = {
   docs: {
     story: { inline: true },
     extractArgTypes,
     extractComponentDescription,
   },
 };
 
-export const decorators = [jsxDecorator];
+export const decorators: Addon_DecoratorFunction<StoryFnReactReturnType>[] = [jsxDecorator];
 
-export const argTypesEnhancers = [enhanceArgTypes];
+export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];

code/renderers/svelte/src/config.ts

@@ -1,6 +1,6 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { renderer: 'svelte' as const, ...docsParams };
+export const parameters: {} = { renderer: 'svelte' as const, ...docsParams };
 export { decorators, argTypesEnhancers } from './docs/config';
 
 export { render, renderToCanvas } from './render';

code/renderers/svelte/src/docs/config.ts

@@ -1,16 +1,17 @@
+import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
 import { enhanceArgTypes } from '@storybook/docs-tools';
 import { extractArgTypes } from './extractArgTypes';
 import { extractComponentDescription } from './extractComponentDescription';
 import { sourceDecorator } from './sourceDecorator';
 
-export const parameters = {
+export const parameters: {} = {
   docs: {
     story: { inline: true },
     extractArgTypes,
     extractComponentDescription,
   },
 };
 
-export const decorators = [sourceDecorator];
+export const decorators: Addon_DecoratorFunction<unknown>[] = [sourceDecorator];
 
-export const argTypesEnhancers = [enhanceArgTypes];
+export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];

code/renderers/svelte/src/public-api.ts

@@ -1,23 +1,30 @@
+/* eslint-disable prefer-destructuring */
 import { start } from '@storybook/preview-api';
+import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { decorateStory } from './decorators';
 
 import type { SvelteRenderer } from './types';
 import { render, renderToCanvas } from './render';
 
-const {
-  configure: coreConfigure,
-  clientApi,
-  forceReRender,
-} = start<SvelteRenderer>(renderToCanvas, {
+const RENDERER = 'svelte';
+
+interface ClientApi extends Addon_ClientStoryApi<SvelteRenderer['storyResult']> {
+  configure(loader: Addon_Loadable, module: NodeModule): void;
+  forceReRender(): void;
+  raw: () => any; // todo add type
+}
+
+const api = start<SvelteRenderer>(renderToCanvas, {
   decorateStory,
   render,
 });
 
-export const { raw } = clientApi;
-
-const RENDERER = 'svelte';
-export const storiesOf = (kind: string, m: any) =>
-  clientApi.storiesOf(kind, m).addParameters({ renderer: RENDERER });
-export const configure = (...args: any[]) => coreConfigure(RENDERER, ...args);
+export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
+  return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
+    renderer: RENDERER,
+  });
+};
 
-export { forceReRender };
+export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args);
+export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
+export const raw: ClientApi['raw'] = api.clientApi.raw;

code/renderers/vue/src/config.ts

@@ -1,6 +1,6 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { renderer: 'vue' as const, ...docsParams };
+export const parameters: {} = { renderer: 'vue' as const, ...docsParams };
 export { decorators, argTypesEnhancers } from './docs/config';
 
 export { render, renderToCanvas } from './render';

code/renderers/vue/src/docs/config.ts

@@ -1,15 +1,16 @@
+import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
 import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
 import { extractArgTypes } from './extractArgTypes';
 import { sourceDecorator } from './sourceDecorator';
 
-export const parameters = {
+export const parameters: {} = {
   docs: {
     story: { inline: true, iframeHeight: '120px' },
     extractArgTypes,
     extractComponentDescription,
   },
 };
 
-export const decorators = [sourceDecorator];
+export const decorators: Addon_DecoratorFunction<any>[] = [sourceDecorator];
 
-export const argTypesEnhancers = [enhanceArgTypes];
+export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];

code/renderers/vue3/src/config.ts

@@ -1,6 +1,6 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { renderer: 'vue3' as const, ...docsParams };
+export const parameters: {} = { renderer: 'vue3' as const, ...docsParams };
 export { decorators, argTypesEnhancers } from './docs/config';
 
 export { render, renderToCanvas } from './render';

code/renderers/vue3/src/docs/config.ts

@@ -1,15 +1,16 @@
+import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
 import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
 import { extractArgTypes } from './extractArgTypes';
 import { sourceDecorator } from './sourceDecorator';
 
-export const parameters = {
+export const parameters: {} = {
   docs: {
     story: { inline: true },
     extractArgTypes,
     extractComponentDescription,
   },
 };
 
-export const decorators = [sourceDecorator];
+export const decorators: Addon_DecoratorFunction<unknown>[] = [sourceDecorator];
 
-export const argTypesEnhancers = [enhanceArgTypes];
+export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];

code/renderers/web-components/src/config.ts

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

code/renderers/web-components/src/docs/config.ts

@@ -1,10 +1,11 @@
+import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
 import { SourceType, enhanceArgTypes } from '@storybook/docs-tools';
 import { extractArgTypes, extractComponentDescription } from './custom-elements';
 import { sourceDecorator } from './sourceDecorator';
 
-export const decorators = [sourceDecorator];
+export const decorators: Addon_DecoratorFunction<unknown>[] = [sourceDecorator];
 
-export const parameters = {
+export const parameters: {} = {
   docs: {
     extractArgTypes,
     extractComponentDescription,
@@ -16,4 +17,4 @@ export const parameters = {
   },
 };
 
-export const argTypesEnhancers = [enhanceArgTypes];
+export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];

scripts/package.json

@@ -147,7 +147,7 @@
     "trash": "^7.0.0",
     "ts-dedent": "^2.0.0",
     "ts-node": "^10.9.1",
-    "tsup": "^6.2.2",
+    "tsup": "^6.7.0",
     "type-fest": "^3.4.0",
     "typescript": "~4.9.3",
     "util": "^0.12.4",

scripts/yarn.lock

@@ -2927,7 +2927,7 @@ __metadata:
     ts-dedent: ^2.0.0
     ts-loader: ^9.4.2
     ts-node: ^10.9.1
-    tsup: ^6.2.2
+    tsup: ^6.7.0
     type-fest: ^3.4.0
     typescript: ~4.9.3
     util: ^0.12.4
@@ -14647,7 +14647,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tsup@npm:^6.2.2":
+"tsup@npm:^6.7.0":
   version: 6.7.0
   resolution: "tsup@npm:6.7.0"
   dependencies: