rasengan 1.0.0-beta.1

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "rasengan",
+  "private": false,
+  "version": "1.0.0-beta.1",
+  "type": "module",
+  "main": "lib/index.js",
+  "bin": {
+    "rasengan": "./lib/cli/index.js"
+  },
+  "author": {
+    "name": "dilane3",
+    "email": "komboudilane125@gmail.com",
+    "url": "https://dilane3.com",
+    "twitter": "https://twitter.com/dilanekombou",
+    "github": "https://github.com/dilane3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rasengan/rasengan.git",
+    "issues": "https://github.com/rasengan/rasengan/issues"
+  },
+  "scripts": {
+    "dev": "node server",
+    "build": "npm run build:client && npm run build:server",
+    "build:client": "vite build --ssrManifest --outDir dist/client",
+    "build:server": "vite build --ssr node_modules/rasengan/lib/entries/entry-server.js --outDir dist/server",
+    "build:lib": "tsc -p tsconfig.lib.json",
+    "preview": "cross-env NODE_ENV=production node server",
+    "deploy": "npm publish --access public",
+    "pack": "npm pack --pack-destination ./../packages/rasengan/"
+  },
+  "dependencies": {
+    "@vercel/node": "^3.0.14",
+    "@vitejs/plugin-react": "^4.2.1",
+    "chalk": "^5.3.0",
+    "commander": "^11.1.0",
+    "compression": "^1.7.4",
+    "cross-spawn": "^7.0.3",
+    "execa": "^8.0.1",
+    "express": "^4.18.2",
+    "inquirer": "^9.2.12",
+    "keypress": "^0.2.1",
+    "node-fetch": "^3.3.2",
+    "ora": "^7.0.1",
+    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^2.0.4",
+    "react-router-dom": "^6.20.1",
+    "sirv": "^2.0.3",
+    "vite": "^5.0.7",
+    "vite-plugin-css": "^1.0.4"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/compression": "^1.7.4",
+    "@types/cross-spawn": "^6.0.4",
+    "@types/express": "^4.17.19",
+    "@types/node": "^20.8.6",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/react-helmet": "^6.1.8",
+    "cross-env": "^7.0.3",
+    "typescript": "^5.2.2"
+  },
+  "resolutions": {
+    "@vitejs/plugin-react": "^4.2.1"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=7.0.0"
+  }
+}

package/server.js

