@xosen/site-sdk 0.0.9 → 0.0.10

package/dist/composables/usePageData.d.ts

@@ -0,0 +1,26 @@
+import { type Ref } from 'vue';
+import type { Block } from '../types/blocks.js';
+import type { PageConfig, PageContext } from '../types/config.js';
+export interface UsePageDataReturn {
+    /** Resolved page data (from preload, API, or preview) */
+    page: Ref<PageConfig | null>;
+    /** Blocks to render (preview-aware) */
+    blocks: Ref<Block[]>;
+    /** Page context (metadata without blocks) */
+    pageContext: Ref<PageContext>;
+    /** True while fetching from API */
+    loading: Ref<boolean>;
+    /** True if page was not found */
+    notFound: Ref<boolean>;
+    /** True if in live preview mode */
+    isPreviewMode: Ref<boolean>;
+    /** Reload page data from API */
+    reload: () => Promise<void>;
+}
+/**
+ * Composable for loading page data with preloaded data, API fallback,
+ * locale switching, live preview support, and meta tag injection.
+ *
+ * @param slug - Reactive slug ref or static string (e.g. 'home', 'pricing')
+ */
+export declare function usePageData(slug: Ref<string> | string): UsePageDataReturn;

package/dist/index.d.ts

@@ -3,6 +3,8 @@ export { useSiteConfig } from './composables/useSiteConfig.js';
 export { useSkin } from './composables/useSkin.js';
 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 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,131 +1,188 @@
