svelte-confetti-explosion 0.3.0 → 0.4.0

package/ConfettiExplosion.svelte

@@ -4,22 +4,11 @@ const ROTATION_SPEED_MAX = 800; // maximum possible duration of single particle
 const CRAZY_PARTICLES_FREQUENCY = 0.1; // 0-1 frequency of crazy curvy unpredictable particles
 const CRAZY_PARTICLE_CRAZINESS = 0.3; // 0-1 how crazy these crazy particles are
 const BEZIER_MEDIAN = 0.5; // utility for mid-point bezier curves, to ensure smooth motion paths
-const FORCE = 0.5; // 0-1 roughly the vertical force at which particles initially explode
-const SIZE = 12; // max height for particle rectangles, diameter for particle circles
-const FLOOR_HEIGHT = 800; // pixels the particles will fall from initial explosion point
-const FLOOR_WIDTH = 1600; // horizontal spread of particles in pixels
-const PARTICLE_COUNT = 150;
-const DURATION = 3500;
-const COLORS = ['#FFC700', '#F00', '#2E3191', '#41BBC7'];
 const abs = Math.abs, random = Math.random, mathRound = Math.round, max = Math.max;
-const createParticles = (count, colors) => {
-    const increment = 360 / count;
-    return Array.from({ length: count }, (_, i) => ({
-        color: colors[i % colors.length],
-        degree: i * increment,
-    }));
-};
-const waitFor = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const createParticles = (count, colors) => Array.from({ length: count }, (_, i) => ({
+    color: colors[i % colors.length],
+    degree: (i * 360) / count,
+}));
 // From here: https://stackoverflow.com/a/11832950
 const round = (num, precision = 2) => mathRound((num + Number.EPSILON) * 10 ** precision) / 10 ** precision;
 const mapRange = (value, x1, y1, x2, y2) => ((value - x1) * (y2 - x2)) / (y1 - x1) + x2;
@@ -50,19 +39,14 @@ const validate = (particleCount, duration, colors, particleSize, force, stageHei
         !assertPositiveInteger(particleSize, 'particleSize') ||
         !assertPositiveInteger(force, 'force') ||
         !assertPositiveInteger(stageHeight, 'floorHeight') ||
-        !assertPositiveInteger(stageWidth, 'floorWidth')) {
+        !assertPositiveInteger(stageWidth, 'floorWidth'))
         return false;
-    }
-    if (!isUndefined(particlesShape) &&
-        !['mix', 'circles', 'rectangles'].includes(particlesShape)) {
+    if (!isUndefined(particlesShape) && !['mix', 'circles', 'rectangles'].includes(particlesShape))
         return error('particlesShape should be either "mix" or "circles" or "rectangle"');
-    }
-    if (!isUndefined(colors) && !Array.isArray(colors)) {
+    if (!isUndefined(colors) && !Array.isArray(colors))
         return error('colors must be an array of strings');
-    }
-    if (force > 1) {
+    if (force > 1)
         return error('force must be within 0 and 1');
-    }
     return true;
 };
 </script>
@@ -79,7 +63,7 @@ const validate = (particleCount, duration, colors, particleSize, force, stageHei
  * <ConfettiExplosion particleCount={200} />
  * ```
  */
-export let particleCount = PARTICLE_COUNT;
+export let particleCount = 150;
 /**
  * Size of the confetti particles in pixels
  *
@@ -91,7 +75,7 @@ export let particleCount = PARTICLE_COUNT;
  * <ConfettiExplosion particleSize={20} />
  * ```
  */
-export let particleSize = SIZE;
+export let particleSize = 12;
 /**
  * Duration of the animation in milliseconds
  *
@@ -103,7 +87,7 @@ export let particleSize = SIZE;
  * <ConfettiExplosion duration={5000} />
  * ```
  */
-export let duration = DURATION;
+export let duration = 3500;
 /**
  * Shape of particles to use. Can be `mix`, `circles` or `rectangles`
  *
@@ -138,7 +122,7 @@ export let particlesShape = 'mix';
  * <ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
  * ```
  */
-export let colors = COLORS;
+export let colors = ['#FFC700', '#FF0000', '#2E3191', '#41BBC7'];
 /**
  * Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force.
  *
@@ -150,7 +134,7 @@ export let colors = COLORS;
  * <ConfettiExplosion force={0.8} />
  * ```
  */
-export let force = FORCE;
+export let force = 0.5;
 /**
  * Height of the stage in pixels. Confetti will only fall within this height.
  *
@@ -162,7 +146,7 @@ export let force = FORCE;
  * <ConfettiExplosion floorHeight={500} />
  * ```
  */
-export let stageHeight = FLOOR_HEIGHT;
+export let stageHeight = 800;
 /**
  * Width of the stage in pixels. Confetti will only fall within this width.
  *
@@ -174,7 +158,7 @@ export let stageHeight = FLOOR_HEIGHT;
  * <ConfettiExplosion floorWidth={1000} />
  * ```
  */
-export let stageWidth = FLOOR_WIDTH;
+export let stageWidth = 1600;
 /**
  * Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to preserve memory.
  *
@@ -190,12 +174,7 @@ export let shouldDestroyAfterDone = true;
 let isVisible = true;
 $: particles = createParticles(particleCount, colors);
 $: isValid = validate(particleCount, duration, colors, particleSize, force, stageHeight, stageWidth, particlesShape);
-onMount(async () => {
-    await waitFor(duration);
-    if (shouldDestroyAfterDone) {
-        isVisible = false;
-    }
-});
+onMount(() => setTimeout(() => shouldDestroyAfterDone && (isVisible = false), duration));
 function confettiStyles(node, degree) {
     // Crazy calculations for generating styles
     const rotationTransform = mathRound(random() * (POSSIBLE_ROTATION_TRANSFORMS - 1));
@@ -268,8 +247,7 @@ function confettiStyles(node, degree) {
 }
 .particle div {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   animation: y-axis var(--duration-chaos) forwards cubic-bezier(var(--y1), var(--y2), var(--y3), var(--y4));
   width: var(--width);
   height: var(--height);

package/README.md

@@ -6,7 +6,7 @@ Let's party 🎊🎊 with Svelte! svelte-confetti-explosion allows you to show a
 
 ## Features
 
-- 🤏 Tiny - 2KB min+br.
+- 🤏 Tiny - 1.95KB min+br.
 - 🐇 Simple - Quite simple to use, and effectively no-config required!
 - 🧙‍♀️ Elegant - Use a Svelte component rather than setting things up in `onMount` hook.
 - 🗃️ Highly customizable - Offers tons of options that you can modify to get different behaviors.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-confetti-explosion",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Confetti explosion in Svelte 🎉🎊",
   "author": "Puru Vijay",
   "license": "MIT",