@xosen/site-sdk 0.0.15 → 0.0.16

package/dist/index.js

@@ -1,28 +1,28 @@
-import { ref as v, onMounted as S, watch as _, computed as u, onUnmounted as N, reactive as L, provide as P } from "vue";
+import { ref as v, onMounted as S, watch as _, computed as f, onUnmounted as N, reactive as L, provide as P } from "vue";
 import { useI18n as T } from "vue-i18n";
 import { useRoute as I } from "vue-router";
 function Z(o, a) {
   const t = v(null), { locale: e } = T(), s = window.__SITE_DATA__, n = s?.locale;
-  function r() {
+  function i() {
     return s && s[o] && e.value === n ? (t.value = s[o], !0) : !1;
   }
-  async function i() {
+  async function l() {
     try {
-      const c = await fetch(`/api/content/${a}:${e.value}`);
-      c.ok && (t.value = await c.json());
+      const r = await fetch(`/api/content/${a}:${e.value}`);
+      r.ok && (t.value = await r.json());
     } catch {
     }
   }
   return S(() => {
-    r() || i();
+    i() || l();
   }), _(e, () => {
-    i();
+    l();
   }), t;
 }
 function q() {
-  const o = window.__SITE_DATA__, a = u(() => o?.config || null), t = u(() => o?.components || {}), e = u(() => a.value?.navigation || []), s = u(() => a.value?.locales || []), n = u(() => a.value?.defaultLocale || "en"), r = u(() => a.value?.branding || {}), i = u(() => a.value?.footer || {}), c = u(() => a.value?.features || {});
-  function p(m) {
-    const g = c.value[m];
+  const o = window.__SITE_DATA__, a = f(() => o?.config || null), t = f(() => o?.components || {}), e = f(() => a.value?.navigation || []), s = f(() => a.value?.locales || []), n = f(() => a.value?.defaultLocale || "en"), i = f(() => a.value?.branding || {}), l = f(() => a.value?.footer || {}), r = f(() => a.value?.features || {});
+  function u(m) {
+    const g = r.value[m];
     return typeof g == "boolean" ? g : typeof g == "object";
   }
   return {
@@ -31,10 +31,10 @@ function q() {
     navigation: e,
     locales: s,
     defaultLocale: n,
-    branding: r,
-    footer: i,
-    features: c,
-    hasFeature: p
+    branding: i,
+    footer: l,
+    features: r,
+    hasFeature: u
   };
 }
 function H(o) {
@@ -64,10 +64,10 @@ function D(o) {
 function Q() {
   const a = window.__SITE_DATA__?.apiBase || "";
   async function t(n) {
-    const r = await fetch(`${a}${n}`);
-    if (!r.ok)
-      throw new Error(`API error: ${r.status}`);
-    return r.json();
+    const i = await fetch(`${a}${n}`);
+    if (!i.ok)
+      throw new Error(`API error: ${i.status}`);
+    return i.json();
   }
   async function e() {
     return t("/v1/billing/tariffs");
@@ -116,101 +116,106 @@ function j() {
 }
 j();
 function ee(o) {
-  const { locale: a } = T(), { previewPage: t, isPreviewMode: e } = C(), s = window.__SITE_DATA__, n = v(null), r = v(!0), i = v(!1), c = u(() => typeof o == "string" ? o : o.value), p = u(() => `page:${c.value}`), m = u(() => {
-    const l = e.value ? t.value : n.value;
-    if (!l) return {};
-    const { blocks: f, meta: d, slug: W, locale: J, ...E } = l;
+  const { locale: a } = T(), { previewPage: t, isPreviewMode: e } = C(), s = window.__SITE_DATA__, n = v(null), i = v(!0), l = v(!1), r = f(() => typeof o == "string" ? o : o.value), u = f(() => `page:${r.value}`), m = f(() => {
+    const c = e.value ? t.value : n.value;
+    if (!c) return {};
+    const { blocks: p, meta: d, slug: W, locale: J, ...E } = c;
     return E;
   });
   P(R, m);
-  const g = u(() => e.value && t.value?.slug === c.value ? t.value.blocks || [] : n.value?.blocks || []);
-  function b(l) {
-    n.value = l, l && (k[p.value] = l);
+  const g = f(() => e.value && t.value?.slug === r.value ? t.value.blocks || [] : n.value?.blocks || []);
+  function b(c) {
+    n.value = c, c && (k[u.value] = c);
   }
   function y() {
-    const l = s?.[p.value];
-    return l && a.value === s?.locale ? (b(l), i.value = !1, w(), !0) : !1;
+    const c = s?.[u.value];
+    return c && a.value === s?.locale ? (b(c), l.value = !1, w(), !0) : !1;
   }
   async function h() {
-    r.value = !0, i.value = !1;
+    i.value = !0, l.value = !1;
     try {
-      const l = await fetch(`/api/content/${p.value}:${a.value}`);
-      l.ok ? (b(await l.json()), w()) : (b(null), i.value = !0);
+      const c = await fetch(`/api/content/${u.value}:${a.value}`);
+      c.ok ? (b(await c.json()), w()) : (b(null), l.value = !0);
     } catch {
-      b(null), i.value = !0;
+      b(null), l.value = !0;
     } finally {
-      r.value = !1;
+      i.value = !1;
     }
   }
   function w() {
     if (!n.value) return;
     if (n.value.title) {
-      const f = s?.config?.branding, d = f?.siteName ? ` — ${f.siteName}` : "";
+      const p = s?.config?.branding, d = p?.siteName ? ` — ${p.siteName}` : "";
       document.title = `${n.value.title}${d}`;
     }
-    const l = n.value.meta?.description;
-    if (l) {
-      const f = document.querySelector('meta[name="description"]');
-      f && f.setAttribute("content", l);
+    const c = n.value.meta?.description;
+    if (c) {
+      const p = document.querySelector('meta[name="description"]');
+      p && p.setAttribute("content", c);
     }
   }
-  return _(t, (l) => {
-    l?.slug === c.value && (r.value = !1, i.value = !1, (l.title || l.blocks) && (n.value = {
+  return _(t, (c) => {
+    c?.slug === r.value && (i.value = !1, l.value = !1, (c.title || c.blocks) && (n.value = {
       ...n.value || {},
-      ...l.title ? { title: l.title } : {},
-      ...l.blocks ? { blocks: l.blocks } : {}
+      ...c.title ? { title: c.title } : {},
+      ...c.blocks ? { blocks: c.blocks } : {}
     }, w()));
   }), S(() => {
-    y() ? r.value = !1 : h();
-  }), _(a, () => h()), _(c, () => {
-    y() ? r.value = !1 : h();
+    y() ? i.value = !1 : h();
+  }), _(a, () => h()), _(r, () => {
+    y() ? i.value = !1 : h();
   }), {
     page: n,
     blocks: g,
     pageContext: m,
-    loading: r,
-    notFound: i,
+    loading: i,
+    notFound: l,
     isPreviewMode: e,
     reload: h
   };
 }
 function te() {
   const { locale: o } = T(), a = window.__SITE_DATA__, t = a?.locale, e = v({ ...a?.components || {} });
-  async function s(r) {
-    if (!$()) {
+  let s = t, n = null;
+  async function i(r) {
+    if (!$() && r !== s) {
       if (r === t) {
-        e.value = { ...a?.components || {} };
+        e.value = { ...a?.components || {} }, s = r;
         return;
       }
-      try {
-        const i = await fetch(`/api/content/components:${r}`);
-        i.ok && (e.value = await i.json());
-      } catch {
-      }
+      n || (n = (async () => {
+        try {
+          const u = await fetch(`/api/content/components:${r}`);
+          u.ok && (e.value = await u.json(), s = r);
+        } catch {
+        } finally {
+          n = null;
+        }
+      })(), await n);
     }
   }
-  _(o, (r) => s(r)), S(() => {
-    o.value !== t && s(o.value);
+  _(o, (r) => i(r)), S(() => {
+    o.value !== t && i(o.value);
   });
-  function n(r) {
-    return u(() => e.value[r] || null);
+  function l(r) {
+    return f(() => e.value[r] || null);
   }
   return {
     /** All components (reactive, locale-aware) */
     components: e,
     /** Get a single component by key */
-    getComponent: n,
+    getComponent: l,
     /** Force refetch for current locale */
-    reload: () => s(o.value)
+    reload: () => i(o.value)
   };
 }
 function ae() {
-  const { locale: o } = T(), a = window.__SITE_DATA__, t = u(() => a?.config?.locales || []), e = u(() => a?.config?.defaultLocale || "en"), s = u(() => t.value.length > 1);
-  function n(i) {
-    o.value = i, localStorage.setItem("x-site-locale", i);
+  const { locale: o } = T(), a = window.__SITE_DATA__, t = f(() => a?.config?.locales || []), e = f(() => a?.config?.defaultLocale || "en"), s = f(() => t.value.length > 1);
+  function n(l) {
+    o.value = l, localStorage.setItem("x-site-locale", l);
   }
-  function r(i) {
-    return typeof i == "string" ? i : i[o.value] || i[e.value] || Object.values(i)[0] || "";
+  function i(l) {
+    return typeof l == "string" ? l : l[o.value] || l[e.value] || Object.values(l)[0] || "";
   }
   return {
     locale: o,
@@ -218,7 +223,7 @@ function ae() {
     defaultLocale: e,
     hasMultipleLocales: s,
     switchLocale: n,
-    resolveText: r
+    resolveText: i
   };
 }
 const O = {
@@ -267,32 +272,32 @@ function G(o, a) {
   for (const s of ["sm", "md", "lg", "xl"]) {
     const n = e[s];
     if (!n) continue;
-    const r = x(n, a);
-    r && t.push(`@media (min-width: ${O[s]}px) { ${r} }`);
+    const i = x(n, a);
+    i && t.push(`@media (min-width: ${O[s]}px) { ${i} }`);
   }
   return t.join(`
 `);
 }
 function oe() {
-  const o = I(), { previewPage: a, isPreviewMode: t } = C(), e = window.__SITE_DATA__, s = `dl-${Math.random().toString(36).slice(2, 8)}`, n = u(() => ["dynamic-layout", s]), r = u(() => {
+  const o = I(), { previewPage: a, isPreviewMode: t } = C(), e = window.__SITE_DATA__, s = `dl-${Math.random().toString(36).slice(2, 8)}`, n = f(() => ["dynamic-layout", s]), i = f(() => {
     if (o.path === "/_preview_")
       return a.value?.layout || "landing";
     if (t.value && a.value?.layout)
       return a.value.layout;
-    const p = o.path === "/" ? "page:home" : `page:${o.params.slug || ""}`;
-    return (k[p] || e?.[p])?.layout || "default";
-  }), i = u(() => {
-    const p = e?.config?.layouts;
-    if (p) {
-      const m = p[r.value] || p.default;
+    const u = o.path === "/" ? "page:home" : `page:${o.params.slug || ""}`;
+    return (k[u] || e?.[u])?.layout || "default";
+  }), l = f(() => {
+    const u = e?.config?.layouts;
+    if (u) {
+      const m = u[i.value] || u.default;
       if (m?.zones) return m;
     }
-    return r.value === "landing" ? F : z;
-  }), c = u(() => G(i.value, `.${s}`));
+    return i.value === "landing" ? F : z;
+  }), r = f(() => G(l.value, `.${s}`));
   return {
-    layoutName: r,
-    layoutConfig: i,
-    layoutCSS: c,
+    layoutName: i,
+    layoutConfig: l,
+    layoutCSS: r,
     layoutClass: n
   };
 }
@@ -453,39 +458,39 @@ function re(o) {
       if (s) return s;
       if (M.test(e.pathname))
         return t.ASSETS.fetch(a);
-      const n = U(a, o), r = new URL("/index.html", a.url);
-      let c = await (await t.ASSETS.fetch(new Request(r))).text();
-      const p = o.defaultLocale, [m, g] = await Promise.all([
+      const n = U(a, o), i = new URL("/index.html", a.url);
+      let r = await (await t.ASSETS.fetch(new Request(i))).text();
+      const u = o.defaultLocale, [m, g] = await Promise.all([
         t.SITE_CONTENT.get("config"),
         t.SITE_CONTENT.get(`content:${n}`)
       ]), b = m ? JSON.parse(m) : {};
       let y = g ? JSON.parse(g) : {};
-      if (!g && n !== p) {
-        const f = await t.SITE_CONTENT.get(`content:${p}`);
-        f && (y = JSON.parse(f));
+      if (!g && n !== u) {
+        const p = await t.SITE_CONTENT.get(`content:${u}`);
+        p && (y = JSON.parse(p));
       }
       const h = e.pathname.match(/^\/p\/(.+)$/);
       if (h) {
-        const f = h[1];
-        if (!y[f]) {
-          let d = await t.SITE_CONTENT.get(`page:${f}:${n}`);
-          !d && n !== p && (d = await t.SITE_CONTENT.get(`page:${f}:${p}`)), d && (y[f] = JSON.parse(d));
+        const p = h[1];
+        if (!y[p]) {
+          let d = await t.SITE_CONTENT.get(`page:${p}:${n}`);
+          !d && n !== u && (d = await t.SITE_CONTENT.get(`page:${p}:${u}`)), d && (y[p] = JSON.parse(d));
         }
       }
       const w = {
         locale: n,
         config: b
       };
-      for (const [f, d] of Object.entries(y))
-        w[`page:${f}`] = d;
+      for (const [p, d] of Object.entries(y))
+        w[`page:${p}`] = d;
       if (h) {
-        const f = h[1], d = w[`page:${f}`];
-        d && (c = A(c, d, o.siteName));
+        const p = h[1], d = w[`page:${p}`];
+        d && (r = A(r, d, o.siteName));
       }
-      e.pathname === "/" && y.home && (c = A(c, y.home, o.siteName));
-      const l = `<script>window.__SITE_DATA__ = ${JSON.stringify(w)};<\/script>`;
-      return c = c.replace("</head>", `${l}
-</head>`), new Response(c, {
+      e.pathname === "/" && y.home && (r = A(r, y.home, o.siteName));
+      const c = `<script>window.__SITE_DATA__ = ${JSON.stringify(w)};<\/script>`;
+      return r = r.replace("</head>", `${c}
+</head>`), new Response(r, {
         headers: {
           "Content-Type": "text/html;charset=utf-8",
           "Cache-Control": "public, max-age=60"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xosen/site-sdk",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Shared Vue components and composables for Xosen site templates",
   "type": "module",
   "main": "./dist/index.js",

package/src/composables/useSiteComponents.ts

@@ -16,24 +16,41 @@ export function useSiteComponents() {
   const initialLocale = siteData?.locale;
 
   const components = ref<Record<string, any>>({ ...((siteData as any)?.components || {}) });
+  let lastFetchedLocale: string | undefined = initialLocale;
+  let fetchPromise: Promise<void> | null = null;
 
   async function fetchComponents(loc: string) {
     // Skip fetching in preview mode — components come via postMessage
     if (isInPreview()) return;
 
+    // Skip if already fetched/loaded for this locale
+    if (loc === lastFetchedLocale) return;
+
     // If same as initial locale, use preloaded data
     if (loc === initialLocale) {
       components.value = { ...((siteData as any)?.components || {}) };
+      lastFetchedLocale = loc;
       return;
     }
-    try {
-      const res = await fetch(`/api/content/components:${loc}`);
-      if (res.ok) {
-        components.value = await res.json();
+
+    // Deduplicate concurrent fetches
+    if (fetchPromise) return;
+
+    fetchPromise = (async () => {
+      try {
+        const res = await fetch(`/api/content/components:${loc}`);
+        if (res.ok) {
+          components.value = await res.json();
+          lastFetchedLocale = loc;
+        }
+      } catch {
+        // Keep current
+      } finally {
+        fetchPromise = null;
       }
-    } catch {
-      // Keep current
-    }
+    })();
+
+    await fetchPromise;
   }
 
   watch(locale, (newLocale) => fetchComponents(newLocale));