From e5054c27e9290ed68f3f69b77f54afaca54629c8 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 7 Sep 2022 19:29:53 -0400 Subject: [PATCH] Export storybook utilities for builder from frameworks --- code/frameworks/react-vite/package.json | 5 +++++ code/frameworks/react-vite/src/index.ts | 7 +++++++ code/frameworks/svelte-vite/package.json | 5 +++++ code/frameworks/svelte-vite/src/index.ts | 7 +++++++ code/frameworks/vue3-vite/package.json | 5 +++++ code/frameworks/vue3-vite/src/index.ts | 7 +++++++ code/lib/builder-vite/package.json | 3 --- .../src/codegen-modern-iframe-script.ts | 4 ++-- .../src/codegen-set-addon-channel.ts | 12 ++++++++---- .../src/plugins/code-generator-plugin.ts | 2 +- code/yarn.lock | 18 +++++++++++++++--- 11 files changed, 62 insertions(+), 13 deletions(-) diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 40de694c6964..e7354eabecc6 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -53,7 +53,12 @@ "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "^0.0.5", "@rollup/pluginutils": "^4.2.0", + "@storybook/addons": "7.0.0-alpha.31", "@storybook/builder-vite": "7.0.0-alpha.31", + "@storybook/channel-postmessage": "7.0.0-alpha.31", + "@storybook/channel-websocket": "7.0.0-alpha.31", + "@storybook/client-api": "7.0.0-alpha.31", + "@storybook/preview-web": "7.0.0-alpha.31", "@storybook/react": "7.0.0-alpha.31", "@vitejs/plugin-react": "^2.0.1", "ast-types": "^0.14.2", diff --git a/code/frameworks/react-vite/src/index.ts b/code/frameworks/react-vite/src/index.ts index 73f50674eeac..058402e1dc78 100644 --- a/code/frameworks/react-vite/src/index.ts +++ b/code/frameworks/react-vite/src/index.ts @@ -1,2 +1,9 @@ +// exports for builder-vite +export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; +export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; +export { addons } from '@storybook/addons'; +export { composeConfigs, PreviewWeb } from '@storybook/preview-web'; +export { ClientApi } from '@storybook/client-api'; + export * from '@storybook/react'; export type { StorybookConfig } from '@storybook/builder-vite'; diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 8a0bf51303a3..24b67e594701 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -52,8 +52,13 @@ }, "dependencies": { "@storybook/addon-svelte-csf": "^2.0.0", + "@storybook/addons": "7.0.0-alpha.31", "@storybook/builder-vite": "7.0.0-alpha.31", + "@storybook/channel-postmessage": "7.0.0-alpha.31", + "@storybook/channel-websocket": "7.0.0-alpha.31", + "@storybook/client-api": "7.0.0-alpha.31", "@storybook/node-logger": "7.0.0-alpha.31", + "@storybook/preview-web": "7.0.0-alpha.31", "@storybook/svelte": "7.0.0-alpha.31", "@sveltejs/vite-plugin-svelte": "^1.0.0", "magic-string": "^0.26.1", diff --git a/code/frameworks/svelte-vite/src/index.ts b/code/frameworks/svelte-vite/src/index.ts index 34948740dd91..a8832a0b6949 100644 --- a/code/frameworks/svelte-vite/src/index.ts +++ b/code/frameworks/svelte-vite/src/index.ts @@ -1,2 +1,9 @@ +// exports for builder-vite +export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; +export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; +export { addons } from '@storybook/addons'; +export { composeConfigs, PreviewWeb } from '@storybook/preview-web'; +export { ClientApi } from '@storybook/client-api'; + export * from '@storybook/svelte'; export type { StorybookConfig } from '@storybook/builder-vite'; diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 7451a6895702..58f5daad7cad 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -51,8 +51,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/addons": "7.0.0-alpha.31", "@storybook/builder-vite": "7.0.0-alpha.31", + "@storybook/channel-postmessage": "7.0.0-alpha.31", + "@storybook/channel-websocket": "7.0.0-alpha.31", + "@storybook/client-api": "7.0.0-alpha.31", "@storybook/core-server": "7.0.0-alpha.31", + "@storybook/preview-web": "7.0.0-alpha.31", "@storybook/vue3": "7.0.0-alpha.31", "@vitejs/plugin-vue": "^3.0.3", "magic-string": "^0.26.1", diff --git a/code/frameworks/vue3-vite/src/index.ts b/code/frameworks/vue3-vite/src/index.ts index 5687914b4894..dc3b83ca45a9 100644 --- a/code/frameworks/vue3-vite/src/index.ts +++ b/code/frameworks/vue3-vite/src/index.ts @@ -1,2 +1,9 @@ +// exports for builder-vite +export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; +export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; +export { addons } from '@storybook/addons'; +export { composeConfigs, PreviewWeb } from '@storybook/preview-web'; +export { ClientApi } from '@storybook/client-api'; + export * from '@storybook/vue3'; export type { StorybookConfig } from '@storybook/builder-vite'; diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json index d990fce7b5c3..7a0d88bbdff9 100644 --- a/code/lib/builder-vite/package.json +++ b/code/lib/builder-vite/package.json @@ -19,9 +19,6 @@ }, "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "0.0.5", - "@storybook/addons": "7.0.0-alpha.31", - "@storybook/channel-postmessage": "7.0.0-alpha.31", - "@storybook/channel-websocket": "7.0.0-alpha.31", "@storybook/client-api": "7.0.0-alpha.31", "@storybook/client-logger": "7.0.0-alpha.31", "@storybook/core-common": "7.0.0-alpha.31", diff --git a/code/lib/builder-vite/src/codegen-modern-iframe-script.ts b/code/lib/builder-vite/src/codegen-modern-iframe-script.ts index 94aa05ad6092..98dfce709495 100644 --- a/code/lib/builder-vite/src/codegen-modern-iframe-script.ts +++ b/code/lib/builder-vite/src/codegen-modern-iframe-script.ts @@ -50,8 +50,8 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) { * @todo Inline variable and remove `noinspection` */ const code = ` - import { composeConfigs, PreviewWeb } from '@storybook/preview-web'; - import { ClientApi } from '@storybook/client-api'; + import { ClientApi, composeConfigs, PreviewWeb } from '${frameworkName}'; + import '${virtualAddonSetupFile}'; import { importFn } from '${virtualStoriesFile}'; diff --git a/code/lib/builder-vite/src/codegen-set-addon-channel.ts b/code/lib/builder-vite/src/codegen-set-addon-channel.ts index f00e3d83e1e3..d99e3f2e783b 100644 --- a/code/lib/builder-vite/src/codegen-set-addon-channel.ts +++ b/code/lib/builder-vite/src/codegen-set-addon-channel.ts @@ -1,8 +1,12 @@ -export function generateAddonSetupCode() { +import { getFrameworkName } from '@storybook/core-common'; + +import type { ExtendedOptions } from './types'; + +export async function generateAddonSetupCode(options: ExtendedOptions) { + const framework = await getFrameworkName(options); + return ` - import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; - import { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; - import { addons } from '@storybook/addons'; + import { createPostMessageChannel, createWebSocketChannel, addons } from '${framework}'; const channel = createPostMessageChannel({ page: 'preview' }); addons.setChannel(channel); diff --git a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts index e93e0da96e13..0a7636a5e363 100644 --- a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts +++ b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts @@ -116,7 +116,7 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin { } if (id === virtualAddonSetupFile) { - return generateAddonSetupCode(); + return generateAddonSetupCode(options); } if (id === virtualPreviewFile && !storyStoreV7) { diff --git a/code/yarn.lock b/code/yarn.lock index 7151741a7735..4474fa05b278 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7739,9 +7739,6 @@ __metadata: resolution: "@storybook/builder-vite@workspace:lib/builder-vite" dependencies: "@joshwooding/vite-plugin-react-docgen-typescript": 0.0.5 - "@storybook/addons": 7.0.0-alpha.31 - "@storybook/channel-postmessage": 7.0.0-alpha.31 - "@storybook/channel-websocket": 7.0.0-alpha.31 "@storybook/client-api": 7.0.0-alpha.31 "@storybook/client-logger": 7.0.0-alpha.31 "@storybook/core-common": 7.0.0-alpha.31 @@ -8910,7 +8907,12 @@ __metadata: dependencies: "@joshwooding/vite-plugin-react-docgen-typescript": ^0.0.5 "@rollup/pluginutils": ^4.2.0 + "@storybook/addons": 7.0.0-alpha.31 "@storybook/builder-vite": 7.0.0-alpha.31 + "@storybook/channel-postmessage": 7.0.0-alpha.31 + "@storybook/channel-websocket": 7.0.0-alpha.31 + "@storybook/client-api": 7.0.0-alpha.31 + "@storybook/preview-web": 7.0.0-alpha.31 "@storybook/react": 7.0.0-alpha.31 "@types/node": ^14.14.20 || ^16.0.0 "@vitejs/plugin-react": ^2.0.1 @@ -9386,8 +9388,13 @@ __metadata: resolution: "@storybook/svelte-vite@workspace:frameworks/svelte-vite" dependencies: "@storybook/addon-svelte-csf": ^2.0.0 + "@storybook/addons": 7.0.0-alpha.31 "@storybook/builder-vite": 7.0.0-alpha.31 + "@storybook/channel-postmessage": 7.0.0-alpha.31 + "@storybook/channel-websocket": 7.0.0-alpha.31 + "@storybook/client-api": 7.0.0-alpha.31 "@storybook/node-logger": 7.0.0-alpha.31 + "@storybook/preview-web": 7.0.0-alpha.31 "@storybook/svelte": 7.0.0-alpha.31 "@sveltejs/vite-plugin-svelte": ^1.0.0 "@types/node": ^14.14.20 || ^16.0.0 @@ -9594,8 +9601,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/vue3-vite@workspace:frameworks/vue3-vite" dependencies: + "@storybook/addons": 7.0.0-alpha.31 "@storybook/builder-vite": 7.0.0-alpha.31 + "@storybook/channel-postmessage": 7.0.0-alpha.31 + "@storybook/channel-websocket": 7.0.0-alpha.31 + "@storybook/client-api": 7.0.0-alpha.31 "@storybook/core-server": 7.0.0-alpha.31 + "@storybook/preview-web": 7.0.0-alpha.31 "@storybook/vue3": 7.0.0-alpha.31 "@types/node": ^14.14.20 || ^16.0.0 "@vitejs/plugin-vue": ^3.0.3