Merge pull request #23 from longnguyen2004/main

Add `onDestroy` for proper cleanup + Update types

Author: matteobruni

components/svelte/src/Particles.svelte

@@ -1,7 +1,7 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-    import { afterUpdate, createEventDispatcher } from "svelte";
+    import { afterUpdate, createEventDispatcher, onDestroy } from "svelte";
     import type { ISourceOptions } from "tsparticles-engine";
     import { tsParticles } from "tsparticles-engine";
 
@@ -21,20 +21,25 @@
 
     let oldId = id;
 
-    afterUpdate(async () => {
-        tsParticles.init();
-
-        if (particlesInit) {
-            await particlesInit(tsParticles);
-        }
-
+    function destroyOldContainer()
+    {
         if (oldId) {
             const oldContainer = tsParticles.dom().find(c => c.id === oldId);
 
             if (oldContainer) {
                 oldContainer.destroy();
             }
         }
+    }
+
+    afterUpdate(async () => {
+        tsParticles.init();
+
+        if (particlesInit) {
+            await particlesInit(tsParticles);
+        }
+
+        destroyOldContainer();
 
         if (id) {
             const cb = container => {
@@ -64,6 +69,8 @@
             });
         }
     });
+	
+    onDestroy(destroyOldContainer);
 </script>
 
 <div {id} class={cssClass} {style} />

components/svelte/src/index.d.ts

@@ -10,6 +10,7 @@ declare module "svelte-particles" {
         url?: string;
         id?: string;
         class?: string;
+        style?: string;
         particlesInit: (engine: Engine) => Promise<void>;
     };
     type ParticlesEvents = CustomEventWrapper<{