@@ -0,0 +1,229 @@
+import fs from "node:fs/promises";
+import express from "express";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+import {
+  createStaticHandler,
+  createStaticRouter,
+} from "react-router-dom/server.js";
+import chalk from "chalk";
+import inquirer from "inquirer";
+
+// Get config
+// @ts-ignore
+import config from "./../../rasengan.config.js";
+
+// Load utils
+import {
+  createFetchRequest,
+  logServerInfo,
+  fix404,
+} from "./lib/server/utils/index.js";
+
+/**
+ * This function is responsible for creating a server for the development environment.
+ * @param {boolean} isProduction - Whether the server is in production mode or not.
+ * @param {number} port - The port to run the server on.
+ * @param {string} base - The base path for the server.
+ */
+async function createServer({
+  isProduction,
+  port,
+  base = "/",
+  enableSearchingPort = false,
+}) {
+  // Get directory name
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+
+  // Get app path
+  const appPath = join(__dirname, "./../../");
+
+  // Cached production assets
+  const templateHtml = isProduction
+    ? await fs.readFile(join(appPath, "dist/client/index.html"), "utf-8")
+    : "";
+  const ssrManifest = isProduction
+    ? await fs.readFile(
+        join(appPath, "dist/client/.vite/ssr-manifest.json"),
+        "utf-8"
+      )
+    : undefined;
+
+  // Create http server
+  const app = express();
+
+  // Add Vite or respective production middlewares
+  let vite;
+  if (!isProduction) {
+    const { createServer } = await import("vite");
+    vite = await createServer({
+      server: { middlewareMode: true },
+      appType: "custom",
+      base,
+    });
+    app.use(vite.middlewares);
+  } else {
+    const compression = (await import("compression")).default;
+    const sirv = (await import("sirv")).default;
+    app.use(compression());
+    app.use(base, sirv(join(appPath, "dist/client"), { extensions: [] }));
+  }
+
+  // Serve HTML
+  app.use("*", async (req, res) => {
+    try {
+      // ! 404 Fix related to some files not being found
+      fix404(req.originalUrl, res, appPath);
+
+      // ! Service Worker Fix
+
+      const url = req.originalUrl.replace(base, "");
+
+      let template;
+      let render;
+      let staticRoutes;
+      if (!isProduction) {
+        // Always read fresh template in development
+        template = await fs.readFile(join(appPath, "index.html"), "utf-8");
+        template = await vite.transformIndexHtml(url, template);
+
+        const entry = await vite.ssrLoadModule(
+          join(appPath, "node_modules/rasengan/lib/entries/entry-server.js")
+        );
+
+        render = entry.render;
+        staticRoutes = entry.staticRoutes;
+      } else {
+        template = templateHtml;
+        const entry = await import(
+          join(appPath, "dist/server/entry-server.js")
+        );
+        render = entry.render;
+        staticRoutes = entry.staticRoutes;
+      }
+
+      // Create static handler
+      let handler = createStaticHandler(staticRoutes);
+
+      // Create fetch request for static routing
+      let fetchRequest = createFetchRequest(req, req.get("host"));
+      let context = await handler.query(fetchRequest);
+
+      // Handle redirects
+      const status = context.status;
+
+      if (status === 302) {
+        const redirect = context.headers.get("Location");
+
+        return res.redirect(redirect);
+      }
+
+      // Helmet context
+      const helmetContext = {};
+
+      // Create static router
+      let router = createStaticRouter(handler.dataRoutes, context);
+
+      // const rendered = await render(url, ssrManifest);
+      const rendered = await render(router, context, helmetContext);
+
+      // Get metadata
+      const helmet = helmetContext.helmet;
+
+      const head = `
+        ${helmet.title.toString()}
+        ${helmet.meta.toString()}
+      `;
+
+      let html = template
+        .replace(`<!--app-head-->`, head ?? "")
+        .replace(`<!--app-html-->`, rendered.html ?? "");
+
+      res
+        .status(200)
+        .set({
+          "Content-Type": "text/html",
+          "Cache-Control": "max-age=31536000",
+        })
+        .end(html);
+    } catch (e) {
+      vite?.ssrFixStacktrace(e);
+      // console.log(e.stack);
+      res.status(500).end(e.stack);
+    }
+  });
+
+  // Start http server
+  const server = app.listen(port, () => {
+    setTimeout(() => {
+      logServerInfo(port, isProduction);
+    }, 100);
+  });
+
+  // Handle errors
+  server.on("error", async (err) => {
+    const multiplicationSymbol = "\u00D7";
+
+    // Handle PORT in use error
+    if (err.code === "EADDRINUSE") {
+      const newPort = port + 1;
+
+      console.error(
+        chalk.red(
+          `${chalk.bold.red(
+            multiplicationSymbol
+          )} Port ${port} is already in use. \n\n`
+        )
+      );
+
+      // Check if user wants to use a different port
+      if (!enableSearchingPort) {
+        // Ask user if they want to use a different port
+        const { useDifferentPort } = await inquirer.prompt([
+          {
+            type: "confirm",
+            name: "useDifferentPort",
+            message: `Do you want to use a different port?`,
+          },
+        ]);
+
+        if (!useDifferentPort) {
+          console.log(chalk.blue("Closing server... \n\n"));
+          process.exit(0);
+        }
+
+        console.log(chalk.blue(`Trying port ${newPort}... \n\n`));
+
+        await createServer({
+          isProduction,
+          port: newPort,
+          base,
+          enableSearchingPort: true,
+        });
+      } else {
+        console.log(chalk.blue(`Trying port ${newPort}... \n\n`));
+
+        await createServer({
+          isProduction,
+          port: newPort,
+          base,
+          enableSearchingPort,
+        });
+      }
+    }
+  });
+}
+
+// Constants
+const isProduction = process.env.NODE_ENV === "production";
+const port = !isProduction
+  ? (process.env.PORT && Number(process.env.PORT)) ||
+    config.server?.development?.port ||
+    5320
+  : process.env.PORT || 4320;
+const base = process.env.BASE || "/";
+
+// Launch server
+(async function launchServer() {
+  await createServer({ isProduction, port, base });
+})();

package/src/cli/dirname.ts

@@ -0,0 +1,7 @@
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default __dirname;

package/src/cli/index.ts

@@ -0,0 +1,134 @@
+#!/usr/bin/env node
+import chalk from "chalk";
+import { Command } from "commander";
+import __dirname from "./dirname.js";
+import { execa } from "execa";
+
+// Config
+
+// @ts-ignore
+import config from "../../../../rasengan.config.js";
+
+const program = new Command();
+
+program
+  .name(chalk.blue("rasengan"))
+  .version("1.0.0", "-v, --version", "Output the current version number");
+
+// Handle the dev command
+program
+  .command("dev")
+  .option("-p <port>")
+  .description("Start development server")
+  .action(async ({ p: port }: { p: number }) => {
+    const convertedPort = Number(port);
+
+    // Checking port
+    if (
+      port &&
+      (isNaN(convertedPort) || convertedPort < 0 || convertedPort > 65535)
+    ) {
+      console.log("");
+      console.log(
+        chalk.red("Please provide a valid port number between 0-65535")
+      );
+      console.log("");
+      process.exit(1);
+    }
+
+    execa("node", ["node_modules/rasengan/server"], {
+      stdio: "inherit",
+      env: {
+        ...process.env,
+        PORT: convertedPort ? convertedPort.toString() : undefined,
+      },
+    });
+  });
+
+// Handle the build command
+program
+  .command("build")
+  .description("Build the project")
+  .action(() => {
+    // const childProcess = exec("npm --prefix node_modules/rasengan run build");
+    execa("npm", ["run", "build"], {
+      cwd: "node_modules/rasengan",
+      stdio: "inherit", // Pipe child process output to the parent process
+    });
+  });
+
+// Handle the prebuild command
+program
+  .command("prebuild")
+  .description("Prebuild the project")
+  .action(() => {
+    // Displaying the message
+    console.log("");
+    console.log(chalk.blue("Prebuilding your project..."));
+    console.log("");
+
+    // Checking the config file in order to know about hosting strategy
+    const { server } = config;
+
+    const hostingStrategy = server?.production?.hosting ?? "custom";
+
+    if (hostingStrategy === "vercel") {
+      // Displaying the message
+      console.log(
+        `Your project is configured to be hosted on ${chalk.bold.blue(
+          hostingStrategy
+        )}\n`
+      );
+
+      // Copying the api folder to the root directory
+      execa(
+        "cp",
+        ["-r", "node_modules/rasengan/lib/server/functions/vercel/api", "."],
+        {
+          stdio: "inherit",
+        }
+      );
+
+      // Copying the vercel.json file to the root directory
+      execa(
+        "cp",
+        ["node_modules/rasengan/src/server/functions/vercel/vercel.json", "."],
+        {
+          stdio: "inherit",
+        }
+      );
+
+      // Removing index.d.ts and index.js.map files from the api folder
+      execa("rm", ["api/index.d.ts", "api/index.js.map"], {
+        stdio: "inherit",
+      });
+    } else if (hostingStrategy === "netlify") {
+      // Copying the netlify.toml file to the root directory
+      // execa(
+      //   "cp",
+      //   ["node_modules/rasengan/src/server/functions/netlify/netlify.toml", "."],
+      //   {
+      //     stdio: "inherit",
+      //   }
+      // );
+    }
+  });
+
+// Handle the start command
+program
+  .command("start")
+  .description("Start the project in production mode")
+  .action(async () => {
+    const childProcess = execa("npm", ["run", "preview"], {
+      cwd: "node_modules/rasengan",
+      stdio: "inherit", // Pipe child process output to the parent process
+    });
+
+    childProcess.on("close", (code) => {
+      if (code === 0) {
+        process.stdout.write("Project started Succesfully");
+      }
+    });
+  });
+
+program.parse(process.argv);

package/src/config/index.ts

@@ -0,0 +1,67 @@
+import { type AppConfig } from "./type.js";
+
+/**
+ * Function to define the config for the app
+ * It will be used by vite.config.ts and other files in other to configure the app
+ * @param {AppConfig} loadedConfig
+ */
+export const defineConfig = (loadedConfig: AppConfig) => {
+  const { reactStrictMode, server, vite } = loadedConfig;
+
+  try {
+    const config = {
+      reactStrictMode: reactStrictMode === undefined ? true : reactStrictMode,
+      server,
+      vite: {
+        plugins: vite?.plugins || [],
+
+        optimizeDeps: {
+          exclude: [
+            "node:http",
+            "node-fetch",
+            ...(vite?.optimizeDeps?.exclude || []),
+          ],
+        },
+
+        css: {
+          postcss: vite?.css?.postcss || undefined,
+        },
+
+        build: {
+          external: vite?.build?.external || [],
+        },
+
+        appType: "custom",
+      },
+      // More config options...
+    };
+
+    return config;
+  } catch (error) {
+    console.error(error);
+    return {
+      reactStrictMode: true,
+    };
+  }
+};
+
+/**
+ * Function to adapt the path for dev and prod
+ * @param {string | Array<string>} paths
+ */
+export const adaptPath = (paths: string | Array<string>) => {
+  // Check if we are in dev mode or prod
+  const isProduction = process.env.NODE_ENV === "production";
+  const prefix = isProduction ? "./../../" : "";
+
+  // Chech if the path is an array
+  const isArray = Array.isArray(paths);
+
+  // If the path is an array
+  if (isArray) {
+    return paths.map((path) => `${prefix}${path}`);
+  }
+
+  // If the path is a string
+  return `${prefix}${paths}`;
+}

