chore(packages/svelte): refactor svelte wrapper

Author: crashmax-dev

examples/with-svelte/src/App.svelte

@@ -1,19 +1,40 @@
 <script lang="ts">
   import { Fireworks } from '@fireworks-js/svelte'
   import type { FireworksOptions } from '@fireworks-js/svelte'
+  import { onMount } from 'svelte'
 
+  let fw: Fireworks
   let enabled = true
   let options: FireworksOptions = {
     opacity: 0.5
   }
+
+  function toggleFireworks() {
+    const fireworks = fw.fireworksInstance()
+    if (fireworks.isRunning) {
+      fireworks.waitStop()
+    } else {
+      fireworks.start()
+    }
+  }
+
+  onMount(() => {
+    const fireworks = fw.fireworksInstance()
+    console.log(fireworks)
+  })
 </script>
 
 <main>
-  <button on:click={() => (enabled = !enabled)} class="btn">
-    {enabled ? 'Enabled' : 'Disabled'}
-  </button>
+  <div class="buttons">
+    <button on:click={() => (enabled = !enabled)}>
+      {enabled ? 'Enabled' : 'Disabled'}
+    </button>
+    <button on:click={() => toggleFireworks()}>
+      Toggle
+    </button>
+  </div>
   {#if enabled}
-    <Fireworks {options} class="fireworks" />
+    <Fireworks bind:this={fw} autostart={false} {options} class="fireworks" />
   {/if}
 </main>
 
@@ -27,7 +48,9 @@
     background: #000;
   }
 
-  .btn {
+  .buttons {
+    display: flex;
+    gap: 4px;
     position: absolute;
     z-index: 1;
   }

packages/svelte/src/lib/fireworks.svelte

@@ -5,15 +5,22 @@
 
   let className = ''
   export { className as class }
+  export let autostart = true
   export let style: string = ''
   export let options: FireworksOptions = {}
 
   let container: HTMLDivElement
   let fireworks: Fireworks
 
+  export function fireworksInstance() {
+    return fireworks
+  }
+
   onMount(() => {
     fireworks = new Fireworks(container, options)
-    fireworks.start()
+    if (autostart) {
+      fireworks.start()
+    }
   })
 
   onDestroy(() => {

packages/svelte/src/routes/+page.svelte

@@ -1,19 +1,40 @@
 <script lang="ts">
   import { Fireworks } from '../lib'
   import type { FireworksOptions } from '../lib'
+  import { onMount } from 'svelte'
 
+  let fw: Fireworks
   let enabled = true
   let options: FireworksOptions = {
     opacity: 0.5
   }
+
+  function toggleFireworks() {
+    const fireworks = fw.fireworksInstance()
+    if (fireworks.isRunning) {
+      fireworks.waitStop()
+    } else {
+      fireworks.start()
+    }
+  }
+
+  onMount(() => {
+    const fireworks = fw.fireworksInstance()
+    console.log(fireworks)
+  })
 </script>
 
 <main>
-  <button on:click={() => (enabled = !enabled)} class="btn">
-    {enabled ? 'Enabled' : 'Disabled'}
-  </button>
+  <div class="buttons">
+    <button on:click={() => (enabled = !enabled)}>
+      {enabled ? 'Enabled' : 'Disabled'}
+    </button>
+    <button on:click={() => toggleFireworks()}>
+      Toggle
+    </button>
+  </div>
   {#if enabled}
-    <Fireworks {options} class="fireworks" />
+    <Fireworks bind:this={fw} autostart={false} {options} class="fireworks" />
   {/if}
 </main>
 
@@ -27,7 +48,9 @@
     background: #000;
   }
 
-  .btn {
+  .buttons {
+    display: flex;
+    gap: 4px;
     position: absolute;
     z-index: 1;
   }