rari 0.5.10 → 0.5.12

package/dist/client.mjs

@@ -1,3 +1,3 @@
-import { C as fetchWithTimeout, S as createNavigationError, _ as LayoutErrorBoundary, a as LoadingSpinner, b as NavigationErrorOverlay, c as createHttpRuntimeClient, d as clearPropsCacheForComponent, f as extractMetadata, g as hasServerSideDataFetching, h as extractStaticParams, i as HttpRuntimeClient, l as createLoadingBoundary, m as extractServerPropsWithCache, n as DefaultLoading, o as NotFound, p as extractServerProps, r as ErrorBoundary, s as createErrorBoundary, t as DefaultError, u as clearPropsCache, v as ClientRouter, w as LayoutManager, x as NavigationErrorHandler, y as StatePreserver } from "./runtime-client-CGCu6fmO.mjs";
+import { C as fetchWithTimeout, S as createNavigationError, _ as LayoutErrorBoundary, a as LoadingSpinner, b as NavigationErrorOverlay, c as createHttpRuntimeClient, d as clearPropsCacheForComponent, f as extractMetadata, g as hasServerSideDataFetching, h as extractStaticParams, i as HttpRuntimeClient, l as createLoadingBoundary, m as extractServerPropsWithCache, n as DefaultLoading, o as NotFound, p as extractServerProps, r as ErrorBoundary, s as createErrorBoundary, t as DefaultError, u as clearPropsCache, v as ClientRouter, w as LayoutManager, x as NavigationErrorHandler, y as StatePreserver } from "./runtime-client-XDRmgAw-.mjs";
 
 export { ClientRouter, DefaultError, DefaultLoading, ErrorBoundary, HttpRuntimeClient, LayoutErrorBoundary, LayoutManager, LoadingSpinner, NavigationErrorHandler, NavigationErrorOverlay, NotFound, StatePreserver, clearPropsCache, clearPropsCacheForComponent, createErrorBoundary, createHttpRuntimeClient, createLoadingBoundary, createNavigationError, extractMetadata, extractServerProps, extractServerPropsWithCache, extractStaticParams, fetchWithTimeout, hasServerSideDataFetching };

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { a as headers, i as rariRouter, n as defineRariOptions, o as RariResponse, r as rari, t as defineRariConfig } from "./vite-CT18_z0c.mjs";
+import { a as headers, i as rariRouter, n as defineRariOptions, o as RariResponse, r as rari, t as defineRariConfig } from "./vite-DckaZsam.mjs";
 import { i as writeManifest, n as generateAppRouteManifest, r as loadManifest, t as AppRouteGenerator } from "./app-routes-BjA_L5R4.mjs";
-import { c as createHttpRuntimeClient, d as clearPropsCacheForComponent, f as extractMetadata, g as hasServerSideDataFetching, h as extractStaticParams, i as HttpRuntimeClient, m as extractServerPropsWithCache, p as extractServerProps, u as clearPropsCache } from "./runtime-client-CGCu6fmO.mjs";
-import "./loading-component-map-UZ-MQYv0.mjs";
+import { c as createHttpRuntimeClient, d as clearPropsCacheForComponent, f as extractMetadata, g as hasServerSideDataFetching, h as extractStaticParams, i as HttpRuntimeClient, m as extractServerPropsWithCache, p as extractServerProps, u as clearPropsCache } from "./runtime-client-XDRmgAw-.mjs";
+import "./loading-component-map-vYjwg1Lq.mjs";
 import "./server-build-Cvj5EwXx.mjs";
 
 export { AppRouteGenerator, HttpRuntimeClient, RariResponse, clearPropsCache, clearPropsCacheForComponent, createHttpRuntimeClient, defineRariConfig, defineRariOptions, extractMetadata, extractServerProps, extractServerPropsWithCache, extractStaticParams, generateAppRouteManifest, hasServerSideDataFetching, headers, loadManifest, rari, rariRouter, writeManifest };

package/dist/{loading-component-map-Db2B5rLX.mjs → loading-component-map-DyMAME6V.mjs}

@@ -1,3 +1,3 @@
-import { n as getLoadingComponentMapPath, t as generateLoadingComponentMap } from "./loading-component-map-UZ-MQYv0.mjs";
+import { n as getLoadingComponentMapPath, t as generateLoadingComponentMap } from "./loading-component-map-vYjwg1Lq.mjs";
 
 export { generateLoadingComponentMap, getLoadingComponentMapPath };

package/dist/{loading-component-map-UZ-MQYv0.mjs → loading-component-map-vYjwg1Lq.mjs}

