Add vue-vite framework

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,82 @@
+{
+  "name": "@storybook/vue-vite",
+  "version": "7.0.0-alpha.33",
+  "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/builder-vite": "7.0.0-alpha.33",
+    "@storybook/core-common": "7.0.0-alpha.33",
+    "@storybook/core-server": "7.0.0-alpha.33",
+    "@storybook/vue": "7.0.0-alpha.33",
+    "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,2 @@
+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:vue-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(`;_sfc_main.__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/lib/cli/src/repro-templates.ts

@@ -67,6 +67,20 @@ const vue3ViteTemplates = {
   },
 };
 
+const vue2ViteTemplates = {
+  'vue2-vite/2.7-js': {
+    name: 'Vue2 Vite (vue 2.7 JS)',
+    script:
+      'yarn create vite . --template vanilla && yarn add --dev @vitejs/plugin-vue2 vue-template-compiler vue@2 && echo "import vue2 from \'@vitejs/plugin-vue2\';\n\nexport default {\n\tplugins: [vue2()]\n};" > vite.config.js',
+    cadence: ['ci', 'daily', 'weekly'],
+    expected: {
+      framework: '@storybook/vue2-vite',
+      renderer: '@storybook/vue2',
+      builder: '@storybook/builder-vite',
+    },
+  },
+};
+
 const svelteViteTemplates = {
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
@@ -124,6 +138,7 @@ const vueCliTemplates = {
 export default {
   ...craTemplates,
   ...reactViteTemplates,
+  ...vue2ViteTemplates,
   ...vue3ViteTemplates,
   ...svelteViteTemplates,
   ...vueCliTemplates,

code/lib/cli/src/versions.ts

@@ -72,6 +72,7 @@ export default {
   '@storybook/ui': '7.0.0-alpha.33',
   '@storybook/vue': '7.0.0-alpha.33',
   '@storybook/vue-webpack5': '7.0.0-alpha.33',
+  '@storybook/vue-vite': '7.0.0-alpha.33',
   '@storybook/vue3': '7.0.0-alpha.33',
   '@storybook/vue3-vite': '7.0.0-alpha.33',
   '@storybook/vue3-webpack5': '7.0.0-alpha.33',

code/workspace.json

@@ -381,6 +381,11 @@
       "type": "library",
       "implicitDependencies": []
     },
+    "@storybook/vue-vite": {
+      "root": "frameworks/vue-vite",
+      "type": "library",
+      "implicitDependencies": []
+    },
     "@storybook/vue3": {
       "root": "renderers/vue3",
       "type": "library",

code/yarn.lock

@@ -9553,6 +9553,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@storybook/vue-vite@workspace:frameworks/vue-vite":
+  version: 0.0.0-use.local
+  resolution: "@storybook/vue-vite@workspace:frameworks/vue-vite"
+  dependencies:
+    "@storybook/builder-vite": 7.0.0-alpha.33
+    "@storybook/core-common": 7.0.0-alpha.33
+    "@storybook/core-server": 7.0.0-alpha.33
+    "@storybook/vue": 7.0.0-alpha.33
+    magic-string: ^0.26.1
+    typescript: ~4.6.3
+    vite: ^3.1.3
+    vue: ^2.7.10
+    vue-docgen-api: ^4.40.0
+  peerDependencies:
+    vue: ^2.7.0
+  languageName: unknown
+  linkType: soft
+
 "@storybook/vue-webpack5@7.0.0-alpha.33, @storybook/vue-webpack5@workspace:*, @storybook/vue-webpack5@workspace:frameworks/vue-webpack5":
   version: 0.0.0-use.local
   resolution: "@storybook/vue-webpack5@workspace:frameworks/vue-webpack5"
@@ -44718,6 +44736,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "vite@npm:3.1.3"
+  dependencies:
+    esbuild: ^0.15.6
+    fsevents: ~2.3.2
+    postcss: ^8.4.16
+    resolve: ^1.22.1
+    rollup: ~2.78.0
+  peerDependencies:
+    less: "*"
+    sass: "*"
+    stylus: "*"
+    terser: ^5.4.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    less:
+      optional: true
+    sass:
+      optional: true
+    stylus:
+      optional: true
+    terser:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: c8f7062b9018d7fdb8391ede4133c98341cc15a9323a39d9c4485e03dd1db93818f40d6580313d6ce5b8a4f2058e53dd7b0dd4e39f3f6ac7ed7ca83f540e7505
+  languageName: node
+  linkType: hard
+
 "vlq@npm:^0.2.1":
   version: 0.2.3
   resolution: "vlq@npm:0.2.3"
@@ -45036,7 +45086,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:^2.6.12":
+"vue@npm:^2.6.12, vue@npm:^2.7.10":
   version: 2.7.10
   resolution: "vue@npm:2.7.10"
   dependencies: