@tsparticles/preset-fireworks 3.0.1 → 3.1.0

package/README.md

@@ -4,7 +4,7 @@
 
 [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/preset-fireworks/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/preset-fireworks) [![npmjs](https://badge.fury.io/js/@tsparticles/preset-fireworks.svg)](https://www.npmjs.com/package/@tsparticles/preset-fireworks) [![npmjs](https://img.shields.io/npm/dt/@tsparticles/preset-fireworks)](https://www.npmjs.com/package/@tsparticles/preset-fireworks) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
-[tsParticles](https://github.com/matteobruni/tsparticles) preset for fireworks effect.
+[tsParticles](https://github.com/tsparticles/tsparticles) preset for fireworks effect.
 
 [![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
 
@@ -12,43 +12,14 @@
 
 ## Sample
 
-[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fireworks/images/sample.png)](https://particles.js.org/samples/presets/fireworks)
+[![demo](https://raw.githubusercontent.com/tsparticles/tsparticles/main/presets/fireworks/images/sample.png)](https://particles.js.org/samples/presets/fireworks)
 
 ## How to use it
 
 ### CDN / Vanilla JS / jQuery
 
-The first step is installing [tsParticles](https://github.com/matteobruni/tsparticles) following the instructions for
-vanilla javascript in the main project [here](https://github.com/matteobruni/tsparticles)
-
-Once installed you need one more script to be included in your page (or you can download that
-from [jsDelivr](https://www.jsdelivr.com/package/npm/@tsparticles/preset-fireworks):
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/engine@2/tsparticles.engine.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@2/tsparticles.basic.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/move-base@2/tsparticles.move.base.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/plugin-emitters@2/tsparticles.plugin.emitters.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/shape-circle@2/tsparticles.shape.circle.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/shape-line@2/tsparticles.shape.line.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/updater-color@2/tsparticles.updater.color.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/updater-life@2/tsparticles.updater.life.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/updater-opacity@2/tsparticles.updater.opacity.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/updater-out-modes@2/tsparticles.updater.out-modes.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/updater-rotate@2/tsparticles.updater.angle.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/updater-size@2/tsparticles.updater.size.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/updater-stroke-color@2/tsparticles.updater.stroke-color.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/preset-fireworks@2/tsparticles.preset.fireworks.min.js"></script>
-```
-
-This script **MUST** be placed after the `tsParticles` one.
-
-#### Bundle
-
-A bundled script can also be used, this will include every needed plugin needed by the preset.
-
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/preset-fireworks@2/tsparticles.preset.fireworks.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tsparticles/preset-fireworks@3/tsparticles.preset.fireworks.bundle.min.js"></script>
 ```
 
 ### Usage
@@ -57,10 +28,13 @@ Once the scripts are loaded you can set up `tsParticles` like this:
 
 ```javascript
 (async () => {
-  await loadFireworksPreset(tsParticles); // this is required only if you are not using the bundle script
+  await loadFireworksPreset(tsParticles);
 
-  await tsParticles.load("tsparticles", {
-    preset: "fireworks",
+  await tsParticles.load({
+    id: "tsparticles",
+    options: {
+      preset: "fireworks",
+    },
   });
 })();
 ```
@@ -71,100 +45,26 @@ Once the scripts are loaded you can set up `tsParticles` like this:
 You can override all the options defining the properties like in any standard `tsParticles` installation.
 
 ```javascript
-tsParticles.load("tsparticles", {
-  particles: {
-    shape: {
-      type: "square", // starting from v2, this require the square shape script
+tsParticles.load({
+  id: "tsparticles",
+  options: {
+    particles: {
+      shape: {
+        type: "square", // starting from v2, this require the square shape script
+      },
     },
+    preset: "fireworks",
   },
-  preset: "fireworks",
 });
 ```
 
 Like in the sample above, the circles will be replaced by squares.
 
-### React.js / Preact / Inferno
-
-_The syntax for `React.js`, `Preact` and `Inferno` is the same_.
-
-This sample uses the class component syntax, but you can use hooks as well (if the library supports it).
-
-```typescript jsx
-import Particles from "react-particles";
-import type { Engine } from "@tsparticles/engine";
-import { loadFireworksPreset } from "@tsparticles/preset-fireworks";
-
-export class ParticlesContainer extends React.PureComponent<IProps> {
-  // this customizes the component tsParticles installation
-  async customInit(engine: Engine): Promise<void> {
-    // this adds the preset to tsParticles, you can safely use the
-    await loadFireworksPreset(engine);
-  }
-
-  render() {
-    const options = {
-      preset: "fireworks",
-    };
-
-    return <Particles options={options} init={this.customInit} />;
-  }
-}
-```
+### Frameworks with a tsParticles component library
 
-### Vue (2.x and 3.x)
+Checkout the documentation in the component library repository and call the `loadFireworksPreset` function instead of `loadFull`, `loadSlim` or similar functions.
 
-_The syntax for `Vue.js 2.x` and `3.x` is the same_
-
-```vue
-<Particles id="tsparticles" :particlesInit="particlesInit" :options="particlesOptions" />
-```
-
-```ts
-const particlesOptions = {
-  preset: "fireworks",
-};
-
-async function particlesInit(engine: Engine): Promise<void> {
-  await loadFireworksPreset(engine);
-}
-```
-
-### Angular
-
-```html
-<ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>
-```
-
-```ts
-const particlesOptions = {
-  preset: "fireworks",
-};
-
-async function particlesInit(engine: Engine): Promise<void> {
-  await loadFireworksPreset(engine);
-}
-```
-
-### Svelte
-
-```sveltehtml
-
-<Particles
-        id="tsparticles"
-        options={particlesOptions}
-        particlesInit={particlesInit}
-/>
-```
-
-```js
-let particlesOptions = {
-  preset: "fireworks",
-};
-
-let particlesInit = async (engine) => {
-  await loadFireworksPreset(engine);
-};
-```
+The options shown above are valid for all the component libraries.
 
 ---
 

package/browser/bundle.js

@@ -1,4 +1,3 @@
 import { loadFireworksPreset } from "./index.js";
 import { tsParticles } from "@tsparticles/engine";
-void loadFireworksPreset(tsParticles);
 export { loadFireworksPreset, tsParticles };

package/browser/index.js

@@ -18,5 +18,6 @@ export async function loadFireworksPreset(engine, refresh = true) {
     await loadDestroyUpdater(engine, false);
     await loadLifeUpdater(engine, false);
     await loadStrokeColorUpdater(engine, false);
-    await engine.addPreset("fireworks", options, refresh);
+    await engine.addPreset("fireworks", options, false);
+    await engine.refresh(refresh);
 }

package/browser/options.js

@@ -1,4 +1,4 @@
-import { rgbToHsl, setRangeValue, stringToRgb, } from "@tsparticles/engine";
+import { DestroyType, EventType, MoveDirection, OutMode, StartValueType, rgbToHsl, setRangeValue, stringToRgb, } from "@tsparticles/engine";
 const explodeSoundCheck = (args) => {
     const data = args.data;
     return data.particle.shape === "line";
@@ -16,7 +16,7 @@ const fixRange = (value, min, max) => {
     return res;
 };
 const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
-    .map((color) => {
+    .map(color => {
     const rgb = stringToRgb(color);
     if (!rgb) {
         return undefined;
@@ -51,8 +51,8 @@ const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
                 enable: true,
                 speed: 0.7,
                 sync: false,
-                startValue: "max",
-                destroy: "min",
+                startValue: StartValueType.max,
+                destroy: DestroyType.min,
             },
         },
         shape: {
@@ -65,8 +65,8 @@ const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
                 speed: 5,
                 count: 1,
                 sync: false,
-                startValue: "min",
-                destroy: "none",
+                startValue: StartValueType.min,
+                destroy: DestroyType.none,
             },
         },
         life: {
@@ -88,11 +88,11 @@ const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
             },
             speed: { min: 5, max: 15 },
             direction: "none",
-            outModes: "destroy",
+            outModes: OutMode.destroy,
         },
     };
 })
-    .filter((t) => t !== undefined);
+    .filter(t => t !== undefined);
 export const options = {
     detectRetina: true,
     background: {
@@ -100,7 +100,7 @@ export const options = {
     },
     fpsLimit: 120,
     emitters: {
-        direction: "top",
+        direction: MoveDirection.top,
         life: {
             count: 0,
             duration: 0.1,
@@ -155,8 +155,8 @@ export const options = {
                 enable: true,
                 sync: true,
                 speed: 90,
-                startValue: "max",
-                destroy: "min",
+                startValue: StartValueType.max,
+                destroy: DestroyType.min,
             },
         },
         stroke: {
@@ -181,8 +181,8 @@ export const options = {
                 max: 20,
             },
             outModes: {
-                default: "destroy",
-                top: "none",
+                default: OutMode.destroy,
+                top: OutMode.none,
             },
             trail: {
                 fill: {
@@ -197,7 +197,7 @@ export const options = {
         enable: true,
         events: [
             {
-                event: "particleRemoved",
+                event: EventType.particleRemoved,
                 filter: explodeSoundCheck,
                 audio: [
                     "https://particles.js.org/audio/explosion0.mp3",

package/cjs/bundle.js

@@ -5,4 +5,3 @@ const index_js_1 = require("./index.js");
 Object.defineProperty(exports, "loadFireworksPreset", { enumerable: true, get: function () { return index_js_1.loadFireworksPreset; } });
 const engine_1 = require("@tsparticles/engine");
 Object.defineProperty(exports, "tsParticles", { enumerable: true, get: function () { return engine_1.tsParticles; } });
-void (0, index_js_1.loadFireworksPreset)(engine_1.tsParticles);

package/cjs/index.js

@@ -21,6 +21,7 @@ async function loadFireworksPreset(engine, refresh = true) {
     await (0, updater_destroy_1.loadDestroyUpdater)(engine, false);
     await (0, updater_life_1.loadLifeUpdater)(engine, false);
     await (0, updater_stroke_color_1.loadStrokeColorUpdater)(engine, false);
-    await engine.addPreset("fireworks", options_js_1.options, refresh);
+    await engine.addPreset("fireworks", options_js_1.options, false);
+    await engine.refresh(refresh);
 }
 exports.loadFireworksPreset = loadFireworksPreset;

package/cjs/options.js

@@ -19,7 +19,7 @@ const fixRange = (value, min, max) => {
     return res;
 };
 const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
-    .map((color) => {
+    .map(color => {
     const rgb = (0, engine_1.stringToRgb)(color);
     if (!rgb) {
         return undefined;
@@ -54,8 +54,8 @@ const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
                 enable: true,
                 speed: 0.7,
                 sync: false,
-                startValue: "max",
-                destroy: "min",
+                startValue: engine_1.StartValueType.max,
+                destroy: engine_1.DestroyType.min,
             },
         },
         shape: {
@@ -68,8 +68,8 @@ const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
                 speed: 5,
                 count: 1,
                 sync: false,
-                startValue: "min",
-                destroy: "none",
+                startValue: engine_1.StartValueType.min,
+                destroy: engine_1.DestroyType.none,
             },
         },
         life: {
@@ -91,11 +91,11 @@ const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
             },
             speed: { min: 5, max: 15 },
             direction: "none",
-            outModes: "destroy",
+            outModes: engine_1.OutMode.destroy,
         },
     };
 })
-    .filter((t) => t !== undefined);
+    .filter(t => t !== undefined);
 exports.options = {
     detectRetina: true,
     background: {
@@ -103,7 +103,7 @@ exports.options = {
     },
     fpsLimit: 120,
     emitters: {
-        direction: "top",
+        direction: engine_1.MoveDirection.top,
         life: {
             count: 0,
             duration: 0.1,
@@ -158,8 +158,8 @@ exports.options = {
                 enable: true,
                 sync: true,
                 speed: 90,
-                startValue: "max",
-                destroy: "min",
+                startValue: engine_1.StartValueType.max,
+                destroy: engine_1.DestroyType.min,
             },
         },
         stroke: {
@@ -184,8 +184,8 @@ exports.options = {
                 max: 20,
             },
             outModes: {
-                default: "destroy",
-                top: "none",
+                default: engine_1.OutMode.destroy,
+                top: engine_1.OutMode.none,
             },
             trail: {
                 fill: {
@@ -200,7 +200,7 @@ exports.options = {
         enable: true,
         events: [
             {
-                event: "particleRemoved",
+                event: engine_1.EventType.particleRemoved,
                 filter: explodeSoundCheck,
                 audio: [
                     "https://particles.js.org/audio/explosion0.mp3",

package/esm/bundle.js

@@ -1,4 +1,3 @@
 import { loadFireworksPreset } from "./index.js";
 import { tsParticles } from "@tsparticles/engine";
-void loadFireworksPreset(tsParticles);
 export { loadFireworksPreset, tsParticles };

package/esm/index.js

@@ -18,5 +18,6 @@ export async function loadFireworksPreset(engine, refresh = true) {
     await loadDestroyUpdater(engine, false);
     await loadLifeUpdater(engine, false);
     await loadStrokeColorUpdater(engine, false);
-    await engine.addPreset("fireworks", options, refresh);
+    await engine.addPreset("fireworks", options, false);
+    await engine.refresh(refresh);
 }

package/esm/options.js

@@ -1,4 +1,4 @@
-import { rgbToHsl, setRangeValue, stringToRgb, } from "@tsparticles/engine";
+import { DestroyType, EventType, MoveDirection, OutMode, StartValueType, rgbToHsl, setRangeValue, stringToRgb, } from "@tsparticles/engine";
 const explodeSoundCheck = (args) => {
     const data = args.data;
     return data.particle.shape === "line";
@@ -16,7 +16,7 @@ const fixRange = (value, min, max) => {
     return res;
 };
 const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
-    .map((color) => {
+    .map(color => {
     const rgb = stringToRgb(color);
     if (!rgb) {
         return undefined;
@@ -51,8 +51,8 @@ const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
                 enable: true,
                 speed: 0.7,
                 sync: false,
-                startValue: "max",
-                destroy: "min",
+                startValue: StartValueType.max,
+                destroy: DestroyType.min,
             },
         },
         shape: {
@@ -65,8 +65,8 @@ const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
                 speed: 5,
                 count: 1,
                 sync: false,
-                startValue: "min",
-                destroy: "none",
+                startValue: StartValueType.min,
+                destroy: DestroyType.none,
             },
         },
         life: {
@@ -88,11 +88,11 @@ const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
             },
             speed: { min: 5, max: 15 },
             direction: "none",
-            outModes: "destroy",
+            outModes: OutMode.destroy,
         },
     };
 })
-    .filter((t) => t !== undefined);
+    .filter(t => t !== undefined);
 export const options = {
     detectRetina: true,
     background: {
@@ -100,7 +100,7 @@ export const options = {
     },
     fpsLimit: 120,
     emitters: {
-        direction: "top",
+        direction: MoveDirection.top,
         life: {
             count: 0,
             duration: 0.1,
@@ -155,8 +155,8 @@ export const options = {
                 enable: true,
                 sync: true,
                 speed: 90,
-                startValue: "max",
-                destroy: "min",
+                startValue: StartValueType.max,
+                destroy: DestroyType.min,
             },
         },
         stroke: {
@@ -181,8 +181,8 @@ export const options = {
                 max: 20,
             },
             outModes: {
-                default: "destroy",
-                top: "none",
+                default: OutMode.destroy,
+                top: OutMode.none,
             },
             trail: {
                 fill: {
@@ -197,7 +197,7 @@ export const options = {
         enable: true,
         events: [
             {
-                event: "particleRemoved",
+                event: EventType.particleRemoved,
                 filter: explodeSoundCheck,
                 audio: [
                     "https://particles.js.org/audio/explosion0.mp3",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/preset-fireworks",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "tsParticles fireworks preset",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -87,16 +87,16 @@
   "module": "esm/index.js",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@tsparticles/basic": "^3.0.0",
-    "@tsparticles/engine": "^3.0.0",
-    "@tsparticles/plugin-emitters": "^3.0.0",
-    "@tsparticles/plugin-emitters-shape-square": "^3.0.0",
-    "@tsparticles/plugin-sounds": "^3.0.0",
-    "@tsparticles/shape-line": "^3.0.0",
-    "@tsparticles/updater-destroy": "^3.0.0",
-    "@tsparticles/updater-life": "^3.0.0",
-    "@tsparticles/updater-rotate": "^3.0.0",
-    "@tsparticles/updater-stroke-color": "^3.0.0"
+    "@tsparticles/basic": "^3.4.0",
+    "@tsparticles/engine": "^3.4.0",
+    "@tsparticles/plugin-emitters": "^3.4.0",
+    "@tsparticles/plugin-emitters-shape-square": "^3.4.0",
+    "@tsparticles/plugin-sounds": "^3.4.0",
+    "@tsparticles/shape-line": "^3.4.0",
+    "@tsparticles/updater-destroy": "^3.4.0",
+    "@tsparticles/updater-life": "^3.4.0",
+    "@tsparticles/updater-rotate": "^3.4.0",
+    "@tsparticles/updater-stroke-color": "^3.4.0"
   },
   "publishConfig": {
     "access": "public"