Added support for actions addon

ADDONS_SUPPORT.md

@@ -3,7 +3,7 @@
 | |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)|
 | ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
 |[a11y](addons/a11y)              |+| |+|+|+|+|+|+| |
-|[actions](addons/actions)        |+|+|+|+|+|+|+|+| |
+|[actions](addons/actions)        |+|+|+|+|+|+|+|+|+|
 |[backgrounds](addons/backgrounds)  |+| |+|+|+|+|+|+|+|
 |[centered](addons/centered)      |+| |+|+| |+|+| |+|
 |[events](addons/events)          |+| |+|+|+|+|+|+| |

app/svelte/src/client/preview/render.js

@@ -10,7 +10,7 @@ export default function render({
   showError,
   // showException,
 }) {
-  const { Component, data } = story();
+  const { Component, data, methods } = story();
 
   target.innerHTML = '';
 
@@ -27,7 +27,13 @@ export default function render({
     return;
   }
 
-  new Component({target, data}); // eslint-disable-line
+  const component = new Component({target, data}); // eslint-disable-line
+
+  if (methods) {
+    Object.keys(methods).forEach(methodName => {
+      component[methodName] = methods[methodName];
+    });
+  }
 
   showMain();
 }

examples/svelte-kitchen-sink/src/components/Button.svelte

@@ -1,6 +1,6 @@
 <button
   class="button {roundedClass}"
-  on:click="toggleRoundedClass(event)">
+  on:click="onClick(event)">
   <slot></slot>
 </button>
 
@@ -22,6 +22,7 @@
   export default {
     data () {
       return {
+        count: 0,
         rounded: true
       };
     },
@@ -33,10 +34,12 @@
     },
 
     methods: {
-      toggleRoundedClass() {
+      onClick(event) {
         const {rounded} = this.get();
 
         this.set({rounded: !rounded});
+
+        this.fire('click', event)
       }
     }
   }

examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js

@@ -0,0 +1,19 @@
+import { storiesOf } from '@storybook/svelte';
+import { action } from '@storybook/addon-actions';
+
+import ButtonView from './views/ButtonView.svelte';
+import Button from '../components/Button.svelte';
+
+storiesOf('Addon|Actions', module)
+  .add('Action on view method', () => ({
+    Component: ButtonView,
+    methods: {
+      onButtonClicked: action('I am logging in the actions tab'),
+    },
+  }))
+  .add('Action on component method', () => ({
+    Component: Button,
+    methods: {
+      onClick: action('I am logging in the actions tab too'),
+    },
+  }));

examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte

@@ -1,14 +1,32 @@
-<Button rounded="{true}">{message}</Button>
+<h1>Button view</h1>
+<Button rounded="{true}" on:click="onButtonClicked(event)">{message} {count}</Button>
+<p>A little text to show this is a view. If we need to test components in a Svelte
+environment, for instance to test slot behaviour, then wrapping the component up
+in a view made just for the story is the simplest way to achieve this.</p>
 
 <script>
   import Button from '../../components/Button.svelte';
 
   export default {
     data() {
       return {
-        message: 'Default text'
+        count: 0,
+        message: 'You clicked:'
       };
     },
-    components: { Button }
+
+    methods: {
+      onButtonClicked(event) {
+        let {count} = this.get();
+
+        count += 1;
+
+        this.set({count})
+      }
+    },
+
+    components: {
+      Button
+    }
   };
 </script>