@tsparticles/palette-foam-and-bubbles 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 Foam & Bubbles Palette
+# tsParticles FoamAndBubbles Palette
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-foam-and-bubbles/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-foam-and-bubbles) [![npmjs](https://badge.fury.io/js/@tsparticles/palette-foam-and-bubbles.svg)](https://www.npmjs.com/package/@tsparticles/palette-foam-and-bubbles) [![npmjs](https://img.shields.io/npm/dt/@tsparticles/palette-foam-and-bubbles)](https://www.npmjs.com/package/@tsparticles/palette-foam-and-bubbles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-foamAndBubbles/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-foamAndBubbles) [![npmjs](https://badge.fury.io/js/%40tsparticles%2Fpalette-foamAndBubbles.svg)](https://www.npmjs.com/package/@tsparticles/palette-foamAndBubbles) [![npmjs](https://img.shields.io/npm/dt/%40tsparticles%2Fpalette-coloredSmokeAmber)](https://www.npmjs.com/package/@tsparticles/palette-foamAndBubbles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
-[tsParticles](https://github.com/tsparticles/tsparticles) palette for foam & bubbles.
+[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/palettes/foamAndBubbles/images/sample.png)](https://particles.js.org/samples/palettes/foam-and-bubbles)
+[![demo](https://raw.githubusercontent.com/tsparticles/palettes/main/palettes/water/foamAndBubbles/images/sample.png)](https://particles.js.org/samples/palettes/foamAndBubbles)
 
 ## 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 `loadFoamAndBubblesPalette` 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-foam-and-bubbles@3/tsparticles.palette.foam-and-bubbles.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-foamAndBubbles@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 loadFoamAndBubblesPalette(tsParticles);
+(async engine => {
+  await loadBasic(engine);
+  await loadFoamAndBubblesPalette(engine);
 
-  await tsParticles.load({
-    id: "tsparticles",
-    options: {
-      palette: "foam-and-bubbles",
+  const options = {
+    particles: {
+      number: { value: 200 },
+      shape: { type: "circle" },
+      size: { value: { min: 10, max: 15 } },
+      move: {
+        enable: true,
+        speed: 2,
+      },
     },
+    palette: "foamAndBubbles",
+  };
+
+  await engine.load({
+    id: "tsparticles",
+    options,
   });
-})();
+})(tsParticles);
 ```
 
 #### Customization
@@ -97,47 +112,11 @@ Once the scripts are loaded you can set up `tsParticles` like this:
 **Important ⚠️**
 You can override all the options defining the properties like in any standard `tsParticles` installation.
 
-```javascript
-tsParticles.load({
-  id: "tsparticles",
-  options: {
-    particles: {
-      shape: {
-        type: "square", // starting from v2, this require the square shape script
-      },
-    },
-    palette: "foam-and-bubbles",
-  },
-});
-```
-
-Like in the sample above, the circles will be replaced by squares.
-
 ### Frameworks with a tsParticles component library
 
-Checkout the documentation in the component library repository and call the `loadFoamAndBubblesPalette` function instead of `loadFull`, `loadSlim` or similar functions.
-
-The options shown above are valid for all the component libraries.
-
-## Common pitfalls
-
-- Calling `tsParticles.load(...)` before `loadFoamAndBubblesPalette(...)`
-- Verify required peer packages before enabling advanced options
-- Change one option group at a time to isolate regressions quickly
+Checkout the documentation in the component library repository and call the `loadFoamAndBubblesPalette` function.
 
 ## Related docs
 
 - Presets and palettes catalog: <https://github.com/tsparticles/palettes>
 - Main docs: <https://particles.js.org/docs/>
-
----
-
-```mermaid
-flowchart TD
-
-subgraph pr [Palettes]
-pafoamAndBubbles[Foam & Bubbles]
-end
-
-e[tsParticles Engine] --> pafoamAndBubbles
-```

package/browser/browser.js

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

package/browser/index.js

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

package/cjs/index.js

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

package/esm/index.js

@@ -1,7 +1,7 @@
+import { options } from "./options.js";
 const paletteName = "foam-and-bubbles";
 export async function loadFoamAndBubblesPalette(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 = "foam-and-bubbles";
+export async function loadFoamAndBubblesPalette(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-foam-and-bubbles",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.15",
   "description": "tsParticles foam & bubbles 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/water/foamAndBubbles"
   },
   "keywords": [
@@ -81,8 +81,7 @@
       "url": "https://www.buymeacoffee.com/matteobruni"
     }
   ],
-  "jsdelivr": "tsparticles.palette.foam-and-bubbles.min.js",
-  "unpkg": "tsparticles.palette.foam-and-bubbles.min.js",
+  "sideEffects": false,
   "browser": "browser/index.js",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -96,13 +95,23 @@
       "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-colored-smoke-amber.min.js",
+  "unpkg": "tsparticles.palette-colored-smoke-amber.min.js",
   "publishConfig": {
     "access": "public"
-  },
-  "type": "module"
+  }
 }