rasengan 1.0.0-beta.1

package/src/core/index.ts

@@ -0,0 +1,14 @@
+export {
+  type ILayoutComponent,
+  LayoutComponent,
+  DefaultLayout,
+  PageComponent,
+} from "./interfaces.js";
+
+export type {
+  AppProps,
+  ReactComponentProps,
+  ComponentProps,
+  LoaderOptions,
+  LoaderResponse,
+} from "./types.js";

package/src/core/interfaces.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+import { LoaderOptions, LoaderResponse, ReactComponentProps } from "./types.js";
+import { Outlet } from "react-router-dom";
+
+/**
+ * Layout component interface that defines the base structure of a Layout and a Page too.
+ */
+export interface ILayoutComponent {
+  /**
+   * Fonction Component that return a JSX Element for a UI
+   */
+  render: React.FC<ReactComponentProps>;
+}
+
+/**
+ * Layout component that represents a layout
+ */
+export abstract class LayoutComponent implements ILayoutComponent {
+  /**
+   *
+   * Page path
+   */
+  protected _path!: string;
+
+  /**
+   * Render method which is a React component
+   * @param props - props for the component
+   */
+  abstract render(props?: ReactComponentProps): React.ReactNode;
+
+  // Getters
+
+  /**
+   * Get page path
+   */
+  get path(): string {
+    return this._path;
+  }
+
+  // Setters
+
+  /**
+   * Set page path
+   */
+  set path(path: string) {
+    this._path = path;
+  }
+}
+
+/**
+ * Default Layout
+ */
+export class DefaultLayout extends LayoutComponent {
+  constructor() {
+    super();
+
+    this._path = "/";
+  }
+
+  render(): React.ReactNode {
+    return (
+      <React.Fragment>
+        <Outlet />
+      </React.Fragment>
+    );
+  }
+}
+
+/**
+ * Page component that extends LayoutComponent and represents a page
+ */
+export abstract class PageComponent extends LayoutComponent {
+  /**
+   * Page title
+   */
+  protected _title!: string;
+
+  /**
+   * Page description
+   */
+  protected _description!: string;
+
+  // Getters
+
+  /**
+   * Get page title
+   */
+  get title(): string {
+    return this._title;
+  }
+
+  /**
+   * Get page description
+   */
+  get description(): string {
+    return this._description;
+  }
+
+  // Setters
+
+  /**
+   * Set page title
+   */
+  set title(title: string) {
+    this._title = title;
+  }
+
+  /**
+   * Set page description
+   */
+  set description(description: string) {
+    this._description = description;
+  }
+
+  /**
+   * Loader method that will be called during a routing on the server side
+   * in order to get data for the page from the server
+   * @returns Promise<any>
+   */
+  async loader(
+    _options: LoaderOptions
+  ): Promise<LoaderResponse> {
+    return new Promise((resolve) => {
+      resolve({
+        props: {},
+      });
+    });
+  }
+}

package/src/core/types.ts

@@ -0,0 +1,43 @@
+import { RouterComponent } from "../routing/interfaces.js";
+import { PageComponent } from "./interfaces.js";
+
+
+/**
+ * Props for App component
+ */
+export type AppProps = {
+  Component: React.FC<{ router: any }>;
+};
+
+/**
+ * Props for the base Component that takes the app router
+ */
+export type ComponentProps = {
+  router: RouterComponent;
+};
+
+export type PageToRenderProps = {
+  page: PageComponent;
+  data: LoaderResponse;
+};
+
+/**
+ * Props for component react components
+ */
+export type ReactComponentProps = { [key: string]: any };
+
+/**
+ * Options for the loader function that loads data for a page from the server
+ */
+export type LoaderOptions = {
+  params: { [key: string]: any };
+  request: Request;
+};
+
+/**
+ * Data returned from the loader function
+ */
+export type LoaderResponse = {
+  props?: { [key: string]: any };
+  redirect?: string
+};

package/src/decorators/index.ts

