@tsparticles/palette-fireworks-rainbow-stroke 4.0.0-beta.0 → 4.0.0-beta.15

package/README.md

@@ -1,10 +1,10 @@
 [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
 
-# tsParticles Fireworks Rainbow Stroke Palette
+# tsParticles RainbowStroke Palette
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-fireworks-rainbow-stroke/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-fireworks-rainbow-stroke) [![npmjs](https://badge.fury.io/js/%40tsparticles%2Fpalette-fireworks-rainbow-stroke.svg)](https://www.npmjs.com/package/@tsparticles/palette-fireworks-rainbow-stroke) [![npmjs](https://img.shields.io/npm/dt/%40tsparticles%2Fpalette-fireworks-rainbow-stroke)](https://www.npmjs.com/package/@tsparticles/palette-fireworks-rainbow-stroke) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-rainbowStroke/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-rainbowStroke) [![npmjs](https://badge.fury.io/js/%40tsparticles%2Fpalette-rainbowStroke.svg)](https://www.npmjs.com/package/@tsparticles/palette-rainbowStroke) [![npmjs](https://img.shields.io/npm/dt/%40tsparticles%2Fpalette-coloredSmokeAmber)](https://www.npmjs.com/package/@tsparticles/palette-rainbowStroke) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
-[tsParticles](https://github.com/tsparticles/tsparticles) palette for fireworks rainbow stroke.
+[tsParticles](https://github.com/tsparticles/tsparticles) palette for colored smoke amber.
 
 [![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,7 +12,7 @@
 
 ## Sample
 
-[![demo](https://raw.githubusercontent.com/tsparticles/palettes/main/fireworks/fireworksRainbowStroke/images/sample.png)](https://particles.js.org/samples/palettes/fireworks-rainbow-stroke)
+[![demo](https://raw.githubusercontent.com/tsparticles/palettes/main/palettes/fireworks/rainbowStroke/images/sample.png)](https://particles.js.org/samples/palettes/rainbowStroke)
 
 ## Colors
 
@@ -21,15 +21,18 @@ See the palette source for stroke layer details.
 ## Quick checklist
 
 1. Install `@tsparticles/engine` (or use the CDN bundle below)
-2. Call the package loader function(s) before `tsParticles.load(...)`
-3. Apply the package options in your `tsParticles.load(...)` config
+2. Load a base package (for example `@tsparticles/basic`) and call `loadRainbowStrokePalette` before `tsParticles.load(...)`
+3. Apply the palette plus a minimal particles configuration in your options
+
+A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.
 
 ## How to use it
 
 ### CDN / Vanilla JS / jQuery
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-fireworks-rainbow-stroke@4/tsparticles.palette-fireworks-rainbow-stroke.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-rainbowStroke@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>
 ```
 
 ### Usage
@@ -37,16 +40,28 @@ See the palette source for stroke layer details.
 Once the scripts are loaded you can set up `tsParticles` like this:
 
 ```javascript
-(async () => {
-  await loadFireworksRainbowStrokePalette(tsParticles);
+(async engine => {
+  await loadBasic(engine);
+  await loadRainbowStrokePalette(engine);
+
+  const options = {
+    particles: {
+      number: { value: 200 },
+      shape: { type: "circle" },
+      size: { value: { min: 10, max: 15 } },
+      move: {
+        enable: true,
+        speed: 2,
+      },
+    },
+    palette: "rainbowStroke",
+  };
 
-  await tsParticles.load({
+  await engine.load({
     id: "tsparticles",
-    options: {
-      palette: "fireworks-rainbow-stroke",
-    },
+    options,
   });
-})();
+})(tsParticles);
 ```
 
 #### Customization
@@ -56,7 +71,7 @@ You can override all the options defining the properties like in any standard `t
 
 ### Frameworks with a tsParticles component library
 
-Checkout the documentation in the component library repository and call the `loadFireworksRainbowStrokePalette` function.
+Checkout the documentation in the component library repository and call the `loadRainbowStrokePalette` function.
 
 ## Related docs
 

package/browser/browser.js

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

package/browser/index.js

@@ -1,7 +1,7 @@
+import { options } from "./options.js";
 const paletteName = "fireworks-rainbow-stroke";
 export async function loadFireworksRainbowStrokePalette(engine) {
-    await engine.pluginManager.register(async (e) => {
-        const { options } = await import("./options.js");
+    await engine.pluginManager.register(e => {
         e.pluginManager.addPalette(paletteName, options);
     });
 }

package/browser/index.lazy.js

@@ -0,0 +1,7 @@
+const paletteName = "fireworks-rainbow-stroke";
+export async function loadFireworksRainbowStrokePalette(engine) {
+    await engine.pluginManager.register(async (e) => {
+        const { options } = await import("./options.js");
+        e.pluginManager.addPalette(paletteName, options);
+    });
+}

package/cjs/browser.js

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

package/cjs/index.js

@@ -1,7 +1,7 @@
+import { options } from "./options.js";
 const paletteName = "fireworks-rainbow-stroke";
 export async function loadFireworksRainbowStrokePalette(engine) {
-    await engine.pluginManager.register(async (e) => {
-        const { options } = await import("./options.js");
+    await engine.pluginManager.register(e => {
         e.pluginManager.addPalette(paletteName, options);
     });
 }

package/cjs/index.lazy.js

@@ -0,0 +1,7 @@
+const paletteName = "fireworks-rainbow-stroke";
+export async function loadFireworksRainbowStrokePalette(engine) {
+    await engine.pluginManager.register(async (e) => {
+        const { options } = await import("./options.js");
+        e.pluginManager.addPalette(paletteName, options);
+    });
+}

package/esm/browser.js

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

package/esm/index.js

@@ -1,7 +1,7 @@
+import { options } from "./options.js";
 const paletteName = "fireworks-rainbow-stroke";
 export async function loadFireworksRainbowStrokePalette(engine) {
-    await engine.pluginManager.register(async (e) => {
-        const { options } = await import("./options.js");
+    await engine.pluginManager.register(e => {
         e.pluginManager.addPalette(paletteName, options);
     });
 }

package/esm/index.lazy.js

@@ -0,0 +1,7 @@
+const paletteName = "fireworks-rainbow-stroke";
+export async function loadFireworksRainbowStrokePalette(engine) {
+    await engine.pluginManager.register(async (e) => {
+        const { options } = await import("./options.js");
+        e.pluginManager.addPalette(paletteName, options);
+    });
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@tsparticles/palette-fireworks-rainbow-stroke",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.15",
   "description": "tsParticles fireworks rainbow stroke palette",
   "homepage": "https://particles.js.org",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tsparticles/palettes.git",
-    "directory": "palettes/fireworks/fireworksRainbowStroke"
+    "url": "git+https://github.com/tsparticles/tsparticles.git",
+    "directory": "palettes/fireworks/rainbowStroke"
   },
   "keywords": [
     "front-end",
@@ -95,14 +95,22 @@
       "umd": "./umd/index.js",
       "default": "./cjs/index.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./lazy": {
+      "types": "./types/index.lazy.d.ts",
+      "browser": "./browser/index.lazy.js",
+      "import": "./esm/index.lazy.js",
+      "require": "./cjs/index.lazy.js",
+      "umd": "./umd/index.lazy.js",
+      "default": "./cjs/index.lazy.js"
+    }
   },
   "dependencies": {
-    "@tsparticles/engine": "^4.0.0-beta.11"
+    "@tsparticles/engine": "4.0.0-beta.15"
   },
   "type": "module",
-  "jsdelivr": "tsparticles.palette-fireworks-rainbow-stroke.min.js",
-  "unpkg": "tsparticles.palette-fireworks-rainbow-stroke.min.js",
+  "jsdelivr": "tsparticles.palette-colored-smoke-amber.min.js",
+  "unpkg": "tsparticles.palette-colored-smoke-amber.min.js",
   "publishConfig": {
     "access": "public"
   }