@alepha/react 0.5.2 → 0.6.1

package/dist/{useRouterState-CvFCmaq7.js → useAuth-i7wbKVrt.js}

@@ -1,9 +1,20 @@
-import { __descriptor, NotImplementedError, KIND, EventEmitter, $logger, $inject, Alepha, $hook } from '@alepha/core';
-import { createContext, useContext, useState, useEffect, createElement, useMemo } from 'react';
+import { __descriptor, KIND, NotImplementedError, EventEmitter, $logger, $inject, Alepha, $hook } from '@alepha/core';
+import { jsx } from 'react/jsx-runtime';
+import React, { createContext, useContext, useState, useEffect, createElement, useMemo } from 'react';
 import { HttpClient } from '@alepha/server';
 import { hydrateRoot, createRoot } from 'react-dom/client';
 import { compile, match } from 'path-to-regexp';
 
+const KEY = "AUTH";
+const $auth = (options) => {
+  __descriptor(KEY);
+  return {
+    [KIND]: KEY,
+    options
+  };
+};
+$auth[KIND] = KEY;
+
 const pageDescriptorKey = "PAGE";
 const $page = (options) => {
   __descriptor(pageDescriptorKey);
@@ -38,20 +49,21 @@ const NestedView = (props) => {
   );
   useEffect(() => {
     if (app?.alepha.isBrowser()) {
-      return app?.router.on("end", ({ layers }) => {
-        setView(layers[index]?.element);
+      return app?.router.on("end", (state) => {
+        setView(state.layers[index]?.element);
       });
     }
   }, [app]);
   return view ?? props.children ?? null;
 };
 
-class RedirectException extends Error {
+class RedirectionError extends Error {
   constructor(page) {
     super("Redirection");
     this.page = page;
   }
 }
+
 class Router extends EventEmitter {
   log = $logger();
   alepha = $inject(Alepha);
@@ -73,7 +85,7 @@ class Router extends EventEmitter {
   /**
    *
    */
-  root(state, opts = {}) {
+  root(state, context = {}) {
     return createElement(
       RouterContext.Provider,
       {
@@ -81,7 +93,10 @@ class Router extends EventEmitter {
           state,
           router: this,
           alepha: this.alepha,
-          session: opts.user ? { user: opts.user } : void 0
+          args: {
+            user: context.user,
+            cookies: context.cookies
+          }
         }
       },
       state.layers[0]?.element
@@ -97,11 +112,12 @@ class Router extends EventEmitter {
     const state = {
       pathname,
       search,
-      layers: []
+      layers: [],
+      context: {}
     };
-    this.emit("begin", void 0);
+    await this.emit("begin", void 0);
     try {
-      let layers = await this.match(url, options);
+      let layers = await this.match(url, options, state.context);
       if (layers.length === 0) {
         if (this.notFoundPageRoute) {
           layers = await this.createLayers(url, this.notFoundPageRoute);
@@ -115,13 +131,14 @@ class Router extends EventEmitter {
         }
       }
       state.layers = layers;
-      this.emit("success", void 0);
+      await this.emit("success", void 0);
     } catch (e) {
-      if (e instanceof RedirectException) {
+      if (e instanceof RedirectionError) {
         return {
           element: null,
           layers: [],
-          redirect: typeof e.page === "string" ? e.page : this.href(e.page)
+          redirect: typeof e.page === "string" ? e.page : this.href(e.page),
+          context: state.context
         };
       }
       this.log.error(e);
@@ -133,31 +150,35 @@ class Router extends EventEmitter {
           path: "/"
         }
       ];
-      this.emit("error", e);
+      await this.emit("error", e);
     }
     if (options.state) {
       options.state.layers = state.layers;
       options.state.pathname = state.pathname;
       options.state.search = state.search;
-      this.emit("end", options.state);
+      options.state.context = state.context;
+      await this.emit("end", options.state);
       return {
-        element: this.root(options.state, options),
-        layers: options.state.layers
+        element: this.root(options.state, options.args),
+        layers: options.state.layers,
+        context: state.context
       };
     }
-    this.emit("end", state);
+    await this.emit("end", state);
     return {
-      element: this.root(state, options),
-      layers: state.layers
+      element: this.root(state, options.args),
+      layers: state.layers,
+      context: state.context
     };
   }
   /**
    *
    * @param url
    * @param options
+   * @param context
    * @protected
    */
-  async match(url, options = {}) {
+  async match(url, options = {}, context = {}) {
     const pages = this.pages;
     const previous = options.previous;
     const [pathname, search] = url.split("?");
@@ -179,7 +200,8 @@ class Router extends EventEmitter {
           params,
           query,
           previous,
-          options.user
+          options.args,
+          context
         );
       }
     }
@@ -188,14 +210,16 @@ class Router extends EventEmitter {
   /**
    * Create layers for the given route.
    *
+   * @param url
    * @param route
    * @param params
    * @param query
    * @param previous
-   * @param user
+   * @param args
+   * @param renderContext
    * @protected
    */
-  async createLayers(url, route, params = {}, query = {}, previous = [], user) {
+  async createLayers(url, route, params = {}, query = {}, previous = [], args, renderContext) {
     const layers = [];
     let context = {};
     const stack = [{ route }];
@@ -210,13 +234,13 @@ class Router extends EventEmitter {
       const route2 = it.route;
       const config = {};
       try {
-        config.query = route2.schema?.query ? this.alepha.parse(route2.schema.query, query) : {};
+        config.query = route2.schema?.query ? this.alepha.parse(route2.schema.query, query) : query;
       } catch (e) {
         it.error = e;
         break;
       }
       try {
-        config.params = route2.schema?.params ? this.alepha.parse(route2.schema.params, params) : {};
+        config.params = route2.schema?.params ? this.alepha.parse(route2.schema.params, params) : params;
       } catch (e) {
         it.error = e;
         break;
@@ -248,12 +272,15 @@ class Router extends EventEmitter {
         forceRefresh = true;
       }
       try {
-        const props = await route2.resolve?.({
-          ...config,
-          ...context,
-          user,
-          url
-        }) ?? {};
+        const props = await route2.resolve?.(
+          {
+            ...config,
+            ...context,
+            context: args,
+            url
+          },
+          args ?? {}
+        ) ?? {};
         it.props = {
           ...props
         };
@@ -262,7 +289,7 @@ class Router extends EventEmitter {
           ...props
         };
       } catch (e) {
-        if (e instanceof RedirectException) {
+        if (e instanceof RedirectionError) {
           throw e;
         }
         this.log.error(e);
@@ -278,6 +305,12 @@ class Router extends EventEmitter {
       for (const key of Object.keys(params2)) {
         params2[key] = String(params2[key]);
       }
+      if (it.route.helmet && renderContext) {
+        this.mergeRenderContext(it.route, renderContext, {
+          ...props,
+          ...context
+        });
+      }
       acc += "/";
       acc += it.route.path ? compile(it.route.path)(params2) : "";
       const path = acc.replace(/\/+/, "/");
@@ -344,6 +377,27 @@ class Router extends EventEmitter {
     }
     return void 0;
   }
+  /**
+   * Merge the render context with the page context.
+   *
+   * @param page
+   * @param ctx
+   * @param props
+   * @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}`;
+        } else {
+          ctx.helmet.title = helmet.title;
+        }
+      }
+    }
+  }
   /**
    *
    * @param e
@@ -515,7 +569,12 @@ class ReactBrowserProvider {
   router = $inject(Router);
   root;
   transitioning;
-  state = { layers: [], pathname: "", search: "" };
+  state = {
+    layers: [],
+    pathname: "",
+    search: "",
+    context: {}
+  };
   /**
    *
    */
@@ -597,12 +656,17 @@ class ReactBrowserProvider {
     this.transitioning = void 0;
     return { url };
   }
+  renderHelmetContext(ctx) {
+    if (ctx.title) {
+      this.document.title = ctx.title;
+    }
+  }
   /**
    * Get embedded layers from the server.
    *
    * @protected
    */
-  getEmbeddedCache() {
+  getHydrationState() {
     try {
       if ("__ssr" in window && typeof window.__ssr === "object") {
         return window.__ssr;
@@ -625,6 +689,18 @@ class ReactBrowserProvider {
     this.document.body.appendChild(div);
     return div;
   }
+  getUserFromCookies() {
+    const cookies = this.document.cookie.split("; ");
+    const userCookie = cookies.find((cookie) => cookie.startsWith("user="));
+    try {
+      if (userCookie) {
+        return JSON.parse(decodeURIComponent(userCookie.split("=")[1]));
+      }
+    } catch (error) {
+      this.log.warn(error, "Failed to parse user cookie");
+    }
+    return void 0;
+  }
   // -------------------------------------------------------------------------------------------------------------------
   /**
    *
@@ -633,11 +709,12 @@ class ReactBrowserProvider {
   ready = $hook({
     name: "ready",
     handler: async () => {
-      const cache = this.getEmbeddedCache();
+      const cache = this.getHydrationState();
       const previous = cache?.layers ?? [];
-      const session = cache?.session ?? await this.client.of().session();
       await this.render({ previous });
-      const element = this.router.root(this.state, session);
+      const element = this.router.root(this.state, {
+        user: cache?.user ?? this.getUserFromCookies()
+      });
       if (previous.length > 0) {
         this.root = hydrateRoot(this.getRootElement(), element);
         this.log.info("Hydrated root element");
@@ -649,6 +726,11 @@ class ReactBrowserProvider {
       window.addEventListener("popstate", () => {
         this.render();
       });
+      this.router.on("end", ({ context }) => {
+        if (context.helmet) {
+          this.renderHelmetContext(context.helmet);
+        }
+      });
     }
   });
   /**
@@ -666,6 +748,38 @@ class ReactBrowserProvider {
   });
 }
 
+class Auth {
+  alepha = $inject(Alepha);
+  log = $logger();
+  client = $inject(HttpClient);
+  api = "/api/_oauth/login";
+  start = $hook({
+    name: "start",
+    handler: async () => {
+      this.client.on("onError", (err) => {
+        if (err.statusCode === 401) {
+          this.login();
+        }
+      });
+    }
+  });
+  login = (provider) => {
+    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}`;
+      if (browser.transitioning) {
+        throw new RedirectionError(browser.state.pathname);
+      }
+      return;
+    }
+    throw new RedirectionError(this.api);
+  };
+  logout = () => {
+    window.location.href = `/api/_oauth/logout?redirect=${encodeURIComponent(window.location.origin)}`;
+  };
+}
+
 class RouterHookApi {
   constructor(state, layer, browser) {
     this.state = state;
@@ -790,51 +904,18 @@ const useRouter = () => {
   );
 };
 
-const useActive = (path) => {
+const Link = (props) => {
+  React.useContext(RouterContext);
   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;
-  useEffect(
-    () => ctx.router.on("end", ({ pathname }) => setCurrent(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);
-        });
-      }
-    }
-  };
+  return /* @__PURE__ */ jsx("a", { ...router.createAnchorProps(props.to), ...props, children: props.children });
 };
 
-const useInject = (classEntry) => {
+const useInject = (clazz) => {
   const ctx = useContext(RouterContext);
   if (!ctx) {
     throw new Error("useRouter must be used within a <RouterProvider>");
   }
-  return ctx.alepha.get(classEntry);
+  return ctx.alepha.get(clazz);
 };
 
 const useClient = () => {
@@ -923,4 +1004,60 @@ const useRouterState = () => {
   return state;
 };
 
-export { $page as $, NestedView as N, PageDescriptorProvider as P, Router as R, RouterContext as a, RouterLayerContext as b, useClient as c, useInject as d, useQueryParams as e, RouterHookApi as f, useRouter as g, useRouterEvents as h, useRouterState as i, RedirectException as j, ReactBrowserProvider as k, pageDescriptorKey as p, useActive as u };
+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;
+  useEffect(
+    () => ctx.router.on("end", ({ pathname }) => setCurrent(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 useAuth = () => {
+  const ctx = useContext(RouterContext);
+  if (!ctx) {
+    throw new Error("useAuth must be used within a RouterContext");
+  }
+  const args = ctx.args ?? {};
+  return {
+    user: args.user,
+    logout: () => {
+      ctx.alepha.get(Auth).logout();
+    },
+    login: (provider) => {
+      ctx.alepha.get(Auth).login();
+    }
+  };
+};
+
+export { $auth as $, Auth as A, Link as L, NestedView as N, PageDescriptorProvider as P, Router as R, $page as a, RouterContext as b, RouterLayerContext as c, RouterHookApi as d, useClient as e, useQueryParams as f, useRouter as g, useRouterEvents as h, useRouterState as i, useActive as j, useAuth as k, ReactBrowserProvider as l, RedirectionError as m, pageDescriptorKey as p, useInject as u };

package/package.json

@@ -1,39 +1,41 @@
 {
   "name": "@alepha/react",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "type": "module",
   "license": "MIT",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "browser": "./dist/index.browser.js",
+  "browser": {
+    "./dist/index.js": "./dist/index.browser.js"
+  },
   "dependencies": {
-    "@alepha/cache": "0.5.2",
-    "@alepha/core": "0.5.2",
-    "@alepha/security": "0.5.2",
-    "@alepha/server": "0.5.2",
-    "openid-client": "^6.4.1",
+    "@alepha/core": "0.6.1",
+    "@alepha/security": "0.6.1",
+    "@alepha/server": "0.6.1",
+    "openid-client": "^6.4.2",
     "path-to-regexp": "^8.2.0",
-    "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.20",
-    "@types/react-dom": "^18.3.5",
+    "@types/react-dom": "^18.3.6",
     "pkgroll": "^2.12.1",
+    "react": "^18.3.1",
     "vitest": "^3.1.1"
   },
+  "peerDependencies": {
+    "@types/react": "^18",
+    "react": "^18"
+  },
   "scripts": {
     "build": "pkgroll --clean-dist"
   },
   "exports": {
-    "default": "./dist/index.js",
-    "node": {
-      "require": "./dist/index.cjs",
+    ".": {
       "import": "./dist/index.js",
-      "module": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "browser": "./dist/index.browser.js"
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts",
+      "browser": "./dist/index.browser.js"
+    }
   }
 }

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", ({ layers }) => {
-				setView(layers[index]?.element);
-			});
-		}
-	}, [app]);
-
-	return view ?? props.children ?? null;
-};
-
-export default NestedView;

package/src/contexts/RouterContext.ts

@@ -1,15 +0,0 @@
-import type { Alepha } from "@alepha/core";
-import { createContext } from "react";
-import type { Session } from "../providers/ReactSessionProvider";
-import type { Router, RouterState } from "../services/Router";
-
-export interface RouterContextValue {
-	router: Router;
-	alepha: Alepha;
-	state: RouterState;
-	session?: Session;
-}
-
-export const RouterContext = createContext<RouterContextValue | undefined>(
-	undefined,
-);

package/src/contexts/RouterLayerContext.ts

@@ -1,10 +0,0 @@
-import { createContext } from "react";
-
-export interface RouterLayerContextValue {
-	index: number;
-	path: string;
-}
-
-export const RouterLayerContext = createContext<
-	RouterLayerContextValue | undefined
->(undefined);