@@ -0,0 +1,2 @@
+export { Router } from "./router.js";
+export { Route } from "./route.js";

package/src/decorators/route.ts

@@ -0,0 +1,32 @@
+// Router Decorators
+
+import { RouteDecoratorProps } from "./types.js";
+
+/**
+ * Decorator that add metadata for a page.
+ * @param props Object that define the necessary elements to create a router
+ * @returns
+ */
+export function Route(props: RouteDecoratorProps) {
+  return function (constructor: Function) {
+    // Handle errors
+    if (!props.path)
+      throw new Error("You must provide a path in the route decorator");
+
+    // Add values to properties
+
+    // Define path of the page
+    constructor.prototype._path = props.path;
+
+    // Define title of the page
+    constructor.prototype._title =
+      props.title ||
+      constructor.name.charAt(0).toUpperCase() + constructor.name.slice(1);
+
+    // Define description of the page
+    constructor.prototype._description = props.description || "";
+
+    Object.seal(constructor);
+    Object.seal(constructor.prototype);
+  };
+}

package/src/decorators/router.ts

@@ -0,0 +1,30 @@
+// Router Decorators
+
+import { DefaultLayout } from "../core/interfaces.js";
+import { RouterDecoratorProps } from "./types.js";
+
+/**
+ * Decorator that define a new router.
+ * @param props Object that define the necessary elements to create a router
+ * @returns 
+ */
+export function Router(props: RouterDecoratorProps) {
+  return function (constructor: Function) {
+    // Handle errors
+    if (!props.pages) throw new Error("You must provide a list of pages in the router decorator");
+
+    // Add values to properties
+
+    // Define sub routers if provided or set and empty array
+    constructor.prototype["_routers"] = props.imports || [];
+
+    // Define layout if provided or set a default one.
+    constructor.prototype["_layout"] = props.layout || DefaultLayout;
+
+    // Define pages
+    constructor.prototype["_pages"] = props.pages;
+
+    Object.seal(constructor);
+    Object.seal(constructor.prototype);
+  };
+}

package/src/decorators/types.ts

@@ -0,0 +1,54 @@
+import { LayoutComponent, PageComponent } from "../core/interfaces.js";
+import { RouterComponent } from "../routing/interfaces.js";
+
+/**
+ * Props for Router Decorators
+ */
+export type RouterDecoratorProps = {
+  /**
+   * Usefull to collect sub routers
+   */
+  imports?: Array<RouterComponent>;
+
+  /**
+   * Usefull to define a layout
+   */
+  layout?: LayoutComponent;
+
+  /**
+   * Usefull to collect pages
+   */
+  pages: Array<PageComponent>;
+
+  /**
+   * Usefull to display a screen that let know to the user that the page is loading.
+   */
+  loaderComponent?: React.FC;
+
+  /**
+   * Usefull to display a screen that let know to the user that the page is not found.
+   */
+  notFoundComponent?: React.FC;
+};
+
+export type RouteDecoratorProps = RouteLayoutDecoratorProps & {
+  /**
+   * Title of the page
+   */
+  title?: string;
+
+  /**
+   * Description of the page
+   */
+  description?: string;
+};
+
+/**
+ * Props for Layout Decorators
+ */
+export type RouteLayoutDecoratorProps = {
+  /**
+   * base path of the layout
+   */
+  path: string;
+};

package/src/entries/entry-client.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+// @ts-ignore
+import App from "./../../../../src/main";
+// @ts-ignore
+// import AppRouter from "./../../../../src/pages/app.router";
+import { Component, ErrorBoundary } from "../core/components/index.js";
+// @ts-ignore
+import config from "./../../../../rasengan.config.js";
+
+import * as pkg from "react-helmet-async";
+
+// @ts-ignore
+const { HelmetProvider } = pkg.default || pkg;
+
+ReactDOM.hydrateRoot(
+  document.getElementById("root") as HTMLElement,
+  config.reactStrictMode ? (
+    <React.StrictMode>
+      <ErrorBoundary>
+        <HelmetProvider>
+          <App Component={Component} />
+        </HelmetProvider>
+      </ErrorBoundary>
+    </React.StrictMode>
+  ) : (
+    <ErrorBoundary>
+      <HelmetProvider>
+        <App Component={Component} />
+      </HelmetProvider>
+    </ErrorBoundary>
+  )
+);

