From 79c58e69065cb04afc8295d90775d39899079692 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 27 Sep 2022 12:48:09 +0200 Subject: [PATCH 1/4] migrate lib/api to be built using tsup --- code/lib/api/package.json | 28 ++++++++++++++++++++++++---- code/lib/api/src/shortcut.ts | 1 + 2 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 code/lib/api/src/shortcut.ts diff --git a/code/lib/api/package.json b/code/lib/api/package.json index e81e11526a3d..c1d61494468f 100644 --- a/code/lib/api/package.json +++ b/code/lib/api/package.json @@ -18,9 +18,22 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "types": "dist/types/index.d.ts", + "exports": { + ".": { + "require": "./dist/index.js", + "import": "./dist/index.mjs", + "types": "./dist/index.d.ts" + }, + "./shortcut": { + "require": "./dist/shortcut.js", + "import": "./dist/shortcut.mjs", + "types": "./dist/shortcut.d.ts" + }, + "./package.json": "./package.json" + }, + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", "files": [ "dist/**/*", "README.md", @@ -29,7 +42,7 @@ ], "scripts": { "check": "../../../scripts/node_modules/.bin/tsc --noEmit", - "prep": "node ../../../scripts/prepare.js" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "7.0.0-alpha.34", @@ -64,5 +77,12 @@ "publishConfig": { "access": "public" }, + "bundler": { + "platform": "browser", + "entries": [ + "./src/index.tsx", + "./src/shortcut.ts" + ] + }, "gitHead": "fc90fc875462421c1faa35862ac4bc436de8e75f" } diff --git a/code/lib/api/src/shortcut.ts b/code/lib/api/src/shortcut.ts new file mode 100644 index 000000000000..a39e27fdba53 --- /dev/null +++ b/code/lib/api/src/shortcut.ts @@ -0,0 +1 @@ +export * from './lib/shortcut'; From 54673a4002898773dca8acca189034078cec8b38 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 27 Sep 2022 15:41:01 +0200 Subject: [PATCH 2/4] fix build issues after bundling lib/api --- code/addons/interactions/package.json | 1 + code/addons/interactions/src/preset/preview.ts | 2 ++ code/lib/addons/package.json | 3 +++ code/lib/addons/src/main.ts | 1 + code/lib/addons/src/types.ts | 2 +- code/lib/api/package.json | 1 - code/lib/ui/package.json | 2 ++ code/lib/ui/src/containers/notifications.tsx | 12 +++++------- code/lib/ui/src/index.tsx | 2 ++ code/yarn.lock | 4 ++++ 10 files changed, 21 insertions(+), 9 deletions(-) diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 67ae13da0740..b63a450177aa 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -76,6 +76,7 @@ "devDependencies": { "@storybook/jest": "^0.0.10", "@storybook/testing-library": "0.0.14-next.0", + "@types/node": "^14.14.20 || ^16.0.0", "formik": "^2.2.9", "typescript": "~4.6.3" }, diff --git a/code/addons/interactions/src/preset/preview.ts b/code/addons/interactions/src/preset/preview.ts index 6525e672a4d7..ac81f57af181 100644 --- a/code/addons/interactions/src/preset/preview.ts +++ b/code/addons/interactions/src/preset/preview.ts @@ -1,3 +1,5 @@ +/// + import { addons } from '@storybook/addons'; import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events'; import type { diff --git a/code/lib/addons/package.json b/code/lib/addons/package.json index 7c7a1a6e1e8c..104a9f1bd506 100644 --- a/code/lib/addons/package.json +++ b/code/lib/addons/package.json @@ -51,6 +51,9 @@ "@storybook/theming": "7.0.0-alpha.34", "global": "^4.4.0" }, + "devDependencies": { + "@types/webpack-env": "^1.16.0" + }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" diff --git a/code/lib/addons/src/main.ts b/code/lib/addons/src/main.ts index 4c97ca06058d..ac37b2f2e060 100644 --- a/code/lib/addons/src/main.ts +++ b/code/lib/addons/src/main.ts @@ -1,4 +1,5 @@ import global from 'global'; + import type { ReactElement } from 'react'; import { Channel } from '@storybook/channels'; import { SET_CONFIG } from '@storybook/core-events'; diff --git a/code/lib/addons/src/types.ts b/code/lib/addons/src/types.ts index 6cb8f86f3aaf..d33d840bb535 100644 --- a/code/lib/addons/src/types.ts +++ b/code/lib/addons/src/types.ts @@ -197,7 +197,7 @@ export interface StoryApi { } export interface ClientStoryApi { - storiesOf(kind: StoryKind, module: NodeModule): StoryApi; + storiesOf(kind: StoryKind, module: any): StoryApi; addDecorator(decorator: DecoratorFunction): StoryApi; addParameters(parameter: Parameters): StoryApi; } diff --git a/code/lib/api/package.json b/code/lib/api/package.json index c1d61494468f..089892c0e7f3 100644 --- a/code/lib/api/package.json +++ b/code/lib/api/package.json @@ -78,7 +78,6 @@ "access": "public" }, "bundler": { - "platform": "browser", "entries": [ "./src/index.tsx", "./src/shortcut.ts" diff --git a/code/lib/ui/package.json b/code/lib/ui/package.json index 84ae25e40363..c4f430fbf951 100644 --- a/code/lib/ui/package.json +++ b/code/lib/ui/package.json @@ -66,6 +66,8 @@ "@storybook/semver": "^7.3.2", "@storybook/theming": "7.0.0-alpha.34", "@testing-library/react": "^11.2.2", + "@types/node": "^14.0.10 || ^16.0.0", + "@types/webpack-env": "^1.16.0", "copy-to-clipboard": "^3.3.1", "downshift": "^6.0.15", "enzyme": "^3.11.0", diff --git a/code/lib/ui/src/containers/notifications.tsx b/code/lib/ui/src/containers/notifications.tsx index ac2b3c69c6f7..32b17bf9d9d6 100644 --- a/code/lib/ui/src/containers/notifications.tsx +++ b/code/lib/ui/src/containers/notifications.tsx @@ -1,16 +1,14 @@ import React, { FC } from 'react'; -import { Consumer, Combo, useStorybookApi } from '@storybook/api'; +import type { Combo } from '@storybook/api'; +import { Consumer } from '@storybook/api'; import NotificationList from '../components/notifications/NotificationList'; -export const mapper = ({ state }: Combo) => { - const { clearNotification } = useStorybookApi(); - const { notifications } = state; - +const mapper = ({ state, api }: Combo) => { return { - notifications, - clearNotification, + notifications: state.notifications, + clearNotification: api.clearNotification, }; }; diff --git a/code/lib/ui/src/index.tsx b/code/lib/ui/src/index.tsx index 5da1ffea94dd..c95b9c418370 100644 --- a/code/lib/ui/src/index.tsx +++ b/code/lib/ui/src/index.tsx @@ -1,5 +1,7 @@ // eslint-disable-next-line @typescript-eslint/triple-slash-reference /// +/// +/// import global from 'global'; import React, { FC } from 'react'; diff --git a/code/yarn.lock b/code/yarn.lock index 18d63a28bbd5..c54036819e48 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7018,6 +7018,7 @@ __metadata: "@storybook/jest": ^0.0.10 "@storybook/testing-library": 0.0.14-next.0 "@storybook/theming": 7.0.0-alpha.34 + "@types/node": ^14.14.20 || ^16.0.0 formik: ^2.2.9 global: ^4.4.0 jest-mock: ^27.0.6 @@ -7355,6 +7356,7 @@ __metadata: "@storybook/csf": 0.0.2--canary.0899bb7.0 "@storybook/router": 7.0.0-alpha.34 "@storybook/theming": 7.0.0-alpha.34 + "@types/webpack-env": ^1.16.0 global: ^4.4.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -9382,6 +9384,8 @@ __metadata: "@storybook/semver": ^7.3.2 "@storybook/theming": 7.0.0-alpha.34 "@testing-library/react": ^11.2.2 + "@types/node": ^14.0.10 || ^16.0.0 + "@types/webpack-env": ^1.16.0 copy-to-clipboard: ^3.3.1 downshift: ^6.0.15 enzyme: ^3.11.0 From f21aca607b305aa5c2479e88ca5957c1740dbdc8 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 27 Sep 2022 15:52:36 +0200 Subject: [PATCH 3/4] fix broken reference to dist --- code/lib/api/shortcut.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/api/shortcut.js b/code/lib/api/shortcut.js index f3bdc238133b..76e2e84884ff 100644 --- a/code/lib/api/shortcut.js +++ b/code/lib/api/shortcut.js @@ -1 +1 @@ -export * from './dist/esm/lib/shortcut'; +export * from './dist/shortcut.mjs'; From c98bbec9cb92862df1c75a4c533dc27c219162f9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 27 Sep 2022 16:28:05 +0200 Subject: [PATCH 4/4] maybe fix the unit tests this way --- code/lib/api/shortcut.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/api/shortcut.js b/code/lib/api/shortcut.js index 76e2e84884ff..9fb9988699cd 100644 --- a/code/lib/api/shortcut.js +++ b/code/lib/api/shortcut.js @@ -1 +1 @@ -export * from './dist/shortcut.mjs'; +export * from './dist/shortcut';