svelte-confetti-explosion 0.2.0 → 0.3.0

package/ConfettiExplosion.svelte

@@ -1,295 +1,245 @@
-<script  context="module">const ROTATION_SPEED_MIN = 200; // minimum possible duration of single particle full rotation
-const ROTATION_SPEED_MAX = 800; // maximum possible duration of single particle full rotation
-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', '#FF0000', '#2E3191', '#41BBC7'];
-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));
-// From here: https://stackoverflow.com/a/11832950
-function round(num, precision = 2) {
-    return Math.round((num + Number.EPSILON) * 10 ** precision) / 10 ** precision;
-}
-function arraysEqual(a, b) {
-    if (a === b)
-        return true;
-    if (a == null || b == null)
-        return false;
-    if (a.length !== b.length)
-        return false;
-    for (let i = 0; i < a.length; i++)
-        if (a[i] !== b[i])
-            return false;
-    return true;
-}
-const mapRange = (value, x1, y1, x2, y2) => ((value - x1) * (y2 - x2)) / (y1 - x1) + x2;
-const rotate = (degree, amount) => {
-    const result = degree + amount;
-    return result > 360 ? result - 360 : result;
-};
-const coinFlip = () => Math.random() > 0.5;
-// avoid this for circles, as it will have no visual effect
-const zAxisRotation = [0, 0, 1];
-const rotationTransforms = [
-    // dual axis rotations (a bit more realistic)
-    [1, 1, 0],
-    [1, 0, 1],
-    [0, 1, 1],
-    // single axis rotations (a bit dumber)
-    [1, 0, 0],
-    [0, 1, 0],
-    zAxisRotation,
-];
-const shouldBeCircle = (rotationIndex) => !arraysEqual(rotationTransforms[rotationIndex], zAxisRotation) && coinFlip();
-const isUndefined = (value) => typeof value === 'undefined';
-const error = (message) => {
-    console.error(message);
-};
-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');
-        return false;
-    }
-    if (!isUndefined(duration) && isSafeInteger(duration) && duration < 0) {
-        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;
-    }
-    if (!isUndefined(particleSize) && isSafeInteger(particleSize) && particleSize < 0) {
-        error('particleSize must be a positive integer');
-        return false;
-    }
-    if (!isUndefined(force) && isSafeInteger(force) && (force < 0 || force > 1)) {
-        error('force must be a positive integer and should be within 0 and 1');
-        return false;
-    }
-    if (!isUndefined(stageHeight) &&
-        typeof stageHeight === 'number' &&
-        isSafeInteger(stageHeight) &&
-        stageHeight < 0) {
-        error('floorHeight must be a positive integer');
-        return false;
-    }
-    if (!isUndefined(stageWidth) &&
-        typeof stageWidth === 'number' &&
-        isSafeInteger(stageWidth) &&
-        stageWidth < 0) {
-        error('floorWidth must be a positive integer');
-        return false;
-    }
-    return true;
-}
-</script>
-
-<script >import { onMount } from 'svelte';
-/**
- * Number of confetti particles to create
- *
- * @default 150
- *
- * @example
- *
- * ```svelte
- * <ConfettiExplosion particleCount={200} />
- * ```
- */
-export let particleCount = PARTICLE_COUNT;
-/**
- * Size of the confetti particles in pixels
- *
- * @default 12
- *
- * @example
- *
- * ```svelte
- * <ConfettiExplosion particleSize={20} />
- * ```
- */
-export let particleSize = SIZE;
-/**
- * Duration of the animation in milliseconds
- *
- * @default 3500
- *
- * @example
- *
- * ```svelte
- * <ConfettiExplosion duration={5000} />
- * ```
- */
-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.
- *
- * @default ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
- *
- * @example
- *
- * ```svelte
- * <ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
- * ```
- */
-export let colors = COLORS;
-/**
- * Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force.
- *
- * @default 0.5
- *
- * @example
- *
- * ```svelte
- * <ConfettiExplosion force={0.8} />
- * ```
- */
-export let force = FORCE;
-/**
- * Height of the stage in pixels. Confetti will only fall within this height.
- *
- * @default 800
- *
- * @example
- *
- * ```svelte
- * <ConfettiExplosion floorHeight={500} />
- * ```
- */
-export let stageHeight = FLOOR_HEIGHT;
-/**
- * Width of the stage in pixels. Confetti will only fall within this width.
- *
- * @default 1600
- *
- * @example
- *
- * ```svelte
- * <ConfettiExplosion floorWidth={1000} />
- * ```
- */
-export let stageWidth = FLOOR_WIDTH;
-/**
- * Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to preserve memory.
- *
- * @default true
- *
- * @example
- *
- * ```svelte
- * <ConfettiExplosion shouldDestroyAfterDone={false} />
- * ```
- */
-export let shouldDestroyAfterDone = true;
-let isVisible = true;
-$: particles = createParticles(particleCount, colors);
-// FOR FUN!!!
-$: 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, particlesShape);
-onMount(async () => {
-    await waitFor(duration);
-    if (shouldDestroyAfterDone) {
-        isVisible = false;
-    }
-});
-function confettiStyles(node, { degree }) {
-    // Get x landing point for it
-    const landingPoint = mapRange(Math.abs(rotate(degree, 90) - 180), 0, 180, -stageWidth / 2, stageWidth / 2);
-    // Crazy calculations for generating styles
-    const rotation = Math.random() * (ROTATION_SPEED_MAX - ROTATION_SPEED_MIN) + ROTATION_SPEED_MIN;
-    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 = 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;
-    const x3 = x1;
-    // x-axis arc of explosion, so 90deg and 270deg particles have curve of 1, 0deg and 180deg have 0
-    const x4 = round(Math.abs(mapRange(Math.abs(rotate(degree, 90) - 180), 0, 180, -1, 1)), 4);
-    // roughly how fast particle reaches end of its explosion curve
-    const y1 = round(Math.random() * BEZIER_MEDIAN, 4);
-    // roughly maps to the distance particle goes before reaching free-fall
-    const y2 = round(Math.random() * force * (coinFlip() ? 1 : -1), 4);
-    // roughly how soon the particle transitions from explosion to free-fall
-    const y3 = BEZIER_MEDIAN;
-    // roughly the ease of free-fall
-    const y4 = round(Math.max(mapRange(Math.abs(degree - 180), 0, 180, force, -force), 0), 4);
-    const setCSSVar = (key, val) => node.style.setProperty(key, val + '');
-    setCSSVar('--x-landing-point', `${landingPoint}px`);
-    setCSSVar('--duration-chaos', `${durationChaos}ms`);
-    setCSSVar('--x1', `${x1}`);
-    setCSSVar('--x2', `${x2}`);
-    setCSSVar('--x3', `${x3}`);
-    setCSSVar('--x4', `${x4}`);
-    setCSSVar('--y1', `${y1}`);
-    setCSSVar('--y2', `${y2}`);
-    setCSSVar('--y3', `${y3}`);
-    setCSSVar('--y4', `${y4}`);
-    // set --width and --height here
-    setCSSVar('--width', `${isCircle ? particleSize : Math.round(Math.random() * 4) + particleSize / 2}px`);
-    setCSSVar('--height', (isCircle ? particleSize : Math.round(Math.random() * 2) + particleSize) + 'px');
-    setCSSVar('--rotation', `${rotationTransforms[rotationIndex].join()}`);
-    setCSSVar('--rotation-duration', `${rotation}ms`);
-    setCSSVar('--border-radius', `${isCircle ? '50%' : '0'}`);
-}
-</script>
-
-{#if isVisible && isValid}
-	<div class="container" style="--floor-height: {stageHeight}px;">
-		{#each particles as { color, degree }}
-			<div class="particle" use:confettiStyles={{ degree }}>
-				<div style="--bgcolor: {color};" />
-			</div>
-		{/each}
-	</div>
-{/if}
-
-<style >@keyframes y-axis {
+<script context="module">"use strict";
+const ROTATION_SPEED_MIN = 200; // minimum possible duration of single particle full rotation
+const ROTATION_SPEED_MAX = 800; // maximum possible duration of single particle full rotation
+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));
+// 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;
+const rotate = (degree, amount) => degree + amount > 360 ? degree + amount - 360 : degree + amount;
+const coinFlip = () => random() > 0.5;
+// We can use the first three bits to flag which axis to rotate on.
+// x = binary 100 = decimal 4
+// y = binary 010 = decimal 2
+// z = binary 001 = decimal 1
+// We can use dual axis rotations (a bit more realistic) by combining the above bits.
+// x & y = binary 110 = decimal 6
+// x & z = binary 101 = decimal 5
+// y & z = binary 011 = decimal 3
+const POSSIBLE_ROTATION_TRANSFORMS = 6;
+// avoid rotation on z axis (001 = 1) for circles as it has no visual effect.
+const shouldBeCircle = (rotationTransform) => rotationTransform !== 1 && coinFlip();
+const isUndefined = (value) => typeof value === 'undefined';
+const error = (message) => {
+    console.error(message);
+    return false;
+};
+const assertPositiveInteger = (val, name) => !isUndefined(val) && Number.isSafeInteger(val) && val < 0
+    ? error(name + ' must be a positive integer')
+    : true;
+const validate = (particleCount, duration, colors, particleSize, force, stageHeight, stageWidth, particlesShape) => {
+    if (!assertPositiveInteger(particleCount, 'particleCount') ||
+        !assertPositiveInteger(duration, 'duration') ||
+        !assertPositiveInteger(particleSize, 'particleSize') ||
+        !assertPositiveInteger(force, 'force') ||
+        !assertPositiveInteger(stageHeight, 'floorHeight') ||
+        !assertPositiveInteger(stageWidth, 'floorWidth')) {
+        return false;
+    }
+    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)) {
+        return error('colors must be an array of strings');
+    }
+    if (force > 1) {
+        return error('force must be within 0 and 1');
+    }
+    return true;
+};
+</script>
+
+<script>import { onMount } from 'svelte';
+/**
+ * Number of confetti particles to create
+ *
+ * @default 150
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion particleCount={200} />
+ * ```
+ */
+export let particleCount = PARTICLE_COUNT;
+/**
+ * Size of the confetti particles in pixels
+ *
+ * @default 12
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion particleSize={20} />
+ * ```
+ */
+export let particleSize = SIZE;
+/**
+ * Duration of the animation in milliseconds
+ *
+ * @default 3500
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion duration={5000} />
+ * ```
+ */
+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.
+ *
+ * @default ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
+ * ```
+ */
+export let colors = COLORS;
+/**
+ * Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force.
+ *
+ * @default 0.5
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion force={0.8} />
+ * ```
+ */
+export let force = FORCE;
+/**
+ * Height of the stage in pixels. Confetti will only fall within this height.
+ *
+ * @default 800
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion floorHeight={500} />
+ * ```
+ */
+export let stageHeight = FLOOR_HEIGHT;
+/**
+ * Width of the stage in pixels. Confetti will only fall within this width.
+ *
+ * @default 1600
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion floorWidth={1000} />
+ * ```
+ */
+export let stageWidth = FLOOR_WIDTH;
+/**
+ * Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to preserve memory.
+ *
+ * @default true
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion shouldDestroyAfterDone={false} />
+ * ```
+ */
+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;
+    }
+});
+function confettiStyles(node, degree) {
+    // Crazy calculations for generating styles
+    const rotationTransform = mathRound(random() * (POSSIBLE_ROTATION_TRANSFORMS - 1));
+    const isCircle = particlesShape !== 'rectangles' &&
+        (particlesShape === 'circles' || shouldBeCircle(rotationTransform));
+    const setCSSVar = (key, val) => node.style.setProperty(key, val + '');
+    // Get x landing point for it
+    setCSSVar('--x-landing-point', mapRange(abs(rotate(degree, 90) - 180), 0, 180, -stageWidth / 2, stageWidth / 2) + 'px');
+    setCSSVar('--duration-chaos', duration - mathRound(random() * 1e3) + 'ms');
+    // x-axis disturbance, roughly the distance the particle will initially deviate from its target
+    const x1 = random() < CRAZY_PARTICLES_FREQUENCY ? round(random() * CRAZY_PARTICLE_CRAZINESS, 2) : 0;
+    setCSSVar('--x1', x1);
+    setCSSVar('--x2', x1 * -1);
+    setCSSVar('--x3', x1);
+    // x-axis arc of explosion, so 90deg and 270deg particles have curve of 1, 0deg and 180deg have 0
+    setCSSVar('--x4', round(abs(mapRange(abs(rotate(degree, 90) - 180), 0, 180, -1, 1)), 4));
+    // roughly how fast particle reaches end of its explosion curve
+    setCSSVar('--y1', round(random() * BEZIER_MEDIAN, 4));
+    // roughly maps to the distance particle goes before reaching free-fall
+    setCSSVar('--y2', round(random() * force * (coinFlip() ? 1 : -1), 4));
+    // roughly how soon the particle transitions from explosion to free-fall
+    setCSSVar('--y3', BEZIER_MEDIAN);
+    // roughly the ease of free-fall
+    setCSSVar('--y4', round(max(mapRange(abs(degree - 180), 0, 180, force, -force), 0), 4));
+    // set --width and --height here
+    setCSSVar('--width', (isCircle ? particleSize : mathRound(random() * 4) + particleSize / 2) + 'px');
+    setCSSVar('--height', (isCircle ? particleSize : mathRound(random() * 2) + particleSize) + 'px');
+    setCSSVar('--rotation', rotationTransform.toString(2).padStart(3, '0').split(''));
+    setCSSVar('--rotation-duration', random() * (ROTATION_SPEED_MAX - ROTATION_SPEED_MIN) + ROTATION_SPEED_MIN + 'ms');
+    setCSSVar('--border-radius', isCircle ? '50%' : 0);
+}
+</script>
+
+{#if isVisible && isValid}
+	<div class="container" style:--floor-height="{stageHeight}px">
+		{#each particles as { color, degree }}
+			<div class="particle" use:confettiStyles={degree}>
+				<div style:--bgcolor={color} />
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>@keyframes y-axis {
   to {
     transform: translate3d(0, var(--floor-height), 0);
   }
@@ -332,4 +282,4 @@ function confettiStyles(node, { degree }) {
   background-color: var(--bgcolor);
   animation: rotation var(--rotation-duration) infinite linear;
   border-radius: var(--border-radius);
-}</style>
+}</style>

package/ConfettiExplosion.svelte.d.ts

@@ -1,126 +1,126 @@
-import { SvelteComponentTyped } from "svelte";
-declare type ParticleShape = 'mix' | 'circles' | 'rectangles';
-declare const __propDef: {
-    props: {
-        /**
-             * Number of confetti particles to create
-             *
-             * @default 150
-             *
-             * @example
-             *
-             * ```svelte
-             * <ConfettiExplosion particleCount={200} />
-             * ```
-             */ particleCount?: number;
-        /**
-             * Size of the confetti particles in pixels
-             *
-             * @default 12
-             *
-             * @example
-             *
-             * ```svelte
-             * <ConfettiExplosion particleSize={20} />
-             * ```
-             */ particleSize?: number;
-        /**
-             * Duration of the animation in milliseconds
-             *
-             * @default 3500
-             *
-             * @example
-             *
-             * ```svelte
-             * <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.
-             *
-             * @default ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
-             *
-             * @example
-             *
-             * ```svelte
-             * <ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
-             * ```
-             */ colors?: string[];
-        /**
-             * Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force.
-             *
-             * @default 0.5
-             *
-             * @example
-             *
-             * ```svelte
-             * <ConfettiExplosion force={0.8} />
-             * ```
-             */ force?: number;
-        /**
-             * Height of the stage in pixels. Confetti will only fall within this height.
-             *
-             * @default 800
-             *
-             * @example
-             *
-             * ```svelte
-             * <ConfettiExplosion floorHeight={500} />
-             * ```
-             */ stageHeight?: number;
-        /**
-             * Width of the stage in pixels. Confetti will only fall within this width.
-             *
-             * @default 1600
-             *
-             * @example
-             *
-             * ```svelte
-             * <ConfettiExplosion floorWidth={1000} />
-             * ```
-             */ stageWidth?: number;
-        /**
-             * Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to preserve memory.
-             *
-             * @default true
-             *
-             * @example
-             *
-             * ```svelte
-             * <ConfettiExplosion shouldDestroyAfterDone={false} />
-             * ```
-             */ shouldDestroyAfterDone?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type ConfettiExplosionProps = typeof __propDef.props;
-export declare type ConfettiExplosionEvents = typeof __propDef.events;
-export declare type ConfettiExplosionSlots = typeof __propDef.slots;
-export default class ConfettiExplosion extends SvelteComponentTyped<ConfettiExplosionProps, ConfettiExplosionEvents, ConfettiExplosionSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare type ParticleShape = 'mix' | 'circles' | 'rectangles';
+declare const __propDef: {
+    props: {
+        /**
+             * Number of confetti particles to create
+             *
+             * @default 150
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion particleCount={200} />
+             * ```
+             */ particleCount?: number | undefined;
+        /**
+             * Size of the confetti particles in pixels
+             *
+             * @default 12
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion particleSize={20} />
+             * ```
+             */ particleSize?: number | undefined;
+        /**
+             * Duration of the animation in milliseconds
+             *
+             * @default 3500
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion duration={5000} />
+             * ```
+             */ duration?: number | undefined;
+        /**
+             * 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 | undefined;
+        /**
+             * 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.
+             *
+             * @default ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
+             * ```
+             */ colors?: string[] | undefined;
+        /**
+             * Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force.
+             *
+             * @default 0.5
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion force={0.8} />
+             * ```
+             */ force?: number | undefined;
+        /**
+             * Height of the stage in pixels. Confetti will only fall within this height.
+             *
+             * @default 800
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion floorHeight={500} />
+             * ```
+             */ stageHeight?: number | undefined;
+        /**
+             * Width of the stage in pixels. Confetti will only fall within this width.
+             *
+             * @default 1600
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion floorWidth={1000} />
+             * ```
+             */ stageWidth?: number | undefined;
+        /**
+             * Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to preserve memory.
+             *
+             * @default true
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion shouldDestroyAfterDone={false} />
+             * ```
+             */ shouldDestroyAfterDone?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ConfettiExplosionProps = typeof __propDef.props;
+export declare type ConfettiExplosionEvents = typeof __propDef.events;
+export declare type ConfettiExplosionSlots = typeof __propDef.slots;
+export default class ConfettiExplosion extends SvelteComponentTyped<ConfettiExplosionProps, ConfettiExplosionEvents, ConfettiExplosionSlots> {
+}
+export {};

package/LICENSE

@@ -1,21 +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.
+MIT License
+
+Copyright (c) 2022 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

@@ -2,11 +2,11 @@
 
 Let's party 🎊🎊 with Svelte! svelte-confetti-explosion allows you to show an awesome confetti explosion on your page, with Svelte!
 
-> This library is the svelte port of the amazing [@reonomy/react-confetti-explosion](https://www.npmjs.com/package/@reonomy/react-confetti-explosion) package. All the logic is from that package only, optimisation and Svelte code are mine 😉
+> This library is the svelte port of the amazing [react-confetti-explosion](https://www.npmjs.com/package//react-confetti-explosion) package. All the logic is from that package only, optimisation and Svelte code are mine 😉
 
 ## Features
 
-- 🤏 Tiny - Less than 2.5KB min+gzip.
+- 🤏 Tiny - 2KB 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.
@@ -205,7 +205,3 @@ Also, after the specified `duration`, all the confetti DOM nodes will be destroy
 
 MIT License
 © [Puru Vijay](https://twitter.com/puruvjdev)
-
-```
-
-```

package/index.d.ts

@@ -1 +1 @@
-export { default as ConfettiExplosion } from './ConfettiExplosion.svelte';
+export { default as ConfettiExplosion } from './ConfettiExplosion.svelte';

package/index.js

@@ -1 +1,3 @@
-export { default as ConfettiExplosion } from './ConfettiExplosion.svelte';
+// Reexport your entry components here
+// @ts-ignore
+export { default as ConfettiExplosion } from './ConfettiExplosion.svelte';

package/package.json

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