arcanajs 0.2.2 → 2.0.0

package/lib/shared/core/ArcanaJSApp.js

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArcanaJSApp = void 0;
+const react_1 = __importStar(require("react"));
+const Page_1 = require("../components/Page");
+const RouterContext_1 = require("../context/RouterContext");
+const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl, csrfToken, views, layout: Layout, }) => {
+    const [page, setPage] = (0, react_1.useState)(initialPage);
+    const [data, setData] = (0, react_1.useState)(initialData);
+    const [params, setParams] = (0, react_1.useState)(initialParams);
+    const [url, setUrl] = (0, react_1.useState)(initialUrl ||
+        (typeof window !== "undefined" ? window.location.pathname : "/"));
+    (0, react_1.useEffect)(() => {
+        const handlePopState = (event) => {
+            if (event.state) {
+                setPage(event.state.page);
+                setData(event.state.data);
+                setParams(event.state.params || {});
+                setUrl(window.location.pathname);
+            }
+        };
+        window.addEventListener("popstate", handlePopState);
+        return () => window.removeEventListener("popstate", handlePopState);
+    }, []);
+    const navigateTo = async (newUrl) => {
+        try {
+            const response = await fetch(newUrl, {
+                headers: { "x-arcanajs-request": "true" },
+            });
+            if (!response.ok) {
+                if (response.status === 404) {
+                    setPage("NotFoundPage");
+                    setUrl(newUrl);
+                    window.history.pushState({ page: "NotFoundPage", data: {} }, "", newUrl);
+                    return;
+                }
+                throw new Error(`Navigation failed: ${response.status} ${response.statusText}`);
+            }
+            const json = await response.json();
+            window.history.pushState({ page: json.page, data: json.data, params: json.params }, "", newUrl);
+            setPage(json.page);
+            setData(json.data);
+            setParams(json.params || {});
+            setUrl(newUrl);
+        }
+        catch (error) {
+            console.error("Navigation failed", error);
+            // Optionally set an error state here to show a UI toast or error page
+        }
+    };
+    const renderPage = () => {
+        const Component = views[page] || views["NotFoundPage"] || (() => react_1.default.createElement("div", null, "404 Not Found"));
+        return (react_1.default.createElement(Page_1.Page, { data: data },
+            react_1.default.createElement(Component, { data: data, navigateTo: navigateTo, params: params })));
+    };
+    const content = renderPage();
+    return (react_1.default.createElement(RouterContext_1.RouterProvider, { value: {
+            navigateTo,
+            currentPage: page,
+            currentUrl: url,
+            params,
+            csrfToken,
+        } }, Layout ? react_1.default.createElement(Layout, null, content) : react_1.default.createElement(react_1.default.Fragment, null, content)));
+};
+exports.ArcanaJSApp = ArcanaJSApp;

package/lib/shared/hooks/useDynamicComponents.d.ts

@@ -0,0 +1 @@
+export declare const useDynamicComponents: (loader: () => Promise<any>) => any;

package/lib/shared/hooks/useDynamicComponents.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDynamicComponents = void 0;
+const react_1 = require("react");
+const useDynamicComponents = (loader) => {
+    const [component, setComponent] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        let mounted = true;
+        loader().then((mod) => {
+            if (mounted) {
+                setComponent(mod.default || mod);
+            }
+        });
+        return () => {
+            mounted = false;
+        };
+    }, []); // loader dependency omitted to avoid loops if loader is inline
+    return component;
+};
+exports.useDynamicComponents = useDynamicComponents;

package/lib/shared/hooks/useHead.d.ts

@@ -0,0 +1 @@
+export declare const useHead: () => import("../context/HeadContext").HeadManager | null;

package/lib/shared/hooks/useHead.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHead = void 0;
+const react_1 = require("react");
+const HeadContext_1 = require("../context/HeadContext");
+const useHead = () => (0, react_1.useContext)(HeadContext_1.HeadContext);
+exports.useHead = useHead;

package/lib/shared/hooks/useLocation.d.ts

@@ -0,0 +1,5 @@
+export declare const useLocation: () => {
+    pathname: string;
+    search: string;
+    hash: string;
+};

package/lib/shared/hooks/useLocation.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocation = void 0;
+const useRouter_1 = require("./useRouter");
+const useLocation = () => {
+    const { currentUrl } = (0, useRouter_1.useRouter)();
+    return {
+        pathname: currentUrl,
+        search: typeof window !== "undefined" ? window.location.search : "",
+        hash: typeof window !== "undefined" ? window.location.hash : "",
+    };
+};
+exports.useLocation = useLocation;

package/lib/shared/hooks/usePage.d.ts

@@ -0,0 +1 @@
+export declare const usePage: <T = any>() => T;

package/lib/shared/hooks/usePage.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePage = void 0;
+const react_1 = require("react");
+const PageContext_1 = require("../context/PageContext");
+const usePage = () => (0, react_1.useContext)(PageContext_1.PageContext);
+exports.usePage = usePage;

