arcanajs 2.4.0 → 2.5.0

package/package.json

@@ -5,7 +5,7 @@
     "email": "mohammed.bencheikh.dev@gmail.com",
     "url": "https://mohammedbencheikh.com/"
   },
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "ArcanaJS Framework",
   "main": "framework/lib/index.js",
   "types": "framework/lib/index.d.ts",

package/framework/cli/index.d.ts

@@ -1 +0,0 @@
-export {};

package/framework/cli/index.js

@@ -1,204 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const child_process_1 = require("child_process");
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
-const webpack_1 = __importDefault(require("webpack"));
-const templates_1 = require("./templates");
-const webpack_config_1 = require("./webpack.config");
-const args = process.argv.slice(2);
-const command = args[0];
-if (!command) {
-    console.error("Please specify a command: init, dev, build, start");
-    process.exit(1);
-}
-const runCompiler = (compiler) => {
-    return new Promise((resolve, reject) => {
-        compiler.run((err, stats) => {
-            if (err) {
-                console.error(err);
-                return reject(err);
-            }
-            if (stats && stats.hasErrors()) {
-                console.error(stats.toString({ colors: true }));
-                return reject(new Error("Webpack build failed"));
-            }
-            console.log(stats?.toString({ colors: true }));
-            resolve();
-        });
-    });
-};
-let serverProcess = null;
-const ws_1 = require("ws");
-const startDevServer = (hmrPort) => {
-    return new Promise((resolve) => {
-        if (serverProcess) {
-            serverProcess.kill();
-        }
-        const serverPath = path_1.default.resolve(process.cwd(), "dist/server.js");
-        serverProcess = (0, child_process_1.spawn)("node", [serverPath], {
-            stdio: ["inherit", "pipe", "inherit"],
-            env: { ...process.env, ARCANA_HMR_PORT: hmrPort.toString() },
-        });
-        serverProcess.stdout?.on("data", (data) => {
-            process.stdout.write(data);
-            if (data.toString().includes("Server is running")) {
-                resolve();
-            }
-        });
-        serverProcess.on("close", (code) => {
-            if (code !== 0 && code !== null) {
-                console.error(`Dev server exited with code ${code}`);
-            }
-        });
-    });
-};
-const watchCompiler = (compiler, onBuildComplete) => {
-    compiler.watch({}, (err, stats) => {
-        if (err) {
-            console.error(err);
-            return;
-        }
-        console.log(stats?.toString({ colors: true }));
-        if (stats && !stats.hasErrors() && onBuildComplete) {
-            onBuildComplete();
-        }
-    });
-};
-const build = async () => {
-    process.env.NODE_ENV = "production";
-    console.log("Building for production...");
-    const clientConfig = (0, webpack_config_1.createClientConfig)();
-    const serverConfig = (0, webpack_config_1.createServerConfig)();
-    try {
-        await runCompiler((0, webpack_1.default)(clientConfig));
-        await runCompiler((0, webpack_1.default)(serverConfig));
-        console.log("Build complete.");
-    }
-    catch (error) {
-        console.error("Build failed:", error);
-        process.exit(1);
-    }
-};
-const dev = async () => {
-    process.env.NODE_ENV = "development";
-    console.log("Starting development server...");
-    // Start HMR WebSocket Server
-    const HMR_PORT = 3001;
-    const wss = new ws_1.WebSocketServer({ port: HMR_PORT });
-    console.log(`HMR Server running on port ${HMR_PORT}`);
-    const broadcastReload = () => {
-        wss.clients.forEach((client) => {
-            if (client.readyState === 1) {
-                client.send(JSON.stringify({ type: "reload" }));
-            }
-        });
-    };
-    const clientConfig = (0, webpack_config_1.createClientConfig)();
-    const serverConfig = (0, webpack_config_1.createServerConfig)();
-    let isServerBuilding = false;
-    let pendingReload = false;
-    const serverCompiler = (0, webpack_1.default)(serverConfig);
-    serverCompiler.hooks.invalid.tap("ArcanaJS", () => {
-        isServerBuilding = true;
-    });
-    // Watch client
-    watchCompiler((0, webpack_1.default)(clientConfig), () => {
-        console.log("Client build complete.");
-        if (isServerBuilding) {
-            console.log("Server is building. Waiting to reload...");
-            pendingReload = true;
-        }
-        else {
-            console.log("Reloading browsers...");
-            broadcastReload();
-        }
-    });
-    // Watch server and restart on build
-    watchCompiler(serverCompiler, async () => {
-        console.log("Server build complete. Restarting server...");
-        await startDevServer(HMR_PORT);
-        isServerBuilding = false;
-        if (pendingReload) {
-            console.log("Pending reload found. Reloading browsers...");
-            broadcastReload();
-            pendingReload = false;
-        }
-    });
-};
-const init = () => {
-    console.log("Initializing ArcanaJS project with Tailwind CSS...");
-    const cwd = process.cwd();
-    const templatesDir = path_1.default.resolve(__dirname, "../templates");
-    // Create necessary directories
-    templates_1.requiredDirs.forEach((dir) => {
-        const fullPath = path_1.default.resolve(cwd, dir);
-        if (!fs_1.default.existsSync(fullPath)) {
-            fs_1.default.mkdirSync(fullPath, { recursive: true });
-            console.log(`Created directory: ${dir}`);
-        }
-    });
-    // Copy configuration files
-    templates_1.configFiles.forEach(({ src, dest }) => {
-        const srcPath = path_1.default.resolve(templatesDir, src);
-        const destPath = path_1.default.resolve(cwd, dest);
-        if (!fs_1.default.existsSync(destPath)) {
-            if (fs_1.default.existsSync(srcPath)) {
-                fs_1.default.copyFileSync(srcPath, destPath);
-                console.log(`Created: ${dest}`);
-            }
-            else {
-                console.warn(`Template not found: ${src}`);
-            }
-        }
-        else {
-            console.log(`Skipped: ${dest} (already exists)`);
-        }
-    });
-    // Create default error pages
-    templates_1.errorPages.forEach((page) => {
-        const viewPath = path_1.default.resolve(cwd, `src/views/${page}`);
-        const templatePath = path_1.default.resolve(templatesDir, page);
-        if (!fs_1.default.existsSync(viewPath) && fs_1.default.existsSync(templatePath)) {
-            fs_1.default.copyFileSync(templatePath, viewPath);
-            console.log(`Created: src/views/${page}`);
-        }
-    });
-    console.log("\n✅ ArcanaJS project initialized successfully!");
-    console.log("\nNext steps:");
-    console.log("1. Run 'npm install' to install dependencies");
-    console.log("2. Run 'npm run dev' to start development");
-    console.log("3. Visit http://localhost:3000 to see your app");
-    console.log("4. Edit src/views/HomePage.tsx to customize your homepage");
-    console.log("5. Customize your theme in src/client/globals.css");
-    console.log("6. Add your Tailwind classes and enjoy!");
-};
-const start = () => {
-    process.env.NODE_ENV = "production";
-    const serverPath = path_1.default.resolve(process.cwd(), "dist/server.js");
-    console.log(`Starting server at ${serverPath}...`);
-    const child = (0, child_process_1.spawn)("node", [serverPath], { stdio: "inherit" });
-    child.on("close", (code) => {
-        process.exit(code || 0);
-    });
-};
-switch (command) {
-    case "init":
-        init();
-        break;
-    case "build":
-        build();
-        break;
-    case "dev":
-        dev();
-        break;
-    case "start":
-        start();
-        break;
-    default:
-        console.error(`Unknown command: ${command}`);
-        process.exit(1);
-}

