arcanajs 2.3.6 → 2.4.0

package/framework/cli/templates.js

@@ -6,7 +6,7 @@ exports.configFiles = [
     { 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: "arcanajs.d.ts" },
+    { 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" },

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

@@ -1,5 +1,15 @@
 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
  *
@@ -8,6 +18,7 @@ export type { LayoutComponent, ViewsRegistry } from "../types";
  *
  * @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
@@ -30,5 +41,19 @@ export type { LayoutComponent, ViewsRegistry } from "../types";
  *   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>) => void;
+export declare const hydrateArcanaJS: (viewsOrContext: Record<string, React.FC<any>> | any, layout?: React.FC<any>, options?: NavigationOptions) => void;

package/framework/lib/client/index.js

@@ -21,6 +21,7 @@ const NotFoundPage_1 = __importDefault(require("../shared/views/NotFoundPage"));
  *
  * @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
@@ -43,8 +44,22 @@ const NotFoundPage_1 = __importDefault(require("../shared/views/NotFoundPage"));
  *   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 });
+ *   }
+ * });
+ * ```
  */
-const hydrateArcanaJS = (viewsOrContext, layout) => {
+const hydrateArcanaJS = (viewsOrContext, layout, options) => {
     let views = {};
     if (viewsOrContext.keys && typeof viewsOrContext.keys === "function") {
         viewsOrContext.keys().forEach((key) => {
@@ -72,7 +87,7 @@ const hydrateArcanaJS = (viewsOrContext, layout) => {
     if (container && dataScript) {
         try {
             const { page, data, params, csrfToken } = JSON.parse(dataScript.textContent || "{}");
-            (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 }) }));
+            (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, onNavigate: options?.onNavigate || (() => { }) }) }));
         }
         catch (e) {
             console.error("Failed to parse initial data", e);

package/framework/lib/shared/components/Link.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     href: string;
+    prefetch?: boolean;
 }
 export declare const Link: React.FC<LinkProps>;
 export {};

package/framework/lib/shared/components/Link.js

@@ -3,12 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const useRouter_1 = require("../hooks/useRouter");
-const Link = ({ href, children, ...props }) => {
+const Link = ({ href, children, prefetch = false, ...props }) => {
     const { navigateTo } = (0, useRouter_1.useRouter)();
+    const isExternal = /^https?:\/\//.test(href);
     const handleClick = (e) => {
         e.preventDefault();
-        navigateTo(href);
+        if (!isExternal) {
+            navigateTo(href);
+        }
+        else {
+            // Open external links in a new tab
+            window.open(href, "_blank", "noopener,noreferrer");
+        }
     };
-    return ((0, jsx_runtime_1.jsx)("a", { href: href, onClick: handleClick, ...props, children: children }));
+    const handleMouseEnter = () => {
+        if (prefetch && !isExternal) {
+            // Prefetch using HEAD request to warm cache
+            fetch(href, { method: "HEAD" }).catch(() => { });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("a", { href: href, onClick: handleClick, onMouseEnter: handleMouseEnter, target: isExternal ? "_blank" : undefined, rel: isExternal ? "noopener noreferrer" : undefined, ...props, children: children }));
 };
 exports.Link = Link;

package/framework/lib/shared/components/NavLink.d.ts

@@ -3,6 +3,7 @@ interface NavLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     href: string;
     activeClassName?: string;
     exact?: boolean;
+    prefetch?: boolean;
 }
 export declare const NavLink: React.FC<NavLinkProps>;
 export {};

package/framework/lib/shared/components/NavLink.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavLink = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Link_1 = require("./Link");
 const useRouter_1 = require("../hooks/useRouter");
-const NavLink = ({ href, activeClassName = "active", className = "", exact = false, children, ...props }) => {
+const Link_1 = require("./Link");
+const NavLink = ({ href, activeClassName = "active", className = "", exact = false, prefetch = false, children, ...props }) => {
     const { currentUrl } = (0, useRouter_1.useRouter)();
     const isActive = exact ? currentUrl === href : currentUrl.startsWith(href);
     const combinedClassName = `${className} ${isActive ? activeClassName : ""}`.trim();
-    return ((0, jsx_runtime_1.jsx)(Link_1.Link, { href: href, className: combinedClassName, ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(Link_1.Link, { href: href, className: combinedClassName, prefetch: prefetch, ...props, children: children }));
 };
 exports.NavLink = NavLink;

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

@@ -5,6 +5,8 @@ export interface RouterContextType {
     currentUrl: string;
     params: Record<string, string>;
     csrfToken?: string;
+    onNavigate?: (url: string) => void;
+    isNavigating: boolean;
 }
 export declare const RouterContext: React.Context<RouterContextType | null>;
 export declare const RouterProvider: React.FC<{

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

@@ -9,5 +9,6 @@ export interface ArcanaJSAppProps {
     layout?: React.FC<{
         children: React.ReactNode;
     }>;
+    onNavigate?: (url: string) => void;
 }
 export declare const ArcanaJSApp: React.FC<ArcanaJSAppProps>;

package/framework/lib/shared/core/ArcanaJSApp.js

@@ -1,17 +1,56 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+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 ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl, csrfToken, views, layout: Layout, onNavigate, }) => {
     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 : "/"));
+    const [isNavigating, setIsNavigating] = (0, react_1.useState)(false);
+    // Navigation cache to store previously visited pages
+    const navigationCache = react_1.default.useRef(new Map());
     (0, react_1.useEffect)(() => {
+        if (typeof window !== "undefined" && !window.history.state) {
+            window.history.replaceState({ page: initialPage, data: initialData, params: initialParams }, "", window.location.href);
+        }
         const handlePopState = (event) => {
             if (event.state) {
                 setPage(event.state.page);
@@ -19,11 +58,32 @@ const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl,
                 setParams(event.state.params || {});
                 setUrl(window.location.pathname);
             }
+            else {
+                window.location.reload();
+            }
         };
         window.addEventListener("popstate", handlePopState);
         return () => window.removeEventListener("popstate", handlePopState);
     }, []);
     const navigateTo = async (newUrl) => {
+        // Check cache first for instant navigation
+        if (navigationCache.current.has(newUrl)) {
+            const cached = navigationCache.current.get(newUrl);
+            setPage(cached.page);
+            setData(cached.data);
+            setParams(cached.params || {});
+            setUrl(newUrl);
+            window.history.pushState(cached, "", newUrl);
+            // Scroll to top
+            if (typeof window !== "undefined") {
+                window.scrollTo({ top: 0, behavior: "smooth" });
+            }
+            if (onNavigate) {
+                onNavigate(newUrl);
+            }
+            return;
+        }
+        setIsNavigating(true);
         try {
             const response = await fetch(newUrl, {
                 headers: { "x-arcanajs-request": "true" },
@@ -38,15 +98,30 @@ const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl,
                 throw new Error(`Navigation failed: ${response.status} ${response.statusText}`);
             }
             const json = await response.json();
+            // Cache the navigation result
+            navigationCache.current.set(newUrl, {
+                page: json.page,
+                data: json.data,
+                params: json.params,
+            });
             window.history.pushState({ page: json.page, data: json.data, params: json.params }, "", newUrl);
             setPage(json.page);
             setData(json.data);
             setParams(json.params || {});
             setUrl(newUrl);
+            // Scroll to top after navigation
+            if (typeof window !== "undefined") {
+                window.scrollTo({ top: 0, behavior: "smooth" });
+            }
+            if (onNavigate) {
+                onNavigate(newUrl);
+            }
         }
         catch (error) {
             console.error("Navigation failed", error);
-            // Optionally set an error state here to show a UI toast or error page
+        }
+        finally {
+            setIsNavigating(false);
         }
     };
     const renderPage = () => {
@@ -60,6 +135,8 @@ const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl,
             currentUrl: url,
             params,
             csrfToken,
+            onNavigate,
+            isNavigating,
         }, children: Layout ? (0, jsx_runtime_1.jsx)(Layout, { children: content }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content }) }));
 };
 exports.ArcanaJSApp = ArcanaJSApp;

package/framework/templates/package.json

@@ -8,7 +8,7 @@
     "start": "arcanajs start"
   },
   "dependencies": {
-    "arcanajs": "^2.3.6",
+    "arcanajs": "^2.4.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   }

package/package.json

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