Fix react not defined

- by default, start-storybook use react-jsx 😦

Author: DrSensor

template/package.json

@@ -9,11 +9,10 @@
   ],
   "unpkg": "dist/{{name}}.min.js",
   "jsdelivr": "dist/{{name}}.min.js",
-  "main": "dist/{{name}}.js",
-  "module": "dist/{{name}}.es.js",
+  "main": "dist/{{name}}.cjs.js",
+  "module": "dist/{{name}}.m.js",
   "files": [
     "dist/",
-    "umd/",
     "src/components/",
     "src/mixins/"
   ],

template/src/mixins/useless-button.js

@@ -7,16 +7,26 @@ export default {
 
   watch: {
     toggle: function (newVal, oldVal) {
-      if (!newVal && oldVal) this.textMix = 'The button says: "I HATE REEED!!!"'
+      if (!newVal && oldVal) {
+        this.textMix = 'The button says: "I HATE REEED!!!"'
+        this.revert()
+      }
       if (newVal && !oldVal) this.textMix = 'this text is from mixins/useless-button.js'
     }
   },
 
+  mounted () {
+    console.log('Any life-cycle function will be executed first')
+  },
+
   methods: {
-    clicked () {
-      this.$action('REVERT BACK!!!', [this.hello])
+    // any defined methods can not be override with mixin
+    revert () {
       const random = (min, max) => (Math.floor(Math.random() * max) + min)
-      setTimeout(() => { this.toggle = !this.toggle }, random(700, 5000))
+      setTimeout(() => {
+        this.toggle = !this.toggle
+        this.$emit('click', 'REVERT BACK!!!')
+      }, random(500, 1000))
     }
   }
 }

template/src/stories/Story1/Scenario1.vue

@@ -32,9 +32,9 @@ export default {
   methods: {
     clicked (helloText) {
 {{#isEnabled addons 'actions'}}
-      this.$action('click', [this.hello])
+      this.$action('click', helloText)
 {{else}}
-      console.log('click', this.hello)
+      console.log('click', helloText)
 {{/isEnabled}}
     }
   }

template/src/stories/index.js

@@ -10,7 +10,8 @@ import Vue from 'vue'
 Vue.mixin({
   methods: {
     $action (label, payload) {
-      this.$emit('action', label, payload)
+      if (payload !== undefined) this.$emit('action', label, payload)
+      else this.$emit('action', label)
     }
   }
 })
@@ -48,9 +49,8 @@ require.context('.', true, /\.vue$/).keys()
 
       const story = () => {
         return {
-          render () {
-            return <story {{#isEnabled addons 'actions'}}onAction={action(`${storyName}/${componentName}`)} {{/isEnabled}}/>
-          },
+          template: '<story @action="act" />',
+          methods: { act: action(`${storyName}/${componentName}`) },
           components: {
             'story': Component
           }