@archbase/ssr 3.0.0

package/dist/index.js

@@ -0,0 +1,655 @@
+import { jsx as w, Fragment as x } from "react/jsx-runtime";
+import y, { createContext as L, useState as v, useEffect as C, useContext as Q, useRef as P } from "react";
+import { ArchbaseDataSource as _ } from "@archbase/data";
+import { QueryClient as q, hydrate as F, QueryClientProvider as N, dehydrate as W } from "@tanstack/react-query";
+const S = typeof window > "u", U = !S, h = () => !!(typeof window < "u" && window.document && window.document.createElement), G = {
+  getItem(t) {
+    if (!h())
+      return null;
+    try {
+      return localStorage.getItem(t);
+    } catch {
+      return null;
+    }
+  },
+  setItem(t, e) {
+    if (h())
+      try {
+        localStorage.setItem(t, e);
+      } catch {
+      }
+  },
+  removeItem(t) {
+    if (h())
+      try {
+        localStorage.removeItem(t);
+      } catch {
+      }
+  }
+}, X = {
+  getItem(t) {
+    if (!h())
+      return null;
+    try {
+      return sessionStorage.getItem(t);
+    } catch {
+      return null;
+    }
+  },
+  setItem(t, e) {
+    if (h())
+      try {
+        sessionStorage.setItem(t, e);
+      } catch {
+      }
+  },
+  removeItem(t) {
+    if (h())
+      try {
+        sessionStorage.removeItem(t);
+      } catch {
+      }
+  }
+};
+function O(t) {
+  try {
+    return JSON.stringify(t, (e, r) => typeof r == "function" || r === void 0 ? null : typeof r == "object" && r !== null && typeof r.toJSON == "function" ? r.toJSON() : r);
+  } catch (e) {
+    return console.warn("Failed to serialize data for SSR:", e), "null";
+  }
+}
+function T(t) {
+  try {
+    return JSON.parse(t);
+  } catch (e) {
+    return console.warn("Failed to deserialize SSR data:", e), null;
+  }
+}
+let M = 0;
+function Y(t = "archbase") {
+  return `${t}-${++M}`;
+}
+function Z() {
+  M = 0;
+}
+function ee() {
+  return h() ? window : void 0;
+}
+function te() {
+  return h() ? document : void 0;
+}
+function re(t) {
+  if (!h())
+    return !1;
+  const r = {
+    localStorage: () => "localStorage" in window,
+    sessionStorage: () => "sessionStorage" in window,
+    indexedDB: () => "indexedDB" in window,
+    serviceWorker: () => "serviceWorker" in navigator,
+    geolocation: () => "geolocation" in navigator,
+    webRTC: () => "RTCPeerConnection" in window,
+    websockets: () => "WebSocket" in window,
+    fetch: () => "fetch" in window,
+    intersectionObserver: () => "IntersectionObserver" in window,
+    mutationObserver: () => "MutationObserver" in window,
+    resizeObserver: () => "ResizeObserver" in window
+  }[t];
+  return r ? r() : !1;
+}
+function ne(t, e) {
+  if (!h())
+    return e;
+  try {
+    return t();
+  } catch {
+    return e;
+  }
+}
+function se(t) {
+  return h() ? t() : void 0;
+}
+function ie(t) {
+  return S ? t() : void 0;
+}
+function ae(t, e) {
+  return S ? t : e();
+}
+function oe(t) {
+  if (!h())
+    return { matches: !1, media: t };
+  try {
+    const e = window.matchMedia(t);
+    return {
+      matches: e.matches,
+      media: e.media
+    };
+  } catch {
+    return { matches: !1, media: t };
+  }
+}
+const H = L({
+  isSSR: S,
+  isHydrated: !1
+});
+function ce({
+  children: t,
+  serverData: e,
+  onHydrated: r,
+  fallback: s
+}) {
+  const [o, n] = v(!S);
+  C(() => {
+    !o && h() && (n(!0), r?.());
+  }, [o, r]);
+  const i = {
+    isSSR: S,
+    isHydrated: o,
+    serverData: e
+  };
+  return !o && s ? /* @__PURE__ */ w(H.Provider, { value: i, children: s }) : /* @__PURE__ */ w(H.Provider, { value: i, children: t });
+}
+function g() {
+  const t = Q(H);
+  if (!t)
+    throw new Error("useArchbaseSSR must be used within ArchbaseSSRProvider");
+  return t;
+}
+function ue(t, e) {
+  const { isHydrated: r } = g(), [s, o] = v(t);
+  return C(() => {
+    if (r) {
+      const n = typeof e == "function" ? e() : e;
+      o(n);
+    }
+  }, [r, e]), s;
+}
+function de({ children: t, fallback: e = null }) {
+  const { isHydrated: r } = g();
+  return r ? /* @__PURE__ */ w(x, { children: t }) : /* @__PURE__ */ w(x, { children: e });
+}
+function le({ children: t }) {
+  const { isSSR: e } = g();
+  return e ? /* @__PURE__ */ w(x, { children: t }) : null;
+}
+function fe(t, e) {
+  const { isHydrated: r } = g();
+  C(() => {
+    if (r)
+      return t();
+  }, [r, ...e || []]);
+}
+function he(t, e = !1) {
+  const [r, s] = v(e), { isHydrated: o } = g();
+  return C(() => {
+    if (!o || !h())
+      return;
+    const n = window.matchMedia(t);
+    s(n.matches);
+    const i = (a) => {
+      s(a.matches);
+    };
+    return n.addEventListener ? (n.addEventListener("change", i), () => n.removeEventListener("change", i)) : (n.addListener(i), () => n.removeListener(i));
+  }, [t, o]), r;
+}
+class E extends _ {
+  _ssrData;
+  _isHydrating = !1;
+  constructor(e, r = {}) {
+    super(e, r);
+  }
+  /**
+   * Serialize DataSource state for SSR
+   */
+  serializeState() {
+    const e = {
+      records: this.getAllRecords(),
+      currentRecord: this.getCurrentRecord(),
+      recordIndex: this.getRecordIndex(),
+      state: "active",
+      // Simplified state
+      hasChanges: this.isChanged(),
+      filter: this.getFilter(),
+      sort: this.getSort(),
+      metadata: this.getAllMetadata()
+    };
+    return O(e);
+  }
+  /**
+   * Restore DataSource state from serialized data
+   */
+  deserializeState(e) {
+    const r = T(e);
+    if (!r) {
+      console.warn("Failed to deserialize DataSource state");
+      return;
+    }
+    this._isHydrating = !0, this._ssrData = r;
+    try {
+      r.records.length > 0 && this.setRecords(r.records), r.recordIndex >= 0 && this.gotoRecord(r.recordIndex), r.filter && (this.filter = r.filter), r.sort && (this.sort = r.sort);
+    } finally {
+      this._isHydrating = !1, this._ssrData = void 0;
+    }
+  }
+  /**
+   * Check if DataSource is currently hydrating from SSR
+   */
+  isHydrating() {
+    return this._isHydrating;
+  }
+  /**
+   * Get SSR data if available
+   */
+  getSSRData() {
+    return this._ssrData;
+  }
+  /**
+   * Create a minimal state object for SSR
+   * Only includes essential data to reduce payload size
+   */
+  serializeMinimalState() {
+    const e = {
+      records: this.getAllRecords().slice(0, 50),
+      // Limit records for performance
+      currentRecord: this.getCurrentRecord(),
+      recordIndex: this.getRecordIndex(),
+      state: "active",
+      hasChanges: this.isChanged()
+    };
+    return O(e);
+  }
+  /**
+   * Create a DataSource instance from server data
+   */
+  static fromServerData(e, r, s = {}) {
+    const o = new E(e, s);
+    return r && (typeof r == "string" ? o.deserializeState(r) : Array.isArray(r.records) && (o.setRecords(r.records), r.currentIndex >= 0 && o.gotoRecord(r.currentIndex))), o;
+  }
+  /**
+   * Enhanced method to handle SSR-safe operations
+   */
+  ssrSafeOperation(e, r) {
+    if (S)
+      try {
+        return e();
+      } catch (s) {
+        return console.warn("SSR operation failed, using fallback:", s), r;
+      }
+    return e();
+  }
+  /**
+   * Override to handle SSR-safe filtering
+   */
+  applyFilter(e) {
+    this.ssrSafeOperation(
+      () => {
+        this.filter = e;
+      },
+      void 0
+    );
+  }
+  /**
+   * Override to handle SSR-safe sorting
+   */
+  applySort(e) {
+    this.ssrSafeOperation(
+      () => {
+        this.sort = e;
+      },
+      void 0
+    );
+  }
+  /**
+   * Get records with SSR safety
+   */
+  getRecords() {
+    return this.ssrSafeOperation(
+      () => this.getAllRecords(),
+      []
+    );
+  }
+  /**
+   * Get current record with SSR safety
+   */
+  getCurrentRecord() {
+    return this.ssrSafeOperation(
+      () => super.getCurrentRecord(),
+      void 0
+    );
+  }
+  /**
+   * Check if we have data available for rendering
+   */
+  hasData() {
+    return this.getRecords().length > 0;
+  }
+  /**
+   * Create a snapshot that can be safely transmitted between server/client
+   */
+  createSnapshot() {
+    return {
+      records: this.getAllRecords(),
+      currentIndex: this.getRecordIndex(),
+      metadata: this.getAllMetadata(),
+      timestamp: Date.now()
+    };
+  }
+  /**
+   * Restore from a snapshot
+   */
+  restoreFromSnapshot(e) {
+    this._isHydrating = !0;
+    try {
+      this.setRecords(e.records), e.currentIndex >= 0 && this.gotoRecord(e.currentIndex);
+    } finally {
+      this._isHydrating = !1;
+    }
+  }
+  /**
+   * Helper method to get all metadata
+   */
+  getAllMetadata() {
+    return {};
+  }
+  /**
+   * Get all records from the data source
+   */
+  getAllRecords() {
+    return this.records || [];
+  }
+  /**
+   * Get current record index
+   */
+  getRecordIndex() {
+    return this.recordIndex || 0;
+  }
+  /**
+   * Check if data source has changes
+   */
+  isChanged() {
+    return this.changed || !1;
+  }
+  /**
+   * Get current filter
+   */
+  getFilter() {
+    return this.filter;
+  }
+  /**
+   * Get current sort
+   */
+  getSort() {
+    return this.sort || [];
+  }
+  /**
+   * Get record count
+   */
+  getRecordCount() {
+    return this.getTotalRecords();
+  }
+  /**
+   * Set records with proper DataSource options
+   */
+  setRecords(e) {
+    this.refreshData({
+      records: e,
+      grandTotalRecords: e.length,
+      currentPage: 1,
+      totalPages: 1,
+      pageSize: e.length
+    });
+  }
+}
+function J(t, e = {}) {
+  const {
+    initialRecords: r = [],
+    serverDataKey: s,
+    autoHydrate: o = !0,
+    fallbackRecords: n = [],
+    serializer: i
+  } = e, { isHydrated: a, serverData: d } = g(), [c] = v(() => {
+    const u = new E(t);
+    return S && r.length > 0 && u.setRecords(r), u;
+  }), [A, m] = v(!1), [f, p] = v(null), I = P(!1);
+  return C(() => {
+    if (!(!a || I.current || !o)) {
+      I.current = !0;
+      try {
+        m(!0), p(null);
+        let u = null;
+        if (d && (s ? u = d[s] : u = d), typeof u == "string")
+          if (i?.deserialize)
+            u = i.deserialize(u);
+          else {
+            c.deserializeState(u);
+            return;
+          }
+        u && Array.isArray(u.records) ? (c.setRecords(u.records), typeof u.currentIndex == "number" && c.gotoRecord(u.currentIndex)) : n.length > 0 && c.setRecords(n);
+      } catch (u) {
+        console.error("Failed to hydrate DataSource:", u), p(u instanceof Error ? u : new Error("Hydration failed")), n.length > 0 && c.setRecords(n);
+      } finally {
+        m(!1);
+      }
+    }
+  }, [a, d, s, o, n, c, i]), {
+    dataSource: c,
+    isLoading: A,
+    error: f,
+    isHydrated: a,
+    serializeState: () => i?.serialize ? i.serialize(c.createSnapshot()) : c.serializeState(),
+    deserializeState: (u) => {
+      try {
+        if (i?.deserialize) {
+          const R = i.deserialize(u);
+          c.restoreFromSnapshot(R);
+        } else
+          c.deserializeState(u);
+      } catch (R) {
+        console.error("Failed to deserialize DataSource state:", R), p(R instanceof Error ? R : new Error("Deserialization failed"));
+      }
+    },
+    getMinimalState: () => ({
+      recordCount: c.getRecordCount(),
+      currentIndex: c.getRecordIndex(),
+      hasData: c.hasData(),
+      isActive: c.isActive()
+    }),
+    refresh: async (u) => {
+      m(!0), p(null);
+      try {
+        u ? c.setRecords(u) : c.refreshData();
+      } catch (R) {
+        p(R instanceof Error ? R : new Error("Refresh failed"));
+      } finally {
+        m(!1);
+      }
+    },
+    // Convenience getters
+    records: c.getRecords(),
+    currentRecord: c.getCurrentRecord(),
+    recordCount: c.getRecordCount(),
+    hasData: c.hasData()
+  };
+}
+function Se(t) {
+  const { isHydrated: e } = g(), [r] = v(() => t.map(({ name: a, options: d }) => ({
+    name: a,
+    ...J(a, d)
+  }))), s = (a) => r.find((d) => d.name === a), o = () => r.reduce((a, d) => (a[d.name] = d.serializeState(), a), {}), n = r.some((a) => a.isLoading), i = r.filter((a) => a.error).map((a) => ({ name: a.name, error: a.error }));
+  return {
+    sources: r,
+    getDataSource: s,
+    serializeAll: o,
+    isAnyLoading: n,
+    errors: i,
+    isHydrated: e
+  };
+}
+function j({
+  children: t,
+  queryClient: e,
+  dehydratedState: r,
+  defaultStaleTime: s = 1e3 * 60 * 5,
+  // 5 minutes
+  defaultCacheTime: o = 1e3 * 60 * 10
+  // 10 minutes
+}) {
+  const { isHydrated: n, serverData: i } = g(), [a] = y.useState(() => e || new q({
+    defaultOptions: {
+      queries: {
+        staleTime: s,
+        gcTime: o,
+        // TanStack Query v5 uses gcTime instead of cacheTime
+        refetchOnWindowFocus: !1,
+        retry: (d, c) => c?.status >= 400 && c?.status < 500 ? !1 : d < 3
+      },
+      mutations: {
+        retry: 1
+      }
+    }
+  }));
+  return y.useEffect(() => {
+    if (n && (r || i?.queryState)) {
+      const d = r || i.queryState;
+      if (typeof d == "string") {
+        const c = T(d);
+        c && F(a, c);
+      } else
+        F(a, d);
+    }
+  }, [n, r, i, a]), /* @__PURE__ */ w(N, { client: a, children: t });
+}
+function ye(t, e, r = {}) {
+  const {
+    dataSource: s,
+    syncWithDataSource: o = !1,
+    transformForDataSource: n,
+    ssrData: i,
+    ssr: a = !0,
+    ...d
+  } = r, { isHydrated: c, serverData: A } = g(), m = y.useCallback(() => {
+    if (a) {
+      if (i)
+        return i;
+      if (A?.queries) {
+        const l = Array.isArray(t) ? t.join(":") : String(t);
+        return A.queries[l];
+      }
+    }
+  }, [a, i, A, t]);
+  y.useMemo(() => ({
+    queryKey: Array.isArray(t) ? t : [t],
+    queryFn: e,
+    enabled: S ? !1 : d.enabled ?? !0,
+    initialData: m(),
+    ...d
+  }), [t, e, d, m]);
+  const [f, p] = y.useState(m()), [I, b] = y.useState(!f), [D, z] = y.useState(null);
+  return y.useEffect(() => {
+    if (!(!o || !s || !f))
+      try {
+        let l = f;
+        n ? l = n(f) : Array.isArray(f) ? l = f : f && typeof f == "object" && "data" in f && (l = f.data), Array.isArray(l) && s.setRecords(l);
+      } catch (l) {
+        console.error("Failed to sync query data with DataSource:", l);
+      }
+  }, [f, s, o, n]), {
+    data: f,
+    isLoading: I,
+    error: D,
+    isSuccess: !I && !D,
+    isError: !!D,
+    refetch: async () => {
+      b(!0), z(null);
+      try {
+        const l = await e();
+        return p(l), { data: l };
+      } catch (l) {
+        throw z(l), l;
+      } finally {
+        b(!1);
+      }
+    }
+  };
+}
+function ge(t) {
+  const e = W(t);
+  return O(e);
+}
+async function K(t, e) {
+  if (!S)
+    return;
+  const r = e.map(async ({ key: s, fetchFn: o }) => {
+    const n = Array.isArray(s) ? s : [s];
+    try {
+      await t.prefetchQuery({
+        queryKey: n,
+        queryFn: o,
+        staleTime: 1 / 0
+        // Don't refetch during SSR
+      });
+    } catch (i) {
+      console.error(`Failed to prefetch query ${JSON.stringify(n)}:`, i);
+    }
+  });
+  await Promise.allSettled(r);
+}
+function me(t, e = {}) {
+  const { queryClient: r, prefetchQueries: s } = e;
+  function o(n) {
+    const [i] = y.useState(
+      () => r || new q({
+        defaultOptions: {
+          queries: {
+            staleTime: 3e5,
+            // 5 minutes
+            gcTime: 6e5
+            // 10 minutes
+          }
+        }
+      })
+    );
+    return y.useEffect(() => {
+      if (S && s) {
+        const a = s(n);
+        K(i, a);
+      }
+    }, [n]), /* @__PURE__ */ w(j, { queryClient: i, children: /* @__PURE__ */ w(t, { ...n }) });
+  }
+  return o.displayName = `withArchbaseTanStack(${t.displayName || t.name})`, o;
+}
+const Re = "3.0.0";
+export {
+  E as ArchbaseSSRDataSource,
+  ce as ArchbaseSSRProvider,
+  Re as ArchbaseSSRVersion,
+  j as ArchbaseTanStackProvider,
+  de as ClientOnly,
+  le as ServerOnly,
+  h as canUseDOM,
+  se as clientOnly,
+  ae as createHydrationSafeValue,
+  Y as createSSRId,
+  T as deserializeFromSSR,
+  te as getDocument,
+  oe as getMediaQuery,
+  ee as getWindow,
+  re as hasFeature,
+  U as isClient,
+  S as isServer,
+  K as prepareServerQueries,
+  Z as resetSSRIdCounter,
+  G as safeLocalStorage,
+  X as safeSessionStorage,
+  O as serializeForSSR,
+  ge as serializeQueryClientState,
+  ie as serverOnly,
+  ye as useArchbaseQuery,
+  g as useArchbaseSSR,
+  J as useArchbaseSSRDataSource,
+  Se as useArchbaseSSRDataSources,
+  fe as useClientEffect,
+  ue as useHydrationSafeState,
+  he as useSSRSafeMediaQuery,
+  me as withArchbaseTanStack,
+  ne as withSSRFallback
+};

