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

Vite: Update sandbox template for vue2 script #20750

Conversation

fazulk
Copy link
Contributor

@fazulk fazulk commented Jan 23, 2023

Issue: #20748

What I did

Update the Vue2/Vite loading script to use the official vue package.

How to test

  1. Run yarn task --task dev --start-from=install --template vue2-vite/2.7-js
  2. Open Storybook in your browser
  3. Access any story (should not show any import errors)

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Maintainers

  • If this PR should be tested against many or all sandboxes,
    make sure to add the ci:merged or ci:daily GH label to it.
  • Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

// preferring community bootstrap scripts / generators instead.
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',
script: 'npx create-vue@2 {{beforeDir}} --default',
Copy link
Member

Choose a reason for hiding this comment

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

Based on https://github.com/vuejs/create-vue, it looks like we could also use npm create vue@3, right? Especially since SB7 does not support IE.

Copy link
Member

@IanVS IanVS Jan 30, 2023

Choose a reason for hiding this comment

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

I guess it's unclear to me based on that readme whether that's the version of the creator or the version of vue that will be installed. It only mentions IE support as the difference between the two. I think that to create a vue3 project, npm create vite is used instead.

Copy link
Member

Choose a reason for hiding this comment

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

@IanVS with create-vue@3 it does generate a Vue3 Vite project:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

The docs states:

Or, if you need to support IE11, you can create a Vue 2 project with

Copy link
Member

@yannbf yannbf left a comment

Choose a reason for hiding this comment

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

This looks great to me, thank you so much for your contribution @fazulk ! This way we'll be testing projects much closer to the real use cases.

@yannbf yannbf added vue build Internal-facing build tooling & test updates ci:daily Run the CI jobs that normally run in the daily job. labels Jan 30, 2023
@fazulk
Copy link
Contributor Author

fazulk commented Feb 1, 2023

@yannbf Do i need to re-commit with inDevelopment: true removed?

@IanVS
Copy link
Member

IanVS commented Feb 6, 2023

@fazulk we'll need to change that flag once this is merged and https://github.com/storybookjs/sandboxes is updated based on the change you're making. It's a very clunky, round-about way of generating sandbox templates, and hopefully we can clean it up sometime.

@IanVS
Copy link
Member

IanVS commented Mar 16, 2023

\o/ We're green!

@IanVS IanVS changed the title Update sandbox template for vue2/vite script Vite: Update sandbox template for vue2 script Mar 16, 2023
@IanVS IanVS merged commit b86fc2a into storybookjs:next Mar 16, 2023
@JReinhold JReinhold mentioned this pull request Apr 5, 2023
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
build Internal-facing build tooling & test updates ci:daily Run the CI jobs that normally run in the daily job. vue
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants