diff --git a/code/builders/builder-vite/input/iframe.html b/code/builders/builder-vite/input/iframe.html index 23c280c02242..8980a034168d 100644 --- a/code/builders/builder-vite/input/iframe.html +++ b/code/builders/builder-vite/input/iframe.html @@ -64,7 +64,6 @@
- diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index 581ce74a7569..fa7d1ee4f76e 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/code/builders/builder-vite/src/build.ts @@ -24,11 +24,7 @@ export async function build(options: Options) { outDir: options.outputDir, emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there! rollupOptions: { - external: [ - // Do not try to bundle the Storybook runtime, it is copied into the output dir after the build. - './sb-preview/runtime.js', - /\.\/sb-common-assets\/.*\.woff2/, - ], + external: [/\.\/sb-common-assets\/.*\.woff2/], }, ...(options.test ? { diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts index 4abf4c22f315..ca4578b972cc 100644 --- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts +++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts @@ -67,10 +67,15 @@ export async function generateModernIframeScriptCode(options: Options, projectRo * @todo Inline variable and remove `noinspection` */ const code = ` - import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api'; + import { setup } from '@storybook/core/preview/runtime'; import '${SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE}'; + + setup(); + + import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api'; import { importFn } from '${SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE}'; + ${getPreviewAnnotationsFunction} window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations); diff --git a/code/builders/builder-vite/src/index.ts b/code/builders/builder-vite/src/index.ts index 9ab66f2771d0..785db459cec4 100644 --- a/code/builders/builder-vite/src/index.ts +++ b/code/builders/builder-vite/src/index.ts @@ -1,6 +1,5 @@ // noinspection JSUnusedGlobalSymbols -import { cp, readFile } from 'node:fs/promises'; -import { join, parse } from 'node:path'; +import { readFile } from 'node:fs/promises'; import { NoStatsForViteDevError } from 'storybook/internal/server-errors'; import type { Middleware, Options } from 'storybook/internal/types'; @@ -61,15 +60,6 @@ export const start: ViteBuilder['start'] = async ({ }) => { server = await createViteServer(options as Options, devServer); - const previewResolvedDir = join(corePath, 'dist/preview'); - router.use( - '/sb-preview', - sirv(previewResolvedDir, { - maxAge: 300000, - dev: true, - immutable: true, - }) - ); router.use(iframeMiddleware(options as Options, server)); router.use(server.middlewares); @@ -85,22 +75,5 @@ export const start: ViteBuilder['start'] = async ({ }; export const build: ViteBuilder['build'] = async ({ options }) => { - const viteCompilation = viteBuild(options as Options); - - const previewResolvedDir = join(corePath, 'dist/preview'); - const previewDirTarget = join(options.outputDir || '', `sb-preview`); - const previewFiles = cp(previewResolvedDir, previewDirTarget, { - filter: (src) => { - const { ext } = parse(src); - if (ext) { - return ext === '.js'; - } - return true; - }, - recursive: true, - }); - - const [out] = await Promise.all([viteCompilation, previewFiles]); - - return out; + return viteBuild(options as Options); }; diff --git a/code/builders/builder-vite/src/vite-server.ts b/code/builders/builder-vite/src/vite-server.ts index ff235aa93833..e61cd63636f0 100644 --- a/code/builders/builder-vite/src/vite-server.ts +++ b/code/builders/builder-vite/src/vite-server.ts @@ -14,8 +14,6 @@ export async function createViteServer(options: Options, devServer: Server) { const config = { ...commonCfg, - // Needed in Vite 5: https://github.com/storybookjs/storybook/issues/25256 - assetsInclude: getAssetsInclude(commonCfg, ['/sb-preview/**']), // Set up dev server server: { middlewareMode: true, diff --git a/code/core/package.json b/code/core/package.json index 760e0cb51d04..b0500fe0f943 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -167,6 +167,12 @@ "import": "./dist/cli/bin/index.js", "require": "./dist/cli/bin/index.cjs" }, + "./preview/runtime": { + "import": "./dist/preview/runtime.js" + }, + "./manager/globals-runtime": { + "import": "./dist/manager/globals-runtime.js" + }, "./package.json": "./package.json" }, "main": "dist/index.cjs", @@ -192,15 +198,6 @@ "core-server": [ "./dist/core-server/index.d.ts" ], - "core-server/presets/common-preset": [ - "./dist/core-server/presets/common-preset.d.ts" - ], - "core-server/presets/common-manager": [ - "./dist/core-server/presets/common-manager.d.ts" - ], - "core-server/presets/common-override-preset": [ - "./dist/core-server/presets/common-override-preset.d.ts" - ], "core-events": [ "./dist/core-events/index.d.ts" ], diff --git a/code/core/scripts/helpers/generatePackageJsonFile.ts b/code/core/scripts/helpers/generatePackageJsonFile.ts index 271f775cba23..c805fe6294a2 100644 --- a/code/core/scripts/helpers/generatePackageJsonFile.ts +++ b/code/core/scripts/helpers/generatePackageJsonFile.ts @@ -58,6 +58,10 @@ export async function generatePackageJsonFile(entries: ReturnType>((acc, entry) => { + if (!entry.dts) { + return acc; + } + let main = slash(relative(cwd, entry.file).replace('src', 'dist')); if (main === './dist/index.ts' || main === './dist/index.tsx') { main = '.'; diff --git a/code/core/scripts/prep.ts b/code/core/scripts/prep.ts index 4d81c65b1d7e..895b8f049d32 100644 --- a/code/core/scripts/prep.ts +++ b/code/core/scripts/prep.ts @@ -59,7 +59,7 @@ async function run() { console.log(isWatch ? 'Watching...' : 'Bundling...'); const files = measure(generateSourceFiles); - const packageJson = measure(() => generatePackageJsonFile(entries)); + const packageJson = measure(() => generatePackageJsonFile(entries.concat(bundles))); const dist = files.then(() => measure(generateDistFiles)); const types = files.then(() => measure(async () => { diff --git a/code/core/src/preview/runtime.ts b/code/core/src/preview/runtime.ts index 45ca3083ae6b..dd437d7b57e1 100644 --- a/code/core/src/preview/runtime.ts +++ b/code/core/src/preview/runtime.ts @@ -6,25 +6,35 @@ import { globalPackages, globalsNameReferenceMap } from './globals/globals'; import { globalsNameValueMap } from './globals/runtime'; import { prepareForTelemetry } from './utils'; -// Apply all the globals -globalPackages.forEach((key) => { - (global as any)[globalsNameReferenceMap[key]] = globalsNameValueMap[key]; -}); - -global.sendTelemetryError = (error: any) => { - const channel = global.__STORYBOOK_ADDONS_CHANNEL__; - channel.emit(TELEMETRY_ERROR, prepareForTelemetry(error)); -}; - -// handle all uncaught StorybookError at the root of the application and log to telemetry if applicable -global.addEventListener('error', (args: any) => { +function errorListener(args: any) { const error = args.error || args; if (error.fromStorybook) { global.sendTelemetryError(error); } -}); -global.addEventListener('unhandledrejection', ({ reason }: any) => { +} + +function unhandledRejectionListener({ reason }: any) { if (reason.fromStorybook) { global.sendTelemetryError(reason); } -}); +} + +export function setup() { + // Apply all the globals + globalPackages.forEach((key) => { + (global as any)[globalsNameReferenceMap[key]] = globalsNameValueMap[key]; + }); + + global.sendTelemetryError = (error: any) => { + const channel = global.__STORYBOOK_ADDONS_CHANNEL__; + channel.emit(TELEMETRY_ERROR, prepareForTelemetry(error)); + }; + + // handle all uncaught StorybookError at the root of the application and log to telemetry if applicable + global.addEventListener('error', errorListener); + global.addEventListener('unhandledrejection', unhandledRejectionListener); +} + +// TODO: In the future, remove this call to make the module side-effect free +// when the webpack builder also imports this as a regular file +setup(); diff --git a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts index f87f8b9792d5..2f3c13b59897 100644 --- a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts +++ b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts @@ -25,8 +25,7 @@ export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise< const { createFilter } = await import('vite'); // exclude stories, virtual modules and storybook internals - const exclude = - /\.stories\.(ts|tsx|js|jsx)$|^\0\/virtual:|^\/virtual:|^\/sb-preview\/|\.storybook\/.*\.(ts|js)$/; + const exclude = /\.stories\.(ts|tsx|js|jsx)$|^\0\/virtual:|^\/virtual:|\.storybook\/.*\.(ts|js)$/; const include = /\.(vue|ts|js|tsx|jsx)$/; const filter = createFilter(include, exclude); diff --git a/code/lib/cli/core/manager/globals-runtime.js b/code/lib/cli/core/manager/globals-runtime.js new file mode 100644 index 000000000000..5b5c33945b1a --- /dev/null +++ b/code/lib/cli/core/manager/globals-runtime.js @@ -0,0 +1 @@ +export * from '@storybook/core/manager/globals-runtime'; diff --git a/code/lib/cli/core/preview/runtime.js b/code/lib/cli/core/preview/runtime.js new file mode 100644 index 000000000000..612f0116dc32 --- /dev/null +++ b/code/lib/cli/core/preview/runtime.js @@ -0,0 +1 @@ +export * from '@storybook/core/preview/runtime'; diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 6c40c9e80bfe..b5b450900fee 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -187,6 +187,12 @@ "types": "./core/babel/index.d.ts", "import": "./core/babel/index.js", "require": "./core/babel/index.cjs" + }, + "./internal/manager/globals-runtime": { + "import": "./core/manager/globals-runtime.js" + }, + "./internal/preview/runtime": { + "import": "./core/preview/runtime.js" } }, "main": "dist/index.cjs", @@ -227,15 +233,6 @@ "internal/core-server": [ "./core/core-server/index.d.ts" ], - "internal/core-server/presets/common-manager": [ - "./core/core-server/presets/common-manager.d.ts" - ], - "internal/core-server/presets/common-override-preset": [ - "./core/core-server/presets/common-override-preset.d.ts" - ], - "internal/core-server/presets/common-preset": [ - "./core/core-server/presets/common-preset.d.ts" - ], "internal/csf-tools": [ "./core/csf-tools/index.d.ts" ],