From 12441ff8bab18b439df0def93017d2f64ba58277 Mon Sep 17 00:00:00 2001
From: Chris Horton <chorton@sgfleet.com>
Date: Mon, 29 Nov 2021 11:16:22 +1100
Subject: [PATCH] Changed to use Svelte actions & DOM event forward

---
 src/App.svelte            |  6 ++----
 src/MaterialButton.svelte | 13 +++++--------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 8fb6446..65a200d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,16 +3,14 @@
 </script>
 
 <MaterialButton
-  id="one"
   text="first button"
-  onClickFunction={() => {
+  on:click={() => {
     console.log("you just clicked the first button");
   }}
 />
 <MaterialButton
-  id="two"
   text="second button"
-  onClickFunction={() => {
+  on:click={() => {
     console.log("you just clicked the second button");
   }}
 />
diff --git a/src/MaterialButton.svelte b/src/MaterialButton.svelte
index eaf45ba..46e2427 100644
--- a/src/MaterialButton.svelte
+++ b/src/MaterialButton.svelte
@@ -1,17 +1,14 @@
 <script>
-  import { onMount } from "svelte";
   import { MDCRipple } from "@material/ripple";
 
-  onMount(() => {
-    const buttonRipple = new MDCRipple(document.getElementById(id));
-  });
-
-  export let id;
+  function materialButton(element) {
+    const buttonRipple = new MDCRipple(element);
+  }
   export let text;
-  export let onClickFunction;
+
 </script>
 
-<button class="mdc-button" {id} on:click={onClickFunction}>
+<button class="mdc-button" use:materialButton on:click>
   <span class="mdc-button__ripple" />
   <span class="mdc-button__label">{text}</span>
 </button>