arcanajs 1.0.0 → 2.0.1

package/lib/shared/components/NavLink.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavLink = void 0;
+const react_1 = __importDefault(require("react"));
+const Link_1 = require("./Link");
+const useRouter_1 = require("../hooks/useRouter");
+const NavLink = ({ href, activeClassName = "active", className = "", exact = false, children, ...props }) => {
+    const { currentUrl } = (0, useRouter_1.useRouter)();
+    const isActive = exact ? currentUrl === href : currentUrl.startsWith(href);
+    const combinedClassName = `${className} ${isActive ? activeClassName : ""}`.trim();
+    return (react_1.default.createElement(Link_1.Link, { href: href, className: combinedClassName, ...props }, children));
+};
+exports.NavLink = NavLink;

package/lib/shared/components/Page.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const Page: React.FC<{
+    data?: any;
+    title?: string;
+    children: React.ReactNode;
+}>;

package/lib/shared/components/Page.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Page = void 0;
+const react_1 = __importDefault(require("react"));
+const PageContext_1 = require("../context/PageContext");
+const Head_1 = require("./Head");
+const Page = ({ data, title, children }) => {
+    return (react_1.default.createElement(PageContext_1.PageContext.Provider, { value: data },
+        title && (react_1.default.createElement(Head_1.Head, null,
+            react_1.default.createElement("title", null, title))),
+        children));
+};
+exports.Page = Page;

package/lib/shared/context/HeadContext.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface HeadManager {
+    tags: React.ReactNode[];
+    push: (tags: React.ReactNode) => void;
+}
+export declare const HeadContext: React.Context<HeadManager | null>;

package/lib/shared/context/HeadContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeadContext = void 0;
+const createSingletonContext_1 = require("../utils/createSingletonContext");
+exports.HeadContext = (0, createSingletonContext_1.createSingletonContext)("HeadContext", null);

package/lib/shared/context/PageContext.d.ts

@@ -0,0 +1 @@
+export declare const PageContext: import("react").Context<any>;

package/lib/shared/context/PageContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageContext = void 0;
+const createSingletonContext_1 = require("../utils/createSingletonContext");
+exports.PageContext = (0, createSingletonContext_1.createSingletonContext)("PageContext", null);

package/lib/shared/context/RouterContext.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface RouterContextType {
+    navigateTo: (url: string) => void;
+    currentPage: string;
+    currentUrl: string;
+    params: Record<string, string>;
+    csrfToken?: string;
+}
+export declare const RouterContext: React.Context<RouterContextType | null>;
+export declare const RouterProvider: React.FC<{
+    value: RouterContextType;
+    children: React.ReactNode;
+}>;

package/lib/shared/context/RouterContext.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouterProvider = exports.RouterContext = void 0;
+const react_1 = __importDefault(require("react"));
+const createSingletonContext_1 = require("../utils/createSingletonContext");
+exports.RouterContext = (0, createSingletonContext_1.createSingletonContext)("RouterContext", null);
+const RouterProvider = ({ value, children }) => {
+    return (react_1.default.createElement(exports.RouterContext.Provider, { value: value }, children));
+};
+exports.RouterProvider = RouterProvider;

package/lib/shared/core/ArcanaJSApp.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface ArcanaJSAppProps {
+    initialPage: string;
+    initialData: any;
+    initialParams?: Record<string, string>;
+    initialUrl?: string;
+    csrfToken?: string;
+    views: Record<string, React.FC<any>>;
+    layout?: React.FC<{
+        children: React.ReactNode;
+    }>;
+}
+export declare const ArcanaJSApp: React.FC<ArcanaJSAppProps>;

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,31 +1,71 @@
 {
   "name": "arcanajs",
-  "author": {
-    "name": "Mohammed Ben Cheikh",
-    "email": "mohammed.bencheikh.dev@gmail.com",
-    "url": "https://mohammedbencheikh.com/"
+  "version": "2.0.1",
+  "description": "ArcanaJS Framework",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": "./lib/index.js",
+    "./server": "./lib/server.js"
   },
-  "version": "1.0.0",
-  "description": "A powerful full-stack framework combining Express, React and MongoDB with server-side rendering",
-  "keywords": [
-    "framework",
-    "full-stack",
-    "express",
-    "react",
-    "mongodb",
-    "ssr",
-    "mvc",
-    "arcana",
-    "routing",
-    "server-side-rendering"
+  "files": [
+    "lib",
+    "webpack.client.js",
+    "webpack.server.js",
+    "tsconfig.json",
+    "babel.config.js",
+    "postcss.config.js",
+    "tailwind.config.js"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/arcanajs/arcanajs.git"
+  "scripts": {
+    "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"
   },
-  "bugs": {
-    "url": "https://github.com/arcanajs/arcanajs/issues"
+  "dependencies": {
+    "@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"
   },
-  "homepage": "https://arcanajs.com",
-  "license": "MIT"
-}
+  "devDependencies": {
+    "@types/compression": "^1.8.1",
+    "@types/cookie-parser": "^1.4.10",
+    "@types/express": "^5.0.5",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "ts-node": "^10.9.2",
+    "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

@@ -1,27 +1,16 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "module": "commonjs",
-    "lib": ["ES2020"],
+    "module": "CommonJS",
+    "lib": ["DOM", "ES2020"],
     "jsx": "react",
-    "outDir": "./dist",
-    "rootDir": ".",
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "moduleResolution": "node",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "allowSyntheticDefaultImports": true,
-    "types": ["node"],
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "moduleResolution": "node"
   },
-  "include": ["src/**/*", "config/**/*", "bin/**/*"],
-  "exclude": ["node_modules", "dist", "tests"]
+  "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/.prettierrc

@@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all"
-}

package/arcanajs-cli.json

@@ -1,8 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/nest-cli",
-  "collection": "@nestjs/schematics",
-  "sourceRoot": "src",
-  "compilerOptions": {
-    "deleteOutDir": true
-  }
-}