build: working on particles component

Author: matteobruni

components/lit/package.json

@@ -17,7 +17,8 @@
     "typescript"
   ],
   "dependencies": {
-    "lit": "^2.5.0"
+    "lit": "^2.5.0",
+    "tsparticles-engine": "^2.9.3"
   },
   "devDependencies": {
     "@web/dev-server": "^0.1.32",
@@ -31,4 +32,4 @@
   "files": [
     "/lib"
   ]
-}
+}

components/lit/src/lit-tsparticles.ts

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
+import { Container, Engine, tsParticles } from "tsparticles-engine";
 
 /**
  * The LitParticles element.
@@ -14,6 +15,44 @@ export class LitParticles extends LitElement {
   @property({ type: String })
   id = "tsparticles";
 
+  /**
+   * The options
+   */
+  @property({ type: Object })
+  options = {};
+
+  container?: Container;
+
+  @property({ type: Function })
+  particlesInit?: (engine: Engine) => Promise<void>;
+
+  @property({ type: Function })
+  particlesLoaded?: (container?: Container) => Promise<void>;
+
+  constructor() {
+    super();
+
+    this.particlesInit?.(tsParticles);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    tsParticles.load(this.id, this.options).then(async (container) => {
+      this.container = container;
+
+      await this.particlesLoaded?.(container);
+    });
+  }
+
+  disconnectedCallback(): void {
+    if (this.container) {
+      this.container.destroy();
+    }
+
+    super.disconnectedCallback();
+  }
+
   render() {
     return html`<div id=${this.id}></div>`;
   }