arcway 0.1.1 → 0.1.3

package/client/index.js

@@ -18,7 +18,7 @@ import { useGraphQL, useGraphQLMutation } from './hooks/use-graphql.js';
 import { WsManager } from './ws.js';
 import useLocalStorage from './hooks/web/use-local-storage.js';
 import useClickOutside from './hooks/web/use-click-outside.js';
-import { Link, Router, SoloRouter, useRouter, usePathname, useParams, useSearchParams } from './router.jsx';
+import { Link, Router, SoloRouter, useRouter, usePathname, useParams, useSearchParams } from './router.js';
 import { Head, setSSRHeadData, clearSSRHeadData, renderHeadToString } from './head.js';
 import { useEnv, env, collectPublicEnv, buildEnvScriptTag } from './env.js';
 

package/client/router.js

@@ -0,0 +1,274 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  useRef,
+  useTransition,
+  createElement
+} from "react";
+import {
+  readClientManifest,
+  loadPage,
+  matchClientRoute,
+  loadLoadingComponents,
+  prefetchRoute
+} from "./page-loader.js";
+import { parseQuery } from "./query.js";
+const ROUTER_CTX_KEY = "__router_context__";
+const RouterContext = globalThis[ROUTER_CTX_KEY] ??= createContext(null);
+function wrapInLayouts(element, layouts) {
+  for (let i = layouts.length - 1; i >= 0; i--) {
+    element = createElement(layouts[i], null, element);
+  }
+  return element;
+}
+function useRouter() {
+  const ctx = useContext(RouterContext);
+  if (!ctx) {
+    throw new Error("useRouter must be used within a <Router> provider");
+  }
+  return useMemo(
+    () => ({
+      pathname: ctx.pathname,
+      params: ctx.params,
+      query: typeof window !== "undefined" ? parseQuery(window.location.search) : {},
+      push: (to, options) => ctx.navigate(to, { ...options, replace: false }),
+      replace: (to, options) => ctx.navigate(to, { ...options, replace: true }),
+      back: () => {
+        if (typeof window !== "undefined") window.history.back();
+      },
+      forward: () => {
+        if (typeof window !== "undefined") window.history.forward();
+      },
+      refresh: () => {
+        if (typeof window !== "undefined") window.location.reload();
+      }
+    }),
+    [ctx.pathname, ctx.params, ctx.navigate]
+  );
+}
+function usePathname() {
+  return useRouter().pathname;
+}
+function useParams() {
+  return useRouter().params;
+}
+function useSearchParams() {
+  return useRouter().query;
+}
+function Router({
+  initialPath,
+  initialParams,
+  initialComponent,
+  initialLayouts,
+  initialLoadings,
+  children
+}) {
+  const [pathname, setPathname] = useState(
+    () => initialPath ?? (typeof window !== "undefined" ? window.location.pathname : "/")
+  );
+  const [pageState, setPageState] = useState({
+    component: initialComponent ?? null,
+    layouts: initialLayouts ?? [],
+    loadings: initialLoadings ?? [],
+    params: initialParams ?? {}
+  });
+  const [isNavigating, setIsNavigating] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const manifestRef = useRef(null);
+  useEffect(() => {
+    manifestRef.current = readClientManifest();
+    const onManifestUpdate = () => {
+      manifestRef.current = readClientManifest();
+    };
+    window.addEventListener("manifest-update", onManifestUpdate);
+    return () => window.removeEventListener("manifest-update", onManifestUpdate);
+  }, []);
+  const applyLoaded = useCallback((loaded, newPath) => {
+    startTransition(() => {
+      setPathname(newPath);
+      setPageState({
+        component: loaded.component,
+        layouts: loaded.layouts,
+        loadings: loaded.loadings,
+        params: loaded.params
+      });
+      setIsNavigating(false);
+    });
+  }, []);
+  const navigateToPage = useCallback(
+    async (to, options) => {
+      const scroll = options?.scroll !== false;
+      const replace = options?.replace === true;
+      if (to === pathname) return;
+      const manifest = manifestRef.current;
+      if (!manifest) {
+        window.location.href = to;
+        return;
+      }
+      const matched = matchClientRoute(manifest, to);
+      if (!matched) {
+        window.location.href = to;
+        return;
+      }
+      setIsNavigating(true);
+      if (replace) {
+        window.history.replaceState(null, "", to);
+      } else {
+        window.history.pushState(null, "", to);
+      }
+      const targetLoadings = await loadLoadingComponents(matched.route);
+      if (targetLoadings.length > 0) {
+        setPathname(to);
+        setPageState((prev) => ({
+          ...prev,
+          loadings: targetLoadings,
+          params: matched.params
+        }));
+      }
+      try {
+        const loaded = await loadPage(manifest, to);
+        if (!loaded) {
+          window.location.href = to;
+          return;
+        }
+        applyLoaded(loaded, to);
+        if (scroll) {
+          window.scrollTo(0, 0);
+        }
+      } catch (err) {
+        console.error("Client navigation failed, falling back to full page load:", err);
+        window.location.href = to;
+      }
+    },
+    [pathname, applyLoaded]
+  );
+  useEffect(() => {
+    async function onPopState() {
+      const newPath = window.location.pathname;
+      const manifest = manifestRef.current;
+      if (!manifest) {
+        setPathname(newPath);
+        setPageState((prev) => ({ ...prev, params: {} }));
+        return;
+      }
+      try {
+        const loaded = await loadPage(manifest, newPath);
+        if (loaded) {
+          applyLoaded(loaded, newPath);
+        } else {
+          window.location.reload();
+        }
+      } catch {
+        window.location.reload();
+      }
+    }
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, [applyLoaded]);
+  const { component: PageComponent, layouts, loadings, params } = pageState;
+  let content;
+  if (PageComponent) {
+    const inner = isNavigating && loadings.length > 0 ? createElement(loadings.at(-1)) : createElement(PageComponent, params);
+    content = wrapInLayouts(inner, layouts);
+  } else {
+    content = children;
+  }
+  return /* @__PURE__ */ jsxs(
+    RouterContext.Provider,
+    {
+      value: {
+        pathname,
+        params,
+        navigate: navigateToPage
+      },
+      children: [
+        content,
+        isNavigating && loadings.length === 0 && !isPending && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "2px",
+              backgroundColor: "#0070f3",
+              zIndex: 99999,
+              animation: "nav-progress 1s ease-in-out infinite"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function Link({ href, children, onClick, scroll, replace, prefetch = "hover", ...rest }) {
+  const router = useContext(RouterContext);
+  const linkRef = useRef(null);
+  const handleMouseEnter = useCallback(() => {
+    if (prefetch !== "hover") return;
+    const manifest = readClientManifest();
+    if (manifest) {
+      prefetchRoute(manifest, href);
+    }
+  }, [href, prefetch]);
+  useEffect(() => {
+    if (prefetch !== "viewport") return;
+    const el = linkRef.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const manifest = readClientManifest();
+            if (manifest) {
+              prefetchRoute(manifest, href);
+            }
+            observer.unobserve(el);
+            break;
+          }
+        }
+      },
+      { rootMargin: "200px" }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [href, prefetch]);
+  function handleClick(e) {
+    if (onClick) onClick(e);
+    if (e.defaultPrevented) return;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    if (e.button !== 0) return;
+    if (rest.target === "_blank" || rest.download !== void 0) return;
+    try {
+      const url = new URL(href, window.location.origin);
+      if (url.origin !== window.location.origin) return;
+    } catch {
+      return;
+    }
+    e.preventDefault();
+    if (router) {
+      router.navigate(href, { scroll, replace });
+    } else {
+      window.history.pushState(null, "", href);
+      window.dispatchEvent(new PopStateEvent("popstate"));
+    }
+  }
+  return /* @__PURE__ */ jsx("a", { ref: linkRef, href, onClick: handleClick, onMouseEnter: handleMouseEnter, ...rest, children });
+}
+const SoloRouter = Router;
+export {
+  Link,
+  Router,
+  SoloRouter,
+  useParams,
+  usePathname,
+  useRouter,
+  useSearchParams
+};

package/client/ws.js

@@ -1,5 +1,3 @@
-import { io } from 'socket.io-client';
-
 class WsManager {
   socket = null;
   socketId = null;
@@ -25,10 +23,11 @@ class WsManager {
     return !!this.socket?.connected && this.socketId !== null;
   }
 
-  connect() {
+  async connect() {
     if (this.socket) return;
 
     try {
+      const { io } = await import('socket.io-client');
       const parsed = new URL(this.url);
       this.socket = io(parsed.origin, {
         path: this.wsPath,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arcway",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A convention-based framework for building modular monoliths with strict domain boundaries.",
   "license": "MIT",
   "type": "module",

package/server/pages/build-plugins.js

@@ -12,7 +12,7 @@ function serverExternalsPlugin() {
         const pkgName =
           args.path.startsWith('@') && parts.length >= 2 ? `${parts[0]}/${parts[1]}` : parts[0];
         if (!resolvedCache.has(pkgName)) {
-          resolvedCache.set(pkgName, isTypeScriptPackage(pkgName, args.resolveDir));
+          resolvedCache.set(pkgName, needsBundling(pkgName, args.resolveDir));
         }
         if (resolvedCache.get(pkgName)) return void 0;
         return { path: args.path, external: true };
@@ -20,11 +20,11 @@ function serverExternalsPlugin() {
     },
   };
 }
-function isTypeScriptPackage(pkgName, resolveDir) {
+function needsBundling(pkgName, resolveDir) {
   try {
     const require2 = createRequire(resolveDir + '/');
     const resolved = require2.resolve(pkgName);
-    return /\.tsx?$/.test(resolved);
+    return /\.([jt]sx|ts)$/.test(resolved);
   } catch {
     return false;
   }