@alepha/react 0.7.0 → 0.7.2

package/dist/{useActive-DjpZBEuB.cjs → useRouterState-C2uo0jXu.cjs}

@@ -4,7 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@alepha/core');
 var React = require('react');
 var server = require('@alepha/server');
-var client = require('react-dom/client');
 var router = require('@alepha/router');
 
 const KEY = "PAGE";
@@ -28,27 +27,161 @@ const $page = (options) => {
     [core.OPTIONS]: options,
     render: () => {
       throw new core.NotImplementedError(KEY);
-    },
-    go: () => {
-      throw new core.NotImplementedError(KEY);
-    },
-    createAnchorProps: () => {
-      throw new core.NotImplementedError(KEY);
-    },
-    can: () => {
-      if (options.can) {
-        return options.can();
-      }
-      return true;
     }
   };
 };
 $page[core.KIND] = KEY;
 
+const ClientOnly = (props) => {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
+  if (props.disabled) {
+    return props.children;
+  }
+  return mounted ? props.children : props.fallback;
+};
+
 const RouterContext = React.createContext(
   void 0
 );
 
+const useAlepha = () => {
+  const routerContext = React.useContext(RouterContext);
+  if (!routerContext) {
+    throw new Error("useAlepha must be used within a RouterProvider");
+  }
+  return routerContext.alepha;
+};
+
+const ErrorViewer = ({ error }) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const isProduction = useAlepha().isProduction();
+  if (isProduction) {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.heading, children: "\u{1F525} Error" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.name, children: error.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.message, children: error.message })
+    ] }),
+    stackLines.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.sectionHeader, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Stack trace" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => copyToClipboard(error.stack),
+            style: styles.copyButton,
+            children: "Copy all"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("pre", { style: styles.stackContainer, children: [
+        (expanded ? stackLines : previewLines).map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: line }, i)),
+        !expanded && hiddenLineCount > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.heading, children: "\u{1F6A8} An error occurred" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.message, children: "Something went wrong. Please try again later." })
+  ] });
+};
+
 const RouterLayerContext = React.createContext(void 0);
 
 const useRouterEvents = (opts = {}, deps = []) => {
@@ -145,15 +278,53 @@ const NestedView = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { fallback: app.context.onError, children: element });
 };
 
+function NotFoundPage() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        textAlign: "center",
+        fontFamily: "sans-serif",
+        padding: "1rem"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: "1rem", marginBottom: "0.5rem" }, children: "This page does not exist" }),
+        /* @__PURE__ */ jsxRuntime.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 = core.t.object({
+  REACT_STRICT_MODE: core.t.boolean({ default: true })
+});
 class PageDescriptorProvider {
   log = core.$logger();
+  env = core.$inject(envSchema);
   alepha = core.$inject(core.Alepha);
   pages = [];
   getPages() {
@@ -167,8 +338,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 React.createElement(
+    const root = React.createElement(
       RouterContext.Provider,
       {
         value: {
@@ -179,13 +367,17 @@ class PageDescriptorProvider {
       },
       React.createElement(NestedView, {}, state.layers[0]?.element)
     );
+    if (this.env.REACT_STRICT_MODE) {
+      return React.createElement(React.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 });
@@ -285,23 +477,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
       });
@@ -310,7 +505,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
       });
@@ -366,8 +561,8 @@ class PageDescriptorProvider {
       ctx.head.meta = [...ctx.head.meta ?? [], ...head.meta ?? []];
     }
   }
