@neoconfetti/svelte - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/index.d.ts

@@ -63,4 +63,4 @@ type ParticleShape = 'mix' | 'circles' | 'rectangles';
 };
-declare function confetti(node: HTMLElement, options?: ConfettiOptions): {
-    update(newOptions: ConfettiOptions): void;
+declare function confetti(container: HTMLElement, options?: ConfettiOptions): {
+    update(new_options: ConfettiOptions): void;
     destroy(): void;
@@ -67,0 +67,0 @@ };

dist/index.js

@@ -5,54 +5,65 @@ // ../core/dist/index.js
 var container = "Bc2PgW_container";
-function confetti(node, options = {}) {
+var DEFAULT_COLORS = ["#FFC700", "#FF0000", "#2E3191", "#41BBC7"];
+var DEFAULT_DURATION = 3500;
+var DEFAULT_FORCE = 0.5;
+var DEFAULT_PARTICLE_COUNT = 150;
+var DEFAULT_PARTICLE_SHAPE = "mix";
+var DEFAULT_PARTICLE_SIZE = 12;
+var DEFAULT_DESTROY_AFTER_DONE = true;
+var DEFAULT_STAGE_HEIGHT = 800;
+var DEFAULT_STAGE_WIDTH = 1600;
+function confetti(container2, options = {}) {
   let {
-    colors = ["#FFC700", "#FF0000", "#2E3191", "#41BBC7"],
-    duration = 3500,
-    force = 0.5,
-    particleCount = 150,
-    particleShape = "mix",
-    particleSize = 12,
-    destroyAfterDone = true,
-    stageHeight = 800,
-    stageWidth = 1600
+    colors = DEFAULT_COLORS,
+    duration = DEFAULT_DURATION,
+    force = DEFAULT_FORCE,
+    particleCount = DEFAULT_PARTICLE_COUNT,
+    particleShape = DEFAULT_PARTICLE_SHAPE,
+    particleSize = DEFAULT_PARTICLE_SIZE,
+    destroyAfterDone = DEFAULT_DESTROY_AFTER_DONE,
+    stageHeight = DEFAULT_STAGE_HEIGHT,
+    stageWidth = DEFAULT_STAGE_WIDTH
   } = options;
-  appendStyles(style_module_default);
-  node.classList.add(container);
-  node.style.setProperty("--sh", stageHeight + "px");
-  let particles = createParticles(particleCount, colors);
-  let nodes = createParticleNodes(node, particles);
-  function confettiStyles(node2, degree) {
-    const rotationTransform = mathRound(random() * (POSSIBLE_ROTATION_TRANSFORMS - 1));
-    const isCircle = particleShape !== "rectangles" && (particleShape === "circles" || shouldBeCircle(rotationTransform));
-    const setCSSVar = (key, val) => node2.style.setProperty(key, val + "");
-    setCSSVar(
+  append_styles(style_module_default);
+  container2.classList.add(container);
+  container2.style.setProperty("--sh", stageHeight + "px");
+  let particles = create_particles(particleCount, colors);
+  let nodes = create_particle_nodes(container2, particles);
+  const calc_rotation_transform = () => math_round(random() * (POSSIBLE_ROTATION_TRANSFORMS - 1));
+  const get_is_circle = (particle_shape, rotation_transform) => particle_shape !== "rectangles" && (particle_shape === "circles" || should_be_circle(rotation_transform));
+  function confetti_styles(node, degree) {
+    const rotation_transform = calc_rotation_transform();
+    const is_circle = get_is_circle(particleShape, rotation_transform);
+    const set_css_var = (key, val) => node.style.setProperty(key, val + "");
+    set_css_var(
       // x landing point
       "--xlp",
-      mapRange(abs(rotate(degree, 90) - 180), 0, 180, -stageWidth / 2, stageWidth / 2) + "px"
+      map_range(abs(rotate(degree, 90) - 180), 0, 180, -stageWidth / 2, stageWidth / 2) + "px"
     );
-    setCSSVar(
+    set_css_var(
       // duration chaos
       "--dc",
-      duration - mathRound(random() * 1e3) + "ms"
+      duration - math_round(random() * 1e3) + "ms"
     );
     const x1 = random() < CRAZY_PARTICLES_FREQUENCY ? round(random() * CRAZY_PARTICLE_CRAZINESS, 2) : 0;
-    setCSSVar("--x1", x1);
-    setCSSVar("--x2", x1 * -1);
-    setCSSVar("--x3", x1);
-    setCSSVar("--x4", round(abs(mapRange(abs(rotate(degree, 90) - 180), 0, 180, -1, 1)), 4));
-    setCSSVar("--y1", round(random() * BEZIER_MEDIAN, 4));
-    setCSSVar("--y2", round(random() * force * (coinFlip() ? 1 : -1), 4));
-    setCSSVar("--y3", BEZIER_MEDIAN);
-    setCSSVar("--y4", round(max(mapRange(abs(degree - 180), 0, 180, force, -force), 0), 4));
-    setCSSVar(
+    set_css_var("--x1", x1);
+    set_css_var("--x2", x1 * -1);
+    set_css_var("--x3", x1);
+    set_css_var("--x4", round(abs(map_range(abs(rotate(degree, 90) - 180), 0, 180, -1, 1)), 4));
+    set_css_var("--y1", round(random() * BEZIER_MEDIAN, 4));
+    set_css_var("--y2", round(random() * force * (coin_flip() ? 1 : -1), 4));
+    set_css_var("--y3", BEZIER_MEDIAN);
+    set_css_var("--y4", round(max(map_range(abs(degree - 180), 0, 180, force, -force), 0), 4));
+    set_css_var(
       // --width
       "--w",
-      (isCircle ? particleSize : mathRound(random() * 4) + particleSize / 2) + "px"
+      (is_circle ? particleSize : math_round(random() * 4) + particleSize / 2) + "px"
     );
-    setCSSVar(
+    set_css_var(
       // --height
       "--h",
-      (isCircle ? particleSize : mathRound(random() * 2) + particleSize) + "px"
+      (is_circle ? particleSize : math_round(random() * 2) + particleSize) + "px"
     );
-    const rotation = rotationTransform.toString(2).padStart(3, "0").split("");
-    setCSSVar(
+    const rotation = rotation_transform.toString(2).padStart(3, "0").split("");
+    set_css_var(
       // --half-rotation
@@ -62,3 +73,3 @@ "--hr",
     );
-    setCSSVar(
+    set_css_var(
       // --rotation
@@ -68,3 +79,3 @@ "--r",
     );
-    setCSSVar(
+    set_css_var(
       // --rotation-duration
@@ -74,43 +85,69 @@ "--rd",
     );
-    setCSSVar(
+    set_css_var(
       // --border-radius
       "--br",
-      isCircle ? "50%" : 0
+      is_circle ? "50%" : 0
     );
   }
-  for (const [i, node2] of Object.entries(nodes))
-    confettiStyles(node2, particles[+i].degree);
   let timer;
-  Promise.resolve().then(
-    () => timer = setTimeout(() => destroyAfterDone && (node.innerHTML = ""), duration)
-  );
+  function scratch() {
+    container2.innerHTML = "";
+    clearTimeout(timer);
+    let particles2 = create_particles(particleCount, colors);
+    let nodes2 = create_particle_nodes(container2, particles2);
+    for (const [i, node] of Object.entries(nodes2))
+      confetti_styles(node, particles2[+i].degree);
+    timer = setTimeout(() => {
+      if (destroyAfterDone)
+        container2.innerHTML = "";
+    }, duration);
+  }
+  scratch();
   return {
-    update(newOptions) {
-      const newParticleCount = newOptions.particleCount ?? particleCount;
-      const newColors = newOptions.colors ?? colors;
-      const newStageHeight = newOptions.stageHeight ?? stageHeight;
-      particles = createParticles(newParticleCount, newColors);
-      if (newParticleCount === particleCount && JSON.stringify(colors) !== JSON.stringify(newColors))
-        for (const [i, { color }] of Object.entries(particles))
-          nodes[+i].style.setProperty(
-            // bgcolor
-            "--bgc",
-            color
-          );
-      if (newParticleCount !== particleCount) {
-        node.innerHTML = "";
-        nodes = createParticleNodes(node, particles);
+    update(new_options) {
+      const new_particle_count = new_options.particleCount ?? DEFAULT_PARTICLE_COUNT;
+      const new_particle_shape = new_options.particleShape ?? DEFAULT_PARTICLE_SHAPE;
+      const new_particle_size = new_options.particleSize ?? DEFAULT_PARTICLE_SIZE;
+      const new_colors = new_options.colors ?? DEFAULT_COLORS;
+      const new_stage_height = new_options.stageHeight ?? DEFAULT_STAGE_HEIGHT;
+      const new_duration = new_options.duration ?? DEFAULT_DURATION;
+      const new_force = new_options.force ?? DEFAULT_FORCE;
+      const new_stage_width = new_options.stageWidth ?? DEFAULT_STAGE_WIDTH;
+      const new_destroy_after_done = new_options.destroyAfterDone ?? DEFAULT_DESTROY_AFTER_DONE;
+      particles = create_particles(new_particle_count, new_colors);
+      let start_from_scratch = false;
+      if (new_particle_count === particleCount) {
+        nodes = Array.from(container2.querySelectorAll(`.${particle}`));
+        for (const [i, { color }] of Object.entries(particles)) {
+          if (JSON.stringify(colors) !== JSON.stringify(new_colors)) {
+            nodes[+i].style.setProperty("--bgc", color);
+          }
+          if (new_particle_shape !== particleShape) {
+            nodes[+i].style.setProperty(
+              // --border-radius
+              "--br",
+              get_is_circle(new_particle_shape, calc_rotation_transform()) ? "50%" : "0"
+            );
+          }
+        }
+      } else {
+        start_from_scratch = true;
       }
-      if (destroyAfterDone && !newOptions.destroyAfterDone)
+      if (destroyAfterDone && !new_destroy_after_done) {
         clearTimeout(timer);
-      node.style.setProperty("--sh", newStageHeight + "px");
-      colors = newColors;
-      duration = newOptions.duration ?? duration;
-      force = newOptions.force ?? force;
-      particleCount = newParticleCount;
-      particleShape = newOptions.particleShape ?? particleShape;
-      particleSize = newOptions.particleSize ?? particleSize;
-      destroyAfterDone = newOptions.destroyAfterDone ?? destroyAfterDone;
-      stageHeight = newStageHeight;
-      stageWidth = newOptions.stageWidth ?? stageWidth;
+      }
+      container2.style.setProperty("--sh", new_stage_height + "px");
+      duration = new_duration;
+      colors = new_colors;
+      force = new_force;
+      particleCount = new_particle_count;
+      particleShape = new_particle_shape;
+      particleSize = new_particle_size;
+      destroyAfterDone = new_destroy_after_done;
+      stageHeight = new_stage_height;
+      stageWidth = new_stage_width;
+      console.log(1, start_from_scratch);
+      if (start_from_scratch) {
+        scratch();
+      }
     },
@@ -122,20 +159,22 @@ destroy() {
 }
-function appendStyles(styles) {
+function append_styles(styles) {
+  if (document.querySelector(`style[data-neoconfetti]`))
+    return;
   const style = element("style");
   style.dataset.neoconfetti = "";
   style.textContent = styles;
-  appendChild(document.head, style);
+  append_child(document.head, style);
 }
-function createParticleNodes(node, particles = []) {
-  const particleNodes = [];
+function create_particle_nodes(container2, particles = []) {
+  const particle_nodes = [];
   for (const { color } of particles) {
-    const particleNode = element("div");
-    particleNode.className = particle;
-    particleNode.style.setProperty("--bgc", color);
-    const innerParticle = element("div");
-    appendChild(particleNode, innerParticle);
-    appendChild(node, particleNode);
-    particleNodes.push(particleNode);
+    const particle_node = element("div");
+    particle_node.className = particle;
+    particle_node.style.setProperty("--bgc", color);
+    const inner_particle = element("div");
+    append_child(particle_node, inner_particle);
+    append_child(container2, particle_node);
+    particle_nodes.push(particle_node);
   }
-  return particleNodes;
+  return particle_nodes;
 }
@@ -149,17 +188,18 @@ var ROTATION_SPEED_MIN = 200;
 var random = Math.random;
-var mathRound = Math.round;
+var math_round = Math.round;
 var max = Math.max;
 var element = (name) => document.createElement(name);
-var appendChild = (parent, child) => parent.appendChild(child);
-var createParticles = (count, colors) => Array.from({ length: count }, (_, i) => ({
+var append_child = (parent, child) => parent.appendChild(child);
+var create_particles = (count, colors) => Array.from({ length: count }, (_, i) => ({
   color: colors[i % colors.length],
   degree: i * 360 / count
 }));
-var round = (num, precision = 2) => mathRound((num + Number.EPSILON) * 10 ** precision) / 10 ** precision;
-var mapRange = (value, x1, y1, x2, y2) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;
+var round = (num, precision = 2) => math_round((num + Number.EPSILON) * 10 ** precision) / 10 ** precision;
+var map_range = (value, x1, y1, x2, y2) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;
 var rotate = (degree, amount) => degree + amount > 360 ? degree + amount - 360 : degree + amount;
-var coinFlip = () => random() > 0.5;
+var coin_flip = () => random() > 0.5;
 var POSSIBLE_ROTATION_TRANSFORMS = 6;
-var shouldBeCircle = (rotationTransform) => rotationTransform !== 1 && coinFlip();
+var should_be_circle = (rotation_transform) => rotation_transform !== 1 && coin_flip();
+//! Why the hell this works but directly setting the CSS variables on nodes doesn't??
 
 export { confetti };

dist/min/index.js

@@ -1,1 +0,3 @@
-var t="Bc2PgW_particle";function e(t,e={}){let{colors:P=["#FFC700","#FF0000","#2E3191","#41BBC7"],duration:B=3500,force:W=.5,particleCount:_=150,particleShape:S="mix",particleSize:w=12,destroyAfterDone:C=!0,stageHeight:M=800,stageWidth:k=1600}=e;!function(t){const e=g("style");e.dataset.neoconfetti="",e.textContent=t,y(document.head,e)}('@keyframes Bc2PgW_y-axis{to{translate:0 var(--sh)}}@keyframes Bc2PgW_x-axis{to{translate:var(--xlp)0}}@keyframes Bc2PgW_rotation{50%{rotate:var(--hr)180deg}to{rotate:var(--r)360deg}}.Bc2PgW_container{z-index:1200;width:0;height:0;position:relative;overflow:visible}.Bc2PgW_particle{animation:x-axis var(--dc)forwards cubic-bezier(var(--x1),var(--x2),var(--x3),var(--x4));animation-name:Bc2PgW_x-axis}.Bc2PgW_particle>div{animation:y-axis var(--dc)forwards cubic-bezier(var(--y1),var(--y2),var(--y3),var(--y4));width:var(--w);height:var(--h);animation-name:Bc2PgW_y-axis;position:absolute;top:0;left:0}.Bc2PgW_particle>div:before{content:"";background-color:var(--bgc);animation:rotation var(--rd)infinite linear;border-radius:var(--br);width:100%;height:100%;animation-name:Bc2PgW_rotation;display:block}'),t.classList.add("Bc2PgW_container"),t.style.setProperty("--sh",M+"px");let z,N=h(_,P),O=r(t,N);function T(t,e){const r=d(l()*(u-1)),g="rectangles"!==S&&("circles"===S||b(r)),y=(e,r)=>t.style.setProperty(e,r+"");y("--xlp",v(c(x(e,90)-180),0,180,-k/2,k/2)+"px"),y("--dc",B-d(1e3*l())+"ms");const h=l()<i?f(l()*n,2):0;y("--x1",h),y("--x2",-1*h),y("--x3",h),y("--x4",f(c(v(c(x(e,90)-180),0,180,-1,1)),4)),y("--y1",f(l()*s,4)),y("--y2",f(l()*W*(m()?1:-1),4)),y("--y3",s),y("--y4",f(p(v(c(e-180),0,180,W,-W),0),4)),y("--w",(g?w:d(4*l())+w/2)+"px"),y("--h",(g?w:d(2*l())+w)+"px");const P=r.toString(2).padStart(3,"0").split("");y("--hr",P.map((t=>+t/2+"")).join(" ")),y("--r",P.join(" ")),y("--rd",f(l()*(o-a)+a)+"ms"),y("--br",g?"50%":0)}for(const[t,e]of Object.entries(O))T(e,N[+t].degree);return Promise.resolve().then((()=>z=setTimeout((()=>C&&(t.innerHTML="")),B))),{update(e){const a=e.particleCount??_,o=e.colors??P,i=e.stageHeight??M;if(N=h(a,o),a===_&&JSON.stringify(P)!==JSON.stringify(o))for(const[t,{color:e}]of Object.entries(N))O[+t].style.setProperty("--bgc",e);a!==_&&(t.innerHTML="",O=r(t,N)),C&&!e.destroyAfterDone&&clearTimeout(z),t.style.setProperty("--sh",i+"px"),P=o,B=e.duration??B,W=e.force??W,_=a,S=e.particleShape??S,w=e.particleSize??w,C=e.destroyAfterDone??C,M=i,k=e.stageWidth??k},destroy(){clearTimeout(z)}}}function r(e,r=[]){const a=[];for(const{color:o}of r){const r=g("div");r.className=t,r.style.setProperty("--bgc",o);const i=g("div");y(r,i),y(e,r),a.push(r)}return a}var a=200,o=800,i=.1,n=.3,s=.5,c=Math.abs,l=Math.random,d=Math.round,p=Math.max,g=t=>document.createElement(t),y=(t,e)=>t.appendChild(e),h=(t,e)=>Array.from({length:t},((r,a)=>({color:e[a%e.length],degree:360*a/t}))),f=(t,e=2)=>d((t+Number.EPSILON)*10**e)/10**e,v=(t,e,r,a,o)=>(t-e)*(o-a)/(r-e)+a,x=(t,e)=>t+e>360?t+e-360:t+e,m=()=>l()>.5,u=6,b=t=>1!==t&&m();export{e as confetti};
+var t="Bc2PgW_particle",e=["#FFC700","#FF0000","#2E3191","#41BBC7"],r=3500,o=.5,a=150,i="mix",n=12,c=!0,s=800,l=1600;function d(d,k={}){let{colors:z=e,duration:A=r,force:N=o,particleCount:O=a,particleShape:j=i,particleSize:F=n,destroyAfterDone:H=c,stageHeight:L=s,stageWidth:E=l}=k;!function(t){if(document.querySelector("style[data-neoconfetti]"))return;const e=P("style");e.dataset.neoconfetti="",e.textContent=t,B(document.head,e)}('@keyframes Bc2PgW_y-axis{to{translate:0 var(--sh)}}@keyframes Bc2PgW_x-axis{to{translate:var(--xlp)0}}@keyframes Bc2PgW_rotation{50%{rotate:var(--hr)180deg}to{rotate:var(--r)360deg}}.Bc2PgW_container{z-index:1200;width:0;height:0;position:relative;overflow:visible}.Bc2PgW_particle{animation:x-axis var(--dc)forwards cubic-bezier(var(--x1),var(--x2),var(--x3),var(--x4));animation-name:Bc2PgW_x-axis}.Bc2PgW_particle>div{animation:y-axis var(--dc)forwards cubic-bezier(var(--y1),var(--y2),var(--y3),var(--y4));width:var(--w);height:var(--h);animation-name:Bc2PgW_y-axis;position:absolute;top:0;left:0}.Bc2PgW_particle>div:before{content:"";background-color:var(--bgc);animation:rotation var(--rd)infinite linear;border-radius:var(--br);width:100%;height:100%;animation-name:Bc2PgW_rotation;display:block}'),d.classList.add("Bc2PgW_container"),d.style.setProperty("--sh",L+"px");let q=W(O,z),D=y(d,q);const J=()=>v(x()*(M-1)),I=(t,e)=>"rectangles"!==t&&("circles"===t||T(e));function $(t,e){const r=J(),o=I(j,r),a=(e,r)=>t.style.setProperty(e,r+"");a("--xlp",S(u(w(e,90)-180),0,180,-E/2,E/2)+"px"),a("--dc",A-v(1e3*x())+"ms");const i=x()<f?_(x()*h,2):0;a("--x1",i),a("--x2",-1*i),a("--x3",i),a("--x4",_(u(S(u(w(e,90)-180),0,180,-1,1)),4)),a("--y1",_(x()*m,4)),a("--y2",_(x()*N*(C()?1:-1),4)),a("--y3",m),a("--y4",_(b(S(u(e-180),0,180,N,-N),0),4)),a("--w",(o?F:v(4*x())+F/2)+"px"),a("--h",(o?F:v(2*x())+F)+"px");const n=r.toString(2).padStart(3,"0").split("");a("--hr",n.map((t=>+t/2+"")).join(" ")),a("--r",n.join(" ")),a("--rd",_(x()*(g-p)+p)+"ms"),a("--br",o?"50%":0)}let G;function K(){d.innerHTML="",clearTimeout(G);let t=W(O,z),e=y(d,t);for(const[r,o]of Object.entries(e))$(o,t[+r].degree);G=setTimeout((()=>{H&&(d.innerHTML="")}),A)}return K(),{update(y){const p=y.particleCount??a,g=y.particleShape??i,f=y.particleSize??n,h=y.colors??e,m=y.stageHeight??s,u=y.duration??r,x=y.force??o,v=y.stageWidth??l,b=y.destroyAfterDone??c;q=W(p,h);let P=!1;if(p===O){D=Array.from(d.querySelectorAll(`.${t}`));for(const[t,{color:e}]of Object.entries(q))JSON.stringify(z)!==JSON.stringify(h)&&D[+t].style.setProperty("--bgc",e),g!==j&&D[+t].style.setProperty("--br",I(g,J())?"50%":"0")}else P=!0;H&&!b&&clearTimeout(G),d.style.setProperty("--sh",m+"px"),A=u,z=h,N=x,O=p,j=g,F=f,H=b,L=m,E=v,console.log(1,P),P&&K()},destroy(){clearTimeout(G)}}}function y(e,r=[]){const o=[];for(const{color:a}of r){const r=P("div");r.className=t,r.style.setProperty("--bgc",a);const i=P("div");B(r,i),B(e,r),o.push(r)}return o}var p=200,g=800,f=.1,h=.3,m=.5,u=Math.abs,x=Math.random,v=Math.round,b=Math.max,P=t=>document.createElement(t),B=(t,e)=>t.appendChild(e),W=(t,e)=>Array.from({length:t},((r,o)=>({color:e[o%e.length],degree:360*o/t}))),_=(t,e=2)=>v((t+Number.EPSILON)*10**e)/10**e,S=(t,e,r,o,a)=>(t-e)*(a-o)/(r-e)+o,w=(t,e)=>t+e>360?t+e-360:t+e,C=()=>x()>.5,M=6,T=t=>1!==t&&C()
+//! Why the hell this works but directly setting the CSS variables on nodes doesn't??;
+export{d as confetti};

package.json

 {
   "name": "@neoconfetti/svelte",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Confetti explosion in Svelte 🎉🎊",
@@ -43,3 +43,3 @@ "author": "Puru Vijay",
   "devDependencies": {
-    "@neoconfetti/core": "2.0.0"
+    "@neoconfetti/core": "2.1.0"
   },
@@ -50,5 +50,5 @@ "scripts": {
     "size": "echo 'Svelte size:' && brotli-size dist/min/index.js",
-    "pub": "pnpm build && pnpm publish --no-git-checks --access public",
-    "pub:dry": "pnpm build && pnpm publish --dry-run --no-git-checks --access public"
+    "pub": "pnpm compile && pnpm publish --no-git-checks --access public",
+    "pub:dry": "pnpm compile && pnpm publish --dry-run --no-git-checks --access public"
   }
 }

README.md

@@ -5,7 +5,5 @@ # @neoconfetti/svelte
 
-> This library is the 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 - 1.66KB min+br.
+- 🤏 Tiny - 1.54KB min+br.
 - 🐇 Simple - Quite simple to use, and effectively no-config required!
@@ -189,2 +187,6 @@ - 🧙‍♀️ Elegant - Svelte action `use:confetti` rather than setting things up in `onMount` hook.
 
+## Fine-grained reactivity
+
+Changing the options will destroy the existing confetti mid-flight, and create a new one with the new options. Exception: If `particlesCount` isn't changed, and properties like `colors` or `particleShape` is changed, the confetti particles will change their colors or shape mid-flight.
+
 ## Performance
@@ -196,2 +198,6 @@
 
+## Credits
+
+This library is the port of the amazing [react-confetti-explosion](https://www.npmjs.com/package//react-confetti-explosion) package, just **10X** smaller and faster. All the logic is from that package only, optimisation and Svelte code are mine 😉
+
 ## License
@@ -198,0 +204,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19954

increased by15.23%

Lines of code

282

increased by23.68%

Number of lines in readme file

204

increased by3.03%

No dependency changes