Fix vue 2.x selection logic (#508)

Fixes: #506 This corrects the vue 2.6 / 2.7 logic, and also finds a slightly-better way to handle module resolution from within `builder-vite` when running examples. Instead of adding dev dependencies into the builder, this sets a `node_path` environment variable, so that the node_modules of the example is used as a global lookup from within the builder.
storybookjs · Oct 6, 2022 · e348165 · e348165
1 parent 858b856
commit e348165
Show file tree

Hide file tree

Showing 14 changed files with 370 additions and 844 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": "start-storybook -p 6005",
-    "build-storybook": "build-storybook",
+    "storybook": "NODE_PATH=./node_modules start-storybook -p 6005",
+    "build-storybook": "NODE_PATH=./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/preact/package.json b/examples/preact/package.json
@@ -5,8 +5,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "storybook": "start-storybook --port 6004",
-    "build-storybook": "build-storybook",
+    "storybook": "NODE_PATH=./node_modules start-storybook --port 6004",
+    "build-storybook": "NODE_PATH=./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/react-18/package.json b/examples/react-18/package.json
@@ -5,8 +5,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "storybook": "start-storybook --port 6018",
-    "build-storybook": "build-storybook",
+    "storybook": "NODE_PATH=./node_modules start-storybook --port 6018",
+    "build-storybook": "NODE_PATH=./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"

diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json
@@ -5,8 +5,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "storybook": "start-storybook --port 6007",
-    "build-storybook": "build-storybook",
+    "storybook": "NODE_PATH=./node_modules start-storybook --port 6007",
+    "build-storybook": "NODE_PATH=./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/package.json b/examples/react/package.json
@@ -5,8 +5,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "storybook": "start-storybook --port 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "NODE_PATH=./node_modules start-storybook --port 6006",
+    "build-storybook": "NODE_PATH=./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/svelte/package.json b/examples/svelte/package.json
@@ -5,8 +5,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "storybook": "start-storybook --port 6008",
-    "build-storybook": "build-storybook",
+    "storybook": "NODE_PATH=./node_modules start-storybook --port 6008",
+    "build-storybook": "NODE_PATH=./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/vue2.6/package.json b/examples/vue2.6/package.json
@@ -5,8 +5,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "storybook": "start-storybook --port 6011",
-    "build-storybook": "build-storybook",
+    "storybook": "NODE_PATH=./node_modules start-storybook --port 6011",
+    "build-storybook": "NODE_PATH=./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"
@@ -31,7 +31,7 @@
     "vite": "^3.0.0-beta.9",
     "vite-plugin-vue2": "^2.0.2",
     "vue-loader": "^15.0.0",
-    "vue-template-compiler": "^2.7.10",
+    "vue-template-compiler": "2.6.x",
     "wait-on": "^6.0.1"
   }
 }
diff --git a/examples/vue2.6/yarn.lock b/examples/vue2.6/yarn.lock
@@ -8260,7 +8260,7 @@ __metadata:
     vite-plugin-vue2: ^2.0.2
     vue: 2.6.x
     vue-loader: ^15.0.0
-    vue-template-compiler: ^2.7.10
+    vue-template-compiler: 2.6.x
     wait-on: ^6.0.1
   languageName: unknown
   linkType: soft
@@ -9571,7 +9571,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"he@npm:^1.2.0":
+"he@npm:^1.1.0, he@npm:^1.2.0":
   version: 1.2.0
   resolution: "he@npm:1.2.0"
   bin:
@@ -17990,13 +17990,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-template-compiler@npm:^2.7.10":
-  version: 2.7.10
-  resolution: "vue-template-compiler@npm:2.7.10"
+"vue-template-compiler@npm:2.6.x":
+  version: 2.6.14
+  resolution: "vue-template-compiler@npm:2.6.14"
   dependencies:
     de-indent: ^1.0.2
-    he: ^1.2.0
-  checksum: 52e4324d93ea5ecf6875c94eae99d3d4197cfb13538b6c2f5020df1776fb277e329325091c41da596b3cf1c7dabd56f50e2a538e2fc3d5ae23438d08471fdc8d
+    he: ^1.1.0
+  checksum: 0d03f804ac97e26629c78219929596cfd98f522e1f13b16dd42f13e3fff09b85fb8252ef3486e9d62ca7993f576386f587e760df0506230fa87141fdac8275ea
   languageName: node
   linkType: hard
 

