Vite: Add vue-vite framework for Vue2

.circleci/config.yml

@@ -477,7 +477,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 9
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -497,7 +497,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 9
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -513,7 +513,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 9
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -533,7 +533,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 9
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -549,7 +549,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 9
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -565,7 +565,7 @@ jobs:
     executor:
       class: medium+
       name: sb_playwright
-    parallelism: 9
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

code/examples/vue-kitchen-sink/src/stories/components/button.stories.js

@@ -22,14 +22,14 @@ Rounded.args = {
   color: '#f00',
   label: 'A Button with rounded edges',
 };
-Rounded.decorators = [
-  (storyFn, context) => {
-    return storyFn({ ...context, args: { ...context.args, label: 'Overridden args' } });
-  },
-  () => ({
-    template: '<div style="background: #eee;"><story/></div>',
-  }),
-];
+// Rounded.decorators = [
+//   (storyFn, context) => {
+//     return storyFn({ ...context, args: { ...context.args, label: 'Overridden args' } });
+//   },
+//   () => ({
+//     template: '<div style="background: #eee;"><story/></div>',
+//   }),
+// ];
 Rounded.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.click(canvas.getByRole('button'));

code/frameworks/react-vite/package.json

@@ -64,12 +64,12 @@
     "ast-types": "^0.14.2",
     "magic-string": "^0.26.1",
     "react-docgen": "^6.0.0-alpha.3",
