rari 0.2.4 → 0.2.6

package/dist/index.js

@@ -1,5 +1,5 @@
 import { HttpRuntimeClient, Link, Navigate, Outlet, RouteComponent, Routes, buildSearchString, buildUrl, createHttpRuntimeClient, extractParamNames, findMatchingRoute, getRoutePriority, isDynamicRoute, isPathActive, joinPaths, normalizePathname, parseSearchParams, parseUrl, router_default, useNavigation, useParams, usePathname, useRoute, useRouter, useSearchParams, withRouter } from "./runtime-client-CcEhh-F7.js";
-import { FileRouteGenerator, convertFilePatternToRoutePattern, createReactDOMOptimization, createRouteManifest, defineRariConfig, generateFileRoutes, loadRouteManifest, rari, rariRouter, validateRoutes, watchFileRoutes } from "./server-BwDou3Zb.js";
+import { FileRouteGenerator, convertFilePatternToRoutePattern, createReactDOMOptimization, createRouteManifest, defineRariConfig, generateFileRoutes, loadRouteManifest, rari, rariRouter, validateRoutes, watchFileRoutes } from "./server-MkYb94pQ.js";
 import "./server-build-DaBgiV55.js";
 
 export { FileRouteGenerator, HttpRuntimeClient, Link, Navigate, Outlet, RouteComponent as Route, router_default as RouterProvider, Routes, buildSearchString, buildUrl, convertFilePatternToRoutePattern, createHttpRuntimeClient, createReactDOMOptimization, createRouteManifest, defineRariConfig, extractParamNames, findMatchingRoute, generateFileRoutes, getRoutePriority, isDynamicRoute, isPathActive, joinPaths, loadRouteManifest, normalizePathname, parseSearchParams, parseUrl, rari, rariRouter, useNavigation, useParams, usePathname, useRoute, useRouter, useSearchParams, validateRoutes, watchFileRoutes, withRouter };

package/dist/{server-BwDou3Zb.js → server-MkYb94pQ.js}

