@neoconfetti/svelte - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

dist/index.d.ts

@@ -26,2 +26,8 @@ type ParticleShape = 'mix' | 'circles' | 'rectangles';
     /**
+     * Class to apply to each confetti particle
+     *
+     * @default undefined
+     */
+    particleClass?: string;
+    /**
      * Duration of the animation in milliseconds
@@ -28,0 +34,0 @@ *

dist/index.js

 // ../core/dist/index.js
-var style_module_default = '@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}';
-var particle = "Bc2PgW_particle";
-var container = "Bc2PgW_container";
+var style_module_default = '@keyframes mz3PUW_ya{to{translate:0 var(--sh)}}@keyframes mz3PUW_xa{to{translate:var(--xlp)0}}@keyframes mz3PUW_r{50%{rotate:var(--hr)180deg}to{rotate:var(--r)360deg}}.mz3PUW_c{z-index:1200;width:0;height:0;position:relative;overflow:visible}.mz3PUW_p{animation:xa var(--dc)forwards cubic-bezier(var(--x1),var(--x2),var(--x3),var(--x4));animation-name:mz3PUW_xa}.mz3PUW_p>div{animation:ya var(--dc)forwards cubic-bezier(var(--y1),var(--y2),var(--y3),var(--y4));width:var(--w);height:var(--h);animation-name:mz3PUW_ya;position:absolute;top:0;left:0}.mz3PUW_p>div:before{content:"";background-color:var(--bgc);animation:r var(--rd)infinite linear;border-radius:var(--br);width:100%;height:100%;animation-name:mz3PUW_r;display:block}';
+var c = "mz3PUW_c";
+var p = "mz3PUW_p";
 var DEFAULT_COLORS = ["#FFC700", "#FF0000", "#2E3191", "#41BBC7"];
@@ -11,6 +11,7 @@ var DEFAULT_DURATION = 3500;
 var DEFAULT_PARTICLE_SIZE = 12;
+var DEFAULT_PARTICLE_CLASS = "";
 var DEFAULT_DESTROY_AFTER_DONE = true;
 var DEFAULT_STAGE_HEIGHT = 800;
 var DEFAULT_STAGE_WIDTH = 1600;
-function confetti(container2, options = {}) {
+function confetti(container, options = {}) {
   let {
@@ -23,2 +24,3 @@ colors = DEFAULT_COLORS,
     particleSize = DEFAULT_PARTICLE_SIZE,
+    particleClass = DEFAULT_PARTICLE_CLASS,
     destroyAfterDone = DEFAULT_DESTROY_AFTER_DONE,
@@ -29,8 +31,8 @@ stageHeight = DEFAULT_STAGE_HEIGHT,
   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);
+  container.classList.add(c);
+  container.style.setProperty("--sh", stageHeight + "px");
+  let particles = [];
+  let nodes = [];
   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));
+  const get_is_circle = (particle_shape, rotation_transform) => particle_shape === "circles" || should_be_circle(rotation_transform);
   function confetti_styles(node, degree) {
@@ -93,11 +95,11 @@ const rotation_transform = calc_rotation_transform();
   function scratch() {
-    container2.innerHTML = "";
+    container.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);
+    particles = create_particles(particleCount, colors);
+    nodes = create_particle_nodes(container, particles, particleClass);
+    for (const [i, node] of object_entries(nodes))
+      confetti_styles(node, particles[+i].degree);
     timer = setTimeout(() => {
       if (destroyAfterDone)
-        container2.innerHTML = "";
+        container.innerHTML = "";
     }, duration);
@@ -111,2 +113,3 @@ }
       const new_particle_size = new_options.particleSize ?? DEFAULT_PARTICLE_SIZE;
+      const new_particle_class = new_options.particleClass ?? DEFAULT_PARTICLE_CLASS;
       const new_colors = new_options.colors ?? DEFAULT_COLORS;
@@ -121,9 +124,10 @@ const new_stage_height = new_options.stageHeight ?? DEFAULT_STAGE_HEIGHT;
       if (new_particle_count === particleCount) {
-        nodes = Array.from(container2.querySelectorAll(`.${particle}`));
-        for (const [i, { color }] of Object.entries(particles)) {
+        nodes = Array.from(container.querySelectorAll(`.${p}`));
+        for (const [i, { color }] of object_entries(particles)) {
+          const node = nodes[+i];
           if (JSON.stringify(colors) !== JSON.stringify(new_colors)) {
-            nodes[+i].style.setProperty("--bgc", color);
+            node.style.setProperty("--bgc", color);
           }
           if (new_particle_shape !== particleShape) {
-            nodes[+i].style.setProperty(
+            node.style.setProperty(
               // --border-radius
@@ -134,2 +138,8 @@ "--br",
           }
+          if (new_particle_class !== particleClass) {
+            if (particleClass)
+              node.classList.remove(particleClass);
+            if (new_particle_class)
+              node.classList.add(new_particle_class);
+          }
         }
@@ -142,3 +152,3 @@ } else {
       }
-      container2.style.setProperty("--sh", new_stage_height + "px");
+      container.style.setProperty("--sh", new_stage_height + "px");
       duration = new_duration;
@@ -150,11 +160,11 @@ colors = new_colors;
       particleSize = new_particle_size;
+      particleClass = new_particle_class;
       destroyAfterDone = new_destroy_after_done;
       stageHeight = new_stage_height;
       stageWidth = new_stage_width;
-      console.log(1, start_from_scratch);
-      if (start_from_scratch) {
+      if (start_from_scratch)
         scratch();
-      }
     },
     destroy() {
+      container.innerHTML = "";
       clearTimeout(timer);
@@ -172,11 +182,11 @@ }
 }
-function create_particle_nodes(container2, particles = []) {
+function create_particle_nodes(container, particles = [], particleClass) {
   const particle_nodes = [];
   for (const { color } of particles) {
     const particle_node = element("div");
-    particle_node.className = particle;
+    particle_node.className = `${p} ${particleClass}`;
     particle_node.style.setProperty("--bgc", color);
     const inner_particle = element("div");
     append_child(particle_node, inner_particle);
-    append_child(container2, particle_node);
+    append_child(container, particle_node);
     particle_nodes.push(particle_node);
@@ -205,6 +215,6 @@ }
 var coin_flip = () => random() > 0.5;
+var object_entries = Object.entries;
 var POSSIBLE_ROTATION_TRANSFORMS = 6;
 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,3 +0,1 @@
-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};
+var t="mz3PUW_p",e=["#FFC700","#FF0000","#2E3191","#41BBC7"],r=3500,a=.5,o=150,i="mix",n=12,s="",c=!0,l=800,d=1600;function m(m,T={}){let{colors:k=e,duration:A=r,force:H=a,particleCount:N=o,particleShape:F=i,particleSize:O=n,particleClass:j=s,destroyAfterDone:E=c,stageHeight:$=l,stageWidth:q=d}=T;!function(t){if(document.querySelector("style[data-neoconfetti]"))return;const e=P("style");e.dataset.neoconfetti="",e.textContent=t,z(document.head,e)}('@keyframes mz3PUW_ya{to{translate:0 var(--sh)}}@keyframes mz3PUW_xa{to{translate:var(--xlp)0}}@keyframes mz3PUW_r{50%{rotate:var(--hr)180deg}to{rotate:var(--r)360deg}}.mz3PUW_c{z-index:1200;width:0;height:0;position:relative;overflow:visible}.mz3PUW_p{animation:xa var(--dc)forwards cubic-bezier(var(--x1),var(--x2),var(--x3),var(--x4));animation-name:mz3PUW_xa}.mz3PUW_p>div{animation:ya var(--dc)forwards cubic-bezier(var(--y1),var(--y2),var(--y3),var(--y4));width:var(--w);height:var(--h);animation-name:mz3PUW_ya;position:absolute;top:0;left:0}.mz3PUW_p>div:before{content:"";background-color:var(--bgc);animation:r var(--rd)infinite linear;border-radius:var(--br);width:100%;height:100%;animation-name:mz3PUW_r;display:block}'),m.classList.add("mz3PUW_c"),m.style.setProperty("--sh",$+"px");let B=[],D=[];const J=()=>g(x()*(L-1)),I=(t,e)=>"circles"===t||M(e);function G(t,e){const r=J(),a=I(F,r),o=(e,r)=>t.style.setProperty(e,r+"");o("--xlp",_(v(S(e,90)-180),0,180,-q/2,q/2)+"px"),o("--dc",A-g(1e3*x())+"ms");const i=x()<f?U(x()*h,2):0;o("--x1",i),o("--x2",-1*i),o("--x3",i),o("--x4",U(v(_(v(S(e,90)-180),0,180,-1,1)),4)),o("--y1",U(x()*u,4)),o("--y2",U(x()*H*(w()?1:-1),4)),o("--y3",u),o("--y4",U(b(_(v(e-180),0,180,H,-H),0),4)),o("--w",(a?O:g(4*x())+O/2)+"px"),o("--h",(a?O:g(2*x())+O)+"px");const n=r.toString(2).padStart(3,"0").split("");o("--hr",n.map((t=>+t/2+"")).join(" ")),o("--r",n.join(" ")),o("--rd",U(x()*(y-p)+p)+"ms"),o("--br",a?"50%":0)}let K;function Q(){m.innerHTML="",clearTimeout(K),B=W(N,k),D=function(e,r=[],a){const o=[];for(const{color:i}of r){const r=P("div");r.className=`${t} ${a}`,r.style.setProperty("--bgc",i);const n=P("div");z(r,n),z(e,r),o.push(r)}return o}(m,B,j);for(const[t,e]of C(D))G(e,B[+t].degree);K=setTimeout((()=>{E&&(m.innerHTML="")}),A)}return Q(),{update(p){const y=p.particleCount??o,f=p.particleShape??i,h=p.particleSize??n,u=p.particleClass??s,v=p.colors??e,x=p.stageHeight??l,g=p.duration??r,b=p.force??a,P=p.stageWidth??d,z=p.destroyAfterDone??c;B=W(y,v);let U=!1;if(y===N){D=Array.from(m.querySelectorAll(`.${t}`));for(const[t,{color:e}]of C(B)){const r=D[+t];JSON.stringify(k)!==JSON.stringify(v)&&r.style.setProperty("--bgc",e),f!==F&&r.style.setProperty("--br",I(f,J())?"50%":"0"),u!==j&&(j&&r.classList.remove(j),u&&r.classList.add(u))}}else U=!0;E&&!z&&clearTimeout(K),m.style.setProperty("--sh",x+"px"),A=g,k=v,H=b,N=y,F=f,O=h,j=u,E=z,$=x,q=P,U&&Q()},destroy(){m.innerHTML="",clearTimeout(K)}}}var p=200,y=800,f=.1,h=.3,u=.5,v=Math.abs,x=Math.random,g=Math.round,b=Math.max,P=t=>document.createElement(t),z=(t,e)=>t.appendChild(e),W=(t,e)=>Array.from({length:t},((r,a)=>({color:e[a%e.length],degree:360*a/t}))),U=(t,e=2)=>g((t+Number.EPSILON)*10**e)/10**e,_=(t,e,r,a,o)=>(t-e)*(o-a)/(r-e)+a,S=(t,e)=>t+e>360?t+e-360:t+e,w=()=>x()>.5,C=Object.entries,L=6,M=t=>1!==t&&w();export{m as confetti};

package.json

 {
   "name": "@neoconfetti/svelte",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Confetti explosion in Svelte 🎉🎊",
@@ -37,4 +37,8 @@ "author": "Puru Vijay",
     ".": {
-      "import": "./dist/index.js",
-      "module": "./dist/index.js"
+      "types": "./dist/index.d.ts",
+      "import": {
+        "production": "./dist/min/index.js",
+        "development": "./dist/index.js"
+      },
+      "default": "./dist/min/index.js"
     },
@@ -44,3 +48,3 @@ "./package.json": "./package.json"
   "devDependencies": {
-    "@neoconfetti/core": "2.1.0"
+    "@neoconfetti/core": "2.2.0"
   },
@@ -47,0 +51,0 @@ "scripts": {

README.md

@@ -7,3 +7,3 @@ # @neoconfetti/svelte
 
-- 🤏 Tiny - 1.54KB min+br.
+- 🤏 Tiny - 1.49KB min+br.
 - 🐇 Simple - Quite simple to use, and effectively no-config required!
@@ -10,0 +10,0 @@ - 🧙‍♀️ Elegant - Svelte action `use:confetti` rather than setting things up in `onMount` hook.

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

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

20288

increased by1.67%

Lines of code

283

increased by0.35%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes