storybookjs · ndelangen · Aug 23, 2018 · Jun 9, 2018 · Jun 10, 2018 · Jun 10, 2018
diff --git a/.babelrc b/.babelrc
@@ -1,16 +1,34 @@
 {
-  "presets": ["env", "stage-0", "react"],
-  "env": {
-    "test": {
-      "plugins": ["require-context-hook"]
-    },
-    "plugins": [
-      "emotion",
-      "babel-plugin-macros",
-      ["transform-runtime", {
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-stage-0", { "decoratorsLegacy": true }],
+    "@babel/preset-react",
+    "@babel/preset-flow"
+  ],
+  "plugins": [
+    "babel-plugin-emotion",
+    "babel-plugin-macros",
+    [
+      "@babel/plugin-transform-runtime",
+      {
         "polyfill": false,
         "regenerator": true
-      }]
+      }
     ]
-  }
+  ],
+  "env": {
+    "test": {
+      "plugins": ["babel-plugin-require-context-hook"]
+    }
+  },
+  "overrides": [
+    {
+      "test": "./examples/vue-kitchen-sink",
+      "presets": [
+        "@babel/preset-env",
+        ["@babel/preset-stage-0", { "decoratorsLegacy": true }],
+        "babel-preset-vue"
+      ]
+    }
+  ]
 }
diff --git a/.eslintignore b/.eslintignore
@@ -10,6 +10,7 @@ lib/cli/test
 *.js.map
 
 !.remarkrc.js
