Vue2 Compatibility #469

heykc · 2022-07-29T22:52:12Z

Description

This is my attempt at making @storybook/builder-vite compatible with Vue 2. specifically Vue 2.7. Most of the credit should go to @Djaler, as I pretty much just referenced their work and added a few ternaries to allow both Vue 2 and 3.

What's changed

I tried to keep my commits as clear as possible, but here are the highlights:

duplicated vue example to make vue2 example
- renamed all the necessary language and added necessary packages for vue2
renamed vue example to vue3 and adjusted yarn scripts accordingly
checking for vue or vue3 in vite-config.ts and requiring respective @vitejs/plugin-X build

Not Resolved

I wasn't able to get both the vue2 and vue3 examples to work within the same repo. I don't have a ton of experience with Yarn and it looked as if Yarn was only allowing one version of @vitejs/plugin-(vue|vue2) in the root devDependencies. The only way I was able to get it to have both is if I yarn add'd the package directly into the root package file, which seemed not ideal.

I would love to see if anyone could contribute to this PR to get both examples working. the Vue3 example still works, and I've confirmed that the Vue2 option works with my own Vue2.7 build of Storybook by yarn packing and installing it via tarball. It really does seem like the issue lies in the fact that both these examples are trying to live within the same monorepo. Any advice is appreciated.

make sure vite-config passes boolean value. true for now until we can determine whether or not a user is using the vue or vue3 framework

change language of duped example to reflect vue2 usage.

IanVS · 2022-07-30T01:52:52Z

Thanks for this! I'll give it a review soon. I wouldn't worry too much about the examples, because there are plans to move this project inside the storybook main monorepo and they're completely changing the way they do examples to avoid this exact kind of problem.

Djaler · 2022-07-30T09:16:24Z

packages/builder-vite/vite-config.ts

-      const vuePlugin = require('@vitejs/plugin-vue');
+      const vuePlugin = isVue3
+        ? require('@vitejs/plugin-vue')
+        : require('@vitejs/plugin-vue2');


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

Hi @heykc, what do you think of this?

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

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?

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

VisionYi · 2022-08-17T04:26:45Z

Is there anything updated? @IanVS @Djaler
I hope storybook builder-vite can do Vue2 Compatibility. Please 🥺👏👏
Because the official plugin @vitejs/plugin-vue2 has been released.

reference https://blog.vuejs.org/posts/vue-2-7-naruto.html

And I don't want to use another workaround storybook-builder-vite-vue2 and the unofficial plugin vite-plugin-vue2.

IanVS · 2022-08-17T14:44:16Z

@VisionYi Right now I'm focused on getting the vite builder working in storybook 7.0. @heykc to move forward with this, how about you remove the vue2 example, and just stick with 2.7+ for now. If we get lots of requests for 2.6, we can see what we can do there, but trying to support both will be extra complexity. Might as well take it one step at a time. Do you have time to make the updates?

heykc · 2022-08-17T15:09:36Z

Sure thing. I can get to it sometime this week ✌🏽

VisionYi · 2022-08-18T06:49:31Z

@VisionYi Right now I'm focused on getting the vite builder working in storybook 7.0. @heykc to move forward with this, how about you remove the vue2 example, and just stick with 2.7+ for now. If we get lots of requests for 2.6, we can see what we can do there, but trying to support both will be extra complexity. Might as well take it one step at a time. Do you have time to make the updates?

Thanks for your reply, I got it.

emosheeep · 2022-08-23T12:09:58Z

I got solution after suffering, wish could help you. You can set npm alias for @vitejs/plugin-vue with npm:@vitejs/plugin-vue2 in package.json, which works well with my project

"@vitejs/plugin-vue": "npm:@vitejs/plugin-vue2",

and here is my config file(.storybook/main.js)

const { resolve } = require('path');
const { mergeConfig, loadConfigFromFile } = require('vite');
const vueJsx = require('@vitejs/plugin-vue2-jsx')

module.exports = {
  framework: '@storybook/vue',
  core: { builder: '@storybook/builder-vite' },
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-links',
  ],
  async viteFinal(config) {
    config.plugins.push(vueJsx());
    return config
  },
};

