@alepha/react 0.7.3 → 0.7.4

package/dist/index.js

@@ -1,14 +1,14 @@
 import { t, $logger, $inject, Alepha, $hook, OPTIONS, __bind } from '@alepha/core';
-import { ServerRouterProvider, ServerTimingProvider, ServerLinksProvider, apiLinksResponseSchema, ServerModule } from '@alepha/server';
-import { ServerCacheModule } from '@alepha/server-cache';
-import { P as PageDescriptorProvider, $ as $page } from './useRouterState-D5__ZcUV.js';
-export { C as ClientOnly, E as ErrorBoundary, L as Link, N as NestedView, l as ReactBrowserProvider, R as RedirectionError, a as RouterContext, c as RouterHookApi, b 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-D5__ZcUV.js';
+import { ServerRouterProvider, ServerTimingProvider, ServerLinksProvider, apiLinksResponseSchema, HttpClient, 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 { existsSync } from 'node:fs';
 import { join } from 'node:path';
 import { ServerStaticProvider } from '@alepha/server-static';
 import { renderToString } from 'react-dom/server';
-import 'react/jsx-runtime';
-import 'react';
+import { jsx } from 'react/jsx-runtime';
+import React, { useContext, useMemo, useState, useEffect } from 'react';
 import '@alepha/router';
 
 class ServerHeadProvider {
@@ -353,12 +353,239 @@ class ReactServerProvider {
   }
 }
 
-class ReactModule {
-  alepha = $inject(Alepha);
-  constructor() {
-    this.alepha.with(ServerModule).with(ServerCacheModule).with(ServerLinksProvider).with(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);
+    }
   }
 }
-__bind($page, ReactModule);
 
-export { $page, PageDescriptorProvider, ReactModule, ReactServerProvider, envSchema };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@alepha/react",
-	"version": "0.7.3",
+	"version": "0.7.4",
 	"type": "module",
 	"license": "MIT",
 	"main": "./dist/index.js",
@@ -13,11 +13,11 @@
 		"src"
 	],
 	"dependencies": {
-		"@alepha/core": "0.7.3",
-		"@alepha/router": "0.7.3",
-		"@alepha/server": "0.7.3",
-		"@alepha/server-cache": "0.7.3",
-		"@alepha/server-static": "0.7.3",
+		"@alepha/core": "0.7.4",
+		"@alepha/router": "0.7.4",
+		"@alepha/server": "0.7.4",
+		"@alepha/server-cache": "0.7.4",
+		"@alepha/server-static": "0.7.4",
 		"react-dom": "^19.1.0"
 	},
 	"devDependencies": {

package/src/index.browser.ts

@@ -1,23 +1,26 @@
-import { __bind, $inject, Alepha } from "@alepha/core";
+import { __bind, type Alepha, type Module } from "@alepha/core";
 import { $page } from "./descriptors/$page.ts";
 import { BrowserRouterProvider } from "./providers/BrowserRouterProvider.ts";
 import { PageDescriptorProvider } from "./providers/PageDescriptorProvider.ts";
 import { ReactBrowserProvider } from "./providers/ReactBrowserProvider.ts";
 import { ReactBrowserRenderer } from "./providers/ReactBrowserRenderer.ts";
 
-export * from "./index.shared";
+// ---------------------------------------------------------------------------------------------------------------------
+
+export * from "./providers/BrowserRouterProvider.ts";
+export * from "./providers/PageDescriptorProvider.ts";
 export * from "./providers/ReactBrowserProvider.ts";
 
-export class ReactModule {
-	protected readonly alepha = $inject(Alepha);
+// ---------------------------------------------------------------------------------------------------------------------
 
-	constructor() {
-		this.alepha //
+export class AlephaReact implements Module {
+	public readonly name = "alepha.react";
+	public readonly $services = (alepha: Alepha) =>
+		alepha
 			.with(PageDescriptorProvider)
 			.with(ReactBrowserProvider)
 			.with(BrowserRouterProvider)
 			.with(ReactBrowserRenderer);
-	}
 }
 
-__bind($page, ReactModule);
+__bind($page, AlephaReact);

package/src/index.ts

@@ -1,10 +1,6 @@
-import { __bind, $inject, Alepha } from "@alepha/core";
-import {
-	ServerLinksProvider,
-	ServerModule,
-	type ServerRequest,
-} from "@alepha/server";
-import { ServerCacheModule } from "@alepha/server-cache";
+import { __bind, type Alepha, type Module } from "@alepha/core";
+import { AlephaServer, type ServerRequest } from "@alepha/server";
+import { AlephaServerCache } from "@alepha/server-cache";
 import { $page } from "./descriptors/$page.ts";
 import {
 	PageDescriptorProvider,
@@ -15,6 +11,8 @@ import {
 import type { ReactHydrationState } from "./providers/ReactBrowserProvider.ts";
 import { ReactServerProvider } from "./providers/ReactServerProvider.ts";
 
+// ---------------------------------------------------------------------------------------------------------------------
+
 export { default as NestedView } from "./components/NestedView.tsx";
 export * from "./errors/RedirectionError.ts";
 export * from "./index.shared.ts";
@@ -22,6 +20,8 @@ export * from "./providers/PageDescriptorProvider.ts";
 export * from "./providers/ReactBrowserProvider.ts";
 export * from "./providers/ReactServerProvider.ts";
 
+// ---------------------------------------------------------------------------------------------------------------------
+
 declare module "@alepha/core" {
 	interface Hooks {
 		"react:browser:render": {
@@ -52,17 +52,25 @@ declare module "@alepha/core" {
 	}
 }
 
-export class ReactModule {
-	protected readonly alepha = $inject(Alepha);
+// ---------------------------------------------------------------------------------------------------------------------
 
-	constructor() {
-		this.alepha //
-			.with(ServerModule)
-			.with(ServerCacheModule)
-			.with(ServerLinksProvider)
-			.with(PageDescriptorProvider)
-			.with(ReactServerProvider);
-	}
+/**
+ * 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
+ */
+export class AlephaReact implements Module {
+	public readonly name = "alepha.react";
+	public readonly $services = (alepha: Alepha) =>
+		alepha
+			.with(AlephaServer)
+			.with(AlephaServerCache)
+			.with(ReactServerProvider)
+			.with(PageDescriptorProvider);
 }
 
-__bind($page, ReactModule);
+__bind($page, AlephaReact);

package/src/providers/ReactBrowserRenderer.ts

@@ -17,6 +17,7 @@ declare module "@alepha/core" {
 	interface Env extends Partial<Static<typeof envSchema>> {}
 }
 
+// TODO: move to ReactBrowserProvider when it will be removed from server-side imports
 export class ReactBrowserRenderer {
 	protected readonly browserProvider = $inject(ReactBrowserProvider);
 	protected readonly browserRouterProvider = $inject(BrowserRouterProvider);

package/src/providers/ReactServerProvider.ts

@@ -29,7 +29,7 @@ import {
 import type { ReactHydrationState } from "./ReactBrowserProvider.ts";
 import { ServerHeadProvider } from "./ServerHeadProvider.ts";
 
-export const envSchema = t.object({
+const envSchema = t.object({
 	REACT_SERVER_DIST: t.string({ default: "public" }),
 	REACT_SERVER_PREFIX: t.string({ default: "" }),
 	REACT_SSR_ENABLED: t.optional(t.boolean()),