@shimmer-from-structure/svelte 2.3.2 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +70 -71
- package/dist/index.js +12 -14
- package/package.json +3 -3
package/dist/index.esm.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import "svelte/internal/disclose-version";
|
|
2
2
|
import * as e from "svelte/internal/client";
|
|
3
|
-
import { getContext as
|
|
4
|
-
import { shimmerDefaults as
|
|
5
|
-
import { shimmerDefaults as
|
|
6
|
-
const
|
|
7
|
-
function
|
|
8
|
-
return
|
|
3
|
+
import { getContext as A, setContext as G, onMount as X, tick as Y } from "svelte";
|
|
4
|
+
import { shimmerDefaults as K, createResizeObserver as V, extractElementInfo as j, SHIMMER_CONTAINER_STYLES as q } from "@shimmer-from-structure/core";
|
|
5
|
+
import { shimmerDefaults as re } from "@shimmer-from-structure/core";
|
|
6
|
+
const x = Symbol("SHIMMER_CONFIG");
|
|
7
|
+
function k() {
|
|
8
|
+
return A(x) || K;
|
|
9
9
|
}
|
|
10
|
-
function
|
|
11
|
-
const t =
|
|
12
|
-
shimmerColor:
|
|
13
|
-
backgroundColor:
|
|
14
|
-
duration:
|
|
15
|
-
fallbackBorderRadius:
|
|
10
|
+
function Z(l = {}) {
|
|
11
|
+
const t = k(), c = {
|
|
12
|
+
shimmerColor: l.shimmerColor ?? t.shimmerColor,
|
|
13
|
+
backgroundColor: l.backgroundColor ?? t.backgroundColor,
|
|
14
|
+
duration: l.duration ?? t.duration,
|
|
15
|
+
fallbackBorderRadius: l.fallbackBorderRadius ?? t.fallbackBorderRadius
|
|
16
16
|
};
|
|
17
|
-
|
|
17
|
+
G(x, c);
|
|
18
18
|
}
|
|
19
|
-
var
|
|
19
|
+
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="
|
|
20
20
|
position: absolute;
|
|
21
21
|
top: 0;
|
|
22
22
|
left: 0;
|
|
@@ -25,98 +25,97 @@ var j = e.from_html("<div><div></div></div>"), q = e.from_html(`<div style="posi
|
|
|
25
25
|
overflow: hidden;
|
|
26
26
|
pointer-events: none;
|
|
27
27
|
"><!> <!></div></div>`);
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
.
|
|
32
|
-
|
|
33
|
-
};
|
|
34
|
-
function Z(s, t) {
|
|
35
|
-
e.push(t, !0), e.append_styles(s, J);
|
|
36
|
-
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([]));
|
|
37
|
-
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);
|
|
38
|
-
let o, i;
|
|
28
|
+
function $(l, t) {
|
|
29
|
+
e.push(t, !0);
|
|
30
|
+
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([]));
|
|
31
|
+
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);
|
|
32
|
+
let i, a;
|
|
39
33
|
async function m() {
|
|
40
|
-
if (!c() || !e.get(r) || (
|
|
41
|
-
const
|
|
42
|
-
Array.from(
|
|
43
|
-
|
|
44
|
-
}), e.set(h,
|
|
34
|
+
if (!c() || !e.get(r) || (i == null || i.disconnect(), await Y(), !e.get(r))) return;
|
|
35
|
+
const d = e.get(r), s = d.getBoundingClientRect(), u = [];
|
|
36
|
+
Array.from(d.children).forEach((f) => {
|
|
37
|
+
u.push(...j(f, s));
|
|
38
|
+
}), e.set(h, u, !0), e.get(r) && i && i.observe(e.get(r), {
|
|
45
39
|
childList: !0,
|
|
46
40
|
subtree: !0,
|
|
47
41
|
characterData: !0,
|
|
48
42
|
attributes: !1
|
|
49
43
|
});
|
|
50
44
|
}
|
|
51
|
-
e.user_effect(() => (c() && e.get(r) ? (m(),
|
|
52
|
-
|
|
53
|
-
})),
|
|
45
|
+
e.user_effect(() => (c() && e.get(r) ? (m(), a && a(), a = V(e.get(r), m)) : a && (a(), a = void 0), () => {
|
|
46
|
+
a && (a(), a = void 0);
|
|
47
|
+
})), X(() => (m(), e.get(r) && (i = new MutationObserver(() => {
|
|
54
48
|
c() && m();
|
|
55
|
-
}),
|
|
49
|
+
}), i.observe(e.get(r), {
|
|
56
50
|
childList: !0,
|
|
57
51
|
subtree: !0,
|
|
58
52
|
characterData: !0,
|
|
59
53
|
attributes: !1
|
|
60
54
|
// Don't observe attribute changes (style updates)
|
|
61
55
|
})), () => {
|
|
62
|
-
|
|
56
|
+
i == null || i.disconnect();
|
|
63
57
|
}));
|
|
64
58
|
function D() {
|
|
65
59
|
m();
|
|
66
60
|
}
|
|
67
|
-
const
|
|
68
|
-
var O = { remeasure: D },
|
|
61
|
+
const p = "style";
|
|
62
|
+
var O = { remeasure: D }, b = e.comment(), N = e.first_child(b);
|
|
69
63
|
{
|
|
70
|
-
var
|
|
71
|
-
var
|
|
72
|
-
e.snippet(
|
|
73
|
-
},
|
|
74
|
-
var
|
|
75
|
-
e.
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
64
|
+
var F = (d) => {
|
|
65
|
+
var s = e.comment(), u = e.first_child(s);
|
|
66
|
+
e.snippet(u, () => t.children), e.append(d, s);
|
|
67
|
+
}, H = (d) => {
|
|
68
|
+
var s = P(), u = e.child(s);
|
|
69
|
+
e.element(u, () => p, !1, (g, o) => {
|
|
70
|
+
var n = e.text();
|
|
71
|
+
e.template_effect(() => e.set_text(n, q)), e.append(o, n);
|
|
72
|
+
});
|
|
73
|
+
var f = e.sibling(u, 2), L = e.child(f);
|
|
74
|
+
e.snippet(L, () => t.children), e.reset(f), e.bind_this(f, (g) => e.set(r, g), () => e.get(r));
|
|
75
|
+
var _ = e.sibling(f, 2), C = e.child(_);
|
|
76
|
+
e.element(C, () => p, !1, (g, o) => {
|
|
77
|
+
var n = e.text();
|
|
78
|
+
n.nodeValue = `
|
|
80
79
|
@keyframes shimmer-animation {
|
|
81
80
|
0% { transform: translateX(-100%); }
|
|
82
81
|
100% { transform: translateX(100%); }
|
|
83
82
|
}
|
|
84
|
-
`, e.append(
|
|
83
|
+
`, e.append(o, n);
|
|
85
84
|
});
|
|
86
|
-
var
|
|
87
|
-
e.each(
|
|
88
|
-
var
|
|
89
|
-
e.reset(
|
|
90
|
-
e.set_style(
|
|
85
|
+
var T = e.sibling(C, 2);
|
|
86
|
+
e.each(T, 17, () => e.get(h), e.index, (g, o) => {
|
|
87
|
+
var n = J(), z = e.child(n);
|
|
88
|
+
e.reset(n), e.template_effect(() => {
|
|
89
|
+
e.set_style(n, `
|
|
91
90
|
position: absolute;
|
|
92
|
-
left: ${e.get(
|
|
93
|
-
top: ${e.get(
|
|
94
|
-
width: ${e.get(
|
|
95
|
-
height: ${e.get(
|
|
96
|
-
background-color: ${e.get(
|
|
97
|
-
border-radius: ${(e.get(
|
|
91
|
+
left: ${e.get(o).x ?? ""}px;
|
|
92
|
+
top: ${e.get(o).y ?? ""}px;
|
|
93
|
+
width: ${e.get(o).width ?? ""}px;
|
|
94
|
+
height: ${e.get(o).height ?? ""}px;
|
|
95
|
+
background-color: ${e.get(M) ?? ""};
|
|
96
|
+
border-radius: ${(e.get(o).borderRadius === "0px" ? e.get(I) + "px" : e.get(o).borderRadius) ?? ""};
|
|
98
97
|
overflow: hidden;
|
|
99
|
-
`), e.set_style(
|
|
98
|
+
`), e.set_style(z, `
|
|
100
99
|
position: absolute;
|
|
101
100
|
top: 0;
|
|
102
101
|
left: 0;
|
|
103
102
|
width: 100%;
|
|
104
103
|
height: 100%;
|
|
105
|
-
background: linear-gradient(90deg, transparent, ${e.get(
|
|
106
|
-
animation: shimmer-animation ${e.get(
|
|
104
|
+
background: linear-gradient(90deg, transparent, ${e.get(B) ?? ""}, transparent);
|
|
105
|
+
animation: shimmer-animation ${e.get(w) ?? ""}s infinite;
|
|
107
106
|
`);
|
|
108
|
-
}), e.append(
|
|
109
|
-
}), e.reset(
|
|
107
|
+
}), e.append(g, n);
|
|
108
|
+
}), e.reset(_), e.reset(s), e.append(d, s);
|
|
110
109
|
};
|
|
111
|
-
e.if(
|
|
112
|
-
c() ?
|
|
110
|
+
e.if(N, (d) => {
|
|
111
|
+
c() ? d(H, -1) : d(F);
|
|
113
112
|
});
|
|
114
113
|
}
|
|
115
|
-
return e.append(
|
|
114
|
+
return e.append(l, b), e.pop(O);
|
|
116
115
|
}
|
|
117
116
|
export {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
117
|
+
$ as Shimmer,
|
|
118
|
+
k as getShimmerConfig,
|
|
119
|
+
Z as setShimmerConfig,
|
|
120
|
+
re as shimmerDefaults
|
|
122
121
|
};
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(n,
|
|
1
|
+
(function(n,p){typeof exports=="object"&&typeof module<"u"?p(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"],p):(n=typeof globalThis<"u"?globalThis:n||self,p(n.ShimmerSvelte={},null,n.SvelteInternalClient,n.Svelte,n.ShimmerCore))})(this,(function(n,p,M,b,g){"use strict";function B(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const i in r)if(i!=="default"){const _=Object.getOwnPropertyDescriptor(r,i);Object.defineProperty(t,i,_.get?_:{enumerable:!0,get:()=>r[i]})}}return t.default=r,Object.freeze(t)}const e=B(M),y=Symbol("SHIMMER_CONFIG");function S(){return b.getContext(y)||g.shimmerDefaults}function w(r={}){const t=S(),i={shimmerColor:r.shimmerColor??t.shimmerColor,backgroundColor:r.backgroundColor??t.backgroundColor,duration:r.duration??t.duration,fallbackBorderRadius:r.fallbackBorderRadius??t.fallbackBorderRadius};b.setContext(y,i)}var D=e.from_html("<div><div></div></div>"),I=e.from_html(`<div style="position: relative;"><!> <div class="shimmer-measure-container" style="pointer-events: none;" aria-hidden="true"><!></div> <div style="
|
|
2
2
|
position: absolute;
|
|
3
3
|
top: 0;
|
|
4
4
|
left: 0;
|
|
@@ -6,21 +6,19 @@
|
|
|
6
6
|
bottom: 0;
|
|
7
7
|
overflow: hidden;
|
|
8
8
|
pointer-events: none;
|
|
9
|
-
"><!> <!></div></div>`);const
|
|
10
|
-
.shimmer-measure-container.svelte-euvo5u svg,
|
|
11
|
-
.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=`
|
|
9
|
+
"><!> <!></div></div>`);function j(r,t){e.push(t,!0);let i=e.prop(t,"loading",3,!0),_=e.prop(t,"shimmerColor",3,void 0),T=e.prop(t,"backgroundColor",3,void 0),N=e.prop(t,"duration",3,void 0),q=e.prop(t,"fallbackBorderRadius",3,void 0),o=e.state(void 0),k=e.state(e.proxy([]));const C=S(),P=e.derived(()=>_()??C.shimmerColor),z=e.derived(()=>T()??C.backgroundColor),F=e.derived(()=>N()??C.duration),H=e.derived(()=>q()??C.fallbackBorderRadius);let a,l;async function v(){if(!i()||!e.get(o)||(a==null||a.disconnect(),await b.tick(),!e.get(o)))return;const u=e.get(o),c=u.getBoundingClientRect(),f=[];Array.from(u.children).forEach(m=>{f.push(...g.extractElementInfo(m,c))}),e.set(k,f,!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)?(v(),l&&l(),l=g.createResizeObserver(e.get(o),v)):l&&(l(),l=void 0),()=>{l&&(l(),l=void 0)})),b.onMount(()=>(v(),e.get(o)&&(a=new MutationObserver(()=>{i()&&v()}),a.observe(e.get(o),{childList:!0,subtree:!0,characterData:!0,attributes:!1})),()=>{a==null||a.disconnect()}));function L(){v()}const x="style";var A={remeasure:L},R=e.comment(),G=e.first_child(R);{var V=u=>{var c=e.comment(),f=e.first_child(c);e.snippet(f,()=>t.children),e.append(u,c)},X=u=>{var c=I(),f=e.child(c);e.element(f,()=>x,!1,(h,s)=>{var d=e.text();e.template_effect(()=>e.set_text(d,g.SHIMMER_CONTAINER_STYLES)),e.append(s,d)});var m=e.sibling(f,2),Y=e.child(m);e.snippet(Y,()=>t.children),e.reset(m),e.bind_this(m,h=>e.set(o,h),()=>e.get(o));var O=e.sibling(m,2),E=e.child(O);e.element(E,()=>x,!1,(h,s)=>{var d=e.text();d.nodeValue=`
|
|
12
10
|
@keyframes shimmer-animation {
|
|
13
11
|
0% { transform: translateX(-100%); }
|
|
14
12
|
100% { transform: translateX(100%); }
|
|
15
13
|
}
|
|
16
|
-
`,e.append(
|
|
14
|
+
`,e.append(s,d)});var K=e.sibling(E,2);e.each(K,17,()=>e.get(k),e.index,(h,s)=>{var d=D(),J=e.child(d);e.reset(d),e.template_effect(()=>{e.set_style(d,`
|
|
17
15
|
position: absolute;
|
|
18
|
-
left: ${e.get(
|
|
19
|
-
top: ${e.get(
|
|
20
|
-
width: ${e.get(
|
|
21
|
-
height: ${e.get(
|
|
22
|
-
background-color: ${e.get(
|
|
23
|
-
border-radius: ${(e.get(
|
|
16
|
+
left: ${e.get(s).x??""}px;
|
|
17
|
+
top: ${e.get(s).y??""}px;
|
|
18
|
+
width: ${e.get(s).width??""}px;
|
|
19
|
+
height: ${e.get(s).height??""}px;
|
|
20
|
+
background-color: ${e.get(z)??""};
|
|
21
|
+
border-radius: ${(e.get(s).borderRadius==="0px"?e.get(H)+"px":e.get(s).borderRadius)??""};
|
|
24
22
|
overflow: hidden;
|
|
25
23
|
`),e.set_style(J,`
|
|
26
24
|
position: absolute;
|
|
@@ -28,6 +26,6 @@
|
|
|
28
26
|
left: 0;
|
|
29
27
|
width: 100%;
|
|
30
28
|
height: 100%;
|
|
31
|
-
background: linear-gradient(90deg, transparent, ${e.get(
|
|
32
|
-
animation: shimmer-animation ${e.get(
|
|
33
|
-
`)}),e.append(
|
|
29
|
+
background: linear-gradient(90deg, transparent, ${e.get(P)??""}, transparent);
|
|
30
|
+
animation: shimmer-animation ${e.get(F)??""}s infinite;
|
|
31
|
+
`)}),e.append(h,d)}),e.reset(O),e.reset(c),e.append(u,c)};e.if(G,u=>{i()?u(X,-1):u(V)})}return e.append(r,R),e.pop(A)}Object.defineProperty(n,"shimmerDefaults",{enumerable:!0,get:()=>g.shimmerDefaults}),n.Shimmer=j,n.getShimmerConfig=S,n.setShimmerConfig=w,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shimmer-from-structure/svelte",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Svelte adapter for shimmer-from-structure",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"prepublishOnly": "cp ../../README.md ."
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
|
-
"svelte": "^5.
|
|
27
|
+
"svelte": "^5.53.5"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@shimmer-from-structure/core": "*"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"@testing-library/jest-dom": "^6.9.1",
|
|
36
36
|
"@testing-library/svelte": "^5.3.1",
|
|
37
37
|
"jsdom": "^27.4.0",
|
|
38
|
-
"svelte": "^5.
|
|
38
|
+
"svelte": "^5.53.5",
|
|
39
39
|
"svelte-check": "^4.0.0",
|
|
40
40
|
"tslib": "^2.0.0",
|
|
41
41
|
"typescript": "^5.0.0",
|