rasengan 1.1.3 → 1.2.0-beta.0

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 ## Unreleased
 
+## 1.2.0-beta.0 (2025-09-18)
+
 ## 1.1.5 (2025-08-30)
 
 ## 1.1.4 (2025-08-30)

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

@@ -5,12 +5,15 @@ import { useEffect, useRef } from 'react';
 const extractEnv = () => {
     try {
         const env = import.meta.env;
-        if (!env)
+        // If not env, use process.env on the server only
+        if (!env) {
+            const serverEnv = process.env;
             return {
-                DEV: false,
-                PROD: true,
-                TEST: false,
+                DEV: serverEnv.NODE_ENV === 'development',
+                PROD: serverEnv.NODE_ENV === 'production',
+                TEST: serverEnv.NODE_ENV === 'test',
             };
+        }
         return {
             DEV: env.DEV,
             PROD: env.PROD,

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/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;
     }
 };

package/lib/esm/routing/utils/flat-routes.js

@@ -1,6 +1,5 @@
 import { DefaultLayout } from '../components/template.js';
 import { RouterComponent } from '../interfaces.js';
-import { convertMDXPageToPageComponent, isMDXPage } from './define-router.js';
 const basePath = '/src/app/_routes/';
 /**
  * Normalize a segment
@@ -29,7 +28,7 @@ function normalizeSegment(segment) {
  * @param foldersOnly Whether to return only folders
  * @returns Path segments
  */
-function getPathSegments(filePath, foldersOnly = false) {
+export function getPathSegments(filePath, foldersOnly = false) {
     const relative = filePath.replace(basePath, ''); // eg. /src/app/_routes/docs/layout.tsx => docs/layout.tsx
     if (!foldersOnly) {
         let withoutExtension = '';
@@ -60,6 +59,7 @@ function generateSkeletonTree(tree, modules) {
         segment: '_',
         isLayout: true,
         children: [],
+        source: '',
     };
     currentLevel.push(root);
     currentLevel = root.children ?? []; // change level
@@ -86,6 +86,7 @@ function generateSkeletonTree(tree, modules) {
                 segment,
                 isLayout: false,
                 children: [],
+                source: '',
             };
             tmpLevel.push(node);
             tmpLevel = node.children ?? []; // change level
@@ -99,9 +100,10 @@ function insertNodeToTree(tree, segments, routeInfo) {
     // Handle the root layout
     if (segments.length === 1 && segments[0] === '_') {
         currentNode.isLayout = true;
-        currentNode.component = routeInfo.component;
+        currentNode.component = routeInfo.component; // Has to be considered in the case where the developer doesn't provide a layout
         currentNode.metadata = routeInfo.metadata;
-        currentNode.loader = routeInfo.loader;
+        currentNode.module = routeInfo.module;
+        currentNode.source = routeInfo.source;
         return;
     }
     let fullPath = '';
@@ -125,7 +127,8 @@ function insertNodeToTree(tree, segments, routeInfo) {
         currentNode.isLayout = true;
         currentNode.component = routeInfo.component;
         currentNode.metadata = routeInfo.metadata;
-        currentNode.loader = routeInfo.loader;
+        currentNode.module = routeInfo.module;
+        currentNode.source = routeInfo.source;
     }
     else {
         let path = '';
@@ -157,9 +160,8 @@ function insertNodeToTree(tree, segments, routeInfo) {
             fullPath: fullPath + '/' + (lastSegment === '.' ? '' : lastSegment),
             segment: lastSegment,
             isLayout: false,
-            component: routeInfo.component,
-            metadata: routeInfo.metadata,
-            loader: routeInfo.loader,
+            module: routeInfo.module,
+            source: routeInfo.source,
         };
         currentLevel.push(node);
     }
@@ -173,20 +175,27 @@ async function generateRouter(tree) {
     const root = tree[0];
     // Generate the base router
     const router = new RouterComponent();
+    // use default layout if not defined
+    let layout;
     // Get layout if defined
     if (root.isLayout) {
-        // use default layout if not defined
-        const layout = (root.component || DefaultLayout);
-        layout.path = root.path || DefaultLayout.path;
-        // TODO: Add metadata here
-        router.layout = layout;
-        router.useParentLayout = true;
+        if ('source' in root) {
+            layout = root;
+        }
+        else {
+            layout = root.component;
+            layout.path = root.path;
+            layout.metadata = root.metadata;
+        }
     }
     // Get pages
     const { routes: pages, routers } = await generateRoutes(root.children);
     // Add pages to the router
     router.pages = pages;
     router.routers = routers;
+    // Add layout to the router
+    router.layout = layout;
+    router.useParentLayout = true;
     return router;
 }
 /**
@@ -200,37 +209,26 @@ async function generateRoutes(tree) {
         const routers = [];
         for (const node of tree) {
             // Handle page
-            if (!node.isLayout && node.component) {
-                const page = node.component;
-                if (!page) {
-                    console.warn(`Page component is not exported by default for route: ${node.path}`);
-                    continue;
-                }
-                if (isMDXPage(page)) {
-                    // Convert PageComponent to MDXPageComponent (to make ts happy)
-                    const mdxPage = page;
-                    mdxPage.metadata.path = node.path;
-                    mdxPage.metadata.metadata = node.metadata;
-                    const pageComponent = await convertMDXPageToPageComponent(mdxPage);
-                    routes.push(pageComponent);
-                    continue;
-                }
-                page.path = node.path;
-                page.metadata = node.metadata;
-                page.loader = node.loader;
-                routes.push(page);
+            if (!node.isLayout && node.module) {
+                routes.push(node);
                 continue;
             }
             // Handle layout
             if (node.isLayout) {
-                const layout = node.component;
-                if (!layout) {
-                    console.warn(`Layout component is not defined for route: ${node.path}`);
-                    continue;
+                let layout;
+                if ('source' in node) {
+                    layout = node;
+                }
+                else {
+                    layout = node.component;
+                    if (!layout) {
+                        console.warn(`Layout component is not defined for route: ${node.path}`);
+                        continue;
+                    }
+                    layout.path = node.path;
+                    layout.metadata = node.metadata;
+                    layout.source = node.source;
                 }
-                layout.path = node.path;
-                layout.metadata = node.metadata;
-                layout.loader = node.loader;
                 if (node.children) {
                     // Loop through children
                     const { routes: subRoutes, routers: subRouters } = await generateRoutes(node.children);
@@ -270,19 +268,10 @@ async function generateRoutes(tree) {
 export async function flatRoutes(fn) {
     try {
         let modules = fn();
-        // import.meta.glob can be undefined in some cases (because it's unavailable outside a vite env)
-        // if (import.meta.glob) {
-        //   let modules = import.meta.glob(
-        //     [
-        //       '/src/app/_routes/**/layout.{jsx,tsx}',
-        //       '/src/app/_routes/**/*.page.{md,mdx,jsx,tsx}',
-        //     ],
-        //     { eager: true }
-        //   );
-        // }
         const tree = [];
         const foldersMap = new Map();
         const modulesMap = new Map();
+        // Map the modules and extract segments for folders and modules (layouts and pages)
         for (const [filePath, mod] of Object.entries(modules)) {
             const foldersSegments = getPathSegments(filePath, true);
             const modulesSegments = getPathSegments(filePath);
@@ -293,6 +282,7 @@ export async function flatRoutes(fn) {
         generateSkeletonTree(tree, foldersMap);
         // Filter out layouts
         const layoutModulesMap = new Map([...modulesMap.entries()].filter(([filePath]) => filePath.includes('layout.')));
+        // Filter out pages
         const pageModulesMap = new Map([...modulesMap.entries()].filter(([filePath]) => filePath.includes('.page.')));
         // Handle the case where modules are empty
         if (layoutModulesMap.size === 0) {
@@ -302,39 +292,20 @@ export async function flatRoutes(fn) {
                 isLayout: true,
             });
         }
+        // Insert every layout into the tree
         for (const [filePath, { segments, mod }] of layoutModulesMap) {
-            if (!mod.default) {
-                console.warn(`Layout component is not exported by default from: ${filePath}}`);
-                continue;
-            }
-            let metadata = mod.default.metadata;
-            let loader = mod.default.loader;
             insertNodeToTree(tree, segments, {
-                component: mod.default,
-                metadata: metadata ?? {},
-                loader,
+                module: mod, // Only present for lazy routes, instead prefer component attribute
                 isLayout: true,
+                source: filePath,
             });
         }
+        // Insert every pages into the tree
         for (const [filePath, { segments, mod }] of pageModulesMap) {
-            if (!mod.default) {
-                console.warn(`Page component is not exported by default from: ${filePath}}`);
-                continue;
-            }
-            let metadata = mod.default.metadata;
-            let loader = mod.default.loader;
-            // extracting the metadata
-            if (isMDXPage(mod.default)) {
-                metadata = mod.default.metadata.metadata;
-            }
             insertNodeToTree(tree, segments, {
-                component: mod.default,
-                metadata: metadata ?? {
-                    title: mod.default.name,
-                    description: '',
-                },
-                loader,
+                module: mod, // Only present for lazy routes, instead prefer component attribute
                 isLayout: false,
+                source: filePath,
             });
         }
         // Convert the tree into a router component instance