@alepha/react 0.7.4 → 0.7.5

package/dist/index.js

@@ -1,14 +1,14 @@
 import { t, $logger, $inject, Alepha, $hook, OPTIONS, __bind } from '@alepha/core';
-import { ServerRouterProvider, ServerTimingProvider, ServerLinksProvider, apiLinksResponseSchema, HttpClient, AlephaServer } from '@alepha/server';
+import { ServerRouterProvider, ServerTimingProvider, ServerLinksProvider, apiLinksResponseSchema, AlephaServer } from '@alepha/server';
 import { AlephaServerCache } from '@alepha/server-cache';
-import { P as PageDescriptorProvider, $ as $page, R as RouterContext, a as RouterLayerContext, b as ReactBrowserProvider, u as useRouterEvents } from './ReactBrowserProvider-ufHSOTmv.js';
-export { C as ClientOnly, E as ErrorBoundary, N as NestedView, c as RedirectionError, i as isPageRoute, d as useAlepha } from './ReactBrowserProvider-ufHSOTmv.js';
+import { P as PageDescriptorProvider, $ as $page } from './useRouterState-cCucJfTC.js';
+export { C as ClientOnly, E as ErrorBoundary, L as Link, N as NestedView, l as ReactBrowserProvider, b as RedirectionError, R as RouterContext, c as RouterHookApi, a as RouterLayerContext, k as isPageRoute, u as useActive, d as useAlepha, e as useClient, f as useInject, g as useQueryParams, h as useRouter, i as useRouterEvents, j as useRouterState } from './useRouterState-cCucJfTC.js';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 import { ServerStaticProvider } from '@alepha/server-static';
 import { renderToString } from 'react-dom/server';
-import { jsx } from 'react/jsx-runtime';
-import React, { useContext, useMemo, useState, useEffect } from 'react';
+import 'react/jsx-runtime';
+import 'react';
 import '@alepha/router';
 
 class ServerHeadProvider {
@@ -353,239 +353,10 @@ class ReactServerProvider {
   }
 }
 
-class RouterHookApi {
-  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(
-      this.state.search
-    ).entries()) {
-      query[key] = String(value);
-    }
-    return query;
-  }
-  async back() {
-    this.browser?.history.back();
-  }
-  async forward() {
-    this.browser?.history.forward();
-  }
-  async invalidate(props) {
-    await this.browser?.invalidate(props);
-  }
-  /**
-   * Create a valid href for the given pathname.
-   *
-   * @param pathname
-   * @param 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) {
-    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, 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, options).catch(console.error);
-      }
-    };
-  }
-  /**
-   * Set query params.
-   *
-   * @param record
-   * @param options
-   */
-  setQueryParams(record, options = {}) {
-    const func = typeof record === "function" ? record : () => record;
-    const search = new URLSearchParams(func(this.query)).toString();
-    const state = search ? `${this.pathname}?${search}` : this.pathname;
-    if (options.push) {
-      window.history.pushState({}, "", state);
-    } else {
-      window.history.replaceState({}, "", state);
-    }
-  }
-}
-
-const useRouter = () => {
-  const ctx = useContext(RouterContext);
-  const layer = useContext(RouterLayerContext);
-  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
-    ),
-    [layer]
-  );
-};
-
-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;
-  }
-  const can = typeof props.to === "string" ? void 0 : props.to[OPTIONS].can;
-  if (can && !can()) {
-    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();
-  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) => {
-  const ctx = useContext(RouterContext);
-  if (!ctx) {
-    throw new Error("useRouter must be used within a <RouterProvider>");
-  }
-  return useMemo(() => ctx.alepha.get(clazz), []);
-};
-
-const useClient = (_scope) => {
-  return useInject(HttpClient).of();
-};
-
-const useQueryParams = (schema, options = {}) => {
-  const ctx = useContext(RouterContext);
-  if (!ctx) {
-    throw new Error("useQueryParams must be used within a RouterProvider");
-  }
-  const key = options.key ?? "q";
-  const router = useRouter();
-  const querystring = router.query[key];
-  const [queryParams, setQueryParams] = useState(
-    decode(ctx.alepha, schema, router.query[key])
-  );
-  useEffect(() => {
-    setQueryParams(decode(ctx.alepha, schema, querystring));
-  }, [querystring]);
-  return [
-    queryParams,
-    (queryParams2) => {
-      setQueryParams(queryParams2);
-      router.setQueryParams((data) => {
-        return { ...data, [key]: encode(ctx.alepha, schema, queryParams2) };
-      });
-    }
-  ];
-};
-const encode = (alepha, schema, data) => {
-  return btoa(JSON.stringify(alepha.parse(schema, data)));
-};
-const decode = (alepha, schema, data) => {
-  try {
-    return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
-  } catch (_error) {
-    return {};
-  }
-};
-
-const useRouterState = () => {
-  const ctx = useContext(RouterContext);
-  const layer = useContext(RouterLayerContext);
-  if (!ctx || !layer) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-  const [state, setState] = useState(ctx.state);
-  useRouterEvents({
-    onEnd: ({ state: state2 }) => setState({ ...state2 })
-  });
-  return state;
-};
-
 class AlephaReact {
   name = "alepha.react";
   $services = (alepha) => alepha.with(AlephaServer).with(AlephaServerCache).with(ReactServerProvider).with(PageDescriptorProvider);
 }
 __bind($page, AlephaReact);
 
