Allow the use of @vitejs/plugin-react-swc (#552)

Fixes #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
storybookjs · Feb 7, 2023 · 4d49af6 · 4d49af6
1 parent ed9cc3d
commit 4d49af6
Show file tree

Hide file tree

Showing 23 changed files with 216 additions and 66 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: