@tsparticles/palette-dust-haze 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 Dust Haze Palette
+# tsParticles DustHaze Palette
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-dust-haze/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-dust-haze) [![npmjs](https://badge.fury.io/js/%40tsparticles%2Fpalette-dust-haze.svg)](https://www.npmjs.com/package/@tsparticles/palette-dust-haze) [![npmjs](https://img.shields.io/npm/dt/%40tsparticles%2Fpalette-dust-haze)](https://www.npmjs.com/package/@tsparticles/palette-dust-haze) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-dustHaze/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-dustHaze) [![npmjs](https://badge.fury.io/js/%40tsparticles%2Fpalette-dustHaze.svg)](https://www.npmjs.com/package/@tsparticles/palette-dustHaze) [![npmjs](https://img.shields.io/npm/dt/%40tsparticles%2Fpalette-coloredSmokeAmber)](https://www.npmjs.com/package/@tsparticles/palette-dustHaze) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
-[tsParticles](https://github.com/tsparticles/tsparticles) palette for dust haze atmosphere.
+[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/atmosphere/dustHaze/images/sample.png)](https://particles.js.org/samples/palettes/dust-haze)
+[![demo](https://raw.githubusercontent.com/tsparticles/palettes/main/palettes/atmosphere/dustHaze/images/sample.png)](https://particles.js.org/samples/palettes/dustHaze)
 
 ## Colors
 
@@ -64,15 +64,18 @@
 ## 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 `loadDustHazePalette` 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-dust-haze@4/tsparticles.palette-dust-haze.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-dustHaze@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>
 ```
 
 ### Usage
@@ -80,16 +83,28 @@
 Once the scripts are loaded you can set up `tsParticles` like this:
 
 ```javascript
-(async () => {
-  await loadDustHazePalette(tsParticles);
+(async engine => {
+  await loadBasic(engine);
+  await loadDustHazePalette(engine);
+
+  const options = {
+    particles: {
+      number: { value: 200 },
+      shape: { type: "circle" },
+      size: { value: { min: 10, max: 15 } },
+      move: {
+        enable: true,
+        speed: 2,
+      },
+    },
+    palette: "dustHaze",
+  };
 
-  await tsParticles.load({
+  await engine.load({
     id: "tsparticles",
-    options: {
-      palette: "dust-haze",
-    },
+    options,
   });
-})();
+})(tsParticles);
 ```
 
 #### Customization

package/browser/browser.js

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

package/browser/index.js

@@ -1,7 +1,7 @@
+import { options } from "./options.js";
 const paletteName = "dust-haze";
 export async function loadDustHazePalette(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 = "dust-haze";
+export async function loadDustHazePalette(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 { loadDustHazePalette } from "./index.js";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.loadDustHazePalette = loadDustHazePalette;
+export * from "./index.js";

package/cjs/index.js

@@ -1,7 +1,7 @@
+import { options } from "./options.js";
 const paletteName = "dust-haze";
 export async function loadDustHazePalette(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 = "dust-haze";
+export async function loadDustHazePalette(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 { loadDustHazePalette } from "./index.js";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.loadDustHazePalette = loadDustHazePalette;
+export * from "./index.js";

package/esm/index.js

@@ -1,7 +1,7 @@
+import { options } from "./options.js";
 const paletteName = "dust-haze";
 export async function loadDustHazePalette(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 = "dust-haze";
+export async function loadDustHazePalette(engine) {
+    await engine.pluginManager.register(async (e) => {
+        const { options } = await import("./options.js");
+        e.pluginManager.addPalette(paletteName, options);
+    });
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@tsparticles/palette-dust-haze",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.15",
   "description": "tsParticles dust haze atmosphere palette",
   "homepage": "https://particles.js.org",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tsparticles/palettes.git",
+    "url": "git+https://github.com/tsparticles/tsparticles.git",
     "directory": "palettes/atmosphere/dustHaze"
   },
   "keywords": [
@@ -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-dust-haze.min.js",
-  "unpkg": "tsparticles.palette-dust-haze.min.js",
+  "jsdelivr": "tsparticles.palette-colored-smoke-amber.min.js",
+  "unpkg": "tsparticles.palette-colored-smoke-amber.min.js",
   "publishConfig": {
     "access": "public"
   }