hadars 0.2.0 → 0.2.2-rc.0

package/dist/index.cjs

@@ -30,7 +30,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
-  HadarsContext: () => HadarsContext,
   HadarsHead: () => Head,
   initServerDataCache: () => initServerDataCache,
   loadModule: () => loadModule,
@@ -40,7 +39,6 @@ module.exports = __toCommonJS(index_exports);
 
 // src/utils/Head.tsx
 var import_react = __toESM(require("react"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
 function deriveKey(tag, props) {
   switch (tag) {
     case "meta": {
@@ -70,134 +68,116 @@ function deriveKey(tag, props) {
       return `${tag}:${JSON.stringify(props)}`;
   }
 }
-var AppContext = import_react.default.createContext({
-  setTitle: () => {
-    console.warn("AppContext: setTitle called outside of provider");
-  },
-  addMeta: () => {
-    console.warn("AppContext: addMeta called outside of provider");
-  },
-  addLink: () => {
-    console.warn("AppContext: addLink called outside of provider");
-  },
-  addStyle: () => {
-    console.warn("AppContext: addStyle called outside of provider");
-  },
-  addScript: () => {
-    console.warn("AppContext: addScript called outside of provider");
-  },
-  setStatus: () => {
-  }
-});
-var AppProviderSSR = import_react.default.memo(({ children, context }) => {
-  const { head } = context;
-  const setTitle = import_react.default.useCallback((title) => {
-    head.title = title;
-  }, [head]);
-  const addMeta = import_react.default.useCallback((props) => {
-    head.meta[deriveKey("meta", props)] = props;
-  }, [head]);
-  const addLink = import_react.default.useCallback((props) => {
-    head.link[deriveKey("link", props)] = props;
-  }, [head]);
-  const addStyle = import_react.default.useCallback((props) => {
-    head.style[deriveKey("style", props)] = props;
-  }, [head]);
-  const addScript = import_react.default.useCallback((props) => {
-    head.script[deriveKey("script", props)] = props;
-  }, [head]);
-  const setStatus = import_react.default.useCallback((status) => {
-    head.status = status;
-  }, [head]);
-  const contextValue = import_react.default.useMemo(() => ({
-    setTitle,
-    addMeta,
-    addLink,
-    addStyle,
-    addScript,
-    setStatus
-  }), [setTitle, addMeta, addLink, addStyle, addScript, setStatus]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContext.Provider, { value: contextValue, children });
-});
-var AppProviderCSR = import_react.default.memo(({ children }) => {
-  const setTitle = import_react.default.useCallback((title) => {
-    document.title = title;
-  }, []);
-  const addMeta = import_react.default.useCallback((props) => {
-    const p = props;
-    let meta = null;
-    if (p.name) meta = document.querySelector(`meta[name="${CSS.escape(p.name)}"]`);
-    else if (p.property) meta = document.querySelector(`meta[property="${CSS.escape(p.property)}"]`);
-    else if (p.httpEquiv ?? p["http-equiv"]) meta = document.querySelector(`meta[http-equiv="${CSS.escape(p.httpEquiv ?? p["http-equiv"])}"]`);
-    else if ("charSet" in p || "charset" in p) meta = document.querySelector("meta[charset]");
-    if (!meta) {
-      meta = document.createElement("meta");
-      document.head.appendChild(meta);
-    }
-    for (const [k, v] of Object.entries(p)) {
-      if (v != null && v !== false) meta.setAttribute(k === "charSet" ? "charset" : k === "httpEquiv" ? "http-equiv" : k, String(v));
-    }
-  }, []);
-  const addLink = import_react.default.useCallback((props) => {
-    const p = props;
-    let link = null;
-    const asSel = p.as ? `[as="${CSS.escape(p.as)}"]` : "";
-    if (p.rel && p.href) link = document.querySelector(`link[rel="${CSS.escape(p.rel)}"][href="${CSS.escape(p.href)}"]${asSel}`);
-    else if (p.rel) link = document.querySelector(`link[rel="${CSS.escape(p.rel)}"]${asSel}`);
-    if (!link) {
-      link = document.createElement("link");
-      document.head.appendChild(link);
-    }
-    const LINK_ATTR = { crossOrigin: "crossorigin", referrerPolicy: "referrerpolicy", fetchPriority: "fetchpriority", hrefLang: "hreflang" };
-    for (const [k, v] of Object.entries(p)) {
-      if (v != null && v !== false) link.setAttribute(LINK_ATTR[k] ?? k, String(v));
-    }
-  }, []);
-  const addStyle = import_react.default.useCallback((props) => {
-    const p = props;
-    let style = null;
-    if (p["data-id"]) style = document.querySelector(`style[data-id="${CSS.escape(p["data-id"])}"]`);
-    if (!style) {
-      style = document.createElement("style");
-      document.head.appendChild(style);
+var LINK_ATTR = {
+  crossOrigin: "crossorigin",
+  referrerPolicy: "referrerpolicy",
+  fetchPriority: "fetchpriority",
+  hrefLang: "hreflang"
+};
+function makeServerCtx(head) {
+  return {
+    setTitle: (t) => {
+      head.title = t;
+    },
+    addMeta: (p) => {
+      head.meta[deriveKey("meta", p)] = p;
+    },
+    addLink: (p) => {
+      head.link[deriveKey("link", p)] = p;
+    },
+    addStyle: (p) => {
+      head.style[deriveKey("style", p)] = p;
+    },
+    addScript: (p) => {
+      head.script[deriveKey("script", p)] = p;
+    },
+    setStatus: (s) => {
+      head.status = s;
     }
-    for (const [k, v] of Object.entries(p)) {
-      if (k === "dangerouslySetInnerHTML") {
-        style.innerHTML = v.__html ?? "";
-        continue;
+  };
+}
+var _cliCtx = null;
+function makeClientCtx() {
+  if (_cliCtx) return _cliCtx;
+  _cliCtx = {
+    setTitle: (title) => {
+      document.title = title;
+    },
+    setStatus: () => {
+    },
+    addMeta: (props) => {
+      const p = props;
+      let meta = null;
+      if (p.name) meta = document.querySelector(`meta[name="${CSS.escape(p.name)}"]`);
+      else if (p.property) meta = document.querySelector(`meta[property="${CSS.escape(p.property)}"]`);
+      else if (p.httpEquiv ?? p["http-equiv"]) meta = document.querySelector(`meta[http-equiv="${CSS.escape(p.httpEquiv ?? p["http-equiv"])}"]`);
+      else if ("charSet" in p || "charset" in p) meta = document.querySelector("meta[charset]");
+      if (!meta) {
+        meta = document.createElement("meta");
+        document.head.appendChild(meta);
       }
-      if (v != null && v !== false) style.setAttribute(k, String(v));
-    }
-  }, []);
-  const addScript = import_react.default.useCallback((props) => {
-    const p = props;
-    let script = null;
-    if (p.src) script = document.querySelector(`script[src="${CSS.escape(p.src)}"]`);
-    else if (p["data-id"]) script = document.querySelector(`script[data-id="${CSS.escape(p["data-id"])}"]`);
-    if (!script) {
-      script = document.createElement("script");
-      document.body.appendChild(script);
-    }
-    for (const [k, v] of Object.entries(p)) {
-      if (k === "dangerouslySetInnerHTML") {
-        script.innerHTML = v.__html ?? "";
-        continue;
+      for (const [k, v] of Object.entries(p)) {
+        if (v != null && v !== false) meta.setAttribute(k === "charSet" ? "charset" : k === "httpEquiv" ? "http-equiv" : k, String(v));
+      }
+    },
+    addLink: (props) => {
+      const p = props;
+      let link = null;
+      const asSel = p.as ? `[as="${CSS.escape(p.as)}"]` : "";
+      if (p.rel && p.href) link = document.querySelector(`link[rel="${CSS.escape(p.rel)}"][href="${CSS.escape(p.href)}"]${asSel}`);
+      else if (p.rel) link = document.querySelector(`link[rel="${CSS.escape(p.rel)}"]${asSel}`);
+      if (!link) {
+        link = document.createElement("link");
+        document.head.appendChild(link);
+      }
+      for (const [k, v] of Object.entries(p)) {
+        if (v != null && v !== false) link.setAttribute(LINK_ATTR[k] ?? k, String(v));
+      }
+    },
+    addStyle: (props) => {
+      const p = props;
+      let style = null;
+      if (p["data-id"]) style = document.querySelector(`style[data-id="${CSS.escape(p["data-id"])}"]`);
+      if (!style) {
+        style = document.createElement("style");
+        document.head.appendChild(style);
+      }
+      for (const [k, v] of Object.entries(p)) {
+        if (k === "dangerouslySetInnerHTML") {
+          style.innerHTML = v.__html ?? "";
+          continue;
+        }
+        if (v != null && v !== false) style.setAttribute(k, String(v));
+      }
+    },
+    addScript: (props) => {
+      const p = props;
+      let script = null;
+      if (p.src) script = document.querySelector(`script[src="${CSS.escape(p.src)}"]`);
+      else if (p["data-id"]) script = document.querySelector(`script[data-id="${CSS.escape(p["data-id"])}"]`);
+      if (!script) {
+        script = document.createElement("script");
+        document.body.appendChild(script);
+      }
+      for (const [k, v] of Object.entries(p)) {
+        if (k === "dangerouslySetInnerHTML") {
+          script.innerHTML = v.__html ?? "";
+          continue;
+        }
+        if (v != null && v !== false) script.setAttribute(k, String(v));
       }
-      if (v != null && v !== false) script.setAttribute(k, String(v));
-    }
-  }, []);
-  const contextValue = import_react.default.useMemo(() => ({
-    setTitle,
-    addMeta,
-    addLink,
-    addStyle,
-    addScript,
-    setStatus: () => {
     }
-  }), [setTitle, addMeta, addLink, addStyle, addScript]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContext.Provider, { value: contextValue, children });
-});
-var useApp = () => import_react.default.useContext(AppContext);
+  };
+  return _cliCtx;
+}
+function getCtx() {
+  if (typeof window === "undefined") {
+    const head = globalThis.__hadarsContext?.head;
+    if (!head) return null;
+    return makeServerCtx(head);
+  }
+  return makeClientCtx();
+}
 var clientServerDataCache = /* @__PURE__ */ new Map();
 var pendingDataFetch = /* @__PURE__ */ new Map();
 var fetchedPaths = /* @__PURE__ */ new Set();
@@ -246,14 +226,17 @@ function useServerData(key, fn) {
       pendingDataFetch.set(pathKey, p);
       queueMicrotask(async () => {
         try {
-          const res = await fetch(pathKey, {
-            headers: { "Accept": "application/json" }
-          });
-          if (res.ok) {
-            const json = await res.json();
-            for (const [k, v] of Object.entries(json.serverData ?? {})) {
-              clientServerDataCache.set(k, v);
-            }
+          let json = null;
+          if (globalThis.__hadarsStatic) {
+            const sidecarUrl = pathKey.replace(/\/$/, "") + "/index.json";
+            const res = await fetch(sidecarUrl).catch(() => null);
+            if (res?.ok) json = await res.json().catch(() => null);
+          } else {
+            const res = await fetch(pathKey, { headers: { "Accept": "application/json" } });
+            if (res.ok) json = await res.json();
+          }
+          for (const [k, v] of Object.entries(json?.serverData ?? {})) {
+            clientServerDataCache.set(k, v);
           }
         } finally {
           fetchedPaths.add(pathKey);
@@ -267,26 +250,12 @@ function useServerData(key, fn) {
   const unsuspend = globalThis.__hadarsUnsuspend;
   if (!unsuspend) return void 0;
   const _u = unsuspend;
-  if (!_u.seenThisPass) _u.seenThisPass = /* @__PURE__ */ new Set();
-  if (!_u.seenLastPass) _u.seenLastPass = /* @__PURE__ */ new Set();
-  if (_u.newPassStarting) {
-    _u.seenLastPass = new Set(_u.seenThisPass);
-    _u.seenThisPass.clear();
-    _u.newPassStarting = false;
-  }
-  _u.seenThisPass.add(cacheKey);
+  if (!_u.pendingCreated) _u.pendingCreated = 0;
   const existing = unsuspend.cache.get(cacheKey);
+  if (existing?.status === "fulfilled" && _u.lastPendingKey === cacheKey) {
+    _u.lastPendingKeyAccessed = true;
+  }
   if (!existing) {
-    if (_u.seenLastPass.size > 0) {
-      const hasVanishedKey = [..._u.seenLastPass].some(
-        (k) => !_u.seenThisPass.has(k)
-      );
-      if (hasVanishedKey) {
-        throw new Error(
-          `[hadars] useServerData: key ${JSON.stringify(cacheKey)} appeared in this pass but a key that was present in the previous pass is now missing. This means the key is not stable across render passes (e.g. it contains Date.now(), Math.random(), or a value that changes on every render). Keys must be deterministic.`
-        );
-      }
-    }
     const result = fn();
     const isThenable = result !== null && typeof result === "object" && typeof result.then === "function";
     if (!isThenable) {
@@ -294,6 +263,22 @@ function useServerData(key, fn) {
       unsuspend.cache.set(cacheKey, { status: "fulfilled", value });
       return value;
     }
+    if (_u.lastPendingKey != null && !_u.lastPendingKeyAccessed) {
+      const prev = unsuspend.cache.get(_u.lastPendingKey);
+      if (prev?.status === "fulfilled") {
+        throw new Error(
+          `[hadars] useServerData: key ${JSON.stringify(cacheKey)} is not stable between render passes. The previous pass resolved ${JSON.stringify(_u.lastPendingKey)} but it was not requested in this pass \u2014 the key is changing between renders. Avoid dynamic values in keys (e.g. Date.now() or Math.random()); use stable, deterministic identifiers instead.`
+        );
+      }
+    }
+    _u.pendingCreated++;
+    if (_u.pendingCreated > 100) {
+      throw new Error(
+        `[hadars] useServerData: more than 100 async keys created in a single render. This usually means a key is not stable between renders (e.g. it contains Date.now() or Math.random()). Currently offending key: ${JSON.stringify(cacheKey)}.`
+      );
+    }
+    _u.lastPendingKey = cacheKey;
+    _u.lastPendingKeyAccessed = false;
     const promise = result.then(
       (value) => {
         unsuspend.cache.set(cacheKey, { status: "fulfilled", value });
@@ -303,25 +288,18 @@ function useServerData(key, fn) {
       }
     );
     unsuspend.cache.set(cacheKey, { status: "pending", promise });
-    _u.newPassStarting = true;
     throw promise;
   }
   if (existing.status === "pending") {
-    _u.newPassStarting = true;
     throw existing.promise;
   }
   if (existing.status === "rejected") throw existing.reason;
   return existing.value;
 }
 var Head = import_react.default.memo(({ children, status }) => {
-  const {
-    setStatus,
-    setTitle,
-    addMeta,
-    addLink,
-    addStyle,
-    addScript
-  } = useApp();
+  const ctx = getCtx();
+  if (!ctx) return null;
+  const { setStatus, setTitle, addMeta, addLink, addStyle, addScript } = ctx;
   if (status) {
     setStatus(status);
   }
@@ -366,7 +344,6 @@ var Head = import_react.default.memo(({ children, status }) => {
 });
 
 // src/index.tsx
-var HadarsContext = typeof window === "undefined" ? AppProviderSSR : AppProviderCSR;
 function loadModule(path) {
   return import(
     /* webpackIgnore: true */
@@ -375,7 +352,6 @@ function loadModule(path) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  HadarsContext,
   HadarsHead,
   initServerDataCache,
   loadModule,

package/dist/index.d.cts

@@ -1,7 +1,5 @@
-import * as React$1 from 'react';
-import React__default from 'react';
-import { A as AppContext } from './hadars-Bh-V5YXg.cjs';
-export { b as HadarsApp, H as HadarsEntryModule, c as HadarsGetClientProps, d as HadarsGetFinalProps, e as HadarsGetInitialProps, a as HadarsOptions, f as HadarsProps, g as HadarsRequest } from './hadars-Bh-V5YXg.cjs';
+export { G as GraphQLExecutor, b as HadarsApp, H as HadarsEntryModule, c as HadarsGetClientProps, d as HadarsGetFinalProps, e as HadarsGetInitialProps, a as HadarsOptions, f as HadarsProps, g as HadarsRequest, h as HadarsSourceEntry, i as HadarsStaticContext } from './hadars-mKu5txjW.cjs';
+import React from 'react';
 
 /** Call this before hydrating to seed the client cache from the server's data.
  *  Invoked automatically by the hadars client bootstrap.
@@ -34,15 +32,11 @@ declare function initServerDataCache(data: Record<string, unknown>): void;
  * if (!user) return null; // undefined while pending on the first SSR pass
  */
 declare function useServerData<T>(key: string | string[], fn: () => Promise<T> | T): T | undefined;
-declare const Head: React__default.FC<{
-    children?: React__default.ReactNode;
+declare const Head: React.FC<{
+    children?: React.ReactNode;
     status?: number;
 }>;
 
-declare const HadarsContext: React$1.FC<{
-    children: React.ReactNode;
-    context: AppContext;
-}>;
 /**
  * Dynamically loads a module with target-aware behaviour:
  *
@@ -63,4 +57,4 @@ declare const HadarsContext: React$1.FC<{
  */
 declare function loadModule<T = any>(path: string): Promise<T>;
 
-export { HadarsContext, Head as HadarsHead, initServerDataCache, loadModule, useServerData };
+export { Head as HadarsHead, initServerDataCache, loadModule, useServerData };

package/dist/index.d.ts

@@ -1,7 +1,5 @@
-import * as React$1 from 'react';
-import React__default from 'react';
-import { A as AppContext } from './hadars-Bh-V5YXg.js';
-export { b as HadarsApp, H as HadarsEntryModule, c as HadarsGetClientProps, d as HadarsGetFinalProps, e as HadarsGetInitialProps, a as HadarsOptions, f as HadarsProps, g as HadarsRequest } from './hadars-Bh-V5YXg.js';
+export { G as GraphQLExecutor, b as HadarsApp, H as HadarsEntryModule, c as HadarsGetClientProps, d as HadarsGetFinalProps, e as HadarsGetInitialProps, a as HadarsOptions, f as HadarsProps, g as HadarsRequest, h as HadarsSourceEntry, i as HadarsStaticContext } from './hadars-mKu5txjW.js';
+import React from 'react';
 
 /** Call this before hydrating to seed the client cache from the server's data.
  *  Invoked automatically by the hadars client bootstrap.
@@ -34,15 +32,11 @@ declare function initServerDataCache(data: Record<string, unknown>): void;
  * if (!user) return null; // undefined while pending on the first SSR pass
  */
 declare function useServerData<T>(key: string | string[], fn: () => Promise<T> | T): T | undefined;
-declare const Head: React__default.FC<{
-    children?: React__default.ReactNode;
+declare const Head: React.FC<{
+    children?: React.ReactNode;
     status?: number;
 }>;
 
-declare const HadarsContext: React$1.FC<{
-    children: React.ReactNode;
-    context: AppContext;
-}>;
 /**
  * Dynamically loads a module with target-aware behaviour:
  *
@@ -63,4 +57,4 @@ declare const HadarsContext: React$1.FC<{
  */
 declare function loadModule<T = any>(path: string): Promise<T>;
 
-export { HadarsContext, Head as HadarsHead, initServerDataCache, loadModule, useServerData };
+export { Head as HadarsHead, initServerDataCache, loadModule, useServerData };