@xosen/site-sdk 0.0.10 → 0.0.11

package/dist/composables/useLocaleSwitcher.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Locale switcher composable.
+ * Manages locale state, available locales, and persistence.
+ */
+export declare function useLocaleSwitcher(): {
+    locale: import("vue").WritableComputedRef<string, string>;
+    locales: import("vue").ComputedRef<string[]>;
+    defaultLocale: import("vue").ComputedRef<string>;
+    hasMultipleLocales: import("vue").ComputedRef<boolean>;
+    switchLocale: (loc: string) => void;
+    resolveText: (text: string | Record<string, string>) => string;
+};

package/dist/composables/useSiteComponents.d.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'vue';
+/**
+ * Locale-aware access to site components (navigation, footer, sidebar, etc.).
+ *
+ * On initial load, reads from preloaded __SITE_DATA__.components.
+ * When locale changes, fetches updated components from the API.
+ */
+export declare function useSiteComponents(): {
+    /** All components (reactive, locale-aware) */
+    components: Ref<Record<string, any>, Record<string, any>>;
+    /** Get a single component by key */
+    getComponent: <T = any>(key: string) => Ref<T | null>;
+    /** Force refetch for current locale */
+    reload: () => Promise<void>;
+};

package/dist/index.d.ts

@@ -5,6 +5,8 @@ export { useSiteApi } from './composables/useSiteApi.js';
 export { useLivePreview, setupPreviewRouter, isInPreview } from './composables/useLivePreview.js';
 export { usePageData } from './composables/usePageData.js';
 export type { UsePageDataReturn } from './composables/usePageData.js';
+export { useSiteComponents } from './composables/useSiteComponents.js';
+export { useLocaleSwitcher } from './composables/useLocaleSwitcher.js';
 export type { PreviewMessage } from './composables/useLivePreview.js';
 export { createSiteWorker } from './worker/index.js';
 export type { WorkerEnv, WorkerConfig, PageData } from './worker/index.js';

package/dist/index.js