package/lib/shared/hooks/useParams.d.ts

@@ -0,0 +1 @@
+export declare const useParams: () => Record<string, string>;

package/lib/shared/hooks/useParams.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useParams = void 0;
+const react_1 = require("react");
+const RouterContext_1 = require("../context/RouterContext");
+const useParams = () => {
+    const context = (0, react_1.useContext)(RouterContext_1.RouterContext);
+    if (!context) {
+        throw new Error("useParams must be used within an ArcanaJSApp");
+    }
+    return context.params;
+};
+exports.useParams = useParams;

package/lib/shared/hooks/useQuery.d.ts

@@ -0,0 +1 @@
+export declare const useQuery: () => URLSearchParams;

package/lib/shared/hooks/useQuery.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useQuery = void 0;
+const useLocation_1 = require("./useLocation");
+const useQuery = () => {
+    const { search } = (0, useLocation_1.useLocation)();
+    return new URLSearchParams(search);
+};
+exports.useQuery = useQuery;

package/lib/shared/hooks/useRouter.d.ts

@@ -0,0 +1 @@
+export declare const useRouter: () => import("../context/RouterContext").RouterContextType;

package/lib/shared/hooks/useRouter.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRouter = void 0;
+const react_1 = require("react");
+const RouterContext_1 = require("../context/RouterContext");
+const useRouter = () => {
+    const context = (0, react_1.useContext)(RouterContext_1.RouterContext);
+    if (!context) {
+        throw new Error("useRouter must be used within an ArcanaJSApp");
+    }
+    return context;
+};
+exports.useRouter = useRouter;

package/lib/shared/utils/createSingletonContext.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+/**
+ * Creates a React Context that persists across multiple module loads (Webpack bundles vs Node require).
+ * This is essential for SSR applications where the server bundle and dynamically loaded views
+ * might reference different instances of the "same" context module.
+ *
+ * @param key A unique string key to identify this context globally
+ * @param defaultValue The default value for the context
+ * @returns A React Context instance (singleton)
+ */
+export declare function createSingletonContext<T>(key: string, defaultValue: T): React.Context<T>;

package/lib/shared/utils/createSingletonContext.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSingletonContext = createSingletonContext;
+const react_1 = require("react");
+/**
+ * Creates a React Context that persists across multiple module loads (Webpack bundles vs Node require).
+ * This is essential for SSR applications where the server bundle and dynamically loaded views
+ * might reference different instances of the "same" context module.
+ *
+ * @param key A unique string key to identify this context globally
+ * @param defaultValue The default value for the context
+ * @returns A React Context instance (singleton)
+ */
+function createSingletonContext(key, defaultValue) {
+    const globalAny = global;
+    const symbolKey = Symbol.for(`ARCANAJS_CONTEXT_${key}`);
+    if (!globalAny[symbolKey]) {
+        globalAny[symbolKey] = (0, react_1.createContext)(defaultValue);
+    }
+    return globalAny[symbolKey];
+}

package/package.json

