rasengan 1.0.0-beta.6 → 1.0.0-beta.60

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+## Unreleased
+
+## 1.0.0-beta.60 (2025-03-16)
+
+## 1.0.0-beta.59 (2025-03-16)
+
+## 1.0.0-beta.58 (2025-03-12)
+
+## 1.0.0-beta.57 (2025-03-04)
+
+## 1.0.0-beta.56 (2025-03-03)
+
+## 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)

package/README.md

@@ -0,0 +1,36 @@
+[![Rasengan Logo](https://www.beta.rasengan.dev/home.png)](https://rasengan.dev)
+
+[![npm version](https://badge.fury.io/js/rasengan.svg)](https://badge.fury.io/js/rasengan)
+[![npm downloads](https://img.shields.io/npm/dm/rasengan)](https://www.npmjs.com/package/rasengan)
+[![GitHub license](https://img.shields.io/github/license/rasengan-dev/rasenganjs)](https://github.com/rasengan-dev/rasenganjs/blob/main/LICENSE)
+
+## Getting Started
+
+Based on modern tools, Rasengan.js will help you to create **high-quality web applications** with the benefit of React Components. It's a simple and easy-to-use framework that will help you to create a **beautiful and responsive web application**.
+
+- Visit the [Rasengan.js Showcase](https://rasengan.dev/showcase) to see more sites built with Rasengan.js.
+- Visit the [Rasengan.js Blog](https://rasengan.dev/blog) to get all news related to Rasengan.js.
+
+## Documentation
+
+Visit [https://rasengan.dev/docs](https://rasengan.dev/docs) to view the full documentation.
+
+## Community
+
+The Rasengan.js community can be found on [GitHub Discussions](https://github.com/rasengan-dev/rasenganjs/discussions) where you can ask questions, voice ideas, and share your projects with other people.
+
+We also have a [Twitter](https://twitter.com/rasenganjs) account where you can follow us to get the latest news about Rasengan.js.
+
+## License
+
+Rasengan.js is [MIT licensed](https://github.com/rasengan-dev/rasenganjs/blob/main/LICENSE).
+
+## Contributing
+
+We are open to all contributions. If you want to contribute to Rasengan.js, please read the [Contributing Guide](https://github.com/rasengan-dev/rasenganjs/blob/main/CONTRIBUTING.md) to get started.
+
+## Authors
+
+Here are the authors of Rasengan.js, the people who are at the origin of this great framework:
+
+- Dilane Kombou ([**@dilanekombou**](https://twitter.com/dilanekombou))

package/bin.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+// Import `process` explicitly if needed (e.g., in certain runtime environments).
+import process from 'process';
+
+// If not already set, default `NODE_ENV=development`
+process.env.NODE_ENV = process.env.NODE_ENV ?? 'development';
+
+// Import and execute the CLI script
+import('./lib/esm/cli/index.js').catch((err) => {
+  console.error('Failed to start the Rasengan CLI:', err);
+  process.exit(1);
+});

package/lib/esm/cli/index.js

@@ -0,0 +1,40 @@
+import chalk from 'chalk';
+import { Command } from 'commander';
+import { execa } from 'execa';
+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 }) => {
+    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/lib/esm/server/dev/server'], {
+        stdio: 'inherit',
+        env: {
+            ...process.env,
+            PORT: convertedPort ? convertedPort.toString() : undefined,
+        },
+    });
+});
+// Handle the build command
+program
+    .command('build')
+    .description('Build the project')
+    .action(async () => {
+    execa('node', ['node_modules/rasengan/lib/esm/scripts/build-command'], {
+        stdio: 'inherit',
+    });
+});
+program.parse(process.argv);

package/lib/esm/client.js

@@ -0,0 +1,2 @@
+import renderApp from './entries/client/render.js';
+export { renderApp };

package/lib/esm/core/config/index.js

@@ -0,0 +1,3 @@
+import { defineConfig } from './utils/define-config.js';
+import { resolvePath } from './utils/path.js';
+export { defineConfig, resolvePath };

package/lib/esm/core/config/type.js

@@ -0,0 +1,6 @@
+export {};
+// export type ConfigOptions = {
+//   mode: 'development' | 'production' | 'test';
+//   command: 'serve' | 'build';
+//   isSsrBuild?: boolean;
+// };

package/lib/esm/core/config/utils/define-config.js

@@ -0,0 +1,80 @@
+/**
+ * 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 | AppConfigFunction | AppConfigFunctionAsync} loadedConfig
+ */
+export const defineConfig = async (loadedConfig) => {
+    return async () => {
+        let config;
+        // Check if the loadedConfig is a function
+        if (typeof loadedConfig === 'function') {
+            // Call the function to get the config
+            const result = loadedConfig();
+            // Check if it's a promise (asynchronous function)
+            if (result instanceof Promise) {
+                config = await result; // Await the promise result (AppConfigFunctionAsync)
+            }
+            else {
+                config = result; // Synchronous function result (AppConfigFunction)
+            }
+        }
+        else {
+            config = loadedConfig;
+        }
+        const { ssr, server, vite, redirects } = config;
+        // Define default values for vite config coming from loadedConfig.vite
+        const defaultViteConfig = {
+            ...vite,
+            resolve: {
+                symbole: vite?.resolve?.symbole || '@',
+                alias: vite?.resolve?.alias || [],
+            },
+        };
+        // Define default values for server config coming from loadedConfig.server
+        const defaultServerConfig = {
+            development: {
+                port: server?.development?.port || undefined,
+                open: server?.development?.open || false,
+            },
+        };
+        // Define default values for redirects config coming from loadedConfig.redirects
+        const defaultRedirectsConfig = redirects || (() => new Promise((resolve) => resolve([])));
+        try {
+            const config = {
+                ssr: ssr ?? true,
+                server: defaultServerConfig,
+                vite: {
+                    ...defaultViteConfig,
+                    resolve: {
+                        alias: [
+                            {
+                                find: defaultViteConfig.resolve.symbole,
+                                replacement: './src',
+                            },
+                            ...defaultViteConfig.resolve.alias,
+                        ],
+                    },
+                },
+                redirects: defaultRedirectsConfig,
+            };
+            return config;
+        }
+        catch (error) {
+            return {
+                ssr: true,
+                vite: {
+                    appType: 'custom',
+                    resolve: {
+                        alias: [
+                            {
+                                find: '@',
+                                replacement: './src',
+                            },
+                        ],
+                    },
+                },
+                redirects: () => new Promise((resolve) => resolve([])),
+            };
+        }
+    };
+};

package/lib/esm/core/config/utils/load-modules.js

@@ -0,0 +1,78 @@
+import { resolvePath } from './path.js';
+import fs from 'fs/promises';
+export const extensions = [
+    '.mjs',
+    '.js',
+    '.mts',
+    '.ts',
+    '.jsx',
+    '.tsx',
+    '.json',
+];
+/**
+ * Asynchronously loads a module from a file path only in the server-side environment.
+ *
+ * @param path - The path to the module.
+ * @returns The loaded module.
+ */
+export const loadModuleSSR = async (path) => {
+    try {
+        let modulePath = path;
+        // Check if the module path has an extension
+        const moduleExtension = path.split('.').pop(); // eg: js or ts
+        if (!moduleExtension || !extensions.includes(`.${moduleExtension}`)) {
+            const { path: newPath } = await findModulePath(path);
+            modulePath = newPath;
+        }
+        const module = await import(/* @vite-ignore */ resolvePath(modulePath));
+        return module;
+    }
+    catch (error) {
+        throw new Error(error);
+    }
+};
+/**
+ * Finds the module path with the right extension.
+ *
+ * @param path - The path to the module.
+ * @returns The module path and extension.
+ */
+export const findModulePath = async (path) => {
+    try {
+        let modulePath = path;
+        let rightExtension = '';
+        // Check if the module path has an extension
+        const moduleExtension = path.split('.').pop(); // eg: js or ts
+        if (!moduleExtension || !extensions.includes(`.${moduleExtension}`)) {
+            for (let ext of extensions) {
+                const newModulePath = `${modulePath}${ext}`;
+                try {
+                    await fs.access(newModulePath);
+                    modulePath = newModulePath;
+                    rightExtension = ext;
+                    break;
+                }
+                catch (error) {
+                    continue;
+                }
+            }
+            if (modulePath === path) {
+                throw new Error(`Module "${path}" not found`);
+            }
+        }
+        return {
+            path: modulePath,
+            extension: rightExtension,
+        };
+    }
+    catch (error) {
+        throw new Error(error);
+    }
+};
+export const getDirname = async (url) => {
+    // Load the dirname function from the path module
+    // and return the dirname of the file URL
+    const { dirname } = await import('node:path');
+    const { fileURLToPath } = await import('node:url');
+    return dirname(fileURLToPath(url));
+};

package/lib/esm/core/config/utils/path.js

@@ -0,0 +1,16 @@
+import path from 'node:path';
+/**
+ * Adapts the provided file path to a valid URL format based on the operating system.
+ *
+ * @param path - The file path to be adapted.
+ * @returns The adapted file path in a valid URL format.
+ */
+export const resolvePath = (pathValue) => {
+    // Check the OS
+    const isWindows = process.platform === 'win32';
+    // Adapt the path
+    if (isWindows) {
+        return `file:///${path.normalize(pathValue)}`;
+    }
+    return path.normalize(pathValue);
+};

package/lib/esm/core/config/vite/defaults.js

@@ -0,0 +1,93 @@
+// core/config/defaults.ts
+import { join } from 'node:path';
+// Define core external packages
+const CORE_EXTERNALS = [
+// '@rasenganjs/mdx',
+// '@rasenganjs/vercel',
+// '@rasenganjs/netlify',
+];
+export const createDefaultViteConfig = (rootPath, __dirname, mode, config) => {
+    // Combine core externals with user-defined externals
+    const externals = [
+        ...CORE_EXTERNALS,
+        ...(Array.isArray(config.vite?.build?.external)
+            ? config.vite.build.external
+            : []),
+    ];
+    return {
+        ...config.vite,
+        root: rootPath,
+        build: {
+            sourcemap: mode === 'development',
+            rollupOptions: {
+                external: externals,
+                input: './src/index',
+                output: {
+                    manualChunks(id) {
+                        if (id.includes('node_modules'))
+                            return 'vendor';
+                        if (id.includes('src/components'))
+                            return 'shared-components';
+                        if (config.ssr) {
+                            if (id.includes('src/app') && id.includes('.page.')) {
+                                const parts = id.split('src/app')[1]?.split('/');
+                                if (parts?.length) {
+                                    const pageName = parts.pop()?.split('.')[0];
+                                    return pageName ? `page-${pageName}` : undefined;
+                                }
+                            }
+                        }
+                        return undefined;
+                    },
+                },
+            },
+            outDir: 'dist',
+            chunkSizeWarningLimit: 1000,
+        },
+        environments: {
+            client: {
+                build: {
+                    manifest: true,
+                    outDir: 'dist/client',
+                    rollupOptions: {
+                        input: './src/index',
+                    },
+                },
+            },
+            ssr: {
+                build: {
+                    outDir: 'dist/server',
+                    rollupOptions: {
+                        input: {
+                            'entry.server': join(__dirname, './lib/esm/entries/server/entry.server.js'),
+                            'app.router': './src/app/app.router',
+                            main: './src/main',
+                            template: './src/template',
+                            config: './rasengan.config.js',
+                        },
+                    },
+                    ssrEmitAssets: false,
+                },
+            },
+        },
+        resolve: {
+            alias: Array.isArray(config.vite?.resolve?.alias)
+                ? config.vite.resolve.alias.map(({ find, replacement }) => ({
+                    find,
+                    replacement: join(rootPath, replacement),
+                }))
+                : [],
+        },
+        builder: {
+            buildApp: async (builder) => {
+                if (config.ssr) {
+                    await builder.build(builder.environments.ssr);
+                }
+                await builder.build(builder.environments.client);
+            },
+        },
+        cacheDir: '.rasengan/',
+        envPrefix: 'RASENGAN_',
+        appType: 'custom',
+    };
+};

package/lib/esm/core/dynamic/index.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
+/**
+ * It allows you to defer loading of Client Components,
+ * and only include them in the client bundle when they're needed
+ * @param load
+ * @param fallback
+ * @returns
+ */
+export function dynamicLoad(load, fallback = _jsx(_Fragment, {}) // Default pending UI element
+) {
+    try {
+        const LazyComponent = lazy(load);
+        // Return a functional component preserving the exact props type
+        const WrappedComponent = (props) => (_jsx(Suspense, { fallback: fallback, children: _jsx(LazyComponent, { ...props }) }));
+        return WrappedComponent;
+    }
+    catch (error) {
+        throw new Error(error);
+    }
+}

package/lib/esm/core/index.js

@@ -0,0 +1,2 @@
+// export { defineConfig, resolvePath } from "./config/index.js";
+export {};

package/lib/esm/core/middlewares/index.js

@@ -0,0 +1 @@
+export * from './logger.js';

package/lib/esm/core/middlewares/logger.js

@@ -0,0 +1,6 @@
+import { logGetRequest as log } from '../utils/log.js';
+export const loggerMiddleware = (req, _, next) => {
+    const url = req.originalUrl;
+    log(url);
+    next();
+};

package/lib/esm/core/plugins/index.js

@@ -0,0 +1,167 @@
+import path, { resolve } from 'path';
+import fs from 'fs';
+import { loadModuleSSR } from '../config/utils/load-modules.js';
+import { resolveBuildOptions } from '../../server.js';
+import { renderIndexHTML } from '../../server/build/rendering.js';
+function loadRasenganGlobal() {
+    return {
+        name: 'vite-plugin-rasengan-config',
+        async config(_, { command }) {
+            if (command !== 'build')
+                return;
+            const packageJsonPath = resolve(process.cwd(), 'package.json');
+            if (!fs.existsSync(packageJsonPath)) {
+                throw new Error(`Package.json file not found at: ${packageJsonPath}`);
+            }
+            const packageJsonRaw = fs.readFileSync(packageJsonPath, {
+                encoding: 'utf-8',
+            });
+            const packageJson = JSON.parse(packageJsonRaw);
+            const rasenganConfig = {
+                version: packageJson.version,
+                ssr: true,
+            };
+            // Inject the configuration as a global constant
+            return {
+                define: {
+                    ['Rasengan']: JSON.stringify(rasenganConfig),
+                },
+            };
+        },
+        apply: 'build',
+    };
+}
+function rasenganConfigPlugin() {
+    const virtualModuleId = 'virtual:rasengan-config';
+    const resolvedVirtualModuleId = '\0' + virtualModuleId;
+    return {
+        name: 'vite-plugin-rasengan-config',
+        resolveId(id) {
+            if (id === virtualModuleId) {
+                return resolvedVirtualModuleId;
+            }
+        },
+        async load(id) {
+            if (id === resolvedVirtualModuleId) {
+                // if (command !== "build") return;
+                const configPath = resolve(process.cwd(), 'rasengan.config.js');
+                if (!fs.existsSync(configPath)) {
+                    throw new Error(`Configuration file not found at: ${configPath}`);
+                }
+                const rasenganConfig = await (await loadModuleSSR(configPath)).default;
+                const partialConfig = {
+                    server: rasenganConfig.server ?? {},
+                    redirects: rasenganConfig.redirects
+                        ? await rasenganConfig.redirects()
+                        : [],
+                };
+                return `
+          export const __RASENGAN_CONFIG__ = ${JSON.stringify(partialConfig)};
+        `;
+            }
+        },
+    };
+}
+function buildOutputInformation() {
+    const virtualModuleId = 'virtual:rasengan-build-info';
+    const resolvedVirtualModuleId = '\0' + virtualModuleId;
+    return {
+        name: 'vite-plugin-rasengan-build-info',
+        resolveId(id) {
+            if (id === virtualModuleId) {
+                return resolvedVirtualModuleId;
+            }
+        },
+        async load(id) {
+            if (id === resolvedVirtualModuleId) {
+                return `
+          export const resolveBuildOptions = (buildPath) => {
+            return {
+              buildDirectory: buildPath,
+              manifestPathDirectory: 'client/.vite',
+              assetPathDirectory: 'client/assets',
+              entryServerPath: 'server/entry.server.js',
+            };
+          };
+        `;
+            }
+        },
+    };
+}
+export const Adapters = {
+    VERCEL: 'vercel',
+    DEFAULT: '',
+};
+export function rasengan({ adapter = { name: Adapters.DEFAULT, prepare: async () => { } }, }) {
+    let config;
+    let viteConfig;
+    const templateFileRegex = /template\.(tsx|jsx)$/;
+    const buildOptions = resolveBuildOptions({});
+    return {
+        name: 'vite-plugin-rasengan',
+        async config() {
+            // load rasengan.config.js
+            const configPath = resolve(process.cwd(), 'rasengan.config.js');
+            if (!fs.existsSync(configPath)) {
+                throw new Error(`Configuration file not found at: ${configPath}`);
+            }
+            const rasenganConfigHandler = await (await loadModuleSSR(configPath)).default;
+            config = await rasenganConfigHandler();
+        },
+        async load(id) {
+            if (id === 'virtual:rasengan-config') {
+                return `
+          export const __RASENGAN_CONFIG__ = ${JSON.stringify(config)};
+        `;
+            }
+        },
+        configResolved(resolvedConfig) {
+            viteConfig = resolvedConfig;
+        },
+        async writeBundle(_) {
+            const modulePaths = ['template.jsx', 'template.tsx'].map((file) => {
+                return path.posix.join(process.cwd(), 'src', file);
+            });
+            const modulePath = modulePaths.find((modulePath) => {
+                return fs.existsSync(modulePath);
+            });
+            const module = await this.load({ id: modulePath });
+            // Generate the template.js file into the dist/assets
+            fs.writeFileSync(path.posix.join(process.cwd(), buildOptions.buildDirectory, buildOptions.clientPathDirectory, buildOptions.assetPathDirectory, 'template.js'), module.code, 'utf-8');
+        },
+        async closeBundle() {
+            // We check here if the environment is client has been built because it's the
+            // last environment to be built in the Vite build process
+            if (this.environment.name === 'client') {
+                // Check if SPA mode is enabled
+                if (!config.ssr) {
+                    // Load the template.js file
+                    const templatePath = path.posix.join(process.cwd(), buildOptions.buildDirectory, buildOptions.clientPathDirectory, buildOptions.assetPathDirectory, 'template.js');
+                    const Template = (await import(templatePath)).default;
+                    // Render the index.html file
+                    await renderIndexHTML(Template, {
+                        rootPath: process.cwd(),
+                        config,
+                    });
+                }
+                // Generate a config.json file into the dist/client/assets
+                fs.writeFileSync(path.posix.join(process.cwd(), buildOptions.buildDirectory, buildOptions.clientPathDirectory, buildOptions.assetPathDirectory, 'config.json'), JSON.stringify({
+                    buildOptions,
+                    ssr: config.ssr,
+                }), 'utf-8');
+                // Preparing app for deployment
+                switch (adapter.name) {
+                    case Adapters.VERCEL: {
+                        console.log('Preparing app for deployment to Vercel');
+                        await adapter.prepare();
+                        break;
+                    }
+                    default:
+                        break;
+                }
+            }
+        },
+        apply: 'build',
+    };
+}
+export const plugins = [loadRasenganGlobal()];

package/lib/esm/core/utils/log.js

@@ -0,0 +1,9 @@
+import chalk from 'chalk';
+export const logRedirection = (source, destination) => {
+    const time = new Date().toLocaleTimeString();
+    console.log(`${chalk.grey(time)} ${chalk.blue('[Rasengan]')} ${chalk.green('REDIRECT')}: ${chalk.grey(source)} ${chalk.green('->')} ${chalk.grey(destination)}`);
+};
+export const logGetRequest = (url) => {
+    const time = new Date().toLocaleTimeString();
+    console.log(`${chalk.grey(time)} ${chalk.blue('[Rasengan]')} ${chalk.green('GET')}: ${chalk.grey(url)}`);
+};

package/lib/esm/entries/client/render.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { hydrateRoot, createRoot } from 'react-dom/client';
+import { StrictMode } from 'react';
+import { RootComponent } from '../../routing/components/template.js';
+const isSpaMode = window.__RASENGAN_SPA_MODE__;
+export default function renderApp(App, options) {
+    const root = document.getElementById('root');
+    if (!root) {
+        throw new Error('Root element not found');
+    }
+    // If SPA mode, render the app
+    if (isSpaMode) {
+        if (options.reactStrictMode) {
+            createRoot(root).render(_jsx(StrictMode, { children: _jsx(App, { Component: RootComponent }) }));
+        }
+        else {
+            createRoot(root).render(_jsx(App, { Component: RootComponent }));
+        }
+        return;
+    }
+    // Handling hydration
+    if (options.reactStrictMode) {
+        hydrateRoot(root, _jsx(StrictMode, { children: _jsx(App, { Component: RootComponent }) }));
+    }
+    else {
+        hydrateRoot(root, _jsx(App, { Component: RootComponent }));
+    }
+}

package/lib/esm/entries/server/entry.server.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { loadModuleSSR } from '../../core/config/utils/load-modules.js';
+import { TemplateLayout } from './index.js';
+import { join, posix } from 'path/posix';
+import { renderToStream } from '../../server/node/rendering.js';
+/**
+ * Render the app to a stream
+ * @param StaticRouterComponent
+ * @param helmetContext
+ * @param res
+ * @returns
+ */
+export const render = async (StaticRouterComponent, res, options) => {
+    const { metadata, assets, buildOptions } = options;
+    // Root path
+    const rootPath = process.cwd();
+    let App;
+    let Template;
+    if (buildOptions) {
+        App = (await loadModuleSSR(posix.join(buildOptions.buildDirectory, buildOptions.serverPathDirectory, 'main.js'))).default;
+        Template = (await loadModuleSSR(join(buildOptions.buildDirectory, buildOptions.serverPathDirectory, 'template.js'))).default;
+    }
+    else {
+        // Import Main App Component
+        App = (await loadModuleSSR(`${rootPath}/src/main`)).default;
+        // Import Template
+        Template = (await loadModuleSSR(`${rootPath}/src/template`)).default;
+    }
+    await renderToStream(_jsx(TemplateLayout, { StaticRouterComponent: StaticRouterComponent, metadata: metadata, assets: assets, App: App, Template: Template }), res);
+};