@alepha/react 0.6.2 → 0.6.4

package/dist/{useAuth-B9ypF48n.cjs → useActive-BGtt_RNQ.cjs}

@@ -1,43 +1,49 @@
 'use strict';
 
-var core = require('@alepha/core');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var server = require('@alepha/server');
+var core = require('@alepha/core');
 var client = require('react-dom/client');
-var pathToRegexp = require('path-to-regexp');
+var router = require('@alepha/router');
 
-const KEY = "AUTH";
-const $auth = (options) => {
+const KEY = "PAGE";
+const $page = (options) => {
   core.__descriptor(KEY);
-  return {
-    [core.KIND]: KEY,
-    options,
-    jwks: () => {
-      return options.oidc?.issuer ?? "";
+  if (options.children) {
+    for (const child of options.children) {
+      child.options.parent = {
+        options
+      };
     }
-  };
-};
-$auth[core.KIND] = KEY;
-
-const pageDescriptorKey = "PAGE";
-const $page = (options) => {
-  core.__descriptor(pageDescriptorKey);
+  }
+  if (options.parent) {
+    options.parent.options.children ??= [];
+    options.parent.options.children.push({
+      options
+    });
+  }
   return {
-    [core.KIND]: pageDescriptorKey,
+    [core.KIND]: KEY,
     options,
     render: () => {
-      throw new core.NotImplementedError(pageDescriptorKey);
+      throw new core.NotImplementedError(KEY);
     },
     go: () => {
-      throw new core.NotImplementedError(pageDescriptorKey);
+      throw new core.NotImplementedError(KEY);
     },
     createAnchorProps: () => {
-      throw new core.NotImplementedError(pageDescriptorKey);
+      throw new core.NotImplementedError(KEY);
+    },
+    can: () => {
+      if (options.can) {
+        return options.can();
+      }
+      return true;
     }
   };
 };
-$page[core.KIND] = pageDescriptorKey;
+$page[core.KIND] = KEY;
 
 const RouterContext = React.createContext(
   void 0
@@ -54,7 +60,7 @@ const NestedView = (props) => {
   );
   React.useEffect(() => {
     if (app?.alepha.isBrowser()) {
-      return app?.router.on("end", (state) => {
+      return app?.events.on("end", (state) => {
         setView(state.layers[index]?.element);
       });
     }
@@ -69,159 +75,37 @@ class RedirectionError extends Error {
   }
 }
 
-class Router extends core.EventEmitter {
+class PageDescriptorProvider {
   log = core.$logger();
   alepha = core.$inject(core.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 React.createElement(
       RouterContext.Provider,
       {
         value: {
-          state,
-          router: this,
           alepha: this.alepha,
-          args: context
+          state,
+          context,
+          events: events ?? new core.EventEmitter()
         }
       },
-      state.layers[0]?.element
+      React.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 }];
@@ -236,13 +120,13 @@ class Router extends core.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;
@@ -253,14 +137,15 @@ class Router extends core.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) {
@@ -275,15 +160,14 @@ class Router extends core.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
         };
@@ -293,7 +177,13 @@ class Router extends core.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;
@@ -304,25 +194,25 @@ class Router extends core.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 ? pathToRegexp.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,
@@ -350,13 +240,8 @@ class Router extends core.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;
@@ -365,12 +250,6 @@ class Router extends core.EventEmitter {
       parent = parent.parent;
     }
   }
-  /**
-   *
-   * @param page
-   * @param props
-   * @protected
-   */
   async createElement(page, props) {
     if (page.lazy) {
       const component = await page.lazy();
@@ -381,65 +260,43 @@ class Router extends core.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 React.createElement("pre", { style: { overflow: "auto" } }, `${e.stack}`);
   }
-  /**
-   * Render an empty view.
-   *
-   * @protected
-   */
   renderEmptyView() {
     return React.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) {
@@ -451,16 +308,15 @@ class Router extends core.EventEmitter {
       url = `${parent.path ?? ""}/${url}`;
       parent = parent.parent;
     }
-    url = pathToRegexp.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 React.createElement(
       RouterLayerContext.Provider,
@@ -473,23 +329,39 @@ class Router extends core.EventEmitter {
       view
     );
   }
-  /**
-   *
-   * @param entry
-   */
+  configure = core.$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) {
@@ -498,13 +370,7 @@ class Router extends core.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) {
@@ -512,76 +378,166 @@ class Router extends core.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: pathToRegexp.match(path.split("?")[0]),
-        path
-      };
-    }
-    return {
-      exec: pathToRegexp.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 router.RouterProvider {
+  log = core.$logger();
   alepha = core.$inject(core.Alepha);
-  router = core.$inject(Router);
+  pageDescriptorProvider = core.$inject(PageDescriptorProvider);
+  events = new core.EventEmitter();
+  add(entry) {
+    this.pageDescriptorProvider.add(entry);
+  }
   configure = core.$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 = core.t.object({
@@ -590,7 +546,9 @@ const envSchema = core.t.object({
 class ReactBrowserProvider {
   log = core.$logger();
   client = core.$inject(server.HttpClient);
-  router = core.$inject(Router);
+  alepha = core.$inject(core.Alepha);
+  router = core.$inject(BrowserRouterProvider);
+  headProvider = core.$inject(BrowserHeadProvider);
   env = core.$inject(envSchema);
   root;
   transitioning;
@@ -598,30 +556,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) {
@@ -662,66 +607,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.
@@ -751,18 +652,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;
-  }
   // -------------------------------------------------------------------------------------------------------------------
   /**
    *
@@ -771,18 +660,21 @@ class ReactBrowserProvider {
   ready = core.$hook({
     name: "ready",
     handler: async () => {
-      const cache = this.getHydrationState();
-      const previous = cache?.layers ?? [];
-      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()
+      const hydration = this.getHydrationState();
+      const previous = hydration?.layers ?? [];
+      if (hydration?.links) {
+        this.client.links = hydration.links;
+      }
+      const { head } = await this.render({ previous });
+      if (head) {
+        this.headProvider.renderHead(this.document, head);
+      }
+      const context = {};
+      await this.alepha.emit("react:browser:render", {
+        context,
+        hydration
       });
+      const element = this.router.root(this.state, context);
       if (previous.length > 0) {
         this.root = client.hydrateRoot(this.getRootElement(), element);
         this.log.info("Hydrated root element");
@@ -794,48 +686,11 @@ class ReactBrowserProvider {
       window.addEventListener("popstate", () => {
         this.render();
       });
-      this.router.on("end", ({ context: context2 }) => {
-        if (context2.head) {
-          this.renderHeadContext(context2.head);
-        }
-      });
-    }
-  });
-}
-
-class Auth {
-  alepha = core.$inject(core.Alepha);
-  log = core.$logger();
-  client = core.$inject(server.HttpClient);
-  slugs = {
-    login: "/api/_oauth/login",
-    logout: "/api/_oauth/logout"
-  };
-  start = core.$hook({
-    name: "start",
-    handler: async () => {
-      this.client.on("onError", (err) => {
-        if (err.statusCode === 401) {
-          this.login();
-        }
+      this.router.events.on("end", ({ head: head2 }) => {
+        this.headProvider.renderHead(this.document, head2);
       });
     }
   });
-  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 {
@@ -958,7 +813,7 @@ const useRouter = () => {
       layer,
       ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0
     ),
-    [ctx.router, layer]
+    [layer]
   );
 };
 
@@ -970,7 +825,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;
@@ -1042,13 +896,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) {
@@ -1066,7 +920,7 @@ const useRouterState = () => {
   }
   const [state, setState] = React.useState(ctx.state);
   React.useEffect(
-    () => ctx.router.on("end", (it) => {
+    () => ctx.events.on("end", (it) => {
       setState({ ...it });
     }),
     []
@@ -1090,7 +944,7 @@ const useActive = (path) => {
   const [isPending, setPending] = React.useState(false);
   const isActive = current === href;
   React.useEffect(
-    () => ctx.router.on("end", ({ pathname }) => setCurrent(pathname)),
+    () => ctx.events.on("end", ({ pathname }) => setCurrent(pathname)),
     []
   );
   return {
@@ -1113,41 +967,22 @@ const useActive = (path) => {
   };
 };
 
-const useAuth = () => {
-  const ctx = React.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();
-    }
-  };
-};
-
-exports.$auth = $auth;
 exports.$page = $page;
-exports.Auth = Auth;
+exports.BrowserRouterProvider = BrowserRouterProvider;
 exports.Link = Link;
 exports.NestedView = NestedView;
 exports.PageDescriptorProvider = PageDescriptorProvider;
 exports.ReactBrowserProvider = ReactBrowserProvider;
 exports.RedirectionError = RedirectionError;
-exports.Router = Router;
 exports.RouterContext = RouterContext;
 exports.RouterHookApi = RouterHookApi;
 exports.RouterLayerContext = RouterLayerContext;
-exports.pageDescriptorKey = pageDescriptorKey;
+exports.isPageRoute = isPageRoute;
 exports.useActive = useActive;
-exports.useAuth = useAuth;
 exports.useClient = useClient;
 exports.useInject = useInject;
 exports.useQueryParams = useQueryParams;
 exports.useRouter = useRouter;
 exports.useRouterEvents = useRouterEvents;
 exports.useRouterState = useRouterState;
+//# sourceMappingURL=useActive-BGtt_RNQ.cjs.map