arcanajs 2.1.6 → 2.2.1

package/README.md

@@ -1,16 +1,58 @@
 # ArcanaJS Framework
 
-ArcanaJS is a modern React framework for building server-side rendered (SSR) applications with ease. It combines the power of Express, React, and TypeScript to provide a seamless development experience.
+ArcanaJS is a modern React framework for building server-side rendered (SSR) applications with ease. It combines the power of Express, React, TypeScript, and Tailwind CSS v4 to provide a seamless development experience.
 
 ## Features
 
 - **Server-Side Rendering (SSR):** Fast initial load times and SEO-friendly pages.
 - **TypeScript Support:** Built with TypeScript for type safety and better developer experience.
-- **File-based Routing:** Intuitive routing based on your file structure.
+- **File-Server-Based Routing:** Intuitive routing based on your server routes and file structure.
 - **Hot Module Replacement (HMR):** Fast development cycle with instant updates.
-- **Tailwind CSS:** Integrated support for utility-first CSS.
+- **Tailwind CSS v4:** Integrated support for the latest Tailwind CSS with CSS-first configuration.
+- **Zero Configuration:** Get started quickly with sensible defaults.
 
+## Quick Start
 
+### Create a new folder
+
+```bash
+mkdir my-app
+cd my-app
+```
+
+### Initialize a New Project
+
+```bash
+npx arcanajs init
+```
+
+### Development
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Start the development server:
+
+```bash
+npm run dev
+```
+
+Visit `http://localhost:3000` to see your application.
+
+### Build for Production
+
+```bash
+npm run build
+```
+
+### Start Production Server
+
+```bash
+npm start
+```
 
 ## License
 

package/framework/cli/index.js

@@ -1,11 +1,18 @@
-import { spawn } from "child_process";
-import path from "path";
-import webpack from "webpack";
-import { createClientConfig, createServerConfig } from "./webpack.config";
+"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: dev, build, start");
+    console.error("Please specify a command: init, dev, build, start");
     process.exit(1);
 }
 const runCompiler = (compiler) => {
@@ -25,16 +32,28 @@ const runCompiler = (compiler) => {
     });
 };
 let serverProcess = null;
