From 1ad0785220c3356cd2397290fbab934a2068194f Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 31 Oct 2023 11:41:10 +0100 Subject: [PATCH 01/22] move react and @storybook from peer deps to dev deps --- code/addons/a11y/package.json | 26 +++++--------- code/addons/actions/package.json | 36 +++++++------------ code/addons/backgrounds/package.json | 24 ++++--------- code/addons/controls/package.json | 20 ++++------- code/addons/interactions/package.json | 30 ++++++---------- code/addons/jest/package.json | 24 ++++--------- code/addons/links/package.json | 11 +++--- code/addons/measure/package.json | 22 ++++-------- code/addons/outline/package.json | 22 ++++-------- code/addons/storysource/package.json | 25 ++++--------- code/addons/themes/package.json | 18 ++-------- code/addons/toolbars/package.json | 20 +++-------- code/addons/viewport/package.json | 21 +++-------- code/deprecated/addons/package.json | 4 --- code/deprecated/manager-api-shim/package.json | 12 ------- code/frameworks/angular/package.json | 3 -- code/frameworks/ember/package.json | 4 +-- code/frameworks/html-webpack5/package.json | 4 +-- code/frameworks/preact-webpack5/package.json | 4 +-- code/frameworks/server-webpack5/package.json | 4 --- code/frameworks/svelte-webpack5/package.json | 2 -- code/frameworks/vue-vite/package.json | 2 -- code/frameworks/vue-webpack5/package.json | 2 -- code/frameworks/vue3-vite/package.json | 2 -- code/frameworks/vue3-webpack5/package.json | 2 -- .../web-components-vite/package.json | 4 --- .../web-components-webpack5/package.json | 4 +-- code/lib/manager-api/package.json | 22 ++++++------ code/lib/preview-api/package.json | 1 - code/lib/router/package.json | 6 ++-- code/lib/source-loader/package.json | 4 --- 31 files changed, 103 insertions(+), 282 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index b7c4447b294a..c7e4fca85b7c 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -61,10 +61,12 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/addon-highlight": "workspace:*", + "@storybook/addon-highlight": "workspace:*" + }, + "devDependencies": { "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", @@ -74,27 +76,15 @@ "@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-resize-detector": "^7.1.2" - }, - "devDependencies": { - "@testing-library/react": "^11.2.2", + "react": "^16.8.0", + "react-dom": "^16.8.0", + "react-resize-detector": "^7.1.2", "resize-observer-polyfill": "^1.5.1", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index f83e8bc69038..33dbe09ebc2d 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -81,40 +81,30 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "workspace:*", - "@storybook/components": "workspace:*", - "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "workspace:*", - "@storybook/preview-api": "workspace:*", - "@storybook/theming": "workspace:*", - "@storybook/types": "workspace:*", + "@types/lodash": "^4.14.167", + "@types/uuid": "^9.0.1", "dequal": "^2.0.2", "lodash": "^4.17.21", "polished": "^4.2.2", - "prop-types": "^15.7.2", - "react-inspector": "^6.0.0", "telejson": "^7.2.0", "ts-dedent": "^2.0.0", "uuid": "^9.0.0" }, "devDependencies": { - "@types/lodash": "^4.14.167", - "@types/uuid": "^9.0.1", + "@storybook/client-logger": "workspace:*", + "@storybook/components": "workspace:*", + "@storybook/core-events": "workspace:*", + "@storybook/manager-api": "workspace:*", + "@storybook/preview-api": "workspace:*", + "@storybook/theming": "workspace:*", + "@storybook/types": "workspace:*", + "prop-types": "^15.7.2", + "react": "^16.8.0", + "react-dom": "^16.8.0", + "react-inspector": "^6.0.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 3615aabc45aa..34d8b47c9268 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -77,32 +77,22 @@ "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:*", - "memoizerific": "^1.11.3", - "ts-dedent": "^2.0.0" - }, - "devDependencies": { + "react": "^16.8.0", + "react-dom": "^16.8.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index b91fbab0e762..bc6c44fc4da0 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -69,6 +69,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { + "lodash": "^4.17.21", + "ts-dedent": "^2.0.0" + }, + "devDependencies": { "@storybook/blocks": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", @@ -79,20 +83,8 @@ "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", - "lodash": "^4.17.21", - "ts-dedent": "^2.0.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } + "react": "^16.8.0", + "react-dom": "^16.8.0" }, "publishConfig": { "access": "public" diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index f2cf6bcfd25a..115019706e95 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -73,15 +73,7 @@ "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", @@ -89,24 +81,22 @@ }, "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" }, diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index db1c1cca97c6..71d203b5d024 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -71,32 +71,22 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/global": "^5.0.0", + "tiny-invariant": "^1.3.1", + "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" }, diff --git a/code/addons/links/package.json b/code/addons/links/package.json index fabf13f85980..b7d99d23c33f 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -81,18 +81,17 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "workspace:*", - "@storybook/core-events": "workspace:*", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", + "ts-dedent": "^2.0.0" + }, + "devDependencies": { + "@storybook/client-logger": "workspace:*", + "@storybook/core-events": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/router": "workspace:*", "@storybook/types": "workspace:*", - "prop-types": "^15.7.2", - "ts-dedent": "^2.0.0" - }, - "devDependencies": { "fs-extra": "^11.1.0", "typescript": "~4.9.3" }, diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 33e427def043..ca65b77e0be0 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -76,30 +76,20 @@ "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:*", - "tiny-invariant": "^1.3.1" - }, - "devDependencies": { + "react": "^16.8.0", + "react-dom": "^16.8.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index ec9d26a4c0ba..87b2049b6c8f 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -79,30 +79,20 @@ "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:*", - "ts-dedent": "^2.0.0" - }, - "devDependencies": { + "react": "^16.8.0", + "react-dom": "^16.8.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 291c6f2b7754..8a025c757118 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -54,6 +54,10 @@ "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:*", @@ -61,28 +65,13 @@ "@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" }, diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index d92d206471ab..bc5abc7bf716 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -74,6 +74,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { + "ts-dedent": "^2.0.0" + }, + "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", @@ -81,23 +84,8 @@ "@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" }, diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index e3907a368d01..c790d19ab9a0 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -68,28 +68,16 @@ "check": "../../../scripts/prepare/check.ts", "prep": "../../../scripts/prepare/bundle.ts" }, - "dependencies": { + "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", - "@storybook/theming": "workspace:*" - }, - "devDependencies": { + "@storybook/theming": "workspace:*", + "react": "^16.8.0", + "react-dom": "^16.8.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index dca40fc0913e..8f7fe6f22268 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -74,6 +74,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { + "memoizerific": "^1.11.3" + }, + "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", @@ -81,24 +84,10 @@ "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", - "memoizerific": "^1.11.3", - "prop-types": "^15.7.2" - }, - "devDependencies": { + "react": "^16.8.0", + "react-dom": "^16.8.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, diff --git a/code/deprecated/addons/package.json b/code/deprecated/addons/package.json index 961dfe7ea3f4..e65a247f1dcc 100644 --- a/code/deprecated/addons/package.json +++ b/code/deprecated/addons/package.json @@ -48,10 +48,6 @@ "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, "publishConfig": { "access": "public" }, diff --git a/code/deprecated/manager-api-shim/package.json b/code/deprecated/manager-api-shim/package.json index 58d4f764459f..d4ce9b661516 100644 --- a/code/deprecated/manager-api-shim/package.json +++ b/code/deprecated/manager-api-shim/package.json @@ -46,18 +46,6 @@ "@storybook/client-logger": "workspace:*", "@storybook/manager-api": "workspace:*" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, "publishConfig": { "access": "public" }, diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 6e43cde9f465..6b95c6fd0eb9 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -46,7 +46,6 @@ "@storybook/core-webpack": "workspace:*", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/telemetry": "workspace:*", @@ -102,8 +101,6 @@ "@angular/platform-browser": ">=14.1.0 < 17.0.0", "@angular/platform-browser-dynamic": ">=14.1.0 < 17.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 8d814a49eea3..d377e03aa654 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -49,9 +49,7 @@ "@types/ember__component": "4.0.8", "babel-plugin-ember-modules-api-polyfill": "^2.12.0", "babel-plugin-htmlbars-inline-precompile": "2 || 3", - "ember-source": "~3.28.1", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "ember-source": "~3.28.1" }, "engines": { "node": ">=16.0.0" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 0c3a6b8ed06e..4493641dc31d 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -58,9 +58,7 @@ "typescript": "~4.9.3" }, "peerDependencies": { - "@babel/core": "*", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "@babel/core": "*" }, "engines": { "node": ">=16.0.0" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index c29cf3bf9390..e6e64e5a5bf2 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -59,9 +59,7 @@ }, "peerDependencies": { "@babel/core": "*", - "preact": "^8.0.0||^10.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "preact": "^8.0.0||^10.0.0" }, "engines": { "node": ">=16.0.0" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index adff9861ad8f..0cfb92706892 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -56,10 +56,6 @@ "devDependencies": { "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, "engines": { "node": ">=16.0.0" }, diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 211dc8619d79..c330271913b5 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -59,8 +59,6 @@ }, "peerDependencies": { "@babel/core": "*", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "svelte": "^3.48.0 || ^4.0.0", "svelte-loader": "*" }, diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index 02530f95c3af..e960ac9c81d6 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -60,8 +60,6 @@ "vue": "^2.7.10" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "vite": "^3.0.0 || ^4.0.0 || ^5.0.0", "vue": "^2.7.0" }, diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json index 409f59dcc0d2..fbbd912661f5 100644 --- a/code/frameworks/vue-webpack5/package.json +++ b/code/frameworks/vue-webpack5/package.json @@ -63,8 +63,6 @@ "@babel/core": "*", "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", "css-loader": "*", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "vue": "^2.6.8", "vue-loader": "^15.7.0", "vue-template-compiler": "^2.6.8" diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 7bfa46d097ba..4bb6a82a0a0b 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -60,8 +60,6 @@ "vite": "^4.0.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "engines": { diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 109fd849241d..8dad80dfe875 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -62,8 +62,6 @@ "@babel/core": "*", "@vue/compiler-sfc": "^3.0.0", "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "vue": "^3.0.0" }, "engines": { diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index a0a54ed82570..bbaa29a65aa1 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -57,10 +57,6 @@ "@types/node": "^18.0.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, "engines": { "node": "^14.18 || >=16" }, diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 04846971c98d..2bc432111c59 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -62,9 +62,7 @@ "typescript": "~4.9.3" }, "peerDependencies": { - "lit": "^2.0.0 || ^3.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "lit": "^2.0.0 || ^3.0.0" }, "engines": { "node": ">=16.0.0" diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 7f5049fd3220..0236eb95bf97 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -43,14 +43,6 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "workspace:*", - "@storybook/client-logger": "workspace:*", - "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.0", - "@storybook/global": "^5.0.0", - "@storybook/router": "workspace:*", - "@storybook/theming": "workspace:*", - "@storybook/types": "workspace:*", "dequal": "^2.0.2", "lodash": "^4.17.21", "memoizerific": "^1.11.3", @@ -61,16 +53,22 @@ }, "devDependencies": { "@jest/globals": "^29.3.1", + "@storybook/channels": "workspace:*", + "@storybook/client-logger": "workspace:*", + "@storybook/core-events": "workspace:*", + "@storybook/csf": "^0.1.0", + "@storybook/global": "^5.0.0", + "@storybook/router": "workspace:*", + "@storybook/theming": "workspace:*", + "@storybook/types": "workspace:*", "@types/lodash": "^4.14.167", "@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" }, diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 19f8e142ea5a..8ca98275a338 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -87,7 +87,6 @@ "@jest/globals": "^29.5.0", "@storybook/core-common": "workspace:*", "ansi-to-html": "^0.6.11", - "react": "^16.14.0", "slash": "^5.0.0" }, "publishConfig": { diff --git a/code/lib/router/package.json b/code/lib/router/package.json index d178b97ad1e7..5879f8c9dff0 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -57,14 +57,12 @@ "@storybook/global": "^5.0.0", "dequal": "^2.0.2", "lodash": "^4.17.21", + "react": "^16.8.0", + "react-dom": "^16.8.0", "react-router-dom": "6.0.2", "ts-dedent": "^2.0.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, "publishConfig": { "access": "public" }, diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index a3a8240f147d..f11477663256 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -55,10 +55,6 @@ "jest-specific-snapshot": "^8.0.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, "publishConfig": { "access": "public" }, From c2b2b1ac42c10ac1dd8b534b9a6de1dee61278b3 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 31 Oct 2023 15:33:10 +0100 Subject: [PATCH 02/22] globalize packages when bundling --- code/addons/a11y/package.json | 2 +- code/lib/manager-api/src/globals.ts | 14 ++ code/lib/manager-api/src/index.tsx | 2 + code/ui/manager/src/globals/exports.ts | 2 + code/yarn.lock | 175 ++++--------------------- scripts/prepare/bundle.ts | 16 +++ 6 files changed, 62 insertions(+), 149 deletions(-) create mode 100644 code/lib/manager-api/src/globals.ts diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index c7e4fca85b7c..c67948b5e1dc 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -61,7 +61,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/addon-bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/addon-highlight": "workspace:*" diff --git a/code/lib/manager-api/src/globals.ts b/code/lib/manager-api/src/globals.ts new file mode 100644 index 000000000000..04328c6bd040 --- /dev/null +++ b/code/lib/manager-api/src/globals.ts @@ -0,0 +1,14 @@ +// keep in sync with code/ui/manager/src/globals/types.ts +export const GLOBALIZED_PACKAGES = [ + 'react', + 'react-dom', + '@storybook/components', + '@storybook/channels', + '@storybook/core-events', + '@storybook/router', + '@storybook/theming', + '@storybook/api', + '@storybook/manager-api', + '@storybook/addons', + '@storybook/client-logger', +]; diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx index 951dc494a93a..9e1a8b802358 100644 --- a/code/lib/manager-api/src/index.tsx +++ b/code/lib/manager-api/src/index.tsx @@ -506,5 +506,7 @@ export function useArgTypes(): ArgTypes { export { addons } from './lib/addons'; +export { GLOBALIZED_PACKAGES } from './globals'; + /* deprecated */ export { mockChannel, types, type Addon, type AddonStore } from './lib/addons'; diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index ef2523f0e06a..c51d42680e37 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -215,6 +215,7 @@ export default { '@storybook/api': [ 'ActiveTabs', 'Consumer', + 'GLOBALIZED_PACKAGES', 'ManagerContext', 'Provider', 'addons', @@ -247,6 +248,7 @@ export default { '@storybook/manager-api': [ 'ActiveTabs', 'Consumer', + 'GLOBALIZED_PACKAGES', 'ManagerContext', 'Provider', 'addons', diff --git a/code/yarn.lock b/code/yarn.lock index bdd11c54000c..be92a427d622 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5788,17 +5788,11 @@ __metadata: "@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 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 languageName: unknown linkType: soft @@ -5820,19 +5814,13 @@ __metadata: 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 typescript: ~4.9.3 uuid: ^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 @@ -5849,16 +5837,10 @@ __metadata: "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" memoizerific: ^1.11.3 + react: ^16.8.0 + react-dom: ^16.8.0 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 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5877,15 +5859,9 @@ __metadata: "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" lodash: ^4.17.21 + react: ^16.8.0 + react-dom: ^16.8.0 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 languageName: unknown linkType: soft @@ -6005,16 +5981,10 @@ __metadata: formik: ^2.2.9 jest-mock: ^27.0.6 polished: ^4.2.2 + react: ^16.8.0 + react-dom: ^16.8.0 ts-dedent: ^2.2.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 languageName: unknown linkType: soft @@ -6029,18 +5999,12 @@ __metadata: "@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 typescript: ~4.9.3 upath: ^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 @@ -6057,7 +6021,6 @@ __metadata: "@storybook/router": "workspace:*" "@storybook/types": "workspace:*" fs-extra: ^11.1.0 - prop-types: ^15.7.2 ts-dedent: ^2.0.0 typescript: ~4.9.3 peerDependencies: @@ -6093,16 +6056,10 @@ __metadata: "@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 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 languageName: unknown linkType: soft @@ -6117,16 +6074,10 @@ __metadata: "@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 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 languageName: unknown linkType: soft @@ -6254,18 +6205,11 @@ __metadata: "@types/react": ^16.14.34 "@types/react-syntax-highlighter": 11.0.5 estraverse: ^5.2.0 - prop-types: ^15.7.2 + react: ^16.8.0 + react-dom: ^16.8.0 react-syntax-highlighter: ^15.5.0 tiny-invariant: ^1.3.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 languageName: unknown linkType: soft @@ -6282,14 +6226,6 @@ __metadata: "@storybook/types": "workspace:*" 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 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -6302,15 +6238,9 @@ __metadata: "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" + react: ^16.8.0 + react-dom: ^16.8.0 typescript: ~4.9.3 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -6326,16 +6256,9 @@ __metadata: "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" memoizerific: ^1.11.3 - prop-types: ^15.7.2 + 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 languageName: unknown linkType: soft @@ -6346,9 +6269,6 @@ __metadata: "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -6377,7 +6297,6 @@ __metadata: "@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:*" @@ -6417,8 +6336,6 @@ __metadata: "@angular/platform-browser": ">=14.1.0 < 17.0.0" "@angular/platform-browser-dynamic": ">=14.1.0 < 17.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" @@ -6434,14 +6351,6 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/manager-api": "workspace:*" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -7066,8 +6975,6 @@ __metadata: babel-plugin-ember-modules-api-polyfill: ^2.12.0 babel-plugin-htmlbars-inline-precompile: 2 || 3 ember-source: ~3.28.1 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -7126,8 +7033,6 @@ __metadata: typescript: ~4.9.3 peerDependencies: "@babel/core": "*" - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -7229,14 +7134,13 @@ __metadata: lodash: ^4.17.21 memoizerific: ^1.11.3 qs: ^6.10.0 + react: ^16.8.0 + react-dom: ^16.8.0 semver: ^7.3.7 store2: ^2.14.2 telejson: ^7.2.0 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 languageName: unknown linkType: soft @@ -7410,8 +7314,6 @@ __metadata: peerDependencies: "@babel/core": "*" preact: ^8.0.0||^10.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -7635,7 +7537,6 @@ __metadata: lodash: ^4.17.21 memoizerific: ^1.11.3 qs: ^6.10.0 - react: ^16.14.0 slash: ^5.0.0 synchronous-promise: ^2.0.15 ts-dedent: ^2.0.0 @@ -7981,12 +7882,11 @@ __metadata: lodash: ^4.17.21 memoizerific: ^1.11.3 qs: ^6.10.0 + 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 languageName: unknown linkType: soft @@ -8000,9 +7900,6 @@ __metadata: "@storybook/server": "workspace:*" "@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 languageName: unknown linkType: soft @@ -8035,9 +7932,6 @@ __metadata: lodash: ^4.17.21 prettier: ^2.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 languageName: unknown linkType: soft @@ -8085,8 +7979,6 @@ __metadata: typescript: ~4.9.3 peerDependencies: "@babel/core": "*" - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 svelte: ^3.48.0 || ^4.0.0 svelte-loader: "*" languageName: unknown @@ -8228,8 +8120,6 @@ __metadata: vue: ^2.7.10 vue-docgen-api: ^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 @@ -8252,8 +8142,6 @@ __metadata: "@babel/core": "*" babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 css-loader: "*" - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 vue: ^2.6.8 vue-loader: ^15.7.0 vue-template-compiler: ^2.6.8 @@ -8274,8 +8162,6 @@ __metadata: vite: ^4.0.0 vue-docgen-api: ^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 @@ -8296,8 +8182,6 @@ __metadata: "@babel/core": "*" "@vue/compiler-sfc": ^3.0.0 babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 vue: ^3.0.0 languageName: unknown linkType: soft @@ -8365,9 +8249,6 @@ __metadata: "@types/node": ^18.0.0 magic-string: ^0.30.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 languageName: unknown linkType: soft @@ -8385,8 +8266,6 @@ __metadata: typescript: ~4.9.3 peerDependencies: lit: ^2.0.0 || ^3.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -27305,7 +27184,7 @@ __metadata: languageName: node linkType: hard -"react@npm:^16.14.0": +"react@npm:^16.14.0, react@npm:^16.8.0": version: 16.14.0 resolution: "react@npm:16.14.0" dependencies: diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts index a15f71cd6a34..e1c4715a260a 100755 --- a/scripts/prepare/bundle.ts +++ b/scripts/prepare/bundle.ts @@ -63,6 +63,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { ...extraExternals, ...Object.keys(dependencies || {}), ...Object.keys(peerDependencies || {}), + ...GLOBALIZED_PACKAGES, ]; const allEntries = entries.map((e: string) => slash(join(cwd, e))); @@ -157,6 +158,21 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { /* UTILS */ +// keep in sync with code/lib/manager-api/src/index.ts +const GLOBALIZED_PACKAGES = [ + 'react', + 'react-dom', + '@storybook/components', + '@storybook/channels', + '@storybook/core-events', + '@storybook/router', + '@storybook/theming', + '@storybook/api', + '@storybook/manager-api', + '@storybook/addons', + '@storybook/client-logger', +]; + async function getDTSConfigs({ formats, entries, From ab399bda457fb6440eb06962fbc5b8e68fb1e2b8 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 2 Nov 2023 09:50:40 +0100 Subject: [PATCH 03/22] use separate bundling technique for addons, manager packages --- code/addons/a11y/package.json | 35 +-- code/addons/actions/package.json | 36 +-- code/addons/backgrounds/package.json | 44 +-- code/addons/controls/package.json | 33 +- code/addons/essentials/package.json | 115 ++----- code/addons/gfm/package.json | 19 +- code/addons/highlight/package.json | 30 +- code/addons/interactions/package.json | 47 +-- code/addons/jest/package.json | 34 +- code/addons/links/package.json | 46 +-- code/addons/measure/package.json | 30 +- code/addons/outline/package.json | 43 +-- code/addons/storysource/package.json | 23 +- code/addons/themes/package.json | 37 +-- code/addons/toolbars/package.json | 33 +- code/addons/viewport/package.json | 43 +-- .../src/utils/warnOnIncompatibleAddons.ts | 2 +- code/lib/manager-api/package.json | 18 +- code/lib/manager-api/src/globals.ts | 14 - code/lib/manager-api/src/index.tsx | 2 - code/lib/preview/package.json | 3 + .../preview/scripts/generate-exports-file.ts | 71 +++++ code/lib/preview/src/globals/definitions.ts | 37 +++ code/lib/preview/src/globals/exports.ts | 276 ++++++++++++++++ code/lib/preview/src/globals/types.ts | 5 + code/lib/router/package.json | 14 + code/lib/theming/package.json | 14 + code/ui/manager/src/globals/definitions.ts | 2 + code/ui/manager/src/globals/exports.ts | 3 +- code/ui/manager/src/globals/runtime.ts | 2 + code/ui/manager/src/globals/types.ts | 1 + code/ui/manager/src/typings.d.ts | 1 + code/yarn.lock | 8 +- scripts/package.json | 1 + scripts/prepare/addon-bundle.ts | 296 ++++++++++++++++++ scripts/prepare/bundle.ts | 16 - scripts/yarn.lock | 8 + 37 files changed, 935 insertions(+), 507 deletions(-) delete mode 100644 code/lib/manager-api/src/globals.ts create mode 100644 code/lib/preview/scripts/generate-exports-file.ts create mode 100644 code/lib/preview/src/globals/definitions.ts create mode 100644 code/lib/preview/src/globals/exports.ts create mode 100755 scripts/prepare/addon-bundle.ts diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index c67948b5e1dc..e87a4caa0192 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -32,21 +32,9 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -61,23 +49,22 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/addon-highlight": "workspace:*" + "@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", @@ -89,9 +76,13 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.tsx" ] }, diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 33dbe09ebc2d..3d38d53cb8c7 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -33,21 +33,9 @@ "require": "./dist/decorator.js", "import": "./dist/decorator.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, - "./register.js": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register.js": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -58,14 +46,8 @@ "*": [ "dist/index.d.ts" ], - "manager": [ - "dist/manager.d.ts" - ], "decorator": [ "dist/decorator.d.ts" - ], - "preview": [ - "dist/preview.d.ts" ] } }, @@ -78,7 +60,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/global": "^5.0.0", @@ -109,10 +91,14 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", + "exportEntries": [ "./src/decorator.ts", - "./src/manager.tsx", + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.ts" ] }, diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 34d8b47c9268..96784440fbb3 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -32,39 +32,14 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -74,7 +49,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/global": "^5.0.0", @@ -84,7 +59,6 @@ "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", - "@storybook/core-events": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", @@ -97,9 +71,13 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.tsx" ] }, diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index bc6c44fc4da0..f838241ea31f 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -32,31 +32,13 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -66,7 +48,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "lodash": "^4.17.21", @@ -90,11 +72,12 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx" + "exportEntries": [ + "./src/index.ts" ], - "platform": "browser" + "managerEntries": [ + "./src/manager.tsx" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17", "storybook": { diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index d6ce73f6357a..68e464ba1ff8 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -28,81 +28,21 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./actions/preview": { - "types": "./dist/actions/preview.d.ts", - "require": "./dist/actions/preview.js", - "import": "./dist/actions/preview.mjs" - }, - "./actions/manager": { - "types": "./dist/actions/manager.d.ts", - "require": "./dist/actions/manager.js", - "import": "./dist/actions/manager.mjs" - }, - "./backgrounds/preview": { - "types": "./dist/backgrounds/preview.d.ts", - "require": "./dist/backgrounds/preview.js", - "import": "./dist/backgrounds/preview.mjs" - }, - "./backgrounds/manager": { - "types": "./dist/backgrounds/manager.d.ts", - "require": "./dist/backgrounds/manager.js", - "import": "./dist/backgrounds/manager.mjs" - }, - "./controls/manager": { - "types": "./dist/controls/manager.d.ts", - "require": "./dist/controls/manager.js", - "import": "./dist/controls/manager.mjs" - }, - "./docs/preview": { - "types": "./dist/docs/preview.d.ts", - "require": "./dist/docs/preview.js", - "import": "./dist/docs/preview.mjs" - }, - "./docs/preset": { - "types": "./dist/docs/preset.d.ts", - "require": "./dist/docs/preset.js", - "import": "./dist/docs/preset.mjs" - }, - "./docs/mdx-react-shim": { - "types": "./dist/docs/mdx-react-shim.d.ts", - "require": "./dist/docs/mdx-react-shim.js", - "import": "./dist/docs/mdx-react-shim.mjs" - }, - "./highlight/preview": { - "types": "./dist/highlight/preview.d.ts", - "require": "./dist/highlight/preview.js", - "import": "./dist/highlight/preview.mjs" - }, - "./measure/preview": { - "types": "./dist/measure/preview.d.ts", - "require": "./dist/measure/preview.js", - "import": "./dist/measure/preview.mjs" - }, - "./measure/manager": { - "types": "./dist/measure/manager.d.ts", - "require": "./dist/measure/manager.js", - "import": "./dist/measure/manager.mjs" - }, - "./outline/preview": { - "types": "./dist/outline/preview.d.ts", - "require": "./dist/outline/preview.js", - "import": "./dist/outline/preview.mjs" - }, - "./outline/manager": { - "types": "./dist/outline/manager.d.ts", - "require": "./dist/outline/manager.js", - "import": "./dist/outline/manager.mjs" - }, - "./toolbars/manager": { - "types": "./dist/toolbars/manager.d.ts", - "require": "./dist/toolbars/manager.js", - "import": "./dist/toolbars/manager.mjs" - }, - "./viewport/manager": { - "types": "./dist/viewport/manager.d.ts", - "require": "./dist/viewport/manager.js", - "import": "./dist/viewport/manager.mjs" - }, + "./actions/preview": "./dist/actions/preview.js", + "./actions/manager": "./dist/actions/manager.js", + "./backgrounds/preview": "./dist/backgrounds/preview.js", + "./backgrounds/manager": "./dist/backgrounds/manager.js", + "./controls/manager": "./dist/controls/manager.js", + "./docs/preview": "./dist/docs/preview.js", + "./docs/preset": "./dist/docs/preset.js", + "./docs/mdx-react-shim": "./dist/docs/mdx-react-shim.js", + "./highlight/preview": "./dist/highlight/preview.js", + "./measure/preview": "./dist/measure/preview.js", + "./measure/manager": "./dist/measure/manager.js", + "./outline/preview": "./dist/outline/preview.js", + "./outline/manager": "./dist/outline/manager.js", + "./toolbars/manager": "./dist/toolbars/manager.js", + "./viewport/manager": "./dist/viewport/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -117,7 +57,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/addon-actions": "workspace:*", @@ -147,25 +87,28 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts", - "./src/actions/preview.ts", + "./src/docs/preset.ts", + "./src/docs/mdx-react-shim.ts" + ], + "managerEntries": [ "./src/actions/manager.ts", - "./src/backgrounds/preview.ts", "./src/backgrounds/manager.ts", "./src/controls/manager.ts", - "./src/docs/preview.ts", - "./src/docs/preset.ts", - "./src/docs/mdx-react-shim.ts", - "./src/highlight/preview.ts", - "./src/measure/preview.ts", "./src/measure/manager.ts", - "./src/outline/preview.ts", "./src/outline/manager.ts", "./src/toolbars/manager.ts", "./src/viewport/manager.ts" ], - "platform": "node" + "previewEntries": [ + "./src/actions/preview.ts", + "./src/backgrounds/preview.ts", + "./src/docs/preview.ts", + "./src/highlight/preview.ts", + "./src/measure/preview.ts", + "./src/outline/preview.ts" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" } diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 1172c50bfd7f..9f1017672f6a 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -25,16 +25,8 @@ }, "license": "MIT", "exports": { - ".": { - "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "require": "./dist/index.js" - }, - "./preset": { - "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "require": "./dist/index.js" - }, + ".": "./dist/index.js", + "./preset": "./dist/index.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -49,7 +41,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/node-logger": "workspace:*", @@ -63,11 +55,8 @@ "access": "public" }, "bundler": { - "entries": [ + "nodeEntries": [ "./src/index.ts" - ], - "formats": [ - "cjs" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 620a06eb25ea..8a7230d12841 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -30,26 +30,12 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, + "./preview": "./dist/preview.js", "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -59,14 +45,14 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/core-events": "workspace:*", - "@storybook/global": "^5.0.0", - "@storybook/preview-api": "workspace:*" + "@storybook/global": "^5.0.0" }, "devDependencies": { + "@storybook/core-events": "workspace:*", + "@storybook/preview-api": "workspace:*", "@types/webpack-env": "^1.16.0", "typescript": "~4.9.3" }, @@ -74,8 +60,10 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", + "exportEntries": [ + "./src/index.ts" + ], + "previewEntries": [ "./src/preview.ts" ] }, diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 115019706e95..c87fe8ba90d1 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -28,39 +28,14 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, - "./register.js": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register.js": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -70,7 +45,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/global": "^5.0.0", @@ -101,10 +76,16 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", - "./src/preview.ts", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ + "./src/preview.ts" + ], + "nodeEntries": [ "./src/preset.ts" ] }, diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 71d203b5d024..9baeac4cb6ee 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -34,31 +34,13 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -68,11 +50,12 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/global": "^5.0.0", "tiny-invariant": "^1.3.1", + "ts-dedent": "^2.0.0", "upath": "^2.0.1" }, "devDependencies": { @@ -91,11 +74,12 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx" + "exportEntries": [ + "./src/index.ts" ], - "platform": "browser" + "managerEntries": [ + "./src/manager.tsx" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17", "storybook": { diff --git a/code/addons/links/package.json b/code/addons/links/package.json index b7d99d23c33f..5943120a1bf8 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -28,26 +28,14 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, "./react": { "types": "./dist/react/index.d.ts", "require": "./dist/react/index.js", "import": "./dist/react/index.mjs" }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -58,12 +46,6 @@ "*": [ "dist/index.d.ts" ], - "manager": [ - "dist/manager.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ], "react": [ "dist/react/index.d.ts" ] @@ -78,7 +60,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/csf": "^0.1.0", @@ -96,26 +78,26 @@ "typescript": "~4.9.3" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { "react": { "optional": true - }, - "react-dom": { - "optional": true } }, "publishConfig": { "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.ts", - "./src/preview.ts", - "./src/react/index.ts" + "exportEntries": [ + "./src/react/index.ts", + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.ts" + ], + "previewEntries": [ + "./src/preview.ts" ], "post": "./scripts/fix-preview-api-reference.ts" }, diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index ca65b77e0be0..8b716663bd69 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -31,21 +31,9 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -73,7 +61,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/global": "^5.0.0", @@ -94,9 +82,13 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.tsx" ] }, diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 87b2049b6c8f..c0770fd94542 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -34,39 +34,14 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -76,7 +51,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "@storybook/global": "^5.0.0", @@ -97,9 +72,13 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.tsx" ] }, diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 8a025c757118..f90898cc2dcb 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -28,15 +28,8 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./preset": { - "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" - }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./preset": "./dist/preset.js", + "./manager": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -51,7 +44,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "estraverse": "^5.2.0", @@ -76,9 +69,13 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "nodeEntries": [ "./src/preset.ts" ] }, diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index bc5abc7bf716..63cf379c4852 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -33,35 +33,14 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.js", "./package.json": "./package.json", "./postinstall": "./postinstall.js" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -71,7 +50,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "ts-dedent": "^2.0.0" @@ -90,9 +69,13 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx", + "exportEntries": [ + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.tsx" ] }, diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index c790d19ab9a0..4f1fc5f45cc3 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -32,31 +32,13 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -66,7 +48,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "devDependencies": { "@storybook/client-logger": "workspace:*", @@ -82,11 +64,12 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/manager.tsx" + "exportEntries": [ + "./src/index.ts" ], - "platform": "browser" + "managerEntries": [ + "./src/manager.tsx" + ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17", "storybook": { diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 8f7fe6f22268..096b04547331 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -29,39 +29,14 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./manager": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.ts", - "import": "./dist/preview.mjs" - }, - "./register": { - "types": "./dist/manager.d.ts", - "require": "./dist/manager.js", - "import": "./dist/manager.mjs" - }, + "./manager": "./dist/manager.js", + "./preview": "./dist/preview.ts", + "./register": "./dist/manager.js", "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "dist/index.d.ts" - ], - "manager": [ - "dist/manager.d.ts" - ], - "preview": [ - "dist/preview.d.ts" - ] - } - }, "files": [ "dist/**/*", "README.md", @@ -71,7 +46,7 @@ ], "scripts": { "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { "memoizerific": "^1.11.3" @@ -92,10 +67,14 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", + "exportEntries": [ "./src/models/index.ts", - "./src/manager.tsx", + "./src/index.ts" + ], + "managerEntries": [ + "./src/manager.tsx" + ], + "previewEntries": [ "./src/preview.ts" ] }, diff --git a/code/lib/core-server/src/utils/warnOnIncompatibleAddons.ts b/code/lib/core-server/src/utils/warnOnIncompatibleAddons.ts index a850d49809ad..23e17c77bc56 100644 --- a/code/lib/core-server/src/utils/warnOnIncompatibleAddons.ts +++ b/code/lib/core-server/src/utils/warnOnIncompatibleAddons.ts @@ -1,5 +1,5 @@ import type { StorybookConfig } from '@storybook/types'; -import { logger } from '@storybook/client-logger'; +import { logger } from '@storybook/node-logger'; import chalk from 'chalk'; import dedent from 'ts-dedent'; diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 0236eb95bf97..a507a15c944e 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -43,6 +43,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/csf": "^0.1.0", + "@storybook/global": "^5.0.0", "dequal": "^2.0.2", "lodash": "^4.17.21", "memoizerific": "^1.11.3", @@ -56,8 +58,6 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.0", - "@storybook/global": "^5.0.0", "@storybook/router": "workspace:*", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", @@ -75,6 +75,20 @@ "bundler": { "entries": [ "./src/index.tsx" + ], + "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/manager-api/src/globals.ts b/code/lib/manager-api/src/globals.ts deleted file mode 100644 index 04328c6bd040..000000000000 --- a/code/lib/manager-api/src/globals.ts +++ /dev/null @@ -1,14 +0,0 @@ -// keep in sync with code/ui/manager/src/globals/types.ts -export const GLOBALIZED_PACKAGES = [ - 'react', - 'react-dom', - '@storybook/components', - '@storybook/channels', - '@storybook/core-events', - '@storybook/router', - '@storybook/theming', - '@storybook/api', - '@storybook/manager-api', - '@storybook/addons', - '@storybook/client-logger', -]; diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx index 9e1a8b802358..951dc494a93a 100644 --- a/code/lib/manager-api/src/index.tsx +++ b/code/lib/manager-api/src/index.tsx @@ -506,7 +506,5 @@ export function useArgTypes(): ArgTypes { export { addons } from './lib/addons'; -export { GLOBALIZED_PACKAGES } from './globals'; - /* deprecated */ export { mockChannel, types, type Addon, type AddonStore } from './lib/addons'; diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 9815cd1e5982..9e08388ec691 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -62,12 +62,15 @@ "@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": { "access": "public" }, "bundler": { + "pre": "./scripts/generate-exports-file.ts", "browserEntries": [ "./src/runtime.ts" ], diff --git a/code/lib/preview/scripts/generate-exports-file.ts b/code/lib/preview/scripts/generate-exports-file.ts new file mode 100644 index 000000000000..afdbea8ff6e6 --- /dev/null +++ b/code/lib/preview/scripts/generate-exports-file.ts @@ -0,0 +1,71 @@ +/* eslint-disable no-console */ +import fs from 'fs-extra'; +import path from 'path'; +import { dedent } from 'ts-dedent'; +import { ESLint } from '../../../../scripts/node_modules/eslint'; +import { values } from '../src/globals/runtime'; + +const location = path.join(__dirname, '..', 'src', 'globals', 'exports.ts'); +let attempts = 0; + +function removeDefault(input: string) { + return input !== 'default'; +} + +const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); + +async function generate(text: string) { + console.log('Linting...'); + + const eslint = new ESLint({ + cwd: path.join(__dirname, '..'), + fix: true, + }); + const output = await eslint.lintText(text, { filePath: location }); + + console.log('Writing...'); + + await fs.writeFile(location, output[0].output); +} + +const run = async () => { + const data = Object.entries(values).reduce>((acc, [key, value]) => { + acc[key] = Object.keys(value).filter(removeDefault); + return acc; + }, {}); + + console.log('Generating...'); + + const text = dedent` + // this file is generated by generate-exports-file.ts + // this is done to prevent runtime dependencies from making it's way into the build/start script of the manager + // the manager builder needs to know which dependencies are 'globalized' in the ui + + export default ${JSON.stringify(data, null, 2)} as const;`; + + await fs.ensureFile(location); + + const tryGenerate = async () => { + attempts += 1; + + await generate(text).catch(async (e) => { + if (attempts > 5) { + throw e; + } + + console.log('Retrying...'); + + await wait(1000); + await tryGenerate(); + }); + }; + + await tryGenerate(); + + console.log('Done!'); +}; + +run().catch((e) => { + console.error(e); + process.exitCode = 1; +}); diff --git a/code/lib/preview/src/globals/definitions.ts b/code/lib/preview/src/globals/definitions.ts new file mode 100644 index 000000000000..54345610b3cd --- /dev/null +++ b/code/lib/preview/src/globals/definitions.ts @@ -0,0 +1,37 @@ +import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals'; +import Exports from './exports'; +import type { Definitions } from './types'; +import { globals } from './types'; + +/* + * We create a map of a module's name to a ModuleInfo. + * Which is a config object for a esbuild-plugin, to swap a import of a module to a reference of a global variable. + * To get this plugin to do the best job it can, it needs to know all the exports in the ModuleInfo config object. + * We generate this information via a script into `exports.ts`. + * + * It's really important that there are no actual to the runtime of the modules, hence the cumbersome generation. + * But we also want to ensure we don't miss any exports, or globals. + * + * So in order to add additional modules to be swapped for globals, you need to add them to: + * - `Keys` in `types.ts` + * - `values` in `runtime.ts`. + * + * If you forget to do either, TypeScript will complain. + * + * This `definitions.ts` file is consumed by the `builder-manager` package, + * The `runtime.ts` file is used inside the manager's browser code runtime. + */ + +const createModuleInfo = (m: keyof typeof globals): Required => ({ + type: 'esm', + varName: globals[m], + namedExports: Exports[m], + defaultExport: true, +}); + +export const definitions = Object.keys(globals).reduce((acc, key) => { + acc[key as keyof typeof globals] = createModuleInfo(key as keyof typeof globals); + return acc; +}, {} as Definitions); + +export const GLOBALIZED_PACKAGES = Object.keys(globals); diff --git a/code/lib/preview/src/globals/exports.ts b/code/lib/preview/src/globals/exports.ts new file mode 100644 index 000000000000..9687091b1299 --- /dev/null +++ b/code/lib/preview/src/globals/exports.ts @@ -0,0 +1,276 @@ +// this file is generated by generate-exports-file.ts +// this is done to prevent runtime dependencies from making it's way into the build/start script of the manager +// the manager builder needs to know which dependencies are 'globalized' in the ui + +export default { + '@storybook/channel-postmessage': [ + 'KEY', + 'PostMessageTransport', + 'PostmsgTransport', + 'createChannel', + ], + '@storybook/channel-websocket': ['WebsocketTransport', 'createChannel'], + '@storybook/channels': [ + 'Channel', + 'PostMessageTransport', + 'WebsocketTransport', + 'createBrowserChannel', + 'createPostMessageChannel', + 'createWebSocketChannel', + ], + '@storybook/client-logger': ['deprecate', 'logger', 'once', 'pretty'], + '@storybook/core-events': [ + 'CHANNEL_CREATED', + 'CONFIG_ERROR', + 'CURRENT_STORY_WAS_SET', + 'DOCS_PREPARED', + 'DOCS_RENDERED', + 'FORCE_REMOUNT', + 'FORCE_RE_RENDER', + 'GLOBALS_UPDATED', + 'IGNORED_EXCEPTION', + 'NAVIGATE_URL', + 'PLAY_FUNCTION_THREW_EXCEPTION', + 'PRELOAD_ENTRIES', + 'PREVIEW_BUILDER_PROGRESS', + 'PREVIEW_KEYDOWN', + 'REGISTER_SUBSCRIPTION', + 'REQUEST_WHATS_NEW_DATA', + 'RESET_STORY_ARGS', + 'RESULT_WHATS_NEW_DATA', + 'SELECT_STORY', + 'SET_CONFIG', + 'SET_CURRENT_STORY', + 'SET_GLOBALS', + 'SET_INDEX', + 'SET_STORIES', + 'SET_WHATS_NEW_CACHE', + 'SHARED_STATE_CHANGED', + 'SHARED_STATE_SET', + 'STORIES_COLLAPSE_ALL', + 'STORIES_EXPAND_ALL', + 'STORY_ARGS_UPDATED', + 'STORY_CHANGED', + 'STORY_ERRORED', + 'STORY_INDEX_INVALIDATED', + 'STORY_MISSING', + 'STORY_PREPARED', + 'STORY_RENDERED', + 'STORY_RENDER_PHASE_CHANGED', + 'STORY_SPECIFIED', + 'STORY_THREW_EXCEPTION', + 'STORY_UNCHANGED', + 'TELEMETRY_ERROR', + 'TOGGLE_WHATS_NEW_NOTIFICATIONS', + 'UPDATE_GLOBALS', + 'UPDATE_QUERY_PARAMS', + 'UPDATE_STORY_ARGS', + ], + '@storybook/preview-api': [ + 'ClientApi', + 'DocsContext', + 'HooksContext', + 'Preview', + 'PreviewWeb', + 'StoryStore', + 'addArgTypes', + 'addArgTypesEnhancer', + 'addArgs', + 'addArgsEnhancer', + 'addDecorator', + 'addLoader', + 'addParameters', + 'addStepRunner', + 'addons', + 'applyHooks', + 'combineArgs', + 'combineParameters', + 'composeConfigs', + 'composeStepRunners', + 'composeStories', + 'composeStory', + 'decorateStory', + 'defaultDecorateStory', + 'filterArgTypes', + 'getQueryParam', + 'getQueryParams', + 'inferControls', + 'makeDecorator', + 'mockChannel', + 'normalizeStory', + 'prepareMeta', + 'prepareStory', + 'sanitizeStoryContextUpdate', + 'setGlobalRender', + 'setProjectAnnotations', + 'simulateDOMContentLoaded', + 'simulatePageLoad', + 'sortStoriesV7', + 'start', + 'useArgs', + 'useCallback', + 'useChannel', + 'useEffect', + 'useGlobals', + 'useMemo', + 'useParameter', + 'useReducer', + 'useRef', + 'useState', + 'useStoryContext', + 'userOrAutoTitle', + 'userOrAutoTitleFromSpecifier', + ], + '@storybook/global': ['global'], + '@storybook/addons': [ + 'AddonStore', + 'HooksContext', + 'addons', + 'applyHooks', + 'makeDecorator', + 'mockChannel', + 'useArgs', + 'useCallback', + 'useChannel', + 'useEffect', + 'useGlobals', + 'useMemo', + 'useParameter', + 'useReducer', + 'useRef', + 'useState', + 'useStoryContext', + ], + '@storybook/client-api': [ + 'ClientApi', + 'DEEPLY_EQUAL', + 'HooksContext', + 'StoryStore', + 'UNTARGETED', + 'addArgTypes', + 'addArgTypesEnhancer', + 'addArgs', + 'addArgsEnhancer', + 'addDecorator', + 'addLoader', + 'addParameters', + 'addStepRunner', + 'applyHooks', + 'combineArgs', + 'combineParameters', + 'composeConfigs', + 'composeStepRunners', + 'composeStories', + 'composeStory', + 'decorateStory', + 'deepDiff', + 'defaultDecorateStory', + 'filterArgTypes', + 'getArrayField', + 'getField', + 'getObjectField', + 'getQueryParam', + 'getQueryParams', + 'getSingletonField', + 'getValuesFromArgTypes', + 'groupArgsByTarget', + 'inferControls', + 'mapArgsToTypes', + 'noTargetArgs', + 'normalizeComponentAnnotations', + 'normalizeInputType', + 'normalizeInputTypes', + 'normalizeProjectAnnotations', + 'normalizeStory', + 'prepareContext', + 'prepareMeta', + 'prepareStory', + 'processCSFFile', + 'sanitizeStoryContextUpdate', + 'setGlobalRender', + 'setProjectAnnotations', + 'sortStoriesV6', + 'sortStoriesV7', + 'useAddonState', + 'useArgs', + 'useCallback', + 'useChannel', + 'useEffect', + 'useGlobals', + 'useMemo', + 'useParameter', + 'useReducer', + 'useRef', + 'useSharedState', + 'useState', + 'useStoryContext', + 'userOrAutoTitle', + 'userOrAutoTitleFromSpecifier', + 'validateOptions', + ], + '@storybook/core-client': ['ClientApi', 'StoryStore', 'start'], + '@storybook/preview-web': [ + 'DocsContext', + 'Preview', + 'PreviewWeb', + 'PreviewWithSelection', + 'composeConfigs', + 'simulateDOMContentLoaded', + 'simulatePageLoad', + ], + '@storybook/store': [ + 'DEEPLY_EQUAL', + 'HooksContext', + 'StoryStore', + 'UNTARGETED', + 'applyHooks', + 'combineArgs', + 'combineParameters', + 'composeConfigs', + 'composeStepRunners', + 'composeStories', + 'composeStory', + 'decorateStory', + 'deepDiff', + 'defaultDecorateStory', + 'filterArgTypes', + 'getArrayField', + 'getField', + 'getObjectField', + 'getSingletonField', + 'getValuesFromArgTypes', + 'groupArgsByTarget', + 'inferControls', + 'mapArgsToTypes', + 'noTargetArgs', + 'normalizeComponentAnnotations', + 'normalizeInputType', + 'normalizeInputTypes', + 'normalizeProjectAnnotations', + 'normalizeStory', + 'prepareContext', + 'prepareMeta', + 'prepareStory', + 'processCSFFile', + 'sanitizeStoryContextUpdate', + 'setProjectAnnotations', + 'sortStoriesV6', + 'sortStoriesV7', + 'useAddonState', + 'useArgs', + 'useCallback', + 'useChannel', + 'useEffect', + 'useGlobals', + 'useMemo', + 'useParameter', + 'useReducer', + 'useRef', + 'useSharedState', + 'useState', + 'useStoryContext', + 'userOrAutoTitle', + 'userOrAutoTitleFromSpecifier', + 'validateOptions', + ], +} as const; diff --git a/code/lib/preview/src/globals/types.ts b/code/lib/preview/src/globals/types.ts index 40ed603cd598..0b8d1afccbae 100644 --- a/code/lib/preview/src/globals/types.ts +++ b/code/lib/preview/src/globals/types.ts @@ -1,4 +1,6 @@ // Here we map the name of a module to their NAME in the global scope. +import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals'; + export const globals = { '@storybook/addons': '__STORYBOOK_MODULE_ADDONS__', '@storybook/global': '__STORYBOOK_MODULE_GLOBAL__', @@ -12,4 +14,7 @@ export const globals = { '@storybook/preview-web': '__STORYBOOK_MODULE_PREVIEW_WEB__', '@storybook/preview-api': '__STORYBOOK_MODULE_PREVIEW_API__', '@storybook/store': '__STORYBOOK_MODULE_STORE__', + '@storybook/types': '__STORYBOOK_MODULE_TYPES__', }; + +export type Definitions = Required>>; diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 5879f8c9dff0..9c6d741e58db 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -71,6 +71,20 @@ "entries": [ "./src/index.ts", "./src/utils.ts" + ], + "externals": [ + "react", + "react-dom", + "@storybook/addons", + "@storybook/api", + "@storybook/channels", + "@storybook/client-logger", + "@storybook/components", + "@storybook/core-events", + "@storybook/manager-api", + "@storybook/router", + "@storybook/theming", + "@storybook/types" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index f0e714c37798..c71190f37fae 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -79,6 +79,20 @@ "./src/index.ts", "./src/create.ts" ], + "externals": [ + "react", + "react-dom", + "@storybook/addons", + "@storybook/api", + "@storybook/channels", + "@storybook/client-logger", + "@storybook/components", + "@storybook/core-events", + "@storybook/manager-api", + "@storybook/router", + "@storybook/theming", + "@storybook/types" + ], "post": "./scripts/fix-theme-type-export.ts" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/ui/manager/src/globals/definitions.ts b/code/ui/manager/src/globals/definitions.ts index 9122fca70262..93ca581ac658 100644 --- a/code/ui/manager/src/globals/definitions.ts +++ b/code/ui/manager/src/globals/definitions.ts @@ -33,3 +33,5 @@ export const definitions = Object.keys(Keys).reduce((acc, key) => { acc[key as keyof typeof Keys] = createModuleInfo(key as keyof typeof Keys); return acc; }, {} as Definitions); + +export const GLOBALIZED_PACKAGES = Object.keys(Keys); diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index c51d42680e37..f56ba153dd82 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -215,7 +215,6 @@ export default { '@storybook/api': [ 'ActiveTabs', 'Consumer', - 'GLOBALIZED_PACKAGES', 'ManagerContext', 'Provider', 'addons', @@ -248,7 +247,6 @@ export default { '@storybook/manager-api': [ 'ActiveTabs', 'Consumer', - 'GLOBALIZED_PACKAGES', 'ManagerContext', 'Provider', 'addons', @@ -280,4 +278,5 @@ export default { ], '@storybook/addons': ['addons', 'types', 'mockChannel'], '@storybook/client-logger': ['deprecate', 'logger', 'once', 'pretty'], + '@storybook/types': ['Addon_TypesEnum'], } as const; diff --git a/code/ui/manager/src/globals/runtime.ts b/code/ui/manager/src/globals/runtime.ts index 5850699f171d..a018a8f94924 100644 --- a/code/ui/manager/src/globals/runtime.ts +++ b/code/ui/manager/src/globals/runtime.ts @@ -7,6 +7,7 @@ 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 STORYBOOKTYPES from '@storybook/types'; import * as STORYBOOKCLIENTLOGGER from '@storybook/client-logger'; import type { Keys } from './types'; @@ -29,4 +30,5 @@ export const values: Required> = { mockChannel: STORYBOOKMANAGERAPI.mockChannel, }, '@storybook/client-logger': STORYBOOKCLIENTLOGGER, + '@storybook/types': STORYBOOKTYPES, }; diff --git a/code/ui/manager/src/globals/types.ts b/code/ui/manager/src/globals/types.ts index 2861e45f632a..9038e9375460 100644 --- a/code/ui/manager/src/globals/types.ts +++ b/code/ui/manager/src/globals/types.ts @@ -13,6 +13,7 @@ export enum Keys { '@storybook/manager-api' = '__STORYBOOKAPI__', '@storybook/addons' = '__STORYBOOKADDONS__', '@storybook/client-logger' = '__STORYBOOKCLIENTLOGGER__', + '@storybook/types' = '__STORYBOOKTYPES__', } export type Definitions = Required>>; diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts index 2ff3df07e63e..4917a0ec8692 100644 --- a/code/ui/manager/src/typings.d.ts +++ b/code/ui/manager/src/typings.d.ts @@ -26,4 +26,5 @@ declare var __STORYBOOKAPI__: any; declare var __STORYBOOKADDONS__: any; declare var __STORYBOOKCLIENTLOGGER__: any; declare var __STORYBOOK_ADDONS_CHANNEL__: any; +declare var __STORYBOOKTYPES__: any; declare var sendTelemetryError: (error: any) => void; diff --git a/code/yarn.lock b/code/yarn.lock index be92a427d622..92948f58ced2 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5779,7 +5779,6 @@ __metadata: "@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:*" @@ -5830,7 +5829,6 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" - "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -6003,6 +6001,7 @@ __metadata: react-dom: ^16.8.0 react-resize-detector: ^7.1.2 tiny-invariant: ^1.3.1 + ts-dedent: ^2.0.0 typescript: ~4.9.3 upath: ^2.0.1 languageName: unknown @@ -6025,12 +6024,9 @@ __metadata: 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 languageName: unknown linkType: soft @@ -7563,6 +7559,8 @@ __metadata: "@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 languageName: unknown linkType: soft diff --git a/scripts/package.json b/scripts/package.json index b6020c436390..719ba17c7774 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -111,6 +111,7 @@ "babel-eslint": "^10.1.0", "babel-loader": "^9.1.2", "boxen": "^5.1.2", + "browser-assert": "^1.2.1", "chalk": "^4.1.0", "codecov": "^3.8.1", "commander": "^6.2.1", diff --git a/scripts/prepare/addon-bundle.ts b/scripts/prepare/addon-bundle.ts new file mode 100755 index 000000000000..24a2bac52331 --- /dev/null +++ b/scripts/prepare/addon-bundle.ts @@ -0,0 +1,296 @@ +#!/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 { GLOBALIZED_PACKAGES as PREVIEW_GLOBALIZED_PACKAGES } from '../../code/lib/preview/src/globals/definitions'; +import { GLOBALIZED_PACKAGES as MANAGER_GLOBALIZED_PACKAGES } from '../../code/ui/manager/src/globals/definitions'; + +/* 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, + }); + + console.log({ + exportEntries, + commonExternals, + MANAGER_GLOBALIZED_PACKAGES, + PREVIEW_GLOBALIZED_PACKAGES, + }); + + tasks.push( + build({ + ...commonOptions, + ...(optimized ? dtsConfig : {}), + entry: exportEntries, + format: ['esm'], + target: ['chrome100', 'safari15', 'firefox91'], + platform: 'browser', + external: [ + ...commonExternals, + ...MANAGER_GLOBALIZED_PACKAGES, + ...PREVIEW_GLOBALIZED_PACKAGES, + ], + 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, ...MANAGER_GLOBALIZED_PACKAGES], + 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, ...PREVIEW_GLOBALIZED_PACKAGES], + 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/prepare/bundle.ts b/scripts/prepare/bundle.ts index e1c4715a260a..a15f71cd6a34 100755 --- a/scripts/prepare/bundle.ts +++ b/scripts/prepare/bundle.ts @@ -63,7 +63,6 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { ...extraExternals, ...Object.keys(dependencies || {}), ...Object.keys(peerDependencies || {}), - ...GLOBALIZED_PACKAGES, ]; const allEntries = entries.map((e: string) => slash(join(cwd, e))); @@ -158,21 +157,6 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { /* UTILS */ -// keep in sync with code/lib/manager-api/src/index.ts -const GLOBALIZED_PACKAGES = [ - 'react', - 'react-dom', - '@storybook/components', - '@storybook/channels', - '@storybook/core-events', - '@storybook/router', - '@storybook/theming', - '@storybook/api', - '@storybook/manager-api', - '@storybook/addons', - '@storybook/client-logger', -]; - async function getDTSConfigs({ formats, entries, diff --git a/scripts/yarn.lock b/scripts/yarn.lock index 504a13091f02..b6a3663544c1 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -2989,6 +2989,7 @@ __metadata: 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 @@ -5312,6 +5313,13 @@ __metadata: languageName: node linkType: hard +"browser-assert@npm:^1.2.1": + version: 1.2.1 + resolution: "browser-assert@npm:1.2.1" + checksum: 902abf999f92c9c951fdb6d7352c09eea9a84706258699655f7e7906e42daa06a1ae286398a755872740e05a6a71c43c5d1a0c0431d67a8cdb66e5d859a3fc0c + languageName: node + linkType: hard + "browserslist@npm:^4.21.10, browserslist@npm:^4.21.9": version: 4.21.10 resolution: "browserslist@npm:4.21.10" From 51f2cf9bf38f1e010ba9cd27884127e9f8a27c5a Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 2 Nov 2023 10:06:44 +0100 Subject: [PATCH 04/22] update eslint rules --- code/.eslintrc.js | 66 +++++++++++++++---- code/addons/essentials/src/actions/preview.ts | 1 - .../essentials/src/backgrounds/preview.ts | 1 - .../essentials/src/highlight/preview.ts | 1 - code/addons/essentials/src/measure/preview.ts | 1 - code/addons/essentials/src/outline/preview.ts | 1 - 6 files changed, 53 insertions(+), 18 deletions(-) diff --git a/code/.eslintrc.js b/code/.eslintrc.js index e967113bb8eb..640a66f0bf1f 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -1,7 +1,19 @@ const path = require('path'); +const fs = require('fs'); const scriptPath = path.join(__dirname, '..', 'scripts'); +const addonsPackages = fs + .readdirSync(path.join(__dirname, 'addons')) + .filter((p) => fs.statSync(path.join(__dirname, 'addons', p)).isDirectory()); +const libPackages = fs + .readdirSync(path.join(__dirname, 'lib')) + .filter((p) => fs.statSync(path.join(__dirname, 'lib', p)).isDirectory()); +const uiPackages = fs + .readdirSync(path.join(__dirname, 'ui')) + .filter((p) => fs.statSync(path.join(__dirname, 'ui', p)).isDirectory()) + .filter((p) => !p.startsWith('.')); + module.exports = { root: true, extends: [path.join(scriptPath, '.eslintrc.js')], @@ -53,7 +65,6 @@ module.exports = { project: null, }, rules: { - // '@typescript-eslint/no-var-requires': 'off', '@typescript-eslint/dot-notation': 'off', '@typescript-eslint/no-implied-eval': 'off', '@typescript-eslint/no-throw-literal': 'off', @@ -70,15 +81,7 @@ module.exports = { }, { // these packages use pre-bundling, dependencies will be bundled, and will be in devDepenencies - files: [ - 'addons/**/*', - 'frameworks/**/*', - 'lib/**/*', - 'builders/**/*', - 'deprecated/**/*', - 'renderers/**/*', - 'ui/**/*', - ], + files: ['frameworks/**/*', 'builders/**/*', 'deprecated/**/*', 'renderers/**/*'], excludedFiles: ['frameworks/angular/**/*', 'frameworks/ember/**/*', 'lib/core-server/**/*'], rules: { 'import/no-extraneous-dependencies': [ @@ -88,11 +91,47 @@ module.exports = { }, }, { - files: ['**/ui/*', '**/ui/.storybook/*'], + files: ['**/ui/.storybook/**'], rules: { - 'import/no-extraneous-dependencies': ['error', { packageDir: __dirname }], + 'import/no-extraneous-dependencies': [ + 'error', + { packageDir: [__dirname], devDependencies: true }, + ], }, }, + ...addonsPackages.map((directory) => ({ + files: [path.join('**', 'addons', directory, '**', '*.*')], + rules: { + 'import/no-extraneous-dependencies': [ + 'error', + { + packageDir: [__dirname, path.join(__dirname, 'addons', directory)], + devDependencies: true, + }, + ], + }, + })), + ...uiPackages.map((directory) => ({ + files: [path.join('**', 'ui', directory, '**', '*.*')], + rules: { + 'import/no-extraneous-dependencies': [ + 'error', + { packageDir: [__dirname, path.join(__dirname, 'ui', directory)], devDependencies: true }, + ], + }, + })), + ...libPackages.map((directory) => ({ + files: [path.join('**', 'lib', directory, '**', '*.*')], + rules: { + 'import/no-extraneous-dependencies': [ + 'error', + { + packageDir: [__dirname, path.join(__dirname, 'lib', directory)], + devDependencies: true, + }, + ], + }, + })), { files: [ '**/__tests__/**', @@ -114,7 +153,6 @@ module.exports = { 'react/require-default-props': 'off', }, }, - { files: '**/.storybook/config.js', rules: { 'global-require': 'off' } }, { files: ['**/*.stories.*'], rules: { @@ -124,6 +162,8 @@ module.exports = { { 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/essentials/src/actions/preview.ts b/code/addons/essentials/src/actions/preview.ts index 86c6d5f2e656..12b8c76bf2cb 100644 --- a/code/addons/essentials/src/actions/preview.ts +++ b/code/addons/essentials/src/actions/preview.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/export */ // TODO: We need to configure an eslint-import typescript resolver for export maps to be considered export * from '@storybook/addon-actions/preview'; diff --git a/code/addons/essentials/src/backgrounds/preview.ts b/code/addons/essentials/src/backgrounds/preview.ts index 5e56121e4a03..3bb1f96c3d80 100644 --- a/code/addons/essentials/src/backgrounds/preview.ts +++ b/code/addons/essentials/src/backgrounds/preview.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/export */ // TODO: We need to configure an eslint-import typescript resolver for export maps to be considered export * from '@storybook/addon-backgrounds/preview'; diff --git a/code/addons/essentials/src/highlight/preview.ts b/code/addons/essentials/src/highlight/preview.ts index ffcf62555af2..242ee3332bd3 100644 --- a/code/addons/essentials/src/highlight/preview.ts +++ b/code/addons/essentials/src/highlight/preview.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/export */ // TODO: We need to configure an eslint-import typescript resolver for export maps to be considered export * from '@storybook/addon-highlight/preview'; diff --git a/code/addons/essentials/src/measure/preview.ts b/code/addons/essentials/src/measure/preview.ts index f18769ff001a..a7b4307edb44 100644 --- a/code/addons/essentials/src/measure/preview.ts +++ b/code/addons/essentials/src/measure/preview.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/export */ // TODO: We need to configure an eslint-import typescript resolver for export maps to be considered export * from '@storybook/addon-measure/preview'; diff --git a/code/addons/essentials/src/outline/preview.ts b/code/addons/essentials/src/outline/preview.ts index 1cc44b9689a8..e54411194b51 100644 --- a/code/addons/essentials/src/outline/preview.ts +++ b/code/addons/essentials/src/outline/preview.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/export */ // TODO: We need to configure an eslint-import typescript resolver for export maps to be considered export * from '@storybook/addon-outline/preview'; From d1b9518c49533df2b03b1e2bb43992b529460f76 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 2 Nov 2023 11:45:50 +0100 Subject: [PATCH 05/22] fix blocks dep --- code/addons/controls/package.json | 3 +-- code/yarn.lock | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index ee680363bd24..456cbfd0e649 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -51,15 +51,14 @@ "prep": "../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { + "@storybook/blocks": "workspace:*", "lodash": "^4.17.21", "ts-dedent": "^2.0.0" }, "devDependencies": { - "@storybook/blocks": "workspace:*", "@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:*", diff --git a/code/yarn.lock b/code/yarn.lock index ea64774e473a..557e187305be 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6068,7 +6068,6 @@ __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:*" From 1388c64f402878fd8bbf9355675c8ca83537da94 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 2 Nov 2023 13:49:49 +0100 Subject: [PATCH 06/22] move Vite deps otimization to presets --- code/addons/docs/src/preset.ts | 10 +++++++++- code/builders/builder-vite/src/optimizeDeps.ts | 12 ++++++------ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 22b5834c9e9a..420713594595 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -194,4 +194,12 @@ const docsX = docs as any; ensureReactPeerDeps(); -export { webpackX as webpack, indexersX as experimental_indexers, docsX as docs }; +const optimizeDeps = [ + '@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, optimizeDeps }; diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index ddb32c800403..f67cb20bc223 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -8,10 +8,6 @@ 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', @@ -79,7 +75,6 @@ const INCLUDE_CANDIDATES = [ 'lodash/uniq', 'lodash/upperFirst.js', 'lodash/upperFirst', - 'markdown-to-jsx', 'memoizerific', 'overlayscrollbars', 'polished', @@ -126,6 +121,8 @@ const asyncFilter = async (arr: string[], predicate: (val: string) => Promise arr.filter((_v, index) => results[index])); export async function getOptimizeDeps(config: ViteInlineConfig, options: Options) { + const extraOptimizeDeps = await options.presets.apply('optimizeDeps', []); + const { root = process.cwd() } = config; const { normalizePath, resolveConfig } = await import('vite'); const absoluteStories = await listStories(options); @@ -136,7 +133,10 @@ export async function getOptimizeDeps(config: ViteInlineConfig, options: Options // This function converts ids which might include ` > ` to a real path, if it exists on disk. // See https://github.com/vitejs/vite/blob/67d164392e8e9081dc3f0338c4b4b8eea6c5f7da/packages/vite/src/node/optimizer/index.ts#L182-L199 const resolve = resolvedConfig.createResolver({ asSrc: false }); - const include = await asyncFilter(INCLUDE_CANDIDATES, async (id) => Boolean(await resolve(id))); + const include = await asyncFilter( + Array.from(new Set([...INCLUDE_CANDIDATES, ...extraOptimizeDeps])), + async (id) => Boolean(await resolve(id)) + ); const optimizeDeps: UserConfig['optimizeDeps'] = { ...config.optimizeDeps, From d43b004a563c73fcbc63cb426d270e9dd69bd1f5 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 2 Nov 2023 15:13:38 +0100 Subject: [PATCH 07/22] fixes for types check --- code/addons/essentials/src/backgrounds/manager.ts | 1 + code/addons/essentials/src/backgrounds/preview.ts | 3 +-- code/addons/essentials/src/controls/manager.ts | 1 + code/addons/essentials/src/highlight/preview.ts | 3 +-- code/addons/essentials/src/measure/manager.ts | 1 + code/addons/essentials/src/measure/preview.ts | 3 +-- code/addons/essentials/src/outline/manager.ts | 1 + code/addons/essentials/src/outline/preview.ts | 3 +-- code/addons/essentials/src/toolbars/manager.ts | 1 + code/addons/essentials/src/viewport/manager.ts | 1 + 10 files changed, 10 insertions(+), 8 deletions(-) diff --git a/code/addons/essentials/src/backgrounds/manager.ts b/code/addons/essentials/src/backgrounds/manager.ts index 930d5ee38181..9da6a432be39 100644 --- a/code/addons/essentials/src/backgrounds/manager.ts +++ b/code/addons/essentials/src/backgrounds/manager.ts @@ -1 +1,2 @@ +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-backgrounds/manager'; diff --git a/code/addons/essentials/src/backgrounds/preview.ts b/code/addons/essentials/src/backgrounds/preview.ts index 3bb1f96c3d80..cf24112788f3 100644 --- a/code/addons/essentials/src/backgrounds/preview.ts +++ b/code/addons/essentials/src/backgrounds/preview.ts @@ -1,3 +1,2 @@ -// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered - +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-backgrounds/preview'; diff --git a/code/addons/essentials/src/controls/manager.ts b/code/addons/essentials/src/controls/manager.ts index c902436bf5ff..933adbd4e101 100644 --- a/code/addons/essentials/src/controls/manager.ts +++ b/code/addons/essentials/src/controls/manager.ts @@ -1 +1,2 @@ +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-controls/manager'; diff --git a/code/addons/essentials/src/highlight/preview.ts b/code/addons/essentials/src/highlight/preview.ts index 242ee3332bd3..e124e7a1374a 100644 --- a/code/addons/essentials/src/highlight/preview.ts +++ b/code/addons/essentials/src/highlight/preview.ts @@ -1,3 +1,2 @@ -// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered - +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-highlight/preview'; diff --git a/code/addons/essentials/src/measure/manager.ts b/code/addons/essentials/src/measure/manager.ts index ceef38cd36ad..688ffbed236d 100644 --- a/code/addons/essentials/src/measure/manager.ts +++ b/code/addons/essentials/src/measure/manager.ts @@ -1 +1,2 @@ +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-measure/manager'; diff --git a/code/addons/essentials/src/measure/preview.ts b/code/addons/essentials/src/measure/preview.ts index a7b4307edb44..647ef4345a6d 100644 --- a/code/addons/essentials/src/measure/preview.ts +++ b/code/addons/essentials/src/measure/preview.ts @@ -1,3 +1,2 @@ -// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered - +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-measure/preview'; diff --git a/code/addons/essentials/src/outline/manager.ts b/code/addons/essentials/src/outline/manager.ts index 9f46ef8cbae4..d3a29db6d98b 100644 --- a/code/addons/essentials/src/outline/manager.ts +++ b/code/addons/essentials/src/outline/manager.ts @@ -1 +1,2 @@ +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-outline/manager'; diff --git a/code/addons/essentials/src/outline/preview.ts b/code/addons/essentials/src/outline/preview.ts index e54411194b51..3fe09381fe8f 100644 --- a/code/addons/essentials/src/outline/preview.ts +++ b/code/addons/essentials/src/outline/preview.ts @@ -1,3 +1,2 @@ -// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered - +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-outline/preview'; diff --git a/code/addons/essentials/src/toolbars/manager.ts b/code/addons/essentials/src/toolbars/manager.ts index fde1c66907a1..888dfe31937d 100644 --- a/code/addons/essentials/src/toolbars/manager.ts +++ b/code/addons/essentials/src/toolbars/manager.ts @@ -1 +1,2 @@ +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-toolbars/manager'; diff --git a/code/addons/essentials/src/viewport/manager.ts b/code/addons/essentials/src/viewport/manager.ts index ccbe283d4101..48bc7a850de6 100644 --- a/code/addons/essentials/src/viewport/manager.ts +++ b/code/addons/essentials/src/viewport/manager.ts @@ -1 +1,2 @@ +// @ts-expect-error (no types needed for this) export * from '@storybook/addon-viewport/manager'; From 642cfd7fe302c49a2cec3c2e7aeb6063bccfff28 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 2 Nov 2023 15:24:20 +0100 Subject: [PATCH 08/22] fix --- code/lib/preview/src/globals/exports.ts | 1 + code/lib/preview/src/globals/runtime.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/code/lib/preview/src/globals/exports.ts b/code/lib/preview/src/globals/exports.ts index 9687091b1299..766f86cc071c 100644 --- a/code/lib/preview/src/globals/exports.ts +++ b/code/lib/preview/src/globals/exports.ts @@ -122,6 +122,7 @@ export default { 'userOrAutoTitleFromSpecifier', ], '@storybook/global': ['global'], + '@storybook/types': ['Addon_TypesEnum'], '@storybook/addons': [ 'AddonStore', 'HooksContext', diff --git a/code/lib/preview/src/globals/runtime.ts b/code/lib/preview/src/globals/runtime.ts index ad078c4afa8d..4b3644b449fd 100644 --- a/code/lib/preview/src/globals/runtime.ts +++ b/code/lib/preview/src/globals/runtime.ts @@ -4,6 +4,7 @@ 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 @@ -24,6 +25,7 @@ export const values: Required> = { '@storybook/core-events': CORE_EVENTS, '@storybook/preview-api': PREVIEW_API, '@storybook/global': GLOBAL, + '@storybook/types': TYPES, // DEPRECATED, remove in 8.0 '@storybook/addons': ADDONS, From 0149d225759e208edba36b4e7fb29d125aa4864e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 2 Nov 2023 16:47:08 +0100 Subject: [PATCH 09/22] fix --- code/frameworks/nextjs/src/preset.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index db1c276da9b4..fd726835293c 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -20,7 +20,6 @@ import { configureAliasing } from './dependency-map'; export const addons: PresetProperty<'addons', StorybookConfig> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), - dirname(require.resolve(join('@storybook/builder-webpack5', 'package.json'))), ]; const defaultFrameworkOptions: FrameworkOptions = {}; From 88e116a86dd73191dfb8098174ce43bb0d13a790 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 2 Nov 2023 16:59:43 +0100 Subject: [PATCH 10/22] remove need for prop-types in preact --- code/.eslintrc.js | 7 +++ code/renderers/preact/template/cli/Button.jsx | 45 ++++++------------- code/renderers/preact/template/cli/Header.jsx | 26 +++++------ code/renderers/preact/template/cli/Page.jsx | 3 ++ .../preact/template/components/Button.jsx | 15 +++---- .../preact/template/components/Form.jsx | 16 ++++--- .../preact/template/components/Html.jsx | 9 ---- .../preact/template/components/Pre.jsx | 23 +++------- .../preact/template/stories/React.js | 20 ++++----- 9 files changed, 65 insertions(+), 99 deletions(-) diff --git a/code/.eslintrc.js b/code/.eslintrc.js index 640a66f0bf1f..52ff255d8154 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -159,6 +159,13 @@ module.exports = { 'no-console': 'off', }, }, + { + files: ['**/renderers/preact/**/*'], + rules: { + 'react/react-in-jsx-scope': 'off', + 'react/prop-types': 'off', + }, + }, { files: ['**/*.tsx', '**/*.ts'], rules: { diff --git a/code/renderers/preact/template/cli/Button.jsx b/code/renderers/preact/template/cli/Button.jsx index eefda2bffe3f..9bcecb3710d7 100644 --- a/code/renderers/preact/template/cli/Button.jsx +++ b/code/renderers/preact/template/cli/Button.jsx @@ -1,10 +1,21 @@ -import PropTypes from 'prop-types'; import './button.css'; /** * Primary UI component for user interaction + * @param {object} props + * @param {string} [props.primary=false] + * @param {string} [props.backgroundColor] + * @param {('small' | 'medium' | 'large')} [props.size='medium'] + * @param {string} props.label + * @param {function} props.onClick */ -export const Button = ({ primary, backgroundColor, size, label, ...props }) => { +export const Button = ({ + primary = false, + backgroundColor = null, + size = 'medium', + label, + ...props +}) => { const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; return ( ); }; - -Button.propTypes = { - /** - * Is this the principal call to action on the page? - */ - primary: PropTypes.bool, - /** - * What background color to use - */ - backgroundColor: PropTypes.string, - /** - * How large should the button be? - */ - size: PropTypes.oneOf(['small', 'medium', 'large']), - /** - * Button contents - */ - label: PropTypes.string.isRequired, - /** - * Optional click handler - */ - onClick: PropTypes.func, -}; - -Button.defaultProps = { - backgroundColor: null, - primary: false, - size: 'medium', - onClick: undefined, -}; diff --git a/code/renderers/preact/template/cli/Header.jsx b/code/renderers/preact/template/cli/Header.jsx index 8a722e57d331..c87a04c4837e 100644 --- a/code/renderers/preact/template/cli/Header.jsx +++ b/code/renderers/preact/template/cli/Header.jsx @@ -1,9 +1,16 @@ -import PropTypes from 'prop-types'; - import { Button } from './Button'; import './header.css'; -export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( +/** + * Header component + * @param {object} props + * @param {object} [props.user] + * @param {string} props.user.name + * @param {function} props.onLogin + * @param {function} props.onLogout + * @param {function} props.onCreateAccount + */ +export const Header = ({ user = null, onLogin, onLogout, onCreateAccount }) => (
@@ -43,16 +50,3 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
); - -Header.propTypes = { - user: PropTypes.shape({ - name: PropTypes.string.isRequired, - }), - onLogin: PropTypes.func.isRequired, - onLogout: PropTypes.func.isRequired, - onCreateAccount: PropTypes.func.isRequired, -}; - -Header.defaultProps = { - user: null, -}; diff --git a/code/renderers/preact/template/cli/Page.jsx b/code/renderers/preact/template/cli/Page.jsx index 12ca119d0b04..a5bc82d9d105 100644 --- a/code/renderers/preact/template/cli/Page.jsx +++ b/code/renderers/preact/template/cli/Page.jsx @@ -2,6 +2,9 @@ import { useState } from 'preact/hooks'; import { Header } from './Header'; import './page.css'; +/** + * Simple page component + */ export const Page = () => { const [user, setUser] = useState(); diff --git a/code/renderers/preact/template/components/Button.jsx b/code/renderers/preact/template/components/Button.jsx index cd3c13987c32..e79f89f5d4b3 100644 --- a/code/renderers/preact/template/components/Button.jsx +++ b/code/renderers/preact/template/components/Button.jsx @@ -1,14 +1,11 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; - +/** + * Button component + * @param {object} props + * @param {string} props.label + * @param {function} props.onClick + */ export const Button = ({ onClick, label }) => ( ); - -Button.propTypes = { - onClick: PropTypes.func.isRequired, - label: PropTypes.node.isRequired, -}; diff --git a/code/renderers/preact/template/components/Form.jsx b/code/renderers/preact/template/components/Form.jsx index fb58cbb10508..b2283d26ac10 100644 --- a/code/renderers/preact/template/components/Form.jsx +++ b/code/renderers/preact/template/components/Form.jsx @@ -1,8 +1,14 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; import { useState } from 'preact/hooks'; +/** + * Header component + * @param {object} props + * @param {object} [props.user] + * @param {string} props.user.name + * @param {function} props.onLogin + * @param {function} props.onLogout + * @param {function} props.onCreateAccount + */ export const Form = ({ onSuccess }) => { const [value, setValue] = useState(''); const [complete, setComplete] = useState(false); @@ -32,7 +38,3 @@ export const Form = ({ onSuccess }) => { ); }; - -Form.propTypes = { - onSuccess: PropTypes.func.isRequired, -}; diff --git a/code/renderers/preact/template/components/Html.jsx b/code/renderers/preact/template/components/Html.jsx index 36cff8218890..b2c1f966f9e3 100644 --- a/code/renderers/preact/template/components/Html.jsx +++ b/code/renderers/preact/template/components/Html.jsx @@ -1,10 +1 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; - -// eslint-disable-next-line react/no-danger export const Html = ({ content }) =>
; - -Html.propTypes = { - content: PropTypes.string.isRequired, -}; diff --git a/code/renderers/preact/template/components/Pre.jsx b/code/renderers/preact/template/components/Pre.jsx index 7efec93be9d6..3bf143581fac 100644 --- a/code/renderers/preact/template/components/Pre.jsx +++ b/code/renderers/preact/template/components/Pre.jsx @@ -1,21 +1,12 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; - +/** + * Pre component + * @param {object} props + * @param {object} [props.style] + * @param {object} [props.object] + * @param {string} [props.text] + */ export const Pre = ({ style, object, text }) => ( 
     {object ? JSON.stringify(object, null, 2) : text}
); - -Pre.propTypes = { - style: PropTypes.shape({}), - object: PropTypes.shape({}), - text: PropTypes.string, -}; - -Pre.defaultProps = { - style: {}, - object: null, - text: '', -}; diff --git a/code/renderers/preact/template/stories/React.js b/code/renderers/preact/template/stories/React.js index 0c72668ebe74..1d1fa97c55d8 100644 --- a/code/renderers/preact/template/stories/React.js +++ b/code/renderers/preact/template/stories/React.js @@ -1,8 +1,11 @@ // eslint-disable-next-line import/no-extraneous-dependencies import React from 'react'; -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; +/** + * ReactFunctionalComponent component + * @param {object} props + * @param {string} props.label + */ export const ReactFunctionalComponent = ({ label }) => { const [clicks, setValue] = React.useState(0); return ( @@ -19,10 +22,11 @@ export const ReactFunctionalComponent = ({ label }) => { ); }; -ReactFunctionalComponent.propTypes = { - label: PropTypes.string.isRequired, -}; - +/** + * ReactClassComponent component + * @param {object} props + * @param {string} props.label + */ export class ReactClassComponent extends React.Component { state = { clicks: 0, @@ -45,7 +49,3 @@ export class ReactClassComponent extends React.Component { ); } } - -ReactClassComponent.propTypes = { - label: PropTypes.string.isRequired, -}; From c596b98d5e75499012a7c9694309e56b195f76f1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 3 Nov 2023 14:02:18 +0100 Subject: [PATCH 11/22] fix event-log-checker --- scripts/event-log-checker.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts index e1f6d82bd533..a9e321c5aed8 100644 --- a/scripts/event-log-checker.ts +++ b/scripts/event-log-checker.ts @@ -70,7 +70,8 @@ async function run() { 8, `Expected 8 stories but received ${exampleStoryCount} instead.` ); - const expectedDocsCount = template.modifications?.disableDocs ? 0 : 3; + const expectedDocsCount = + template.modifications?.disableDocs || template.modifications.testBuild ? 0 : 3; assert.equal( exampleDocsCount, expectedDocsCount, From 4ea32f36fedc73b276bc2fb71be3a87bcf0ea600 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 3 Nov 2023 14:24:16 +0100 Subject: [PATCH 12/22] Discard changes to scripts/event-log-checker.ts --- scripts/event-log-checker.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts index a9e321c5aed8..e1f6d82bd533 100644 --- a/scripts/event-log-checker.ts +++ b/scripts/event-log-checker.ts @@ -70,8 +70,7 @@ async function run() { 8, `Expected 8 stories but received ${exampleStoryCount} instead.` ); - const expectedDocsCount = - template.modifications?.disableDocs || template.modifications.testBuild ? 0 : 3; + const expectedDocsCount = template.modifications?.disableDocs ? 0 : 3; assert.equal( exampleDocsCount, expectedDocsCount, From 1d9cc8282f7776a919f83fea1b47b4877857c791 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 3 Nov 2023 14:30:32 +0100 Subject: [PATCH 13/22] fix --- code/renderers/preact/template/stories/react-compat.stories.js | 1 - 1 file changed, 1 deletion(-) diff --git a/code/renderers/preact/template/stories/react-compat.stories.js b/code/renderers/preact/template/stories/react-compat.stories.js index b7895c1e8d0f..33f1078d3154 100644 --- a/code/renderers/preact/template/stories/react-compat.stories.js +++ b/code/renderers/preact/template/stories/react-compat.stories.js @@ -1,4 +1,3 @@ -/* eslint-disable react/react-in-jsx-scope */ import { ReactFunctionalComponent, ReactClassComponent } from './React'; export default { From 712077154966a76b149884d9ec13dcb55aebc92b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 3 Nov 2023 13:31:32 +0100 Subject: [PATCH 14/22] fix types export from manager-api --- code/lib/manager-api/src/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx index 951dc494a93a..d44b49002ca7 100644 --- a/code/lib/manager-api/src/index.tsx +++ b/code/lib/manager-api/src/index.tsx @@ -67,6 +67,8 @@ import * as whatsnew from './modules/whatsnew'; import * as globals from './modules/globals'; import type { ModuleFn } from './lib/types'; +import { types } from './lib/addons'; + export * from './lib/shortcut'; const { ActiveTabs } = layout; @@ -506,5 +508,14 @@ export function useArgTypes(): ArgTypes { export { addons } from './lib/addons'; +/** + * We need to rename this so it's not compiled to a straight re-export + * Our globalization plugin can't handle an import and export of the same name in different lines + * @deprecated + */ +const typesX = types; + +export { typesX as types }; + /* deprecated */ -export { mockChannel, types, type Addon, type AddonStore } from './lib/addons'; +export { mockChannel, type Addon, type AddonStore } from './lib/addons'; From 0551becc8dc18cbeeaf3480781b9d510196cf5ea Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 3 Nov 2023 13:31:57 +0100 Subject: [PATCH 15/22] rename optimizeDeps > optimizeViteDeps --- code/addons/docs/src/preset.ts | 4 ++-- code/builders/builder-vite/src/optimizeDeps.ts | 10 +--------- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 420713594595..c716775bdfa9 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -194,7 +194,7 @@ const docsX = docs as any; ensureReactPeerDeps(); -const optimizeDeps = [ +const optimizeViteDeps = [ '@mdx-js/react', '@storybook/addon-docs > acorn-jsx', '@storybook/addon-docs', @@ -202,4 +202,4 @@ const optimizeDeps = [ 'markdown-to-jsx', ]; -export { webpackX as webpack, indexersX as experimental_indexers, docsX as docs, optimizeDeps }; +export { webpackX as webpack, indexersX as experimental_indexers, docsX as docs, optimizeViteDeps }; diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index f67cb20bc223..1972fde8e8e7 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -8,17 +8,9 @@ const INCLUDE_CANDIDATES = [ '@emotion/core', '@emotion/is-prop-valid', '@emotion/styled', - '@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', @@ -121,7 +113,7 @@ 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('optimizeDeps', []); + const extraOptimizeDeps = await options.presets.apply('optimizeViteDeps', []); const { root = process.cwd() } = config; const { normalizePath, resolveConfig } = await import('vite'); From c31f63213979457f74aebfd4e3f571ef11c63e2d Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 3 Nov 2023 14:56:34 +0100 Subject: [PATCH 16/22] refactor and simplify preview globalization --- code/builders/builder-vite/src/vite-config.ts | 4 +- .../src/preview/iframe-webpack.config.ts | 4 +- code/lib/preview/package.json | 1 - .../preview/scripts/generate-exports-file.ts | 71 ----- code/lib/preview/src/globals.ts | 21 +- code/lib/preview/src/globals/definitions.ts | 37 --- code/lib/preview/src/globals/exports.ts | 277 ------------------ code/lib/preview/src/globals/runtime.ts | 36 --- code/lib/preview/src/globals/types.ts | 20 -- code/lib/preview/src/runtime.ts | 42 ++- scripts/prepare/addon-bundle.ts | 12 +- 11 files changed, 65 insertions(+), 460 deletions(-) delete mode 100644 code/lib/preview/scripts/generate-exports-file.ts delete mode 100644 code/lib/preview/src/globals/definitions.ts delete mode 100644 code/lib/preview/src/globals/exports.ts delete mode 100644 code/lib/preview/src/globals/runtime.ts delete mode 100644 code/lib/preview/src/globals/types.ts diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index 24db49249909..ecbc5c24267e 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -8,7 +8,7 @@ import type { InlineConfig, } from 'vite'; import { isPreservingSymlinks, getFrameworkName, getBuilderOptions } from '@storybook/core-common'; -import { globals } from '@storybook/preview/globals'; +import { globalsNameReferenceMap } from '@storybook/preview/globals'; import type { Options } from '@storybook/types'; import { codeGeneratorPlugin, @@ -96,7 +96,7 @@ export async function pluginConfig(options: Options) { } }, }, - await externalGlobalsPlugin(globals), + await externalGlobalsPlugin(globalsNameReferenceMap), ] 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 01b294f48fb0..27d4242971a8 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -10,7 +10,7 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import slash from 'slash'; import type { Options, CoreConfig, DocsOptions, PreviewAnnotation } from '@storybook/types'; -import { globals } from '@storybook/preview/globals'; +import { globalsNameReferenceMap } from '@storybook/preview/globals'; import { getBuilderOptions, getRendererName, @@ -235,7 +235,7 @@ export default async ( watchOptions: { ignored: /node_modules/, }, - externals: globals, + externals: globalsNameReferenceMap, ignoreWarnings: [ { message: /export '\S+' was not found in 'global'/, diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 23160854fb3b..92f8ddce12d3 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -70,7 +70,6 @@ "access": "public" }, "bundler": { - "pre": "./scripts/generate-exports-file.ts", "browserEntries": [ "./src/runtime.ts" ], diff --git a/code/lib/preview/scripts/generate-exports-file.ts b/code/lib/preview/scripts/generate-exports-file.ts deleted file mode 100644 index afdbea8ff6e6..000000000000 --- a/code/lib/preview/scripts/generate-exports-file.ts +++ /dev/null @@ -1,71 +0,0 @@ -/* eslint-disable no-console */ -import fs from 'fs-extra'; -import path from 'path'; -import { dedent } from 'ts-dedent'; -import { ESLint } from '../../../../scripts/node_modules/eslint'; -import { values } from '../src/globals/runtime'; - -const location = path.join(__dirname, '..', 'src', 'globals', 'exports.ts'); -let attempts = 0; - -function removeDefault(input: string) { - return input !== 'default'; -} - -const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); - -async function generate(text: string) { - console.log('Linting...'); - - const eslint = new ESLint({ - cwd: path.join(__dirname, '..'), - fix: true, - }); - const output = await eslint.lintText(text, { filePath: location }); - - console.log('Writing...'); - - await fs.writeFile(location, output[0].output); -} - -const run = async () => { - const data = Object.entries(values).reduce>((acc, [key, value]) => { - acc[key] = Object.keys(value).filter(removeDefault); - return acc; - }, {}); - - console.log('Generating...'); - - const text = dedent` - // this file is generated by generate-exports-file.ts - // this is done to prevent runtime dependencies from making it's way into the build/start script of the manager - // the manager builder needs to know which dependencies are 'globalized' in the ui - - export default ${JSON.stringify(data, null, 2)} as const;`; - - await fs.ensureFile(location); - - const tryGenerate = async () => { - attempts += 1; - - await generate(text).catch(async (e) => { - if (attempts > 5) { - throw e; - } - - console.log('Retrying...'); - - await wait(1000); - await tryGenerate(); - }); - }; - - await tryGenerate(); - - console.log('Done!'); -}; - -run().catch((e) => { - console.error(e); - process.exitCode = 1; -}); diff --git a/code/lib/preview/src/globals.ts b/code/lib/preview/src/globals.ts index fb7419cf52ed..2d29e53c30d0 100644 --- a/code/lib/preview/src/globals.ts +++ b/code/lib/preview/src/globals.ts @@ -1 +1,20 @@ -export * from './globals/types'; +// Here we map the name of a module to their REFERENCE in the global scope. +export const globalsNameReferenceMap = { + '@storybook/addons': '__STORYBOOK_MODULE_ADDONS__', + '@storybook/global': '__STORYBOOK_MODULE_GLOBAL__', + '@storybook/channel-postmessage': '__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__', // @deprecated: remove in 8.0 + '@storybook/channel-websocket': '__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__', // @deprecated: remove in 8.0 + '@storybook/channels': '__STORYBOOK_MODULE_CHANNELS__', + '@storybook/client-api': '__STORYBOOK_MODULE_CLIENT_API__', + '@storybook/client-logger': '__STORYBOOK_MODULE_CLIENT_LOGGER__', + '@storybook/core-client': '__STORYBOOK_MODULE_CORE_CLIENT__', + '@storybook/core-events': '__STORYBOOK_MODULE_CORE_EVENTS__', + '@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 +>; diff --git a/code/lib/preview/src/globals/definitions.ts b/code/lib/preview/src/globals/definitions.ts deleted file mode 100644 index 54345610b3cd..000000000000 --- a/code/lib/preview/src/globals/definitions.ts +++ /dev/null @@ -1,37 +0,0 @@ -import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals'; -import Exports from './exports'; -import type { Definitions } from './types'; -import { globals } from './types'; - -/* - * We create a map of a module's name to a ModuleInfo. - * Which is a config object for a esbuild-plugin, to swap a import of a module to a reference of a global variable. - * To get this plugin to do the best job it can, it needs to know all the exports in the ModuleInfo config object. - * We generate this information via a script into `exports.ts`. - * - * It's really important that there are no actual to the runtime of the modules, hence the cumbersome generation. - * But we also want to ensure we don't miss any exports, or globals. - * - * So in order to add additional modules to be swapped for globals, you need to add them to: - * - `Keys` in `types.ts` - * - `values` in `runtime.ts`. - * - * If you forget to do either, TypeScript will complain. - * - * This `definitions.ts` file is consumed by the `builder-manager` package, - * The `runtime.ts` file is used inside the manager's browser code runtime. - */ - -const createModuleInfo = (m: keyof typeof globals): Required => ({ - type: 'esm', - varName: globals[m], - namedExports: Exports[m], - defaultExport: true, -}); - -export const definitions = Object.keys(globals).reduce((acc, key) => { - acc[key as keyof typeof globals] = createModuleInfo(key as keyof typeof globals); - return acc; -}, {} as Definitions); - -export const GLOBALIZED_PACKAGES = Object.keys(globals); diff --git a/code/lib/preview/src/globals/exports.ts b/code/lib/preview/src/globals/exports.ts deleted file mode 100644 index 766f86cc071c..000000000000 --- a/code/lib/preview/src/globals/exports.ts +++ /dev/null @@ -1,277 +0,0 @@ -// this file is generated by generate-exports-file.ts -// this is done to prevent runtime dependencies from making it's way into the build/start script of the manager -// the manager builder needs to know which dependencies are 'globalized' in the ui - -export default { - '@storybook/channel-postmessage': [ - 'KEY', - 'PostMessageTransport', - 'PostmsgTransport', - 'createChannel', - ], - '@storybook/channel-websocket': ['WebsocketTransport', 'createChannel'], - '@storybook/channels': [ - 'Channel', - 'PostMessageTransport', - 'WebsocketTransport', - 'createBrowserChannel', - 'createPostMessageChannel', - 'createWebSocketChannel', - ], - '@storybook/client-logger': ['deprecate', 'logger', 'once', 'pretty'], - '@storybook/core-events': [ - 'CHANNEL_CREATED', - 'CONFIG_ERROR', - 'CURRENT_STORY_WAS_SET', - 'DOCS_PREPARED', - 'DOCS_RENDERED', - 'FORCE_REMOUNT', - 'FORCE_RE_RENDER', - 'GLOBALS_UPDATED', - 'IGNORED_EXCEPTION', - 'NAVIGATE_URL', - 'PLAY_FUNCTION_THREW_EXCEPTION', - 'PRELOAD_ENTRIES', - 'PREVIEW_BUILDER_PROGRESS', - 'PREVIEW_KEYDOWN', - 'REGISTER_SUBSCRIPTION', - 'REQUEST_WHATS_NEW_DATA', - 'RESET_STORY_ARGS', - 'RESULT_WHATS_NEW_DATA', - 'SELECT_STORY', - 'SET_CONFIG', - 'SET_CURRENT_STORY', - 'SET_GLOBALS', - 'SET_INDEX', - 'SET_STORIES', - 'SET_WHATS_NEW_CACHE', - 'SHARED_STATE_CHANGED', - 'SHARED_STATE_SET', - 'STORIES_COLLAPSE_ALL', - 'STORIES_EXPAND_ALL', - 'STORY_ARGS_UPDATED', - 'STORY_CHANGED', - 'STORY_ERRORED', - 'STORY_INDEX_INVALIDATED', - 'STORY_MISSING', - 'STORY_PREPARED', - 'STORY_RENDERED', - 'STORY_RENDER_PHASE_CHANGED', - 'STORY_SPECIFIED', - 'STORY_THREW_EXCEPTION', - 'STORY_UNCHANGED', - 'TELEMETRY_ERROR', - 'TOGGLE_WHATS_NEW_NOTIFICATIONS', - 'UPDATE_GLOBALS', - 'UPDATE_QUERY_PARAMS', - 'UPDATE_STORY_ARGS', - ], - '@storybook/preview-api': [ - 'ClientApi', - 'DocsContext', - 'HooksContext', - 'Preview', - 'PreviewWeb', - 'StoryStore', - 'addArgTypes', - 'addArgTypesEnhancer', - 'addArgs', - 'addArgsEnhancer', - 'addDecorator', - 'addLoader', - 'addParameters', - 'addStepRunner', - 'addons', - 'applyHooks', - 'combineArgs', - 'combineParameters', - 'composeConfigs', - 'composeStepRunners', - 'composeStories', - 'composeStory', - 'decorateStory', - 'defaultDecorateStory', - 'filterArgTypes', - 'getQueryParam', - 'getQueryParams', - 'inferControls', - 'makeDecorator', - 'mockChannel', - 'normalizeStory', - 'prepareMeta', - 'prepareStory', - 'sanitizeStoryContextUpdate', - 'setGlobalRender', - 'setProjectAnnotations', - 'simulateDOMContentLoaded', - 'simulatePageLoad', - 'sortStoriesV7', - 'start', - 'useArgs', - 'useCallback', - 'useChannel', - 'useEffect', - 'useGlobals', - 'useMemo', - 'useParameter', - 'useReducer', - 'useRef', - 'useState', - 'useStoryContext', - 'userOrAutoTitle', - 'userOrAutoTitleFromSpecifier', - ], - '@storybook/global': ['global'], - '@storybook/types': ['Addon_TypesEnum'], - '@storybook/addons': [ - 'AddonStore', - 'HooksContext', - 'addons', - 'applyHooks', - 'makeDecorator', - 'mockChannel', - 'useArgs', - 'useCallback', - 'useChannel', - 'useEffect', - 'useGlobals', - 'useMemo', - 'useParameter', - 'useReducer', - 'useRef', - 'useState', - 'useStoryContext', - ], - '@storybook/client-api': [ - 'ClientApi', - 'DEEPLY_EQUAL', - 'HooksContext', - 'StoryStore', - 'UNTARGETED', - 'addArgTypes', - 'addArgTypesEnhancer', - 'addArgs', - 'addArgsEnhancer', - 'addDecorator', - 'addLoader', - 'addParameters', - 'addStepRunner', - 'applyHooks', - 'combineArgs', - 'combineParameters', - 'composeConfigs', - 'composeStepRunners', - 'composeStories', - 'composeStory', - 'decorateStory', - 'deepDiff', - 'defaultDecorateStory', - 'filterArgTypes', - 'getArrayField', - 'getField', - 'getObjectField', - 'getQueryParam', - 'getQueryParams', - 'getSingletonField', - 'getValuesFromArgTypes', - 'groupArgsByTarget', - 'inferControls', - 'mapArgsToTypes', - 'noTargetArgs', - 'normalizeComponentAnnotations', - 'normalizeInputType', - 'normalizeInputTypes', - 'normalizeProjectAnnotations', - 'normalizeStory', - 'prepareContext', - 'prepareMeta', - 'prepareStory', - 'processCSFFile', - 'sanitizeStoryContextUpdate', - 'setGlobalRender', - 'setProjectAnnotations', - 'sortStoriesV6', - 'sortStoriesV7', - 'useAddonState', - 'useArgs', - 'useCallback', - 'useChannel', - 'useEffect', - 'useGlobals', - 'useMemo', - 'useParameter', - 'useReducer', - 'useRef', - 'useSharedState', - 'useState', - 'useStoryContext', - 'userOrAutoTitle', - 'userOrAutoTitleFromSpecifier', - 'validateOptions', - ], - '@storybook/core-client': ['ClientApi', 'StoryStore', 'start'], - '@storybook/preview-web': [ - 'DocsContext', - 'Preview', - 'PreviewWeb', - 'PreviewWithSelection', - 'composeConfigs', - 'simulateDOMContentLoaded', - 'simulatePageLoad', - ], - '@storybook/store': [ - 'DEEPLY_EQUAL', - 'HooksContext', - 'StoryStore', - 'UNTARGETED', - 'applyHooks', - 'combineArgs', - 'combineParameters', - 'composeConfigs', - 'composeStepRunners', - 'composeStories', - 'composeStory', - 'decorateStory', - 'deepDiff', - 'defaultDecorateStory', - 'filterArgTypes', - 'getArrayField', - 'getField', - 'getObjectField', - 'getSingletonField', - 'getValuesFromArgTypes', - 'groupArgsByTarget', - 'inferControls', - 'mapArgsToTypes', - 'noTargetArgs', - 'normalizeComponentAnnotations', - 'normalizeInputType', - 'normalizeInputTypes', - 'normalizeProjectAnnotations', - 'normalizeStory', - 'prepareContext', - 'prepareMeta', - 'prepareStory', - 'processCSFFile', - 'sanitizeStoryContextUpdate', - 'setProjectAnnotations', - 'sortStoriesV6', - 'sortStoriesV7', - 'useAddonState', - 'useArgs', - 'useCallback', - 'useChannel', - 'useEffect', - 'useGlobals', - 'useMemo', - 'useParameter', - 'useReducer', - 'useRef', - 'useSharedState', - 'useState', - 'useStoryContext', - 'userOrAutoTitle', - 'userOrAutoTitleFromSpecifier', - 'validateOptions', - ], -} as const; diff --git a/code/lib/preview/src/globals/runtime.ts b/code/lib/preview/src/globals/runtime.ts deleted file mode 100644 index 4b3644b449fd..000000000000 --- a/code/lib/preview/src/globals/runtime.ts +++ /dev/null @@ -1,36 +0,0 @@ -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 -import * as ADDONS from '@storybook/preview-api/dist/addons'; -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 type { globals } from './types'; - -// Here we map the name of a module to their VALUE in the global scope. -export const values: Required> = { - '@storybook/channel-postmessage': CHANNEL_POSTMESSAGE, // @deprecated: remove in 8.0 - '@storybook/channel-websocket': CHANNEL_WEBSOCKET, // @deprecated: remove in 8.0 - '@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/addons': ADDONS, - '@storybook/client-api': CLIENT_API, - '@storybook/core-client': CORE_CLIENT, - '@storybook/preview-web': PREVIEW_WEB, - '@storybook/store': STORE, -}; diff --git a/code/lib/preview/src/globals/types.ts b/code/lib/preview/src/globals/types.ts deleted file mode 100644 index 0b8d1afccbae..000000000000 --- a/code/lib/preview/src/globals/types.ts +++ /dev/null @@ -1,20 +0,0 @@ -// Here we map the name of a module to their NAME in the global scope. -import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals'; - -export const globals = { - '@storybook/addons': '__STORYBOOK_MODULE_ADDONS__', - '@storybook/global': '__STORYBOOK_MODULE_GLOBAL__', - '@storybook/channel-postmessage': '__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__', // @deprecated: remove in 8.0 - '@storybook/channel-websocket': '__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__', // @deprecated: remove in 8.0 - '@storybook/channels': '__STORYBOOK_MODULE_CHANNELS__', - '@storybook/client-api': '__STORYBOOK_MODULE_CLIENT_API__', - '@storybook/client-logger': '__STORYBOOK_MODULE_CLIENT_LOGGER__', - '@storybook/core-client': '__STORYBOOK_MODULE_CORE_CLIENT__', - '@storybook/core-events': '__STORYBOOK_MODULE_CORE_EVENTS__', - '@storybook/preview-web': '__STORYBOOK_MODULE_PREVIEW_WEB__', - '@storybook/preview-api': '__STORYBOOK_MODULE_PREVIEW_API__', - '@storybook/store': '__STORYBOOK_MODULE_STORE__', - '@storybook/types': '__STORYBOOK_MODULE_TYPES__', -}; - -export type Definitions = Required>>; diff --git a/code/lib/preview/src/runtime.ts b/code/lib/preview/src/runtime.ts index 603c586b9fe3..4274a14b96a5 100644 --- a/code/lib/preview/src/runtime.ts +++ b/code/lib/preview/src/runtime.ts @@ -1,15 +1,47 @@ import { TELEMETRY_ERROR } from '@storybook/core-events'; import { global } from '@storybook/global'; -import { values } from './globals/runtime'; -import { globals } from './globals/types'; +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 +import * as ADDONS from '@storybook/preview-api/dist/addons'; +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 { prepareForTelemetry } from './utils'; +import { globalPackages, globalsNameReferenceMap } from './globals'; -const getKeys = Object.keys as (obj: T) => Array; +// Here we map the name of a module to their VALUE in the global scope. +const globalsNameValueMap: Required> = { + '@storybook/channels': CHANNELS, + '@storybook/client-logger': CLIENT_LOGGER, + '@storybook/core-events': CORE_EVENTS, + '@storybook/preview-api': PREVIEW_API, + '@storybook/global': GLOBAL, + '@storybook/types': TYPES, + + // DEPRECATED, remove in 8.0 + '@storybook/channel-postmessage': CHANNEL_POSTMESSAGE, + '@storybook/channel-websocket': CHANNEL_WEBSOCKET, + '@storybook/addons': ADDONS, + '@storybook/client-api': CLIENT_API, + '@storybook/core-client': CORE_CLIENT, + '@storybook/preview-web': PREVIEW_WEB, + '@storybook/store': STORE, +}; // Apply all the globals -getKeys(globals).forEach((key) => { - (global as any)[globals[key]] = values[key]; +globalPackages.forEach((key) => { + (global as any)[globalsNameReferenceMap[key]] = globalsNameValueMap[key]; }); global.sendTelemetryError = (error: any) => { diff --git a/scripts/prepare/addon-bundle.ts b/scripts/prepare/addon-bundle.ts index 24a2bac52331..51ae1e192c70 100755 --- a/scripts/prepare/addon-bundle.ts +++ b/scripts/prepare/addon-bundle.ts @@ -10,7 +10,7 @@ import dedent from 'ts-dedent'; import slash from 'slash'; import { exec } from '../utils/exec'; -import { GLOBALIZED_PACKAGES as PREVIEW_GLOBALIZED_PACKAGES } from '../../code/lib/preview/src/globals/definitions'; +import { globalPackages as globalPreviewPackages } from '../../code/lib/preview/src/globals'; import { GLOBALIZED_PACKAGES as MANAGER_GLOBALIZED_PACKAGES } from '../../code/ui/manager/src/globals/definitions'; /* TYPES */ @@ -98,7 +98,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { exportEntries, commonExternals, MANAGER_GLOBALIZED_PACKAGES, - PREVIEW_GLOBALIZED_PACKAGES, + globalPreviewPackages, }); tasks.push( @@ -109,11 +109,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { format: ['esm'], target: ['chrome100', 'safari15', 'firefox91'], platform: 'browser', - external: [ - ...commonExternals, - ...MANAGER_GLOBALIZED_PACKAGES, - ...PREVIEW_GLOBALIZED_PACKAGES, - ], + external: [...commonExternals, ...MANAGER_GLOBALIZED_PACKAGES, ...globalPreviewPackages], esbuildOptions: (options) => { /* eslint-disable no-param-reassign */ options.conditions = ['module']; @@ -178,7 +174,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { format: ['esm'], target: ['chrome100', 'safari15', 'firefox91'], platform: 'browser', - external: [...commonExternals, ...PREVIEW_GLOBALIZED_PACKAGES], + external: [...commonExternals, ...globalPreviewPackages], esbuildOptions: (c) => { /* eslint-disable no-param-reassign */ c.conditions = ['module']; From 4e590751b686ba6ba5f789a3711c181d93f18f52 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Sun, 5 Nov 2023 23:44:07 +0100 Subject: [PATCH 17/22] refactor manager+preview bundling and globals --- code/builders/builder-manager/src/index.ts | 4 +- .../builder-manager/src/utils/globals.ts | 1 - code/lib/preview/src/globals.ts | 21 +------- code/lib/preview/src/globals/globals.ts | 20 ++++++++ code/lib/preview/src/globals/runtime.ts | 36 +++++++++++++ code/lib/preview/src/runtime.ts | 38 +------------- code/ui/manager/package.json | 27 ++++++++-- .../manager/scripts/generate-exports-file.ts | 13 +++-- code/ui/manager/src/globals-module-info.ts | 1 + code/ui/manager/src/globals.ts | 2 +- ...{definitions.ts => globals-module-info.ts} | 25 ++++------ code/ui/manager/src/globals/globals.ts | 19 +++++++ code/ui/manager/src/globals/runtime.ts | 50 +++++++++---------- code/ui/manager/src/globals/types.ts | 19 ------- code/ui/manager/src/runtime.ts | 8 +-- code/ui/manager/src/typings.d.ts | 21 ++++---- scripts/prepare/addon-bundle.ts | 15 ++---- 17 files changed, 167 insertions(+), 153 deletions(-) delete mode 100644 code/builders/builder-manager/src/utils/globals.ts create mode 100644 code/lib/preview/src/globals/globals.ts create mode 100644 code/lib/preview/src/globals/runtime.ts create mode 100644 code/ui/manager/src/globals-module-info.ts rename code/ui/manager/src/globals/{definitions.ts => globals-module-info.ts} (63%) create mode 100644 code/ui/manager/src/globals/globals.ts delete mode 100644 code/ui/manager/src/globals/types.ts diff --git a/code/builders/builder-manager/src/index.ts b/code/builders/builder-manager/src/index.ts index eb869bb54f2a..89b9846184e6 100644 --- a/code/builders/builder-manager/src/index.ts +++ b/code/builders/builder-manager/src/index.ts @@ -9,8 +9,8 @@ import { pnpPlugin } from '@yarnpkg/esbuild-plugin-pnp'; import aliasPlugin from 'esbuild-plugin-alias'; import { stringifyProcessEnvs } from '@storybook/core-common'; +import { globalsModuleInfoMap } from '@storybook/manager/globals-module-info'; import { getTemplatePath, renderHTML } from './utils/template'; -import { definitions } from './utils/globals'; import { wrapManagerEntries } from './utils/managerEntries'; import type { BuilderBuildResult, @@ -89,7 +89,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => { util: require.resolve('util/util.js'), assert: require.resolve('browser-assert'), }), - globalExternals(definitions), + globalExternals(globalsModuleInfoMap), pnpPlugin(), ], diff --git a/code/builders/builder-manager/src/utils/globals.ts b/code/builders/builder-manager/src/utils/globals.ts deleted file mode 100644 index 08fda5f5a44b..000000000000 --- a/code/builders/builder-manager/src/utils/globals.ts +++ /dev/null @@ -1 +0,0 @@ -export { definitions } from '@storybook/manager/dist/globals'; diff --git a/code/lib/preview/src/globals.ts b/code/lib/preview/src/globals.ts index 2d29e53c30d0..3b9b2321b6f0 100644 --- a/code/lib/preview/src/globals.ts +++ b/code/lib/preview/src/globals.ts @@ -1,20 +1 @@ -// Here we map the name of a module to their REFERENCE in the global scope. -export const globalsNameReferenceMap = { - '@storybook/addons': '__STORYBOOK_MODULE_ADDONS__', - '@storybook/global': '__STORYBOOK_MODULE_GLOBAL__', - '@storybook/channel-postmessage': '__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__', // @deprecated: remove in 8.0 - '@storybook/channel-websocket': '__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__', // @deprecated: remove in 8.0 - '@storybook/channels': '__STORYBOOK_MODULE_CHANNELS__', - '@storybook/client-api': '__STORYBOOK_MODULE_CLIENT_API__', - '@storybook/client-logger': '__STORYBOOK_MODULE_CLIENT_LOGGER__', - '@storybook/core-client': '__STORYBOOK_MODULE_CORE_CLIENT__', - '@storybook/core-events': '__STORYBOOK_MODULE_CORE_EVENTS__', - '@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 * from './globals/globals'; diff --git a/code/lib/preview/src/globals/globals.ts b/code/lib/preview/src/globals/globals.ts new file mode 100644 index 000000000000..2d29e53c30d0 --- /dev/null +++ b/code/lib/preview/src/globals/globals.ts @@ -0,0 +1,20 @@ +// Here we map the name of a module to their REFERENCE in the global scope. +export const globalsNameReferenceMap = { + '@storybook/addons': '__STORYBOOK_MODULE_ADDONS__', + '@storybook/global': '__STORYBOOK_MODULE_GLOBAL__', + '@storybook/channel-postmessage': '__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__', // @deprecated: remove in 8.0 + '@storybook/channel-websocket': '__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__', // @deprecated: remove in 8.0 + '@storybook/channels': '__STORYBOOK_MODULE_CHANNELS__', + '@storybook/client-api': '__STORYBOOK_MODULE_CLIENT_API__', + '@storybook/client-logger': '__STORYBOOK_MODULE_CLIENT_LOGGER__', + '@storybook/core-client': '__STORYBOOK_MODULE_CORE_CLIENT__', + '@storybook/core-events': '__STORYBOOK_MODULE_CORE_EVENTS__', + '@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 +>; diff --git a/code/lib/preview/src/globals/runtime.ts b/code/lib/preview/src/globals/runtime.ts new file mode 100644 index 000000000000..f05dd3ef24cd --- /dev/null +++ b/code/lib/preview/src/globals/runtime.ts @@ -0,0 +1,36 @@ +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 +import * as ADDONS from '@storybook/preview-api/dist/addons'; +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'; + +// Here we map the name of a module to their VALUE in the global scope. +export const globalsNameValueMap: Required> = { + '@storybook/channels': CHANNELS, + '@storybook/client-logger': CLIENT_LOGGER, + '@storybook/core-events': CORE_EVENTS, + '@storybook/preview-api': PREVIEW_API, + '@storybook/global': GLOBAL, + '@storybook/types': TYPES, + + // DEPRECATED, remove in 8.0 + '@storybook/channel-postmessage': CHANNEL_POSTMESSAGE, + '@storybook/channel-websocket': CHANNEL_WEBSOCKET, + '@storybook/addons': ADDONS, + '@storybook/client-api': CLIENT_API, + '@storybook/core-client': CORE_CLIENT, + '@storybook/preview-web': PREVIEW_WEB, + '@storybook/store': STORE, +}; diff --git a/code/lib/preview/src/runtime.ts b/code/lib/preview/src/runtime.ts index 4274a14b96a5..6b2900b68820 100644 --- a/code/lib/preview/src/runtime.ts +++ b/code/lib/preview/src/runtime.ts @@ -1,43 +1,9 @@ import { TELEMETRY_ERROR } from '@storybook/core-events'; import { global } from '@storybook/global'; - -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 -import * as ADDONS from '@storybook/preview-api/dist/addons'; -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 { globalPackages, globalsNameReferenceMap } from './globals/globals'; +import { globalsNameValueMap } from './globals/runtime'; import { prepareForTelemetry } from './utils'; -import { globalPackages, globalsNameReferenceMap } from './globals'; - -// Here we map the name of a module to their VALUE in the global scope. -const globalsNameValueMap: Required> = { - '@storybook/channels': CHANNELS, - '@storybook/client-logger': CLIENT_LOGGER, - '@storybook/core-events': CORE_EVENTS, - '@storybook/preview-api': PREVIEW_API, - '@storybook/global': GLOBAL, - '@storybook/types': TYPES, - - // DEPRECATED, remove in 8.0 - '@storybook/channel-postmessage': CHANNEL_POSTMESSAGE, - '@storybook/channel-websocket': CHANNEL_WEBSOCKET, - '@storybook/addons': ADDONS, - '@storybook/client-api': CLIENT_API, - '@storybook/core-client': CORE_CLIENT, - '@storybook/preview-web': PREVIEW_WEB, - '@storybook/store': STORE, -}; // Apply all the globals globalPackages.forEach((key) => { diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 6e46aecaee31..689d251bea67 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -24,11 +24,15 @@ "types": "./dist/index.d.ts", "import": "./dist/index.js" }, - "./dist/runtime": { + "./runtime": { "types": "./dist/runtime.d.ts", "import": "./dist/runtime.js" }, - "./dist/globals": { + "./globals-module-info": { + "types": "./dist/globals-module-info.d.ts", + "require": "./dist/globals-module-info.js" + }, + "./globals": { "types": "./dist/globals.d.ts", "require": "./dist/globals.js" }, @@ -38,6 +42,22 @@ "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", + "typesVersions": { + "*": { + "*": [ + "dist/index.d.ts" + ], + "runtime": [ + "dist/runtime.d.ts" + ], + "globals": [ + "dist/globals.d.ts" + ], + "globals-module-info": [ + "dist/globals-module-info.d.ts" + ] + } + }, "files": [ "dist/**/*", "static/**/*", @@ -97,7 +117,8 @@ "./src/runtime.ts" ], "nodeEntries": [ - "./src/globals.ts" + "./src/globals.ts", + "./src/globals-module-info.ts" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/ui/manager/scripts/generate-exports-file.ts b/code/ui/manager/scripts/generate-exports-file.ts index afdbea8ff6e6..ece5ac50391b 100644 --- a/code/ui/manager/scripts/generate-exports-file.ts +++ b/code/ui/manager/scripts/generate-exports-file.ts @@ -3,7 +3,7 @@ import fs from 'fs-extra'; import path from 'path'; import { dedent } from 'ts-dedent'; import { ESLint } from '../../../../scripts/node_modules/eslint'; -import { values } from '../src/globals/runtime'; +import { globalsNameValueMap } from '../src/globals/runtime'; const location = path.join(__dirname, '..', 'src', 'globals', 'exports.ts'); let attempts = 0; @@ -29,10 +29,13 @@ async function generate(text: string) { } const run = async () => { - const data = Object.entries(values).reduce>((acc, [key, value]) => { - acc[key] = Object.keys(value).filter(removeDefault); - return acc; - }, {}); + const data = Object.entries(globalsNameValueMap).reduce>( + (acc, [key, value]) => { + acc[key] = Object.keys(value).filter(removeDefault); + return acc; + }, + {} + ); console.log('Generating...'); diff --git a/code/ui/manager/src/globals-module-info.ts b/code/ui/manager/src/globals-module-info.ts new file mode 100644 index 000000000000..4bcbf259af79 --- /dev/null +++ b/code/ui/manager/src/globals-module-info.ts @@ -0,0 +1 @@ +export * from './globals/globals-module-info'; diff --git a/code/ui/manager/src/globals.ts b/code/ui/manager/src/globals.ts index d516acc55516..3b9b2321b6f0 100644 --- a/code/ui/manager/src/globals.ts +++ b/code/ui/manager/src/globals.ts @@ -1 +1 @@ -export * from './globals/definitions'; +export * from './globals/globals'; diff --git a/code/ui/manager/src/globals/definitions.ts b/code/ui/manager/src/globals/globals-module-info.ts similarity index 63% rename from code/ui/manager/src/globals/definitions.ts rename to code/ui/manager/src/globals/globals-module-info.ts index 93ca581ac658..616148e80ca4 100644 --- a/code/ui/manager/src/globals/definitions.ts +++ b/code/ui/manager/src/globals/globals-module-info.ts @@ -1,7 +1,6 @@ import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals'; import Exports from './exports'; -import { Keys } from './types'; -import type { Definitions } from './types'; +import { globalPackages, globalsNameReferenceMap } from './globals'; /* * We create a map of a module's name to a ModuleInfo. @@ -18,20 +17,16 @@ import type { Definitions } from './types'; * * If you forget to do either, TypeScript will complain. * - * This `definitions.ts` file is consumed by the `builder-manager` package, + * This `globals-module-info.ts` file is consumed by the `builder-manager` package, * The `runtime.ts` file is used inside the manager's browser code runtime. */ -const createModuleInfo = (m: keyof typeof Keys): Required => ({ - type: 'esm', - varName: Keys[m], - namedExports: Exports[m], - defaultExport: true, -}); - -export const definitions = Object.keys(Keys).reduce((acc, key) => { - acc[key as keyof typeof Keys] = createModuleInfo(key as keyof typeof Keys); +export const globalsModuleInfoMap = globalPackages.reduce((acc, key) => { + acc[key] = { + type: 'esm', + varName: globalsNameReferenceMap[key], + namedExports: Exports[key], + defaultExport: true, + }; return acc; -}, {} as Definitions); - -export const GLOBALIZED_PACKAGES = Object.keys(Keys); +}, {} as Required>>); diff --git a/code/ui/manager/src/globals/globals.ts b/code/ui/manager/src/globals/globals.ts new file mode 100644 index 000000000000..1ef93c38bc94 --- /dev/null +++ b/code/ui/manager/src/globals/globals.ts @@ -0,0 +1,19 @@ +// Here we map the name of a module to their REFERENCE in the global scope. +export const globalsNameReferenceMap = { + react: '__REACT__', + 'react-dom': '__REACT_DOM__', + '@storybook/components': '__STORYBOOK_COMPONENTS__', + '@storybook/channels': '__STORYBOOK_CHANNELS__', + '@storybook/core-events': '__STORYBOOK_CORE_EVENTS__', + '@storybook/router': '__STORYBOOK_ROUTER__', + '@storybook/theming': '__STORYBOOK_THEMING__', + '@storybook/api': '__STORYBOOK_API__', // deprecated, remove in 8.0 + '@storybook/manager-api': '__STORYBOOK_API__', + '@storybook/addons': '__STORYBOOK_ADDONS__', + '@storybook/client-logger': '__STORYBOOK_CLIENT_LOGGER__', + '@storybook/types': '__STORYBOOK_TYPES__', +} as const; + +export const globalPackages = Object.keys(globalsNameReferenceMap) as Array< + keyof typeof globalsNameReferenceMap +>; diff --git a/code/ui/manager/src/globals/runtime.ts b/code/ui/manager/src/globals/runtime.ts index a018a8f94924..59f5f8fc1a09 100644 --- a/code/ui/manager/src/globals/runtime.ts +++ b/code/ui/manager/src/globals/runtime.ts @@ -1,34 +1,34 @@ import * as REACT from 'react'; -import * as REACTDOM from 'react-dom'; +import * as REACT_DOM from 'react-dom'; -import * as STORYBOOKCOMPONENTS from '@storybook/components'; -import * as STORYBOOKCHANNELS from '@storybook/channels'; -import * as STORYBOOKEVENTS from '@storybook/core-events'; -import * as STORYBOOKROUTER from '@storybook/router'; -import * as STORYBOOKTHEMING from '@storybook/theming'; -import * as STORYBOOKMANAGERAPI from '@storybook/manager-api'; -import * as STORYBOOKTYPES from '@storybook/types'; -import * as STORYBOOKCLIENTLOGGER from '@storybook/client-logger'; +import * as COMPONENTS from '@storybook/components'; +import * as CHANNELS from '@storybook/channels'; +import * as EVENTS from '@storybook/core-events'; +import * as ROUTER from '@storybook/router'; +import * as THEMING from '@storybook/theming'; +import * as MANAGER_API from '@storybook/manager-api'; +import * as TYPES from '@storybook/types'; +import * as CLIENT_LOGGER from '@storybook/client-logger'; -import type { Keys } from './types'; +import type { globalsNameReferenceMap } from './globals'; // Here we map the name of a module to their VALUE in the global scope. -export const values: Required> = { - react: REACT as any, - 'react-dom': REACTDOM, - '@storybook/components': STORYBOOKCOMPONENTS, - '@storybook/channels': STORYBOOKCHANNELS, - '@storybook/core-events': STORYBOOKEVENTS, - '@storybook/router': STORYBOOKROUTER, - '@storybook/theming': STORYBOOKTHEMING, - '@storybook/api': STORYBOOKMANAGERAPI, // deprecated, remove in 8.0 - '@storybook/manager-api': STORYBOOKMANAGERAPI, +export const globalsNameValueMap: Required> = { + react: REACT, + 'react-dom': REACT_DOM, + '@storybook/components': COMPONENTS, + '@storybook/channels': CHANNELS, + '@storybook/core-events': EVENTS, + '@storybook/router': ROUTER, + '@storybook/theming': THEMING, + '@storybook/api': MANAGER_API, // deprecated, remove in 8.0 + '@storybook/manager-api': MANAGER_API, // backwards compatibility '@storybook/addons': { - addons: STORYBOOKMANAGERAPI.addons, - types: STORYBOOKMANAGERAPI.types, - mockChannel: STORYBOOKMANAGERAPI.mockChannel, + addons: MANAGER_API.addons, + types: MANAGER_API.types, + mockChannel: MANAGER_API.mockChannel, }, - '@storybook/client-logger': STORYBOOKCLIENTLOGGER, - '@storybook/types': STORYBOOKTYPES, + '@storybook/client-logger': CLIENT_LOGGER, + '@storybook/types': TYPES, }; diff --git a/code/ui/manager/src/globals/types.ts b/code/ui/manager/src/globals/types.ts deleted file mode 100644 index 9038e9375460..000000000000 --- a/code/ui/manager/src/globals/types.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals'; - -// Here we map the name of a module to their NAME in the global scope. -export enum Keys { - 'react' = '__REACT__', - 'react-dom' = '__REACTDOM__', - '@storybook/components' = '__STORYBOOKCOMPONENTS__', - '@storybook/channels' = '__STORYBOOKCHANNELS__', - '@storybook/core-events' = '__STORYBOOKCOREEVENTS__', - '@storybook/router' = '__STORYBOOKROUTER__', - '@storybook/theming' = '__STORYBOOKTHEMING__', - '@storybook/api' = '__STORYBOOKAPI__', // deprecated, remove in 8.0 - '@storybook/manager-api' = '__STORYBOOKAPI__', - '@storybook/addons' = '__STORYBOOKADDONS__', - '@storybook/client-logger' = '__STORYBOOKCLIENTLOGGER__', - '@storybook/types' = '__STORYBOOKTYPES__', -} - -export type Definitions = Required>>; diff --git a/code/ui/manager/src/runtime.ts b/code/ui/manager/src/runtime.ts index efa348ac47e0..f66bde4de3d3 100644 --- a/code/ui/manager/src/runtime.ts +++ b/code/ui/manager/src/runtime.ts @@ -9,8 +9,8 @@ import { CHANNEL_CREATED, TELEMETRY_ERROR } from '@storybook/core-events'; import Provider from './provider'; import { renderStorybookUI } from './index'; -import { values } from './globals/runtime'; -import { Keys } from './globals/types'; +import { globalsNameValueMap } from './globals/runtime'; +import { globalPackages, globalsNameReferenceMap } from './globals/globals'; import { prepareForTelemetry, shouldSkipError } from './utils/prepareForTelemetry'; const { FEATURES, CONFIG_TYPE } = global; @@ -58,8 +58,8 @@ class ReactProvider extends Provider { } // Apply all the globals -Object.keys(Keys).forEach((key: keyof typeof Keys) => { - global[Keys[key]] = values[key]; +globalPackages.forEach((key) => { + global[globalsNameReferenceMap[key]] = globalsNameValueMap[key]; }); global.sendTelemetryError = (error) => { diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts index 4917a0ec8692..bce29ea466a7 100644 --- a/code/ui/manager/src/typings.d.ts +++ b/code/ui/manager/src/typings.d.ts @@ -15,16 +15,15 @@ declare var VERSIONCHECK: any; declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined; declare var __REACT__: any; -declare var __REACTDOM__: any; -declare var __STORYBOOKCOMPONENTS__: any; -declare var __STORYBOOKCOMPONENTSEXPERIMENTAL__: any; -declare var __STORYBOOKCHANNELS__: any; -declare var __STORYBOOKCOREEVENTS__: any; -declare var __STORYBOOKROUTER__: any; -declare var __STORYBOOKTHEMING__: any; -declare var __STORYBOOKAPI__: any; -declare var __STORYBOOKADDONS__: any; -declare var __STORYBOOKCLIENTLOGGER__: any; +declare var __REACT_DOM__: any; +declare var __STORYBOOK_COMPONENTS__: any; +declare var __STORYBOOK_CHANNELS__: any; +declare var __STORYBOOK_CORE_EVENTS__: any; +declare var __STORYBOOK_ROUTER__: any; +declare var __STORYBOOK_THEMING__: any; +declare var __STORYBOOK_API__: any; +declare var __STORYBOOK_ADDONS__: any; +declare var __STORYBOOK_CLIENT_LOGGER__: any; declare var __STORYBOOK_ADDONS_CHANNEL__: any; -declare var __STORYBOOKTYPES__: any; +declare var __STORYBOOK_TYPES__: any; declare var sendTelemetryError: (error: any) => void; diff --git a/scripts/prepare/addon-bundle.ts b/scripts/prepare/addon-bundle.ts index 51ae1e192c70..757402c4600d 100755 --- a/scripts/prepare/addon-bundle.ts +++ b/scripts/prepare/addon-bundle.ts @@ -10,8 +10,8 @@ import dedent from 'ts-dedent'; import slash from 'slash'; import { exec } from '../utils/exec'; -import { globalPackages as globalPreviewPackages } from '../../code/lib/preview/src/globals'; -import { GLOBALIZED_PACKAGES as MANAGER_GLOBALIZED_PACKAGES } from '../../code/ui/manager/src/globals/definitions'; +import { globalPackages as globalPreviewPackages } from '../../code/lib/preview/src/globals/globals'; +import { globalPackages as globalManagerPackages } from '../../code/ui/manager/src/globals/globals'; /* TYPES */ @@ -94,13 +94,6 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { optimized, }); - console.log({ - exportEntries, - commonExternals, - MANAGER_GLOBALIZED_PACKAGES, - globalPreviewPackages, - }); - tasks.push( build({ ...commonOptions, @@ -109,7 +102,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { format: ['esm'], target: ['chrome100', 'safari15', 'firefox91'], platform: 'browser', - external: [...commonExternals, ...MANAGER_GLOBALIZED_PACKAGES, ...globalPreviewPackages], + external: [...commonExternals, ...globalManagerPackages, ...globalPreviewPackages], esbuildOptions: (options) => { /* eslint-disable no-param-reassign */ options.conditions = ['module']; @@ -152,7 +145,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { format: ['esm'], target: ['chrome100', 'safari15', 'firefox91'], platform: 'browser', - external: [...commonExternals, ...MANAGER_GLOBALIZED_PACKAGES], + external: [...commonExternals, ...globalManagerPackages], esbuildOptions: (options) => { /* eslint-disable no-param-reassign */ options.conditions = ['module']; From fdee9bf1fc4be444a870b76fa0f2d03ce9ddcca0 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Sun, 5 Nov 2023 23:56:59 +0100 Subject: [PATCH 18/22] reword missing react error --- code/addons/docs/src/ensure-react-peer-deps.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/code/addons/docs/src/ensure-react-peer-deps.ts b/code/addons/docs/src/ensure-react-peer-deps.ts index 6958b7e40653..37520dff343e 100644 --- a/code/addons/docs/src/ensure-react-peer-deps.ts +++ b/code/addons/docs/src/ensure-react-peer-deps.ts @@ -7,13 +7,14 @@ export function ensureReactPeerDeps() { require.resolve('react-dom'); } catch (e) { logger.error(dedent` - Starting in 7.0, react and react-dom are now required peer dependencies of Storybook. + Starting in 7.0, react and react-dom are now required peer dependencies of @storybook/addon-docs. https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-peer-dependencies-required - It seems that you haven't run Storybook's CLI to upgrade to the latest version. - The upgrade command will install the required peer dependencies for you and will take - care of other important auto migrations as well. + You can continue to use Storybook without addon-docs, or you can install react and react-dom in your project: + You can use the upgrade command in Storybook's CLI to automatically install the required + peer dependencies for you. + If you want to upgrade to the latest prerelease version, please run: $ npx storybook@next upgrade --prerelease From 765dbb1218cf328356962aa4bff315acf3249461 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 6 Nov 2023 00:25:18 +0100 Subject: [PATCH 19/22] make global types more strict --- code/builders/builder-vite/src/vite-config.ts | 6 ++++-- .../src/preview/iframe-webpack.config.ts | 5 +++-- code/lib/preview/src/globals/globals.ts | 11 ++++------- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index 4f94b16250ba..a89a14488dd4 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -79,8 +79,10 @@ export async function pluginConfig(options: Options) { const frameworkName = await getFrameworkName(options); const build = await options.presets.apply('build'); + const externals: Record = globalsNameReferenceMap; + if (build?.test?.emptyBlocks) { - globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; + externals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; } const plugins = [ @@ -101,7 +103,7 @@ export async function pluginConfig(options: Options) { } }, }, - await externalGlobalsPlugin(globalsNameReferenceMap), + await externalGlobalsPlugin(externals), ] as PluginOption[]; // TODO: framework doesn't exist, should move into framework when/if built diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 1c50b74f9858..28b214144190 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -219,8 +219,9 @@ export default async ( `); } + const externals: Record = globalsNameReferenceMap; if (build?.test?.emptyBlocks) { - globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; + externals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; } return { @@ -241,7 +242,7 @@ export default async ( watchOptions: { ignored: /node_modules/, }, - externals: globalsNameReferenceMap, + externals, ignoreWarnings: [ { message: /export '\S+' was not found in 'global'/, diff --git a/code/lib/preview/src/globals/globals.ts b/code/lib/preview/src/globals/globals.ts index 9caf83f51848..3cd77282fe49 100644 --- a/code/lib/preview/src/globals/globals.ts +++ b/code/lib/preview/src/globals/globals.ts @@ -1,6 +1,6 @@ // Here we map the name of a module to their REFERENCE in the global scope. -// eslint-disable-next-line @typescript-eslint/naming-convention,no-underscore-dangle -const _globalsNameReferenceMap = { + +export const globalsNameReferenceMap = { '@storybook/addons': '__STORYBOOK_MODULE_ADDONS__', '@storybook/global': '__STORYBOOK_MODULE_GLOBAL__', '@storybook/channel-postmessage': '__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__', // @deprecated: remove in 8.0 @@ -16,9 +16,6 @@ const _globalsNameReferenceMap = { '@storybook/types': '__STORYBOOK_MODULE_TYPES__', } as const; -export const globalPackages = Object.keys(_globalsNameReferenceMap) as Array< - keyof typeof _globalsNameReferenceMap +export const globalPackages = Object.keys(globalsNameReferenceMap) as Array< + keyof typeof globalsNameReferenceMap >; - -export const globalsNameReferenceMap: typeof _globalsNameReferenceMap & Record = - _globalsNameReferenceMap; From b5a530735f650381b690d449ac59af47c9b206fc Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 7 Nov 2023 12:48:31 +0100 Subject: [PATCH 20/22] keep SB packages as regular dependencies of manager-api --- code/lib/manager-api/package.json | 24 +++++++----------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 170e477c2aed..63ade68d18c0 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -43,8 +43,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/channels": "workspace:*", + "@storybook/client-logger": "workspace:*", + "@storybook/core-events": "workspace:*", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", + "@storybook/router": "workspace:*", + "@storybook/theming": "workspace:*", + "@storybook/types": "workspace:*", "dequal": "^2.0.2", "lodash": "^4.17.21", "memoizerific": "^1.11.3", @@ -55,12 +61,6 @@ }, "devDependencies": { "@jest/globals": "^29.3.1", - "@storybook/channels": "workspace:*", - "@storybook/client-logger": "workspace:*", - "@storybook/core-events": "workspace:*", - "@storybook/router": "workspace:*", - "@storybook/theming": "workspace:*", - "@storybook/types": "workspace:*", "@types/lodash": "^4.14.167", "@types/qs": "^6", "flush-promises": "^1.0.2", @@ -78,17 +78,7 @@ ], "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" + "react-dom" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" From 5f8223c33eb1016b08152b81ae8b155ed03d2a81 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 7 Nov 2023 13:08:00 +0100 Subject: [PATCH 21/22] fix ts-dedent missing from svelte renderer --- code/renderers/svelte/package.json | 1 + code/yarn.lock | 1 + 2 files changed, 2 insertions(+) diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index ef0de3565a4e..dd810a1b258b 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -59,6 +59,7 @@ "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", "sveltedoc-parser": "^4.2.1", + "ts-dedent": "^2.0.0", "type-fest": "~2.19" }, "devDependencies": { diff --git a/code/yarn.lock b/code/yarn.lock index d6b7debf039a..b8bbba8aa053 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -8088,6 +8088,7 @@ __metadata: svelte: "npm:^4.0.0" svelte-check: "npm:3.4.6" sveltedoc-parser: "npm:^4.2.1" + ts-dedent: "npm:^2.0.0" type-fest: "npm:~2.19" typescript: "npm:^5.0.4" peerDependencies: From 214a6f845fcb3af4e07839ff9288c71f5d6a0e02 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 8 Nov 2023 12:15:05 +0100 Subject: [PATCH 22/22] add import entry to globals exports --- code/lib/preview/package.json | 1 + code/ui/manager/package.json | 1 + 2 files changed, 2 insertions(+) diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 269278ba86a1..8c8102acbd1e 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -27,6 +27,7 @@ }, "./globals": { "types": "./dist/globals.d.ts", + "import": "./dist/globals.js", "require": "./dist/globals.js" }, "./package.json": "./package.json" diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index de7f1eb1b956..f03882fc6411 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -34,6 +34,7 @@ }, "./globals": { "types": "./dist/globals.d.ts", + "import": "./dist/globals.js", "require": "./dist/globals.js" }, "./paths": "./paths.js",