@alepha/react 0.7.0 → 0.7.1

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

@@ -28,27 +28,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 = []) => {
@@ -146,14 +280,19 @@ const NestedView = (props) => {
 };
 
 class RedirectionError extends Error {
+  page;
   constructor(page) {
     super("Redirection");
     this.page = page;
   }
 }
 
+const envSchema$1 = core.t.object({
+  REACT_STRICT_MODE: core.t.boolean({ default: true })
+});
 class PageDescriptorProvider {
   log = core.$logger();
+  env = core.$inject(envSchema$1);
   alepha = core.$inject(core.Alepha);
   pages = [];
   getPages() {
@@ -167,8 +306,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 +335,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 +445,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 +473,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 +529,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 +555,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,7 +570,7 @@ class PageDescriptorProvider {
           path
         }
       },
-      view
+      element
     );
   }
   configure = core.$hook({
@@ -410,6 +579,8 @@ class PageDescriptorProvider {
       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;
         }
@@ -419,11 +590,6 @@ class PageDescriptorProvider {
   });
   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,
@@ -735,7 +901,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);
         }
       }
@@ -771,7 +937,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;
@@ -825,23 +992,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 +1053,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 +1069,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 +1079,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 +1132,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 +1166,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 +1184,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 +1198,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