-const startDevServer = () => {
-    if (serverProcess) {
-        serverProcess.kill();
-    }
-    const serverPath = path.resolve(process.cwd(), "dist/server.js");
-    serverProcess = spawn("node", [serverPath], { stdio: "inherit" });
-    serverProcess.on("close", (code) => {
-        if (code !== 0 && code !== null) {
-            console.error(`Dev server exited with code ${code}`);
+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) => {
@@ -52,11 +71,11 @@ const watchCompiler = (compiler, onBuildComplete) => {
 const build = async () => {
     process.env.NODE_ENV = "production";
     console.log("Building for production...");
-    const clientConfig = createClientConfig();
-    const serverConfig = createServerConfig();
+    const clientConfig = (0, webpack_config_1.createClientConfig)();
+    const serverConfig = (0, webpack_config_1.createServerConfig)();
     try {
-        await runCompiler(webpack(clientConfig));
-        await runCompiler(webpack(serverConfig));
+        await runCompiler((0, webpack_1.default)(clientConfig));
+        await runCompiler((0, webpack_1.default)(serverConfig));
         console.log("Build complete.");
     }
     catch (error) {
@@ -67,26 +86,109 @@ const build = async () => {
 const dev = async () => {
     process.env.NODE_ENV = "development";
     console.log("Starting development server...");
-    const clientConfig = createClientConfig();
-    const serverConfig = createServerConfig();
+    // 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(webpack(clientConfig));
+    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(webpack(serverConfig), () => {
+    watchCompiler(serverCompiler, async () => {
         console.log("Server build complete. Restarting server...");
-        startDevServer();
+        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.resolve(process.cwd(), "dist/server.js");
+    const serverPath = path_1.default.resolve(process.cwd(), "dist/server.js");
     console.log(`Starting server at ${serverPath}...`);
-    const child = spawn("node", [serverPath], { stdio: "inherit" });
+    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;

package/framework/cli/templates.d.ts

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

package/framework/cli/templates.js

@@ -0,0 +1,41 @@
+"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: "postcss.config.js", dest: "postcss.config.js" },
+    { 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.js

@@ -1,42 +1,65 @@
-import { CleanWebpackPlugin } from "clean-webpack-plugin";
-import HtmlWebpackPlugin from "html-webpack-plugin";
-import MiniCssExtractPlugin from "mini-css-extract-plugin";
-import path from "path";
-import nodeExternals from "webpack-node-externals";
+"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);
-import fs from "fs";
+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.resolve(cwd, basePath + ext);
-            if (fs.existsSync(fullPath)) {
+            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.resolve(cwd, basePath, "index" + ext);
-            if (fs.existsSync(indexPath)) {
+            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.resolve(cwd, "src/example/client/index.tsx");
-    const exampleServer = path.resolve(cwd, "src/example/server/index.ts");
+    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.existsSync(exampleClient))
+        fs_1.default.existsSync(exampleClient))
         return exampleClient;
     if (searchPaths.some((p) => p.includes("server")) &&
-        fs.existsSync(exampleServer))
+        fs_1.default.existsSync(exampleServer))
         return exampleServer;
     throw new Error(`Could not find entry point. Searched in: ${searchPaths.join(", ")}`);
 };
-export const createClientConfig = () => {
+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",
@@ -50,7 +73,7 @@ export const createClientConfig = () => {
             client: clientEntry,
         },
         output: {
-            path: path.resolve(cwd, "dist/public"),
+            path: path_1.default.resolve(cwd, "dist/public"),
             filename: isProduction
                 ? "[name].[contenthash].bundle.js"
                 : "[name].bundle.js",
@@ -59,9 +82,12 @@ export const createClientConfig = () => {
         },
         resolve: {
             extensions: [".ts", ".tsx", ".js", ".jsx"],
+            alias: {
+                "arcana-views": viewsLoaderPath,
+            },
         },
         resolveLoader: {
-            modules: ["node_modules", path.resolve(__dirname, "../../node_modules")],
+            modules: ["node_modules", path_1.default.resolve(__dirname, "../../node_modules")],
         },
         module: {
             rules: [
@@ -86,10 +112,22 @@ export const createClientConfig = () => {
                     test: /\.css$/,
                     use: [
                         isProduction
-                            ? MiniCssExtractPlugin.loader
+                            ? mini_css_extract_plugin_1.default.loader
                             : resolveLoader("style-loader"),
-                        resolveLoader("css-loader"),
-                        resolveLoader("postcss-loader"),
+                        {
+                            loader: resolveLoader("css-loader"),
+                            options: {
+                                importLoaders: 1,
+                            },
+                        },
+                        {
+                            loader: resolveLoader("postcss-loader"),
+                            options: {
+                                postcssOptions: {
+                                    config: path_1.default.resolve(cwd, "postcss.config.js"),
+                                },
+                            },
+                        },
                     ],
                 },
                 {
@@ -99,9 +137,9 @@ export const createClientConfig = () => {
             ],
         },
         plugins: [
-            new CleanWebpackPlugin(),
-            new HtmlWebpackPlugin({
-                template: path.resolve(__dirname, "../lib/server/default-index.html"),
+            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
@@ -119,7 +157,7 @@ export const createClientConfig = () => {
                     }
                     : false,
             }),
-            new MiniCssExtractPlugin({
+            new mini_css_extract_plugin_1.default({
                 filename: isProduction ? "[name].[contenthash].css" : "[name].css",
             }),
         ],
@@ -127,48 +165,52 @@ export const createClientConfig = () => {
             splitChunks: {
                 chunks: "all",
                 cacheGroups: {
-                    vendor: {
+                    defaultVendors: {
                         test: /[\\/]node_modules[\\/]/,
-                        name: "vendors",
+                        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",
     };
 };
-export const createServerConfig = () => {
+exports.createClientConfig = createClientConfig;
+const createServerConfig = () => {
     const isProduction = process.env.NODE_ENV === "production";
     const serverEntry = findEntry([
         "src/server",
         "src/server/index",
         "src/server/main",
     ]);
-    // View Injection Logic
-    const viewsDir = path.resolve(cwd, "src/views");
-    const hasViews = fs.existsSync(viewsDir);
-    const viewsLoaderPath = path.resolve(__dirname, "../../node_modules/.cache/arcanajs/views-loader.js");
-    // Ensure cache directory exists
-    const cacheDir = path.dirname(viewsLoaderPath);
-    if (!fs.existsSync(cacheDir)) {
-        fs.mkdirSync(cacheDir, { recursive: true });
-    }
-    // Generate the loader file
-    const loaderContent = hasViews
-        ? `module.exports = require.context('${viewsDir}', true, /\\.(tsx|jsx)$/);`
-        : `module.exports = null;`;
-    fs.writeFileSync(viewsLoaderPath, loaderContent);
+    const viewsLoaderPath = getViewsLoaderPath();
     return {
         mode: isProduction ? "production" : "development",
         target: "node",
         entry: serverEntry,
         output: {
-            path: path.resolve(cwd, "dist"),
+            path: path_1.default.resolve(cwd, "dist"),
             filename: "server.js",
         },
         externals: [
-            nodeExternals({
+            (0, webpack_node_externals_1.default)({
                 allowlist: [/^arcanajs/],
             }),
         ],
@@ -179,7 +221,7 @@ export const createServerConfig = () => {
             },
         },
         resolveLoader: {
-            modules: ["node_modules", path.resolve(__dirname, "../../node_modules")],
+            modules: ["node_modules", path_1.default.resolve(__dirname, "../../node_modules")],
         },
         module: {
             rules: [
@@ -216,3 +258,4 @@ export const createServerConfig = () => {
         // devtool: isProduction ? "source-map" : "eval-source-map",
     };
 };
+exports.createServerConfig = createServerConfig;

package/framework/lib/client/index.js

@@ -1,8 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { hydrateRoot } from "react-dom/client";
-import { HeadContext } from "../shared/context/HeadContext";
-import { ArcanaJSApp } from "../shared/core/ArcanaJSApp";
-export const hydrateArcanaJS = (viewsOrContext, layout) => {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hydrateArcanaJS = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("react-dom/client");
+const HeadContext_1 = require("../shared/context/HeadContext");
+const ArcanaJSApp_1 = require("../shared/core/ArcanaJSApp");
+const ErrorPage_1 = __importDefault(require("../shared/views/ErrorPage"));
+const NotFoundPage_1 = __importDefault(require("../shared/views/NotFoundPage"));
+const hydrateArcanaJS = (viewsOrContext, layout) => {
     let views = {};
     if (viewsOrContext.keys && typeof viewsOrContext.keys === "function") {
         viewsOrContext.keys().forEach((key) => {
@@ -13,8 +21,15 @@ export const hydrateArcanaJS = (viewsOrContext, layout) => {
     else {
         views = viewsOrContext;
     }
+    // Add default error views if not present
+    if (!views["NotFoundPage"]) {
+        views["NotFoundPage"] = NotFoundPage_1.default;
+    }
+    if (!views["ErrorPage"]) {
+        views["ErrorPage"] = ErrorPage_1.default;
+    }
     const container = document.getElementById("root");
-    const dataScript = document.getElementById("__ArcanaJS_DATA__");
+    const dataScript = document.getElementById("__ARCANAJS_DATA__");
     // Client-side HeadManager (noop for push, as Head handles client updates via useEffect)
     const headManager = {
         tags: [],
@@ -23,10 +38,11 @@ export const hydrateArcanaJS = (viewsOrContext, layout) => {
     if (container && dataScript) {
         try {
             const { page, data, params, csrfToken } = JSON.parse(dataScript.textContent || "{}");
-            hydrateRoot(container, _jsx(HeadContext.Provider, { value: headManager, children: _jsx(ArcanaJSApp, { initialPage: page, initialData: data, initialParams: params, csrfToken: csrfToken, views: views, layout: layout }) }));
+            (0, client_1.hydrateRoot)(container, (0, jsx_runtime_1.jsx)(HeadContext_1.HeadContext.Provider, { value: headManager, children: (0, jsx_runtime_1.jsx)(ArcanaJSApp_1.ArcanaJSApp, { initialPage: page, initialData: data, initialParams: params, csrfToken: csrfToken, views: views, layout: layout }) }));
         }
         catch (e) {
             console.error("Failed to parse initial data", e);
         }
     }
 };
+exports.hydrateArcanaJS = hydrateArcanaJS;

package/framework/lib/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./client";
 export * from "./shared/components/Body";
 export * from "./shared/components/Head";
 export * from "./shared/components/Link";
@@ -8,10 +7,11 @@ export * from "./shared/context/HeadContext";
 export * from "./shared/context/PageContext";
 export * from "./shared/context/RouterContext";
 export * from "./shared/core/ArcanaJSApp";
-export * from "./shared/hooks/useDynamicComponents";
 export * from "./shared/hooks/useHead";
 export * from "./shared/hooks/useLocation";
 export * from "./shared/hooks/usePage";
 export * from "./shared/hooks/useParams";
 export * from "./shared/hooks/useQuery";
 export * from "./shared/hooks/useRouter";
+export { default as ErrorPage } from "./shared/views/ErrorPage";
+export { default as NotFoundPage } from "./shared/views/NotFoundPage";