From 4d49af67e795330248c6967741eafb6c5f0cc6cf Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Mon, 6 Feb 2023 19:03:21 -0500 Subject: [PATCH] Allow the use of @vitejs/plugin-react-swc (#552) Fixes https://github.com/storybookjs/builder-vite/issues/551 This will first look for `@vitejs/plugin-react`, then `@vitejs/plugin-react-swc`. It seems like the SWC version might not work with MDX stories, though. I updated the react-18 example to use it, and the intro story doesn't load. I don't think that should necessarily block this PR though. * Allow the use of @vitejs/plugin-react-swc * Use react-plugin-swc in react-18 example * Fix NODE_PATH in all examples * Fix peer dependencies * Fix update-examples script --- examples/lit-ts/package.json | 4 +- examples/lit-ts/yarn.lock | 5 + examples/preact/package.json | 4 +- examples/preact/yarn.lock | 5 + examples/react-18/README.md | 2 + examples/react-18/package.json | 6 +- examples/react-18/yarn.lock | 163 ++++++++++++++++++++------- examples/react-ts/package.json | 4 +- examples/react-ts/yarn.lock | 5 + examples/react/package.json | 4 +- examples/react/yarn.lock | 5 + examples/svelte/package.json | 4 +- examples/svelte/yarn.lock | 5 + examples/vue2.6/package.json | 4 +- examples/vue2.6/yarn.lock | 5 + examples/vue2.7/package.json | 4 +- examples/vue2.7/yarn.lock | 5 + examples/vue3/package.json | 4 +- examples/vue3/yarn.lock | 5 + examples/workspaces/yarn.lock | 5 + packages/builder-vite/package.json | 9 +- packages/builder-vite/vite-config.ts | 20 +++- packages/builder-vite/yarn.lock | 5 + 23 files changed, 216 insertions(+), 66 deletions(-) diff --git a/examples/lit-ts/package.json b/examples/lit-ts/package.json index c4d774ce..56cb8a1a 100644 --- a/examples/lit-ts/package.json +++ b/examples/lit-ts/package.json @@ -8,8 +8,8 @@ "lit": "^2.2.2" }, "scripts": { - "storybook": "NODE_PATH=./node_modules start-storybook -p 6005", - "build-storybook": "NODE_PATH=./node_modules build-storybook", + "storybook": "NODE_PATH=$(pwd)/node_modules start-storybook -p 6005", + "build-storybook": "NODE_PATH=$(pwd)/node_modules build-storybook", "preview-storybook": "http-server storybook-static --port 6005 --silent", "test": "wait-on tcp:6005 && test-storybook --stories-json --url 'http://localhost:6005'", "test-ci": "run-p --race test preview-storybook" diff --git a/examples/lit-ts/yarn.lock b/examples/lit-ts/yarn.lock index 2974e29b..76150e6f 100644 --- a/examples/lit-ts/yarn.lock +++ b/examples/lit-ts/yarn.lock @@ -2748,6 +2748,7 @@ __metadata: "@storybook/mdx2-csf": ">=1.0.0-next.0" "@sveltejs/vite-plugin-svelte": ^2.0.0 "@vitejs/plugin-react": ^3.0.0 + "@vitejs/plugin-react-swc": ^3.0.0 "@vitejs/plugin-vue": ^4.0.0 vite: ">= 4.0.0" vue-docgen-api: ^4.40.0 @@ -2756,6 +2757,10 @@ __metadata: optional: true "@sveltejs/vite-plugin-svelte": optional: true + "@vitejs/plugin-react": + optional: true + "@vitejs/plugin-react-swc": + optional: true "@vitejs/plugin-vue": optional: true vue-docgen-api: diff --git a/examples/preact/package.json b/examples/preact/package.json index 27b2c4c9..5b0642b7 100644 --- a/examples/preact/package.json +++ b/examples/preact/package.json @@ -5,8 +5,8 @@ "description": "", "main": "index.js", "scripts": { - "storybook": "NODE_PATH=./node_modules start-storybook --port 6004", - "build-storybook": "NODE_PATH=./node_modules build-storybook", + "storybook": "NODE_PATH=$(pwd)/node_modules start-storybook --port 6004", + "build-storybook": "NODE_PATH=$(pwd)/node_modules build-storybook", "preview-storybook": "http-server storybook-static --port 6004 --silent", "test": "wait-on tcp:6004 && test-storybook --url 'http://localhost:6004'", "test-ci": "run-p --race test preview-storybook" diff --git a/examples/preact/yarn.lock b/examples/preact/yarn.lock index 8e377bc9..13fb147d 100644 --- a/examples/preact/yarn.lock +++ b/examples/preact/yarn.lock @@ -2771,6 +2771,7 @@ __metadata: "@storybook/mdx2-csf": ">=1.0.0-next.0" "@sveltejs/vite-plugin-svelte": ^2.0.0 "@vitejs/plugin-react": ^3.0.0 + "@vitejs/plugin-react-swc": ^3.0.0 "@vitejs/plugin-vue": ^4.0.0 vite: ">= 4.0.0" vue-docgen-api: ^4.40.0 @@ -2779,6 +2780,10 @@ __metadata: optional: true "@sveltejs/vite-plugin-svelte": optional: true + "@vitejs/plugin-react": + optional: true + "@vitejs/plugin-react-swc": + optional: true "@vitejs/plugin-vue": optional: true vue-docgen-api: diff --git a/examples/react-18/README.md b/examples/react-18/README.md index 5a294db3..3dd80dfa 100644 --- a/examples/react-18/README.md +++ b/examples/react-18/README.md @@ -3,3 +3,5 @@ This example demonstrates storybook in a React v18 project. It also has `storyStoreV7` enabled, to demonstrate the use of the on-demand story store. + +Furthermore, it's using @vitejs/react-plugin-swc diff --git a/examples/react-18/package.json b/examples/react-18/package.json index 6e015fab..6bae1b33 100644 --- a/examples/react-18/package.json +++ b/examples/react-18/package.json @@ -5,8 +5,8 @@ "description": "", "main": "index.js", "scripts": { - "storybook": "NODE_PATH=./node_modules start-storybook --port 6018", - "build-storybook": "NODE_PATH=./node_modules build-storybook", + "storybook": "NODE_PATH=$(pwd)/node_modules start-storybook --port 6018", + "build-storybook": "NODE_PATH=$(pwd)/node_modules build-storybook", "preview-storybook": "http-server storybook-static --port 6018 --silent", "test": "wait-on tcp:6018 && test-storybook --url 'http://localhost:6018'", "test-ci": "run-p --race test preview-storybook" @@ -24,7 +24,7 @@ "@storybook/builder-vite": "portal:../../packages/builder-vite", "@storybook/react": "^6.5.9", "@storybook/test-runner": "0.1.0", - "@vitejs/plugin-react": "^3.0.0", + "@vitejs/plugin-react-swc": "^3.1.0", "http-server": "^14.1.0", "jest": "^27.5.1", "npm-run-all": "^4.1.5", diff --git a/examples/react-18/yarn.lock b/examples/react-18/yarn.lock index b767ba73..6944078f 100644 --- a/examples/react-18/yarn.lock +++ b/examples/react-18/yarn.lock @@ -55,7 +55,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.1.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.20.7, @babel/core@npm:^7.7.2, @babel/core@npm:^7.7.5, @babel/core@npm:^7.8.0": +"@babel/core@npm:^7.1.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.7.2, @babel/core@npm:^7.7.5, @babel/core@npm:^7.8.0": version: 7.20.12 resolution: "@babel/core@npm:7.20.12" dependencies: @@ -1215,28 +1215,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-jsx-self@npm:^7.18.6": - version: 7.18.6 - resolution: "@babel/plugin-transform-react-jsx-self@npm:7.18.6" - dependencies: - "@babel/helper-plugin-utils": ^7.18.6 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 7d24e29c63869bb23495c163a92678c1c3341ecf74db420a20c6d3db74cbf5000fe908943f6106494e7225c0168945c150e528162274fd8fc7721966ad26930a - languageName: node - linkType: hard - -"@babel/plugin-transform-react-jsx-source@npm:^7.19.6": - version: 7.19.6 - resolution: "@babel/plugin-transform-react-jsx-source@npm:7.19.6" - dependencies: - "@babel/helper-plugin-utils": ^7.19.0 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 1e9e29a4efc5b79840bd4f68e404f5ab7765ce48c7bd22f12f2b185f9c782c66933bdf54a1b21879e4e56e6b50b4e88aca82789ecb1f61123af6dfa9ab16c555 - languageName: node - linkType: hard - "@babel/plugin-transform-react-jsx@npm:^7.12.12, @babel/plugin-transform-react-jsx@npm:^7.18.6": version: 7.20.13 resolution: "@babel/plugin-transform-react-jsx@npm:7.20.13" @@ -2840,6 +2818,7 @@ __metadata: "@storybook/mdx2-csf": ">=1.0.0-next.0" "@sveltejs/vite-plugin-svelte": ^2.0.0 "@vitejs/plugin-react": ^3.0.0 + "@vitejs/plugin-react-swc": ^3.0.0 "@vitejs/plugin-vue": ^4.0.0 vite: ">= 4.0.0" vue-docgen-api: ^4.40.0 @@ -2848,6 +2827,10 @@ __metadata: optional: true "@sveltejs/vite-plugin-svelte": optional: true + "@vitejs/plugin-react": + optional: true + "@vitejs/plugin-react-swc": + optional: true "@vitejs/plugin-vue": optional: true vue-docgen-api: @@ -3628,6 +3611,115 @@ __metadata: languageName: node linkType: hard +"@swc/core-darwin-arm64@npm:1.3.32": + version: 1.3.32 + resolution: "@swc/core-darwin-arm64@npm:1.3.32" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@swc/core-darwin-x64@npm:1.3.32": + version: 1.3.32 + resolution: "@swc/core-darwin-x64@npm:1.3.32" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@swc/core-linux-arm-gnueabihf@npm:1.3.32": + version: 1.3.32 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.32" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + +"@swc/core-linux-arm64-gnu@npm:1.3.32": + version: 1.3.32 + resolution: "@swc/core-linux-arm64-gnu@npm:1.3.32" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + +"@swc/core-linux-arm64-musl@npm:1.3.32": + version: 1.3.32 + resolution: "@swc/core-linux-arm64-musl@npm:1.3.32" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + +"@swc/core-linux-x64-gnu@npm:1.3.32": + version: 1.3.32 + resolution: "@swc/core-linux-x64-gnu@npm:1.3.32" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + +"@swc/core-linux-x64-musl@npm:1.3.32": + version: 1.3.32 + resolution: "@swc/core-linux-x64-musl@npm:1.3.32" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + +"@swc/core-win32-arm64-msvc@npm:1.3.32": + version: 1.3.32 + resolution: "@swc/core-win32-arm64-msvc@npm:1.3.32" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"@swc/core-win32-ia32-msvc@npm:1.3.32": + version: 1.3.32 + resolution: "@swc/core-win32-ia32-msvc@npm:1.3.32" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@swc/core-win32-x64-msvc@npm:1.3.32": + version: 1.3.32 + resolution: "@swc/core-win32-x64-msvc@npm:1.3.32" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + +"@swc/core@npm:^1.3.30": + version: 1.3.32 + resolution: "@swc/core@npm:1.3.32" + dependencies: + "@swc/core-darwin-arm64": 1.3.32 + "@swc/core-darwin-x64": 1.3.32 + "@swc/core-linux-arm-gnueabihf": 1.3.32 + "@swc/core-linux-arm64-gnu": 1.3.32 + "@swc/core-linux-arm64-musl": 1.3.32 + "@swc/core-linux-x64-gnu": 1.3.32 + "@swc/core-linux-x64-musl": 1.3.32 + "@swc/core-win32-arm64-msvc": 1.3.32 + "@swc/core-win32-ia32-msvc": 1.3.32 + "@swc/core-win32-x64-msvc": 1.3.32 + dependenciesMeta: + "@swc/core-darwin-arm64": + optional: true + "@swc/core-darwin-x64": + optional: true + "@swc/core-linux-arm-gnueabihf": + optional: true + "@swc/core-linux-arm64-gnu": + optional: true + "@swc/core-linux-arm64-musl": + optional: true + "@swc/core-linux-x64-gnu": + optional: true + "@swc/core-linux-x64-musl": + optional: true + "@swc/core-win32-arm64-msvc": + optional: true + "@swc/core-win32-ia32-msvc": + optional: true + "@swc/core-win32-x64-msvc": + optional: true + checksum: 61d3eeee89b2dec8d128f63051cb8808b74aea42afc444a0e6477a763b145b5a7c511eab14f5ab0a6e2fa486a99316b0428cb5e02cb11dd65003b760caf85c6e + languageName: node + linkType: hard + "@tootallnate/once@npm:1": version: 1.1.2 resolution: "@tootallnate/once@npm:1.1.2" @@ -4009,18 +4101,14 @@ __metadata: languageName: node linkType: hard -"@vitejs/plugin-react@npm:^3.0.0": - version: 3.0.1 - resolution: "@vitejs/plugin-react@npm:3.0.1" +"@vitejs/plugin-react-swc@npm:^3.1.0": + version: 3.1.0 + resolution: "@vitejs/plugin-react-swc@npm:3.1.0" dependencies: - "@babel/core": ^7.20.7 - "@babel/plugin-transform-react-jsx-self": ^7.18.6 - "@babel/plugin-transform-react-jsx-source": ^7.19.6 - magic-string: ^0.27.0 - react-refresh: ^0.14.0 + "@swc/core": ^1.3.30 peerDependencies: - vite: ^4.0.0 - checksum: fde9dd4d3a3387d3a93ea164f58b71a40786842d66b072e75b10ef3c1c1f30cbe545367c4adb980d15f310a70c3ca24f8bf36ea5e896d0fcae0adc926172ca58 + vite: ^4 + checksum: 903fef0b133f122a76f048bdb398db45b35e11e33fb8a03f00beb0ceba9c6bacfbee32397910f0e985e23b7785d70aafb4a3a21d00c2991aacd57262c24b55bd languageName: node linkType: hard @@ -7648,7 +7736,7 @@ __metadata: "@storybook/builder-vite": "portal:../../packages/builder-vite" "@storybook/react": ^6.5.9 "@storybook/test-runner": 0.1.0 - "@vitejs/plugin-react": ^3.0.0 + "@vitejs/plugin-react-swc": ^3.1.0 http-server: ^14.1.0 jest: ^27.5.1 npm-run-all: ^4.1.5 @@ -13445,13 +13533,6 @@ __metadata: languageName: node linkType: hard -"react-refresh@npm:^0.14.0": - version: 0.14.0 - resolution: "react-refresh@npm:0.14.0" - checksum: dc69fa8c993df512f42dd0f1b604978ae89bd747c0ed5ec595c0cc50d535fb2696619ccd98ae28775cc01d0a7c146a532f0f7fb81dc22e1977c242a4912312f4 - languageName: node - linkType: hard - "react-sizeme@npm:^3.0.1": version: 3.0.2 resolution: "react-sizeme@npm:3.0.2" diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json index 8d063674..f2ffae04 100644 --- a/examples/react-ts/package.json +++ b/examples/react-ts/package.json @@ -5,8 +5,8 @@ "description": "", "main": "index.js", "scripts": { - "storybook": "NODE_PATH=./node_modules start-storybook --port 6007", - "build-storybook": "NODE_PATH=./node_modules build-storybook", + "storybook": "NODE_PATH=$(pwd)/node_modules start-storybook --port 6007", + "build-storybook": "NODE_PATH=$(pwd)/node_modules build-storybook", "preview-storybook": "http-server storybook-static --port 6007 --silent", "test": "wait-on tcp:6007 && test-storybook --url 'http://localhost:6007'", "test-ci": "run-p --race test preview-storybook" diff --git a/examples/react-ts/yarn.lock b/examples/react-ts/yarn.lock index c5569acd..29aba8c5 100644 --- a/examples/react-ts/yarn.lock +++ b/examples/react-ts/yarn.lock @@ -3006,6 +3006,7 @@ __metadata: "@storybook/mdx2-csf": ">=1.0.0-next.0" "@sveltejs/vite-plugin-svelte": ^2.0.0 "@vitejs/plugin-react": ^3.0.0 + "@vitejs/plugin-react-swc": ^3.0.0 "@vitejs/plugin-vue": ^4.0.0 vite: ">= 4.0.0" vue-docgen-api: ^4.40.0 @@ -3014,6 +3015,10 @@ __metadata: optional: true "@sveltejs/vite-plugin-svelte": optional: true + "@vitejs/plugin-react": + optional: true + "@vitejs/plugin-react-swc": + optional: true "@vitejs/plugin-vue": optional: true vue-docgen-api: diff --git a/examples/react/package.json b/examples/react/package.json index 1235cbe0..75568b16 100644 --- a/examples/react/package.json +++ b/examples/react/package.json @@ -5,8 +5,8 @@ "description": "", "main": "index.js", "scripts": { - "storybook": "NODE_PATH=./node_modules start-storybook --port 6006", - "build-storybook": "NODE_PATH=./node_modules build-storybook", + "storybook": "NODE_PATH=$(pwd)/node_modules start-storybook --port 6006", + "build-storybook": "NODE_PATH=$(pwd)/node_modules build-storybook", "preview-storybook": "http-server storybook-static --port 6006 --silent", "test": "wait-on tcp:6006 && test-storybook --url 'http://localhost:6006'", "test-ci": "run-p --race test preview-storybook" diff --git a/examples/react/yarn.lock b/examples/react/yarn.lock index 03d194a5..5018355c 100644 --- a/examples/react/yarn.lock +++ b/examples/react/yarn.lock @@ -2840,6 +2840,7 @@ __metadata: "@storybook/mdx2-csf": ">=1.0.0-next.0" "@sveltejs/vite-plugin-svelte": ^2.0.0 "@vitejs/plugin-react": ^3.0.0 + "@vitejs/plugin-react-swc": ^3.0.0 "@vitejs/plugin-vue": ^4.0.0 vite: ">= 4.0.0" vue-docgen-api: ^4.40.0 @@ -2848,6 +2849,10 @@ __metadata: optional: true "@sveltejs/vite-plugin-svelte": optional: true + "@vitejs/plugin-react": + optional: true + "@vitejs/plugin-react-swc": + optional: true "@vitejs/plugin-vue": optional: true vue-docgen-api: diff --git a/examples/svelte/package.json b/examples/svelte/package.json index 238b6b84..30786192 100644 --- a/examples/svelte/package.json +++ b/examples/svelte/package.json @@ -5,8 +5,8 @@ "description": "", "main": "index.js", "scripts": { - "storybook": "NODE_PATH=./node_modules start-storybook --port 6008", - "build-storybook": "NODE_PATH=./node_modules build-storybook", + "storybook": "NODE_PATH=$(pwd)/node_modules start-storybook --port 6008", + "build-storybook": "NODE_PATH=$(pwd)/node_modules build-storybook", "preview-storybook": "http-server storybook-static --port 6008 --silent", "test": "wait-on tcp:6008 && test-storybook --url 'http://localhost:6008'", "test-ci": "echo 'tests do not work with svelte yet'" diff --git a/examples/svelte/yarn.lock b/examples/svelte/yarn.lock index 3944cae1..e33d5c66 100644 --- a/examples/svelte/yarn.lock +++ b/examples/svelte/yarn.lock @@ -2757,6 +2757,7 @@ __metadata: "@storybook/mdx2-csf": ">=1.0.0-next.0" "@sveltejs/vite-plugin-svelte": ^2.0.0 "@vitejs/plugin-react": ^3.0.0 + "@vitejs/plugin-react-swc": ^3.0.0 "@vitejs/plugin-vue": ^4.0.0 vite: ">= 4.0.0" vue-docgen-api: ^4.40.0 @@ -2765,6 +2766,10 @@ __metadata: optional: true "@sveltejs/vite-plugin-svelte": optional: true + "@vitejs/plugin-react": + optional: true + "@vitejs/plugin-react-swc": + optional: true "@vitejs/plugin-vue": optional: true vue-docgen-api: diff --git a/examples/vue2.6/package.json b/examples/vue2.6/package.json index 942dffbc..fe661858 100644 --- a/examples/vue2.6/package.json +++ b/examples/vue2.6/package.json @@ -5,8 +5,8 @@ "description": "", "main": "index.js", "scripts": { - "storybook": "NODE_PATH=./node_modules start-storybook --port 6011", - "build-storybook": "NODE_PATH=./node_modules build-storybook", + "storybook": "NODE_PATH=$(pwd)/node_modules start-storybook --port 6011", + "build-storybook": "NODE_PATH=$(pwd)/node_modules build-storybook", "preview-storybook": "http-server storybook-static --port 6011 --silent", "test": "wait-on tcp:6011 && test-storybook --url 'http://localhost:6011'", "test-ci": "run-p --race test preview-storybook" diff --git a/examples/vue2.6/yarn.lock b/examples/vue2.6/yarn.lock index 3aec250f..31d0b034 100644 --- a/examples/vue2.6/yarn.lock +++ b/examples/vue2.6/yarn.lock @@ -2705,6 +2705,7 @@ __metadata: "@storybook/mdx2-csf": ">=1.0.0-next.0" "@sveltejs/vite-plugin-svelte": ^2.0.0 "@vitejs/plugin-react": ^3.0.0 + "@vitejs/plugin-react-swc": ^3.0.0 "@vitejs/plugin-vue": ^4.0.0 vite: ">= 4.0.0" vue-docgen-api: ^4.40.0 @@ -2713,6 +2714,10 @@ __metadata: optional: true "@sveltejs/vite-plugin-svelte": optional: true + "@vitejs/plugin-react": + optional: true + "@vitejs/plugin-react-swc": + optional: true "@vitejs/plugin-vue": optional: true vue-docgen-api: diff --git a/examples/vue2.7/package.json b/examples/vue2.7/package.json index 783d4e67..6d83109e 100644 --- a/examples/vue2.7/package.json +++ b/examples/vue2.7/package.json @@ -5,8 +5,8 @@ "description": "", "main": "index.js", "scripts": { - "storybook": "NODE_PATH=./node_modules start-storybook --port 6012", - "build-storybook": "NODE_PATH=./node_modules build-storybook", + "storybook": "NODE_PATH=$(pwd)/node_modules start-storybook --port 6012", + "build-storybook": "NODE_PATH=$(pwd)/node_modules build-storybook", "preview-storybook": "http-server storybook-static --port 6012 --silent", "test": "wait-on tcp:6012 && test-storybook --url 'http://localhost:6012'", "test-ci": "run-p --race test preview-storybook" diff --git a/examples/vue2.7/yarn.lock b/examples/vue2.7/yarn.lock index 7be920e7..93383fac 100644 --- a/examples/vue2.7/yarn.lock +++ b/examples/vue2.7/yarn.lock @@ -2695,6 +2695,7 @@ __metadata: "@storybook/mdx2-csf": ">=1.0.0-next.0" "@sveltejs/vite-plugin-svelte": ^2.0.0 "@vitejs/plugin-react": ^3.0.0 + "@vitejs/plugin-react-swc": ^3.0.0 "@vitejs/plugin-vue": ^4.0.0 vite: ">= 4.0.0" vue-docgen-api: ^4.40.0 @@ -2703,6 +2704,10 @@ __metadata: optional: true "@sveltejs/vite-plugin-svelte": optional: true + "@vitejs/plugin-react": + optional: true + "@vitejs/plugin-react-swc": + optional: true "@vitejs/plugin-vue": optional: true vue-docgen-api: diff --git a/examples/vue3/package.json b/examples/vue3/package.json index 6ee348cd..0586fe51 100644 --- a/examples/vue3/package.json +++ b/examples/vue3/package.json @@ -5,8 +5,8 @@ "description": "", "main": "index.js", "scripts": { - "storybook": "NODE_PATH=./node_modules start-storybook --port 6009", - "build-storybook": "NODE_PATH=./node_modules build-storybook", + "storybook": "NODE_PATH=$(pwd)/node_modules start-storybook --port 6009", + "build-storybook": "NODE_PATH=$(pwd)/node_modules build-storybook", "preview-storybook": "http-server storybook-static --port 6009 --silent", "test": "wait-on tcp:6009 && test-storybook --url 'http://localhost:6009'", "test-ci": "run-p --race test preview-storybook" diff --git a/examples/vue3/yarn.lock b/examples/vue3/yarn.lock index f7ae0989..7a29b248 100644 --- a/examples/vue3/yarn.lock +++ b/examples/vue3/yarn.lock @@ -2975,6 +2975,7 @@ __metadata: "@storybook/mdx2-csf": ">=1.0.0-next.0" "@sveltejs/vite-plugin-svelte": ^2.0.0 "@vitejs/plugin-react": ^3.0.0 + "@vitejs/plugin-react-swc": ^3.0.0 "@vitejs/plugin-vue": ^4.0.0 vite: ">= 4.0.0" vue-docgen-api: ^4.40.0 @@ -2983,6 +2984,10 @@ __metadata: optional: true "@sveltejs/vite-plugin-svelte": optional: true + "@vitejs/plugin-react": + optional: true + "@vitejs/plugin-react-swc": + optional: true "@vitejs/plugin-vue": optional: true vue-docgen-api: diff --git a/examples/workspaces/yarn.lock b/examples/workspaces/yarn.lock index d452bb9f..0437ca92 100644 --- a/examples/workspaces/yarn.lock +++ b/examples/workspaces/yarn.lock @@ -2840,6 +2840,7 @@ __metadata: "@storybook/mdx2-csf": ">=1.0.0-next.0" "@sveltejs/vite-plugin-svelte": ^2.0.0 "@vitejs/plugin-react": ^3.0.0 + "@vitejs/plugin-react-swc": ^3.0.0 "@vitejs/plugin-vue": ^4.0.0 vite: ">= 4.0.0" vue-docgen-api: ^4.40.0 @@ -2848,6 +2849,10 @@ __metadata: optional: true "@sveltejs/vite-plugin-svelte": optional: true + "@vitejs/plugin-react": + optional: true + "@vitejs/plugin-react-swc": + optional: true "@vitejs/plugin-vue": optional: true vue-docgen-api: diff --git a/packages/builder-vite/package.json b/packages/builder-vite/package.json index 6a4dfec4..24bced2c 100644 --- a/packages/builder-vite/package.json +++ b/packages/builder-vite/package.json @@ -22,7 +22,7 @@ "lint-ci": "yarn lint-ci:prettier && yarn lint-ci:eslint", "lint-ci:prettier": "prettier . --check", "lint-ci:eslint": "eslint \"**/*.{ts,tsx,js,jsx,mjs,cjs}\" --max-warnings=0", - "update-examples": "cd ../../examples/lit-ts && yarn && cd ../preact && yarn && cd ../react && cd ../react-18 && yarn && cd ../react-ts && yarn && cd ../svelte && yarn && cd ../vue2.6 && yarn && cd ../vue2.7 && yarn && cd ../vue3 && yarn && cd ../workspaces && yarn" + "update-examples": "cd ../../examples/lit-ts && yarn && cd ../preact && yarn && cd ../react && yarn && cd ../react-18 && yarn && cd ../react-ts && yarn && cd ../svelte && yarn && cd ../vue2.6 && yarn && cd ../vue2.7 && yarn && cd ../vue3 && yarn && cd ../workspaces && yarn" }, "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "0.2.1", @@ -63,6 +63,7 @@ "@storybook/mdx2-csf": ">=1.0.0-next.0", "@sveltejs/vite-plugin-svelte": "^2.0.0", "@vitejs/plugin-react": "^3.0.0", + "@vitejs/plugin-react-swc": "^3.0.0", "@vitejs/plugin-vue": "^4.0.0", "vite": ">= 4.0.0", "vue-docgen-api": "^4.40.0" @@ -74,6 +75,12 @@ "@sveltejs/vite-plugin-svelte": { "optional": true }, + "@vitejs/plugin-react": { + "optional": true + }, + "@vitejs/plugin-react-swc": { + "optional": true + }, "@vitejs/plugin-vue": { "optional": true }, diff --git a/packages/builder-vite/vite-config.ts b/packages/builder-vite/vite-config.ts index 487f2537..39749d7e 100644 --- a/packages/builder-vite/vite-config.ts +++ b/packages/builder-vite/vite-config.ts @@ -207,17 +207,27 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig } if (framework === 'react') { + // First, look for plugin-react try { const reactPlugin = require('@vitejs/plugin-react'); plugins.push(reactPlugin()); } catch (err) { if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') { - throw new Error(` - @storybook/builder-vite requires @vitejs/plugin-react to be installed when using @storybook/react. - Please install it and start storybook again. - `); + // Next, check if plugin-react-swc is installed, and if so, use that + try { + const reactSWCPlugin = require('@vitejs/plugin-react-swc'); + plugins.push(reactSWCPlugin()); + } catch (err2) { + if ((err2 as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') { + throw new Error( + '@storybook/builder-vite requires @vitejs/plugin-react or @vitejs/plugin-react-swc ' + + 'to be installed when using @storybook/react. \n' + + 'Please install one of them and start storybook again.' + ); + } + throw err; + } } - throw err; } const { reactDocgen: reactDocgenOption, reactDocgenTypescriptOptions } = await presets.apply( diff --git a/packages/builder-vite/yarn.lock b/packages/builder-vite/yarn.lock index facf6a06..164bccb2 100644 --- a/packages/builder-vite/yarn.lock +++ b/packages/builder-vite/yarn.lock @@ -2014,6 +2014,7 @@ __metadata: "@storybook/mdx2-csf": ">=1.0.0-next.0" "@sveltejs/vite-plugin-svelte": ^2.0.0 "@vitejs/plugin-react": ^3.0.0 + "@vitejs/plugin-react-swc": ^3.0.0 "@vitejs/plugin-vue": ^4.0.0 vite: ">= 4.0.0" vue-docgen-api: ^4.40.0 @@ -2022,6 +2023,10 @@ __metadata: optional: true "@sveltejs/vite-plugin-svelte": optional: true + "@vitejs/plugin-react": + optional: true + "@vitejs/plugin-react-swc": + optional: true "@vitejs/plugin-vue": optional: true vue-docgen-api: