@tsparticles/particles 4.0.0-beta.12

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,112 @@
+[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
+
+# tsParticles Particles Bundle
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/particles/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/particles) [![npmjs](https://badge.fury.io/js/@tsparticles/particles.svg)](https://www.npmjs.com/package/@tsparticles/particles) [![npmjs](https://img.shields.io/npm/dt/@tsparticles/particles)](https://www.npmjs.com/package/@tsparticles/particles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+tsParticles `particles` bundle to create simple particle effects with a focused API.
+
+**Included Packages**
+
+- [@tsparticles/basic (and all its dependencies)](https://github.com/tsparticles/tsparticles/tree/main/bundles/basic)
+- [@tsparticles/engine](https://github.com/tsparticles/tsparticles/tree/main/engine)
+- [@tsparticles/plugin-interactivity](https://github.com/tsparticles/tsparticles/tree/main/plugins/interactivity)
+- [@tsparticles/interaction-particles-collisions](https://github.com/tsparticles/tsparticles/tree/main/interactions/particles/collisions)
+- [@tsparticles/interaction-particles-links](https://github.com/tsparticles/tsparticles/tree/main/interactions/particles/links)
+
+## Exposed API
+
+The package API is centered on `particles`.
+
+```ts
+import { particles } from "@tsparticles/particles";
+
+// Main API
+const instance = await particles();
+const byId = await particles("canvas-id", options);
+const byOptions = await particles(options);
+
+// Extra helpers
+await particles.init();
+const custom = await particles.create(canvas, options);
+
+console.log(particles.version);
+```
+
+`@tsparticles/particles` does not expose `tsParticles` from its main entrypoint.
+If you need direct engine APIs, import them from `@tsparticles/engine`.
+
+## Installation
+
+```bash
+pnpm add @tsparticles/particles
+```
+
+Lazy entrypoint (loads dependencies on demand):
+
+```ts
+import { particles } from "@tsparticles/particles/lazy";
+```
+
+## How to use it
+
+```ts
+import { particles } from "@tsparticles/particles";
+
+const instance = await particles({
+  count: 120,
+  color: "#00f",
+  links: true,
+  linksColor: "#0ff",
+  linksLength: 140,
+  radius: 4,
+  shape: ["circle", "square"],
+});
+
+instance?.pause();
+instance?.play();
+instance?.stop();
+```
+
+### Custom canvas via `particles.create`
+
+```ts
+import { particles } from "@tsparticles/particles";
+
+const canvas = document.getElementById("my-canvas") as HTMLCanvasElement;
+await particles.create(canvas, { links: true });
+```
+
+### Options
+
+Main options (shallow overview):
+
+- `count` Number: particles amount (default: 80)
+- `radius` Number or RangeValue: particle radius (default: 3)
+- `links` Boolean: enable links between particles
+- `linksLength` Number: maximum link distance
+- `speed` Number or RangeValue: particle movement speed
+- `collisions` Boolean: enable particle collisions
+- `opacity` Number: particle opacity
+- `shape` String or Array<String>: particle shape type(s)
+- `color` String: particle color
+- `linksColor` String: link color
+
+### Returned instance methods
+
+The resolved `ParticlesInstance` exposes:
+
+- `pause()`
+- `play()`
+- `stop()`
+
+## Common pitfalls
+
+- Calling `particles` before scripts are loaded in CDN usage
+- Assuming `tsParticles` is exported by `@tsparticles/particles` main entrypoint
+- Reusing the same `id` unintentionally (the package caches instances by id)
+
+## Related docs
+
+- All packages catalog: <https://github.com/tsparticles/tsparticles>
+- Main docs: <https://particles.js.org/docs/>

package/browser/IParticlesOptions.js

@@ -0,0 +1 @@
+export {};

package/browser/ParticlesInstance.js

@@ -0,0 +1,15 @@
+export class ParticlesInstance {
+    _container;
+    constructor(container) {
+        this._container = container;
+    }
+    pause() {
+        this._container.pause();
+    }
+    play() {
+        this._container.play();
+    }
+    stop() {
+        this._container.stop();
+    }
+}

package/browser/browser.js

@@ -0,0 +1,5 @@
+import { particles } from "./index.js";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.particles = particles;
+export * from "./index.js";

package/browser/bundle.js

@@ -0,0 +1,6 @@
+import { particles } from "./index.js";
+export { particles } from "./index.js";
+export * from "@tsparticles/engine";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.particles = particles;

package/browser/index.js

@@ -0,0 +1 @@
+export * from "./particles.js";

package/browser/index.lazy.js

@@ -0,0 +1 @@
+export * from "./particles.lazy.js";

package/browser/package.json

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

package/browser/particles.js

@@ -0,0 +1,53 @@
+import { isString, tsParticles } from "@tsparticles/engine";
+import { getParticlesInstance } from "./utils.js";
+import { loadBasic } from "@tsparticles/basic";
+import { loadInteractivityPlugin } from "@tsparticles/plugin-interactivity";
+import { loadParticlesCollisionsInteraction } from "@tsparticles/interaction-particles-collisions";
+import { loadParticlesLinksInteraction } from "@tsparticles/interaction-particles-links";
+let initPromise = null;
+async function doInitPlugins(engine) {
+    engine.checkVersion("4.0.0-beta.12");
+    await engine.pluginManager.register(async (e) => {
+        const loadParticlesInteractivity = async (e) => {
+            await loadInteractivityPlugin(e);
+            await Promise.all([
+                loadParticlesCollisionsInteraction(e),
+                loadParticlesLinksInteraction(e),
+            ]);
+        };
+        await Promise.all([
+            loadBasic(e),
+            loadParticlesInteractivity(e),
+        ]);
+    });
+}
+async function initPlugins(engine) {
+    if (initPromise) {
+        return initPromise;
+    }
+    initPromise = doInitPlugins(engine);
+    return initPromise;
+}
+export async function particles(idOrOptions, sourceOptions) {
+    await initPlugins(tsParticles);
+    let id, options;
+    if (isString(idOrOptions)) {
+        id = idOrOptions;
+        options = sourceOptions ?? {};
+    }
+    else {
+        id = "particles";
+        options = idOrOptions ?? {};
+    }
+    return getParticlesInstance(tsParticles, id, options);
+}
+particles.create = async (canvas, options) => {
+    await initPlugins(tsParticles);
+    const id = canvas.id || "particles";
+    return getParticlesInstance(tsParticles, id, options ?? {}, canvas);
+};
+particles.init = async () => {
+    await initPlugins(tsParticles);
+};
+particles.version = "4.0.0-beta.12";
+globalThis.particles = particles;

package/browser/particles.lazy.js

@@ -0,0 +1,54 @@
+import { isString, tsParticles } from "@tsparticles/engine/lazy";
+import { getParticlesInstance } from "./utils.js";
+let initPromise = null;
+async function doInitPlugins(engine) {
+    engine.checkVersion("4.0.0-beta.12");
+    await engine.pluginManager.register(async (e) => {
+        const [{ loadBasic }, { loadInteractivityPlugin }, { loadParticlesCollisionsInteraction }, { loadParticlesLinksInteraction },] = await Promise.all([
+            import("@tsparticles/basic/lazy"),
+            import("@tsparticles/plugin-interactivity/lazy"),
+            import("@tsparticles/interaction-particles-collisions/lazy"),
+            import("@tsparticles/interaction-particles-links/lazy"),
+        ]), loadParticlesInteractivity = async (e) => {
+            await loadInteractivityPlugin(e);
+            await Promise.all([
+                loadParticlesCollisionsInteraction(e),
+                loadParticlesLinksInteraction(e),
+            ]);
+        };
+        await Promise.all([
+            loadBasic(e),
+            loadParticlesInteractivity(e),
+        ]);
+    });
+}
+async function initPlugins(engine) {
+    if (initPromise) {
+        return initPromise;
+    }
+    initPromise = doInitPlugins(engine);
+    return initPromise;
+}
+export async function particles(idOrOptions, sourceOptions) {
+    await initPlugins(tsParticles);
+    let id, options;
+    if (isString(idOrOptions)) {
+        id = idOrOptions;
+        options = sourceOptions ?? {};
+    }
+    else {
+        id = "particles";
+        options = idOrOptions ?? {};
+    }
+    return getParticlesInstance(tsParticles, id, options);
+}
+particles.create = async (canvas, options) => {
+    await initPlugins(tsParticles);
+    const id = canvas.id || "particles";
+    return getParticlesInstance(tsParticles, id, options ?? {}, canvas);
+};
+particles.init = async () => {
+    await initPlugins(tsParticles);
+};
+particles.version = "4.0.0-beta.12";
+globalThis.particles = particles;

package/browser/types.js

@@ -0,0 +1 @@
+export {};

package/browser/utils.js

@@ -0,0 +1,55 @@
+const instances = new Map(), defaultCount = 80, defaultLinksWidth = 100, defaultSpeed = 3, defaultOpacity = 1, defaultRadius = 3;
+function getDefaultOptions(options) {
+    return {
+        particles: {
+            number: {
+                value: options.count ?? defaultCount,
+            },
+            color: {
+                value: options.color ?? "#fff",
+            },
+            links: {
+                enable: options.links ?? false,
+                color: options.linksColor ?? "#fff",
+                distance: options.linksLength ?? defaultLinksWidth,
+            },
+            collisions: {
+                enable: options.collisions ?? false,
+            },
+            move: {
+                enable: true,
+                speed: options.speed ?? defaultSpeed,
+            },
+            opacity: {
+                value: options.opacity ?? defaultOpacity,
+            },
+            shape: {
+                type: options.shape ?? "circle",
+            },
+            size: {
+                value: options.radius ?? defaultRadius,
+            },
+        },
+    };
+}
+export async function getParticlesInstance(engine, id, sourceOptions, canvas) {
+    const existing = instances.get(id);
+    if (existing instanceof Promise) {
+        return existing;
+    }
+    if (existing) {
+        return existing;
+    }
+    const create = async () => {
+        const particlesOptions = getDefaultOptions(sourceOptions), container = await engine.load({ id, element: canvas, options: particlesOptions });
+        if (!container) {
+            instances.delete(id);
+            return;
+        }
+        const { ParticlesInstance } = await import("./ParticlesInstance.js"), instance = new ParticlesInstance(container);
+        instances.set(id, instance);
+        return instance;
+    }, createPromise = create();
+    instances.set(id, createPromise);
+    return createPromise;
+}

package/cjs/IParticlesOptions.js

@@ -0,0 +1 @@
+export {};

package/cjs/ParticlesInstance.js

@@ -0,0 +1,15 @@
+export class ParticlesInstance {
+    _container;
+    constructor(container) {
+        this._container = container;
+    }
+    pause() {
+        this._container.pause();
+    }
+    play() {
+        this._container.play();
+    }
+    stop() {
+        this._container.stop();
+    }
+}

package/cjs/browser.js

@@ -0,0 +1,5 @@
+import { particles } from "./index.js";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.particles = particles;
+export * from "./index.js";

package/cjs/bundle.js

@@ -0,0 +1,6 @@
+import { particles } from "./index.js";
+export { particles } from "./index.js";
+export * from "@tsparticles/engine";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.particles = particles;

package/cjs/index.js

@@ -0,0 +1 @@
+export * from "./particles.js";

package/cjs/index.lazy.js

@@ -0,0 +1 @@
+export * from "./particles.lazy.js";

package/cjs/package.json

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

package/cjs/particles.js

@@ -0,0 +1,53 @@
+import { isString, tsParticles } from "@tsparticles/engine";
+import { getParticlesInstance } from "./utils.js";
+import { loadBasic } from "@tsparticles/basic";
+import { loadInteractivityPlugin } from "@tsparticles/plugin-interactivity";
+import { loadParticlesCollisionsInteraction } from "@tsparticles/interaction-particles-collisions";
+import { loadParticlesLinksInteraction } from "@tsparticles/interaction-particles-links";
+let initPromise = null;
+async function doInitPlugins(engine) {
+    engine.checkVersion("4.0.0-beta.12");
+    await engine.pluginManager.register(async (e) => {
+        const loadParticlesInteractivity = async (e) => {
+            await loadInteractivityPlugin(e);
+            await Promise.all([
+                loadParticlesCollisionsInteraction(e),
+                loadParticlesLinksInteraction(e),
+            ]);
+        };
+        await Promise.all([
+            loadBasic(e),
+            loadParticlesInteractivity(e),
+        ]);
+    });
+}
+async function initPlugins(engine) {
+    if (initPromise) {
+        return initPromise;
+    }
+    initPromise = doInitPlugins(engine);
+    return initPromise;
+}
+export async function particles(idOrOptions, sourceOptions) {
+    await initPlugins(tsParticles);
+    let id, options;
+    if (isString(idOrOptions)) {
+        id = idOrOptions;
+        options = sourceOptions ?? {};
+    }
+    else {
+        id = "particles";
+        options = idOrOptions ?? {};
+    }
+    return getParticlesInstance(tsParticles, id, options);
+}
+particles.create = async (canvas, options) => {
+    await initPlugins(tsParticles);
+    const id = canvas.id || "particles";
+    return getParticlesInstance(tsParticles, id, options ?? {}, canvas);
+};
+particles.init = async () => {
+    await initPlugins(tsParticles);
+};
+particles.version = "4.0.0-beta.12";
+globalThis.particles = particles;

package/cjs/particles.lazy.js

@@ -0,0 +1,54 @@
+import { isString, tsParticles } from "@tsparticles/engine/lazy";
+import { getParticlesInstance } from "./utils.js";
+let initPromise = null;
+async function doInitPlugins(engine) {
+    engine.checkVersion("4.0.0-beta.12");
+    await engine.pluginManager.register(async (e) => {
+        const [{ loadBasic }, { loadInteractivityPlugin }, { loadParticlesCollisionsInteraction }, { loadParticlesLinksInteraction },] = await Promise.all([
+            import("@tsparticles/basic/lazy"),
+            import("@tsparticles/plugin-interactivity/lazy"),
+            import("@tsparticles/interaction-particles-collisions/lazy"),
+            import("@tsparticles/interaction-particles-links/lazy"),
+        ]), loadParticlesInteractivity = async (e) => {
+            await loadInteractivityPlugin(e);
+            await Promise.all([
+                loadParticlesCollisionsInteraction(e),
+                loadParticlesLinksInteraction(e),
+            ]);
+        };
+        await Promise.all([
+            loadBasic(e),
+            loadParticlesInteractivity(e),
+        ]);
+    });
+}
+async function initPlugins(engine) {
+    if (initPromise) {
+        return initPromise;
+    }
+    initPromise = doInitPlugins(engine);
+    return initPromise;
+}
+export async function particles(idOrOptions, sourceOptions) {
+    await initPlugins(tsParticles);
+    let id, options;
+    if (isString(idOrOptions)) {
+        id = idOrOptions;
+        options = sourceOptions ?? {};
+    }
+    else {
+        id = "particles";
+        options = idOrOptions ?? {};
+    }
+    return getParticlesInstance(tsParticles, id, options);
+}
+particles.create = async (canvas, options) => {
+    await initPlugins(tsParticles);
+    const id = canvas.id || "particles";
+    return getParticlesInstance(tsParticles, id, options ?? {}, canvas);
+};
+particles.init = async () => {
+    await initPlugins(tsParticles);
+};
+particles.version = "4.0.0-beta.12";
+globalThis.particles = particles;

package/cjs/types.js

@@ -0,0 +1 @@
+export {};

package/cjs/utils.js

@@ -0,0 +1,55 @@
+const instances = new Map(), defaultCount = 80, defaultLinksWidth = 100, defaultSpeed = 3, defaultOpacity = 1, defaultRadius = 3;
+function getDefaultOptions(options) {
+    return {
+        particles: {
+            number: {
+                value: options.count ?? defaultCount,
+            },
+            color: {
+                value: options.color ?? "#fff",
+            },
+            links: {
+                enable: options.links ?? false,
+                color: options.linksColor ?? "#fff",
+                distance: options.linksLength ?? defaultLinksWidth,
+            },
+            collisions: {
+                enable: options.collisions ?? false,
+            },
+            move: {
+                enable: true,
+                speed: options.speed ?? defaultSpeed,
+            },
+            opacity: {
+                value: options.opacity ?? defaultOpacity,
+            },
+            shape: {
+                type: options.shape ?? "circle",
+            },
+            size: {
+                value: options.radius ?? defaultRadius,
+            },
+        },
+    };
+}
+export async function getParticlesInstance(engine, id, sourceOptions, canvas) {
+    const existing = instances.get(id);
+    if (existing instanceof Promise) {
+        return existing;
+    }
+    if (existing) {
+        return existing;
+    }
+    const create = async () => {
+        const particlesOptions = getDefaultOptions(sourceOptions), container = await engine.load({ id, element: canvas, options: particlesOptions });
+        if (!container) {
+            instances.delete(id);
+            return;
+        }
+        const { ParticlesInstance } = await import("./ParticlesInstance.js"), instance = new ParticlesInstance(container);
+        instances.set(id, instance);
+        return instance;
+    }, createPromise = create();
+    instances.set(id, createPromise);
+    return createPromise;
+}

package/esm/IParticlesOptions.js

@@ -0,0 +1 @@
+export {};

package/esm/ParticlesInstance.js

@@ -0,0 +1,15 @@
+export class ParticlesInstance {
+    _container;
+    constructor(container) {
+        this._container = container;
+    }
+    pause() {
+        this._container.pause();
+    }
+    play() {
+        this._container.play();
+    }
+    stop() {
+        this._container.stop();
+    }
+}

package/esm/browser.js

@@ -0,0 +1,5 @@
+import { particles } from "./index.js";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.particles = particles;
+export * from "./index.js";

package/esm/bundle.js

@@ -0,0 +1,6 @@
+import { particles } from "./index.js";
+export { particles } from "./index.js";
+export * from "@tsparticles/engine";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.particles = particles;

package/esm/index.js

@@ -0,0 +1 @@
+export * from "./particles.js";

package/esm/index.lazy.js

@@ -0,0 +1 @@
+export * from "./particles.lazy.js";

package/esm/package.json

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

package/esm/particles.js

@@ -0,0 +1,53 @@
+import { isString, tsParticles } from "@tsparticles/engine";
+import { getParticlesInstance } from "./utils.js";
+import { loadBasic } from "@tsparticles/basic";
+import { loadInteractivityPlugin } from "@tsparticles/plugin-interactivity";
+import { loadParticlesCollisionsInteraction } from "@tsparticles/interaction-particles-collisions";
+import { loadParticlesLinksInteraction } from "@tsparticles/interaction-particles-links";
+let initPromise = null;
+async function doInitPlugins(engine) {
+    engine.checkVersion("4.0.0-beta.12");
+    await engine.pluginManager.register(async (e) => {
+        const loadParticlesInteractivity = async (e) => {
+            await loadInteractivityPlugin(e);
+            await Promise.all([
+                loadParticlesCollisionsInteraction(e),
+                loadParticlesLinksInteraction(e),
+            ]);
+        };
+        await Promise.all([
+            loadBasic(e),
+            loadParticlesInteractivity(e),
+        ]);
+    });
+}
+async function initPlugins(engine) {
+    if (initPromise) {
+        return initPromise;
+    }
+    initPromise = doInitPlugins(engine);
+    return initPromise;
+}
+export async function particles(idOrOptions, sourceOptions) {
+    await initPlugins(tsParticles);
+    let id, options;
+    if (isString(idOrOptions)) {
+        id = idOrOptions;
+        options = sourceOptions ?? {};
+    }
+    else {
+        id = "particles";
+        options = idOrOptions ?? {};
+    }
+    return getParticlesInstance(tsParticles, id, options);
+}
+particles.create = async (canvas, options) => {
+    await initPlugins(tsParticles);
+    const id = canvas.id || "particles";
+    return getParticlesInstance(tsParticles, id, options ?? {}, canvas);
+};
+particles.init = async () => {
+    await initPlugins(tsParticles);
+};
+particles.version = "4.0.0-beta.12";
+globalThis.particles = particles;