build: prepared working component and demo app

matteobruni · matteobruni · commit a62c6aeb0de5 · 2023-03-09T23:51:38.000+01:00
diff --git a/apps/lit/dev/index.html b/apps/lit/dev/index.html
@@ -13,6 +13,6 @@
     </style>
 </head>
 <body>
-<lit-particles />
+<lit-particles options='{ "background": { "color": "#000" }, "particles": { "number": { "value": 100 } } }' />
 </body>
 </html>
diff --git a/apps/lit/package.json b/apps/lit/package.json
@@ -11,7 +11,7 @@
     "lint": "lit-analyzer && eslint 'src/**/*.ts'",
     "format": "prettier src/* --write",
     "analyze": "wca analyze \"src/**/*.ts\" --outFile custom-elements.json",
-    "serve": "es-dev-server",
+    "serve": "web-dev-server",
     "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
   },
   "keywords": [
@@ -23,9 +23,9 @@
   "license": "BSD-3-Clause",
   "dependencies": {
     "lit": "^2.6.1",
-    "lit-element": "^3.2.2",
     "lit-tsparticles": "^2.9.3",
-    "tsparticles": "^2.9.3"
+    "tsparticles": "^2.9.3",
+    "tsparticles-engine": "^2.9.3"
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.0",
@@ -37,18 +37,19 @@
     "@types/mocha": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
+    "@web/dev-server": "^0.1.35",
     "chai": "^4.2.0",
     "deepmerge": "^4.2.2",
-    "es-dev-server": "^2.0.0",
     "eslint": "^8.0.0",
     "karma": "^6.0.0",
     "karma-chai": "^0.1.0",
     "karma-mocha": "^2.0.0",
     "lit-analyzer": "^1.1.9",
     "mocha": "^10.0.0",
+    "node-resolve": "^1.3.4",
     "prettier": "^2.0.0",
     "rimraf": "^4.0.0",
-    "rollup": "^3.0.0",
+    "rollup": "^2.79.1",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^7.0.0",
diff --git a/apps/lit/src/index.ts b/apps/lit/src/index.ts
@@ -1 +1,7 @@
-import "lit-tsparticles";
+import 'lit-tsparticles';
+import {loadFull} from 'tsparticles';
+import {tsParticles} from 'tsparticles-engine';
+
+(async () => {
+  await loadFull(tsParticles);
+})();
diff --git a/apps/lit/web-dev-server.config.mjs b/apps/lit/web-dev-server.config.mjs
@@ -2,7 +2,7 @@ export default {
   open: true,
   watch: true,
   nodeResolve: true,
-  appIndex: 'demo/index.html',
+  appIndex: 'dev/index.html',
   // in a monorepo you need to set the root dir to resolve modules
   rootDir: '../../',
 };
diff --git a/components/lit/demo/index.html b/components/lit/demo/index.html
diff --git a/components/lit/package.json b/components/lit/package.json
@@ -3,7 +3,7 @@
   "version": "2.9.3",
   "description": "Official tsParticles Lit Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, Angular, React, Vue.js (2.x and 3.x), Svelte, jQuery, Preact, Riot.js, Solid.js, Inferno.",
   "type": "module",
-  "main": "lib/lit-tsparticles.js",
+  "main": "./lib/lit-tsparticles.js",
   "scripts": {
     "serve": "wds --node-resolve -nwo demo",
     "build": "tsc",
@@ -18,17 +18,13 @@
   ],
   "dependencies": {
     "lit": "^2.6.1",
-    "lit-element": "^3.2.2",
     "tsparticles-engine": "^2.9.3"
   },
   "devDependencies": {
-    "@web/dev-server": "^0.1.32",
     "typescript": "^4.9.5"
   },
   "exports": {
-    "./lib/lit-tsparticles.js": {
-      "default": "./lib/lit-tsparticles.js"
-    }
+    ".": "./lib/lit-tsparticles.js"
   },
   "files": [
     "/lib"
diff --git a/components/lit/src/lit-tsparticles.ts b/components/lit/src/lit-tsparticles.ts
@@ -1,6 +1,11 @@
 import { LitElement, html, PropertyValues } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { Container, Engine, tsParticles } from "tsparticles-engine";
+import {
+  Container,
+  Engine,
+  ISourceOptions,
+  tsParticles,
+} from "tsparticles-engine";
 
 /**
  * The LitParticles element.
@@ -19,43 +24,31 @@ export class LitParticles extends LitElement {
    * The options
    */
   @property({ type: Object })
-  options = {};
+  options?: ISourceOptions;
 
-  container?: Container;
-
-  initialized = false;
-
-  @property({ type: Function })
-  particlesInit?: (engine: Engine) => Promise<void>;
-
-  @property({ type: Function })
-  particlesLoaded?: (container?: Container) => Promise<void>;
-
-  connectedCallback() {
-    super.connectedCallback();
+  /**
+   * The url
+   */
+  @property({ type: String })
+  url?: string;
 
-    this.particlesInit?.(tsParticles).then(() => {
-      this.initialized = true;
-    });
-  }
+  container?: Container;
 
   update(changedProperties: PropertyValues) {
     super.update(changedProperties);
 
-    if (this.initialized) {
-      tsParticles.load(this.id, this.options).then((container) => {
-        this.container = container;
+    const id = this.id ?? "tsparticles";
 
-        this.particlesLoaded?.(container);
-      });
+    if (this.options) {
+      tsParticles.load(id, this.options);
+    } else if (this.url) {
+      tsParticles.loadJSON(id, this.url);
+    } else {
+      throw new Error("No options or url provided");
     }
   }
 
   render() {
-    if (!this.initialized) {
-      return html``;
-    }
-
     return html`<div id=${this.id}>
       <canvas></canvas>
     </div>`;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
