feat(svelte): enable reactivity of options via svelte action

Author: kelvinsjk

packages/svelte/README.md

@@ -1,3 +1,35 @@
 # @fireworks-js/svelte
 
 > https://github.com/crashmax-dev/fireworks-js
+
+## Installation
+
+```sh
+npm install @fireworks-js/svelte
+```
+
+## Usage
+
+#### [`fireworks-js`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-svelte)
+
+```svelte
+<script lang="ts">
+  import { Fireworks } from '@fireworks-js/svelte'
+  import type { FireworksOptions } from '@fireworks-js/svelte'
+
+  let fw: Fireworks
+  let options: FireworksOptions = {
+    opacity: 0.5
+  }
+
+  function toggleFireworks() {
+    const fireworks = fw.fireworksInstance()
+    if (fireworks.isRunning) {
+      fireworks.waitStop()
+    } else {
+      fireworks.start()
+    }
+  }
+</script>
+<Fireworks bind:this={fw} autostart={false} {options} class="fireworks" />
+```

packages/svelte/src/lib/fireworks.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte'
   import { Fireworks } from 'fireworks-js'
   import type { FireworksOptions } from 'fireworks-js'
 
@@ -9,25 +8,28 @@
   export let style: string = ''
   export let options: FireworksOptions = {}
 
-  let container: HTMLDivElement
   let fireworks: Fireworks
 
   export function fireworksInstance() {
     return fireworks
   }
 
-  onMount(() => {
+  function setup(container:HTMLDivElement, options: FireworksOptions) {
     fireworks = new Fireworks(container, options)
     if (autostart) {
       fireworks.start()
     }
-  })
-
-  onDestroy(() => {
-    fireworks?.stop()
-  })
+    return {
+      update(options: FireworksOptions) {
+        fireworks.updateOptions(options)
+      },
+      destroy() {
+        fireworks.stop()
+      }
+    }
+  }
 </script>
 
-<div bind:this={container} class={className} {style}>
+<div class={className} {style} use:setup={options}>
   <slot></slot>
 </div>