@@ -5,6 +5,10 @@ function generateLoadingComponentMap(options) {
 	const { loadingComponents } = options;
 	if (loadingComponents.length === 0) return `// No loading components found
 export const loadingComponentModules = {}
+
+if (typeof globalThis !== 'undefined') {
+  globalThis.__rari_loading_components = new Map()
+}
 `;
 	const moduleEntries = [];
 	for (const loading of loadingComponents) {
@@ -19,7 +23,7 @@ ${moduleEntries.join(",\n")}
 }
 
 if (typeof globalThis !== 'undefined') {
-  globalThis.__rari_loading_components = loadingComponentModules
+  globalThis.__rari_loading_components = new Map(Object.entries(loadingComponentModules))
 }
 `;
 }

package/dist/{runtime-client-CGCu6fmO.mjs → runtime-client-XDRmgAw-.mjs}

@@ -1050,7 +1050,7 @@ function ClientRouter({ children, manifest, initialRoute }) {
 		if (loadingComponent) window.dispatchEvent(new CustomEvent("rari:show-loading", { detail: {
 			route: targetPath,
 			navigationId,
-			loadingComponent
+			loadingEntry: loadingComponent
 		} }));
 		const navigationPromise = (async () => {
 			const fromRoute = currentRouteRef.current;
@@ -1073,7 +1073,7 @@ function ClientRouter({ children, manifest, initialRoute }) {
 				};
 				if (options.replace) window.history.replaceState(historyState, "", targetPath);
 				else window.history.pushState(historyState, "", targetPath);
-				const fetchUrl = window.location.origin + targetPath;
+				const fetchUrl = (window.location.origin.includes(":5173") ? "http://localhost:3000" : window.location.origin) + targetPath;
 				const response = await fetch(fetchUrl, {
 					headers: { Accept: "text/x-component" },
 					signal: abortController.signal

package/dist/{vite-CT18_z0c.mjs → vite-DckaZsam.mjs}

@@ -1751,7 +1751,7 @@ function rariRouter(options = {}) {
 			const outDir = path.resolve(root, opts.outDir);
 			await promises.mkdir(outDir, { recursive: true });
 			await promises.writeFile(path.join(outDir, "app-routes.json"), manifestContent, "utf-8");
-			const { generateLoadingComponentMap, getLoadingComponentMapPath } = await import("./loading-component-map-Db2B5rLX.mjs");
+			const { generateLoadingComponentMap, getLoadingComponentMapPath } = await import("./loading-component-map-DyMAME6V.mjs");
 			const loadingMapCode = generateLoadingComponentMap({
 				appDir: opts.appDir,
 				loadingComponents: manifest.loading
@@ -1874,28 +1874,12 @@ function rariRouter(options = {}) {
 			}
 		},
 		async generateBundle() {
-			if (cachedManifestContent) {
-				this.emitFile({
-					type: "asset",
-					fileName: "app-routes.json",
-					source: cachedManifestContent
-				});
-				try {
-					const manifest = JSON.parse(cachedManifestContent);
-					const { generateLoadingComponentMap } = await import("./loading-component-map-Db2B5rLX.mjs");
-					const loadingMapCode = generateLoadingComponentMap({
-						appDir: opts.appDir,
-						loadingComponents: manifest.loading
-					});
-					this.emitFile({
-						type: "asset",
-						fileName: "loading-component-map.js",
-						source: loadingMapCode
-					});
-				} catch (error) {
-					console.error("Failed to generate loading component map:", error);
-				}
-			} else console.warn("App router manifest not generated, skipping emission");
+			if (cachedManifestContent) this.emitFile({
+				type: "asset",
+				fileName: "app-routes.json",
+				source: cachedManifestContent
+			});
+			else console.warn("App router manifest not generated, skipping emission");
 		},
 		async closeBundle() {
 			for (const timer of pendingHMRUpdates.values()) clearTimeout(timer);
@@ -2890,6 +2874,24 @@ const ${componentName$1} = registerClientReference(
 						await handleServerComponentHMR(filePath);
 					} else setTimeout(discoverAndRegisterComponents, 1e3);
 				});
+				server.middlewares.use("/app-routes.json", async (req, res) => {
+					try {
+						const manifestPath = path.join(server.config.root, "dist", "app-routes.json");
+						if (fs.existsSync(manifestPath)) {
+							const manifestContent = await fs.promises.readFile(manifestPath, "utf-8");
+							res.statusCode = 200;
+							res.setHeader("Content-Type", "application/json");
+							res.setHeader("Cache-Control", "no-cache");
+							res.end(manifestContent);
+						} else {
+							res.statusCode = 404;
+							res.end("Manifest not found");
+						}
+					} catch (error) {
+						res.statusCode = 500;
+						res.end(`Error reading manifest: ${error instanceof Error ? error.message : String(error)}`);
+					}
+				});
 				server.middlewares.use("/api/vite/hmr-transform", async (req, res) => {
 					if (req.method !== "POST") {
 						res.statusCode = 405;

package/dist/vite.mjs

@@ -1,7 +1,7 @@
-import { a as headers, i as rariRouter, n as defineRariOptions, o as RariResponse, r as rari, t as defineRariConfig } from "./vite-CT18_z0c.mjs";
+import { a as headers, i as rariRouter, n as defineRariOptions, o as RariResponse, r as rari, t as defineRariConfig } from "./vite-DckaZsam.mjs";
 import { i as writeManifest, n as generateAppRouteManifest, r as loadManifest, t as AppRouteGenerator } from "./app-routes-BjA_L5R4.mjs";
-import { c as createHttpRuntimeClient, d as clearPropsCacheForComponent, f as extractMetadata, g as hasServerSideDataFetching, h as extractStaticParams, i as HttpRuntimeClient, m as extractServerPropsWithCache, p as extractServerProps, u as clearPropsCache } from "./runtime-client-CGCu6fmO.mjs";
-import "./loading-component-map-UZ-MQYv0.mjs";
+import { c as createHttpRuntimeClient, d as clearPropsCacheForComponent, f as extractMetadata, g as hasServerSideDataFetching, h as extractStaticParams, i as HttpRuntimeClient, m as extractServerPropsWithCache, p as extractServerProps, u as clearPropsCache } from "./runtime-client-XDRmgAw-.mjs";
+import "./loading-component-map-vYjwg1Lq.mjs";
 import "./server-build-Cvj5EwXx.mjs";
 
 export { AppRouteGenerator, HttpRuntimeClient, RariResponse, clearPropsCache, clearPropsCacheForComponent, createHttpRuntimeClient, defineRariConfig, defineRariOptions, extractMetadata, extractServerProps, extractServerPropsWithCache, extractStaticParams, generateAppRouteManifest, hasServerSideDataFetching, headers, loadManifest, rari, rariRouter, writeManifest };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rari",
   "type": "module",
-  "version": "0.5.10",
+  "version": "0.5.12",
   "description": "Runtime Accelerated Rendering Infrastructure (Rari)",
   "author": "Ryan Skinner",
   "license": "MIT",

package/src/router/ClientRouter.tsx

@@ -236,7 +236,7 @@ export function ClientRouter({ children, manifest, initialRoute }: ClientRouterP
         detail: {
           route: targetPath,
           navigationId,
-          loadingComponent,
+          loadingEntry: loadingComponent,
         },
       }))
     }
@@ -286,7 +286,10 @@ export function ClientRouter({ children, manifest, initialRoute }: ClientRouterP
           )
         }
 
-        const fetchUrl = window.location.origin + targetPath
+        const rariServerUrl = window.location.origin.includes(':5173')
+          ? 'http://localhost:3000'
+          : window.location.origin
+        const fetchUrl = rariServerUrl + targetPath
 
         const response = await fetch(fetchUrl, {
           headers: { Accept: 'text/x-component' },

package/src/router/LoadingComponentRegistry.ts

@@ -79,7 +79,10 @@ export class LoadingComponentRegistry {
     if (exactLoader) {
       try {
         const module = await exactLoader()
-        return module.default
+        if (module && module.default && typeof module.default === 'function') {
+          return module.default
+        }
+        console.warn(`[LoadingRegistry] Invalid component for ${routePath}: module.default is not a function`)
       }
       catch (error) {
         console.warn(`[LoadingRegistry] Failed to load exact match for ${routePath}:`, error)

package/src/router/loading-component-map.ts

@@ -12,6 +12,10 @@ export function generateLoadingComponentMap(options: LoadingComponentMapOptions)
   if (loadingComponents.length === 0) {
     return `// No loading components found
 export const loadingComponentModules = {}
+
+if (typeof globalThis !== 'undefined') {
+  globalThis.__rari_loading_components = new Map()
+}
 `
   }
 
@@ -32,7 +36,7 @@ ${moduleEntries.join(',\n')}
 }
 
 if (typeof globalThis !== 'undefined') {
-  globalThis.__rari_loading_components = loadingComponentModules
+  globalThis.__rari_loading_components = new Map(Object.entries(loadingComponentModules))
 }
 `
 

package/src/router/vite-plugin.ts

@@ -457,24 +457,6 @@ export function rariRouter(options: RariRouterPluginOptions = {}): Plugin {
           fileName: 'app-routes.json',
           source: cachedManifestContent,
         })
-
-        try {
-          const manifest = JSON.parse(cachedManifestContent)
-          const { generateLoadingComponentMap } = await import('./loading-component-map')
-          const loadingMapCode = generateLoadingComponentMap({
-            appDir: opts.appDir,
-            loadingComponents: manifest.loading,
-          })
-
-          this.emitFile({
-            type: 'asset',
-            fileName: 'loading-component-map.js',
-            source: loadingMapCode,
-          })
-        }
-        catch (error) {
-          console.error('Failed to generate loading component map:', error)
-        }
       }
       else {
         console.warn('App router manifest not generated, skipping emission')

package/src/runtime/AppRouterProvider.tsx

@@ -199,6 +199,11 @@ export function AppRouterProvider({ children, initialPayload, onNavigate }: AppR
             return null
           }
 
+          if (typeof Component !== 'function') {
+            console.warn('[AppRouterProvider] Component is not a function for module:', moduleInfo.id, '- skipping component')
+            return null
+          }
+
           const effectiveKey = serverKey || `fallback-${Math.random()}`
 
           const childProps = {
@@ -211,10 +216,31 @@ export function AppRouterProvider({ children, initialPayload, onNavigate }: AppR
           return element
         }
 
+        if (!type || (typeof type !== 'string' && typeof type !== 'function')) {
+          console.error('[AppRouterProvider] Invalid component type:', {
+            type,
+            typeOf: typeof type,
+            serverKey,
+            props,
+            rscData: rsc,
+          })
+          return null
+        }
+
         const processedProps = processProps(props, modules, layoutPath)
         return React.createElement(type, serverKey ? { ...processedProps, key: serverKey } : processedProps)
       }
-      return rsc.map(child => rscToReact(child, modules, layoutPath))
+      return rsc.map((child, index) => {
+        const element = rscToReact(child, modules, layoutPath)
+        if (!element) {
+          return null
+        }
+        if (typeof element === 'object' && React.isValidElement(element) && !element.key) {
+          // eslint-disable-next-line react/no-clone-element
+          return React.cloneElement(element, { key: index })
+        }
+        return element
+      }).filter(Boolean)
     }
 
     return rsc
