@tsparticles/pjs 3.0.0-alpha.1 → 3.0.0-beta.5

package/esm/index.js

@@ -1,23 +1,10 @@
+import { Particles } from "./marcbruederlin/Particles.js";
+import { initParticlesJS } from "./VincentGarreau/particles.js";
 const initPjs = (engine) => {
-    const particlesJS = (tagId, options) => {
-        return engine.load({ id: tagId, options: options });
-    };
-    particlesJS.load = (tagId, pathConfigJson, callback) => {
-        engine
-            .load({ id: tagId, url: pathConfigJson })
-            .then((container) => {
-            if (container) {
-                callback(container);
-            }
-        })
-            .catch(() => {
-            callback(undefined);
-        });
-    };
-    particlesJS.setOnClickHandler = (callback) => {
-        engine.setOnClickHandler(callback);
-    };
-    const pJSDom = engine.dom();
-    return { particlesJS, pJSDom };
+    const { particlesJS, pJSDom } = initParticlesJS(engine);
+    window.particlesJS = particlesJS;
+    window.pJSDom = pJSDom;
+    window.Particles = Particles;
+    return { particlesJS, pJSDom, Particles };
 };
 export { initPjs };

package/esm/marcbruederlin/Particles.js

@@ -0,0 +1,83 @@
+import { tsParticles } from "@tsparticles/engine";
+export class Particles {
+    static init(options) {
+        const particles = new Particles(), selector = options.selector;
+        if (!selector) {
+            throw new Error("No selector provided");
+        }
+        const el = document.querySelector(selector);
+        if (!el) {
+            throw new Error("No element found for selector");
+        }
+        tsParticles
+            .load({
+            id: selector.replace(".", "").replace("!", ""),
+            element: el,
+            options: {
+                fullScreen: {
+                    enable: false,
+                },
+                particles: {
+                    color: {
+                        value: options.color ?? "!000000",
+                    },
+                    links: {
+                        color: "random",
+                        distance: options.minDistance ?? 120,
+                        enable: options.connectParticles ?? false,
+                    },
+                    move: {
+                        enable: true,
+                        speed: options.speed ?? 0.5,
+                    },
+                    number: {
+                        value: options.maxParticles ?? 100,
+                    },
+                    size: {
+                        value: { min: 1, max: options.sizeVariations ?? 3 },
+                    },
+                },
+                responsive: options.responsive?.map((responsive) => ({
+                    maxWidth: responsive.breakpoint,
+                    options: {
+                        particles: {
+                            color: {
+                                value: responsive.options?.color,
+                            },
+                            links: {
+                                distance: responsive.options?.minDistance,
+                                enable: responsive.options?.connectParticles,
+                            },
+                            number: {
+                                value: options.maxParticles,
+                            },
+                            move: {
+                                enable: true,
+                                speed: responsive.options?.speed,
+                            },
+                            size: {
+                                value: responsive.options?.sizeVariations,
+                            },
+                        },
+                    },
+                })),
+            },
+        })
+            .then((container) => {
+            particles._container = container;
+        });
+        return particles;
+    }
+    destroy() {
+        const container = this._container;
+        container && container.destroy();
+    }
+    pauseAnimation() {
+        const container = this._container;
+        container && container.pause();
+    }
+    resumeAnimation() {
+        const container = this._container;
+        container && container.play();
+    }
+}

package/esm/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@tsparticles/pjs",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-beta.5",
   "description": "Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/matteobruni/tsparticles.git",
+    "url": "git+https://github.com/tsparticles/tsparticles.git",
     "directory": "bundles/pjs"
   },
   "keywords": [
@@ -64,21 +64,44 @@
   "author": "Matteo Bruni <matteo.bruni@me.com>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/matteobruni/tsparticles/issues"
+    "url": "https://github.com/tsparticles/tsparticles/issues"
   },
-  "funding": {
-    "type": "github",
-    "url": "https://github.com/sponsors/matteobruni"
-  },
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/matteobruni"
+    },
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/tsparticles"
+    },
+    {
+      "type": "buymeacoffee",
+      "url": "https://www.buymeacoffee.com/matteobruni"
+    }
+  ],
+  "sideEffects": false,
   "jsdelivr": "tsparticles.pjs.min.js",
   "unpkg": "tsparticles.pjs.min.js",
+  "browser": "browser/index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
   "types": "types/index.d.ts",
-  "publishConfig": {
-    "access": "public"
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "browser": "./browser/index.js",
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js",
+      "umd": "./umd/index.js",
+      "default": "./cjs/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.0-alpha.1"
+    "@tsparticles/engine": "^3.0.0-beta.5"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}