arcanajs 2.1.6 → 2.2.0

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

@@ -1,14 +1,17 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Page } from "../components/Page";
-import { RouterProvider } from "../context/RouterContext";
-export const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl, csrfToken, views, layout: Layout, }) => {
-    const [page, setPage] = useState(initialPage);
-    const [data, setData] = useState(initialData);
-    const [params, setParams] = useState(initialParams);
-    const [url, setUrl] = useState(initialUrl ||
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArcanaJSApp = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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 : "/"));
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const handlePopState = (event) => {
             if (event.state) {
                 setPage(event.state.page);
@@ -47,15 +50,16 @@ export const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, init
         }
     };
     const renderPage = () => {
-        const Component = views[page] || views["NotFoundPage"] || (() => _jsx("div", { children: "404 Not Found" }));
-        return (_jsx(Page, { data: data, children: _jsx(Component, { data: data, navigateTo: navigateTo, params: params }) }));
+        const Component = views[page] || views["NotFoundPage"] || (() => (0, jsx_runtime_1.jsx)("div", { children: "404 Not Found" }));
+        return ((0, jsx_runtime_1.jsx)(Page_1.Page, { data: data, children: (0, jsx_runtime_1.jsx)(Component, { data: data, navigateTo: navigateTo, params: params }) }));
     };
     const content = renderPage();
-    return (_jsx(RouterProvider, { value: {
+    return ((0, jsx_runtime_1.jsx)(RouterContext_1.RouterProvider, { value: {
             navigateTo,
             currentPage: page,
             currentUrl: url,
             params,
             csrfToken,
-        }, children: Layout ? _jsx(Layout, { children: content }) : _jsx(_Fragment, { children: content }) }));
+        }, 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/lib/shared/hooks/useDynamicComponents.js

@@ -1,7 +1,10 @@
-import { useState, useEffect } from "react";
-export const useDynamicComponents = (loader) => {
-    const [component, setComponent] = useState(null);
-    useEffect(() => {
+"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) {
@@ -14,3 +17,4 @@ export const useDynamicComponents = (loader) => {
     }, []); // loader dependency omitted to avoid loops if loader is inline
     return component;
 };
+exports.useDynamicComponents = useDynamicComponents;

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

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

package/framework/lib/shared/hooks/useHead.js

@@ -1,3 +1,7 @@
-import { useContext } from "react";
-import { HeadContext } from "../context/HeadContext";
-export const useHead = () => useContext(HeadContext);
+"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/framework/lib/shared/hooks/useLocation.js

@@ -1,9 +1,13 @@
-import { useRouter } from "./useRouter";
-export const useLocation = () => {
-    const { currentUrl } = useRouter();
+"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/framework/lib/shared/hooks/usePage.js

@@ -1,3 +1,7 @@
-import { useContext } from "react";
-import { PageContext } from "../context/PageContext";
-export const usePage = () => useContext(PageContext);
+"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/framework/lib/shared/hooks/useParams.js

@@ -1,9 +1,13 @@
-import { useContext } from "react";
-import { RouterContext } from "../context/RouterContext";
-export const useParams = () => {
-    const context = useContext(RouterContext);
+"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/framework/lib/shared/hooks/useQuery.js

@@ -1,5 +1,9 @@
-import { useLocation } from "./useLocation";
-export const useQuery = () => {
-    const { search } = useLocation();
+"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/framework/lib/shared/hooks/useRouter.d.ts

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

package/framework/lib/shared/hooks/useRouter.js

@@ -1,9 +1,13 @@
-import { useContext } from "react";
-import { RouterContext } from "../context/RouterContext";
-export const useRouter = () => {
-    const context = useContext(RouterContext);
+"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/framework/lib/shared/utils/createSingletonContext.js

@@ -1,4 +1,7 @@
-import { createContext } from "react";
+"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
@@ -8,11 +11,11 @@ import { createContext } from "react";
  * @param defaultValue The default value for the context
  * @returns A React Context instance (singleton)
  */
-export function createSingletonContext(key, defaultValue) {
+function createSingletonContext(key, defaultValue) {
     const globalAny = global;
     const symbolKey = Symbol.for(`ARCANAJS_CONTEXT_${key}`);
     if (!globalAny[symbolKey]) {
-        globalAny[symbolKey] = createContext(defaultValue);
+        globalAny[symbolKey] = (0, react_1.createContext)(defaultValue);
     }
     return globalAny[symbolKey];
 }

package/framework/lib/shared/views/ErrorPage.d.ts

@@ -0,0 +1,7 @@
+interface ErrorPageProps {
+    message?: string;
+    statusCode?: number;
+    stack?: string;
+}
+export default function ErrorPage({ message, statusCode, stack, }: ErrorPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/framework/lib/shared/views/ErrorPage.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ErrorPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Page_1 = require("../components/Page");
+const Head_1 = require("../components/Head");
+const Body_1 = require("../components/Body");
+function ErrorPage({ message = "Something went wrong", statusCode = 500, stack, }) {
+    const isDevelopment = process.env.NODE_ENV === "development";
+    return ((0, jsx_runtime_1.jsxs)(Page_1.Page, { children: [(0, jsx_runtime_1.jsxs)(Head_1.Head, { children: [(0, jsx_runtime_1.jsxs)("title", { children: [statusCode, " - Server Error"] }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: "An error occurred on the server" })] }), (0, jsx_runtime_1.jsx)(Body_1.Body, { children: (0, jsx_runtime_1.jsx)("div", { className: "min-h-screen bg-red-50 flex flex-col justify-center items-center px-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-2xl w-full text-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-6xl mb-4", children: (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "\u26A0\uFE0F" }) }), (0, jsx_runtime_1.jsx)("h1", { className: "text-6xl font-bold text-red-500 mb-4", children: statusCode }), (0, jsx_runtime_1.jsx)("h2", { className: "text-2xl font-semibold text-gray-900 mb-2", children: "Server Error" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-600 mb-8", children: message })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("a", { href: "/", className: "inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), "Go Home"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => window.location.reload(), className: "block w-full px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5 inline mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }), "Try Again"] })] }), isDevelopment && stack && ((0, jsx_runtime_1.jsx)("div", { className: "mt-8 text-left", children: (0, jsx_runtime_1.jsxs)("details", { className: "bg-gray-100 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("summary", { className: "cursor-pointer font-medium text-gray-700 mb-2", children: "Stack Trace (Development Only)" }), (0, jsx_runtime_1.jsx)("pre", { className: "text-xs text-gray-600 overflow-x-auto whitespace-pre-wrap", children: stack })] }) })), (0, jsx_runtime_1.jsx)("div", { className: "mt-8 text-sm text-gray-500", children: (0, jsx_runtime_1.jsxs)("p", { children: ["If this problem persists, please", " ", (0, jsx_runtime_1.jsx)("a", { href: "/contact", className: "text-red-600 hover:text-red-500 underline", children: "contact support" }), "."] }) })] }) }) })] }));
+}

package/framework/lib/shared/views/NotFoundPage.d.ts

@@ -0,0 +1,5 @@
+interface NotFoundPageProps {
+    url?: string;
+}
+export default function NotFoundPage({ url }: NotFoundPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/framework/lib/shared/views/NotFoundPage.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = NotFoundPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Page_1 = require("../components/Page");
+const Head_1 = require("../components/Head");
+const Body_1 = require("../components/Body");
+function NotFoundPage({ url }) {
+    return ((0, jsx_runtime_1.jsxs)(Page_1.Page, { children: [(0, jsx_runtime_1.jsxs)(Head_1.Head, { children: [(0, jsx_runtime_1.jsx)("title", { children: "404 - Page Not Found" }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: "The page you're looking for doesn't exist" })] }), (0, jsx_runtime_1.jsx)(Body_1.Body, { children: (0, jsx_runtime_1.jsx)("div", { className: "min-h-screen bg-gray-50 flex flex-col justify-center items-center px-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-md w-full text-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-8", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-9xl font-bold text-gray-200 mb-4", children: "404" }), (0, jsx_runtime_1.jsx)("h2", { className: "text-2xl font-semibold text-gray-900 mb-2", children: "Page Not Found" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-600 mb-8", children: url
+                                            ? `The page "${url}" you're looking for doesn't exist.`
+                                            : "The page you're looking for doesn't exist." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("a", { href: "/", className: "inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), "Go Home"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => window.history.back(), className: "block w-full px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5 inline mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 19l-7-7m0 0l7-7m-7 7h18" }) }), "Go Back"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-8 text-sm text-gray-500", children: (0, jsx_runtime_1.jsxs)("p", { children: ["If you think this is an error, please", " ", (0, jsx_runtime_1.jsx)("a", { href: "/contact", className: "text-blue-600 hover:text-blue-500 underline", children: "contact us" }), "."] }) })] }) }) })] }));
+}