package/src/entries/entry-server.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import ReactDOMServer from "react-dom/server";
+// @ts-ignore
+import AppRouter from "./../../../../src/pages/app.router";
+
+// @ts-ignore
+import {
+  generateStaticRoutes,
+} from "../routing/utils/index.js";
+import {
+  StaticHandlerContext,
+  StaticRouterProvider,
+} from "react-router-dom/server.js";
+import { Router } from "@remix-run/router";
+
+// @ts-ignore
+import config from "./../../../../rasengan.config.js";
+import { ErrorBoundary } from "../core/components";
+
+import * as pkg from "react-helmet-async";
+
+// @ts-ignore
+const { HelmetProvider } = pkg.default || pkg;
+
+export function render(
+  router: Router,
+  context: StaticHandlerContext,
+  helmetContext: any = {}
+) {
+  const html = ReactDOMServer.renderToString(
+    config.reactStrictMode ? (
+      <React.StrictMode>
+        <ErrorBoundary>
+          <HelmetProvider context={helmetContext}>
+            <StaticRouterProvider router={router} context={context} />
+          </HelmetProvider>
+        </ErrorBoundary>
+      </React.StrictMode>
+    ) : (
+      <ErrorBoundary>
+        <HelmetProvider context={helmetContext}>
+          <StaticRouterProvider router={router} context={context} />
+        </HelmetProvider>
+      </ErrorBoundary>
+    )
+  );
+  return { html };
+}
+
+export const staticRoutes = generateStaticRoutes(AppRouter);

package/src/index.ts

@@ -0,0 +1,11 @@
+// Imports
+import createFetchRequest from "./server/utils/createFetchRequest.js";
+
+// Exports
+export * from "./core/index.js";
+export * from "./routing/index.js";
+export * from "./decorators/index.js";
+export * from "./config/index.js";
+export { createFetchRequest }
+
+// export * as hooks from './hooks';

package/src/routing/components/index.tsx

@@ -0,0 +1,125 @@
+import { Suspense } from "react";
+import { Link, useLoaderData, useRouteError } from "react-router-dom";
+import { PageToRender } from "../../core/components/index.js";
+import { PageComponent } from "../../core/interfaces.js";
+import { LoaderResponse } from "../../core/types.js";
+import { NotFoundComponentContainerProps } from "../types.js";
+
+/**
+ * Error boundary component that will be displayed if an error occurs during a routing
+ * @returns
+ */
+export function ErrorBoundary() {
+  let error = useRouteError();
+
+  console.error(error);
+
+  return <div>Dang!</div>;
+}
+
+/**
+ * Component that will be displayed during a routing on the server side
+ * @returns React.ReactNode
+ */
+export const ServerComponent = ({
+  page,
+  loader,
+}: {
+  page: PageComponent;
+  loader: React.ReactNode;
+}) => {
+  // Default data
+  const data = {
+    props: {},
+  };
+
+  return (
+    <Suspense fallback={loader}>
+      <PageToRender page={page} data={data} />
+    </Suspense>
+  );
+};
+
+/**
+ * Component that will be displayed during a routing on the client side
+ * @returns React.ReactNode
+ */
+export const ClientComponent = ({
+  page,
+  loader,
+}: {
+  page: PageComponent;
+  loader: React.ReactNode;
+}) => {
+  // Default data
+  const defaultData = {
+    props: {},
+  };
+
+  const data = (useLoaderData() as LoaderResponse) || defaultData;
+
+  return (
+    <Suspense fallback={loader}>
+      <PageToRender page={page} data={data} />
+    </Suspense>
+  );
+};
+
+/**
+ * Component that will be displayed when a page is not found
+ * @returns React.ReactNode
+ */
+export const NotFoundPageComponent = () => {
+  return (
+    <section
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+        width: "100vw",
+      }}
+    >
+      <h1
+        style={{
+          fontSize: "3rem",
+          fontWeight: "bold",
+          marginBottom: 10,
+        }}
+      >
+        404 Page Not Found
+      </h1>
+
+      <p
+        style={{
+          fontSize: "1.2rem",
+          marginBottom: 20,
+        }}
+      >
+        The page you are looking for does not exist or has been moved.
+      </p>
+
+      <Link
+        to="/"
+        style={{
+          fontSize: "1.2rem",
+          fontWeight: 800,
+          marginBottom: 20,
+          textDecoration: "none",
+        }}
+      >
+        Go back to home page
+      </Link>
+    </section>
+  );
+};
+
+/**
+ * Component that will be displayed when a page is not found
+ */
+export const NotFoundComponentContainer = ({
+  content,
+}: NotFoundComponentContainerProps) => {
+  return <>{content({})}</>;
+};

