diff --git a/code/.storybook/storybook.setup.ts b/code/.storybook/storybook.setup.ts index 1be658970e2f..dd085695f814 100644 --- a/code/.storybook/storybook.setup.ts +++ b/code/.storybook/storybook.setup.ts @@ -3,7 +3,6 @@ import { beforeAll, vi, expect as vitestExpect } from 'vitest'; import { setProjectAnnotations } from '@storybook/react'; import { userEvent as storybookEvent, expect as storybookExpect } from '@storybook/test'; -// eslint-disable-next-line import/namespace import * as testAnnotations from '@storybook/experimental-addon-test/preview'; import * as coreAnnotations from '../addons/toolbars/template/stories/preview'; diff --git a/code/addons/a11y/manager.js b/code/addons/a11y/manager.js deleted file mode 100644 index 8a2eae4ffce1..000000000000 --- a/code/addons/a11y/manager.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/manager'; diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 6778d0861c0a..14040b81d7da 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -25,23 +25,20 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", - "import": "./dist/preview.mjs", - "require": "./dist/preview.js" + "default": "./dist/preview.js" }, "./manager": "./dist/manager.js", "./register": "./dist/manager.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/a11y/preview.js b/code/addons/a11y/preview.js deleted file mode 100644 index 8de14d30fdfa..000000000000 --- a/code/addons/a11y/preview.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/preview'; diff --git a/code/addons/actions/manager.js b/code/addons/actions/manager.js deleted file mode 100644 index 8a2eae4ffce1..000000000000 --- a/code/addons/actions/manager.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/manager'; diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 67b279ecabbb..065819ae3f97 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -21,29 +21,25 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./decorator": { "types": "./dist/decorator.d.ts", - "import": "./dist/decorator.mjs", - "require": "./dist/decorator.js" + "default": "./dist/decorator.js" }, "./preview": { "types": "./dist/preview.d.ts", - "import": "./dist/preview.mjs", - "require": "./dist/preview.js" + "default": "./dist/preview.js" }, "./manager": "./dist/manager.js", "./register.js": "./dist/manager.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", - "react-native": "dist/index.mjs", + "react-native": "dist/index.js", "types": "dist/index.d.ts", "typesVersions": { "*": { diff --git a/code/addons/actions/preview.js b/code/addons/actions/preview.js deleted file mode 100644 index 49ad602f79f4..000000000000 --- a/code/addons/actions/preview.js +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/preview'; diff --git a/code/addons/backgrounds/manager.js b/code/addons/backgrounds/manager.js deleted file mode 100644 index 8a2eae4ffce1..000000000000 --- a/code/addons/backgrounds/manager.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/manager'; diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 88efc39f5274..8894f5bb12c0 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -25,23 +25,20 @@ }, "license": "MIT", "author": "jbaxleyiii", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", - "import": "./dist/preview.mjs", - "require": "./dist/preview.js" + "default": "./dist/preview.js" }, "./manager": "./dist/manager.js", "./register": "./dist/manager.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/backgrounds/preview.js b/code/addons/backgrounds/preview.js deleted file mode 100644 index 49ad602f79f4..000000000000 --- a/code/addons/backgrounds/preview.js +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/preview'; diff --git a/code/addons/controls/manager.js b/code/addons/controls/manager.js deleted file mode 100644 index 8a2eae4ffce1..000000000000 --- a/code/addons/controls/manager.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/manager'; diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index d3ac60cd2e9a..c2df12e1bb49 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -25,18 +25,16 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./manager": "./dist/manager.js", "./register": "./dist/manager.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 7afd2cad5060..0af39a0e2ba7 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -24,45 +24,27 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", - "import": "./dist/preview.mjs", - "require": "./dist/preview.js" + "default": "./dist/preview.js" }, "./preset": { "types": "./dist/preset.d.ts", - "import": "./dist/preset.js", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./blocks": { "types": "./dist/blocks.d.ts", - "import": "./dist/blocks.mjs", - "require": "./dist/blocks.js" - }, - "./dist/preview": { - "types": "./dist/preview.d.ts", - "import": "./dist/preview.mjs", - "require": "./dist/preview.js" - }, - "./dist/preset": { - "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" - }, - "./dist/shims/mdx-react-shim": { - "types": "./dist/shims/mdx-react-shim.d.ts", - "import": "./dist/shims/mdx-react-shim.mjs", - "require": "./dist/shims/mdx-react-shim.js" + "default": "./dist/blocks.js" }, "./mdx-react-shim": { "types": "./dist/shims/mdx-react-shim.d.ts", - "import": "./dist/shims/mdx-react-shim.mjs", - "require": "./dist/shims/mdx-react-shim.js" + "default": "./dist/shims/mdx-react-shim.js" }, "./mdx-loader": "./dist/mdx-loader.js", "./svelte/HOC.svelte": "./svelte/HOC.svelte", @@ -73,8 +55,6 @@ "./web-components/index.js": "./web-components/index.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -94,7 +74,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@mdx-js/react": "^3.0.0", @@ -123,12 +103,16 @@ "access": "public" }, "bundler": { - "entries": [ + "previewEntries": [ + "./src/preview.ts" + ], + "exportEntries": [ "./src/index.ts", - "./src/preset.ts", - "./src/preview.ts", "./src/blocks.ts", - "./src/shims/mdx-react-shim.ts", + "./src/shims/mdx-react-shim.ts" + ], + "nodeEntries": [ + "./src/preset.ts", "./src/mdx-loader.ts" ] }, diff --git a/code/addons/docs/preset.js b/code/addons/docs/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/addons/docs/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/addons/docs/preview.js b/code/addons/docs/preview.js deleted file mode 100644 index 49ad602f79f4..000000000000 --- a/code/addons/docs/preview.js +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/preview'; diff --git a/code/addons/docs/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts index 40d8e88c3f3a..99aa187fae5e 100644 --- a/code/addons/docs/src/plugins/mdx-plugin.ts +++ b/code/addons/docs/src/plugins/mdx-plugin.ts @@ -1,4 +1,5 @@ import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { Options } from 'storybook/internal/types'; @@ -35,9 +36,8 @@ export async function mdxPlugin(options: Options): Promise { const mdxLoaderOptions: CompileOptions = await presets.apply('mdxLoaderOptions', { ...mdxPluginOptions, mdxCompileOptions: { - providerImportSource: join( - dirname(require.resolve('@storybook/addon-docs/package.json')), - '/dist/shims/mdx-react-shim.mjs' + providerImportSource: fileURLToPath( + import.meta.resolve('@storybook/addon-docs/mdx-react-shim') ), ...mdxPluginOptions?.mdxCompileOptions, rehypePlugins: [ diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index e418b5e2e8aa..b3513df81044 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -1,4 +1,5 @@ import { dirname, isAbsolute, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import { logger } from 'storybook/internal/node-logger'; import type { DocsOptions, Options, PresetProperty } from 'storybook/internal/types'; @@ -18,14 +19,16 @@ const getResolvedReact = async (options: Options) => { const resolvedReact = (await options.presets.apply('resolvedReact', {})) as any; // resolvedReact should always be set by the time we get here, but just in case, we'll default to addon-docs's react dependencies return { - react: resolvedReact.react ?? dirname(require.resolve('react/package.json')), - reactDom: resolvedReact.reactDom ?? dirname(require.resolve('react-dom/package.json')), + react: resolvedReact.react ?? dirname(fileURLToPath(import.meta.resolve('react/package.json'))), + reactDom: + resolvedReact.reactDom ?? + dirname(fileURLToPath(import.meta.resolve('react-dom/package.json'))), // In Webpack, symlinked MDX files will cause @mdx-js/react to not be resolvable if it is not hoisted // This happens for the SB monorepo's template stories when a sandbox has a different react version than // addon-docs, causing addon-docs's dependencies not to be hoisted. // This might also affect regular users who have a similar setup. // Explicitly alias @mdx-js/react to avoid this issue. - mdx: resolvedReact.mdx ?? dirname(require.resolve('@mdx-js/react')), + mdx: resolvedReact.mdx ?? fileURLToPath(import.meta.resolve('@mdx-js/react')), }; }; @@ -45,9 +48,8 @@ async function webpack( const mdxLoaderOptions: CompileOptions = await options.presets.apply('mdxLoaderOptions', { ...mdxPluginOptions, mdxCompileOptions: { - providerImportSource: join( - dirname(require.resolve('@storybook/addon-docs/package.json')), - '/dist/shims/mdx-react-shim.mjs' + providerImportSource: fileURLToPath( + import.meta.resolve('@storybook/addon-docs/mdx-react-shim') ), ...mdxPluginOptions.mdxCompileOptions, rehypePlugins: [ @@ -73,12 +75,12 @@ async function webpack( * In the future the `@storybook/theming` and `@storybook/components` can be removed, as they * should be singletons in the future due to the peerDependency on `storybook` package. */ - const cliPath = dirname(require.resolve('storybook/package.json')); + const cliPath = dirname(fileURLToPath(import.meta.resolve('storybook/package.json'))); const themingPath = join(cliPath, 'core', 'theming', 'index.js'); const themingCreatePath = join(cliPath, 'core', 'theming', 'create.js'); const componentsPath = join(cliPath, 'core', 'components', 'index.js'); - const blocksPath = dirname(require.resolve('@storybook/blocks/package.json')); + const blocksPath = fileURLToPath(import.meta.resolve('@storybook/blocks')); if (Array.isArray(webpackConfig.resolve?.alias)) { alias = [...webpackConfig.resolve?.alias]; alias.push( @@ -147,7 +149,7 @@ async function webpack( exclude: /(stories|story)\.mdx$/, use: [ { - loader: require.resolve('./mdx-loader'), + loader: fileURLToPath(import.meta.resolve('@storybook/addon-docs/mdx-loader')), options: mdxLoaderOptions, }, ], @@ -168,7 +170,7 @@ const docs = (docsOptions: DocsOptions) => { }; export const addons: PresetProperty<'addons'> = [ - require.resolve('@storybook/react-dom-shim/dist/preset'), + fileURLToPath(import.meta.resolve('@storybook/react-dom-shim/preset')), ]; export const viteFinal = async (config: any, options: Options) => { @@ -178,11 +180,11 @@ export const viteFinal = async (config: any, options: Options) => { // Use the resolvedReact preset to alias react and react-dom to either the users version or the version shipped with addon-docs const { react, reactDom, mdx } = await getResolvedReact(options); - const cliPath = dirname(require.resolve('storybook/package.json')); + const cliPath = dirname(fileURLToPath(import.meta.resolve('storybook/package.json'))); const themingPath = join(cliPath, 'core', 'theming', 'index.js'); const themingCreatePath = join(cliPath, 'core', 'theming', 'create.js'); const componentsPath = join(cliPath, 'core', 'components', 'index.js'); - const blocksPath = dirname(require.resolve('@storybook/blocks/package.json')); + const blocksPath = dirname(fileURLToPath(import.meta.resolve('@storybook/blocks/package.json'))); const packageDeduplicationPlugin = { name: 'storybook:package-deduplication', @@ -236,16 +238,17 @@ const docsX = docs as any; * is always a resolved react. */ export const resolvedReact = async (existing: any) => ({ - react: existing?.react ?? dirname(require.resolve('react/package.json')), - reactDom: existing?.reactDom ?? dirname(require.resolve('react-dom/package.json')), - mdx: existing?.mdx ?? dirname(require.resolve('@mdx-js/react')), + react: existing?.react ?? dirname(fileURLToPath(import.meta.resolve('react/package.json'))), + reactDom: + existing?.reactDom ?? dirname(fileURLToPath(import.meta.resolve('react-dom/package.json'))), + mdx: existing?.mdx ?? fileURLToPath(import.meta.resolve('@mdx-js/react')), }); const optimizeViteDeps = [ '@mdx-js/react', '@storybook/addon-docs > acorn-jsx', '@storybook/addon-docs', - '@storybook/addon-essentials/docs/mdx-react-shim', + '@storybook/addon-docs/mdx-react-shim', 'markdown-to-jsx', ]; diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 9b283c80c205..84e7348f6027 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -21,60 +21,51 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./actions/preview": { "types": "./dist/actions/preview.d.ts", - "import": "./dist/actions/preview.mjs", - "require": "./dist/actions/preview.js" + "default": "./dist/actions/preview.js" }, "./actions/manager": "./dist/actions/manager.js", "./backgrounds/preview": { "types": "./dist/backgrounds/preview.d.ts", - "import": "./dist/backgrounds/preview.mjs", - "require": "./dist/backgrounds/preview.js" + "default": "./dist/backgrounds/preview.js" }, "./backgrounds/manager": "./dist/backgrounds/manager.js", "./controls/manager": "./dist/controls/manager.js", "./docs/preview": { "types": "./dist/docs/preview.d.ts", - "import": "./dist/docs/preview.mjs", - "require": "./dist/docs/preview.js" + "default": "./dist/docs/preview.js" }, "./docs/preset": "./dist/docs/preset.js", "./docs/mdx-react-shim": "./dist/docs/mdx-react-shim.js", "./highlight/preview": { "types": "./dist/highlight/preview.d.ts", - "import": "./dist/highlight/preview.mjs", - "require": "./dist/highlight/preview.js" + "default": "./dist/highlight/preview.js" }, "./measure/preview": { "types": "./dist/measure/preview.d.ts", - "import": "./dist/measure/preview.mjs", - "require": "./dist/measure/preview.js" + "default": "./dist/measure/preview.js" }, "./measure/manager": "./dist/measure/manager.js", "./outline/preview": { "types": "./dist/outline/preview.d.ts", - "import": "./dist/outline/preview.mjs", - "require": "./dist/outline/preview.js" + "default": "./dist/outline/preview.js" }, "./outline/manager": "./dist/outline/manager.js", "./toolbars/manager": "./dist/toolbars/manager.js", "./viewport/manager": "./dist/viewport/manager.js", "./viewport/preview": { "types": "./dist/viewport/preview.d.ts", - "import": "./dist/viewport/preview.mjs", - "require": "./dist/viewport/preview.js" + "default": "./dist/viewport/preview.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/essentials/src/backgrounds/preview.ts b/code/addons/essentials/src/backgrounds/preview.ts index cf24112788f3..2d01bf61bb6a 100644 --- a/code/addons/essentials/src/backgrounds/preview.ts +++ b/code/addons/essentials/src/backgrounds/preview.ts @@ -1,2 +1 @@ -// @ts-expect-error (no types needed for this) export * from '@storybook/addon-backgrounds/preview'; diff --git a/code/addons/essentials/src/docs/mdx-react-shim.ts b/code/addons/essentials/src/docs/mdx-react-shim.ts index cd32a7670059..e80d98275354 100644 --- a/code/addons/essentials/src/docs/mdx-react-shim.ts +++ b/code/addons/essentials/src/docs/mdx-react-shim.ts @@ -1 +1 @@ -export * from '@storybook/addon-docs/dist/shims/mdx-react-shim'; +export * from '@storybook/addon-docs/mdx-react-shim'; diff --git a/code/addons/essentials/src/docs/preset.ts b/code/addons/essentials/src/docs/preset.ts index 1d6ed6fbbc54..a42d636d9184 100644 --- a/code/addons/essentials/src/docs/preset.ts +++ b/code/addons/essentials/src/docs/preset.ts @@ -1,11 +1,10 @@ -import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; -export * from '@storybook/addon-docs/dist/preset'; +export * from '@storybook/addon-docs/preset'; export const mdxLoaderOptions = async (config: any) => { - config.mdxCompileOptions.providerImportSource = join( - dirname(require.resolve('@storybook/addon-docs/package.json')), - '/dist/shims/mdx-react-shim.mjs' + config.mdxCompileOptions.providerImportSource = fileURLToPath( + import.meta.resolve('@storybook/addon-docs/mdx-react-shim') ); return config; }; diff --git a/code/addons/essentials/src/docs/preview.ts b/code/addons/essentials/src/docs/preview.ts index 176a03c1f83f..68ad94fc557c 100644 --- a/code/addons/essentials/src/docs/preview.ts +++ b/code/addons/essentials/src/docs/preview.ts @@ -1 +1 @@ -export * from '@storybook/addon-docs/dist/preview'; +export * from '@storybook/addon-docs/preview'; diff --git a/code/addons/essentials/src/highlight/preview.ts b/code/addons/essentials/src/highlight/preview.ts index e124e7a1374a..c57b34aafd63 100644 --- a/code/addons/essentials/src/highlight/preview.ts +++ b/code/addons/essentials/src/highlight/preview.ts @@ -1,2 +1 @@ -// @ts-expect-error (no types needed for this) export * from '@storybook/addon-highlight/preview'; diff --git a/code/addons/essentials/src/outline/preview.ts b/code/addons/essentials/src/outline/preview.ts index 3fe09381fe8f..16cc2faa0397 100644 --- a/code/addons/essentials/src/outline/preview.ts +++ b/code/addons/essentials/src/outline/preview.ts @@ -1,2 +1 @@ -// @ts-expect-error (no types needed for this) export * from '@storybook/addon-outline/preview'; diff --git a/code/addons/essentials/src/viewport/preview.ts b/code/addons/essentials/src/viewport/preview.ts index 34ee7de45614..b039b3bfa870 100644 --- a/code/addons/essentials/src/viewport/preview.ts +++ b/code/addons/essentials/src/viewport/preview.ts @@ -1,2 +1 @@ -// @ts-expect-error (no types needed for this) export * from '@storybook/addon-viewport/preview'; diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 2173b1668d4e..72234d751ae4 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -24,13 +24,12 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": "./dist/index.js", "./preset": "./dist/index.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/gfm/preset.js b/code/addons/gfm/preset.js deleted file mode 100644 index f4f0e998846b..000000000000 --- a/code/addons/gfm/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/index'); diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 75ff5c752a4f..a5a7ae51ab5a 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -23,21 +23,18 @@ }, "license": "MIT", "author": "winkerVSbecks", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", - "import": "./dist/preview.mjs", - "require": "./dist/preview.js" + "default": "./dist/preview.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/highlight/preview.js b/code/addons/highlight/preview.js deleted file mode 100644 index 49ad602f79f4..000000000000 --- a/code/addons/highlight/preview.js +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/preview'; diff --git a/code/addons/interactions/manager.js b/code/addons/interactions/manager.js deleted file mode 100644 index 8a2eae4ffce1..000000000000 --- a/code/addons/interactions/manager.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/manager'; diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index ab7b4960afae..61ac2d73685e 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -21,24 +21,21 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", - "import": "./dist/preview.mjs", - "require": "./dist/preview.js" + "default": "./dist/preview.js" }, "./manager": "./dist/manager.js", "./preset": "./dist/preset.js", "./register.js": "./dist/manager.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/interactions/preset.js b/code/addons/interactions/preset.js deleted file mode 100644 index e538669369e9..000000000000 --- a/code/addons/interactions/preset.js +++ /dev/null @@ -1,10 +0,0 @@ -const { checkActionsLoaded } = require('./dist/preset'); - -function previewAnnotations(entry = [], options) { - checkActionsLoaded(options.configDir); - return entry; -} - -module.exports = { - previewAnnotations, -}; diff --git a/code/addons/interactions/preview.js b/code/addons/interactions/preview.js deleted file mode 100644 index 49ad602f79f4..000000000000 --- a/code/addons/interactions/preview.js +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/preview'; diff --git a/code/addons/jest/manager.js b/code/addons/jest/manager.js deleted file mode 100644 index 8a2eae4ffce1..000000000000 --- a/code/addons/jest/manager.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/manager'; diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index a1bce0f4ccae..c157ab414528 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -27,18 +27,15 @@ }, "license": "MIT", "author": "Renaud Tertrais (https://github.com/renaudtertrais)", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./manager": "./dist/manager.js", - "./register": "./dist/manager.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/links/manager.js b/code/addons/links/manager.js deleted file mode 100644 index 8a2eae4ffce1..000000000000 --- a/code/addons/links/manager.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/manager'; diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 15ed93400ad6..564355aa85c5 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -20,28 +20,24 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./react": { "types": "./dist/react/index.d.ts", - "import": "./dist/react/index.mjs", - "require": "./dist/react/index.js" + "default": "./dist/react/index.js" }, "./preview": { "types": "./dist/preview.d.ts", - "import": "./dist/preview.mjs", - "require": "./dist/preview.js" + "default": "./dist/preview.js" }, "./manager": "./dist/manager.js", "./register": "./dist/manager.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "typesVersions": { "*": { diff --git a/code/addons/links/preview.js b/code/addons/links/preview.js deleted file mode 100644 index 49ad602f79f4..000000000000 --- a/code/addons/links/preview.js +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/preview'; diff --git a/code/addons/links/react.d.ts b/code/addons/links/react.d.ts deleted file mode 100644 index 2d72882f8543..000000000000 --- a/code/addons/links/react.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/react/index'; diff --git a/code/addons/links/react.js b/code/addons/links/react.js deleted file mode 100644 index 7cbaa73010c1..000000000000 --- a/code/addons/links/react.js +++ /dev/null @@ -1,3 +0,0 @@ -import LinkTo from './dist/react/index'; - -export default LinkTo; diff --git a/code/addons/measure/manager.js b/code/addons/measure/manager.js deleted file mode 100644 index 8a2eae4ffce1..000000000000 --- a/code/addons/measure/manager.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/manager'; diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index b0b6a2f0dd9a..e39b83c0c824 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -24,23 +24,20 @@ }, "license": "MIT", "author": "winkerVSbecks", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", - "import": "./dist/preview.mjs", - "require": "./dist/preview.js" + "default": "./dist/preview.js" }, "./manager": "./dist/manager.js", "./register": "./dist/manager.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "typesVersions": { "*": { diff --git a/code/addons/measure/preview.js b/code/addons/measure/preview.js deleted file mode 100644 index 49ad602f79f4..000000000000 --- a/code/addons/measure/preview.js +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/preview'; diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index c651f5bcd89a..fede5fdedee9 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -20,18 +20,16 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./manager": "./dist/manager.js", "./preset": "./dist/preset.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/onboarding/preset.js b/code/addons/onboarding/preset.js deleted file mode 100644 index 87f1602c2f26..000000000000 --- a/code/addons/onboarding/preset.js +++ /dev/null @@ -1,8 +0,0 @@ -function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/manager.js')]; -} - -module.exports = { - managerEntries, - ...require('./dist/preset'), -}; diff --git a/code/addons/onboarding/src/preset.ts b/code/addons/onboarding/src/preset.ts index f93b16235bfd..e09ddd387f0e 100644 --- a/code/addons/onboarding/src/preset.ts +++ b/code/addons/onboarding/src/preset.ts @@ -17,7 +17,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti const { disableTelemetry } = await options.presets.apply('core', {}); if (!disableTelemetry) { - const packageJsonPath = require.resolve('@storybook/addon-onboarding/package.json'); + const packageJsonPath = import.meta.resolve('@storybook/addon-onboarding/package.json'); const { version: addonVersion } = JSON.parse( readFileSync(packageJsonPath, { encoding: 'utf-8' }) diff --git a/code/addons/outline/manager.js b/code/addons/outline/manager.js deleted file mode 100644 index 8a2eae4ffce1..000000000000 --- a/code/addons/outline/manager.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/manager'; diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 3eeaf3641fd8..267aff0e2c6b 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -27,23 +27,20 @@ }, "license": "MIT", "author": "winkerVSbecks", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", - "import": "./dist/preview.mjs", - "require": "./dist/preview.js" + "default": "./dist/preview.js" }, "./manager": "./dist/manager.js", "./register": "./dist/manager.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/outline/preview.js b/code/addons/outline/preview.js deleted file mode 100644 index 49ad602f79f4..000000000000 --- a/code/addons/outline/preview.js +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/preview'; diff --git a/code/addons/storysource/manager.js b/code/addons/storysource/manager.js deleted file mode 100644 index 8a2eae4ffce1..000000000000 --- a/code/addons/storysource/manager.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/manager'; diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index b8fafb013f8e..ffd8891e8b4e 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -21,18 +21,16 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": "./dist/preset.js", "./manager": "./dist/manager.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/storysource/preset.js b/code/addons/storysource/preset.js deleted file mode 100644 index b120250981f9..000000000000 --- a/code/addons/storysource/preset.js +++ /dev/null @@ -1 +0,0 @@ -require('./dist/preset'); diff --git a/code/addons/storysource/src/preset.ts b/code/addons/storysource/src/preset.ts index 073e5a427a42..56b854044909 100644 --- a/code/addons/storysource/src/preset.ts +++ b/code/addons/storysource/src/preset.ts @@ -1,4 +1,5 @@ /// +import { fileURLToPath } from 'url'; function webpack( webpackConfig = { module: { rules: [] as Array } }, @@ -18,7 +19,7 @@ function webpack( ...rule, use: [ { - loader: require.resolve('@storybook/source-loader'), + loader: fileURLToPath(import.meta.resolve('@storybook/source-loader')), options: loaderOptions, }, ], diff --git a/code/addons/test/package.json b/code/addons/test/package.json index ebae8b47baa4..fc52bc1dcb3e 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -23,50 +23,42 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./vitest-plugin": { "types": "./dist/vitest-plugin/index.d.ts", - "import": "./dist/vitest-plugin/index.mjs", - "require": "./dist/vitest-plugin/index.js" + "default": "./dist/vitest-plugin/index.js" }, "./internal/global-setup": { "types": "./dist/vitest-plugin/global-setup.d.ts", - "import": "./dist/vitest-plugin/global-setup.mjs", - "require": "./dist/vitest-plugin/global-setup.js" + "default": "./dist/vitest-plugin/global-setup.js" }, "./internal/setup-file": { "types": "./dist/vitest-plugin/setup-file.d.ts", - "import": "./dist/vitest-plugin/setup-file.mjs" + "default": "./dist/vitest-plugin/setup-file.js" }, "./internal/test-utils": { "types": "./dist/vitest-plugin/test-utils.d.ts", - "import": "./dist/vitest-plugin/test-utils.mjs", - "require": "./dist/vitest-plugin/test-utils.js" + "default": "./dist/vitest-plugin/test-utils.js" }, "./preview": { "types": "./dist/preview.d.ts", - "import": "./dist/preview.mjs", - "require": "./dist/preview.js" + "default": "./dist/preview.js" }, "./manager": "./dist/manager.js", "./preset": "./dist/preset.js", "./postinstall": "./dist/postinstall.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", "README.md", - "*.mjs", "*.js", - "*.cjs", "*.d.ts", "!src/**/*" ], diff --git a/code/addons/test/preset.cjs b/code/addons/test/preset.cjs deleted file mode 100644 index 4c4e36fbb3bb..000000000000 --- a/code/addons/test/preset.cjs +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - ...require('./dist/preset.cjs'), -}; diff --git a/code/addons/test/src/node/boot-test-runner.ts b/code/addons/test/src/node/boot-test-runner.ts index 6e7fe511947d..7bdd0b16f80c 100644 --- a/code/addons/test/src/node/boot-test-runner.ts +++ b/code/addons/test/src/node/boot-test-runner.ts @@ -21,7 +21,7 @@ const MAX_START_TIME = 30000; // This path is a bit confusing, but essentially `boot-test-runner` gets bundled into the preset bundle // which is at the root. Then, from the root, we want to load `node/vitest.mjs` -const vitestModulePath = join(__dirname, 'node', 'vitest.mjs'); +const vitestModulePath = join(__dirname, 'node', 'vitest.js'); let child: null | ChildProcess; let ready = false; diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts index e179b42fa1d2..9cb262dee5ac 100644 --- a/code/addons/test/src/postinstall.ts +++ b/code/addons/test/src/postinstall.ts @@ -3,6 +3,7 @@ import * as fs from 'node:fs/promises'; import { writeFile } from 'node:fs/promises'; import { dirname, join, relative } from 'node:path'; import * as path from 'node:path'; +import { fileURLToPath } from 'node:url'; import { JsPackageManagerFactory, @@ -455,7 +456,9 @@ async function getStorybookInfo({ configDir, packageManager: pkgMgr }: Postinsta const presets = await loadAllPresets({ corePresets: [join(frameworkName, 'preset')], overridePresets: [ - require.resolve('@storybook/core/core-server/presets/common-override-preset'), + fileURLToPath( + import.meta.resolve('@storybook/core/core-server/presets/common-override-preset') + ), ], configDir, packageJson, diff --git a/code/addons/themes/manager.js b/code/addons/themes/manager.js deleted file mode 100644 index 8a2eae4ffce1..000000000000 --- a/code/addons/themes/manager.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/manager'; diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 755ce85e0961..6de8e342271d 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -26,23 +26,20 @@ }, "license": "MIT", "author": "Shaun Evening", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", - "import": "./dist/preview.mjs", - "require": "./dist/preview.js" + "default": "./dist/preview.js" }, "./manager": "./dist/manager.js", "./package.json": "./package.json", "./postinstall": "./postinstall.js" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/themes/preview.js b/code/addons/themes/preview.js deleted file mode 100644 index 49ad602f79f4..000000000000 --- a/code/addons/themes/preview.js +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/preview'; diff --git a/code/addons/toolbars/manager.js b/code/addons/toolbars/manager.js deleted file mode 100644 index 8a2eae4ffce1..000000000000 --- a/code/addons/toolbars/manager.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/manager'; diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 9722203a5c6d..85a5ac428041 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -25,18 +25,16 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./manager": "./dist/manager.js", "./register": "./dist/manager.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/viewport/manager.js b/code/addons/viewport/manager.js deleted file mode 100644 index 8a2eae4ffce1..000000000000 --- a/code/addons/viewport/manager.js +++ /dev/null @@ -1 +0,0 @@ -import './dist/manager'; diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index d452503e0f13..6483855f33fc 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -22,22 +22,19 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", - "import": "./dist/preview.mjs", - "require": "./dist/preview.js" + "default": "./dist/preview.js" }, "./manager": "./dist/manager.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/addons/viewport/preview.js b/code/addons/viewport/preview.js deleted file mode 100644 index 49ad602f79f4..000000000000 --- a/code/addons/viewport/preview.js +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/preview'; diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index e2bd1a750d71..e0c281f43b1f 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -17,18 +17,15 @@ }, "license": "MIT", "author": "Eirik Sletteberg", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./input/iframe.html": "./input/iframe.html", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -40,7 +37,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/csf-plugin": "workspace:*", @@ -67,10 +64,9 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/builders/builder-vite/src/index.ts b/code/builders/builder-vite/src/index.ts index cf6cdad28f80..9597fc5235bc 100644 --- a/code/builders/builder-vite/src/index.ts +++ b/code/builders/builder-vite/src/index.ts @@ -1,6 +1,7 @@ // noinspection JSUnusedGlobalSymbols import { cp, readFile } from 'node:fs/promises'; import { join, parse } from 'node:path'; +import { fileURLToPath } from 'node:url'; import { NoStatsForViteDevError } from 'storybook/internal/server-errors'; import type { Middleware, Options } from 'storybook/internal/types'; @@ -34,9 +35,12 @@ function iframeMiddleware(options: Options, server: ViteDevServer): Middleware { return; } - const indexHtml = await readFile(require.resolve('@storybook/builder-vite/input/iframe.html'), { - encoding: 'utf8', - }); + const indexHtml = await readFile( + fileURLToPath(import.meta.resolve('@storybook/builder-vite/input/iframe.html')), + { + encoding: 'utf8', + } + ); const generated = await transformIframeHtml(indexHtml, options); const transformed = await server.transformIndexHtml('/iframe.html', generated); res.setHeader('Content-Type', 'text/html'); diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index cbade7a268a6..2784fc65fe9e 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -9,106 +9,106 @@ import { listStories } from './list-stories'; // It ensures that vite converts cjs deps into esm without vite having to find them during startup and then having to log a message about them and restart // TODO: Many of the deps might be prebundled now though, so probably worth trying to remove and see what happens const INCLUDE_CANDIDATES = [ - '@base2/pretty-print-object', - '@emotion/core', - '@emotion/is-prop-valid', - '@emotion/styled', - '@storybook/react > acorn-jsx', - '@storybook/react', - '@storybook/svelte', - '@storybook/vue3', - 'acorn-jsx', - 'acorn-walk', - 'acorn', - 'airbnb-js-shims', - 'ansi-to-html', - 'axe-core', - 'color-convert', - 'deep-object-diff', - 'doctrine', - 'emotion-theming', - 'escodegen', - 'estraverse', - 'fast-deep-equal', - 'html-tags', - 'isobject', - 'jsdoc-type-pratt-parser', // TODO: Remove this once it's converted to ESM: https://github.com/jsdoc-type-pratt-parser/jsdoc-type-pratt-parser/issues/173 - 'loader-utils', - 'lodash/camelCase.js', - 'lodash/camelCase', - 'lodash/cloneDeep.js', - 'lodash/cloneDeep', - 'lodash/countBy.js', - 'lodash/countBy', - 'lodash/debounce.js', - 'lodash/debounce', - 'lodash/isEqual.js', - 'lodash/isEqual', - 'lodash/isFunction.js', - 'lodash/isFunction', - 'lodash/isPlainObject.js', - 'lodash/isPlainObject', - 'lodash/isString.js', - 'lodash/isString', - 'lodash/kebabCase.js', - 'lodash/kebabCase', - 'lodash/mapKeys.js', - 'lodash/mapKeys', - 'lodash/mapValues.js', - 'lodash/mapValues', - 'lodash/merge.js', - 'lodash/merge', - 'lodash/mergeWith.js', - 'lodash/mergeWith', - 'lodash/pick.js', - 'lodash/pick', - 'lodash/pickBy.js', - 'lodash/pickBy', - 'lodash/startCase.js', - 'lodash/startCase', - 'lodash/throttle.js', - 'lodash/throttle', - 'lodash/uniq.js', - 'lodash/uniq', - 'lodash/upperFirst.js', - 'lodash/upperFirst', - 'memoizerific', - 'overlayscrollbars', - 'polished', - 'prettier/parser-babel', - 'prettier/parser-flow', - 'prettier/parser-typescript', - 'prop-types', - 'qs', - 'react-dom', - 'react-dom/client', - 'react-fast-compare', - 'react-is', - 'react-textarea-autosize', - 'react', - 'react/jsx-runtime', - 'refractor/core', - 'refractor/lang/bash.js', - 'refractor/lang/css.js', - 'refractor/lang/graphql.js', - 'refractor/lang/js-extras.js', - 'refractor/lang/json.js', - 'refractor/lang/jsx.js', - 'refractor/lang/markdown.js', - 'refractor/lang/markup.js', - 'refractor/lang/tsx.js', - 'refractor/lang/typescript.js', - 'refractor/lang/yaml.js', - 'regenerator-runtime/runtime.js', - 'slash', - 'store2', - 'synchronous-promise', - 'telejson', - 'ts-dedent', - 'unfetch', - 'util-deprecate', - 'vue', - 'warning', + // '@base2/pretty-print-object', + // '@emotion/core', + // '@emotion/is-prop-valid', + // '@emotion/styled', + // '@storybook/react > acorn-jsx', + // '@storybook/react', + // '@storybook/svelte', + // '@storybook/vue3', + // 'acorn-jsx', + // 'acorn-walk', + // 'acorn', + // 'airbnb-js-shims', + // 'ansi-to-html', + // 'axe-core', + // 'color-convert', + // 'deep-object-diff', + // 'doctrine', + // 'emotion-theming', + // 'escodegen', + // 'estraverse', + // 'fast-deep-equal', + // 'html-tags', + // 'isobject', + // 'jsdoc-type-pratt-parser', // TODO: Remove this once it's converted to ESM: https://github.com/jsdoc-type-pratt-parser/jsdoc-type-pratt-parser/issues/173 + // 'loader-utils', + // 'lodash/camelCase.js', + // 'lodash/camelCase', + // 'lodash/cloneDeep.js', + // 'lodash/cloneDeep', + // 'lodash/countBy.js', + // 'lodash/countBy', + // 'lodash/debounce.js', + // 'lodash/debounce', + // 'lodash/isEqual.js', + // 'lodash/isEqual', + // 'lodash/isFunction.js', + // 'lodash/isFunction', + // 'lodash/isPlainObject.js', + // 'lodash/isPlainObject', + // 'lodash/isString.js', + // 'lodash/isString', + // 'lodash/kebabCase.js', + // 'lodash/kebabCase', + // 'lodash/mapKeys.js', + // 'lodash/mapKeys', + // 'lodash/mapValues.js', + // 'lodash/mapValues', + // 'lodash/merge.js', + // 'lodash/merge', + // 'lodash/mergeWith.js', + // 'lodash/mergeWith', + // 'lodash/pick.js', + // 'lodash/pick', + // 'lodash/pickBy.js', + // 'lodash/pickBy', + // 'lodash/startCase.js', + // 'lodash/startCase', + // 'lodash/throttle.js', + // 'lodash/throttle', + // 'lodash/uniq.js', + // 'lodash/uniq', + // 'lodash/upperFirst.js', + // 'lodash/upperFirst', + // 'memoizerific', + // 'overlayscrollbars', + // 'polished', + // 'prettier/parser-babel', + // 'prettier/parser-flow', + // 'prettier/parser-typescript', + // 'prop-types', + // 'qs', + // 'react-dom', + // 'react-dom/client', + // 'react-fast-compare', + // 'react-is', + // 'react-textarea-autosize', + // 'react', + // 'react/jsx-runtime', + // 'refractor/core', + // 'refractor/lang/bash.js', + // 'refractor/lang/css.js', + // 'refractor/lang/graphql.js', + // 'refractor/lang/js-extras.js', + // 'refractor/lang/json.js', + // 'refractor/lang/jsx.js', + // 'refractor/lang/markdown.js', + // 'refractor/lang/markup.js', + // 'refractor/lang/tsx.js', + // 'refractor/lang/typescript.js', + // 'refractor/lang/yaml.js', + // 'regenerator-runtime/runtime.js', + // 'slash', + // 'store2', + // 'synchronous-promise', + // 'telejson', + // 'ts-dedent', + // 'unfetch', + // 'util-deprecate', + // 'vue', + // 'warning', ]; /** diff --git a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts index 79dba3844060..479b30a36c29 100644 --- a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts +++ b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts @@ -1,4 +1,5 @@ import { readFileSync } from 'node:fs'; +import { fileURLToPath } from 'node:url'; import type { Options } from 'storybook/internal/types'; @@ -11,7 +12,9 @@ import { transformIframeHtml } from '../transform-iframe-html'; import { SB_VIRTUAL_FILES, getResolvedVirtualModuleId } from '../virtual-file-names'; export function codeGeneratorPlugin(options: Options): Plugin { - const iframePath = require.resolve('@storybook/builder-vite/input/iframe.html'); + const iframePath = fileURLToPath( + import.meta.resolve('@storybook/builder-vite/input/iframe.html') + ); let iframeId: string; let projectRoot: string; @@ -100,7 +103,10 @@ export function codeGeneratorPlugin(options: Options): Plugin { } if (id === iframeId) { - return readFileSync(require.resolve('@storybook/builder-vite/input/iframe.html'), 'utf-8'); + return readFileSync( + fileURLToPath(import.meta.resolve('@storybook/builder-vite/input/iframe.html')), + 'utf-8' + ); } return undefined; diff --git a/code/builders/builder-vite/src/utils/process-preview-annotation.test.ts b/code/builders/builder-vite/src/utils/process-preview-annotation.test.ts index 3a01623919d5..991374df6a51 100644 --- a/code/builders/builder-vite/src/utils/process-preview-annotation.test.ts +++ b/code/builders/builder-vite/src/utils/process-preview-annotation.test.ts @@ -7,7 +7,7 @@ describe('processPreviewAnnotation()', () => { it('should pull the `bare` value from an object', () => { const annotation = { bare: '@storybook/addon-links/preview', - absolute: '/Users/foo/storybook/node_modules/@storybook/addon-links/dist/preview.mjs', + absolute: '/Users/foo/storybook/node_modules/@storybook/addon-links/dist/preview.js', }; const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/'); expect(url).toBe('@storybook/addon-links/preview'); diff --git a/code/builders/builder-vite/src/utils/process-preview-annotation.ts b/code/builders/builder-vite/src/utils/process-preview-annotation.ts index 7ff6f7a00081..43ccbdfc30f4 100644 --- a/code/builders/builder-vite/src/utils/process-preview-annotation.ts +++ b/code/builders/builder-vite/src/utils/process-preview-annotation.ts @@ -1,6 +1,5 @@ -import { isAbsolute, relative, resolve } from 'node:path'; +import { resolve } from 'node:path'; -import { stripAbsNodeModulesPath } from 'storybook/internal/common'; import type { PreviewAnnotation } from 'storybook/internal/types'; import slash from 'slash'; @@ -12,43 +11,14 @@ import slash from 'slash'; * source, we want URLs absolute relative to project root. */ export function processPreviewAnnotation(path: PreviewAnnotation | undefined, projectRoot: string) { - // If entry is an object, take the first, which is the - // bare (non-absolute) specifier. - // This is so that webpack can use an absolute path, and - // continue supporting super-addons in pnp/pnpm without - // requiring them to re-export their sub-addons as we do - // in addon-essentials. - if (typeof path === 'object') { - return path.bare; - } - - // This should not occur, since we use `.filter(Boolean)` prior to - // calling this function, but this makes typescript happy if (!path) { - throw new Error('Could not determine path for previewAnnotation'); - } - - // For addon dependencies that use require.resolve(), we need to convert to a bare path - // so that vite will process it as a dependency (cjs -> esm, etc). - // TODO: Evaluate if searching for node_modules in a yarn pnp environment is correct - if (path.includes('node_modules')) { - return stripAbsNodeModulesPath(path); - } - - // resolve absolute paths relative to project root - const relativePath = isAbsolute(path) ? slash(relative(projectRoot, path)) : path; - - // resolve relative paths into absolute urls - // note: this only works if vite's projectRoot === cwd. - if (relativePath.startsWith('./')) { - return slash(relativePath.replace(/^\.\//, '/')); + return; } - // If something is outside of root, convert to absolute. Uncommon? - if (relativePath.startsWith('../')) { - return slash(resolve(projectRoot, relativePath)); + if (path.startsWith('.')) { + const resolved = slash(resolve(path)); + return resolved; } - // At this point, it must be relative to the root but not start with a ./ or ../ - return slash(`/${relativePath}`); + return path; } diff --git a/code/builders/builder-vite/src/vite-config.test.ts b/code/builders/builder-vite/src/vite-config.test.ts index d88da0305397..d5e35a80a493 100644 --- a/code/builders/builder-vite/src/vite-config.test.ts +++ b/code/builders/builder-vite/src/vite-config.test.ts @@ -2,7 +2,6 @@ import { describe, expect, it, vi } from 'vitest'; import type { Options, Presets } from 'storybook/internal/types'; -// eslint-disable-next-line @typescript-eslint/no-restricted-imports import { loadConfigFromFile } from 'vite'; import { commonConfig } from './vite-config'; diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index c0ecb83a006b..27596e005bce 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -19,27 +19,23 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./presets/custom-webpack-preset": { "types": "./dist/presets/custom-webpack-preset.d.ts", - "node": "./dist/presets/custom-webpack-preset.js", - "require": "./dist/presets/custom-webpack-preset.js" + "default": "./dist/presets/custom-webpack-preset.js" }, "./presets/preview-preset": { "types": "./dist/presets/preview-preset.d.ts", - "node": "./dist/presets/preview-preset.js", - "require": "./dist/presets/preview-preset.js" + "default": "./dist/presets/preview-preset.js" }, "./loaders/export-order-loader": { "types": "./dist/loaders/export-order-loader.d.ts", - "node": "./dist/loaders/export-order-loader.js", - "require": "./dist/loaders/export-order-loader.js" + "default": "./dist/loaders/export-order-loader.js" }, "./templates/virtualModuleModernEntry.js": "./templates/virtualModuleModernEntry.js", "./templates/preview.ejs": "./templates/preview.ejs", @@ -47,8 +43,6 @@ "./templates/virtualModuleStory.template.js": "./templates/virtualModuleStory.template.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -60,7 +54,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", @@ -110,13 +104,12 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/presets/custom-webpack-preset.ts", "./src/presets/preview-preset.ts", "./src/loaders/export-order-loader.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/builders/builder-webpack5/src/index.ts b/code/builders/builder-webpack5/src/index.ts index 102b2784ad7e..c1778ac9dc5a 100644 --- a/code/builders/builder-webpack5/src/index.ts +++ b/code/builders/builder-webpack5/src/index.ts @@ -1,5 +1,6 @@ import { cp } from 'node:fs/promises'; import { join, parse } from 'node:path'; +import { fileURLToPath } from 'node:url'; import { PREVIEW_BUILDER_PROGRESS } from 'storybook/internal/core-events'; import { logger } from 'storybook/internal/node-logger'; @@ -15,7 +16,7 @@ import { checkWebpackVersion } from '@storybook/core-webpack'; import prettyTime from 'pretty-hrtime'; import sirv from 'sirv'; import type { Configuration, Stats, StatsOptions } from 'webpack'; -import webpack, { ProgressPlugin } from 'webpack'; +import webpack from 'webpack'; import webpackDevMiddleware from 'webpack-dev-middleware'; import webpackHotMiddleware from 'webpack-hot-middleware'; @@ -140,7 +141,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({ let totalModules: number; let value = 0; - new ProgressPlugin({ + new webpack.ProgressPlugin({ handler: (newValue, message, arg3) => { value = Math.max(newValue, value); // never go backwards const progress = { value, message: message.charAt(0).toUpperCase() + message.slice(1) }; @@ -331,5 +332,9 @@ export const build = async (options: BuilderStartOptions) => { return result.value; }; -export const corePresets = [join(__dirname, 'presets/preview-preset.js')]; -export const overridePresets = [join(__dirname, './presets/custom-webpack-preset.js')]; +export const corePresets = [ + fileURLToPath(import.meta.resolve('@storybook/builder-webpack5/presets/preview-preset')), +]; +export const overridePresets = [ + fileURLToPath(import.meta.resolve('@storybook/builder-webpack5/presets/custom-webpack-preset')), +]; diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 763f2bf15646..9d37aa683865 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -1,4 +1,5 @@ import { dirname, join, resolve } from 'node:path'; +import { fileURLToPath } from 'node:url'; import { getBuilderOptions, @@ -18,7 +19,7 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import TerserWebpackPlugin from 'terser-webpack-plugin'; import { dedent } from 'ts-dedent'; -import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack'; +import webpack from 'webpack'; import type { Configuration } from 'webpack'; import VirtualModulePlugin from 'webpack-virtual-modules'; @@ -193,14 +194,16 @@ export default async ( useShortDoctype: true, }, }), - new DefinePlugin({ + new webpack.DefinePlugin({ ...stringifyProcessEnvs(envs), NODE_ENV: JSON.stringify(process.env.NODE_ENV), }), - new ProvidePlugin({ process: require.resolve('process/browser.js') }), - isProd ? null : new HotModuleReplacementPlugin(), + new webpack.ProvidePlugin({ + process: fileURLToPath(import.meta.resolve('process/browser.js')), + }), + isProd ? null : new webpack.HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), - quiet ? null : new ProgressPlugin({ modulesCount }), + quiet ? null : new webpack.ProgressPlugin({ modulesCount }), shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null, ].filter(Boolean), module: { @@ -213,7 +216,9 @@ export default async ( enforce: 'post', use: [ { - loader: require.resolve('@storybook/builder-webpack5/loaders/export-order-loader'), + loader: fileURLToPath( + import.meta.resolve('@storybook/builder-webpack5/loaders/export-order-loader') + ), }, ], }, @@ -240,12 +245,13 @@ export default async ( alias: storybookPaths, fallback: { stream: false, - path: require.resolve('path-browserify'), - assert: require.resolve('browser-assert'), - util: require.resolve('util'), - url: require.resolve('url'), + path: fileURLToPath(import.meta.resolve('path-browserify')), + assert: fileURLToPath(import.meta.resolve('browser-assert')), + util: fileURLToPath(import.meta.resolve('util/util.js')), + // TODO + url: false, fs: false, - constants: require.resolve('constants-browserify'), + constants: fileURLToPath(import.meta.resolve('constants-browserify')), }, // Set webpack to resolve symlinks based on whether the user has asked node to. // This feels like it should be default out-of-the-box in webpack :shrug: diff --git a/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts b/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts index ec55e40c5291..8dfef27c2f92 100644 --- a/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts +++ b/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts @@ -1,4 +1,5 @@ import { join, resolve } from 'node:path'; +import { fileURLToPath } from 'node:url'; import { getBuilderOptions, @@ -29,17 +30,7 @@ export const getVirtualModules = async (options: Options) => { const previewAnnotations = [ ...(await options.presets.apply('previewAnnotations', [], options)).map( - (entry) => { - // If entry is an object, use the absolute import specifier. - // This is to maintain back-compat with community addons that bundle other addons - // and package managers that "hide" sub dependencies (e.g. pnpm / yarn pnp) - // The vite builder uses the bare import specifier. - if (typeof entry === 'object') { - return entry.absolute; - } - - return slash(entry); - } + (entry) => slash(entry) ), loadPreviewOrConfigFile(options), ].filter(Boolean); @@ -52,7 +43,9 @@ export const getVirtualModules = async (options: Options) => { const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js')); virtualModules[configEntryPath] = ( await readTemplate( - require.resolve('@storybook/builder-webpack5/templates/virtualModuleModernEntry.js') + fileURLToPath( + import.meta.resolve('@storybook/builder-webpack5/templates/virtualModuleModernEntry.js') + ) ) ) .replaceAll(`'{{storiesFilename}}'`, `'./${storiesFilename}'`) diff --git a/code/core/package.json b/code/core/package.json index 97bdeea7cea4..c3f4b8b1f780 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -24,153 +24,118 @@ "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.js", - "require": "./dist/index.cjs" + "node": "./dist/index.node.js", + "default": "./dist/index.js" }, "./node-logger": { "types": "./dist/node-logger/index.d.ts", - "import": "./dist/node-logger/index.js", - "require": "./dist/node-logger/index.cjs" + "default": "./dist/node-logger/index.node.js" }, "./client-logger": { "types": "./dist/client-logger/index.d.ts", - "import": "./dist/client-logger/index.js", - "require": "./dist/client-logger/index.cjs" + "default": "./dist/client-logger/index.js" }, "./core-server": { "types": "./dist/core-server/index.d.ts", - "import": "./dist/core-server/index.js", - "require": "./dist/core-server/index.cjs" - }, - "./core-server/presets/common-preset": { - "import": "./dist/core-server/presets/common-preset.js", - "require": "./dist/core-server/presets/common-preset.cjs" - }, - "./core-server/presets/common-manager": { - "import": "./dist/core-server/presets/common-manager.js" - }, - "./core-server/presets/common-override-preset": { - "import": "./dist/core-server/presets/common-override-preset.js", - "require": "./dist/core-server/presets/common-override-preset.cjs" + "default": "./dist/core-server/index.node.js" }, + "./core-server/presets/common-preset": "./dist/core-server/presets/common-preset.node.js", + "./core-server/presets/common-manager": "./dist/core-server/presets/common-manager.js", + "./core-server/presets/common-override-preset": "./dist/core-server/presets/common-override-preset.node.js", "./core-events": { "types": "./dist/core-events/index.d.ts", - "import": "./dist/core-events/index.js", - "require": "./dist/core-events/index.cjs" + "default": "./dist/core-events/index.js" }, "./manager-errors": { "types": "./dist/manager-errors.d.ts", - "import": "./dist/manager-errors.js" + "default": "./dist/manager-errors.js" }, "./preview-errors": { "types": "./dist/preview-errors.d.ts", - "import": "./dist/preview-errors.js", - "require": "./dist/preview-errors.cjs" + "default": "./dist/preview-errors.js" }, "./server-errors": { "types": "./dist/server-errors.d.ts", - "import": "./dist/server-errors.js", - "require": "./dist/server-errors.cjs" + "default": "./dist/server-errors.node.js" }, "./channels": { "types": "./dist/channels/index.d.ts", - "import": "./dist/channels/index.js", - "require": "./dist/channels/index.cjs" + "default": "./dist/channels/index.js" }, "./types": { "types": "./dist/types/index.d.ts", - "import": "./dist/types/index.js", - "require": "./dist/types/index.cjs" + "default": "./dist/types/index.js" }, "./csf-tools": { "types": "./dist/csf-tools/index.d.ts", - "import": "./dist/csf-tools/index.js", - "require": "./dist/csf-tools/index.cjs" + "default": "./dist/csf-tools/index.node.js" }, "./common": { "types": "./dist/common/index.d.ts", - "import": "./dist/common/index.js", - "require": "./dist/common/index.cjs" + "default": "./dist/common/index.node.js" }, "./builder-manager": { "types": "./dist/builder-manager/index.d.ts", - "import": "./dist/builder-manager/index.js", - "require": "./dist/builder-manager/index.cjs" + "default": "./dist/builder-manager/index.node.js" }, "./telemetry": { "types": "./dist/telemetry/index.d.ts", - "import": "./dist/telemetry/index.js", - "require": "./dist/telemetry/index.cjs" + "default": "./dist/telemetry/index.node.js" }, "./preview-api": { "types": "./dist/preview-api/index.d.ts", - "import": "./dist/preview-api/index.js", - "require": "./dist/preview-api/index.cjs" + "default": "./dist/preview-api/index.js" }, "./manager-api": { "types": "./dist/manager-api/index.d.ts", - "import": "./dist/manager-api/index.js", - "require": "./dist/manager-api/index.cjs" + "default": "./dist/manager-api/index.js" }, "./router": { "types": "./dist/router/index.d.ts", - "import": "./dist/router/index.js", - "require": "./dist/router/index.cjs" + "default": "./dist/router/index.js" }, "./components": { "types": "./dist/components/index.d.ts", - "import": "./dist/components/index.js", - "require": "./dist/components/index.cjs" + "default": "./dist/components/index.js" }, "./theming": { "types": "./dist/theming/index.d.ts", - "import": "./dist/theming/index.js", - "require": "./dist/theming/index.cjs" + "default": "./dist/theming/index.js" }, "./theming/create": { "types": "./dist/theming/create.d.ts", - "import": "./dist/theming/create.js", - "require": "./dist/theming/create.cjs" + "default": "./dist/theming/create.js" }, "./docs-tools": { "types": "./dist/docs-tools/index.d.ts", - "import": "./dist/docs-tools/index.js", - "require": "./dist/docs-tools/index.cjs" + "default": "./dist/docs-tools/index.js" }, "./manager/globals-module-info": { "types": "./dist/manager/globals-module-info.d.ts", - "import": "./dist/manager/globals-module-info.js", - "require": "./dist/manager/globals-module-info.cjs" + "default": "./dist/manager/globals-module-info.node.js" }, "./manager/globals": { "types": "./dist/manager/globals.d.ts", - "import": "./dist/manager/globals.js", - "require": "./dist/manager/globals.cjs" + "default": "./dist/manager/globals.node.js" }, "./preview/globals": { "types": "./dist/preview/globals.d.ts", - "import": "./dist/preview/globals.js", - "require": "./dist/preview/globals.cjs" + "default": "./dist/preview/globals.node.js" }, "./babel": { "types": "./dist/babel/index.d.ts", - "import": "./dist/babel/index.js", - "require": "./dist/babel/index.cjs" + "default": "./dist/babel/index.node.js" }, "./cli": { "types": "./dist/cli/index.d.ts", - "import": "./dist/cli/index.js", - "require": "./dist/cli/index.cjs" + "default": "./dist/cli/index.node.js" }, "./cli/bin": { "types": "./dist/cli/bin/index.d.ts", - "import": "./dist/cli/bin/index.js", - "require": "./dist/cli/bin/index.cjs" + "default": "./dist/cli/bin/index.node.js" }, "./package.json": "./package.json" }, - "main": "dist/index.cjs", - "module": "dist/index.js", "types": "dist/index.d.ts", "typesVersions": { "*": { diff --git a/code/core/scripts/entries.ts b/code/core/scripts/entries.ts index 4df1cbb2433e..29215c5b4885 100644 --- a/code/core/scripts/entries.ts +++ b/code/core/scripts/entries.ts @@ -7,37 +7,37 @@ export const getEntries = (cwd: string) => { define('src/index.ts', ['node', 'browser'], true), define('src/node-logger/index.ts', ['node'], true), - define('src/client-logger/index.ts', ['browser', 'node'], true), + define('src/client-logger/index.ts', ['browser'], true), define('src/core-server/index.ts', ['node'], true), define('src/core-server/presets/common-preset.ts', ['node'], false), define('src/core-server/presets/common-manager.ts', ['browser'], false), define('src/core-server/presets/common-override-preset.ts', ['node'], false), - define('src/core-events/index.ts', ['browser', 'node'], true), + define('src/core-events/index.ts', ['browser'], true), define('src/manager-errors.ts', ['browser'], true), - define('src/preview-errors.ts', ['browser', 'node'], true), + define('src/preview-errors.ts', ['browser'], true), define('src/server-errors.ts', ['node'], true), - define('src/channels/index.ts', ['browser', 'node'], true), - define('src/types/index.ts', ['browser', 'node'], true, ['react']), + define('src/channels/index.ts', ['browser'], true), + define('src/types/index.ts', ['browser'], true, ['react']), define('src/csf-tools/index.ts', ['node'], true), define('src/common/index.ts', ['node'], true), define('src/builder-manager/index.ts', ['node'], true), define('src/telemetry/index.ts', ['node'], true), - define('src/preview-api/index.ts', ['browser', 'node'], true), - define('src/manager-api/index.ts', ['browser', 'node'], true, ['react']), - define('src/router/index.ts', ['browser', 'node'], true, ['react']), + define('src/preview-api/index.ts', ['browser'], true), + define('src/manager-api/index.ts', ['browser'], true, ['react']), + define('src/router/index.ts', ['browser'], true, ['react']), define( 'src/components/index.ts', - ['browser', 'node'], + ['browser'], true, ['react', 'react-dom'], ['prettier'] // the syntax highlighter uses prettier/standalone to format the code ), - define('src/theming/index.ts', ['browser', 'node'], true, ['react']), - define('src/theming/create.ts', ['browser', 'node'], true, ['react']), - define('src/docs-tools/index.ts', ['browser', 'node'], true), + define('src/theming/index.ts', ['browser'], true, ['react']), + define('src/theming/create.ts', ['browser'], true, ['react']), + define('src/docs-tools/index.ts', ['browser'], true), define('src/manager/globals-module-info.ts', ['node'], true), define('src/manager/globals.ts', ['node'], true), diff --git a/code/core/scripts/helpers/generatePackageJsonFile.ts b/code/core/scripts/helpers/generatePackageJsonFile.ts index 271f775cba23..329347f744bf 100644 --- a/code/core/scripts/helpers/generatePackageJsonFile.ts +++ b/code/core/scripts/helpers/generatePackageJsonFile.ts @@ -17,33 +17,41 @@ export async function generatePackageJsonFile(entries: ReturnType>>((acc, entry) => { - let main = './' + slash(relative(cwd, entry.file).replace('src', 'dist')); + pkgJson.exports = entries.reduce>>( + (acc, entry) => { + let main = './' + slash(relative(cwd, entry.file).replace('src', 'dist')); - const content: Record = {}; - if (entry.dts) { - content.types = main.replace(/\.tsx?/, '.d.ts'); - } - if (entry.browser) { - content.import = main.replace(/\.tsx?/, '.js'); - } - if (entry.node && !entry.browser) { - content.import = main.replace(/\.tsx?/, '.js'); - } - if (entry.node) { - content.require = main.replace(/\.tsx?/, '.cjs'); - } - if (main === './dist/index.ts' || main === './dist/index.tsx') { - main = '.'; - } - acc[ - main - .replace(/\/index\.tsx?/, '') - .replace(/\.tsx?/, '') - .replace('dist/', '') - ] = content; - return acc; - }, {}); + let content: Record | string = {}; + if (entry.dts) { + content.types = main.replace(/\.tsx?/, '.d.ts'); + } + if (entry.node && entry.browser) { + content.node = main.replace(/\.tsx?/, '.node.js'); + } + if (entry.node && !entry.browser) { + content.default = main.replace(/\.tsx?/, '.node.js'); + } + if (entry.browser) { + content.default = main.replace(/\.tsx?/, '.js'); + } + + if (Object.keys(content).length === 1) { + content = content.default; + } + + if (main === './dist/index.ts' || main === './dist/index.tsx') { + main = '.'; + } + acc[ + main + .replace(/\/index\.tsx?/, '') + .replace(/\.tsx?/, '') + .replace('dist/', '') + ] = content; + return acc; + }, + {} + ); // Add the package.json file to the exports, so we can use it to `require.resolve` the package's root easily pkgJson.exports['./package.json'] = './package.json'; diff --git a/code/core/scripts/prep.ts b/code/core/scripts/prep.ts index aa67c4b87e86..2da8d2e649e7 100644 --- a/code/core/scripts/prep.ts +++ b/code/core/scripts/prep.ts @@ -141,10 +141,21 @@ async function run() { .filter(isNode) .filter(noExternals) .map((e) => e.file), + banner: { + js: dedent` + import ESM_COMPAT_Module from "node:module"; + import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url'; + import { dirname as ESM_COMPAT_dirname } from 'node:path'; + const __filename = ESM_COMPAT_fileURLToPath(import.meta.url); + const __dirname = ESM_COMPAT_dirname(__filename); + const require = ESM_COMPAT_Module.createRequire(import.meta.url); + `, + }, + external: [...nodeInternals, ...esbuildDefaultOptions.external], - format: 'cjs', + format: 'esm', outExtension: { - '.js': '.cjs', + '.js': '.node.js', }, }) ), @@ -180,7 +191,7 @@ async function run() { external: [...nodeInternals, ...esbuildDefaultOptions.external], format: 'esm', outExtension: { - '.js': '.js', + '.js': '.node.js', }, }) ), @@ -189,13 +200,13 @@ async function run() { merge(nodeEsbuildOptions, { banner: { js: dedent` - import ESM_COMPAT_Module from "node:module"; - import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url'; - import { dirname as ESM_COMPAT_dirname } from 'node:path'; - const __filename = ESM_COMPAT_fileURLToPath(import.meta.url); - const __dirname = ESM_COMPAT_dirname(__filename); - const require = ESM_COMPAT_Module.createRequire(import.meta.url); - `, + import ESM_COMPAT_Module from "node:module"; + import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url'; + import { dirname as ESM_COMPAT_dirname } from 'node:path'; + const __filename = ESM_COMPAT_fileURLToPath(import.meta.url); + const __dirname = ESM_COMPAT_dirname(__filename); + const require = ESM_COMPAT_Module.createRequire(import.meta.url); + `, }, entryPoints: [entry.file], format: 'esm', @@ -206,7 +217,7 @@ async function run() { ].filter((e) => !entry.internals.includes(e)), outdir: dirname(entry.file).replace('src', 'dist'), outExtension: { - '.js': '.js', + '.js': '.node.js', }, }) ); @@ -275,25 +286,7 @@ async function run() { .filter((entry) => !noExternals(entry)) .flatMap((entry) => { const results = []; - if (entry.node) { - results.push( - esbuild.context( - merge(nodeEsbuildOptions, { - entryPoints: [entry.file], - external: [ - ...nodeInternals, - ...esbuildDefaultOptions.external, - ...entry.externals, - ].filter((e) => !entry.internals.includes(e)), - format: 'cjs', - outdir: dirname(entry.file).replace('src', 'dist'), - outExtension: { - '.js': '.cjs', - }, - }) - ) - ); - } + if (entry.browser) { results.push( esbuild.context( @@ -311,11 +304,23 @@ async function run() { }) ) ); - } else if (entry.node) { + } + if (entry.node) { results.push( esbuild.context( merge(nodeEsbuildOptions, { entryPoints: [entry.file], + banner: { + js: dedent` + import ESM_COMPAT_Module from "node:module"; + import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url'; + import { dirname as ESM_COMPAT_dirname } from 'node:path'; + const __filename = ESM_COMPAT_fileURLToPath(import.meta.url); + const __dirname = ESM_COMPAT_dirname(__filename); + const require = ESM_COMPAT_Module.createRequire(import.meta.url); + `, + }, + external: [ ...nodeInternals, ...esbuildDefaultOptions.external, @@ -324,7 +329,7 @@ async function run() { format: 'esm', outdir: dirname(entry.file).replace('src', 'dist'), outExtension: { - '.js': '.js', + '.js': '.node.js', }, }) ) diff --git a/code/core/src/common/presets.ts b/code/core/src/common/presets.ts index 071537c9bdc3..ebf6c002be00 100644 --- a/code/core/src/common/presets.ts +++ b/code/core/src/common/presets.ts @@ -1,4 +1,8 @@ -import { join, parse } from 'node:path'; +import { create } from 'node:domain'; +import { stat } from 'node:fs/promises'; +import { createRequire } from 'node:module'; +import path, { join, parse } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { BuilderOptions, @@ -82,7 +86,23 @@ export const resolveAddonName = async ( options: any ): Promise => { const resolve = name.startsWith('/') ? safeResolve : safeResolveFrom.bind(null, configDir); - const resolved = resolve(name); + let resolved = resolve(name); + + try { + const esmResolved = fileURLToPath(import.meta.resolve(name)); + if ((await stat(esmResolved)).isFile()) { + resolved = esmResolved; + } else { + const require = createRequire(import.meta.url); + const esmResolvedRequireResolved = require.resolve(esmResolved); + + if ((await stat(esmResolvedRequireResolved)).isFile()) { + resolved = esmResolvedRequireResolved; + } + } + } catch (err) { + // + } if (resolved) { const { dir: fdir, name: fname } = parse(resolved); @@ -106,6 +126,22 @@ export const resolveAddonName = async ( } const checkExists = async (exportName: string) => { + try { + const esmResolved = fileURLToPath(import.meta.resolve(`${name}${exportName}`)); + if ((await stat(esmResolved)).isFile()) { + return `${name}${exportName}`; + } else { + const require = createRequire(import.meta.url); + const esmResolvedRequireResolved = require.resolve(esmResolved); + + if ((await stat(esmResolvedRequireResolved)).isFile()) { + return `${name}${exportName}`; + } + } + } catch (err) { + // + } + if (resolve(`${name}${exportName}`)) { return `${name}${exportName}`; } @@ -120,6 +156,22 @@ export const resolveAddonName = async ( * from the bare import, breaking in pnp/pnpm. */ const absolutizeExport = async (exportName: string, preferMJS: boolean) => { + try { + const esmResolved = fileURLToPath(import.meta.resolve(`${name}${exportName}`)); + if ((await stat(esmResolved)).isFile()) { + return `${name}${exportName}`; + } else { + const require = createRequire(import.meta.url); + const esmResolvedRequireResolved = require.resolve(esmResolved); + + if ((await stat(esmResolvedRequireResolved)).isFile()) { + return `${name}${exportName}`; + } + } + } catch (err) { + // + } + const found = resolve(`${name}${exportName}`); if (found) { @@ -129,9 +181,6 @@ export const resolveAddonName = async ( }; const managerFile = await absolutizeExport(`/manager`, true); - const registerFile = - (await absolutizeExport(`/register`, true)) || - (await absolutizeExport(`/register-panel`, true)); const previewFile = await checkExists(`/preview`); const previewFileAbsolute = await absolutizeExport('/preview', true); const presetFile = await absolutizeExport(`/preset`, false); @@ -143,16 +192,12 @@ export const resolveAddonName = async ( }; } - if (managerFile || registerFile || previewFile || presetFile) { + if (managerFile || previewFile || presetFile) { const managerEntries = []; if (managerFile) { managerEntries.push(managerFile); } - // register file is the old way of registering addons - if (!managerFile && registerFile && !presetFile) { - managerEntries.push(registerFile); - } return { type: 'virtual', @@ -160,17 +205,7 @@ export const resolveAddonName = async ( ...(managerEntries.length ? { managerEntries } : {}), ...(previewFile ? { - previewAnnotations: [ - previewFileAbsolute - ? { - // TODO: Evaluate if searching for node_modules in a yarn pnp environment is correct - bare: previewFile.includes('node_modules') - ? stripAbsNodeModulesPath(previewFile) - : previewFile, - absolute: previewFileAbsolute, - } - : previewFile, - ], + previewAnnotations: [previewFile], } : {}), ...(presetFile ? { presets: [{ name: presetFile, options }] } : {}), @@ -393,8 +428,6 @@ export async function getPresets( ): Promise { const loadedPresets: LoadedPreset[] = await loadPresets(presets, 0, storybookOptions); - // console.log({loadedPresets}) - return { apply: async (extension: string, config: any, args = {}) => applyPresets(loadedPresets, extension, config, args, storybookOptions), diff --git a/code/core/src/core-server/utils/doTelemetry.ts b/code/core/src/core-server/utils/doTelemetry.ts index 0e9b48b8c8f5..9f9a872e0dff 100644 --- a/code/core/src/core-server/utils/doTelemetry.ts +++ b/code/core/src/core-server/utils/doTelemetry.ts @@ -1,7 +1,7 @@ import { getPrecedingUpgrade, telemetry } from '@storybook/core/telemetry'; import type { CoreConfig, Options } from '@storybook/core/types'; -import type Polka from 'polka'; +import type { Polka } from 'polka'; import invariant from 'tiny-invariant'; import { sendTelemetryError } from '../withTelemetry'; @@ -11,7 +11,7 @@ import { summarizeIndex } from './summarizeIndex'; import { versionStatus } from './versionStatus'; export async function doTelemetry( - app: Polka.Polka, + app: Polka, core: CoreConfig, initializedStoryIndexGenerator: Promise, options: Options diff --git a/code/core/src/core-server/utils/getStoryIndexGenerator.ts b/code/core/src/core-server/utils/getStoryIndexGenerator.ts index d91373d825cf..bd16a767ef88 100644 --- a/code/core/src/core-server/utils/getStoryIndexGenerator.ts +++ b/code/core/src/core-server/utils/getStoryIndexGenerator.ts @@ -1,14 +1,14 @@ import { normalizeStories } from '@storybook/core/common'; import type { DocsOptions, Options } from '@storybook/core/types'; -import type Polka from 'polka'; +import type { Polka } from 'polka'; import { StoryIndexGenerator } from './StoryIndexGenerator'; import type { ServerChannel } from './get-server-channel'; import { useStoriesJson } from './stories-json'; export async function getStoryIndexGenerator( - app: Polka.Polka, + app: Polka, options: Options, serverChannel: ServerChannel ): Promise { diff --git a/code/core/src/core-server/utils/metadata.ts b/code/core/src/core-server/utils/metadata.ts index a9a2ebb337ba..84f9c36f5be2 100644 --- a/code/core/src/core-server/utils/metadata.ts +++ b/code/core/src/core-server/utils/metadata.ts @@ -2,7 +2,7 @@ import { writeFile } from 'node:fs/promises'; import { getStorybookMetadata } from '@storybook/core/telemetry'; -import type Polka from 'polka'; +import type { Polka } from 'polka'; export async function extractStorybookMetadata(outputFile: string, configDir: string) { const storybookMetadata = await getStorybookMetadata(configDir); @@ -10,7 +10,7 @@ export async function extractStorybookMetadata(outputFile: string, configDir: st await writeFile(outputFile, JSON.stringify(storybookMetadata)); } -export function useStorybookMetadata(app: Polka.Polka, configDir?: string) { +export function useStorybookMetadata(app: Polka, configDir?: string) { app.use('/project.json', async (req, res) => { const storybookMetadata = await getStorybookMetadata(configDir); res.setHeader('Content-Type', 'application/json'); diff --git a/code/core/src/core-server/utils/server-statics.ts b/code/core/src/core-server/utils/server-statics.ts index 3e21b4a3ea58..29c5a8468719 100644 --- a/code/core/src/core-server/utils/server-statics.ts +++ b/code/core/src/core-server/utils/server-statics.ts @@ -7,11 +7,11 @@ import type { Options } from '@storybook/core/types'; import { logger } from '@storybook/core/node-logger'; import picocolors from 'picocolors'; -import type Polka from 'polka'; +import type { Polka } from 'polka'; import sirv from 'sirv'; import { dedent } from 'ts-dedent'; -export async function useStatics(app: Polka.Polka, options: Options): Promise { +export async function useStatics(app: Polka, options: Options): Promise { const staticDirs = (await options.presets.apply('staticDirs')) ?? []; const faviconPath = await options.presets.apply('favicon'); diff --git a/code/core/src/core-server/utils/stories-json.test.ts b/code/core/src/core-server/utils/stories-json.test.ts index 4868c149b724..9c24f89be526 100644 --- a/code/core/src/core-server/utils/stories-json.test.ts +++ b/code/core/src/core-server/utils/stories-json.test.ts @@ -7,7 +7,7 @@ import { normalizeStoriesEntry } from '@storybook/core/common'; import { STORY_INDEX_INVALIDATED } from '@storybook/core/core-events'; import { debounce } from 'es-toolkit/compat'; -import type Polka from 'polka'; +import type { Polka } from 'polka'; import Watchpack from 'watchpack'; import { csfIndexer } from '../presets/common-preset'; @@ -58,7 +58,7 @@ const getInitializedStoryIndexGenerator = async ( describe('useStoriesJson', () => { const use = vi.fn(); - const app: Polka.Polka = { use } as any; + const app: Polka = { use } as any; const end = vi.fn(); const write = vi.fn(); const response: Polka.Response = { diff --git a/code/core/src/core-server/utils/stories-json.ts b/code/core/src/core-server/utils/stories-json.ts index a33e12eb0393..ef685592a900 100644 --- a/code/core/src/core-server/utils/stories-json.ts +++ b/code/core/src/core-server/utils/stories-json.ts @@ -6,7 +6,7 @@ import type { NormalizedStoriesSpecifier, StoryIndex } from '@storybook/core/typ import { STORY_INDEX_INVALIDATED } from '@storybook/core/core-events'; import { debounce } from 'es-toolkit/compat'; -import type Polka from 'polka'; +import type { Polka } from 'polka'; import type { StoryIndexGenerator } from './StoryIndexGenerator'; import type { ServerChannel } from './get-server-channel'; @@ -33,7 +33,7 @@ export function useStoriesJson({ serverChannel, normalizedStories, }: { - app: Polka.Polka; + app: Polka; initializedStoryIndexGenerator: Promise; serverChannel: ServerChannel; workingDir?: string; diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts index dbdabe22122c..2aafa761b973 100644 --- a/code/core/src/types/modules/core-common.ts +++ b/code/core/src/types/modules/core-common.ts @@ -540,7 +540,7 @@ export interface CoreCommon_ResolvedAddonPreset { name: string; } -export type PreviewAnnotation = string | { bare: string; absolute: string }; +export type PreviewAnnotation = string; export interface CoreCommon_ResolvedAddonVirtual { type: 'virtual'; diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index f9ac95e7b381..46b2cc2718c8 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -20,22 +20,18 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/builder-manager/shim.js b/code/deprecated/builder-manager/shim.js index 816cb718e504..87947f749d4c 100644 --- a/code/deprecated/builder-manager/shim.js +++ b/code/deprecated/builder-manager/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/builder-manager'); +export * from 'storybook/internal/builder-manager'; diff --git a/code/deprecated/builder-manager/shim.mjs b/code/deprecated/builder-manager/shim.mjs deleted file mode 100644 index 87947f749d4c..000000000000 --- a/code/deprecated/builder-manager/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/builder-manager'; diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index 4520f8cc1270..f5cdc5ee14e2 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -20,22 +20,18 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/channels/shim.js b/code/deprecated/channels/shim.js index 3fc5e066f43d..9f71f6af877a 100644 --- a/code/deprecated/channels/shim.js +++ b/code/deprecated/channels/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/channels'); +export * from 'storybook/internal/channels'; diff --git a/code/deprecated/channels/shim.mjs b/code/deprecated/channels/shim.mjs deleted file mode 100644 index 9f71f6af877a..000000000000 --- a/code/deprecated/channels/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/channels'; diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index 9c1ee730268e..4c23326d833d 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -20,22 +20,18 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/client-logger/shim.js b/code/deprecated/client-logger/shim.js index c3bec8e1d4f7..bad256478de1 100644 --- a/code/deprecated/client-logger/shim.js +++ b/code/deprecated/client-logger/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/client-logger'); +export * from 'storybook/internal/client-logger'; diff --git a/code/deprecated/client-logger/shim.mjs b/code/deprecated/client-logger/shim.mjs deleted file mode 100644 index bad256478de1..000000000000 --- a/code/deprecated/client-logger/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/client-logger'; diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index a14077e02f97..81b4d5facfc9 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -20,22 +20,18 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/components/shim.js b/code/deprecated/components/shim.js index 5c194a871e32..466c6c1f3fe2 100644 --- a/code/deprecated/components/shim.js +++ b/code/deprecated/components/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/components'); +export * from 'storybook/internal/components'; diff --git a/code/deprecated/components/shim.mjs b/code/deprecated/components/shim.mjs deleted file mode 100644 index 466c6c1f3fe2..000000000000 --- a/code/deprecated/components/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/components'; diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index 4364f1763314..c73c9726ffd4 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -19,22 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/core-common/shim.js b/code/deprecated/core-common/shim.js index ded314ab42d2..f3fd8e3bbc47 100644 --- a/code/deprecated/core-common/shim.js +++ b/code/deprecated/core-common/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/common'); +export * from 'storybook/internal/common'; diff --git a/code/deprecated/core-common/shim.mjs b/code/deprecated/core-common/shim.mjs deleted file mode 100644 index f3fd8e3bbc47..000000000000 --- a/code/deprecated/core-common/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/common'; diff --git a/code/deprecated/core-events/manager-errors.js b/code/deprecated/core-events/manager-errors.js index d9351ebda17e..2d64af64fbb0 100644 --- a/code/deprecated/core-events/manager-errors.js +++ b/code/deprecated/core-events/manager-errors.js @@ -1,6 +1 @@ -// This is required for compatibility in projects that don't support the exports map field (e.g. Jest 27), -// so when require paths such as `@storybook/core-events/manager-errors`, -// An error like this will occur: -// ENOENT: no such file or directory, open '/xyz/node_modules/@storybook/core-events/manager-errors.js' -// https://github.com/storybookjs/storybook/pull/24038#issuecomment-1704684432 -module.exports = require('storybook/internal/manager-errors'); +export * from 'storybook/internal/manager-errors'; diff --git a/code/deprecated/core-events/manager-errors.mjs b/code/deprecated/core-events/manager-errors.mjs deleted file mode 100644 index 2d64af64fbb0..000000000000 --- a/code/deprecated/core-events/manager-errors.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/manager-errors'; diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index 23d6506be585..e1335ccf9a11 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -23,28 +23,22 @@ "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./preview-errors": { "types": "./preview-errors.d.ts", - "import": "./preview-errors.mjs", - "require": "./preview-errors.js" + "default": "./preview-errors.js" }, "./manager-errors": { "types": "./manager-errors.d.ts", - "import": "./manager-errors.mjs", - "require": "./manager-errors.js" + "default": "./manager-errors.js" }, "./server-errors": { "types": "./server-errors.d.ts", - "import": "./server-errors.mjs", - "require": "./server-errors.js" + "default": "./server-errors.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "typesVersions": { "*": { @@ -65,8 +59,6 @@ "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/core-events/preview-errors.js b/code/deprecated/core-events/preview-errors.js index 304d37be6efd..2fb48796e867 100644 --- a/code/deprecated/core-events/preview-errors.js +++ b/code/deprecated/core-events/preview-errors.js @@ -1,6 +1 @@ -// This is required for compatibility in projects that don't support the exports map field (e.g. Jest 27), -// so when require paths such as `@storybook/core-events/preview-errors`, -// An error like this will occur: -// ENOENT: no such file or directory, open '/xyz/node_modules/@storybook/core-events/preview-errors.js' -// https://github.com/storybookjs/storybook/pull/24038#issuecomment-1704684432 -module.exports = require('storybook/internal/preview-errors'); +export * from 'storybook/internal/preview-errors'; diff --git a/code/deprecated/core-events/preview-errors.mjs b/code/deprecated/core-events/preview-errors.mjs deleted file mode 100644 index 2fb48796e867..000000000000 --- a/code/deprecated/core-events/preview-errors.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/preview-errors'; diff --git a/code/deprecated/core-events/server-errors.js b/code/deprecated/core-events/server-errors.js index 0d3f2fdf3970..53bd5c6b0774 100644 --- a/code/deprecated/core-events/server-errors.js +++ b/code/deprecated/core-events/server-errors.js @@ -1,6 +1 @@ -// This is required for compatibility in projects that don't support the exports map field (e.g. Jest 27), -// so when require paths such as `@storybook/core-events/server-errors`, -// An error like this will occur: -// ENOENT: no such file or directory, open '/xyz/node_modules/@storybook/core-events/server-errors.js' -// https://github.com/storybookjs/storybook/pull/24038#issuecomment-1704684432 -module.exports = require('storybook/internal/server-errors'); +export * from 'storybook/internal/server-errors'; diff --git a/code/deprecated/core-events/server-errors.mjs b/code/deprecated/core-events/server-errors.mjs deleted file mode 100644 index 53bd5c6b0774..000000000000 --- a/code/deprecated/core-events/server-errors.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/server-errors'; diff --git a/code/deprecated/core-events/shim.js b/code/deprecated/core-events/shim.js index 217389a630ed..0007b1e316da 100644 --- a/code/deprecated/core-events/shim.js +++ b/code/deprecated/core-events/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/core-events'); +export * from 'storybook/internal/core-events'; diff --git a/code/deprecated/core-events/shim.mjs b/code/deprecated/core-events/shim.mjs deleted file mode 100644 index 0007b1e316da..000000000000 --- a/code/deprecated/core-events/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/core-events'; diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index ca2d70e0d825..a4c7bea446bc 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -20,22 +20,18 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/core-server/shim.js b/code/deprecated/core-server/shim.js index 3529da2cb172..b0f995d4decc 100644 --- a/code/deprecated/core-server/shim.js +++ b/code/deprecated/core-server/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/core-server'); +export * from 'storybook/internal/core-server'; diff --git a/code/deprecated/core-server/shim.mjs b/code/deprecated/core-server/shim.mjs deleted file mode 100644 index b0f995d4decc..000000000000 --- a/code/deprecated/core-server/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/core-server'; diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index c2f3105926f4..0f1feed44d8c 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -20,21 +20,17 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/csf-tools/shim.js b/code/deprecated/csf-tools/shim.js index ff730963c65e..74c0c0100712 100644 --- a/code/deprecated/csf-tools/shim.js +++ b/code/deprecated/csf-tools/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/csf-tools'); +export * from 'storybook/internal/csf-tools'; diff --git a/code/deprecated/csf-tools/shim.mjs b/code/deprecated/csf-tools/shim.mjs deleted file mode 100644 index 74c0c0100712..000000000000 --- a/code/deprecated/csf-tools/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/csf-tools'; diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index 972a514132a9..6eee1b27396a 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -20,22 +20,18 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/docs-tools/shim.js b/code/deprecated/docs-tools/shim.js index 0049a0ebd871..a6a642d3273f 100644 --- a/code/deprecated/docs-tools/shim.js +++ b/code/deprecated/docs-tools/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/docs-tools'); +export * from 'storybook/internal/docs-tools'; diff --git a/code/deprecated/docs-tools/shim.mjs b/code/deprecated/docs-tools/shim.mjs deleted file mode 100644 index a6a642d3273f..000000000000 --- a/code/deprecated/docs-tools/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/docs-tools'; diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index 65fb9b380edd..00d44355d14b 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -19,22 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/manager-api/shim.js b/code/deprecated/manager-api/shim.js index 8c8b0f89bd06..7c8cfaaae3a2 100644 --- a/code/deprecated/manager-api/shim.js +++ b/code/deprecated/manager-api/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/manager-api'); +export * from 'storybook/internal/manager-api'; diff --git a/code/deprecated/manager-api/shim.mjs b/code/deprecated/manager-api/shim.mjs deleted file mode 100644 index 7c8cfaaae3a2..000000000000 --- a/code/deprecated/manager-api/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/manager-api'; diff --git a/code/deprecated/manager/globals.cjs b/code/deprecated/manager/globals.cjs deleted file mode 100644 index d6ee8ec2d144..000000000000 --- a/code/deprecated/manager/globals.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('storybook/internal/manager/globals'); diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index 5a1955b9061f..51e9d5a26678 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -24,15 +24,12 @@ "exports": { "./globals": { "type": "./globals.d.ts", - "import": "./globals.js", - "require": "./globals.cjs" + "default": "./globals.js" } }, "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index d87ebfdce781..68834693a282 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -23,19 +23,14 @@ "exports": { ".": { "types": "./shim.d.ts", - "module": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/node-logger/shim.js b/code/deprecated/node-logger/shim.js index 0c85d6dc5400..1c35c8624ddf 100644 --- a/code/deprecated/node-logger/shim.js +++ b/code/deprecated/node-logger/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/node-logger'); +export * from 'storybook/internal/node-logger'; diff --git a/code/deprecated/node-logger/shim.mjs b/code/deprecated/node-logger/shim.mjs deleted file mode 100644 index 1c35c8624ddf..000000000000 --- a/code/deprecated/node-logger/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/node-logger'; diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index 53015feb0fb3..1802d461598e 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -20,23 +20,19 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", - "react-native": "./shim.mjs", + "react-native": "./shim.js", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/preview-api/shim.js b/code/deprecated/preview-api/shim.js index 8a7455da77ec..e498112f799e 100644 --- a/code/deprecated/preview-api/shim.js +++ b/code/deprecated/preview-api/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/preview-api'); +export * from 'storybook/internal/preview-api'; diff --git a/code/deprecated/preview-api/shim.mjs b/code/deprecated/preview-api/shim.mjs deleted file mode 100644 index e498112f799e..000000000000 --- a/code/deprecated/preview-api/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/preview-api'; diff --git a/code/deprecated/preview/globals.cjs b/code/deprecated/preview/globals.cjs deleted file mode 100644 index 91340ce6505b..000000000000 --- a/code/deprecated/preview/globals.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('storybook/internal/preview/globals'); diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index 94a228ece87f..9d6467b50c29 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -24,15 +24,12 @@ "exports": { "./globals": { "type": "./globals.d.ts", - "import": "./globals.js", - "require": "./globals.cjs" + "default": "./globals.cjs" } }, "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index ab0bb4523298..8497375e6720 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -20,27 +20,22 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./utils": { "types": "./utils.d.ts", - "import": "./shim.mjs", - "require": "./utils.js" + "default": "./utils.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/router/shim.js b/code/deprecated/router/shim.js index 4ffedd37e521..7bbbbccd732e 100644 --- a/code/deprecated/router/shim.js +++ b/code/deprecated/router/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/router'); +export * from 'storybook/internal/router'; diff --git a/code/deprecated/router/shim.mjs b/code/deprecated/router/shim.mjs deleted file mode 100644 index 7bbbbccd732e..000000000000 --- a/code/deprecated/router/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/router'; diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index 921328679226..6d0d30fc03d2 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -20,22 +20,18 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/telemetry/shim.js b/code/deprecated/telemetry/shim.js index 573d88c8ed38..203cb379cfd2 100644 --- a/code/deprecated/telemetry/shim.js +++ b/code/deprecated/telemetry/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/telemetry'); +export * from 'storybook/internal/telemetry'; diff --git a/code/deprecated/telemetry/shim.mjs b/code/deprecated/telemetry/shim.mjs deleted file mode 100644 index 203cb379cfd2..000000000000 --- a/code/deprecated/telemetry/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/telemetry'; diff --git a/code/deprecated/theming/create.js b/code/deprecated/theming/create.js index 46a7e06dbb15..f42a04fbeb52 100644 --- a/code/deprecated/theming/create.js +++ b/code/deprecated/theming/create.js @@ -1 +1 @@ -module.exports = require('storybook/internal/theming/create'); +export * from 'storybook/internal/theming/create'; diff --git a/code/deprecated/theming/create.mjs b/code/deprecated/theming/create.mjs deleted file mode 100644 index f42a04fbeb52..000000000000 --- a/code/deprecated/theming/create.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/theming/create'; diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index 3059e2910f68..5ed5b1564107 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -20,27 +20,22 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./create": { "types": "./create.d.ts", - "import": "./create.mjs", - "require": "./create.js" + "default": "./create.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/theming/shim.js b/code/deprecated/theming/shim.js index b6f2d0379538..b2a600a67fc7 100644 --- a/code/deprecated/theming/shim.js +++ b/code/deprecated/theming/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/theming'); +export * from 'storybook/internal/theming'; diff --git a/code/deprecated/theming/shim.mjs b/code/deprecated/theming/shim.mjs deleted file mode 100644 index b2a600a67fc7..000000000000 --- a/code/deprecated/theming/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/theming'; diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index 43e30516e286..caf23e6c7f43 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -20,22 +20,18 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./shim.d.ts", - "import": "./shim.mjs", - "require": "./shim.js" + "default": "./shim.js" }, "./package.json": "./package.json" }, - "main": "./shim.js", - "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", "*.js", - "*.mjs", - "*.cjs", "*.d.ts" ], "peerDependencies": { diff --git a/code/deprecated/types/shim.js b/code/deprecated/types/shim.js index d6e674cadaca..62bc04586d6d 100644 --- a/code/deprecated/types/shim.js +++ b/code/deprecated/types/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/types'); +export * from 'storybook/internal/types'; diff --git a/code/deprecated/types/shim.mjs b/code/deprecated/types/shim.mjs deleted file mode 100644 index 62bc04586d6d..000000000000 --- a/code/deprecated/types/shim.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from 'storybook/internal/types'; diff --git a/code/frameworks/angular/src/builders/builders.json b/code/frameworks/angular/src/builders/builders.json index 8a7df8b064b4..0b4fb5e15aab 100644 --- a/code/frameworks/angular/src/builders/builders.json +++ b/code/frameworks/angular/src/builders/builders.json @@ -1,7 +1,7 @@ { "builders": { "build-storybook": { - "implementation": "./build-storybook", + "implementation": "./build-storybook/index.js", "schema": "./build-storybook/schema.json", "description": "Build storybook" }, diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index 0ceabec27ada..cd72b05566b5 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -21,47 +21,39 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, - "./dist/preview.mjs": "./dist/preview.mjs", + "./preview": "./dist/preview.js", "./cache.mock": { "types": "./dist/export-mocks/cache/index.d.ts", - "import": "./dist/export-mocks/cache/index.mjs", - "require": "./dist/export-mocks/cache/index.js" + "default": "./dist/export-mocks/cache/index.js" }, "./headers.mock": { "types": "./dist/export-mocks/headers/index.d.ts", - "import": "./dist/export-mocks/headers/index.mjs", - "require": "./dist/export-mocks/headers/index.js" + "default": "./dist/export-mocks/headers/index.js" }, "./navigation.mock": { "types": "./dist/export-mocks/navigation/index.d.ts", - "import": "./dist/export-mocks/navigation/index.mjs", - "require": "./dist/export-mocks/navigation/index.js" + "default": "./dist/export-mocks/navigation/index.js" }, "./router.mock": { "types": "./dist/export-mocks/router/index.d.ts", - "import": "./dist/export-mocks/router/index.mjs", - "require": "./dist/export-mocks/router/index.js" + "default": "./dist/export-mocks/router/index.js" }, "./vite-plugin": { "types": "./dist/vite-plugin/index.d.ts", - "import": "./dist/vite-plugin/index.mjs", - "require": "./dist/vite-plugin/index.js" + "default": "./dist/vite-plugin/index.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "typesVersions": { "*": { diff --git a/code/frameworks/experimental-nextjs-vite/preset.js b/code/frameworks/experimental-nextjs-vite/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/experimental-nextjs-vite/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/experimental-nextjs-vite/src/preset.ts b/code/frameworks/experimental-nextjs-vite/src/preset.ts index 0a725be35804..db16d325755f 100644 --- a/code/frameworks/experimental-nextjs-vite/src/preset.ts +++ b/code/frameworks/experimental-nextjs-vite/src/preset.ts @@ -1,5 +1,6 @@ // https://storybook.js.org/docs/react/addons/writing-presets import path from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; @@ -16,21 +17,20 @@ export const core: PresetProperty<'core'> = async (config, options) => { return { ...config, builder: { - name: dirname( - require.resolve(join('@storybook/builder-vite', 'package.json')) - ) as '@storybook/builder-vite', + name: fileURLToPath(import.meta.resolve('@storybook/builder-vite')), options: { ...(typeof framework === 'string' ? {} : framework.options.builder || {}), }, }, - renderer: dirname(require.resolve(join('@storybook/react', 'package.json'))), + renderer: fileURLToPath(import.meta.resolve('@storybook/react/preset')), }; }; export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => { - const nextDir = dirname(require.resolve('@storybook/experimental-nextjs-vite/package.json')); - const result = [...entry, join(nextDir, 'dist/preview.mjs')]; - return result; + return [ + ...entry, + fileURLToPath(import.meta.resolve('@storybook/experimental-nextjs-vite/preview')), + ]; }; export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, options) => { diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 7bc2d8737976..8b7b90ed26bd 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -19,21 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -44,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", @@ -65,11 +62,10 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/preset.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/frameworks/html-vite/preset.js b/code/frameworks/html-vite/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/html-vite/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/html-vite/src/preset.ts b/code/frameworks/html-vite/src/preset.ts index 57c18a236cca..a3d21f48c5cb 100644 --- a/code/frameworks/html-vite/src/preset.ts +++ b/code/frameworks/html-vite/src/preset.ts @@ -1,12 +1,8 @@ -import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; -function getAbsolutePath(value: I): I { - return dirname(require.resolve(join(value, 'package.json'))) as any; -} - export const core: PresetProperty<'core'> = { - builder: getAbsolutePath('@storybook/builder-vite'), - renderer: getAbsolutePath('@storybook/html'), + builder: fileURLToPath(import.meta.resolve('@storybook/builder-vite')), + renderer: fileURLToPath(import.meta.resolve('@storybook/html/preset')), }; diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 3fa5d9cc1bb1..b629b8bdbc00 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -19,21 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -44,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", @@ -66,11 +63,10 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/preset.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/frameworks/html-webpack5/preset.js b/code/frameworks/html-webpack5/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/html-webpack5/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/html-webpack5/src/preset.ts b/code/frameworks/html-webpack5/src/preset.ts index d2e3e75d1c18..f6081407c388 100644 --- a/code/frameworks/html-webpack5/src/preset.ts +++ b/code/frameworks/html-webpack5/src/preset.ts @@ -1,11 +1,11 @@ -import { dirname, join } from 'node:path'; +import { dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - -export const addons: PresetProperty<'addons'> = [getAbsolutePath('@storybook/preset-html-webpack')]; +export const addons: PresetProperty<'addons'> = [ + dirname(fileURLToPath(import.meta.resolve('@storybook/preset-html-webpack/package.json'))), +]; export const core: PresetProperty<'core'> = async (config, options) => { const framework = await options.presets.apply('framework'); @@ -13,9 +13,9 @@ export const core: PresetProperty<'core'> = async (config, options) => { return { ...config, builder: { - name: getAbsolutePath('@storybook/builder-webpack5'), + name: fileURLToPath(import.meta.resolve('@storybook/builder-webpack5')), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: getAbsolutePath('@storybook/html'), + renderer: fileURLToPath(import.meta.resolve('@storybook/html/preset')), }; }; diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 73655073afca..5de7e6c9862d 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -20,72 +20,58 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, - "./dist/image-context": { + "./image-context": { "types": "./dist/image-context.d.ts", - "import": "./dist/image-context.mjs", - "require": "./dist/image-context.js" + "default": "./dist/image-context.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./font/webpack/loader/storybook-nextjs-font-loader": { "types": "./dist/font/webpack/loader/storybook-nextjs-font-loader.d.ts", - "import": "./dist/font/webpack/loader/storybook-nextjs-font-loader.mjs", - "require": "./dist/font/webpack/loader/storybook-nextjs-font-loader.js" + "default": "./dist/font/webpack/loader/storybook-nextjs-font-loader.js" }, - "./dist/preview.mjs": "./dist/preview.mjs", "./next-image-loader-stub.js": { "types": "./dist/next-image-loader-stub.d.ts", - "import": "./dist/next-image-loader-stub.mjs", - "require": "./dist/next-image-loader-stub.js" + "default": "./dist/next-image-loader-stub.js" }, - "./dist/compatibility/segment.compat": { + "./compatibility/segment.compat": { "types": "./dist/compatibility/segment.compat.d.ts", - "import": "./dist/compatibility/segment.compat.mjs", - "require": "./dist/compatibility/segment.compat.js" + "default": "./dist/compatibility/segment.compat.js" }, - "./dist/compatibility/redirect-status-code.compat": { + "./compatibility/redirect-status-code.compat": { "types": "./dist/compatibility/redirect-status-code.compat.d.ts", - "import": "./dist/compatibility/redirect-status-code.compat.mjs", - "require": "./dist/compatibility/redirect-status-code.compat.js" + "default": "./dist/compatibility/redirect-status-code.compat.js" }, "./export-mocks": { "types": "./dist/export-mocks/index.d.ts", - "import": "./dist/export-mocks/index.mjs", - "require": "./dist/export-mocks/index.js" + "default": "./dist/export-mocks/index.js" }, "./cache.mock": { "types": "./dist/export-mocks/cache/index.d.ts", - "import": "./dist/export-mocks/cache/index.mjs", - "require": "./dist/export-mocks/cache/index.js" + "default": "./dist/export-mocks/cache/index.js" }, "./headers.mock": { "types": "./dist/export-mocks/headers/index.d.ts", - "import": "./dist/export-mocks/headers/index.mjs", - "require": "./dist/export-mocks/headers/index.js" + "default": "./dist/export-mocks/headers/index.js" }, "./navigation.mock": { "types": "./dist/export-mocks/navigation/index.d.ts", - "import": "./dist/export-mocks/navigation/index.mjs", - "require": "./dist/export-mocks/navigation/index.js" + "default": "./dist/export-mocks/navigation/index.js" }, "./router.mock": { "types": "./dist/export-mocks/router/index.d.ts", - "import": "./dist/export-mocks/router/index.mjs", - "require": "./dist/export-mocks/router/index.js" + "default": "./dist/export-mocks/router/index.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "typesVersions": { "*": { diff --git a/code/frameworks/nextjs/preset.js b/code/frameworks/nextjs/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/nextjs/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/nextjs/src/babel/loader.ts b/code/frameworks/nextjs/src/babel/loader.ts index 934675dfc66a..175d3af5470c 100644 --- a/code/frameworks/nextjs/src/babel/loader.ts +++ b/code/frameworks/nextjs/src/babel/loader.ts @@ -1,3 +1,5 @@ +import { fileURLToPath } from 'node:url'; + import { getProjectRoot, resolvePathInStorybookCache } from 'storybook/internal/common'; import type { Options } from 'storybook/internal/types'; @@ -15,7 +17,7 @@ export const configureBabelLoader = async (baseConfig: any, options: Options) => test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/, use: [ { - loader: require.resolve('babel-loader'), + loader: fileURLToPath(import.meta.resolve('babel-loader')), options: { cacheDirectory: resolvePathInStorybookCache('babel'), ...babelOptions, diff --git a/code/frameworks/nextjs/src/babel/preset.ts b/code/frameworks/nextjs/src/babel/preset.ts index b4b7a465bacf..e36a99c842f0 100644 --- a/code/frameworks/nextjs/src/babel/preset.ts +++ b/code/frameworks/nextjs/src/babel/preset.ts @@ -1,7 +1,11 @@ +import { createRequire } from 'node:module'; import { dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PluginItem } from '@babel/core'; +const require = createRequire(import.meta.url); + const isLoadIntentTest = process.env.NODE_ENV === 'test'; const isLoadIntentDevelopment = process.env.NODE_ENV === 'development'; @@ -26,10 +30,10 @@ function styledJsxOptions(options: StyledJsxBabelOptions) { options.plugins = options.plugins.map((plugin: StyledJsxPlugin): StyledJsxPlugin => { if (Array.isArray(plugin)) { const [name, pluginOptions] = plugin; - return [require.resolve(name), pluginOptions]; + return [fileURLToPath(import.meta.resolve(name)), pluginOptions]; } - return require.resolve(plugin); + return fileURLToPath(import.meta.resolve(plugin)); }); return options; @@ -127,7 +131,7 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset => ], ], plugins: [ - isDevelopment && require.resolve('react-refresh/babel'), + isDevelopment && fileURLToPath(import.meta.resolve('react-refresh/babel')), !useJsxRuntime && [ require('./plugins/jsx-pragma'), { diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts index a0ea2d47bded..4b40def81b34 100644 --- a/code/frameworks/nextjs/src/config/webpack.ts +++ b/code/frameworks/nextjs/src/config/webpack.ts @@ -1,15 +1,24 @@ +import { createRequire } from 'node:module'; + import type { NextConfig } from 'next'; import type { Configuration as WebpackConfig } from 'webpack'; -import { DefinePlugin } from 'webpack'; +import webpack from 'webpack'; import { addScopedAlias, resolveNextConfig, setAlias } from '../utils'; const tryResolve = (path: string) => { try { + return import.meta.resolve(path); + } catch (err) { + // + } + try { + const require = createRequire(import.meta.url); return require.resolve(path); } catch (err) { - return false; + // } + return false; }; export const configureConfig = async ({ @@ -67,5 +76,5 @@ const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig): definePluginConfig['process.env.__NEXT_NEW_LINK_BEHAVIOR'] = newNextLinkBehavior; - baseConfig.plugins?.push(new DefinePlugin(definePluginConfig)); + baseConfig.plugins?.push(new webpack.DefinePlugin(definePluginConfig)); }; diff --git a/code/frameworks/nextjs/src/css/webpack.ts b/code/frameworks/nextjs/src/css/webpack.ts index 9aabae1d731a..78097262fd3e 100644 --- a/code/frameworks/nextjs/src/css/webpack.ts +++ b/code/frameworks/nextjs/src/css/webpack.ts @@ -1,6 +1,9 @@ +import { createRequire } from 'node:module'; +import { fileURLToPath } from 'node:url'; + import type { NextConfig } from 'next'; -import { cssFileResolve } from 'next/dist/build/webpack/config/blocks/css/loaders/file-resolve'; -import { getCssModuleLocalIdent } from 'next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent'; +import { cssFileResolve } from 'next/dist/build/webpack/config/blocks/css/loaders/file-resolve.js'; +import { getCssModuleLocalIdent } from 'next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent.js'; import semver from 'semver'; import type { Configuration as WebpackConfig } from 'webpack'; @@ -21,9 +24,9 @@ export const configureCss = (baseConfig: WebpackConfig, nextConfig: NextConfig): rules[i] = { test: /\.css$/, use: [ - require.resolve('style-loader'), + fileURLToPath(import.meta.resolve('style-loader')), { - loader: require.resolve('css-loader'), + loader: fileURLToPath(import.meta.resolve('css-loader')), options: { importLoaders: 1, ...getImportAndUrlCssLoaderOptions(nextConfig), @@ -33,7 +36,7 @@ export const configureCss = (baseConfig: WebpackConfig, nextConfig: NextConfig): }, }, }, - require.resolve('postcss-loader'), + fileURLToPath(import.meta.resolve('postcss-loader')), ], // We transform the "target.css" files from next.js into Javascript // for Next.js to support fonts, so it should be ignored by the css-loader. @@ -44,19 +47,19 @@ export const configureCss = (baseConfig: WebpackConfig, nextConfig: NextConfig): rules?.push({ test: /\.(scss|sass)$/, use: [ - require.resolve('style-loader'), + fileURLToPath(import.meta.resolve('style-loader')), { - loader: require.resolve('css-loader'), + loader: fileURLToPath(import.meta.resolve('css-loader')), options: { importLoaders: 3, ...getImportAndUrlCssLoaderOptions(nextConfig), modules: { auto: true, getLocalIdent: getCssModuleLocalIdent }, }, }, - require.resolve('postcss-loader'), - require.resolve('resolve-url-loader'), + fileURLToPath(import.meta.resolve('postcss-loader')), + fileURLToPath(import.meta.resolve('resolve-url-loader')), { - loader: require.resolve('sass-loader'), + loader: fileURLToPath(import.meta.resolve('sass-loader')), options: { sourceMap: true, sassOptions: nextConfig.sassOptions, @@ -104,6 +107,7 @@ const getImportResolver = const isCssLoaderV6 = () => { try { + const require = createRequire(import.meta.url); const cssLoaderVersion = require(scopedResolve('css-loader/package.json')).version; return semver.gte(cssLoaderVersion, '6.0.0'); } catch { diff --git a/code/frameworks/nextjs/src/export-mocks/webpack.ts b/code/frameworks/nextjs/src/export-mocks/webpack.ts index 3d054d114ed2..cf71cea9fe8a 100644 --- a/code/frameworks/nextjs/src/export-mocks/webpack.ts +++ b/code/frameworks/nextjs/src/export-mocks/webpack.ts @@ -1,4 +1,5 @@ import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { Configuration as WebpackConfig } from 'webpack'; @@ -18,9 +19,10 @@ const mapping = { // Utility that assists in adding aliases to the Webpack configuration // and also doubles as alias solution for portable stories in Jest/Vitest/etc. -export const getPackageAliases = ({ useESM = false }: { useESM?: boolean } = {}) => { - const extension = useESM ? 'mjs' : 'js'; - const packageLocation = dirname(require.resolve('@storybook/nextjs/package.json')); +export const getPackageAliases = () => { + const packageLocation = dirname( + fileURLToPath(import.meta.resolve('@storybook/nextjs/package.json')) + ); const getFullPath = (path: string) => join(packageLocation, path.replace('@storybook/nextjs', '')); @@ -30,7 +32,7 @@ export const getPackageAliases = ({ useESM = false }: { useESM?: boolean } = {}) originalPath, // Use paths for both next/xyz and @storybook/nextjs/xyz imports // to make sure they all serve the MJS/CJS version of the file - getFullPath(`${aliasedPath}.${extension}`), + getFullPath(`${aliasedPath}.js`), ]) ); @@ -42,6 +44,6 @@ export const configureNextExportMocks = (baseConfig: WebpackConfig): void => { resolve.alias = { ...resolve.alias, - ...getPackageAliases({ useESM: true }), + ...getPackageAliases(), }; }; diff --git a/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts b/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts index bd3f1640ff36..19715a6d4b99 100644 --- a/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts +++ b/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts @@ -1,8 +1,9 @@ +import { fileURLToPath } from 'url'; import type { Configuration } from 'webpack'; export function configureNextFont(baseConfig: Configuration, isSWC?: boolean) { - const fontLoaderPath = require.resolve( - '@storybook/nextjs/font/webpack/loader/storybook-nextjs-font-loader' + const fontLoaderPath = fileURLToPath( + import.meta.resolve('@storybook/nextjs/font/webpack/loader/storybook-nextjs-font-loader') ); if (isSWC) { diff --git a/code/frameworks/nextjs/src/images/decorator.tsx b/code/frameworks/nextjs/src/images/decorator.tsx index 53b4cd470f4d..a5b4321b8833 100644 --- a/code/frameworks/nextjs/src/images/decorator.tsx +++ b/code/frameworks/nextjs/src/images/decorator.tsx @@ -4,8 +4,7 @@ import type { Addon_StoryContext } from 'storybook/internal/types'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore-error (this only errors during compilation for production) -// eslint-disable-next-line import/no-extraneous-dependencies -import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image-context'; +import { ImageContext as ImageContextValue } from '@storybook/nextjs/image-context'; import { type ImageContext as ImageContextType } from '../image-context'; diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index 358b24d7ad4c..b6cbaba8a8fb 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -1,9 +1,8 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import React from 'react'; -// @ts-ignore-error (this only errors during compilation for production) -// eslint-disable-next-line import/no-extraneous-dependencies -import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image-context'; +// @ts-ignore-error (only a problem in production builds) +import { ImageContext as ImageContextValue } from '@storybook/nextjs/image-context'; import type * as _NextImage from 'next/image'; // @ts-ignore import is aliased in webpack config diff --git a/code/frameworks/nextjs/src/images/next-legacy-image.tsx b/code/frameworks/nextjs/src/images/next-legacy-image.tsx index 8a81fb7537f2..6681f405843a 100644 --- a/code/frameworks/nextjs/src/images/next-legacy-image.tsx +++ b/code/frameworks/nextjs/src/images/next-legacy-image.tsx @@ -1,9 +1,8 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import React from 'react'; -// @ts-ignore-error (this only errors during compilation for production) -// eslint-disable-next-line import/no-extraneous-dependencies -import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image-context'; +// @ts-ignore-error (only a problem in production builds) +import { ImageContext as ImageContextValue } from '@storybook/nextjs/image-context'; import type * as _NextLegacyImage from 'next/legacy/image'; // @ts-ignore import is aliased in webpack config diff --git a/code/frameworks/nextjs/src/images/webpack.ts b/code/frameworks/nextjs/src/images/webpack.ts index 5800d4bc310e..91c848903a3c 100644 --- a/code/frameworks/nextjs/src/images/webpack.ts +++ b/code/frameworks/nextjs/src/images/webpack.ts @@ -1,4 +1,5 @@ import { resolve as resolvePath } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { NextConfig } from 'next'; import semver from 'semver'; @@ -18,14 +19,14 @@ const configureImageDefaults = (baseConfig: WebpackConfig): void => { const resolve = baseConfig.resolve ?? {}; resolve.alias = { ...resolve.alias, - 'sb-original/next/image': require.resolve('next/image'), + 'sb-original/next/image': fileURLToPath(import.meta.resolve('next/image')), 'next/image': resolvePath(__dirname, './images/next-image'), }; if (semver.satisfies(version, '>=13.0.0')) { resolve.alias = { ...resolve.alias, - 'sb-original/next/legacy/image': require.resolve('next/legacy/image'), + 'sb-original/next/legacy/image': fileURLToPath(import.meta.resolve('next/legacy/image')), 'next/legacy/image': resolvePath(__dirname, './images/next-legacy-image'), }; } @@ -56,7 +57,7 @@ const configureStaticImageImport = (baseConfig: WebpackConfig, nextConfig: NextC issuer: { not: /\.(css|scss|sass)$/ }, use: [ { - loader: require.resolve('@storybook/nextjs/next-image-loader-stub.js'), + loader: fileURLToPath(import.meta.resolve('@storybook/nextjs/next-image-loader-stub.js')), options: { filename: assetRule.generator?.filename ?? fallbackFilename, nextConfig, diff --git a/code/frameworks/nextjs/src/next-image-loader-stub.ts b/code/frameworks/nextjs/src/next-image-loader-stub.ts index e85414c85d15..f19239280b02 100644 --- a/code/frameworks/nextjs/src/next-image-loader-stub.ts +++ b/code/frameworks/nextjs/src/next-image-loader-stub.ts @@ -72,4 +72,4 @@ const nextImageLoaderStub: RawLoaderDefinition = async function N nextImageLoaderStub.raw = true; -export = nextImageLoaderStub; +export default nextImageLoaderStub; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 1956b978a37a..04ee468163b7 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -1,6 +1,7 @@ // https://storybook.js.org/docs/react/addons/writing-presets import { existsSync } from 'node:fs'; import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import { getProjectRoot } from 'storybook/internal/common'; import { logger } from 'storybook/internal/node-logger'; @@ -30,7 +31,7 @@ import type { FrameworkOptions, StorybookConfig } from './types'; import { configureRuntimeNextjsVersionResolution, getNextjsVersion } from './utils'; export const addons: PresetProperty<'addons'> = [ - dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), + dirname(fileURLToPath(import.meta.resolve('@storybook/preset-react-webpack/package.json'))), ]; export const core: PresetProperty<'core'> = async (config, options) => { @@ -39,22 +40,17 @@ export const core: PresetProperty<'core'> = async (config, options) => { return { ...config, builder: { - name: dirname( - require.resolve(join('@storybook/builder-webpack5', 'package.json')) - ) as '@storybook/builder-webpack5', + name: fileURLToPath(import.meta.resolve('@storybook/builder-webpack5')), options: { ...(typeof framework === 'string' ? {} : framework.options.builder || {}), }, }, - renderer: dirname(require.resolve(join('@storybook/react', 'package.json'))), + renderer: fileURLToPath(import.meta.resolve('@storybook/react/preset')), }; }; -export const previewAnnotations: PresetProperty<'previewAnnotations'> = ( - entry = [], - { features } -) => { - const nextDir = dirname(require.resolve('@storybook/nextjs/package.json')); +export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => { + const nextDir = dirname(fileURLToPath(import.meta.resolve('@storybook/nextjs/package.json'))); const result = [...entry, join(nextDir, 'dist/preview.mjs')]; return result; }; @@ -83,7 +79,8 @@ export const babel: PresetProperty<'babel'> = async (baseConfig: TransformOption (preset) => !( (isPresetConfigItem(preset) && - (preset as ConfigItem).file?.request === require.resolve('@babel/preset-react')) || + (preset as ConfigItem).file?.request === + fileURLToPath(import.meta.resolve('@babel/preset-react'))) || isNextBabelConfig(preset) ) ) ?? []; diff --git a/code/frameworks/nextjs/src/rsc/webpack.ts b/code/frameworks/nextjs/src/rsc/webpack.ts index 1b6502266e73..675e57f0784c 100644 --- a/code/frameworks/nextjs/src/rsc/webpack.ts +++ b/code/frameworks/nextjs/src/rsc/webpack.ts @@ -1,9 +1,11 @@ +import { fileURLToPath } from 'node:url'; + import type { Configuration as WebpackConfig } from 'webpack'; export const configureRSC = (baseConfig: WebpackConfig): void => { const resolve = baseConfig.resolve ?? {}; resolve.alias = { ...resolve.alias, - 'server-only$': require.resolve('./rsc/server-only.js'), + 'server-only$': fileURLToPath(import.meta.resolve('./rsc/server-only.js')), }; }; diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 68a9c05e5029..44b1fe6700a0 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -1,4 +1,5 @@ import { join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import { getProjectRoot } from 'storybook/internal/common'; import type { Options } from 'storybook/internal/types'; @@ -6,7 +7,7 @@ import type { Options } from 'storybook/internal/types'; import { getVirtualModules } from '@storybook/builder-webpack5'; import type { NextConfig } from 'next'; -import loadJsConfig from 'next/dist/build/load-jsconfig'; +import loadJsConfig from 'next/dist/build/load-jsconfig.js'; import type { Configuration as WebpackConfig } from 'webpack'; export const configureSWCLoader = async ( @@ -37,7 +38,7 @@ export const configureSWCLoader = async ( use: { // we use our own patch because we need to remove tracing from the original code // which is not possible otherwise - loader: require.resolve('./swc/next-swc-loader-patch.js'), + loader: fileURLToPath(import.meta.resolve('./swc/next-swc-loader-patch.js')), options: { isServer: false, rootDir: dir, @@ -46,7 +47,7 @@ export const configureSWCLoader = async ( hasReactRefresh: isDevelopment, jsConfig, nextConfig, - supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers( + supportedBrowsers: (await import('next/dist/build/utils')).getSupportedBrowsers( dir, isDevelopment ), diff --git a/code/frameworks/nextjs/src/utils.ts b/code/frameworks/nextjs/src/utils.ts index 198917513166..1633bd1b9ea2 100644 --- a/code/frameworks/nextjs/src/utils.ts +++ b/code/frameworks/nextjs/src/utils.ts @@ -5,12 +5,12 @@ import { getProjectRoot } from 'storybook/internal/common'; import type { NextConfig } from 'next'; import { PHASE_DEVELOPMENT_SERVER } from 'next/constants'; import loadConfig from 'next/dist/server/config'; -import { DefinePlugin } from 'webpack'; +import webpack from 'webpack'; import type { Configuration as WebpackConfig } from 'webpack'; export const configureRuntimeNextjsVersionResolution = (baseConfig: WebpackConfig): void => { baseConfig.plugins?.push( - new DefinePlugin({ + new webpack.DefinePlugin({ 'process.env.__NEXT_VERSION': JSON.stringify(getNextjsVersion()), }) ); diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 3018328077d7..f51d43180dcb 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -19,20 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -44,7 +42,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", @@ -66,11 +64,10 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/preset.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/frameworks/preact-vite/preset.js b/code/frameworks/preact-vite/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/preact-vite/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/preact-vite/src/preset.ts b/code/frameworks/preact-vite/src/preset.ts index 18d7c604cf87..81ad320a4591 100644 --- a/code/frameworks/preact-vite/src/preset.ts +++ b/code/frameworks/preact-vite/src/preset.ts @@ -1,15 +1,12 @@ -import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; import type { StorybookConfig } from './types'; -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - export const core: PresetProperty<'core'> = { - builder: getAbsolutePath('@storybook/builder-vite'), - renderer: getAbsolutePath('@storybook/preact'), + builder: fileURLToPath(import.meta.resolve('@storybook/builder-vite')), + renderer: fileURLToPath(import.meta.resolve('@storybook/preact/preset')), }; export const viteFinal: StorybookConfig['viteFinal'] = async (config) => { diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 6a49369f8852..2009f8a6d45d 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -19,21 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -44,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", @@ -67,11 +64,10 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/preset.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/frameworks/preact-webpack5/preset.js b/code/frameworks/preact-webpack5/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/preact-webpack5/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/preact-webpack5/src/preset.ts b/code/frameworks/preact-webpack5/src/preset.ts index e3c5e48087cc..8175194a128d 100644 --- a/code/frameworks/preact-webpack5/src/preset.ts +++ b/code/frameworks/preact-webpack5/src/preset.ts @@ -1,12 +1,10 @@ -import { dirname, join } from 'node:path'; +import { dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - export const addons: PresetProperty<'addons'> = [ - getAbsolutePath('@storybook/preset-preact-webpack'), + dirname(fileURLToPath(import.meta.resolve('@storybook/preset-preact-webpack/package.json'))), ]; export const core: PresetProperty<'core'> = async (config, options) => { @@ -15,9 +13,9 @@ export const core: PresetProperty<'core'> = async (config, options) => { return { ...config, builder: { - name: getAbsolutePath('@storybook/builder-webpack5'), + name: fileURLToPath(import.meta.resolve('@storybook/builder-webpack5')), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: getAbsolutePath('@storybook/preact'), + renderer: fileURLToPath(import.meta.resolve('@storybook/preact/preset')), }; }; diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 82abefbbc0eb..b25735610099 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -19,21 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -44,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0", @@ -75,11 +72,10 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/preset.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/frameworks/react-vite/preset.js b/code/frameworks/react-vite/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/react-vite/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/react-vite/src/preset.ts b/code/frameworks/react-vite/src/preset.ts index cef1a270f33b..2c76440d6dc2 100644 --- a/code/frameworks/react-vite/src/preset.ts +++ b/code/frameworks/react-vite/src/preset.ts @@ -1,15 +1,12 @@ -import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; import type { StorybookConfig } from './types'; -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - export const core: PresetProperty<'core'> = { - builder: getAbsolutePath('@storybook/builder-vite'), - renderer: getAbsolutePath('@storybook/react'), + builder: fileURLToPath(import.meta.resolve('@storybook/builder-vite')), + renderer: fileURLToPath(import.meta.resolve('@storybook/react/preset')), }; export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => { @@ -20,18 +17,20 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets 'typescript', {} ); - let typescriptPresent; + let typescriptPresent = false; + try { + import.meta.resolve('typescript'); + typescriptPresent = true; + } catch (e) {} try { require.resolve('typescript'); typescriptPresent = true; - } catch (e) { - typescriptPresent = false; - } + } catch (e) {} if (reactDocgenOption === 'react-docgen-typescript' && typescriptPresent) { plugins.push( - require('@joshwooding/vite-plugin-react-docgen-typescript')({ + (await import('@joshwooding/vite-plugin-react-docgen-typescript')).default({ ...reactDocgenTypescriptOptions, // We *need* this set so that RDT returns default values in the same format as react-docgen savePropValueAsString: true, diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index cbc06816fbf3..47f2b5334de8 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -19,21 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -44,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", @@ -70,11 +67,10 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/preset.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/frameworks/react-webpack5/preset.js b/code/frameworks/react-webpack5/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/react-webpack5/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/react-webpack5/src/preset.ts b/code/frameworks/react-webpack5/src/preset.ts index 9e233459c10b..a8975d670aa0 100644 --- a/code/frameworks/react-webpack5/src/preset.ts +++ b/code/frameworks/react-webpack5/src/preset.ts @@ -1,14 +1,11 @@ -import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; import type { StorybookConfig } from './types'; -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - export const addons: PresetProperty<'addons'> = [ - getAbsolutePath('@storybook/preset-react-webpack'), + fileURLToPath(import.meta.resolve('@storybook/preset-react-webpack')), ]; export const core: PresetProperty<'core'> = async (config, options) => { @@ -17,10 +14,10 @@ export const core: PresetProperty<'core'> = async (config, options) => { return { ...config, builder: { - name: getAbsolutePath('@storybook/builder-webpack5'), + name: fileURLToPath(import.meta.resolve('@storybook/builder-webpack5')), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: getAbsolutePath('@storybook/react'), + renderer: fileURLToPath(import.meta.resolve('@storybook/react/preset')), }; }; @@ -29,7 +26,7 @@ export const webpack: StorybookConfig['webpack'] = async (config) => { config.resolve.alias = { ...config.resolve?.alias, - '@storybook/react': getAbsolutePath('@storybook/react'), + '@storybook/react': fileURLToPath(import.meta.resolve('@storybook/react')), }; return config; }; diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 13864158fc98..857c1bd2949c 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -19,21 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -44,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", @@ -65,11 +62,10 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/preset.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/frameworks/server-webpack5/preset.js b/code/frameworks/server-webpack5/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/server-webpack5/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/server-webpack5/src/preset.ts b/code/frameworks/server-webpack5/src/preset.ts index 689a984336e1..7a172bf07722 100644 --- a/code/frameworks/server-webpack5/src/preset.ts +++ b/code/frameworks/server-webpack5/src/preset.ts @@ -1,12 +1,9 @@ -import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - export const addons: PresetProperty<'addons'> = [ - getAbsolutePath('@storybook/preset-server-webpack'), + fileURLToPath(import.meta.resolve('@storybook/preset-server-webpack')), ]; export const core: PresetProperty<'core'> = async (config, options) => { @@ -15,9 +12,9 @@ export const core: PresetProperty<'core'> = async (config, options) => { return { ...config, builder: { - name: getAbsolutePath('@storybook/builder-webpack5'), + name: fileURLToPath(import.meta.resolve('@storybook/builder-webpack5')), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: getAbsolutePath('@storybook/server'), + renderer: fileURLToPath(import.meta.resolve('@storybook/server/preset')), }; }; diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index a558a42cedc6..eb1f2f13f89b 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -19,21 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -44,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", @@ -76,11 +73,10 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/preset.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/frameworks/svelte-vite/preset.js b/code/frameworks/svelte-vite/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/svelte-vite/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index c153bd9d8b28..47f9b4a271a9 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -1,10 +1,12 @@ import { readFileSync } from 'node:fs'; +import { createRequire } from 'node:module'; import { basename, relative } from 'node:path'; import { logger } from 'storybook/internal/node-logger'; import MagicString from 'magic-string'; -import { replace, typescript } from 'svelte-preprocess'; +import replace from 'svelte-preprocess/dist/processors/replace.js'; +import typescript from 'svelte-preprocess/dist/processors/typescript.js'; import { preprocess } from 'svelte/compiler'; import type { JSDocType, @@ -17,6 +19,8 @@ import type { PluginOption } from 'vite'; import { type Docgen, type Type, createDocgenCache, generateDocgen } from './generateDocgen'; +const require = createRequire(import.meta.url); + /* * Patch sveltedoc-parser internal options. * Waiting for a fix for https://github.com/alexprey/sveltedoc-parser/issues/87 diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts index c50f86a5eabd..6b91106a0c12 100644 --- a/code/frameworks/svelte-vite/src/preset.ts +++ b/code/frameworks/svelte-vite/src/preset.ts @@ -1,4 +1,4 @@ -import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; @@ -6,12 +6,9 @@ import { svelteDocgen } from './plugins/svelte-docgen'; import type { StorybookConfig } from './types'; import { handleSvelteKit } from './utils'; -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - export const core: PresetProperty<'core'> = { - builder: getAbsolutePath('@storybook/builder-vite'), - renderer: getAbsolutePath('@storybook/svelte'), + builder: fileURLToPath(import.meta.resolve('@storybook/builder-vite')), + renderer: fileURLToPath(import.meta.resolve('@storybook/svelte/preset')), }; export const viteFinal: NonNullable = async (config, options) => { diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 44d7d633792c..4b91324a0419 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -19,21 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "defaul;t": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "defaul;t": "./dist/preset.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -44,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", @@ -68,11 +65,10 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/preset.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/frameworks/svelte-webpack5/preset.js b/code/frameworks/svelte-webpack5/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/svelte-webpack5/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/svelte-webpack5/src/preset.ts b/code/frameworks/svelte-webpack5/src/preset.ts index df46921663ed..1d6395757c62 100644 --- a/code/frameworks/svelte-webpack5/src/preset.ts +++ b/code/frameworks/svelte-webpack5/src/preset.ts @@ -1,12 +1,9 @@ -import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - export const addons: PresetProperty<'addons'> = [ - getAbsolutePath('@storybook/preset-svelte-webpack'), + fileURLToPath(import.meta.resolve('@storybook/preset-svelte-webpack')), ]; export const core: PresetProperty<'core'> = async (config, options) => { @@ -15,9 +12,9 @@ export const core: PresetProperty<'core'> = async (config, options) => { return { ...config, builder: { - name: getAbsolutePath('@storybook/builder-webpack5'), + name: fileURLToPath(import.meta.resolve('@storybook/builder-webpack5')), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: getAbsolutePath('@storybook/svelte'), + renderer: fileURLToPath(import.meta.resolve('@storybook/svelte/preset')), }; }; diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index b37774df6785..6a5a09c5ec3e 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -22,29 +22,20 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "node": "./dist/index.js", - "require": "./dist/index.js" - }, - "./dist/preview.mjs": { - "import": "./dist/preview.mjs" - }, - "./preset": { - "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/index.js" }, + "./preview": "./dist/preview.js", + "./preset": "./dist/preset.js", "./vite-plugin": { "types": "./dist/vite-plugin.d.ts", - "require": "./dist/vite-plugin.js", - "import": "./dist/vite-plugin.mjs" + "default": "./dist/vite-plugin.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/frameworks/sveltekit/preset.js b/code/frameworks/sveltekit/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/sveltekit/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/sveltekit/src/preset.ts b/code/frameworks/sveltekit/src/preset.ts index 263a6b35429d..84d72217211e 100644 --- a/code/frameworks/sveltekit/src/preset.ts +++ b/code/frameworks/sveltekit/src/preset.ts @@ -1,25 +1,21 @@ -import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; import { withoutVitePlugins } from '@storybook/builder-vite'; -// @ts-expect-error -- TS picks up the type from preset.js instead of dist/preset.d.ts import { viteFinal as svelteViteFinal } from '@storybook/svelte-vite/preset'; import { configOverrides } from './plugins/config-overrides'; import { mockSveltekitStores } from './plugins/mock-sveltekit-stores'; import { type StorybookConfig } from './types'; -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - export const core: PresetProperty<'core'> = { - builder: getAbsolutePath('@storybook/builder-vite'), - renderer: getAbsolutePath('@storybook/svelte'), + builder: fileURLToPath(import.meta.resolve('@storybook/builder-vite')), + renderer: fileURLToPath(import.meta.resolve('@storybook/svelte/preset')), }; export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => [ ...entry, - join(dirname(require.resolve('@storybook/sveltekit/package.json')), 'dist/preview.mjs'), + fileURLToPath(import.meta.resolve('@storybook/sveltekit/preview')), ]; export const viteFinal: NonNullable = async (config, options) => { diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index c63f0a041d50..34ae6214b7e3 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -19,26 +19,22 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./vite-plugin": { "types": "./dist/vite-plugin.d.ts", - "require": "./dist/vite-plugin.js", - "import": "./dist/vite-plugin.mjs" + "default": "./dist/vite-plugin.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -49,7 +45,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", @@ -77,12 +73,11 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/preset.ts", "./src/vite-plugin.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/frameworks/vue3-vite/preset.js b/code/frameworks/vue3-vite/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/vue3-vite/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts index 8bbaf394d442..a354bcdd2905 100644 --- a/code/frameworks/vue3-vite/src/preset.ts +++ b/code/frameworks/vue3-vite/src/preset.ts @@ -1,4 +1,4 @@ -import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; @@ -9,12 +9,9 @@ import { vueDocgen } from './plugins/vue-docgen'; import { templateCompilation } from './plugins/vue-template'; import type { FrameworkOptions, StorybookConfig, VueDocgenPlugin } from './types'; -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - export const core: PresetProperty<'core'> = { - builder: getAbsolutePath('@storybook/builder-vite'), - renderer: getAbsolutePath('@storybook/vue3'), + builder: fileURLToPath(import.meta.resolve('@storybook/builder-vite')), + renderer: fileURLToPath(import.meta.resolve('@storybook/vue3/preset')), }; export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => { diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index ad70b4dffea9..378f2c9e79f1 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -19,21 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -44,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", @@ -69,11 +66,10 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/preset.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/frameworks/vue3-webpack5/preset.js b/code/frameworks/vue3-webpack5/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/vue3-webpack5/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/vue3-webpack5/src/preset.ts b/code/frameworks/vue3-webpack5/src/preset.ts index bbb02cb9029f..31cbb48f4693 100644 --- a/code/frameworks/vue3-webpack5/src/preset.ts +++ b/code/frameworks/vue3-webpack5/src/preset.ts @@ -1,11 +1,10 @@ -import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - -export const addons: PresetProperty<'addons'> = [getAbsolutePath('@storybook/preset-vue3-webpack')]; +export const addons: PresetProperty<'addons'> = [ + fileURLToPath(import.meta.resolve('@storybook/preset-vue3-webpack')), +]; export const core: PresetProperty<'core'> = async (config, options) => { const framework = await options.presets.apply('framework'); @@ -13,10 +12,10 @@ export const core: PresetProperty<'core'> = async (config, options) => { return { ...config, builder: { - name: getAbsolutePath('@storybook/builder-webpack5'), + name: fileURLToPath(import.meta.resolve('@storybook/builder-webpack5')), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: getAbsolutePath('@storybook/vue3'), + renderer: fileURLToPath(import.meta.resolve('@storybook/vue3/preset')), }; }; diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 3912f8b208aa..3e304dd33b61 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -19,21 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -44,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", @@ -65,11 +62,10 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/preset.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/frameworks/web-components-vite/preset.js b/code/frameworks/web-components-vite/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/web-components-vite/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/web-components-vite/src/preset.ts b/code/frameworks/web-components-vite/src/preset.ts index 397deddb6e4b..48f4fb118f84 100644 --- a/code/frameworks/web-components-vite/src/preset.ts +++ b/code/frameworks/web-components-vite/src/preset.ts @@ -1,11 +1,8 @@ -import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - export const core: PresetProperty<'core'> = { - builder: getAbsolutePath('@storybook/builder-vite'), - renderer: getAbsolutePath('@storybook/web-components'), + builder: fileURLToPath(import.meta.resolve('@storybook/builder-vite')), + renderer: fileURLToPath(import.meta.resolve('@storybook/web-components/preset')), }; diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index ee925175a45a..80b15f4e82bd 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -22,21 +22,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -47,7 +44,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", @@ -69,11 +66,10 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/preset.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/frameworks/web-components-webpack5/preset.js b/code/frameworks/web-components-webpack5/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/frameworks/web-components-webpack5/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/web-components-webpack5/src/preset.ts b/code/frameworks/web-components-webpack5/src/preset.ts index b005060fa88c..ef1eaf740c92 100644 --- a/code/frameworks/web-components-webpack5/src/preset.ts +++ b/code/frameworks/web-components-webpack5/src/preset.ts @@ -1,19 +1,16 @@ -import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - export const core: PresetProperty<'core'> = async (config, options) => { const framework = await options.presets.apply('framework'); return { ...config, builder: { - name: getAbsolutePath('@storybook/builder-webpack5'), + name: fileURLToPath(import.meta.resolve('@storybook/builder-webpack5')), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: getAbsolutePath('@storybook/web-components'), + renderer: fileURLToPath(import.meta.resolve('@storybook/web-components/preset')), }; }; diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index 87c2493853b9..7d6b693b65e0 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -20,16 +20,14 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -40,7 +38,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/csf": "^0.1.11", @@ -78,7 +76,7 @@ "access": "public" }, "bundler": { - "entries": [ + "exportEntries": [ "./src/index.ts" ] }, diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index c951beec6e70..0e4d81edcf2d 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -24,7 +24,7 @@ "exports": { "./bin/index.cjs": { "node": "./bin/index.cjs", - "require": "./bin/index.cjs" + "default": "./bin/index.cjs" }, "./package.json": "./package.json" }, @@ -37,7 +37,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@babel/core": "^7.24.4", @@ -74,13 +74,9 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/bin/index.ts" - ], - "platform": "node", - "formats": [ - "esm" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" diff --git a/code/lib/cli-storybook/src/postinstallAddon.ts b/code/lib/cli-storybook/src/postinstallAddon.ts index 50719c29e29c..85238b218618 100644 --- a/code/lib/cli-storybook/src/postinstallAddon.ts +++ b/code/lib/cli-storybook/src/postinstallAddon.ts @@ -1,9 +1,12 @@ import type { PostinstallOptions } from './add'; export const postinstallAddon = async (addonName: string, options: PostinstallOptions) => { + let wasFound = false; + try { const modulePath = require.resolve(`${addonName}/postinstall`, { paths: [process.cwd()] }); + wasFound = true; const postinstall = require(modulePath); try { @@ -16,4 +19,22 @@ export const postinstallAddon = async (addonName: string, options: PostinstallOp } catch (e) { // no postinstall script } + + if (wasFound) { + return; + } + + try { + const { default: postinstall } = await import(`${addonName}/postinstall`); + + try { + console.log(`Running postinstall script for ${addonName}`); + await postinstall(options); + } catch (e) { + console.error(`Error running postinstall script for ${addonName}`); + console.error(e); + } + } catch (e) { + // no postinstall script + } }; diff --git a/code/lib/cli/core/babel/index.cjs b/code/lib/cli/core/babel/index.cjs deleted file mode 100644 index 08406d9e434c..000000000000 --- a/code/lib/cli/core/babel/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/babel'); diff --git a/code/lib/cli/core/babel/index.js b/code/lib/cli/core/babel/index.node.js similarity index 100% rename from code/lib/cli/core/babel/index.js rename to code/lib/cli/core/babel/index.node.js diff --git a/code/lib/cli/core/builder-manager/index.cjs b/code/lib/cli/core/builder-manager/index.cjs deleted file mode 100644 index 0582f86fac91..000000000000 --- a/code/lib/cli/core/builder-manager/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/builder-manager'); diff --git a/code/lib/cli/core/builder-manager/index.js b/code/lib/cli/core/builder-manager/index.node.js similarity index 100% rename from code/lib/cli/core/builder-manager/index.js rename to code/lib/cli/core/builder-manager/index.node.js diff --git a/code/lib/cli/core/channels/index.cjs b/code/lib/cli/core/channels/index.cjs deleted file mode 100644 index 3a7134d94607..000000000000 --- a/code/lib/cli/core/channels/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/channels'); diff --git a/code/lib/cli/core/cli/bin/index.cjs b/code/lib/cli/core/cli/bin/index.cjs deleted file mode 100644 index 28b8be5e01cc..000000000000 --- a/code/lib/cli/core/cli/bin/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/cli/bin'); diff --git a/code/lib/cli/core/cli/bin/index.js b/code/lib/cli/core/cli/bin/index.node.js similarity index 100% rename from code/lib/cli/core/cli/bin/index.js rename to code/lib/cli/core/cli/bin/index.node.js diff --git a/code/lib/cli/core/cli/index.cjs b/code/lib/cli/core/cli/index.cjs deleted file mode 100644 index 023342dde38e..000000000000 --- a/code/lib/cli/core/cli/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/cli'); diff --git a/code/lib/cli/core/cli/index.js b/code/lib/cli/core/cli/index.node.js similarity index 100% rename from code/lib/cli/core/cli/index.js rename to code/lib/cli/core/cli/index.node.js diff --git a/code/lib/cli/core/client-logger/index.cjs b/code/lib/cli/core/client-logger/index.cjs deleted file mode 100644 index 59df24773ae3..000000000000 --- a/code/lib/cli/core/client-logger/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/client-logger'); diff --git a/code/lib/cli/core/common/index.cjs b/code/lib/cli/core/common/index.cjs deleted file mode 100644 index 915b490c3513..000000000000 --- a/code/lib/cli/core/common/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/common'); diff --git a/code/lib/cli/core/common/index.js b/code/lib/cli/core/common/index.node.js similarity index 100% rename from code/lib/cli/core/common/index.js rename to code/lib/cli/core/common/index.node.js diff --git a/code/lib/cli/core/components/index.cjs b/code/lib/cli/core/components/index.cjs deleted file mode 100644 index 948b1dceaa20..000000000000 --- a/code/lib/cli/core/components/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/components'); diff --git a/code/lib/cli/core/core-events/index.cjs b/code/lib/cli/core/core-events/index.cjs deleted file mode 100644 index 9db3090385a8..000000000000 --- a/code/lib/cli/core/core-events/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/core-events'); diff --git a/code/lib/cli/core/core-server/index.cjs b/code/lib/cli/core/core-server/index.cjs deleted file mode 100644 index c4a21d0d0f7d..000000000000 --- a/code/lib/cli/core/core-server/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/core-server'); diff --git a/code/lib/cli/core/core-server/index.js b/code/lib/cli/core/core-server/index.node.js similarity index 100% rename from code/lib/cli/core/core-server/index.js rename to code/lib/cli/core/core-server/index.node.js diff --git a/code/lib/cli/core/core-server/presets/common-override-preset.cjs b/code/lib/cli/core/core-server/presets/common-override-preset.cjs deleted file mode 100644 index 37b00327d4d8..000000000000 --- a/code/lib/cli/core/core-server/presets/common-override-preset.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/core-server/presets/common-override-preset'); diff --git a/code/lib/cli/core/core-server/presets/common-override-preset.js b/code/lib/cli/core/core-server/presets/common-override-preset.node.js similarity index 100% rename from code/lib/cli/core/core-server/presets/common-override-preset.js rename to code/lib/cli/core/core-server/presets/common-override-preset.node.js diff --git a/code/lib/cli/core/core-server/presets/common-preset.cjs b/code/lib/cli/core/core-server/presets/common-preset.cjs deleted file mode 100644 index f89cd2ce7968..000000000000 --- a/code/lib/cli/core/core-server/presets/common-preset.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/core-server/presets/common-preset'); diff --git a/code/lib/cli/core/core-server/presets/common-preset.js b/code/lib/cli/core/core-server/presets/common-preset.node.js similarity index 100% rename from code/lib/cli/core/core-server/presets/common-preset.js rename to code/lib/cli/core/core-server/presets/common-preset.node.js diff --git a/code/lib/cli/core/csf-tools/index.cjs b/code/lib/cli/core/csf-tools/index.cjs deleted file mode 100644 index 732eb73d92a5..000000000000 --- a/code/lib/cli/core/csf-tools/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/csf-tools'); diff --git a/code/lib/cli/core/csf-tools/index.js b/code/lib/cli/core/csf-tools/index.node.js similarity index 100% rename from code/lib/cli/core/csf-tools/index.js rename to code/lib/cli/core/csf-tools/index.node.js diff --git a/code/lib/cli/core/docs-tools/index.cjs b/code/lib/cli/core/docs-tools/index.cjs deleted file mode 100644 index 9af3433ed2d7..000000000000 --- a/code/lib/cli/core/docs-tools/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/docs-tools'); diff --git a/code/lib/cli/core/index.cjs b/code/lib/cli/core/index.cjs deleted file mode 100644 index 2bf20ff12ab3..000000000000 --- a/code/lib/cli/core/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/index'); diff --git a/code/lib/cli/core/index.node.js b/code/lib/cli/core/index.node.js new file mode 100644 index 000000000000..ef7916066daa --- /dev/null +++ b/code/lib/cli/core/index.node.js @@ -0,0 +1 @@ +export * from '@storybook/core/index'; diff --git a/code/lib/cli/core/manager-api/index.cjs b/code/lib/cli/core/manager-api/index.cjs deleted file mode 100644 index 663a30f0b2c5..000000000000 --- a/code/lib/cli/core/manager-api/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/manager-api'); diff --git a/code/lib/cli/core/manager/globals-module-info.cjs b/code/lib/cli/core/manager/globals-module-info.cjs deleted file mode 100644 index 3b115408b001..000000000000 --- a/code/lib/cli/core/manager/globals-module-info.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/manager/globals-module-info'); diff --git a/code/lib/cli/core/manager/globals-module-info.js b/code/lib/cli/core/manager/globals-module-info.node.js similarity index 100% rename from code/lib/cli/core/manager/globals-module-info.js rename to code/lib/cli/core/manager/globals-module-info.node.js diff --git a/code/lib/cli/core/manager/globals.cjs b/code/lib/cli/core/manager/globals.cjs deleted file mode 100644 index 3dc797bf4cd7..000000000000 --- a/code/lib/cli/core/manager/globals.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/manager/globals'); diff --git a/code/lib/cli/core/manager/globals.js b/code/lib/cli/core/manager/globals.node.js similarity index 100% rename from code/lib/cli/core/manager/globals.js rename to code/lib/cli/core/manager/globals.node.js diff --git a/code/lib/cli/core/node-logger/index.cjs b/code/lib/cli/core/node-logger/index.cjs deleted file mode 100644 index df7718d330bf..000000000000 --- a/code/lib/cli/core/node-logger/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/node-logger'); diff --git a/code/lib/cli/core/node-logger/index.js b/code/lib/cli/core/node-logger/index.node.js similarity index 100% rename from code/lib/cli/core/node-logger/index.js rename to code/lib/cli/core/node-logger/index.node.js diff --git a/code/lib/cli/core/preview-api/index.cjs b/code/lib/cli/core/preview-api/index.cjs deleted file mode 100644 index e966223abf1d..000000000000 --- a/code/lib/cli/core/preview-api/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/preview-api'); diff --git a/code/lib/cli/core/preview-errors.cjs b/code/lib/cli/core/preview-errors.cjs deleted file mode 100644 index 4d8c191e15d2..000000000000 --- a/code/lib/cli/core/preview-errors.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/preview-errors'); diff --git a/code/lib/cli/core/preview/globals.cjs b/code/lib/cli/core/preview/globals.cjs deleted file mode 100644 index af5d8fb28d6b..000000000000 --- a/code/lib/cli/core/preview/globals.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/preview/globals'); diff --git a/code/lib/cli/core/preview/globals.js b/code/lib/cli/core/preview/globals.node.js similarity index 100% rename from code/lib/cli/core/preview/globals.js rename to code/lib/cli/core/preview/globals.node.js diff --git a/code/lib/cli/core/router/index.cjs b/code/lib/cli/core/router/index.cjs deleted file mode 100644 index 663cce17cc32..000000000000 --- a/code/lib/cli/core/router/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/router'); diff --git a/code/lib/cli/core/server-errors.cjs b/code/lib/cli/core/server-errors.cjs deleted file mode 100644 index 867fe400c201..000000000000 --- a/code/lib/cli/core/server-errors.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/server-errors'); diff --git a/code/lib/cli/core/server-errors.js b/code/lib/cli/core/server-errors.node.js similarity index 100% rename from code/lib/cli/core/server-errors.js rename to code/lib/cli/core/server-errors.node.js diff --git a/code/lib/cli/core/telemetry/index.cjs b/code/lib/cli/core/telemetry/index.cjs deleted file mode 100644 index 10d865bd088e..000000000000 --- a/code/lib/cli/core/telemetry/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/telemetry'); diff --git a/code/lib/cli/core/telemetry/index.js b/code/lib/cli/core/telemetry/index.node.js similarity index 100% rename from code/lib/cli/core/telemetry/index.js rename to code/lib/cli/core/telemetry/index.node.js diff --git a/code/lib/cli/core/theming/create.cjs b/code/lib/cli/core/theming/create.cjs deleted file mode 100644 index 27f33e6b1cd7..000000000000 --- a/code/lib/cli/core/theming/create.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/theming/create'); diff --git a/code/lib/cli/core/theming/index.cjs b/code/lib/cli/core/theming/index.cjs deleted file mode 100644 index 9bbd86c495ec..000000000000 --- a/code/lib/cli/core/theming/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/theming'); diff --git a/code/lib/cli/core/types/index.cjs b/code/lib/cli/core/types/index.cjs deleted file mode 100644 index b694805927ff..000000000000 --- a/code/lib/cli/core/types/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/core/types'); diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 51e7d328c087..bc665b695bcf 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -41,152 +41,117 @@ "./package.json": "./package.json", "./core": { "types": "./core/index.d.ts", - "import": "./core/index.js", - "require": "./core/index.cjs" + "node": "./core/index.node.js", + "default": "./core/index.js" }, "./internal/node-logger": { "types": "./core/node-logger/index.d.ts", - "import": "./core/node-logger/index.js", - "require": "./core/node-logger/index.cjs" + "default": "./core/node-logger/index.node.js" }, "./internal/client-logger": { "types": "./core/client-logger/index.d.ts", - "import": "./core/client-logger/index.js", - "require": "./core/client-logger/index.cjs" + "default": "./core/client-logger/index.js" }, "./internal/core-server": { "types": "./core/core-server/index.d.ts", - "import": "./core/core-server/index.js", - "require": "./core/core-server/index.cjs" - }, - "./internal/core-server/presets/common-preset": { - "import": "./core/core-server/presets/common-preset.js", - "require": "./core/core-server/presets/common-preset.cjs" - }, - "./internal/core-server/presets/common-manager": { - "import": "./core/core-server/presets/common-manager.js" - }, - "./internal/core-server/presets/common-override-preset": { - "import": "./core/core-server/presets/common-override-preset.js", - "require": "./core/core-server/presets/common-override-preset.cjs" + "default": "./core/core-server/index.node.js" }, + "./internal/core-server/presets/common-preset": "./core/core-server/presets/common-preset.node.js", + "./internal/core-server/presets/common-manager": "./core/core-server/presets/common-manager.js", + "./internal/core-server/presets/common-override-preset": "./core/core-server/presets/common-override-preset.node.js", "./internal/core-events": { "types": "./core/core-events/index.d.ts", - "import": "./core/core-events/index.js", - "require": "./core/core-events/index.cjs" + "default": "./core/core-events/index.js" }, "./internal/manager-errors": { "types": "./core/manager-errors.d.ts", - "import": "./core/manager-errors.js" + "default": "./core/manager-errors.js" }, "./internal/preview-errors": { "types": "./core/preview-errors.d.ts", - "import": "./core/preview-errors.js", - "require": "./core/preview-errors.cjs" + "default": "./core/preview-errors.js" }, "./internal/server-errors": { "types": "./core/server-errors.d.ts", - "import": "./core/server-errors.js", - "require": "./core/server-errors.cjs" + "default": "./core/server-errors.node.js" }, "./internal/channels": { "types": "./core/channels/index.d.ts", - "import": "./core/channels/index.js", - "require": "./core/channels/index.cjs" + "default": "./core/channels/index.js" }, "./internal/types": { "types": "./core/types/index.d.ts", - "import": "./core/types/index.js", - "require": "./core/types/index.cjs" + "default": "./core/types/index.js" }, "./internal/csf-tools": { "types": "./core/csf-tools/index.d.ts", - "import": "./core/csf-tools/index.js", - "require": "./core/csf-tools/index.cjs" + "default": "./core/csf-tools/index.node.js" }, "./internal/common": { "types": "./core/common/index.d.ts", - "import": "./core/common/index.js", - "require": "./core/common/index.cjs" + "default": "./core/common/index.node.js" }, "./internal/builder-manager": { "types": "./core/builder-manager/index.d.ts", - "import": "./core/builder-manager/index.js", - "require": "./core/builder-manager/index.cjs" + "default": "./core/builder-manager/index.node.js" }, "./internal/telemetry": { "types": "./core/telemetry/index.d.ts", - "import": "./core/telemetry/index.js", - "require": "./core/telemetry/index.cjs" + "default": "./core/telemetry/index.node.js" }, "./internal/preview-api": { "types": "./core/preview-api/index.d.ts", - "import": "./core/preview-api/index.js", - "require": "./core/preview-api/index.cjs" + "default": "./core/preview-api/index.js" }, "./internal/manager-api": { "types": "./core/manager-api/index.d.ts", - "import": "./core/manager-api/index.js", - "require": "./core/manager-api/index.cjs" + "default": "./core/manager-api/index.js" }, "./internal/router": { "types": "./core/router/index.d.ts", - "import": "./core/router/index.js", - "require": "./core/router/index.cjs" + "default": "./core/router/index.js" }, "./internal/components": { "types": "./core/components/index.d.ts", - "import": "./core/components/index.js", - "require": "./core/components/index.cjs" + "default": "./core/components/index.js" }, "./internal/theming": { "types": "./core/theming/index.d.ts", - "import": "./core/theming/index.js", - "require": "./core/theming/index.cjs" + "default": "./core/theming/index.js" }, "./internal/theming/create": { "types": "./core/theming/create.d.ts", - "import": "./core/theming/create.js", - "require": "./core/theming/create.cjs" + "default": "./core/theming/create.js" }, "./internal/docs-tools": { "types": "./core/docs-tools/index.d.ts", - "import": "./core/docs-tools/index.js", - "require": "./core/docs-tools/index.cjs" + "default": "./core/docs-tools/index.js" }, "./internal/manager/globals-module-info": { "types": "./core/manager/globals-module-info.d.ts", - "import": "./core/manager/globals-module-info.js", - "require": "./core/manager/globals-module-info.cjs" + "default": "./core/manager/globals-module-info.node.js" }, "./internal/preview/globals": { "types": "./core/preview/globals.d.ts", - "import": "./core/preview/globals.js", - "require": "./core/preview/globals.cjs" + "default": "./core/preview/globals.node.js" }, "./internal/cli": { "types": "./core/cli/index.d.ts", - "import": "./core/cli/index.js", - "require": "./core/cli/index.cjs" + "default": "./core/cli/index.node.js" }, "./internal/cli/bin": { "types": "./core/cli/bin/index.d.ts", - "import": "./core/cli/bin/index.js", - "require": "./core/cli/bin/index.cjs" + "default": "./core/cli/bin/index.node.js" }, "./internal/manager/globals": { "types": "./core/manager/globals.d.ts", - "import": "./core/manager/globals.js", - "require": "./core/manager/globals.cjs" + "default": "./core/manager/globals.node.js" }, "./internal/babel": { "types": "./core/babel/index.d.ts", - "import": "./core/babel/index.js", - "require": "./core/babel/index.cjs" + "default": "./core/babel/index.node.js" } }, - "main": "dist/index.cjs", - "module": "dist/index.js", "types": "dist/index.d.ts", "typesVersions": { "*": { @@ -310,7 +275,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/core": "workspace:*" @@ -331,14 +296,10 @@ }, "bundler": { "pre": "./scripts/update-core-portal.ts", - "entries": [ + "nodeEntries": [ "./src/proxy.ts", "./src/core-path.ts", "./src/index.ts" - ], - "platform": "node", - "formats": [ - "esm" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" diff --git a/code/lib/cli/scripts/update-core-portal.ts b/code/lib/cli/scripts/update-core-portal.ts index 520bc3587848..006f4af57cdc 100644 --- a/code/lib/cli/scripts/update-core-portal.ts +++ b/code/lib/cli/scripts/update-core-portal.ts @@ -42,18 +42,26 @@ async function run() { if (key === '.') { selfPackageJson.exports['./core'] = value; - await Promise.all( - Object.values(value).map(async (v) => { - await write(join(__dirname, '..', v), generateMapperContent(v)); - }) - ); + if (typeof value === 'string') { + await write(join(__dirname, '..', value), generateMapperContent(value)); + } else { + await Promise.all( + Object.values(value).map(async (v) => { + await write(join(__dirname, '..', v), generateMapperContent(v)); + }) + ); + } } else { selfPackageJson.exports[key.replace('./', './internal/')] = value; - await Promise.all( - Object.values(value).map(async (v) => { - await write(join(__dirname, '..', v), generateMapperContent(v)); - }) - ); + if (typeof value === 'string') { + await write(join(__dirname, '..', value), generateMapperContent(value)); + } else { + await Promise.all( + Object.values(value).map(async (v) => { + await write(join(__dirname, '..', v), generateMapperContent(v)); + }) + ); + } } }) ); diff --git a/code/lib/cli/scripts/utils.ts b/code/lib/cli/scripts/utils.ts index 1c27080075c5..525971bbaca7 100644 --- a/code/lib/cli/scripts/utils.ts +++ b/code/lib/cli/scripts/utils.ts @@ -12,7 +12,10 @@ export const write = async (location: string, data: string) => { return writeFile(location, data); }; -export const mapCoreExportToSelf = (map: Record) => { +export const mapCoreExportToSelf = (map: string | Record) => { + if (typeof map === 'string') { + return map.replace('./dist/', './core/'); + } return Object.entries(map).reduce>((acc, [key, input]) => { const value = input.replace('./dist/', './core/'); acc[key] = value; @@ -24,6 +27,7 @@ export const mapCoreExportToSelf = (map: Record) => { export const generateMapperContent = (input: string) => { const value = input .replace('./core/', '') + .replace('.node', '') .replace('/index', '') .replace('.cjs', '') .replace('.d.ts', '') @@ -32,9 +36,9 @@ export const generateMapperContent = (input: string) => { if (input.endsWith('.js')) { return `export * from '@storybook/core/${value}';\n`; } - if (input.endsWith('.cjs')) { - return `module.exports = require('@storybook/core/${value}');\n`; - } + // if (input.endsWith('.cjs')) { + // return `module.exports = require('@storybook/core/${value}');\n`; + // } if (input.endsWith('.d.ts')) { return dedent` export * from '@storybook/core/${value}'; diff --git a/code/lib/cli/src/core-path.ts b/code/lib/cli/src/core-path.ts index 2e413d1e445a..17f09af51e4b 100644 --- a/code/lib/cli/src/core-path.ts +++ b/code/lib/cli/src/core-path.ts @@ -1,7 +1,4 @@ -import ESM_COMPAT_ModuleA from 'node:module'; import { dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; -// @ts-expect-error (esm compat not 100% yet) -const require = ESM_COMPAT_ModuleA.createRequire(import.meta.url); - -export const corePath = dirname(require.resolve('@storybook/core/package.json')); +export const corePath = dirname(fileURLToPath(import.meta.resolve('@storybook/core/package.json'))); diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 422cb5a41b02..428e02402e64 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -20,11 +20,11 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./dist/transforms/add-component-parameters.js": "./dist/transforms/add-component-parameters.js", "./dist/transforms/csf-2-to-3.js": "./dist/transforms/csf-2-to-3.js", @@ -40,7 +40,6 @@ "./dist/transforms/upgrade-hierarchy-separators.js": "./dist/transforms/upgrade-hierarchy-separators.js", "./package.json": "./package.json" }, - "main": "dist/index.js", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -51,7 +50,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@babel/core": "^7.24.4", @@ -88,7 +87,7 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/transforms/add-component-parameters.js", "./src/transforms/csf-2-to-3.ts", @@ -102,9 +101,6 @@ "./src/transforms/update-organisation-name.js", "./src/transforms/upgrade-deprecated-types.ts", "./src/transforms/upgrade-hierarchy-separators.js" - ], - "formats": [ - "cjs" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" diff --git a/code/lib/codemod/src/index.ts b/code/lib/codemod/src/index.ts index 80bc90932918..1eb1c52a02e9 100644 --- a/code/lib/codemod/src/index.ts +++ b/code/lib/codemod/src/index.ts @@ -1,12 +1,15 @@ /* eslint import/prefer-default-export: "off" */ import { readdirSync } from 'node:fs'; import { rename as renameAsync } from 'node:fs/promises'; +import { createRequire } from 'node:module'; import { extname } from 'node:path'; import { sync as spawnSync } from 'cross-spawn'; import { jscodeshiftToPrettierParser } from './lib/utils'; +const require = createRequire(import.meta.url); + export { default as updateOrganisationName, packageNames, diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 3bb071570bbd..8c52497d227a 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -19,17 +19,14 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -41,7 +38,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@types/node": "^22.0.0", @@ -59,10 +56,9 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 73185d39bb45..24bbe3f06a0f 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -50,7 +50,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@types/semver": "^7.3.4", @@ -77,13 +77,9 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/bin/index.ts" - ], - "platform": "node", - "formats": [ - "esm" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" diff --git a/code/lib/create-storybook/src/generators/ANGULAR/index.ts b/code/lib/create-storybook/src/generators/ANGULAR/index.ts index 9525b7678986..9c68161cc8eb 100644 --- a/code/lib/create-storybook/src/generators/ANGULAR/index.ts +++ b/code/lib/create-storybook/src/generators/ANGULAR/index.ts @@ -69,7 +69,7 @@ const generator: Generator<{ projectName: string }> = async ( }, 'angular', { - extraAddons: [`@storybook/addon-onboarding`], + // extraAddons: [`@storybook/addon-onboarding`], ...(useCompodoc && { extraPackages: ['@compodoc/compodoc', '@storybook/addon-docs'] }), addScripts: false, componentsDestinationPath: root ? `${root}/src/stories` : undefined, diff --git a/code/lib/create-storybook/src/generators/NEXTJS/index.ts b/code/lib/create-storybook/src/generators/NEXTJS/index.ts index b5d64ff21f39..db756a40c031 100644 --- a/code/lib/create-storybook/src/generators/NEXTJS/index.ts +++ b/code/lib/create-storybook/src/generators/NEXTJS/index.ts @@ -20,7 +20,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { 'react', { staticDir, - extraAddons: [`@storybook/addon-onboarding`], + // extraAddons: [`@storybook/addon-onboarding`], webpackCompiler: ({ builder }) => undefined, }, 'nextjs' diff --git a/code/lib/create-storybook/src/generators/REACT/index.ts b/code/lib/create-storybook/src/generators/REACT/index.ts index f37ae562d9fe..18b650d0d3c4 100644 --- a/code/lib/create-storybook/src/generators/REACT/index.ts +++ b/code/lib/create-storybook/src/generators/REACT/index.ts @@ -12,7 +12,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'react', { extraPackages, webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), - extraAddons: [`@storybook/addon-onboarding`], + // extraAddons: [`@storybook/addon-onboarding`], }); }; diff --git a/code/lib/create-storybook/src/generators/REACT_SCRIPTS/index.ts b/code/lib/create-storybook/src/generators/REACT_SCRIPTS/index.ts index d089a3f6c190..295ce0be7d3c 100644 --- a/code/lib/create-storybook/src/generators/REACT_SCRIPTS/index.ts +++ b/code/lib/create-storybook/src/generators/REACT_SCRIPTS/index.ts @@ -48,7 +48,10 @@ const generator: Generator = async (packageManager, npmOptions, options) => { // Miscellaneous dependency to add to be sure Storybook + CRA is working fine with Yarn PnP mode extraPackages.push('prop-types'); - const extraAddons = [`@storybook/preset-create-react-app`, `@storybook/addon-onboarding`]; + const extraAddons = [ + `@storybook/preset-create-react-app`, + // `@storybook/addon-onboarding` + ]; await baseGenerator( packageManager, diff --git a/code/lib/create-storybook/src/generators/WEBPACK_REACT/index.ts b/code/lib/create-storybook/src/generators/WEBPACK_REACT/index.ts index 0a1bba56b269..4467d2139365 100644 --- a/code/lib/create-storybook/src/generators/WEBPACK_REACT/index.ts +++ b/code/lib/create-storybook/src/generators/WEBPACK_REACT/index.ts @@ -5,7 +5,7 @@ import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'react', { - extraAddons: [`@storybook/addon-onboarding`], + // extraAddons: [`@storybook/addon-onboarding`], webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), }); }; diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index cafeae30e1ff..bff284d56330 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -20,23 +20,18 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, - "./dist/webpack-loader": { + "./webpack-loader": { "types": "./dist/webpack-loader.d.ts", - "node": "./dist/webpack-loader.js", - "import": "./dist/webpack-loader.mjs", - "require": "./dist/webpack-loader.js" + "default": "./dist/webpack-loader.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -47,7 +42,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "unplugin": "^1.3.1" @@ -62,7 +57,7 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/webpack-loader.ts" ], @@ -71,8 +66,7 @@ "vite", "rollup", "esbuild" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/lib/csf-plugin/src/index.ts b/code/lib/csf-plugin/src/index.ts index 7ad2a1c96ffc..aa917c443d24 100644 --- a/code/lib/csf-plugin/src/index.ts +++ b/code/lib/csf-plugin/src/index.ts @@ -1,3 +1,5 @@ +import { fileURLToPath } from 'node:url'; + import type { EnrichCsfOptions } from 'storybook/internal/csf-tools'; import { createUnplugin } from 'unplugin'; @@ -23,7 +25,7 @@ export const unplugin = createUnplugin((options) => { enforce: 'post', use: { options, - loader: require.resolve('@storybook/csf-plugin/dist/webpack-loader'), + loader: fileURLToPath(import.meta.resolve('@storybook/csf-plugin/webpack-loader')), }, }); }, @@ -33,7 +35,7 @@ export const unplugin = createUnplugin((options) => { enforce: 'post', use: { options, - loader: require.resolve('@storybook/csf-plugin/dist/webpack-loader'), + loader: fileURLToPath(import.meta.resolve('@storybook/csf-plugin/webpack-loader')), }, }); }, diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 5b9b8a776c04..2ee38eb9f4e1 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -20,16 +20,14 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -40,7 +38,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/global": "^5.0.0", @@ -56,7 +54,7 @@ "access": "public" }, "bundler": { - "entries": [ + "exportEntries": [ "./src/index.ts" ], "noExternal": [ diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 2f4e8d6de57e..8379506f2b67 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -20,27 +20,22 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./dist/react-18.d.ts", - "import": "./dist/react-18.mjs", - "require": "./dist/react-18.js", - "node": "./dist/react-18.js" + "default": "./dist/react-18.js" }, - "./dist/react-16": { + "./react-16": { "types": "./dist/react-16.d.ts", - "import": "./dist/react-16.mjs", - "require": "./dist/react-16.js", - "node": "./dist/react-16.js" + "default": "./dist/react-16.js" }, - "./dist/preset": { + "./preset": { "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" + "default": "./dist/preset.js" }, "./package.json": "./package.json" }, - "main": "dist/react-18.js", - "module": "dist/react-18.mjs", "types": "dist/react-18.d.ts", "files": [ "dist/**/*", @@ -51,7 +46,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "devDependencies": { "typescript": "^5.3.2" @@ -65,8 +60,10 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/preset.ts", + "nodeEntries": [ + "./src/preset.ts" + ], + "exportEntries": [ "./src/react-16.tsx", "./src/react-18.tsx" ] diff --git a/code/lib/react-dom-shim/src/preset.ts b/code/lib/react-dom-shim/src/preset.ts index 9f3fbfde6bfc..2067f9a5d966 100644 --- a/code/lib/react-dom-shim/src/preset.ts +++ b/code/lib/react-dom-shim/src/preset.ts @@ -1,5 +1,6 @@ import { readFile } from 'node:fs/promises'; import { dirname, isAbsolute, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { Options } from 'storybook/internal/types'; @@ -16,7 +17,8 @@ const getIsReactVersion18or19 = async (options: Options) => { } const resolvedReact = await options.presets.apply<{ reactDom?: string }>('resolvedReact', {}); - const reactDom = resolvedReact.reactDom || dirname(require.resolve('react-dom/package.json')); + const reactDom = + resolvedReact.reactDom || dirname(fileURLToPath(import.meta.resolve('react-dom/package.json'))); if (!isAbsolute(reactDom)) { // if react-dom is not resolved to a file we can't be sure if the version in package.json is correct or even if package.json exists @@ -40,7 +42,7 @@ export const webpackFinal = async (config: any, options: Options) => { ...config.resolve, alias: { ...config.resolve?.alias, - '@storybook/react-dom-shim': '@storybook/react-dom-shim/dist/react-16', + '@storybook/react-dom-shim': '@storybook/react-dom-shim/react-16', }, }, }; @@ -55,11 +57,11 @@ export const viteFinal = async (config: any, options: Options) => { const alias = Array.isArray(config.resolve?.alias) ? config.resolve.alias.concat({ find: /^@storybook\/react-dom-shim$/, - replacement: '@storybook/react-dom-shim/dist/react-16', + replacement: '@storybook/react-dom-shim/react-16', }) : { ...config.resolve?.alias, - '@storybook/react-dom-shim': '@storybook/react-dom-shim/dist/react-16', + '@storybook/react-dom-shim': '@storybook/react-dom-shim/react-16', }; return { diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index a80cf0d2070c..d392e2561a8a 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -21,16 +21,14 @@ }, "license": "MIT", "sideEffects": false, + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.js", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -41,7 +39,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/csf": "^0.1.11", @@ -59,10 +57,9 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/lib/test/package.json b/code/lib/test/package.json index f06c2eb1cc80..91cb3f491813 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -20,17 +20,14 @@ }, "license": "MIT", "sideEffects": true, + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -40,7 +37,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/csf": "^0.1.11", @@ -66,7 +63,7 @@ "access": "public" }, "bundler": { - "entries": [ + "exportEntries": [ "./src/index.ts" ], "noExternal": [ diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 71a98b83a2eb..87b26c58c44d 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -19,23 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -46,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1", @@ -67,11 +62,8 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts" - ], - "formats": [ - "cjs" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" diff --git a/code/presets/create-react-app/src/index.ts b/code/presets/create-react-app/src/index.ts index 3dbee4f797e1..bb2eeffbe2d5 100644 --- a/code/presets/create-react-app/src/index.ts +++ b/code/presets/create-react-app/src/index.ts @@ -28,7 +28,10 @@ type ResolveLoader = Configuration['resolveLoader']; // This loader is shared by both the `managerWebpack` and `webpack` functions. const resolveLoader: ResolveLoader = { modules: ['node_modules', join(REACT_SCRIPTS_PATH, 'node_modules')], - plugins: [PnpWebpackPlugin.moduleLoader(module)], + plugins: [ + // TODO + // PnpWebpackPlugin.moduleLoader(module) + ], }; // TODO: Replace with exported type from Storybook. diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 092e2274d75a..89d1c03e4c70 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -19,23 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -46,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", @@ -67,10 +62,9 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/presets/html-webpack/preset.js b/code/presets/html-webpack/preset.js deleted file mode 100644 index f4f0e998846b..000000000000 --- a/code/presets/html-webpack/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/index'); diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index d049bb3fceb3..881a887b2772 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -19,23 +19,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -46,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", @@ -67,10 +62,9 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/presets/preact-webpack/preset.js b/code/presets/preact-webpack/preset.js deleted file mode 100644 index f4f0e998846b..000000000000 --- a/code/presets/preact-webpack/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/index'); diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 58916650914d..ffae3abd7e81 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -19,38 +19,30 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, - "./dist/framework-preset-cra": { + "./framework-preset-cra": { "types": "./dist/framework-preset-cra.d.ts", - "import": "./dist/framework-preset-cra.mjs", - "require": "./dist/framework-preset-cra.js" + "default": "./dist/framework-preset-cra.js" }, - "./dist/framework-preset-react-docs": { + "./framework-preset-react-docs": { "types": "./dist/framework-preset-react-docs.d.ts", - "import": "./dist/framework-preset-react-docs.mjs", - "require": "./dist/framework-preset-react-docs.js" + "default": "./dist/framework-preset-react-docs.js" }, - "./dist/loaders/react-docgen-loader": { + "./loaders/react-docgen-loader": { "types": "./dist/loaders/react-docgen-loader.d.ts", - "import": "./dist/loaders/react-docgen-loader.mjs", - "require": "./dist/loaders/react-docgen-loader.js" + "default": "./dist/loaders/react-docgen-loader.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -61,7 +53,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", @@ -97,13 +89,12 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/framework-preset-cra.ts", "./src/framework-preset-react-docs.ts", "./src/loaders/react-docgen-loader.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/presets/react-webpack/preset.js b/code/presets/react-webpack/preset.js deleted file mode 100644 index f4f0e998846b..000000000000 --- a/code/presets/react-webpack/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/index'); diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts index b6008be0d5c9..09f4a5f2ee30 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts @@ -48,7 +48,7 @@ describe('framework-preset-react-docgen', () => { rules: [ { exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/, - loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader', + loader: '@storybook/preset-react-webpack/loaders/react-docgen-loader', options: { babelOptions: { plugins: [], presets: [] }, debug: false }, test: /\.(cjs|mjs|tsx?|jsx?)$/, }, @@ -93,7 +93,7 @@ describe('framework-preset-react-docgen', () => { rules: [ { exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/, - loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader', + loader: '@storybook/preset-react-webpack/loaders/react-docgen-loader', options: { babelOptions: { plugins: [], presets: [] }, debug: false }, test: /\.(cjs|mjs|jsx?)$/, }, diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.ts b/code/presets/react-webpack/src/framework-preset-react-docs.ts index f4ace21d6ee4..40cd6dfe17a4 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.ts @@ -34,7 +34,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( enforce: 'pre', loader: requirer( require.resolve, - '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader' + '@storybook/preset-react-webpack/loaders/react-docgen-loader' ), options: { debug, @@ -59,7 +59,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( enforce: 'pre', loader: requirer( require.resolve, - '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader' + '@storybook/preset-react-webpack/loaders/react-docgen-loader' ), options: { debug, diff --git a/code/presets/react-webpack/src/index.ts b/code/presets/react-webpack/src/index.ts index 126e18e39df7..7d7590a3c09c 100644 --- a/code/presets/react-webpack/src/index.ts +++ b/code/presets/react-webpack/src/index.ts @@ -3,6 +3,6 @@ import type { PresetProperty } from 'storybook/internal/types'; export * from './types'; export const addons: PresetProperty<'addons'> = [ - require.resolve('@storybook/preset-react-webpack/dist/framework-preset-cra'), - require.resolve('@storybook/preset-react-webpack/dist/framework-preset-react-docs'), + require.resolve('@storybook/preset-react-webpack/framework-preset-cra'), + require.resolve('@storybook/preset-react-webpack/framework-preset-react-docs'), ]; diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 1d8202493076..b97e794852ee 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -19,28 +19,22 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./dist/loader": { "types": "./dist/loader.d.ts", - "import": "./dist/loader.mjs", - "require": "./dist/loader.js" + "default": "./dist/loader.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -51,7 +45,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", @@ -76,11 +70,10 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/loader.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/presets/server-webpack/preset.js b/code/presets/server-webpack/preset.js deleted file mode 100644 index f4f0e998846b..000000000000 --- a/code/presets/server-webpack/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/index'); diff --git a/code/presets/server-webpack/src/index.ts b/code/presets/server-webpack/src/index.ts index 61831dfa916a..24a0e015dbe1 100644 --- a/code/presets/server-webpack/src/index.ts +++ b/code/presets/server-webpack/src/index.ts @@ -8,14 +8,14 @@ export const webpack: StorybookConfig['webpack'] = (config) => { { type: 'javascript/auto', test: /\.stories\.json$/, - use: require.resolve('@storybook/preset-server-webpack/dist/loader'), + use: require.resolve('@storybook/preset-server-webpack/loader'), }, { type: 'javascript/auto', test: /\.stories\.ya?ml/, use: [ - require.resolve('@storybook/preset-server-webpack/dist/loader'), + require.resolve('@storybook/preset-server-webpack/loader'), { loader: require.resolve('yaml-loader'), options: { asJSON: true }, diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index 39cae78fdc94..03bb407e9d14 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -19,38 +19,30 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, - "./dist/framework-preset-svelte-docs": { + "./framework-preset-svelte-docs": { "types": "./dist/framework-preset-svelte-docs.d.ts", - "import": "./dist/framework-preset-svelte-docs.mjs", - "require": "./dist/framework-preset-svelte-docs.js" + "default": "./dist/framework-preset-svelte-docs.js" }, - "./dist/framework-preset-svelte": { + "./framework-preset-svelte": { "types": "./dist/framework-preset-svelte.d.ts", - "import": "./dist/framework-preset-svelte.mjs", - "require": "./dist/framework-preset-svelte.js" + "default": "./dist/framework-preset-svelte.js" }, - "./dist/svelte-docgen-loader": { + "./svelte-docgen-loader": { "types": "./dist/svelte-docgen-loader.d.ts", - "import": "./dist/svelte-docgen-loader.mjs", - "require": "./dist/svelte-docgen-loader.js" + "default": "./dist/svelte-docgen-loader.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -61,7 +53,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", @@ -85,13 +77,12 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/framework-preset-svelte-docs.ts", "./src/framework-preset-svelte.ts", "./src/svelte-docgen-loader.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/presets/svelte-webpack/preset.js b/code/presets/svelte-webpack/preset.js deleted file mode 100644 index f4f0e998846b..000000000000 --- a/code/presets/svelte-webpack/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/index'); diff --git a/code/presets/svelte-webpack/src/framework-preset-svelte-docs.ts b/code/presets/svelte-webpack/src/framework-preset-svelte-docs.ts index ef131271d074..8c19cd690352 100644 --- a/code/presets/svelte-webpack/src/framework-preset-svelte-docs.ts +++ b/code/presets/svelte-webpack/src/framework-preset-svelte-docs.ts @@ -10,7 +10,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (config, { pr ...(config.module?.rules || []), { test: /\.svelte$/, - loader: require.resolve(`@storybook/preset-svelte-webpack/dist/svelte-docgen-loader`), + loader: require.resolve(`@storybook/preset-svelte-webpack/svelte-docgen-loader`), enforce: 'post', options: svelteOptions, }, diff --git a/code/presets/svelte-webpack/src/index.ts b/code/presets/svelte-webpack/src/index.ts index 5d96a62b340d..14b5e3cb111a 100644 --- a/code/presets/svelte-webpack/src/index.ts +++ b/code/presets/svelte-webpack/src/index.ts @@ -3,6 +3,6 @@ import type { PresetProperty } from 'storybook/internal/types'; export * from './types'; export const addons: PresetProperty<'addons'> = [ - require.resolve('@storybook/preset-svelte-webpack/dist/framework-preset-svelte'), - require.resolve('@storybook/preset-svelte-webpack/dist/framework-preset-svelte-docs'), + require.resolve('@storybook/preset-svelte-webpack/framework-preset-svelte'), + require.resolve('@storybook/preset-svelte-webpack/framework-preset-svelte-docs'), ]; diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 6ed4a124ccd5..bc9b4a2b6149 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -19,33 +19,26 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./preset": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, - "./dist/framework-preset-vue3-docs": { + "./framework-preset-vue3-docs": { "types": "./dist/framework-preset-vue3-docs.d.ts", - "import": "./dist/framework-preset-vue3-docs.mjs", - "require": "./dist/framework-preset-vue3-docs.js" + "default": "./dist/framework-preset-vue3-docs.js" }, - "./dist/framework-preset-vue3": { + "./framework-preset-vue3": { "types": "./dist/framework-preset-vue3.d.ts", - "import": "./dist/framework-preset-vue3.mjs", - "require": "./dist/framework-preset-vue3.js" + "default": "./dist/framework-preset-vue3.js" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -56,7 +49,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", @@ -84,12 +77,11 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", "./src/framework-preset-vue3-docs.ts", "./src/framework-preset-vue3.ts" - ], - "platform": "node" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/presets/vue3-webpack/preset.js b/code/presets/vue3-webpack/preset.js deleted file mode 100644 index f4f0e998846b..000000000000 --- a/code/presets/vue3-webpack/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/index'); diff --git a/code/presets/vue3-webpack/src/framework-preset-vue3.ts b/code/presets/vue3-webpack/src/framework-preset-vue3.ts index ad330d67bd0b..af3a32bb693c 100644 --- a/code/presets/vue3-webpack/src/framework-preset-vue3.ts +++ b/code/presets/vue3-webpack/src/framework-preset-vue3.ts @@ -1,7 +1,7 @@ import type { StorybookConfig } from '@storybook/core-webpack'; import { VueLoaderPlugin } from 'vue-loader'; -import { DefinePlugin } from 'webpack'; +import wp from 'webpack'; export const webpack: StorybookConfig['webpack'] = (config) => { return { @@ -9,7 +9,7 @@ export const webpack: StorybookConfig['webpack'] = (config) => { plugins: [ ...(config.plugins ?? []), new VueLoaderPlugin(), - new DefinePlugin({ + new wp.DefinePlugin({ __VUE_OPTIONS_API__: JSON.stringify(true), __VUE_PROD_DEVTOOLS__: JSON.stringify(true), __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(true), diff --git a/code/presets/vue3-webpack/src/index.ts b/code/presets/vue3-webpack/src/index.ts index 1fc4d960bb22..024ed5899ce2 100644 --- a/code/presets/vue3-webpack/src/index.ts +++ b/code/presets/vue3-webpack/src/index.ts @@ -3,6 +3,6 @@ import type { PresetProperty } from 'storybook/internal/types'; export * from './types'; export const addons: PresetProperty<'addons'> = [ - require.resolve('@storybook/preset-vue3-webpack/dist/framework-preset-vue3'), - require.resolve('@storybook/preset-vue3-webpack/dist/framework-preset-vue3-docs'), + require.resolve('@storybook/preset-vue3-webpack/framework-preset-vue3'), + require.resolve('@storybook/preset-vue3-webpack/framework-preset-vue3-docs'), ]; diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 771bf8ae50b0..ff07e6c16f1e 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -19,19 +19,17 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, - "./preset": "./preset.js", - "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", - "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs", + "./preset": "./dist/preset.js", + "./entry-preview": "./dist/entry-preview.js", + "./entry-preview-docs": "./dist/entry-preview-docs.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -43,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/components": "workspace:^", @@ -66,13 +64,16 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/preset.ts", + "nodeEntries": [ + "./src/preset.ts" + ], + "previewEntries": [ "./src/entry-preview.ts", "./src/entry-preview-docs.ts" ], - "platform": "browser" + "exportEntries": [ + "./src/index.ts" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/renderers/html/preset.js b/code/renderers/html/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/renderers/html/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/renderers/html/src/preset.ts b/code/renderers/html/src/preset.ts index c6cf333ccf3c..b13dd6d41764 100644 --- a/code/renderers/html/src/preset.ts +++ b/code/renderers/html/src/preset.ts @@ -1,4 +1,4 @@ -import { join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; @@ -11,6 +11,6 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( return result .concat(input) - .concat([join(__dirname, 'entry-preview.mjs')]) - .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []); + .concat(['@storybook/html/entry-preview']) + .concat(docsEnabled ? ['@storybook/html/entry-preview-docs'] : []); }; diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 163acc9c3e79..0762ca21de34 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -19,19 +19,17 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, - "./preset": "./preset.js", - "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", - "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs", + "./preset": "./dist/preset.js", + "./entry-preview": "./dist/entry-preview.js", + "./entry-preview-docs": "./dist/entry-preview-docs.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -43,7 +41,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/components": "workspace:^", @@ -68,13 +66,16 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/preset.ts", + "nodeEntries": [ + "./src/preset.ts" + ], + "exportEntries": [ + "./src/index.ts" + ], + "previewEntries": [ "./src/entry-preview.ts", "./src/entry-preview-docs.ts" - ], - "platform": "browser" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/renderers/preact/preset.js b/code/renderers/preact/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/renderers/preact/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/renderers/preact/src/preset.ts b/code/renderers/preact/src/preset.ts index e58147234dd0..7a3ff1d46f00 100644 --- a/code/renderers/preact/src/preset.ts +++ b/code/renderers/preact/src/preset.ts @@ -1,4 +1,4 @@ -import { join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; @@ -11,8 +11,8 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( return result .concat(input) - .concat([join(__dirname, 'entry-preview.mjs')]) - .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []); + .concat(['@storybook/preact/entry-preview']) + .concat(docsEnabled ? ['@storybook/preact/entry-preview-docs'] : []); }; /** diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 843ad0030643..b2259152c53c 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -19,25 +19,22 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./experimental-playwright": { "types": "./dist/playwright.d.ts", - "import": "./dist/playwright.mjs", - "require": "./dist/playwright.js" + "default": "./dist/playwright.js" }, - "./preset": "./preset.js", - "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", - "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs", - "./dist/entry-preview-rsc.mjs": "./dist/entry-preview-rsc.mjs", + "./preset": "./dist/preset.js", + "./entry-preview": "./dist/entry-preview.js", + "./entry-preview-docs": "./dist/entry-preview-docs.js", + "./entry-preview-rsc": "./dist/entry-preview-rsc.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "typesVersions": { "*": { @@ -59,7 +56,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/components": "workspace:^", @@ -113,15 +110,17 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/preset.ts", + "nodeEntries": [ + "./src/preset.ts" + ], + "previewEntries": [ "./src/entry-preview.tsx", "./src/entry-preview-docs.ts", - "./src/entry-preview-rsc.tsx", - "./src/playwright.ts" + "./src/entry-preview-rsc.tsx" ], - "platform": "browser" + "exportEntries": [ + "./src/index.ts" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/renderers/react/preset.js b/code/renderers/react/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/renderers/react/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/renderers/react/src/__test__/portable-stories-legacy.test.tsx b/code/renderers/react/src/__test__/portable-stories-legacy.test.tsx index 5567b1fd9fbc..76077dbe137e 100644 --- a/code/renderers/react/src/__test__/portable-stories-legacy.test.tsx +++ b/code/renderers/react/src/__test__/portable-stories-legacy.test.tsx @@ -1,6 +1,4 @@ // @vitest-environment happy-dom - -/* eslint-disable import/namespace */ import { cleanup, render, screen } from '@testing-library/react'; import { afterEach, describe, expect, it, vi } from 'vitest'; diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx index 85f33c9a714a..b8c753ec863c 100644 --- a/code/renderers/react/src/__test__/portable-stories.test.tsx +++ b/code/renderers/react/src/__test__/portable-stories.test.tsx @@ -1,6 +1,4 @@ // @vitest-environment happy-dom - -/* eslint-disable import/namespace */ import { cleanup, render, screen } from '@testing-library/react'; import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'; diff --git a/code/renderers/react/src/preset.ts b/code/renderers/react/src/preset.ts index a505e7f554bb..19fa974621b6 100644 --- a/code/renderers/react/src/preset.ts +++ b/code/renderers/react/src/preset.ts @@ -1,9 +1,10 @@ -import { dirname, join } from 'node:path'; +import { dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; export const addons: PresetProperty<'addons'> = [ - require.resolve('@storybook/react-dom-shim/dist/preset'), + fileURLToPath(import.meta.resolve('@storybook/react-dom-shim/preset')), ]; export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( @@ -17,9 +18,9 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( return result .concat(input) - .concat([join(__dirname, 'entry-preview.mjs')]) - .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []) - .concat(features?.experimentalRSC ? [join(__dirname, 'entry-preview-rsc.mjs')] : []); + .concat(['@storybook/react/entry-preview']) + .concat(docsEnabled ? ['@storybook/react/entry-preview-docs'] : []) + .concat(features?.experimentalRSC ? ['@storybook/react/entry-preview-rsc'] : []); }; /** @@ -37,8 +38,8 @@ export const resolvedReact = async (existing: any) => { try { return { ...existing, - react: dirname(require.resolve('react/package.json')), - reactDom: dirname(require.resolve('react-dom/package.json')), + react: dirname(fileURLToPath(import.meta.resolve('react/package.json'))), + reactDom: dirname(fileURLToPath(import.meta.resolve('react-dom/package.json'))), }; } catch (e) { return existing; diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 6d5992802d38..52bf174412a6 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -22,15 +22,12 @@ "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, - "./preset": "./preset.js", - "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", + "./preset": "./dist/preset.js", + "./entry-preview": "./dist/entry-preview.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -42,7 +39,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/components": "workspace:^", @@ -67,12 +64,15 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/preset.ts", - "./src/entry-preview.ts" + "exportEntries": [ + "./src/index.ts" + ], + "nodeEntries": [ + "./src/preset.ts" ], - "platform": "browser" + "previewEntries": [ + "./src/entry-preview.ts" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/renderers/server/preset.js b/code/renderers/server/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/renderers/server/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/renderers/server/src/preset.ts b/code/renderers/server/src/preset.ts index 197a303bb15b..e8f3a12b5c49 100644 --- a/code/renderers/server/src/preset.ts +++ b/code/renderers/server/src/preset.ts @@ -1,5 +1,5 @@ import { readFile } from 'node:fs/promises'; -import { join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { ComponentTitle, PresetProperty, StoryName, Tag } from 'storybook/internal/types'; @@ -49,5 +49,7 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( } const result: string[] = []; - return result.concat(input).concat([join(__dirname, 'entry-preview.mjs')]); + return result + .concat(input) + .concat([fileURLToPath(import.meta.resolve('@storybook/server/entry-preview'))]); }; diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 2eb6b334ec60..0f3ef15e5d2b 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -19,28 +19,25 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./experimental-playwright": { "types": "./dist/playwright.d.ts", - "import": "./dist/playwright.mjs", - "require": "./dist/playwright.js" + "default": "./dist/playwright.js" }, - "./preset": "./preset.js", - "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", - "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs", + "./preset": "./dist/preset.js", + "./entry-preview": "./dist/entry-preview.js", + "./entry-preview-docs": "./dist/entry-preview-docs.js", "./package.json": "./package.json", "./internal/PreviewRender.svelte": "./dist/components/PreviewRender.svelte", "./internal/SlotDecorator.svelte": "./dist/components/SlotDecorator.svelte", "./internal/AddStorybookIdDecorator.svelte": "./dist/components/AddStorybookIdDecorator.svelte", "./internal/createSvelte5Props": "./dist/createSvelte5Props.svelte.js" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -52,7 +49,7 @@ ], "scripts": { "check": "svelte-check", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/components": "workspace:^", @@ -84,14 +81,17 @@ }, "bundler": { "post": "./scripts/copy-unbundled-to-dist.ts", - "entries": [ + "nodeEntries": [ + "./src/preset.ts" + ], + "exportEntries": [ "./src/index.ts", - "./src/preset.ts", - "./src/entry-preview.ts", - "./src/entry-preview-docs.ts", "./src/playwright.ts" ], - "platform": "browser" + "previewEntries": [ + "./src/entry-preview.ts", + "./src/entry-preview-docs.ts" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/renderers/svelte/preset.js b/code/renderers/svelte/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/renderers/svelte/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/renderers/svelte/src/preset.ts b/code/renderers/svelte/src/preset.ts index c6cf333ccf3c..f5bef7fc97d5 100644 --- a/code/renderers/svelte/src/preset.ts +++ b/code/renderers/svelte/src/preset.ts @@ -1,4 +1,4 @@ -import { join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; @@ -11,6 +11,6 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( return result .concat(input) - .concat([join(__dirname, 'entry-preview.mjs')]) - .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []); + .concat(['@storybook/svelte/entry-preview']) + .concat(docsEnabled ? ['@storybook/svelte/entry-preview-docs'] : []); }; diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index a043b37b870b..1026ff88aa91 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -19,24 +19,21 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./experimental-playwright": { "types": "./dist/playwright.d.ts", - "import": "./dist/playwright.mjs", - "require": "./dist/playwright.js" + "default": "./dist/playwright.js" }, - "./preset": "./preset.js", - "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", - "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs", + "./preset": "./dist/preset.js", + "./entry-preview": "./dist/entry-preview.js", + "./entry-preview-docs": "./dist/entry-preview-docs.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "typesVersions": { "*": { @@ -58,7 +55,7 @@ ], "scripts": { "check": "vue-tsc --noEmit", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/components": "workspace:^", @@ -91,14 +88,17 @@ "access": "public" }, "bundler": { - "entries": [ + "exportEntries": [ "./src/index.ts", - "./src/preset.ts", - "./src/entry-preview.ts", - "./src/entry-preview-docs.ts", "./src/playwright.ts" ], - "platform": "browser" + "nodeEntries": [ + "./src/preset.ts" + ], + "previewEntries": [ + "./src/entry-preview.ts", + "./src/entry-preview-docs.ts" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/renderers/vue3/preset.js b/code/renderers/vue3/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/renderers/vue3/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/renderers/vue3/src/preset.ts b/code/renderers/vue3/src/preset.ts index c6cf333ccf3c..f3ba4a91233b 100644 --- a/code/renderers/vue3/src/preset.ts +++ b/code/renderers/vue3/src/preset.ts @@ -1,4 +1,4 @@ -import { join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; @@ -11,6 +11,6 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( return result .concat(input) - .concat([join(__dirname, 'entry-preview.mjs')]) - .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []); + .concat(['@storybook/vue3/entry-preview']) + .concat(docsEnabled ? ['@storybook/vue3/entry-preview-docs'] : []); }; diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 76f567d6a792..cba4ec39bf05 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -22,19 +22,17 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", + "type": "module", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, - "./preset": "./preset.js", - "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", - "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs", + "./preset": "./dist/preset.js", + "./entry-preview": "./dist/entry-preview.js", + "./entry-preview-docs": "./dist/entry-preview-docs.js", "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", @@ -46,7 +44,7 @@ ], "scripts": { "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" + "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/components": "workspace:^", @@ -76,13 +74,16 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/preset.ts", + "nodeEntries": [ + "./src/preset.ts" + ], + "previewEntries": [ "./src/entry-preview.ts", "./src/entry-preview-docs.ts" ], - "platform": "browser" + "exportEntries": [ + "./src/index.ts" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/renderers/web-components/preset.js b/code/renderers/web-components/preset.js deleted file mode 100644 index a83f95279e7f..000000000000 --- a/code/renderers/web-components/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/renderers/web-components/src/preset.ts b/code/renderers/web-components/src/preset.ts index c6cf333ccf3c..f3da9034e5ea 100644 --- a/code/renderers/web-components/src/preset.ts +++ b/code/renderers/web-components/src/preset.ts @@ -1,4 +1,4 @@ -import { join } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { PresetProperty } from 'storybook/internal/types'; @@ -11,6 +11,6 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( return result .concat(input) - .concat([join(__dirname, 'entry-preview.mjs')]) - .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []); + .concat(['@storybook/web-components/entry-preview']) + .concat(docsEnabled ? ['@storybook/web-components/entry-preview-docs'] : []); }; diff --git a/code/tsconfig.json b/code/tsconfig.json index 0ee2306040e0..2783ad13799e 100644 --- a/code/tsconfig.json +++ b/code/tsconfig.json @@ -10,8 +10,8 @@ "isolatedModules": true, "jsx": "react", "lib": ["dom", "dom.iterable", "esnext"], - "module": "CommonJS", - "moduleResolution": "Node", + "module": "ES2022", + "moduleResolution": "Bundler", "noImplicitAny": true, "noUnusedLocals": false, "skipLibCheck": true, diff --git a/code/yarn.lock b/code/yarn.lock index ceefeee6d091..b75b4516b0d2 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6345,7 +6345,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/icons@npm:^1.2.12": +"@storybook/icons@npm:^1.2.12, @storybook/icons@npm:^1.2.5": version: 1.2.12 resolution: "@storybook/icons@npm:1.2.12" peerDependencies: @@ -6355,16 +6355,6 @@ __metadata: languageName: node linkType: hard -"@storybook/icons@npm:^1.2.5": - version: 1.2.10 - resolution: "@storybook/icons@npm:1.2.10" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10c0/aadde2efd5c471b78096f29a6393db111ee95174cab94ade0d2859d476262f080aa8ffb414f82932afd81d5c57bed813193a04e92086962bde2224774dac9060 - languageName: node - linkType: hard - "@storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": version: 0.0.0-use.local resolution: "@storybook/instrumenter@workspace:lib/instrumenter" @@ -9990,7 +9980,7 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:5.3.0, aria-query@npm:^5.0.0, aria-query@npm:^5.3.0": +"aria-query@npm:5.3.0": version: 5.3.0 resolution: "aria-query@npm:5.3.0" dependencies: @@ -9999,7 +9989,7 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:^5.3.1": +"aria-query@npm:^5.0.0, aria-query@npm:^5.3.0, aria-query@npm:^5.3.1": version: 5.3.2 resolution: "aria-query@npm:5.3.2" checksum: 10c0/003c7e3e2cff5540bf7a7893775fc614de82b0c5dde8ae823d47b7a28a9d4da1f7ed85f340bdb93d5649caa927755f0e31ecc7ab63edfdfc00c8ef07e505e03e @@ -12810,15 +12800,15 @@ __metadata: languageName: node linkType: hard -"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.5": - version: 4.3.6 - resolution: "debug@npm:4.3.6" +"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.5, debug@npm:^4.3.6, debug@npm:^4.3.7": + version: 4.3.7 + resolution: "debug@npm:4.3.7" dependencies: - ms: "npm:2.1.2" + ms: "npm:^2.1.3" peerDependenciesMeta: supports-color: optional: true - checksum: 10c0/3293416bff072389c101697d4611c402a6bacd1900ac20c0492f61a9cdd6b3b29750fc7f5e299f8058469ef60ff8fb79b86395a30374fbd2490113c1c7112285 + checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b languageName: node linkType: hard @@ -12843,18 +12833,6 @@ __metadata: languageName: node linkType: hard -"debug@npm:^4.3.6, debug@npm:^4.3.7": - version: 4.3.7 - resolution: "debug@npm:4.3.7" - dependencies: - ms: "npm:^2.1.3" - peerDependenciesMeta: - supports-color: - optional: true - checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b - languageName: node - linkType: hard - "decamelize@npm:^1.2.0": version: 1.2.0 resolution: "decamelize@npm:1.2.0" @@ -19444,16 +19422,7 @@ __metadata: languageName: node linkType: hard -"magic-string@npm:^0.30.0, magic-string@npm:^0.30.11, magic-string@npm:^0.30.5": - version: 0.30.11 - resolution: "magic-string@npm:0.30.11" - dependencies: - "@jridgewell/sourcemap-codec": "npm:^1.5.0" - checksum: 10c0/b9eb370773d0bd90ca11a848753409d8e5309b1ad56d2a1aa49d6649da710a6d2fe7237ad1a643c5a5d3800de2b9946ed9690acdfc00e6cc1aeafff3ab1752c4 - languageName: node - linkType: hard - -"magic-string@npm:^0.30.12": +"magic-string@npm:^0.30.0, magic-string@npm:^0.30.11, magic-string@npm:^0.30.12, magic-string@npm:^0.30.5": version: 0.30.12 resolution: "magic-string@npm:0.30.12" dependencies: @@ -26790,7 +26759,7 @@ __metadata: languageName: node linkType: hard -"svelte@npm:^5.0.0, svelte@npm:^5.0.5": +"svelte@npm:^5.0.0, svelte@npm:^5.0.0-next.268, svelte@npm:^5.0.5": version: 5.0.5 resolution: "svelte@npm:5.0.5" dependencies: @@ -26811,27 +26780,6 @@ __metadata: languageName: node linkType: hard -"svelte@npm:^5.0.0-next.268": - version: 5.0.0-next.268 - resolution: "svelte@npm:5.0.0-next.268" - dependencies: - "@ampproject/remapping": "npm:^2.3.0" - "@jridgewell/sourcemap-codec": "npm:^1.5.0" - "@types/estree": "npm:^1.0.5" - acorn: "npm:^8.12.1" - acorn-typescript: "npm:^1.4.13" - aria-query: "npm:^5.3.1" - axobject-query: "npm:^4.1.0" - esm-env: "npm:^1.0.0" - esrap: "npm:^1.2.2" - is-reference: "npm:^3.0.2" - locate-character: "npm:^3.0.0" - magic-string: "npm:^0.30.11" - zimmerframe: "npm:^1.1.2" - checksum: 10c0/74a954cffe2a70259a1d1d2a834e9615d3f393429ac8cc1e15bfdc66b8bbe5dc449a8289370631b29023bca51aa451d1906f570b3761de4c235ea731913ee1b2 - languageName: node - linkType: hard - "sveltedoc-parser@npm:^4.2.1": version: 4.3.1 resolution: "sveltedoc-parser@npm:4.3.1" diff --git a/scripts/prepare/addon-bundle.ts b/scripts/prepare/addon-bundle.ts index 16683ea38ff2..e0580eb094b0 100755 --- a/scripts/prepare/addon-bundle.ts +++ b/scripts/prepare/addon-bundle.ts @@ -113,6 +113,9 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { esbuildOptions: (options) => { options.conditions = ['module']; options.platform = 'browser'; + options.minifyWhitespace = false; + options.lineLimit = 140; + options.loader = { ...options.loader, '.png': 'dataurl', @@ -144,22 +147,22 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { entry: exportEntries, external: [...commonExternals, ...globalManagerPackages, ...globalPreviewPackages], }), - build({ - ...commonOptions, - ...(optimized ? dtsConfig : {}), - entry: exportEntries, - format: ['cjs'], - target: browserOptions.target, - platform: 'neutral', - external: [...commonExternals, ...globalManagerPackages, ...globalPreviewPackages], - esbuildOptions: (options) => { - options.platform = 'neutral'; - Object.assign(options, getESBuildOptions(optimized)); - }, - }), + // build({ + // ...commonOptions, + // ...(optimized ? dtsConfig : {}), + // entry: exportEntries, + // format: ['esm'], + // target: browserOptions.target, + // platform: 'neutral', + // external: [...commonExternals, ...globalManagerPackages, ...globalPreviewPackages], + // esbuildOptions: (options) => { + // options.platform = 'neutral'; + // Object.assign(options, getESBuildOptions(optimized)); + // }, + // }), ]); if (!watch) { - await readMetafiles({ formats: ['esm', 'cjs'] }); + await readMetafiles(); } }); @@ -180,7 +183,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { external: [...commonExternals, ...globalManagerPackages], }); if (!watch) { - await readMetafiles({ formats: ['esm'] }); + await readMetafiles(); } }); } @@ -196,12 +199,12 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { ...commonOptions, ...(optimized ? dtsConfig : {}), ...browserOptions, - format: ['esm', 'cjs'], + format: ['esm'], entry: previewEntries.map((e: string) => slash(join(cwd, e))), external: [...commonExternals, ...globalPreviewPackages], }); if (!watch) { - await readMetafiles({ formats: ['esm', 'cjs'] }); + await readMetafiles(); } }); @@ -218,18 +221,6 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { }); tasks.push(async () => { await Promise.all([ - build({ - ...commonOptions, - entry: nodeEntries.map((e: string) => slash(join(cwd, e))), - format: ['cjs'], - target: 'node18', - platform: 'node', - external: commonExternals, - esbuildOptions: (c) => { - c.platform = 'node'; - Object.assign(c, getESBuildOptions(optimized)); - }, - }), build({ ...commonOptions, ...(optimized ? dtsConfig : {}), @@ -257,7 +248,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { }), ]); if (!watch) { - await readMetafiles({ formats: ['esm', 'cjs'] }); + await readMetafiles(); } }); @@ -353,17 +344,17 @@ const metafile: Metafile = { outputs: {}, }; -async function readMetafiles({ formats }: { formats: Formats[] }) { - await Promise.all( - formats.map(async (format) => { - const fromFilename = `metafile-${format}.json`; - const currentMetafile = await fs.readJson(join(OUT_DIR, fromFilename)); - metafile.inputs = { ...metafile.inputs, ...currentMetafile.inputs }; - metafile.outputs = { ...metafile.outputs, ...currentMetafile.outputs }; +async function readMetafiles() { + const fromFilename = `metafile.json`; + try { + const currentMetafile = await fs.readJson(join(OUT_DIR, fromFilename)); + metafile.inputs = { ...metafile.inputs, ...currentMetafile.inputs }; + metafile.outputs = { ...metafile.outputs, ...currentMetafile.outputs }; - await fs.rm(join(OUT_DIR, fromFilename)); - }) - ); + await fs.rm(join(OUT_DIR, fromFilename)); + } catch (e) { + // + } } async function saveMetafiles({ metafilesDir }: { metafilesDir: string }) { diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts deleted file mode 100755 index 0dda7c3b076a..000000000000 --- a/scripts/prepare/bundle.ts +++ /dev/null @@ -1,310 +0,0 @@ -import { writeFile } from 'node:fs/promises'; -import { dirname, join, parse, posix, relative, resolve, sep } from 'node:path'; - -import type { Metafile } from 'esbuild'; -import aliasPlugin from 'esbuild-plugin-alias'; -// eslint-disable-next-line depend/ban-dependencies -import * as fs from 'fs-extra'; -// eslint-disable-next-line depend/ban-dependencies -import { glob } from 'glob'; -import slash from 'slash'; -import { dedent } from 'ts-dedent'; -import type { Options } from 'tsup'; -import { build } from 'tsup'; -import type { PackageJson } from 'type-fest'; - -import { exec } from '../utils/exec'; -import { esbuild } from './tools'; - -/* TYPES */ - -type Formats = 'esm' | 'cjs'; -type BundlerConfig = { - entries: string[]; - externals: string[]; - noExternal: string[]; - platform: Options['platform']; - pre: string; - post: string; - formats: Formats[]; -}; -type PackageJsonWithBundlerConfig = PackageJson & { - bundler: BundlerConfig; -}; -type DtsConfigSection = Pick; - -/* MAIN */ - -const OUT_DIR = join(process.cwd(), 'dist'); - -const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { - const { - name, - dependencies, - peerDependencies, - bundler: { - entries = [], - externals: extraExternals = [], - noExternal: extraNoExternal = [], - platform, - pre, - post, - formats = ['esm', 'cjs'], - }, - } = (await fs.readJson(join(cwd, 'package.json'))) as PackageJsonWithBundlerConfig; - - if (pre) { - await exec(`jiti ${pre}`, { cwd }); - } - - const metafilesDir = join( - __dirname, - '..', - '..', - 'code', - 'bench', - 'esbuild-metafiles', - name.replace('@storybook', '') - ); - - const reset = hasFlag(flags, 'reset'); - const watch = hasFlag(flags, 'watch'); - const optimized = hasFlag(flags, 'optimized'); - if (reset) { - await fs.emptyDir(OUT_DIR); - await fs.emptyDir(metafilesDir); - } - - const tasks: Promise[] = []; - - const externals = [ - name, - ...extraExternals, - ...Object.keys(dependencies || {}), - ...Object.keys(peerDependencies || {}), - ]; - - const allEntries = entries.map((e: string) => slash(join(cwd, e))); - - const { dtsBuild, dtsConfig, tsConfigExists } = await getDTSConfigs({ - formats, - entries, - optimized, - }); - - /* preset files are always CJS only. - * Generating an ESM file for them anyway is problematic because they often have a reference to `require`. - * TSUP generated code will then have a `require` polyfill/guard in the ESM files, which causes issues for webpack. - */ - const nonPresetEntries = allEntries.filter((f) => !parse(f).name.includes('preset')); - - const noExternal = [...extraNoExternal]; - - if (formats.includes('esm')) { - tasks.push( - build({ - noExternal, - silent: true, - treeshake: true, - entry: nonPresetEntries, - shims: false, - watch, - outDir: OUT_DIR, - sourcemap: false, - metafile: true, - format: ['esm'], - target: platform === 'node' ? ['node18'] : ['chrome100', 'safari15', 'firefox91'], - clean: false, - ...(dtsBuild === 'esm' ? dtsConfig : {}), - platform: platform || 'browser', - esbuildPlugins: - platform === 'node' - ? [] - : [ - aliasPlugin({ - process: resolve('../node_modules/process/browser.js'), - util: resolve('../node_modules/util/util.js'), - }), - ], - external: externals, - - banner: - platform === 'node' - ? { - js: dedent` - import ESM_COMPAT_Module from "node:module"; - import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url'; - import { dirname as ESM_COMPAT_dirname } from 'node:path'; - const __filename = ESM_COMPAT_fileURLToPath(import.meta.url); - const __dirname = ESM_COMPAT_dirname(__filename); - const require = ESM_COMPAT_Module.createRequire(import.meta.url); - `, - } - : {}, - - esbuildOptions: (c) => { - c.conditions = ['module']; - c.platform = platform || 'browser'; - Object.assign(c, getESBuildOptions(optimized)); - }, - }) - ); - } - - if (formats.includes('cjs')) { - tasks.push( - build({ - noExternal, - silent: true, - entry: allEntries, - watch, - outDir: OUT_DIR, - sourcemap: false, - metafile: true, - format: ['cjs'], - target: 'node18', - ...(dtsBuild === 'cjs' ? dtsConfig : {}), - platform: 'node', - clean: false, - external: externals, - - esbuildOptions: (c) => { - c.platform = 'node'; - Object.assign(c, getESBuildOptions(optimized)); - }, - }) - ); - } - - if (tsConfigExists && !optimized) { - tasks.push(...entries.map(generateDTSMapperFile)); - } - - await Promise.all(tasks); - - if (!watch) { - await saveMetafiles({ metafilesDir, formats }); - } - - const dtsFiles = await glob(OUT_DIR + '/**/*.d.ts'); - await Promise.all( - dtsFiles.map(async (file) => { - const content = await fs.readFile(file, 'utf-8'); - await fs.writeFile( - file, - content.replace(/from \'core\/dist\/(.*)\'/g, `from 'storybook/internal/$1'`) - ); - }) - ); - - if (post) { - await exec(`jiti ${post}`, { cwd }, { debug: true }); - } - - if (process.env.CI !== 'true') { - console.log('done'); - } -}; - -/* UTILS */ - -async function getDTSConfigs({ - formats, - entries, - optimized, -}: { - formats: Formats[]; - entries: string[]; - optimized: boolean; -}) { - const tsConfigPath = join(cwd, 'tsconfig.json'); - const tsConfigExists = await fs.pathExists(tsConfigPath); - - const dtsBuild = optimized && formats[0] && tsConfigExists ? formats[0] : undefined; - - const dtsConfig: DtsConfigSection = { - tsconfig: tsConfigPath, - dts: { - entry: entries, - resolve: true, - }, - }; - - return { dtsBuild, dtsConfig, tsConfigExists }; -} - -function getESBuildOptions(optimized: boolean) { - return { - logLevel: 'error', - legalComments: 'none', - minifyWhitespace: optimized, - minifyIdentifiers: false, - minifySyntax: optimized, - }; -} - -async function generateDTSMapperFile(file: string) { - const { name: entryName, dir } = parse(file); - - const pathName = join(process.cwd(), dir.replace('./src', 'dist'), `${entryName}.d.ts`); - const srcName = join(process.cwd(), file); - const rel = relative(dirname(pathName), dirname(srcName)).split(sep).join(posix.sep); - - await fs.ensureFile(pathName); - await fs.writeFile( - pathName, - dedent` - // dev-mode - export * from '${rel}/${entryName}'; - `, - { encoding: 'utf-8' } - ); -} - -async function saveMetafiles({ - metafilesDir, - formats, -}: { - metafilesDir: string; - formats: Formats[]; -}) { - await fs.ensureDir(metafilesDir); - const metafile: Metafile = { - inputs: {}, - outputs: {}, - }; - - await Promise.all( - formats.map(async (format) => { - const fromFilename = `metafile-${format}.json`; - const currentMetafile = await fs.readJson(join(OUT_DIR, fromFilename)); - metafile.inputs = { ...metafile.inputs, ...currentMetafile.inputs }; - metafile.outputs = { ...metafile.outputs, ...currentMetafile.outputs }; - - await fs.rm(join(OUT_DIR, fromFilename)); - }) - ); - - await writeFile(join(metafilesDir, 'metafile.json'), JSON.stringify(metafile, null, 2)); - await writeFile( - join(metafilesDir, 'metafile.txt'), - await esbuild.analyzeMetafile(metafile, { color: false, verbose: false }) - ); -} - -const hasFlag = (flags: string[], name: string) => !!flags.find((s) => s.startsWith(`--${name}`)); - -/* SELF EXECUTION */ - -const flags = process.argv.slice(2); -const cwd = process.cwd(); - -run({ cwd, flags }).catch((err: unknown) => { - // We can't let the stack try to print, it crashes in a way that sets the exit code to 0. - // Seems to have something to do with running JSON.parse() on binary / base64 encoded sourcemaps - // in @cspotcode/source-map-support - if (err instanceof Error) { - console.error(err.stack); - } - process.exit(1); -}); diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index c090cc69e5bf..1c68f9ab9cbb 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -217,7 +217,7 @@ function addEsbuildLoaderToStories(mainConfig: ConfigFile) { exclude: /\\.stories\\.mdx$/, use: [ { - loader: require.resolve('@storybook/addon-docs/mdx-loader'), + loader: fileURLToPath(import.meta.resolve('@storybook/addon-docs/mdx-loader')), }, ], }, @@ -442,7 +442,7 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio join(sandboxDir, '.storybook/vitest.setup.ts'), dedent`import { beforeAll } from 'vitest' import { setProjectAnnotations } from '${storybookPackage}' - import * as rendererDocsAnnotations from '${template.expected.renderer}/dist/entry-preview-docs.mjs' + import * as rendererDocsAnnotations from '${template.expected.renderer}/entry-preview-docs' import * as addonActionsAnnotations from '@storybook/addon-actions/preview' import * as addonTestAnnotations from '@storybook/experimental-addon-test/preview' import '../src/stories/components' diff --git a/scripts/yarn.lock b/scripts/yarn.lock index 91fe51f8f588..332d500721cf 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -718,14 +718,7 @@ __metadata: languageName: node linkType: hard -"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15": - version: 1.4.15 - resolution: "@jridgewell/sourcemap-codec@npm:1.4.15" - checksum: 10c0/0c6b5ae663087558039052a626d2d7ed5208da36cfd707dcc5cea4a07cfc918248403dcb5989a8f7afaf245ce0573b7cc6fd94c4a30453bd10e44d9363940ba5 - languageName: node - linkType: hard - -"@jridgewell/sourcemap-codec@npm:^1.5.0": +"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0": version: 1.5.0 resolution: "@jridgewell/sourcemap-codec@npm:1.5.0" checksum: 10c0/2eb864f276eb1096c3c11da3e9bb518f6d9fc0023c78344cdc037abadc725172c70314bdb360f2d4b7bffec7f5d657ce006816bc5d4ecb35e61b66132db00c18 @@ -4520,15 +4513,15 @@ __metadata: languageName: node linkType: hard -"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.5, debug@npm:~4.3.4": - version: 4.3.5 - resolution: "debug@npm:4.3.5" +"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.5, debug@npm:^4.3.6, debug@npm:~4.3.4": + version: 4.3.7 + resolution: "debug@npm:4.3.7" dependencies: - ms: "npm:2.1.2" + ms: "npm:^2.1.3" peerDependenciesMeta: supports-color: optional: true - checksum: 10c0/082c375a2bdc4f4469c99f325ff458adad62a3fc2c482d59923c260cb08152f34e2659f72b3767db8bb2f21ca81a60a42d1019605a412132d7b9f59363a005cc + checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b languageName: node linkType: hard @@ -4553,18 +4546,6 @@ __metadata: languageName: node linkType: hard -"debug@npm:^4.3.6": - version: 4.3.7 - resolution: "debug@npm:4.3.7" - dependencies: - ms: "npm:^2.1.3" - peerDependenciesMeta: - supports-color: - optional: true - checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b - languageName: node - linkType: hard - "decode-named-character-reference@npm:^1.0.0": version: 1.0.2 resolution: "decode-named-character-reference@npm:1.0.2" @@ -7372,14 +7353,7 @@ __metadata: languageName: node linkType: hard -"ignore@npm:^5.0.0, ignore@npm:^5.0.4, ignore@npm:^5.0.5, ignore@npm:^5.1.1, ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.1": - version: 5.3.1 - resolution: "ignore@npm:5.3.1" - checksum: 10c0/703f7f45ffb2a27fb2c5a8db0c32e7dee66b33a225d28e8db4e1be6474795f606686a6e3bcc50e1aa12f2042db4c9d4a7d60af3250511de74620fbed052ea4cd - languageName: node - linkType: hard - -"ignore@npm:^5.1.8": +"ignore@npm:^5.0.0, ignore@npm:^5.0.4, ignore@npm:^5.0.5, ignore@npm:^5.1.1, ignore@npm:^5.1.8, ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.1": version: 5.3.2 resolution: "ignore@npm:5.3.2" checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337 @@ -8840,16 +8814,7 @@ __metadata: languageName: node linkType: hard -"magic-string@npm:^0.30.10": - version: 0.30.10 - resolution: "magic-string@npm:0.30.10" - dependencies: - "@jridgewell/sourcemap-codec": "npm:^1.4.15" - checksum: 10c0/aa9ca17eae571a19bce92c8221193b6f93ee8511abb10f085e55ffd398db8e4c089a208d9eac559deee96a08b7b24d636ea4ab92f09c6cf42a7d1af51f7fd62b - languageName: node - linkType: hard - -"magic-string@npm:^0.30.11": +"magic-string@npm:^0.30.10, magic-string@npm:^0.30.11": version: 0.30.12 resolution: "magic-string@npm:0.30.12" dependencies: diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js index 3867a50e7bc7..3d99a08f1b90 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js @@ -1,21 +1,24 @@ const nextJest = require('next/jest.js'); -const { getPackageAliases } = require('@storybook/nextjs/export-mocks'); - + const createJestConfig = nextJest({ // Provide the path to your Next.js app to load next.config.js and .env files in your test environment dir: __dirname, }) - -/** @type {import('jest').Config} */ -const customJestConfig = { - coverageProvider: 'v8', - testEnvironment: 'jsdom', - // Add more setup options before each test is run - setupFilesAfterEnv: ['./jest.setup.ts'], - moduleNameMapper: { - ...getPackageAliases() - }, -}; // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async -module.exports = createJestConfig(customJestConfig) \ No newline at end of file +/** @returns {Promise} */ +module.exports = async () => { + const { getPackageAliases } = import('@storybook/nextjs/export-mocks'); + + /** @type {import('jest').Config} */ + const customJestConfig = { + coverageProvider: 'v8', + testEnvironment: 'jsdom', + // Add more setup options before each test is run + setupFilesAfterEnv: ['./jest.setup.ts'], + moduleNameMapper: getPackageAliases(), + }; + + + return createJestConfig(customJestConfig); +} \ No newline at end of file