package/dist/providers/ArchbaseSSRProvider.d.ts

@@ -0,0 +1,52 @@
+import { default as React, ReactNode } from 'react';
+interface SSRContextValue {
+    isSSR: boolean;
+    isHydrated: boolean;
+    serverData?: any;
+}
+interface ArchbaseSSRProviderProps {
+    children: ReactNode;
+    serverData?: any;
+    /** Custom hydration detection logic */
+    onHydrated?: () => void;
+    /** Fallback content during hydration */
+    fallback?: ReactNode;
+}
+/**
+ * Provider for SSR-aware Archbase components
+ * Handles hydration state and provides SSR context
+ */
+export declare function ArchbaseSSRProvider({ children, serverData, onHydrated, fallback }: ArchbaseSSRProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access SSR context
+ */
+export declare function useArchbaseSSR(): SSRContextValue;
+/**
+ * Hook for hydration-safe state
+ * Returns a default value during SSR and switches to actual value after hydration
+ */
+export declare function useHydrationSafeState<T>(ssrValue: T, clientValue: T | (() => T)): T;
+/**
+ * Component that only renders on client side after hydration
+ */
+interface ClientOnlyProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+export declare function ClientOnly({ children, fallback }: ClientOnlyProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Component that only renders on server side
+ */
+interface ServerOnlyProps {
+    children: ReactNode;
+}
+export declare function ServerOnly({ children }: ServerOnlyProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Hook for SSR-safe effects that only run on client
+ */
+export declare function useClientEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;
+/**
+ * Hook for media queries that work with SSR
+ */
+export declare function useSSRSafeMediaQuery(query: string, defaultValue?: boolean): boolean;
+export {};