-  renderError(e) {
-    return React.createElement("pre", { style: { overflow: "auto" } }, `${e.stack}`);
+  renderError(error) {
+    return React.createElement(ErrorViewer, { error });
   }
   renderEmptyView() {
     return React.createElement(NestedView, {});
@@ -392,7 +587,13 @@ class PageDescriptorProvider {
     }
     return path;
   }
-  renderView(index, path, view = this.renderEmptyView()) {
+  renderView(index, path, view, page) {
+    view ??= this.renderEmptyView();
+    const element = page.client ? React.createElement(
+      ClientOnly,
+      typeof page.client === "object" ? page.client : {},
+      view
+    ) : view;
     return React.createElement(
       RouterLayerContext.Provider,
       {
@@ -401,29 +602,41 @@ class PageDescriptorProvider {
           path
         }
       },
-      view
+      element
     );
   }
   configure = core.$hook({
     name: "configure",
     handler: () => {
+      let hasNotFoundHandler = false;
       const pages = this.alepha.getDescriptorValues($page);
       for (const { value, key } of pages) {
         value[core.OPTIONS].name ??= key;
+      }
+      for (const { value } of pages) {
         if (value[core.OPTIONS].parent) {
           continue;
         }
+        if (value[core.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[core.OPTIONS].children ?? [];
-    for (const it of pages) {
-      if (it.value[core.OPTIONS].parent === target) {
-        children.push(it.value);
-      }
-    }
     return {
       ...target[core.OPTIONS],
       parent: void 0,
@@ -572,7 +785,7 @@ class BrowserRouterProvider extends router.RouterProvider {
       if (state.layers.length === 0) {
         state.layers.push({
           name: "not-found",
-          element: "Not Found",
+          element: React.createElement(NotFoundPage),
           index: 0,
           path: "/"
         });
@@ -613,16 +826,12 @@ class BrowserRouterProvider extends router.RouterProvider {
   }
 }
 
-const envSchema = core.t.object({
-  REACT_ROOT_ID: core.t.string({ default: "root" })
-});
 class ReactBrowserProvider {
   log = core.$logger();
   client = core.$inject(server.HttpClient);
   alepha = core.$inject(core.Alepha);
   router = core.$inject(BrowserRouterProvider);
   headProvider = core.$inject(BrowserHeadProvider);
-  env = core.$inject(envSchema);
   root;
   transitioning;
   state = {
@@ -660,11 +869,6 @@ class ReactBrowserProvider {
     }
     await this.render({ previous });
   }
-  /**
-   *
-   * @param url
-   * @param options
-   */
   async go(url, options = {}) {
     const result = await this.render({
       url
@@ -698,8 +902,6 @@ class ReactBrowserProvider {
   }
   /**
    * Get embedded layers from the server.
-   *
-   * @protected
    */
   getHydrationState() {
     try {
@@ -710,32 +912,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 = core.$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);
         }
       }
@@ -748,15 +932,6 @@ class ReactBrowserProvider {
         context,
         hydration
       });
-      const element = this.router.root(this.state, context);
-      if (previous.length > 0) {
-        this.root = client.hydrateRoot(this.getRootElement(), element);
-        this.log.info("Hydrated root element");
-      } else {
-        this.root ??= client.createRoot(this.getRootElement());
-        this.root.render(element);
-        this.log.info("Created root element");
-      }
       window.addEventListener("popstate", () => {
         this.render();
       });
@@ -771,26 +946,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(
@@ -800,22 +967,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);
   }
@@ -825,23 +982,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);
       }
     };
   }
@@ -869,8 +1043,12 @@ const useRouter = () => {
   if (!ctx || !layer) {
     throw new Error("useRouter must be used within a RouterProvider");
   }
+  const pages = React.useMemo(() => {
+    return ctx.alepha.get(PageDescriptorProvider).getPages();
+  }, []);
   return React.useMemo(
     () => new RouterHookApi(
+      pages,
       ctx.state,
       layer,
       ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0
@@ -881,6 +1059,7 @@ const useRouter = () => {
 
 const Link = (props) => {
   React.useContext(RouterContext);
+  const router = useRouter();
   const to = typeof props.to === "string" ? props.to : props.to[core.OPTIONS].path;
   if (!to) {
     return null;
@@ -890,8 +1069,49 @@ const Link = (props) => {
     return null;
   }
   const name = typeof props.to === "string" ? void 0 : props.to[core.OPTIONS].name;
+  const anchorProps = {
+    ...props,
+    to: void 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { ...router.anchor(to), ...anchorProps, children: props.children ?? name });
+};
+
+const useActive = (path) => {
   const router = useRouter();
-  return /* @__PURE__ */ jsxRuntime.jsx("a", { ...router.anchor(to), ...props, children: props.children ?? name });
+  const ctx = React.useContext(RouterContext);
+  const layer = React.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] = React.useState(ctx.state.pathname);
+  const href = React.useMemo(() => router.createHref(path, layer), [path, layer]);
+  const [isPending, setPending] = React.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) => {
@@ -902,10 +1122,7 @@ const useInject = (clazz) => {
   return React.useMemo(() => ctx.alepha.get(clazz), []);
 };
 
-const useClient = () => {
-  return useInject(server.HttpClient);
-};
-const useApi = () => {
+const useClient = (_scope) => {
   return useInject(server.HttpClient).of();
 };
 
@@ -939,7 +1156,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 {};
   }
 };
@@ -957,46 +1174,9 @@ const useRouterState = () => {
   return state;
 };
 
-const useActive = (path) => {
-  const router = useRouter();
-  const ctx = React.useContext(RouterContext);
-  const layer = React.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] = React.useState(ctx.state.pathname);
-  const href = React.useMemo(() => router.createHref(path, layer), [path, layer]);
-  const [isPending, setPending] = React.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);
-        });
-      }
-    }
-  };
-};
-
 exports.$page = $page;
 exports.BrowserRouterProvider = BrowserRouterProvider;
+exports.ClientOnly = ClientOnly;
 exports.ErrorBoundary = ErrorBoundary;
 exports.Link = Link;
 exports.NestedView = NestedView;
@@ -1008,11 +1188,10 @@ exports.RouterHookApi = RouterHookApi;
 exports.RouterLayerContext = RouterLayerContext;
 exports.isPageRoute = isPageRoute;
 exports.useActive = useActive;
-exports.useApi = useApi;
+exports.useAlepha = useAlepha;
 exports.useClient = useClient;
 exports.useInject = useInject;
 exports.useQueryParams = useQueryParams;
 exports.useRouter = useRouter;
 exports.useRouterEvents = useRouterEvents;
 exports.useRouterState = useRouterState;
-//# sourceMappingURL=useActive-DjpZBEuB.cjs.map