Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vue2 Compatibility #469

Closed
wants to merge 8 commits into from
Closed

Vue2 Compatibility #469

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d72f499
refactor: account for vue2 component source
heykc Jul 29, 2022
3057bb9
refactor: use different vue bundler for vue2
heykc Jul 29, 2022
b8daf80
feat: use vue2 vite plugin if not vue3 framework
heykc Jul 29, 2022
dfa8825
chore: duplicate vue folder to use as vue2
heykc Jul 29, 2022
273703f
chore: add the correct packages and language
heykc Jul 29, 2022
7cb7bc7
chore: rename vue example to vue3
heykc Jul 29, 2022
33387d7
chore: rename port numbers for vue2 example
heykc Jul 29, 2022
6346e2b
chore: lint-fix
heykc Jul 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/builder-vite/plugins/vue-docgen.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',

Expand All @@ -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(),
Expand Down
25 changes: 15 additions & 10 deletions packages/builder-vite/vite-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export async function commonConfig(
_type: PluginConfigType
): Promise<UserConfig & { configFile: false; root: string }> {
const { framework } = options;
const vuePath = framework === 'vue3' ? 'vue/dist/vue.esm-bundler.js' : 'vue/dist/vue.esm.js';

return {
configFile: false,
Expand All @@ -40,10 +41,10 @@ export async function commonConfig(
envPrefix,
define: {},
resolve:
framework === 'vue3'
/^vue3?$/.test(framework)
? {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
vue: vuePath
},
}
: {},
Expand Down Expand Up @@ -80,19 +81,23 @@ 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');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we can support vue < 2.7 here too? We just need to check vue version and require another plugin (vite-plugin-vue2)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @heykc, what do you think of this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Djaler / @IanVS, sorry I totally forgot to circle back to this.

I think this makes sense! Although after thinking about this a little, would it be so bad to have the user install the correct package themselves within viteFinal? We could just put a bit of documentation, probably in the README, depicting which vite plugin to use based on which vue plugin and vue version, and we can default to @vitejs/plugin-vue here. All the user would have to do is spread all existing plugins then have their correct vitejs plugin after

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I'm fine with that. @Djaler you've got more experience with running / supporting vue 2. What's your feeling on this idea?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally, I prefer this plugin to support all three variations out of the box. I don't think we'll see more vue/vite-vue-plugin versions, so this setup will be stable for a long time

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;
}
Expand Down