@salla.sa/twilight-bundles 0.1.38 → 0.1.40

package/dist/twilight-bundles.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("lit"),l=require("lit/decorators.js");class i{static onBundlesReady(){return i.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"),s=JSON.parse((e==null?void 0:e.getAttribute("config"))||"false");return t||s||n?(n=n||"1510890315",s=s||await i.getStoreSettings(n),Salla.init(s||{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(i.initializeSalla()):new Promise((e,t)=>{let n;const s=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(s),e(i.initializeSalla()))},50)})}}var p=Object.defineProperty,d=(r,e,t,n)=>{for(var s=void 0,a=r.length-1,c;a>=0;a--)(c=r[a])&&(s=c(e,t,s)||s);return s&&p(e,t,s),s};const m=class m extends u.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 i.onBundlesReady().then(()=>Salla.bundles.registerComponent(e,t))}};m.styles=u.css`:host { display: block; }`;let o=m;d([l.property()],o.prototype,"key");d([l.property()],o.prototype,"data");d([l.property()],o.prototype,"imports");d([l.property()],o.prototype,"shadowRootMode");class g 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.innerHTML=`<!-- Loading ${e} -->`,this.removeAttribute("component-name"),Salla.bundles.renderCustomComponentDom(`salla-${e}`,this)}}class h{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 s=t.getAttribute("assets");if(s)return this.injectBundleScript(s.split(","));const a=t.getAttribute("bundle-id");if(a)return this.injectBundleScript([this.getAssetForComponent(a,e.replace(/^salla-/,""))])}getAssetForComponent(e,t){var n,s;return(s=(n=Salla.config.get("theme.bundle_assets"))==null?void 0:n.replace(":bundle",e))==null?void 0:s.replace(":component",t)}renderDynamicCustomComponentDom(e,t){const n=document.createElement(e);Array.from(t.attributes).forEach(s=>n.setAttribute(s.name,s.value||"")),t.before(n),t.remove()}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(s=>s.tagName===e);n.length&&(n.forEach(s=>{this.renderDynamicCustomComponentDom(t.dynamicTagName,s.component)}),this.pendingComponents=this.pendingComponents.filter(s=>s.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("")}}i.makeSureSallaIsReady().then(()=>new h).then(()=>window.customElements.get("salla-custom-component")||window.customElements.define("salla-custom-component",g));exports.SallaComponent=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("lit"),d=require("lit/decorators.js");class i{static onBundlesReady(){return i.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"),s=JSON.parse((e==null?void 0:e.getAttribute("config"))||"false");return t||s||n?(n=n||"1510890315",s=s||await i.getStoreSettings(n),Salla.init(s||{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(i.initializeSalla()):new Promise((e,t)=>{let n;const s=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(s),e(i.initializeSalla()))},50)})}}var h=Object.defineProperty,m=(l,e,t,n)=>{for(var s=void 0,a=l.length-1,r;a>=0;a--)(r=l[a])&&(s=r(e,t,s)||s);return s&&h(e,t,s),s};const c=class c extends u.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 i.onBundlesReady().then(()=>Salla.bundles.registerComponent(e,t))}};c.styles=u.css`:host { display: block; }`;let o=c;m([d.property()],o.prototype,"key");m([d.property()],o.prototype,"data");m([d.property()],o.prototype,"imports");m([d.property()],o.prototype,"shadowRootMode");class g 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.innerHTML=`<!-- Loading ${e} -->`,this.removeAttribute("component-name"),Salla.bundles.renderCustomComponentDom(`salla-${e}`,this)}}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 s=t.getAttribute("version"),a=t.getAttribute("assets");if(a){this.injectBundleScript(a.split(",").map(p=>this.appendVersion(p,s)));return}const r=t.getAttribute("bundle-id");if(r){this.injectBundleScript([this.appendVersion(this.getAssetForComponent(r,e.replace(/^salla-/,"")),s)]);return}}appendVersion(e,t){if(!t)return e;const n=e.includes("?")?"&":"?";return`${e}${n}ver=${t}`}getAssetForComponent(e,t){var n,s;return(s=(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:s.replace(":component",t)}renderDynamicCustomComponentDom(e,t){const n=document.createElement(e);Array.from(t.attributes).forEach(s=>n.setAttribute(s.name,s.value||"")),t.before(n),t.remove()}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(s=>s.tagName===e);n.length&&(n.forEach(s=>{this.renderDynamicCustomComponentDom(t.dynamicTagName,s.component)}),this.pendingComponents=this.pendingComponents.filter(s=>s.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("")}}i.makeSureSallaIsReady().then(()=>new S).then(()=>window.customElements.get("salla-custom-component")||window.customElements.define("salla-custom-component",g));exports.SallaComponent=o;

package/dist/twilight-bundles.js

@@ -1,5 +1,5 @@
-import { LitElement as u, css as p } from "lit";
-import { property as l } from "lit/decorators.js";
+import { LitElement as p, css as h } from "lit";
+import { property as d } from "lit/decorators.js";
 class i {
   static onBundlesReady() {
     return i.makeSureSallaIsReady().then(() => Salla.event.onlyWhen("twilight-bundles::initiated")).then(() => Salla.lang.onLoaded());
@@ -32,12 +32,12 @@ class i {
     });
   }
 }
-var h = Object.defineProperty, d = (r, e, t, n) => {
-  for (var s = void 0, o = r.length - 1, c; o >= 0; o--)
-    (c = r[o]) && (s = c(e, t, s) || s);
-  return s && h(e, t, s), s;
+var g = Object.defineProperty, m = (l, e, t, n) => {
+  for (var s = void 0, o = l.length - 1, r; o >= 0; o--)
+    (r = l[o]) && (s = r(e, t, s) || s);
+  return s && g(e, t, s), s;
 };
-const m = class m extends u {
+const c = class c extends p {
   constructor() {
     super(...arguments), this.key = "", this.data = {}, this.imports = {}, this.shadowRootMode = "open";
   }
@@ -52,21 +52,21 @@ const m = class m extends u {
     return i.onBundlesReady().then(() => Salla.bundles.registerComponent(e, t));
   }
 };
-m.styles = p`:host { display: block; }`;
-let a = m;
-d([
-  l()
+c.styles = h`:host { display: block; }`;
+let a = c;
+m([
+  d()
 ], a.prototype, "key");
-d([
-  l()
+m([
+  d()
 ], a.prototype, "data");
-d([
-  l()
+m([
+  d()
 ], a.prototype, "imports");
-d([
-  l()
+m([
+  d()
 ], a.prototype, "shadowRootMode");
-class g extends HTMLElement {
+class S extends HTMLElement {
   connectedCallback() {
     var t;
     let e = (t = this.getAttribute("component-name")) == null ? void 0 : t.replace(/^salla-/, "");
@@ -75,7 +75,7 @@ class g extends HTMLElement {
     this.innerHTML = `<!-- Loading ${e} -->`, this.removeAttribute("component-name"), Salla.bundles.renderCustomComponentDom(`salla-${e}`, this);
   }
 }
-class S {
+class f {
   constructor() {
     this.components = /* @__PURE__ */ new Map(), this.pendingComponents = [], this.initialized = !1, Salla.onReady().then(() => {
       if (Salla.bundles) {
@@ -116,16 +116,25 @@ class S {
     if (n)
       return this.renderDynamicCustomComponentDom(n.dynamicTagName, t);
     this.pendingComponents.push({ tagName: e, component: t });
-    const s = t.getAttribute("assets");
-    if (s)
-      return this.injectBundleScript(s.split(","));
-    const o = t.getAttribute("bundle-id");
-    if (o)
-      return this.injectBundleScript([this.getAssetForComponent(o, e.replace(/^salla-/, ""))]);
+    const s = t.getAttribute("version"), o = t.getAttribute("assets");
+    if (o) {
+      this.injectBundleScript(o.split(",").map((u) => this.appendVersion(u, s)));
+      return;
+    }
+    const r = t.getAttribute("bundle-id");
+    if (r) {
+      this.injectBundleScript([this.appendVersion(this.getAssetForComponent(r, e.replace(/^salla-/, "")), s)]);
+      return;
+    }
+  }
+  appendVersion(e, t) {
+    if (!t) return e;
+    const n = e.includes("?") ? "&" : "?";
+    return `${e}${n}ver=${t}`;
   }
   getAssetForComponent(e, t) {
     var n, s;
-    return (s = (n = Salla.config.get("theme.bundle_assets")) == null ? void 0 : n.replace(":bundle", e)) == null ? void 0 : s.replace(":component", t);
+    return (s = (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 : s.replace(":component", t);
   }
   renderDynamicCustomComponentDom(e, t) {
     const n = document.createElement(e);
@@ -153,7 +162,7 @@ class S {
     return e.map((n) => t[n] || "").join("");
   }
 }
-i.makeSureSallaIsReady().then(() => new S()).then(() => window.customElements.get("salla-custom-component") || window.customElements.define("salla-custom-component", g));
+i.makeSureSallaIsReady().then(() => new f()).then(() => window.customElements.get("salla-custom-component") || window.customElements.define("salla-custom-component", S));
 export {
   a as SallaComponent
 };

package/dist/vite-plugins/demo.cjs

@@ -47,6 +47,14 @@
     <\/script>
     <link rel="icon" type="image/png" media="(prefers-color-scheme: light)" href="https://cdn.salla.network/images/logo/logo-square.png" />
     <link rel="icon" type="image/png" media="(prefers-color-scheme: dark)" href="https://cdn.salla.network/images/logo/logo-light-square.png" />
+    <script type="importmap">
+    {
+        "imports": {
+            "lit": "https://esm.run/lit",
+            "lit/": "https://esm.run/lit/"
+        }
+    }
+    <\/script>
     <script type="module" src="https://cdn.salla.network/js/twilight/latest/twilight.esm.js" async><\/script>
     <script type="module" src="${x}" demo-mode defer><\/script>
     <link rel="stylesheet" href="https://cdn.salla.network/fonts/pingarlt.css">

package/dist/vite-plugins/demo.js

@@ -80,6 +80,14 @@ function _(e, t) {
     <\/script>
     <link rel="icon" type="image/png" media="(prefers-color-scheme: light)" href="https://cdn.salla.network/images/logo/logo-square.png" />
     <link rel="icon" type="image/png" media="(prefers-color-scheme: dark)" href="https://cdn.salla.network/images/logo/logo-light-square.png" />
+    <script type="importmap">
+    {
+        "imports": {
+            "lit": "https://esm.run/lit",
+            "lit/": "https://esm.run/lit/"
+        }
+    }
+    <\/script>
     <script type="module" src="https://cdn.salla.network/js/twilight/latest/twilight.esm.js" async><\/script>
     <script type="module" src="${$}" demo-mode defer><\/script>
     <link rel="stylesheet" href="https://cdn.salla.network/fonts/pingarlt.css">
@@ -170,11 +178,11 @@ function L(e = {}) {
       let C = e.components ? Object.fromEntries(
         Object.entries(s).filter(([n]) => e.components.includes(n))
       ) : s;
-      const p = ".salla-temp", o = a.resolve(r.root, "node_modules", p), d = x(), k = Object.entries(C).map(function([n, l]) {
-        const T = `/@fs${l}`, v = d.components.find((m) => m.name === n), j = R(v), D = d.components.findIndex((m) => m.name === n);
-        return { name: n, path: l, url: T, schema: j, rawComponent: v, order: D };
-      }).sort((n, l) => n.order - l.order);
-      i.existsSync(o) || i.mkdirSync(o, { recursive: !0 }), t = a.resolve(o, "index.html"), i.writeFileSync(t, _(k, {
+      const p = ".salla-temp", l = a.resolve(r.root, "node_modules", p), d = x(), k = Object.entries(C).map(function([n, o]) {
+        const T = `/@fs${o}`, v = d.components.find((m) => m.name === n), j = R(v), D = d.components.findIndex((m) => m.name === n);
+        return { name: n, path: o, url: T, schema: j, rawComponent: v, order: D };
+      }).sort((n, o) => n.order - o.order);
+      i.existsSync(l) || i.mkdirSync(l, { recursive: !0 }), t = a.resolve(l, "index.html"), i.writeFileSync(t, _(k, {
         grid: {
           columns: ((f = e.grid) == null ? void 0 : f.columns) || "repeat(1, 1fr)",
           gap: ((h = e.grid) == null ? void 0 : h.gap) || "1rem",
@@ -191,7 +199,7 @@ function L(e = {}) {
       const c = () => {
         b(t);
         try {
-          i.rmdirSync(o);
+          i.rmdirSync(l);
         } catch {
         }
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-bundles",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "description": "SDK for Salla Twilight Bundles - Develop and build custom components for Salla platform",
   "type": "module",
   "main": "./dist/twilight-bundles.js",