@alepha/react 0.7.0 → 0.7.1

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

@@ -1,6 +1,6 @@
-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';
@@ -26,27 +26,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 = []) => {
@@ -144,14 +278,19 @@ const NestedView = (props) => {
 };
 
 class RedirectionError extends Error {
+  page;
   constructor(page) {
     super("Redirection");
     this.page = page;
   }
 }
 
+const envSchema$1 = t.object({
+  REACT_STRICT_MODE: t.boolean({ default: true })
+});
 class PageDescriptorProvider {
   log = $logger();
+  env = $inject(envSchema$1);
   alepha = $inject(Alepha);
   pages = [];
   getPages() {
@@ -165,8 +304,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 +333,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 +443,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 +471,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 +527,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 +553,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,7 +568,7 @@ class PageDescriptorProvider {
           path
         }
       },
-      view
+      element
     );
   }
   configure = $hook({
@@ -408,6 +577,8 @@ class PageDescriptorProvider {
       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;
         }
@@ -417,11 +588,6 @@ class PageDescriptorProvider {
   });
   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,
@@ -733,7 +899,7 @@ class ReactBrowserProvider {
       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);
         }
       }
@@ -769,7 +935,8 @@ 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;
@@ -823,23 +990,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 +1051,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 +1067,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 +1077,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 +1130,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 +1164,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 +1182,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 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@alepha/react",
-	"version": "0.7.0",
+	"version": "0.7.1",
 	"type": "module",
 	"license": "MIT",
 	"main": "./dist/index.js",
@@ -13,25 +13,26 @@
 		"src"
 	],
 	"dependencies": {
-		"@alepha/core": "0.7.0",
-		"@alepha/router": "0.7.0",
-		"@alepha/server": "0.7.0",
-		"@alepha/server-static": "0.7.0",
+		"@alepha/core": "0.7.1",
+		"@alepha/router": "0.7.1",
+		"@alepha/server": "0.7.1",
+		"@alepha/server-static": "0.7.1",
 		"react-dom": "^19.1.0"
 	},
 	"devDependencies": {
-		"@types/react": "^19.1.6",
-		"@types/react-dom": "^19.1.5",
-		"pkgroll": "^2.12.2",
+		"@types/react": "^19.1.8",
+		"@types/react-dom": "^19.1.6",
+		"pkgroll": "^2.13.1",
 		"react": "^19.1.0",
-		"vitest": "^3.1.4"
+		"vitest": "^3.2.4"
 	},
 	"peerDependencies": {
 		"@types/react": "^19",
 		"react": "^19"
 	},
 	"scripts": {
-		"build": "pkgroll --clean-dist --sourcemap"
+		"test": "vitest run",
+		"build": "pkgroll --clean-dist"
 	},
 	"homepage": "https://github.com/feunard/alepha",
 	"repository": {

package/src/components/ClientOnly.tsx

@@ -0,0 +1,35 @@
+import {
+	type PropsWithChildren,
+	type ReactNode,
+	useEffect,
+	useState,
+} from "react";
+
+export interface ClientOnlyProps {
+	fallback?: ReactNode;
+	disabled?: boolean;
+}
+
+/**
+ * A small utility component that renders its children only on the client side.
+ *
+ * Optionally, you can provide a fallback React node that will be rendered.
+ *
+ * You should use this component when
+ * - you have code that relies on browser-specific APIs
+ * - you want to avoid server-side rendering for a specific part of your application
+ * - you want to prevent pre-rendering of a component
+ */
+const ClientOnly = (props: PropsWithChildren<ClientOnlyProps>) => {
+	const [mounted, setMounted] = useState(false);
+
+	useEffect(() => setMounted(true), []);
+
+	if (props.disabled) {
+		return props.children;
+	}
+
+	return mounted ? props.children : props.fallback;
+};
+
+export default ClientOnly;

package/src/components/ErrorBoundary.tsx

@@ -1,7 +1,7 @@
 import React, {
-	type ReactNode,
 	type ErrorInfo,
 	type PropsWithChildren,
+	type ReactNode,
 } from "react";
 
 /**