@nestjs-ssr/react 0.2.6 → 0.3.1

package/dist/client.js

@@ -1,16 +1,43 @@
 'use strict';
 
-var React = require('react');
+var React2 = require('react');
+var client = require('react-dom/client');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var PageContext = /* @__PURE__ */ React.createContext(null);
-function PageContextProvider({ context, children }) {
-  return /* @__PURE__ */ React__default.default.createElement(PageContext.Provider, {
+var CONTEXT_KEY = /* @__PURE__ */ Symbol.for("nestjs-ssr.PageContext");
+var globalStore = globalThis;
+function getOrCreateContext() {
+  if (!globalStore[CONTEXT_KEY]) {
+    globalStore[CONTEXT_KEY] = /* @__PURE__ */ React2.createContext(null);
+  }
+  return globalStore[CONTEXT_KEY];
+}
+__name(getOrCreateContext, "getOrCreateContext");
+var PageContext = getOrCreateContext();
+var setPageContextState = null;
+function registerPageContextState(setter) {
+  setPageContextState = setter;
+}
+__name(registerPageContextState, "registerPageContextState");
+function updatePageContext(context) {
+  setPageContextState?.(context);
+}
+__name(updatePageContext, "updatePageContext");
+function PageContextProvider({ context: initialContext, children, isSegment = false }) {
+  const [context, setContext] = React2.useState(initialContext);
+  React2.useEffect(() => {
+    if (!isSegment) {
+      registerPageContextState(setContext);
+    }
+  }, [
+    isSegment
+  ]);
+  return /* @__PURE__ */ React2__default.default.createElement(PageContext.Provider, {
     value: context
   }, children);
 }
@@ -22,7 +49,7 @@ function createSSRHooks() {
     * Contains URL metadata, headers, and any custom properties you've added.
     */
     usePageContext: /* @__PURE__ */ __name(() => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("usePageContext must be used within PageContextProvider");
       }
@@ -39,7 +66,7 @@ function createSSRHooks() {
     * ```
     */
     useParams: /* @__PURE__ */ __name(() => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useParams must be used within PageContextProvider");
       }
@@ -57,7 +84,7 @@ function createSSRHooks() {
     * ```
     */
     useQuery: /* @__PURE__ */ __name(() => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useQuery must be used within PageContextProvider");
       }
@@ -77,7 +104,7 @@ function createSSRHooks() {
     * ```
     */
     useRequest: /* @__PURE__ */ __name(() => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useRequest must be used within PageContextProvider");
       }
@@ -103,7 +130,7 @@ function createSSRHooks() {
     * ```
     */
     useHeaders: /* @__PURE__ */ __name(() => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useHeaders must be used within PageContextProvider");
       }
@@ -138,7 +165,7 @@ function createSSRHooks() {
     * ```
     */
     useHeader: /* @__PURE__ */ __name((name) => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useHeader must be used within PageContextProvider");
       }
@@ -164,7 +191,7 @@ function createSSRHooks() {
     * ```
     */
     useCookies: /* @__PURE__ */ __name(() => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useCookies must be used within PageContextProvider");
       }
@@ -186,7 +213,7 @@ function createSSRHooks() {
     * ```
     */
     useCookie: /* @__PURE__ */ __name((name) => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useCookie must be used within PageContextProvider");
       }
@@ -202,6 +229,326 @@ function createSSRHooks() {
   };
 }
 __name(createSSRHooks, "createSSRHooks");
+var defaultHooks = createSSRHooks();
+var usePageContext = defaultHooks.usePageContext;
+var useParams = defaultHooks.useParams;
+var useQuery = defaultHooks.useQuery;
+var useRequest = defaultHooks.useRequest;
+var useHeaders = defaultHooks.useHeaders;
+var useHeader = defaultHooks.useHeader;
+var useCookies = defaultHooks.useCookies;
+var useCookie = defaultHooks.useCookie;
+var rootRegistry = /* @__PURE__ */ new WeakMap();
+function hydrateSegment(outlet, componentName, props) {
+  const modules = window.__MODULES__;
+  if (!modules) {
+    console.warn("[navigation] Module registry not available for segment hydration. Make sure entry-client.tsx exports window.__MODULES__.");
+    return;
+  }
+  const ViewComponent = resolveComponent(componentName, modules);
+  if (!ViewComponent) {
+    console.warn(`[navigation] Component "${componentName}" not found for hydration. Available components: ` + Object.keys(modules).map((path) => {
+      const c = modules[path].default;
+      return c?.displayName || c?.name || "anonymous";
+    }).join(", "));
+    return;
+  }
+  const context = window.__CONTEXT__ || {};
+  const element = /* @__PURE__ */ React2__default.default.createElement(PageContextProvider, {
+    context,
+    isSegment: true
+  }, /* @__PURE__ */ React2__default.default.createElement(ViewComponent, props));
+  let wrapper = outlet.querySelector("[data-segment-root]");
+  if (wrapper) {
+    const existingRoot = rootRegistry.get(wrapper);
+    if (existingRoot) {
+      existingRoot.unmount();
+      rootRegistry.delete(wrapper);
+    }
+  }
+  wrapper = document.createElement("div");
+  wrapper.setAttribute("data-segment-root", "true");
+  outlet.innerHTML = "";
+  outlet.appendChild(wrapper);
+  const root = client.createRoot(wrapper);
+  root.render(element);
+  rootRegistry.set(wrapper, root);
+}
+__name(hydrateSegment, "hydrateSegment");
+function resolveComponent(name, modules) {
+  const componentMap = Object.entries(modules).filter(([path, module]) => {
+    const filename = path.split("/").pop();
+    if (filename === "entry-client.tsx" || filename === "entry-server.tsx") {
+      return false;
+    }
+    return module.default !== void 0;
+  }).map(([path, module]) => {
+    const component = module.default;
+    const componentName = component.displayName || component.name;
+    const filename = path.split("/").pop()?.replace(".tsx", "");
+    const normalizedFilename = filename ? filename.charAt(0).toUpperCase() + filename.slice(1) : void 0;
+    return {
+      component,
+      name: componentName,
+      filename,
+      normalizedFilename
+    };
+  });
+  let match = componentMap.find((c) => c.name === name || c.normalizedFilename === name || c.filename === name.toLowerCase());
+  if (!match && /^default(_\d+)?$/.test(name)) {
+    if (componentMap.length === 1) {
+      match = componentMap[0];
+    } else {
+      const indexMatch = name.match(/^default_(\d+)$/);
+      const index = indexMatch ? parseInt(indexMatch[1], 10) - 1 : 0;
+      const defaultComponents = componentMap.filter((c) => c.name === "default").sort((a, b) => (a.filename || "").localeCompare(b.filename || ""));
+      if (defaultComponents[index]) {
+        match = defaultComponents[index];
+      }
+    }
+  }
+  return match?.component;
+}
+__name(resolveComponent, "resolveComponent");
+
+// src/react/navigation/navigate.ts
+var setNavigationState = null;
+function registerNavigationState(setter) {
+  setNavigationState = setter;
+}
+__name(registerNavigationState, "registerNavigationState");
+async function navigate(url, options = {}) {
+  const { replace = false, scroll = true } = options;
+  setNavigationState?.("loading");
+  const parsedUrl = new URL(url, window.location.origin);
+  const currentContext = window.__CONTEXT__;
+  if (currentContext) {
+    const optimisticContext = {
+      ...currentContext,
+      path: parsedUrl.pathname,
+      url
+    };
+    updatePageContext(optimisticContext);
+  }
+  try {
+    const currentLayouts = getCurrentLayouts();
+    if (currentLayouts.length === 0) {
+      window.location.href = url;
+      return;
+    }
+    const response = await fetchSegment(url, currentLayouts);
+    if (!response.swapTarget) {
+      window.location.href = url;
+      return;
+    }
+    const outlet = await swapContent(response.html, response.swapTarget);
+    if (outlet) {
+      hydrateSegment(outlet, response.componentName, response.props);
+    }
+    if (replace) {
+      history.replaceState({
+        url
+      }, "", url);
+    } else {
+      history.pushState({
+        url
+      }, "", url);
+    }
+    if (response.context) {
+      updatePageContext(response.context);
+      window.__CONTEXT__ = response.context;
+    }
+    if (response.head) {
+      updateHead(response.head);
+    }
+    if (scroll) {
+      window.scrollTo(0, 0);
+    }
+    window.__COMPONENT_NAME__ = response.componentName;
+    window.__INITIAL_STATE__ = response.props;
+  } catch (error) {
+    console.error("Navigation failed:", error);
+    window.location.href = url;
+  } finally {
+    setNavigationState?.("idle");
+  }
+}
+__name(navigate, "navigate");
+function getCurrentLayouts() {
+  return Array.from(document.querySelectorAll("[data-layout]")).map((el) => el.getAttribute("data-layout"));
+}
+__name(getCurrentLayouts, "getCurrentLayouts");
+async function fetchSegment(url, currentLayouts) {
+  const res = await fetch(url, {
+    headers: {
+      "X-Current-Layouts": currentLayouts.join(",")
+    }
+  });
+  if (!res.ok) {
+    throw new Error(`Navigation failed: ${res.status}`);
+  }
+  return res.json();
+}
+__name(fetchSegment, "fetchSegment");
+async function swapContent(html, swapTarget) {
+  const outlet = document.querySelector(`[data-outlet="${swapTarget}"]`);
+  if (!outlet) {
+    window.location.reload();
+    return null;
+  }
+  const swap = /* @__PURE__ */ __name(() => {
+    outlet.innerHTML = html;
+  }, "swap");
+  if ("startViewTransition" in document) {
+    try {
+      await document.startViewTransition(swap).finished;
+    } catch {
+      swap();
+    }
+  } else {
+    swap();
+  }
+  return outlet;
+}
+__name(swapContent, "swapContent");
+function updateHead(head) {
+  if (head.title) {
+    document.title = head.title;
+  }
+  const updateMeta = /* @__PURE__ */ __name((name, content) => {
+    let el = document.querySelector(`meta[name="${name}"]`);
+    if (!el) {
+      el = document.createElement("meta");
+      el.setAttribute("name", name);
+      document.head.appendChild(el);
+    }
+    el.setAttribute("content", content);
+  }, "updateMeta");
+  if (head.description) {
+    updateMeta("description", head.description);
+  }
+  if (head.keywords) {
+    updateMeta("keywords", head.keywords);
+  }
+  const updateOgMeta = /* @__PURE__ */ __name((property, content) => {
+    let el = document.querySelector(`meta[property="${property}"]`);
+    if (!el) {
+      el = document.createElement("meta");
+      el.setAttribute("property", property);
+      document.head.appendChild(el);
+    }
+    el.setAttribute("content", content);
+  }, "updateOgMeta");
+  if (head.ogTitle) {
+    updateOgMeta("og:title", head.ogTitle);
+  }
+  if (head.ogDescription) {
+    updateOgMeta("og:description", head.ogDescription);
+  }
+  if (head.ogImage) {
+    updateOgMeta("og:image", head.ogImage);
+  }
+  if (head.canonical) {
+    let canonical = document.querySelector('link[rel="canonical"]');
+    if (!canonical) {
+      canonical = document.createElement("link");
+      canonical.setAttribute("rel", "canonical");
+      document.head.appendChild(canonical);
+    }
+    canonical.setAttribute("href", head.canonical);
+  }
+}
+__name(updateHead, "updateHead");
+
+// src/react/navigation/navigation-context.tsx
+var NavigationContext = /* @__PURE__ */ React2.createContext(null);
+function NavigationProvider({ children }) {
+  const [state, setState] = React2.useState("idle");
+  React2.useEffect(() => {
+    registerNavigationState(setState);
+  }, []);
+  return /* @__PURE__ */ React2__default.default.createElement(NavigationContext.Provider, {
+    value: {
+      state
+    }
+  }, children);
+}
+__name(NavigationProvider, "NavigationProvider");
+function useNavigationContext() {
+  const context = React2.useContext(NavigationContext);
+  if (!context) {
+    return {
+      state: "idle"
+    };
+  }
+  return context;
+}
+__name(useNavigationContext, "useNavigationContext");
+function Link({ href, replace = false, scroll = true, children, onClick, ...props }) {
+  const handleClick = /* @__PURE__ */ __name((e) => {
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0 || props.target === "_blank" || !isSameOrigin(href)) {
+      onClick?.(e);
+      return;
+    }
+    e.preventDefault();
+    onClick?.(e);
+    navigate(href, {
+      replace,
+      scroll
+    });
+  }, "handleClick");
+  return /* @__PURE__ */ React2__default.default.createElement("a", {
+    href,
+    onClick: handleClick,
+    ...props
+  }, children);
+}
+__name(Link, "Link");
+function isSameOrigin(url) {
+  try {
+    const parsed = new URL(url, window.location.origin);
+    return parsed.origin === window.location.origin;
+  } catch {
+    return true;
+  }
+}
+__name(isSameOrigin, "isSameOrigin");
+function useNavigation() {
+  const { state } = useNavigationContext();
+  return {
+    state,
+    navigate
+  };
+}
+__name(useNavigation, "useNavigation");
+function useNavigationState() {
+  return useNavigationContext().state;
+}
+__name(useNavigationState, "useNavigationState");
+function useNavigate() {
+  return React2.useCallback(navigate, []);
+}
+__name(useNavigate, "useNavigate");
+function useIsNavigating() {
+  return useNavigationContext().state === "loading";
+}
+__name(useIsNavigating, "useIsNavigating");
 
+exports.Link = Link;
+exports.NavigationProvider = NavigationProvider;
 exports.PageContextProvider = PageContextProvider;
 exports.createSSRHooks = createSSRHooks;
+exports.navigate = navigate;
+exports.updatePageContext = updatePageContext;
+exports.useCookie = useCookie;
+exports.useCookies = useCookies;
+exports.useHeader = useHeader;
+exports.useHeaders = useHeaders;
+exports.useIsNavigating = useIsNavigating;
+exports.useNavigate = useNavigate;
+exports.useNavigation = useNavigation;
+exports.useNavigationState = useNavigationState;
+exports.usePageContext = usePageContext;
+exports.useParams = useParams;
+exports.useQuery = useQuery;
+exports.useRequest = useRequest;