From f4604640a2a22a841a10e86277182d8c89b8b681 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 26 Apr 2023 15:09:11 +0200 Subject: [PATCH 1/3] fix bad typings file caused by https://github.com/egoist/tsup/issues/782 --- code/renderers/html/src/config.ts | 3 ++- code/renderers/html/src/docs/config.ts | 7 ++++--- code/renderers/html/src/types.ts | 19 ++++++++++++++++--- scripts/package.json | 2 +- scripts/yarn.lock | 4 ++-- 5 files changed, 25 insertions(+), 10 deletions(-) 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..861f41f5230d 100644 --- a/code/renderers/html/src/docs/config.ts +++ b/code/renderers/html/src/docs/config.ts @@ -1,17 +1,18 @@ import { SourceType, enhanceArgTypes } from '@storybook/docs-tools'; import { sourceDecorator } from './sourceDecorator'; +import type { Parameters } from '../types'; export const decorators = [sourceDecorator]; -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, }, }, }; diff --git a/code/renderers/html/src/types.ts b/code/renderers/html/src/types.ts index 992efc87db72..60fc2d381a9e 100644 --- a/code/renderers/html/src/types.ts +++ b/code/renderers/html/src/types.ts @@ -2,9 +2,9 @@ import type { ArgsStoryFn, StoryContext as DefaultStoryContext, WebRenderer, + Parameters as DefaultParameters, } from '@storybook/types'; - -import type { parameters } from './config'; +import type { SourceType } from '@storybook/docs-tools'; export type { RenderContext } from '@storybook/types'; @@ -24,6 +24,19 @@ export interface HtmlRenderer extends WebRenderer { storyResult: StoryFnHtmlReturnType; } +export interface Parameters extends DefaultParameters { + 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/scripts/package.json b/scripts/package.json index bbbfde5f2d29..997011305fe9 100644 --- a/scripts/package.json +++ b/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", diff --git a/scripts/yarn.lock b/scripts/yarn.lock index 5179a522ed76..eb22de4f3a3c 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: From 69dc1b04a67b42e6dba0e84a716cc3b2940cfccc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 26 Apr 2023 17:45:05 +0200 Subject: [PATCH 2/3] I've done a search for all references to `'lib/` in the dist we generate. Turns out this is a much wider problem. This fixes all of them, not just in the html renderer. I agree these changes aren't the best. we should contact the authors of the tooling and get these problems addressed. --- 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 | 3 +- code/lib/builder-manager/src/index.ts | 5 ++- code/renderers/html/src/docs/config.ts | 9 ++++-- 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 +++-- 19 files changed, 64 insertions(+), 44 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 8894f4fb1d63..d089aa27f0d9 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 { ImageDecorator } from './images/decorator'; import { RouterDecorator } from './routing/decorator'; @@ -14,7 +15,7 @@ function addNextHeadCount() { addNextHeadCount(); -export const decorators = [ +export const decorators: Addon_DecoratorFunction[] = [ StyledJsxDecorator, ImageDecorator, RouterDecorator, diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts index e25938c5cacd..a3e20675dd70 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/docs/config.ts b/code/renderers/html/src/docs/config.ts index 861f41f5230d..2043949f02e1 100644 --- a/code/renderers/html/src/docs/config.ts +++ b/code/renderers/html/src/docs/config.ts @@ -1,9 +1,12 @@ +import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types'; import { SourceType, enhanceArgTypes } from '@storybook/docs-tools'; import { sourceDecorator } from './sourceDecorator'; -import type { Parameters } from '../types'; +import type { Parameters, StoryFnHtmlReturnType } from '../types'; -export const decorators = [sourceDecorator]; +export const decorators: Addon_DecoratorFunction[] = [ + sourceDecorator as Addon_DecoratorFunction, +]; export const parameters: Partial = { docs: { @@ -17,4 +20,4 @@ export const parameters: Partial = { }, }; -export const argTypesEnhancers = [enhanceArgTypes]; +export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes]; 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]; From 79f1940428f09275fa1c408bf6fda0217eb8a71e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 28 Apr 2023 08:56:50 +0200 Subject: [PATCH 3/3] remove parameter type extension, that's not needed --- code/renderers/html/src/types.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/renderers/html/src/types.ts b/code/renderers/html/src/types.ts index 60fc2d381a9e..e8f264aed808 100644 --- a/code/renderers/html/src/types.ts +++ b/code/renderers/html/src/types.ts @@ -2,7 +2,6 @@ import type { ArgsStoryFn, StoryContext as DefaultStoryContext, WebRenderer, - Parameters as DefaultParameters, } from '@storybook/types'; import type { SourceType } from '@storybook/docs-tools'; @@ -24,7 +23,7 @@ export interface HtmlRenderer extends WebRenderer { storyResult: StoryFnHtmlReturnType; } -export interface Parameters extends DefaultParameters { +export interface Parameters { renderer: 'html'; docs?: { story: { inline: boolean };