-import { ref as y, onMounted as T, watch as $, computed as u, onUnmounted as b } from "vue";
-import { useI18n as C } from "vue-i18n";
-function R(n, o) {
-  const t = y(null), { locale: e } = C(), a = window.__SITE_DATA__, s = a?.locale;
-  function c() {
-    return a && a[n] && e.value === s ? (t.value = a[n], !0) : !1;
+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";
+function k(o, n) {
+  const t = y(null), { locale: e } = b(), s = window.__SITE_DATA__, a = s?.locale;
+  function l() {
+    return s && s[o] && e.value === a ? (t.value = s[o], !0) : !1;
   }
-  async function h() {
+  async function u() {
     try {
-      const r = await fetch(`/api/content/${o}:${e.value}`);
-      r.ok && (t.value = await r.json());
+      const i = await fetch(`/api/content/${n}:${e.value}`);
+      i.ok && (t.value = await i.json());
     } catch {
     }
   }
-  return T(() => {
-    c() || h();
-  }), $(e, () => {
-    h();
+  return S(() => {
+    l() || u();
+  }), _(e, () => {
+    u();
   }), t;
 }
-function O() {
-  const n = window.__SITE_DATA__, o = u(() => n?.config || null), t = u(() => n?.components || {}), e = u(() => o.value?.navigation || []), a = u(() => o.value?.locales || []), s = u(() => o.value?.defaultLocale || "en"), c = u(() => o.value?.branding || {}), h = u(() => o.value?.footer || {}), r = u(() => o.value?.features || {});
-  function f(g) {
-    const p = r.value[g];
-    return typeof p == "boolean" ? p : typeof p == "object";
+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";
   }
   return {
-    config: o,
+    config: n,
     components: t,
     navigation: e,
-    locales: a,
-    defaultLocale: s,
-    branding: c,
-    footer: h,
-    features: r,
-    hasFeature: f
+    locales: s,
+    defaultLocale: a,
+    branding: l,
+    footer: u,
+    features: i,
+    hasFeature: g
   };
 }
-function j(n) {
-  function o(t) {
+function U(o) {
+  function n(t) {
     const e = document.documentElement;
     if (t.colors)
-      for (const [a, s] of Object.entries(t.colors))
-        s && e.style.setProperty(`--x-color-${x(a)}`, s);
+      for (const [s, a] of Object.entries(t.colors))
+        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);
   }
-  T(() => {
-    if (n) {
-      o(n);
+  S(() => {
+    if (o) {
+      n(o);
       return;
     }
     const e = window.__SITE_DATA__?.skin;
-    e && (e.colors || e.typography || e.shape) && o({
+    e && (e.colors || e.typography || e.shape) && n({
       colors: e.colors || {},
       typography: e.typography || {},
       shape: e.shape || {}
     });
   });
 }
-function x(n) {
-  return n.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+function N(o) {
+  return o.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
-function F() {
-  const o = window.__SITE_DATA__?.apiBase || "";
-  async function t(s) {
-    const c = await fetch(`${o}${s}`);
-    if (!c.ok)
-      throw new Error(`API error: ${c.status}`);
-    return c.json();
+function J() {
+  const n = window.__SITE_DATA__?.apiBase || "";
+  async function t(a) {
+    const l = await fetch(`${n}${a}`);
+    if (!l.ok)
+      throw new Error(`API error: ${l.status}`);
+    return l.json();
   }
   async function e() {
     return t("/v1/billing/tariffs");
   }
-  async function a() {
+  async function s() {
     return t("/v1/billing/services");
   }
   return {
     get: t,
     getTariffs: e,
-    getProducts: a
+    getProducts: s
   };
 }
-function S() {
+function E() {
   try {
     return window.self !== window.top;
   } catch {
     return !0;
   }
 }
-function D(n) {
-  S() && n.beforeEach((o, t) => !t.name);
+function z(o) {
+  E() && o.beforeEach((n, t) => !t.name);
 }
-function U() {
-  const n = y(null), o = y(S());
+function P() {
+  const o = y(null), n = y(E());
   function t(e) {
-    const a = e.data;
-    a?.type === "xosen-preview-update" && a.page && (n.value = a.page, o.value = !0);
+    const s = e.data;
+    s?.type === "xosen-preview-update" && s.page && (o.value = s.page, n.value = !0);
   }
-  return T(() => {
+  return S(() => {
     window.addEventListener("message", t);
-  }), b(() => {
+  }), x(() => {
     window.removeEventListener("message", t);
   }), {
-    previewPage: n,
-    isPreviewMode: o
+    previewPage: o,
+    isPreviewMode: n
   };
 }
-const A = /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf|eot|webp|avif|map|json|txt|xml|webmanifest)$/;
-function N(n, o) {
-  const e = new URL(n.url).searchParams.get("lang");
-  if (e && o.supportedLocales?.includes(e)) return e;
-  if (o.supportedLocales?.length) {
-    const a = n.headers.get("Accept-Language") || "";
-    for (const s of o.supportedLocales)
-      if (a.includes(s)) return s;
+const I = /* @__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 r = e.value ? t.value : a.value;
+    if (!r) return {};
+    const { blocks: m, meta: c, slug: d, locale: j, ...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;
+  }
+  async function p() {
+    l.value = !0, u.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);
+    } catch {
+      a.value = null, u.value = !0;
+    } finally {
+      l.value = !1;
+    }
+  }
+  function h() {
+    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 r = a.value.meta?.description;
+    if (r) {
+      const m = document.querySelector('meta[name="description"]');
+      m && m.setAttribute("content", r);
+    }
+  }
+  return _(t, (r) => {
+    r?.slug === i.value && (l.value = !1, u.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();
+  }), {
+    page: a,
+    blocks: v,
+    pageContext: w,
+    loading: l,
+    notFound: u,
+    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 R(o, n) {
+  const e = new URL(o.url).searchParams.get("lang");
+  if (e && n.supportedLocales?.includes(e)) return e;
+  if (n.supportedLocales?.length) {
+    const s = o.headers.get("Accept-Language") || "";
+    for (const a of n.supportedLocales)
+      if (s.includes(a)) return a;
   }
-  return o.defaultLocale;
+  return n.defaultLocale;
 }
-function I(n, o, t) {
-  if (!n.pathname.startsWith("/api/content/")) return null;
-  const e = decodeURIComponent(n.pathname.replace("/api/content/", ""));
+function O(o, n, t) {
+  if (!o.pathname.startsWith("/api/content/")) return null;
+  const e = decodeURIComponent(o.pathname.replace("/api/content/", ""));
   return e ? (async () => {
-    let a = await o.SITE_CONTENT.get(e);
-    if (!a) {
-      const s = e.lastIndexOf(":");
-      s > 0 && e.slice(s + 1) !== t && (a = await o.SITE_CONTENT.get(e.slice(0, s + 1) + t));
+    let s = await n.SITE_CONTENT.get(e);
+    if (!s) {
+      const a = e.lastIndexOf(":");
+      a > 0 && e.slice(a + 1) !== t && (s = await n.SITE_CONTENT.get(e.slice(0, a + 1) + t));
     }
-    return a ? new Response(a, {
+    return s ? new Response(s, {
       headers: {
         "Content-Type": "application/json",
         "Cache-Control": "public, max-age=60",
@@ -134,54 +191,54 @@ function I(n, o, t) {
     }) : Response.json({ error: "Not found" }, { status: 404 });
   })() : Promise.resolve(Response.json({ error: "Key is required" }, { status: 400 }));
 }
-function _(n, o, t) {
-  let e = n;
-  if (o.title) {
-    const a = t ? ` — ${t}` : "";
-    e = e.replace(/<title>[^<]*<\/title>/, `<title>${o.title}${a}</title>`);
+function $(o, n, t) {
+  let e = o;
+  if (n.title) {
+    const s = t ? ` — ${t}` : "";
+    e = e.replace(/<title>[^<]*<\/title>/, `<title>${n.title}${s}</title>`);
   }
-  return o.meta?.description && (e = e.replace(/(<meta\s+name="description"\s+content=")[^"]*(")/, `$1${o.meta.description}$2`)), o.meta?.ogTitle && (e = e.replace(/(<meta\s+property="og:title"\s+content=")[^"]*(")/, `$1${o.meta.ogTitle}$2`)), o.html && (e = e.replace('<div id="app"></div>', `<div id="app">${o.html}</div>`)), e;
+  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 J(n) {
+function W(o) {
   return {
-    async fetch(o, t) {
-      const e = new URL(o.url), a = I(e, t, n.defaultLocale);
-      if (a) return a;
-      if (A.test(e.pathname))
-        return t.ASSETS.fetch(o);
-      const s = N(o, n), c = new URL("/index.html", o.url);
-      let r = await (await t.ASSETS.fetch(new Request(c))).text();
-      const f = n.defaultLocale, [g, p] = await Promise.all([
+    async fetch(n, t) {
+      const e = new URL(n.url), s = O(e, t, o.defaultLocale);
+      if (s) return s;
+      if (L.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([
         t.SITE_CONTENT.get("config"),
-        t.SITE_CONTENT.get(`content:${s}`)
-      ]), v = g ? JSON.parse(g) : {};
-      let d = p ? JSON.parse(p) : {};
-      if (!p && s !== f) {
-        const i = await t.SITE_CONTENT.get(`content:${f}`);
-        i && (d = JSON.parse(i));
+        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));
       }
-      const m = e.pathname.match(/^\/p\/(.+)$/);
-      if (m) {
-        const i = m[1];
-        if (!d[i]) {
-          let l = await t.SITE_CONTENT.get(`page:${i}:${s}`);
-          !l && s !== f && (l = await t.SITE_CONTENT.get(`page:${i}:${f}`)), l && (d[i] = JSON.parse(l));
+      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 w = {
-        locale: s,
-        config: v
+      const r = {
+        locale: a,
+        config: T
       };
-      for (const [i, l] of Object.entries(d))
-        w[`page:${i}`] = l;
-      if (m) {
-        const i = m[1], l = w[`page:${i}`];
-        l && (r = _(r, l, n.siteName));
+      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));
       }
-      e.pathname === "/" && d.home && (r = _(r, d.home, n.siteName));
-      const E = `<script>window.__SITE_DATA__ = ${JSON.stringify(w)};<\/script>`;
-      return r = r.replace("</head>", `${E}
-</head>`), new Response(r, {
+      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, {
         headers: {
           "Content-Type": "text/html;charset=utf-8",
           "Cache-Control": "public, max-age=60"
@@ -190,15 +247,15 @@ function J(n) {
     }
   };
 }
-const M = /* @__PURE__ */ Symbol("pageContext");
 export {
-  M as PAGE_CONTEXT_KEY,
-  J as createSiteWorker,
-  S as isInPreview,
-  D as setupPreviewRouter,
-  U as useLivePreview,
-  F as useSiteApi,
-  O as useSiteConfig,
-  R as useSiteData,
-  j as useSkin
+  I as PAGE_CONTEXT_KEY,
+  W as createSiteWorker,
+  E as isInPreview,
+  z as setupPreviewRouter,
+  P as useLivePreview,
+  K as usePageData,
+  J as useSiteApi,
+  M as useSiteConfig,
+  k as useSiteData,
+  U as useSkin
 };

package/package.json

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

package/src/composables/usePageData.ts

@@ -0,0 +1,153 @@
+import { ref, computed, watch, onMounted, provide, type Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import type { Block } from '../types/blocks.js';
+import type { PageConfig, PageContext, SiteData } from '../types/config.js';
+import { PAGE_CONTEXT_KEY } from '../types/config.js';
+import { useLivePreview } from './useLivePreview.js';
+
+export interface UsePageDataReturn {
+  /** Resolved page data (from preload, API, or preview) */
+  page: Ref<PageConfig | null>;
+  /** Blocks to render (preview-aware) */
+  blocks: Ref<Block[]>;
+  /** Page context (metadata without blocks) */
+  pageContext: Ref<PageContext>;
+  /** True while fetching from API */
+  loading: Ref<boolean>;
+  /** True if page was not found */
+  notFound: Ref<boolean>;
+  /** True if in live preview mode */
+  isPreviewMode: Ref<boolean>;
+  /** Reload page data from API */
+  reload: () => Promise<void>;
+}
+
+/**
+ * Composable for loading page data with preloaded data, API fallback,
+ * locale switching, live preview support, and meta tag injection.
+ *
+ * @param slug - Reactive slug ref or static string (e.g. 'home', 'pricing')
+ */
+export function usePageData(slug: Ref<string> | string): UsePageDataReturn {
+  const { locale } = useI18n();
+  const { previewPage, isPreviewMode } = useLivePreview();
+
+  const siteData = (window as any).__SITE_DATA__ as SiteData | undefined;
+
+  const page = ref<PageConfig | null>(null);
+  const loading = ref(true);
+  const notFound = ref(false);
+
+  const resolvedSlug = computed(() => typeof slug === 'string' ? slug : slug.value);
+  const pageKey = computed(() => `page:${resolvedSlug.value}`);
+
+  // Page context: page metadata without blocks (for injection)
+  const pageContext = computed<PageContext>(() => {
+    const p = isPreviewMode.value ? previewPage.value : page.value;
+    if (!p) return {};
+    const { blocks, meta, slug: _s, locale: _l, ...rest } = p as any;
+    return rest;
+  });
+
+  // Provide page context for child components
+  provide(PAGE_CONTEXT_KEY, pageContext);
+
+  // Blocks: prefer preview data when preview targets this slug
+  const blocks = computed<Block[]>(() => {
+    if (isPreviewMode.value && previewPage.value?.slug === resolvedSlug.value) {
+      return (previewPage.value.blocks || []) as Block[];
+    }
+    return page.value?.blocks || [];
+  });
+
+  function loadFromPreloaded(): boolean {
+    const preloaded = siteData?.[pageKey.value];
+    if (preloaded && locale.value === siteData?.locale) {
+      page.value = preloaded as PageConfig;
+      notFound.value = false;
+      applyMeta();
+      return true;
+    }
+    return false;
+  }
+
+  async function fetchPage() {
+    loading.value = true;
+    notFound.value = false;
+    try {
+      const res = await fetch(`/api/content/${pageKey.value}:${locale.value}`);
+      if (res.ok) {
+        page.value = await res.json();
+        applyMeta();
+      } else {
+        page.value = null;
+        notFound.value = true;
+      }
+    } catch {
+      page.value = null;
+      notFound.value = true;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function applyMeta() {
+    if (!page.value) return;
+    if (page.value.title) {
+      const branding = siteData?.config?.branding;
+      const suffix = branding?.siteName ? ` — ${branding.siteName}` : '';
+      document.title = `${page.value.title}${suffix}`;
+    }
+    const desc = page.value.meta?.description;
+    if (desc) {
+      const el = document.querySelector('meta[name="description"]');
+      if (el) el.setAttribute('content', desc);
+    }
+  }
+
+  // Live preview: merge incoming page data
+  watch(previewPage, (p) => {
+    if (p?.slug === resolvedSlug.value) {
+      loading.value = false;
+      notFound.value = false;
+      if (p.title || p.blocks) {
+        page.value = {
+          ...(page.value || {} as PageConfig),
+          ...(p.title ? { title: p.title } : {}),
+          ...(p.blocks ? { blocks: p.blocks as Block[] } : {}),
+        };
+        applyMeta();
+      }
+    }
+  });
+
+  // Initial load
+  onMounted(() => {
+    if (!loadFromPreloaded()) {
+      fetchPage();
+    } else {
+      loading.value = false;
+    }
+  });
+
+  // Refetch on locale or slug change
+  watch(locale, () => fetchPage());
+  watch(resolvedSlug, () => {
+    if (!loadFromPreloaded()) {
+      fetchPage();
+    } else {
+      loading.value = false;
+    }
+  });
+
+  return {
+    page,
+    blocks,
+    pageContext,
+    loading,
+    notFound,
+    isPreviewMode,
+    reload: fetchPage,
+  };
+}

package/src/index.ts

@@ -4,6 +4,8 @@ export { useSiteConfig } from './composables/useSiteConfig.js';
 export { useSkin } from './composables/useSkin.js';
 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 type { PreviewMessage } from './composables/useLivePreview.js';
 
 // Worker