@salla.sa/twilight-bundles 0.1.40 → 0.1.42
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/twilight-bundles.cjs +17 -1
- package/dist/twilight-bundles.js +88 -41
- package/package.json +1 -1
|
@@ -1 +1,17 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("lit"),l=require("lit/decorators.js");class r{static onBundlesReady(){return r.makeSureSallaIsReady().then(()=>Salla.event.onlyWhen("twilight-bundles::initiated")).then(()=>Salla.lang.onLoaded())}static async initializeSalla(){if(Salla.status==="ready"){salla.log("Salla is ready");return}const e=document.currentScript||document.querySelector('script[src*="twilight-bundles.js"]'),t=e==null?void 0:e.hasAttribute("demo-mode");let n=e==null?void 0:e.getAttribute("store-id"),i=JSON.parse((e==null?void 0:e.getAttribute("config"))||"false");return t||i||n?(n=n||"1510890315",i=i||await r.getStoreSettings(n),Salla.init(i||{debug:!0,store:{id:n}})):Salla.onReady()}static async getStoreSettings(e){let t=Salla.storage.session.get(`store-settings-${e}`);return t||(t=(await fetch("https://api.salla.dev/store/v1/store/settings",{headers:{"store-identifier":e}}).then(n=>n.json())).data,Salla.storage.session.set(`store-settings-${e}`,t),t)}static makeSureSallaIsReady(){return window.Salla?Promise.resolve(r.initializeSalla()):new Promise((e,t)=>{let n;const i=setTimeout(()=>{window.clearInterval(n),t(new Error("Timeout: Salla object not found after 10 seconds"))},1e4);n=window.setInterval(()=>{window.Salla&&(window.clearInterval(n),clearTimeout(i),e(r.initializeSalla()))},50)})}}var f=Object.defineProperty,d=(m,e,t,n)=>{for(var i=void 0,s=m.length-1,o;s>=0;s--)(o=m[s])&&(i=o(e,t,i)||i);return i&&f(e,t,i),i};const c=class c extends h.LitElement{constructor(){super(...arguments),this.key="",this.data={},this.imports={},this.shadowRootMode="open"}createRenderRoot(){return this.shadowRootMode!==!1?this.attachShadow({mode:this.shadowRootMode||"closed"}):this}static register(e){const t={component:this,dynamicTagName:`${e}-${Math.random().toString(36).substring(2,8)}`};return r.onBundlesReady().then(()=>Salla.bundles.registerComponent(e,t))}};c.styles=h.css`:host { display: block; }`;let a=c;d([l.property()],a.prototype,"key");d([l.property()],a.prototype,"data");d([l.property()],a.prototype,"imports");d([l.property()],a.prototype,"shadowRootMode");const p="twilight-skeleton-styles",y=["min-height","height","width","aspect-ratio"];class u extends HTMLElement{connectedCallback(){var t;let e=(t=this.getAttribute("component-name"))==null?void 0:t.replace(/^salla-/,"");if(!e)return Salla.error("Component name is required",this),Promise.resolve();this.renderSkeleton(e),Salla.bundles.renderCustomComponentDom(`salla-${e}`,this)}renderSkeleton(e){var i;if(this.dataset.skeletonRendered==="true"||(this.dataset.skeletonRendered="true",this.hasMeaningfulChildren())||(i=Salla.bundles)!=null&&i.isRegistered(`salla-${e}`))return;u.ensureSkeletonStyles();const t=document.createElement("div");t.className="twilight-skeleton",t.setAttribute("part","skeleton"),t.setAttribute("aria-hidden","true");let n=!1;y.forEach(s=>{const o=this.getAttribute(s);o&&(t.style.setProperty(s,o),n=!0)}),n||(t.style.minHeight="1.5em"),this.replaceChildren(t)}hasMeaningfulChildren(){for(const e of Array.from(this.childNodes))if(e.nodeType===Node.ELEMENT_NODE||e.nodeType===Node.TEXT_NODE&&(e.nodeValue||"").trim().length>0)return!0;return!1}static ensureSkeletonStyles(){if(document.getElementById(p))return;const e=document.createElement("style");e.id=p,e.textContent=`
|
|
2
|
+
.twilight-skeleton {
|
|
3
|
+
display: block;
|
|
4
|
+
width: 100%;
|
|
5
|
+
background: linear-gradient(90deg, #eeeeee 0%, #f5f5f5 50%, #eeeeee 100%);
|
|
6
|
+
background-size: 200% 100%;
|
|
7
|
+
animation: twilight-skeleton-shimmer 1.4s ease-in-out infinite;
|
|
8
|
+
border-radius: 4px;
|
|
9
|
+
}
|
|
10
|
+
@keyframes twilight-skeleton-shimmer {
|
|
11
|
+
0% { background-position: 200% 0; }
|
|
12
|
+
100% { background-position: -200% 0; }
|
|
13
|
+
}
|
|
14
|
+
@media (prefers-reduced-motion: reduce) {
|
|
15
|
+
.twilight-skeleton { animation: none; }
|
|
16
|
+
}
|
|
17
|
+
`,document.head.appendChild(e)}}class S{constructor(){this.components=new Map,this.pendingComponents=[],this.initialized=!1,Salla.onReady().then(()=>{if(Salla.bundles){Salla.log("TwilightBundles is already initialized");return}this.init(),Salla.bundles=this,Salla.event.emit("twilight-bundles::initiated"),this.registerCustomComponents()})}async init(){this.initialized||(this.initialized=!0)}registerCustomComponents(){HTMLElement.registerSallaComponent=function(e){Salla.bundles.registerComponent(e,{component:this,dynamicTagName:`${e}-${Math.random().toString(36).substring(2,8)}`})},this.injectBundleScript(window.customComponents||[])}injectBundleScript(e){e==null||e.forEach(t=>{if(document.querySelector(`script[src="${t}"]`)){Salla.log("Script already exists",t);return}const n=document.createElement("script");n.type="module",n.src=t,document.head.appendChild(n)})}renderCustomComponentDom(e,t){Salla.log("Rendering custom component",e);const n=this.components.get(e);if(n)return this.renderDynamicCustomComponentDom(n.dynamicTagName,t);this.pendingComponents.push({tagName:e,component:t});const i=t.getAttribute("version"),s=t.getAttribute("assets");if(s){this.injectBundleScript(s.split(",").map(g=>this.appendVersion(g,i)));return}const o=t.getAttribute("bundle-id");if(o){this.injectBundleScript([this.appendVersion(this.getAssetForComponent(o,e.replace(/^salla-/,"")),i)]);return}}appendVersion(e,t){if(!t)return e;const n=e.includes("?")?"&":"?";return`${e}${n}ver=${t}`}getAssetForComponent(e,t){var n,i;return(i=(n=Salla.config.get("theme.bundle_assets","https://cdn.assets.salla.network/themes/:bundle/latest/:component.js"))==null?void 0:n.replace(":bundle",e))==null?void 0:i.replace(":component",t)}renderDynamicCustomComponentDom(e,t){const n=document.createElement(e);Array.from(t.attributes).forEach(i=>n.setAttribute(i.name,i.value||"")),["min-height","height","width","aspect-ratio"].forEach(i=>{const s=t.getAttribute(i);s&&n.style.setProperty(i,s)}),t.before(n),t.remove(),requestAnimationFrame(()=>requestAnimationFrame(()=>{n.style.removeProperty("min-height"),n.style.removeProperty("aspect-ratio")}))}isRegistered(e){return this.components.has(e)}registerComponent(e,t){if(this.components.has(e))return console.warn(`Component ${e} is already registered into the this.components map. Skipping.`);if(!t.dynamicTagName)return console.warn(`Component ${e} is missing dynamicTagName. Skipping.`);if(!t.component)return console.warn(`Component ${e} is missing component. Skipping.`);if(window.customElements.get(t.dynamicTagName))return console.warn(`Component ${t.dynamicTagName} is already registered into the window custom elements. Skipping.`);window.customElements.define(t.dynamicTagName,t.component),this.components.set(e,t),Salla.log("Component registered:",t.dynamicTagName);const n=this.pendingComponents.filter(i=>i.tagName===e);n.length&&(n.forEach(i=>{this.renderDynamicCustomComponentDom(t.dynamicTagName,i.component)}),this.pendingComponents=this.pendingComponents.filter(i=>i.tagName!==e),Salla.log("Pending Components rendered:",e,t.dynamicTagName))}renderSharedAssests(...e){const t={sallaicons:`<link rel="stylesheet" href="${Salla.url.cdn("fonts/sallaicons.css")}">`};return e.map(n=>t[n]||"").join("")}}r.makeSureSallaIsReady().then(()=>new S).then(()=>window.customElements.get("salla-custom-component")||window.customElements.define("salla-custom-component",u));exports.SallaComponent=a;
|
package/dist/twilight-bundles.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as
|
|
3
|
-
class
|
|
1
|
+
import { LitElement as g, css as f } from "lit";
|
|
2
|
+
import { property as l } from "lit/decorators.js";
|
|
3
|
+
class r {
|
|
4
4
|
static onBundlesReady() {
|
|
5
|
-
return
|
|
5
|
+
return r.makeSureSallaIsReady().then(() => Salla.event.onlyWhen("twilight-bundles::initiated")).then(() => Salla.lang.onLoaded());
|
|
6
6
|
}
|
|
7
7
|
static async initializeSalla() {
|
|
8
8
|
if (Salla.status === "ready") {
|
|
@@ -10,8 +10,8 @@ class i {
|
|
|
10
10
|
return;
|
|
11
11
|
}
|
|
12
12
|
const e = document.currentScript || document.querySelector('script[src*="twilight-bundles.js"]'), t = e == null ? void 0 : e.hasAttribute("demo-mode");
|
|
13
|
-
let n = e == null ? void 0 : e.getAttribute("store-id"),
|
|
14
|
-
return t ||
|
|
13
|
+
let n = e == null ? void 0 : e.getAttribute("store-id"), i = JSON.parse((e == null ? void 0 : e.getAttribute("config")) || "false");
|
|
14
|
+
return t || i || n ? (n = n || "1510890315", i = i || await r.getStoreSettings(n), Salla.init(i || {
|
|
15
15
|
debug: !0,
|
|
16
16
|
store: { id: n }
|
|
17
17
|
})) : Salla.onReady();
|
|
@@ -21,23 +21,23 @@ class i {
|
|
|
21
21
|
return t || (t = (await fetch("https://api.salla.dev/store/v1/store/settings", { headers: { "store-identifier": e } }).then((n) => n.json())).data, Salla.storage.session.set(`store-settings-${e}`, t), t);
|
|
22
22
|
}
|
|
23
23
|
static makeSureSallaIsReady() {
|
|
24
|
-
return window.Salla ? Promise.resolve(
|
|
24
|
+
return window.Salla ? Promise.resolve(r.initializeSalla()) : new Promise((e, t) => {
|
|
25
25
|
let n;
|
|
26
|
-
const
|
|
26
|
+
const i = setTimeout(() => {
|
|
27
27
|
window.clearInterval(n), t(new Error("Timeout: Salla object not found after 10 seconds"));
|
|
28
28
|
}, 1e4);
|
|
29
29
|
n = window.setInterval(() => {
|
|
30
|
-
window.Salla && (window.clearInterval(n), clearTimeout(
|
|
30
|
+
window.Salla && (window.clearInterval(n), clearTimeout(i), e(r.initializeSalla()));
|
|
31
31
|
}, 50);
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
|
-
var
|
|
36
|
-
for (var
|
|
37
|
-
(
|
|
38
|
-
return
|
|
35
|
+
var y = Object.defineProperty, d = (m, e, t, n) => {
|
|
36
|
+
for (var i = void 0, s = m.length - 1, o; s >= 0; s--)
|
|
37
|
+
(o = m[s]) && (i = o(e, t, i) || i);
|
|
38
|
+
return i && y(e, t, i), i;
|
|
39
39
|
};
|
|
40
|
-
const c = class c extends
|
|
40
|
+
const c = class c extends g {
|
|
41
41
|
constructor() {
|
|
42
42
|
super(...arguments), this.key = "", this.data = {}, this.imports = {}, this.shadowRootMode = "open";
|
|
43
43
|
}
|
|
@@ -49,33 +49,72 @@ const c = class c extends p {
|
|
|
49
49
|
component: this,
|
|
50
50
|
dynamicTagName: `${e}-${Math.random().toString(36).substring(2, 8)}`
|
|
51
51
|
};
|
|
52
|
-
return
|
|
52
|
+
return r.onBundlesReady().then(() => Salla.bundles.registerComponent(e, t));
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
|
-
c.styles =
|
|
55
|
+
c.styles = f`:host { display: block; }`;
|
|
56
56
|
let a = c;
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
d([
|
|
58
|
+
l()
|
|
59
59
|
], a.prototype, "key");
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
d([
|
|
61
|
+
l()
|
|
62
62
|
], a.prototype, "data");
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
d([
|
|
64
|
+
l()
|
|
65
65
|
], a.prototype, "imports");
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
d([
|
|
67
|
+
l()
|
|
68
68
|
], a.prototype, "shadowRootMode");
|
|
69
|
-
|
|
69
|
+
const h = "twilight-skeleton-styles", S = ["min-height", "height", "width", "aspect-ratio"];
|
|
70
|
+
class u extends HTMLElement {
|
|
70
71
|
connectedCallback() {
|
|
71
72
|
var t;
|
|
72
73
|
let e = (t = this.getAttribute("component-name")) == null ? void 0 : t.replace(/^salla-/, "");
|
|
73
74
|
if (!e)
|
|
74
75
|
return Salla.error("Component name is required", this), Promise.resolve();
|
|
75
|
-
this.
|
|
76
|
+
this.renderSkeleton(e), Salla.bundles.renderCustomComponentDom(`salla-${e}`, this);
|
|
77
|
+
}
|
|
78
|
+
renderSkeleton(e) {
|
|
79
|
+
var i;
|
|
80
|
+
if (this.dataset.skeletonRendered === "true" || (this.dataset.skeletonRendered = "true", this.hasMeaningfulChildren()) || (i = Salla.bundles) != null && i.isRegistered(`salla-${e}`)) return;
|
|
81
|
+
u.ensureSkeletonStyles();
|
|
82
|
+
const t = document.createElement("div");
|
|
83
|
+
t.className = "twilight-skeleton", t.setAttribute("part", "skeleton"), t.setAttribute("aria-hidden", "true");
|
|
84
|
+
let n = !1;
|
|
85
|
+
S.forEach((s) => {
|
|
86
|
+
const o = this.getAttribute(s);
|
|
87
|
+
o && (t.style.setProperty(s, o), n = !0);
|
|
88
|
+
}), n || (t.style.minHeight = "1.5em"), this.replaceChildren(t);
|
|
89
|
+
}
|
|
90
|
+
hasMeaningfulChildren() {
|
|
91
|
+
for (const e of Array.from(this.childNodes))
|
|
92
|
+
if (e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && (e.nodeValue || "").trim().length > 0) return !0;
|
|
93
|
+
return !1;
|
|
94
|
+
}
|
|
95
|
+
static ensureSkeletonStyles() {
|
|
96
|
+
if (document.getElementById(h)) return;
|
|
97
|
+
const e = document.createElement("style");
|
|
98
|
+
e.id = h, e.textContent = `
|
|
99
|
+
.twilight-skeleton {
|
|
100
|
+
display: block;
|
|
101
|
+
width: 100%;
|
|
102
|
+
background: linear-gradient(90deg, #eeeeee 0%, #f5f5f5 50%, #eeeeee 100%);
|
|
103
|
+
background-size: 200% 100%;
|
|
104
|
+
animation: twilight-skeleton-shimmer 1.4s ease-in-out infinite;
|
|
105
|
+
border-radius: 4px;
|
|
106
|
+
}
|
|
107
|
+
@keyframes twilight-skeleton-shimmer {
|
|
108
|
+
0% { background-position: 200% 0; }
|
|
109
|
+
100% { background-position: -200% 0; }
|
|
110
|
+
}
|
|
111
|
+
@media (prefers-reduced-motion: reduce) {
|
|
112
|
+
.twilight-skeleton { animation: none; }
|
|
113
|
+
}
|
|
114
|
+
`, document.head.appendChild(e);
|
|
76
115
|
}
|
|
77
116
|
}
|
|
78
|
-
class
|
|
117
|
+
class w {
|
|
79
118
|
constructor() {
|
|
80
119
|
this.components = /* @__PURE__ */ new Map(), this.pendingComponents = [], this.initialized = !1, Salla.onReady().then(() => {
|
|
81
120
|
if (Salla.bundles) {
|
|
@@ -116,14 +155,14 @@ class f {
|
|
|
116
155
|
if (n)
|
|
117
156
|
return this.renderDynamicCustomComponentDom(n.dynamicTagName, t);
|
|
118
157
|
this.pendingComponents.push({ tagName: e, component: t });
|
|
119
|
-
const
|
|
120
|
-
if (
|
|
121
|
-
this.injectBundleScript(
|
|
158
|
+
const i = t.getAttribute("version"), s = t.getAttribute("assets");
|
|
159
|
+
if (s) {
|
|
160
|
+
this.injectBundleScript(s.split(",").map((p) => this.appendVersion(p, i)));
|
|
122
161
|
return;
|
|
123
162
|
}
|
|
124
|
-
const
|
|
125
|
-
if (
|
|
126
|
-
this.injectBundleScript([this.appendVersion(this.getAssetForComponent(
|
|
163
|
+
const o = t.getAttribute("bundle-id");
|
|
164
|
+
if (o) {
|
|
165
|
+
this.injectBundleScript([this.appendVersion(this.getAssetForComponent(o, e.replace(/^salla-/, "")), i)]);
|
|
127
166
|
return;
|
|
128
167
|
}
|
|
129
168
|
}
|
|
@@ -133,12 +172,20 @@ class f {
|
|
|
133
172
|
return `${e}${n}ver=${t}`;
|
|
134
173
|
}
|
|
135
174
|
getAssetForComponent(e, t) {
|
|
136
|
-
var n,
|
|
137
|
-
return (
|
|
175
|
+
var n, i;
|
|
176
|
+
return (i = (n = Salla.config.get("theme.bundle_assets", "https://cdn.assets.salla.network/themes/:bundle/latest/:component.js")) == null ? void 0 : n.replace(":bundle", e)) == null ? void 0 : i.replace(":component", t);
|
|
138
177
|
}
|
|
139
178
|
renderDynamicCustomComponentDom(e, t) {
|
|
140
179
|
const n = document.createElement(e);
|
|
141
|
-
Array.from(t.attributes).forEach((
|
|
180
|
+
Array.from(t.attributes).forEach((i) => n.setAttribute(i.name, i.value || "")), ["min-height", "height", "width", "aspect-ratio"].forEach((i) => {
|
|
181
|
+
const s = t.getAttribute(i);
|
|
182
|
+
s && n.style.setProperty(i, s);
|
|
183
|
+
}), t.before(n), t.remove(), requestAnimationFrame(() => requestAnimationFrame(() => {
|
|
184
|
+
n.style.removeProperty("min-height"), n.style.removeProperty("aspect-ratio");
|
|
185
|
+
}));
|
|
186
|
+
}
|
|
187
|
+
isRegistered(e) {
|
|
188
|
+
return this.components.has(e);
|
|
142
189
|
}
|
|
143
190
|
registerComponent(e, t) {
|
|
144
191
|
if (this.components.has(e))
|
|
@@ -150,10 +197,10 @@ class f {
|
|
|
150
197
|
if (window.customElements.get(t.dynamicTagName))
|
|
151
198
|
return console.warn(`Component ${t.dynamicTagName} is already registered into the window custom elements. Skipping.`);
|
|
152
199
|
window.customElements.define(t.dynamicTagName, t.component), this.components.set(e, t), Salla.log("Component registered:", t.dynamicTagName);
|
|
153
|
-
const n = this.pendingComponents.filter((
|
|
154
|
-
n.length && (n.forEach((
|
|
155
|
-
this.renderDynamicCustomComponentDom(t.dynamicTagName,
|
|
156
|
-
}), this.pendingComponents = this.pendingComponents.filter((
|
|
200
|
+
const n = this.pendingComponents.filter((i) => i.tagName === e);
|
|
201
|
+
n.length && (n.forEach((i) => {
|
|
202
|
+
this.renderDynamicCustomComponentDom(t.dynamicTagName, i.component);
|
|
203
|
+
}), this.pendingComponents = this.pendingComponents.filter((i) => i.tagName !== e), Salla.log("Pending Components rendered:", e, t.dynamicTagName));
|
|
157
204
|
}
|
|
158
205
|
renderSharedAssests(...e) {
|
|
159
206
|
const t = {
|
|
@@ -162,7 +209,7 @@ class f {
|
|
|
162
209
|
return e.map((n) => t[n] || "").join("");
|
|
163
210
|
}
|
|
164
211
|
}
|
|
165
|
-
|
|
212
|
+
r.makeSureSallaIsReady().then(() => new w()).then(() => window.customElements.get("salla-custom-component") || window.customElements.define("salla-custom-component", u));
|
|
166
213
|
export {
|
|
167
214
|
a as SallaComponent
|
|
168
215
|
};
|
package/package.json
CHANGED