Merge branch 'next' into tech/regen-lockfile

code/examples/svelte-kitchen-sink/src/stories/views/ActionLinkView.svelte

@@ -1,3 +1,13 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let onClick = (event) => {
+    dispatch('click', event);
+  };
+</script>
+
 <div class="main">
   <h1>Link Action</h1>
   <button on:click={onClick} class="link">
@@ -6,15 +16,4 @@
 </div>
 
 <style>
-
 </style>
-
-<script>
-  import { createEventDispatcher } from 'svelte';
-
-  const dispatch = createEventDispatcher();
-
-  function onClick(event) {
-    dispatch('click', event);
-  }
-</script>

code/lib/cli/rendererAssets/svelte/Button.svelte

@@ -28,15 +28,16 @@
   /**
    * Optional click handler
    */
-  function onClick(event) {
+  export let onClick = (event) => {
     dispatch('click', event);
-  }
+  };
 </script>
 
 <button
   type="button"
   class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
   {style}
-  on:click={onClick}>
+  on:click={onClick}
+>
   {label}
 </button>

code/renderers/svelte/template/components/Button.svelte

@@ -28,9 +28,9 @@
   /**
    * Optional click handler
    */
-  function onClick(event) {
+  export let onClick = (event) => {
     dispatch('click', event);
-  }
+  };
 </script>
 
 <button

docs/snippets/svelte/button-implementation.js.mdx

@@ -28,9 +28,9 @@
   /**
    * Optional click handler
    */
-  function onClick(event) {
+  export let onClick = (event) => {
     dispatch('click', event);
-  }
+  };
 </script>
 
 <button type="button" {style} on:click="{onClick}">{label}</button>