rasengan 1.1.3 → 1.2.0-beta.0

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

@@ -1,23 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { RouterProvider, createBrowserRouter, useLoaderData, useParams, } from 'react-router';
+import { Outlet, matchRoutes, useLoaderData, useParams } from 'react-router';
 import { ErrorBoundary, NotFoundPageComponent, RasenganPageComponent, } from '../components/index.js';
-import { Suspense } from 'react';
 import MetadataProvider from '../providers/metadata.js';
+import { convertMDXPageToPageComponent, isMDXPage, } from './index.js';
 const defaultMetadata = {
     title: 'Not Found',
     description: 'Page not found',
 };
-/**
- * This function receives a router component and get a formated router first
- * and then return a router.
- */
-export const getRouter = (routerInstance) => {
-    const routes = generateRoutes(routerInstance);
-    let router = createBrowserRouter(routes, {
-        hydrationData: window.__staticRouterHydrationData,
-    });
-    return () => _jsx(RouterProvider, { router: router });
-};
 /**
  * This function merge the metadata, giving priority to the ones comming from loader
  */
@@ -112,7 +101,7 @@ const mergeMetaData = (responseMeta, meta, isLayout = false) => {
 /**
  * This function create a loader function
  */
-const createLoaderFunction = ({ loader, metadata, isLayout = false, }) => {
+const createLoaderFunction = ({ loader, metadata, isLayout = false, source, }) => {
     return async ({ params, request }) => {
         try {
             // Check if the loader is defined
@@ -120,6 +109,7 @@ const createLoaderFunction = ({ loader, metadata, isLayout = false, }) => {
                 return {
                     props: {},
                     meta: metadata,
+                    source,
                 };
             }
             // Get the response from the loader
@@ -138,6 +128,7 @@ const createLoaderFunction = ({ loader, metadata, isLayout = false, }) => {
             return {
                 props: response.props,
                 meta: mergeMetaData(response.meta ?? {}, metadata, isLayout),
+                source,
             };
         }
         catch (error) {
@@ -157,75 +148,163 @@ const createLoaderFunction = ({ loader, metadata, isLayout = false, }) => {
                     metaTags: [],
                     links: [],
                 },
+                source,
             };
         }
     };
 };
+/**
+ * This function preload the matching lazy routes
+ * @param url
+ * @param routes
+ */
+export const preloadMatches = async (url, routes) => {
+    const matches = matchRoutes(routes, url);
+    if (!matches)
+        return;
+    await Promise.all(matches.map(async (match) => {
+        if (match.route.lazy) {
+            const resolved = await match.route.lazy();
+            Object.assign(match.route, resolved);
+            // Strip lazy so Router never tries to suspend again
+            delete match.route.lazy;
+        }
+    }));
+};
 /**
  * This function receives a router component and return a formated router for static routing
  * @param router Represents the router component
  * @returns
  */
-export const generateRoutes = (router, isRoot = true, parentLayout = undefined) => {
+export const generateRoutes = (router, isRoot = true, parentLayoutPath = undefined) => {
     // Initialization of the list of routes
     const routes = [];
-    // Get information about the layout and the path
-    const Layout = router.layout;
-    const route = {
-        path: !isRoot
-            ? router.useParentLayout
-                ? Layout.path.replace(parentLayout.path + '/', '')
-                : Layout.path
-            : Layout.path,
-        errorElement: _jsx(ErrorBoundary, {}),
-        Component() {
-            // Default data
-            const defaultData = {
-                props: {},
-            };
-            // Get SSR data
-            let { props } = useLoaderData() || defaultData;
-            // get params
-            const params = useParams();
-            const layoutProps = {
-                ...props,
-                params,
-            };
-            // Check if the layout is the root layout and wrap it in a MetadataProvider
-            if (isRoot || !router.useParentLayout) {
-                // Generate metadata mapping
-                const metadataMapping = generateMetadataMapping(router);
-                return (_jsx(MetadataProvider, { metadataMapping: metadataMapping, children: _jsx(Layout, { ...layoutProps }) }));
-            }
-            return _jsx(Layout, { ...layoutProps });
-        },
-        async loader({ params, request }) {
-            // Extract metadata from the layout
-            const metadata = {
-                openGraph: {
-                    url: '',
-                    image: '',
-                },
-                twitter: {
-                    card: 'summary_large_image',
-                    image: '',
-                    title: '',
-                },
-                ...Layout.metadata,
-            };
-            return createLoaderFunction({
-                loader: Layout.loader,
-                metadata,
-                isLayout: true,
-            })({
-                params,
-                request,
-            });
-        },
-        children: [],
-        nested: router.useParentLayout,
-        hydrateFallbackElement: _jsx(_Fragment, {}), // TODO: Add hydration fallback
-    };
+    let route;
+    let layoutPath;
+    // Check if the layout is coming from the file-based routing system
+    if ('source' in router.layout) {
+        const layoutNode = router.layout;
+        layoutPath = layoutNode.path;
+        route = {
+            path: !isRoot
+                ? router.useParentLayout
+                    ? layoutNode.path.replace(parentLayoutPath + '/', '')
+                    : layoutNode.path
+                : layoutNode.path,
+            errorElement: _jsx(ErrorBoundary, {}),
+            lazy: async () => {
+                const Layout = (await layoutNode.module()).default;
+                if (!Layout) {
+                    console.warn(`Layout component is not exported by default from: ${layoutNode.source}}`);
+                    return {
+                        Component() {
+                            return _jsx(Outlet, {});
+                        },
+                    };
+                }
+                return {
+                    Component() {
+                        // Default data
+                        const defaultData = {
+                            props: {},
+                        };
+                        // Get SSR data
+                        let { props } = useLoaderData() || defaultData;
+                        // get params
+                        const params = useParams();
+                        const layoutProps = {
+                            ...props,
+                            params,
+                        };
+                        // Check if the layout is the root layout and wrap it in a MetadataProvider
+                        if (isRoot || !router.useParentLayout) {
+                            // Generate metadata mapping
+                            // const metadataMapping = generateMetadataMapping(router);
+                            return (_jsx(MetadataProvider, { children: _jsx(Layout, { ...layoutProps }) }));
+                        }
+                        return _jsx(Layout, { ...layoutProps });
+                    },
+                    async loader({ params, request }) {
+                        // Extract metadata from the layout
+                        const metadata = {
+                            ...Layout.metadata,
+                        };
+                        return createLoaderFunction({
+                            loader: Layout.loader,
+                            metadata,
+                            isLayout: true,
+                            source: layoutNode.source,
+                        })({
+                            params,
+                            request,
+                        });
+                    },
+                };
+            },
+            children: [],
+            nested: router.useParentLayout,
+            hydrateFallbackElement: _jsx(_Fragment, {}),
+            // shouldRevalidate: ({ currentUrl, nextUrl, defaultShouldRevalidate }) => {
+            //   // Only revalidate if navigating to a different route
+            //   return currentUrl.pathname !== nextUrl.pathname;
+            // },
+        };
+    }
+    else {
+        const Layout = router.layout;
+        layoutPath = Layout.path;
+        route = {
+            path: !isRoot
+                ? router.useParentLayout
+                    ? layoutPath.replace(parentLayoutPath + '/', '')
+                    : layoutPath
+                : layoutPath,
+            errorElement: _jsx(ErrorBoundary, {}),
+            Component() {
+                // Default data
+                const defaultData = {
+                    props: {},
+                };
+                // Get SSR data
+                let { props } = useLoaderData() || defaultData;
+                // get params
+                const params = useParams();
+                const layoutProps = {
+                    ...props,
+                    params,
+                };
+                // Check if the layout is the root layout and wrap it in a MetadataProvider
+                if (isRoot || !router.useParentLayout) {
+                    // Generate metadata mapping
+                    // const metadataMapping = generateMetadataMapping(router);
+                    return (_jsx(MetadataProvider, { children: _jsx(Layout, { ...layoutProps }) }));
+                }
+                return _jsx(Layout, { ...layoutProps });
+            },
+            async loader({ params, request }) {
+                // Extract metadata from the layout
+                const metadata = {
+                    ...Layout.metadata,
+                };
+                return createLoaderFunction({
+                    loader: Layout.loader,
+                    metadata,
+                    isLayout: true,
+                })({
+                    params,
+                    request,
+                });
+            },
+            children: [],
+            nested: router.useParentLayout,
+            hydrateFallbackElement: _jsx(_Fragment, {}),
+            // hydrateFallbackElement: <>Loading...</>, // TODO: enable override
+            // shouldRevalidate: ({ currentUrl, nextUrl, defaultShouldRevalidate }) => {
+            //   // Only revalidate if navigating to a different route
+            //   return currentUrl.pathname !== nextUrl.pathname;
+            // },
+        };
+    }
     // Defining the page not found route
     if (isRoot || router.notFoundComponent) {
         route.children.push({
@@ -240,53 +319,134 @@ export const generateRoutes = (router, isRoot = true, parentLayout = undefined)
         });
     }
     // Get informations about pages
-    const pages = router.pages.map((Page) => {
-        // /home => home
-        // / => /
-        const pagePathFormated = Page.path.startsWith('/') && Page.path !== '/'
-            ? Page.path.slice(1)
-            : Page.path;
-        // Get the path of the page
-        const path = Page.path === '/'
-            ? Layout.path
-            : Layout.path.length > 1
-                ? pagePathFormated
+    const pages = router.pages.map((p) => {
+        // Check if the page is coming from file-based routing system
+        if ('source' in p) {
+            const pageNode = p;
+            // /home => home
+            // / => /
+            const pagePathFormated = pageNode.path.startsWith('/') && pageNode.path !== '/'
+                ? pageNode.path.slice(1)
+                : pageNode.path;
+            // Get the path of the page
+            const path = pageNode.path === '/'
+                ? layoutPath
+                : layoutPath.length > 1
+                    ? pagePathFormated
+                    : pageNode.path;
+            return {
+                path: path === layoutPath ? undefined : path,
+                index: path === layoutPath,
+                async lazy() {
+                    let Page = (await pageNode.module()).default;
+                    if (!Page) {
+                        console.warn(`Page component is not exported by default from: ${pageNode.source}}`);
+                        return {
+                            Component() {
+                                return null;
+                            },
+                        };
+                    }
+                    // Detech if the page is a MDXPageComponent or not
+                    if (isMDXPage(Page)) {
+                        // Convert PageComponent to MDXPageComponent (to make ts happy)
+                        const mdxPage = Page;
+                        // mdxPage.metadata.path = node.path;
+                        // mdxPage.metadata.metadata = Page.metadata;
+                        Page = await convertMDXPageToPageComponent(mdxPage);
+                    }
+                    return {
+                        Component() {
+                            // Default data
+                            const defaultData = {
+                                props: {
+                                    params: {},
+                                },
+                            };
+                            const loaderData = useLoaderData() || defaultData;
+                            return (
+                            // <Suspense fallback={<>Loading</>}>
+                            _jsx(RasenganPageComponent, { page: Page, data: loaderData })
+                            // </Suspense>
+                            );
+                        },
+                        async loader({ params, request }) {
+                            // Extracting metadata from the page
+                            const metadata = {
+                                ...Page.metadata,
+                            };
+                            return createLoaderFunction({
+                                loader: Page.loader,
+                                metadata,
+                                source: pageNode.source,
+                            })({
+                                params,
+                                request,
+                            });
+                        },
+                    };
+                },
+                errorElement: _jsx(ErrorBoundary, {}),
+                hydrateFallbackElement: _jsx(_Fragment, {}),
+                // hydrateFallbackElement: <>Loading...</>,
+                shouldRevalidate: ({ currentUrl, nextUrl, defaultShouldRevalidate, }) => {
+                    // Only revalidate if navigating to a different route
+                    return currentUrl.pathname !== nextUrl.pathname;
+                },
+            };
+        }
+        else {
+            const Page = p;
+            // /home => home
+            // / => /
+            const pagePathFormated = Page.path.startsWith('/') && Page.path !== '/'
+                ? Page.path.slice(1)
                 : Page.path;
-        return {
-            path: path === Layout.path ? undefined : path,
-            index: path === Layout.path,
-            async loader({ params, request }) {
-                // Extracting metadata from the page
-                const metadata = {
-                    openGraph: {
-                        url: '',
-                        image: '',
-                    },
-                    twitter: {
-                        card: 'summary_large_image',
-                        image: '',
-                        title: '',
-                    },
-                    ...Page.metadata,
-                };
-                return createLoaderFunction({ loader: Page.loader, metadata })({
-                    params,
-                    request,
-                });
-            },
-            Component() {
-                // Default data
-                const defaultData = {
-                    props: {
-                        params: {},
-                    },
-                };
-                const loaderData = useLoaderData() || defaultData;
-                return (_jsx(Suspense, { fallback: _jsx(_Fragment, { children: "Loading" }), children: _jsx(RasenganPageComponent, { page: Page, data: loaderData }) }));
-            },
-            errorElement: _jsx(ErrorBoundary, {}),
-            hydrateFallbackElement: _jsx(_Fragment, {}), // TODO: Add hydration fallback
-        };
+            // Get the path of the page
+            const path = Page.path === '/'
+                ? layoutPath
+                : layoutPath.length > 1
+                    ? pagePathFormated
+                    : Page.path;
+            return {
+                path: path === layoutPath ? undefined : path,
+                index: path === layoutPath,
+                async loader({ params, request }) {
+                    // Extracting metadata from the page
+                    const metadata = {
+                        ...Page.metadata,
+                    };
+                    return createLoaderFunction({
+                        loader: Page.loader,
+                        metadata,
+                    })({
+                        params,
+                        request,
+                    });
+                },
+                Component() {
+                    // Default data
+                    const defaultData = {
+                        props: {
+                            params: {},
+                        },
+                    };
+                    const loaderData = useLoaderData() || defaultData;
+                    return (
+                    // <Suspense fallback={<>Loading</>}>
+                    _jsx(RasenganPageComponent, { page: Page, data: loaderData })
+                    // </Suspense>
+                    );
+                },
+                errorElement: _jsx(ErrorBoundary, {}),
+                hydrateFallbackElement: _jsx(_Fragment, {}),
+                // hydrateFallbackElement: <>Loading...</>,
+                shouldRevalidate: ({ currentUrl, nextUrl, defaultShouldRevalidate, }) => {
+                    // Only revalidate if navigating to a different route
+                    return currentUrl.pathname !== nextUrl.pathname;
+                },
+            };
+        }
     });
     // Add pages into children of the current route
     pages.forEach((page) => {
@@ -294,7 +454,7 @@ export const generateRoutes = (router, isRoot = true, parentLayout = undefined)
     });
     // Loop through imported routers in order to apply the same logic like above.
     for (const importedRouter of router.routers) {
-        const importedRoutes = generateRoutes(importedRouter, false, Layout);
+        const importedRoutes = generateRoutes(importedRouter, false, layoutPath);
         for (const importedRoute of importedRoutes) {
             if (importedRoute.nested) {
                 route.children.push(importedRoute);
@@ -309,62 +469,3 @@ export const generateRoutes = (router, isRoot = true, parentLayout = undefined)
     // Return the formated router
     return routes;
 };
-/**
- * This function receives a router component and return a mapping from path to metadata
- * @param router Represents the router component
- * @returns
- */
-export const generateMetadataMapping = (router, isRoot = true, parentLayout = undefined) => {
-    const metadataMapping = {};
-    // Get information about the layout and the path
-    const Layout = router.layout;
-    // Set default path layout if not provided
-    if (!Layout.path) {
-        throw new Error(`[rasengan] Page path is required for ${Layout.name} layout component`);
-    }
-    const layoutPath = !isRoot
-        ? router.useParentLayout
-            ? parentLayout.path +
-                (Layout.path === '/'
-                    ? ''
-                    : Layout.path.startsWith('/') && parentLayout.path === '/'
-                        ? Layout.path.slice(1)
-                        : Layout.path)
-            : Layout.path
-        : Layout.path;
-    // Get informations about pages
-    router.pages.forEach((Page) => {
-        // Set default page path if not provided
-        if (!Page.path) {
-            throw new Error(`[rasengan] Page path is required for ${Page.name} page component`);
-        }
-        const pagePathFormated = Page.path.startsWith('/') && Page.path !== '/' && layoutPath.endsWith('/')
-            ? Page.path.slice(1)
-            : Page.path;
-        // Get the path of the page
-        const path = Page.path === '/' ? layoutPath : layoutPath + pagePathFormated;
-        // Get metadata
-        metadataMapping[path] = {
-            openGraph: {
-                url: '',
-                image: '',
-            },
-            twitter: {
-                card: 'summary_large_image',
-                image: '',
-                title: '',
-            },
-            ...Page.metadata,
-        };
-    });
-    // Loop through imported routers in order to apply the same logic like above.
-    for (const importedRouter of router.routers) {
-        const importedMetadataMapping = generateMetadataMapping(importedRouter, false, Layout);
-        Object.assign(metadataMapping, importedMetadataMapping);
-        // Add the metadata of the imported router's pages to the metadata mapping
-        for (const [path, metadata] of Object.entries(importedMetadataMapping)) {
-            metadataMapping[path] = metadata;
-        }
-    }
-    return metadataMapping;
-};

package/lib/esm/server/build/manifest.js

@@ -23,10 +23,10 @@ export class ManifestManager {
     }
     /**
      * Resolve all assets for a given page.
-     * @param pageName - The name of the page to resolve.
+     * @param source - The file path of the page to resolve.
      * @returns Resolved assets with scripts and styles.
      */
-    resolveAssets(pageName) {
+    resolveAssets(source) {
         const visited = new Set();
         const assets = {
             scripts: [],
@@ -67,10 +67,22 @@ export class ManifestManager {
                     collectAssets(this._manifest[importName]);
                 }
             }
-            // Collect dynamic imports
+            // // Collect dynamic imports
+            // if (entry.dynamicImports) {
+            // 	for (const dynamicImport of entry.dynamicImports) {
+            // 		collectAssets(this._manifest[dynamicImport]);
+            // 	}
+            // }
+            // Collect dynamic imports (filter by pageName)
             if (entry.dynamicImports) {
                 for (const dynamicImport of entry.dynamicImports) {
-                    collectAssets(this._manifest[dynamicImport]);
+                    const dynEntry = this._manifest[dynamicImport];
+                    if (!dynEntry)
+                        continue;
+                    // Check if the dynamic import corresponds to the requested page
+                    if (dynEntry.src?.includes(source)) {
+                        collectAssets(dynEntry);
+                    }
                 }
             }
         };
@@ -79,11 +91,11 @@ export class ManifestManager {
     }
     /**
      * Generate meta tags for a given page.
-     * @param pageName - The name of the page to generate meta tags for.
+     * @param source - The file path of the page to generate meta tags for.
      * @returns HTML string containing script and style tags.
      */
-    generateMetaTags(pageName) {
-        const { scripts, styles } = this.resolveAssets(pageName);
+    generateMetaTags(source) {
+        const { scripts, styles } = this.resolveAssets(source);
         const scriptTags = scripts.map((file) => (_jsx("script", { type: 'module', src: `/${file}` })));
         const styleTags = styles.map((file) => (_jsx("link", { rel: 'stylesheet', href: `/${file}` })));
         return [...scriptTags, ...styleTags];

package/lib/esm/server/dev/handlers.js

@@ -77,7 +77,7 @@ export async function handleDocumentRequest(req, res, runner, options) {
             res.writeHead(context.statusCode, {
                 ...Object.fromEntries(headers),
             });
-            const Router = _jsx(StaticRouterProvider, { router: router, context: context });
+            const Router = (_jsx(StaticRouterProvider, { router: router, context: context, hydrate: true }));
             // If stream mode enabled, render the page as a plain text
             return await render(Router, res, {
                 metadata,

package/lib/esm/server/dev/server.js

@@ -11,7 +11,7 @@ import { getDirname, loadModuleSSR, } from '../../core/config/utils/load-modules
 import { ServerMode } from '../runtime/mode.js';
 import { handleDataRequest, handleDocumentRequest, handleSpaModeRequest, } from './handlers.js';
 import { createStaticHandler } from 'react-router';
-import { generateRoutes } from '../../routing/utils/generate-routes.js';
+import { generateRoutes, preloadMatches, } from '../../routing/utils/generate-routes.js';
 /**
  * Handle the request for the development environment
  * @param req
@@ -28,8 +28,26 @@ async function devRequestHandler(req, res, viteDevServer, options) {
             const AppRouter = await (await runner.import(join(`${options.rootPath}/src/app/app.router`))).default;
             // Get static routes
             const staticRoutes = generateRoutes(AppRouter);
+            await preloadMatches(req.originalUrl, staticRoutes);
             // Create static handler
             let handler = createStaticHandler(staticRoutes);
+            // Get matches for the current URL
+            // const matches = matchRoutes(staticRoutes, req.originalUrl);
+            // Resolve all lazy() modules for matched routes
+            // const resolvedMatches = await Promise.all(
+            //   matches?.map(async (match) => {
+            //     if (match.route.lazy) {
+            //       const lazyFn = match.route.lazy as unknown as () => Promise<any>;
+            //       const resolved = await lazyFn();
+            //       Object.assign(match.route, resolved);
+            //     }
+            //     return match;
+            //   }) ?? []
+            // );
+            // console.log({
+            //   resolvedMatches: JSON.stringify(resolvedMatches),
+            //   url: req.originalUrl,
+            // });
             if (isDataRequest(req)) {
                 // Handle data request
                 return await handleDataRequest(req, handler);

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

@@ -2,7 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ManifestManager } from '../build/manifest.js';
 import fs from 'node:fs';
 import path from 'node:path';
-import { generateRoutes } from '../../routing/utils/index.js';
+import { generateRoutes, preloadMatches,
+// generateSSRRoutes,
+ } from '../../routing/utils/index.js';
 import { createStaticHandler, createStaticRouter, StaticRouterProvider, } from 'react-router';
 import createRasenganRequest from './utils.js';
 import { extractHeadersFromRRContext, extractMetaFromRRContext, isRedirectResponse, isStaticRedirectFromConfig, } from '../dev/utils.js';
@@ -31,6 +33,8 @@ export function createRequestHandler(options) {
             const { render, } = entry;
             // Get static routes
             const staticRoutes = generateRoutes(AppRouter);
+            // Preload matches
+            await preloadMatches(req.originalUrl, staticRoutes);
             // Create static handler
             let handler = createStaticHandler(staticRoutes);
             // Create rasengan request for static routing
@@ -46,8 +50,10 @@ export function createRequestHandler(options) {
             if (!(context instanceof Response)) {
                 // Extract meta from context
                 const metadata = extractMetaFromRRContext(context);
+                // Get the source file from the context
+                const source = context.loaderData.source;
                 // Get assets tags
-                const assets = manifest.generateMetaTags(''); // TODO: Add the correct path
+                const assets = manifest.generateMetaTags(source);
                 // Create static router
                 let router = createStaticRouter(handler.dataRoutes, context);
                 const headers = extractHeadersFromRRContext(context);