@@ -1,81 +1,71 @@
 {
   "name": "arcanajs",
-  "author": {
-    "name": "Mohammed Ben Cheikh",
-    "email": "mohammed.bencheikh.dev@gmail.com",
-    "url": "https://mohammedbencheikh.com/"
+  "version": "2.0.0",
+  "description": "ArcanaJS Framework",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": "./lib/index.js",
+    "./server": "./lib/server.js"
   },
-  "version": "0.2.2",
-  "description": "A powerful full-stack framework combining Express, React and MongoDB with server-side rendering",
-  "main": "dist/server.js",
-  "types": "dist/server.d.ts",
   "files": [
-    "dist",
-    "bin"
+    "lib",
+    "webpack.client.js",
+    "webpack.server.js",
+    "tsconfig.json",
+    "babel.config.js",
+    "postcss.config.js",
+    "tailwind.config.js"
   ],
   "scripts": {
-    "clean": "rm -rf dist",
-    "build": "tsc -p tsconfig.json",
-    "build:watch": "tsc -p tsconfig.json --watch",
-    "prepare": "npm run build",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
-    "pack:verify": "npm pack --dry-run",
-    "dev": "nodemon --watch src --exec ts-node src/server.ts",
-    "start": "node dist/server.js",
-    "lint": "eslint . || true",
-    "test": "jest --runInBand"
-  },
-  "peerDependencies": {
-    "react": ">=16 <20",
-    "react-dom": ">=16 <20"
+    "build": "tsc -p tsconfig.lib.json",
+    "build:app": "cross-env NODE_ENV=production webpack --config webpack.server.js && cross-env NODE_ENV=production webpack --config webpack.client.js",
+    "dev:server": "cross-env NODE_ENV=development webpack --config webpack.server.js --watch",
+    "dev:server:tsx": "tsx watch src/example/server/index.ts",
+    "dev:client": "cross-env NODE_ENV=development webpack --config webpack.client.js --watch",
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
+    "dev:tsx": "concurrently \"npm run dev:server:tsx\" \"npm run dev:client\"",
+    "start": "cross-env NODE_ENV=production node dist/server.js"
   },
   "dependencies": {
-    "dotenv": "^16.0.0",
-    "express": "^4.18.2",
-    "mongoose": "^7.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "url-join": "^5.0.0"
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.0",
+    "@tailwindcss/postcss": "^4.1.17",
+    "autoprefixer": "^10.4.22",
+    "babel-loader": "^10.0.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "compression": "^1.8.1",
+    "concurrently": "^9.2.1",
+    "cookie-parser": "^1.4.7",
+    "cross-env": "^10.1.0",
+    "css-loader": "^7.1.2",
+    "express": "^5.1.0",
+    "helmet": "^8.1.0",
+    "html-webpack-plugin": "^5.6.5",
+    "mini-css-extract-plugin": "^2.9.4",
+    "null-loader": "^4.0.1",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^4.1.17",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.2.2",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-node-externals": "^3.0.0"
   },
   "devDependencies": {
-    "@types/dotenv": "^6.1.1",
+    "@types/compression": "^1.8.1",
+    "@types/cookie-parser": "^1.4.10",
     "@types/express": "^5.0.5",
-    "@types/mongoose": "^5.11.96",
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@types/url-join": "^4.0.3",
-    "eslint": "^8.0.0",
-    "jest": "^29.0.0",
-    "nodemon": "^3.0.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "ts-node": "^10.9.2",
-    "typescript": "^5.2.0"
-  },
-  "keywords": [
-    "framework",
-    "full-stack",
-    "express",
-    "react",
-    "mongodb",
-    "ssr",
-    "mvc",
-    "arcana",
-    "routing",
-    "server-side-rendering"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Mohammed-Ben-Cheikh/arcanajs.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Mohammed-Ben-Cheikh/arcanajs/issues"
-  },
-  "homepage": "https://github.com/Mohammed-Ben-Cheikh/arcanajs#readme",
-  "bin": {
-    "arcana": "dist/bin/arcana.js"
-  },
-  "engines": {
-    "node": ">=16"
-  },
-  "license": "MIT"
+    "tsx": "^4.20.6"
+  }
 }

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+    autoprefixer: {},
+  },
+};

package/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "lib": ["DOM", "ES2020"],
+    "jsx": "react",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "moduleResolution": "node"
+  },
+  "include": ["src/**/*"]
+}

package/webpack.client.js

@@ -0,0 +1,71 @@
+const path = require("path");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const isProduction = process.env.NODE_ENV === "production";
+
+module.exports = {
+  mode: isProduction ? "production" : "development",
+  target: "web",
+  entry: {
+    client: "./src/example/client/index.tsx",
+  },
+  output: {
+    path: path.resolve(__dirname, "dist/public"),
+    filename: isProduction
+      ? "[name].[contenthash].bundle.js"
+      : "[name].bundle.js",
+    publicPath: "/",
+    assetModuleFilename: "assets/[hash][ext][query]",
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx|js|jsx)$/,
+        exclude: /node_modules/,
+        use: "babel-loader",
+      },
+      {
+        test: /\.css$/,
+        use: [
+          isProduction ? MiniCssExtractPlugin.loader : "style-loader",
+          "css-loader",
+          "postcss-loader",
+        ],
+      },
+      {
+        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf|otf)$/i,
+        type: "asset/resource",
+      },
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      template: "./src/lib/server/default-index.html",
+      filename: "index.html",
+      inject: "body",
+      minify: isProduction,
+    }),
+    new MiniCssExtractPlugin({
+      filename: isProduction ? "[name].[contenthash].css" : "[name].css",
+    }),
+  ],
+  optimization: {
+    splitChunks: {
+      chunks: "all",
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendors",
+          chunks: "all",
+        },
+      },
+    },
+  },
+  devtool: isProduction ? "source-map" : "eval-source-map",
+};

package/webpack.server.js

@@ -0,0 +1,39 @@
+const path = require("path");
+const nodeExternals = require("webpack-node-externals");
+
+const isProduction = process.env.NODE_ENV === "production";
+
+module.exports = {
+  mode: isProduction ? "production" : "development",
+  target: "node",
+  entry: "./src/example/server/index.ts",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "server.js",
+  },
+  externals: [nodeExternals()],
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx|js|jsx)$/,
+        exclude: /node_modules/,
+        use: "babel-loader",
+      },
+      {
+        test: /\.css$/,
+        use: "null-loader", // Ignore CSS on server side
+      },
+      {
+        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf|otf)$/i,
+        type: "asset/resource",
+        generator: {
+          emit: false, // Don't emit files for server build, just get paths
+        },
+      },
+    ],
+  },
+  devtool: isProduction ? "source-map" : "eval-source-map",
+};

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Mohammed Ben Cheikh
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.