@tsparticles/fireworks 4.0.0-beta.8 → 4.0.0

package/browser/utils.js

@@ -0,0 +1,195 @@
+import { DestroyType, EventType, MoveDirection, OutMode, StartValueType, getRangeMax, getRangeMin, isNumber, setRangeValue, } from "@tsparticles/engine";
+import { FireworkOptions } from "./FireworkOptions.js";
+const instances = new Map();
+export const explodeSoundCheck = (args) => {
+    const data = args.data;
+    return data?.particle?.options.move.gravity.enable ?? false;
+};
+export function getOptions(options, canvas) {
+    const identity = 1;
+    return {
+        detectRetina: true,
+        background: {
+            color: options.background,
+        },
+        blend: {
+            enable: true,
+            mode: "lighter",
+        },
+        fullScreen: {
+            enable: !canvas,
+        },
+        fpsLimit: 60,
+        emitters: {
+            direction: MoveDirection.top,
+            life: {
+                count: 0,
+                duration: 0.1,
+                delay: 0.1,
+            },
+            rate: {
+                delay: isNumber(options.rate)
+                    ? identity / options.rate
+                    : { min: identity / getRangeMin(options.rate), max: identity / getRangeMax(options.rate) },
+                quantity: 1,
+            },
+            size: {
+                width: 100,
+                height: 0,
+            },
+            position: {
+                y: 100,
+                x: 50,
+            },
+        },
+        particles: {
+            number: {
+                value: 0,
+            },
+            paint: {
+                fill: {
+                    enable: false,
+                },
+                stroke: {
+                    color: {
+                        value: options.colors,
+                    },
+                    width: 2,
+                },
+            },
+            destroy: {
+                mode: "split",
+                bounds: {
+                    top: setRangeValue(options.minHeight),
+                },
+                split: {
+                    count: 1,
+                    factor: {
+                        value: 0.333333,
+                    },
+                    rate: {
+                        value: options.splitCount,
+                    },
+                    strokeColorOffset: {
+                        s: options.saturation,
+                        l: options.brightness,
+                    },
+                    particles: {
+                        group: "split",
+                        number: {
+                            value: 0,
+                        },
+                        opacity: {
+                            value: {
+                                min: 0.1,
+                                max: 1,
+                            },
+                            animation: {
+                                enable: true,
+                                speed: { min: 2, max: 4 },
+                                sync: true,
+                                startValue: StartValueType.max,
+                                destroy: DestroyType.min,
+                                count: 1,
+                            },
+                        },
+                        size: {
+                            value: { min: 5, max: 10 },
+                        },
+                        life: {
+                            count: 1,
+                            duration: {
+                                value: {
+                                    min: 0.5,
+                                    max: 1,
+                                },
+                            },
+                        },
+                        move: {
+                            decay: 0.05,
+                            enable: true,
+                            gravity: {
+                                enable: false,
+                            },
+                            speed: {
+                                min: 10,
+                                max: 25,
+                            },
+                            direction: "outside",
+                            outModes: OutMode.destroy,
+                        },
+                    },
+                },
+            },
+            life: {
+                count: 1,
+            },
+            shape: {
+                type: "line",
+                options: {
+                    line: {
+                        cap: "round",
+                    },
+                },
+            },
+            size: {
+                value: { min: 10, max: 20 },
+            },
+            rotate: {
+                path: true,
+            },
+            move: {
+                enable: true,
+                gravity: {
+                    acceleration: setRangeValue(options.gravity),
+                    enable: true,
+                    inverse: true,
+                    maxSpeed: 150,
+                },
+                speed: setRangeValue(options.speed),
+                outModes: {
+                    default: OutMode.destroy,
+                    top: OutMode.none,
+                },
+            },
+        },
+        sounds: {
+            enable: options.sounds,
+            events: [
+                {
+                    event: EventType.particleRemoved,
+                    filter: explodeSoundCheck,
+                    audio: [
+                        "https://particles.js.org/audio/explosion0.mp3",
+                        "https://particles.js.org/audio/explosion1.mp3",
+                        "https://particles.js.org/audio/explosion2.mp3",
+                    ],
+                },
+            ],
+            volume: 50,
+        },
+    };
+}
+export async function getFireworksInstance(engine, id, sourceOptions, canvas) {
+    const existing = instances.get(id);
+    if (existing instanceof Promise) {
+        return existing;
+    }
+    if (existing) {
+        return existing;
+    }
+    const create = async () => {
+        const options = new FireworkOptions();
+        options.load(sourceOptions);
+        const particlesOptions = getOptions(options, canvas), container = await engine.load({ id, element: canvas, options: particlesOptions });
+        if (!container) {
+            instances.delete(id);
+            return;
+        }
+        const { FireworksInstance } = await import("./FireworksInstance.js"), instance = new FireworksInstance(container);
+        instances.set(id, instance);
+        return instance;
+    }, createPromise = create();
+    instances.set(id, createPromise);
+    return createPromise;
+}

