feat: prototype of how vue -> storybook transform can work

tobiasdiez · Sep 28, 2022 · b14378c · b14378c
1 parent 8812b73
commit b14378c
Show file tree

Hide file tree

Showing 8 changed files with 11,317 additions and 2,346 deletions.
diff --git a/examples/vite/.storybook/main.ts b/examples/vite/.storybook/main.ts
@@ -18,7 +18,7 @@ export default {
     "builder": "@storybook/builder-vite"
   },
   "features": {
-    "storyStoreV7": true
+    "storyStoreV7": false
   },
   async viteFinal(config, { configType }) {
     // Inspect result can be found at subroute '/__inspect', e.g. http://127.0.0.1:6006/__inspect/

diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -11,7 +11,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "vue": "^3.2.38"
+    "vue": "^3.2.40"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
@@ -20,16 +20,17 @@
     "@storybook/addon-interactions": "^6.5.12",
     "@storybook/addon-links": "^6.5.12",
     "@storybook/builder-vite": "^0.2.3",
+    "@storybook/jest": "^0.0.10",
     "@storybook/testing-library": "0.0.13",
     "@storybook/vue3": "^6.5.12",
-    "@types/node": "^16.11.56",
-    "@vitejs/plugin-vue": "^3.0.3",
+    "@types/node": "^18.7.23",
+    "@vitejs/plugin-vue": "^3.1.0",
     "@vue/tsconfig": "^0.1.3",
     "babel-loader": "^8.2.5",
     "npm-run-all": "^4.1.5",
-    "typescript": "~4.7.4",
-    "vite": "^3.0.9",
-    "vue-loader": "^16.8.3",
-    "vue-tsc": "^0.40.7"
+    "typescript": "~4.8.4",
+    "vite": "^3.1.4",
+    "vue-loader": "^17.0.0",
+    "vue-tsc": "^0.40.13"
   }
 }
diff --git a/examples/vite/src/components/Button.stories.vue b/examples/vite/src/components/Button.stories.vue
@@ -0,0 +1,5 @@
+<template>
+  <Story>
+    test
+  </Story>
+</template>
diff --git a/package.json b/package.json
@@ -78,22 +78,27 @@
     "test": "vitest"
   },
   "dependencies": {
-    "unplugin": "^0.7.1"
+    "unplugin": "^0.9.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.25.2",
-    "@types/node": "^18.0.1",
+    "@antfu/eslint-config": "^0.27.0",
+    "@types/node": "^18.7.23",
     "bumpp": "^8.2.1",
-    "eslint": "^8.19.0",
+    "eslint": "^8.24.0",
     "esno": "^0.16.3",
-    "fast-glob": "^3.2.11",
-    "nodemon": "^2.0.18",
+    "fast-glob": "^3.2.12",
+    "nodemon": "^2.0.20",
     "rimraf": "^3.0.2",
-    "rollup": "^2.75.7",
-    "tsup": "^6.1.3",
-    "typescript": "^4.7.4",
-    "vite": "^2.9.13",
-    "vitest": "^0.17.0",
-    "webpack": "^5.73.0"
+    "rollup": "^2.79.1",
+    "tsup": "^6.2.3",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.4",
+    "vitest": "^0.23.4",
+    "webpack": "^5.74.0"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "@storybook/builder-vite@0.2.3": "patches/@storybook__builder-vite@0.2.3.patch"
+    }
   }
 }
diff --git a/patches/@storybook__builder-vite@0.2.3.patch b/patches/@storybook__builder-vite@0.2.3.patch
@@ -0,0 +1,52 @@
+diff --git a/dist/codegen-importfn-script.js b/dist/codegen-importfn-script.js
+index b98d4c561f7135e9aac7aa8da2401060306bf279..dcb75e32fa5cb98868df02c2cfaa55b173b26168 100644
+--- a/dist/codegen-importfn-script.js
++++ b/dist/codegen-importfn-script.js
+@@ -50,7 +50,7 @@ async function toImportFn(stories) {
+     const objectEntries = stories.map((file) => {
+         const ext = path.extname(file);
+         const relativePath = (0, vite_1.normalizePath)(path.relative(process.cwd(), file));
+-        if (!['.js', '.jsx', '.ts', '.tsx', '.mdx'].includes(ext)) {
++        if (!['.js', '.jsx', '.ts', '.tsx', '.mdx', '.vue'].includes(ext)) {
+             node_logger_1.logger.warn(`Cannot process ${ext} file with storyStoreV7: ${relativePath}`);
+         }
+         return `  '${toImportPath(relativePath)}': async () => import('/@fs/${file}')`;
+diff --git a/dist/plugins/vue-docgen.js b/dist/plugins/vue-docgen.js
+index 3d184111c7ee11d34d3c2db980b6fa4dec49627e..0b9bfb803250670ac5bccea4cf1361b8d8c40e37 100644
+--- a/dist/plugins/vue-docgen.js
++++ b/dist/plugins/vue-docgen.js
+@@ -10,7 +10,7 @@ function vueDocgen(vueVersion) {
+     return {
+         name: 'vue-docgen',
+         async transform(src, id) {
+-            if (/\.(vue)$/.test(id)) {
++            if (/\.(vue)$/.test(id) && !/\.(stories)\.(vue)$/.test(id)) {
+                 const metaData = await (0, vue_docgen_api_1.parse)(id);
+                 const metaSource = JSON.stringify(metaData);
+                 const s = new magic_string_1.default(src);
+diff --git a/dist/source-loader-plugin.js b/dist/source-loader-plugin.js
+index 6a87782c2c4d88d0e7fa39c904b2eff78d591d1e..10b91b2b24d9c71300f6288eed697509f7a4485e 100644
+--- a/dist/source-loader-plugin.js
++++ b/dist/source-loader-plugin.js
+@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
+ exports.sourceLoaderPlugin = void 0;
+ const source_loader_1 = __importDefault(require("@storybook/source-loader"));
+ const magic_string_1 = __importDefault(require("magic-string"));
+-const storyPattern = /\.stories\.[jt]sx?$/;
++const storyPattern = /\.stories\.(([jt]sx?)|(vue))$/;
+ const storySourcePattern = /var __STORY__ = "(.*)"/;
+ const storySourceReplacement = '--STORY_SOURCE_REPLACEMENT--';
+ const mockClassLoader = (id) => ({ emitWarning: (message) => console.warn(message), resourcePath: id });
+diff --git a/dist/vite-config.js b/dist/vite-config.js
+index 37735b8e79b6c62f0ce66e53e48273e7ca175f49..bbf539d14a831019a6395a9b2ba3d830176d722e 100644
+--- a/dist/vite-config.js
++++ b/dist/vite-config.js
+@@ -132,7 +132,7 @@ async function pluginConfig(options, _type) {
+     if (framework === 'vue3') {
+         try {
+             const vuePlugin = require('@vitejs/plugin-vue');
+-            plugins.push(vuePlugin());
++            plugins.push(vuePlugin({exclude: [/\.stories\.vue$/]}));
+         }
+         catch (err) {
+             if (err.code === 'MODULE_NOT_FOUND') {