@alepha/react 0.6.0 → 0.6.2

package/dist/{useAuth-DOVx2kqa.cjs → useAuth-B9ypF48n.cjs}

@@ -12,7 +12,10 @@ const $auth = (options) => {
   core.__descriptor(KEY);
   return {
     [core.KIND]: KEY,
-    options
+    options,
+    jwks: () => {
+      return options.oidc?.issuer ?? "";
+    }
   };
 };
 $auth[core.KIND] = KEY;
@@ -95,10 +98,7 @@ class Router extends core.EventEmitter {
           state,
           router: this,
           alepha: this.alepha,
-          args: {
-            user: context.user,
-            cookies: context.cookies
-          }
+          args: context
         }
       },
       state.layers[0]?.element
@@ -265,6 +265,7 @@ class Router extends core.EventEmitter {
         });
         if (prev === curr) {
           it.props = previous[i].props;
+          it.error = previous[i].error;
           context = {
             ...context,
             ...it.props
@@ -307,7 +308,7 @@ class Router extends core.EventEmitter {
       for (const key of Object.keys(params2)) {
         params2[key] = String(params2[key]);
       }
-      if (it.route.helmet && renderContext) {
+      if (it.route.head && renderContext && !it.error) {
         this.mergeRenderContext(it.route, renderContext, {
           ...props,
           ...context
@@ -318,13 +319,14 @@ class Router extends core.EventEmitter {
       const path = acc.replace(/\/+/, "/");
       if (it.error) {
         const errorHandler = this.getErrorHandler(it.route);
-        const element = errorHandler ? errorHandler({
+        const element = await (errorHandler ? errorHandler({
           ...it.config,
           error: it.error,
           url
-        }) : this.renderError(it.error);
+        }) : this.renderError(it.error));
         layers.push({
           props,
+          error: it.error,
           name: it.route.name,
           part: it.route.path,
           config: it.config,
@@ -388,15 +390,32 @@ class Router extends core.EventEmitter {
    * @protected
    */
   mergeRenderContext(page, ctx, props) {
-    if (page.helmet) {
-      const helmet = typeof page.helmet === "function" ? page.helmet(props) : page.helmet;
-      if (helmet.title) {
-        ctx.helmet ??= {};
-        if (ctx.helmet?.title) {
-          ctx.helmet.title = `${helmet.title} - ${ctx.helmet.title}`;
+    if (page.head) {
+      ctx.head ??= {};
+      const head = typeof page.head === "function" ? page.head(props, ctx.head) : page.head;
+      if (head.title) {
+        ctx.head ??= {};
+        if (ctx.head.titleSeparator) {
+          ctx.head.title = `${head.title}${ctx.head.titleSeparator}${ctx.head.title}`;
         } else {
-          ctx.helmet.title = helmet.title;
+          ctx.head.title = head.title;
         }
+        ctx.head.titleSeparator = head.titleSeparator;
+      }
+      if (head.htmlAttributes) {
+        ctx.head.htmlAttributes = {
+          ...ctx.head.htmlAttributes,
+          ...head.htmlAttributes
+        };
+      }
+      if (head.bodyAttributes) {
+        ctx.head.bodyAttributes = {
+          ...ctx.head.bodyAttributes,
+          ...head.bodyAttributes
+        };
+      }
+      if (head.meta) {
+        ctx.head.meta = [...ctx.head.meta ?? [], ...head.meta ?? []];
       }
     }
   }
@@ -565,10 +584,14 @@ class PageDescriptorProvider {
   }
 }
 
+const envSchema = core.t.object({
+  REACT_ROOT_ID: core.t.string({ default: "root" })
+});
 class ReactBrowserProvider {
   log = core.$logger();
   client = core.$inject(server.HttpClient);
   router = core.$inject(Router);
+  env = core.$inject(envSchema);
   root;
   transitioning;
   state = {
@@ -656,12 +679,49 @@ class ReactBrowserProvider {
       return await this.render({ url: result.redirect });
     }
     this.transitioning = void 0;
-    return { url };
+    return { url, context: result.context };
   }
-  renderHelmetContext(ctx) {
+  /**
+   * Render the helmet context.
+   *
+   * @param ctx
+   * @protected
+   */
+  renderHeadContext(ctx) {
     if (ctx.title) {
       this.document.title = ctx.title;
     }
+    if (ctx.bodyAttributes) {
+      for (const [key, value] of Object.entries(ctx.bodyAttributes)) {
+        if (value) {
+          this.document.body.setAttribute(key, value);
+        } else {
+          this.document.body.removeAttribute(key);
+        }
+      }
+    }
+    if (ctx.htmlAttributes) {
+      for (const [key, value] of Object.entries(ctx.htmlAttributes)) {
+        if (value) {
+          this.document.documentElement.setAttribute(key, value);
+        } else {
+          this.document.documentElement.removeAttribute(key);
+        }
+      }
+    }
+    if (ctx.meta) {
+      for (const [key, value] of Object.entries(ctx.meta)) {
+        const meta = this.document.querySelector(`meta[name="${key}"]`);
+        if (meta) {
+          meta.setAttribute("content", value.content);
+        } else {
+          const newMeta = this.document.createElement("meta");
+          newMeta.setAttribute("name", key);
+          newMeta.setAttribute("content", value.content);
+          this.document.head.appendChild(newMeta);
+        }
+      }
+    }
   }
   /**
    * Get embedded layers from the server.
@@ -682,13 +742,13 @@ class ReactBrowserProvider {
    * @protected
    */
   getRootElement() {
-    const root = this.document.getElementById("root");
+    const root = this.document.getElementById(this.env.REACT_ROOT_ID);
     if (root) {
       return root;
     }
     const div = this.document.createElement("div");
-    div.id = "root";
-    this.document.body.appendChild(div);
+    div.id = this.env.REACT_ROOT_ID;
+    this.document.body.prepend(div);
     return div;
   }
   getUserFromCookies() {
@@ -713,7 +773,13 @@ class ReactBrowserProvider {
     handler: async () => {
       const cache = this.getHydrationState();
       const previous = cache?.layers ?? [];
-      await this.render({ previous });
+      if (cache?.links) {
+        this.client.links = cache.links;
+      }
+      const { context } = await this.render({ previous });
+      if (context.head) {
+        this.renderHeadContext(context.head);
+      }
       const element = this.router.root(this.state, {
         user: cache?.user ?? this.getUserFromCookies()
       });
@@ -721,40 +787,30 @@ class ReactBrowserProvider {
         this.root = client.hydrateRoot(this.getRootElement(), element);
         this.log.info("Hydrated root element");
       } else {
-        this.root = client.createRoot(this.getRootElement());
+        this.root ??= client.createRoot(this.getRootElement());
         this.root.render(element);
         this.log.info("Created root element");
       }
       window.addEventListener("popstate", () => {
         this.render();
       });
-      this.router.on("end", ({ context }) => {
-        if (context.helmet) {
-          this.renderHelmetContext(context.helmet);
+      this.router.on("end", ({ context: context2 }) => {
+        if (context2.head) {
+          this.renderHeadContext(context2.head);
         }
       });
     }
   });
-  /**
-   *
-   * @protected
-   */
-  stop = core.$hook({
-    name: "stop",
-    handler: async () => {
-      if (this.root) {
-        this.root.unmount();
-        this.log.info("Unmounted root element");
-      }
-    }
-  });
 }
 
 class Auth {
   alepha = core.$inject(core.Alepha);
   log = core.$logger();
   client = core.$inject(server.HttpClient);
-  api = "/api/_oauth/login";
+  slugs = {
+    login: "/api/_oauth/login",
+    logout: "/api/_oauth/logout"
+  };
   start = core.$hook({
     name: "start",
     handler: async () => {
@@ -769,16 +825,16 @@ class Auth {
     if (this.alepha.isBrowser()) {
       const browser = this.alepha.get(ReactBrowserProvider);
       const redirect = browser.transitioning ? window.location.origin + browser.transitioning.to : window.location.href;
-      window.location.href = `${this.api}?redirect=${redirect}`;
+      window.location.href = `${this.slugs.login}?redirect=${redirect}`;
       if (browser.transitioning) {
         throw new RedirectionError(browser.state.pathname);
       }
       return;
     }
-    throw new RedirectionError(this.api);
+    throw new RedirectionError(this.slugs.login);
   };
   logout = () => {
-    window.location.href = `/api/_oauth/logout?redirect=${encodeURIComponent(window.location.origin)}`;
+    window.location.href = `${this.slugs.logout}?redirect=${encodeURIComponent(window.location.origin)}`;
   };
 }
 
@@ -908,8 +964,18 @@ const useRouter = () => {
 
 const Link = (props) => {
   React.useContext(RouterContext);
+  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()) {
+    console.log("I cannot go to", to);
+    return null;
+  }
+  const name = typeof props.to === "string" ? void 0 : props.to.options.name;
   const router = useRouter();
-  return /* @__PURE__ */ jsxRuntime.jsx("a", { ...router.createAnchorProps(props.to), ...props, children: props.children });
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { ...router.createAnchorProps(to), ...props, children: props.children ?? name });
 };
 
 const useInject = (clazz) => {
@@ -917,7 +983,9 @@ const useInject = (clazz) => {
   if (!ctx) {
     throw new Error("useRouter must be used within a <RouterProvider>");
   }
-  return ctx.alepha.get(clazz);
+  return ctx.alepha.get(clazz, {
+    skipRegistration: true
+  });
 };
 
 const useClient = () => {

package/dist/{useAuth-i7wbKVrt.js → useAuth-Ps01oe8e.js}

@@ -1,4 +1,4 @@
-import { __descriptor, KIND, NotImplementedError, EventEmitter, $logger, $inject, Alepha, $hook } from '@alepha/core';
+import { __descriptor, KIND, NotImplementedError, EventEmitter, $logger, $inject, Alepha, $hook, t } from '@alepha/core';
 import { jsx } from 'react/jsx-runtime';
 import React, { createContext, useContext, useState, useEffect, createElement, useMemo } from 'react';
 import { HttpClient } from '@alepha/server';
@@ -10,7 +10,10 @@ const $auth = (options) => {
   __descriptor(KEY);
   return {
     [KIND]: KEY,
-    options
+    options,
+    jwks: () => {
+      return options.oidc?.issuer ?? "";
+    }
   };
 };
 $auth[KIND] = KEY;
@@ -93,10 +96,7 @@ class Router extends EventEmitter {
           state,
           router: this,
           alepha: this.alepha,
-          args: {
-            user: context.user,
-            cookies: context.cookies
-          }
+          args: context
         }
       },
       state.layers[0]?.element
@@ -263,6 +263,7 @@ class Router extends EventEmitter {
         });
         if (prev === curr) {
           it.props = previous[i].props;
+          it.error = previous[i].error;
           context = {
             ...context,
             ...it.props
@@ -305,7 +306,7 @@ class Router extends EventEmitter {
       for (const key of Object.keys(params2)) {
         params2[key] = String(params2[key]);
       }
-      if (it.route.helmet && renderContext) {
+      if (it.route.head && renderContext && !it.error) {
         this.mergeRenderContext(it.route, renderContext, {
           ...props,
           ...context
@@ -316,13 +317,14 @@ class Router extends EventEmitter {
       const path = acc.replace(/\/+/, "/");
       if (it.error) {
         const errorHandler = this.getErrorHandler(it.route);
-        const element = errorHandler ? errorHandler({
+        const element = await (errorHandler ? errorHandler({
           ...it.config,
           error: it.error,
           url
-        }) : this.renderError(it.error);
+        }) : this.renderError(it.error));
         layers.push({
           props,
+          error: it.error,
           name: it.route.name,
           part: it.route.path,
           config: it.config,
@@ -386,15 +388,32 @@ class Router extends EventEmitter {
    * @protected
    */
   mergeRenderContext(page, ctx, props) {
-    if (page.helmet) {
-      const helmet = typeof page.helmet === "function" ? page.helmet(props) : page.helmet;
-      if (helmet.title) {
-        ctx.helmet ??= {};
-        if (ctx.helmet?.title) {
-          ctx.helmet.title = `${helmet.title} - ${ctx.helmet.title}`;
+    if (page.head) {
+      ctx.head ??= {};
+      const head = typeof page.head === "function" ? page.head(props, ctx.head) : page.head;
+      if (head.title) {
+        ctx.head ??= {};
+        if (ctx.head.titleSeparator) {
+          ctx.head.title = `${head.title}${ctx.head.titleSeparator}${ctx.head.title}`;
         } else {
-          ctx.helmet.title = helmet.title;
+          ctx.head.title = head.title;
         }
+        ctx.head.titleSeparator = head.titleSeparator;
+      }
+      if (head.htmlAttributes) {
+        ctx.head.htmlAttributes = {
+          ...ctx.head.htmlAttributes,
+          ...head.htmlAttributes
+        };
+      }
+      if (head.bodyAttributes) {
+        ctx.head.bodyAttributes = {
+          ...ctx.head.bodyAttributes,
+          ...head.bodyAttributes
+        };
+      }
+      if (head.meta) {
+        ctx.head.meta = [...ctx.head.meta ?? [], ...head.meta ?? []];
       }
     }
   }
@@ -563,10 +582,14 @@ class PageDescriptorProvider {
   }
 }
 
+const envSchema = t.object({
+  REACT_ROOT_ID: t.string({ default: "root" })
+});
 class ReactBrowserProvider {
   log = $logger();
   client = $inject(HttpClient);
   router = $inject(Router);
+  env = $inject(envSchema);
   root;
   transitioning;
   state = {
@@ -654,12 +677,49 @@ class ReactBrowserProvider {
       return await this.render({ url: result.redirect });
     }
     this.transitioning = void 0;
-    return { url };
+    return { url, context: result.context };
   }
-  renderHelmetContext(ctx) {
+  /**
+   * Render the helmet context.
+   *
+   * @param ctx
+   * @protected
+   */
+  renderHeadContext(ctx) {
     if (ctx.title) {
       this.document.title = ctx.title;
     }
+    if (ctx.bodyAttributes) {
+      for (const [key, value] of Object.entries(ctx.bodyAttributes)) {
+        if (value) {
+          this.document.body.setAttribute(key, value);
+        } else {
+          this.document.body.removeAttribute(key);
+        }
+      }
+    }
+    if (ctx.htmlAttributes) {
+      for (const [key, value] of Object.entries(ctx.htmlAttributes)) {
+        if (value) {
+          this.document.documentElement.setAttribute(key, value);
+        } else {
+          this.document.documentElement.removeAttribute(key);
+        }
+      }
+    }
+    if (ctx.meta) {
+      for (const [key, value] of Object.entries(ctx.meta)) {
+        const meta = this.document.querySelector(`meta[name="${key}"]`);
+        if (meta) {
+          meta.setAttribute("content", value.content);
+        } else {
+          const newMeta = this.document.createElement("meta");
+          newMeta.setAttribute("name", key);
+          newMeta.setAttribute("content", value.content);
+          this.document.head.appendChild(newMeta);
+        }
+      }
+    }
   }
   /**
    * Get embedded layers from the server.
@@ -680,13 +740,13 @@ class ReactBrowserProvider {
    * @protected
    */
   getRootElement() {
-    const root = this.document.getElementById("root");
+    const root = this.document.getElementById(this.env.REACT_ROOT_ID);
     if (root) {
       return root;
     }
     const div = this.document.createElement("div");
-    div.id = "root";
-    this.document.body.appendChild(div);
+    div.id = this.env.REACT_ROOT_ID;
+    this.document.body.prepend(div);
     return div;
   }
   getUserFromCookies() {
@@ -711,7 +771,13 @@ class ReactBrowserProvider {
     handler: async () => {
       const cache = this.getHydrationState();
       const previous = cache?.layers ?? [];
-      await this.render({ previous });
+      if (cache?.links) {
+        this.client.links = cache.links;
+      }
+      const { context } = await this.render({ previous });
+      if (context.head) {
+        this.renderHeadContext(context.head);
+      }
       const element = this.router.root(this.state, {
         user: cache?.user ?? this.getUserFromCookies()
       });
@@ -719,40 +785,30 @@ class ReactBrowserProvider {
         this.root = hydrateRoot(this.getRootElement(), element);
         this.log.info("Hydrated root element");
       } else {
-        this.root = createRoot(this.getRootElement());
+        this.root ??= createRoot(this.getRootElement());
         this.root.render(element);
         this.log.info("Created root element");
       }
       window.addEventListener("popstate", () => {
         this.render();
       });
-      this.router.on("end", ({ context }) => {
-        if (context.helmet) {
-          this.renderHelmetContext(context.helmet);
+      this.router.on("end", ({ context: context2 }) => {
+        if (context2.head) {
+          this.renderHeadContext(context2.head);
         }
       });
     }
   });
-  /**
-   *
-   * @protected
-   */
-  stop = $hook({
-    name: "stop",
-    handler: async () => {
-      if (this.root) {
-        this.root.unmount();
-        this.log.info("Unmounted root element");
-      }
-    }
-  });
 }
 
 class Auth {
   alepha = $inject(Alepha);
   log = $logger();
   client = $inject(HttpClient);
-  api = "/api/_oauth/login";
+  slugs = {
+    login: "/api/_oauth/login",
+    logout: "/api/_oauth/logout"
+  };
   start = $hook({
     name: "start",
     handler: async () => {
@@ -767,16 +823,16 @@ class Auth {
     if (this.alepha.isBrowser()) {
       const browser = this.alepha.get(ReactBrowserProvider);
       const redirect = browser.transitioning ? window.location.origin + browser.transitioning.to : window.location.href;
-      window.location.href = `${this.api}?redirect=${redirect}`;
+      window.location.href = `${this.slugs.login}?redirect=${redirect}`;
       if (browser.transitioning) {
         throw new RedirectionError(browser.state.pathname);
       }
       return;
     }
-    throw new RedirectionError(this.api);
+    throw new RedirectionError(this.slugs.login);
   };
   logout = () => {
-    window.location.href = `/api/_oauth/logout?redirect=${encodeURIComponent(window.location.origin)}`;
+    window.location.href = `${this.slugs.logout}?redirect=${encodeURIComponent(window.location.origin)}`;
   };
 }
 
@@ -906,8 +962,18 @@ const useRouter = () => {
 
 const Link = (props) => {
   React.useContext(RouterContext);
+  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()) {
+    console.log("I cannot go to", to);
+    return null;
+  }
+  const name = typeof props.to === "string" ? void 0 : props.to.options.name;
   const router = useRouter();
-  return /* @__PURE__ */ jsx("a", { ...router.createAnchorProps(props.to), ...props, children: props.children });
+  return /* @__PURE__ */ jsx("a", { ...router.createAnchorProps(to), ...props, children: props.children ?? name });
 };
 
 const useInject = (clazz) => {
@@ -915,7 +981,9 @@ const useInject = (clazz) => {
   if (!ctx) {
     throw new Error("useRouter must be used within a <RouterProvider>");
   }
-  return ctx.alepha.get(clazz);
+  return ctx.alepha.get(clazz, {
+    skipRegistration: true
+  });
 };
 
 const useClient = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alepha/react",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -9,23 +9,24 @@
     "./dist/index.js": "./dist/index.browser.js"
   },
   "dependencies": {
-    "@alepha/core": "0.6.0",
-    "@alepha/security": "0.6.0",
-    "@alepha/server": "0.6.0",
+    "@alepha/core": "0.6.2",
+    "@alepha/security": "0.6.2",
+    "@alepha/server": "0.6.2",
+    "cheerio": "^1.0.0",
     "openid-client": "^6.4.2",
     "path-to-regexp": "^8.2.0",
-    "react-dom": "^18.3.1"
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.20",
-    "@types/react-dom": "^18.3.6",
-    "pkgroll": "^2.12.1",
-    "react": "^18.3.1",
-    "vitest": "^3.1.1"
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
+    "pkgroll": "^2.12.2",
+    "react": "^19.1.0",
+    "vitest": "^3.1.2"
   },
   "peerDependencies": {
-    "@types/react": "^18",
-    "react": "^18"
+    "@types/react": "^19",
+    "react": "^19"
   },
   "scripts": {
     "build": "pkgroll --clean-dist"

package/src/components/Link.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import type { AnchorHTMLAttributes } from "react";
-import { RouterContext } from "../contexts/RouterContext";
-import { useRouter } from "../hooks/useRouter";
-
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-	to: string;
-	children?: React.ReactNode;
-}
-
-const Link = (props: LinkProps) => {
-	React.useContext(RouterContext);
-
-	const router = useRouter();
-	return (
-		<a {...router.createAnchorProps(props.to)} {...props}>
-			{props.children}
-		</a>
-	);
-};
-
-export default Link;

package/src/components/NestedView.tsx

@@ -1,36 +0,0 @@
-import type { ReactNode } from "react";
-import { useContext, useEffect, useState } from "react";
-import { RouterContext } from "../contexts/RouterContext";
-import { RouterLayerContext } from "../contexts/RouterLayerContext";
-
-export interface NestedViewProps {
-	children?: ReactNode;
-}
-
-/**
- * Nested view component
- *
- * @param props
- * @constructor
- */
-const NestedView = (props: NestedViewProps) => {
-	const app = useContext(RouterContext);
-	const layer = useContext(RouterLayerContext);
-	const index = layer?.index ?? 0;
-
-	const [view, setView] = useState<ReactNode | undefined>(
-		app?.state.layers[index]?.element,
-	);
-
-	useEffect(() => {
-		if (app?.alepha.isBrowser()) {
-			return app?.router.on("end", (state) => {
-				setView(state.layers[index]?.element);
-			});
-		}
-	}, [app]);
-
-	return view ?? props.children ?? null;
-};
-
-export default NestedView;

package/src/constants/SSID.ts

@@ -1 +0,0 @@
-export const SSID = "ssid";