-    "vite": "3"
+    "vite": "^3.1.3"
   },
   "devDependencies": {
     "@types/node": "^14.14.20 || ^16.0.0",
     "typescript": "~4.6.3",
-    "vite": "^3.1.0"
+    "vite": "^3.1.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

code/frameworks/react-vite/src/preset.ts

@@ -9,7 +9,7 @@ export const core: StorybookConfig['core'] = {
   builder: '@storybook/builder-vite',
 };
 
-export function readPackageJson(): Record<string, any> | false {
+function readPackageJson(): Record<string, any> | false {
   const packageJsonPath = path.resolve('package.json');
   if (!fs.existsSync(packageJsonPath)) {
     return false;

code/frameworks/svelte-vite/package.json

@@ -64,12 +64,12 @@
     "magic-string": "^0.26.1",
     "svelte": "^3.0.0",
     "sveltedoc-parser": "^4.2.1",
-    "vite": "3"
+    "vite": "^3.1.3"
   },
   "devDependencies": {
     "@types/node": "^14.14.20 || ^16.0.0",
     "typescript": "~4.6.3",
-    "vite": "^3.1.0"
+    "vite": "^3.1.3"
   },
   "engines": {
     "node": "^14.18 || >=16"

code/frameworks/svelte-vite/src/preset.ts

@@ -1,5 +1,3 @@
-import path from 'path';
-import fs from 'fs';
 import type { StorybookConfig } from '@storybook/builder-vite';
 import { svelteDocgen } from './plugins/svelte-docgen';
 
@@ -9,16 +7,6 @@ export const core: StorybookConfig['core'] = {
   builder: '@storybook/builder-vite',
 };
 
-export function readPackageJson(): Record<string, any> | false {
-  const packageJsonPath = path.resolve('package.json');
-  if (!fs.existsSync(packageJsonPath)) {
-    return false;
-  }
-
-  const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');
-  return JSON.parse(jsonContent);
-}
-
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
   const { plugins = [] } = config;
 

code/frameworks/vue-vite/README.md

@@ -0,0 +1,48 @@
+# Storybook for Vue and Vite
+
+Storybook for Vue is a UI development environment for your Vue components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+cd my-vue-app
+npx storybook init
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+## Starter Storybook-for-Vue Boilerplate project with [Vuetify](https://github.com/vuetifyjs/vuetify) Material Component Framework
+
+<https://github.com/white-rabbit-japan/vue-vuetify-storybook>
+
+---
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
+
+## Vue Notes
+
+- When using global custom components or extensions (e.g., `Vue.use`). You will need to declare those in the `./storybook/preview.js`.
+
+## Known Limitations
+
+In Storybook story and decorator components, you can not access the Vue instance
+in factory functions for default prop values:
+
+```js
+{
+  props: {
+    foo: {
+      default() {
+        return this.bar; // does not work!
+      }
+    }
+  }
+}
+```

code/frameworks/vue-vite/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@storybook/vue-vite",
+  "version": "7.0.0-alpha.34",
+  "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/vue-vite",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "frameworks/vue-vite"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/addons": "7.0.0-alpha.34",
+    "@storybook/builder-vite": "7.0.0-alpha.34",
+    "@storybook/channel-postmessage": "7.0.0-alpha.34",
+    "@storybook/channel-websocket": "7.0.0-alpha.34",
+    "@storybook/client-api": "7.0.0-alpha.34",
+    "@storybook/core-common": "7.0.0-alpha.34",
+    "@storybook/core-server": "7.0.0-alpha.34",
+    "@storybook/preview-web": "7.0.0-alpha.34",
+    "@storybook/vue": "7.0.0-alpha.34",
+    "magic-string": "^0.26.1",
+    "vite": "^3.1.3",
+    "vue-docgen-api": "^4.40.0"
+  },
+  "devDependencies": {
+    "typescript": "~4.6.3",
+    "vue": "^2.7.10"
+  },
+  "peerDependencies": {
+    "vue": "^2.7.0"
+  },
+  "engines": {
+    "node": ">=10.13.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a"
+}

code/frameworks/vue-vite/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

code/frameworks/vue-vite/src/index.ts

@@ -0,0 +1,9 @@
+// exports for builder-vite
+export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
+export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
+export { addons } from '@storybook/addons';
+export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+export { ClientApi } from '@storybook/client-api';
+
+export * from '@storybook/vue';
+export type { StorybookConfig } from '@storybook/builder-vite';

code/frameworks/vue-vite/src/plugins/vue-docgen.ts

@@ -0,0 +1,27 @@
+import { parse } from 'vue-docgen-api';
+import type { PluginOption } from 'vite';
+import { createFilter } from 'vite';
+import MagicString from 'magic-string';
+
+export function vueDocgen(): PluginOption {
+  const include = /\.(vue)$/;
+  const filter = createFilter(include);
+
+  return {
+    name: 'storybook:vue2-docgen-plugin',
+
+    async transform(src: string, id: string) {
+      if (!filter(id)) return undefined;
+
+      const metaData = await parse(id);
+      const metaSource = JSON.stringify(metaData);
+      const s = new MagicString(src);
+      s.append(`;__component__.exports.__docgenInfo = ${metaSource}`);
+
+      return {
+        code: s.toString(),
+        map: s.generateMap({ hires: true, source: id }),
+      };
+    },
+  };
+}

code/frameworks/vue-vite/src/preset.ts

@@ -0,0 +1,44 @@
+import path from 'path';
+import type { PresetProperty } from '@storybook/core-common';
+import type { StorybookConfig } from '@storybook/builder-vite';
+import { vueDocgen } from './plugins/vue-docgen';
+
+export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
+  const framework = await options.presets.apply<StorybookConfig['framework']>('framework');
+
+  return {
+    ...config,
+    builder: {
+      name: path.dirname(
+        require.resolve(path.join('@storybook/builder-vite', 'package.json'))
+      ) as '@storybook/builder-webpack5',
+      options: typeof framework === 'string' ? {} : framework?.options.builder || {},
+    },
+  };
+};
+
+export const addons: StorybookConfig['addons'] = ['@storybook/vue'];
+
+export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({
+  ...config,
+  skipBabel: true,
+});
+
+export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
+  const { plugins = [] } = config;
+
+  plugins.push(vueDocgen());
+
+  const updated = {
+    ...config,
+    plugins,
+    resolve: {
+      ...config.resolve,
+      alias: {
+        ...config.resolve?.alias,
+        vue: 'vue/dist/vue.esm.js',
+      },
+    },
+  };
+  return updated;
+};

code/frameworks/vue-vite/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.*"]
+}

code/frameworks/vue3-vite/package.json

@@ -61,13 +61,13 @@
     "@storybook/vue3": "7.0.0-alpha.34",
     "@vitejs/plugin-vue": "^3.0.3",
     "magic-string": "^0.26.1",
-    "vite": "3",
+    "vite": "^3.1.3",
     "vue-docgen-api": "^4.40.0"
   },
   "devDependencies": {
     "@types/node": "^14.14.20 || ^16.0.0",
     "typescript": "~4.6.3",
-    "vite": "^3.1.0"
+    "vite": "^3.1.3"
   },
   "engines": {
     "node": "^14.18 || >=16"