@alepha/react 0.7.3 → 0.7.4

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 useRouterState = require('./useRouterState-C2uo0jXu.cjs');
+var ReactBrowserProvider = require('./ReactBrowserProvider-CXDElhnK.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');
-require('react/jsx-runtime');
-require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = 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(useRouterState.PageDescriptorProvider);
+  pageDescriptorProvider = core.$inject(ReactBrowserProvider.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(useRouterState.$page);
+      const pages = this.alepha.getDescriptorValues(ReactBrowserProvider.$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,34 +354,260 @@ class ReactServerProvider {
   }
 }
 
-class ReactModule {
-  alepha = core.$inject(core.Alepha);
-  constructor() {
-    this.alepha.with(server.ServerModule).with(serverCache.ServerCacheModule).with(server.ServerLinksProvider).with(useRouterState.PageDescriptorProvider).with(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);
+    }
   }
 }
-core.__bind(useRouterState.$page, ReactModule);
 
-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.ReactModule = ReactModule;
+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);
+}
+core.__bind(ReactBrowserProvider.$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.AlephaReact = AlephaReact;
+exports.Link = Link;
 exports.ReactServerProvider = ReactServerProvider;
-exports.envSchema = envSchema;
+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,5 +1,5 @@
 import * as _alepha_core from '@alepha/core';
-import { TSchema as TSchema$1, KIND, OPTIONS, Static as Static$1, Async, Alepha, Service, TObject as TObject$1 } 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 * as React from 'react';
 import React__default, { PropsWithChildren, ReactNode, FC, ErrorInfo, AnchorHTMLAttributes } from 'react';
@@ -17,10 +17,6 @@ declare const Hint: unique symbol;
 /** Symbol key applied to types */
 declare const Kind: unique symbol;
 
-type TReadonly<T extends TSchema> = T & {
-    [ReadonlyKind]: 'Readonly';
-};
-
 type StringFormatOption = 'date-time' | 'time' | 'date' | 'email' | 'idn-email' | 'hostname' | 'idn-hostname' | 'ipv4' | 'ipv6' | 'uri' | 'uri-reference' | 'iri' | 'uuid' | 'iri-reference' | 'uri-template' | 'json-pointer' | 'relative-json-pointer' | 'regex' | ({} & string);
 type StringContentEncodingOption = '7bit' | '8bit' | 'binary' | 'quoted-printable' | 'base64' | ({} & string);
 interface StringOptions extends SchemaOptions {
@@ -53,49 +49,6 @@ type TOptional<T extends TSchema> = T & {
     [OptionalKind]: 'Optional';
 };
 
-/** Creates a static type from a TypeBox type */
-type Static<Type extends TSchema, Params extends unknown[] = [], Result = (Type & {
-    params: Params;
-})['static']> = Result;
-
-type ReadonlyOptionalPropertyKeys<T extends TProperties> = {
-    [K in keyof T]: T[K] extends TReadonly<TSchema> ? (T[K] extends TOptional<T[K]> ? K : never) : never;
-}[keyof T];
-type ReadonlyPropertyKeys<T extends TProperties> = {
-    [K in keyof T]: T[K] extends TReadonly<TSchema> ? (T[K] extends TOptional<T[K]> ? never : K) : never;
-}[keyof T];
-type OptionalPropertyKeys<T extends TProperties> = {
-    [K in keyof T]: T[K] extends TOptional<TSchema> ? (T[K] extends TReadonly<T[K]> ? never : K) : never;
-}[keyof T];
-type RequiredPropertyKeys<T extends TProperties> = keyof Omit<T, ReadonlyOptionalPropertyKeys<T> | ReadonlyPropertyKeys<T> | OptionalPropertyKeys<T>>;
-type ObjectStaticProperties<T extends TProperties, R extends Record<keyof any, unknown>> = Evaluate<(Readonly<Partial<Pick<R, ReadonlyOptionalPropertyKeys<T>>>> & Readonly<Pick<R, ReadonlyPropertyKeys<T>>> & Partial<Pick<R, OptionalPropertyKeys<T>>> & Required<Pick<R, RequiredPropertyKeys<T>>>)>;
-type ObjectStatic<T extends TProperties, P extends unknown[]> = ObjectStaticProperties<T, {
-    [K in keyof T]: Static<T[K], P>;
-}>;
-type TPropertyKey = string | number;
-type TProperties = Record<TPropertyKey, TSchema>;
-type TAdditionalProperties = undefined | TSchema | boolean;
-interface ObjectOptions extends SchemaOptions {
-    /** Additional property constraints for this object */
-    additionalProperties?: TAdditionalProperties;
-    /** The minimum number of properties allowed on this object */
-    minProperties?: number;
-    /** The maximum number of properties allowed on this object */
-    maxProperties?: number;
-}
-interface TObject<T extends TProperties = TProperties> extends TSchema, ObjectOptions {
-    [Kind]: 'Object';
-    static: ObjectStatic<T, this['params']>;
-    additionalProperties?: TAdditionalProperties;
-    type: 'object';
-    properties: T;
-    required?: string[];
-}
-
-type Evaluate<T> = T extends infer O ? {
-    [K in keyof O]: O[K];
-} : never;
-
 interface SchemaOptions {
     $schema?: string;
     /** Id for this schema */
@@ -292,8 +245,8 @@ interface Head$1 {
     };
 }
 interface PageRequestConfig<TConfig extends PageConfigSchema = PageConfigSchema> {
-    params: TConfig["params"] extends TSchema$1 ? Static$1<TConfig["params"]> : Record<string, string>;
-    query: TConfig["query"] extends TSchema$1 ? Static$1<TConfig["query"]> : Record<string, string>;
+    params: TConfig["params"] extends TSchema$1 ? Static<TConfig["params"]> : Record<string, string>;
+    query: TConfig["query"] extends TSchema$1 ? Static<TConfig["query"]> : Record<string, string>;
 }
 type PageResolve<TConfig extends PageConfigSchema = PageConfigSchema, TPropsParent extends object = TPropsParentDefault> = PageRequestConfig<TConfig> & TPropsParent & PageReactContext;
 
@@ -301,7 +254,7 @@ declare const envSchema$1: _alepha_core.TObject<{
     REACT_STRICT_MODE: TBoolean;
 }>;
 declare module "@alepha/core" {
-    interface Env extends Partial<Static$1<typeof envSchema$1>> {
+    interface Env extends Partial<Static<typeof envSchema$1>> {
     }
 }
 declare class PageDescriptorProvider {
@@ -647,7 +600,7 @@ interface UseQueryParamsHookOptions {
     key?: string;
     push?: boolean;
 }
-declare const useQueryParams: <T extends TObject$1>(schema: T, options?: UseQueryParamsHookOptions) => [Static$1<T>, (data: Static$1<T>) => void];
+declare const useQueryParams: <T extends TObject>(schema: T, options?: UseQueryParamsHookOptions) => [Static<T>, (data: Static<T>) => void];
 
 declare const useRouter: () => RouterHookApi;
 
@@ -666,14 +619,14 @@ declare const useRouterEvents: (opts?: {
 
 declare const useRouterState: () => RouterState;
 
-declare const envSchema: TObject<{
+declare const envSchema: _alepha_core.TObject<{
     REACT_SERVER_DIST: TString;
     REACT_SERVER_PREFIX: TString;
     REACT_SSR_ENABLED: TOptional<TBoolean>;
     REACT_ROOT_ID: TString;
 }>;
 declare module "@alepha/core" {
-    interface Env extends Partial<Static$1<typeof envSchema>> {
+    interface Env extends Partial<Static<typeof envSchema>> {
     }
     interface State {
         "ReactServerProvider.template"?: string;
@@ -748,9 +701,18 @@ declare module "@alepha/core" {
         };
     }
 }
-declare class ReactModule {
-    protected readonly alepha: Alepha;
-    constructor();
+/**
+ * Alepha React Module
+ *
+ * Alepha React Module contains a router for client-side navigation and server-side rendering.
+ * Routes can be defined using the `$page` descriptor.
+ *
+ * @see {@link $page}
+ * @module alepha.react
+ */
+declare class AlephaReact implements Module {
+    readonly name = "alepha.react";
+    readonly $services: (alepha: Alepha) => Alepha;
 }
 
-export { $page, type AnchorProps, ClientOnly, type CreateLayersResult, ErrorBoundary, type Head$1 as Head, type HrefLike, type Layer, Link, NestedView, type PageConfigSchema, type PageDescriptor, type PageDescriptorOptions, PageDescriptorProvider, type PageDescriptorRenderOptions, type PageDescriptorRenderResult, type PageReactContext, type PageRequest, type PageRequestConfig, type PageResolve, type PageRoute, type PageRouteEntry, type PreviousLayerData, ReactBrowserProvider, type ReactHydrationState, ReactModule, ReactServerProvider, RedirectionError, RouterContext, type RouterContextValue, type RouterGoOptions, RouterHookApi, RouterLayerContext, type RouterLayerContextValue, type RouterRenderResult, type RouterStackItem, type RouterState, type TPropsDefault, type TPropsParentDefault, type TransitionOptions, type UseActiveHook, type UseQueryParamsHookOptions, type VirtualRouter, envSchema, isPageRoute, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState };
+export { $page, AlephaReact, type AnchorProps, ClientOnly, type CreateLayersResult, ErrorBoundary, type Head$1 as Head, type HrefLike, type Layer, Link, NestedView, type PageConfigSchema, type PageDescriptor, type PageDescriptorOptions, PageDescriptorProvider, type PageDescriptorRenderOptions, type PageDescriptorRenderResult, type PageReactContext, type PageRequest, type PageRequestConfig, type PageResolve, type PageRoute, type PageRouteEntry, type PreviousLayerData, ReactBrowserProvider, type ReactHydrationState, ReactServerProvider, RedirectionError, RouterContext, type RouterContextValue, type RouterGoOptions, RouterHookApi, RouterLayerContext, type RouterLayerContextValue, type RouterRenderResult, type RouterStackItem, type RouterState, type TPropsDefault, type TPropsParentDefault, type TransitionOptions, type UseActiveHook, type UseQueryParamsHookOptions, type VirtualRouter, isPageRoute, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState };