Merge pull request #108 from kelvinsjk/svelte-options-reactivity

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

Author: crashmax-dev

examples/with-svelte/src/App.svelte

@@ -4,7 +4,7 @@
   import { onMount } from 'svelte'
 
   let fw: Fireworks
-  let enabled = true
+  let mounted = true
   let options: FireworksOptions = {
     opacity: 0.5
   }
@@ -26,15 +26,16 @@
 
 <main>
   <div class="buttons">
-    <button on:click={() => (enabled = !enabled)}>
-      {enabled ? 'Enabled' : 'Disabled'}
-    </button>
-    <button on:click={() => toggleFireworks()}>
-      Toggle
+    <button on:click={() => (mounted = !mounted)}>
+      {mounted ? 'Mounted' : 'Unmounted'}
     </button>
   </div>
-  {#if enabled}
-    <Fireworks bind:this={fw} autostart={false} {options} class="fireworks" />
+  {#if mounted}
+    <Fireworks
+      bind:this={fw}
+      {options}
+      class="fireworks"
+    />
   {/if}
 </main>
 

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,32 @@
   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}>
-  <slot></slot>
+<div
+  use:setup={options}
+  class={className}
+  {style}
+>
+  <slot />
 </div>