dinou 6.1.0 → 7.0.0

package/dinou/core/client-error-webpack.jsx

@@ -1,432 +0,0 @@
-import {
-  use,
-  useState,
-  useEffect,
-  useTransition,
-  useLayoutEffect,
-  useMemo,
-  Component,
-} from "react";
-import { createFromFetch } from "react-server-dom-webpack/client";
-import { hydrateRoot } from "react-dom/client";
-import { RouterContext } from "./navigation.js";
-import { resolveUrl, isExternalUrl } from "./navigation-utils.js";
-import { createServerFunctionProxy } from "./server-function-proxy-webpack.js";
-
-// ====================================================================
-// 1. GLOBAL STATE (Outside the component)
-// ====================================================================
-const cache = new Map();
-const scrollCache = new Map();
-
-const getCurrentRoute = () => window.location.pathname + window.location.search;
-
-// ====================================================================
-// 2. PURE HELPERS
-// ====================================================================
-
-// Helper to detect if we only change the hash on the same page
-const isHashChangeOnly = (finalPath) => {
-  const targetUrl = new URL(finalPath, window.location.origin);
-  const normalize = (p) =>
-    p.length > 1 && p.endsWith("/") ? p.slice(0, -1) : p;
-
-  const targetPath = normalize(targetUrl.pathname);
-  const currentPath = normalize(window.location.pathname);
-
-  return (
-    targetPath + targetUrl.search === currentPath + window.location.search &&
-    targetUrl.hash !== ""
-  );
-};
-
-let isInitialErrorLoad = true;
-
-const getRSCPayload = (rscKey, isPrefetch = false) => {
-  const url = rscKey.split("::")[0];
-  // 1. Check Idempotence (Avoids the infinite loop of React)
-  if (cache.has(url)) return cache.get(url);
-
-  let promise;
-  if (isInitialErrorLoad && url === getCurrentRoute()) {
-    isInitialErrorLoad = false;
-    const payloadUrl = "/____rsc_payload_error____" + url;
-    promise = createFromFetch(
-      fetch(payloadUrl, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          error: {
-            message: window.__DINOU_ERROR_MESSAGE__ || "Unknown Error",
-            stack: window.__DINOU_ERROR_STACK__,
-            name: window.__DINOU_ERROR_NAME__,
-          },
-        }),
-      }).then((res) => {
-        if (res.headers.has("x-rsc-redirect")) {
-          const redirectUrl = res.headers.get("x-rsc-redirect");
-          cache.delete(url);
-          if (!isPrefetch) {
-            if (window.__DINOU_ROUTER_NAVIGATE__) {
-              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
-            } else {
-              window.location.href = redirectUrl;
-            }
-          }
-          return new Promise(() => {});
-        }
-        return res;
-      }),
-      {
-        callServer: async (id, args) => {
-          const proxy = createServerFunctionProxy(id);
-          return proxy(...args);
-        }
-      }
-    );
-  } else {
-    // Normal client.jsx load logic!
-    let payloadUrl = "/____rsc_payload____" + url;
-    const buildId = window.__DINOU_BUILD_ID__;
-    if (buildId) {
-      payloadUrl += (payloadUrl.includes("?") ? "&" : "?") + "buildId=" + buildId;
-      window.__DINOU_BUILD_ID__ = undefined;
-    }
-
-    promise = createFromFetch(
-      fetch(payloadUrl).then((res) => {
-        if (res.headers.has("x-rsc-redirect")) {
-          const redirectUrl = res.headers.get("x-rsc-redirect");
-          cache.delete(url);
-          if (!isPrefetch) {
-            if (window.__DINOU_ROUTER_NAVIGATE__) {
-              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
-            } else {
-              window.location.href = redirectUrl;
-            }
-          }
-          return new Promise(() => {});
-        }
-        return res;
-      }),
-      {
-        callServer: async (id, args) => {
-          const proxy = createServerFunctionProxy(id);
-          return proxy(...args);
-        }
-      }
-    );
-  }
-
-  cache.set(url, promise);
-  return promise;
-};
-
-const getErrorRSCPayload = (route, error) => {
-  const url = route.split("::")[0];
-  const cacheKey = `error::${url}::${error.message || String(error)}`;
-  if (cache.has(cacheKey)) {
-    return cache.get(cacheKey);
-  }
-
-  const payloadUrl = "/____rsc_payload_error____" + url;
-  const promise = createFromFetch(
-    fetch(payloadUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        error: {
-          message: error.message || "Unknown Error",
-          name: error.name,
-          stack: error.stack,
-        },
-      }),
-    }).then((res) => {
-      if (res.headers.has("x-rsc-redirect")) {
-        const redirectUrl = res.headers.get("x-rsc-redirect");
-        cache.delete(cacheKey);
-        if (window.__DINOU_ROUTER_NAVIGATE__) {
-          window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
-        } else {
-          window.location.href = redirectUrl;
-        }
-        return new Promise(() => {});
-      }
-      return res;
-    }),
-    {
-      callServer: async (id, args) => {
-        const proxy = createServerFunctionProxy(id);
-        return proxy(...args);
-      }
-    }
-  );
-  cache.set(cacheKey, promise);
-  return promise;
-};
-
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error, errorInfo) {
-    console.error("[Dinou] ErrorBoundary caught error:", error, errorInfo);
-    if (this.props.onError) {
-      this.props.onError(error);
-    }
-  }
-
-  render() {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback(this.state.error);
-      }
-      const isDev = process.env.NODE_ENV !== "production";
-      return (
-        <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
-          <h2>Application Error</h2>
-          <p>An unexpected error occurred on the client.</p>
-          <pre style={{ backgroundColor: "#f5f5f5", padding: "15px", borderRadius: "5px", overflowX: "auto" }}>
-            {isDev ? (
-              <>
-                <div style={{ fontWeight: "bold", marginBottom: "10px" }}>
-                  {this.state.error?.name || "Error"}: {this.state.error?.message || String(this.state.error)}
-                </div>
-                <div>{this.state.error?.stack}</div>
-              </>
-            ) : (
-              this.state.error?.message || String(this.state.error)
-            )}
-          </pre>
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-}
-
-
-// ====================================================================
-// 3. ROUTER COMPONENT
-// ====================================================================
-
-function Router() {
-  const [route, setRoute] = useState(getCurrentRoute());
-  const [isPopState, setIsPopState] = useState(false);
-  const [isPending, startTransition] = useTransition();
-  const [version, setVersion] = useState(0);
-  const [navError, setNavError] = useState(null);
-
-  // 🧭 NAVIGATE FUNCTION (Core Logic)
-  const navigate = (href, options = {}) => {
-    const finalPath = resolveUrl(href, window.location.pathname);
-
-    // 🛡️ NAVIGATE PROTECTION: Hash Detection
-    if (isHashChangeOnly(finalPath)) {
-      if (options.replace) {
-        window.history.replaceState(null, "", finalPath);
-      } else {
-        window.history.pushState(null, "", finalPath);
-      }
-
-      // Manual scroll
-      const hash = new URL(finalPath, window.location.origin).hash;
-      const id = hash.replace("#", "");
-      const element = document.getElementById(id);
-      if (element) {
-        element.scrollIntoView({ behavior: "auto" });
-      }
-      return; // CRITICAL STOP
-    }
-
-    if (options.fresh) {
-      // console.log(`[Router] Force refreshing: ${finalPath}`);
-      cache.delete(finalPath);
-    }
-
-    // Normal RSC Navigation
-    scrollCache.set(
-      window.location.pathname + window.location.search,
-      window.scrollY,
-    );
-    // cache.delete(finalPath);
-    if (options.replace) {
-      window.history.replaceState(null, "", finalPath);
-    } else {
-      window.history.pushState(null, "", finalPath);
-    }
-
-    startTransition(() => {
-      setIsPopState(false);
-      setRoute(finalPath);
-      setNavError(null);
-    });
-  };
-
-  // 🔌 EFFECT 1: Expose Global Prefetch & Navigation
-  useEffect(() => {
-    window.__DINOU_PREFETCH__ = (url) => {
-      // 🛡️ PREFETCH PROTECTION: If it's a local hash, do nothing
-      if (isHashChangeOnly(url)) return;
-      getRSCPayload(url, true);
-    };
-
-    window.__DINOU_ROUTER_NAVIGATE__ = navigate;
-
-    // Hydration
-    document.body.setAttribute("data-hydrated", "true");
-
-    return () => {
-      if (window.__DINOU_ROUTER_NAVIGATE__ === navigate) {
-        window.__DINOU_ROUTER_NAVIGATE__ = undefined;
-      }
-    };
-  }, [navigate]);
-
-  const back = () => window.history.back();
-  const forward = () => window.history.forward();
-  const refresh = () => {
-    const currentPath = window.location.pathname + window.location.search;
-    // console.log(`[Router] Soft Refreshing: ${currentPath}`);
-
-    // 1. Delete cache to ensure fresh data
-    cache.delete(currentPath);
-
-    // 2. Start transition (to show isPending if you want)
-    startTransition(() => {
-      // 3. Increment version to force re-execution of useMemo
-      setVersion((v) => v + 1);
-      setNavError(null);
-    });
-  };
-
-  // 🔌 EFFECT 2: Global Listeners (Click and PopState)
-  useEffect(() => {
-    if ("scrollRestoration" in window.history) {
-      window.history.scrollRestoration = "manual";
-    }
-
-    const onNavigate = (e) => {
-      // 🛡️ FIX: If the event was already processed (preventDefault called by Link), we ignore it.
-      if (e.defaultPrevented) return;
-      const anchor = e.target.closest("a");
-      if (
-        !anchor ||
-        anchor.target ||
-        e.metaKey ||
-        e.ctrlKey ||
-        e.shiftKey ||
-        e.altKey
-      ) {
-        return;
-      }
-
-      const href = anchor.getAttribute("href");
-      if (!href || href.startsWith("mailto:") || href.startsWith("tel:") || isExternalUrl(href))
-        return;
-
-      // We use the unified helper
-      const finalPath = resolveUrl(href, window.location.pathname);
-
-      // We use the same hash detection helper for consistency
-      if (isHashChangeOnly(finalPath)) {
-        return; // The browser handles it natively or navigate would handle it
-      }
-
-      e.preventDefault();
-      navigate(href);
-    };
-
-    const onPopState = () => {
-      const target = getCurrentRoute();
-      // Optional: cache.delete(target); // Uncomment if you want refresh on going back
-      startTransition(() => {
-        setIsPopState(true);
-        setRoute(target);
-        setNavError(null);
-      });
-    };
-
-    window.addEventListener("click", onNavigate);
-    window.addEventListener("popstate", onPopState);
-
-    return () => {
-      window.removeEventListener("click", onNavigate);
-      window.removeEventListener("popstate", onPopState);
-    };
-  }, []);
-
-  // 🔌 EFFECT 3: Scroll Management (Restoration)
-  useLayoutEffect(() => {
-    requestAnimationFrame(() => {
-      if (window.location.hash) return;
-
-      if (isPopState) {
-        const key = route;
-        const savedY = scrollCache.get(key);
-        if (savedY !== undefined) {
-          window.scrollTo(0, savedY);
-        }
-      } else {
-        window.scrollTo(0, 0);
-      }
-    });
-  }, [route, isPopState]);
-
-  // 🔌 EFFECT 4: Scroll Management (Hash on new page)
-  useEffect(() => {
-    const hash = window.location.hash;
-    if (!hash) return;
-
-    requestAnimationFrame(() => {
-      const id = hash.replace("#", "");
-      const element = document.getElementById(id);
-      if (element) {
-        element.scrollIntoView({ behavior: "auto" });
-      }
-    });
-  }, [route]);
-
-  // RSC Logic
-  const rscKey = route + "::" + version;
-  const content = navError ? getErrorRSCPayload(route, navError) : getRSCPayload(rscKey);
-
-  const contextValue = useMemo(
-    () => ({
-      url: route,
-      navigate,
-      back,
-      forward,
-      refresh,
-      isPending,
-    }),
-    [route, isPending],
-  );
-
-  return (
-    <RouterContext.Provider value={contextValue}>
-      <ErrorBoundary
-        key={navError ? "error" : "normal"}
-        onError={setNavError}
-      >
-        {use(content)}
-      </ErrorBoundary>
-    </RouterContext.Provider>
-  );
-}
-
-hydrateRoot(document, <Router />);
-
-if (import.meta.hot) {
-  import.meta.hot.accept();
-}