From 6d5567c1d6128effe5011874857814e18c7d2628 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 1 May 2023 11:49:42 +0200 Subject: [PATCH] Merge pull request #22261 from storybookjs/norbert/fix-21820-second-edition fix bad typings file caused by https://github.com/egoist/tsup/issues/782 --- code/addons/backgrounds/src/preview.tsx | 3 +- code/addons/links/src/preview.ts | 3 +- code/addons/measure/src/preview.tsx | 3 +- code/addons/outline/src/preview.tsx | 3 +- code/frameworks/nextjs/src/preview.tsx | 7 ++++- code/lib/builder-manager/src/index.ts | 5 ++- code/renderers/html/src/config.ts | 3 +- code/renderers/html/src/docs/config.ts | 14 ++++++--- code/renderers/html/src/types.ts | 18 +++++++++-- code/renderers/preact/src/config.ts | 2 +- code/renderers/react/src/config.ts | 2 +- code/renderers/react/src/docs/config.ts | 8 +++-- code/renderers/svelte/src/config.ts | 2 +- code/renderers/svelte/src/docs/config.ts | 7 +++-- code/renderers/svelte/src/public-api.ts | 31 ++++++++++++------- code/renderers/vue/src/config.ts | 2 +- code/renderers/vue/src/docs/config.ts | 7 +++-- code/renderers/vue3/src/config.ts | 2 +- code/renderers/vue3/src/docs/config.ts | 7 +++-- code/renderers/web-components/src/config.ts | 2 +- .../web-components/src/docs/config.ts | 7 +++-- scripts/package.json | 2 +- scripts/yarn.lock | 4 +-- 23 files changed, 91 insertions(+), 53 deletions(-) diff --git a/code/addons/backgrounds/src/preview.tsx b/code/addons/backgrounds/src/preview.tsx index de7da3b0ced0..139575e7f259 100644 --- a/code/addons/backgrounds/src/preview.tsx +++ b/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: { diff --git a/code/addons/links/src/preview.ts b/code/addons/links/src/preview.ts index 1527786e81af..67eb2dbc1411 100644 --- a/code/addons/links/src/preview.ts +++ b/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]; diff --git a/code/addons/measure/src/preview.tsx b/code/addons/measure/src/preview.tsx index c1433b927efa..7f19a8ed973a 100644 --- a/code/addons/measure/src/preview.tsx +++ b/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, diff --git a/code/addons/outline/src/preview.tsx b/code/addons/outline/src/preview.tsx index 65161c6c4f29..b1d09e1a4920 100644 --- a/code/addons/outline/src/preview.tsx +++ b/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, diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 301dce86adbe..85a9f33770cb 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -1,3 +1,4 @@ +import type { Addon_DecoratorFunction } from '@storybook/types'; import './config/preview'; import { RouterDecorator } from './routing/decorator'; import { StyledJsxDecorator } from './styledJsx/decorator'; @@ -13,7 +14,11 @@ function addNextHeadCount() { addNextHeadCount(); -export const decorators = [StyledJsxDecorator, RouterDecorator, HeadManagerDecorator]; +export const decorators: Addon_DecoratorFunction[] = [ + StyledJsxDecorator, + RouterDecorator, + HeadManagerDecorator, +]; export const parameters = { docs: { diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts index 32252d385f71..944662e562ac 100644 --- a/code/lib/builder-manager/src/index.ts +++ b/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; diff --git a/code/renderers/html/src/config.ts b/code/renderers/html/src/config.ts index 4d58cdb99467..a318cb8498a2 100644 --- a/code/renderers/html/src/config.ts +++ b/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'; diff --git a/code/renderers/html/src/docs/config.ts b/code/renderers/html/src/docs/config.ts index 9a240f329b40..2043949f02e1 100644 --- a/code/renderers/html/src/docs/config.ts +++ b/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[] = [ + sourceDecorator as Addon_DecoratorFunction, +]; -export const parameters = { +export const parameters: Partial = { 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]; diff --git a/code/renderers/html/src/types.ts b/code/renderers/html/src/types.ts index 992efc87db72..e8f264aed808 100644 --- a/code/renderers/html/src/types.ts +++ b/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 & { - parameters: DefaultStoryContext['parameters'] & typeof parameters; + parameters: DefaultStoryContext['parameters'] & Parameters; }; diff --git a/code/renderers/preact/src/config.ts b/code/renderers/preact/src/config.ts index 074601e4e092..6c72da1bc702 100644 --- a/code/renderers/preact/src/config.ts +++ b/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 }; diff --git a/code/renderers/react/src/config.ts b/code/renderers/react/src/config.ts index 123b577b5f83..ee07fe8687a4 100644 --- a/code/renderers/react/src/config.ts +++ b/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'; diff --git a/code/renderers/react/src/docs/config.ts b/code/renderers/react/src/docs/config.ts index b86959eca22a..adc3af6d2318 100644 --- a/code/renderers/react/src/docs/config.ts +++ b/code/renderers/react/src/docs/config.ts @@ -1,9 +1,11 @@ +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, @@ -11,6 +13,6 @@ export const parameters = { }, }; -export const decorators = [jsxDecorator]; +export const decorators: Addon_DecoratorFunction[] = [jsxDecorator]; -export const argTypesEnhancers = [enhanceArgTypes]; +export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes]; diff --git a/code/renderers/svelte/src/config.ts b/code/renderers/svelte/src/config.ts index 556253128e60..78323a1ce32c 100644 --- a/code/renderers/svelte/src/config.ts +++ b/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'; diff --git a/code/renderers/svelte/src/docs/config.ts b/code/renderers/svelte/src/docs/config.ts index 57a7733a8d6f..563235ec7f2d 100644 --- a/code/renderers/svelte/src/docs/config.ts +++ b/code/renderers/svelte/src/docs/config.ts @@ -1,9 +1,10 @@ +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, @@ -11,6 +12,6 @@ export const parameters = { }, }; -export const decorators = [sourceDecorator]; +export const decorators: Addon_DecoratorFunction[] = [sourceDecorator]; -export const argTypesEnhancers = [enhanceArgTypes]; +export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes]; diff --git a/code/renderers/svelte/src/public-api.ts b/code/renderers/svelte/src/public-api.ts index fd8e515a76ca..fde627e6a20e 100644 --- a/code/renderers/svelte/src/public-api.ts +++ b/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(renderToCanvas, { +const RENDERER = 'svelte'; + +interface ClientApi extends Addon_ClientStoryApi { + configure(loader: Addon_Loadable, module: NodeModule): void; + forceReRender(): void; + raw: () => any; // todo add type +} + +const api = start(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).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; diff --git a/code/renderers/vue/src/config.ts b/code/renderers/vue/src/config.ts index 9daf29f69709..bd9a2fb152cd 100644 --- a/code/renderers/vue/src/config.ts +++ b/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'; diff --git a/code/renderers/vue/src/docs/config.ts b/code/renderers/vue/src/docs/config.ts index 5cf14b360acf..2e4d23aa3ad7 100644 --- a/code/renderers/vue/src/docs/config.ts +++ b/code/renderers/vue/src/docs/config.ts @@ -1,8 +1,9 @@ +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, @@ -10,6 +11,6 @@ export const parameters = { }, }; -export const decorators = [sourceDecorator]; +export const decorators: Addon_DecoratorFunction[] = [sourceDecorator]; -export const argTypesEnhancers = [enhanceArgTypes]; +export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes]; diff --git a/code/renderers/vue3/src/config.ts b/code/renderers/vue3/src/config.ts index e983bc0b7244..f132fb510296 100644 --- a/code/renderers/vue3/src/config.ts +++ b/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'; diff --git a/code/renderers/vue3/src/docs/config.ts b/code/renderers/vue3/src/docs/config.ts index 7bb11193c353..ba0a4949b53f 100644 --- a/code/renderers/vue3/src/docs/config.ts +++ b/code/renderers/vue3/src/docs/config.ts @@ -1,8 +1,9 @@ +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, @@ -10,6 +11,6 @@ export const parameters = { }, }; -export const decorators = [sourceDecorator]; +export const decorators: Addon_DecoratorFunction[] = [sourceDecorator]; -export const argTypesEnhancers = [enhanceArgTypes]; +export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes]; diff --git a/code/renderers/web-components/src/config.ts b/code/renderers/web-components/src/config.ts index cf75e929a2ff..abf93dbc12f2 100644 --- a/code/renderers/web-components/src/config.ts +++ b/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'; diff --git a/code/renderers/web-components/src/docs/config.ts b/code/renderers/web-components/src/docs/config.ts index 4c807b45ec2b..038094f94884 100644 --- a/code/renderers/web-components/src/docs/config.ts +++ b/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[] = [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]; diff --git a/scripts/package.json b/scripts/package.json index 4bc18f2b2e42..8558f0614b40 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -146,7 +146,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", diff --git a/scripts/yarn.lock b/scripts/yarn.lock index a963bbc1678f..2d0d31d24dcb 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -2920,7 +2920,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 @@ -14561,7 +14561,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: