From 81c280722a9d6951e3af4209327fa2bd700fd2d6 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 14 Nov 2023 09:30:07 +0100 Subject: [PATCH 1/3] Revert "Revert "Addons, core: Make `react` and Storybook packages `devDependencies` where possible"" --- code/.eslintrc.js | 73 ++++- code/addons/a11y/package.json | 55 ++-- code/addons/actions/package.json | 72 ++--- code/addons/backgrounds/package.json | 68 ++--- code/addons/controls/package.json | 54 +--- code/addons/docs/README.md | 2 - .../addons/docs/src/ensure-react-peer-deps.ts | 9 +- code/addons/docs/src/preset.ts | 10 +- code/addons/essentials/package.json | 115 ++----- code/addons/essentials/src/actions/preview.ts | 1 - .../essentials/src/backgrounds/manager.ts | 1 + .../essentials/src/backgrounds/preview.ts | 4 +- .../addons/essentials/src/controls/manager.ts | 1 + .../essentials/src/highlight/preview.ts | 4 +- code/addons/essentials/src/measure/manager.ts | 1 + code/addons/essentials/src/measure/preview.ts | 4 +- code/addons/essentials/src/outline/manager.ts | 1 + code/addons/essentials/src/outline/preview.ts | 4 +- .../addons/essentials/src/toolbars/manager.ts | 1 + .../addons/essentials/src/viewport/manager.ts | 1 + code/addons/gfm/package.json | 19 +- code/addons/highlight/package.json | 30 +- code/addons/interactions/package.json | 77 ++--- code/addons/jest/package.json | 58 +--- code/addons/links/package.json | 57 ++-- code/addons/measure/package.json | 52 ++-- code/addons/outline/package.json | 65 ++-- code/addons/storysource/package.json | 48 ++- code/addons/themes/package.json | 55 +--- code/addons/toolbars/package.json | 53 +--- code/addons/viewport/package.json | 64 +--- code/builders/builder-manager/src/index.ts | 4 +- .../builder-manager/src/utils/globals.ts | 1 - .../builders/builder-vite/src/optimizeDeps.ts | 20 +- code/builders/builder-vite/src/vite-config.ts | 8 +- .../src/preview/iframe-webpack.config.ts | 7 +- code/deprecated/addons/package.json | 4 - code/deprecated/manager-api-shim/package.json | 12 - code/frameworks/angular/package.json | 3 - code/frameworks/ember/package.json | 4 +- code/frameworks/html-webpack5/package.json | 4 +- code/frameworks/preact-webpack5/package.json | 4 +- code/frameworks/server-webpack5/package.json | 4 - code/frameworks/svelte-webpack5/package.json | 2 - code/frameworks/vue-vite/package.json | 2 - code/frameworks/vue-webpack5/package.json | 2 - code/frameworks/vue3-vite/package.json | 2 - code/frameworks/vue3-webpack5/package.json | 2 - .../web-components-vite/package.json | 4 - .../web-components-webpack5/package.json | 4 +- .../src/utils/warnOnIncompatibleAddons.ts | 2 +- code/lib/manager-api/package.json | 10 +- code/lib/manager-api/src/index.tsx | 13 +- code/lib/preview-api/package.json | 1 - code/lib/preview/package.json | 3 + code/lib/preview/src/globals.ts | 2 +- .../src/globals/{types.ts => globals.ts} | 13 +- code/lib/preview/src/globals/runtime.ts | 14 +- code/lib/preview/src/runtime.ts | 10 +- code/lib/router/package.json | 20 +- code/lib/source-loader/package.json | 4 - code/lib/theming/package.json | 14 + code/renderers/preact/template/cli/Button.jsx | 45 +-- code/renderers/preact/template/cli/Header.jsx | 26 +- code/renderers/preact/template/cli/Page.jsx | 3 + .../preact/template/components/Button.jsx | 15 +- .../preact/template/components/Form.jsx | 16 +- .../preact/template/components/Html.jsx | 9 - .../preact/template/components/Pre.jsx | 23 +- .../preact/template/stories/React.js | 20 +- .../template/stories/react-compat.stories.js | 1 - code/renderers/svelte/package.json | 1 + code/ui/manager/package.json | 28 +- .../manager/scripts/generate-exports-file.ts | 13 +- code/ui/manager/src/globals-module-info.ts | 1 + code/ui/manager/src/globals.ts | 2 +- code/ui/manager/src/globals/exports.ts | 1 + ...{definitions.ts => globals-module-info.ts} | 23 +- code/ui/manager/src/globals/globals.ts | 19 ++ code/ui/manager/src/globals/runtime.ts | 48 +-- code/ui/manager/src/globals/types.ts | 18 -- code/ui/manager/src/runtime.ts | 8 +- code/ui/manager/src/typings.d.ts | 20 +- code/yarn.lock | 201 +++--------- scripts/package.json | 1 + scripts/prepare/addon-bundle.ts | 285 ++++++++++++++++++ scripts/yarn.lock | 8 + 87 files changed, 941 insertions(+), 1152 deletions(-) delete mode 100644 code/builders/builder-manager/src/utils/globals.ts rename code/lib/preview/src/globals/{types.ts => globals.ts} (73%) create mode 100644 code/ui/manager/src/globals-module-info.ts rename code/ui/manager/src/globals/{definitions.ts => globals-module-info.ts} (65%) create mode 100644 code/ui/manager/src/globals/globals.ts delete mode 100644 code/ui/manager/src/globals/types.ts create mode 100755 scripts/prepare/addon-bundle.ts diff --git a/code/.eslintrc.js b/code/.eslintrc.js index 35086680644d..65a8d1034316 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -1,7 +1,19 @@ const path = require('path'); +const fs = require('fs'); const scriptPath = path.join(__dirname, '..', 'scripts'); +const addonsPackages = fs + .readdirSync(path.join(__dirname, 'addons')) + .filter((p) => fs.statSync(path.join(__dirname, 'addons', p)).isDirectory()); +const libPackages = fs + .readdirSync(path.join(__dirname, 'lib')) + .filter((p) => fs.statSync(path.join(__dirname, 'lib', p)).isDirectory()); +const uiPackages = fs + .readdirSync(path.join(__dirname, 'ui')) + .filter((p) => fs.statSync(path.join(__dirname, 'ui', p)).isDirectory()) + .filter((p) => !p.startsWith('.')); + module.exports = { root: true, extends: [path.join(scriptPath, '.eslintrc.js')], @@ -53,7 +65,6 @@ module.exports = { project: null, }, rules: { - // '@typescript-eslint/no-var-requires': 'off', '@typescript-eslint/dot-notation': 'off', '@typescript-eslint/no-implied-eval': 'off', '@typescript-eslint/no-throw-literal': 'off', @@ -77,15 +88,7 @@ module.exports = { }, { // these packages use pre-bundling, dependencies will be bundled, and will be in devDepenencies - files: [ - 'addons/**/*', - 'frameworks/**/*', - 'lib/**/*', - 'builders/**/*', - 'deprecated/**/*', - 'renderers/**/*', - 'ui/**/*', - ], + files: ['frameworks/**/*', 'builders/**/*', 'deprecated/**/*', 'renderers/**/*'], excludedFiles: ['frameworks/angular/**/*', 'frameworks/ember/**/*', 'lib/core-server/**/*'], rules: { 'import/no-extraneous-dependencies': [ @@ -95,11 +98,47 @@ module.exports = { }, }, { - files: ['**/ui/*', '**/ui/.storybook/*'], + files: ['**/ui/.storybook/**'], rules: { - 'import/no-extraneous-dependencies': ['error', { packageDir: __dirname }], + 'import/no-extraneous-dependencies': [ + 'error', + { packageDir: [__dirname], devDependencies: true }, + ], }, }, + ...addonsPackages.map((directory) => ({ + files: [path.join('**', 'addons', directory, '**', '*.*')], + rules: { + 'import/no-extraneous-dependencies': [ + 'error', + { + packageDir: [__dirname, path.join(__dirname, 'addons', directory)], + devDependencies: true, + }, + ], + }, + })), + ...uiPackages.map((directory) => ({ + files: [path.join('**', 'ui', directory, '**', '*.*')], + rules: { + 'import/no-extraneous-dependencies': [ + 'error', + { packageDir: [__dirname, path.join(__dirname, 'ui', directory)], devDependencies: true }, + ], + }, + })), + ...libPackages.map((directory) => ({ + files: [path.join('**', 'lib', directory, '**', '*.*')], + rules: { + 'import/no-extraneous-dependencies': [ + 'error', + { + packageDir: [__dirname, path.join(__dirname, 'lib', directory)], + devDependencies: true, + }, + ], + }, + })), { files: [ '**/__tests__/**', @@ -121,16 +160,24 @@ module.exports = { 'react/require-default-props': 'off', }, }, - { files: '**/.storybook/config.js', rules: { 'global-require': 'off' } }, { files: ['**/*.stories.*'], rules: { 'no-console': 'off', }, }, + { + files: ['**/renderers/preact/**/*'], + rules: { + 'react/react-in-jsx-scope': 'off', + 'react/prop-types': 'off', + }, + }, { files: ['**/*.tsx', '**/*.ts'], rules: { + 'no-shadow': 'off', + '@typescript-eslint/ban-types': 'warn', // should become error, in the future 'react/require-default-props': 'off', 'react/prop-types': 'off', // we should use types 'react/forbid-prop-types': 'off', // we should use types diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 98d300c3b7ba..c23c7eedd387 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -32,21 +32,9 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -61,47 +49,40 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/addon-highlight": "workspace:*", + "axe-core": "^4.2.0" + }, + "devDependencies": { "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", - "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", - "axe-core": "^4.2.0", - "lodash": "^4.17.21", - "react-resize-detector": "^7.1.2" - }, - "devDependencies": { "@testing-library/react": "^11.2.2", + "lodash": "^4.17.21", + "react": "^16.8.0", + "react-dom": "^16.8.0", + "react-resize-detector": "^7.1.2", "resize-observer-polyfill": "^1.5.1", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.tsx" ] }, diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 69ae4084a6f9..88b89cc58fb0 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -33,21 +33,9 @@ "require": "./dist/decorator.js", "import": "./dist/decorator.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, - "./register.js": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register.js": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -58,14 +46,8 @@ "*": [ "dist/index.d.ts" ], - "manager": [ - "dist/manager.d.ts" - ], "decorator": [ "dist/decorator.d.ts" - ], - "preview": [ - "dist/preview.d.ts" ] } }, @@ -78,51 +60,45 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/client-logger": "workspace:*", - "@storybook/components": "workspace:*", - "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "workspace:*", - "@storybook/preview-api": "workspace:*", - "@storybook/theming": "workspace:*", - "@storybook/types": "workspace:*", + "@types/lodash": "^4.14.167", + "@types/uuid": "^9.0.1", "dequal": "^2.0.2", "lodash": "^4.17.21", "polished": "^4.2.2", - "prop-types": "^15.7.2", - "react-inspector": "^6.0.0", "telejson": "^7.2.0", "ts-dedent": "^2.0.0", "uuid": "^9.0.0" }, "devDependencies": { - "@types/lodash": "^4.14.167", - "@types/uuid": "^9.0.1", + "@storybook/client-logger": "workspace:*", + "@storybook/components": "workspace:*", + "@storybook/core-events": "workspace:*", + "@storybook/manager-api": "workspace:*", + "@storybook/preview-api": "workspace:*", + "@storybook/theming": "workspace:*", + "@storybook/types": "workspace:*", + "prop-types": "^15.7.2", + "react": "^16.8.0", + "react-dom": "^16.8.0", + "react-inspector": "^6.0.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", + "exportEntries": [ "./src/decorator.ts", - "./src/manager.tsx", + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.ts" ] }, diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 10e98ac61bfd..968ee66b6c7c 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -32,39 +32,14 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -74,42 +49,35 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { + "@storybook/global": "^5.0.0", + "memoizerific": "^1.11.3", + "ts-dedent": "^2.0.0" + }, + "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", - "@storybook/core-events": "workspace:*", - "@storybook/global": "^5.0.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", - "memoizerific": "^1.11.3", - "ts-dedent": "^2.0.0" - }, - "devDependencies": { + "react": "^16.8.0", + "react-dom": "^16.8.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.tsx" ] }, diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 1232c8e81a30..321875703bf2 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -32,31 +32,13 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./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": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -66,43 +48,35 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/blocks": "workspace:*", + "lodash": "^4.17.21", + "ts-dedent": "^2.0.0" + }, + "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-common": "workspace:*", - "@storybook/core-events": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", - "lodash": "^4.17.21", - "ts-dedent": "^2.0.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } + "react": "^16.8.0", + "react-dom": "^16.8.0" }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx" + "exportEntries": [ + "./src/index.ts" ], - "platform": "browser" + "managerEntries": [ + "./src/manager.tsx" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17", "storybook": { diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 025ff9bbd697..9a9a3debad2a 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -156,10 +156,8 @@ export default { `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`. - > With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/react/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation. - ## TypeScript configuration As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md). diff --git a/code/addons/docs/src/ensure-react-peer-deps.ts b/code/addons/docs/src/ensure-react-peer-deps.ts index 6958b7e40653..37520dff343e 100644 --- a/code/addons/docs/src/ensure-react-peer-deps.ts +++ b/code/addons/docs/src/ensure-react-peer-deps.ts @@ -7,13 +7,14 @@ export function ensureReactPeerDeps() { require.resolve('react-dom'); } catch (e) { logger.error(dedent` - Starting in 7.0, react and react-dom are now required peer dependencies of Storybook. + Starting in 7.0, react and react-dom are now required peer dependencies of @storybook/addon-docs. https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-peer-dependencies-required - It seems that you haven't run Storybook's CLI to upgrade to the latest version. - The upgrade command will install the required peer dependencies for you and will take - care of other important auto migrations as well. + You can continue to use Storybook without addon-docs, or you can install react and react-dom in your project: + You can use the upgrade command in Storybook's CLI to automatically install the required + peer dependencies for you. + If you want to upgrade to the latest prerelease version, please run: $ npx storybook@next upgrade --prerelease diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 22b5834c9e9a..c716775bdfa9 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -194,4 +194,12 @@ const docsX = docs as any; ensureReactPeerDeps(); -export { webpackX as webpack, indexersX as experimental_indexers, docsX as docs }; +const optimizeViteDeps = [ + '@mdx-js/react', + '@storybook/addon-docs > acorn-jsx', + '@storybook/addon-docs', + '@storybook/addon-essentials/docs/mdx-react-shim', + 'markdown-to-jsx', +]; + +export { webpackX as webpack, indexersX as experimental_indexers, docsX as docs, optimizeViteDeps }; diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index eca513d3a588..9578f36b1dea 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -28,81 +28,21 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./actions/preview": { - "types": "./dist/actions/preview.d.ts", - "require": "./dist/actions/preview.js", - "import": "./dist/actions/preview.mjs" - }, - "./actions/manager": { - "types": "./dist/actions/manager.d.ts", - "require": "./dist/actions/manager.js", - "import": "./dist/actions/manager.mjs" - }, - "./backgrounds/preview": { - "types": "./dist/backgrounds/preview.d.ts", - "require": "./dist/backgrounds/preview.js", - "import": "./dist/backgrounds/preview.mjs" - }, - "./backgrounds/manager": { - "types": "./dist/backgrounds/manager.d.ts", - "require": "./dist/backgrounds/manager.js", - "import": "./dist/backgrounds/manager.mjs" - }, - "./controls/manager": { - "types": "./dist/controls/manager.d.ts", - "require": "./dist/controls/manager.js", - "import": "./dist/controls/manager.mjs" - }, - "./docs/preview": { - "types": "./dist/docs/preview.d.ts", - "require": "./dist/docs/preview.js", - "import": "./dist/docs/preview.mjs" - }, - "./docs/preset": { - "types": "./dist/docs/preset.d.ts", - "require": "./dist/docs/preset.js", - "import": "./dist/docs/preset.mjs" - }, - "./docs/mdx-react-shim": { - "types": "./dist/docs/mdx-react-shim.d.ts", - "require": "./dist/docs/mdx-react-shim.js", - "import": "./dist/docs/mdx-react-shim.mjs" - }, - "./highlight/preview": { - "types": "./dist/highlight/preview.d.ts", - "require": "./dist/highlight/preview.js", - "import": "./dist/highlight/preview.mjs" - }, - "./measure/preview": { - "types": "./dist/measure/preview.d.ts", - "require": "./dist/measure/preview.js", - "import": "./dist/measure/preview.mjs" - }, - "./measure/manager": { - "types": "./dist/measure/manager.d.ts", - "require": "./dist/measure/manager.js", - "import": "./dist/measure/manager.mjs" - }, - "./outline/preview": { - "types": "./dist/outline/preview.d.ts", - "require": "./dist/outline/preview.js", - "import": "./dist/outline/preview.mjs" - }, - "./outline/manager": { - "types": "./dist/outline/manager.d.ts", - "require": "./dist/outline/manager.js", - "import": "./dist/outline/manager.mjs" - }, - "./toolbars/manager": { - "types": "./dist/toolbars/manager.d.ts", - "require": "./dist/toolbars/manager.js", - "import": "./dist/toolbars/manager.mjs" - }, - "./viewport/manager": { - "types": "./dist/viewport/manager.d.ts", - "require": "./dist/viewport/manager.js", - "import": "./dist/viewport/manager.mjs" - }, + "./actions/preview": "./dist/actions/preview.js", + "./actions/manager": "./dist/actions/manager.js", + "./backgrounds/preview": "./dist/backgrounds/preview.js", + "./backgrounds/manager": "./dist/backgrounds/manager.js", + "./controls/manager": "./dist/controls/manager.js", + "./docs/preview": "./dist/docs/preview.js", + "./docs/preset": "./dist/docs/preset.js", + "./docs/mdx-react-shim": "./dist/docs/mdx-react-shim.js", + "./highlight/preview": "./dist/highlight/preview.js", + "./measure/preview": "./dist/measure/preview.js", + "./measure/manager": "./dist/measure/manager.js", + "./outline/preview": "./dist/outline/preview.js", + "./outline/manager": "./dist/outline/manager.js", + "./toolbars/manager": "./dist/toolbars/manager.js", + "./viewport/manager": "./dist/viewport/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -117,7 +57,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/addon-actions": "workspace:*", @@ -147,25 +87,28 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", - "./src/actions/preview.ts", + "./src/docs/preset.ts", + "./src/docs/mdx-react-shim.ts" + ], + "managerEntries": [ "./src/actions/manager.ts", - "./src/backgrounds/preview.ts", "./src/backgrounds/manager.ts", "./src/controls/manager.ts", - "./src/docs/preview.ts", - "./src/docs/preset.ts", - "./src/docs/mdx-react-shim.ts", - "./src/highlight/preview.ts", - "./src/measure/preview.ts", "./src/measure/manager.ts", - "./src/outline/preview.ts", "./src/outline/manager.ts", "./src/toolbars/manager.ts", "./src/viewport/manager.ts" ], - "platform": "node" + "previewEntries": [ + "./src/actions/preview.ts", + "./src/backgrounds/preview.ts", + "./src/docs/preview.ts", + "./src/highlight/preview.ts", + "./src/measure/preview.ts", + "./src/outline/preview.ts" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" } diff --git a/code/addons/essentials/src/actions/preview.ts b/code/addons/essentials/src/actions/preview.ts index 86c6d5f2e656..12b8c76bf2cb 100644 --- a/code/addons/essentials/src/actions/preview.ts +++ b/code/addons/essentials/src/actions/preview.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/export */ // TODO: We need to configure an eslint-import typescript resolver for export maps to be considered export * from '@storybook/addon-actions/preview'; diff --git a/code/addons/essentials/src/backgrounds/manager.ts b/code/addons/essentials/src/backgrounds/manager.ts index 930d5ee38181..9da6a432be39 100644 --- a/code/addons/essentials/src/backgrounds/manager.ts +++ b/code/addons/essentials/src/backgrounds/manager.ts @@ -1 +1,2 @@ +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-backgrounds/manager'; diff --git a/code/addons/essentials/src/backgrounds/preview.ts b/code/addons/essentials/src/backgrounds/preview.ts index 5e56121e4a03..cf24112788f3 100644 --- a/code/addons/essentials/src/backgrounds/preview.ts +++ b/code/addons/essentials/src/backgrounds/preview.ts @@ -1,4 +1,2 @@ -/* eslint-disable import/export */ -// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered - +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-backgrounds/preview'; diff --git a/code/addons/essentials/src/controls/manager.ts b/code/addons/essentials/src/controls/manager.ts index c902436bf5ff..933adbd4e101 100644 --- a/code/addons/essentials/src/controls/manager.ts +++ b/code/addons/essentials/src/controls/manager.ts @@ -1 +1,2 @@ +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-controls/manager'; diff --git a/code/addons/essentials/src/highlight/preview.ts b/code/addons/essentials/src/highlight/preview.ts index ffcf62555af2..e124e7a1374a 100644 --- a/code/addons/essentials/src/highlight/preview.ts +++ b/code/addons/essentials/src/highlight/preview.ts @@ -1,4 +1,2 @@ -/* eslint-disable import/export */ -// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered - +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-highlight/preview'; diff --git a/code/addons/essentials/src/measure/manager.ts b/code/addons/essentials/src/measure/manager.ts index ceef38cd36ad..688ffbed236d 100644 --- a/code/addons/essentials/src/measure/manager.ts +++ b/code/addons/essentials/src/measure/manager.ts @@ -1 +1,2 @@ +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-measure/manager'; diff --git a/code/addons/essentials/src/measure/preview.ts b/code/addons/essentials/src/measure/preview.ts index f18769ff001a..647ef4345a6d 100644 --- a/code/addons/essentials/src/measure/preview.ts +++ b/code/addons/essentials/src/measure/preview.ts @@ -1,4 +1,2 @@ -/* eslint-disable import/export */ -// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered - +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-measure/preview'; diff --git a/code/addons/essentials/src/outline/manager.ts b/code/addons/essentials/src/outline/manager.ts index 9f46ef8cbae4..d3a29db6d98b 100644 --- a/code/addons/essentials/src/outline/manager.ts +++ b/code/addons/essentials/src/outline/manager.ts @@ -1 +1,2 @@ +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-outline/manager'; diff --git a/code/addons/essentials/src/outline/preview.ts b/code/addons/essentials/src/outline/preview.ts index 1cc44b9689a8..3fe09381fe8f 100644 --- a/code/addons/essentials/src/outline/preview.ts +++ b/code/addons/essentials/src/outline/preview.ts @@ -1,4 +1,2 @@ -/* eslint-disable import/export */ -// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered - +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-outline/preview'; diff --git a/code/addons/essentials/src/toolbars/manager.ts b/code/addons/essentials/src/toolbars/manager.ts index fde1c66907a1..888dfe31937d 100644 --- a/code/addons/essentials/src/toolbars/manager.ts +++ b/code/addons/essentials/src/toolbars/manager.ts @@ -1 +1,2 @@ +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-toolbars/manager'; diff --git a/code/addons/essentials/src/viewport/manager.ts b/code/addons/essentials/src/viewport/manager.ts index ccbe283d4101..48bc7a850de6 100644 --- a/code/addons/essentials/src/viewport/manager.ts +++ b/code/addons/essentials/src/viewport/manager.ts @@ -1 +1,2 @@ +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-viewport/manager'; diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index c697f8bc4630..e686af76c8d8 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -25,16 +25,8 @@ }, "license": "MIT", "exports": { - ".": { - "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "require": "./dist/index.js" - }, - "./preset": { - "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "require": "./dist/index.js" - }, + ".": "./dist/index.js", + "./preset": "./dist/index.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -49,7 +41,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/node-logger": "workspace:*", @@ -63,11 +55,8 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts" - ], - "formats": [ - "cjs" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index ad62e0252406..41b6b2f8e701 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -30,26 +30,12 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, + "./preview": "./dist/preview.js", "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -59,14 +45,14 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/core-events": "workspace:*", - "@storybook/global": "^5.0.0", - "@storybook/preview-api": "workspace:*" + "@storybook/global": "^5.0.0" }, "devDependencies": { + "@storybook/core-events": "workspace:*", + "@storybook/preview-api": "workspace:*", "@types/webpack-env": "^1.16.0", "typescript": "~4.9.3" }, @@ -74,8 +60,10 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", + "exportEntries": [ + "./src/index.ts" + ], + "previewEntries": [ "./src/preview.ts" ] }, diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 285b63a1a256..d7c2281cdd1a 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -28,39 +28,14 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, - "./register.js": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register.js": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -70,18 +45,10 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/client-logger": "workspace:*", - "@storybook/components": "workspace:*", - "@storybook/core-common": "workspace:*", - "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/instrumenter": "workspace:*", - "@storybook/manager-api": "workspace:*", - "@storybook/preview-api": "workspace:*", - "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", "jest-mock": "^27.0.6", "polished": "^4.2.2", @@ -89,32 +56,36 @@ }, "devDependencies": { "@devtools-ds/object-inspector": "^1.1.2", + "@storybook/client-logger": "workspace:*", + "@storybook/components": "workspace:*", + "@storybook/core-common": "workspace:*", + "@storybook/core-events": "workspace:*", + "@storybook/instrumenter": "workspace:*", "@storybook/jest": "next", + "@storybook/manager-api": "workspace:*", + "@storybook/preview-api": "workspace:*", "@storybook/testing-library": "next", + "@storybook/theming": "workspace:*", "@types/node": "^18.0.0", "formik": "^2.2.9", + "react": "^16.8.0", + "react-dom": "^16.8.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", - "./src/preview.ts", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ + "./src/preview.ts" + ], + "nodeEntries": [ "./src/preset.ts" ] }, diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 6d4898fbef2d..85207b2b0f23 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -34,31 +34,13 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./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": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -68,44 +50,36 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { + "@storybook/global": "^5.0.0", + "tiny-invariant": "^1.3.1", + "ts-dedent": "^2.0.0", + "upath": "^2.0.1" + }, + "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/global": "^5.0.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", + "react": "^16.8.0", + "react-dom": "^16.8.0", "react-resize-detector": "^7.1.2", - "tiny-invariant": "^1.3.1", - "upath": "^2.0.1" - }, - "devDependencies": { "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx" + "exportEntries": [ + "./src/index.ts" ], - "platform": "browser" + "managerEntries": [ + "./src/manager.tsx" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17", "storybook": { diff --git a/code/addons/links/package.json b/code/addons/links/package.json index acf57bc3ded2..6e59771f5528 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -28,26 +28,14 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, "./react": { "types": "./dist/react/index.d.ts", "require": "./dist/react/index.js", "import": "./dist/react/index.mjs" }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -58,12 +46,6 @@ "*": [ "dist/index.d.ts" ], - "manager": [ - "dist/manager.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ], "react": [ "dist/react/index.d.ts" ] @@ -78,45 +60,44 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/client-logger": "workspace:*", - "@storybook/core-events": "workspace:*", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", + "ts-dedent": "^2.0.0" + }, + "devDependencies": { + "@storybook/client-logger": "workspace:*", + "@storybook/core-events": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/router": "workspace:*", "@storybook/types": "workspace:*", - "prop-types": "^15.7.2", - "ts-dedent": "^2.0.0" - }, - "devDependencies": { "fs-extra": "^11.1.0", "typescript": "~4.9.3" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { "react": { "optional": true - }, - "react-dom": { - "optional": true } }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.ts", - "./src/preview.ts", - "./src/react/index.ts" + "exportEntries": [ + "./src/react/index.ts", + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.ts" + ], + "previewEntries": [ + "./src/preview.ts" ], "post": "./scripts/fix-preview-api-reference.ts" }, diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 62d3bf764ae3..5606dc0fe135 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -31,21 +31,9 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -73,40 +61,34 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { + "@storybook/global": "^5.0.0", + "tiny-invariant": "^1.3.1" + }, + "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/global": "^5.0.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", - "tiny-invariant": "^1.3.1" - }, - "devDependencies": { + "react": "^16.8.0", + "react-dom": "^16.8.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.tsx" ] }, diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 081d3edf71c8..c10d66ef56de 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -34,39 +34,14 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -76,40 +51,34 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { + "@storybook/global": "^5.0.0", + "ts-dedent": "^2.0.0" + }, + "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/global": "^5.0.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", - "ts-dedent": "^2.0.0" - }, - "devDependencies": { + "react": "^16.8.0", + "react-dom": "^16.8.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.tsx" ] }, diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 2dba56abbacf..a672342073ec 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -28,15 +28,8 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./preset": { - "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" - }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./preset": "./dist/preset.js", + "./manager": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -51,9 +44,13 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { + "estraverse": "^5.2.0", + "tiny-invariant": "^1.3.1" + }, + "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/manager-api": "workspace:*", @@ -61,35 +58,24 @@ "@storybook/router": "workspace:*", "@storybook/source-loader": "workspace:*", "@storybook/theming": "workspace:*", - "estraverse": "^5.2.0", - "prop-types": "^15.7.2", - "react-syntax-highlighter": "^15.5.0", - "tiny-invariant": "^1.3.1" - }, - "devDependencies": { "@types/react": "^16.14.34", "@types/react-syntax-highlighter": "11.0.5", + "react": "^16.8.0", + "react-dom": "^16.8.0", + "react-syntax-highlighter": "^15.5.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "nodeEntries": [ "./src/preset.ts" ] }, diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index e94272cdba6f..af0480eb3eb4 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -33,35 +33,14 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", "./package.json": "./package.json", "./postinstall": "./postinstall.js" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -71,9 +50,12 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { + "ts-dedent": "^2.0.0" + }, + "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", @@ -81,30 +63,19 @@ "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", - "ts-dedent": "^2.0.0" - }, - "devDependencies": { "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.tsx" ] }, diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 50970bad5ee7..af7db8fbb2fe 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -32,31 +32,13 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./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": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -66,39 +48,28 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, - "dependencies": { + "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", - "@storybook/theming": "workspace:*" - }, - "devDependencies": { + "@storybook/theming": "workspace:*", + "react": "^16.8.0", + "react-dom": "^16.8.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx" + "exportEntries": [ + "./src/index.ts" ], - "platform": "browser" + "managerEntries": [ + "./src/manager.tsx" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17", "storybook": { diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 2e012a4a84b5..fb8de61c66b3 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -29,39 +29,14 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.ts", - "import": "./dist/preview.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.ts", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -71,9 +46,12 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { + "memoizerific": "^1.11.3" + }, + "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", @@ -81,32 +59,22 @@ "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", - "memoizerific": "^1.11.3", - "prop-types": "^15.7.2" - }, - "devDependencies": { + "react": "^16.8.0", + "react-dom": "^16.8.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", + "exportEntries": [ "./src/models/index.ts", - "./src/manager.tsx", + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.ts" ] }, diff --git a/code/builders/builder-manager/src/index.ts b/code/builders/builder-manager/src/index.ts index eb869bb54f2a..89b9846184e6 100644 --- a/code/builders/builder-manager/src/index.ts +++ b/code/builders/builder-manager/src/index.ts @@ -9,8 +9,8 @@ import { pnpPlugin } from '@yarnpkg/esbuild-plugin-pnp'; import aliasPlugin from 'esbuild-plugin-alias'; import { stringifyProcessEnvs } from '@storybook/core-common'; +import { globalsModuleInfoMap } from '@storybook/manager/globals-module-info'; import { getTemplatePath, renderHTML } from './utils/template'; -import { definitions } from './utils/globals'; import { wrapManagerEntries } from './utils/managerEntries'; import type { BuilderBuildResult, @@ -89,7 +89,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => { util: require.resolve('util/util.js'), assert: require.resolve('browser-assert'), }), - globalExternals(definitions), + globalExternals(globalsModuleInfoMap), pnpPlugin(), ], diff --git a/code/builders/builder-manager/src/utils/globals.ts b/code/builders/builder-manager/src/utils/globals.ts deleted file mode 100644 index 08fda5f5a44b..000000000000 --- a/code/builders/builder-manager/src/utils/globals.ts +++ /dev/null @@ -1 +0,0 @@ -export { definitions } from '@storybook/manager/dist/globals'; diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index ddb32c800403..1972fde8e8e7 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -8,21 +8,9 @@ const INCLUDE_CANDIDATES = [ '@emotion/core', '@emotion/is-prop-valid', '@emotion/styled', - '@mdx-js/react', - '@storybook/addon-docs > acorn-jsx', - '@storybook/addon-docs', - '@storybook/addon-essentials/docs/mdx-react-shim', - '@storybook/channels', - '@storybook/client-api', - '@storybook/client-logger', - '@storybook/core/client', - '@storybook/global', - '@storybook/preview-api', - '@storybook/preview-web', '@storybook/react > acorn-jsx', '@storybook/react', '@storybook/svelte', - '@storybook/types', '@storybook/vue3', 'acorn-jsx', 'acorn-walk', @@ -79,7 +67,6 @@ const INCLUDE_CANDIDATES = [ 'lodash/uniq', 'lodash/upperFirst.js', 'lodash/upperFirst', - 'markdown-to-jsx', 'memoizerific', 'overlayscrollbars', 'polished', @@ -126,6 +113,8 @@ const asyncFilter = async (arr: string[], predicate: (val: string) => Promise arr.filter((_v, index) => results[index])); export async function getOptimizeDeps(config: ViteInlineConfig, options: Options) { + const extraOptimizeDeps = await options.presets.apply('optimizeViteDeps', []); + const { root = process.cwd() } = config; const { normalizePath, resolveConfig } = await import('vite'); const absoluteStories = await listStories(options); @@ -136,7 +125,10 @@ export async function getOptimizeDeps(config: ViteInlineConfig, options: Options // This function converts ids which might include ` > ` to a real path, if it exists on disk. // See https://github.com/vitejs/vite/blob/67d164392e8e9081dc3f0338c4b4b8eea6c5f7da/packages/vite/src/node/optimizer/index.ts#L182-L199 const resolve = resolvedConfig.createResolver({ asSrc: false }); - const include = await asyncFilter(INCLUDE_CANDIDATES, async (id) => Boolean(await resolve(id))); + const include = await asyncFilter( + Array.from(new Set([...INCLUDE_CANDIDATES, ...extraOptimizeDeps])), + async (id) => Boolean(await resolve(id)) + ); const optimizeDeps: UserConfig['optimizeDeps'] = { ...config.optimizeDeps, diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index 5274248afa80..a89a14488dd4 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -8,7 +8,7 @@ import type { InlineConfig, } from 'vite'; import { isPreservingSymlinks, getFrameworkName, getBuilderOptions } from '@storybook/core-common'; -import { globals } from '@storybook/preview/globals'; +import { globalsNameReferenceMap } from '@storybook/preview/globals'; import type { Options } from '@storybook/types'; import { codeGeneratorPlugin, @@ -79,8 +79,10 @@ export async function pluginConfig(options: Options) { const frameworkName = await getFrameworkName(options); const build = await options.presets.apply('build'); + const externals: Record = globalsNameReferenceMap; + if (build?.test?.emptyBlocks) { - globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; + externals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; } const plugins = [ @@ -101,7 +103,7 @@ export async function pluginConfig(options: Options) { } }, }, - await externalGlobalsPlugin(globals), + await externalGlobalsPlugin(externals), ] as PluginOption[]; // TODO: framework doesn't exist, should move into framework when/if built 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 da62a70ed652..0c3d53165e08 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -11,7 +11,7 @@ import slash from 'slash'; import type { TransformOptions as EsbuildOptions } from 'esbuild'; import type { JsMinifyOptions as SwcOptions } from '@swc/core'; import type { Options, CoreConfig, DocsOptions, PreviewAnnotation } from '@storybook/types'; -import { globals } from '@storybook/preview/globals'; +import { globalsNameReferenceMap } from '@storybook/preview/globals'; import { getBuilderOptions, getRendererName, @@ -220,8 +220,9 @@ export default async ( `); } + const externals: Record = globalsNameReferenceMap; if (build?.test?.emptyBlocks) { - globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; + externals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; } return { @@ -242,7 +243,7 @@ export default async ( watchOptions: { ignored: /node_modules/, }, - externals: globals, + externals, ignoreWarnings: [ { message: /export '\S+' was not found in 'global'/, diff --git a/code/deprecated/addons/package.json b/code/deprecated/addons/package.json index 8fe6873b03bb..29c16565eb08 100644 --- a/code/deprecated/addons/package.json +++ b/code/deprecated/addons/package.json @@ -48,10 +48,6 @@ "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, "publishConfig": { "access": "public" }, diff --git a/code/deprecated/manager-api-shim/package.json b/code/deprecated/manager-api-shim/package.json index 46ab418329fb..d6c166fe7aab 100644 --- a/code/deprecated/manager-api-shim/package.json +++ b/code/deprecated/manager-api-shim/package.json @@ -46,18 +46,6 @@ "@storybook/client-logger": "workspace:*", "@storybook/manager-api": "workspace:*" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 8625bf2c97c7..ba7a9c17d325 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -46,7 +46,6 @@ "@storybook/core-webpack": "workspace:*", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/telemetry": "workspace:*", @@ -102,8 +101,6 @@ "@angular/platform-browser": ">=14.1.0 < 18.0.0", "@angular/platform-browser-dynamic": ">=14.1.0 < 18.0.0", "@babel/core": "*", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "rxjs": "^6.0.0 || ^7.4.0", "typescript": "^4.0.0 || ^5.0.0", "zone.js": ">= 0.11.1 < 1.0.0" diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 92967af0ce7d..88fc6bc43871 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -49,9 +49,7 @@ "@types/ember__component": "4.0.8", "babel-plugin-ember-modules-api-polyfill": "^2.12.0", "babel-plugin-htmlbars-inline-precompile": "2 || 3", - "ember-source": "~3.28.1", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "ember-source": "~3.28.1" }, "engines": { "node": ">=16.0.0" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 1c584cf90cbe..859d6e6111fb 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -58,9 +58,7 @@ "typescript": "~4.9.3" }, "peerDependencies": { - "@babel/core": "*", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "@babel/core": "*" }, "engines": { "node": ">=16.0.0" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 201a3d760bc7..47dc33f5713b 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -59,9 +59,7 @@ }, "peerDependencies": { "@babel/core": "*", - "preact": "^8.0.0||^10.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "preact": "^8.0.0||^10.0.0" }, "engines": { "node": ">=16.0.0" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 22a4a36de3ce..1b169ff410c8 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -56,10 +56,6 @@ "devDependencies": { "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, "engines": { "node": ">=16.0.0" }, diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 4e0fd81fae66..db886b30f64e 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -59,8 +59,6 @@ }, "peerDependencies": { "@babel/core": "*", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "svelte": "^3.48.0 || ^4.0.0", "svelte-loader": "*" }, diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index 4097b6243048..75be376191df 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -60,8 +60,6 @@ "vue": "^2.7.10" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "vite": "^3.0.0 || ^4.0.0 || ^5.0.0", "vue": "^2.7.0" }, diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json index a398d233100d..3ad44f20ddba 100644 --- a/code/frameworks/vue-webpack5/package.json +++ b/code/frameworks/vue-webpack5/package.json @@ -63,8 +63,6 @@ "@babel/core": "*", "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", "css-loader": "*", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "vue": "^2.6.8", "vue-loader": "^15.7.0", "vue-template-compiler": "^2.6.8" diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 3e570422d975..6e4e161f5bb0 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -60,8 +60,6 @@ "vite": "^4.0.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "engines": { diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 6499e6f19c07..02c6a5130eff 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -62,8 +62,6 @@ "@babel/core": "*", "@vue/compiler-sfc": "^3.0.0", "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "vue": "^3.0.0" }, "engines": { diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 2e901b8edd4b..f93770e8b109 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -57,10 +57,6 @@ "@types/node": "^18.0.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, "engines": { "node": "^14.18 || >=16" }, diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 7b51a8e8a028..76aeb1e19003 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -62,9 +62,7 @@ "typescript": "~4.9.3" }, "peerDependencies": { - "lit": "^2.0.0 || ^3.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "lit": "^2.0.0 || ^3.0.0" }, "engines": { "node": ">=16.0.0" diff --git a/code/lib/core-server/src/utils/warnOnIncompatibleAddons.ts b/code/lib/core-server/src/utils/warnOnIncompatibleAddons.ts index a850d49809ad..23e17c77bc56 100644 --- a/code/lib/core-server/src/utils/warnOnIncompatibleAddons.ts +++ b/code/lib/core-server/src/utils/warnOnIncompatibleAddons.ts @@ -1,5 +1,5 @@ import type { StorybookConfig } from '@storybook/types'; -import { logger } from '@storybook/client-logger'; +import { logger } from '@storybook/node-logger'; import chalk from 'chalk'; import dedent from 'ts-dedent'; diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 2da60f5d5b21..34b7fe6aae13 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -65,18 +65,20 @@ "@types/qs": "^6", "flush-promises": "^1.0.2", "qs": "^6.10.0", + "react": "^16.8.0", + "react-dom": "^16.8.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, "publishConfig": { "access": "public" }, "bundler": { "entries": [ "./src/index.tsx" + ], + "externals": [ + "react", + "react-dom" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx index 951dc494a93a..d44b49002ca7 100644 --- a/code/lib/manager-api/src/index.tsx +++ b/code/lib/manager-api/src/index.tsx @@ -67,6 +67,8 @@ import * as whatsnew from './modules/whatsnew'; import * as globals from './modules/globals'; import type { ModuleFn } from './lib/types'; +import { types } from './lib/addons'; + export * from './lib/shortcut'; const { ActiveTabs } = layout; @@ -506,5 +508,14 @@ export function useArgTypes(): ArgTypes { export { addons } from './lib/addons'; +/** + * We need to rename this so it's not compiled to a straight re-export + * Our globalization plugin can't handle an import and export of the same name in different lines + * @deprecated + */ +const typesX = types; + +export { typesX as types }; + /* deprecated */ -export { mockChannel, types, type Addon, type AddonStore } from './lib/addons'; +export { mockChannel, type Addon, type AddonStore } from './lib/addons'; diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index beb955e5fe30..b5674f1c9eb8 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -87,7 +87,6 @@ "@jest/globals": "^29.5.0", "@storybook/core-common": "workspace:*", "ansi-to-html": "^0.6.11", - "react": "^16.14.0", "slash": "^5.0.0" }, "publishConfig": { diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 9852cfcbee51..51a34e28a54c 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -27,6 +27,7 @@ }, "./globals": { "types": "./dist/globals.d.ts", + "import": "./dist/globals.js", "require": "./dist/globals.js" }, "./package.json": "./package.json" @@ -62,6 +63,8 @@ "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", "browser-dtector": "^3.4.0", + "fs-extra": "^11.1.0", + "ts-dedent": "^2.0.0", "typescript": "~4.9.3" }, "publishConfig": { diff --git a/code/lib/preview/src/globals.ts b/code/lib/preview/src/globals.ts index fb7419cf52ed..3b9b2321b6f0 100644 --- a/code/lib/preview/src/globals.ts +++ b/code/lib/preview/src/globals.ts @@ -1 +1 @@ -export * from './globals/types'; +export * from './globals/globals'; diff --git a/code/lib/preview/src/globals/types.ts b/code/lib/preview/src/globals/globals.ts similarity index 73% rename from code/lib/preview/src/globals/types.ts rename to code/lib/preview/src/globals/globals.ts index 176d4582833d..3cd77282fe49 100644 --- a/code/lib/preview/src/globals/types.ts +++ b/code/lib/preview/src/globals/globals.ts @@ -1,6 +1,6 @@ -// Here we map the name of a module to their NAME in the global scope. -// eslint-disable-next-line @typescript-eslint/naming-convention,no-underscore-dangle -const _globals = { +// Here we map the name of a module to their REFERENCE in the global scope. + +export const globalsNameReferenceMap = { '@storybook/addons': '__STORYBOOK_MODULE_ADDONS__', '@storybook/global': '__STORYBOOK_MODULE_GLOBAL__', '@storybook/channel-postmessage': '__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__', // @deprecated: remove in 8.0 @@ -13,6 +13,9 @@ const _globals = { '@storybook/preview-web': '__STORYBOOK_MODULE_PREVIEW_WEB__', '@storybook/preview-api': '__STORYBOOK_MODULE_PREVIEW_API__', '@storybook/store': '__STORYBOOK_MODULE_STORE__', -}; + '@storybook/types': '__STORYBOOK_MODULE_TYPES__', +} as const; -export const globals: typeof _globals & Record = _globals; +export const globalPackages = Object.keys(globalsNameReferenceMap) as Array< + keyof typeof globalsNameReferenceMap +>; diff --git a/code/lib/preview/src/globals/runtime.ts b/code/lib/preview/src/globals/runtime.ts index ad078c4afa8d..f05dd3ef24cd 100644 --- a/code/lib/preview/src/globals/runtime.ts +++ b/code/lib/preview/src/globals/runtime.ts @@ -1,9 +1,8 @@ -import * as CHANNEL_POSTMESSAGE from '@storybook/channels/dist/postmessage/index'; -import * as CHANNEL_WEBSOCKET from '@storybook/channels/dist/websocket/index'; import * as CHANNELS from '@storybook/channels'; import * as CLIENT_LOGGER from '@storybook/client-logger'; import * as CORE_EVENTS from '@storybook/core-events'; import * as PREVIEW_API from '@storybook/preview-api'; +import * as TYPES from '@storybook/types'; import * as GLOBAL from '@storybook/global'; // DEPRECATED, remove in 8.0 @@ -12,20 +11,23 @@ import * as CLIENT_API from '@storybook/preview-api/dist/client-api'; import * as CORE_CLIENT from '@storybook/preview-api/dist/core-client'; import * as PREVIEW_WEB from '@storybook/preview-api/dist/preview-web'; import * as STORE from '@storybook/preview-api/dist/store'; +import * as CHANNEL_POSTMESSAGE from '@storybook/channels/dist/postmessage/index'; +import * as CHANNEL_WEBSOCKET from '@storybook/channels/dist/websocket/index'; -import type { globals } from './types'; +import type { globalsNameReferenceMap } from './globals'; // Here we map the name of a module to their VALUE in the global scope. -export const values: Required> = { - '@storybook/channel-postmessage': CHANNEL_POSTMESSAGE, // @deprecated: remove in 8.0 - '@storybook/channel-websocket': CHANNEL_WEBSOCKET, // @deprecated: remove in 8.0 +export const globalsNameValueMap: Required> = { '@storybook/channels': CHANNELS, '@storybook/client-logger': CLIENT_LOGGER, '@storybook/core-events': CORE_EVENTS, '@storybook/preview-api': PREVIEW_API, '@storybook/global': GLOBAL, + '@storybook/types': TYPES, // DEPRECATED, remove in 8.0 + '@storybook/channel-postmessage': CHANNEL_POSTMESSAGE, + '@storybook/channel-websocket': CHANNEL_WEBSOCKET, '@storybook/addons': ADDONS, '@storybook/client-api': CLIENT_API, '@storybook/core-client': CORE_CLIENT, diff --git a/code/lib/preview/src/runtime.ts b/code/lib/preview/src/runtime.ts index 603c586b9fe3..6b2900b68820 100644 --- a/code/lib/preview/src/runtime.ts +++ b/code/lib/preview/src/runtime.ts @@ -1,15 +1,13 @@ import { TELEMETRY_ERROR } from '@storybook/core-events'; import { global } from '@storybook/global'; +import { globalPackages, globalsNameReferenceMap } from './globals/globals'; +import { globalsNameValueMap } from './globals/runtime'; -import { values } from './globals/runtime'; -import { globals } from './globals/types'; import { prepareForTelemetry } from './utils'; -const getKeys = Object.keys as (obj: T) => Array; - // Apply all the globals -getKeys(globals).forEach((key) => { - (global as any)[globals[key]] = values[key]; +globalPackages.forEach((key) => { + (global as any)[globalsNameReferenceMap[key]] = globalsNameValueMap[key]; }); global.sendTelemetryError = (error: any) => { diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 4dbc70984d27..458539c1b603 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -57,14 +57,12 @@ "@storybook/global": "^5.0.0", "dequal": "^2.0.2", "lodash": "^4.17.21", + "react": "^16.8.0", + "react-dom": "^16.8.0", "react-router-dom": "6.0.2", "ts-dedent": "^2.0.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, "publishConfig": { "access": "public" }, @@ -73,6 +71,20 @@ "entries": [ "./src/index.ts", "./src/utils.ts" + ], + "externals": [ + "react", + "react-dom", + "@storybook/addons", + "@storybook/api", + "@storybook/channels", + "@storybook/client-logger", + "@storybook/components", + "@storybook/core-events", + "@storybook/manager-api", + "@storybook/router", + "@storybook/theming", + "@storybook/types" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index ac7a99d237a7..5278c5aba74f 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -55,10 +55,6 @@ "jest-specific-snapshot": "^8.0.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, "publishConfig": { "access": "public" }, diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 7761a9598c78..c54bf6d301a8 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -79,6 +79,20 @@ "./src/index.ts", "./src/create.ts" ], + "externals": [ + "react", + "react-dom", + "@storybook/addons", + "@storybook/api", + "@storybook/channels", + "@storybook/client-logger", + "@storybook/components", + "@storybook/core-events", + "@storybook/manager-api", + "@storybook/router", + "@storybook/theming", + "@storybook/types" + ], "post": "./scripts/fix-theme-type-export.ts" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/renderers/preact/template/cli/Button.jsx b/code/renderers/preact/template/cli/Button.jsx index eefda2bffe3f..9bcecb3710d7 100644 --- a/code/renderers/preact/template/cli/Button.jsx +++ b/code/renderers/preact/template/cli/Button.jsx @@ -1,10 +1,21 @@ -import PropTypes from 'prop-types'; import './button.css'; /** * Primary UI component for user interaction + * @param {object} props + * @param {string} [props.primary=false] + * @param {string} [props.backgroundColor] + * @param {('small' | 'medium' | 'large')} [props.size='medium'] + * @param {string} props.label + * @param {function} props.onClick */ -export const Button = ({ primary, backgroundColor, size, label, ...props }) => { +export const Button = ({ + primary = false, + backgroundColor = null, + size = 'medium', + label, + ...props +}) => { const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; return ( ); }; - -Button.propTypes = { - /** - * Is this the principal call to action on the page? - */ - primary: PropTypes.bool, - /** - * What background color to use - */ - backgroundColor: PropTypes.string, - /** - * How large should the button be? - */ - size: PropTypes.oneOf(['small', 'medium', 'large']), - /** - * Button contents - */ - label: PropTypes.string.isRequired, - /** - * Optional click handler - */ - onClick: PropTypes.func, -}; - -Button.defaultProps = { - backgroundColor: null, - primary: false, - size: 'medium', - onClick: undefined, -}; diff --git a/code/renderers/preact/template/cli/Header.jsx b/code/renderers/preact/template/cli/Header.jsx index 8a722e57d331..c87a04c4837e 100644 --- a/code/renderers/preact/template/cli/Header.jsx +++ b/code/renderers/preact/template/cli/Header.jsx @@ -1,9 +1,16 @@ -import PropTypes from 'prop-types'; - import { Button } from './Button'; import './header.css'; -export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( +/** + * Header component + * @param {object} props + * @param {object} [props.user] + * @param {string} props.user.name + * @param {function} props.onLogin + * @param {function} props.onLogout + * @param {function} props.onCreateAccount + */ +export const Header = ({ user = null, onLogin, onLogout, onCreateAccount }) => (
@@ -43,16 +50,3 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
); - -Header.propTypes = { - user: PropTypes.shape({ - name: PropTypes.string.isRequired, - }), - onLogin: PropTypes.func.isRequired, - onLogout: PropTypes.func.isRequired, - onCreateAccount: PropTypes.func.isRequired, -}; - -Header.defaultProps = { - user: null, -}; diff --git a/code/renderers/preact/template/cli/Page.jsx b/code/renderers/preact/template/cli/Page.jsx index 12ca119d0b04..a5bc82d9d105 100644 --- a/code/renderers/preact/template/cli/Page.jsx +++ b/code/renderers/preact/template/cli/Page.jsx @@ -2,6 +2,9 @@ import { useState } from 'preact/hooks'; import { Header } from './Header'; import './page.css'; +/** + * Simple page component + */ export const Page = () => { const [user, setUser] = useState(); diff --git a/code/renderers/preact/template/components/Button.jsx b/code/renderers/preact/template/components/Button.jsx index cd3c13987c32..e79f89f5d4b3 100644 --- a/code/renderers/preact/template/components/Button.jsx +++ b/code/renderers/preact/template/components/Button.jsx @@ -1,14 +1,11 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; - +/** + * Button component + * @param {object} props + * @param {string} props.label + * @param {function} props.onClick + */ export const Button = ({ onClick, label }) => ( ); - -Button.propTypes = { - onClick: PropTypes.func.isRequired, - label: PropTypes.node.isRequired, -}; diff --git a/code/renderers/preact/template/components/Form.jsx b/code/renderers/preact/template/components/Form.jsx index fb58cbb10508..b2283d26ac10 100644 --- a/code/renderers/preact/template/components/Form.jsx +++ b/code/renderers/preact/template/components/Form.jsx @@ -1,8 +1,14 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; import { useState } from 'preact/hooks'; +/** + * Header component + * @param {object} props + * @param {object} [props.user] + * @param {string} props.user.name + * @param {function} props.onLogin + * @param {function} props.onLogout + * @param {function} props.onCreateAccount + */ export const Form = ({ onSuccess }) => { const [value, setValue] = useState(''); const [complete, setComplete] = useState(false); @@ -32,7 +38,3 @@ export const Form = ({ onSuccess }) => { ); }; - -Form.propTypes = { - onSuccess: PropTypes.func.isRequired, -}; diff --git a/code/renderers/preact/template/components/Html.jsx b/code/renderers/preact/template/components/Html.jsx index 36cff8218890..b2c1f966f9e3 100644 --- a/code/renderers/preact/template/components/Html.jsx +++ b/code/renderers/preact/template/components/Html.jsx @@ -1,10 +1 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; - -// eslint-disable-next-line react/no-danger export const Html = ({ content }) =>
; - -Html.propTypes = { - content: PropTypes.string.isRequired, -}; diff --git a/code/renderers/preact/template/components/Pre.jsx b/code/renderers/preact/template/components/Pre.jsx index 7efec93be9d6..3bf143581fac 100644 --- a/code/renderers/preact/template/components/Pre.jsx +++ b/code/renderers/preact/template/components/Pre.jsx @@ -1,21 +1,12 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; - +/** + * Pre component + * @param {object} props + * @param {object} [props.style] + * @param {object} [props.object] + * @param {string} [props.text] + */ export const Pre = ({ style, object, text }) => ( 
     {object ? JSON.stringify(object, null, 2) : text}
); - -Pre.propTypes = { - style: PropTypes.shape({}), - object: PropTypes.shape({}), - text: PropTypes.string, -}; - -Pre.defaultProps = { - style: {}, - object: null, - text: '', -}; diff --git a/code/renderers/preact/template/stories/React.js b/code/renderers/preact/template/stories/React.js index 0c72668ebe74..1d1fa97c55d8 100644 --- a/code/renderers/preact/template/stories/React.js +++ b/code/renderers/preact/template/stories/React.js @@ -1,8 +1,11 @@ // eslint-disable-next-line import/no-extraneous-dependencies import React from 'react'; -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; +/** + * ReactFunctionalComponent component + * @param {object} props + * @param {string} props.label + */ export const ReactFunctionalComponent = ({ label }) => { const [clicks, setValue] = React.useState(0); return ( @@ -19,10 +22,11 @@ export const ReactFunctionalComponent = ({ label }) => { ); }; -ReactFunctionalComponent.propTypes = { - label: PropTypes.string.isRequired, -}; - +/** + * ReactClassComponent component + * @param {object} props + * @param {string} props.label + */ export class ReactClassComponent extends React.Component { state = { clicks: 0, @@ -45,7 +49,3 @@ export class ReactClassComponent extends React.Component { ); } } - -ReactClassComponent.propTypes = { - label: PropTypes.string.isRequired, -}; diff --git a/code/renderers/preact/template/stories/react-compat.stories.js b/code/renderers/preact/template/stories/react-compat.stories.js index b7895c1e8d0f..33f1078d3154 100644 --- a/code/renderers/preact/template/stories/react-compat.stories.js +++ b/code/renderers/preact/template/stories/react-compat.stories.js @@ -1,4 +1,3 @@ -/* eslint-disable react/react-in-jsx-scope */ import { ReactFunctionalComponent, ReactClassComponent } from './React'; export default { diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index ddd73d9a38e0..3d28936a3e6b 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -59,6 +59,7 @@ "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", "sveltedoc-parser": "^4.2.1", + "ts-dedent": "^2.0.0", "type-fest": "~2.19" }, "devDependencies": { diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 0278119e1f00..7372f1f136f9 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -24,12 +24,17 @@ "types": "./dist/index.d.ts", "import": "./dist/index.js" }, - "./dist/runtime": { + "./runtime": { "types": "./dist/runtime.d.ts", "import": "./dist/runtime.js" }, - "./dist/globals": { + "./globals-module-info": { + "types": "./dist/globals-module-info.d.ts", + "require": "./dist/globals-module-info.js" + }, + "./globals": { "types": "./dist/globals.d.ts", + "import": "./dist/globals.js", "require": "./dist/globals.js" }, "./paths": "./paths.js", @@ -38,6 +43,22 @@ "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", + "typesVersions": { + "*": { + "*": [ + "dist/index.d.ts" + ], + "runtime": [ + "dist/runtime.d.ts" + ], + "globals": [ + "dist/globals.d.ts" + ], + "globals-module-info": [ + "dist/globals-module-info.d.ts" + ] + } + }, "files": [ "dist/**/*", "static/**/*", @@ -97,7 +118,8 @@ "./src/runtime.ts" ], "nodeEntries": [ - "./src/globals.ts" + "./src/globals.ts", + "./src/globals-module-info.ts" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/ui/manager/scripts/generate-exports-file.ts b/code/ui/manager/scripts/generate-exports-file.ts index afdbea8ff6e6..ece5ac50391b 100644 --- a/code/ui/manager/scripts/generate-exports-file.ts +++ b/code/ui/manager/scripts/generate-exports-file.ts @@ -3,7 +3,7 @@ import fs from 'fs-extra'; import path from 'path'; import { dedent } from 'ts-dedent'; import { ESLint } from '../../../../scripts/node_modules/eslint'; -import { values } from '../src/globals/runtime'; +import { globalsNameValueMap } from '../src/globals/runtime'; const location = path.join(__dirname, '..', 'src', 'globals', 'exports.ts'); let attempts = 0; @@ -29,10 +29,13 @@ async function generate(text: string) { } const run = async () => { - const data = Object.entries(values).reduce>((acc, [key, value]) => { - acc[key] = Object.keys(value).filter(removeDefault); - return acc; - }, {}); + const data = Object.entries(globalsNameValueMap).reduce>( + (acc, [key, value]) => { + acc[key] = Object.keys(value).filter(removeDefault); + return acc; + }, + {} + ); console.log('Generating...'); diff --git a/code/ui/manager/src/globals-module-info.ts b/code/ui/manager/src/globals-module-info.ts new file mode 100644 index 000000000000..4bcbf259af79 --- /dev/null +++ b/code/ui/manager/src/globals-module-info.ts @@ -0,0 +1 @@ +export * from './globals/globals-module-info'; diff --git a/code/ui/manager/src/globals.ts b/code/ui/manager/src/globals.ts index d516acc55516..3b9b2321b6f0 100644 --- a/code/ui/manager/src/globals.ts +++ b/code/ui/manager/src/globals.ts @@ -1 +1 @@ -export * from './globals/definitions'; +export * from './globals/globals'; diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index ef2523f0e06a..f56ba153dd82 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -278,4 +278,5 @@ export default { ], '@storybook/addons': ['addons', 'types', 'mockChannel'], '@storybook/client-logger': ['deprecate', 'logger', 'once', 'pretty'], + '@storybook/types': ['Addon_TypesEnum'], } as const; diff --git a/code/ui/manager/src/globals/definitions.ts b/code/ui/manager/src/globals/globals-module-info.ts similarity index 65% rename from code/ui/manager/src/globals/definitions.ts rename to code/ui/manager/src/globals/globals-module-info.ts index 9122fca70262..616148e80ca4 100644 --- a/code/ui/manager/src/globals/definitions.ts +++ b/code/ui/manager/src/globals/globals-module-info.ts @@ -1,7 +1,6 @@ import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals'; import Exports from './exports'; -import { Keys } from './types'; -import type { Definitions } from './types'; +import { globalPackages, globalsNameReferenceMap } from './globals'; /* * We create a map of a module's name to a ModuleInfo. @@ -18,18 +17,16 @@ import type { Definitions } from './types'; * * If you forget to do either, TypeScript will complain. * - * This `definitions.ts` file is consumed by the `builder-manager` package, + * This `globals-module-info.ts` file is consumed by the `builder-manager` package, * The `runtime.ts` file is used inside the manager's browser code runtime. */ -const createModuleInfo = (m: keyof typeof Keys): Required => ({ - type: 'esm', - varName: Keys[m], - namedExports: Exports[m], - defaultExport: true, -}); - -export const definitions = Object.keys(Keys).reduce((acc, key) => { - acc[key as keyof typeof Keys] = createModuleInfo(key as keyof typeof Keys); +export const globalsModuleInfoMap = globalPackages.reduce((acc, key) => { + acc[key] = { + type: 'esm', + varName: globalsNameReferenceMap[key], + namedExports: Exports[key], + defaultExport: true, + }; return acc; -}, {} as Definitions); +}, {} as Required>>); diff --git a/code/ui/manager/src/globals/globals.ts b/code/ui/manager/src/globals/globals.ts new file mode 100644 index 000000000000..1ef93c38bc94 --- /dev/null +++ b/code/ui/manager/src/globals/globals.ts @@ -0,0 +1,19 @@ +// Here we map the name of a module to their REFERENCE in the global scope. +export const globalsNameReferenceMap = { + react: '__REACT__', + 'react-dom': '__REACT_DOM__', + '@storybook/components': '__STORYBOOK_COMPONENTS__', + '@storybook/channels': '__STORYBOOK_CHANNELS__', + '@storybook/core-events': '__STORYBOOK_CORE_EVENTS__', + '@storybook/router': '__STORYBOOK_ROUTER__', + '@storybook/theming': '__STORYBOOK_THEMING__', + '@storybook/api': '__STORYBOOK_API__', // deprecated, remove in 8.0 + '@storybook/manager-api': '__STORYBOOK_API__', + '@storybook/addons': '__STORYBOOK_ADDONS__', + '@storybook/client-logger': '__STORYBOOK_CLIENT_LOGGER__', + '@storybook/types': '__STORYBOOK_TYPES__', +} as const; + +export const globalPackages = Object.keys(globalsNameReferenceMap) as Array< + keyof typeof globalsNameReferenceMap +>; diff --git a/code/ui/manager/src/globals/runtime.ts b/code/ui/manager/src/globals/runtime.ts index 5850699f171d..59f5f8fc1a09 100644 --- a/code/ui/manager/src/globals/runtime.ts +++ b/code/ui/manager/src/globals/runtime.ts @@ -1,32 +1,34 @@ import * as REACT from 'react'; -import * as REACTDOM from 'react-dom'; +import * as REACT_DOM from 'react-dom'; -import * as STORYBOOKCOMPONENTS from '@storybook/components'; -import * as STORYBOOKCHANNELS from '@storybook/channels'; -import * as STORYBOOKEVENTS from '@storybook/core-events'; -import * as STORYBOOKROUTER from '@storybook/router'; -import * as STORYBOOKTHEMING from '@storybook/theming'; -import * as STORYBOOKMANAGERAPI from '@storybook/manager-api'; -import * as STORYBOOKCLIENTLOGGER from '@storybook/client-logger'; +import * as COMPONENTS from '@storybook/components'; +import * as CHANNELS from '@storybook/channels'; +import * as EVENTS from '@storybook/core-events'; +import * as ROUTER from '@storybook/router'; +import * as THEMING from '@storybook/theming'; +import * as MANAGER_API from '@storybook/manager-api'; +import * as TYPES from '@storybook/types'; +import * as CLIENT_LOGGER from '@storybook/client-logger'; -import type { Keys } from './types'; +import type { globalsNameReferenceMap } from './globals'; // Here we map the name of a module to their VALUE in the global scope. -export const values: Required> = { - react: REACT as any, - 'react-dom': REACTDOM, - '@storybook/components': STORYBOOKCOMPONENTS, - '@storybook/channels': STORYBOOKCHANNELS, - '@storybook/core-events': STORYBOOKEVENTS, - '@storybook/router': STORYBOOKROUTER, - '@storybook/theming': STORYBOOKTHEMING, - '@storybook/api': STORYBOOKMANAGERAPI, // deprecated, remove in 8.0 - '@storybook/manager-api': STORYBOOKMANAGERAPI, +export const globalsNameValueMap: Required> = { + react: REACT, + 'react-dom': REACT_DOM, + '@storybook/components': COMPONENTS, + '@storybook/channels': CHANNELS, + '@storybook/core-events': EVENTS, + '@storybook/router': ROUTER, + '@storybook/theming': THEMING, + '@storybook/api': MANAGER_API, // deprecated, remove in 8.0 + '@storybook/manager-api': MANAGER_API, // backwards compatibility '@storybook/addons': { - addons: STORYBOOKMANAGERAPI.addons, - types: STORYBOOKMANAGERAPI.types, - mockChannel: STORYBOOKMANAGERAPI.mockChannel, + addons: MANAGER_API.addons, + types: MANAGER_API.types, + mockChannel: MANAGER_API.mockChannel, }, - '@storybook/client-logger': STORYBOOKCLIENTLOGGER, + '@storybook/client-logger': CLIENT_LOGGER, + '@storybook/types': TYPES, }; diff --git a/code/ui/manager/src/globals/types.ts b/code/ui/manager/src/globals/types.ts deleted file mode 100644 index 2861e45f632a..000000000000 --- a/code/ui/manager/src/globals/types.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals'; - -// Here we map the name of a module to their NAME in the global scope. -export enum Keys { - 'react' = '__REACT__', - 'react-dom' = '__REACTDOM__', - '@storybook/components' = '__STORYBOOKCOMPONENTS__', - '@storybook/channels' = '__STORYBOOKCHANNELS__', - '@storybook/core-events' = '__STORYBOOKCOREEVENTS__', - '@storybook/router' = '__STORYBOOKROUTER__', - '@storybook/theming' = '__STORYBOOKTHEMING__', - '@storybook/api' = '__STORYBOOKAPI__', // deprecated, remove in 8.0 - '@storybook/manager-api' = '__STORYBOOKAPI__', - '@storybook/addons' = '__STORYBOOKADDONS__', - '@storybook/client-logger' = '__STORYBOOKCLIENTLOGGER__', -} - -export type Definitions = Required>>; diff --git a/code/ui/manager/src/runtime.ts b/code/ui/manager/src/runtime.ts index efa348ac47e0..f66bde4de3d3 100644 --- a/code/ui/manager/src/runtime.ts +++ b/code/ui/manager/src/runtime.ts @@ -9,8 +9,8 @@ import { CHANNEL_CREATED, TELEMETRY_ERROR } from '@storybook/core-events'; import Provider from './provider'; import { renderStorybookUI } from './index'; -import { values } from './globals/runtime'; -import { Keys } from './globals/types'; +import { globalsNameValueMap } from './globals/runtime'; +import { globalPackages, globalsNameReferenceMap } from './globals/globals'; import { prepareForTelemetry, shouldSkipError } from './utils/prepareForTelemetry'; const { FEATURES, CONFIG_TYPE } = global; @@ -58,8 +58,8 @@ class ReactProvider extends Provider { } // Apply all the globals -Object.keys(Keys).forEach((key: keyof typeof Keys) => { - global[Keys[key]] = values[key]; +globalPackages.forEach((key) => { + global[globalsNameReferenceMap[key]] = globalsNameValueMap[key]; }); global.sendTelemetryError = (error) => { diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts index 2ff3df07e63e..bce29ea466a7 100644 --- a/code/ui/manager/src/typings.d.ts +++ b/code/ui/manager/src/typings.d.ts @@ -15,15 +15,15 @@ declare var VERSIONCHECK: any; declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined; declare var __REACT__: any; -declare var __REACTDOM__: any; -declare var __STORYBOOKCOMPONENTS__: any; -declare var __STORYBOOKCOMPONENTSEXPERIMENTAL__: any; -declare var __STORYBOOKCHANNELS__: any; -declare var __STORYBOOKCOREEVENTS__: any; -declare var __STORYBOOKROUTER__: any; -declare var __STORYBOOKTHEMING__: any; -declare var __STORYBOOKAPI__: any; -declare var __STORYBOOKADDONS__: any; -declare var __STORYBOOKCLIENTLOGGER__: any; +declare var __REACT_DOM__: any; +declare var __STORYBOOK_COMPONENTS__: any; +declare var __STORYBOOK_CHANNELS__: any; +declare var __STORYBOOK_CORE_EVENTS__: any; +declare var __STORYBOOK_ROUTER__: any; +declare var __STORYBOOK_THEMING__: any; +declare var __STORYBOOK_API__: any; +declare var __STORYBOOK_ADDONS__: any; +declare var __STORYBOOK_CLIENT_LOGGER__: any; declare var __STORYBOOK_ADDONS_CHANNEL__: any; +declare var __STORYBOOK_TYPES__: any; declare var sendTelemetryError: (error: any) => void; diff --git a/code/yarn.lock b/code/yarn.lock index ce57e7431391..6cc2650da012 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5345,7 +5345,6 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" - "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5354,17 +5353,11 @@ __metadata: "@testing-library/react": "npm:^11.2.2" axe-core: "npm:^4.2.0" lodash: "npm:^4.17.21" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" react-resize-detector: "npm:^7.1.2" resize-observer-polyfill: "npm:^1.5.1" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5386,19 +5379,13 @@ __metadata: lodash: "npm:^4.17.21" polished: "npm:^4.2.2" prop-types: "npm:^15.7.2" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" react-inspector: "npm:^6.0.0" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" uuid: "npm:^9.0.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5408,23 +5395,16 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" - "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" memoizerific: "npm:^1.11.3" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5436,22 +5416,15 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-common": "workspace:*" - "@storybook/core-events": "workspace:*" "@storybook/manager-api": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" lodash: "npm:^4.17.21" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" ts-dedent: "npm:^2.0.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5571,16 +5544,10 @@ __metadata: formik: "npm:^2.2.9" jest-mock: "npm:^27.0.6" polished: "npm:^4.2.2" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" ts-dedent: "npm:^2.2.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5595,18 +5562,13 @@ __metadata: "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" react-resize-detector: "npm:^7.1.2" tiny-invariant: "npm:^1.3.1" + ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" upath: "npm:^2.0.1" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5623,17 +5585,13 @@ __metadata: "@storybook/router": "workspace:*" "@storybook/types": "workspace:*" fs-extra: "npm:^11.1.0" - prop-types: "npm:^15.7.2" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 peerDependenciesMeta: react: optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5659,16 +5617,10 @@ __metadata: "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" tiny-invariant: "npm:^1.3.1" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5683,16 +5635,10 @@ __metadata: "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5820,18 +5766,11 @@ __metadata: "@types/react": "npm:^16.14.34" "@types/react-syntax-highlighter": "npm:11.0.5" estraverse: "npm:^5.2.0" - prop-types: "npm:^15.7.2" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" react-syntax-highlighter: "npm:^15.5.0" tiny-invariant: "npm:^1.3.1" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5848,14 +5787,6 @@ __metadata: "@storybook/types": "workspace:*" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5868,15 +5799,9 @@ __metadata: "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5892,16 +5817,9 @@ __metadata: "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" memoizerific: "npm:^1.11.3" - prop-types: "npm:^15.7.2" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5912,9 +5830,6 @@ __metadata: "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -5943,7 +5858,6 @@ __metadata: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" - "@storybook/manager-api": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/telemetry": "workspace:*" @@ -5983,8 +5897,6 @@ __metadata: "@angular/platform-browser": ">=14.1.0 < 18.0.0" "@angular/platform-browser-dynamic": ">=14.1.0 < 18.0.0" "@babel/core": "*" - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 rxjs: ^6.0.0 || ^7.4.0 typescript: ^4.0.0 || ^5.0.0 zone.js: ">= 0.11.1 < 1.0.0" @@ -6000,14 +5912,6 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/manager-api": "workspace:*" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -6300,12 +6204,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/client-logger@npm:7.4.6": - version: 7.4.6 - resolution: "@storybook/client-logger@npm:7.4.6" +"@storybook/client-logger@npm:7.5.0": + version: 7.5.0 + resolution: "@storybook/client-logger@npm:7.5.0" dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 170ad58c17e2608639533fe24aaa96ddd4d77d23b4b28f265b2cb67510fef966fc20b029e070fdc7216ba1cdb724d1210b2f8edc8aa538de32fd6e549f9010cf + checksum: 90326c49a224bf21680c04ffee94725bf75658086093ccb839a8aae39476929c4719eafb18e498a148cf0dd956d4e9a5d3b2a34d09ca4fd25e2af553458558ac languageName: node linkType: hard @@ -6635,8 +6539,6 @@ __metadata: babel-plugin-ember-modules-api-polyfill: ^2.12.0 babel-plugin-htmlbars-inline-precompile: 2 || 3 ember-source: ~3.28.1 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -6695,8 +6597,6 @@ __metadata: typescript: "npm:~4.9.3" peerDependencies: "@babel/core": "*" - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -6800,14 +6700,13 @@ __metadata: lodash: "npm:^4.17.21" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" semver: "npm:^7.3.7" store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -6984,8 +6883,6 @@ __metadata: peerDependencies: "@babel/core": "*" preact: ^8.0.0||^10.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -7209,7 +7106,6 @@ __metadata: lodash: "npm:^4.17.21" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - react: "npm:^16.14.0" slash: "npm:^5.0.0" synchronous-promise: "npm:^2.0.15" ts-dedent: "npm:^2.0.0" @@ -7236,6 +7132,8 @@ __metadata: "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" browser-dtector: "npm:^3.4.0" + fs-extra: "npm:^11.1.0" + ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" languageName: unknown linkType: soft @@ -7554,12 +7452,11 @@ __metadata: lodash: "npm:^4.17.21" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" react-router-dom: "npm:6.0.2" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -7573,9 +7470,6 @@ __metadata: "@storybook/server": "workspace:*" "@types/node": "npm:^18.0.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -7608,9 +7502,6 @@ __metadata: lodash: "npm:^4.17.21" prettier: "npm:^2.8.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -7658,8 +7549,6 @@ __metadata: typescript: "npm:~4.9.3" peerDependencies: "@babel/core": "*" - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 svelte: ^3.48.0 || ^4.0.0 svelte-loader: "*" languageName: unknown @@ -7680,6 +7569,7 @@ __metadata: svelte: "npm:^4.0.0" svelte-check: "npm:3.4.6" sveltedoc-parser: "npm:^4.2.1" + ts-dedent: "npm:^2.0.0" type-fest: "npm:~2.19" typescript: "npm:^5.0.4" peerDependencies: @@ -7755,17 +7645,17 @@ __metadata: linkType: hard "@storybook/theming@npm:^7.0.2": - version: 7.4.6 - resolution: "@storybook/theming@npm:7.4.6" + version: 7.5.0 + resolution: "@storybook/theming@npm:7.5.0" dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.0" - "@storybook/client-logger": "npm:7.4.6" + "@storybook/client-logger": "npm:7.5.0" "@storybook/global": "npm:^5.0.0" memoizerific: "npm:^1.11.3" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 6250a413c346971792623bf5a907811fc009ff4a36b8f292d0f45c677269b2a50c29d84ab1e869ada7df3eb23d49614e1342bd2c88e71d4467702b92ebc42f2d + checksum: 57da8e27c748cbec4dc1661cdd2d449949d97476d8e97933696b31d07c7361cbbcca8d7225cc00ca078daa160023b8965ddec7c23519ce0a4ef2658246b062e7 languageName: node linkType: hard @@ -7823,8 +7713,6 @@ __metadata: vue: "npm:^2.7.10" vue-docgen-api: "npm:^4.40.0" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 vite: ^3.0.0 || ^4.0.0 || ^5.0.0 vue: ^2.7.0 languageName: unknown @@ -7847,8 +7735,6 @@ __metadata: "@babel/core": "*" babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 css-loader: "*" - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 vue: ^2.6.8 vue-loader: ^15.7.0 vue-template-compiler: ^2.6.8 @@ -7869,8 +7755,6 @@ __metadata: vite: "npm:^4.0.0" vue-docgen-api: "npm:^4.40.0" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 vite: ^3.0.0 || ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -7891,8 +7775,6 @@ __metadata: "@babel/core": "*" "@vue/compiler-sfc": ^3.0.0 babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 vue: ^3.0.0 languageName: unknown linkType: soft @@ -7961,9 +7843,6 @@ __metadata: "@types/node": "npm:^18.0.0" magic-string: "npm:^0.30.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -7981,8 +7860,6 @@ __metadata: typescript: "npm:~4.9.3" peerDependencies: lit: ^2.0.0 || ^3.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -25779,7 +25656,7 @@ __metadata: languageName: node linkType: hard -"react@npm:^16.14.0": +"react@npm:^16.14.0, react@npm:^16.8.0": version: 16.14.0 resolution: "react@npm:16.14.0" dependencies: diff --git a/scripts/package.json b/scripts/package.json index b428f9b9f228..a93310ad8931 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -111,6 +111,7 @@ "babel-eslint": "^10.1.0", "babel-loader": "^9.1.2", "boxen": "^5.1.2", + "browser-assert": "^1.2.1", "chalk": "^4.1.0", "codecov": "^3.8.1", "commander": "^6.2.1", diff --git a/scripts/prepare/addon-bundle.ts b/scripts/prepare/addon-bundle.ts new file mode 100755 index 000000000000..757402c4600d --- /dev/null +++ b/scripts/prepare/addon-bundle.ts @@ -0,0 +1,285 @@ +#!/usr/bin/env ../../node_modules/.bin/ts-node + +import * as fs from 'fs-extra'; +import path, { dirname, join, relative } from 'path'; +import type { Options } from 'tsup'; +import type { PackageJson } from 'type-fest'; +import { build } from 'tsup'; +import aliasPlugin from 'esbuild-plugin-alias'; +import dedent from 'ts-dedent'; +import slash from 'slash'; +import { exec } from '../utils/exec'; + +import { globalPackages as globalPreviewPackages } from '../../code/lib/preview/src/globals/globals'; +import { globalPackages as globalManagerPackages } from '../../code/ui/manager/src/globals/globals'; + +/* TYPES */ + +type Formats = 'esm' | 'cjs'; +type BundlerConfig = { + previewEntries: string[]; + managerEntries: string[]; + nodeEntries: string[]; + exportEntries: string[]; + externals: string[]; + pre: string; + post: string; + formats: Formats[]; +}; +type PackageJsonWithBundlerConfig = PackageJson & { + bundler: BundlerConfig; +}; +type DtsConfigSection = Pick; + +/* MAIN */ + +const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { + const { + name, + dependencies, + peerDependencies, + bundler: { + managerEntries = [], + previewEntries = [], + nodeEntries = [], + exportEntries = [], + externals: extraExternals = [], + pre, + post, + formats = ['esm', 'cjs'], + }, + } = (await fs.readJson(join(cwd, 'package.json'))) as PackageJsonWithBundlerConfig; + + if (pre) { + await exec(`node -r ${__dirname}/../node_modules/esbuild-register/register.js ${pre}`, { cwd }); + } + + const reset = hasFlag(flags, 'reset'); + const watch = hasFlag(flags, 'watch'); + const optimized = hasFlag(flags, 'optimized'); + + if (reset) { + await fs.emptyDir(join(process.cwd(), 'dist')); + } + + const tasks: Promise[] = []; + + const commonOptions: Options = { + outDir: join(process.cwd(), 'dist'), + silent: true, + treeshake: true, + shims: false, + watch, + clean: false, + esbuildPlugins: [ + aliasPlugin({ + process: require.resolve('../node_modules/process/browser.js'), + util: require.resolve('../node_modules/util/util.js'), + assert: require.resolve('browser-assert'), + }), + ], + }; + + const commonExternals = [ + name, + ...extraExternals, + ...Object.keys(dependencies || {}), + ...Object.keys(peerDependencies || {}), + ]; + + if (exportEntries.length > 0) { + const { dtsConfig, tsConfigExists } = await getDTSConfigs({ + formats, + entries: exportEntries, + optimized, + }); + + tasks.push( + build({ + ...commonOptions, + ...(optimized ? dtsConfig : {}), + entry: exportEntries, + format: ['esm'], + target: ['chrome100', 'safari15', 'firefox91'], + platform: 'browser', + external: [...commonExternals, ...globalManagerPackages, ...globalPreviewPackages], + esbuildOptions: (options) => { + /* eslint-disable no-param-reassign */ + options.conditions = ['module']; + options.platform = 'browser'; + Object.assign(options, getESBuildOptions(optimized)); + /* eslint-enable no-param-reassign */ + }, + }), + build({ + ...commonOptions, + ...(optimized ? dtsConfig : {}), + entry: exportEntries, + format: ['cjs'], + target: 'node16', + platform: 'node', + external: commonExternals, + esbuildOptions: (options) => { + /* eslint-disable no-param-reassign */ + options.conditions = ['module']; + options.platform = 'node'; + Object.assign(options, getESBuildOptions(optimized)); + /* eslint-enable no-param-reassign */ + }, + }) + ); + + if (tsConfigExists && !optimized) { + tasks.push(...exportEntries.map(generateDTSMapperFile)); + } + } + + if (managerEntries.length > 0) { + tasks.push( + build({ + ...commonOptions, + entry: managerEntries.map((e: string) => slash(join(cwd, e))), + outExtension: () => ({ + js: '.js', + }), + format: ['esm'], + target: ['chrome100', 'safari15', 'firefox91'], + platform: 'browser', + external: [...commonExternals, ...globalManagerPackages], + esbuildOptions: (options) => { + /* eslint-disable no-param-reassign */ + options.conditions = ['module']; + options.platform = 'browser'; + Object.assign(options, getESBuildOptions(optimized)); + /* eslint-enable no-param-reassign */ + }, + }) + ); + } + if (previewEntries.length > 0) { + tasks.push( + build({ + ...commonOptions, + entry: previewEntries.map((e: string) => slash(join(cwd, e))), + outExtension: () => ({ + js: '.js', + }), + format: ['esm'], + target: ['chrome100', 'safari15', 'firefox91'], + platform: 'browser', + external: [...commonExternals, ...globalPreviewPackages], + esbuildOptions: (c) => { + /* eslint-disable no-param-reassign */ + c.conditions = ['module']; + c.platform = 'browser'; + Object.assign(c, getESBuildOptions(optimized)); + /* eslint-enable no-param-reassign */ + }, + }) + ); + } + if (nodeEntries.length > 0) { + tasks.push( + build({ + ...commonOptions, + entry: nodeEntries.map((e: string) => slash(join(cwd, e))), + format: ['cjs'], + target: 'node16', + platform: 'node', + external: commonExternals, + esbuildOptions: (c) => { + /* eslint-disable no-param-reassign */ + c.platform = 'node'; + Object.assign(c, getESBuildOptions(optimized)); + /* eslint-enable no-param-reassign */ + }, + }) + ); + } + + await Promise.all(tasks); + + if (post) { + await exec( + `node -r ${__dirname}/../node_modules/esbuild-register/register.js ${post}`, + { cwd }, + { debug: true } + ); + } + + console.log('done'); +}; + +/* UTILS */ + +// keep in sync with code/lib/manager-api/src/index.ts + +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 } = path.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(path.sep).join(path.posix.sep); + + await fs.ensureFile(pathName); + await fs.writeFile( + pathName, + dedent` + // dev-mode + export * from '${rel}/${entryName}'; + `, + { encoding: 'utf-8' } + ); +} + +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/yarn.lock b/scripts/yarn.lock index 411298c2d9b9..a6d22a45a644 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -3146,6 +3146,7 @@ __metadata: babel-eslint: "npm:^10.1.0" babel-loader: "npm:^9.1.2" boxen: "npm:^5.1.2" + browser-assert: "npm:^1.2.1" chalk: "npm:^4.1.0" codecov: "npm:^3.8.1" commander: "npm:^6.2.1" @@ -5467,6 +5468,13 @@ __metadata: languageName: node linkType: hard +"browser-assert@npm:^1.2.1": + version: 1.2.1 + resolution: "browser-assert@npm:1.2.1" + checksum: 902abf999f92c9c951fdb6d7352c09eea9a84706258699655f7e7906e42daa06a1ae286398a755872740e05a6a71c43c5d1a0c0431d67a8cdb66e5d859a3fc0c + languageName: node + linkType: hard + "browserslist@npm:^4.21.10, browserslist@npm:^4.21.9": version: 4.21.10 resolution: "browserslist@npm:4.21.10" From 737a3ed0070d5caebee7fac0df77d0d460736762 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 14 Nov 2023 17:29:45 +0100 Subject: [PATCH 2/3] cleanup addon-actions dependencies --- code/addons/actions/package.json | 6 +----- code/yarn.lock | 6 ------ 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 88b89cc58fb0..3df803987dac 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -64,13 +64,9 @@ }, "dependencies": { "@storybook/global": "^5.0.0", - "@types/lodash": "^4.14.167", "@types/uuid": "^9.0.1", "dequal": "^2.0.2", - "lodash": "^4.17.21", "polished": "^4.2.2", - "telejson": "^7.2.0", - "ts-dedent": "^2.0.0", "uuid": "^9.0.0" }, "devDependencies": { @@ -81,10 +77,10 @@ "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", - "prop-types": "^15.7.2", "react": "^16.8.0", "react-dom": "^16.8.0", "react-inspector": "^6.0.0", + "telejson": "^7.2.0", "typescript": "~4.9.3" }, "publishConfig": { diff --git a/code/yarn.lock b/code/yarn.lock index 6cc2650da012..bd945338259f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5373,17 +5373,13 @@ __metadata: "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" - "@types/lodash": "npm:^4.14.167" "@types/uuid": "npm:^9.0.1" dequal: "npm:^2.0.2" - lodash: "npm:^4.17.21" polished: "npm:^4.2.2" - prop-types: "npm:^15.7.2" react: "npm:^16.8.0" react-dom: "npm:^16.8.0" react-inspector: "npm:^6.0.0" telejson: "npm:^7.2.0" - ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" uuid: "npm:^9.0.0" languageName: unknown @@ -6820,8 +6816,6 @@ __metadata: peerDependenciesMeta: "@next/font": optional: true - "@storybook/addon-actions": - optional: true typescript: optional: true webpack: From 7e07d354d90ff279e885f0616c6c9011762617e2 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 14 Nov 2023 17:34:21 +0100 Subject: [PATCH 3/3] use ESM in nextjs framework, rework conditional importing of nextjs contexts --- code/frameworks/nextjs/package.json | 9 +--- .../nextjs/src/nextImport/webpack.ts | 3 +- code/frameworks/nextjs/src/preset.ts | 2 +- .../src/routing/app-router-provider.tsx | 54 +++++-------------- .../nextjs/src/routing/decorator.tsx | 32 ++++++----- .../src/routing/page-router-provider.tsx | 4 +- 6 files changed, 36 insertions(+), 68 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 99a3da9d8fb5..356b2eb48b0c 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -36,11 +36,7 @@ "types": "./dist/preset.d.ts", "require": "./dist/preset.js" }, - "./preview.js": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, + "./dist/preview.mjs": "./dist/preview.mjs", "./next-image-loader-stub.js": { "types": "./dist/next-image-loader-stub.d.ts", "require": "./dist/next-image-loader-stub.js", @@ -136,9 +132,6 @@ "@next/font": { "optional": true }, - "@storybook/addon-actions": { - "optional": true - }, "typescript": { "optional": true }, diff --git a/code/frameworks/nextjs/src/nextImport/webpack.ts b/code/frameworks/nextjs/src/nextImport/webpack.ts index fc5d359ef8e2..35f39a7069ed 100644 --- a/code/frameworks/nextjs/src/nextImport/webpack.ts +++ b/code/frameworks/nextjs/src/nextImport/webpack.ts @@ -24,7 +24,8 @@ export function configureNextImport(baseConfig: WebpackConfig) { baseConfig.plugins.push( new IgnorePlugin({ // ignore next/dist/shared/lib/hooks-client-context and next/legacy/image imports - resourceRegExp: /(next\/dist\/shared\/lib\/hooks-client-context|next\/legacy\/image)$/, + resourceRegExp: + /(next\/dist\/shared\/lib\/hooks-client-context|next\/dist\/shared\/lib\/hooks-client-context\.shared-runtime|next\/legacy\/image)$/, }) ); } diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index fd726835293c..7b0e150f735a 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -69,7 +69,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => [ ...entry, - require.resolve('@storybook/nextjs/preview.js'), + join(dirname(require.resolve('@storybook/nextjs/package.json')), 'dist/preview.mjs'), ]; // Not even sb init - automigrate - running dev diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx index a7f0bd326f9b..c8b1c96c80a3 100644 --- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx @@ -1,48 +1,16 @@ import React from 'react'; -import type { - LayoutRouterContext as TLayoutRouterContext, - AppRouterContext as TAppRouterContext, - GlobalLayoutRouterContext as TGlobalLayoutRouterContext, +import { + LayoutRouterContext, + AppRouterContext, + GlobalLayoutRouterContext, } from 'next/dist/shared/lib/app-router-context.shared-runtime'; -import type { - PathnameContext as TPathnameContext, - SearchParamsContext as TSearchParamsContext, +import { + PathnameContext, + SearchParamsContext, } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; import type { FlightRouterState } from 'next/dist/server/app-render/types'; import type { RouteParams } from './types'; -/** - * Normally dynamic imports are necessary because otherwise - * older versions of Next.js will throw an error - * because AppRouterProviders only exists in Next.js > v13 - * Using React.lazy though is currently not supported in SB decorators - * therefore using the try/catch workaround - */ -let AppRouterContext: typeof TAppRouterContext; -let LayoutRouterContext: typeof TLayoutRouterContext; -let PathnameContext: typeof TPathnameContext; -let SearchParamsContext: typeof TSearchParamsContext; -let GlobalLayoutRouterContext: typeof TGlobalLayoutRouterContext; - -try { - AppRouterContext = - require('next/dist/shared/lib/app-router-context.shared-runtime').AppRouterContext; - LayoutRouterContext = - require('next/dist/shared/lib/app-router-context.shared-runtime').LayoutRouterContext; - PathnameContext = - require('next/dist/shared/lib/hooks-client-context.shared-runtime').PathnameContext; - SearchParamsContext = - require('next/dist/shared/lib/hooks-client-context.shared-runtime').SearchParamsContext; - GlobalLayoutRouterContext = - require('next/dist/shared/lib/app-router-context.shared-runtime').GlobalLayoutRouterContext; -} catch { - AppRouterContext = React.Fragment as any; - LayoutRouterContext = React.Fragment as any; - PathnameContext = React.Fragment as any; - SearchParamsContext = React.Fragment as any; - GlobalLayoutRouterContext = React.Fragment as any; -} - type AppRouterProviderProps = { action: (name: string) => (...args: any[]) => void; routeParams: RouteParams; @@ -58,7 +26,11 @@ const getParallelRoutes = (segmentsList: Array): FlightRouterState => { return [] as any; }; -const AppRouterProvider: React.FC = ({ children, action, routeParams }) => { +export const AppRouterProvider: React.FC = ({ + children, + action, + routeParams, +}) => { const { pathname, query, segments = [], ...restRouteParams } = routeParams; const tree: FlightRouterState = [pathname, { children: getParallelRoutes([...segments]) }]; @@ -121,5 +93,3 @@ const AppRouterProvider: React.FC = ({ children, action, ); }; - -export default AppRouterProvider; diff --git a/code/frameworks/nextjs/src/routing/decorator.tsx b/code/frameworks/nextjs/src/routing/decorator.tsx index 8312b8e9d80c..059e378c2521 100644 --- a/code/frameworks/nextjs/src/routing/decorator.tsx +++ b/code/frameworks/nextjs/src/routing/decorator.tsx @@ -1,20 +1,10 @@ import * as React from 'react'; -// this will be aliased by webpack at runtime (this is just for typing) -import type { action as originalAction } from '@storybook/addon-actions'; import type { Addon_StoryContext } from '@storybook/types'; -import AppRouterProvider from './app-router-provider'; - -import PageRouterProvider from './page-router-provider'; +import { action } from '@storybook/addon-actions'; +import { PageRouterProvider } from './page-router-provider'; +import type { AppRouterProvider as TAppRouterProvider } from './app-router-provider'; import type { RouteParams, NextAppDirectory } from './types'; -let action: typeof originalAction; - -try { - action = require('@storybook/addon-actions').action; -} catch { - action = () => () => {}; -} - const defaultRouterParams: RouteParams = { pathname: '/', query: {}, @@ -27,7 +17,23 @@ export const RouterDecorator = ( const nextAppDirectory = (parameters.nextjs?.appDirectory as NextAppDirectory | undefined) ?? false; + const [AppRouterProvider, setAppRouterProvider] = React.useState< + typeof TAppRouterProvider | undefined + >(); + + React.useEffect(() => { + if (!nextAppDirectory) { + return; + } + import('./app-router-provider').then((exports) => + setAppRouterProvider(() => exports.AppRouterProvider) + ); + }, [nextAppDirectory]); + if (nextAppDirectory) { + if (!AppRouterProvider) { + return null; + } return ( = ({ +export const PageRouterProvider: React.FC = ({ children, action, routeParams, @@ -66,5 +66,3 @@ const PageRouterProvider: React.FC = ({ {children} ); - -export default PageRouterProvider;