hadars 0.2.0 → 0.2.2-rc.0

package/dist/index.js

@@ -1,6 +1,5 @@
 // src/utils/Head.tsx
 import React from "react";
-import { jsx } from "react/jsx-runtime";
 function deriveKey(tag, props) {
   switch (tag) {
     case "meta": {
@@ -30,134 +29,116 @@ function deriveKey(tag, props) {
       return `${tag}:${JSON.stringify(props)}`;
   }
 }
-var AppContext = React.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 = React.memo(({ children, context }) => {
-  const { head } = context;
-  const setTitle = React.useCallback((title) => {
-    head.title = title;
-  }, [head]);
-  const addMeta = React.useCallback((props) => {
-    head.meta[deriveKey("meta", props)] = props;
-  }, [head]);
-  const addLink = React.useCallback((props) => {
-    head.link[deriveKey("link", props)] = props;
-  }, [head]);
-  const addStyle = React.useCallback((props) => {
-    head.style[deriveKey("style", props)] = props;
-  }, [head]);
-  const addScript = React.useCallback((props) => {
-    head.script[deriveKey("script", props)] = props;
-  }, [head]);
-  const setStatus = React.useCallback((status) => {
-    head.status = status;
-  }, [head]);
-  const contextValue = React.useMemo(() => ({
-    setTitle,
-    addMeta,
-    addLink,
-    addStyle,
-    addScript,
-    setStatus
-  }), [setTitle, addMeta, addLink, addStyle, addScript, setStatus]);
-  return /* @__PURE__ */ jsx(AppContext.Provider, { value: contextValue, children });
-});
-var AppProviderCSR = React.memo(({ children }) => {
-  const setTitle = React.useCallback((title) => {
-    document.title = title;
-  }, []);
-  const addMeta = React.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 = React.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 = React.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 = React.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 = React.useMemo(() => ({
-    setTitle,
-    addMeta,
-    addLink,
-    addStyle,
-    addScript,
-    setStatus: () => {
     }
-  }), [setTitle, addMeta, addLink, addStyle, addScript]);
-  return /* @__PURE__ */ jsx(AppContext.Provider, { value: contextValue, children });
-});
-var useApp = () => React.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();
@@ -206,14 +187,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);
@@ -227,26 +211,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) {
@@ -254,6 +224,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 });
@@ -263,25 +249,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 = React.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);
   }
@@ -326,7 +305,6 @@ var Head = React.memo(({ children, status }) => {
 });
 
 // src/index.tsx
-var HadarsContext = typeof window === "undefined" ? AppProviderSSR : AppProviderCSR;
 function loadModule(path) {
   return import(
     /* webpackIgnore: true */
@@ -334,7 +312,6 @@ function loadModule(path) {
   );
 }
 export {
-  HadarsContext,
   Head as HadarsHead,
   initServerDataCache,
   loadModule,

package/dist/lambda.cjs

@@ -1226,29 +1226,33 @@ var getReactResponse = async (req, opts) => {
     head: { title: "Hadars App", meta: {}, link: {}, style: {}, script: {}, status: 200 }
   };
   let props = {
-    ...getInitProps ? await getInitProps(req) : {},
+    ...getInitProps ? await getInitProps(req, opts.staticCtx) : {},
     location: req.location,
     context
   };
   const unsuspend = { cache: /* @__PURE__ */ new Map() };
   globalThis.__hadarsUnsuspend = unsuspend;
+  globalThis.__hadarsContext = context;
   const element = createElement(App, props);
   try {
     await renderPreflight(element);
   } finally {
     globalThis.__hadarsUnsuspend = null;
+    globalThis.__hadarsContext = null;
   }
   const status = context.head.status;
   const getAppBody = async () => {
     globalThis.__hadarsUnsuspend = unsuspend;
+    globalThis.__hadarsContext = context;
     try {
       return await renderToString(element);
     } finally {
       globalThis.__hadarsUnsuspend = null;
+      globalThis.__hadarsContext = null;
     }
   };
   const finalize = async () => {
-    const { context: _, ...restProps } = getFinalProps ? await getFinalProps(props) : props;
+    const restProps = getFinalProps ? await getFinalProps(props) : props;
     const serverData = {};
     let hasServerData = false;
     for (const [key, entry] of unsuspend.cache) {

package/dist/lambda.d.cts

@@ -1,5 +1,4 @@
-import { H as HadarsEntryModule, a as HadarsOptions } from './hadars-Bh-V5YXg.cjs';
-import 'react';
+import { H as HadarsEntryModule, a as HadarsOptions } from './hadars-mKu5txjW.cjs';
 
 /**
  * AWS Lambda adapter for hadars.

package/dist/lambda.d.ts

@@ -1,5 +1,4 @@
-import { H as HadarsEntryModule, a as HadarsOptions } from './hadars-Bh-V5YXg.js';
-import 'react';
+import { H as HadarsEntryModule, a as HadarsOptions } from './hadars-mKu5txjW.js';
 
 /**
  * AWS Lambda adapter for hadars.