Merge pull request #40 from rasengan-dev/fix/routing-system

fix: fix import routers into another router

Author: dilane3

packages/create-rasengan/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Unreleased
 
+## 1.2.0-beta.3 (2025-02-28)
+
+## 1.2.0-beta.2 (2025-02-28)
+
 ## 1.2.0-beta.1 (2025-02-28)
 
 ## 1.2.0-beta.0 (2025-02-25)

packages/create-rasengan/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rasengan",
-  "version": "1.2.0-beta.1",
+  "version": "1.2.0-beta.3",
   "description": "The Rasengan.js CLI tool to generate a new project with a simple template",
   "main": "/dist/main.js",
   "type": "module",

packages/create-rasengan/src/constants/index.ts

@@ -26,7 +26,7 @@ export const Versions: {
   beta: string;
 } = {
   stable: null,
-  beta: '1.0.0-beta.53',
+  beta: '1.0.0-beta.55',
 };
 
 /**

packages/rasengan/CHANGELOG.md

@@ -1 +1,9 @@
 ## Unreleased
+
+## 1.0.0-beta.55 (2025-02-28)
+
+## 1.0.0-beta.54 (2025-02-28)
+
+## 1.0.0-beta.53 (2025-02-28)
+
+## 1.0.0-beta.53 (2025-02-28)

packages/rasengan/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rasengan",
   "private": false,
-  "version": "1.0.0-beta.52",
+  "version": "1.0.0-beta.55",
   "description": "The modern React Framework",
   "type": "module",
   "main": "lib/esm/index.js",
@@ -80,14 +80,14 @@
     "react-router": "^7.0.0"
   },
   "peerDependencies": {
+    "@rasenganjs/mdx": "workspace:^",
     "@types/node": "^18.0.0 || >=20.0.0",
     "less": "*",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "sass": "*",
     "stylus": "*",
-    "vite": "^6.0.0",
-    "@rasenganjs/mdx": "workspace:^"
+    "vite": "^6.0.0"
   },
   "peerDependenciesMeta": {
     "@types/node": {

packages/rasengan/src/routing/types.ts

@@ -71,7 +71,7 @@ export type RouterProps = {
   /**
    * Usefull to collect sub routers
    */