+!.babelrc.js
 !.eslintrc.js
 !.eslintrc-markdown.js
 !.jest.config.js

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -7,6 +7,8 @@
     -   [Removed addWithInfo](#removed-add-with-info)
     -   [Removed RN addons](#removed-rn-addons)
     -   [Storyshots changes](#storyshots-changes)
+    -   [Webpack 4](#webpack-4)
+    -   [Babel 7](#babel-7)
 -   [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
 -   [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
     -   [Refactored Knobs](#refactored-knobs)
@@ -54,6 +56,20 @@ will need to add a babel plugin to polyfill this functionality.
 A possible plugin might be [babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook).
 [README](https://github.com/storybooks/storybook/tree/master/addons/storyshots/storyshots-core#configure-jest-to-work-with-webpacks-requirecontext)
 
+### Webpack 4
+
+Storybook now uses webpack 4. If you have a [custom webpack config](https://storybook.js.org/configurations/custom-webpack-config/), make sure that all the loaders and plugins you use support webpack 4.
+
+### Babel 7
+
+Storybook now uses Babel 7. There's a couple of cases when it can break with your app:
+
+  * If you aren't using Babel yourself, and don't have .babelrc, install following dependencies:
+    ```
+    npm i -D babel-core@bridge @babel/core babel-loader@next
+    ```
+  * If you're using Babel 6, make sure that you have direct dependencies on `babel-core@6` and `babel-loader@7`.
+
 ## From version 3.3.x to 3.4.x
 
 There are no expected breaking changes in the 3.4.x release, but 3.4 contains a major refactor to make it easier to support new frameworks, and we will document any breaking changes here if they arise.

@@ -30,7 +30,6 @@
     "@storybook/components": "4.0.0-alpha.14",
     "@storybook/core-events": "4.0.0-alpha.14",
     "axe-core": "^3.0.3",
-    "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "prop-types": "^15.6.1",
     "react-emotion": "^9.1.3"

@@ -26,7 +26,6 @@
   "dependencies": {
     "@storybook/addons": "4.0.0-alpha.14",
     "@storybook/core-events": "4.0.0-alpha.14",
-    "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "prop-types": "^15.6.1",
     "react-emotion": "^9.1.3",

@@ -21,7 +21,6 @@
   "dependencies": {
     "@storybook/addons": "4.0.0-alpha.14",
     "@storybook/core-events": "4.0.0-alpha.14",
-    "babel-runtime": "^6.26.0",
     "format-json": "^1.0.3",
     "prop-types": "^15.6.1",
     "react-emotion": "^9.1.3",

diff --git a/addons/graphql/package.json b/addons/graphql/package.json
@@ -20,7 +20,6 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "graphiql": "^0.11.11",
     "graphql": "^0.13.2",

@@ -16,7 +16,6 @@
     "@storybook/addons": "4.0.0-alpha.14",
     "@storybook/client-logger": "4.0.0-alpha.14",
     "@storybook/components": "4.0.0-alpha.14",
-    "babel-runtime": "^6.26.0",
     "core-js": "2.5.7",
     "global": "^4.3.2",
     "marksy": "^6.0.3",

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`addon Info should render <Info /> and external markdown 1`] = `
-.emotion-2 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -22,7 +22,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
   overflow-x: scroll;
 }
 
-.emotion-1 {
+.emotion-2 {
   overflow: hidden;
   border: 1px solid #eee;
   border-radius: 3px;
@@ -38,12 +38,12 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
   flex-shrink: 0;
 }
 
-.emotion-1:hover {
+.emotion-2:hover {
   background-color: #f4f7fa;
   border-color: #ddd;
 }
 
-.emotion-1:active {
+.emotion-2:active {
   background-color: #e9ecef;
   border-color: #ccc;
 }
@@ -123,7 +123,9 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
           >
             <div>
               <h1>
-                function func(x) {return x + 1;}
+                function func(x) {
+        return x + 1;
+      }
               </h1>
               <h2>
                 [object Object]
@@ -305,7 +307,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
               >
                 <Styled(pre)>
                   <pre
-                    className="emotion-2"
+                    className="emotion-4 emotion-5"
                   >
                     <div>
                       <Node
@@ -1218,14 +1220,14 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
                         styles={Object {}}
                       >
                         <button
-                          className="emotion-1"
+                          className="emotion-2 emotion-3"
                           onClick={[Function]}
                         >
                           <Styled(div)
                             toggled={false}
                           >
                             <div
-                              className="emotion-0"
+                              className="emotion-0 emotion-1"
                             >
                               <div
                                 style={
@@ -1306,7 +1308,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
 `;
 
 exports[`addon Info should render <Info /> and markdown 1`] = `
-.emotion-2 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1327,7 +1329,7 @@ exports[`addon Info should render <Info /> and markdown 1`] = `
   overflow-x: scroll;
 }
 
-.emotion-1 {
+.emotion-2 {
   overflow: hidden;
   border: 1px solid #eee;
   border-radius: 3px;
@@ -1343,12 +1345,12 @@ exports[`addon Info should render <Info /> and markdown 1`] = `
   flex-shrink: 0;
 }
 
-.emotion-1:hover {
+.emotion-2:hover {
   background-color: #f4f7fa;
   border-color: #ddd;
 }
 
-.emotion-1:active {
+.emotion-2:active {
   background-color: #e9ecef;
   border-color: #ccc;
 }
@@ -1430,7 +1432,9 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
           >
             <div>
               <h1>
-                function func(x) {return x + 1;}
+                function func(x) {
+        return x + 1;
+      }
               </h1>
               <h2>
                 [object Object]
@@ -1703,7 +1707,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
               >
                 <Styled(pre)>
                   <pre
-                    className="emotion-2"
+                    className="emotion-4 emotion-5"
                   >
                     <div>
                       <Node
@@ -2616,14 +2620,14 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                         styles={Object {}}
                       >
                         <button
-                          className="emotion-1"
+                          className="emotion-2 emotion-3"
                           onClick={[Function]}
                         >
                           <Styled(div)
                             toggled={false}
                           >
                             <div
-                              className="emotion-0"
+                              className="emotion-0 emotion-1"
                             >
                               <div
                                 style={

@@ -27,7 +27,6 @@
   "dependencies": {
     "@storybook/addons": "4.0.0-alpha.14",
     "@storybook/components": "4.0.0-alpha.14",
-    "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "prop-types": "^15.6.1",
     "react-emotion": "^9.1.3",

@@ -16,7 +16,6 @@
     "@storybook/addons": "4.0.0-alpha.14",
     "@storybook/components": "4.0.0-alpha.14",
     "@storybook/core-events": "4.0.0-alpha.14",
-    "babel-runtime": "^6.26.0",
     "copy-to-clipboard": "^3.0.8",
     "escape-html": "^1.0.3",
     "fast-deep-equal": "^2.0.1",

@@ -23,7 +23,6 @@
     "@storybook/addons": "4.0.0-alpha.14",
     "@storybook/components": "4.0.0-alpha.14",
     "@storybook/core-events": "4.0.0-alpha.14",
-    "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "prop-types": "^15.6.1"
   },

@@ -19,7 +19,6 @@
   },
   "dependencies": {
     "@storybook/addons": "4.0.0-alpha.14",
-    "babel-runtime": "^6.26.0",
     "marked": "^0.4.0",
     "prop-types": "^15.6.1",
     "react-emotion": "^9.1.3"

@@ -19,8 +19,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.14",
-    "babel-runtime": "^6.26.0"
+    "@storybook/addons": "4.0.0-alpha.14"
   },
   "peerDependencies": {
     "react": "*"

@@ -16,8 +16,8 @@
     "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
+    "@babel/runtime": "^7.0.0-beta.51",
     "@storybook/addons": "4.0.0-alpha.14",
-    "babel-runtime": "^6.26.0",
     "glob": "^7.1.2",
     "global": "^4.3.2",
     "jest-specific-snapshot": "^0.5.0",