arcway 0.1.22 → 0.1.24

package/client/page-loader.js

@@ -36,6 +36,50 @@ function readClientManifest() {
   }
 }
 
+function syncStylesForPath(manifest, pathname) {
+  if (typeof document === 'undefined' || !manifest) return;
+
+  const globalHref = manifest.cssBundle ?? null;
+  const matched = matchClientRoute(manifest, pathname);
+  const routeHrefs = matched?.route?.cssBundles ?? [];
+
+  const globalLinks = Array.from(
+    document.querySelectorAll('link[rel="stylesheet"][data-arcway-css="global"]'),
+  );
+  for (const link of globalLinks) {
+    if (!globalHref) continue;
+    const current = link.getAttribute('href')?.split('?')[0] ?? '';
+    if (current !== globalHref) link.setAttribute('href', globalHref);
+  }
+
+  const existingRouteLinks = Array.from(
+    document.querySelectorAll('link[rel="stylesheet"][data-arcway-css="route"]'),
+  );
+  const head = document.head || document.querySelector('head');
+  if (!head) return;
+
+  for (let i = 0; i < routeHrefs.length; i++) {
+    const href = routeHrefs[i];
+    const existing = existingRouteLinks[i];
+    if (existing) {
+      const current = existing.getAttribute('href')?.split('?')[0] ?? '';
+      if (current !== href) existing.setAttribute('href', href);
+      existing.setAttribute('data-arcway-css-index', String(i));
+      continue;
+    }
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.setAttribute('data-arcway-css', 'route');
+    link.setAttribute('data-arcway-css-index', String(i));
+    link.href = href;
+    head.appendChild(link);
+  }
+
+  for (let i = routeHrefs.length; i < existingRouteLinks.length; i++) {
+    existingRouteLinks[i].remove();
+  }
+}
+
 function matchClientRoute(manifest, pathname) {
   for (const route of manifest.routes) {
     let compiled = patternCache.get(route.pattern);
@@ -109,4 +153,5 @@ export {
   matchClientRoute,
   prefetchRoute,
   readClientManifest,
+  syncStylesForPath,
 };

package/client/router.js

@@ -15,6 +15,7 @@ import {
   matchClientRoute,
   loadLoadingComponents,
   prefetchRoute,
+  syncStylesForPath,
 } from './page-loader.js';
 import { parseQuery } from './query.js';
 
@@ -72,6 +73,7 @@ function useSearchParams() {
 function Router({
   initialPath,
   initialParams,
+  initialPattern,
   initialComponent,
   initialLayouts,
   initialLoadings,
@@ -81,6 +83,7 @@ function Router({
     () => initialPath ?? (typeof window !== 'undefined' ? window.location.pathname : '/'),
   );
   const [pageState, setPageState] = useState({
+    pattern: initialPattern ?? null,
     component: initialComponent ?? null,
     layouts: initialLayouts ?? [],
     loadings: initialLoadings ?? [],
@@ -96,12 +99,24 @@ function Router({
 
   useEffect(() => {
     manifestRef.current = readClientManifest();
+    if (manifestRef.current) {
+      syncStylesForPath(manifestRef.current, pathname);
+    }
     const onManifestUpdate = () => {
       manifestRef.current = readClientManifest();
+      if (manifestRef.current) {
+        syncStylesForPath(manifestRef.current, window.location.pathname);
+      }
     };
     window.addEventListener('manifest-update', onManifestUpdate);
     return () => window.removeEventListener('manifest-update', onManifestUpdate);
-  }, []);
+  }, [pathname]);
+
+  useEffect(() => {
+    if (manifestRef.current) {
+      syncStylesForPath(manifestRef.current, pathname);
+    }
+  }, [pathname]);
 
   // `bumpQuery` controls whether `queryVersion` is incremented atomically
   // with the page-state updates. It lives inside the same `startTransition`
@@ -116,6 +131,7 @@ function Router({
     startTransition(() => {
       setPathname(newPath);
       setPageState({
+        pattern: loaded.pattern ?? null,
         component: loaded.component,
         layouts: loaded.layouts,
         loadings: loaded.loadings,
@@ -177,6 +193,7 @@ function Router({
         setPathname(pathOnly);
         setPageState((prev) => ({
           ...prev,
+          pattern: matched.route.pattern,
           loadings: targetLoadings,
           params: matched.params,
         }));
@@ -217,7 +234,7 @@ function Router({
 
       if (!manifest) {
         setPathname(newPath);
-        setPageState((prev) => ({ ...prev, params: {} }));
+        setPageState((prev) => ({ ...prev, pattern: null, params: {} }));
         setQueryVersion((v) => v + 1);
         return;
       }
@@ -238,6 +255,12 @@ function Router({
     return () => window.removeEventListener('popstate', onPopState);
   }, [pathname, applyLoaded]);
 
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.__arcway_current_pattern__ = pageState.pattern ?? null;
+    }
+  }, [pageState.pattern]);
+
   const { component: PageComponent, layouts, loadings, params } = pageState;
 
   let content;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arcway",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "description": "A convention-based framework for building modular monoliths with strict domain boundaries.",
   "license": "MIT",
   "type": "module",
@@ -47,8 +47,10 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.987.0",
     "@babel/core": "^7.29.0",
+    "@vitejs/plugin-react": "^5.1.0",
     "@base-ui/react": "^1.2.0",
     "@modelcontextprotocol/sdk": "^1.26.0",
+    "@tailwindcss/vite": "^4.1.18",
     "@tailwindcss/postcss": "^4.1.18",
     "arktype": "^2.1.29",
     "bcryptjs": "^3.0.3",
@@ -99,6 +101,7 @@
     "tailwind-merge": "^3.4.1",
     "tailwindcss": "^4.1.18",
     "vaul": "^1.1.2",
+    "vite": "^7.1.12",
     "ws": "^8.19.0",
     "zod": "^3.24.0"
   },

package/server/boot/index.js

@@ -14,6 +14,8 @@ import { StaticRouter } from '../static/index.js';
 import { WsRouter } from '../ws/ws-router.js';
 import { createWsBackplane } from '../ws/backplane.js';
 import { runHook } from './hooks.js';
+import { createViteDevRouter } from '../pages/vite-dev.js';
+import { resolvePagesOutDir } from '../pages/out-dir.js';
 import path from 'node:path';
 
 async function boot(options) {
@@ -85,6 +87,11 @@ async function boot(options) {
 
   const pagesRouter = new PagesRouter(config, { rootDir, log, mode, fileWatcher, appContext });
   await pagesRouter.init();
+  const pagesOutDir = resolvePagesOutDir(config, rootDir, mode);
+  const viteRouter =
+    mode === 'development' && config.pages?.vite?.enabled === true
+      ? await createViteDevRouter({ rootDir, log, config })
+      : null;
 
   const healthDeps = {
     db,
@@ -93,7 +100,7 @@ async function boot(options) {
   const systemRouter = new SystemRouter({ healthDeps });
 
   const staticRouter = new StaticRouter({
-    outDir: config.pages?.outDir ?? path.resolve(rootDir, '.build/pages'),
+    outDir: pagesOutDir,
     publicDir: path.join(rootDir, 'public'),
   });
 
@@ -113,6 +120,7 @@ async function boot(options) {
   webServer.use(systemRouter, '/_system');
   webServer.use(apiRouter, apiRouter.prefix);
   webServer.use(wsRouter, config.websocket.path);
+  if (viteRouter) webServer.use(viteRouter);
   webServer.use(staticRouter);
   webServer.use(pagesRouter);
 
@@ -130,6 +138,7 @@ async function boot(options) {
     if (workerPool) await workerPool.shutdown();
     await pagesRouter.close();
     await apiRouter.close();
+    if (viteRouter) await viteRouter.close();
     await webServer.close();
     if (fileWatcher) await fileWatcher.close();
     await destroyInfrastructure(infrastructure);

package/server/build.js

@@ -1,5 +1,6 @@
 import { makeConfig } from './config/loader.js';
 import { buildPages } from './pages/build.js';
+import { resolvePagesOutDir } from './pages/out-dir.js';
 
 async function build(options) {
   const rootDir = options?.rootDir ?? process.cwd();
@@ -11,6 +12,7 @@ async function build(options) {
   if (pagesEnabled) {
     pages = await buildPages({
       rootDir,
+      outDir: resolvePagesOutDir(config, rootDir, 'production'),
       serverTarget: buildTarget,
       minify: true,
       fonts: config?.pages?.fonts,

package/server/config/modules/pages.js

@@ -4,16 +4,31 @@ const DEFAULTS = {
   enabled: true,
   dir: 'pages',
   outDir: '.build/pages',
+  devOutDir: '.build-dev/pages',
+  vite: {
+    enabled: false,
+  },
 };
 
 function resolve(config, { rootDir } = {}) {
-  const pages = { ...DEFAULTS, ...config.pages };
+  const rawPages = config.pages ?? {};
+  const pages = {
+    ...DEFAULTS,
+    ...rawPages,
+    vite: {
+      ...DEFAULTS.vite,
+      ...(rawPages.vite ?? {}),
+    },
+  };
   if (pages.dir && !path.isAbsolute(pages.dir)) {
     pages.dir = path.resolve(rootDir, pages.dir);
   }
   if (pages.outDir && !path.isAbsolute(pages.outDir)) {
     pages.outDir = path.resolve(rootDir, pages.outDir);
   }
+  if (pages.devOutDir && !path.isAbsolute(pages.devOutDir)) {
+    pages.devOutDir = path.resolve(rootDir, pages.devOutDir);
+  }
   return { ...config, pages };
 }
 

package/server/pages/build-cache.js

@@ -263,7 +263,7 @@ async function restoreMultiFileCache({ cacheDir, outputs, destDir }) {
       const src = path.join(cacheDir, rel);
       const dst = path.join(destDir, rel);
       await fs.mkdir(path.dirname(dst), { recursive: true });
-      await fs.cp(src, dst);
+      await cpAtomic(src, dst);
     }),
   );
 }

package/server/pages/build-client.js

@@ -35,7 +35,7 @@ function planHydrationEntries(pages, layouts, loadings, tempDir) {
     const outName = patternToFileName(page.pattern);
     const layoutChain = resolveLayoutChain(page.pattern, layouts);
     const loadingChain = resolveLoadingChain(page.pattern, loadings);
-    const content = generateHydrationEntry(page.filePath, layoutChain, loadingChain);
+    const content = generateHydrationEntry(page.filePath, layoutChain, loadingChain, page.pattern);
     const entryPath = path.join(tempDir, `${outName}.tsx`);
     files.push({ entryPath, content });
     entryPoints[outName] = entryPath;
@@ -284,6 +284,7 @@ async function collectStaleOutputs(metafile, clientDir) {
     for (const entry of entries) {
       if (!entry.isFile()) continue;
       const abs = path.join(dir, entry.name);
+      if (shouldPreserveClientAsset(abs, clientDir)) continue;
       if (!currentOutputs.has(abs)) stale.add(abs);
     }
   }
@@ -295,6 +296,14 @@ async function collectStaleOutputs(metafile, clientDir) {
   return stale;
 }
 
+function shouldPreserveClientAsset(absPath, clientDir) {
+  const rel = path.relative(clientDir, absPath).replace(/\\/g, '/');
+  if (!rel || rel.startsWith('..')) return false;
+  if (rel.startsWith('hmr/')) return true;
+  if (/^styles-[a-f0-9]+\.css$/i.test(rel)) return true;
+  return false;
+}
+
 async function tryRestoreClientFromCache({ rootDir, clientDir, coarseKey }) {
   const lookup = await lookupMultiFileCache({ rootDir, kind: 'client', coarseKey });
   if (!lookup.hit) return { hit: false, bucket: lookup.bucket };
@@ -459,7 +468,7 @@ function extractMetadata(result, plan, outDir) {
   return { bundles, navBundles, layoutNavBundles, loadingNavBundles, entryChunks, entryCssChunks };
 }
 
-function generateHydrationEntry(componentPath, layouts = [], loadings = []) {
+function generateHydrationEntry(componentPath, layouts = [], loadings = [], pattern = '/') {
   const importPath = componentPath.replace(/\\/g, '/');
   const imports = [
     `import { hydrateRoot } from 'react-dom/client';`,
@@ -485,8 +494,19 @@ function generateHydrationEntry(componentPath, layouts = [], loadings = []) {
 const container = document.getElementById('__app');
 const propsEl = document.getElementById('__app_props');
 const props = propsEl ? JSON.parse(propsEl.textContent || '{}') : {};
+const ROOT_KEY = '__arcway_root__';
+const rootOwner = window;
+const element = <ApiProvider><Router initialPath={window.location.pathname} initialParams={props} initialPattern={${JSON.stringify(pattern)}} initialComponent={Component} initialLayouts={${layoutsArray}} initialLoadings={${loadingsArray}} /></ApiProvider>;
 
-hydrateRoot(container!, <ApiProvider><Router initialPath={window.location.pathname} initialParams={props} initialComponent={Component} initialLayouts={${layoutsArray}} initialLoadings={${loadingsArray}} /></ApiProvider>);
+if (!container) {
+  throw new Error('Arcway hydrate entry could not find #__app');
+}
+
+if (!rootOwner[ROOT_KEY]) {
+  rootOwner[ROOT_KEY] = hydrateRoot(container, element);
+} else {
+  rootOwner[ROOT_KEY].render(element);
+}
 `;
 }
 export { buildClientBundles, createClientBuildContext, generateHydrationEntry };

package/server/pages/handler.js

@@ -15,6 +15,7 @@ import {
 } from './ssr.js';
 import { MIME_TYPES } from './static.js';
 import { createArcwayDevEndpoint } from './arcway-endpoint.js';
+import { buildViteClientManifestJson, buildViteRoute } from './vite-dev.js';
 function createPagesHandler(options) {
   const rootDir = options.rootDir;
   const outDir = path.resolve(rootDir, options.outDir ?? '.build/pages');
@@ -23,6 +24,7 @@ function createPagesHandler(options) {
   const appContext = options.appContext ?? null;
   const mode = options.mode ?? 'production';
   const devMode = mode === 'development';
+  const viteDev = options.viteDev === true;
   const lazyContext = options.lazyContext ?? null;
   // Dev with a lazy context drives the handler off an in-memory manifest; no
   // disk `pages-manifest.json` is produced. Prod still reads from disk.
@@ -39,8 +41,12 @@ function createPagesHandler(options) {
   let manifest = lazyContext
     ? lazyContext.manifest
     : JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
-  let routes = compileRoutes(manifest);
-  let clientManifestJson = buildClientManifestJson(manifest);
+  let routes = compileRoutes(manifest, { rootDir, outDir, viteDev });
+  let clientManifestJson = buildClientManifestJson(manifest, {
+    rootDir,
+    outDir,
+    viteDev,
+  });
   let lastSeenVersion = lazyContext ? manifest.version : 0;
   const componentCache = new Map();
   let cacheVersion = 0;
@@ -60,8 +66,12 @@ function createPagesHandler(options) {
     if (!lazyContext) return;
     if (manifest.version === lastSeenVersion) return;
     lastSeenVersion = manifest.version;
-    routes = compileRoutes(manifest);
-    clientManifestJson = buildClientManifestJson(manifest);
+    routes = compileRoutes(manifest, { rootDir, outDir, viteDev });
+    clientManifestJson = buildClientManifestJson(manifest, {
+      rootDir,
+      outDir,
+      viteDev,
+    });
     componentCache.clear();
     cacheVersion++;
   }
@@ -79,8 +89,12 @@ function createPagesHandler(options) {
     }
     if (!fs.existsSync(manifestPath)) return;
     manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
-    routes = compileRoutes(manifest);
-    clientManifestJson = buildClientManifestJson(manifest);
+    routes = compileRoutes(manifest, { rootDir, outDir, viteDev });
+    clientManifestJson = buildClientManifestJson(manifest, {
+      rootDir,
+      outDir,
+      viteDev,
+    });
     componentCache.clear();
     cacheVersion++;
   }
@@ -104,7 +118,11 @@ function createPagesHandler(options) {
       });
       res.write('data: connected\n\n');
       const onUpdate = (event) => {
-        res.write(`data: ${JSON.stringify(event)}
+        let payload = event;
+        if (event?.type === 'hmr-update' || event?.type === 'css-update') {
+          payload = { ...event, manifest: clientManifestJson };
+        }
+        res.write(`data: ${JSON.stringify(payload)}
 
 `);
       };
@@ -201,6 +219,7 @@ function createPagesHandler(options) {
         cacheVersion,
         projectReact,
         devMode,
+        viteDev,
       );
     } catch (err) {
       if (manifest.errorBundle && !res.headersSent) {
@@ -275,10 +294,10 @@ async function renderDevBuildError(
     res.end(`<h1>500 - Build Error</h1><pre>${escaped}</pre>`);
   }
 }
-function compileRoutes(manifest) {
+function compileRoutes(manifest, { rootDir, outDir, viteDev } = {}) {
   const routes = manifest.entries.map((entry) => {
     const { regex, paramNames, catchAllParam } = compilePattern(entry.pattern);
-    return {
+    let route = {
       pattern: entry.pattern,
       regex,
       paramNames,
@@ -290,6 +309,10 @@ function compileRoutes(manifest) {
       sharedChunks: entry.sharedChunks ?? [],
       sharedCssChunks: entry.sharedCssChunks ?? [],
     };
+    if (viteDev) {
+      route = buildViteRoute(route, { rootDir, outDir });
+    }
+    return route;
   });
   sortBySpecificity(routes);
   return routes;
@@ -350,8 +373,12 @@ async function runPageMiddleware(
   }
   return null;
 }
-function buildClientManifestJson(manifest) {
+function buildClientManifestJson(manifest, { rootDir, outDir, viteDev } = {}) {
+  if (viteDev) {
+    return buildViteClientManifestJson(manifest, rootDir);
+  }
   const clientManifest = {
+    cssBundle: manifest.cssBundle ? `/static/${manifest.cssBundle}` : null,
     routes: manifest.entries.map((entry) => {
       const route = {
         pattern: entry.pattern,
@@ -359,6 +386,7 @@ function buildClientManifestJson(manifest) {
         clientBundle: `/static/${entry.navBundle}`,
         layoutBundles: (entry.layoutClientBundles ?? []).map((b) => `/static/${b}`),
         loadingBundles: (entry.loadingClientBundles ?? []).map((b) => `/static/${b}`),
+        cssBundles: (entry.sharedCssChunks ?? []).map((b) => `/static/${b}`),
       };
       if (entry.catchAllParam) {
         route.catchAllParam = entry.catchAllParam;

package/server/pages/hmr.js

@@ -79,38 +79,65 @@ window.$RefreshReg$ = function() {};
 window.$RefreshSig$ = function() { return function(type) { return type; }; };
 window.__REACT_REFRESH__ = RefreshRuntime;
 
-var es = new EventSource('/__livereload');
-es.onmessage = function(e) {
-  if (e.data === 'connected') return;
-  var msg;
-  try { msg = JSON.parse(e.data); } catch { window.location.reload(); return; }
-  if (msg.type === 'reload') {
-    window.location.reload();
-  } else if (msg.type === 'hmr-update') {
-    var imports = msg.modules.map(function(m) {
-      return import('/static/' + m + '?t=' + msg.timestamp);
-    });
-    Promise.all(imports).then(function() {
-      RefreshRuntime.performReactRefresh();
-      if (msg.manifest) {
-        var el = document.getElementById('__app_manifest');
-        if (el) el.textContent = msg.manifest;
-        window.dispatchEvent(new CustomEvent('manifest-update'));
-      }
-    }).catch(function(err) {
-      console.warn('[HMR] Fast Refresh failed, doing full reload', err);
-      window.location.reload();
-    });
-  } else if (msg.type === 'css-update') {
-    var links = document.querySelectorAll('link[rel="stylesheet"][href*="/static/"]');
-    links.forEach(function(link) {
-      link.href = '/static/' + msg.cssBundle + '?t=' + msg.timestamp;
-    });
+var es = null;
+var reconnectTimer = null;
+
+function applyManifest(manifestJson) {
+  if (!manifestJson) return;
+  var el = document.getElementById('__app_manifest');
+  if (el) el.textContent = manifestJson;
+  window.dispatchEvent(new CustomEvent('manifest-update'));
+}
+
+function pickCurrentHmrModules(msg) {
+  var currentPattern = window.__arcway_current_pattern__;
+  if (currentPattern && msg.routeBundles && msg.routeBundles[currentPattern]) {
+    return ['/static/' + msg.routeBundles[currentPattern] + '?t=' + msg.timestamp];
   }
-};
-es.onerror = function() {
-  setTimeout(function() { es.close(); }, 5000);
-};
+  return (msg.modules || []).map(function(m) {
+    return '/static/' + m + '?t=' + msg.timestamp;
+  });
+}
+
+function connect() {
+  if (es) es.close();
+  es = new EventSource('/__livereload');
+  es.onmessage = function(e) {
+    if (e.data === 'connected') return;
+    var msg;
+    try { msg = JSON.parse(e.data); } catch { window.location.reload(); return; }
+    if (msg.type === 'reload') {
+      window.location.reload();
+    } else if (msg.type === 'hmr-update') {
+      var imports = pickCurrentHmrModules(msg).map(function(specifier) {
+        return import(specifier);
+      });
+      Promise.all(imports).then(function() {
+        RefreshRuntime.performReactRefresh();
+        applyManifest(msg.manifest);
+      }).catch(function(err) {
+        console.warn('[HMR] Fast Refresh failed, doing full reload', err);
+        window.location.reload();
+      });
+    } else if (msg.type === 'css-update') {
+      var links = document.querySelectorAll('link[rel="stylesheet"][data-arcway-css="global"]');
+      links.forEach(function(link) {
+        link.href = '/static/' + msg.cssBundle + '?t=' + msg.timestamp;
+      });
+      applyManifest(msg.manifest);
+    }
+  };
+  es.onerror = function() {
+    if (reconnectTimer) return;
+    try { es.close(); } catch {}
+    reconnectTimer = setTimeout(function() {
+      reconnectTimer = null;
+      connect();
+    }, 1000);
+  };
+}
+
+connect();
 </script>`;
 }
 function diffClientMetafiles(oldMeta, newMeta, outDir) {