refactor: improve React setup and error handling across runtime

- Refactor React.createElement to explicitly handle key prop separation from props object
- Update _jsx and _jsxs fallbacks to use globalThis.jsx/jsxs or createElement as final fallback
- Add defensive head element check before appending spinner keyframes style
- Simplify fetch cache tags extraction logic and remove redundant array check
- Fix timeout option handling to properly coalesce undefined values with OR operator
- Enhance module reload error collection to capture and return first error from batch
- Add default parameter to getRariVersion function for process.cwd() fallback
- Simplify image lazy load state management by removing ref-based visibility tracking
- Add useDprDescriptors parameter to buildSrcSetString for device pixel ratio support
- Update image srcset generation to support both width and DPR descriptor formats
- Improve props extractor and sitemap generator type safety and error handling

Author: skiniks

crates/rari/src/rsc/rendering/core/js/component_eval_setup.js

@@ -2,11 +2,15 @@
 if (!globalThis.React) {
   globalThis.React = {
     createElement(type, props, ...children) {
+      const propsWithoutKey = props ? { ...props } : {}
+      const key = props && Object.hasOwn(props, 'key') ? props.key : null
+      delete propsWithoutKey.key
+
       const element = {
         $typeof: Symbol.for('react.transitional.element'),
         type,
-        props: props || {},
-        key: props?.key || null,
+        props: propsWithoutKey,
+        key,
       }
       if (children.length > 0)
         element.props = { ...element.props, children: children.length === 1 ? children[0] : children }
@@ -19,9 +23,9 @@ if (!globalThis.React) {
 }
 
 if (typeof _jsx === 'undefined')
-  var _jsx = globalThis['~react']?.jsxRuntime?.jsx || (() => null)
+  var _jsx = globalThis['~react']?.jsxRuntime?.jsx || globalThis.jsx || ((...args) => globalThis.React.createElement(...args))
 if (typeof _jsxs === 'undefined')
-  var _jsxs = globalThis['~react']?.jsxRuntime?.jsxs || (() => null)
+  var _jsxs = globalThis['~react']?.jsxRuntime?.jsxs || globalThis.jsxs || ((...args) => globalThis.React.createElement(...args))
 
 if (typeof globalThis.jsx === 'undefined') {
   globalThis.jsx = function (type, props, key) {
@@ -43,10 +47,13 @@ if (typeof globalThis.jsxs === 'undefined') {
 
 if (typeof globalThis.LoadingSpinner === 'undefined') {
   if (typeof document !== 'undefined' && !document.getElementById('spinner-keyframes')) {
-    const style = document.createElement('style')
-    style.id = 'spinner-keyframes'
-    style.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }'
-    document.head.appendChild(style)
+    const head = document.head || document.getElementsByTagName('head')[0]
+    if (head) {
+      const style = document.createElement('style')
+      style.id = 'spinner-keyframes'
+      style.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }'
+      head.appendChild(style)
+    }
   }
 
   globalThis.LoadingSpinner = function () {

crates/rari/src/runtime/ext/web/init_fetch.js

@@ -131,15 +131,12 @@ async function fetchWithRustCache(input, init, meta) {
     options.cacheTTLMs = String(revalidate * 1000)
   }
 
-  const tags = init?.rari?.tags ?? init?.next?.tags
-  if (tags && Array.isArray(tags)) {
-    const validTags = extractValidTags(init)
-    if (validTags.length > 0) {
-      options.tags = JSON.stringify(validTags)
-    }
+  const validTags = extractValidTags(init)
+  if (validTags.length > 0) {
+    options.tags = JSON.stringify(validTags)
   }
 
-  const timeoutMs = init?.rari?.timeout ?? init?.fetchOptions?.timeout ?? 5000
+  const timeoutMs = (init?.rari?.timeout ?? init?.fetchOptions?.timeout) || 5000
   options.timeout = String(typeof timeoutMs === 'number' && timeoutMs > 0 ? timeoutMs : 5000)
 
   try {

crates/rari/src/runtime/module_reload/manager.rs

@@ -233,17 +233,28 @@ impl ModuleReloadManager {
                 handles.push(handle);
             }
 
+            let mut errors = Vec::new();
             for handle in handles {
                 match handle.await {
                     Ok(Ok(())) => {}
                     Ok(Err(e)) => {
                         error!(error = %e, "Module reload failed in batch");
+                        errors.push(e);
                     }
                     Err(e) => {
                         error!(error = %e, "Batch reload task failed");
+                        errors.push(RariError::module_reload(
+                            ModuleReloadError::RuntimeNotAvailable {
+                                message: format!("Task join error: {}", e),
+                            },
+                        ));
                     }
                 }
             }
+
+            if !errors.is_empty() {
+                return Err(errors.into_iter().next().expect("errors vec is non-empty"));
+            }
         }
 
         Ok(())

packages/deploy/src/utils.ts

@@ -144,7 +144,7 @@ export function ensureMinimumNodeEngine(packageJson: any, minVersion: string = M
   return false
 }
 
-export function getRariVersion(cwd: string): string {
+export function getRariVersion(cwd: string = process.cwd()): string {
   const rariPackageJsonPath = join(cwd, 'node_modules/rari/package.json')
 
   if (!existsSync(rariPackageJsonPath)) {

packages/rari/src/image/Image.tsx

@@ -101,22 +101,7 @@ function useImageLazyLoad(
   loading: 'lazy' | 'eager',
 ) {
   const shouldLoadImmediately = shouldPreload || unoptimized || loading === 'eager'
-  const prevShouldLoadImmediatelyRef = useRef(shouldLoadImmediately)
-
-  const getInitialVisibility = () => {
-    if (shouldLoadImmediately && !prevShouldLoadImmediatelyRef.current) {
-      prevShouldLoadImmediatelyRef.current = true
-      return true
-    }
-
-    return shouldLoadImmediately
-  }
-
-  const [isVisible, setIsVisible] = useState(getInitialVisibility)
-
-  useEffect(() => {
-    prevShouldLoadImmediatelyRef.current = shouldLoadImmediately
-  }, [shouldLoadImmediately])
+  const [hasIntersected, setHasIntersected] = useState(false)
 
   useEffect(() => {
     if (shouldLoadImmediately)
@@ -130,7 +115,7 @@ function useImageLazyLoad(
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            setIsVisible(true)
+            setHasIntersected(true)
             observer.unobserve(img)
           }
         })
@@ -147,7 +132,7 @@ function useImageLazyLoad(
     }
   }, [imgRef, shouldLoadImmediately])
 
-  return isVisible
+  return shouldLoadImmediately || hasIntersected
 }
 
 function buildImageStyle(
@@ -186,9 +171,17 @@ function buildSrcSetString(
   quality: number,
   format: ImageFormat | undefined,
   loader: ImageProps['loader'],
+  useDprDescriptors: boolean = false,
 ): string {
-  if (loader)
+  if (loader) {
+    if (useDprDescriptors)
+      return sizesArray.map((w, i) => `${loader({ src: finalSrc, width: w, quality })} ${i + 1}x`).join(', ')
+
     return sizesArray.map(w => `${loader({ src: finalSrc, width: w, quality })} ${w}w`).join(', ')
+  }
+
+  if (useDprDescriptors)
+    return sizesArray.map((w, i) => `${buildImageUrl(finalSrc, w, quality, format)} ${i + 1}x`).join(', ')
 
   return sizesArray.map(w => `${buildImageUrl(finalSrc, w, quality, format)} ${w}w`).join(', ')
 }
@@ -290,18 +283,21 @@ function OptimizedImage({
   isVisible: boolean
 }) {
   const defaultWidth = imgWidth || 1920
-  const sizesArray = imgWidth ? [imgWidth] : DEFAULT_DEVICE_SIZES
+  const hasFixedWidth = !!imgWidth
+  const sizesArray = hasFixedWidth ? [imgWidth, imgWidth * 2, imgWidth * 3] : DEFAULT_DEVICE_SIZES
+
   const mainSrc = loader
     ? loader({ src: finalSrc, width: defaultWidth, quality })
     : buildImageUrl(finalSrc, defaultWidth, quality)
-  const shouldUseSrcSet = !imgWidth || sizesArray.length > 1 || sizesArray[0] !== defaultWidth
+
+  const shouldUseSrcSet = true
 
   const imgElement = (
     <img
       ref={imgRef}
       src={isVisible ? mainSrc : undefined}
-      srcSet={isVisible && shouldUseSrcSet ? buildSrcSetString(sizesArray, finalSrc, quality, undefined, loader) : undefined}
-      sizes={shouldUseSrcSet ? sizes : undefined}
+      srcSet={isVisible && shouldUseSrcSet ? buildSrcSetString(sizesArray, finalSrc, quality, undefined, loader, hasFixedWidth) : undefined}
+      sizes={hasFixedWidth ? undefined : sizes}
       alt={alt}
       width={fill ? undefined : imgWidth}
       height={fill ? undefined : imgHeight}
@@ -323,15 +319,15 @@ function OptimizedImage({
       {isVisible && !loader && DEFAULT_FORMATS.includes('avif') && (
         <source
           type="image/avif"
-          srcSet={buildSrcSetString(sizesArray, finalSrc, quality, 'avif', loader)}
-          sizes={sizes}
+          srcSet={buildSrcSetString(sizesArray, finalSrc, quality, 'avif', loader, hasFixedWidth)}
+          sizes={hasFixedWidth ? undefined : sizes}
         />
       )}
       {isVisible && !loader && DEFAULT_FORMATS.includes('webp') && (
         <source
           type="image/webp"
-          srcSet={buildSrcSetString(sizesArray, finalSrc, quality, 'webp', loader)}
-          sizes={sizes}
+          srcSet={buildSrcSetString(sizesArray, finalSrc, quality, 'webp', loader, hasFixedWidth)}
+          sizes={hasFixedWidth ? undefined : sizes}
         />
       )}
       {imgElement}

packages/rari/src/proxy/execute-proxy.ts

@@ -23,7 +23,10 @@ export async function executeProxy(simpleRequest: SimpleRequest): Promise<Simple
 
     const event = {
       waitUntil: (promise: Promise<unknown>) => {
-        waitUntilPromises.push(promise)
+        const handledPromise = promise.catch((err) => {
+          return err
+        })
+        waitUntilPromises.push(handledPromise)
       },
     }
 

packages/rari/src/proxy/executor.ts

@@ -8,8 +8,24 @@ export class ProxyExecutor {
   private proxyFn: ProxyFunction | null = null
   private config: ProxyConfig | null = null
   private initialized = false
+  private initializationPromise: Promise<void> | null = null
 
   async loadProxy(proxyModulePath: string): Promise<void> {
+    if (this.initializationPromise) {
+      return this.initializationPromise
+    }
+
+    this.initializationPromise = this.doLoadProxy(proxyModulePath)
+
+    try {
+      await this.initializationPromise
+    }
+    finally {
+      this.initializationPromise = null
+    }
+  }
+
+  private async doLoadProxy(proxyModulePath: string): Promise<void> {
     try {
       const module = await import(proxyModulePath) as ProxyModule
 
@@ -132,6 +148,7 @@ export class ProxyExecutor {
     this.proxyFn = null
     this.config = null
     this.initialized = false
+    this.initializationPromise = null
 
     if (typeof require !== 'undefined' && require.cache)
       delete require.cache[require.resolve(proxyModulePath)]

packages/rari/src/proxy/shared/utils.ts

@@ -11,8 +11,8 @@ export interface SimpleProxyResult {
     permanent: boolean
   }
   rewrite?: string
-  requestHeaders?: Record<string, string>
-  responseHeaders?: Record<string, string>
+  requestHeaders?: Record<string, string | string[]>
+  responseHeaders?: Record<string, string | string[]>
   response?: {
     status: number
     headers: Record<string, string | string[]>
@@ -65,18 +65,34 @@ export function checkForRedirect(result: ResponseLike | null): SimpleProxyResult
   return null
 }
 
-export function extractProxyHeaders(headers: ResponseLike['headers']): { requestHeaders?: Record<string, string>, responseHeaders?: Record<string, string> } {
-  const requestHeaders: Record<string, string> = {}
-  const responseHeaders: Record<string, string> = {}
+export function extractProxyHeaders(headers: ResponseLike['headers']): { requestHeaders?: Record<string, string | string[]>, responseHeaders?: Record<string, string | string[]> } {
+  const requestHeaders: Record<string, string | string[]> = {}
+  const responseHeaders: Record<string, string | string[]> = {}
 
   if (headers?.forEach) {
     headers.forEach((value: string, key: string) => {
       if (key.startsWith('x-rari-proxy-request-')) {
         const headerName = key.replace('x-rari-proxy-request-', '')
-        requestHeaders[headerName] = value
+        const lowerKey = headerName.toLowerCase()
+
+        if (Object.hasOwn(requestHeaders, lowerKey)) {
+          const existing = requestHeaders[lowerKey]
+          requestHeaders[lowerKey] = Array.isArray(existing) ? [...existing, value] : [existing, value]
+        }
+        else {
+          requestHeaders[lowerKey] = value
+        }
       }
       else if (!key.startsWith('x-rari-proxy-')) {
-        responseHeaders[key] = value
+        const lowerKey = key.toLowerCase()
+
+        if (Object.hasOwn(responseHeaders, lowerKey)) {
+          const existing = responseHeaders[lowerKey]
+          responseHeaders[lowerKey] = Array.isArray(existing) ? [...existing, value] : [existing, value]
+        }
+        else {
+          responseHeaders[lowerKey] = value
+        }
       }
     })
   }
@@ -102,7 +118,8 @@ export async function handleDirectResponse(result: ResponseLike): Promise<Simple
   if (result.headers?.forEach) {
     result.headers.forEach((value: string, key: string) => {
       const lowerKey = key.toLowerCase()
-      if (headers[lowerKey]) {
+
+      if (Object.hasOwn(headers, lowerKey)) {
         const existing = headers[lowerKey]
         headers[lowerKey] = Array.isArray(existing) ? [...existing, value] : [existing, value]
       }

packages/rari/src/router/props-extractor.ts

@@ -182,11 +182,7 @@ function mergeTitleField(parentTitle: MetadataResult['title'], childTitle: Metad
   if (typeof childTitle === 'string') {
     if (typeof parentTitle === 'object' && parentTitle?.template) {
       const hasPlaceholder = parentTitle.template.includes('%s')
-      const resolvedTitle = hasPlaceholder ? parentTitle.template.replace('%s', childTitle) : childTitle
-      return {
-        ...parentTitle,
-        default: resolvedTitle,
-      }
+      return hasPlaceholder ? parentTitle.template.replace('%s', childTitle) : childTitle
     }
 
     return childTitle

packages/rari/src/router/sitemap-generator.ts

@@ -309,7 +309,10 @@ async function generateMultipleSitemaps(module: any, outDir: string): Promise<vo
 
   for (const { id } of sitemapIds) {
     try {
-      const sanitizedId = String(id).replace(SANITIZE_ID_REGEX, '_')
+      let sanitizedId = String(id).replace(SANITIZE_ID_REGEX, '_')
+
+      if (!sanitizedId || sanitizedId.length === 0)
+        sanitizedId = '_'
 
       const existingId = seenSanitizedIds.get(sanitizedId)
       if (existingId !== undefined) {