@alepha/react 0.7.4 → 0.7.5

package/dist/index.browser.cjs

@@ -1,19 +1,19 @@
 'use strict';
 
 var core = require('@alepha/core');
-var ReactBrowserProvider = require('./ReactBrowserProvider-CXDElhnK.cjs');
+var useRouterState = require('./useRouterState-BTmuHxkM.cjs');
 var client = require('react-dom/client');
+require('react/jsx-runtime');
+require('react');
 require('@alepha/server');
 require('@alepha/router');
-require('react');
-require('react/jsx-runtime');
 
 const envSchema = core.t.object({
   REACT_ROOT_ID: core.t.string({ default: "root" })
 });
 class ReactBrowserRenderer {
-  browserProvider = core.$inject(ReactBrowserProvider.ReactBrowserProvider);
-  browserRouterProvider = core.$inject(ReactBrowserProvider.BrowserRouterProvider);
+  browserProvider = core.$inject(useRouterState.ReactBrowserProvider);
+  browserRouterProvider = core.$inject(useRouterState.BrowserRouterProvider);
   env = core.$inject(envSchema);
   log = core.$logger();
   root;
@@ -47,12 +47,29 @@ class ReactBrowserRenderer {
 
 class AlephaReact {
   name = "alepha.react";
-  $services = (alepha) => alepha.with(ReactBrowserProvider.PageDescriptorProvider).with(ReactBrowserProvider.ReactBrowserProvider).with(ReactBrowserProvider.BrowserRouterProvider).with(ReactBrowserRenderer);
+  $services = (alepha) => alepha.with(useRouterState.PageDescriptorProvider).with(useRouterState.ReactBrowserProvider).with(useRouterState.BrowserRouterProvider).with(ReactBrowserRenderer);
 }
-core.__bind(ReactBrowserProvider.$page, AlephaReact);
+core.__bind(useRouterState.$page, AlephaReact);
 
-exports.BrowserRouterProvider = ReactBrowserProvider.BrowserRouterProvider;
-exports.PageDescriptorProvider = ReactBrowserProvider.PageDescriptorProvider;
-exports.ReactBrowserProvider = ReactBrowserProvider.ReactBrowserProvider;
-exports.isPageRoute = ReactBrowserProvider.isPageRoute;
+exports.$page = useRouterState.$page;
+exports.BrowserRouterProvider = useRouterState.BrowserRouterProvider;
+exports.ClientOnly = useRouterState.ClientOnly;
+exports.ErrorBoundary = useRouterState.ErrorBoundary;
+exports.Link = useRouterState.Link;
+exports.NestedView = useRouterState.NestedView;
+exports.PageDescriptorProvider = useRouterState.PageDescriptorProvider;
+exports.ReactBrowserProvider = useRouterState.ReactBrowserProvider;
+exports.RedirectionError = useRouterState.RedirectionError;
+exports.RouterContext = useRouterState.RouterContext;
+exports.RouterHookApi = useRouterState.RouterHookApi;
+exports.RouterLayerContext = useRouterState.RouterLayerContext;
+exports.isPageRoute = useRouterState.isPageRoute;
+exports.useActive = useRouterState.useActive;
+exports.useAlepha = useRouterState.useAlepha;
+exports.useClient = useRouterState.useClient;
+exports.useInject = useRouterState.useInject;
+exports.useQueryParams = useRouterState.useQueryParams;
+exports.useRouter = useRouterState.useRouter;
+exports.useRouterEvents = useRouterState.useRouterEvents;
+exports.useRouterState = useRouterState.useRouterState;
 exports.AlephaReact = AlephaReact;

package/dist/index.browser.js

@@ -1,11 +1,11 @@
 import { t, $inject, $logger, $hook, __bind } from '@alepha/core';
-import { b as ReactBrowserProvider, B as BrowserRouterProvider, $ as $page, P as PageDescriptorProvider } from './ReactBrowserProvider-ufHSOTmv.js';
-export { i as isPageRoute } from './ReactBrowserProvider-ufHSOTmv.js';
+import { l as ReactBrowserProvider, B as BrowserRouterProvider, $ as $page, P as PageDescriptorProvider } from './useRouterState-cCucJfTC.js';
+export { C as ClientOnly, E as ErrorBoundary, L as Link, N as NestedView, 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 { hydrateRoot, createRoot } from 'react-dom/client';
+import 'react/jsx-runtime';
+import 'react';
 import '@alepha/server';
 import '@alepha/router';
-import 'react';
-import 'react/jsx-runtime';
 
 const envSchema = t.object({
   REACT_ROOT_ID: t.string({ default: "root" })
@@ -50,4 +50,4 @@ class AlephaReact {
 }
 __bind($page, AlephaReact);
 
-export { AlephaReact, BrowserRouterProvider, PageDescriptorProvider, ReactBrowserProvider };
+export { $page, AlephaReact, BrowserRouterProvider, PageDescriptorProvider, ReactBrowserProvider };

package/dist/index.cjs

@@ -3,13 +3,13 @@
 var core = require('@alepha/core');
 var server = require('@alepha/server');
 var serverCache = require('@alepha/server-cache');
-var ReactBrowserProvider = require('./ReactBrowserProvider-CXDElhnK.cjs');
+var useRouterState = require('./useRouterState-BTmuHxkM.cjs');
 var node_fs = require('node:fs');
 var node_path = require('node:path');
 var serverStatic = require('@alepha/server-static');
 var server$1 = require('react-dom/server');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+require('react/jsx-runtime');
+require('react');
 require('@alepha/router');
 
 class ServerHeadProvider {
@@ -83,7 +83,7 @@ const envSchema = core.t.object({
 class ReactServerProvider {
   log = core.$logger();
   alepha = core.$inject(core.Alepha);
-  pageDescriptorProvider = core.$inject(ReactBrowserProvider.PageDescriptorProvider);
+  pageDescriptorProvider = core.$inject(useRouterState.PageDescriptorProvider);
   serverStaticProvider = core.$inject(serverStatic.ServerStaticProvider);
   serverRouterProvider = core.$inject(server.ServerRouterProvider);
   headProvider = core.$inject(ServerHeadProvider);
@@ -96,7 +96,7 @@ class ReactServerProvider {
   onConfigure = core.$hook({
     name: "configure",
     handler: async () => {
-      const pages = this.alepha.getDescriptorValues(ReactBrowserProvider.$page);
+      const pages = this.alepha.getDescriptorValues(useRouterState.$page);
       const ssrEnabled = pages.length > 0 && this.env.REACT_SSR_ENABLED !== false;
       this.alepha.state("ReactServerProvider.ssr", ssrEnabled);
       for (const { key, instance, value } of pages) {
@@ -354,260 +354,31 @@ 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 = React.useContext(ReactBrowserProvider.RouterContext);
-  const layer = React.useContext(ReactBrowserProvider.RouterLayerContext);
-  if (!ctx || !layer) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-  const pages = React.useMemo(() => {
-    return ctx.alepha.get(ReactBrowserProvider.PageDescriptorProvider).getPages();
-  }, []);
-  return React.useMemo(
-    () => new RouterHookApi(
-      pages,
-      ctx.state,
-      layer,
-      ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider.ReactBrowserProvider) : void 0
-    ),
-    [layer]
-  );
-};
-
-const Link = (props) => {
-  React.useContext(ReactBrowserProvider.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(ReactBrowserProvider.RouterContext);
-  const layer = React.useContext(ReactBrowserProvider.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;
-  ReactBrowserProvider.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(ReactBrowserProvider.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(ReactBrowserProvider.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(ReactBrowserProvider.RouterContext);
-  const layer = React.useContext(ReactBrowserProvider.RouterLayerContext);
-  if (!ctx || !layer) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-  const [state, setState] = React.useState(ctx.state);
-  ReactBrowserProvider.useRouterEvents({
-    onEnd: ({ state: state2 }) => setState({ ...state2 })
-  });
-  return state;
-};
-
 class AlephaReact {
   name = "alepha.react";
-  $services = (alepha) => alepha.with(server.AlephaServer).with(serverCache.AlephaServerCache).with(ReactServerProvider).with(ReactBrowserProvider.PageDescriptorProvider);
+  $services = (alepha) => alepha.with(server.AlephaServer).with(serverCache.AlephaServerCache).with(ReactServerProvider).with(useRouterState.PageDescriptorProvider);
 }
-core.__bind(ReactBrowserProvider.$page, AlephaReact);
+core.__bind(useRouterState.$page, AlephaReact);
 
-exports.$page = ReactBrowserProvider.$page;
-exports.ClientOnly = ReactBrowserProvider.ClientOnly;
-exports.ErrorBoundary = ReactBrowserProvider.ErrorBoundary;
-exports.NestedView = ReactBrowserProvider.NestedView;
-exports.PageDescriptorProvider = ReactBrowserProvider.PageDescriptorProvider;
-exports.ReactBrowserProvider = ReactBrowserProvider.ReactBrowserProvider;
-exports.RedirectionError = ReactBrowserProvider.RedirectionError;
-exports.RouterContext = ReactBrowserProvider.RouterContext;
-exports.RouterLayerContext = ReactBrowserProvider.RouterLayerContext;
-exports.isPageRoute = ReactBrowserProvider.isPageRoute;
-exports.useAlepha = ReactBrowserProvider.useAlepha;
-exports.useRouterEvents = ReactBrowserProvider.useRouterEvents;
+exports.$page = useRouterState.$page;
+exports.ClientOnly = useRouterState.ClientOnly;
+exports.ErrorBoundary = useRouterState.ErrorBoundary;
+exports.Link = useRouterState.Link;
+exports.NestedView = useRouterState.NestedView;
+exports.PageDescriptorProvider = useRouterState.PageDescriptorProvider;
+exports.ReactBrowserProvider = useRouterState.ReactBrowserProvider;
+exports.RedirectionError = useRouterState.RedirectionError;
+exports.RouterContext = useRouterState.RouterContext;
+exports.RouterHookApi = useRouterState.RouterHookApi;
+exports.RouterLayerContext = useRouterState.RouterLayerContext;
+exports.isPageRoute = useRouterState.isPageRoute;
+exports.useActive = useRouterState.useActive;
+exports.useAlepha = useRouterState.useAlepha;
+exports.useClient = useRouterState.useClient;
+exports.useInject = useRouterState.useInject;
+exports.useQueryParams = useRouterState.useQueryParams;
+exports.useRouter = useRouterState.useRouter;
+exports.useRouterEvents = useRouterState.useRouterEvents;
+exports.useRouterState = useRouterState.useRouterState;
 exports.AlephaReact = AlephaReact;
-exports.Link = Link;
 exports.ReactServerProvider = ReactServerProvider;
-exports.RouterHookApi = RouterHookApi;
-exports.useActive = useActive;
-exports.useClient = useClient;
-exports.useInject = useInject;
-exports.useQueryParams = useQueryParams;
-exports.useRouter = useRouter;
-exports.useRouterState = useRouterState;

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import * as _alepha_core from '@alepha/core';
 import { TSchema as TSchema$1, KIND, OPTIONS, Static, Async, Alepha, Service, TObject, Module } from '@alepha/core';
-import { ServerRoute, ServerRequest, ApiLinksResponse, HttpClient, ClientScope, HttpVirtualClient, ServerRouterProvider, ServerTimingProvider, ServerHandler } from '@alepha/server';
+import { ServerRequest, ApiLinksResponse, HttpClient, ClientScope, HttpVirtualClient, ServerRouterProvider, ServerTimingProvider, ServerHandler } from '@alepha/server';
 import * as React from 'react';
 import React__default, { PropsWithChildren, ReactNode, FC, ErrorInfo, AnchorHTMLAttributes } from 'react';
+import { ServerRouteCache } from '@alepha/server-cache';
 import { Root } from 'react-dom/client';
 import { RouterProvider, Route } from '@alepha/router';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -101,7 +102,7 @@ interface PageConfigSchema {
 }
 type TPropsDefault = any;
 type TPropsParentDefault = {};
-interface PageDescriptorOptions<TConfig extends PageConfigSchema = PageConfigSchema, TProps extends object = TPropsDefault, TPropsParent extends object = TPropsParentDefault> extends Pick<ServerRoute, "cache"> {
+interface PageDescriptorOptions<TConfig extends PageConfigSchema = PageConfigSchema, TProps extends object = TPropsDefault, TPropsParent extends object = TPropsParentDefault> {
     /**
      * Name your page.
      *
@@ -181,6 +182,7 @@ interface PageDescriptorOptions<TConfig extends PageConfigSchema = PageConfigSch
      */
     client?: boolean | ClientOnlyProps;
     afterHandler?: (request: ServerRequest) => any;
+    cache?: ServerRouteCache;
 }
 interface PageDescriptor<TConfig extends PageConfigSchema = PageConfigSchema, TProps extends object = TPropsDefault, TPropsParent extends object = TPropsParentDefault> {
     [KIND]: typeof KEY;
@@ -436,6 +438,51 @@ interface ReactHydrationState {
     links?: ApiLinksResponse;
 }
 
+/**
+ * Props for the ErrorBoundary component.
+ */
+interface ErrorBoundaryProps {
+    /**
+     * Fallback React node to render when an error is caught.
+     * If not provided, a default error message will be shown.
+     */
+    fallback: (error: Error) => ReactNode;
+    /**
+     * Optional callback that receives the error and error info.
+     * Use this to log errors to a monitoring service.
+     */
+    onError?: (error: Error, info: ErrorInfo) => void;
+}
+/**
+ * State of the ErrorBoundary component.
+ */
+interface ErrorBoundaryState {
+    error?: Error;
+}
+/**
+ * A reusable error boundary for catching rendering errors
+ * in any part of the React component tree.
+ */
+declare class ErrorBoundary extends React__default.Component<PropsWithChildren<ErrorBoundaryProps>, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    /**
+     * Update state so the next render shows the fallback UI.
+     */
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    /**
+     * Lifecycle method called when an error is caught.
+     * You can log the error or perform side effects here.
+     */
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): ReactNode;
+}
+
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    to: string | PageDescriptor;
+    children?: React__default.ReactNode;
+}
+declare const Link: (props: LinkProps) => react_jsx_runtime.JSX.Element | null;
+
 interface NestedViewProps {
     children?: ReactNode;
 }
@@ -462,6 +509,19 @@ interface NestedViewProps {
  */
 declare const NestedView: (props: NestedViewProps) => react_jsx_runtime.JSX.Element;
 
+interface RouterContextValue {
+    alepha: Alepha;
+    state: RouterState;
+    context: PageReactContext;
+}
+declare const RouterContext: React.Context<RouterContextValue | undefined>;
+
+interface RouterLayerContextValue {
+    index: number;
+    path: string;
+}
+declare const RouterLayerContext: React.Context<RouterLayerContextValue | undefined>;
+
 declare class RouterHookApi {
     private readonly pages;
     private readonly state;
@@ -523,64 +583,6 @@ declare class RedirectionError extends Error {
     constructor(page: HrefLike);
 }
 
-/**
- * Props for the ErrorBoundary component.
- */
-interface ErrorBoundaryProps {
-    /**
-     * Fallback React node to render when an error is caught.
-     * If not provided, a default error message will be shown.
-     */
-    fallback: (error: Error) => ReactNode;
-    /**
-     * Optional callback that receives the error and error info.
-     * Use this to log errors to a monitoring service.
-     */
-    onError?: (error: Error, info: ErrorInfo) => void;
-}
-/**
- * State of the ErrorBoundary component.
- */
-interface ErrorBoundaryState {
-    error?: Error;
-}
-/**
- * A reusable error boundary for catching rendering errors
- * in any part of the React component tree.
- */
-declare class ErrorBoundary extends React__default.Component<PropsWithChildren<ErrorBoundaryProps>, ErrorBoundaryState> {
-    constructor(props: ErrorBoundaryProps);
-    /**
-     * Update state so the next render shows the fallback UI.
-     */
-    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
-    /**
-     * Lifecycle method called when an error is caught.
-     * You can log the error or perform side effects here.
-     */
-    componentDidCatch(error: Error, info: ErrorInfo): void;
-    render(): ReactNode;
-}
-
-interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    to: string | PageDescriptor;
-    children?: React__default.ReactNode;
-}
-declare const Link: (props: LinkProps) => react_jsx_runtime.JSX.Element | null;
-
-interface RouterContextValue {
-    alepha: Alepha;
-    state: RouterState;
-    context: PageReactContext;
-}
-declare const RouterContext: React.Context<RouterContextValue | undefined>;
-
-interface RouterLayerContextValue {
-    index: number;
-    path: string;
-}
-declare const RouterLayerContext: React.Context<RouterLayerContextValue | undefined>;
-
 declare const useActive: (path: HrefLike) => UseActiveHook;
 interface UseActiveHook {
     isActive: boolean;