ardakkk · 2022-09-11T08:57:42Z

is there any update?

fazulk · 2022-09-12T19:39:29Z

@emosheeep was there any other setup you needed to get this working for yourself? My attempt only produced a ton of errors related to vue-docgen api.

emosheeep · 2022-09-13T02:03:49Z

@VisionYi Do you update all The dependencies version to the latest. Show me your code

VisionYi · 2022-09-16T03:24:33Z

@VisionYi Do you update all The dependencies version to the latest. Show me your code

I think you tagged the wrong person. Do you want to tag @fazulk ?

By the way. I refer to your code to @vitejs/plugin-vue with npm:@vitejs/plugin-vue2 in package.json.
Then, it also happened some errors.

So, I my solution that is to add the code resolve.alias: { find: 'vue', replacement: 'vue/dist/vue.esm.js' } on my config file(.storybook/main.js)

async viteFinal (config) {
    return mergeConfig(config, {
      resolve: {
        alias: [
          // fix issue vue2 with Vite
          { find: 'vue', replacement: 'vue/dist/vue.esm.js' }
        ],
        extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
      },
    })
  }

Maybe @fazulk you can try to add it.

emosheeep · 2022-09-16T03:28:12Z

@VisionYi Do you update all The dependencies version to the latest. Show me your code

I think you tagged the wrong person. Do you want to tag @fazulk ?

Oh！I‘m sorry for this. Yeah I supposed to tag @fazulk ~

fazulk · 2022-09-16T21:55:19Z

Thanks for the tip all- I did get it working with the example @VisionYi provided.

emosheeep · 2022-09-17T01:51:43Z

@VisionYi Do you update all The dependencies version to the latest. Show me your code

I think you tagged the wrong person. Do you want to tag @fazulk ?

By the way. I refer to your code to @vitejs/plugin-vue with npm:@vitejs/plugin-vue2 in package.json.

Then, it also happened some errors.

So, I my solution that is to add the code resolve.alias: { find: 'vue', replacement: 'vue/dist/vue.esm.js' } on my config file(.storybook/main.js)
async viteFinal (config) {

    return mergeConfig(config, {

      resolve: {

        alias: [

          // fix issue vue2 with Vite

          { find: 'vue', replacement: 'vue/dist/vue.esm.js' }

        ],

        extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']

      },

    })

  }
Maybe @fazulk you can try to add it.

Haha，thanks for your reminding. In fact, I added this line at first as below,

async viteFinal(config) {
  config.resolve.alias.vue = 'vue/dist/vue.esm.js'; // at the beginning
  config.plugins.push(vueJsx());
  return config;
}

but later found it was not the core problem, so I deleted it. The reason why this problem occurs is that we use template to write stories. If we use jsx or render function, this problem will not occur.

By the way，do you encounter this problem #488

IanVS · 2022-09-22T00:40:45Z

For anyone here who's a Vue2 user, it would be awesome if you're willing to help us out setting things up for Storybook 7. It sounds like @shilman might need to run some thoughts past someone who knows vue2 well, to adjust the way our vue2 renderer works: storybookjs/storybook#19165 (comment). Once that renderer is working correctly, it will be pretty simple to get things set up for Vite as well.

shilman · 2022-09-22T00:49:43Z

@IanVS I implemented the fix described in that comment here storybookjs/storybook#19207

However, there are still more problems with the Vue2 renderer that need to be solved, described in that PR. Would LOVE to work with anybody who's interested to get this into shape. With someone who knows both Vue 2 and 3, I bet we could get something working in an hour or two

prashantpalikhe · 2022-09-26T07:11:49Z

Hey @shilman I can spend some time with you tomorrow to look into this if you are up for it.

shilman · 2022-09-26T07:40:41Z

@prashantpalikhe that would be amazing! Let's do it. When is good for you?

@heykc

This cherry-picks some commits from @heykc's PR #469, but puts them on top of #502, so that we can have multiple versions of vue examples that don't conflict with each other in the monorepo, which was one of the challenges in the original PR. This also attempts to read the version of `vue` from the user's package.json, determine whether it's 2.6 or 2.7, and use the appropriate vite plugin, as suggested by @Djaler.