package/framework/cli/templates.d.ts

@@ -1,6 +0,0 @@
-export declare const configFiles: {
-    src: string;
-    dest: string;
-}[];
-export declare const errorPages: string[];
-export declare const requiredDirs: string[];

package/framework/cli/templates.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.requiredDirs = exports.errorPages = exports.configFiles = void 0;
-exports.configFiles = [
-    { src: "package.json", dest: "package.json" },
-    { src: "tsconfig.json", dest: "tsconfig.json" },
-    { src: "arcanajs.config.ts", dest: "arcanajs.config.ts" },
-    { src: "postcss.config.js", dest: "postcss.config.js" },
-    { src: "arcanajs.d.ts", dest: "src/arcanajs.d.ts" },
-    { src: "globals.css", dest: "src/client/globals.css" },
-    { src: "client-index.tsx", dest: "src/client/index.tsx" },
-    { src: "server-index.ts", dest: "src/server/index.ts" },
-    { src: "server-routes-web.ts", dest: "src/server/routes/web.ts" },
-    {
-        src: "server-controller-home.ts",
-        dest: "src/server/controllers/HomeController.ts",
-    },
-    {
-        src: "HomePage.tsx",
-        dest: "src/views/HomePage.tsx",
-    },
-    {
-        src: "arcanajs.png",
-        dest: "public/arcanajs.png",
-    },
-    {
-        src: "arcanajs.svg",
-        dest: "public/arcanajs.svg",
-    },
-    {
-        src: "favicon.ico",
-        dest: "public/favicon.ico",
-    },
-];
-exports.errorPages = ["NotFoundPage.tsx", "ErrorPage.tsx"];
-exports.requiredDirs = [
-    "public",
-    "src",
-    "src/client",
-    "src/server",
-    "src/server/routes",
-    "src/server/controllers",
-    "src/views",
-];