@@ -457,31 +483,21 @@ export function AppRouterProvider({ children, initialPayload, onNavigate }: AppR
       return
 
     const handleShowLoading = async (event: Event) => {
-      const customEvent = event as CustomEvent<{ route: string, navigationId: number, loadingComponent: any }>
-      const { route, navigationId, loadingComponent: loadingEntry } = customEvent.detail
+      const customEvent = event as CustomEvent<{ route: string, navigationId: number, loadingEntry: any }>
+      const { route, navigationId, loadingEntry } = customEvent.detail
 
       currentNavigationIdRef.current = navigationId
 
-      setLoadingState({
-        isShowingLoading: true,
-        loadingRoute: route,
-        loadingComponent: null,
-      })
-
-      setRenderKey(prev => prev + 1)
-
       const loadingComponentPath = loadingEntry?.path || route
       const loadingComponent = await loadingRegistryRef.current.loadComponent(loadingComponentPath)
 
-      if (currentNavigationIdRef.current === navigationId) {
-        if (loadingComponent) {
-          setLoadingState({
-            isShowingLoading: true,
-            loadingRoute: route,
-            loadingComponent,
-          })
-          setRenderKey(prev => prev + 1)
-        }
+      if (currentNavigationIdRef.current === navigationId && loadingComponent) {
+        setLoadingState({
+          isShowingLoading: true,
+          loadingRoute: route,
+          loadingComponent,
+        })
+        setRenderKey(prev => prev + 1)
       }
     }
 
@@ -670,7 +686,7 @@ export function AppRouterProvider({ children, initialPayload, onNavigate }: AppR
 
   const injectLoadingIntoLayout = (layoutElement: any, loadingComponent: React.ReactNode) => {
     if (!layoutElement || typeof layoutElement !== 'object') {
-      return loadingComponent
+      return loadingComponent || null
     }
 
     const cloneWithLoadingInjected = (element: any): any => {
@@ -696,15 +712,36 @@ export function AppRouterProvider({ children, initialPayload, onNavigate }: AppR
           )
 
           if (hasMain) {
-            newChildren = children.map((child: any) => cloneWithLoadingInjected(child))
+            newChildren = children.map((child: any, index: number) => {
+              const cloned = cloneWithLoadingInjected(child)
+              if (!cloned) {
+                return null
+              }
+
+              return cloned && typeof cloned === 'object' && !cloned.key && React.isValidElement(cloned)
+              // eslint-disable-next-line react/no-clone-element
+                ? React.cloneElement(cloned, { key: child?.key || index })
+                : cloned
+            }).filter(Boolean)
           }
           else {
-            newChildren = children.map((child: any) => {
+            newChildren = children.map((child: any, index: number) => {
+              if (!child) {
+                return null
+              }
               if (child && typeof child === 'object') {
-                return cloneWithLoadingInjected(child)
+                const cloned = cloneWithLoadingInjected(child)
+                if (!cloned) {
+                  return null
+                }
+
+                return cloned && !cloned.key && React.isValidElement(cloned)
+                // eslint-disable-next-line react/no-clone-element
+                  ? React.cloneElement(cloned, { key: child.key || index })
+                  : cloned
               }
               return child
-            })
+            }).filter(Boolean)
           }
         }
         else if (typeof children === 'object') {
@@ -714,6 +751,11 @@ export function AppRouterProvider({ children, initialPayload, onNavigate }: AppR
           newChildren = children
         }
 
+        if (!React.isValidElement(element)) {
+          console.warn('[AppRouterProvider] Attempting to clone invalid React element')
+          return element
+        }
+
         // eslint-disable-next-line react/no-clone-element
         return React.cloneElement(element, element.props, newChildren)
       }
@@ -728,18 +770,29 @@ export function AppRouterProvider({ children, initialPayload, onNavigate }: AppR
 
   if (loadingState.isShowingLoading) {
     let loadingComponentElement
-    if (loadingState.loadingComponent) {
-      loadingComponentElement = (
-        <LoadingErrorBoundary>
-          {React.createElement(loadingState.loadingComponent)}
-        </LoadingErrorBoundary>
-      )
+    if (loadingState.loadingComponent && typeof loadingState.loadingComponent === 'function') {
+      try {
+        const element = React.createElement(loadingState.loadingComponent)
+        if (element) {
+          loadingComponentElement = (
+            <LoadingErrorBoundary>
+              {element}
+            </LoadingErrorBoundary>
+          )
+        }
+      }
+      catch (error) {
+        console.error('[AppRouterProvider] Failed to create loading component:', error)
+      }
     }
 
     if (rscPayload?.element) {
-      contentToRender = injectLoadingIntoLayout(rscPayload.element, loadingComponentElement)
+      const injected = injectLoadingIntoLayout(rscPayload.element, loadingComponentElement)
+      if (injected) {
+        contentToRender = injected
+      }
     }
-    else {
+    else if (loadingComponentElement) {
       contentToRender = loadingComponentElement
     }
   }
@@ -748,6 +801,11 @@ export function AppRouterProvider({ children, initialPayload, onNavigate }: AppR
     contentToRender = extracted || rscPayload.element
   }
 
+  if (contentToRender && typeof contentToRender === 'object' && !React.isValidElement(contentToRender)) {
+    console.error('[AppRouterProvider] Invalid content to render:', contentToRender)
+    contentToRender = children
+  }
+
   return (
     <>
       {hmrError && (

package/src/runtime/entry-client.js

@@ -62,7 +62,7 @@ export async function renderApp() {
     if (!manifest) {
       try {
         const manifestUrl = window.location.origin.includes(':5173')
-          ? 'http://localhost:3000/app-routes.json'
+          ? '/app-routes.json'
           : '/app-routes.json'
 
         const manifestResponse = await fetch(manifestUrl, {

package/src/vite/index.ts

@@ -1162,6 +1162,27 @@ const ${componentName} = registerClientReference(
         }
       })
 
+      server.middlewares.use('/app-routes.json', async (req, res) => {
+        try {
+          const manifestPath = path.join(server.config.root, 'dist', 'app-routes.json')
+          if (fs.existsSync(manifestPath)) {
+            const manifestContent = await fs.promises.readFile(manifestPath, 'utf-8')
+            res.statusCode = 200
+            res.setHeader('Content-Type', 'application/json')
+            res.setHeader('Cache-Control', 'no-cache')
+            res.end(manifestContent)
+          }
+          else {
+            res.statusCode = 404
+            res.end('Manifest not found')
+          }
+        }
+        catch (error) {
+          res.statusCode = 500
+          res.end(`Error reading manifest: ${error instanceof Error ? error.message : String(error)}`)
+        }
+      })
+
       server.middlewares.use('/api/vite/hmr-transform', async (req, res) => {
         if (req.method !== 'POST') {
           res.statusCode = 405