package/cjs/browser.js

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

package/cjs/bundle.js

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

package/cjs/fireworks.js

@@ -1,230 +1,45 @@
-import { DestroyType, EventType, MoveDirection, OutMode, StartValueType, getRangeMax, getRangeMin, isNumber, isString, setRangeValue, tsParticles, } from "@tsparticles/engine";
-import { FireworkOptions } from "./FireworkOptions.js";
-let initialized = false, initializing = false;
-const explodeSoundCheck = (args) => {
-    const data = args.data;
-    return data?.particle?.options.move.gravity.enable ?? false;
-};
-async function initPlugins(engine) {
-    if (initialized) {
-        return;
-    }
-    if (initializing) {
-        return new Promise(resolve => {
-            const timeout = 100, interval = setInterval(() => {
-                if (!initialized) {
-                    return;
-                }
-                clearInterval(interval);
-                resolve();
-            }, timeout);
-        });
-    }
-    initializing = true;
-    engine.checkVersion("4.0.0-beta.8");
+import { isString, tsParticles } from "@tsparticles/engine";
+import { getFireworksInstance } from "./utils.js";
+import { loadBasic } from "@tsparticles/basic";
+import { loadBlendPlugin } from "@tsparticles/plugin-blend";
+import { loadDestroyUpdater } from "@tsparticles/updater-destroy";
+import { loadEmittersPluginSimple } from "@tsparticles/plugin-emitters/plugin";
+import { loadEmittersShapeSquare } from "@tsparticles/plugin-emitters-shape-square";
+import { loadLifeUpdater } from "@tsparticles/updater-life";
+import { loadLineShape } from "@tsparticles/shape-line";
+import { loadPaintUpdater } from "@tsparticles/updater-paint";
+import { loadRotateUpdater } from "@tsparticles/updater-rotate";
+import { loadSoundsPlugin } from "@tsparticles/plugin-sounds";
+let initPromise = null;
+async function doInitPlugins(engine) {
+    engine.checkVersion("4.0.0");
     await engine.pluginManager.register(async (e) => {
-        const [{ loadBasic }, { loadLineShape }, { loadBlendPlugin }, { loadEmittersPluginSimple }, { loadEmittersShapeSquare }, { loadSoundsPlugin }, { loadRotateUpdater }, { loadDestroyUpdater }, { loadLifeUpdater }, { loadStrokeColorUpdater },] = await Promise.all([
-            import("@tsparticles/basic"),
-            import("@tsparticles/shape-line"),
-            import("@tsparticles/plugin-blend"),
-            import("@tsparticles/plugin-emitters/plugin"),
-            import("@tsparticles/plugin-emitters-shape-square"),
-            import("@tsparticles/plugin-sounds"),
-            import("@tsparticles/updater-rotate"),
-            import("@tsparticles/updater-destroy"),
-            import("@tsparticles/updater-life"),
-            import("@tsparticles/updater-stroke-color"),
-        ]);
+        const loadEmittersForFireworks = async (e) => {
+            await loadEmittersPluginSimple(e);
+            await loadEmittersShapeSquare(e);
+        };
         await Promise.all([
             loadBasic(e),
             loadLineShape(e),
             loadBlendPlugin(e),
-            (async () => {
-                await loadEmittersPluginSimple(e);
-                await loadEmittersShapeSquare(e);
-            })(),
+            loadEmittersForFireworks(e),
             loadSoundsPlugin(e),
             loadRotateUpdater(e),
             loadDestroyUpdater(e),
             loadLifeUpdater(e),
-            loadStrokeColorUpdater(e),
+            loadPaintUpdater(e),
         ]);
     });
-    initializing = false;
-    initialized = true;
 }
-function getOptions(options, canvas) {
-    const identity = 1;
-    return {
-        detectRetina: true,
-        background: {
-            color: options.background,
-        },
-        blend: {
-            enable: true,
-            mode: "lighter",
-        },
-        fullScreen: {
-            enable: !canvas,
-        },
-        fpsLimit: 60,
-        emitters: {
-            direction: MoveDirection.top,
-            life: {
-                count: 0,
-                duration: 0.1,
-                delay: 0.1,
-            },
-            rate: {
-                delay: isNumber(options.rate)
-                    ? identity / options.rate
-                    : { min: identity / getRangeMin(options.rate), max: identity / getRangeMax(options.rate) },
-                quantity: 1,
-            },
-            size: {
-                width: 100,
-                height: 0,
-            },
-            position: {
-                y: 100,
-                x: 50,
-            },
-        },
-        particles: {
-            number: {
-                value: 0,
-            },
-            stroke: {
-                color: {
-                    value: options.colors,
-                },
-                width: 2,
-            },
-            destroy: {
-                mode: "split",
-                bounds: {
-                    top: setRangeValue(options.minHeight),
-                },
-                split: {
-                    count: 1,
-                    factor: {
-                        value: 0.333333,
-                    },
-                    rate: {
-                        value: options.splitCount,
-                    },
-                    strokeColorOffset: {
-                        s: options.saturation,
-                        l: options.brightness,
-                    },
-                    particles: {
-                        group: "split",
-                        number: {
-                            value: 0,
-                        },
-                        opacity: {
-                            value: {
-                                min: 0.1,
-                                max: 1,
-                            },
-                            animation: {
-                                enable: true,
-                                speed: { min: 2, max: 4 },
-                                sync: true,
-                                startValue: StartValueType.max,
-                                destroy: DestroyType.min,
-                                count: 1,
-                            },
-                        },
-                        size: {
-                            value: { min: 5, max: 10 },
-                        },
-                        life: {
-                            count: 1,
-                            duration: {
-                                value: {
-                                    min: 0.5,
-                                    max: 1,
-                                },
-                            },
-                        },
-                        move: {
-                            decay: 0.05,
-                            enable: true,
-                            gravity: {
-                                enable: false,
-                            },
-                            speed: {
-                                min: 10,
-                                max: 25,
-                            },
-                            direction: "outside",
-                            outModes: OutMode.destroy,
-                        },
-                    },
-                },
-            },
-            life: {
-                count: 1,
-            },
-            shape: {
-                type: "line",
-                options: {
-                    line: {
-                        cap: "round",
-                    },
-                },
-            },
-            size: {
-                value: { min: 10, max: 20 },
-            },
-            rotate: {
-                path: true,
-            },
-            move: {
-                enable: true,
-                gravity: {
-                    acceleration: setRangeValue(options.gravity),
-                    enable: true,
-                    inverse: true,
-                    maxSpeed: 150,
-                },
-                speed: setRangeValue(options.speed),
-                outModes: {
-                    default: OutMode.destroy,
-                    top: OutMode.none,
-                },
-            },
-        },
-        sounds: {
-            enable: options.sounds,
-            events: [
-                {
-                    event: EventType.particleRemoved,
-                    filter: explodeSoundCheck,
-                    audio: [
-                        "https://particles.js.org/audio/explosion0.mp3",
-                        "https://particles.js.org/audio/explosion1.mp3",
-                        "https://particles.js.org/audio/explosion2.mp3",
-                    ],
-                },
-            ],
-            volume: 50,
-        },
-    };
-}
-async function getFireworksInstance(id, sourceOptions, canvas) {
-    await initPlugins(tsParticles);
-    const options = new FireworkOptions();
-    options.load(sourceOptions);
-    const particlesOptions = getOptions(options, canvas), container = await tsParticles.load({ id, element: canvas, options: particlesOptions });
-    if (!container) {
-        return;
+async function initPlugins(engine) {
+    if (initPromise) {
+        return initPromise;
     }
-    const { FireworksInstance } = await import("./FireworksInstance.js");
-    return new FireworksInstance(container);
+    initPromise = doInitPlugins(engine);
+    return initPromise;
 }
 export async function fireworks(idOrOptions, sourceOptions) {
+    await initPlugins(tsParticles);
     let id, options;
     if (isString(idOrOptions)) {
         id = idOrOptions;
@@ -234,14 +49,15 @@ export async function fireworks(idOrOptions, sourceOptions) {
         id = "fireworks";
         options = idOrOptions ?? {};
     }
-    return getFireworksInstance(id, options);
+    return getFireworksInstance(tsParticles, id, options);
 }
 fireworks.create = async (canvas, options) => {
-    const id = canvas.id || "fireworks";
-    return getFireworksInstance(id, options ?? {}, canvas);
+    await initPlugins(tsParticles);
+    const id = canvas?.id ?? "fireworks";
+    return getFireworksInstance(tsParticles, id, options ?? {}, canvas ?? undefined);
 };
 fireworks.init = async () => {
     await initPlugins(tsParticles);
 };
-fireworks.version = "4.0.0-beta.8";
+fireworks.version = "4.0.0";
 globalThis.fireworks = fireworks;

package/cjs/fireworks.lazy.js

@@ -0,0 +1,64 @@
+import { isString, tsParticles } from "@tsparticles/engine/lazy";
+import { getFireworksInstance } from "./utils.js";
+let initPromise = null;
+async function doInitPlugins(engine) {
+    engine.checkVersion("4.0.0");
+    await engine.pluginManager.register(async (e) => {
+        const [{ loadBasic }, { loadLineShape }, { loadBlendPlugin }, { loadEmittersPluginSimple }, { loadEmittersShapeSquare }, { loadSoundsPlugin }, { loadRotateUpdater }, { loadDestroyUpdater }, { loadLifeUpdater }, { loadPaintUpdater },] = await Promise.all([
+            import("@tsparticles/basic/lazy"),
+            import("@tsparticles/shape-line"),
+            import("@tsparticles/plugin-blend"),
+            import("@tsparticles/plugin-emitters/plugin"),
+            import("@tsparticles/plugin-emitters-shape-square"),
+            import("@tsparticles/plugin-sounds"),
+            import("@tsparticles/updater-rotate/lazy"),
+            import("@tsparticles/updater-destroy/lazy"),
+            import("@tsparticles/updater-life/lazy"),
+            import("@tsparticles/updater-paint/lazy"),
+        ]), loadEmittersForFireworks = async (e) => {
+            await loadEmittersPluginSimple(e);
+            await loadEmittersShapeSquare(e);
+        };
+        await Promise.all([
+            loadBasic(e),
+            loadLineShape(e),
+            loadBlendPlugin(e),
+            loadEmittersForFireworks(e),
+            loadSoundsPlugin(e),
+            loadRotateUpdater(e),
+            loadDestroyUpdater(e),
+            loadLifeUpdater(e),
+            loadPaintUpdater(e),
+        ]);
+    });
+}
+async function initPlugins(engine) {
+    if (initPromise) {
+        return initPromise;
+    }
+    initPromise = doInitPlugins(engine);
+    return initPromise;
+}
+export async function fireworks(idOrOptions, sourceOptions) {
+    await initPlugins(tsParticles);
+    let id, options;
+    if (isString(idOrOptions)) {
+        id = idOrOptions;
+        options = sourceOptions ?? {};
+    }
+    else {
+        id = "fireworks";
+        options = idOrOptions ?? {};
+    }
+    return getFireworksInstance(tsParticles, id, options);
+}
+fireworks.create = async (canvas, options) => {
+    await initPlugins(tsParticles);
+    const id = canvas?.id ?? "fireworks";
+    return getFireworksInstance(tsParticles, id, options ?? {}, canvas ?? undefined);
+};
+fireworks.init = async () => {
+    await initPlugins(tsParticles);
+};
+fireworks.version = "4.0.0";
+globalThis.fireworks = fireworks;

package/cjs/index.lazy.js

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

package/cjs/types.js

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