rasengan 1.0.0-beta.1

package/src/routing/utils/index.tsx

@@ -0,0 +1,342 @@
+import { RouterComponent } from "../interfaces.js";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import {
+  RouteDecoratorProps,
+  RouteLayoutDecoratorProps,
+  RouterDecoratorProps,
+} from "../../decorators/types.js";
+import { DefaultLayout, LayoutComponent, PageComponent } from "../../index.js";
+import {
+  ClientComponent,
+  NotFoundComponentContainer,
+  NotFoundPageComponent,
+  ServerComponent,
+} from "../components/index.js";
+import { RouteErrorBoundary as ErrorBoundary } from "../../core/components/index.js";
+
+/**
+ * This function receives a router component and get a formated router first
+ * and then return a router.
+ */
+export const getRouter = (router: RouterComponent) => {
+  const routes = generateBrowserRoutes(router);
+
+  let Router = createBrowserRouter(routes);
+
+  return () => (
+    <RouterProvider fallbackElement={<>Not Found</>} router={Router} />
+  );
+};
+
+/**
+ * This function receives a router component and return a formated router.
+ */
+const generateBrowserRoutes = (router: RouterComponent, isRoot = true) => {
+  // Initialization of the list of routes
+  const routes = [] as any;
+
+  // Get information about the layout and the path
+  const layout = router.layout;
+  const LayoutToRender = layout.render;
+
+  const route = {
+    path: layout.path,
+    elementError: <ErrorBoundary />,
+    element: <LayoutToRender />,
+    children: [] as unknown as any,
+  };
+
+  // Defining the page not found route
+  if (isRoot) {
+    routes.push({
+      path: "*",
+      element: (
+        <NotFoundComponentContainer content={router.notFoundComponent} />
+      ),
+    });
+  }
+
+  // Get informations about pages
+  const pages = router.pages.map((page) => {
+    // Get the path of the page
+    const path = page.path === "/" ? layout.path : page.path;
+
+    return {
+      path,
+      loader: async ({ params, request }: any) => {
+        // Get the response from the loader
+        const response = await page.loader({ params, request });
+
+        // Handle redirection
+        if (response.redirect) {
+          const formData = new FormData();
+
+          formData.append("redirect", response.redirect);
+
+          return new Response(formData, {
+            status: 302,
+            headers: {
+              Location: response.redirect,
+            },
+          });
+        }
+
+        return response;
+      },
+      element: (
+        <ClientComponent page={page} loader={router.loaderComponent({})} />
+      ),
+      elementError: <ErrorBoundary />,
+    };
+  });
+
+  // Add pages into children of the current route
+  pages.forEach((page) => {
+    route.children.push(page);
+  });
+
+  // Loop throug sub routers in order to apply the same thing.
+  // for (const SubRouter of router.routers) {
+  //   const subRouter = new SubRouter();
+
+  //   const subRoutes = generateBrowserRoutes(subRouter);
+
+  //   // Add sub routes into the lists of route
+  //   route.children.push(subRoutes);
+  // }
+
+  routes.push(route);
+
+  // Loop throug besides routers in order to apply the same thing.
+  for (const besideRouter of router.routers) {
+    const besidesRoutes = generateBrowserRoutes(besideRouter, false);
+
+    // Add besides routes into the lists of route
+    routes.push(...besidesRoutes);
+  }
+
+  // Return the formated router
+  return routes;
+};
+
+/**
+ * This function receives a router component and return a formated router for static routing
+ * @param router Represents the router component
+ * @returns
+ */
+export const generateStaticRoutes = (
+  router: RouterComponent,
+  isRoot = true
+) => {
+  // Initialization of the list of routes
+  const routes = [] as any;
+
+  // Get information about the layout and the path
+  const layout = router.layout;
+  const LayoutToRender = layout.render;
+
+  const route = {
+    path: layout.path,
+    elementError: <ErrorBoundary />,
+    element: <LayoutToRender />,
+    children: [] as unknown as any,
+  };
+
+  // Defining the page not found route
+  if (isRoot) {
+    routes.push({
+      path: "*",
+      element: (
+        <NotFoundComponentContainer content={router.notFoundComponent} />
+      ),
+    });
+  }
+
+  // Get informations about pages
+  const pages = router.pages.map((page) => {
+    // Get the path of the page
+    const path = page.path === "/" ? layout.path : page.path;
+
+    return {
+      path,
+      async loader({ params, request }: any) {
+        // Get the response from the loader
+        const response = await page.loader({ params, request });
+
+        // Handle redirection
+        if (response.redirect) {
+          const formData = new FormData();
+
+          formData.append("redirect", response.redirect);
+
+          return new Response(formData, {
+            status: 302,
+            headers: {
+              Location: response.redirect,
+            },
+          });
+        }
+
+        return response;
+      },
+      Component() {
+        return (
+          <ServerComponent page={page} loader={router.loaderComponent({})} />
+        );
+      },
+      elementError: <ErrorBoundary />,
+    };
+  });
+
+  // Add pages into children of the current route
+  pages.forEach((page) => {
+    route.children.push(page);
+  });
+
+  // Loop throug sub routers in order to apply the same thing.
+  // for (const SubRouter of router.routers) {
+  //   const subRouter = new SubRouter();
+  //   const subRoutes = generateStaticRoutes(subRouter);
+
+  //   // Add sub routes into the lists of route
+  //   route.children.push(subRoutes);
+  // }
+
+  routes.push(route);
+
+  // Loop throug besides routers in order to apply the same thing.
+  for (const besideRouter of router.routers) {
+    const besidesRoutes = generateStaticRoutes(besideRouter, false);
+
+    // Add besides routes into the lists of route
+    routes.push(...besidesRoutes);
+  }
+
+  // Return the formated router
+  return routes;
+};
+
+/**
+ * This function receives a router component and extract all metadatas of all pages
+ * and put all of them inside a map function in order to be used to enhance ssr
+ */
+export const extractPageMetadata = (router: RouterComponent) => {
+  // Initialisation of the Map of metadata
+  const metadatas = new Map<string, { title: string; description: string }>();
+
+  // Get base url
+  const baseURL = router.layout.path;
+
+  // Get informations about pages of the main router
+  router.pages.forEach((page) => {
+    // Add the first slash if not exists from the page path
+    const pagePath = page.path[0] === "/" ? page.path : "/" + page.path;
+
+    // Remove the last slash if exists from the base url
+    const finalBaseURL =
+      baseURL === "/"
+        ? baseURL
+        : baseURL[baseURL.length - 1] === "/"
+        ? baseURL.slice(0, -1)
+        : baseURL;
+
+    // Get the path of the page
+    const path =
+      pagePath === "/"
+        ? finalBaseURL
+        : finalBaseURL === "/"
+        ? pagePath
+        : finalBaseURL + "/" + pagePath;
+
+    // Add metadata
+    metadatas.set(path, {
+      title: page.title,
+      description: page.description,
+    });
+  });
+
+  // Loop through the others routers recursively
+  for (let besidesRouter of router.routers) {
+    const data = extractPageMetadata(besidesRouter);
+
+    // Copy metadata from data to metadatas map
+    data.forEach((value, key) => {
+      metadatas.set(key, value);
+    });
+  }
+
+  return metadatas;
+};
+
+/**
+ * This function adds metadata to a page or a layout
+ * @param option
+ * @returns
+ */
+export const defineRoutePage = (option: RouteDecoratorProps) => {
+  const { path, title, description } = option;
+
+  return (Component: new () => PageComponent) => {
+    if (!path) throw new Error("You must provide a path to the page");
+
+    // Create a new instance of the component
+    const component = new Component();
+
+    // Set properties
+    component.path = path;
+    component.title = title || Component.name;
+    component.description = description || "";
+
+    return component;
+  };
+};
+
+/**
+ * This function adds metadata to a page or a layout
+ * @param option
+ * @returns
+ */
+export const defineRouteLayout = (option: RouteLayoutDecoratorProps) => {
+  const { path } = option;
+
+  return (Component: new () => LayoutComponent) => {
+    if (!path) throw new Error("You must provide a path to the layout");
+
+    // Create a new instance of the component
+    const component = new Component();
+
+    // Set properties
+    component.path = path;
+
+    return component;
+  };
+};
+
+/**
+ * This function adds metadata to a router
+ * @param option
+ * @returns
+ */
+export const defineRouter = (option: RouterDecoratorProps) => {
+  const { imports, layout, pages, loaderComponent, notFoundComponent } = option;
+
+  return (Component: new () => RouterComponent) => {
+    // Handle errors
+    if (!option.pages)
+      throw new Error(
+        "You must provide a list of pages in the router decorator"
+      );
+
+    // Create router
+    const router = new Component();
+
+    // Set properties
+    router.routers = imports || [];
+    router.layout = layout || new DefaultLayout();
+    router.pages = pages;
+    router.loaderComponent = loaderComponent || (() => null);
+    router.notFoundComponent = notFoundComponent || NotFoundPageComponent;
+
+    return router;
+  };
+};

