WIP - add vue support

app/vue/.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "es2016", "stage-0", "react"]
+  "presets": ["env", "stage-0", "react"]
 }

app/vue/README.md

@@ -10,6 +10,10 @@
 Storybook for Vue is a UI development environment for your Vue components.
 With it, you can visualize different states of your UI components and develop them interactively.
 
+## Remarques
+
+-   When using custom components or extension (e.g `Vue.use`). You will need to declare those in the `./storybook/config.js`.
+
 > ## WARNING
 >
 > **This package is highly experimental**

app/vue/package.json

@@ -32,8 +32,7 @@
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
     "babel-plugin-react-docgen": "^1.5.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-es2016": "^6.24.1",
+    "babel-preset-env": "1.5.2",
     "babel-preset-react": "^6.24.1",
     "babel-preset-react-app": "^3.0.0",
     "babel-preset-stage-0": "^6.24.1",
@@ -67,10 +66,10 @@
     "url-loader": "^0.5.8",
     "util-deprecate": "^1.0.2",
     "uuid": "^3.0.1",
+    "vue-hot-reload-api": "2.1.0",
     "vue-loader": "^12.2.1",
-    "vue-template-compiler": "^2.3.4",
     "vue-style-loader": "3.0.1",
-    "vue-hot-reload-api": "2.1.0",
+    "vue-template-compiler": "^2.3.4",
     "webpack": "^2.5.1",
     "webpack-dev-middleware": "^1.10.2",
     "webpack-hot-middleware": "^2.18.0"

app/vue/src/client/preview/client_api.js

@@ -60,10 +60,14 @@ export default class ClientApi {
       }
 
       let component = getStory;
-      if (typeof getStory === 'string') {
-        component = { template: getStory };
-      } else if (typeof getStory === 'function') {
-        component = { render: getStory };
+      if (typeof getStory === 'function') {
+        component = getStory();
+      }
+
+      if (typeof component === 'string') {
+        component = { template: component };
+      } else if (typeof component === 'function') {
+        component = { render: component };
       }
 
       // Wrap the getStory function with each decorator. The first

app/vue/src/server/config/babel.js

@@ -17,8 +17,7 @@ module.exports = {
   // `find-cache-dir` will create the cache directory under the node_modules directory.
   cacheDirectory: findCacheDir({ name: 'react-storybook' }),
   presets: [
-    require.resolve('babel-preset-es2015'),
-    require.resolve('babel-preset-es2016'),
+    require.resolve('babel-preset-env'),
     require.resolve('babel-preset-stage-0'),
     require.resolve('babel-preset-react'),
   ],

app/vue/src/server/config/babel.prod.js

@@ -11,8 +11,7 @@ module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
   presets: [
-    require.resolve('babel-preset-es2015'),
-    require.resolve('babel-preset-es2016'),
+    require.resolve('babel-preset-env'),
     require.resolve('babel-preset-stage-0'),
     require.resolve('babel-preset-react'),
   ],

app/vue/src/server/config/webpack.config.js

@@ -52,7 +52,7 @@ export default function() {
       // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
       modules: ['node_modules'].concat(nodePaths),
       alias: {
-        'vue$': 'vue/dist/vue.esm.js'
+        'vue': path.resolve(path.join(__dirname, '../../../node_modules', 'vue/dist/vue.esm.js'))
       }
     },
     performance: {

app/vue/src/server/config/webpack.config.prod.js

@@ -54,6 +54,9 @@ export default function() {
       // Add support to NODE_PATH. With this we could avoid relative path imports.
       // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
       modules: ['node_modules'].concat(nodePaths),
+      alias: {
+        'vue': path.resolve(path.join(__dirname, '../../../node_modules', 'vue/dist/vue.esm.js'))
+      }
     },
   };
 

examples/vue/src/stories/index.js

@@ -10,7 +10,16 @@ import MyButton from './Button.vue';
 storiesOf('Button')
   // Works if Vue.component is called in the config.js in .storybook 
   .add('rounded markup only', '<my-button :rounded="true">not rounded</my-button>')
+  .add('story as a function template', () => '<my-button :rounded="true">not rounded</my-button>')
+  .add('story as a function renderer', () => (h) => h('div', ['Hello renderer']))
+  .add('story as a function component with template', () => ({
+    template: '<my-button :rounded="true">not rounded</my-button>',
+  }))
+  .add('story as a function component with renderer', () => ({
+    render: (h) => h('my-button', { props : { rounded: true }}),
+  }))
   .add('with vuex', {
+    components: { MyButton },
     template: '<my-button :handle-click="log">{{ $store.state.count }}</my-button>',
     store: new Vuex.Store({
       state: { count: 0 },