package/framework/templates/ErrorPage.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+import { Page, Head, Body } from "arcanajs";
+
+interface ErrorPageProps {
+  message?: string;
+  statusCode?: number;
+  stack?: string;
+}
+
+export default function ErrorPage({
+  message = "Something went wrong",
+  statusCode = 500,
+  stack,
+}: ErrorPageProps) {
+  const isDevelopment = process.env.NODE_ENV === "development";
+
+  return (
+    <Page>
+      <Head>
+        <title>{statusCode} - Server Error</title>
+        <meta name="description" content="An error occurred on the server" />
+      </Head>
+      <Body>
+        <div className="relative min-h-screen overflow-hidden bg-black text-white flex flex-col justify-center items-center px-4 font-sans">
+          {/* Animated Background */}
+          <div className="fixed inset-0 z-0 overflow-hidden pointer-events-none">
+            <div className="absolute inset-0 grid-pattern opacity-30"></div>
+            <div className="absolute top-1/4 right-1/4 w-96 h-96 bg-red-600 rounded-full opacity-20 blur-3xl animate-glow"></div>
+            <div
+              className="absolute bottom-1/4 left-1/4 w-96 h-96 bg-orange-600 rounded-full opacity-10 blur-3xl animate-glow"
+              style={{ animationDelay: "2s" }}
+            ></div>
+            <div className="absolute inset-0 hero-gradient"></div>
+          </div>
+
+          <div className="relative z-10 max-w-2xl w-full text-center animate-scale-in">
+            <div className="glass-card rounded-3xl p-12 border border-white/10 shadow-2xl">
+              <div className="mb-8">
+                <div className="text-6xl mb-6 animate-float">
+                  <span className="text-red-500 drop-shadow-lg filter">⚠️</span>
+                </div>
+                <h1 className="text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-red-500 to-orange-500 mb-4">
+                  {statusCode}
+                </h1>
+                <h2 className="text-3xl font-bold text-white mb-4">
+                  Server Error
+                </h2>
+                <p className="text-gray-400 text-lg leading-relaxed">
+                  {message}
+                </p>
+              </div>
+
+              <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
+                <a
+                  href="/"
+                  className="btn-primary px-8 py-3.5 text-white font-semibold rounded-xl inline-flex items-center justify-center gap-2 w-full sm:w-auto bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-500 hover:to-orange-500 border-none shadow-red-900/20"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+                    />
+                  </svg>
+                  Go Home
+                </a>
+
+                <button
+                  onClick={() => window.location.reload()}
+                  className="btn-secondary px-8 py-3.5 text-white font-semibold rounded-xl inline-flex items-center justify-center gap-2 w-full sm:w-auto"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                    />
+                  </svg>
+                  Try Again
+                </button>
+              </div>
+
+              {isDevelopment && stack && (
+                <div className="mt-8 text-left animate-slide-up">
+                  <details className="bg-black/40 border border-white/10 rounded-xl overflow-hidden group">
+                    <summary className="cursor-pointer font-medium text-gray-300 p-4 hover:bg-white/5 transition-colors flex items-center justify-between select-none">
+                      <span>Stack Trace (Development Only)</span>
+                      <svg
+                        className="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 9l-7 7-7-7"
+                        />
+                      </svg>
+                    </summary>
+                    <pre className="text-xs text-red-300/80 p-4 overflow-x-auto whitespace-pre-wrap font-mono border-t border-white/5 bg-black/20">
+                      {stack}
+                    </pre>
+                  </details>
+                </div>
+              )}
+            </div>
+
+            <div className="mt-8 text-gray-500 text-sm">
+              If this problem persists, please{" "}
+              <a
+                href="/contact"
+                className="text-red-400 hover:text-red-300 underline transition-colors"
+              >
+                contact support
+              </a>
+              .
+            </div>
+          </div>
+        </div>
+      </Body>
+    </Page>
+  );
+}