-  imports?: Array<RouterComponent>;
+  imports?: Array<Promise<RouterComponent>>;
 
   /**
    * Usefull to define a layout

packages/rasengan/src/routing/utils/define-router.tsx

@@ -63,8 +63,10 @@ export const defineRouter = (option: RouterProps) => {
       }
     }
 
+    let routers = await Promise.all(imports ?? []);
+
     // Set properties
-    router.routers = imports || [];
+    router.routers = routers;
     router.layout = layout || DefaultLayout;
     router.pages = pageComponentList;
     router.loaderComponent = loaderComponent || (() => null);

packages/rasengan/src/routing/utils/generate-routes.tsx

@@ -208,7 +208,7 @@ export const generateRoutes = (
   const route: RouteObject = {
     path: !isRoot
       ? router.useParentLayout
-        ? parentLayout.path + Layout.path
+        ? parentLayout.path + (Layout.path === '/' ? '' : Layout.path)
         : Layout.path
       : Layout.path,
     errorElement: <ErrorBoundary />,
@@ -310,17 +310,17 @@ export const generateRoutes = (
     route.children.push(page);
   });
 
-  // Loop through imported routers in order to apply the same thing.
+  // 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);
 
-    importedRoutes.forEach((route) => {
-      if (route.nested) {
-        route.children.push(route);
+    for (const importedRoute of importedRoutes) {
+      if (importedRoute.nested) {
+        route.children.push(importedRoute);
       } else {
-        routes.push(route);
+        routes.push(importedRoute);
       }
-    });
+    }
   }
 
   // Make sure to add the route at the beginning of the list

packages/rasengan/src/server/dev/server.ts

@@ -52,6 +52,8 @@ async function devRequestHandler(
     // Get static routes
     const staticRoutes = generateRoutes(AppRouter);
 
+    console.log({ staticRoutes: JSON.stringify(staticRoutes) });
+
     // Create static handler
     let handler = createStaticHandler(staticRoutes);
 

playground/rasengan-v1-test/src/app/app.router.ts

@@ -2,11 +2,12 @@ import { RouterComponent, defineRouter } from 'rasengan';
 import AppLayout from '@/app/app.layout';
 import Home from '@/app/home.page';
 import Blog from '@/app/blog.page.mdx';
+import SubRouter from '@/app/sub-router/sub-router.router';
 
 class AppRouter extends RouterComponent {}
 
 export default defineRouter({
-  imports: [],
+  imports: [SubRouter],
   layout: AppLayout,
   pages: [Home, Blog],
 })(AppRouter);

playground/rasengan-v1-test/src/app/home.page.tsx

@@ -27,7 +27,7 @@ const Home: PageComponent = (props: any) => {
       </div>
 
       <div className="mt-8 flex flex-wrap justify-center gap-4">
-        <div className="flex flex-col p-4 rounded-md border-[1px] border-[EFEFEF] max-w-[500px] md:w-[300px] lg:w-[400px]">
+        <div className="flex flex-col p-4 rounded-md border-[1px] border-[#EFEFEF] max-w-[500px] md:w-[300px] lg:w-[400px]">
           <h2 className="text-xl font-urbanist">Documentation</h2>
           <p className="mt-2">
             Find in-depth information about Rasengan features and API.
@@ -41,7 +41,7 @@ const Home: PageComponent = (props: any) => {
           </a>
         </div>
 
-        <div className="flex flex-col p-4 rounded-md border-[1px] border-[EFEFEF] max-w-[500px] md:w-[300px] lg:w-[400px]">
+        <div className="flex flex-col p-4 rounded-md border-[1px] border-[#EFEFEF] max-w-[500px] md:w-[300px] lg:w-[400px]">
           <h2 className="text-xl font-urbanist">Learn</h2>
           <p className="mt-2">
             Learn about Rasengan in an interactive course with quizzes!
@@ -55,7 +55,7 @@ const Home: PageComponent = (props: any) => {
           </a>
         </div>
 
-        <div className="flex flex-col p-4 rounded-md border-[1px] border-[EFEFEF] max-w-[500px] md:w-[300px] lg:w-[400px]">
+        <div className="flex flex-col p-4 rounded-md border-[1px] border-[#EFEFEF] max-w-[500px] md:w-[300px] lg:w-[400px]">
           <h2 className="text-xl font-urbanist">Examples</h2>
           <p className="mt-2">
             Discover and deploy boilerplate example Rasengan projects.
@@ -69,7 +69,7 @@ const Home: PageComponent = (props: any) => {
           </a>
         </div>
 
-        <div className="flex flex-col p-4 rounded-md border-[1px] border-[EFEFEF] max-w-[500px] md:w-[300px] lg:w-[400px]">
+        <div className="flex flex-col p-4 rounded-md border-[1px] border-[#EFEFEF] max-w-[500px] md:w-[300px] lg:w-[400px]">
           <h2 className="text-xl font-urbanist">Community</h2>
           <p className="mt-2">
             Join an active community of Rasengan users on GitHub.

playground/rasengan-v1-test/src/app/sub-router/about.page.tsx

@@ -0,0 +1,16 @@
+import { PageComponent } from 'rasengan';
+
+export const About: PageComponent = () => {
+  return (
+    <section>
+      <h1>About page</h1>
+    </section>
+  );
+};
+
+About.path = '/about';
+
+About.metadata = {
+  title: 'About',
+  description: 'About page',
+};

playground/rasengan-v1-test/src/app/sub-router/group/contact.page.tsx

@@ -0,0 +1,16 @@
+import { PageComponent } from 'rasengan';
+
+export const Contact: PageComponent = () => {
+  return (
+    <section>
+      <h1>Contact page</h1>
+    </section>
+  );
+};
+
+Contact.path = '/contact';
+
+Contact.metadata = {
+  title: 'Contact',
+  description: 'Contact page',
+};

playground/rasengan-v1-test/src/app/sub-router/group/index.group.ts

@@ -0,0 +1,8 @@
+import { defineRoutesGroup } from 'rasengan';
+import { Contact } from './contact.page';
+import { Pricing } from './pricing.page';
+
+export default defineRoutesGroup({
+  path: '/group',
+  children: [Contact, Pricing],
+});

playground/rasengan-v1-test/src/app/sub-router/group/pricing.page.tsx

@@ -0,0 +1,16 @@
+import { PageComponent } from 'rasengan';
+
+export const Pricing: PageComponent = () => {
+  return (
+    <section>
+      <h1>Pricing page</h1>
+    </section>
+  );
+};
+
+Pricing.path = '/pricing';
+
+Pricing.metadata = {
+  title: 'Pricing',
+  description: 'Pricing page',
+};

playground/rasengan-v1-test/src/app/sub-router/sub-router.router.ts

@@ -0,0 +1,11 @@
+import { defineRouter, RouterComponent } from 'rasengan';
+import { About } from '@/app/sub-router/about.page';
+import Group1 from './group/index.group';
+
+class SubRouter extends RouterComponent {}
+
+export default defineRouter({
+  imports: [],
+  pages: [About, Group1],
+  // useParentLayout: false
+})(SubRouter);