rasengan 1.1.2 → 1.2.0-beta.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 ## Unreleased
 
+## 1.2.0-beta.0 (2025-09-18)
+
+## 1.1.5 (2025-08-30)
+
+## 1.1.4 (2025-08-30)
+
+## 1.1.4 (2025-08-30)
+
+## 1.1.3 (2025-08-30)
+
 ## 1.1.2 (2025-08-16)
 
 ## 1.1.1 (2025-08-16)

package/lib/esm/cli/index.js

@@ -8,9 +8,9 @@ program
 // Handle the dev command
 program
     .command('dev')
-    .option('-p <port>')
+    .option('-p, --port <port>', 'Port number')
     .description('Start development server')
-    .action(async ({ p: port }) => {
+    .action(async ({ port }) => {
     const convertedPort = Number(port);
     // Checking port
     if (port &&

package/lib/esm/core/config/vite/defaults.js

@@ -1,15 +1,8 @@
 // core/config/defaults.ts
 import { join } from 'node:path';
-// Define core external packages
-const CORE_EXTERNALS = [
-// '@rasenganjs/mdx',
-// '@rasenganjs/vercel',
-// '@rasenganjs/netlify',
-];
 export const createDefaultViteConfig = (rootPath, __dirname, mode, config) => {
     // Combine core externals with user-defined externals
     const externals = [
-        ...CORE_EXTERNALS,
         ...(Array.isArray(config.vite?.build?.external)
             ? config.vite.build.external
             : []),
@@ -28,21 +21,12 @@ export const createDefaultViteConfig = (rootPath, __dirname, mode, config) => {
                             return 'vendor';
                         if (id.includes('src/components'))
                             return 'shared-components';
-                        if (config.ssr) {
-                            if (id.includes('src/app') && id.includes('.page.')) {
-                                const parts = id.split('src/app')[1]?.split('/');
-                                if (parts?.length) {
-                                    const pageName = parts.pop()?.split('.')[0];
-                                    return pageName ? `page-${pageName}` : undefined;
-                                }
-                            }
-                        }
                         return undefined;
                     },
                 },
             },
             outDir: 'dist',
-            chunkSizeWarningLimit: 1000,
+            chunkSizeWarningLimit: 2000,
         },
         environments: {
             client: {

package/lib/esm/core/dynamic/index.js

@@ -19,3 +19,35 @@ export function dynamicLoad(load, fallback = _jsx(_Fragment, {}) // Default pend
         throw new Error(error);
     }
 }
+/**
+ * It allows you to defer loading of page components,
+ * and only include them in the client bundle when they're needed
+ * @param filePath Path to the page component we want to load lazily
+ * @returns
+ */
+export function lazyLoadPage(routePath, filePath) {
+    // use import.meta.glob with a fixed pattern that covers your pages
+    const modules = import.meta.glob('/src/app/**/*.{js,ts,jsx,tsx,md,mdx}');
+    // if started with ./ then removed it
+    const normalizePath = filePath.startsWith('./')
+        ? filePath.slice(2)
+        : filePath;
+    // Get the full path from the modules object
+    const fullPath = Object.keys(modules).find((key) => key.endsWith(normalizePath));
+    if (!fullPath) {
+        throw new Error(`[rasengan lazyLoad]: No module found for path "${filePath}". Did you include it in the glob?`);
+    }
+    const loader = modules[fullPath];
+    if (!loader) {
+        throw new Error(`[rasengan lazyLoad]: No module found for path "${filePath}". Did you include it in the glob?`);
+    }
+    const page = {
+        path: routePath,
+        fullPath,
+        segment: routePath, // TODO: Handle segments
+        module: loader,
+        source: filePath,
+        isLayout: false,
+    };
+    return page;
+}

package/lib/esm/core/plugins/index.js

@@ -84,7 +84,7 @@ function flatRoutesPlugin() {
                 '/src/app/_routes/**/layout.{js,ts,jsx,tsx}',
                 '/src/app/_routes/**/*.page.{md,mdx,js,ts,jsx,tsx}',
               ],
-              { eager: true }
+              // { eager: true }
             );
           });
 

package/lib/esm/entries/client/render.js

@@ -2,27 +2,56 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { hydrateRoot, createRoot } from 'react-dom/client';
 import { StrictMode } from 'react';
 import { RootComponent } from '../../routing/components/template.js';
-const isSpaMode = window.__RASENGAN_SPA_MODE__;
-export default function renderApp(App, options) {
+import { generateRoutes, preloadMatches, } from '../../routing/utils/generate-routes.js';
+import { createBrowserRouter, RouterProvider } from 'react-router';
+const isSpaMode = Boolean(window.__RASENGAN_SPA_MODE__);
+export default async function renderApp(App, AppRouter, options) {
+    // Get root element
+    // We need to get the root element to render the app - (SPA mode)
+    // or to hydrate the app - (SSR mode)
     const root = document.getElementById('root');
     if (!root) {
-        throw new Error('Root element not found');
+        throw new Error('#root element not found in the DOM');
     }
-    // If SPA mode, render the app
+    // Resolve app router
+    const RasenganRouter = await AppRouter;
+    // Generate routes for the browser routing
+    const routes = generateRoutes(RasenganRouter);
+    // Preload lazy routes
+    // We have to only preload the routes that are matched for the current URL
+    // The remaining routing will be lazy loaded on the client after routes change
+    await preloadMatches(window.location, routes);
+    // Create router
+    let router = createBrowserRouter(routes, {
+        hydrationData: window.__staticRouterHydrationData,
+    });
+    // Generate client router
+    const ClientRouter = () => _jsx(RouterProvider, { router: router });
+    // Generate app tree
+    const appTree = options.reactStrictMode ? (_jsx(StrictMode, { children: _jsx(App, { Component: (props) => (_jsx(RootComponent, { ...props, Router: ClientRouter })) }) })) : (_jsx(App, { Component: (props) => _jsx(RootComponent, { ...props, Router: ClientRouter }) }));
+    // Render app
     if (isSpaMode) {
-        if (options.reactStrictMode) {
-            createRoot(root).render(_jsx(StrictMode, { children: _jsx(App, { Component: RootComponent }) }));
-        }
-        else {
-            createRoot(root).render(_jsx(App, { Component: RootComponent }));
-        }
-        return;
-    }
-    // Handling hydration
-    if (options.reactStrictMode) {
-        hydrateRoot(root, _jsx(StrictMode, { children: _jsx(App, { Component: RootComponent }) }));
+        // No SSR markup, so start fresh
+        createRoot(root, {
+            onCaughtError: (error) => {
+                console.error(error);
+            },
+            onRecoverableError(error, errorInfo) {
+                console.error(error);
+                console.error(errorInfo);
+            },
+        }).render(appTree);
     }
     else {
-        hydrateRoot(root, _jsx(App, { Component: RootComponent }));
+        // SSR markup present, hydrate instead of re-rendering
+        hydrateRoot(root, appTree, {
+            onCaughtError: (error) => {
+                console.error(error);
+            },
+            onRecoverableError(error, errorInfo) {
+                console.error(error);
+                console.error(errorInfo);
+            },
+        });
     }
 }

package/lib/esm/entries/server/entry.server.js

@@ -16,6 +16,7 @@ export const render = async (StaticRouterComponent, res, options) => {
     const rootPath = process.cwd();
     let App;
     let Template;
+    // If build options are provided, that means we are in production mode
     if (buildOptions) {
         App = (await loadModuleSSR(posix.join(buildOptions.buildDirectory, buildOptions.serverPathDirectory, 'main.js'))).default;
         Template = (await loadModuleSSR(join(buildOptions.buildDirectory, buildOptions.serverPathDirectory, 'template.js'))).default;

package/lib/esm/entries/server/index.js

@@ -19,13 +19,13 @@ export const TemplateLayout = ({ StaticRouterComponent, metadata, assets, App, T
     }
     if (isSpaMode) {
         otherScripts = (_jsxs(React.Fragment, { children: [_jsx("script", { type: "module", dangerouslySetInnerHTML: {
-                        __html: `window.__RASENGAN_SPA_MODE__ = true;`,
+                        __html: `window.__RASENGAN_SPA_MODE__=true;`,
                     } }), !assets && (_jsx("script", { type: "module", src: "/src/index", async: true }))] }));
     }
     else {
         otherScripts = (_jsx(React.Fragment, { children: _jsx("script", { type: "module", dangerouslySetInnerHTML: {
-                    __html: `window.__RASENGAN_SPA_MODE__ = false;`,
+                    __html: `window.__RASENGAN_SPA_MODE__=false;`,
                 } }) }));
     }
-    return (_jsx(Template, { Head: ({ children }) => (_jsxs(HeadComponent, { metadata: metadata, assets: assets, children: [viteScripts, otherScripts, children] })), Body: ({ children }) => (_jsx(BodyComponent, { asChild: App ? true : false, AppContent: App && _jsx(App, { Component: RootComponent, children: StaticRouterComponent }), children: children })), Script: ({ children }) => _jsx(ScriptComponent, { children: children }) }));
+    return (_jsx(Template, { Head: ({ children }) => (_jsxs(HeadComponent, { metadata: metadata, assets: assets, children: [viteScripts, otherScripts, children] })), Body: ({ children }) => (_jsx(BodyComponent, { asChild: App ? true : false, AppContent: App && (_jsx(App, { Component: (props) => _jsx(RootComponent, { ...props }), children: StaticRouterComponent })), children: children })), Script: ({ children }) => _jsx(ScriptComponent, { children: children }) }));
 };

package/lib/esm/routing/components/fallback.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * This component is used as a fallback when the page is not yet hydrated
+ * @returns
+ */
+export const HydrationFallback = () => {
+    return _jsx("div", { children: "Loading page..." });
+};

package/lib/esm/routing/components/index.js

@@ -1,12 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { isRouteErrorResponse, Link, useParams, useRouteError, } from 'react-router';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isRouteErrorResponse, Link, useLocation, useParams, useRouteError, } from 'react-router';
+import { useEffect, useRef } from 'react';
+// Extract the environment variables
+const extractEnv = () => {
+    try {
+        const env = import.meta.env;
+        // If not env, use process.env on the server only
+        if (!env) {
+            const serverEnv = process.env;
+            return {
+                DEV: serverEnv.NODE_ENV === 'development',
+                PROD: serverEnv.NODE_ENV === 'production',
+                TEST: serverEnv.NODE_ENV === 'test',
+            };
+        }
+        return {
+            DEV: env.DEV,
+            PROD: env.PROD,
+            TEST: env.TEST,
+        };
+    }
+    catch (error) {
+        console.error(error);
+        return {
+            DEV: false,
+            PROD: true,
+            TEST: false,
+        };
+    }
+};
 /**
  * Error boundary component that will be displayed if an error occurs during a routing
  * @returns
  */
 export function ErrorBoundary() {
-    const { DEV } = import.meta.env;
-    console.log(import.meta.env);
+    const { DEV } = extractEnv();
     let error = useRouteError();
     if (!DEV)
         return (_jsx("section", { style: {
@@ -28,10 +56,31 @@ export function ErrorBoundary() {
                     fontSize: '18px',
                 }, children: "Application Error" }) }));
     if (isRouteErrorResponse(error)) {
-        return (_jsxs(_Fragment, { children: [_jsx("p", { children: "Application Error" }), _jsxs("h1", { children: [error.status, " ", error.statusText] }), _jsx("p", { children: error.data })] }));
+        return (_jsxs("section", { style: {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 100,
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100vh',
+                width: '100vw',
+                gap: 10,
+                backgroundColor: '#fff',
+            }, children: [_jsx("p", { style: {
+                        fontSize: '18px',
+                    }, children: "Application Error" }), _jsxs("h1", { style: {
+                        fontSize: '18px',
+                    }, children: [error.status, " ", error.statusText] }), _jsx("p", { style: {
+                        fontSize: '18px',
+                    }, children: error.data })] }));
     }
     else if (error instanceof Error) {
-        return (_jsxs("div", { style: {
+        return (_jsxs("section", { style: {
                 position: 'fixed',
                 top: 0,
                 left: 0,
@@ -129,3 +178,45 @@ export const CustomLink = (props) => {
     }
     return (_jsx(Link, { to: to, ...rest, children: children }));
 };
+// Store scroll positions globally (per location.key)
+const scrollPositions = {};
+/**
+ * Scroll restoration component
+ * @param {Props} props
+ * @returns
+ */
+export function ScrollRestoration({ alwaysToTop = false, target }) {
+    const location = useLocation();
+    const pathnameRef = useRef(location.pathname);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const prevPathname = pathnameRef.current;
+        const el = target?.current; // easier to reference
+        if (alwaysToTop) {
+            if (el) {
+                el.scrollTo(0, 0);
+            }
+            else {
+                window.scrollTo(0, 0);
+            }
+            pathnameRef.current = location.pathname;
+            return;
+        }
+        // Save scroll position of the previous page
+        if (prevPathname) {
+            scrollPositions[prevPathname] = el ? el.scrollTop : window.scrollY;
+        }
+        // Restore scroll position of the new page (default to 0 if not stored)
+        const storedY = scrollPositions[location.pathname] ?? 0;
+        if (el) {
+            el.scrollTo(0, storedY);
+        }
+        else {
+            window.scrollTo(0, storedY);
+        }
+        // Update ref
+        pathnameRef.current = location.pathname;
+    }, [location.pathname, target?.current]); // depend on target.current
+    return null;
+}

package/lib/esm/routing/components/template.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { use, useMemo } from 'react';
-import { generateMetadata, getRouter } from '../utils/index.js';
+import React, { useMemo } from 'react';
+import { generateMetadata } from '../utils/index.js';
 import { Outlet } from 'react-router';
 /**
  * App component that represent the entry point of the application
  */
-export const RootComponent = ({ router: AppRouterPromise, children = undefined, }) => {
+export const RootComponent = ({ Router, // Client Router
+children = undefined, // Static Router for SSR when provided
+ }) => {
     // Return children if they exist
     if (children)
-        return children;
-    const AppRouter = use(AppRouterPromise);
-    // Otherwise, get the router and return it
-    let Router = getRouter(AppRouter);
+        return children; // For the SSR
+    if (!Router)
+        return null;
     return _jsx(Router, {});
 };
 /**

package/lib/esm/routing/index.js

@@ -1,5 +1,5 @@
-import { CustomLink } from './components/index.js';
+import { CustomLink, ScrollRestoration } from './components/index.js';
 export { defineRouter, defineRoutesGroup, flatRoutes } from './utils/index.js';
 export { RouterComponent } from './interfaces.js';
-export { Outlet, ScrollRestoration, useLocation, useNavigate, useNavigation, useParams, useSearchParams, useFetcher, useMatch, useRoutes, useResolvedPath, matchRoutes, generatePath, matchPath, createRoutesFromChildren, Navigate, NavLink, } from 'react-router';
-export { CustomLink as Link };
+export { Outlet, useLocation, useNavigate, useNavigation, useParams, useSearchParams, useFetcher, useMatch, useRoutes, useResolvedPath, matchRoutes, generatePath, matchPath, createRoutesFromChildren, Navigate, NavLink, } from 'react-router';
+export { CustomLink as Link, ScrollRestoration };

package/lib/esm/routing/providers/metadata.js

@@ -1,22 +1,30 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useLocation } from 'react-router';
+import { useLocation, useMatches } from 'react-router';
 import { useEffect } from 'react';
 import { generateMetadata } from '../utils/generate-metadata.js';
 import ReactDOMServer from 'react-dom/server';
-export default function MetadataProvider({ children, metadataMapping, }) {
-    const { pathname } = useLocation();
+export default function MetadataProvider({ children, }) {
+    const location = useLocation();
+    const routes = useMatches();
     useEffect(() => {
-        const metadata = metadataMapping[pathname];
-        if (!metadata)
-            return;
-        handleInjectMetadata(metadata);
-    }, [pathname]);
-    const handleInjectMetadata = (metadata) => {
-        if (!metadata)
+        if (typeof window === 'undefined')
             return;
+        (async () => {
+            const loadersData = routes.map((route) => route.loaderData);
+            await handleApplyMetadata(loadersData);
+        })();
+    }, [location]);
+    const handleApplyMetadata = async (loadersData) => {
+        // We generate the metadata
+        const metadatas = generateMetadata(loadersData.map((item) => item.meta));
+        // We get the last metadata
+        // This is the metadata of the page
+        const leafMetadata = loadersData.at(-1)?.meta;
+        handleInjectMetadata(metadatas, leafMetadata);
+    };
+    const handleInjectMetadata = (metaTags, leafMetadata) => {
         // Check if we are on the browser
         if (typeof window !== 'undefined') {
-            const metaTags = generateMetadata([metadata]);
             // Find all meta tags with data-rg attribute and remove them
             const metaTagsToRemove = document.querySelectorAll('meta[data-rg="true"]');
             metaTagsToRemove.forEach((metaTag) => {
@@ -28,12 +36,14 @@ export default function MetadataProvider({ children, metadataMapping, }) {
                 const metaTagString = ReactDOMServer.renderToStaticMarkup(metaTag);
                 document.head.insertAdjacentHTML('beforeend', metaTagString);
             });
+            if (!leafMetadata)
+                return;
             // Change the title of the page
-            document.title = metadata.title;
+            document.title = leafMetadata.title;
             // Change the description of the page
             const metaDescription = document.createElement('meta');
             metaDescription.setAttribute('name', 'description');
-            metaDescription.setAttribute('content', metadata.description);
+            metaDescription.setAttribute('content', leafMetadata.description);
             metaDescription.setAttribute('data-rg', 'true');
             document.head.appendChild(metaDescription);
         }

package/lib/esm/routing/utils/define-router.js

@@ -8,11 +8,6 @@ import { DefaultLayout } from '../components/template.js';
 export const defineRouter = (option) => {
     const { imports, layout, pages, loaderComponent, notFoundComponent, useParentLayout, } = option;
     return async (Router) => {
-        // Handle errors
-        // if (!option.pages)
-        //   throw new Error(
-        //     'You must provide a list of pages in the router option object'
-        //   );
         // Create router
         const router = new Router();
         // List of pages component
@@ -21,6 +16,10 @@ export const defineRouter = (option) => {
             // Check if p is an array
             if (Array.isArray(p)) {
                 for (let page of p) {
+                    if ('source' in page) {
+                        pageComponentList.push(page);
+                        continue;
+                    }
                     if (isMDXPage(page)) {
                         const Page = await convertMDXPageToPageComponent(page);
                         pageComponentList.push(Page);
@@ -31,6 +30,10 @@ export const defineRouter = (option) => {
                 }
                 continue;
             }
+            if ('source' in p) {
+                pageComponentList.push(p);
+                continue;
+            }
             // When p is a MDXPageComponent
             if (isMDXPage(p)) {
                 const Page = await convertMDXPageToPageComponent(p);
@@ -75,6 +78,7 @@ const loadMDXRenderer = async () => {
         return MDXRenderer;
     }
     catch (e) {
-        throw new Error('Failed to load MDXRenderer component from @rasenganjs/mdx, make sure you have installed the package');
+        console.error(e);
+        throw e;
     }
 };