svelte-confetti-explosion 0.0.6 → 0.2.0

package/ConfettiExplosion.svelte

@@ -57,7 +57,7 @@ const isUndefined = (value) => typeof value === 'undefined';
 const error = (message) => {
     console.error(message);
 };
-function validate(particleCount, duration, colors, particleSize, force, floorHeight, floorWidth) {
+function validate(particleCount, duration, colors, particleSize, force, stageHeight, stageWidth, particlesShape) {
     const isSafeInteger = Number.isSafeInteger;
     if (!isUndefined(particleCount) && isSafeInteger(particleCount) && particleCount < 0) {
         error('particleCount must be a positive integer');
@@ -67,6 +67,11 @@ function validate(particleCount, duration, colors, particleSize, force, floorHei
         error('duration must be a positive integer');
         return false;
     }
+    if (!isUndefined(particlesShape) &&
+        !['mix', 'circles', 'rectangles'].includes(particlesShape)) {
+        error('particlesShape should be either "mix" or "circles" or "rectangle"');
+        return false;
+    }
     if (!isUndefined(colors) && !Array.isArray(colors)) {
         error('colors must be an array of strings');
         return false;
@@ -79,17 +84,17 @@ function validate(particleCount, duration, colors, particleSize, force, floorHei
         error('force must be a positive integer and should be within 0 and 1');
         return false;
     }
-    if (!isUndefined(floorHeight) &&
-        typeof floorHeight === 'number' &&
-        isSafeInteger(floorHeight) &&
-        floorHeight < 0) {
+    if (!isUndefined(stageHeight) &&
+        typeof stageHeight === 'number' &&
+        isSafeInteger(stageHeight) &&
+        stageHeight < 0) {
         error('floorHeight must be a positive integer');
         return false;
     }
-    if (!isUndefined(floorWidth) &&
-        typeof floorWidth === 'number' &&
-        isSafeInteger(floorWidth) &&
-        floorWidth < 0) {
+    if (!isUndefined(stageWidth) &&
+        typeof stageWidth === 'number' &&
+        isSafeInteger(stageWidth) &&
+        stageWidth < 0) {
         error('floorWidth must be a positive integer');
         return false;
     }
@@ -134,6 +139,28 @@ export let particleSize = SIZE;
  * ```
  */
 export let duration = DURATION;
+/**
+ * Shape of particles to use. Can be `mix`, `circles` or `rectangles`
+ *
+ * `mix` will use both circles and rectangles
+ * `circles` will use only circles
+ * `rectangles` will use only rectangles
+ *
+ * @default 'mix'
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion particlesShape='circles' />
+ * ```
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion particlesShape='rectangles' />
+ * ```
+ */
+export let particlesShape = 'mix';
 /**
  * Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors,
  * CSS Variables, literally anything valid in plain CSS.
@@ -201,7 +228,7 @@ $: particles = createParticles(particleCount, colors);
 $: particleCount > 300 &&
     console.log("[SVELTE-CONFETTI-EXPLOSION] That's a lot of confetti, you sure about that? A lesser number" +
         ' like 200 will still give off the party vibes while still not bricking the device 😉');
-$: isValid = validate(particleCount, duration, colors, particleSize, force, stageHeight, stageWidth);
+$: isValid = validate(particleCount, duration, colors, particleSize, force, stageHeight, stageWidth, particlesShape);
 onMount(async () => {
     await waitFor(duration);
     if (shouldDestroyAfterDone) {
@@ -216,7 +243,8 @@ function confettiStyles(node, { degree }) {
     const rotationIndex = Math.round(Math.random() * (rotationTransforms.length - 1));
     const durationChaos = duration - Math.round(Math.random() * 1000);
     const shouldBeCrazy = Math.random() < CRAZY_PARTICLES_FREQUENCY;
-    const isCircle = shouldBeCircle(rotationIndex);
+    const isCircle = particlesShape !== 'rectangles' &&
+        (particlesShape === 'circles' || shouldBeCircle(rotationIndex));
     // x-axis disturbance, roughly the distance the particle will initially deviate from its target
     const x1 = shouldBeCrazy ? round(Math.random() * CRAZY_PARTICLE_CRAZINESS, 2) : 0;
     const x2 = x1 * -1;
@@ -281,6 +309,7 @@ function confettiStyles(node, { degree }) {
   height: 0;
   overflow: visible;
   position: relative;
+  transform: translate3d(var(--x, 0), var(--y, 0), 0);
   z-index: 1200;
 }
 

package/ConfettiExplosion.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+declare type ParticleShape = 'mix' | 'circles' | 'rectangles';
 declare const __propDef: {
     props: {
         /**
@@ -34,6 +35,27 @@ declare const __propDef: {
              * <ConfettiExplosion duration={5000} />
              * ```
              */ duration?: number;
+        /**
+             * Shape of particles to use. Can be `mix`, `circles` or `rectangles`
+             *
+             * `mix` will use both circles and rectangles
+             * `circles` will use only circles
+             * `rectangles` will use only rectangles
+             *
+             * @default 'mix'
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion particlesShape='circles' />
+             * ```
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion particlesShape='rectangles' />
+             * ```
+             */ particlesShape?: ParticleShape;
         /**
              * Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors,
              * CSS Variables, literally anything valid in plain CSS.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Puru Vijay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -14,7 +14,7 @@ Let's party 🎊🎊 with Svelte! svelte-confetti-explosion allows you to show a
 
 [Try it in Svelte REPL](https://svelte.dev/repl/4e41a080739a4427a1f2c98b7f5d4b24?version=3.44.2)
 
-# Installing
+## Installing
 
 ```bash
 # pnpm
@@ -27,7 +27,7 @@ npm install svelte-confetti-explosion
 yarn add svelte-confetti-explosion
 ```
 
-# Usage
+## Usage
 
 Basic usage:
 
@@ -45,11 +45,11 @@ Customizing behavior with options:
 <ConfettiExplosion particleCount={200} force={0.3} />
 ```
 
-# Options
+## Props
 
 There's tons of options available for this package. All of them are already documented within the code itself, so you'll never have to leave the code editor.
 
-## particleCount
+### particleCount
 
 Number of confetti particles to create.
 
@@ -63,7 +63,7 @@ Number of confetti particles to create.
 <ConfettiExplosion particleCount={200} />
 ```
 
-## particleSize
+### particleSize
 
 Size of the confetti particles in pixels
 
@@ -77,7 +77,7 @@ Size of the confetti particles in pixels
 <ConfettiExplosion particleSize={20} />
 ```
 
-## duration
+### duration
 
 Duration of the animation in milliseconds
 
@@ -91,7 +91,7 @@ Duration of the animation in milliseconds
 <ConfettiExplosion duration={5000} />
 ```
 
-## colors
+### colors
 
 Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors, CSS Variables, literally anything valid in plain CSS.
 
@@ -105,7 +105,25 @@ Colors to use for the confetti particles. Pass string array of colors. Can use h
 <ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
 ```
 
-## force
+### particlesShape
+
+Shape of particles to use. Can be `mix`, `circles` or `rectangles`
+
+`mix` will use both circles and rectangles
+`circles` will use only circles
+`rectangles` will use only rectangles
+
+**type:** `'mix' | 'circles' | 'rectangles'`
+
+**Default value:** `'mix'`
+
+**Example:**
+
+```svelte
+<ConfettiExplosion particlesShape="circles" />
+```
+
+### force
 
 Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.
 
@@ -119,7 +137,7 @@ Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum fo
 <ConfettiExplosion force={0.3} />
 ```
 
-## stageHeight
+### stageHeight
 
 Height of the stage in pixels. Confetti will only fall within this height.
 
@@ -133,7 +151,7 @@ Height of the stage in pixels. Confetti will only fall within this height.
 <ConfettiExplosion stageHeight={500} />
 ```
 
-## stageWidth
+### stageWidth
 
 Width of the stage in pixels. Confetti will only fall within this width.
 
@@ -147,7 +165,7 @@ Width of the stage in pixels. Confetti will only fall within this width.
 <ConfettiExplosion stageWidth={500} />
 ```
 
-## shouldDestroyAfterDone
+### shouldDestroyAfterDone
 
 Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to free up memory.
 
@@ -161,12 +179,33 @@ Whether or not destroy all confetti nodes after the `duration` period has passed
 <ConfettiExplosion shouldDestroyAfterDone={false} />
 ```
 
-# Performance
+## Style Props
+
+You can specify two style props on the component: `--x` and `--y`. These will shift the confetti particles on the x and y axis. by how much you specify, These can be in `px`, `em`, `rem`, `vh`, `vw`, literally any valid CSS unit.
+
+**USAGE:**
+
+```svelte
+<ConfettiExplosion --x="10px" --y="10px" />
+```
+
+## Examples
+
+[Basic Example](https://svelte.dev/repl/4e41a080739a4427a1f2c98b7f5d4b24?version=3.44.2)
+
+[Confetti where mouse click](https://svelte.dev/repl/dbe0ab06c34f4f25aa6f948fdd1982c7?version=3.44.2)
+
+## Performance
 
 This library functions by creating 2 DOM nodes for every single confetti. By default, if the `particlesCount` is set to 150, it will create 300 nodes. This is a lot of nodes. For most devices, these many nodes are not a big issue, but I recommend checking your target devices' performance if you choose to go with a higher number, like 400 or 500.
 
 Also, after the specified `duration`, all the confetti DOM nodes will be destroyed. This is to free up memory. If you wish to keep them around, set `shouldDestroyAfterDone` to `false`.
 
-# License
+## License
 
 MIT License
+© [Puru Vijay](https://twitter.com/puruvjdev)
+
+```
+
+```

package/package.json

@@ -1,23 +1,31 @@
 {
   "name": "svelte-confetti-explosion",
-  "version": "0.0.6",
-  "svelte": "index.js",
-  "devDependencies": {
-    "@sveltejs/kit": "^1.0.0-next.197",
-    "prettier": "^2.4.1",
-    "prettier-plugin-svelte": "^2.5.0",
-    "sass": "^1.43.4",
-    "svelte": "^3.44.2",
-    "svelte-check": "^2.2.10",
-    "svelte-preprocess": "^4.9.8",
-    "svelte2tsx": "^0.4.10",
-    "tslib": "^2.3.1",
-    "typescript": "^4.5.2"
+  "version": "0.2.0",
+  "description": "Confetti explosion in Svelte 🎉🎊",
+  "author": "Puru Vijay",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/PuruVJ/svelte-confetti-explosion/issues"
   },
-  "type": "module",
-  "dependencies": {
-    "svelte-confetti-explosion": "0.0.5"
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PuruVJ/svelte-confetti-explosion.git"
   },
+  "svelte": "index.js",
+  "keywords": [
+    "confetti",
+    "party",
+    "fun",
+    "badass",
+    "badassery",
+    "svelte",
+    "sveltekit",
+    "small",
+    "tiny",
+    "performant"
+  ],
+  "type": "module",
   "exports": {
     "./package.json": "./package.json",
     "./ConfettiExplosion.svelte": "./ConfettiExplosion.svelte",