@@ -1,28 +1,28 @@
-import { ref as y, onMounted as S, watch as _, computed as f, onUnmounted as x, provide as C } from "vue";
-import { useI18n as b } from "vue-i18n";
+import { ref as y, onMounted as T, watch as _, computed as u, onUnmounted as C, provide as L } from "vue";
+import { useI18n as $ } from "vue-i18n";
 function k(o, n) {
-  const t = y(null), { locale: e } = b(), s = window.__SITE_DATA__, a = s?.locale;
+  const t = y(null), { locale: e } = $(), s = window.__SITE_DATA__, a = s?.locale;
   function l() {
     return s && s[o] && e.value === a ? (t.value = s[o], !0) : !1;
   }
-  async function u() {
+  async function i() {
     try {
-      const i = await fetch(`/api/content/${n}:${e.value}`);
-      i.ok && (t.value = await i.json());
+      const c = await fetch(`/api/content/${n}:${e.value}`);
+      c.ok && (t.value = await c.json());
     } catch {
     }
   }
-  return S(() => {
-    l() || u();
+  return T(() => {
+    l() || i();
   }), _(e, () => {
-    u();
+    i();
   }), t;
 }
 function M() {
-  const o = window.__SITE_DATA__, n = f(() => o?.config || null), t = f(() => o?.components || {}), e = f(() => n.value?.navigation || []), s = f(() => n.value?.locales || []), a = f(() => n.value?.defaultLocale || "en"), l = f(() => n.value?.branding || {}), u = f(() => n.value?.footer || {}), i = f(() => n.value?.features || {});
-  function g(w) {
-    const v = i.value[w];
-    return typeof v == "boolean" ? v : typeof v == "object";
+  const o = window.__SITE_DATA__, n = u(() => o?.config || null), t = u(() => o?.components || {}), e = u(() => n.value?.navigation || []), s = u(() => n.value?.locales || []), a = u(() => n.value?.defaultLocale || "en"), l = u(() => n.value?.branding || {}), i = u(() => n.value?.footer || {}), c = u(() => n.value?.features || {});
+  function v(w) {
+    const g = c.value[w];
+    return typeof g == "boolean" ? g : typeof g == "object";
   }
   return {
     config: n,
@@ -31,9 +31,9 @@ function M() {
     locales: s,
     defaultLocale: a,
     branding: l,
-    footer: u,
-    features: i,
-    hasFeature: g
+    footer: i,
+    features: c,
+    hasFeature: v
   };
 }
 function U(o) {
@@ -44,7 +44,7 @@ function U(o) {
         a && e.style.setProperty(`--x-color-${N(s)}`, a);
     t.typography?.fontFamily && e.style.setProperty("--x-font-family", t.typography.fontFamily), t.typography?.headingFont && e.style.setProperty("--x-font-heading", t.typography.headingFont), t.typography?.baseFontSize && e.style.setProperty("--x-font-size", t.typography.baseFontSize), t.shape?.borderRadius && e.style.setProperty("--x-border-radius", t.shape.borderRadius), t.shape?.maxWidth && e.style.setProperty("--x-max-width", t.shape.maxWidth);
   }
-  S(() => {
+  T(() => {
     if (o) {
       n(o);
       return;
@@ -96,73 +96,118 @@ function P() {
     const s = e.data;
     s?.type === "xosen-preview-update" && s.page && (o.value = s.page, n.value = !0);
   }
-  return S(() => {
+  return T(() => {
     window.addEventListener("message", t);
-  }), x(() => {
+  }), C(() => {
     window.removeEventListener("message", t);
   }), {
     previewPage: o,
     isPreviewMode: n
   };
 }
-const I = /* @__PURE__ */ Symbol("pageContext");
+const x = /* @__PURE__ */ Symbol("pageContext");
 function K(o) {
-  const { locale: n } = b(), { previewPage: t, isPreviewMode: e } = P(), s = window.__SITE_DATA__, a = y(null), l = y(!0), u = y(!1), i = f(() => typeof o == "string" ? o : o.value), g = f(() => `page:${i.value}`), w = f(() => {
+  const { locale: n } = $(), { previewPage: t, isPreviewMode: e } = P(), s = window.__SITE_DATA__, a = y(null), l = y(!0), i = y(!1), c = u(() => typeof o == "string" ? o : o.value), v = u(() => `page:${c.value}`), w = u(() => {
     const r = e.value ? t.value : a.value;
     if (!r) return {};
-    const { blocks: m, meta: c, slug: d, locale: j, ...A } = r;
+    const { blocks: h, meta: f, slug: d, locale: O, ...A } = r;
     return A;
   });
-  C(I, w);
-  const v = f(() => e.value && t.value?.slug === i.value ? t.value.blocks || [] : a.value?.blocks || []);
-  function T() {
-    const r = s?.[g.value];
-    return r && n.value === s?.locale ? (a.value = r, u.value = !1, h(), !0) : !1;
+  L(x, w);
+  const g = u(() => e.value && t.value?.slug === c.value ? t.value.blocks || [] : a.value?.blocks || []);
+  function S() {
+    const r = s?.[v.value];
+    return r && n.value === s?.locale ? (a.value = r, i.value = !1, m(), !0) : !1;
   }
   async function p() {
-    l.value = !0, u.value = !1;
+    l.value = !0, i.value = !1;
     try {
-      const r = await fetch(`/api/content/${g.value}:${n.value}`);
-      r.ok ? (a.value = await r.json(), h()) : (a.value = null, u.value = !0);
+      const r = await fetch(`/api/content/${v.value}:${n.value}`);
+      r.ok ? (a.value = await r.json(), m()) : (a.value = null, i.value = !0);
     } catch {
-      a.value = null, u.value = !0;
+      a.value = null, i.value = !0;
     } finally {
       l.value = !1;
     }
   }
-  function h() {
+  function m() {
     if (!a.value) return;
     if (a.value.title) {
-      const m = s?.config?.branding, c = m?.siteName ? ` — ${m.siteName}` : "";
-      document.title = `${a.value.title}${c}`;
+      const h = s?.config?.branding, f = h?.siteName ? ` — ${h.siteName}` : "";
+      document.title = `${a.value.title}${f}`;
     }
     const r = a.value.meta?.description;
     if (r) {
-      const m = document.querySelector('meta[name="description"]');
-      m && m.setAttribute("content", r);
+      const h = document.querySelector('meta[name="description"]');
+      h && h.setAttribute("content", r);
     }
   }
   return _(t, (r) => {
-    r?.slug === i.value && (l.value = !1, u.value = !1, (r.title || r.blocks) && (a.value = {
+    r?.slug === c.value && (l.value = !1, i.value = !1, (r.title || r.blocks) && (a.value = {
       ...a.value || {},
       ...r.title ? { title: r.title } : {},
       ...r.blocks ? { blocks: r.blocks } : {}
-    }, h()));
-  }), S(() => {
-    T() ? l.value = !1 : p();
-  }), _(n, () => p()), _(i, () => {
-    T() ? l.value = !1 : p();
+    }, m()));
+  }), T(() => {
+    S() ? l.value = !1 : p();
+  }), _(n, () => p()), _(c, () => {
+    S() ? l.value = !1 : p();
   }), {
     page: a,
-    blocks: v,
+    blocks: g,
     pageContext: w,
     loading: l,
-    notFound: u,
+    notFound: i,
     isPreviewMode: e,
     reload: p
   };
 }
-const L = /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf|eot|webp|avif|map|json|txt|xml|webmanifest)$/;
+function W() {
+  const { locale: o } = $(), n = window.__SITE_DATA__, t = n?.locale, e = y({ ...n?.components || {} });
+  async function s(l) {
+    if (l === t) {
+      e.value = { ...n?.components || {} };
+      return;
+    }
+    try {
+      const i = await fetch(`/api/content/components:${l}`);
+      i.ok && (e.value = await i.json());
+    } catch {
+    }
+  }
+  _(o, (l) => s(l)), T(() => {
+    o.value !== t && s(o.value);
+  });
+  function a(l) {
+    return u(() => e.value[l] || null);
+  }
+  return {
+    /** All components (reactive, locale-aware) */
+    components: e,
+    /** Get a single component by key */
+    getComponent: a,
+    /** Force refetch for current locale */
+    reload: () => s(o.value)
+  };
+}
+function B() {
+  const { locale: o } = $(), n = window.__SITE_DATA__, t = u(() => n?.config?.locales || []), e = u(() => n?.config?.defaultLocale || "en"), s = u(() => t.value.length > 1);
+  function a(i) {
+    o.value = i, localStorage.setItem("x-site-locale", i);
+  }
+  function l(i) {
+    return typeof i == "string" ? i : i[o.value] || i[e.value] || Object.values(i)[0] || "";
+  }
+  return {
+    locale: o,
+    locales: t,
+    defaultLocale: e,
+    hasMultipleLocales: s,
+    switchLocale: a,
+    resolveText: l
+  };
+}
+const I = /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf|eot|webp|avif|map|json|txt|xml|webmanifest)$/;
 function R(o, n) {
   const e = new URL(o.url).searchParams.get("lang");
   if (e && n.supportedLocales?.includes(e)) return e;
@@ -173,7 +218,7 @@ function R(o, n) {
   }
   return n.defaultLocale;
 }
-function O(o, n, t) {
+function j(o, n, t) {
   if (!o.pathname.startsWith("/api/content/")) return null;
   const e = decodeURIComponent(o.pathname.replace("/api/content/", ""));
   return e ? (async () => {
@@ -191,7 +236,7 @@ function O(o, n, t) {
     }) : Response.json({ error: "Not found" }, { status: 404 });
   })() : Promise.resolve(Response.json({ error: "Key is required" }, { status: 400 }));
 }
-function $(o, n, t) {
+function b(o, n, t) {
   let e = o;
   if (n.title) {
     const s = t ? ` — ${t}` : "";
@@ -199,46 +244,46 @@ function $(o, n, t) {
   }
   return n.meta?.description && (e = e.replace(/(<meta\s+name="description"\s+content=")[^"]*(")/, `$1${n.meta.description}$2`)), n.meta?.ogTitle && (e = e.replace(/(<meta\s+property="og:title"\s+content=")[^"]*(")/, `$1${n.meta.ogTitle}$2`)), n.html && (e = e.replace('<div id="app"></div>', `<div id="app">${n.html}</div>`)), e;
 }
-function W(o) {
+function X(o) {
   return {
     async fetch(n, t) {
-      const e = new URL(n.url), s = O(e, t, o.defaultLocale);
+      const e = new URL(n.url), s = j(e, t, o.defaultLocale);
       if (s) return s;
-      if (L.test(e.pathname))
+      if (I.test(e.pathname))
         return t.ASSETS.fetch(n);
       const a = R(n, o), l = new URL("/index.html", n.url);
-      let i = await (await t.ASSETS.fetch(new Request(l))).text();
-      const g = o.defaultLocale, [w, v] = await Promise.all([
+      let c = await (await t.ASSETS.fetch(new Request(l))).text();
+      const v = o.defaultLocale, [w, g] = await Promise.all([
         t.SITE_CONTENT.get("config"),
         t.SITE_CONTENT.get(`content:${a}`)
-      ]), T = w ? JSON.parse(w) : {};
-      let p = v ? JSON.parse(v) : {};
-      if (!v && a !== g) {
-        const c = await t.SITE_CONTENT.get(`content:${g}`);
-        c && (p = JSON.parse(c));
+      ]), S = w ? JSON.parse(w) : {};
+      let p = g ? JSON.parse(g) : {};
+      if (!g && a !== v) {
+        const f = await t.SITE_CONTENT.get(`content:${v}`);
+        f && (p = JSON.parse(f));
       }
-      const h = e.pathname.match(/^\/p\/(.+)$/);
-      if (h) {
-        const c = h[1];
-        if (!p[c]) {
-          let d = await t.SITE_CONTENT.get(`page:${c}:${a}`);
-          !d && a !== g && (d = await t.SITE_CONTENT.get(`page:${c}:${g}`)), d && (p[c] = JSON.parse(d));
+      const m = e.pathname.match(/^\/p\/(.+)$/);
+      if (m) {
+        const f = m[1];
+        if (!p[f]) {
+          let d = await t.SITE_CONTENT.get(`page:${f}:${a}`);
+          !d && a !== v && (d = await t.SITE_CONTENT.get(`page:${f}:${v}`)), d && (p[f] = JSON.parse(d));
         }
       }
       const r = {
         locale: a,
-        config: T
+        config: S
       };
-      for (const [c, d] of Object.entries(p))
-        r[`page:${c}`] = d;
-      if (h) {
-        const c = h[1], d = r[`page:${c}`];
-        d && (i = $(i, d, o.siteName));
+      for (const [f, d] of Object.entries(p))
+        r[`page:${f}`] = d;
+      if (m) {
+        const f = m[1], d = r[`page:${f}`];
+        d && (c = b(c, d, o.siteName));
       }
-      e.pathname === "/" && p.home && (i = $(i, p.home, o.siteName));
-      const m = `<script>window.__SITE_DATA__ = ${JSON.stringify(r)};<\/script>`;
-      return i = i.replace("</head>", `${m}
-</head>`), new Response(i, {
+      e.pathname === "/" && p.home && (c = b(c, p.home, o.siteName));
+      const h = `<script>window.__SITE_DATA__ = ${JSON.stringify(r)};<\/script>`;
+      return c = c.replace("</head>", `${h}
+</head>`), new Response(c, {
         headers: {
           "Content-Type": "text/html;charset=utf-8",
           "Cache-Control": "public, max-age=60"
@@ -248,13 +293,15 @@ function W(o) {
   };
 }
 export {
-  I as PAGE_CONTEXT_KEY,
-  W as createSiteWorker,
+  x as PAGE_CONTEXT_KEY,
+  X as createSiteWorker,
   E as isInPreview,
   z as setupPreviewRouter,
   P as useLivePreview,
+  B as useLocaleSwitcher,
   K as usePageData,
   J as useSiteApi,
+  W as useSiteComponents,
   M as useSiteConfig,
   k as useSiteData,
   U as useSkin

package/package.json

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

package/src/composables/useLocaleSwitcher.ts

@@ -0,0 +1,40 @@
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import type { SiteData } from '../types/config.js';
+
+/**
+ * Locale switcher composable.
+ * Manages locale state, available locales, and persistence.
+ */
+export function useLocaleSwitcher() {
+  const { locale } = useI18n();
+  const siteData = (window as any).__SITE_DATA__ as SiteData | undefined;
+
+  const locales = computed(() => siteData?.config?.locales || []);
+  const defaultLocale = computed(() => siteData?.config?.defaultLocale || 'en');
+  const hasMultipleLocales = computed(() => locales.value.length > 1);
+
+  function switchLocale(loc: string) {
+    locale.value = loc;
+    localStorage.setItem('x-site-locale', loc);
+  }
+
+  /**
+   * Resolve a text value that may be a string or a locale map.
+   * e.g. "Home" or { "en": "Home", "uk": "Головна" }
+   */
+  function resolveText(text: string | Record<string, string>): string {
+    if (typeof text === 'string') return text;
+    return text[locale.value] || text[defaultLocale.value] || Object.values(text)[0] || '';
+  }
+
+  return {
+    locale,
+    locales,
+    defaultLocale,
+    hasMultipleLocales,
+    switchLocale,
+    resolveText,
+  };
+}

package/src/composables/useSiteComponents.ts

@@ -0,0 +1,59 @@
+import { ref, computed, watch, onMounted, type Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import type { SiteData } from '../types/config.js';
+
+/**
+ * Locale-aware access to site components (navigation, footer, sidebar, etc.).
+ *
+ * On initial load, reads from preloaded __SITE_DATA__.components.
+ * When locale changes, fetches updated components from the API.
+ */
+export function useSiteComponents() {
+  const { locale } = useI18n();
+  const siteData = (window as any).__SITE_DATA__ as SiteData | undefined;
+  const initialLocale = siteData?.locale;
+
+  const components = ref<Record<string, any>>({ ...(siteData as any)?.components || {} });
+
+  async function fetchComponents(loc: string) {
+    // If same as initial locale, use preloaded data
+    if (loc === initialLocale) {
+      components.value = { ...(siteData as any)?.components || {} };
+      return;
+    }
+    try {
+      const res = await fetch(`/api/content/components:${loc}`);
+      if (res.ok) {
+        components.value = await res.json();
+      }
+    } catch {
+      // Keep current
+    }
+  }
+
+  watch(locale, (newLocale) => fetchComponents(newLocale));
+
+  onMounted(() => {
+    if (locale.value !== initialLocale) {
+      fetchComponents(locale.value);
+    }
+  });
+
+  /**
+   * Get a specific component's data by key.
+   * Returns a computed ref that updates on locale change.
+   */
+  function getComponent<T = any>(key: string): Ref<T | null> {
+    return computed(() => components.value[key] || null) as Ref<T | null>;
+  }
+
+  return {
+    /** All components (reactive, locale-aware) */
+    components,
+    /** Get a single component by key */
+    getComponent,
+    /** Force refetch for current locale */
+    reload: () => fetchComponents(locale.value),
+  };
+}

package/src/index.ts

@@ -6,6 +6,8 @@ export { useSiteApi } from './composables/useSiteApi.js';
 export { useLivePreview, setupPreviewRouter, isInPreview } from './composables/useLivePreview.js';
 export { usePageData } from './composables/usePageData.js';
 export type { UsePageDataReturn } from './composables/usePageData.js';
+export { useSiteComponents } from './composables/useSiteComponents.js';
+export { useLocaleSwitcher } from './composables/useLocaleSwitcher.js';
 export type { PreviewMessage } from './composables/useLivePreview.js';
 
 // Worker