diff --git a/examples/vue/.env b/examples/vue2/.env similarity index 100% rename from examples/vue/.env rename to examples/vue2/.env diff --git a/examples/vue2/.storybook/main.ts b/examples/vue2/.storybook/main.ts new file mode 100644 index 00000000..8bb0a5f4 --- /dev/null +++ b/examples/vue2/.storybook/main.ts @@ -0,0 +1,22 @@ +const { resolve } = require('path'); +const { mergeConfig } = require('vite'); + +export default { + framework: '@storybook/vue', + stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials'], + core: { + builder: '@storybook/builder-vite', + // we don't want to muck up the data when we're working on the builder + disableTelemetry: true, + }, + features: { + previewMdx2: true, + }, + async viteFinal(config, { configType }) { + // Demonstrates use of mergeConfig and resolve.alias as an array + return mergeConfig(config, { + resolve: { alias: [{ find: '@assets', replacement: resolve(__dirname, '..', 'stories', 'assets') }] }, + }); + }, +}; diff --git a/examples/vue/.storybook/preview.js b/examples/vue2/.storybook/preview.js similarity index 100% rename from examples/vue/.storybook/preview.js rename to examples/vue2/.storybook/preview.js diff --git a/examples/vue2/README.md b/examples/vue2/README.md new file mode 100644 index 00000000..aad37990 --- /dev/null +++ b/examples/vue2/README.md @@ -0,0 +1,5 @@ +# Vue + +This example demonstrates storybook in a Vue 2 project. + +This example also demonstrates MDX2 support. diff --git a/examples/vue2/package.json b/examples/vue2/package.json new file mode 100644 index 00000000..f49a5562 --- /dev/null +++ b/examples/vue2/package.json @@ -0,0 +1,34 @@ +{ + "name": "example-vue2", + "private": true, + "version": "0.0.0", + "description": "", + "main": "index.js", + "scripts": { + "storybook": "start-storybook --port 6010", + "build-storybook": "build-storybook", + "preview-storybook": "http-server storybook-static --port 6010 --silent", + "test": "wait-on tcp:6010 && test-storybook --url 'http://localhost:6010'", + "test-ci": "run-p --race test preview-storybook" + }, + "author": "", + "license": "MIT", + "dependencies": { + "vue": "^2.7" + }, + "devDependencies": { + "@storybook/addon-a11y": "^6.5.9", + "@storybook/addon-essentials": "^6.5.9", + "@storybook/builder-vite": "workspace:*", + "@storybook/mdx2-csf": "^0.0.3", + "@storybook/test-runner": "0.1.0", + "@storybook/vue": "^6.5.9", + "@vitejs/plugin-vue2": "^1.1.2", + "http-server": "^14.1.0", + "jest": "^27.5.1", + "npm-run-all": "^4.1.5", + "vite": "^3.0.0-beta.9", + "vue-loader": "^15.9.8", + "wait-on": "^6.0.1" + } +} diff --git a/examples/vue/stories/Button.stories.js b/examples/vue2/stories/Button.stories.js similarity index 100% rename from examples/vue/stories/Button.stories.js rename to examples/vue2/stories/Button.stories.js diff --git a/examples/vue/stories/Button.vue b/examples/vue2/stories/Button.vue similarity index 100% rename from examples/vue/stories/Button.vue rename to examples/vue2/stories/Button.vue diff --git a/examples/vue/stories/EnvironmentVariables.stories.js b/examples/vue2/stories/EnvironmentVariables.stories.js similarity index 100% rename from examples/vue/stories/EnvironmentVariables.stories.js rename to examples/vue2/stories/EnvironmentVariables.stories.js diff --git a/examples/vue/stories/EnvironmentVariables.vue b/examples/vue2/stories/EnvironmentVariables.vue similarity index 100% rename from examples/vue/stories/EnvironmentVariables.vue rename to examples/vue2/stories/EnvironmentVariables.vue diff --git a/examples/vue/stories/Header.stories.js b/examples/vue2/stories/Header.stories.js similarity index 100% rename from examples/vue/stories/Header.stories.js rename to examples/vue2/stories/Header.stories.js diff --git a/examples/vue/stories/Header.vue b/examples/vue2/stories/Header.vue similarity index 100% rename from examples/vue/stories/Header.vue rename to examples/vue2/stories/Header.vue diff --git a/examples/vue/stories/Introduction.stories.mdx b/examples/vue2/stories/Introduction.stories.mdx similarity index 100% rename from examples/vue/stories/Introduction.stories.mdx rename to examples/vue2/stories/Introduction.stories.mdx diff --git a/examples/vue/stories/Page.stories.js b/examples/vue2/stories/Page.stories.js similarity index 100% rename from examples/vue/stories/Page.stories.js rename to examples/vue2/stories/Page.stories.js diff --git a/examples/vue/stories/Page.vue b/examples/vue2/stories/Page.vue similarity index 100% rename from examples/vue/stories/Page.vue rename to examples/vue2/stories/Page.vue diff --git a/examples/vue/stories/assets/code-brackets.svg b/examples/vue2/stories/assets/code-brackets.svg similarity index 100% rename from examples/vue/stories/assets/code-brackets.svg rename to examples/vue2/stories/assets/code-brackets.svg diff --git a/examples/vue/stories/assets/colors.svg b/examples/vue2/stories/assets/colors.svg similarity index 100% rename from examples/vue/stories/assets/colors.svg rename to examples/vue2/stories/assets/colors.svg diff --git a/examples/vue/stories/assets/comments.svg b/examples/vue2/stories/assets/comments.svg similarity index 100% rename from examples/vue/stories/assets/comments.svg rename to examples/vue2/stories/assets/comments.svg diff --git a/examples/vue/stories/assets/direction.svg b/examples/vue2/stories/assets/direction.svg similarity index 100% rename from examples/vue/stories/assets/direction.svg rename to examples/vue2/stories/assets/direction.svg diff --git a/examples/vue/stories/assets/flow.svg b/examples/vue2/stories/assets/flow.svg similarity index 100% rename from examples/vue/stories/assets/flow.svg rename to examples/vue2/stories/assets/flow.svg diff --git a/examples/vue/stories/assets/plugin.svg b/examples/vue2/stories/assets/plugin.svg similarity index 100% rename from examples/vue/stories/assets/plugin.svg rename to examples/vue2/stories/assets/plugin.svg diff --git a/examples/vue/stories/assets/repo.svg b/examples/vue2/stories/assets/repo.svg similarity index 100% rename from examples/vue/stories/assets/repo.svg rename to examples/vue2/stories/assets/repo.svg diff --git a/examples/vue/stories/assets/stackalt.svg b/examples/vue2/stories/assets/stackalt.svg similarity index 100% rename from examples/vue/stories/assets/stackalt.svg rename to examples/vue2/stories/assets/stackalt.svg diff --git a/examples/vue/stories/button.css b/examples/vue2/stories/button.css similarity index 100% rename from examples/vue/stories/button.css rename to examples/vue2/stories/button.css diff --git a/examples/vue/stories/header.css b/examples/vue2/stories/header.css similarity index 100% rename from examples/vue/stories/header.css rename to examples/vue2/stories/header.css diff --git a/examples/vue/stories/page.css b/examples/vue2/stories/page.css similarity index 100% rename from examples/vue/stories/page.css rename to examples/vue2/stories/page.css diff --git a/examples/vue3/.env b/examples/vue3/.env new file mode 100644 index 00000000..e613627a --- /dev/null +++ b/examples/vue3/.env @@ -0,0 +1,3 @@ +STORYBOOK_ENV_VAR=included +VITE_ENV_VAR=included +ENV_VAR=should_not_be_included diff --git a/examples/vue/.storybook/main.ts b/examples/vue3/.storybook/main.ts similarity index 100% rename from examples/vue/.storybook/main.ts rename to examples/vue3/.storybook/main.ts diff --git a/examples/vue3/.storybook/preview.js b/examples/vue3/.storybook/preview.js new file mode 100644 index 00000000..7ae55b1a --- /dev/null +++ b/examples/vue3/.storybook/preview.js @@ -0,0 +1,10 @@ +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + expanded: true, + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +}; diff --git a/examples/vue/README.md b/examples/vue3/README.md similarity index 100% rename from examples/vue/README.md rename to examples/vue3/README.md diff --git a/examples/vue/package.json b/examples/vue3/package.json similarity index 97% rename from examples/vue/package.json rename to examples/vue3/package.json index f588cdc7..2df1d965 100644 --- a/examples/vue/package.json +++ b/examples/vue3/package.json @@ -1,5 +1,5 @@ { - "name": "example-vue", + "name": "example-vue3", "private": true, "version": "0.0.0", "description": "", diff --git a/examples/vue3/stories/Button.stories.js b/examples/vue3/stories/Button.stories.js new file mode 100644 index 00000000..d48c6cf9 --- /dev/null +++ b/examples/vue3/stories/Button.stories.js @@ -0,0 +1,47 @@ +import MyButton from './Button.vue'; + +export default { + title: 'Example/Button', + component: MyButton, + argTypes: { + backgroundColor: { control: 'color' }, + size: { + control: { type: 'select', options: ['small', 'medium', 'large'] }, + }, + onClick: {}, + }, +}; + +const Template = (args) => ({ + // Components used in your story `template` are defined in the `components` object + components: { MyButton }, + // The story's `args` need to be mapped into the template through the `setup()` method + setup() { + return { args }; + }, + // And then the `args` are bound to your component with `v-bind="args"` + template: '', +}); + +export const Primary = Template.bind({}); +Primary.args = { + primary: true, + label: 'Button', +}; + +export const Secondary = Template.bind({}); +Secondary.args = { + label: 'Button', +}; + +export const Large = Template.bind({}); +Large.args = { + size: 'large', + label: 'Button', +}; + +export const Small = Template.bind({}); +Small.args = { + size: 'small', + label: 'Button', +}; diff --git a/examples/vue3/stories/Button.vue b/examples/vue3/stories/Button.vue new file mode 100644 index 00000000..c2cbada1 --- /dev/null +++ b/examples/vue3/stories/Button.vue @@ -0,0 +1,69 @@ + + + diff --git a/examples/vue3/stories/EnvironmentVariables.stories.js b/examples/vue3/stories/EnvironmentVariables.stories.js new file mode 100644 index 00000000..22ce8279 --- /dev/null +++ b/examples/vue3/stories/EnvironmentVariables.stories.js @@ -0,0 +1,22 @@ +import EnvVars from './EnvironmentVariables.vue'; + +export default { + title: 'Environment Variables', + component: EnvVars, +}; + +const Template = (args) => ({ + // Components used in your story `template` are defined in the `components` object + components: { EnvVars }, + // The story's `args` need to be mapped into the template through the `setup()` method + setup() { + return { args }; + }, + // And then the `args` are bound to your component with `v-bind="args"` + template: '', +}); + +export const Info = Template.bind({}); +Info.args = { + dynamic: import.meta.env.VITE_ENV_VAR, +}; diff --git a/examples/vue3/stories/EnvironmentVariables.vue b/examples/vue3/stories/EnvironmentVariables.vue new file mode 100644 index 00000000..2e60a6a2 --- /dev/null +++ b/examples/vue3/stories/EnvironmentVariables.vue @@ -0,0 +1,30 @@ + + + diff --git a/examples/vue3/stories/Header.stories.js b/examples/vue3/stories/Header.stories.js new file mode 100644 index 00000000..eb782651 --- /dev/null +++ b/examples/vue3/stories/Header.stories.js @@ -0,0 +1,28 @@ +import MyHeader from './Header.vue'; + +export default { + title: 'Example/Header', + component: MyHeader, +}; + +const Template = (args) => ({ + // Components used in your story `template` are defined in the `components` object + components: { MyHeader }, + // The story's `args` need to be mapped into the template through the `setup()` method + setup() { + // Story args can be spread into the returned object + return { ...args }; + }, + // Then, the spread values can be accessed directly in the template + template: '', +}); + +export const LoggedIn = Template.bind({}); +LoggedIn.args = { + user: {}, +}; + +export const LoggedOut = Template.bind({}); +LoggedOut.args = { + user: null, +}; diff --git a/examples/vue3/stories/Header.vue b/examples/vue3/stories/Header.vue new file mode 100644 index 00000000..006bcc4b --- /dev/null +++ b/examples/vue3/stories/Header.vue @@ -0,0 +1,40 @@ + + + diff --git a/examples/vue3/stories/Introduction.stories.mdx b/examples/vue3/stories/Introduction.stories.mdx new file mode 100644 index 00000000..a09097e2 --- /dev/null +++ b/examples/vue3/stories/Introduction.stories.mdx @@ -0,0 +1,200 @@ +import { Meta } from '@storybook/addon-docs'; +import Code from '@assets/code-brackets.svg'; +import Colors from '@assets/colors.svg'; +import Comments from '@assets/comments.svg'; +import Direction from '@assets/direction.svg'; +import Flow from '@assets/flow.svg'; +import Plugin from '@assets/plugin.svg'; +import Repo from '@assets/repo.svg'; +import StackAlt from '@assets/stackalt.svg'; + + + + + +# Welcome to Storybook + +Storybook helps you build UI components in isolation from your app's business logic, data, and context. +That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. + +Browse example stories now by navigating to them in the sidebar. +View their code in the `src/stories` directory to learn how they work. +We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. + +
Configure
+ +
+ + plugin + + Presets for popular tools + Easy setup for TypeScript, SCSS and more. + + + + Build + + Build configuration + How to customize webpack and Babel + + + + colors + + Styling + How to load and configure CSS libraries + + + + flow + + Data + Providers and mocking for data libraries + + +
+ +
Learn
+ +
+ + repo + + Storybook documentation + Configure, customize, and extend + + + + direction + + In-depth guides + Best practices from leading teams + + + + code + + GitHub project + View the source and add issues + + + + comments + + Discord chat + Chat with maintainers and the community + + +
+ +
+ TipEdit the Markdown in src/stories/Introduction.stories.mdx +
diff --git a/examples/vue3/stories/Page.stories.js b/examples/vue3/stories/Page.stories.js new file mode 100644 index 00000000..f4acfa2d --- /dev/null +++ b/examples/vue3/stories/Page.stories.js @@ -0,0 +1,29 @@ +import MyPage from './Page.vue'; +import * as HeaderStories from './Header.stories'; + +export default { + title: 'Example/Page', + component: MyPage, +}; + +const Template = (args) => ({ + // Components used in your story `template` are defined in the `components` object + components: { MyPage }, + // The story's `args` need to be mapped into the template through the `setup()` method + setup() { + // Story args can be mapped to keys in the returned object + return { user: args.user }; + }, + // Then, those values can be accessed directly in the template + template: '', +}); + +export const LoggedIn = Template.bind({}); +LoggedIn.args = { + ...HeaderStories.LoggedIn.args, +}; + +export const LoggedOut = Template.bind({}); +LoggedOut.args = { + ...HeaderStories.LoggedOut.args, +}; diff --git a/examples/vue3/stories/Page.vue b/examples/vue3/stories/Page.vue new file mode 100644 index 00000000..4ecd8ed7 --- /dev/null +++ b/examples/vue3/stories/Page.vue @@ -0,0 +1,69 @@ + + + diff --git a/examples/vue3/stories/assets/code-brackets.svg b/examples/vue3/stories/assets/code-brackets.svg new file mode 100644 index 00000000..73de9477 --- /dev/null +++ b/examples/vue3/stories/assets/code-brackets.svg @@ -0,0 +1 @@ +illustration/code-brackets \ No newline at end of file diff --git a/examples/vue3/stories/assets/colors.svg b/examples/vue3/stories/assets/colors.svg new file mode 100644 index 00000000..17d58d51 --- /dev/null +++ b/examples/vue3/stories/assets/colors.svg @@ -0,0 +1 @@ +illustration/colors \ No newline at end of file diff --git a/examples/vue3/stories/assets/comments.svg b/examples/vue3/stories/assets/comments.svg new file mode 100644 index 00000000..6493a139 --- /dev/null +++ b/examples/vue3/stories/assets/comments.svg @@ -0,0 +1 @@ +illustration/comments \ No newline at end of file diff --git a/examples/vue3/stories/assets/direction.svg b/examples/vue3/stories/assets/direction.svg new file mode 100644 index 00000000..65676ac2 --- /dev/null +++ b/examples/vue3/stories/assets/direction.svg @@ -0,0 +1 @@ +illustration/direction \ No newline at end of file diff --git a/examples/vue3/stories/assets/flow.svg b/examples/vue3/stories/assets/flow.svg new file mode 100644 index 00000000..8ac27db4 --- /dev/null +++ b/examples/vue3/stories/assets/flow.svg @@ -0,0 +1 @@ +illustration/flow \ No newline at end of file diff --git a/examples/vue3/stories/assets/plugin.svg b/examples/vue3/stories/assets/plugin.svg new file mode 100644 index 00000000..29e5c690 --- /dev/null +++ b/examples/vue3/stories/assets/plugin.svg @@ -0,0 +1 @@ +illustration/plugin \ No newline at end of file diff --git a/examples/vue3/stories/assets/repo.svg b/examples/vue3/stories/assets/repo.svg new file mode 100644 index 00000000..f386ee90 --- /dev/null +++ b/examples/vue3/stories/assets/repo.svg @@ -0,0 +1 @@ +illustration/repo \ No newline at end of file diff --git a/examples/vue3/stories/assets/stackalt.svg b/examples/vue3/stories/assets/stackalt.svg new file mode 100644 index 00000000..9b7ad274 --- /dev/null +++ b/examples/vue3/stories/assets/stackalt.svg @@ -0,0 +1 @@ +illustration/stackalt \ No newline at end of file diff --git a/examples/vue3/stories/button.css b/examples/vue3/stories/button.css new file mode 100644 index 00000000..dc91dc76 --- /dev/null +++ b/examples/vue3/stories/button.css @@ -0,0 +1,30 @@ +.storybook-button { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} +.storybook-button--primary { + color: white; + background-color: #1ea7fd; +} +.storybook-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} +.storybook-button--small { + font-size: 12px; + padding: 10px 16px; +} +.storybook-button--medium { + font-size: 14px; + padding: 11px 20px; +} +.storybook-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/examples/vue3/stories/header.css b/examples/vue3/stories/header.css new file mode 100644 index 00000000..acadc9ec --- /dev/null +++ b/examples/vue3/stories/header.css @@ -0,0 +1,26 @@ +.wrapper { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding: 15px 20px; + display: flex; + align-items: center; + justify-content: space-between; +} + +svg { + display: inline-block; + vertical-align: top; +} + +h1 { + font-weight: 900; + font-size: 20px; + line-height: 1; + margin: 6px 0 6px 10px; + display: inline-block; + vertical-align: top; +} + +button + button { + margin-left: 10px; +} diff --git a/examples/vue3/stories/page.css b/examples/vue3/stories/page.css new file mode 100644 index 00000000..51c9d099 --- /dev/null +++ b/examples/vue3/stories/page.css @@ -0,0 +1,69 @@ +section { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 24px; + padding: 48px 20px; + margin: 0 auto; + max-width: 600px; + color: #333; +} + +h2 { + font-weight: 900; + font-size: 32px; + line-height: 1; + margin: 0 0 4px; + display: inline-block; + vertical-align: top; +} + +p { + margin: 1em 0; +} + +a { + text-decoration: none; + color: #1ea7fd; +} + +ul { + padding-left: 30px; + margin: 1em 0; +} + +li { + margin-bottom: 8px; +} + +.tip { + display: inline-block; + border-radius: 1em; + font-size: 11px; + line-height: 12px; + font-weight: 700; + background: #e7fdd8; + color: #66bf3c; + padding: 4px 12px; + margin-right: 10px; + vertical-align: top; +} + +.tip-wrapper { + font-size: 13px; + line-height: 20px; + margin-top: 40px; + margin-bottom: 40px; +} + +.tip-wrapper svg { + display: inline-block; + height: 12px; + width: 12px; + margin-right: 4px; + vertical-align: top; + margin-top: 3px; +} + +.tip-wrapper svg path { + fill: #1ea7fd; +} diff --git a/package.json b/package.json index 73b11612..417c7ab5 100644 --- a/package.json +++ b/package.json @@ -19,12 +19,13 @@ "lint-ci": "yarn lint-ci:prettier && yarn lint-ci:eslint", "lint-ci:prettier": "prettier . --check", "lint-ci:eslint": "eslint \"**/*.{ts,tsx,js,jsx,mjs,cjs}\" --max-warnings=0", - "example": "NODE_OPTIONS=--enable-source-maps yarn workspace example-${NAME:-vue} storybook", + "example": "NODE_OPTIONS=--enable-source-maps yarn workspace example-${NAME:-vue3} storybook", "example:preact": "NAME=preact yarn example", "example:react": "NAME=react yarn example", "example:react-ts": "NAME=react-ts yarn example", "example:svelte": "NAME=svelte yarn example", - "example:vue": "NAME=vue yarn example", + "example:vue3": "NAME=vue3 yarn example", + "example:vue2": "NAME=vue2 yarn example", "example:lit-ts": "NAME=lit-ts yarn example", "example:workspaces": "NAME=workspaces yarn example" }, diff --git a/packages/builder-vite/plugins/vue-docgen.ts b/packages/builder-vite/plugins/vue-docgen.ts index f0e9ee47..556cd404 100644 --- a/packages/builder-vite/plugins/vue-docgen.ts +++ b/packages/builder-vite/plugins/vue-docgen.ts @@ -2,7 +2,7 @@ import { parse } from 'vue-docgen-api'; import type { Plugin } from 'vite'; import MagicString from 'magic-string'; -export function vueDocgen(): Plugin { +export function vueDocgen(isVue3: boolean): Plugin { return { name: 'vue-docgen', @@ -11,7 +11,8 @@ export function vueDocgen(): Plugin { const metaData = await parse(id); const metaSource = JSON.stringify(metaData); const s = new MagicString(src); - s.append(`;_sfc_main.__docgenInfo = ${metaSource}`); + const componentLocation = isVue3 ? '_sfc_main' : '__component__.exports'; + s.append(`;${componentLocation}.__docgenInfo = ${metaSource}`); return { code: s.toString(), diff --git a/packages/builder-vite/vite-config.ts b/packages/builder-vite/vite-config.ts index bf8a9dac..fbceb75d 100644 --- a/packages/builder-vite/vite-config.ts +++ b/packages/builder-vite/vite-config.ts @@ -32,6 +32,7 @@ export async function commonConfig( _type: PluginConfigType ): Promise { const { framework } = options; + const vuePath = framework === 'vue3' ? 'vue/dist/vue.esm-bundler.js' : 'vue/dist/vue.esm.js'; return { configFile: false, @@ -39,14 +40,13 @@ export async function commonConfig( cacheDir: 'node_modules/.vite-storybook', envPrefix, define: {}, - resolve: - framework === 'vue3' - ? { - alias: { - vue: 'vue/dist/vue.esm-bundler.js', - }, - } - : {}, + resolve: /^vue3?$/.test(framework) + ? { + alias: { + vue: vuePath, + }, + } + : {}, plugins: await pluginConfig(options, _type), }; } @@ -80,19 +80,21 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig }, }, ] as Plugin[]; - if (framework === 'vue' || framework === 'vue3') { + if (/^vue3?$/.test(framework)) { + const isVue3 = framework === 'vue3'; try { - const vuePlugin = require('@vitejs/plugin-vue'); + const vuePlugin = isVue3 ? require('@vitejs/plugin-vue') : require('@vitejs/plugin-vue2'); plugins.push(vuePlugin()); const { vueDocgen } = await import('./plugins/vue-docgen'); - plugins.push(vueDocgen()); + plugins.push(vueDocgen(isVue3)); } catch (err) { if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') { - throw new Error( - '@storybook/builder-vite requires @vitejs/plugin-vue to be installed ' + - 'when using @storybook/vue or @storybook/vue3.' + - ' Please install it and start storybook again.' - ); + const viteDep = isVue3 ? '@vitejs/plugin-vue' : '@vitejs/plugin-vue2'; + const storybookDep = isVue3 ? '@storybook/vue3' : '@storybook/vue'; + throw new Error(` + @storybook/builder-vite requires ${viteDep} to be installed when using ${storybookDep}. + Please install it and start storybook again. + `); } throw err; } diff --git a/yarn.lock b/yarn.lock index 0ca7bc94..8a4f0016 100644 --- a/yarn.lock +++ b/yarn.lock @@ -390,6 +390,15 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.18.4": + version: 7.18.9 + resolution: "@babel/parser@npm:7.18.9" + bin: + parser: ./bin/babel-parser.js + checksum: 81a966b334e3ef397e883c64026265a5ae0ad435a86f52a84f60a5ee1efc0738c1f42c55e0dc5f191cc6a83ba0c61350433eee417bf1dff160ca5f3cfde244c6 + languageName: node + linkType: hard + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.18.6": version: 7.18.6 resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.18.6" @@ -3813,6 +3822,45 @@ __metadata: languageName: node linkType: hard +"@storybook/vue@npm:^6.5.9": + version: 6.5.9 + resolution: "@storybook/vue@npm:6.5.9" + dependencies: + "@storybook/addons": 6.5.9 + "@storybook/client-logger": 6.5.9 + "@storybook/core": 6.5.9 + "@storybook/core-common": 6.5.9 + "@storybook/csf": 0.0.2--canary.4566f4d.1 + "@storybook/docs-tools": 6.5.9 + "@storybook/store": 6.5.9 + "@types/node": ^14.14.20 || ^16.0.0 + "@types/webpack-env": ^1.16.0 + core-js: ^3.8.2 + global: ^4.4.0 + react: 16.14.0 + react-dom: 16.14.0 + read-pkg-up: ^7.0.1 + regenerator-runtime: ^0.13.7 + ts-dedent: ^2.0.0 + ts-loader: ^8.0.14 + vue-docgen-api: ^4.44.15 + vue-docgen-loader: ^1.5.0 + webpack: ">=4.0.0 <6.0.0" + peerDependencies: + "@babel/core": "*" + babel-loader: ^7.0.0 || ^8.0.0 + css-loader: "*" + vue: ^2.6.8 + vue-loader: ^15.7.0 + vue-template-compiler: ^2.6.8 + bin: + build-storybook: bin/build.js + start-storybook: bin/index.js + storybook-server: bin/index.js + checksum: 3e130bedc37f0d34cb83cbe30fd8a3d2d941a6bac25b54f63d7123009f6846d45fd92137570b7283f40fabc58d885035926c52016c684cf8677c62bb8f0eb55d + languageName: node + linkType: hard + "@storybook/web-components@npm:^6.5.9": version: 6.5.9 resolution: "@storybook/web-components@npm:6.5.9" @@ -4659,13 +4707,23 @@ __metadata: languageName: node linkType: hard +"@vitejs/plugin-vue2@npm:^1.1.2": + version: 1.1.2 + resolution: "@vitejs/plugin-vue2@npm:1.1.2" + peerDependencies: + vite: ">=2.5.10" + vue: ^2.7.0-0 + checksum: a0b4ca94489f7dbb5d8f44f9fed8c6ad094456ec014096157054ed2b2432f56462400882a1639ca695bad2010d341b5b1a43f8b9f54c7a5eb8a399c1174c52ba + languageName: node + linkType: hard + "@vitejs/plugin-vue@npm:^3.0.0-beta.1": - version: 3.0.0-beta.1 - resolution: "@vitejs/plugin-vue@npm:3.0.0-beta.1" + version: 3.0.1 + resolution: "@vitejs/plugin-vue@npm:3.0.1" peerDependencies: - vite: ^3.0.0-alpha + vite: ^3.0.0 vue: ^3.2.25 - checksum: 82b02f91ad5b0765bffc7af2d315d713bea13a30bd1935ba2ae6bf80bf9051975b4b1c36dd002c725f737a9855de647adf047bc7fada69a86358f75c70a9756e + checksum: 8a48888f0e97bb9f0a7c59ca55546f4fcc316609850630ae27e9702ca7030b19d3c023e8a52de8631c243bc32825bf1a88b7ddd2b0f802916d47171465959159 languageName: node linkType: hard @@ -4691,6 +4749,17 @@ __metadata: languageName: node linkType: hard +"@vue/compiler-sfc@npm:2.7.8": + version: 2.7.8 + resolution: "@vue/compiler-sfc@npm:2.7.8" + dependencies: + "@babel/parser": ^7.18.4 + postcss: ^8.4.14 + source-map: ^0.6.1 + checksum: da0b4b0866224fe2aee376a88c25914da4e73ba9e11e7aa2ed240b99897735b4a988e951dcae9c8f0843216c5a97050bf16e1bb04bf65541444a8bdfedc35b38 + languageName: node + linkType: hard + "@vue/compiler-sfc@npm:3.2.37, @vue/compiler-sfc@npm:^3.2.0": version: 3.2.37 resolution: "@vue/compiler-sfc@npm:3.2.37" @@ -7601,7 +7670,7 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^3.0.2": +"csstype@npm:^3.0.2, csstype@npm:^3.1.0": version: 3.1.0 resolution: "csstype@npm:3.1.0" checksum: 644e986cefab86525f0b674a06889cfdbb1f117e5b7d1ce0fc55b0423ecc58807a1ea42ecc75c4f18999d14fc42d1d255f84662a45003a52bb5840e977eb2ffd @@ -9263,9 +9332,30 @@ __metadata: languageName: unknown linkType: soft -"example-vue@workspace:examples/vue": +"example-vue2@workspace:examples/vue2": + version: 0.0.0-use.local + resolution: "example-vue2@workspace:examples/vue2" + dependencies: + "@storybook/addon-a11y": ^6.5.9 + "@storybook/addon-essentials": ^6.5.9 + "@storybook/builder-vite": "workspace:*" + "@storybook/mdx2-csf": ^0.0.3 + "@storybook/test-runner": 0.1.0 + "@storybook/vue": ^6.5.9 + "@vitejs/plugin-vue2": ^1.1.2 + http-server: ^14.1.0 + jest: ^27.5.1 + npm-run-all: ^4.1.5 + vite: ^3.0.0-beta.9 + vue: ^2.7 + vue-loader: ^15.9.8 + wait-on: ^6.0.1 + languageName: unknown + linkType: soft + +"example-vue3@workspace:examples/vue3": version: 0.0.0-use.local - resolution: "example-vue@workspace:examples/vue" + resolution: "example-vue3@workspace:examples/vue3" dependencies: "@storybook/addon-a11y": ^6.5.9 "@storybook/addon-essentials": ^6.5.9 @@ -19643,6 +19733,16 @@ __metadata: languageName: node linkType: hard +"vue@npm:^2.7": + version: 2.7.8 + resolution: "vue@npm:2.7.8" + dependencies: + "@vue/compiler-sfc": 2.7.8 + csstype: ^3.1.0 + checksum: 45fc85a13fc027798ad859fe4a5509b54217ae2f129240fc349a799bd4dbc6848ef8fa9968ab7ef7afcb954735882dbfdeb746673aa3f051e4d7ae555c213a1b + languageName: node + linkType: hard + "vue@npm:^3.2.25": version: 3.2.37 resolution: "vue@npm:3.2.37"