package/src/server/functions/vercel/api/index.ts

@@ -0,0 +1,122 @@
+import fs from "node:fs/promises";
+import path, { join, dirname } from "path";
+import { fileURLToPath } from "url";
+import type { VercelRequest, VercelResponse } from "@vercel/node";
+import {
+  StaticHandlerContext,
+  createStaticHandler,
+  createStaticRouter,
+} from "react-router-dom/server.js";
+// @ts-ignore
+import { createFetchRequest } from "rasengan";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Create server for production only
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  try {
+    // Get URL
+    const url = req.url;
+    const host = req.headers.host;
+
+    // Get app path
+    const appPath = join(__dirname, "..");
+
+    // ! Favicon Fix
+    if (url === "/favicon.ico") {
+      return res.send(path.resolve(join(appPath, "dist/client/rasengan.png")));
+    }
+
+    // ! Robots Fix
+    if (url === "/robots.txt") {
+      return res.send(`
+      user-agent: *
+      disallow: /downloads/
+      disallow: /private/
+      allow: /
+      
+      user-agent: magicsearchbot
+      disallow: /uploads/
+    `);
+    }
+
+    // ! Sitemap Fix
+    if (url === "/sitemap.xml") {
+      return res.send(path.resolve(join(appPath, "dist/client/sitemap.xml")));
+    }
+
+    // ! Manifest Fix
+    if (url === "/manifest.json") {
+      return res.send(path.resolve(join(appPath, "dist/client/manifest.json")));
+    }
+
+    let template;
+    let entry;
+    let manifest;
+
+    // Always read fresh template in development
+    const htmlFilePath = join(appPath, "dist/client/index.html");
+    const serverFilePath = join(appPath, "dist/server/entry-server.js");
+    const ssrManifestFilePath = join(
+      appPath,
+      "dist/client/.vite/ssr-manifest.json"
+    );
+
+    // Read template, server-renderer and manifest in production
+    template = await fs.readFile(htmlFilePath, "utf-8");
+    entry = await import(serverFilePath);
+    manifest = await fs.readFile(ssrManifestFilePath, "utf-8");
+
+    // Extract render and staticRoutes from entry
+    const { render, staticRoutes } = entry;
+
+    // Create static handler
+    let handler = createStaticHandler(staticRoutes);
+
+    // Create fetch request for static routing
+    let fetchRequest = createFetchRequest(req, host);
+    let context = await handler.query(fetchRequest);
+
+    // Handle redirects
+    const status = (context as Response).status;
+
+    if (status === 302) {
+      const redirect = (context as Response).headers.get("Location");
+
+      if (redirect) return res.redirect(redirect);
+    }
+
+    // Helmet context
+    const helmetContext = {} as { helmet: any };
+
+    // Create static router
+    let router = createStaticRouter(
+      handler.dataRoutes,
+      context as StaticHandlerContext
+    );
+
+    const rendered = await render(router, context, helmetContext);
+
+    // Get metadata
+    const helmet = helmetContext.helmet;
+
+    let head = `
+      ${helmet.title.toString()}
+      ${helmet.meta.toString()}
+    `;
+
+    let html = template
+      .replace(`<!--app-head-->`, head ?? "")
+      .replace(`<!--app-html-->`, rendered.html ?? "");
+
+    res
+      .status(200)
+      .setHeader("Content-Type", "text/html")
+      .setHeader("Cache-Control", "max-age=31536000")
+      .end(html);
+  } catch (e: any) {
+    console.log(e.stack);
+    res.status(500).end(e.stack);
+  }
+}