package/src/config/type.ts

@@ -0,0 +1,76 @@
+export type AppConfig = {
+  /**
+   * Enable strict mode
+   * @default true
+   */
+  reactStrictMode?: boolean;
+
+  /**
+   * Configure server both in development and production
+   */
+  server?: {
+    /**
+     * Configure server in development
+     */
+    development?: {
+      /**
+       * Port to listen on
+       * @default 3000
+       */
+      port?: number;
+    };
+
+    /**
+     * Configure server in production
+     */
+    production?: {
+      /**
+       * Set the hosting strategy
+       * @default "custom"
+       */
+      hosting?: HostingStrategy;
+    };
+  };
+
+  /**
+   * Configure Vite
+   */
+  vite?: {
+    /**
+     * Configure Vite plugins
+     */
+    plugins?: any[];
+
+    /**
+     * Optimize dependencies
+     */
+    optimizeDeps?: {
+      exclude?: string[];
+    };
+
+    /**
+     * Configure css options
+     */
+    css?: {
+      postcss?: {
+        plugins?: any[];
+      };
+    };
+
+    /**
+     * Configure build options
+     */
+    build?: {
+      /**
+       * Configure external dependencies
+       */
+      external?: string[];
+    }
+  };
+  // More config options...
+};
+
+/**
+ * Hosting strategy
+ */
+export type HostingStrategy = "vercel" | "netlify" | "heroku" | "custom";

package/src/core/components/index.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+import { ComponentProps, PageToRenderProps } from "../types.js";
+import { getRouter } from "../../routing/utils/index.js";
+import * as pkg from "react-helmet-async";
+import { useRouteError } from "react-router-dom";
+
+// @ts-ignore
+const { Helmet } = pkg.default || pkg;
+
+/**
+ * App component that represent the entry point of the application
+ */
+export const Component = ({ router: AppRouter }: ComponentProps) => {
+  const Router = getRouter(AppRouter);
+
+  return <Router />;
+};
+
+/**
+ * Page component that defines title and description to a page
+ */
+export const PageToRender = ({ page, data }: PageToRenderProps) => {
+  // Get the page component
+  const Page = page.render;
+
+  // Get the page props
+  const props = data.props || {};
+
+  return (
+    <React.Fragment>
+      <Helmet>
+        <title>{page.title}</title>
+        <meta name="description" content={page.description} />
+      </Helmet>
+
+      <Page {...props} />
+    </React.Fragment>
+  );
+};
+
+/**
+ * Error fallback component that will be displayed if an error occurs
+ */
+export class ErrorBoundary extends React.Component {
+  state = { hasError: false, error: null, info: null };
+
+  componentDidCatch(error: any, info: any) {
+    this.setState({ hasError: true, error, info });
+  }
+
+  render() {
+    const { error, info } = this.state;
+
+    if (this.state.hasError) {
+      return <ErrorFallbackComponent error={error} info={info} />;
+    }
+
+    // @ts-ignore
+    return <RouteErrorBoundary>{this.props.children}</RouteErrorBoundary>;
+  }
+}
+
+/**
+ * Error fallback component that will be displayed if an error occurs during a routing
+ */
+export const RouteErrorBoundary = ({ children }: any) => {
+  const error = useRouteError();
+
+  console.log({ error });
+
+  if (error) {
+    return <ErrorFallbackComponent error={error} info={null} />;
+  }
+
+  return children;
+};
+
+/**
+ * Error fallback component that will be displayed if an error occurs
+ */
+const ErrorFallbackComponent = ({ error, info }: any) => {
+  console.log({ error, info });
+  return (
+    <div
+      style={{
+        width: "calc(100% - 80px)",
+        height: "calc(100vh - 80px)",
+        padding: "40px",
+        backgroundColor: "#fff",
+      }}
+    >
+      <div>
+        <h1 style={{ fontSize: "2rem" }}>Something went wrong</h1>
+        <p>{error.toString()}</p>
+
+        <div
+          style={{
+            width: "100%",
+            height: "auto",
+            borderRadius: 10,
+            padding: "20px",
+            marginTop: "10px",
+            backgroundColor: "#f0f0f0",
+          }}
+        >
+          <p>{info.componentStack}</p>
+        </div>
+      </div>
+    </div>
+  );
+};