diff --git a/examples/vue2.7/package.json b/examples/vue2.7/package.json
@@ -5,8 +5,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "storybook": "start-storybook --port 6012",
-    "build-storybook": "build-storybook",
+    "storybook": "NODE_PATH=./node_modules start-storybook --port 6012",
+    "build-storybook": "NODE_PATH=./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/vue3/package.json b/examples/vue3/package.json
@@ -5,8 +5,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "storybook": "start-storybook --port 6009",
-    "build-storybook": "build-storybook",
+    "storybook": "NODE_PATH=./node_modules start-storybook --port 6009",
+    "build-storybook": "NODE_PATH=./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/workspaces/package.json b/examples/workspaces/package.json
@@ -5,8 +5,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "storybook": "yarn workspace example-workspaces-catalog run storybook --port 6010",
-    "build-storybook": "yarn workspace example-workspaces-catalog run build-storybook",
+    "storybook": "NODE_PATH=./node_modules yarn workspace example-workspaces-catalog run storybook --port 6010",
+    "build-storybook": "NODE_PATH=./node_modules yarn workspace example-workspaces-catalog run build-storybook",
     "preview-storybook": "http-server packages/catalog/storybook-static --port 6010 --silent",
     "test": "wait-on tcp:6010 && test-storybook --url 'http://localhost:6010' --config-dir packages/catalog/.storybook",
     "test-ci": "run-p --race test preview-storybook"

diff --git a/packages/builder-vite/package.json b/packages/builder-vite/package.json
@@ -41,7 +41,6 @@
     "sveltedoc-parser": "^4.2.1"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.4.0",
     "@storybook/addon-svelte-csf": "^2.0.7",
     "@storybook/client-api": "^6.5.12",
     "@storybook/mdx2-csf": "^0.0.3",
@@ -50,20 +49,15 @@
     "@types/node": "^17.0.23",
     "@typescript-eslint/eslint-plugin": "^5.38.0",
     "@typescript-eslint/parser": "^5.38.0",
-    "@vitejs/plugin-vue": "^3.1.0",
-    "@vitejs/plugin-vue2": "^2.0.0",
     "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-only-warn": "^1.0.3",
     "eslint-plugin-storybook": "^0.6.4",
-    "preact": "^10.11.0",
     "prettier": "^2.7.1",
     "svelte": "^3.50.1",
     "typescript": "^4.8.3",
     "vite": "^3.1.0-beta.1",
-    "vite-plugin-vue2": "^2.0.2",
-    "vue-docgen-api": "^4.40.0",
-    "vue-template-compiler": "^2.7.10"
+    "vue-docgen-api": "^4.40.0"
   },
   "peerDependencies": {
     "@storybook/mdx2-csf": "^0.0.3",

diff --git a/packages/builder-vite/vite-config.ts b/packages/builder-vite/vite-config.ts
@@ -85,17 +85,17 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig
 
   if (framework === 'vue') {
     const pkgJson = readPackageJson(root);
-    const vueVer = pkgJson && (pkgJson?.dependencies?.vue ?? pkgJson?.devDependencies?.vue);
-    // Default to 2.7, but check it package.json has a version that isn't 2.7
-    const is27 = !vueVer || semver.satisfies('2.7.0', vueVer);
+    const vueVer: string | false | undefined = pkgJson && (pkgJson?.dependencies?.vue ?? pkgJson?.devDependencies?.vue);
+    // Default to 2.7, but check if package.json has a version that is less than 2.7
+    const is26 = vueVer && semver.gtr('2.7.0', vueVer);
     try {
-      const vuePlugin = is27 ? require('@vitejs/plugin-vue2') : require('vite-plugin-vue2').createVuePlugin;
+      const vuePlugin = is26 ? require('vite-plugin-vue2').createVuePlugin : require('@vitejs/plugin-vue2');
       plugins.push(vuePlugin());
     } catch (err) {
       if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {
         throw new Error(`
           @storybook/builder-vite requires ${
-            is27 ? '@vitejs/plugin-vue2' : 'vite-plugin-vue2'
+            is26 ? 'vite-plugin-vue2' : '@vitejs/plugin-vue2'
           } to be installed when using @storybook/vue.
           Please install it and start storybook again.
         `);