Skip to content

Commit e348165

Browse files
IanVSIanVS
authored
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.
1 parent 858b856 commit e348165

File tree

14 files changed

+370
-844
lines changed

14 files changed

+370
-844
lines changed

‎examples/lit-ts/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
"lit": "^2.2.2"
99
},
1010
"scripts": {
11-
"storybook": "start-storybook -p 6005",
12-
"build-storybook": "build-storybook",
11+
"storybook": "NODE_PATH=./node_modules start-storybook -p 6005",
12+
"build-storybook": "NODE_PATH=./node_modules build-storybook",
1313
"preview-storybook": "http-server storybook-static --port 6005 --silent",
1414
"test": "wait-on tcp:6005 && test-storybook --stories-json --url 'http://localhost:6005'",
1515
"test-ci": "run-p --race test preview-storybook"

‎examples/preact/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"description": "",
66
"main": "index.js",
77
"scripts": {
8-
"storybook": "start-storybook --port 6004",
9-
"build-storybook": "build-storybook",
8+
"storybook": "NODE_PATH=./node_modules start-storybook --port 6004",
9+
"build-storybook": "NODE_PATH=./node_modules build-storybook",
1010
"preview-storybook": "http-server storybook-static --port 6004 --silent",
1111
"test": "wait-on tcp:6004 && test-storybook --url 'http://localhost:6004'",
1212
"test-ci": "run-p --race test preview-storybook"

‎examples/react-18/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"description": "",
66
"main": "index.js",
77
"scripts": {
8-
"storybook": "start-storybook --port 6018",
9-
"build-storybook": "build-storybook",
8+
"storybook": "NODE_PATH=./node_modules start-storybook --port 6018",
9+
"build-storybook": "NODE_PATH=./node_modules build-storybook",
1010
"preview-storybook": "http-server storybook-static --port 6018 --silent",
1111
"test": "wait-on tcp:6018 && test-storybook --url 'http://localhost:6018'",
1212
"test-ci": "run-p --race test preview-storybook"

‎examples/react-ts/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"description": "",
66
"main": "index.js",
77
"scripts": {
8-
"storybook": "start-storybook --port 6007",
9-
"build-storybook": "build-storybook",
8+
"storybook": "NODE_PATH=./node_modules start-storybook --port 6007",
9+
"build-storybook": "NODE_PATH=./node_modules build-storybook",
1010
"preview-storybook": "http-server storybook-static --port 6007 --silent",
1111
"test": "wait-on tcp:6007 && test-storybook --url 'http://localhost:6007'",
1212
"test-ci": "run-p --race test preview-storybook"

‎examples/react/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"description": "",
66
"main": "index.js",
77
"scripts": {
8-
"storybook": "start-storybook --port 6006",
9-
"build-storybook": "build-storybook",
8+
"storybook": "NODE_PATH=./node_modules start-storybook --port 6006",
9+
"build-storybook": "NODE_PATH=./node_modules build-storybook",
1010
"preview-storybook": "http-server storybook-static --port 6006 --silent",
1111
"test": "wait-on tcp:6006 && test-storybook --url 'http://localhost:6006'",
1212
"test-ci": "run-p --race test preview-storybook"

‎examples/svelte/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"description": "",
66
"main": "index.js",
77
"scripts": {
8-
"storybook": "start-storybook --port 6008",
9-
"build-storybook": "build-storybook",
8+
"storybook": "NODE_PATH=./node_modules start-storybook --port 6008",
9+
"build-storybook": "NODE_PATH=./node_modules build-storybook",
1010
"preview-storybook": "http-server storybook-static --port 6008 --silent",
1111
"test": "wait-on tcp:6008 && test-storybook --url 'http://localhost:6008'",
1212
"test-ci": "echo 'tests do not work with svelte yet'"

‎examples/vue2.6/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"description": "",
66
"main": "index.js",
77
"scripts": {
8-
"storybook": "start-storybook --port 6011",
9-
"build-storybook": "build-storybook",
8+
"storybook": "NODE_PATH=./node_modules start-storybook --port 6011",
9+
"build-storybook": "NODE_PATH=./node_modules build-storybook",
1010
"preview-storybook": "http-server storybook-static --port 6011 --silent",
1111
"test": "wait-on tcp:6011 && test-storybook --url 'http://localhost:6011'",
1212
"test-ci": "run-p --race test preview-storybook"
@@ -31,7 +31,7 @@
3131
"vite": "^3.0.0-beta.9",
3232
"vite-plugin-vue2": "^2.0.2",
3333
"vue-loader": "^15.0.0",
34-
"vue-template-compiler": "^2.7.10",
34+
"vue-template-compiler": "2.6.x",
3535
"wait-on": "^6.0.1"
3636
}
3737
}

‎examples/vue2.6/yarn.lock

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8260,7 +8260,7 @@ __metadata:
82608260
vite-plugin-vue2: ^2.0.2
82618261
vue: 2.6.x
82628262
vue-loader: ^15.0.0
8263-
vue-template-compiler: ^2.7.10
8263+
vue-template-compiler: 2.6.x
82648264
wait-on: ^6.0.1
82658265
languageName: unknown
82668266
linkType: soft
@@ -9571,7 +9571,7 @@ __metadata:
95719571
languageName: node
95729572
linkType: hard
95739573

9574-
"he@npm:^1.2.0":
9574+
"he@npm:^1.1.0, he@npm:^1.2.0":
95759575
version: 1.2.0
95769576
resolution: "he@npm:1.2.0"
95779577
bin:
@@ -17990,13 +17990,13 @@ __metadata:
1799017990
languageName: node
1799117991
linkType: hard
1799217992

17993-
"vue-template-compiler@npm:^2.7.10":
17994-
version: 2.7.10
17995-
resolution: "vue-template-compiler@npm:2.7.10"
17993+
"vue-template-compiler@npm:2.6.x":
17994+
version: 2.6.14
17995+
resolution: "vue-template-compiler@npm:2.6.14"
1799617996
dependencies:
1799717997
de-indent: ^1.0.2
17998-
he: ^1.2.0
17999-
checksum: 52e4324d93ea5ecf6875c94eae99d3d4197cfb13538b6c2f5020df1776fb277e329325091c41da596b3cf1c7dabd56f50e2a538e2fc3d5ae23438d08471fdc8d
17998+
he: ^1.1.0
17999+
checksum: 0d03f804ac97e26629c78219929596cfd98f522e1f13b16dd42f13e3fff09b85fb8252ef3486e9d62ca7993f576386f587e760df0506230fa87141fdac8275ea
1800018000
languageName: node
1800118001
linkType: hard
1800218002

‎examples/vue2.7/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"description": "",
66
"main": "index.js",
77
"scripts": {
8-
"storybook": "start-storybook --port 6012",
9-
"build-storybook": "build-storybook",
8+
"storybook": "NODE_PATH=./node_modules start-storybook --port 6012",
9+
"build-storybook": "NODE_PATH=./node_modules build-storybook",
1010
"preview-storybook": "http-server storybook-static --port 6012 --silent",
1111
"test": "wait-on tcp:6012 && test-storybook --url 'http://localhost:6012'",
1212
"test-ci": "run-p --race test preview-storybook"

‎examples/vue3/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"description": "",
66
"main": "index.js",
77
"scripts": {
8-
"storybook": "start-storybook --port 6009",
9-
"build-storybook": "build-storybook",
8+
"storybook": "NODE_PATH=./node_modules start-storybook --port 6009",
9+
"build-storybook": "NODE_PATH=./node_modules build-storybook",
1010
"preview-storybook": "http-server storybook-static --port 6009 --silent",
1111
"test": "wait-on tcp:6009 && test-storybook --url 'http://localhost:6009'",
1212
"test-ci": "run-p --race test preview-storybook"

‎examples/workspaces/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"description": "",
66
"main": "index.js",
77
"scripts": {
8-
"storybook": "yarn workspace example-workspaces-catalog run storybook --port 6010",
9-
"build-storybook": "yarn workspace example-workspaces-catalog run build-storybook",
8+
"storybook": "NODE_PATH=./node_modules yarn workspace example-workspaces-catalog run storybook --port 6010",
9+
"build-storybook": "NODE_PATH=./node_modules yarn workspace example-workspaces-catalog run build-storybook",
1010
"preview-storybook": "http-server packages/catalog/storybook-static --port 6010 --silent",
1111
"test": "wait-on tcp:6010 && test-storybook --url 'http://localhost:6010' --config-dir packages/catalog/.storybook",
1212
"test-ci": "run-p --race test preview-storybook"

‎packages/builder-vite/package.json

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@
4141
"sveltedoc-parser": "^4.2.1"
4242
},
4343
"devDependencies": {
44-
"@preact/preset-vite": "^2.4.0",
4544
"@storybook/addon-svelte-csf": "^2.0.7",
4645
"@storybook/client-api": "^6.5.12",
4746
"@storybook/mdx2-csf": "^0.0.3",
@@ -50,20 +49,15 @@
5049
"@types/node": "^17.0.23",
5150
"@typescript-eslint/eslint-plugin": "^5.38.0",
5251
"@typescript-eslint/parser": "^5.38.0",
53-
"@vitejs/plugin-vue": "^3.1.0",
54-
"@vitejs/plugin-vue2": "^2.0.0",
5552
"eslint": "^8.23.1",
5653
"eslint-config-prettier": "^8.5.0",
5754
"eslint-plugin-only-warn": "^1.0.3",
5855
"eslint-plugin-storybook": "^0.6.4",
59-
"preact": "^10.11.0",
6056
"prettier": "^2.7.1",
6157
"svelte": "^3.50.1",
6258
"typescript": "^4.8.3",
6359
"vite": "^3.1.0-beta.1",
64-
"vite-plugin-vue2": "^2.0.2",
65-
"vue-docgen-api": "^4.40.0",
66-
"vue-template-compiler": "^2.7.10"
60+
"vue-docgen-api": "^4.40.0"
6761
},
6862
"peerDependencies": {
6963
"@storybook/mdx2-csf": "^0.0.3",

‎packages/builder-vite/vite-config.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -85,17 +85,17 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig
8585

8686
if (framework === 'vue') {
8787
const pkgJson = readPackageJson(root);
88-
const vueVer = pkgJson && (pkgJson?.dependencies?.vue ?? pkgJson?.devDependencies?.vue);
89-
// Default to 2.7, but check it package.json has a version that isn't 2.7
90-
const is27 = !vueVer || semver.satisfies('2.7.0', vueVer);
88+
const vueVer: string | false | undefined = pkgJson && (pkgJson?.dependencies?.vue ?? pkgJson?.devDependencies?.vue);
89+
// Default to 2.7, but check if package.json has a version that is less than 2.7
90+
const is26 = vueVer && semver.gtr('2.7.0', vueVer);
9191
try {
92-
const vuePlugin = is27 ? require('@vitejs/plugin-vue2') : require('vite-plugin-vue2').createVuePlugin;
92+
const vuePlugin = is26 ? require('vite-plugin-vue2').createVuePlugin : require('@vitejs/plugin-vue2');
9393
plugins.push(vuePlugin());
9494
} catch (err) {
9595
if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {
9696
throw new Error(`
9797
@storybook/builder-vite requires ${
98-
is27 ? '@vitejs/plugin-vue2' : 'vite-plugin-vue2'
98+
is26 ? 'vite-plugin-vue2' : '@vitejs/plugin-vue2'
9999
} to be installed when using @storybook/vue.
100100
Please install it and start storybook again.
101101
`);

0 commit comments

Comments
 (0)