@alepha/react 0.7.0 → 0.7.2

package/dist/{useActive-BX41CqY8.js → useRouterState-D5__ZcUV.js}

@@ -1,8 +1,7 @@
-import { jsx } from 'react/jsx-runtime';
-import { __descriptor, OPTIONS, NotImplementedError, KIND, $logger, $inject, Alepha, $hook, t } from '@alepha/core';
-import React, { createContext, useContext, useEffect, useState, createElement, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { __descriptor, OPTIONS, NotImplementedError, KIND, t, $logger, $inject, Alepha, $hook } from '@alepha/core';
+import React, { useState, useEffect, createContext, useContext, createElement, StrictMode, useMemo } from 'react';
 import { HttpClient } from '@alepha/server';
-import { hydrateRoot, createRoot } from 'react-dom/client';
 import { RouterProvider } from '@alepha/router';
 
 const KEY = "PAGE";
@@ -26,27 +25,161 @@ const $page = (options) => {
     [OPTIONS]: options,
     render: () => {
       throw new NotImplementedError(KEY);
-    },
-    go: () => {
-      throw new NotImplementedError(KEY);
-    },
-    createAnchorProps: () => {
-      throw new NotImplementedError(KEY);
-    },
-    can: () => {
-      if (options.can) {
-        return options.can();
-      }
-      return true;
     }
   };
 };
 $page[KIND] = KEY;
 
+const ClientOnly = (props) => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (props.disabled) {
+    return props.children;
+  }
+  return mounted ? props.children : props.fallback;
+};
+
 const RouterContext = createContext(
   void 0
 );
 
+const useAlepha = () => {
+  const routerContext = useContext(RouterContext);
+  if (!routerContext) {
+    throw new Error("useAlepha must be used within a RouterProvider");
+  }
+  return routerContext.alepha;
+};
+
+const ErrorViewer = ({ error }) => {
+  const [expanded, setExpanded] = useState(false);
+  const isProduction = useAlepha().isProduction();
+  if (isProduction) {
+    return /* @__PURE__ */ jsx(ErrorViewerProduction, {});
+  }
+  const stackLines = error.stack?.split("\n") ?? [];
+  const previewLines = stackLines.slice(0, 5);
+  const hiddenLineCount = stackLines.length - previewLines.length;
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text).catch((err) => {
+      console.error("Clipboard error:", err);
+    });
+  };
+  const styles = {
+    container: {
+      padding: "24px",
+      backgroundColor: "#FEF2F2",
+      color: "#7F1D1D",
+      border: "1px solid #FECACA",
+      borderRadius: "16px",
+      boxShadow: "0 8px 24px rgba(0,0,0,0.05)",
+      fontFamily: "monospace",
+      maxWidth: "768px",
+      margin: "40px auto"
+    },
+    heading: {
+      fontSize: "20px",
+      fontWeight: "bold",
+      marginBottom: "4px"
+    },
+    name: {
+      fontSize: "16px",
+      fontWeight: 600
+    },
+    message: {
+      fontSize: "14px",
+      marginBottom: "16px"
+    },
+    sectionHeader: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      fontSize: "12px",
+      marginBottom: "4px",
+      color: "#991B1B"
+    },
+    copyButton: {
+      fontSize: "12px",
+      color: "#DC2626",
+      background: "none",
+      border: "none",
+      cursor: "pointer",
+      textDecoration: "underline"
+    },
+    stackContainer: {
+      backgroundColor: "#FEE2E2",
+      padding: "12px",
+      borderRadius: "8px",
+      fontSize: "13px",
+      lineHeight: "1.4",
+      overflowX: "auto",
+      whiteSpace: "pre-wrap"
+    },
+    expandLine: {
+      color: "#F87171",
+      cursor: "pointer",
+      marginTop: "8px"
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: styles.heading, children: "\u{1F525} Error" }),
+      /* @__PURE__ */ jsx("div", { style: styles.name, children: error.name }),
+      /* @__PURE__ */ jsx("div", { style: styles.message, children: error.message })
+    ] }),
+    stackLines.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: styles.sectionHeader, children: [
+        /* @__PURE__ */ jsx("span", { children: "Stack trace" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => copyToClipboard(error.stack),
+            style: styles.copyButton,
+            children: "Copy all"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("pre", { style: styles.stackContainer, children: [
+        (expanded ? stackLines : previewLines).map((line, i) => /* @__PURE__ */ jsx("div", { children: line }, i)),
+        !expanded && hiddenLineCount > 0 && /* @__PURE__ */ jsxs("div", { style: styles.expandLine, onClick: () => setExpanded(true), children: [
+          "+ ",
+          hiddenLineCount,
+          " more lines..."
+        ] })
+      ] })
+    ] })
+  ] });
+};
+const ErrorViewerProduction = () => {
+  const styles = {
+    container: {
+      padding: "24px",
+      backgroundColor: "#FEF2F2",
+      color: "#7F1D1D",
+      border: "1px solid #FECACA",
+      borderRadius: "16px",
+      boxShadow: "0 8px 24px rgba(0,0,0,0.05)",
+      fontFamily: "monospace",
+      maxWidth: "768px",
+      margin: "40px auto",
+      textAlign: "center"
+    },
+    heading: {
+      fontSize: "20px",
+      fontWeight: "bold",
+      marginBottom: "8px"
+    },
+    message: {
+      fontSize: "14px",
+      opacity: 0.85
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx("div", { style: styles.heading, children: "\u{1F6A8} An error occurred" }),
+    /* @__PURE__ */ jsx("div", { style: styles.message, children: "Something went wrong. Please try again later." })
+  ] });
+};
+
 const RouterLayerContext = createContext(void 0);
 
 const useRouterEvents = (opts = {}, deps = []) => {
@@ -143,15 +276,53 @@ const NestedView = (props) => {
   return /* @__PURE__ */ jsx(ErrorBoundary, { fallback: app.context.onError, children: element });
 };
 
+function NotFoundPage() {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        textAlign: "center",
+        fontFamily: "sans-serif",
+        padding: "1rem"
+      },
+      children: [
+        /* @__PURE__ */ jsx("h1", { style: { fontSize: "1rem", marginBottom: "0.5rem" }, children: "This page does not exist" }),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "/",
+            style: {
+              fontSize: "0.7rem",
+              color: "#007bff",
+              textDecoration: "none"
+            },
+            children: "\u2190 Back to home"
+          }
+        )
+      ]
+    }
+  );
+}
+
 class RedirectionError extends Error {
+  page;
   constructor(page) {
     super("Redirection");
     this.page = page;
   }
 }
 
