@tsparticles/palette-water-splash 4.0.0-beta.12 → 4.0.0-beta.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
1
  [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
2
2
 
3
- # tsParticles Water Splash Palette
3
+ # tsParticles Splash Palette
4
4
 
5
- [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-water-splash/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-water-splash) [![npmjs](https://badge.fury.io/js/@tsparticles/palette-water-splash.svg)](https://www.npmjs.com/package/@tsparticles/palette-water-splash) [![npmjs](https://img.shields.io/npm/dt/@tsparticles/palette-water-splash)](https://www.npmjs.com/package/@tsparticles/palette-water-splash) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
5
+ [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-splash/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-splash) [![npmjs](https://badge.fury.io/js/%40tsparticles%2Fpalette-splash.svg)](https://www.npmjs.com/package/@tsparticles/palette-splash) [![npmjs](https://img.shields.io/npm/dt/%40tsparticles%2Fpalette-coloredSmokeAmber)](https://www.npmjs.com/package/@tsparticles/palette-splash) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
6
6
 
7
- [tsParticles](https://github.com/tsparticles/tsparticles) palette for water splash.
7
+ [tsParticles](https://github.com/tsparticles/tsparticles) palette for colored smoke amber.
8
8
 
9
9
  [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
10
10
 
@@ -12,7 +12,7 @@
12
12
 
13
13
  ## Sample
14
14
 
15
- [![demo](https://raw.githubusercontent.com/tsparticles/palettes/main/palettes/waterSplash/images/sample.png)](https://particles.js.org/samples/palettes/water-splash)
15
+ [![demo](https://raw.githubusercontent.com/tsparticles/palettes/main/palettes/water/splash/images/sample.png)](https://particles.js.org/samples/palettes/splash)
16
16
 
17
17
  ## Colors
18
18
 
@@ -64,7 +64,7 @@
64
64
  ## Quick checklist
65
65
 
66
66
  1. Install `@tsparticles/engine` (or use the CDN bundle below)
67
- 2. Load a base package (for example `@tsparticles/basic`) and call `loadWaterSplashPalette` before `tsParticles.load(...)`
67
+ 2. Load a base package (for example `@tsparticles/basic`) and call `loadSplashPalette` before `tsParticles.load(...)`
68
68
  3. Apply the palette plus a minimal particles configuration in your options
69
69
 
70
70
  A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.
@@ -75,7 +75,7 @@ A palette defines colors, not complete behavior, so pair it with a runtime packa
75
75
 
76
76
  ```html
77
77
  <script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script>
78
- <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-water-splash@4/tsparticles.palette.water-splash.min.js"></script>
78
+ <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-splash@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>
79
79
  ```
80
80
 
81
81
  ### Usage
@@ -85,7 +85,7 @@ Once the scripts are loaded you can set up `tsParticles` like this:
85
85
  ```javascript
86
86
  (async engine => {
87
87
  await loadBasic(engine);
88
- await loadWaterSplashPalette(engine);
88
+ await loadSplashPalette(engine);
89
89
 
90
90
  const options = {
91
91
  particles: {
@@ -97,7 +97,7 @@ Once the scripts are loaded you can set up `tsParticles` like this:
97
97
  speed: 2,
98
98
  },
99
99
  },
100
- palette: "water-splash",
100
+ palette: "splash",
101
101
  };
102
102
 
103
103
  await engine.load({
@@ -112,47 +112,11 @@ Once the scripts are loaded you can set up `tsParticles` like this:
112
112
  **Important ⚠️**
113
113
  You can override all the options defining the properties like in any standard `tsParticles` installation.
114
114
 
115
- ```javascript
116
- tsParticles.load({
117
- id: "tsparticles",
118
- options: {
119
- particles: {
120
- shape: {
121
- type: "square", // starting from v2, this require the square shape script
122
- },
123
- },
124
- palette: "water-splash",
125
- },
126
- });
127
- ```
128
-
129
- Like in the sample above, the circles will be replaced by squares.
130
-
131
115
  ### Frameworks with a tsParticles component library
132
116
 
133
- Checkout the documentation in the component library repository and call the `loadWaterSplashPalette` function instead of `loadFull`, `loadSlim` or similar functions.
134
-
135
- The options shown above are valid for all the component libraries.
136
-
137
- ## Common pitfalls
138
-
139
- - Calling `tsParticles.load(...)` before `loadWaterSplashPalette(...)`
140
- - Verify required peer packages before enabling advanced options
141
- - Change one option group at a time to isolate regressions quickly
117
+ Checkout the documentation in the component library repository and call the `loadSplashPalette` function.
142
118
 
143
119
  ## Related docs
144
120
 
145
121
  - Presets and palettes catalog: <https://github.com/tsparticles/palettes>
146
122
  - Main docs: <https://particles.js.org/docs/>
147
-
148
- ---
149
-
150
- ```mermaid
151
- flowchart TD
152
-
153
- subgraph pr [Palettes]
154
- pawaterSplash[Water Splash]
155
- end
156
-
157
- e[tsParticles Engine] --> pawaterSplash
158
- ```
@@ -0,0 +1,5 @@
1
+ import { loadWaterSplashPalette } from "./index.js";
2
+ const globalObject = globalThis;
3
+ globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
4
+ globalObject.loadWaterSplashPalette = loadWaterSplashPalette;
5
+ export * from "./index.js";
package/browser/index.js CHANGED
@@ -1,7 +1,7 @@
1
+ import { options } from "./options.js";
1
2
  const paletteName = "water-splash";
2
3
  export async function loadWaterSplashPalette(engine) {
3
- await engine.pluginManager.register(async (e) => {
4
- const { options } = await import("./options.js");
4
+ await engine.pluginManager.register(e => {
5
5
  e.pluginManager.addPalette(paletteName, options);
6
6
  });
7
7
  }
@@ -0,0 +1,7 @@
1
+ const paletteName = "splash";
2
+ export async function loadSplashPalette(engine) {
3
+ await engine.pluginManager.register(async (e) => {
4
+ const { options } = await import("./options.js");
5
+ e.pluginManager.addPalette(paletteName, options);
6
+ });
7
+ }
package/cjs/browser.js ADDED
@@ -0,0 +1,5 @@
1
+ import { loadWaterSplashPalette } from "./index.js";
2
+ const globalObject = globalThis;
3
+ globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
4
+ globalObject.loadWaterSplashPalette = loadWaterSplashPalette;
5
+ export * from "./index.js";
package/cjs/index.js CHANGED
@@ -1,7 +1,7 @@
1
+ import { options } from "./options.js";
1
2
  const paletteName = "water-splash";
2
3
  export async function loadWaterSplashPalette(engine) {
3
- await engine.pluginManager.register(async (e) => {
4
- const { options } = await import("./options.js");
4
+ await engine.pluginManager.register(e => {
5
5
  e.pluginManager.addPalette(paletteName, options);
6
6
  });
7
7
  }
@@ -0,0 +1,7 @@
1
+ const paletteName = "splash";
2
+ export async function loadSplashPalette(engine) {
3
+ await engine.pluginManager.register(async (e) => {
4
+ const { options } = await import("./options.js");
5
+ e.pluginManager.addPalette(paletteName, options);
6
+ });
7
+ }
package/esm/browser.js ADDED
@@ -0,0 +1,5 @@
1
+ import { loadWaterSplashPalette } from "./index.js";
2
+ const globalObject = globalThis;
3
+ globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
4
+ globalObject.loadWaterSplashPalette = loadWaterSplashPalette;
5
+ export * from "./index.js";
package/esm/index.js CHANGED
@@ -1,7 +1,7 @@
1
+ import { options } from "./options.js";
1
2
  const paletteName = "water-splash";
2
3
  export async function loadWaterSplashPalette(engine) {
3
- await engine.pluginManager.register(async (e) => {
4
- const { options } = await import("./options.js");
4
+ await engine.pluginManager.register(e => {
5
5
  e.pluginManager.addPalette(paletteName, options);
6
6
  });
7
7
  }
@@ -0,0 +1,7 @@
1
+ const paletteName = "splash";
2
+ export async function loadSplashPalette(engine) {
3
+ await engine.pluginManager.register(async (e) => {
4
+ const { options } = await import("./options.js");
5
+ e.pluginManager.addPalette(paletteName, options);
6
+ });
7
+ }
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@tsparticles/palette-water-splash",
3
- "version": "4.0.0-beta.12",
3
+ "version": "4.0.0-beta.16",
4
4
  "description": "tsParticles water splash palette",
5
5
  "homepage": "https://particles.js.org",
6
6
  "repository": {
7
7
  "type": "git",
8
8
  "url": "git+https://github.com/tsparticles/tsparticles.git",
9
- "directory": "palettes/water/waterSplash"
9
+ "directory": "palettes/water/splash"
10
10
  },
11
11
  "keywords": [
12
12
  "front-end",
@@ -81,8 +81,7 @@
81
81
  "url": "https://www.buymeacoffee.com/matteobruni"
82
82
  }
83
83
  ],
84
- "jsdelivr": "tsparticles.palette.water-splash.min.js",
85
- "unpkg": "tsparticles.palette.water-splash.min.js",
84
+ "sideEffects": false,
86
85
  "browser": "browser/index.js",
87
86
  "main": "cjs/index.js",
88
87
  "module": "esm/index.js",
@@ -96,13 +95,23 @@
96
95
  "umd": "./umd/index.js",
97
96
  "default": "./cjs/index.js"
98
97
  },
99
- "./package.json": "./package.json"
98
+ "./package.json": "./package.json",
99
+ "./lazy": {
100
+ "types": "./types/index.lazy.d.ts",
101
+ "browser": "./browser/index.lazy.js",
102
+ "import": "./esm/index.lazy.js",
103
+ "require": "./cjs/index.lazy.js",
104
+ "umd": "./umd/index.lazy.js",
105
+ "default": "./cjs/index.lazy.js"
106
+ }
100
107
  },
101
108
  "dependencies": {
102
- "@tsparticles/engine": "4.0.0-beta.12"
109
+ "@tsparticles/engine": "4.0.0-beta.16"
103
110
  },
111
+ "type": "module",
112
+ "jsdelivr": "tsparticles.palette-colored-smoke-amber.min.js",
113
+ "unpkg": "tsparticles.palette-colored-smoke-amber.min.js",
104
114
  "publishConfig": {
105
115
  "access": "public"
106
- },
107
- "type": "module"
116
+ }
108
117
  }