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

package/README.md

@@ -2,9 +2,9 @@
 
 # tsParticles Particles.js Compatibility Package
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-particles.js/badge)](https://www.jsdelivr.com/package/npm/tsparticles-particles.js) [![npmjs](https://badge.fury.io/js/tsparticles-particles.js.svg)](https://www.npmjs.com/package/tsparticles-particles.js) [![npmjs](https://img.shields.io/npm/dt/tsparticles-particles.js)](https://www.npmjs.com/package/tsparticles-particles.js) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/particles.js/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/particles.js) [![npmjs](https://badge.fury.io/js/@tsparticles/particles.js.svg)](https://www.npmjs.com/package/@tsparticles/particles.js) [![npmjs](https://img.shields.io/npm/dt/@tsparticles/particles.js)](https://www.npmjs.com/package/@tsparticles/particles.js) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
-[tsParticles](https://github.com/matteobruni/tsparticles) particles.js compatibility library.
+[tsParticles](https://github.com/tsparticles/tsparticles) particles.js compatibility library.
 
 ## How to use it
 
@@ -17,12 +17,8 @@ The CDN/Vanilla version JS has two different files:
 
 #### Bundle
 
-Including the `tsparticles.pjs.bundle.min.js` file will work exactly like `v1`, you can start using the `tsParticles` or
-the `particlesJS` instance in the same way.
-
-This is the easiest usage, since it's a single file with the some of the `v1` features.
-
-All new features will be added as external packages, this bundle is recommended for migrating from `v1` easily.
+Including the `tsparticles.pjs.bundle.min.js` file will work exactly like `v1`, you can start using the `tsParticles`,
+the `particlesJS` instance, or the `Particles` object in the same way.
 
 #### Not Bundle
 
@@ -49,3 +45,45 @@ tsParticles.load({
   },
 });
 ```
+
+#### Options
+
+Here you can use ParticlesJS or tsParticles options, they will work both fine.
+
+### Alternative Usage
+
+```javascript
+const { Particles } = initPjs(tsParticles); // not needed if using the bundle script, required for any other installation
+
+Particles.init({
+  /* options */
+});
+```
+
+#### Particles Options (only for Particles.init)
+
+| Option             | Type               | Default   | Description                                                           |
+| ------------------ | ------------------ | --------- | --------------------------------------------------------------------- |
+| `selector`         | string             | -         | _Required:_ The CSS selector of your canvas element                   |
+| `maxParticles`     | integer            | `100`     | _Optional:_ Maximum amount of particles                               |
+| `sizeVariations`   | integer            | `3`       | _Optional:_ Amount of size variations                                 |
+| `speed`            | integer            | `0.5`     | _Optional:_ Movement speed of the particles                           |
+| `color`            | string or string[] | `#000000` | _Optional:_ Color(s) of the particles and connecting lines            |
+| `minDistance`      | integer            | `120`     | _Optional:_ Distance in `px` for connecting lines                     |
+| `connectParticles` | boolean            | `false`   | _Optional:_ `true`/`false` if connecting lines should be drawn or not |
+| `responsive`       | array              | `null`    | _Optional:_ Array of objects containing breakpoints and options       |
+
+##### Responsive Options
+
+| Option       | Type    | Default | Description                                               |
+| ------------ | ------- | ------- | --------------------------------------------------------- |
+| `breakpoint` | integer | -       | _Required:_ Breakpoint in `px`                            |
+| `options`    | object  | -       | _Required:_ Options object, that overrides default values |
+
+#### Methods
+
+| Method            | Description                         |
+| ----------------- | ----------------------------------- |
+| `pauseAnimation`  | Pauses/stops the particle animation |
+| `resumeAnimation` | Continues the particle animation    |
+| `destroy`         | Destroys the plugin                 |

package/browser/VincentGarreau/particles.js

@@ -0,0 +1,23 @@
+const initParticlesJS = (engine) => {
+    const particlesJS = (tagId, options) => {
+        return engine.load({ id: tagId, 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 };
+};
+export { initParticlesJS };

package/browser/bundle.js

@@ -1,5 +1,5 @@
 import { initPjs } from ".";
 import { tsParticles } from "@tsparticles/engine";
-const { particlesJS, pJSDom } = initPjs(tsParticles);
+const { particlesJS, pJSDom, Particles } = initPjs(tsParticles);
 export * from "@tsparticles/engine";
-export { particlesJS, pJSDom };
+export { particlesJS, pJSDom, Particles };

package/browser/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/browser/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/browser/package.json

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

package/cjs/VincentGarreau/particles.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initParticlesJS = void 0;
+const initParticlesJS = (engine) => {
+    const particlesJS = (tagId, options) => {
+        return engine.load({ id: tagId, 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 };
+};
+exports.initParticlesJS = initParticlesJS;

package/cjs/bundle.js

@@ -14,10 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pJSDom = exports.particlesJS = void 0;
+exports.Particles = exports.pJSDom = exports.particlesJS = void 0;
 const _1 = require(".");
 const engine_1 = require("@tsparticles/engine");
-const { particlesJS, pJSDom } = (0, _1.initPjs)(engine_1.tsParticles);
+const { particlesJS, pJSDom, Particles } = (0, _1.initPjs)(engine_1.tsParticles);
 exports.particlesJS = particlesJS;
 exports.pJSDom = pJSDom;
+exports.Particles = Particles;
 __exportStar(require("@tsparticles/engine"), exports);

package/cjs/index.js

@@ -1,26 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initPjs = void 0;
+const Particles_js_1 = require("./marcbruederlin/Particles.js");
+const particles_js_1 = require("./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 } = (0, particles_js_1.initParticlesJS)(engine);
+    window.particlesJS = particlesJS;
+    window.pJSDom = pJSDom;
+    window.Particles = Particles_js_1.Particles;
+    return { particlesJS, pJSDom, Particles: Particles_js_1.Particles };
 };
 exports.initPjs = initPjs;

package/cjs/marcbruederlin/Particles.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Particles = void 0;
+const engine_1 = require("@tsparticles/engine");
+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");
+        }
+        engine_1.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();
+    }
+}
+exports.Particles = Particles;

package/cjs/package.json

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

package/esm/VincentGarreau/particles.js

@@ -0,0 +1,23 @@
+const initParticlesJS = (engine) => {
+    const particlesJS = (tagId, options) => {
+        return engine.load({ id: tagId, 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 };
+};
+export { initParticlesJS };

package/esm/bundle.js

@@ -1,5 +1,5 @@
 import { initPjs } from ".";
 import { tsParticles } from "@tsparticles/engine";
-const { particlesJS, pJSDom } = initPjs(tsParticles);
+const { particlesJS, pJSDom, Particles } = initPjs(tsParticles);
 export * from "@tsparticles/engine";
-export { particlesJS, pJSDom };
+export { particlesJS, pJSDom, Particles };

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.4",
   "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.4"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}