+const envSchema = t.object({
+  REACT_STRICT_MODE: t.boolean({ default: true })
+});
 class PageDescriptorProvider {
   log = $logger();
+  env = $inject(envSchema);
   alepha = $inject(Alepha);
   pages = [];
   getPages() {
@@ -165,8 +336,25 @@ class PageDescriptorProvider {
     }
     throw new Error(`Page ${name} not found`);
   }
+  url(name, options = {}) {
+    const page = this.page(name);
+    if (!page) {
+      throw new Error(`Page ${name} not found`);
+    }
+    let url = page.path ?? "";
+    let parent = page.parent;
+    while (parent) {
+      url = `${parent.path ?? ""}/${url}`;
+      parent = parent.parent;
+    }
+    url = this.compile(url, options.params ?? {});
+    return new URL(
+      url.replace(/\/\/+/g, "/") || "/",
+      options.base ?? `http://localhost`
+    );
+  }
   root(state, context) {
-    return createElement(
+    const root = createElement(
       RouterContext.Provider,
       {
         value: {
@@ -177,13 +365,17 @@ class PageDescriptorProvider {
       },
       createElement(NestedView, {}, state.layers[0]?.element)
     );
+    if (this.env.REACT_STRICT_MODE) {
+      return createElement(StrictMode, {}, root);
+    }
+    return root;
   }
   async createLayers(route, request) {
     const { pathname, search } = request.url;
     const layers = [];
     let context = {};
     const stack = [{ route }];
-    let onError = this.renderError;
+    request.onError = (error) => this.renderError(error);
     let parent = route.parent;
     while (parent) {
       stack.unshift({ route: parent });
@@ -283,23 +475,26 @@ class PageDescriptorProvider {
       const path = acc.replace(/\/+/, "/");
       const localErrorHandler = this.getErrorHandler(it.route);
       if (localErrorHandler) {
-        onError = localErrorHandler;
+        request.onError = localErrorHandler;
       }
       if (it.error) {
-        const element = await onError(it.error);
+        let element2 = await request.onError(it.error);
+        if (element2 === null) {
+          element2 = this.renderError(it.error);
+        }
         layers.push({
           props,
           error: it.error,
           name: it.route.name,
           part: it.route.path,
           config: it.config,
-          element: this.renderView(i + 1, path, element),
+          element: this.renderView(i + 1, path, element2, it.route),
           index: i + 1,
           path
         });
         break;
       }
-      const layer = await this.createElement(it.route, {
+      const element = await this.createElement(it.route, {
         ...props,
         ...context
       });
@@ -308,7 +503,7 @@ class PageDescriptorProvider {
         props,
         part: it.route.path,
         config: it.config,
-        element: this.renderView(i + 1, path, layer),
+        element: this.renderView(i + 1, path, element, it.route),
         index: i + 1,
         path
       });
@@ -364,8 +559,8 @@ class PageDescriptorProvider {
       ctx.head.meta = [...ctx.head.meta ?? [], ...head.meta ?? []];
     }
   }
-  renderError(e) {
-    return createElement("pre", { style: { overflow: "auto" } }, `${e.stack}`);
+  renderError(error) {
+    return createElement(ErrorViewer, { error });
   }
   renderEmptyView() {
     return createElement(NestedView, {});
@@ -390,7 +585,13 @@ class PageDescriptorProvider {
     }
     return path;
   }
-  renderView(index, path, view = this.renderEmptyView()) {
+  renderView(index, path, view, page) {
+    view ??= this.renderEmptyView();
+    const element = page.client ? createElement(
+      ClientOnly,
+      typeof page.client === "object" ? page.client : {},
+      view
+    ) : view;
     return createElement(
       RouterLayerContext.Provider,
       {
@@ -399,29 +600,41 @@ class PageDescriptorProvider {
           path
         }
       },
-      view
+      element
     );
   }
   configure = $hook({
     name: "configure",
     handler: () => {
+      let hasNotFoundHandler = false;
       const pages = this.alepha.getDescriptorValues($page);
       for (const { value, key } of pages) {
         value[OPTIONS].name ??= key;
+      }
+      for (const { value } of pages) {
         if (value[OPTIONS].parent) {
           continue;
         }
+        if (value[OPTIONS].path === "/*") {
+          hasNotFoundHandler = true;
+        }
         this.add(this.map(pages, value));
       }
+      if (!hasNotFoundHandler && pages.length > 0) {
+        this.add({
+          path: "/*",
+          name: "notFound",
+          cache: true,
+          component: NotFoundPage,
+          afterHandler: ({ reply }) => {
+            reply.status = 404;
+          }
+        });
+      }
     }
   });
   map(pages, target) {
     const children = target[OPTIONS].children ?? [];
-    for (const it of pages) {
-      if (it.value[OPTIONS].parent === target) {
-        children.push(it.value);
-      }
-    }
     return {
       ...target[OPTIONS],
       parent: void 0,
@@ -570,7 +783,7 @@ class BrowserRouterProvider extends RouterProvider {
       if (state.layers.length === 0) {
         state.layers.push({
           name: "not-found",
-          element: "Not Found",
+          element: createElement(NotFoundPage),
           index: 0,
           path: "/"
         });
@@ -611,16 +824,12 @@ class BrowserRouterProvider extends RouterProvider {
   }
 }
 
-const envSchema = t.object({
-  REACT_ROOT_ID: t.string({ default: "root" })
-});
 class ReactBrowserProvider {
   log = $logger();
   client = $inject(HttpClient);
   alepha = $inject(Alepha);
   router = $inject(BrowserRouterProvider);
   headProvider = $inject(BrowserHeadProvider);
-  env = $inject(envSchema);
   root;
   transitioning;
   state = {
@@ -658,11 +867,6 @@ class ReactBrowserProvider {
     }
     await this.render({ previous });
   }
-  /**
-   *
-   * @param url
-   * @param options
-   */
   async go(url, options = {}) {
     const result = await this.render({
       url
@@ -696,8 +900,6 @@ class ReactBrowserProvider {
   }
   /**
    * Get embedded layers from the server.
-   *
-   * @protected
    */
   getHydrationState() {
     try {
@@ -708,32 +910,14 @@ class ReactBrowserProvider {
       console.error(error);
     }
   }
-  /**
-   *
-   * @protected
-   */
-  getRootElement() {
-    const root = this.document.getElementById(this.env.REACT_ROOT_ID);
-    if (root) {
-      return root;
-    }
-    const div = this.document.createElement("div");
-    div.id = this.env.REACT_ROOT_ID;
-    this.document.body.prepend(div);
-    return div;
-  }
   // -------------------------------------------------------------------------------------------------------------------
-  /**
-   *
-   * @protected
-   */
   ready = $hook({
     name: "ready",
     handler: async () => {
       const hydration = this.getHydrationState();
       const previous = hydration?.layers ?? [];
       if (hydration?.links) {
-        for (const link of hydration.links) {
+        for (const link of hydration.links.links) {
           this.client.pushLink(link);
         }
       }
@@ -746,15 +930,6 @@ class ReactBrowserProvider {
         context,
         hydration
       });
-      const element = this.router.root(this.state, context);
-      if (previous.length > 0) {
-        this.root = hydrateRoot(this.getRootElement(), element);
-        this.log.info("Hydrated root element");
-      } else {
-        this.root ??= createRoot(this.getRootElement());
-        this.root.render(element);
-        this.log.info("Created root element");
-      }
       window.addEventListener("popstate", () => {
         this.render();
       });
@@ -769,26 +944,18 @@ class ReactBrowserProvider {
 }
 
 class RouterHookApi {
-  constructor(state, layer, browser) {
+  constructor(pages, state, layer, browser) {
+    this.pages = pages;
     this.state = state;
     this.layer = layer;
     this.browser = browser;
   }
-  /**
-   *
-   */
   get current() {
     return this.state;
   }
-  /**
-   *
-   */
   get pathname() {
     return this.state.pathname;
   }
-  /**
-   *
-   */
   get query() {
     const query = {};
     for (const [key, value] of new URLSearchParams(
@@ -798,22 +965,12 @@ class RouterHookApi {
     }
     return query;
   }
-  /**
-   *
-   */
   async back() {
     this.browser?.history.back();
   }
-  /**
-   *
-   */
   async forward() {
     this.browser?.history.forward();
   }
-  /**
-   *
-   * @param props
-   */
   async invalidate(props) {
     await this.browser?.invalidate(props);
   }
@@ -823,23 +980,40 @@ class RouterHookApi {
    * @param pathname
    * @param layer
    */
-  createHref(pathname, layer = this.layer) {
+  createHref(pathname, layer = this.layer, options = {}) {
     if (typeof pathname === "object") {
       pathname = pathname.options.path ?? "";
     }
+    if (options.params) {
+      for (const [key, value] of Object.entries(options.params)) {
+        pathname = pathname.replace(`:${key}`, String(value));
+      }
+    }
     return pathname.startsWith("/") ? pathname : `${layer.path}/${pathname}`.replace(/\/\/+/g, "/");
   }
   async go(path, options) {
-    await this.browser?.go(this.createHref(path, this.layer), options);
+    for (const page of this.pages) {
+      if (page.name === path) {
+        path = page.path ?? "";
+        break;
+      }
+    }
+    await this.browser?.go(this.createHref(path, this.layer, options), options);
   }
-  anchor(path) {
-    const href = this.createHref(path, this.layer);
+  anchor(path, options = {}) {
+    for (const page of this.pages) {
+      if (page.name === path) {
+        path = page.path ?? "";
+        break;
+      }
+    }
+    const href = this.createHref(path, this.layer, options);
     return {
       href,
       onClick: (ev) => {
         ev.stopPropagation();
         ev.preventDefault();
-        this.go(path).catch(console.error);
+        this.go(path, options).catch(console.error);
       }
     };
   }
@@ -867,8 +1041,12 @@ const useRouter = () => {
   if (!ctx || !layer) {
     throw new Error("useRouter must be used within a RouterProvider");
   }
+  const pages = useMemo(() => {
+    return ctx.alepha.get(PageDescriptorProvider).getPages();
+  }, []);
   return useMemo(
     () => new RouterHookApi(
+      pages,
       ctx.state,
       layer,
       ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0
@@ -879,6 +1057,7 @@ const useRouter = () => {
 
 const Link = (props) => {
   React.useContext(RouterContext);
+  const router = useRouter();
   const to = typeof props.to === "string" ? props.to : props.to[OPTIONS].path;
   if (!to) {
     return null;
@@ -888,8 +1067,49 @@ const Link = (props) => {
     return null;
   }
   const name = typeof props.to === "string" ? void 0 : props.to[OPTIONS].name;
+  const anchorProps = {
+    ...props,
+    to: void 0
+  };
+  return /* @__PURE__ */ jsx("a", { ...router.anchor(to), ...anchorProps, children: props.children ?? name });
+};
+
+const useActive = (path) => {
   const router = useRouter();
-  return /* @__PURE__ */ jsx("a", { ...router.anchor(to), ...props, children: props.children ?? name });
+  const ctx = useContext(RouterContext);
+  const layer = useContext(RouterLayerContext);
+  if (!ctx || !layer) {
+    throw new Error("useRouter must be used within a RouterProvider");
+  }
+  let name;
+  if (typeof path === "object" && path.options.name) {
+    name = path.options.name;
+  }
+  const [current, setCurrent] = useState(ctx.state.pathname);
+  const href = useMemo(() => router.createHref(path, layer), [path, layer]);
+  const [isPending, setPending] = useState(false);
+  const isActive = current === href;
+  useRouterEvents({
+    onEnd: ({ state }) => setCurrent(state.pathname)
+  });
+  return {
+    name,
+    isPending,
+    isActive,
+    anchorProps: {
+      href,
+      onClick: (ev) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        if (isActive) return;
+        if (isPending) return;
+        setPending(true);
+        router.go(href).then(() => {
+          setPending(false);
+        });
+      }
+    }
+  };
 };
 
 const useInject = (clazz) => {
@@ -900,10 +1120,7 @@ const useInject = (clazz) => {
   return useMemo(() => ctx.alepha.get(clazz), []);
 };
 
-const useClient = () => {
-  return useInject(HttpClient);
-};
-const useApi = () => {
+const useClient = (_scope) => {
   return useInject(HttpClient).of();
 };
 
@@ -937,7 +1154,7 @@ const encode = (alepha, schema, data) => {
 const decode = (alepha, schema, data) => {
   try {
     return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
-  } catch (error) {
+  } catch (_error) {
     return {};
   }
 };
@@ -955,43 +1172,4 @@ const useRouterState = () => {
   return state;
 };
 
-const useActive = (path) => {
-  const router = useRouter();
-  const ctx = useContext(RouterContext);
-  const layer = useContext(RouterLayerContext);
-  if (!ctx || !layer) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-  let name;
-  if (typeof path === "object" && path.options.name) {
-    name = path.options.name;
-  }
-  const [current, setCurrent] = useState(ctx.state.pathname);
-  const href = useMemo(() => router.createHref(path, layer), [path, layer]);
-  const [isPending, setPending] = useState(false);
-  const isActive = current === href;
-  useRouterEvents({
-    onEnd: ({ state }) => setCurrent(state.pathname)
-  });
-  return {
-    name,
-    isPending,
-    isActive,
-    anchorProps: {
-      href,
-      onClick: (ev) => {
-        ev.stopPropagation();
-        ev.preventDefault();
-        if (isActive) return;
-        if (isPending) return;
-        setPending(true);
-        router.go(href).then(() => {
-          setPending(false);
-        });
-      }
-    }
-  };
-};
-
-export { $page as $, BrowserRouterProvider as B, ErrorBoundary as E, Link as L, NestedView as N, PageDescriptorProvider as P, RouterContext as R, RouterLayerContext as a, RouterHookApi as b, useClient as c, useApi as d, useQueryParams as e, useRouter as f, useRouterEvents as g, useRouterState as h, useActive as i, RedirectionError as j, isPageRoute as k, ReactBrowserProvider as l, useInject as u };
-//# sourceMappingURL=useActive-BX41CqY8.js.map
+export { $page as $, BrowserRouterProvider as B, ClientOnly as C, ErrorBoundary as E, Link as L, NestedView as N, PageDescriptorProvider as P, RedirectionError as R, RouterContext as a, RouterLayerContext as b, RouterHookApi as c, useAlepha as d, useClient as e, useInject as f, useQueryParams as g, useRouter as h, useRouterEvents as i, useRouterState as j, isPageRoute as k, ReactBrowserProvider as l, useActive as u };