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.

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

Vue2 Compatibility #469

Closed
wants to merge 8 commits into from
Closed

Conversation

heykc
Copy link

@heykc heykc commented Jul 29, 2022

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.

@IanVS
Copy link
Member

IanVS commented Jul 30, 2022

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.

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

@VisionYi
Copy link

VisionYi commented Aug 17, 2022

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
Copy link
Member

IanVS commented Aug 17, 2022

@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
Copy link
Author

heykc commented Aug 17, 2022

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

@VisionYi
Copy link

@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
Copy link

emosheeep commented Aug 23, 2022

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
Copy link

ardakkk commented Sep 11, 2022

is there any update?

@fazulk
Copy link

fazulk commented Sep 12, 2022

@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
Copy link

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

@VisionYi
Copy link

VisionYi commented Sep 16, 2022

@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
Copy link

@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
Copy link

fazulk commented Sep 16, 2022

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

@emosheeep
Copy link

@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
Copy link
Member

IanVS commented Sep 22, 2022

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
Copy link
Member

shilman commented Sep 22, 2022

@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

@IanVS IanVS mentioned this pull request Sep 24, 2022
@prashantpalikhe
Copy link

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

@shilman
Copy link
Member

shilman commented Sep 26, 2022

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

IanVS added a commit that referenced this pull request Sep 28, 2022
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
Copy link
Member

IanVS commented Sep 28, 2022

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!

@IanVS IanVS closed this Sep 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants