diff --git a/code/.eslintrc.js b/code/.eslintrc.js index 65a8d1034316..35086680644d 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -1,19 +1,7 @@ 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')], @@ -65,6 +53,7 @@ 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', @@ -88,7 +77,15 @@ module.exports = { }, { // these packages use pre-bundling, dependencies will be bundled, and will be in devDepenencies - files: ['frameworks/**/*', 'builders/**/*', 'deprecated/**/*', 'renderers/**/*'], + files: [ + 'addons/**/*', + 'frameworks/**/*', + 'lib/**/*', + 'builders/**/*', + 'deprecated/**/*', + 'renderers/**/*', + 'ui/**/*', + ], excludedFiles: ['frameworks/angular/**/*', 'frameworks/ember/**/*', 'lib/core-server/**/*'], rules: { 'import/no-extraneous-dependencies': [ @@ -98,47 +95,11 @@ module.exports = { }, }, { - files: ['**/ui/.storybook/**'], + files: ['**/ui/*', '**/ui/.storybook/*'], rules: { - 'import/no-extraneous-dependencies': [ - 'error', - { packageDir: [__dirname], devDependencies: true }, - ], + 'import/no-extraneous-dependencies': ['error', { packageDir: __dirname }], }, }, - ...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__/**', @@ -160,24 +121,16 @@ 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 26118b8d2e53..444e4bd68512 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -32,9 +32,21 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": "./dist/manager.js", - "./preview": "./dist/preview.js", - "./register": "./dist/manager.js", + "./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" + }, "./package.json": "./package.json" }, "main": "dist/index.js", @@ -49,40 +61,47 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/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:*", - "@testing-library/react": "^11.2.2", + "axe-core": "^4.2.0", "lodash": "^4.17.21", - "react": "^16.8.0", - "react-dom": "^16.8.0", - "react-resize-detector": "^7.1.2", + "react-resize-detector": "^7.1.2" + }, + "devDependencies": { + "@testing-library/react": "^11.2.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": { - "exportEntries": [ - "./src/index.ts" - ], - "managerEntries": [ - "./src/manager.tsx" - ], - "previewEntries": [ + "entries": [ + "./src/index.ts", + "./src/manager.tsx", "./src/preview.tsx" ] }, diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index f5cdc0943122..60301b01cdad 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -33,9 +33,21 @@ "require": "./dist/decorator.js", "import": "./dist/decorator.mjs" }, - "./manager": "./dist/manager.js", - "./preview": "./dist/preview.js", - "./register.js": "./dist/manager.js", + "./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" + }, "./package.json": "./package.json" }, "main": "dist/index.js", @@ -46,8 +58,14 @@ "*": [ "dist/index.d.ts" ], + "manager": [ + "dist/manager.d.ts" + ], "decorator": [ "dist/decorator.d.ts" + ], + "preview": [ + "dist/preview.d.ts" ] } }, @@ -60,45 +78,51 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "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": { "@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:*", + "dequal": "^2.0.2", + "lodash": "^4.17.21", + "polished": "^4.2.2", "prop-types": "^15.7.2", - "react": "^16.8.0", - "react-dom": "^16.8.0", "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", "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": { - "exportEntries": [ + "entries": [ + "./src/index.ts", "./src/decorator.ts", - "./src/index.ts" - ], - "managerEntries": [ - "./src/manager.tsx" - ], - "previewEntries": [ + "./src/manager.tsx", "./src/preview.ts" ] }, diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 139031e1eed0..7f327cbb1aca 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -32,14 +32,39 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": "./dist/manager.js", - "./preview": "./dist/preview.js", - "./register": "./dist/manager.js", + "./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" + }, "./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", @@ -49,35 +74,42 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/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:*", - "react": "^16.8.0", - "react-dom": "^16.8.0", + "memoizerific": "^1.11.3", + "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": { - "exportEntries": [ - "./src/index.ts" - ], - "managerEntries": [ - "./src/manager.tsx" - ], - "previewEntries": [ + "entries": [ + "./src/index.ts", + "./src/manager.tsx", "./src/preview.tsx" ] }, diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 553f91d0f937..f8b7e7848134 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -32,13 +32,31 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": "./dist/manager.js", - "./register": "./dist/manager.js", + "./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" + }, "./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", @@ -48,35 +66,43 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/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:*", - "react": "^16.8.0", - "react-dom": "^16.8.0" + "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 + } }, "publishConfig": { "access": "public" }, "bundler": { - "exportEntries": [ - "./src/index.ts" - ], - "managerEntries": [ + "entries": [ + "./src/index.ts", "./src/manager.tsx" - ] + ], + "platform": "browser" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17", "storybook": { diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 9a9a3debad2a..025ff9bbd697 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -156,8 +156,10 @@ 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 37520dff343e..6958b7e40653 100644 --- a/code/addons/docs/src/ensure-react-peer-deps.ts +++ b/code/addons/docs/src/ensure-react-peer-deps.ts @@ -7,14 +7,13 @@ 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/addon-docs. + Starting in 7.0, react and react-dom are now required peer dependencies of Storybook. https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-peer-dependencies-required - You can continue to use Storybook without addon-docs, or you can install react and react-dom in your project: + 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 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 c716775bdfa9..22b5834c9e9a 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -194,12 +194,4 @@ const docsX = docs as any; ensureReactPeerDeps(); -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 }; +export { webpackX as webpack, indexersX as experimental_indexers, docsX as docs }; diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index dbe086cce288..a9722558e3f4 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -28,21 +28,81 @@ "require": "./dist/index.js", "import": "./dist/index.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", + "./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" + }, "./package.json": "./package.json" }, "main": "dist/index.js", @@ -57,7 +117,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/addon-actions": "workspace:*", @@ -87,28 +147,25 @@ "access": "public" }, "bundler": { - "nodeEntries": [ + "entries": [ "./src/index.ts", - "./src/docs/preset.ts", - "./src/docs/mdx-react-shim.ts" - ], - "managerEntries": [ + "./src/actions/preview.ts", "./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" ], - "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" - ] + "platform": "node" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" } diff --git a/code/addons/essentials/src/actions/preview.ts b/code/addons/essentials/src/actions/preview.ts index 12b8c76bf2cb..86c6d5f2e656 100644 --- a/code/addons/essentials/src/actions/preview.ts +++ b/code/addons/essentials/src/actions/preview.ts @@ -1,3 +1,4 @@ +/* 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 9da6a432be39..930d5ee38181 100644 --- a/code/addons/essentials/src/backgrounds/manager.ts +++ b/code/addons/essentials/src/backgrounds/manager.ts @@ -1,2 +1 @@ -// @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 cf24112788f3..5e56121e4a03 100644 --- a/code/addons/essentials/src/backgrounds/preview.ts +++ b/code/addons/essentials/src/backgrounds/preview.ts @@ -1,2 +1,4 @@ -// @ts-expect-error (no types needed for this) +/* eslint-disable import/export */ +// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered + 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 933adbd4e101..c902436bf5ff 100644 --- a/code/addons/essentials/src/controls/manager.ts +++ b/code/addons/essentials/src/controls/manager.ts @@ -1,2 +1 @@ -// @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 e124e7a1374a..ffcf62555af2 100644 --- a/code/addons/essentials/src/highlight/preview.ts +++ b/code/addons/essentials/src/highlight/preview.ts @@ -1,2 +1,4 @@ -// @ts-expect-error (no types needed for this) +/* eslint-disable import/export */ +// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered + 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 688ffbed236d..ceef38cd36ad 100644 --- a/code/addons/essentials/src/measure/manager.ts +++ b/code/addons/essentials/src/measure/manager.ts @@ -1,2 +1 @@ -// @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 647ef4345a6d..f18769ff001a 100644 --- a/code/addons/essentials/src/measure/preview.ts +++ b/code/addons/essentials/src/measure/preview.ts @@ -1,2 +1,4 @@ -// @ts-expect-error (no types needed for this) +/* eslint-disable import/export */ +// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered + 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 d3a29db6d98b..9f46ef8cbae4 100644 --- a/code/addons/essentials/src/outline/manager.ts +++ b/code/addons/essentials/src/outline/manager.ts @@ -1,2 +1 @@ -// @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 3fe09381fe8f..1cc44b9689a8 100644 --- a/code/addons/essentials/src/outline/preview.ts +++ b/code/addons/essentials/src/outline/preview.ts @@ -1,2 +1,4 @@ -// @ts-expect-error (no types needed for this) +/* eslint-disable import/export */ +// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered + 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 888dfe31937d..fde1c66907a1 100644 --- a/code/addons/essentials/src/toolbars/manager.ts +++ b/code/addons/essentials/src/toolbars/manager.ts @@ -1,2 +1 @@ -// @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 48bc7a850de6..ccbe283d4101 100644 --- a/code/addons/essentials/src/viewport/manager.ts +++ b/code/addons/essentials/src/viewport/manager.ts @@ -1,2 +1 @@ -// @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 4ee994246166..61cdb72359ad 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -25,8 +25,16 @@ }, "license": "MIT", "exports": { - ".": "./dist/index.js", - "./preset": "./dist/index.js", + ".": { + "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" + }, "./package.json": "./package.json" }, "main": "dist/index.js", @@ -41,7 +49,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/node-logger": "workspace:*", @@ -55,8 +63,11 @@ "access": "public" }, "bundler": { - "nodeEntries": [ + "entries": [ "./src/index.ts" + ], + "formats": [ + "cjs" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 9dd090aa9fac..ee036159d5c6 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -30,12 +30,26 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./preview": "./dist/preview.js", + "./preview": { + "types": "./dist/preview.d.ts", + "require": "./dist/preview.js", + "import": "./dist/preview.mjs" + }, "./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", @@ -45,14 +59,14 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/global": "^5.0.0" + "@storybook/core-events": "workspace:*", + "@storybook/global": "^5.0.0", + "@storybook/preview-api": "workspace:*" }, "devDependencies": { - "@storybook/core-events": "workspace:*", - "@storybook/preview-api": "workspace:*", "@types/webpack-env": "^1.16.0", "typescript": "~4.9.3" }, @@ -60,10 +74,8 @@ "access": "public" }, "bundler": { - "exportEntries": [ - "./src/index.ts" - ], - "previewEntries": [ + "entries": [ + "./src/index.ts", "./src/preview.ts" ] }, diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index df2a6617fa34..82c13d764f47 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -28,14 +28,39 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": "./dist/manager.js", - "./preview": "./dist/preview.js", - "./register.js": "./dist/manager.js", + "./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" + }, "./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", @@ -45,10 +70,18 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/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", @@ -56,36 +89,32 @@ }, "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": { - "exportEntries": [ - "./src/index.ts" - ], - "managerEntries": [ - "./src/manager.tsx" - ], - "previewEntries": [ - "./src/preview.ts" - ], - "nodeEntries": [ + "entries": [ + "./src/index.ts", + "./src/manager.tsx", + "./src/preview.ts", "./src/preset.ts" ] }, diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 4ff5cbda64ba..e4b8e157f50c 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -34,13 +34,31 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": "./dist/manager.js", - "./register": "./dist/manager.js", + "./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" + }, "./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", @@ -50,36 +68,44 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/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": { - "exportEntries": [ - "./src/index.ts" - ], - "managerEntries": [ + "entries": [ + "./src/index.ts", "./src/manager.tsx" - ] + ], + "platform": "browser" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17", "storybook": { diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 61e1e01112f2..5f7a2faaf8ab 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -28,14 +28,26 @@ "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" }, - "./manager": "./dist/manager.js", - "./preview": "./dist/preview.js", - "./register": "./dist/manager.js", + "./register": { + "types": "./dist/manager.d.ts", + "require": "./dist/manager.js", + "import": "./dist/manager.mjs" + }, "./package.json": "./package.json" }, "main": "dist/index.js", @@ -46,6 +58,12 @@ "*": [ "dist/index.d.ts" ], + "manager": [ + "dist/manager.d.ts" + ], + "preview": [ + "dist/preview.d.ts" + ], "react": [ "dist/react/index.d.ts" ] @@ -60,44 +78,45 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@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/csf": "^0.1.0", + "@storybook/global": "^5.0.0", "@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": "^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": { - "exportEntries": [ - "./src/react/index.ts", - "./src/index.ts" - ], - "managerEntries": [ - "./src/manager.ts" - ], - "previewEntries": [ - "./src/preview.ts" + "entries": [ + "./src/index.ts", + "./src/manager.ts", + "./src/preview.ts", + "./src/react/index.ts" ], "post": "./scripts/fix-preview-api-reference.ts" }, diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 5c0614c2cf31..3e8f8057bbf7 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -31,9 +31,21 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": "./dist/manager.js", - "./preview": "./dist/preview.js", - "./register": "./dist/manager.js", + "./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" + }, "./package.json": "./package.json" }, "main": "dist/index.js", @@ -61,34 +73,40 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/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:*", - "react": "^16.8.0", - "react-dom": "^16.8.0", + "tiny-invariant": "^1.3.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": { - "exportEntries": [ - "./src/index.ts" - ], - "managerEntries": [ - "./src/manager.tsx" - ], - "previewEntries": [ + "entries": [ + "./src/index.ts", + "./src/manager.tsx", "./src/preview.tsx" ] }, diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 49a5cb2d1518..6694ddc6887b 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -34,14 +34,39 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": "./dist/manager.js", - "./preview": "./dist/preview.js", - "./register": "./dist/manager.js", + "./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" + }, "./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", @@ -51,34 +76,40 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/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:*", - "react": "^16.8.0", - "react-dom": "^16.8.0", + "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": { - "exportEntries": [ - "./src/index.ts" - ], - "managerEntries": [ - "./src/manager.tsx" - ], - "previewEntries": [ + "entries": [ + "./src/index.ts", + "./src/manager.tsx", "./src/preview.tsx" ] }, diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index b878222586b3..55ee2742c19a 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -28,8 +28,15 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./preset": "./dist/preset.js", - "./manager": "./dist/manager.js", + "./preset": { + "types": "./dist/preset.d.ts", + "require": "./dist/preset.js" + }, + "./manager": { + "types": "./dist/manager.d.ts", + "require": "./dist/manager.js", + "import": "./dist/manager.mjs" + }, "./package.json": "./package.json" }, "main": "dist/index.js", @@ -44,13 +51,9 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "estraverse": "^5.2.0", - "tiny-invariant": "^1.3.1" - }, - "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/manager-api": "workspace:*", @@ -58,24 +61,35 @@ "@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": { - "exportEntries": [ - "./src/index.ts" - ], - "managerEntries": [ - "./src/manager.tsx" - ], - "nodeEntries": [ + "entries": [ + "./src/index.ts", + "./src/manager.tsx", "./src/preset.ts" ] }, diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 0501d7bced91..5d8fe8b5b414 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -33,14 +33,35 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": "./dist/manager.js", - "./preview": "./dist/preview.js", + "./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" + }, "./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", @@ -50,12 +71,9 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "ts-dedent": "^2.0.0" - }, - "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", @@ -63,19 +81,30 @@ "@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": { - "exportEntries": [ - "./src/index.ts" - ], - "managerEntries": [ - "./src/manager.tsx" - ], - "previewEntries": [ + "entries": [ + "./src/index.ts", + "./src/manager.tsx", "./src/preview.tsx" ] }, diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 64000884f54d..9381cf4ac5c0 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -32,13 +32,31 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": "./dist/manager.js", - "./register": "./dist/manager.js", + "./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" + }, "./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", @@ -48,28 +66,39 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, - "devDependencies": { + "dependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", - "@storybook/theming": "workspace:*", - "react": "^16.8.0", - "react-dom": "^16.8.0", + "@storybook/theming": "workspace:*" + }, + "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": { - "exportEntries": [ - "./src/index.ts" - ], - "managerEntries": [ + "entries": [ + "./src/index.ts", "./src/manager.tsx" - ] + ], + "platform": "browser" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17", "storybook": { diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index b15c49815d04..eebb85538f22 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -29,14 +29,39 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": "./dist/manager.js", - "./preview": "./dist/preview.ts", - "./register": "./dist/manager.js", + "./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" + }, "./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", @@ -46,12 +71,9 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "memoizerific": "^1.11.3" - }, - "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", @@ -59,22 +81,32 @@ "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", - "react": "^16.8.0", - "react-dom": "^16.8.0", + "memoizerific": "^1.11.3", + "prop-types": "^15.7.2" + }, + "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": { - "exportEntries": [ + "entries": [ + "./src/index.ts", "./src/models/index.ts", - "./src/index.ts" - ], - "managerEntries": [ - "./src/manager.tsx" - ], - "previewEntries": [ + "./src/manager.tsx", "./src/preview.ts" ] }, diff --git a/code/builders/builder-manager/src/index.ts b/code/builders/builder-manager/src/index.ts index 89b9846184e6..eb869bb54f2a 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(globalsModuleInfoMap), + globalExternals(definitions), pnpPlugin(), ], diff --git a/code/builders/builder-manager/src/utils/globals.ts b/code/builders/builder-manager/src/utils/globals.ts new file mode 100644 index 000000000000..08fda5f5a44b --- /dev/null +++ b/code/builders/builder-manager/src/utils/globals.ts @@ -0,0 +1 @@ +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 1972fde8e8e7..ddb32c800403 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -8,9 +8,21 @@ 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', @@ -67,6 +79,7 @@ const INCLUDE_CANDIDATES = [ 'lodash/uniq', 'lodash/upperFirst.js', 'lodash/upperFirst', + 'markdown-to-jsx', 'memoizerific', 'overlayscrollbars', 'polished', @@ -113,8 +126,6 @@ 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); @@ -125,10 +136,7 @@ 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( - Array.from(new Set([...INCLUDE_CANDIDATES, ...extraOptimizeDeps])), - async (id) => Boolean(await resolve(id)) - ); + const include = await asyncFilter(INCLUDE_CANDIDATES, 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 a89a14488dd4..5274248afa80 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 { globalsNameReferenceMap } from '@storybook/preview/globals'; +import { globals } from '@storybook/preview/globals'; import type { Options } from '@storybook/types'; import { codeGeneratorPlugin, @@ -79,10 +79,8 @@ 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) { - externals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; + globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; } const plugins = [ @@ -103,7 +101,7 @@ export async function pluginConfig(options: Options) { } }, }, - await externalGlobalsPlugin(externals), + await externalGlobalsPlugin(globals), ] 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 0c3d53165e08..da62a70ed652 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 { globalsNameReferenceMap } from '@storybook/preview/globals'; +import { globals } from '@storybook/preview/globals'; import { getBuilderOptions, getRendererName, @@ -220,9 +220,8 @@ export default async ( `); } - const externals: Record = globalsNameReferenceMap; if (build?.test?.emptyBlocks) { - externals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; + globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; } return { @@ -243,7 +242,7 @@ export default async ( watchOptions: { ignored: /node_modules/, }, - externals, + externals: globals, ignoreWarnings: [ { message: /export '\S+' was not found in 'global'/, diff --git a/code/deprecated/addons/package.json b/code/deprecated/addons/package.json index 26a77297ebc3..b104d44dbbf9 100644 --- a/code/deprecated/addons/package.json +++ b/code/deprecated/addons/package.json @@ -48,6 +48,10 @@ "@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 99cdefd7710b..506a4bdb27b9 100644 --- a/code/deprecated/manager-api-shim/package.json +++ b/code/deprecated/manager-api-shim/package.json @@ -46,6 +46,18 @@ "@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 446fae77f761..93b3fbad4cc2 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -46,6 +46,7 @@ "@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:*", @@ -101,6 +102,8 @@ "@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 54fc623877b0..3d8d35f99ce3 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -49,7 +49,9 @@ "@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" + "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" }, "engines": { "node": ">=16.0.0" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 1710b7ef246d..a4e4b52fb3ae 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -58,7 +58,9 @@ "typescript": "~4.9.3" }, "peerDependencies": { - "@babel/core": "*" + "@babel/core": "*", + "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/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index ee517f4f4041..b7c81a0417fd 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -59,7 +59,9 @@ }, "peerDependencies": { "@babel/core": "*", - "preact": "^8.0.0||^10.0.0" + "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" }, "engines": { "node": ">=16.0.0" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index ff372339ed86..2eb448374c73 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -56,6 +56,10 @@ "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 12eab81328a3..56dbb9614197 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -59,6 +59,8 @@ }, "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 2e7948237053..969aefdee12c 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -60,6 +60,8 @@ "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 269e5807bee9..11741d4ba256 100644 --- a/code/frameworks/vue-webpack5/package.json +++ b/code/frameworks/vue-webpack5/package.json @@ -63,6 +63,8 @@ "@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 a9a31d221414..b88090051577 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -60,6 +60,8 @@ "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 a36463967749..2dc464c4d957 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -62,6 +62,8 @@ "@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 2a06c769e711..914c2640541b 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -57,6 +57,10 @@ "@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 69aa1fbdeadd..16effea80b62 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -62,7 +62,9 @@ "typescript": "~4.9.3" }, "peerDependencies": { - "lit": "^2.0.0 || ^3.0.0" + "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" }, "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 23e17c77bc56..a850d49809ad 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/node-logger'; +import { logger } from '@storybook/client-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 63ade68d18c0..077275cb2731 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -65,20 +65,18 @@ "@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 d44b49002ca7..951dc494a93a 100644 --- a/code/lib/manager-api/src/index.tsx +++ b/code/lib/manager-api/src/index.tsx @@ -67,8 +67,6 @@ 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; @@ -508,14 +506,5 @@ 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, type Addon, type AddonStore } from './lib/addons'; +export { mockChannel, types, type Addon, type AddonStore } from './lib/addons'; diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 260ec3d2036a..5b0e3d576bcc 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -87,6 +87,7 @@ "@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 8c8102acbd1e..b3651342b23a 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -27,7 +27,6 @@ }, "./globals": { "types": "./dist/globals.d.ts", - "import": "./dist/globals.js", "require": "./dist/globals.js" }, "./package.json": "./package.json" @@ -63,8 +62,6 @@ "@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 3b9b2321b6f0..fb7419cf52ed 100644 --- a/code/lib/preview/src/globals.ts +++ b/code/lib/preview/src/globals.ts @@ -1 +1 @@ -export * from './globals/globals'; +export * from './globals/types'; diff --git a/code/lib/preview/src/globals/runtime.ts b/code/lib/preview/src/globals/runtime.ts index f05dd3ef24cd..ad078c4afa8d 100644 --- a/code/lib/preview/src/globals/runtime.ts +++ b/code/lib/preview/src/globals/runtime.ts @@ -1,8 +1,9 @@ +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 @@ -11,23 +12,20 @@ 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 { globalsNameReferenceMap } from './globals'; +import type { globals } from './types'; // Here we map the name of a module to their VALUE in the global scope. -export const globalsNameValueMap: Required> = { +export const values: Required> = { + '@storybook/channel-postmessage': CHANNEL_POSTMESSAGE, // @deprecated: remove in 8.0 + '@storybook/channel-websocket': CHANNEL_WEBSOCKET, // @deprecated: remove in 8.0 '@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/globals/globals.ts b/code/lib/preview/src/globals/types.ts similarity index 73% rename from code/lib/preview/src/globals/globals.ts rename to code/lib/preview/src/globals/types.ts index 3cd77282fe49..176d4582833d 100644 --- a/code/lib/preview/src/globals/globals.ts +++ b/code/lib/preview/src/globals/types.ts @@ -1,6 +1,6 @@ -// Here we map the name of a module to their REFERENCE in the global scope. - -export const globalsNameReferenceMap = { +// 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 = { '@storybook/addons': '__STORYBOOK_MODULE_ADDONS__', '@storybook/global': '__STORYBOOK_MODULE_GLOBAL__', '@storybook/channel-postmessage': '__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__', // @deprecated: remove in 8.0 @@ -13,9 +13,6 @@ export const globalsNameReferenceMap = { '@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 globalPackages = Object.keys(globalsNameReferenceMap) as Array< - keyof typeof globalsNameReferenceMap ->; +export const globals: typeof _globals & Record = _globals; diff --git a/code/lib/preview/src/runtime.ts b/code/lib/preview/src/runtime.ts index 6b2900b68820..603c586b9fe3 100644 --- a/code/lib/preview/src/runtime.ts +++ b/code/lib/preview/src/runtime.ts @@ -1,13 +1,15 @@ 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 -globalPackages.forEach((key) => { - (global as any)[globalsNameReferenceMap[key]] = globalsNameValueMap[key]; +getKeys(globals).forEach((key) => { + (global as any)[globals[key]] = values[key]; }); global.sendTelemetryError = (error: any) => { diff --git a/code/lib/router/package.json b/code/lib/router/package.json index db6dee258fce..9f72950258c1 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -57,12 +57,14 @@ "@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" }, @@ -71,20 +73,6 @@ "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 30b5cc8d8b20..909b4d002e10 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -55,6 +55,10 @@ "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 9f709f5b9597..9936ef0858e6 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -79,20 +79,6 @@ "./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 9bcecb3710d7..eefda2bffe3f 100644 --- a/code/renderers/preact/template/cli/Button.jsx +++ b/code/renderers/preact/template/cli/Button.jsx @@ -1,21 +1,10 @@ +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 = false, - backgroundColor = null, - size = 'medium', - label, - ...props -}) => { +export const Button = ({ primary, backgroundColor, size, label, ...props }) => { const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; return ( ); + +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 b2283d26ac10..fb58cbb10508 100644 --- a/code/renderers/preact/template/components/Form.jsx +++ b/code/renderers/preact/template/components/Form.jsx @@ -1,14 +1,8 @@ +/* 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); @@ -38,3 +32,7 @@ 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 b2c1f966f9e3..36cff8218890 100644 --- a/code/renderers/preact/template/components/Html.jsx +++ b/code/renderers/preact/template/components/Html.jsx @@ -1 +1,10 @@ +/* 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 3bf143581fac..7efec93be9d6 100644 --- a/code/renderers/preact/template/components/Pre.jsx +++ b/code/renderers/preact/template/components/Pre.jsx @@ -1,12 +1,21 @@ -/** - * Pre component - * @param {object} props - * @param {object} [props.style] - * @param {object} [props.object] - * @param {string} [props.text] - */ +/* eslint-disable react/react-in-jsx-scope */ +// eslint-disable-next-line import/no-extraneous-dependencies +import PropTypes from 'prop-types'; + 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 1d1fa97c55d8..0c72668ebe74 100644 --- a/code/renderers/preact/template/stories/React.js +++ b/code/renderers/preact/template/stories/React.js @@ -1,11 +1,8 @@ // 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 ( @@ -22,11 +19,10 @@ export const ReactFunctionalComponent = ({ label }) => { ); }; -/** - * ReactClassComponent component - * @param {object} props - * @param {string} props.label - */ +ReactFunctionalComponent.propTypes = { + label: PropTypes.string.isRequired, +}; + export class ReactClassComponent extends React.Component { state = { clicks: 0, @@ -49,3 +45,7 @@ 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 33f1078d3154..b7895c1e8d0f 100644 --- a/code/renderers/preact/template/stories/react-compat.stories.js +++ b/code/renderers/preact/template/stories/react-compat.stories.js @@ -1,3 +1,4 @@ +/* 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 dd810a1b258b..ef0de3565a4e 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -59,7 +59,6 @@ "@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 f03882fc6411..23e28425eef9 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -24,17 +24,12 @@ "types": "./dist/index.d.ts", "import": "./dist/index.js" }, - "./runtime": { + "./dist/runtime": { "types": "./dist/runtime.d.ts", "import": "./dist/runtime.js" }, - "./globals-module-info": { - "types": "./dist/globals-module-info.d.ts", - "require": "./dist/globals-module-info.js" - }, - "./globals": { + "./dist/globals": { "types": "./dist/globals.d.ts", - "import": "./dist/globals.js", "require": "./dist/globals.js" }, "./paths": "./paths.js", @@ -43,22 +38,6 @@ "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/**/*", @@ -118,8 +97,7 @@ "./src/runtime.ts" ], "nodeEntries": [ - "./src/globals.ts", - "./src/globals-module-info.ts" + "./src/globals.ts" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/ui/manager/scripts/generate-exports-file.ts b/code/ui/manager/scripts/generate-exports-file.ts index ece5ac50391b..afdbea8ff6e6 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 { globalsNameValueMap } from '../src/globals/runtime'; +import { values } from '../src/globals/runtime'; const location = path.join(__dirname, '..', 'src', 'globals', 'exports.ts'); let attempts = 0; @@ -29,13 +29,10 @@ async function generate(text: string) { } const run = async () => { - const data = Object.entries(globalsNameValueMap).reduce>( - (acc, [key, value]) => { - acc[key] = Object.keys(value).filter(removeDefault); - return acc; - }, - {} - ); + const data = Object.entries(values).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 deleted file mode 100644 index 4bcbf259af79..000000000000 --- a/code/ui/manager/src/globals-module-info.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './globals/globals-module-info'; diff --git a/code/ui/manager/src/globals.ts b/code/ui/manager/src/globals.ts index 3b9b2321b6f0..d516acc55516 100644 --- a/code/ui/manager/src/globals.ts +++ b/code/ui/manager/src/globals.ts @@ -1 +1 @@ -export * from './globals/globals'; +export * from './globals/definitions'; diff --git a/code/ui/manager/src/globals/globals-module-info.ts b/code/ui/manager/src/globals/definitions.ts similarity index 65% rename from code/ui/manager/src/globals/globals-module-info.ts rename to code/ui/manager/src/globals/definitions.ts index 616148e80ca4..9122fca70262 100644 --- a/code/ui/manager/src/globals/globals-module-info.ts +++ b/code/ui/manager/src/globals/definitions.ts @@ -1,6 +1,7 @@ import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals'; import Exports from './exports'; -import { globalPackages, globalsNameReferenceMap } from './globals'; +import { Keys } from './types'; +import type { Definitions } from './types'; /* * We create a map of a module's name to a ModuleInfo. @@ -17,16 +18,18 @@ import { globalPackages, globalsNameReferenceMap } from './globals'; * * If you forget to do either, TypeScript will complain. * - * This `globals-module-info.ts` file is consumed by the `builder-manager` package, + * This `definitions.ts` file is consumed by the `builder-manager` package, * The `runtime.ts` file is used inside the manager's browser code runtime. */ -export const globalsModuleInfoMap = globalPackages.reduce((acc, key) => { - acc[key] = { - type: 'esm', - varName: globalsNameReferenceMap[key], - namedExports: Exports[key], - defaultExport: true, - }; +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); return acc; -}, {} as Required>>); +}, {} as Definitions); diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index f56ba153dd82..ef2523f0e06a 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -278,5 +278,4 @@ 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/globals.ts b/code/ui/manager/src/globals/globals.ts deleted file mode 100644 index 1ef93c38bc94..000000000000 --- a/code/ui/manager/src/globals/globals.ts +++ /dev/null @@ -1,19 +0,0 @@ -// 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 59f5f8fc1a09..5850699f171d 100644 --- a/code/ui/manager/src/globals/runtime.ts +++ b/code/ui/manager/src/globals/runtime.ts @@ -1,34 +1,32 @@ import * as REACT from 'react'; -import * as REACT_DOM from 'react-dom'; +import * as REACTDOM from 'react-dom'; -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 * 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 type { globalsNameReferenceMap } from './globals'; +import type { Keys } from './types'; // Here we map the name of a module to their VALUE in the global scope. -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, +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, // backwards compatibility '@storybook/addons': { - addons: MANAGER_API.addons, - types: MANAGER_API.types, - mockChannel: MANAGER_API.mockChannel, + addons: STORYBOOKMANAGERAPI.addons, + types: STORYBOOKMANAGERAPI.types, + mockChannel: STORYBOOKMANAGERAPI.mockChannel, }, - '@storybook/client-logger': CLIENT_LOGGER, - '@storybook/types': TYPES, + '@storybook/client-logger': STORYBOOKCLIENTLOGGER, }; diff --git a/code/ui/manager/src/globals/types.ts b/code/ui/manager/src/globals/types.ts new file mode 100644 index 000000000000..2861e45f632a --- /dev/null +++ b/code/ui/manager/src/globals/types.ts @@ -0,0 +1,18 @@ +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 f66bde4de3d3..efa348ac47e0 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 { globalsNameValueMap } from './globals/runtime'; -import { globalPackages, globalsNameReferenceMap } from './globals/globals'; +import { values } from './globals/runtime'; +import { Keys } from './globals/types'; import { prepareForTelemetry, shouldSkipError } from './utils/prepareForTelemetry'; const { FEATURES, CONFIG_TYPE } = global; @@ -58,8 +58,8 @@ class ReactProvider extends Provider { } // Apply all the globals -globalPackages.forEach((key) => { - global[globalsNameReferenceMap[key]] = globalsNameValueMap[key]; +Object.keys(Keys).forEach((key: keyof typeof Keys) => { + global[Keys[key]] = values[key]; }); global.sendTelemetryError = (error) => { diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts index bce29ea466a7..2ff3df07e63e 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 __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 __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 __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 6cc2650da012..ce57e7431391 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5345,6 +5345,7 @@ __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:*" @@ -5353,11 +5354,17 @@ __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 @@ -5379,13 +5386,19 @@ __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 @@ -5395,16 +5408,23 @@ __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 @@ -5416,15 +5436,22 @@ __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 @@ -5544,10 +5571,16 @@ __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 @@ -5562,13 +5595,18 @@ __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 @@ -5585,13 +5623,17 @@ __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 @@ -5617,10 +5659,16 @@ __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 @@ -5635,10 +5683,16 @@ __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 @@ -5766,11 +5820,18 @@ __metadata: "@types/react": "npm:^16.14.34" "@types/react-syntax-highlighter": "npm:11.0.5" estraverse: "npm:^5.2.0" - react: "npm:^16.8.0" - react-dom: "npm:^16.8.0" + prop-types: "npm:^15.7.2" 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 @@ -5787,6 +5848,14 @@ __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 @@ -5799,9 +5868,15 @@ __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 @@ -5817,9 +5892,16 @@ __metadata: "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" memoizerific: "npm:^1.11.3" - react: "npm:^16.8.0" - react-dom: "npm:^16.8.0" + prop-types: "npm:^15.7.2" 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 @@ -5830,6 +5912,9 @@ __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 @@ -5858,6 +5943,7 @@ __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:*" @@ -5897,6 +5983,8 @@ __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" @@ -5912,6 +6000,14 @@ __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 @@ -6204,12 +6300,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/client-logger@npm:7.5.0": - version: 7.5.0 - resolution: "@storybook/client-logger@npm:7.5.0" +"@storybook/client-logger@npm:7.4.6": + version: 7.4.6 + resolution: "@storybook/client-logger@npm:7.4.6" dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 90326c49a224bf21680c04ffee94725bf75658086093ccb839a8aae39476929c4719eafb18e498a148cf0dd956d4e9a5d3b2a34d09ca4fd25e2af553458558ac + checksum: 170ad58c17e2608639533fe24aaa96ddd4d77d23b4b28f265b2cb67510fef966fc20b029e070fdc7216ba1cdb724d1210b2f8edc8aa538de32fd6e549f9010cf languageName: node linkType: hard @@ -6539,6 +6635,8 @@ __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 @@ -6597,6 +6695,8 @@ __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 @@ -6700,13 +6800,14 @@ __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 @@ -6883,6 +6984,8 @@ __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 @@ -7106,6 +7209,7 @@ __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" @@ -7132,8 +7236,6 @@ __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 @@ -7452,11 +7554,12 @@ __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 @@ -7470,6 +7573,9 @@ __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 @@ -7502,6 +7608,9 @@ __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 @@ -7549,6 +7658,8 @@ __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 @@ -7569,7 +7680,6 @@ __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: @@ -7645,17 +7755,17 @@ __metadata: linkType: hard "@storybook/theming@npm:^7.0.2": - version: 7.5.0 - resolution: "@storybook/theming@npm:7.5.0" + version: 7.4.6 + resolution: "@storybook/theming@npm:7.4.6" dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.0" - "@storybook/client-logger": "npm:7.5.0" + "@storybook/client-logger": "npm:7.4.6" "@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: 57da8e27c748cbec4dc1661cdd2d449949d97476d8e97933696b31d07c7361cbbcca8d7225cc00ca078daa160023b8965ddec7c23519ce0a4ef2658246b062e7 + checksum: 6250a413c346971792623bf5a907811fc009ff4a36b8f292d0f45c677269b2a50c29d84ab1e869ada7df3eb23d49614e1342bd2c88e71d4467702b92ebc42f2d languageName: node linkType: hard @@ -7713,6 +7823,8 @@ __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 @@ -7735,6 +7847,8 @@ __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 @@ -7755,6 +7869,8 @@ __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 @@ -7775,6 +7891,8 @@ __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 @@ -7843,6 +7961,9 @@ __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 @@ -7860,6 +7981,8 @@ __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 @@ -25656,7 +25779,7 @@ __metadata: languageName: node linkType: hard -"react@npm:^16.14.0, react@npm:^16.8.0": +"react@npm:^16.14.0": version: 16.14.0 resolution: "react@npm:16.14.0" dependencies: diff --git a/scripts/package.json b/scripts/package.json index a93310ad8931..b428f9b9f228 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -111,7 +111,6 @@ "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 deleted file mode 100755 index 757402c4600d..000000000000 --- a/scripts/prepare/addon-bundle.ts +++ /dev/null @@ -1,285 +0,0 @@ -#!/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 a6d22a45a644..411298c2d9b9 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -3146,7 +3146,6 @@ __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" @@ -5468,13 +5467,6 @@ __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"