package/src/server/functions/vercel/vercel.json

@@ -0,0 +1,12 @@
+{
+  "routes": [
+    {
+      "src": "/assets/(.*)",
+      "dest": "client/assets/$1"
+    },
+    {
+      "src": "/(.*)",
+      "dest": "api/index.js"
+    }
+  ]
+}

package/src/server/utils/createFetchRequest.ts

@@ -0,0 +1,40 @@
+import { Request } from "express";
+
+/**
+ * This function is used to create a fetch request from an express request.
+ */
+export default function createFetchRequest(req: Request, host: string) {
+  let origin = `${req.protocol}://${host}`;
+  // Note: This had to take originalUrl into account for presumably vite's proxying
+  let url = new URL(req.originalUrl || req.url, origin);
+
+  let controller = new AbortController();
+  req.on("close", () => controller.abort());
+
+  let headers = new Headers();
+
+  for (let [key, values] of Object.entries(req.headers)) {
+    if (values) {
+      if (Array.isArray(values)) {
+        for (let value of values) {
+          headers.append(key, value);
+        }
+      } else {
+        headers.set(key, values);
+      }
+    }
+  }
+
+  let init = {
+    method: req.method,
+    headers,
+    signal: controller.signal,
+    body: null,
+  };
+
+  if (req.method !== "GET" && req.method !== "HEAD") {
+    init.body = req.body;
+  }
+
+  return new Request(url.href, init);
+}

