Merge pull request #10909 from graup/graup/vue-preset

Remove babel-preset-vue
storybookjs · May 25, 2020 · 7b4e942 · 7b4e942
2 parents 2a348c0 + 1544405
commit 7b4e942
Show file tree

Hide file tree

Showing 14 changed files with 29 additions and 74 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -43,7 +43,7 @@ module.exports = {
   overrides: [
     {
       test: './examples/vue-kitchen-sink',
-      presets: ['babel-preset-vue'],
+      presets: ['@vue/babel-preset-jsx'],
       env: {
         test: withTests,
       },

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -15,6 +15,7 @@
       - [Imported types](#imported-types)
       - [Rolling back](#rolling-back)
   - [New addon presets](#new-addon-presets)
+  - [Removed babel-preset-vue from Vue preset](#removed-babel-preset-vue-from-vue-preset)
   - [Removed Deprecated APIs](#removed-deprecated-apis)
   - [New setStories event](#new-setstories-event)
   - [Client API changes](#client-api-changes)
@@ -379,6 +380,23 @@ MyNonCheckedStory.story = {
 };
 ```
 
+### Removed babel-preset-vue from Vue preset
+
+`babel-preset-vue` is not included by default anymore when using Storybook with Vue.
+This preset is outdated and [caused problems](https://github.com/storybookjs/storybook/issues/4475) with more modern setups.
+
+If you have an older Vue setup that relied on this preset, make sure it is included in your babel config
+(install `babel-preset-vue` and add it to the presets).
+
+```json
+{
+  "presets": ["babel-preset-vue"]
+}
+```
+
+However, please take a moment to review why this preset is necessary in your setup.
+One usecase used to be to enable JSX in your stories. For this case, we recommend to use `@vue/babel-preset-jsx` instead.
+
 ### Removed Deprecated APIs
 
 In 6.0 we removed a number of APIs that were previously deprecated.

diff --git a/app/vue/package.json b/app/vue/package.json
@@ -47,7 +47,6 @@
   "devDependencies": {
     "@types/node": "^13.13.4",
     "@types/webpack": "^4.41.12",
-    "babel-preset-vue": "^2.0.2",
     "vue": "^2.6.8",
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.8"

diff --git a/app/vue/src/server/framework-preset-vue.ts b/app/vue/src/server/framework-preset-vue.ts
@@ -38,10 +38,3 @@ export function webpack(config: Configuration) {
     },
   };
 }
-
-export function babelDefault(config: any) {
-  return {
-    ...config,
-    presets: [...config.presets, require.resolve('babel-preset-vue')],
-  };
-}
diff --git a/docs/src/pages/guides/guide-vue/index.md b/docs/src/pages/guides/guide-vue/index.md
@@ -53,11 +53,11 @@ npm install @storybook/vue --save-dev
 
 ### Add peer dependencies
 
-Make sure that you have `vue`, `vue-loader`, `vue-template-compiler`, `@babel/core`, `babel-loader` and `babel-preset-vue` in your dependencies as well, because we list these as a peer dependencies:
+Make sure that you have `vue`, `vue-loader`, `vue-template-compiler`, `@babel/core`, and `babel-loader` in your dependencies as well, because we list these as a peer dependencies:
 
 ```sh
 npm install vue --save
-npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev
+npm install vue-loader vue-template-compiler @babel/core babel-loader --save-dev
 ```
 
 ## Step 2: Add npm scripts

diff --git a/docs/src/pages/presets/writing-presets/index.md b/docs/src/pages/presets/writing-presets/index.md
@@ -42,13 +42,13 @@ The babel functions `babel`, `babelDefault`, and `managerBabel` all configure ba
 
 All functions take a [Babel configuration object](https://babeljs.io/docs/en/configuration) as their argument and can modify it or return a new object.
 
-For example, Storybook's Vue support uses presets internally and here's how it configures babel:
+For example, Storybook's Mihtril support uses plugins internally and here's how it configures babel:
 
 ```js
-export function babelDefault(config) {
+export function babelDefault(config: TransformOptions) {
   return {
     ...config,
-    presets: [...config.presets, require.resolve('babel-preset-vue')],
+    plugins: [...config.plugins, require.resolve('@babel/plugin-transform-react-jsx')],
   };
 }
 ```

diff --git a/examples/vue-kitchen-sink/.babelrc b/examples/vue-kitchen-sink/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@vue/babel-preset-jsx"]
+}
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
@@ -26,7 +26,7 @@
     "@storybook/addons": "6.0.0-beta.13",
     "@storybook/source-loader": "6.0.0-beta.13",
     "@storybook/vue": "6.0.0-beta.13",
-    "babel-core": "^7.0.0-bridge.0",
+    "@vue/babel-preset-jsx": "^1.1.2",
     "babel-loader": "^8.0.5",
     "cross-env": "^7.0.0",
     "file-loader": "^6.0.0",

diff --git a/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js b/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js
@@ -14,14 +14,6 @@ export const Text = () => ({
   methods: { action: action('clicked') },
 });
 
-export const Jsx = () => ({
-  components: { MyButton },
-  render() {
-    return <my-button onClick={this.action}>With JSX</my-button>;
-  },
-  methods: { action: linkTo('clicked') },
-});
-
 export const WithSomeEmojiAndAction = () => ({
   components: { MyButton },
   template: '<my-button @click="action">😀 😎 👍 💯</my-button>',

diff --git a/lib/cli/src/generators/VUE/index.ts b/lib/cli/src/generators/VUE/index.ts
@@ -17,7 +17,6 @@ const generator: Generator = async (npmOptions, { storyFormat }) => {
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addons',
-    'babel-preset-vue',
     '@babel/core',
   ];
   if (storyFormat === StoryFormat.MDX) {
@@ -53,9 +52,6 @@ const generator: Generator = async (npmOptions, { storyFormat }) => {
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  // We should probably just not even be using babel-preset-vue directly
-  // see: https://github.com/storybookjs/storybook/issues/4475#issuecomment-432141296
   installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
 };
 

diff --git a/lib/cli/src/generators/VUE/template-csf/stories/1-Button.stories.js b/lib/cli/src/generators/VUE/template-csf/stories/1-Button.stories.js
@@ -14,14 +14,6 @@ export const Text = () => ({
   methods: { action: action('clicked') },
 });
 
-export const Jsx = () => ({
-  components: { MyButton },
-  render(h) {
-    return <my-button onClick={this.action}>With JSX</my-button>;
-  },
-  methods: { action: linkTo('clicked') },
-});
-
 export const WithSomeEmojiAndAction = () => ({
   components: { MyButton },
   template: '<my-button @click="action">😀 😎 👍 💯</my-button>',

diff --git a/package.json b/package.json
@@ -164,7 +164,6 @@
     "babel-plugin-emotion": "^10.0.20",
     "babel-plugin-macros": "^2.7.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "babel-preset-vue": "^2.0.2",
     "chalk": "^4.0.0",
     "chromatic": "^4.0.2",
     "codecov": "^3.5.0",

diff --git a/scripts/run-e2e-config.ts b/scripts/run-e2e-config.ts
@@ -113,7 +113,7 @@ export const riot: Parameters = {
 export const sfcVue: Parameters = {
   name: 'sfcVue',
   version: 'latest',
-  generator: fromDeps('vue', 'vue-loader', 'babel-preset-vue', 'vue-template-compiler'),
+  generator: fromDeps('vue', 'vue-loader', 'vue-template-compiler'),
   additionalDeps: ['react', 'react-dom'],
 };
 

diff --git a/yarn.lock b/yarn.lock
@@ -7143,11 +7143,6 @@ babel-helper-to-multiple-sequence-expressions@^0.5.0:
   resolved "https://registry.yarnpkg.com/babel-helper-to-multiple-sequence-expressions/-/babel-helper-to-multiple-sequence-expressions-0.5.0.tgz#a3f924e3561882d42fcf48907aa98f7979a4588d"
   integrity sha512-m2CvfDW4+1qfDdsrtf4dwOslQC3yhbgyBFptncp4wvtdrDHqueW7slsYv4gArie056phvQFhT2nRcGS4bnm6mA==
 
-babel-helper-vue-jsx-merge-props@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
-  integrity sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==
-
 babel-helpers@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
@@ -7415,20 +7410,6 @@ babel-plugin-jest-hoist@^26.0.0:
     "@babel/types" "^7.3.3"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-jsx-event-modifiers@^2.0.2:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jsx-event-modifiers/-/babel-plugin-jsx-event-modifiers-2.0.5.tgz#93e6ebb5d7553bb08f9fedbf7a0bee3af09a0472"
-  integrity sha512-tWGnCk0whZ+nZcj9tYLw4+y08tPJXqaEjIxRJZS6DkUUae72Kz4BsoGpxt/Kow7mmgQJpvFCw8IPLSNh5rkZCg==
-
-babel-plugin-jsx-v-model@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jsx-v-model/-/babel-plugin-jsx-v-model-2.0.3.tgz#c396416b99cb1af782087315ae1d3e62e070f47d"
-  integrity sha512-SIx3Y3XxwGEz56Q1atwr5GaZsxJ2IRYmn5dl38LFkaTAvjnbNQxsZHO+ylJPsd+Hmv+ixJBYYFEekPBTHwiGfQ==
-  dependencies:
-    babel-plugin-syntax-jsx "^6.18.0"
-    html-tags "^2.0.0"
-    svg-tags "^1.0.0"
-
 [email protected], babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.7.0, babel-plugin-macros@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
@@ -7957,13 +7938,6 @@ babel-plugin-transform-undefined-to-void@^6.9.4:
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.9.4.tgz#be241ca81404030678b748717322b89d0c8fe280"
   integrity sha1-viQcqBQEAwZ4t0hxcyK4nQyP4oA=
 
-babel-plugin-transform-vue-jsx@^3.5.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-3.7.0.tgz#d40492e6692a36b594f7e9a1928f43e969740960"
-  integrity sha512-W39X07/n3oJMQd8tALBO+440NraGSF//Lo1ydd/9Nme3+QiRGFBb1Q39T9iixh0jZPPbfv3so18tNoIgLatymw==
-  dependencies:
-    esutils "^2.0.2"
-
 babel-polyfill@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
@@ -8110,17 +8084,6 @@ babel-preset-react-app@^9.0.0, babel-preset-react-app@^9.1.2:
     babel-plugin-macros "2.8.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"
 
-babel-preset-vue@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-vue/-/babel-preset-vue-2.0.2.tgz#cfadf1bd736125397481b5f8525ced0049a0c71f"
-  integrity sha1-z63xvXNhJTl0gbX4UlztAEmgxx8=
-  dependencies:
-    babel-helper-vue-jsx-merge-props "^2.0.2"
-    babel-plugin-jsx-event-modifiers "^2.0.2"
-    babel-plugin-jsx-v-model "^2.0.1"
-    babel-plugin-syntax-jsx "^6.18.0"
-    babel-plugin-transform-vue-jsx "^3.5.0"
-
 babel-register@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"