@shimmer-from-structure/svelte 2.3.4 → 2.4.2

package/dist/index.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("svelte/internal/disclose-version");const L=require("svelte/internal/client"),b=require("svelte"),v=require("@shimmer-from-structure/core");function A(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const h=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(t,n,h.get?h:{enumerable:!0,get:()=>r[n]})}}return t.default=r,Object.freeze(t)}const e=A(L),S=Symbol("SHIMMER_CONFIG");function _(){return b.getContext(S)||v.shimmerDefaults}function G(r={}){const t=_(),n={shimmerColor:r.shimmerColor??t.shimmerColor,backgroundColor:r.backgroundColor??t.backgroundColor,duration:r.duration??t.duration,fallbackBorderRadius:r.fallbackBorderRadius??t.fallbackBorderRadius};b.setContext(S,n)}var X=e.from_html("<div><div></div></div>"),Y=e.from_html(`<div style="position: relative;"><!> <div class="shimmer-measure-container" style="pointer-events: none;" aria-hidden="true"><!></div> <div style="
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+        pointer-events: none;
+      "><!> <!></div></div>`);function K(r,t){e.push(t,!0);let n=e.prop(t,"loading",3,!0),h=e.prop(t,"shimmerColor",3,void 0),O=e.prop(t,"backgroundColor",3,void 0),E=e.prop(t,"duration",3,void 0),M=e.prop(t,"fallbackBorderRadius",3,void 0),i=e.state(void 0),C=e.state(e.proxy([]));const p=_(),B=e.derived(()=>h()??p.shimmerColor),w=e.derived(()=>O()??p.backgroundColor),D=e.derived(()=>E()??p.duration),I=e.derived(()=>M()??p.fallbackBorderRadius);let o,s;async function m(){if(!n()||!e.get(i)||(o==null||o.disconnect(),await b.tick(),!e.get(i)))return;const l=e.get(i),u=l.getBoundingClientRect(),c=[];Array.from(l.children).forEach(f=>{c.push(...v.extractElementInfo(f,u))}),e.set(C,c,!0),e.get(i)&&o&&o.observe(e.get(i),{childList:!0,subtree:!0,characterData:!0,attributes:!1})}e.user_effect(()=>(n()&&e.get(i)?(m(),s&&s(),s=v.createResizeObserver(e.get(i),m)):s&&(s(),s=void 0),()=>{s&&(s(),s=void 0)})),b.onMount(()=>(m(),e.get(i)&&(o=new MutationObserver(()=>{n()&&m()}),o.observe(e.get(i),{childList:!0,subtree:!0,characterData:!0,attributes:!1})),()=>{o==null||o.disconnect()}));function j(){m()}const x="style";var N={remeasure:j},k=e.comment(),T=e.first_child(k);{var q=l=>{var u=e.comment(),c=e.first_child(u);e.snippet(c,()=>t.children),e.append(l,u)},P=l=>{var u=Y(),c=e.child(u);e.element(c,()=>x,!1,(g,a)=>{var d=e.text();e.template_effect(()=>e.set_text(d,v.SHIMMER_CONTAINER_STYLES)),e.append(a,d)});var f=e.sibling(c,2),z=e.child(f);e.snippet(z,()=>t.children),e.reset(f),e.bind_this(f,g=>e.set(i,g),()=>e.get(i));var y=e.sibling(f,2),R=e.child(y);e.element(R,()=>x,!1,(g,a)=>{var d=e.text();d.nodeValue=`
+          @keyframes shimmer-animation {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+          }
+        `,e.append(a,d)});var F=e.sibling(R,2);e.each(F,17,()=>e.get(C),e.index,(g,a)=>{var d=X(),H=e.child(d);e.reset(d),e.template_effect(()=>{e.set_style(d,`
+            position: absolute;
+            left: ${e.get(a).x??""}px;
+            top: ${e.get(a).y??""}px;
+            width: ${e.get(a).width??""}px;
+            height: ${e.get(a).height??""}px;
+            background-color: ${e.get(w)??""};
+            border-radius: ${(e.get(a).borderRadius==="0px"?e.get(I)+"px":e.get(a).borderRadius)??""};
+            overflow: hidden;
+          `),e.set_style(H,`
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              background: linear-gradient(90deg, transparent, ${e.get(B)??""}, transparent);
+              animation: shimmer-animation ${e.get(D)??""}s infinite;
+            `)}),e.append(g,d)}),e.reset(y),e.reset(u),e.append(l,u)};e.if(T,l=>{n()?l(P,-1):l(q)})}return e.append(r,k),e.pop(N)}Object.defineProperty(exports,"shimmerDefaults",{enumerable:!0,get:()=>v.shimmerDefaults});exports.Shimmer=K;exports.getShimmerConfig=_;exports.setShimmerConfig=G;