package/src/server/utils/getIp.ts

@@ -0,0 +1,37 @@
+import os from "node:os";
+
+// Get local IP
+export default function getIP() {
+  // Get network interfaces
+  const networkInterfaces = os.networkInterfaces();
+
+  // Find the IPv4 address for the default network interface
+  let ipAddress = "";
+
+  // Loop through the network interfaces
+  for (const interfaceName in networkInterfaces) {
+    // Get the network interface
+    const iface = networkInterfaces[interfaceName];
+
+    // Skip when there is no network interface
+    if (!iface) {
+      continue;
+    }
+
+    // Loop through the interface addresses
+    for (let i = 0; i < iface.length; i++) {
+      const alias = iface[i];
+
+      if (alias.family === "IPv4" && !alias.internal) {
+        ipAddress = alias.address;
+        break;
+      }
+    }
+
+    if (ipAddress) {
+      break;
+    }
+  }
+
+  return ipAddress;
+}

package/src/server/utils/handleError.ts

@@ -0,0 +1,36 @@
+import path, { join } from "node:path";
+import { Response } from "express";
+
+export function fix404(url: string, res: Response, appPath: string) {
+  // ! Favicon Fix
+  if (url === "/favicon.ico") {
+    return res.sendFile(
+      path.resolve(join(appPath, "dist/client/rasengan.png"))
+    );
+  }
+
+  // ! Robots Fix
+  if (url === "/robots.txt") {
+    return res.send(`
+      user-agent: *
+      disallow: /downloads/
+      disallow: /private/
+      allow: /
+      
+      user-agent: magicsearchbot
+      disallow: /uploads/
+    `);
+  }
+
+  // ! Sitemap Fix
+  if (url === "/sitemap.xml") {
+    return res.sendFile(path.resolve(join(appPath, "dist/client/sitemap.xml")));
+  }
+
+  // ! Manifest Fix
+  if (url === "/manifest.json") {
+    return res.sendFile(
+      path.resolve(join(appPath, "dist/client/manifest.json"))
+    );
+  }
+}

package/src/server/utils/index.ts

@@ -0,0 +1,15 @@
+// Import section
+
+import createFetchRequest from "./createFetchRequest.js";
+import getIP from "./getIp.js";
+import { logServerInfo } from "./log.js";
+import { fix404 } from "./handleError.js";
+
+// Export section
+
+export {
+  createFetchRequest,
+  getIP,
+  logServerInfo,
+  fix404,
+}