IanVS · 2022-09-28T01:58:50Z

I sucked some of these commits into #503, which adds vue 2.6 and 2.7 support. Thanks for all the help and discussion here!

heykc added 8 commits July 29, 2022 09:45

refactor: account for vue2 component source

d72f499

make sure vite-config passes boolean value. true for now until we can determine whether or not a user is using the vue or vue3 framework

refactor: use different vue bundler for vue2

3057bb9

feat: use vue2 vite plugin if not vue3 framework

b8daf80

chore: duplicate vue folder to use as vue2

dfa8825

chore: add the correct packages and language

273703f

change language of duped example to reflect vue2 usage.

chore: rename vue example to vue3

7cb7bc7

chore: rename port numbers for vue2 example

33387d7

chore: lint-fix

6346e2b

Djaler reviewed Jul 30, 2022

View reviewed changes

IanVS mentioned this pull request Sep 24, 2022

Support vue 2.6 and 2.7 #503

Merged

IanVS closed this Sep 28, 2022

emosheeep mentioned this pull request Sep 28, 2022

[Bug] React.jsx: type is invalid #488

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue2 Compatibility #469

Vue2 Compatibility #469

heykc commented Jul 29, 2022 •

edited

Loading

IanVS commented Jul 30, 2022

Djaler Jul 30, 2022

IanVS Aug 8, 2022

heykc Aug 8, 2022

IanVS Aug 9, 2022

Djaler Sep 11, 2022

VisionYi commented Aug 17, 2022 •

edited

Loading

IanVS commented Aug 17, 2022

heykc commented Aug 17, 2022

VisionYi commented Aug 18, 2022

emosheeep commented Aug 23, 2022 •

edited

Loading

ardakkk commented Sep 11, 2022 •

edited

Loading

fazulk commented Sep 12, 2022

emosheeep commented Sep 13, 2022

VisionYi commented Sep 16, 2022 •

edited

Loading

emosheeep commented Sep 16, 2022

fazulk commented Sep 16, 2022

emosheeep commented Sep 17, 2022

IanVS commented Sep 22, 2022

shilman commented Sep 22, 2022 •

edited

Loading

prashantpalikhe commented Sep 26, 2022

shilman commented Sep 26, 2022

IanVS commented Sep 28, 2022

Vue2 Compatibility #469

Vue2 Compatibility #469

Conversation

heykc commented Jul 29, 2022 • edited Loading

Description

What's changed

Not Resolved

IanVS commented Jul 30, 2022

Djaler Jul 30, 2022

Choose a reason for hiding this comment

IanVS Aug 8, 2022

Choose a reason for hiding this comment

heykc Aug 8, 2022

Choose a reason for hiding this comment

IanVS Aug 9, 2022

Choose a reason for hiding this comment

Djaler Sep 11, 2022

Choose a reason for hiding this comment

VisionYi commented Aug 17, 2022 • edited Loading

IanVS commented Aug 17, 2022

heykc commented Aug 17, 2022

VisionYi commented Aug 18, 2022

emosheeep commented Aug 23, 2022 • edited Loading

ardakkk commented Sep 11, 2022 • edited Loading

fazulk commented Sep 12, 2022

emosheeep commented Sep 13, 2022

VisionYi commented Sep 16, 2022 • edited Loading

emosheeep commented Sep 16, 2022

fazulk commented Sep 16, 2022

emosheeep commented Sep 17, 2022

IanVS commented Sep 22, 2022

shilman commented Sep 22, 2022 • edited Loading

prashantpalikhe commented Sep 26, 2022

shilman commented Sep 26, 2022

IanVS commented Sep 28, 2022

heykc commented Jul 29, 2022 •

edited

Loading

VisionYi commented Aug 17, 2022 •

edited

Loading

emosheeep commented Aug 23, 2022 •

edited

Loading

ardakkk commented Sep 11, 2022 •

edited

Loading

VisionYi commented Sep 16, 2022 •

edited

Loading

shilman commented Sep 22, 2022 •

edited

Loading