package/framework/cli/webpack.config.d.ts

@@ -1,3 +0,0 @@
-import webpack from "webpack";
-export declare const createClientConfig: () => webpack.Configuration;
-export declare const createServerConfig: () => webpack.Configuration;

package/framework/cli/webpack.config.js

@@ -1,310 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createServerConfig = exports.createClientConfig = void 0;
-const clean_webpack_plugin_1 = require("clean-webpack-plugin");
-const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
-const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
-const path_1 = __importDefault(require("path"));
-const webpack_node_externals_1 = __importDefault(require("webpack-node-externals"));
-const cwd = process.cwd();
-// Helper to resolve loaders from the framework's node_modules
-const resolveLoader = (loader) => require.resolve(loader);
-const fs_1 = __importDefault(require("fs"));
-// Helper to find entry file with supported extensions
-const findEntry = (searchPaths) => {
-    const extensions = [".ts", ".tsx", ".js", ".jsx"];
-    for (const basePath of searchPaths) {
-        for (const ext of extensions) {
-            const fullPath = path_1.default.resolve(cwd, basePath + ext);
-            if (fs_1.default.existsSync(fullPath)) {
-                return fullPath;
-            }
-            // Also check for index files in directories
-            const indexPath = path_1.default.resolve(cwd, basePath, "index" + ext);
-            if (fs_1.default.existsSync(indexPath)) {
-                return indexPath;
-            }
-        }
-    }
-    // Fallback to example if not found (for internal framework dev) or throw error
-    // For now, we'll try the example paths as a last resort before failing
-    const exampleClient = path_1.default.resolve(cwd, "src/example/client/index.tsx");
-    const exampleServer = path_1.default.resolve(cwd, "src/example/server/index.ts");
-    if (searchPaths.some((p) => p.includes("client")) &&
-        fs_1.default.existsSync(exampleClient))
-        return exampleClient;
-    if (searchPaths.some((p) => p.includes("server")) &&
-        fs_1.default.existsSync(exampleServer))
-        return exampleServer;
-    throw new Error(`Could not find entry point. Searched in: ${searchPaths.join(", ")}`);
-};
-const getViewsLoaderPath = () => {
-    const viewsDir = path_1.default.resolve(cwd, "src/views");
-    const hasViews = fs_1.default.existsSync(viewsDir);
-    const viewsLoaderPath = path_1.default.resolve(__dirname, "../../node_modules/.cache/arcanajs/views-loader.js");
-    // Ensure cache directory exists
-    const cacheDir = path_1.default.dirname(viewsLoaderPath);
-    if (!fs_1.default.existsSync(cacheDir)) {
-        fs_1.default.mkdirSync(cacheDir, { recursive: true });
-    }
-    // Generate the loader file
-    const loaderContent = hasViews
-        ? `module.exports = require.context('${viewsDir}', true, /\\.(tsx|jsx)$/);`
-        : `module.exports = null;`;
-    fs_1.default.writeFileSync(viewsLoaderPath, loaderContent);
-    return viewsLoaderPath;
-};
-const createClientConfig = () => {
-    const isProduction = process.env.NODE_ENV === "production";
-    const viewsLoaderPath = getViewsLoaderPath();
-    const clientEntry = findEntry([
-        "src/client",
-        "src/client/index",
-        "src/index",
-        "src/main",
-    ]);
-    return {
-        mode: isProduction ? "production" : "development",
-        target: "web",
-        entry: {
-            client: clientEntry,
-        },
-        output: {
-            path: path_1.default.resolve(cwd, "dist/public"),
-            filename: isProduction
-                ? "[name].[contenthash].bundle.js"
-                : "[name].bundle.js",
-            publicPath: "/",
-            assetModuleFilename: "assets/[hash][ext][query]",
-        },
-        resolve: {
-            extensions: [".ts", ".tsx", ".js", ".jsx"],
-            alias: {
-                "arcana-views": viewsLoaderPath,
-            },
-        },
-        resolveLoader: {
-            modules: ["node_modules", path_1.default.resolve(__dirname, "../../node_modules")],
-        },
-        module: {
-            rules: [
-                {
-                    test: /\.(ts|tsx|js|jsx)$/,
-                    exclude: /node_modules/,
-                    use: {
-                        loader: resolveLoader("babel-loader"),
-                        options: {
-                            presets: [
-                                resolveLoader("@babel/preset-env"),
-                                [
-                                    resolveLoader("@babel/preset-react"),
-                                    { runtime: "automatic" },
-                                ],
-                                resolveLoader("@babel/preset-typescript"),
-                            ],
-                        },
-                    },
-                },
-                // CSS Modules rule for .module.css files
-                {
-                    test: /\.module\.css$/,
-                    use: [
-                        isProduction
-                            ? mini_css_extract_plugin_1.default.loader
-                            : resolveLoader("style-loader"),
-                        {
-                            loader: resolveLoader("css-loader"),
-                            options: {
-                                importLoaders: 1,
-                                modules: {
-                                    localIdentName: isProduction
-                                        ? "[hash:base64:8]"
-                                        : "[path][name]__[local]--[hash:base64:5]",
-                                    exportLocalsConvention: "camelCaseOnly",
-                                },
-                            },
-                        },
-                        {
-                            loader: resolveLoader("postcss-loader"),
-                            options: {
-                                postcssOptions: {
-                                    config: path_1.default.resolve(cwd, "postcss.config.js"),
-                                },
-                            },
-                        },
-                    ],
-                },
-                // Global CSS rule for regular .css files
-                {
-                    test: /\.css$/,
-                    exclude: /\.module\.css$/,
-                    use: [
-                        isProduction
-                            ? mini_css_extract_plugin_1.default.loader
-                            : resolveLoader("style-loader"),
-                        {
-                            loader: resolveLoader("css-loader"),
-                            options: {
-                                importLoaders: 1,
-                            },
-                        },
-                        {
-                            loader: resolveLoader("postcss-loader"),
-                            options: {
-                                postcssOptions: {
-                                    config: path_1.default.resolve(cwd, "postcss.config.js"),
-                                },
-                            },
-                        },
-                    ],
-                },
-                {
-                    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf|otf)$/i,
-                    type: "asset/resource",
-                },
-            ],
-        },
-        plugins: [
-            new clean_webpack_plugin_1.CleanWebpackPlugin(),
-            new html_webpack_plugin_1.default({
-                template: path_1.default.resolve(__dirname, "../lib/server/default-index.html"),
-                filename: "index.html",
-                inject: "body",
-                minify: isProduction
-                    ? {
-                        removeComments: false,
-                        collapseWhitespace: true,
-                        removeRedundantAttributes: true,
-                        useShortDoctype: true,
-                        removeEmptyAttributes: true,
-                        removeStyleLinkTypeAttributes: true,
-                        keepClosingSlash: true,
-                        minifyJS: true,
-                        minifyCSS: true,
-                        minifyURLs: true,
-                    }
-                    : false,
-            }),
-            new mini_css_extract_plugin_1.default({
-                filename: isProduction ? "[name].[contenthash].css" : "[name].css",
-            }),
-        ],
-        optimization: {
-            splitChunks: {
-                chunks: "all",
-                cacheGroups: {
-                    defaultVendors: {
-                        test: /[\\/]node_modules[\\/]/,
-                        priority: -10,
-                        reuseExistingChunk: true,
-                    },
-                    default: {
-                        minChunks: 2,
-                        priority: -20,
-                        reuseExistingChunk: true,
-                    },
-                    react: {
-                        test: /[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/,
-                        name: "react-vendor",
-                        chunks: "all",
-                        priority: 10,
-                    },
-                },
-            },
-        },
-        performance: {
-            maxEntrypointSize: 512000,
-            maxAssetSize: 512000,
-            hints: isProduction ? "warning" : false,
-        },
-        devtool: isProduction ? "source-map" : "eval-source-map",
-    };
-};
-exports.createClientConfig = createClientConfig;
-const createServerConfig = () => {
-    const isProduction = process.env.NODE_ENV === "production";
-    const serverEntry = findEntry([
-        "src/server",
-        "src/server/index",
-        "src/server/main",
-    ]);
-    const viewsLoaderPath = getViewsLoaderPath();
-    return {
-        mode: isProduction ? "production" : "development",
-        target: "node",
-        entry: serverEntry,
-        output: {
-            path: path_1.default.resolve(cwd, "dist"),
-            filename: "server.js",
-        },
-        externals: [
-            (0, webpack_node_externals_1.default)({
-                allowlist: [/^arcanajs/],
-            }),
-        ],
-        resolve: {
-            extensions: [".ts", ".tsx", ".js", ".jsx"],
-            alias: {
-                "arcana-views": viewsLoaderPath,
-            },
-        },
-        resolveLoader: {
-            modules: ["node_modules", path_1.default.resolve(__dirname, "../../node_modules")],
-        },
-        module: {
-            rules: [
-                {
-                    test: /\.(ts|tsx|js|jsx)$/,
-                    exclude: /node_modules/,
-                    use: {
-                        loader: resolveLoader("babel-loader"),
-                        options: {
-                            presets: [
-                                resolveLoader("@babel/preset-env"),
-                                [
-                                    resolveLoader("@babel/preset-react"),
-                                    { runtime: "automatic" },
-                                ],
-                                resolveLoader("@babel/preset-typescript"),
-                            ],
-                        },
-                    },
-                },
-                // CSS Modules rule for .module.css files on server (for SSR)
-                {
-                    test: /\.module\.css$/,
-                    use: {
-                        loader: resolveLoader("css-loader"),
-                        options: {
-                            modules: {
-                                localIdentName: isProduction
-                                    ? "[hash:base64:8]"
-                                    : "[path][name]__[local]--[hash:base64:5]",
-                                exportLocalsConvention: "camelCaseOnly",
-                                exportOnlyLocals: true, // Only export class names, not CSS
-                            },
-                        },
-                    },
-                },
-                // Regular CSS files - ignore on server side
-                {
-                    test: /\.css$/,
-                    exclude: /\.module\.css$/,
-                    use: resolveLoader("null-loader"),
-                },
-                {
-                    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf|otf)$/i,
-                    type: "asset/resource",
-                    generator: {
-                        emit: false,
-                    },
-                },
-            ],
-        },
-        devtool: isProduction ? "source-map" : "eval-source-map",
-    };
-};
-exports.createServerConfig = createServerConfig;

