rari 0.5.16 → 0.5.18

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-AtnJSL0q.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-DCkfDJpL.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,6 +1,6 @@
 import { a as headers, i as rariRouter, n as defineRariOptions, o as RariResponse, r as rari, t as defineRariConfig } from "./vite-B_QMp3M4.mjs";
 import { i as writeManifest, n as generateAppRouteManifest, r as loadManifest, t as AppRouteGenerator } from "./app-routes-DZjfJPdB.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-AtnJSL0q.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-DCkfDJpL.mjs";
 import "./server-build-ChAPR3tl.mjs";
 
 export { AppRouteGenerator, HttpRuntimeClient, RariResponse, clearPropsCache, clearPropsCacheForComponent, createHttpRuntimeClient, defineRariConfig, defineRariOptions, extractMetadata, extractServerProps, extractServerPropsWithCache, extractStaticParams, generateAppRouteManifest, hasServerSideDataFetching, headers, loadManifest, rari, rariRouter, writeManifest };

package/dist/{runtime-client-AtnJSL0q.mjs → runtime-client-DCkfDJpL.mjs}

@@ -923,6 +923,112 @@ var StatePreserver = class {
 
 //#endregion
 //#region src/router/ClientRouter.tsx
+function updateDocumentMetadata(metadata) {
+	if (metadata.title) document.title = metadata.title;
+	const updateOrCreateMetaTag = (selector, attributes) => {
+		let element = document.querySelector(selector);
+		if (!element) {
+			element = document.createElement("meta");
+			for (const [key, value] of Object.entries(attributes)) element.setAttribute(key, value);
+			document.head.appendChild(element);
+		} else if (attributes.content) element.setAttribute("content", attributes.content);
+	};
+	if (metadata.description) updateOrCreateMetaTag("meta[name=\"description\"]", {
+		name: "description",
+		content: metadata.description
+	});
+	if (metadata.keywords && metadata.keywords.length > 0) updateOrCreateMetaTag("meta[name=\"keywords\"]", {
+		name: "keywords",
+		content: metadata.keywords.join(", ")
+	});
+	if (metadata.viewport) updateOrCreateMetaTag("meta[name=\"viewport\"]", {
+		name: "viewport",
+		content: metadata.viewport
+	});
+	if (metadata.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", metadata.canonical);
+	}
+	if (metadata.robots) {
+		const robotsContent = [];
+		if (metadata.robots.index !== void 0) robotsContent.push(metadata.robots.index ? "index" : "noindex");
+		if (metadata.robots.follow !== void 0) robotsContent.push(metadata.robots.follow ? "follow" : "nofollow");
+		if (metadata.robots.nocache) robotsContent.push("nocache");
+		if (robotsContent.length > 0) updateOrCreateMetaTag("meta[name=\"robots\"]", {
+			name: "robots",
+			content: robotsContent.join(", ")
+		});
+	}
+	if (metadata.openGraph) {
+		const og = metadata.openGraph;
+		if (og.title) updateOrCreateMetaTag("meta[property=\"og:title\"]", {
+			property: "og:title",
+			content: og.title
+		});
+		if (og.description) updateOrCreateMetaTag("meta[property=\"og:description\"]", {
+			property: "og:description",
+			content: og.description
+		});
+		if (og.url) updateOrCreateMetaTag("meta[property=\"og:url\"]", {
+			property: "og:url",
+			content: og.url
+		});
+		if (og.siteName) updateOrCreateMetaTag("meta[property=\"og:site_name\"]", {
+			property: "og:site_name",
+			content: og.siteName
+		});
+		if (og.type) updateOrCreateMetaTag("meta[property=\"og:type\"]", {
+			property: "og:type",
+			content: og.type
+		});
+		if (og.images && og.images.length > 0) {
+			document.querySelectorAll("meta[property=\"og:image\"]").forEach((el) => el.remove());
+			for (const image of og.images) {
+				const meta = document.createElement("meta");
+				meta.setAttribute("property", "og:image");
+				meta.setAttribute("content", image);
+				document.head.appendChild(meta);
+			}
+		}
+	}
+	if (metadata.twitter) {
+		const twitter = metadata.twitter;
+		if (twitter.card) updateOrCreateMetaTag("meta[name=\"twitter:card\"]", {
+			name: "twitter:card",
+			content: twitter.card
+		});
+		if (twitter.site) updateOrCreateMetaTag("meta[name=\"twitter:site\"]", {
+			name: "twitter:site",
+			content: twitter.site
+		});
+		if (twitter.creator) updateOrCreateMetaTag("meta[name=\"twitter:creator\"]", {
+			name: "twitter:creator",
+			content: twitter.creator
+		});
+		if (twitter.title) updateOrCreateMetaTag("meta[name=\"twitter:title\"]", {
+			name: "twitter:title",
+			content: twitter.title
+		});
+		if (twitter.description) updateOrCreateMetaTag("meta[name=\"twitter:description\"]", {
+			name: "twitter:description",
+			content: twitter.description
+		});
+		if (twitter.images && twitter.images.length > 0) {
+			document.querySelectorAll("meta[name=\"twitter:image\"]").forEach((el) => el.remove());
+			for (const image of twitter.images) {
+				const meta = document.createElement("meta");
+				meta.setAttribute("name", "twitter:image");
+				meta.setAttribute("content", image);
+				document.head.appendChild(meta);
+			}
+		}
+	}
+}
 function ClientRouter({ children, manifest, initialRoute }) {
 	const [navigationState, setNavigationState] = useState(() => ({
 		currentRoute: normalizePath(initialRoute),
@@ -1083,6 +1189,15 @@ function ClientRouter({ children, manifest, initialRoute }) {
 					cleanupAbortedNavigation(targetPath, navigationId);
 					return;
 				}
+				try {
+					const metadataHeader = response.headers.get("x-rari-metadata");
+					if (metadataHeader) {
+						const decodedMetadata = decodeURIComponent(metadataHeader);
+						updateDocumentMetadata(JSON.parse(decodedMetadata));
+					}
+				} catch (metadataError) {
+					console.warn("[ClientRouter] Failed to extract/apply metadata:", metadataError);
+				}
 				const rscWireFormat = await response.text();
 				window.dispatchEvent(new CustomEvent("rari:navigate", { detail: {
 					from: fromRoute,
@@ -1443,7 +1558,6 @@ async function extractMetadata(componentPath, params, searchParams) {
 			/* @vite-ignore */
 			componentPath
 );
-		if (module.metadata && typeof module.metadata === "object") return module.metadata;
 		if (typeof module.generateMetadata === "function") {
 			const metadata = await module.generateMetadata({
 				params,
@@ -1451,6 +1565,7 @@ async function extractMetadata(componentPath, params, searchParams) {
 			});
 			if (metadata && typeof metadata === "object") return metadata;
 		}
+		if (module.metadata && typeof module.metadata === "object") return module.metadata;
 		return {};
 	} catch (error) {
 		console.error(`Failed to extract metadata from ${componentPath}:`, error);

package/dist/vite.mjs

@@ -1,6 +1,6 @@
 import { a as headers, i as rariRouter, n as defineRariOptions, o as RariResponse, r as rari, t as defineRariConfig } from "./vite-B_QMp3M4.mjs";
 import { i as writeManifest, n as generateAppRouteManifest, r as loadManifest, t as AppRouteGenerator } from "./app-routes-DZjfJPdB.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-AtnJSL0q.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-DCkfDJpL.mjs";
 import "./server-build-ChAPR3tl.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.16",
+  "version": "0.5.18",
   "description": "Runtime Accelerated Rendering Infrastructure (Rari)",
   "author": "Ryan Skinner",
   "license": "MIT",
@@ -89,11 +89,11 @@
     "picocolors": "^1.1.1"
   },
   "optionalDependencies": {
-    "rari-darwin-arm64": "0.5.10",
-    "rari-darwin-x64": "0.5.10",
-    "rari-linux-arm64": "0.5.10",
-    "rari-linux-x64": "0.5.10",
-    "rari-win32-x64": "0.5.10"
+    "rari-darwin-arm64": "0.5.12",
+    "rari-darwin-x64": "0.5.12",
+    "rari-linux-arm64": "0.5.12",
+    "rari-linux-x64": "0.5.12",
+    "rari-win32-x64": "0.5.12"
   },
   "devDependencies": {
     "@types/node": "^25.0.1",

package/src/router/ClientRouter.tsx

@@ -12,6 +12,193 @@ import { extractPathname, findLayoutChain, isExternalUrl, matchRouteParams, norm
 import { NavigationErrorOverlay } from './NavigationErrorOverlay'
 import { StatePreserver } from './StatePreserver'
 
+interface PageMetadata {
+  title?: string
+  description?: string
+  keywords?: string[]
+  viewport?: string
+  canonical?: string
+  openGraph?: {
+    title?: string
+    description?: string
+    url?: string
+    siteName?: string
+    images?: string[]
+    type?: string
+  }
+  twitter?: {
+    card?: string
+    site?: string
+    creator?: string
+    title?: string
+    description?: string
+    images?: string[]
+  }
+  robots?: {
+    index?: boolean
+    follow?: boolean
+    nocache?: boolean
+  }
+}
+
+function updateDocumentMetadata(metadata: PageMetadata): void {
+  if (metadata.title) {
+    document.title = metadata.title
+  }
+
+  const updateOrCreateMetaTag = (selector: string, attributes: Record<string, string>) => {
+    let element = document.querySelector(selector) as HTMLMetaElement | null
+    if (!element) {
+      element = document.createElement('meta')
+      for (const [key, value] of Object.entries(attributes)) {
+        element.setAttribute(key, value)
+      }
+      document.head.appendChild(element)
+    }
+    else {
+      if (attributes.content) {
+        element.setAttribute('content', attributes.content)
+      }
+    }
+  }
+
+  if (metadata.description) {
+    updateOrCreateMetaTag('meta[name="description"]', {
+      name: 'description',
+      content: metadata.description,
+    })
+  }
+
+  if (metadata.keywords && metadata.keywords.length > 0) {
+    updateOrCreateMetaTag('meta[name="keywords"]', {
+      name: 'keywords',
+      content: metadata.keywords.join(', '),
+    })
+  }
+
+  if (metadata.viewport) {
+    updateOrCreateMetaTag('meta[name="viewport"]', {
+      name: 'viewport',
+      content: metadata.viewport,
+    })
+  }
+
+  if (metadata.canonical) {
+    let canonical = document.querySelector('link[rel="canonical"]') as HTMLLinkElement | null
+    if (!canonical) {
+      canonical = document.createElement('link')
+      canonical.setAttribute('rel', 'canonical')
+      document.head.appendChild(canonical)
+    }
+    canonical.setAttribute('href', metadata.canonical)
+  }
+
+  if (metadata.robots) {
+    const robotsContent: string[] = []
+    if (metadata.robots.index !== undefined) {
+      robotsContent.push(metadata.robots.index ? 'index' : 'noindex')
+    }
+    if (metadata.robots.follow !== undefined) {
+      robotsContent.push(metadata.robots.follow ? 'follow' : 'nofollow')
+    }
+    if (metadata.robots.nocache) {
+      robotsContent.push('nocache')
+    }
+    if (robotsContent.length > 0) {
+      updateOrCreateMetaTag('meta[name="robots"]', {
+        name: 'robots',
+        content: robotsContent.join(', '),
+      })
+    }
+  }
+
+  if (metadata.openGraph) {
+    const og = metadata.openGraph
+    if (og.title) {
+      updateOrCreateMetaTag('meta[property="og:title"]', {
+        property: 'og:title',
+        content: og.title,
+      })
+    }
+    if (og.description) {
+      updateOrCreateMetaTag('meta[property="og:description"]', {
+        property: 'og:description',
+        content: og.description,
+      })
+    }
+    if (og.url) {
+      updateOrCreateMetaTag('meta[property="og:url"]', {
+        property: 'og:url',
+        content: og.url,
+      })
+    }
+    if (og.siteName) {
+      updateOrCreateMetaTag('meta[property="og:site_name"]', {
+        property: 'og:site_name',
+        content: og.siteName,
+      })
+    }
+    if (og.type) {
+      updateOrCreateMetaTag('meta[property="og:type"]', {
+        property: 'og:type',
+        content: og.type,
+      })
+    }
+    if (og.images && og.images.length > 0) {
+      document.querySelectorAll('meta[property="og:image"]').forEach(el => el.remove())
+      for (const image of og.images) {
+        const meta = document.createElement('meta')
+        meta.setAttribute('property', 'og:image')
+        meta.setAttribute('content', image)
+        document.head.appendChild(meta)
+      }
+    }
+  }
+
+  if (metadata.twitter) {
+    const twitter = metadata.twitter
+    if (twitter.card) {
+      updateOrCreateMetaTag('meta[name="twitter:card"]', {
+        name: 'twitter:card',
+        content: twitter.card,
+      })
+    }
+    if (twitter.site) {
+      updateOrCreateMetaTag('meta[name="twitter:site"]', {
+        name: 'twitter:site',
+        content: twitter.site,
+      })
+    }
+    if (twitter.creator) {
+      updateOrCreateMetaTag('meta[name="twitter:creator"]', {
+        name: 'twitter:creator',
+        content: twitter.creator,
+      })
+    }
+    if (twitter.title) {
+      updateOrCreateMetaTag('meta[name="twitter:title"]', {
+        name: 'twitter:title',
+        content: twitter.title,
+      })
+    }
+    if (twitter.description) {
+      updateOrCreateMetaTag('meta[name="twitter:description"]', {
+        name: 'twitter:description',
+        content: twitter.description,
+      })
+    }
+    if (twitter.images && twitter.images.length > 0) {
+      document.querySelectorAll('meta[name="twitter:image"]').forEach(el => el.remove())
+      for (const image of twitter.images) {
+        const meta = document.createElement('meta')
+        meta.setAttribute('name', 'twitter:image')
+        meta.setAttribute('content', image)
+        document.head.appendChild(meta)
+      }
+    }
+  }
+}
+
 export interface ClientRouterProps {
   children: React.ReactNode
   manifest: AppRouteManifest
@@ -305,6 +492,18 @@ export function ClientRouter({ children, manifest, initialRoute }: ClientRouterP
           return
         }
 
+        try {
+          const metadataHeader = response.headers.get('x-rari-metadata')
+          if (metadataHeader) {
+            const decodedMetadata = decodeURIComponent(metadataHeader)
+            const metadata = JSON.parse(decodedMetadata) as PageMetadata
+            updateDocumentMetadata(metadata)
+          }
+        }
+        catch (metadataError) {
+          console.warn('[ClientRouter] Failed to extract/apply metadata:', metadataError)
+        }
+
         const rscWireFormat = await response.text()
 
         window.dispatchEvent(new CustomEvent('rari:navigate', {

package/src/router/index.ts

@@ -80,11 +80,13 @@ export type { NavigationErrorOverlayProps } from './NavigationErrorOverlay'
 export {
   clearPropsCache,
   clearPropsCacheForComponent,
+  collectMetadataFromChain,
   extractMetadata,
   extractServerProps,
   extractServerPropsWithCache,
   extractStaticParams,
   hasServerSideDataFetching,
+  mergeMetadata,
 } from './props-extractor'
 
 export type {

package/src/router/props-extractor.ts

@@ -162,10 +162,6 @@ export async function extractMetadata(
   try {
     const module = await import(/* @vite-ignore */ componentPath)
 
-    if (module.metadata && typeof module.metadata === 'object') {
-      return module.metadata
-    }
-
     if (typeof module.generateMetadata === 'function') {
       const metadata = await module.generateMetadata({ params, searchParams })
       if (metadata && typeof metadata === 'object') {
@@ -173,6 +169,10 @@ export async function extractMetadata(
       }
     }
 
+    if (module.metadata && typeof module.metadata === 'object') {
+      return module.metadata
+    }
+
     return {}
   }
   catch (error) {
@@ -181,6 +181,60 @@ export async function extractMetadata(
   }
 }
 
+export function mergeMetadata(
+  parentMetadata: MetadataResult,
+  childMetadata: MetadataResult,
+): MetadataResult {
+  const merged: MetadataResult = { ...parentMetadata }
+
+  if (childMetadata.title !== undefined) {
+    if (typeof childMetadata.title === 'string') {
+      if (typeof parentMetadata.title === 'object' && parentMetadata.title?.template) {
+        merged.title = parentMetadata.title.template.replace('%s', childMetadata.title)
+      }
+      else {
+        merged.title = childMetadata.title
+      }
+    }
+    else {
+      merged.title = childMetadata.title
+    }
+  }
+
+  if (childMetadata.description !== undefined) {
+    merged.description = childMetadata.description
+  }
+  if (childMetadata.keywords !== undefined) {
+    merged.keywords = childMetadata.keywords
+  }
+  if (childMetadata.openGraph !== undefined) {
+    merged.openGraph = { ...parentMetadata.openGraph, ...childMetadata.openGraph }
+  }
+  if (childMetadata.twitter !== undefined) {
+    merged.twitter = { ...parentMetadata.twitter, ...childMetadata.twitter }
+  }
+  if (childMetadata.robots !== undefined) {
+    merged.robots = { ...parentMetadata.robots, ...childMetadata.robots }
+  }
+  if (childMetadata.icons !== undefined) {
+    merged.icons = { ...parentMetadata.icons, ...childMetadata.icons }
+  }
+  if (childMetadata.manifest !== undefined) {
+    merged.manifest = childMetadata.manifest
+  }
+  if (childMetadata.viewport !== undefined) {
+    merged.viewport = { ...parentMetadata.viewport, ...childMetadata.viewport }
+  }
+  if (childMetadata.verification !== undefined) {
+    merged.verification = { ...parentMetadata.verification, ...childMetadata.verification }
+  }
+  if (childMetadata.alternates !== undefined) {
+    merged.alternates = { ...parentMetadata.alternates, ...childMetadata.alternates }
+  }
+
+  return merged
+}
+
 export async function extractStaticParams(
   componentPath: string,
 ): Promise<StaticParamsResult> {
@@ -260,3 +314,22 @@ export function clearPropsCacheForComponent(componentPath: string): void {
     }
   }
 }
+
+export async function collectMetadataFromChain(
+  layoutPaths: string[],
+  pagePath: string,
+  params: Record<string, string>,
+  searchParams: Record<string, string>,
+): Promise<MetadataResult> {
+  let metadata: MetadataResult = {}
+
+  for (const layoutPath of layoutPaths) {
+    const layoutMetadata = await extractMetadata(layoutPath, params, searchParams)
+    metadata = mergeMetadata(metadata, layoutMetadata)
+  }
+
+  const pageMetadata = await extractMetadata(pagePath, params, searchParams)
+  metadata = mergeMetadata(metadata, pageMetadata)
+
+  return metadata
+}