@alepha/react 0.6.2 → 0.6.3

package/dist/{useAuth-Ps01oe8e.js → useActive-dAmCT31a.js}

@@ -1,41 +1,47 @@
-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';
+import { __descriptor, NotImplementedError, KIND, $logger, $inject, Alepha, EventEmitter, $hook, t } from '@alepha/core';
 import { hydrateRoot, createRoot } from 'react-dom/client';
-import { compile, match } from 'path-to-regexp';
+import { RouterProvider } from '@alepha/router';
 
-const KEY = "AUTH";
-const $auth = (options) => {
+const KEY = "PAGE";
+const $page = (options) => {
   __descriptor(KEY);
-  return {
-    [KIND]: KEY,
-    options,
-    jwks: () => {
-      return options.oidc?.issuer ?? "";
+  if (options.children) {
+    for (const child of options.children) {
+      child.options.parent = {
+        options
+      };
     }
-  };
-};
-$auth[KIND] = KEY;
-
-const pageDescriptorKey = "PAGE";
-const $page = (options) => {
-  __descriptor(pageDescriptorKey);
+  }
+  if (options.parent) {
+    options.parent.options.children ??= [];
+    options.parent.options.children.push({
+      options
+    });
+  }
   return {
-    [KIND]: pageDescriptorKey,
+    [KIND]: KEY,
     options,
     render: () => {
-      throw new NotImplementedError(pageDescriptorKey);
+      throw new NotImplementedError(KEY);
     },
     go: () => {
-      throw new NotImplementedError(pageDescriptorKey);
+      throw new NotImplementedError(KEY);
     },
     createAnchorProps: () => {
-      throw new NotImplementedError(pageDescriptorKey);
+      throw new NotImplementedError(KEY);
+    },
+    can: () => {
+      if (options.can) {
+        return options.can();
+      }
+      return true;
     }
   };
 };
-$page[KIND] = pageDescriptorKey;
+$page[KIND] = KEY;
 
 const RouterContext = createContext(
   void 0
@@ -52,7 +58,7 @@ const NestedView = (props) => {
   );
   useEffect(() => {
     if (app?.alepha.isBrowser()) {
-      return app?.router.on("end", (state) => {
+      return app?.events.on("end", (state) => {
         setView(state.layers[index]?.element);
       });
     }
@@ -67,159 +73,37 @@ class RedirectionError extends Error {
   }
 }
 
-class Router extends EventEmitter {
+class PageDescriptorProvider {
   log = $logger();
   alepha = $inject(Alepha);
   pages = [];
-  notFoundPageRoute;
-  /**
-   * Get the page by name.
-   *
-   * @param name - Page name
-   * @return PageRoute
-   */
+  getPages() {
+    return this.pages;
+  }
   page(name) {
-    const found = this.pages.find((it) => it.name === name);
-    if (!found) {
-      throw new Error(`Page ${name} not found`);
+    for (const page of this.pages) {
+      if (page.name === name) {
+        return page;
+      }
     }
-    return found;
+    throw new Error(`Page ${name} not found`);
   }
-  /**
-   *
-   */
-  root(state, context = {}) {
+  root(state, context = {}, events) {
     return createElement(
       RouterContext.Provider,
       {
         value: {
-          state,
-          router: this,
           alepha: this.alepha,
-          args: context
+          state,
+          context,
+          events: events ?? new EventEmitter()
         }
       },
-      state.layers[0]?.element
+      createElement(NestedView, {}, state.layers[0]?.element)
     );
   }
-  /**
-   *
-   * @param url
-   * @param options
-   */
-  async render(url, options = {}) {
-    const [pathname, search = ""] = url.split("?");
-    const state = {
-      pathname,
-      search,
-      layers: [],
-      context: {}
-    };
-    await this.emit("begin", void 0);
-    try {
-      let layers = await this.match(url, options, state.context);
-      if (layers.length === 0) {
-        if (this.notFoundPageRoute) {
-          layers = await this.createLayers(url, this.notFoundPageRoute);
-        } else {
-          layers.push({
-            name: "not-found",
-            element: "Not Found",
-            index: 0,
-            path: "/"
-          });
-        }
-      }
-      state.layers = layers;
-      await this.emit("success", void 0);
-    } catch (e) {
-      if (e instanceof RedirectionError) {
-        return {
-          element: null,
-          layers: [],
-          redirect: typeof e.page === "string" ? e.page : this.href(e.page),
-          context: state.context
-        };
-      }
-      this.log.error(e);
-      state.layers = [
-        {
-          name: "error",
-          element: this.renderError(e),
-          index: 0,
-          path: "/"
-        }
-      ];
-      await this.emit("error", e);
-    }
-    if (options.state) {
-      options.state.layers = state.layers;
-      options.state.pathname = state.pathname;
-      options.state.search = state.search;
-      options.state.context = state.context;
-      await this.emit("end", options.state);
-      return {
-        element: this.root(options.state, options.args),
-        layers: options.state.layers,
-        context: state.context
-      };
-    }
-    await this.emit("end", state);
-    return {
-      element: this.root(state, options.args),
-      layers: state.layers,
-      context: state.context
-    };
-  }
-  /**
-   *
-   * @param url
-   * @param options
-   * @param context
-   * @protected
-   */
-  async match(url, options = {}, context = {}) {
-    const pages = this.pages;
-    const previous = options.previous;
-    const [pathname, search] = url.split("?");
-    for (const route of pages) {
-      if (route.children?.find((it) => !it.path || it.path === "/")) continue;
-      if (!route.match) continue;
-      const match2 = route.match.exec(pathname);
-      if (match2) {
-        const params = match2.params ?? {};
-        const query = {};
-        if (search) {
-          for (const [key, value] of new URLSearchParams(search).entries()) {
-            query[key] = String(value);
-          }
-        }
-        return await this.createLayers(
-          url,
-          route,
-          params,
-          query,
-          previous,
-          options.args,
-          context
-        );
-      }
-    }
-    return [];
-  }
-  /**
-   * Create layers for the given route.
-   *
-   * @param url
-   * @param route
-   * @param params
-   * @param query
-   * @param previous
-   * @param args
-   * @param renderContext
-   * @protected
-   */
-  async createLayers(url, route, params = {}, query = {}, previous = [], args, renderContext) {
+  async createLayers(route, request) {
+    const { pathname, search } = request.url;
     const layers = [];
     let context = {};
     const stack = [{ route }];
@@ -234,13 +118,13 @@ class Router extends EventEmitter {
       const route2 = it.route;
       const config = {};
       try {
-        config.query = route2.schema?.query ? this.alepha.parse(route2.schema.query, query) : query;
+        config.query = route2.schema?.query ? this.alepha.parse(route2.schema.query, request.query) : request.query;
       } catch (e) {
         it.error = e;
         break;
       }
       try {
-        config.params = route2.schema?.params ? this.alepha.parse(route2.schema.params, params) : params;
+        config.params = route2.schema?.params ? this.alepha.parse(route2.schema.params, request.params) : request.params;
       } catch (e) {
         it.error = e;
         break;
@@ -251,14 +135,15 @@ class Router extends EventEmitter {
       if (!route2.resolve) {
         continue;
       }
+      const previous = request.previous;
       if (previous?.[i] && !forceRefresh && previous[i].name === route2.name) {
-        const url2 = (str) => str ? str.replace(/\/\/+/g, "/") : "/";
+        const url = (str) => str ? str.replace(/\/\/+/g, "/") : "/";
         const prev = JSON.stringify({
-          part: url2(previous[i].part),
+          part: url(previous[i].part),
           params: previous[i].config?.params ?? {}
         });
         const curr = JSON.stringify({
-          part: url2(route2.path),
+          part: url(route2.path),
           params: config.params ?? {}
         });
         if (prev === curr) {
@@ -273,15 +158,14 @@ class Router extends EventEmitter {
         forceRefresh = true;
       }
       try {
-        const props = await route2.resolve?.(
-          {
-            ...config,
-            ...context,
-            context: args,
-            url
-          },
-          args ?? {}
-        ) ?? {};
+        const props = await route2.resolve?.({
+          ...request,
+          // request
+          ...config,
+          // params, query
+          ...context
+          // previous props
+        }) ?? {};
         it.props = {
           ...props
         };
@@ -291,7 +175,13 @@ class Router extends EventEmitter {
         };
       } catch (e) {
         if (e instanceof RedirectionError) {
-          throw e;
+          return {
+            layers: [],
+            redirect: typeof e.page === "string" ? e.page : this.href(e.page),
+            head: request.head,
+            pathname,
+            search
+          };
         }
         this.log.error(e);
         it.error = e;
@@ -302,25 +192,25 @@ class Router extends EventEmitter {
     for (let i = 0; i < stack.length; i++) {
       const it = stack[i];
       const props = it.props ?? {};
-      const params2 = { ...it.config?.params };
-      for (const key of Object.keys(params2)) {
-        params2[key] = String(params2[key]);
+      const params = { ...it.config?.params };
+      for (const key of Object.keys(params)) {
+        params[key] = String(params[key]);
       }
-      if (it.route.head && renderContext && !it.error) {
-        this.mergeRenderContext(it.route, renderContext, {
+      if (it.route.head && !it.error) {
+        this.fillHead(it.route, request, {
           ...props,
           ...context
         });
       }
       acc += "/";
-      acc += it.route.path ? compile(it.route.path)(params2) : "";
+      acc += it.route.path ? this.compile(it.route.path, params) : "";
       const path = acc.replace(/\/+/, "/");
       if (it.error) {
         const errorHandler = this.getErrorHandler(it.route);
         const element = await (errorHandler ? errorHandler({
           ...it.config,
           error: it.error,
-          url
+          url: ""
         }) : this.renderError(it.error));
         layers.push({
           props,
@@ -348,13 +238,8 @@ class Router extends EventEmitter {
         path
       });
     }
-    return layers;
+    return { layers, head: request.head, pathname, search };
   }
-  /**
-   *
-   * @param route
-   * @protected
-   */
   getErrorHandler(route) {
     if (route.errorHandler) return route.errorHandler;
     let parent = route.parent;
@@ -363,12 +248,6 @@ class Router extends EventEmitter {
       parent = parent.parent;
     }
   }
-  /**
-   *
-   * @param page
-   * @param props
-   * @protected
-   */
   async createElement(page, props) {
     if (page.lazy) {
       const component = await page.lazy();
@@ -379,65 +258,43 @@ 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.head) {
+  fillHead(page, ctx, props) {
+    if (!page.head) {
+      return;
+    }
+    ctx.head ??= {};
+    const head = typeof page.head === "function" ? page.head(props, ctx.head) : page.head;
+    if (head.title) {
       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.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 ?? []];
+      if (ctx.head.titleSeparator) {
+        ctx.head.title = `${head.title}${ctx.head.titleSeparator}${ctx.head.title}`;
+      } else {
+        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 ?? []];
     }
   }
-  /**
-   *
-   * @param e
-   * @protected
-   */
   renderError(e) {
     return createElement("pre", { style: { overflow: "auto" } }, `${e.stack}`);
   }
-  /**
-   * Render an empty view.
-   *
-   * @protected
-   */
   renderEmptyView() {
     return createElement(NestedView, {});
   }
-  /**
-   * Create a valid href for the given page.
-   * @param page
-   * @param params
-   */
   href(page, params = {}) {
     const found = this.pages.find((it) => it.name === page.options.name);
     if (!found) {
@@ -449,16 +306,15 @@ class Router extends EventEmitter {
       url = `${parent.path ?? ""}/${url}`;
       parent = parent.parent;
     }
-    url = compile(url)(params);
+    url = this.compile(url, params);
     return url.replace(/\/\/+/g, "/") || "/";
   }
-  /**
-   *
-   * @param index
-   * @param path
-   * @param view
-   * @protected
-   */
+  compile(path, params = {}) {
+    for (const [key, value] of Object.entries(params)) {
+      path = path.replace(`:${key}`, value);
+    }
+    return path;
+  }
   renderView(index, path, view = this.renderEmptyView()) {
     return createElement(
       RouterLayerContext.Provider,
@@ -471,23 +327,39 @@ class Router extends EventEmitter {
       view
     );
   }
-  /**
-   *
-   * @param entry
-   */
+  configure = $hook({
+    name: "configure",
+    handler: () => {
+      const pages = this.alepha.getDescriptorValues($page);
+      for (const { value, key } of pages) {
+        value.options.name ??= key;
+        if (value.options.parent) {
+          continue;
+        }
+        this.add(this.map(pages, value));
+      }
+    }
+  });
+  map(pages, target) {
+    const children = target.options.children ?? [];
+    for (const it of pages) {
+      if (it.value.options.parent === target) {
+        children.push(it.value);
+      }
+    }
+    return {
+      ...target.options,
+      parent: void 0,
+      children: children.map((it) => this.map(pages, it))
+    };
+  }
   add(entry) {
     if (this.alepha.isReady()) {
       throw new Error("Router is already initialized");
     }
-    if (entry.notFoundHandler) {
-      this.notFoundPageRoute = {
-        name: "not-found",
-        component: entry.notFoundHandler
-      };
-    }
     entry.name ??= this.nextId();
     const page = entry;
-    page.match = this.createMatchFunction(page);
+    page.match = this.createMatch(page);
     this.pages.push(page);
     if (page.children) {
       for (const child of page.children) {
@@ -496,13 +368,7 @@ class Router extends EventEmitter {
       }
     }
   }
-  /**
-   * Create a match function for the given page.
-   *
-   * @param page
-   * @protected
-   */
-  createMatchFunction(page) {
+  createMatch(page) {
     let url = page.path ?? "/";
     let target = page.parent;
     while (target) {
@@ -510,76 +376,166 @@ class Router extends EventEmitter {
       target = target.parent;
     }
     let path = url.replace(/\/\/+/g, "/");
-    if (path.endsWith("/")) {
+    if (path.endsWith("/") && path !== "/") {
       path = path.slice(0, -1);
     }
-    if (path.includes("?")) {
-      return {
-        exec: match(path.split("?")[0]),
-        path
-      };
-    }
-    return {
-      exec: match(path),
-      path
-    };
+    return path;
   }
-  /**
-   *
-   */
-  empty() {
-    return this.pages.length === 0;
-  }
-  /**
-   *
-   * @protected
-   */
   _next = 0;
-  /**
-   *
-   * @protected
-   */
   nextId() {
     this._next += 1;
     return `P${this._next}`;
   }
 }
+const isPageRoute = (it) => {
+  return it && typeof it === "object" && typeof it.path === "string" && typeof it.page === "object";
+};
 
-class PageDescriptorProvider {
+class BrowserHeadProvider {
+  renderHead(document, head) {
+    if (head.title) {
+      document.title = head.title;
+    }
+    if (head.bodyAttributes) {
+      for (const [key, value] of Object.entries(head.bodyAttributes)) {
+        if (value) {
+          document.body.setAttribute(key, value);
+        } else {
+          document.body.removeAttribute(key);
+        }
+      }
+    }
+    if (head.htmlAttributes) {
+      for (const [key, value] of Object.entries(head.htmlAttributes)) {
+        if (value) {
+          document.documentElement.setAttribute(key, value);
+        } else {
+          document.documentElement.removeAttribute(key);
+        }
+      }
+    }
+    if (head.meta) {
+      for (const [key, value] of Object.entries(head.meta)) {
+        const meta = document.querySelector(`meta[name="${key}"]`);
+        if (meta) {
+          meta.setAttribute("content", value.content);
+        } else {
+          const newMeta = document.createElement("meta");
+          newMeta.setAttribute("name", key);
+          newMeta.setAttribute("content", value.content);
+          document.head.appendChild(newMeta);
+        }
+      }
+    }
+  }
+}
+
+class BrowserRouterProvider extends RouterProvider {
+  log = $logger();
   alepha = $inject(Alepha);
-  router = $inject(Router);
+  pageDescriptorProvider = $inject(PageDescriptorProvider);
+  events = new EventEmitter();
+  add(entry) {
+    this.pageDescriptorProvider.add(entry);
+  }
   configure = $hook({
     name: "configure",
-    handler: () => {
-      const pages = this.alepha.getDescriptorValues($page);
-      for (const { value, key } of pages) {
-        value.options.name ??= key;
-        if (pages.find((it) => it.value.options.children?.().includes(value))) {
-          continue;
+    handler: async () => {
+      for (const page of this.pageDescriptorProvider.getPages()) {
+        if (page.component || page.lazy) {
+          this.push({
+            path: page.match,
+            page
+          });
         }
-        this.router.add(this.map(pages, value));
       }
     }
   });
-  /**
-   * Transform
-   * @param pages
-   * @param target
-   * @protected
-   */
-  map(pages, target) {
-    const children = target.options.children?.() ?? [];
-    for (const it of pages) {
-      if (it.value.options.parent === target) {
-        children.push(it.value);
+  async transition(url, options = {}) {
+    const { pathname, search } = url;
+    const state = {
+      pathname,
+      search,
+      layers: [],
+      head: {}
+    };
+    await this.events.emit("begin", void 0);
+    try {
+      const previous = options.previous;
+      const { route, params } = this.match(pathname);
+      const query = {};
+      if (search) {
+        for (const [key, value] of new URLSearchParams(search).entries()) {
+          query[key] = String(value);
+        }
       }
+      if (isPageRoute(route)) {
+        const result = await this.pageDescriptorProvider.createLayers(
+          route.page,
+          {
+            url,
+            params: params ?? {},
+            query,
+            previous,
+            ...state,
+            head: state.head,
+            ...options.context ?? {}
+          }
+        );
+        if (result.redirect) {
+          return {
+            element: null,
+            layers: [],
+            redirect: result.redirect,
+            head: state.head
+          };
+        }
+        state.layers = result.layers;
+        state.head = result.head;
+      }
+      if (state.layers.length === 0) {
+        state.layers.push({
+          name: "not-found",
+          element: "Not Found",
+          index: 0,
+          path: "/"
+        });
+      }
+      await this.events.emit("success", void 0);
+    } catch (e) {
+      this.log.error(e);
+      state.layers = [
+        {
+          name: "error",
+          element: this.pageDescriptorProvider.renderError(e),
+          index: 0,
+          path: "/"
+        }
+      ];
+      await this.events.emit("error", e);
     }
+    if (!options.state) {
+      await this.events.emit("end", state);
+      return {
+        element: this.root(state, options.context),
+        layers: state.layers,
+        head: state.head
+      };
+    }
+    options.state.layers = state.layers;
+    options.state.pathname = state.pathname;
+    options.state.search = state.search;
+    options.state.head = state.head;
+    await this.events.emit("end", options.state);
     return {
-      ...target.options,
-      parent: void 0,
-      children: children.map((it) => this.map(pages, it))
+      element: this.root(state, options.context),
+      layers: options.state.layers,
+      head: state.head
     };
   }
+  root(state, context = {}) {
+    return this.pageDescriptorProvider.root(state, context, this.events);
+  }
 }
 
 const envSchema = t.object({
@@ -588,7 +544,9 @@ const envSchema = t.object({
 class ReactBrowserProvider {
   log = $logger();
   client = $inject(HttpClient);
-  router = $inject(Router);
+  alepha = $inject(Alepha);
+  router = $inject(BrowserRouterProvider);
+  headProvider = $inject(BrowserHeadProvider);
   env = $inject(envSchema);
   root;
   transitioning;
@@ -596,30 +554,17 @@ class ReactBrowserProvider {
     layers: [],
     pathname: "",
     search: "",
-    context: {}
+    head: {}
   };
-  /**
-   *
-   */
   get document() {
     return window.document;
   }
-  /**
-   *
-   */
   get history() {
     return window.history;
   }
-  /**
-   *
-   */
   get url() {
     return window.location.pathname + window.location.search;
   }
-  /**
-   *
-   * @param props
-   */
   async invalidate(props) {
     const previous = [];
     if (props) {
@@ -660,66 +605,22 @@ class ReactBrowserProvider {
     }
     this.history.pushState({}, "", url);
   }
-  /**
-   *
-   * @param options
-   * @protected
-   */
   async render(options = {}) {
     const previous = options.previous ?? this.state.layers;
     const url = options.url ?? this.url;
     this.transitioning = { to: url };
-    const result = await this.router.render(url, {
-      previous,
-      state: this.state
-    });
+    const result = await this.router.transition(
+      new URL(`http://localhost${url}`),
+      {
+        previous,
+        state: this.state
+      }
+    );
     if (result.redirect) {
       return await this.render({ url: result.redirect });
     }
     this.transitioning = void 0;
-    return { url, context: result.context };
-  }
-  /**
-   * 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);
-        }
-      }
-    }
+    return { url, head: result.head };
   }
   /**
    * Get embedded layers from the server.
@@ -749,18 +650,6 @@ class ReactBrowserProvider {
     this.document.body.prepend(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;
-  }
   // -------------------------------------------------------------------------------------------------------------------
   /**
    *
@@ -774,13 +663,16 @@ class ReactBrowserProvider {
       if (cache?.links) {
         this.client.links = cache.links;
       }
-      const { context } = await this.render({ previous });
-      if (context.head) {
-        this.renderHeadContext(context.head);
+      const { head } = await this.render({ previous });
+      if (head) {
+        this.headProvider.renderHead(this.document, head);
       }
-      const element = this.router.root(this.state, {
-        user: cache?.user ?? this.getUserFromCookies()
+      const context = {};
+      await this.alepha.run("react:browser:render", {
+        context,
+        cache
       });
+      const element = this.router.root(this.state, context);
       if (previous.length > 0) {
         this.root = hydrateRoot(this.getRootElement(), element);
         this.log.info("Hydrated root element");
@@ -792,50 +684,13 @@ class ReactBrowserProvider {
       window.addEventListener("popstate", () => {
         this.render();
       });
-      this.router.on("end", ({ context: context2 }) => {
-        if (context2.head) {
-          this.renderHeadContext(context2.head);
-        }
+      this.router.events.on("end", ({ head: head2 }) => {
+        this.headProvider.renderHead(this.document, head2);
       });
     }
   });
 }
 
-class Auth {
-  alepha = $inject(Alepha);
-  log = $logger();
-  client = $inject(HttpClient);
-  slugs = {
-    login: "/api/_oauth/login",
-    logout: "/api/_oauth/logout"
-  };
-  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.slugs.login}?redirect=${redirect}`;
-      if (browser.transitioning) {
-        throw new RedirectionError(browser.state.pathname);
-      }
-      return;
-    }
-    throw new RedirectionError(this.slugs.login);
-  };
-  logout = () => {
-    window.location.href = `${this.slugs.logout}?redirect=${encodeURIComponent(window.location.origin)}`;
-  };
-}
-
 class RouterHookApi {
   constructor(state, layer, browser) {
     this.state = state;
@@ -956,7 +811,7 @@ const useRouter = () => {
       layer,
       ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0
     ),
-    [ctx.router, layer]
+    [layer]
   );
 };
 
@@ -968,7 +823,6 @@ const Link = (props) => {
   }
   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;
@@ -1040,13 +894,13 @@ const useRouterEvents = (opts = {}) => {
     const onEnd = opts.onEnd;
     const onError = opts.onError;
     if (onBegin) {
-      subs.push(ctx.router.on("begin", onBegin));
+      subs.push(ctx.events.on("begin", onBegin));
     }
     if (onEnd) {
-      subs.push(ctx.router.on("end", onEnd));
+      subs.push(ctx.events.on("end", onEnd));
     }
     if (onError) {
-      subs.push(ctx.router.on("error", onError));
+      subs.push(ctx.events.on("error", onError));
     }
     return () => {
       for (const sub of subs) {
@@ -1064,7 +918,7 @@ const useRouterState = () => {
   }
   const [state, setState] = useState(ctx.state);
   useEffect(
-    () => ctx.router.on("end", (it) => {
+    () => ctx.events.on("end", (it) => {
       setState({ ...it });
     }),
     []
@@ -1088,7 +942,7 @@ const useActive = (path) => {
   const [isPending, setPending] = useState(false);
   const isActive = current === href;
   useEffect(
-    () => ctx.router.on("end", ({ pathname }) => setCurrent(pathname)),
+    () => ctx.events.on("end", ({ pathname }) => setCurrent(pathname)),
     []
   );
   return {
@@ -1111,21 +965,4 @@ const useActive = (path) => {
   };
 };
 
-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 };
+export { $page as $, BrowserRouterProvider as B, Link as L, NestedView as N, PageDescriptorProvider as P, RouterContext as R, RouterLayerContext as a, RouterHookApi as b, useClient as c, useQueryParams as d, useRouter as e, useRouterEvents as f, useRouterState as g, useActive as h, RedirectionError as i, isPageRoute as j, ReactBrowserProvider as k, useInject as u };