package/framework/lib/client/index.d.ts

@@ -1,59 +0,0 @@
-import React from "react";
-export type { LayoutComponent, ViewsRegistry } from "../types";
-/**
- * Navigation options for configuring ArcanaJS behavior
- */
-export interface NavigationOptions {
-    /**
-     * Callback function called after each successful navigation
-     * Useful for analytics, logging, or custom scroll behavior
-     */
-    onNavigate?: (url: string) => void;
-}
-/**
- * Hydrate the ArcanaJS application on the client side
- *
- * This function initializes the React application on the client,
- * hydrating the server-rendered HTML with client-side interactivity.
- *
- * @param viewsOrContext - Either a views registry object or a webpack require.context
- * @param layout - Optional layout component to wrap all pages
- * @param options - Optional navigation configuration options
- *
- * @example
- * ```typescript
- * // Using webpack require.context (recommended)
- * import { hydrateArcanaJS } from 'arcanajs/client';
- *
- * const views = require.context('./views', false, /\.tsx$/);
- * hydrateArcanaJS(views);
- * ```
- *
- * @example
- * ```typescript
- * // Using manual views registry
- * import { hydrateArcanaJS } from 'arcanajs/client';
- * import HomePage from './views/HomePage';
- * import AboutPage from './views/AboutPage';
- *
- * hydrateArcanaJS({
- *   HomePage,
- *   AboutPage,
- * });
- * ```
- *
- * @example
- * ```typescript
- * // With navigation options
- * import { hydrateArcanaJS } from 'arcanajs/client';
- *
- * const views = require.context('./views', false, /\.tsx$/);
- * hydrateArcanaJS(views, undefined, {
- *   onNavigate: (url) => {
- *     // Track page views
- *     gtag('event', 'page_view', { page_path: url });
- *   }
- * });
- * ```
- */
-export declare const hydrateArcanaJS: (viewsOrContext: Record<string, React.FC<any>> | any, layout?: React.FC<any>, options?: NavigationOptions) => void;