chore(engine): refactoring on easings/color managers

chore(engine): moved all color managers from the engine to their plugins

Author: matteobruni

bundles/all/src/index.ts

@@ -1,4 +1,4 @@
-import type { Engine } from "@tsparticles/engine";
+import { type Engine, assertValidVersion } from "@tsparticles/engine";
 import { initPjs } from "@tsparticles/pjs";
 import { loadArrowShape } from "@tsparticles/shape-arrow";
 import { loadBubbleEffect } from "@tsparticles/effect-bubble";
@@ -49,6 +49,8 @@ import { loadSpiralShape } from "@tsparticles/shape-spiral";
 import { loadTrailEffect } from "@tsparticles/effect-trail";
 import { loadZigZagPath } from "@tsparticles/path-zig-zag";
 
+declare const __VERSION__: string;
+
 /**
  * Loads the slime bundle with all plugins needed for running the tsParticles All package.
  * This function must be called to make tsParticles All work.
@@ -59,21 +61,23 @@ import { loadZigZagPath } from "@tsparticles/path-zig-zag";
  * @param refresh -
  */
 export async function loadAll(engine: Engine, refresh = true): Promise<void> {
+    assertValidVersion(engine, __VERSION__);
+
     initPjs(engine);
 
     await loadFull(engine, false);
 
-    await loadHsvColorPlugin();
-    await loadNamedColorPlugin();
-    await loadOklchColorPlugin();
-    await loadEasingBackPlugin();
-    await loadEasingCircPlugin();
-    await loadEasingCubicPlugin();
-    await loadEasingExpoPlugin();
-    await loadEasingLinearPlugin();
-    await loadEasingQuartPlugin();
-    await loadEasingQuintPlugin();
-    await loadEasingSinePlugin();
+    await loadHsvColorPlugin(engine, false);
+    await loadNamedColorPlugin(engine, false);
+    await loadOklchColorPlugin(engine, false);
+    await loadEasingBackPlugin(engine, false);
+    await loadEasingCircPlugin(engine, false);
+    await loadEasingCubicPlugin(engine, false);
+    await loadEasingExpoPlugin(engine, false);
+    await loadEasingLinearPlugin(engine, false);
+    await loadEasingQuartPlugin(engine, false);
+    await loadEasingQuintPlugin(engine, false);
+    await loadEasingSinePlugin(engine, false);
 
     await loadEmittersShapeCanvas(engine, false);
     await loadEmittersShapePath(engine, false);

bundles/basic/README.md

@@ -10,6 +10,9 @@
 
 - [@tsparticles/engine](https://github.com/tsparticles/tsparticles/tree/main/engine)
 - [@tsparticles/move-base](https://github.com/tsparticles/tsparticles/tree/main/move/base)
+- [@tsparticles/plugin-hex-color](https://github.com/tsparticles/tsparticles/tree/main/plugins/colors/hexColor)
+- [@tsparticles/plugin-hsl-color](https://github.com/tsparticles/tsparticles/tree/main/plugins/colors/hslColor)
+- [@tsparticles/plugin-rgb-color](https://github.com/tsparticles/tsparticles/tree/main/plugins/colors/rgbColor)
 - [@tsparticles/shape-circle](https://github.com/tsparticles/tsparticles/tree/main/shapes/circle)
 - [@tsparticles/updater-color](https://github.com/tsparticles/tsparticles/tree/main/updaters/color)
 - [@tsparticles/updater-opacity](https://github.com/tsparticles/tsparticles/tree/main/updaters/opacity)

bundles/basic/package.dist.json

@@ -101,6 +101,9 @@
   "dependencies": {
     "@tsparticles/engine": "3.6.0",
     "@tsparticles/move-base": "3.6.0",
+    "@tsparticles/plugin-hex-color": "3.6.0",
+    "@tsparticles/plugin-hsl-color": "3.6.0",
+    "@tsparticles/plugin-rgb-color": "3.6.0",
     "@tsparticles/shape-circle": "3.6.0",
     "@tsparticles/updater-color": "3.6.0",
     "@tsparticles/updater-opacity": "3.6.0",

bundles/basic/package.json

@@ -109,6 +109,9 @@
   "dependencies": {
     "@tsparticles/engine": "workspace:3.6.0",
     "@tsparticles/move-base": "workspace:3.6.0",
+    "@tsparticles/plugin-hex-color": "workspace:3.6.0",
+    "@tsparticles/plugin-hsl-color": "workspace:3.6.0",
+    "@tsparticles/plugin-rgb-color": "workspace:3.6.0",
     "@tsparticles/shape-circle": "workspace:3.6.0",
     "@tsparticles/updater-color": "workspace:3.6.0",
     "@tsparticles/updater-opacity": "workspace:3.6.0",

bundles/basic/src/index.ts

@@ -1,11 +1,16 @@
-import type { Engine } from "@tsparticles/engine";
+import { type Engine, assertValidVersion } from "@tsparticles/engine";
 import { loadBaseMover } from "@tsparticles/move-base";
 import { loadCircleShape } from "@tsparticles/shape-circle";
 import { loadColorUpdater } from "@tsparticles/updater-color";
+import { loadHexColorPlugin } from "@tsparticles/plugin-hex-color";
+import { loadHslColorPlugin } from "@tsparticles/plugin-hsl-color";
 import { loadOpacityUpdater } from "@tsparticles/updater-opacity";
 import { loadOutModesUpdater } from "@tsparticles/updater-out-modes";
+import { loadRgbColorPlugin } from "@tsparticles/plugin-rgb-color";
 import { loadSizeUpdater } from "@tsparticles/updater-size";
 
+declare const __VERSION__: string;
+
 /**
  * Loads the slime bundle with all plugins needed for running the tsParticles Basic package.
  * This function must be called to make tsParticles Basic work.
@@ -16,6 +21,12 @@ import { loadSizeUpdater } from "@tsparticles/updater-size";
  * @param refresh -
  */
 export async function loadBasic(engine: Engine, refresh = true): Promise<void> {
+    assertValidVersion(engine, __VERSION__);
+
+    await loadHexColorPlugin(engine, false);
+    await loadHslColorPlugin(engine, false);
+    await loadRgbColorPlugin(engine, false);
+
     await loadBaseMover(engine, false);
 
     await loadCircleShape(engine, false);

bundles/confetti/src/confetti.ts

@@ -3,6 +3,7 @@ import {
     type Engine,
     type ISourceOptions,
     type RecursivePartial,
+    assertValidVersion,
     isSsr,
     isString,
     millisecondsToSeconds,
@@ -26,6 +27,8 @@ import { loadStarShape } from "@tsparticles/shape-star";
 import { loadTiltUpdater } from "@tsparticles/updater-tilt";
 import { loadWobbleUpdater } from "@tsparticles/updater-wobble";
 
+declare const __VERSION__: string;
+
 const defaultGravity = 9.81,
     sizeFactor = 5,
     speedFactor = 3,
@@ -115,6 +118,8 @@ async function initPlugins(engine: Engine): Promise<void> {
 
     initializing = true;
 
+    assertValidVersion(engine, __VERSION__);
+
     await loadEmittersPlugin(engine, false);
     await loadMotionPlugin(engine, false);
     await loadCardsShape(engine, false);
@@ -493,7 +498,7 @@ confetti.init = async (): Promise<void> => {
 /**
  *
  */
-confetti.version = tsParticles.version;
+confetti.version = __VERSION__;
 
 if (!isSsr()) {
     window.confetti = confetti;

bundles/fireworks/src/fireworks.ts

@@ -2,13 +2,15 @@ import {
     type Container,
     type CustomEventArgs,
     DestroyType,
+    type Engine,
     EventType,
     type ISourceOptions,
     MoveDirection,
     OutMode,
     type Particle,
     type RecursivePartial,
     StartValueType,
+    assertValidVersion,
     getRangeMax,
     getRangeMin,
     isNumber,
@@ -28,6 +30,8 @@ import { loadRotateUpdater } from "@tsparticles/updater-rotate";
 import { loadSoundsPlugin } from "@tsparticles/plugin-sounds";
 import { loadTrailEffect } from "@tsparticles/effect-trail";
 
+declare const __VERSION__: string;
+
 const minSplitCount = 2;
 
 let initialized = false;
@@ -80,8 +84,9 @@ class FireworksInstance {
 }
 
 /**
+ * @param engine - the engine to use for loading all plugins
  */
-async function initPlugins(): Promise<void> {
+async function initPlugins(engine: Engine): Promise<void> {
     if (initialized) {
         return;
     }
@@ -102,14 +107,16 @@ async function initPlugins(): Promise<void> {
 
     initializing = true;
 
-    await loadEmittersPlugin(tsParticles, false);
-    await loadEmittersShapeSquare(tsParticles, false);
-    await loadSoundsPlugin(tsParticles, false);
-    await loadRotateUpdater(tsParticles, false);
-    await loadDestroyUpdater(tsParticles, false);
-    await loadLifeUpdater(tsParticles, false);
-    await loadTrailEffect(tsParticles, false);
-    await loadBasic(tsParticles, false);
+    assertValidVersion(engine, __VERSION__);
+
+    await loadEmittersPlugin(engine, false);
+    await loadEmittersShapeSquare(engine, false);
+    await loadSoundsPlugin(engine, false);
+    await loadRotateUpdater(engine, false);
+    await loadDestroyUpdater(engine, false);
+    await loadLifeUpdater(engine, false);
+    await loadTrailEffect(engine, false);
+    await loadBasic(engine, false);
 
     initializing = false;
     initialized = true;
@@ -327,7 +334,7 @@ async function getFireworksInstance(
     sourceOptions: RecursivePartial<IFireworkOptions>,
     canvas?: HTMLCanvasElement,
 ): Promise<FireworksInstance | undefined> {
-    await initPlugins();
+    await initPlugins(tsParticles);
 
     const options = new FireworkOptions();
 
@@ -376,10 +383,10 @@ fireworks.create = async (
 };
 
 fireworks.init = async (): Promise<void> => {
-    await initPlugins();
+    await initPlugins(tsParticles);
 };
 
-fireworks.version = tsParticles.version;
+fireworks.version = __VERSION__;
 
 if (!isSsr()) {
     window.fireworks = fireworks;

bundles/full/src/index.ts

@@ -1,4 +1,4 @@
-import type { Engine } from "@tsparticles/engine";
+import { type Engine, assertValidVersion } from "@tsparticles/engine";
 import { loadAbsorbersPlugin } from "@tsparticles/plugin-absorbers";
 import { loadDestroyUpdater } from "@tsparticles/updater-destroy";
 import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
@@ -12,6 +12,8 @@ import { loadTiltUpdater } from "@tsparticles/updater-tilt";
 import { loadTwinkleUpdater } from "@tsparticles/updater-twinkle";
 import { loadWobbleUpdater } from "@tsparticles/updater-wobble";
 
+declare const __VERSION__: string;
+
 /**
  * Loads the full bundle with all plugins needed for running the tsParticles package.
  * This function must be called to make tsParticles work.
@@ -22,6 +24,8 @@ import { loadWobbleUpdater } from "@tsparticles/updater-wobble";
  * @param refresh -
  */
 export async function loadFull(engine: Engine, refresh = true): Promise<void> {
+    assertValidVersion(engine, __VERSION__);
+
     await loadDestroyUpdater(engine, false);
     await loadRollUpdater(engine, false);
     await loadTiltUpdater(engine, false);

bundles/pjs/src/index.ts

@@ -1,11 +1,13 @@
 /**
  * [[include:pjsMigration.md]]
  */
-import { type Container, type Engine } from "@tsparticles/engine";
+import { type Container, type Engine, assertValidVersion } from "@tsparticles/engine";
 import type { IParticlesJS } from "./VincentGarreau/IParticlesJS.js";
 import { Particles } from "./marcbruederlin/Particles.js";
 import { initParticlesJS } from "./VincentGarreau/particles.js";
 
+declare const __VERSION__: string;
+
 declare global {
     interface Window {
         /**
@@ -54,6 +56,8 @@ const initPjs = (
      */
     particlesJS: IParticlesJS;
 } => {
+    assertValidVersion(engine, __VERSION__);
+
     const { particlesJS, pJSDom } = initParticlesJS(engine);
 
     window.particlesJS = particlesJS;

bundles/slim/src/index.ts

@@ -1,4 +1,4 @@
-import type { Engine } from "@tsparticles/engine";
+import { type Engine, assertValidVersion } from "@tsparticles/engine";
 import { loadBasic } from "@tsparticles/basic";
 import { loadEasingQuadPlugin } from "@tsparticles/plugin-easing-quad";
 import { loadEmojiShape } from "@tsparticles/shape-emoji";
@@ -25,6 +25,8 @@ import { loadSquareShape } from "@tsparticles/shape-square";
 import { loadStarShape } from "@tsparticles/shape-star";
 import { loadStrokeColorUpdater } from "@tsparticles/updater-stroke-color";
 
+declare const __VERSION__: string;
+
 /**
  * Loads the slime bundle with all plugins needed for running the tsParticles Slim package.
  * This function must be called to make tsParticles Slim work.
@@ -35,6 +37,8 @@ import { loadStrokeColorUpdater } from "@tsparticles/updater-stroke-color";
  * @param refresh -
  */
 export async function loadSlim(engine: Engine, refresh = true): Promise<void> {
+    assertValidVersion(engine, __VERSION__);
+
     await loadParallaxMover(engine, false);
 
     await loadExternalAttractInteraction(engine, false);
@@ -52,7 +56,7 @@ export async function loadSlim(engine: Engine, refresh = true): Promise<void> {
     await loadParticlesCollisionsInteraction(engine, false);
     await loadParticlesLinksInteraction(engine, false);
 
-    await loadEasingQuadPlugin();
+    await loadEasingQuadPlugin(engine, false);
 
     await loadEmojiShape(engine, false);
     await loadImageShape(engine, false);