rasengan 1.0.0-beta.5 → 1.0.0-beta.7

package/lib/cli/index.js

@@ -37,7 +37,6 @@ 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
@@ -45,12 +44,12 @@ program
 });
 // Handle the prebuild command
 program
-    .command("prebuild")
-    .description("Prebuild the project")
+    .command("prepare")
+    .description("Prepare the project")
     .action(() => {
     // Displaying the message
     console.log("");
-    console.log(chalk.blue("Prebuilding your project..."));
+    console.log(chalk.blue("Preparing your project for production..."));
     console.log("");
     // Checking the config file in order to know about hosting strategy
     const { server } = config;

package/lib/config/index.d.ts

@@ -9,7 +9,7 @@ export declare const defineConfig: (loadedConfig: AppConfig) => {
     server: {
         development: {
             port: number;
-            open: true;
+            open: boolean;
         };
         production: {
             hosting: import("./type.js").HostingStrategy;

package/lib/config/index.js

@@ -25,7 +25,7 @@ export const defineConfig = (loadedConfig) => {
     const defaultServerConfig = {
         development: {
             port: server?.development?.port || undefined,
-            open: server?.development?.open || true,
+            open: server?.development?.open || false,
         },
         production: {
             hosting: server?.production?.hosting || "custom",

package/lib/config/type.d.ts

@@ -14,11 +14,12 @@ export type AppConfig = {
         development?: {
             /**
              * Port to listen on
-             * @default 3000
+             * @default 5320
              */
             port?: number;
             /**
              * Automatically open browser
+             * @default false
              */
             open?: boolean;
         };

package/lib/core/components/index.d.ts

@@ -3,7 +3,7 @@ import { ComponentProps, PageToRenderProps } from "../types.js";
 /**
  * App component that represent the entry point of the application
  */
-export declare const Component: ({ router: AppRouter }: ComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Component: ({ router: AppRouter, children, }: ComponentProps) => string | number | true | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
 /**
  * Page component that defines title and description to a page
  */

package/lib/core/components/index.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { getRouter } from "../../routing/utils/index.js";
+import { generateMetadata, getRouter } from "../../routing/utils/index.js";
 import * as pkg from "react-helmet-async";
 // @ts-ignore
 const { Helmet } = pkg.default || pkg;
 /**
  * App component that represent the entry point of the application
  */
-export const Component = ({ router: AppRouter }) => {
+export const Component = ({ router: AppRouter, children = undefined, }) => {
+    // Return children if they exist
+    if (children)
+        return children;
+    // Otherwise, get the router and return it
     const Router = getRouter(AppRouter);
     return _jsx(Router, {});
 };
@@ -19,7 +23,11 @@ export const PageToRender = ({ page, data }) => {
     const Page = page.render;
     // Get the page props
     const props = data.props || {};
-    return (_jsxs(React.Fragment, { children: [_jsxs(Helmet, { children: [_jsx("title", { children: page.title }), _jsx("meta", { name: "description", content: page.description })] }), _jsx(Page, { ...props })] }));
+    // Generate meta tags
+    const metaTags = React.useMemo(() => {
+        return generateMetadata(page.metadata);
+    }, []);
+    return (_jsxs(React.Fragment, { children: [_jsxs(Helmet, { children: [metaTags.map((meta) => meta), _jsx("meta", { name: "description", content: page.description }), _jsx("title", { children: page.title })] }), _jsx(Page, { ...props })] }));
 };
 /**
  * Error fallback component that will be displayed if an error occurs

package/lib/core/interfaces.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { LoaderOptions, LoaderResponse, ReactComponentProps } from "./types.js";
+import { Metadata } from "../routing/types.js";
 /**
  * Layout component interface that defines the base structure of a Layout and a Page too.
  */
@@ -18,6 +19,10 @@ export declare abstract class LayoutComponent implements ILayoutComponent {
      * Page path
      */
     protected _path: string;
+    /**
+     * Metadata
+     */
+    protected _metadata: Metadata[];
     /**
      * Render method which is a React component
      * @param props - props for the component
@@ -27,10 +32,28 @@ export declare abstract class LayoutComponent implements ILayoutComponent {
      * Get page path
      */
     get path(): string;
+    /**
+     * Get metadata
+     */
+    get metadata(): Metadata[];
     /**
      * Set page path
      */
     set path(path: string);
+    /**
+     * Set metadata
+     */
+    set metadata(metadata: Metadata[]);
+    /**
+     * Add metadata
+     */
+    addMetadata(metadata: Metadata[]): void;
+    /**
+     * 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>
+     */
+    loader(_options: LoaderOptions): Promise<LoaderResponse>;
 }
 /**
  * Default Layout
@@ -67,10 +90,4 @@ export declare abstract class PageComponent extends LayoutComponent {
      * Set page description
      */
     set description(description: string);
-    /**
-     * 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>
-     */
-    loader(_options: LoaderOptions): Promise<LoaderResponse>;
 }

package/lib/core/interfaces.js

@@ -10,6 +10,10 @@ export class LayoutComponent {
      * Page path
      */
     _path;
+    /**
+     * Metadata
+     */
+    _metadata;
     // Getters
     /**
      * Get page path
@@ -17,6 +21,12 @@ export class LayoutComponent {
     get path() {
         return this._path;
     }
+    /**
+     * Get metadata
+     */
+    get metadata() {
+        return this._metadata;
+    }
     // Setters
     /**
      * Set page path
@@ -24,6 +34,32 @@ export class LayoutComponent {
     set path(path) {
         this._path = path;
     }
+    /**
+     * Set metadata
+     */
+    set metadata(metadata) {
+        this._metadata = metadata;
+    }
+    /**
+     * Add metadata
+     */
+    addMetadata(metadata) {
+        metadata.forEach(meta => {
+            this._metadata.unshift(meta);
+        });
+    }
+    /**
+     * 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) {
+        return new Promise((resolve) => {
+            resolve({
+                props: {},
+            });
+        });
+    }
 }
 /**
  * Default Layout
@@ -75,16 +111,4 @@ export class PageComponent extends LayoutComponent {
     set description(description) {
         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) {
-        return new Promise((resolve) => {
-            resolve({
-                props: {},
-            });
-        });
-    }
 }

package/lib/core/types.d.ts

@@ -5,15 +5,15 @@ import { PageComponent } from "./interfaces.js";
  * Props for App component
  */
 export type AppProps = {
-    Component: React.FC<{
-        router: any;
-    }>;
+    Component: React.FC<ComponentProps>;
+    children: React.ReactNode;
 };
 /**
  * Props for the base Component that takes the app router
  */
 export type ComponentProps = {
     router: RouterComponent;
+    children: React.ReactNode;
 };
 export type PageToRenderProps = {
     page: PageComponent;

package/lib/decorators/route.d.ts

@@ -1,7 +1,8 @@
+import { PageComponent } from "../core/interfaces.js";
 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 declare function Route(props: RouteDecoratorProps): (constructor: Function) => void;
+export declare function Route(props: RouteDecoratorProps): (Component: new () => PageComponent) => void;

package/lib/decorators/route.js

@@ -5,20 +5,16 @@
  * @returns
  */
 export function Route(props) {
-    return function (constructor) {
+    return function (Component) {
         // 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);
+        // Set properties
+        Component.prototype._path = props.path;
+        Component.prototype._title = props.title || Component.name;
+        Component.prototype._description = props.description || "";
+        // Seal the class
+        Object.seal(Component);
+        Object.seal(Component.prototype);
     };
 }

package/lib/decorators/router.d.ts

@@ -1,7 +1,8 @@
+import { RouterComponent } from "../routing/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 declare function Router(props: RouterDecoratorProps): (constructor: Function) => void;
+export declare function Router(option: RouterDecoratorProps): (Component: new () => RouterComponent) => void;

package/lib/decorators/router.js

@@ -1,23 +1,34 @@
 // Router Decorators
 import { DefaultLayout } from "../core/interfaces.js";
+import { NotFoundPageComponent } from "../routing/components/index.js";
 /**
  * Decorator that define a new router.
  * @param props Object that define the necessary elements to create a router
  * @returns
  */
-export function Router(props) {
-    return function (constructor) {
+export function Router(option) {
+    const { imports, layout, pages, loaderComponent, notFoundComponent } = option;
+    return (Component) => {
         // Handle errors
-        if (!props.pages)
+        if (!option.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);
+        // Set properties
+        Component.prototype._routers = imports || [];
+        Component.prototype._layout = layout || new DefaultLayout();
+        Component.prototype._pages = pages;
+        Component.prototype._loaderComponent = loaderComponent || (() => null);
+        Component.prototype._notFoundComponent = notFoundComponent || NotFoundPageComponent;
+        // Seal the class
+        Object.seal(Component);
+        Object.seal(Component.prototype);
+        //   // 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/lib/decorators/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { Metadata } from "../routing/types.js";
 import { LayoutComponent, PageComponent } from "../core/interfaces.js";
 import { RouterComponent } from "../routing/interfaces.js";
 /**
@@ -44,4 +45,8 @@ export type RouteLayoutDecoratorProps = {
      * base path of the layout
      */
     path: string;
+    /**
+     * Metadata
+     */
+    metadata?: Metadata[];
 };

package/lib/entries/entry-server.js

@@ -4,16 +4,18 @@ 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 App from "./../../../../src/main";
+// @ts-ignore
+import { generateStaticRoutes } from "../routing/utils/index.js";
 import { StaticRouterProvider, } from "react-router-dom/server.js";
 // @ts-ignore
 import config from "./../../../../rasengan.config.js";
-import { ErrorBoundary } from "../core/components";
+import { Component, ErrorBoundary } from "../core/components";
 import * as pkg from "react-helmet-async";
 // @ts-ignore
 const { HelmetProvider } = pkg.default || pkg;
 export function render(router, context, helmetContext = {}) {
-    const html = ReactDOMServer.renderToString(config.reactStrictMode ? (_jsx(React.StrictMode, { children: _jsx(ErrorBoundary, { children: _jsx(HelmetProvider, { context: helmetContext, children: _jsx(StaticRouterProvider, { router: router, context: context }) }) }) })) : (_jsx(ErrorBoundary, { children: _jsx(HelmetProvider, { context: helmetContext, children: _jsx(StaticRouterProvider, { router: router, context: context }) }) })));
+    const html = ReactDOMServer.renderToString(config.reactStrictMode ? (_jsx(React.StrictMode, { children: _jsx(ErrorBoundary, { children: _jsx(HelmetProvider, { context: helmetContext, children: _jsx(App, { Component: Component, children: _jsx(StaticRouterProvider, { router: router, context: context }) }) }) }) })) : (_jsx(ErrorBoundary, { children: _jsx(HelmetProvider, { context: helmetContext, children: _jsx(App, { Component: Component, children: _jsx(StaticRouterProvider, { router: router, context: context }) }) }) })));
     return { html };
 }
 export const staticRoutes = generateStaticRoutes(AppRouter);

package/lib/routing/components/index.d.ts

@@ -30,3 +30,9 @@ export declare const NotFoundPageComponent: () => import("react/jsx-runtime").JS
  * Component that will be displayed when a page is not found
  */
 export declare const NotFoundComponentContainer: ({ content, }: NotFoundComponentContainerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Custom Link Component
+ * @param props
+ * @returns React.ReactNode
+ */
+export declare const CustomLink: (props: any) => import("react/jsx-runtime").JSX.Element;

package/lib/routing/components/index.js

@@ -66,3 +66,16 @@ export const NotFoundPageComponent = () => {
 export const NotFoundComponentContainer = ({ content, }) => {
     return _jsx(_Fragment, { children: content({}) });
 };
+/**
+ * Custom Link Component
+ * @param props
+ * @returns React.ReactNode
+ */
+export const CustomLink = (props) => {
+    const { to, children, ...rest } = props;
+    const splitted = to.split("#");
+    if (splitted.length > 1) {
+        return _jsx("a", { href: to, ...rest, children: children });
+    }
+    return _jsx(Link, { to: to, ...rest, children: children });
+};

package/lib/routing/index.d.ts

@@ -1,3 +1,6 @@
+import { CustomLink } from "./components/index.js";
+export type { Metadata } from "./types.js";
 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";
+export { Outlet, useLocation, useNavigate, useParams, useSearchParams, useFetcher, useMatch, useRoutes, useResolvedPath, matchRoutes, generatePath, matchPath, createRoutesFromChildren, Navigate, } from "react-router-dom";
+export { CustomLink as Link };

package/lib/routing/index.js

@@ -1,3 +1,5 @@
+import { CustomLink } from "./components/index.js";
 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";
+export { Outlet, useLocation, useNavigate, useParams, useSearchParams, useFetcher, useMatch, useRoutes, useResolvedPath, matchRoutes, generatePath, matchPath, createRoutesFromChildren, Navigate, } from "react-router-dom";
+export { CustomLink as Link };

package/lib/routing/types.d.ts

@@ -2,3 +2,15 @@
 export type NotFoundComponentContainerProps = {
     content: React.FC;
 };
+export type MetadataLink = {
+    rel: string;
+    type?: string;
+    sizes?: string;
+    href: string;
+};
+export type MetadataTag = {
+    name?: string;
+    property?: string;
+    content: string;
+};
+export type Metadata = MetadataTag | MetadataLink;

package/lib/routing/utils/index.d.ts

@@ -1,6 +1,7 @@
 import { RouterComponent } from "../interfaces.js";
 import { RouteDecoratorProps, RouteLayoutDecoratorProps, RouterDecoratorProps } from "../../decorators/types.js";
 import { LayoutComponent, PageComponent } from "../../index.js";
+import { Metadata } from "../types.js";
 /**
  * This function receives a router component and get a formated router first
  * and then return a router.
@@ -12,14 +13,6 @@ export declare const getRouter: (router: RouterComponent) => () => import("react
  * @returns
  */
 export declare const generateStaticRoutes: (router: RouterComponent, isRoot?: boolean) => any;
-/**
- * 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 declare const extractPageMetadata: (router: RouterComponent) => Map<string, {
-    title: string;
-    description: string;
-}>;
 /**
  * This function adds metadata to a page or a layout
  * @param option
@@ -38,3 +31,8 @@ export declare const defineRouteLayout: (option: RouteLayoutDecoratorProps) => (
  * @returns
  */
 export declare const defineRouter: (option: RouterDecoratorProps) => (Component: new () => RouterComponent) => RouterComponent;
+/**
+ * This function generates metadata useful for pages to show images when sharing on social media
+ * @param {Metadata[]} metadatas
+ */
+export declare const generateMetadata: (metadatas: Metadata[]) => import("react/jsx-runtime").JSX.Element[];

package/lib/routing/utils/index.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
-import { DefaultLayout } from "../../index.js";
+import { RouterProvider, createBrowserRouter, useLoaderData, } from "react-router-dom";
+import { DefaultLayout, } from "../../index.js";
 import { ClientComponent, NotFoundComponentContainer, NotFoundPageComponent, ServerComponent, } from "../components/index.js";
 import { ErrorBoundary } from "../../core/components/index.js";
 /**
@@ -24,7 +24,14 @@ const generateBrowserRoutes = (router, isRoot = true) => {
     const route = {
         path: layout.path,
         elementError: _jsx(ErrorBoundary, {}),
-        element: _jsx(LayoutToRender, {}),
+        Component() {
+            // Default data
+            const defaultData = {
+                props: {},
+            };
+            const { props } = useLoaderData() || defaultData;
+            return _jsx(LayoutToRender, { ...props });
+        },
         children: [],
     };
     // Defining the page not found route
@@ -38,24 +45,10 @@ const generateBrowserRoutes = (router, isRoot = true) => {
     const pages = router.pages.map((page) => {
         // Get the path of the page
         const path = page.path === "/" ? layout.path : page.path;
+        // Add metadata to the page
+        page.addMetadata(layout.metadata);
         return {
             path,
-            loader: async ({ params, request }) => {
-                // 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: (_jsx(ClientComponent, { page: page, loader: router.loaderComponent({}) })),
             elementError: _jsx(ErrorBoundary, {}),
         };
@@ -95,7 +88,32 @@ export const generateStaticRoutes = (router, isRoot = true) => {
     const route = {
         path: layout.path,
         elementError: _jsx(ErrorBoundary, {}),
-        element: _jsx(LayoutToRender, {}),
+        Component() {
+            return _jsx(LayoutToRender, {});
+        },
+        loader: async ({ params, request }) => {
+            try {
+                // Get the response from the loader
+                const response = await layout.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;
+            }
+            catch (error) {
+                return {
+                    props: {},
+                };
+            }
+        },
         children: [],
     };
     // Defining the page not found route
@@ -109,23 +127,32 @@ export const generateStaticRoutes = (router, isRoot = true) => {
     const pages = router.pages.map((page) => {
         // Get the path of the page
         const path = page.path === "/" ? layout.path : page.path;
+        // Add metadata to the page
+        page.addMetadata(layout.metadata);
         return {
             path,
             async loader({ params, request }) {
-                // 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,
-                        },
-                    });
+                try {
+                    // 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;
+                }
+                catch (error) {
+                    return {
+                        props: {},
+                    };
                 }
-                return response;
             },
             Component() {
                 return (_jsx(ServerComponent, { page: page, loader: router.loaderComponent({}) }));
@@ -154,54 +181,13 @@ export const generateStaticRoutes = (router, isRoot = true) => {
     // 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) => {
-    // Initialisation of the Map of metadata
-    const metadatas = new Map();
-    // 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) => {
-    const { path, title, description } = option;
+    const { path, title, description, metadata } = option;
     return (Component) => {
         if (!path)
             throw new Error("You must provide a path to the page");
@@ -211,6 +197,7 @@ export const defineRoutePage = (option) => {
         component.path = path;
         component.title = title || Component.name;
         component.description = description || "";
+        component.metadata = metadata || [];
         return component;
     };
 };
@@ -220,7 +207,7 @@ export const defineRoutePage = (option) => {
  * @returns
  */
 export const defineRouteLayout = (option) => {
-    const { path } = option;
+    const { path, metadata } = option;
     return (Component) => {
         if (!path)
             throw new Error("You must provide a path to the layout");
@@ -228,6 +215,7 @@ export const defineRouteLayout = (option) => {
         const component = new Component();
         // Set properties
         component.path = path;
+        component.metadata = metadata || [];
         return component;
     };
 };
@@ -253,3 +241,20 @@ export const defineRouter = (option) => {
         return router;
     };
 };
+/**
+ * This function generates metadata useful for pages to show images when sharing on social media
+ * @param {Metadata[]} metadatas
+ */
+export const generateMetadata = (metadatas) => {
+    return metadatas.map((metadata) => {
+        const { rel, sizes, type, href } = metadata;
+        const { content, name, property } = metadata;
+        if (rel && href) {
+            return (_jsx("link", { rel: rel, sizes: sizes, type: type, href: href }, rel));
+        }
+        if (property) {
+            return (_jsx("meta", { property: property, content: content }, property));
+        }
+        return (_jsx("meta", { name: name, content: content }, name));
+    });
+};

package/lib/server/functions/vercel/vercel.json

@@ -4,6 +4,10 @@
             "src": "/assets/(.*)",
             "dest": "client/assets/$1"
         },
+        {
+            "src": "/(.+\\.(png|ico|svg|jpg|jpeg|gif))",
+            "dest": "client/$1"
+        },
         {
             "src": "/(.*)",
             "dest": "api/index.js"

package/lib/server/utils/log.d.ts

@@ -2,5 +2,6 @@
  * Log server info after the server is started
  * @param {number} port The port the server is running on
  * @param {boolean} isProduction Whether the server is running in production mode
+ * @param {boolean} open Whether to open the browser automatically
  */
-export declare function logServerInfo(port: number, isProduction: boolean): Promise<void>;
+export declare function logServerInfo(port: number, isProduction: boolean, open?: boolean): Promise<void>;

package/lib/server/utils/log.js

@@ -3,13 +3,15 @@ import ora from "ora";
 import fs from "fs/promises";
 // @ts-ignore
 import keypress from "keypress";
+import openBrowser from "open";
 import { getIP } from "./index.js";
 /**
  * Log server info after the server is started
  * @param {number} port The port the server is running on
  * @param {boolean} isProduction Whether the server is running in production mode
+ * @param {boolean} open Whether to open the browser automatically
  */
-export async function logServerInfo(port, isProduction) {
+export async function logServerInfo(port, isProduction, open = false) {
     // Constants
     const arrowRight = "\u2192";
     // Spinner
@@ -43,6 +45,10 @@ export async function logServerInfo(port, isProduction) {
     process.stdout.write(`${chalk.bold.green(arrowRight)} ${chalk.gray("Press")} ${chalk.bold("c")} ${chalk.gray("to clear")}\n`);
     process.stdout.write(`${chalk.bold.green(arrowRight)} ${chalk.gray("Press")} ${chalk.bold("ctrl + c")} ${chalk.gray("to close the server")}\n`);
     console.log("\n");
+    // Open the browser
+    if (open) {
+        openBrowser(`http://localhost:${port}`);
+    }
     // Enable keypress events on the process.stdin stream
     keypress(process.stdin);
     // Listen on user keyboard input on the terminal

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rasengan",
   "private": false,
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.7",
   "type": "module",
   "main": "lib/index.js",
   "bin": {
@@ -21,6 +21,9 @@
     "./types/image": {
       "types": "./types/image.d.ts"
     },
+    "./types/style": {
+      "types": "./types/style.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "author": {
@@ -59,6 +62,7 @@
     "inquirer": "^9.2.12",
     "keypress": "^0.2.1",
     "node-fetch": "^3.3.2",
+    "open": "^10.1.0",
     "ora": "^7.0.1",
     "react-helmet-async": "^2.0.4",
     "react-router-dom": "^6.20.1",

package/server.js

@@ -31,6 +31,7 @@ async function createServer({
   port,
   base = "/",
   enableSearchingPort = false,
+  open = false
 }) {
   // Get directory name
   const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -60,7 +61,7 @@ async function createServer({
       server: { middlewareMode: true },
       appType: "custom",
       base,
-      configFile: "node_modules/rasengan/vite.config.js"
+      configFile: "node_modules/rasengan/vite.config.js",
     });
     app.use(vite.middlewares);
   } else {
@@ -157,7 +158,7 @@ async function createServer({
   // Start http server
   const server = app.listen(port, () => {
     setTimeout(() => {
-      logServerInfo(port, isProduction);
+      logServerInfo(port, isProduction, open);
     }, 100);
   });
 
@@ -200,6 +201,7 @@ async function createServer({
           port: newPort,
           base,
           enableSearchingPort: true,
+          open
         });
       } else {
         console.log(chalk.blue(`Trying port ${newPort}... \n\n`));
@@ -209,6 +211,7 @@ async function createServer({
           port: newPort,
           base,
           enableSearchingPort,
+          open
         });
       }
     }
@@ -226,5 +229,10 @@ const base = process.env.BASE || "/";
 
 // Launch server
 (async function launchServer() {
-  await createServer({ isProduction, port, base });
+  await createServer({
+    isProduction,
+    port,
+    base,
+    open: config.server?.development?.open,
+  });
 })();

package/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
@@ -23,8 +24,12 @@
 
     /* Plugins */
     "plugins": [{ "name": "typescript-plugin-css-modules" }],
+
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
-  "include": ["src", "server.js", "types", "types"],
+  "include": ["src", "server.js", "types"],
 
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package/types/style.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}