package/src/routing/index.ts

@@ -0,0 +1,23 @@
+export {
+  defineRouteLayout,
+  defineRoutePage,
+  defineRouter,
+} from "./utils/index.js";
+export { RouterComponent } from "./interfaces.js";
+export {
+  Outlet,
+  Link,
+  useLocation,
+  useNavigate,
+  useParams,
+  useSearchParams,
+  useFetcher,
+  useMatch,
+  useRoutes,
+  useResolvedPath,
+  matchRoutes,
+  generatePath,
+  matchPath,
+  createRoutesFromChildren,
+  Navigate,
+} from "react-router-dom";

package/src/routing/interfaces.ts

@@ -0,0 +1,105 @@
+import { LayoutComponent, PageComponent } from "../core/interfaces.js";
+
+/**
+ * Router component that define a routing system
+ */
+export class RouterComponent {
+  /**
+   * Defines the layout applied to the Router
+   */
+  private _layout!: LayoutComponent;
+
+  /**
+   * Defines the list of sub routers
+   */
+  private _routers!: Array<RouterComponent>;
+
+  /**
+   * Defines the list of pages
+   */
+  private _pages!: Array<PageComponent>;
+
+  /**
+   * Defines the loader component to display when pages aren't available
+   */
+  private _loaderComponent!: React.FC;
+
+  /**
+   * Defines the not found component to display when pages aren't available
+   */
+  private _notFoundComponent!: React.FC;
+
+  // Getters
+
+  /**
+   * Get the layout value
+   */
+  get layout() {
+    return this._layout;
+  }
+
+  /**
+   * Get the list of routers
+   */
+  get routers() {
+    return this._routers;
+  }
+
+  /**
+   * Get the list of pages
+   */
+  get pages() {
+    return this._pages;
+  }
+
+  /**
+   * Get the loader component
+   */
+  get loaderComponent() {
+    return this._loaderComponent;
+  }
+
+  /**
+   * Get the not found component
+   */
+  get notFoundComponent() {
+    return this._notFoundComponent;
+  }
+
+  // Setters
+
+  /**
+   * Set the layout value
+   */
+  set layout(layout: LayoutComponent) {
+    this._layout = layout;
+  }
+
+  /**
+   * Set the list of routers
+   */
+  set routers(routers: Array<RouterComponent>) {
+    this._routers = routers;
+  }
+
+  /**
+   * Set the list of pages
+   */
+  set pages(pages: Array<PageComponent>) {
+    this._pages = pages;
+  }
+
+  /**
+   * Set the loader component
+   */
+  set loaderComponent(loaderComponent: React.FC) {
+    this._loaderComponent = loaderComponent;
+  }
+
+  /**
+   * Set the not found component
+   */
+  set notFoundComponent(notFoundComponent: React.FC) {
+    this._notFoundComponent = notFoundComponent;
+  }
+}

package/src/routing/types.ts

@@ -0,0 +1,3 @@
+export type NotFoundComponentContainerProps = {
+  content: React.FC;
+}