package/dist/index.esm.js

@@ -1,22 +1,22 @@
 import "svelte/internal/disclose-version";
 import * as e from "svelte/internal/client";
-import { getContext as N, setContext as X, onMount as A, tick as K } from "svelte";
-import { shimmerDefaults as T, createResizeObserver as V, extractElementInfo as Y } from "@shimmer-from-structure/core";
-import { shimmerDefaults as te } from "@shimmer-from-structure/core";
-const _ = Symbol("SHIMMER_CONFIG");
-function x() {
-  return N(_) || T;
+import { getContext as A, setContext as G, onMount as X, tick as Y } from "svelte";
+import { shimmerDefaults as K, createResizeObserver as V, extractElementInfo as j, SHIMMER_CONTAINER_STYLES as q } from "@shimmer-from-structure/core";
+import { shimmerDefaults as re } from "@shimmer-from-structure/core";
+const x = Symbol("SHIMMER_CONFIG");
+function k() {
+  return A(x) || K;
 }
-function W(s = {}) {
-  const t = x(), c = {
-    shimmerColor: s.shimmerColor ?? t.shimmerColor,
-    backgroundColor: s.backgroundColor ?? t.backgroundColor,
-    duration: s.duration ?? t.duration,
-    fallbackBorderRadius: s.fallbackBorderRadius ?? t.fallbackBorderRadius
+function Z(l = {}) {
+  const t = k(), c = {
+    shimmerColor: l.shimmerColor ?? t.shimmerColor,
+    backgroundColor: l.backgroundColor ?? t.backgroundColor,
+    duration: l.duration ?? t.duration,
+    fallbackBorderRadius: l.fallbackBorderRadius ?? t.fallbackBorderRadius
   };
-  X(_, c);
+  G(x, c);
 }
-var j = e.from_html("<div><div></div></div>"), q = e.from_html(`<div style="position: relative;"><div class="shimmer-measure-container svelte-euvo5u" style="pointer-events: none;" aria-hidden="true"><!></div> <div style="
+var J = e.from_html("<div><div></div></div>"), P = e.from_html(`<div style="position: relative;"><!> <div class="shimmer-measure-container" style="pointer-events: none;" aria-hidden="true"><!></div> <div style="
         position: absolute;
         top: 0;
         left: 0;
@@ -25,98 +25,97 @@ var j = e.from_html("<div><div></div></div>"), q = e.from_html(`<div style="posi
         overflow: hidden;
         pointer-events: none;
       "><!> <!></div></div>`);
-const J = {
-  hash: "svelte-euvo5u",
-  code: `.shimmer-measure-container.svelte-euvo5u * {color:transparent !important;}.shimmer-measure-container.svelte-euvo5u img,
-  .shimmer-measure-container.svelte-euvo5u svg,
-  .shimmer-measure-container.svelte-euvo5u video {opacity:0;}`
-};
-function Z(s, t) {
-  e.push(t, !0), e.append_styles(s, J);
-  let c = e.prop(t, "loading", 3, !0), k = e.prop(t, "shimmerColor", 3, void 0), y = e.prop(t, "backgroundColor", 3, void 0), R = e.prop(t, "duration", 3, void 0), B = e.prop(t, "fallbackBorderRadius", 3, void 0), r = e.state(void 0), h = e.state(e.proxy([]));
-  const f = x(), w = e.derived(() => k() ?? f.shimmerColor), E = e.derived(() => y() ?? f.backgroundColor), S = e.derived(() => R() ?? f.duration), M = e.derived(() => B() ?? f.fallbackBorderRadius);
-  let o, i;
+function $(l, t) {
+  e.push(t, !0);
+  let c = e.prop(t, "loading", 3, !0), R = e.prop(t, "shimmerColor", 3, void 0), y = e.prop(t, "backgroundColor", 3, void 0), E = e.prop(t, "duration", 3, void 0), S = e.prop(t, "fallbackBorderRadius", 3, void 0), r = e.state(void 0), h = e.state(e.proxy([]));
+  const v = k(), B = e.derived(() => R() ?? v.shimmerColor), M = e.derived(() => y() ?? v.backgroundColor), w = e.derived(() => E() ?? v.duration), I = e.derived(() => S() ?? v.fallbackBorderRadius);
+  let i, a;
   async function m() {
-    if (!c() || !e.get(r) || (o == null || o.disconnect(), await K(), !e.get(r))) return;
-    const n = e.get(r), d = n.getBoundingClientRect(), a = [];
-    Array.from(n.children).forEach((g) => {
-      a.push(...Y(g, d));
-    }), e.set(h, a, !0), e.get(r) && o && o.observe(e.get(r), {
+    if (!c() || !e.get(r) || (i == null || i.disconnect(), await Y(), !e.get(r))) return;
+    const d = e.get(r), s = d.getBoundingClientRect(), u = [];
+    Array.from(d.children).forEach((f) => {
+      u.push(...j(f, s));
+    }), e.set(h, u, !0), e.get(r) && i && i.observe(e.get(r), {
       childList: !0,
       subtree: !0,
       characterData: !0,
       attributes: !1
     });
   }
-  e.user_effect(() => (c() && e.get(r) ? (m(), i && i(), i = V(e.get(r), m)) : i && (i(), i = void 0), () => {
-    i && (i(), i = void 0);
-  })), A(() => (m(), e.get(r) && (o = new MutationObserver(() => {
+  e.user_effect(() => (c() && e.get(r) ? (m(), a && a(), a = V(e.get(r), m)) : a && (a(), a = void 0), () => {
+    a && (a(), a = void 0);
+  })), X(() => (m(), e.get(r) && (i = new MutationObserver(() => {
     c() && m();
-  }), o.observe(e.get(r), {
+  }), i.observe(e.get(r), {
     childList: !0,
     subtree: !0,
     characterData: !0,
     attributes: !1
     // Don't observe attribute changes (style updates)
   })), () => {
-    o == null || o.disconnect();
+    i == null || i.disconnect();
   }));
   function D() {
     m();
   }
-  const I = "style";
-  var O = { remeasure: D }, p = e.comment(), F = e.first_child(p);
+  const p = "style";
+  var O = { remeasure: D }, b = e.comment(), N = e.first_child(b);
   {
-    var z = (n) => {
-      var d = e.comment(), a = e.first_child(d);
-      e.snippet(a, () => t.children), e.append(n, d);
-    }, G = (n) => {
-      var d = q(), a = e.child(d), g = e.child(a);
-      e.snippet(g, () => t.children), e.reset(a), e.bind_this(a, (v) => e.set(r, v), () => e.get(r));
-      var b = e.sibling(a, 2), C = e.child(b);
-      e.element(C, () => I, !1, (v, l) => {
-        var u = e.text();
-        u.nodeValue = `
+    var F = (d) => {
+      var s = e.comment(), u = e.first_child(s);
+      e.snippet(u, () => t.children), e.append(d, s);
+    }, H = (d) => {
+      var s = P(), u = e.child(s);
+      e.element(u, () => p, !1, (g, o) => {
+        var n = e.text();
+        e.template_effect(() => e.set_text(n, q)), e.append(o, n);
+      });
+      var f = e.sibling(u, 2), L = e.child(f);
+      e.snippet(L, () => t.children), e.reset(f), e.bind_this(f, (g) => e.set(r, g), () => e.get(r));
+      var _ = e.sibling(f, 2), C = e.child(_);
+      e.element(C, () => p, !1, (g, o) => {
+        var n = e.text();
+        n.nodeValue = `
           @keyframes shimmer-animation {
             0% { transform: translateX(-100%); }
             100% { transform: translateX(100%); }
           }
-        `, e.append(l, u);
+        `, e.append(o, n);
       });
-      var H = e.sibling(C, 2);
-      e.each(H, 17, () => e.get(h), e.index, (v, l) => {
-        var u = j(), L = e.child(u);
-        e.reset(u), e.template_effect(() => {
-          e.set_style(u, `
+      var T = e.sibling(C, 2);
+      e.each(T, 17, () => e.get(h), e.index, (g, o) => {
+        var n = J(), z = e.child(n);
+        e.reset(n), e.template_effect(() => {
+          e.set_style(n, `
             position: absolute;
-            left: ${e.get(l).x ?? ""}px;
-            top: ${e.get(l).y ?? ""}px;
-            width: ${e.get(l).width ?? ""}px;
-            height: ${e.get(l).height ?? ""}px;
-            background-color: ${e.get(E) ?? ""};
-            border-radius: ${(e.get(l).borderRadius === "0px" ? e.get(M) + "px" : e.get(l).borderRadius) ?? ""};
+            left: ${e.get(o).x ?? ""}px;
+            top: ${e.get(o).y ?? ""}px;
+            width: ${e.get(o).width ?? ""}px;
+            height: ${e.get(o).height ?? ""}px;
+            background-color: ${e.get(M) ?? ""};
+            border-radius: ${(e.get(o).borderRadius === "0px" ? e.get(I) + "px" : e.get(o).borderRadius) ?? ""};
             overflow: hidden;
-          `), e.set_style(L, `
+          `), e.set_style(z, `
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
-              background: linear-gradient(90deg, transparent, ${e.get(w) ?? ""}, transparent);
-              animation: shimmer-animation ${e.get(S) ?? ""}s infinite;
+              background: linear-gradient(90deg, transparent, ${e.get(B) ?? ""}, transparent);
+              animation: shimmer-animation ${e.get(w) ?? ""}s infinite;
             `);
-        }), e.append(v, u);
-      }), e.reset(b), e.reset(d), e.append(n, d);
+        }), e.append(g, n);
+      }), e.reset(_), e.reset(s), e.append(d, s);
     };
-    e.if(F, (n) => {
-      c() ? n(G, -1) : n(z);
+    e.if(N, (d) => {
+      c() ? d(H, -1) : d(F);
     });
   }
-  return e.append(s, p), e.pop(O);
+  return e.append(l, b), e.pop(O);
 }
 export {
-  Z as Shimmer,
-  x as getShimmerConfig,
-  W as setShimmerConfig,
-  te as shimmerDefaults
+  $ as Shimmer,
+  k as getShimmerConfig,
+  Z as setShimmerConfig,
+  re as shimmerDefaults
 };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@shimmer-from-structure/svelte",
-  "version": "2.3.4",
+  "version": "2.4.2",
   "type": "module",
   "description": "Svelte adapter for shimmer-from-structure",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -13,7 +13,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.esm.js",
-      "require": "./dist/index.js"
+      "require": "./dist/index.cjs"
     }
   },
   "scripts": {

package/dist/index.js

@@ -1,33 +0,0 @@
-(function(n,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("svelte/internal/disclose-version"),require("svelte/internal/client"),require("svelte"),require("@shimmer-from-structure/core")):typeof define=="function"&&define.amd?define(["exports","svelte/internal/disclose-version","svelte/internal/client","svelte","@shimmer-from-structure/core"],v):(n=typeof globalThis<"u"?globalThis:n||self,v(n.ShimmerSvelte={},null,n.SvelteInternalClient,n.Svelte,n.ShimmerCore))})(this,(function(n,v,B,h,g){"use strict";function w(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const i in r)if(i!=="default"){const p=Object.getOwnPropertyDescriptor(r,i);Object.defineProperty(t,i,p.get?p:{enumerable:!0,get:()=>r[i]})}}return t.default=r,Object.freeze(t)}const e=w(B),k=Symbol("SHIMMER_CONFIG");function _(){return h.getContext(k)||g.shimmerDefaults}function D(r={}){const t=_(),i={shimmerColor:r.shimmerColor??t.shimmerColor,backgroundColor:r.backgroundColor??t.backgroundColor,duration:r.duration??t.duration,fallbackBorderRadius:r.fallbackBorderRadius??t.fallbackBorderRadius};h.setContext(k,i)}var M=e.from_html("<div><div></div></div>"),j=e.from_html(`<div style="position: relative;"><div class="shimmer-measure-container svelte-euvo5u" style="pointer-events: none;" aria-hidden="true"><!></div> <div style="
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        overflow: hidden;
-        pointer-events: none;
-      "><!> <!></div></div>`);const E={hash:"svelte-euvo5u",code:`.shimmer-measure-container.svelte-euvo5u * {color:transparent !important;}.shimmer-measure-container.svelte-euvo5u img,
-  .shimmer-measure-container.svelte-euvo5u svg,
-  .shimmer-measure-container.svelte-euvo5u video {opacity:0;}`};function I(r,t){e.push(t,!0),e.append_styles(r,E);let i=e.prop(t,"loading",3,!0),p=e.prop(t,"shimmerColor",3,void 0),T=e.prop(t,"backgroundColor",3,void 0),q=e.prop(t,"duration",3,void 0),P=e.prop(t,"fallbackBorderRadius",3,void 0),o=e.state(void 0),S=e.state(e.proxy([]));const b=_(),z=e.derived(()=>p()??b.shimmerColor),F=e.derived(()=>T()??b.backgroundColor),N=e.derived(()=>q()??b.duration),G=e.derived(()=>P()??b.fallbackBorderRadius);let a,s;async function f(){if(!i()||!e.get(o)||(a==null||a.disconnect(),await h.tick(),!e.get(o)))return;const d=e.get(o),u=d.getBoundingClientRect(),l=[];Array.from(d.children).forEach(y=>{l.push(...g.extractElementInfo(y,u))}),e.set(S,l,!0),e.get(o)&&a&&a.observe(e.get(o),{childList:!0,subtree:!0,characterData:!0,attributes:!1})}e.user_effect(()=>(i()&&e.get(o)?(f(),s&&s(),s=g.createResizeObserver(e.get(o),f)):s&&(s(),s=void 0),()=>{s&&(s(),s=void 0)})),h.onMount(()=>(f(),e.get(o)&&(a=new MutationObserver(()=>{i()&&f()}),a.observe(e.get(o),{childList:!0,subtree:!0,characterData:!0,attributes:!1})),()=>{a==null||a.disconnect()}));function H(){f()}const L="style";var V={remeasure:H},x=e.comment(),X=e.first_child(x);{var A=d=>{var u=e.comment(),l=e.first_child(u);e.snippet(l,()=>t.children),e.append(d,u)},K=d=>{var u=j(),l=e.child(u),y=e.child(l);e.snippet(y,()=>t.children),e.reset(l),e.bind_this(l,C=>e.set(o,C),()=>e.get(o));var R=e.sibling(l,2),O=e.child(R);e.element(O,()=>L,!1,(C,c)=>{var m=e.text();m.nodeValue=`
-          @keyframes shimmer-animation {
-            0% { transform: translateX(-100%); }
-            100% { transform: translateX(100%); }
-          }
-        `,e.append(c,m)});var Y=e.sibling(O,2);e.each(Y,17,()=>e.get(S),e.index,(C,c)=>{var m=M(),J=e.child(m);e.reset(m),e.template_effect(()=>{e.set_style(m,`
-            position: absolute;
-            left: ${e.get(c).x??""}px;
-            top: ${e.get(c).y??""}px;
-            width: ${e.get(c).width??""}px;
-            height: ${e.get(c).height??""}px;
-            background-color: ${e.get(F)??""};
-            border-radius: ${(e.get(c).borderRadius==="0px"?e.get(G)+"px":e.get(c).borderRadius)??""};
-            overflow: hidden;
-          `),e.set_style(J,`
-              position: absolute;
-              top: 0;
-              left: 0;
-              width: 100%;
-              height: 100%;
-              background: linear-gradient(90deg, transparent, ${e.get(z)??""}, transparent);
-              animation: shimmer-animation ${e.get(N)??""}s infinite;
-            `)}),e.append(C,m)}),e.reset(R),e.reset(u),e.append(d,u)};e.if(X,d=>{i()?d(K,-1):d(A)})}return e.append(r,x),e.pop(V)}Object.defineProperty(n,"shimmerDefaults",{enumerable:!0,get:()=>g.shimmerDefaults}),n.Shimmer=I,n.getShimmerConfig=_,n.setShimmerConfig=D,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));