-export { $page, AlephaReact, Link, PageDescriptorProvider, ReactBrowserProvider, ReactServerProvider, RouterContext, RouterHookApi, RouterLayerContext, useActive, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState };
+export { $page, AlephaReact, PageDescriptorProvider, ReactServerProvider };

package/dist/{ReactBrowserProvider-CXDElhnK.cjs → useRouterState-BTmuHxkM.cjs}

@@ -1,10 +1,10 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var core = require('@alepha/core');
+var React = require('react');
 var server = require('@alepha/server');
 var router = require('@alepha/router');
-var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
 
 const KEY = "PAGE";
 const $page = (options) => {
@@ -279,7 +279,7 @@ const NestedView = (props) => {
 };
 
 function NotFoundPage() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       style: {
@@ -292,21 +292,7 @@ function NotFoundPage() {
         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"
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: "1rem", marginBottom: "0.5rem" }, children: "This page does not exist" })
     }
   );
 }
@@ -945,16 +931,253 @@ class ReactBrowserProvider {
   });
 }
 
+class RouterHookApi {
+  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(
+      this.state.search
+    ).entries()) {
+      query[key] = String(value);
+    }
+    return query;
+  }
+  async back() {
+    this.browser?.history.back();
+  }
+  async forward() {
+    this.browser?.history.forward();
+  }
+  async invalidate(props) {
+    await this.browser?.invalidate(props);
+  }
+  /**
+   * Create a valid href for the given pathname.
+   *
+   * @param pathname
+   * @param 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) {
+    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, 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, options).catch(console.error);
+      }
+    };
+  }
+  /**
+   * Set query params.
+   *
+   * @param record
+   * @param options
+   */
+  setQueryParams(record, options = {}) {
+    const func = typeof record === "function" ? record : () => record;
+    const search = new URLSearchParams(func(this.query)).toString();
+    const state = search ? `${this.pathname}?${search}` : this.pathname;
+    if (options.push) {
+      window.history.pushState({}, "", state);
+    } else {
+      window.history.replaceState({}, "", state);
+    }
+  }
+}
+
+const useRouter = () => {
+  const ctx = React.useContext(RouterContext);
+  const layer = React.useContext(RouterLayerContext);
+  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
+    ),
+    [layer]
+  );
+};
+
+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;
+  }
+  const can = typeof props.to === "string" ? void 0 : props.to[core.OPTIONS].can;
+  if (can && !can()) {
+    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();
+  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) => {
+  const ctx = React.useContext(RouterContext);
+  if (!ctx) {
+    throw new Error("useRouter must be used within a <RouterProvider>");
+  }
+  return React.useMemo(() => ctx.alepha.get(clazz), []);
+};
+
+const useClient = (_scope) => {
+  return useInject(server.HttpClient).of();
+};
+
+const useQueryParams = (schema, options = {}) => {
+  const ctx = React.useContext(RouterContext);
+  if (!ctx) {
+    throw new Error("useQueryParams must be used within a RouterProvider");
+  }
+  const key = options.key ?? "q";
+  const router = useRouter();
+  const querystring = router.query[key];
+  const [queryParams, setQueryParams] = React.useState(
+    decode(ctx.alepha, schema, router.query[key])
+  );
+  React.useEffect(() => {
+    setQueryParams(decode(ctx.alepha, schema, querystring));
+  }, [querystring]);
+  return [
+    queryParams,
+    (queryParams2) => {
+      setQueryParams(queryParams2);
+      router.setQueryParams((data) => {
+        return { ...data, [key]: encode(ctx.alepha, schema, queryParams2) };
+      });
+    }
+  ];
+};
+const encode = (alepha, schema, data) => {
+  return btoa(JSON.stringify(alepha.parse(schema, data)));
+};
+const decode = (alepha, schema, data) => {
+  try {
+    return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
+  } catch (_error) {
+    return {};
+  }
+};
+
+const useRouterState = () => {
+  const ctx = React.useContext(RouterContext);
+  const layer = React.useContext(RouterLayerContext);
+  if (!ctx || !layer) {
+    throw new Error("useRouter must be used within a RouterProvider");
+  }
+  const [state, setState] = React.useState(ctx.state);
+  useRouterEvents({
+    onEnd: ({ state: state2 }) => setState({ ...state2 })
+  });
+  return state;
+};
+
 exports.$page = $page;
 exports.BrowserRouterProvider = BrowserRouterProvider;
 exports.ClientOnly = ClientOnly;
 exports.ErrorBoundary = ErrorBoundary;
+exports.Link = Link;
 exports.NestedView = NestedView;
 exports.PageDescriptorProvider = PageDescriptorProvider;
 exports.ReactBrowserProvider = ReactBrowserProvider;
 exports.RedirectionError = RedirectionError;
 exports.RouterContext = RouterContext;
+exports.RouterHookApi = RouterHookApi;
 exports.RouterLayerContext = RouterLayerContext;
 exports.isPageRoute = isPageRoute;
+exports.useActive = useActive;
 exports.useAlepha = useAlepha;
+exports.useClient = useClient;
+exports.useInject = useInject;
+exports.useQueryParams = useQueryParams;
+exports.useRouter = useRouter;
 exports.useRouterEvents = useRouterEvents;
+exports.useRouterState = useRouterState;