@@ -5111,7 +5111,7 @@ var require_chokidar = __commonJS({ "../../node_modules/.pnpm/chokidar@3.6.0/nod
 
 //#endregion
 //#region src/router/file-routes.ts
-var import_chokidar$1 = __toESM(require_chokidar());
+var import_chokidar$1 = __toESM(require_chokidar(), 1);
 var FileRouteGenerator = class {
 	pagesDir;
 	extensions;
@@ -5420,7 +5420,7 @@ function convertFilePatternToRoutePattern(pattern) {
 
 //#endregion
 //#region src/router/vite-plugin.ts
-var import_chokidar = __toESM(require_chokidar());
+var import_chokidar = __toESM(require_chokidar(), 1);
 const DEFAULT_OPTIONS = {
 	pagesDir: "src/pages",
 	extensions: [
@@ -5964,8 +5964,9 @@ if (import.meta.hot) {
 				config.build.rolldownOptions.treeshake = config.build.rolldownOptions.treeshake || {
 					moduleSideEffects: (id) => {
 						if (id.includes(".css") || id.includes("polyfill")) return true;
-						if (id.includes("react-dom") || id.includes("react") || id.includes("scheduler") || id.includes("react-dom/client") || id.includes("react-dom/server")) return false;
-						return false;
+						if (id.includes("react-dom") || id.includes("react") || id.includes("scheduler") || id.includes("react-dom/client") || id.includes("react-dom/server")) return true;
+						if (id.includes("node_modules") && !id.includes("react")) return false;
+						return true;
 					},
 					unknownGlobalSideEffects: false
 				};

package/dist/server.js

@@ -1,5 +1,5 @@
 import { HttpRuntimeClient, Link, Navigate, Outlet, RouteComponent, Routes, buildSearchString, buildUrl, createHttpRuntimeClient, extractParamNames, findMatchingRoute, getRoutePriority, isDynamicRoute, isPathActive, joinPaths, normalizePathname, parseSearchParams, parseUrl, router_default, useNavigation, useParams, usePathname, useRoute, useRouter, useSearchParams, withRouter } from "./runtime-client-CcEhh-F7.js";
-import { FileRouteGenerator, convertFilePatternToRoutePattern, createReactDOMOptimization, createRouteManifest, defineRariConfig, generateFileRoutes, loadRouteManifest, rari, rariRouter, validateRoutes, watchFileRoutes } from "./server-BwDou3Zb.js";
+import { FileRouteGenerator, convertFilePatternToRoutePattern, createReactDOMOptimization, createRouteManifest, defineRariConfig, generateFileRoutes, loadRouteManifest, rari, rariRouter, validateRoutes, watchFileRoutes } from "./server-MkYb94pQ.js";
 import "./server-build-DaBgiV55.js";
 
 export { FileRouteGenerator, HttpRuntimeClient, Link, Navigate, Outlet, RouteComponent as Route, router_default as RouterProvider, Routes, buildSearchString, buildUrl, convertFilePatternToRoutePattern, createHttpRuntimeClient, createReactDOMOptimization, createRouteManifest, defineRariConfig, extractParamNames, findMatchingRoute, generateFileRoutes, getRoutePriority, isDynamicRoute, isPathActive, joinPaths, loadRouteManifest, normalizePathname, parseSearchParams, parseUrl, rari, rariRouter, useNavigation, useParams, usePathname, useRoute, useRouter, useSearchParams, validateRoutes, watchFileRoutes, withRouter };

package/package.json

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

package/src/vite/index.ts

@@ -6,7 +6,6 @@ import fs from 'node:fs'
 import path from 'node:path'
 import process from 'node:process'
 import * as acorn from 'acorn'
-import { minify } from 'rollup-plugin-esbuild'
 import { createServerBuildPlugin } from './server-build'
 
 interface RariOptions {
@@ -228,6 +227,7 @@ export function rari(options: RariOptions = {}): Plugin[] {
 
     newCode += `
 
+// HMR acceptance for server components
 if (import.meta.hot) {
   import.meta.hot.accept(() => {
     // Server component updated, no need to reload
@@ -384,9 +384,6 @@ if (import.meta.hot) {
       (config.resolve as any).alias = {
         ...existingResolveAlias,
         'react-dom/server': 'react-dom/server.browser',
-        'react-dom$': 'react-dom/client',
-        'react-dom/cjs/react-dom.production.min.js': 'react-dom/client',
-        'react-dom/cjs/react-dom.development.js': 'react-dom/client',
       }
 
       const existingAlias: Array<{
@@ -519,46 +516,6 @@ if (import.meta.hot) {
         config.build = config.build || {}
         config.build.rolldownOptions = config.build.rolldownOptions || {}
 
-        config.build.rolldownOptions.plugins
-          = config.build.rolldownOptions.plugins || []
-        if (Array.isArray(config.build.rolldownOptions.plugins)) {
-          config.build.rolldownOptions.plugins.push(minify())
-
-          config.build.rolldownOptions.plugins.push({
-            name: 'html-css-optimizer',
-            generateBundle(options, bundle) {
-              Object.keys(bundle).forEach((fileName) => {
-                const file = bundle[fileName]
-                if (file.type === 'asset' && fileName.endsWith('.html')) {
-                  let html = file.source as string
-
-                  html = html.replace(
-                    /<link\s+rel="stylesheet"\s+crossorigin\s+href="([^"]+\.css)"\s*>/g,
-                    (match, href) => {
-                      return `<link rel="preload" as="style" crossorigin href="${href}" fetchpriority="high" onload="this.onload=null;this.rel='stylesheet'">
-  <noscript><link rel="stylesheet" crossorigin href="${href}"></noscript>`
-                    },
-                  )
-
-                  const scriptMatch = html.match(
-                    /<script\s+type="module"\s+crossorigin\s+src="([^"]+)"\s*><\/script>/,
-                  )
-                  if (scriptMatch) {
-                    const mainJsHref = scriptMatch[1]
-                    html = html.replace(
-                      scriptMatch[0],
-                      `<link rel="preload" as="script" crossorigin href="${mainJsHref}" fetchpriority="high">
-  <script type="module" crossorigin src="${mainJsHref}" fetchpriority="high"></script>`,
-                    )
-                  }
-
-                  file.source = html
-                }
-              })
-            },
-          })
-        }
-
         if (!config.build.rolldownOptions.input) {
           config.build.rolldownOptions.input = {
             main: './index.html',
@@ -571,31 +528,22 @@ if (import.meta.hot) {
           ? config.build.rolldownOptions.output[0] || {}
           : config.build.rolldownOptions.output
 
-        outputConfig.manualChunks = (id) => {
-          if (
-            id.includes('node_modules/react-dom')
-            || id.includes('react-dom/client')
-            || id.includes('react-dom/server')
-            || id.includes('react-dom/')
-          ) {
-            return 'react-dom'
-          }
-          if (
-            (id.includes('node_modules/react') || id.includes('react/'))
-            && !id.includes('react-dom')
-          ) {
-            return 'react'
-          }
-          if (id.includes('scheduler') && id.includes('node_modules')) {
-            return 'scheduler'
-          }
-          if (id.includes('markdown-it') || id.includes('shiki')) {
-            return 'vendor'
-          }
-          if (id.includes('node_modules')) {
-            return 'vendor'
-          }
-        }
+        outputConfig.manualChunks
+          = outputConfig.manualChunks
+            || ((id) => {
+              if (id.includes('react-dom')) {
+                return 'react-dom'
+              }
+              if (id.includes('react') && !id.includes('react-dom')) {
+                return 'react'
+              }
+              if (id.includes('markdown-it') || id.includes('shiki')) {
+                return 'vendor'
+              }
+              if (id.includes('node_modules')) {
+                return 'vendor'
+              }
+            })
 
         config.build.rolldownOptions.treeshake = config.build.rolldownOptions
           .treeshake || {
@@ -603,26 +551,19 @@ if (import.meta.hot) {
             if (id.includes('.css') || id.includes('polyfill')) {
               return true
             }
-            // Preserve side effects for React modules to prevent import issues
             if (
               id.includes('react-dom')
               || id.includes('react')
               || id.includes('scheduler')
-              || id.includes('react-dom/client')
-              || id.includes('react-dom/server')
             ) {
-              return true
-            }
-            // Only disable side effects for specific safe modules
-            if (id.includes('node_modules') && !id.includes('react')) {
               return false
             }
-            return true
+            return false
           },
           unknownGlobalSideEffects: false,
         }
 
-        const existingExternal = config.build.rolldownOptions?.external || []
+        const existingExternal = config.build.rolldownOptions.external || []
         const reactDomExternals = [
           'react-dom/profiling',
           'react-dom/test-utils',
@@ -636,10 +577,6 @@ if (import.meta.hot) {
           'react/cjs/react.production.min.js',
           'react-dom/cjs/react-dom.development.js',
           'react-dom/cjs/react-dom.production.min.js',
-          'react-dom/src/client/ReactDOMRoot.js',
-          'react-dom/src/events/plugins',
-          'react-dom/src/shared/HTMLDOMPropertyConfig.js',
-          'react-dom/src/shared/DOMPropertyOperations.js',
         ]
 
         if (Array.isArray(existingExternal)) {
@@ -651,11 +588,7 @@ if (import.meta.hot) {
         }
         else if (typeof existingExternal === 'function') {
           const originalExternal = existingExternal
-          config.build.rolldownOptions.external = (
-            id,
-            parentId,
-            isResolved,
-          ) => {
+          config.build.rolldownOptions.external = (id, parentId, isResolved) => {
             if (reactDomExternals.includes(id))
               return true
             return originalExternal(id, parentId, isResolved)
@@ -670,7 +603,7 @@ if (import.meta.hot) {
           ].filter(Boolean)
         }
 
-        config.build.minify = true
+        config.build.minify = config.build.minify !== false ? 'terser' : false
         config.build.target = config.build.target || [
           'es2020',
           'edge88',
@@ -680,47 +613,18 @@ if (import.meta.hot) {
         ]
         config.build.cssMinify
           = config.build.cssMinify !== false ? 'esbuild' : false
-        config.build.cssCodeSplit = true
-        config.build.assetsInlineLimit = 4096
-        config.build.chunkSizeWarningLimit = 1000
         config.build.sourcemap
-          = config.build.sourcemap !== undefined ? config.build.sourcemap : true
+          = config.build.sourcemap !== undefined ? config.build.sourcemap : false
 
         config.build.terserOptions = config.build.terserOptions || {
           compress: {
             drop_console: true,
             drop_debugger: true,
-            pure_funcs: [
-              'console.log',
-              'console.info',
-              'console.debug',
-              'console.warn',
-              'invariant',
-              'warning',
-              '__DEV__',
-              'ReactDOM.render',
-              'ReactDOM.unmountComponentAtNode',
-              'ReactDOM.findDOMNode',
-              'ReactDOM.createPortal',
-            ],
-            passes: 3,
-            unsafe: true,
-            unsafe_comps: true,
-            unsafe_Function: true,
-            unsafe_math: true,
-            unsafe_symbols: true,
-            unsafe_methods: true,
-            unsafe_proto: true,
-            unsafe_regexp: true,
-            unsafe_undefined: true,
-            dead_code: true,
-            side_effects: false,
+            pure_funcs: ['console.log', 'console.info', 'console.debug'],
+            passes: 2,
           },
           mangle: {
             safari10: true,
-            properties: {
-              regex: /^_/,
-            },
           },
           format: {
             comments: false,
@@ -762,19 +666,8 @@ if (import.meta.hot) {
           )['client-components'] = 'virtual:rsc-client-components'
         }
 
-        config.environments.client.build.rolldownOptions.plugins
-          = config.environments.client.build.rolldownOptions.plugins || []
-        if (
-          Array.isArray(
-            config.environments.client.build.rolldownOptions.plugins,
-          )
-        ) {
-          config.environments.client.build.rolldownOptions.plugins.push(
-            minify(),
-          )
-        }
-
-        config.environments.client.build.minify = true
+        config.environments.client.build.minify
+          = config.environments.client.build.minify !== false ? 'esbuild' : false
         config.environments.client.build.target = config.environments.client
           .build
           .target || [
@@ -785,8 +678,6 @@ if (import.meta.hot) {
           'safari14',
         ]
         config.environments.client.build.cssMinify = 'esbuild'
-        config.environments.client.build.cssCodeSplit = true
-        config.environments.client.build.assetsInlineLimit = 4096
         config.environments.client.build.rolldownOptions.treeshake = {
           moduleSideEffects: false,
           unknownGlobalSideEffects: false,
@@ -800,37 +691,28 @@ if (import.meta.hot) {
           ? config.environments.client.build.rolldownOptions.output[0] || {}
           : config.environments.client.build.rolldownOptions.output
 
-        clientOutputConfig.manualChunks = (id) => {
-          if (
-            id.includes('node_modules/react-dom')
-            || id.includes('react-dom/client')
-            || id.includes('react-dom/server')
-            || id.includes('react-dom/')
-          ) {
-            return 'react-dom'
-          }
-          if (
-            (id.includes('node_modules/react') || id.includes('react/'))
-            && !id.includes('react-dom')
-          ) {
-            return 'react'
-          }
-          if (id.includes('scheduler') && id.includes('node_modules')) {
-            return 'scheduler'
-          }
-          if (
-            id.includes('rari')
-            && (id.includes('router') || id.includes('navigation'))
-          ) {
-            return 'router'
-          }
-          if (id.includes('markdown-it') || id.includes('shiki')) {
-            return 'vendor'
-          }
-          if (id.includes('node_modules')) {
-            return 'vendor'
-          }
-        }
+        clientOutputConfig.manualChunks
+          = clientOutputConfig.manualChunks
+            || ((id) => {
+              if (id.includes('react-dom')) {
+                return 'react-dom'
+              }
+              if (id.includes('react') && !id.includes('react-dom')) {
+                return 'react'
+              }
+              if (
+                id.includes('rari')
+                && (id.includes('router') || id.includes('navigation'))
+              ) {
+                return 'router'
+              }
+              if (id.includes('markdown-it') || id.includes('shiki')) {
+                return 'vendor'
+              }
+              if (id.includes('node_modules')) {
+                return 'vendor'
+              }
+            })
 
         clientOutputConfig.format = clientOutputConfig.format || 'es'
         clientOutputConfig.minify = true
@@ -855,20 +737,6 @@ if (import.meta.hot) {
         return null
       }
 
-      if (code.includes('react-dom')) {
-        code = code.replace(
-          /import\s+ReactDOM\s+from\s+['"]react-dom\/client['"];?/g,
-          'import { createRoot, hydrateRoot } from \'react-dom/client\';',
-        )
-        code = code.replace(
-          /import\s+ReactDOM\s+from\s+['"]react-dom['"];?/g,
-          'import { createRoot, hydrateRoot } from \'react-dom/client\';',
-        )
-
-        code = code.replace(/ReactDOM\.createRoot/g, 'createRoot')
-        code = code.replace(/ReactDOM\.hydrateRoot/g, 'hydrateRoot')
-      }
-
       const environment = (this as any).environment
 
       if (hasTopLevelDirective(code, 'use client')) {
@@ -1584,6 +1452,7 @@ export const __CLIENT_REFERENCE_REGISTRY__ = clientReferenceRegistry;
 export const __SERVER_REFERENCE_REGISTRY__ = serverReferenceRegistry;
 export const __CLIENT_COMPONENT_REGISTRY__ = clientComponentRegistry;
 
+// Module map for React Server Components
 export function createClientModuleMap() {
   const moduleMap = {};
 
@@ -1609,6 +1478,7 @@ export function createClientModuleMap() {
         return `
 import React, { useState, useEffect, Suspense } from 'react';
 
+// Client component registration for RSC system compatibility
 if (typeof globalThis.__clientComponents === 'undefined') {
   globalThis.__clientComponents = {};
 }
@@ -1626,6 +1496,7 @@ export function registerClientComponent(componentFunction, id, exportName) {
 
   const componentId = componentName;
 
+  // Register in global registry for RSC traversal
   globalThis.__clientComponents[componentId] = {
     id: componentId,
     path: id,
@@ -2386,7 +2257,7 @@ class RscClient {
             const processedChildren = value.map((child, index) => {
               const result = this.reconstructElementFromRscData(child, modules);
               return result;
-            }).filter(child => child !== null && child !== undefined);
+            }).filter(child => child !== null && child !== undefined); // Remove null/undefined children
 
             if (processedChildren.length === 0) {
               processed[key] = null;
@@ -2531,6 +2402,7 @@ function ServerComponentWrapper({
 }
 
 function createServerComponentWrapper(componentName, importPath) {
+  // Use a global refresh counter to force re-mounting when components change
   let globalRefreshCounter = 0;
 
   if (typeof window !== 'undefined') {
@@ -2544,6 +2416,7 @@ function createServerComponentWrapper(componentName, importPath) {
   const ServerComponent = (props) => {
     const [mountKey, setMountKey] = useState(globalRefreshCounter);
 
+    // Force re-mount when component is invalidated
     useEffect(() => {
       const handleRscInvalidate = (event) => {
         const detail = event.detail;
@@ -2564,7 +2437,7 @@ function createServerComponentWrapper(componentName, importPath) {
     return React.createElement(Suspense, {
       fallback: null
     }, React.createElement(ServerComponentWrapper, {
-      key: componentName + '-' + mountKey,
+      key: componentName + '-' + mountKey, // Force re-mount with key change
       componentId: componentName,
       props: props,
       fallback: null
@@ -2581,7 +2454,9 @@ function createServerComponentWrapper(componentName, importPath) {
 export const fetchServerComponent = (componentId, props) =>
   rscClient.fetchServerComponent(componentId, props);
 
+// Helper function to check if a file is a server component (client-side)
 function isServerComponent(filePath) {
+  // Simple client-side check based on file path patterns
   return filePath && (
     filePath.includes('ServerWithClient') ||
     filePath.includes('server') ||
@@ -2589,26 +2464,32 @@ function isServerComponent(filePath) {
   );
 }
 
+// HMR support for RSC cache invalidation
 if (import.meta.hot) {
+  // Listen for Vite's beforeFullReload event for server components
   import.meta.hot.on('vite:beforeFullReload', async (data) => {
     if (data?.path && isServerComponent(data.path)) {
+      // Immediately invalidate cache and trigger re-registration before reload
       await invalidateRscCache({ filePath: data.path, forceReload: true });
     }
   });
 
 
 
+  // Helper function to invalidate RSC cache and trigger component re-registration
   async function invalidateRscCache(data) {
     const filePath = data?.filePath || data;
 
+    // Wait for server to be ready
     const waitForServerReady = async () => {
-      for (let i = 0; i < 20; i++) {
+      for (let i = 0; i < 20; i++) { // Try for up to 2 seconds
         try {
           const response = await fetch('/_rsc_status');
           if (response.ok) {
             return true;
           }
         } catch (e) {
+          // Server not ready yet
         }
         await new Promise(resolve => setTimeout(resolve, 100));
       }
@@ -2617,8 +2498,10 @@ if (import.meta.hot) {
 
     const serverReady = await waitForServerReady();
     if (serverReady) {
+      // Clear client-side RSC cache immediately
       rscClient.clearCache();
 
+      // Trigger immediate server component re-registration
       try {
         await fetch('/api/rsc/hmr-register', {
           method: 'POST',
@@ -2630,10 +2513,14 @@ if (import.meta.hot) {
           })
         });
 
+        // Wait a bit for the server to re-register the component
+        // The server now immediately reads and re-registers the component
         await new Promise(resolve => setTimeout(resolve, 300));
       } catch (error) {
+        // Fallback to existing timeout-based approach
       }
 
+      // Trigger re-render of active server components
       if (typeof window !== 'undefined') {
         const event = new CustomEvent('rari:rsc-invalidate', {
           detail: { filePath }
@@ -2718,108 +2605,6 @@ ${registrations.join('\n')}
   return [mainPlugin, serverBuildPlugin]
 }
 
-export function createReactDOMOptimization() {
-  return {
-    build: {
-      rollupOptions: {
-        output: {
-          manualChunks: (id: string) => {
-            if (
-              id.includes('node_modules/react-dom')
-              || id.includes('react-dom/client')
-              || id.includes('react-dom/server')
-              || id.includes('react-dom/')
-            ) {
-              return 'react-dom'
-            }
-
-            if (
-              (id.includes('node_modules/react') || id.includes('react/'))
-              && !id.includes('react-dom')
-            ) {
-              return 'react'
-            }
-
-            if (id.includes('scheduler') && id.includes('node_modules')) {
-              return 'scheduler'
-            }
-
-            if (id.includes('markdown-it') || id.includes('shiki')) {
-              return 'vendor'
-            }
-
-            if (id.includes('node_modules')) {
-              return 'vendor'
-            }
-          },
-        },
-        treeshake: {
-          moduleSideEffects: (id: string) => {
-            if (id.includes('.css') || id.includes('polyfill')) {
-              return true
-            }
-            if (
-              id.includes('react-dom')
-              || id.includes('react')
-              || id.includes('scheduler')
-              || id.includes('react-dom/client')
-              || id.includes('react-dom/server')
-            ) {
-              return false
-            }
-            return false
-          },
-          unknownGlobalSideEffects: false,
-        },
-      },
-      minify: 'terser',
-      target: ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14'],
-      cssMinify: 'esbuild',
-      sourcemap: false,
-      terserOptions: {
-        compress: {
-          drop_console: true,
-          drop_debugger: true,
-          pure_funcs: [
-            'console.log',
-            'console.info',
-            'console.debug',
-            'console.warn',
-            'invariant',
-            'warning',
-            '__DEV__',
-            'ReactDOM.render',
-            'ReactDOM.unmountComponentAtNode',
-            'ReactDOM.findDOMNode',
-            'ReactDOM.createPortal',
-          ],
-          passes: 3,
-          unsafe: true,
-          unsafe_comps: true,
-          unsafe_Function: true,
-          unsafe_math: true,
-          unsafe_symbols: true,
-          unsafe_methods: true,
-          unsafe_proto: true,
-          unsafe_regexp: true,
-          unsafe_undefined: true,
-          dead_code: true,
-          side_effects: false,
-        },
-        mangle: {
-          safari10: true,
-          properties: {
-            regex: /^_/,
-          },
-        },
-        format: {
-          comments: false,
-        },
-      },
-    },
-  }
-}
-
 export function defineRariConfig(
   config: UserConfig & { plugins?: Plugin[] },
 ): UserConfig {