@alepha/react 0.7.5 → 0.7.6

package/dist/useRouterState-cCucJfTC.js

@@ -1,1161 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { __descriptor, OPTIONS, NotImplementedError, KIND, t, $logger, $inject, Alepha, $hook } from '@alepha/core';
-import React, { useState, useEffect, createContext, useContext, createElement, StrictMode, useMemo } from 'react';
-import { HttpClient } from '@alepha/server';
-import { RouterProvider } from '@alepha/router';
-
-const KEY = "PAGE";
-const $page = (options) => {
-  __descriptor(KEY);
-  if (options.children) {
-    for (const child of options.children) {
-      child[OPTIONS].parent = {
-        [OPTIONS]: options
-      };
-    }
-  }
-  if (options.parent) {
-    options.parent[OPTIONS].children ??= [];
-    options.parent[OPTIONS].children.push({
-      [OPTIONS]: options
-    });
-  }
-  return {
-    [KIND]: KEY,
-    [OPTIONS]: options,
-    render: () => {
-      throw new NotImplementedError(KEY);
-    }
-  };
-};
-$page[KIND] = KEY;
-
-const ClientOnly = (props) => {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
-  if (props.disabled) {
-    return props.children;
-  }
-  return mounted ? props.children : props.fallback;
-};
-
-const RouterContext = createContext(
-  void 0
-);
-
-const useAlepha = () => {
-  const routerContext = useContext(RouterContext);
-  if (!routerContext) {
-    throw new Error("useAlepha must be used within a RouterProvider");
-  }
-  return routerContext.alepha;
-};
-
-const ErrorViewer = ({ error }) => {
-  const [expanded, setExpanded] = useState(false);
-  const isProduction = useAlepha().isProduction();
-  if (isProduction) {
-    return /* @__PURE__ */ jsx(ErrorViewerProduction, {});
-  }
-  const stackLines = error.stack?.split("\n") ?? [];
-  const previewLines = stackLines.slice(0, 5);
-  const hiddenLineCount = stackLines.length - previewLines.length;
-  const copyToClipboard = (text) => {
-    navigator.clipboard.writeText(text).catch((err) => {
-      console.error("Clipboard error:", err);
-    });
-  };
-  const styles = {
-    container: {
-      padding: "24px",
-      backgroundColor: "#FEF2F2",
-      color: "#7F1D1D",
-      border: "1px solid #FECACA",
-      borderRadius: "16px",
-      boxShadow: "0 8px 24px rgba(0,0,0,0.05)",
-      fontFamily: "monospace",
-      maxWidth: "768px",
-      margin: "40px auto"
-    },
-    heading: {
-      fontSize: "20px",
-      fontWeight: "bold",
-      marginBottom: "4px"
-    },
-    name: {
-      fontSize: "16px",
-      fontWeight: 600
-    },
-    message: {
-      fontSize: "14px",
-      marginBottom: "16px"
-    },
-    sectionHeader: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      fontSize: "12px",
-      marginBottom: "4px",
-      color: "#991B1B"
-    },
-    copyButton: {
-      fontSize: "12px",
-      color: "#DC2626",
-      background: "none",
-      border: "none",
-      cursor: "pointer",
-      textDecoration: "underline"
-    },
-    stackContainer: {
-      backgroundColor: "#FEE2E2",
-      padding: "12px",
-      borderRadius: "8px",
-      fontSize: "13px",
-      lineHeight: "1.4",
-      overflowX: "auto",
-      whiteSpace: "pre-wrap"
-    },
-    expandLine: {
-      color: "#F87171",
-      cursor: "pointer",
-      marginTop: "8px"
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: styles.heading, children: "\u{1F525} Error" }),
-      /* @__PURE__ */ jsx("div", { style: styles.name, children: error.name }),
-      /* @__PURE__ */ jsx("div", { style: styles.message, children: error.message })
-    ] }),
-    stackLines.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("div", { style: styles.sectionHeader, children: [
-        /* @__PURE__ */ jsx("span", { children: "Stack trace" }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => copyToClipboard(error.stack),
-            style: styles.copyButton,
-            children: "Copy all"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("pre", { style: styles.stackContainer, children: [
-        (expanded ? stackLines : previewLines).map((line, i) => /* @__PURE__ */ jsx("div", { children: line }, i)),
-        !expanded && hiddenLineCount > 0 && /* @__PURE__ */ jsxs("div", { style: styles.expandLine, onClick: () => setExpanded(true), children: [
-          "+ ",
-          hiddenLineCount,
-          " more lines..."
-        ] })
-      ] })
-    ] })
-  ] });
-};
-const ErrorViewerProduction = () => {
-  const styles = {
-    container: {
-      padding: "24px",
-      backgroundColor: "#FEF2F2",
-      color: "#7F1D1D",
-      border: "1px solid #FECACA",
-      borderRadius: "16px",
-      boxShadow: "0 8px 24px rgba(0,0,0,0.05)",
-      fontFamily: "monospace",
-      maxWidth: "768px",
-      margin: "40px auto",
-      textAlign: "center"
-    },
-    heading: {
-      fontSize: "20px",
-      fontWeight: "bold",
-      marginBottom: "8px"
-    },
-    message: {
-      fontSize: "14px",
-      opacity: 0.85
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx("div", { style: styles.heading, children: "\u{1F6A8} An error occurred" }),
-    /* @__PURE__ */ jsx("div", { style: styles.message, children: "Something went wrong. Please try again later." })
-  ] });
-};
-
-const RouterLayerContext = createContext(void 0);
-
-const useRouterEvents = (opts = {}, deps = []) => {
-  const ctx = useContext(RouterContext);
-  if (!ctx) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-  useEffect(() => {
-    if (!ctx.alepha.isBrowser()) {
-      return;
-    }
-    const subs = [];
-    const onBegin = opts.onBegin;
-    const onEnd = opts.onEnd;
-    const onError = opts.onError;
-    if (onBegin) {
-      subs.push(
-        ctx.alepha.on("react:transition:begin", {
-          callback: onBegin
-        })
-      );
-    }
-    if (onEnd) {
-      subs.push(
-        ctx.alepha.on("react:transition:end", {
-          callback: onEnd
-        })
-      );
-    }
-    if (onError) {
-      subs.push(
-        ctx.alepha.on("react:transition:error", {
-          callback: onError
-        })
-      );
-    }
-    return () => {
-      for (const sub of subs) {
-        sub();
-      }
-    };
-  }, deps);
-};
-
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-  /**
-   * Update state so the next render shows the fallback UI.
-   */
-  static getDerivedStateFromError(error) {
-    return {
-      error
-    };
-  }
-  /**
-   * Lifecycle method called when an error is caught.
-   * You can log the error or perform side effects here.
-   */
-  componentDidCatch(error, info) {
-    if (this.props.onError) {
-      this.props.onError(error, info);
-    }
-  }
-  render() {
-    if (this.state.error) {
-      return this.props.fallback(this.state.error);
-    }
-    return this.props.children;
-  }
-}
-
-const NestedView = (props) => {
-  const app = useContext(RouterContext);
-  const layer = useContext(RouterLayerContext);
-  const index = layer?.index ?? 0;
-  const [view, setView] = useState(
-    app?.state.layers[index]?.element
-  );
-  useRouterEvents(
-    {
-      onEnd: ({ state }) => {
-        setView(state.layers[index]?.element);
-      }
-    },
-    [app]
-  );
-  if (!app) {
-    throw new Error("NestedView must be used within a RouterContext.");
-  }
-  const element = view ?? props.children ?? null;
-  return /* @__PURE__ */ jsx(ErrorBoundary, { fallback: app.context.onError, children: element });
-};
-
-function NotFoundPage() {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        height: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        textAlign: "center",
-        fontFamily: "sans-serif",
-        padding: "1rem"
-      },
-      children: /* @__PURE__ */ jsx("h1", { style: { fontSize: "1rem", marginBottom: "0.5rem" }, children: "This page does not exist" })
-    }
-  );
-}
-
-class RedirectionError extends Error {
-  page;
-  constructor(page) {
-    super("Redirection");
-    this.page = page;
-  }
-}
-
-const envSchema = t.object({
-  REACT_STRICT_MODE: t.boolean({ default: true })
-});
-class PageDescriptorProvider {
-  log = $logger();
-  env = $inject(envSchema);
-  alepha = $inject(Alepha);
-  pages = [];
-  getPages() {
-    return this.pages;
-  }
-  page(name) {
-    for (const page of this.pages) {
-      if (page.name === name) {
-        return page;
-      }
-    }
-    throw new Error(`Page ${name} not found`);
-  }
-  url(name, options = {}) {
-    const page = this.page(name);
-    if (!page) {
-      throw new Error(`Page ${name} not found`);
-    }
-    let url = page.path ?? "";
-    let parent = page.parent;
-    while (parent) {
-      url = `${parent.path ?? ""}/${url}`;
-      parent = parent.parent;
-    }
-    url = this.compile(url, options.params ?? {});
-    return new URL(
-      url.replace(/\/\/+/g, "/") || "/",
-      options.base ?? `http://localhost`
-    );
-  }
-  root(state, context) {
-    const root = createElement(
-      RouterContext.Provider,
-      {
-        value: {
-          alepha: this.alepha,
-          state,
-          context
-        }
-      },
-      createElement(NestedView, {}, state.layers[0]?.element)
-    );
-    if (this.env.REACT_STRICT_MODE) {
-      return createElement(StrictMode, {}, root);
-    }
-    return root;
-  }
-  async createLayers(route, request) {
-    const { pathname, search } = request.url;
-    const layers = [];
-    let context = {};
-    const stack = [{ route }];
-    request.onError = (error) => this.renderError(error);
-    let parent = route.parent;
-    while (parent) {
-      stack.unshift({ route: parent });
-      parent = parent.parent;
-    }
-    let forceRefresh = false;
-    for (let i = 0; i < stack.length; i++) {
-      const it = stack[i];
-      const route2 = it.route;
-      const config = {};
-      try {
-        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, request.params) : request.params;
-      } catch (e) {
-        it.error = e;
-        break;
-      }
-      it.config = {
-        ...config
-      };
-      if (!route2.resolve) {
-        continue;
-      }
-      const previous = request.previous;
-      if (previous?.[i] && !forceRefresh && previous[i].name === route2.name) {
-        const url = (str) => str ? str.replace(/\/\/+/g, "/") : "/";
-        const prev = JSON.stringify({
-          part: url(previous[i].part),
-          params: previous[i].config?.params ?? {}
-        });
-        const curr = JSON.stringify({
-          part: url(route2.path),
-          params: config.params ?? {}
-        });
-        if (prev === curr) {
-          it.props = previous[i].props;
-          it.error = previous[i].error;
-          context = {
-            ...context,
-            ...it.props
-          };
-          continue;
-        }
-        forceRefresh = true;
-      }
-      try {
-        const props = await route2.resolve?.({
-          ...request,
-          // request
-          ...config,
-          // params, query
-          ...context
-          // previous props
-        }) ?? {};
-        it.props = {
-          ...props
-        };
-        context = {
-          ...context,
-          ...props
-        };
-      } catch (e) {
-        if (e instanceof RedirectionError) {
-          return {
-            layers: [],
-            redirect: typeof e.page === "string" ? e.page : this.href(e.page),
-            pathname,
-            search
-          };
-        }
-        this.log.error(e);
-        it.error = e;
-        break;
-      }
-    }
-    let acc = "";
-    for (let i = 0; i < stack.length; i++) {
-      const it = stack[i];
-      const props = it.props ?? {};
-      const params = { ...it.config?.params };
-      for (const key of Object.keys(params)) {
-        params[key] = String(params[key]);
-      }
-      if (it.route.head && !it.error) {
-        this.fillHead(it.route, request, {
-          ...props,
-          ...context
-        });
-      }
-      acc += "/";
-      acc += it.route.path ? this.compile(it.route.path, params) : "";
-      const path = acc.replace(/\/+/, "/");
-      const localErrorHandler = this.getErrorHandler(it.route);
-      if (localErrorHandler) {
-        request.onError = localErrorHandler;
-      }
-      if (it.error) {
-        let element2 = await request.onError(it.error);
-        if (element2 === null) {
-          element2 = this.renderError(it.error);
-        }
-        layers.push({
-          props,
-          error: it.error,
-          name: it.route.name,
-          part: it.route.path,
-          config: it.config,
-          element: this.renderView(i + 1, path, element2, it.route),
-          index: i + 1,
-          path
-        });
-        break;
-      }
-      const element = await this.createElement(it.route, {
-        ...props,
-        ...context
-      });
-      layers.push({
-        name: it.route.name,
-        props,
-        part: it.route.path,
-        config: it.config,
-        element: this.renderView(i + 1, path, element, it.route),
-        index: i + 1,
-        path
-      });
-    }
-    return { layers, pathname, search };
-  }
-  getErrorHandler(route) {
-    if (route.errorHandler) return route.errorHandler;
-    let parent = route.parent;
-    while (parent) {
-      if (parent.errorHandler) return parent.errorHandler;
-      parent = parent.parent;
-    }
-  }
-  async createElement(page, props) {
-    if (page.lazy) {
-      const component = await page.lazy();
-      return createElement(component.default, props);
-    }
-    if (page.component) {
-      return createElement(page.component, props);
-    }
-    return void 0;
-  }
-  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 ??= {};
-      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 ?? []];
-    }
-  }
-  renderError(error) {
-    return createElement(ErrorViewer, { error });
-  }
-  renderEmptyView() {
-    return createElement(NestedView, {});
-  }
-  href(page, params = {}) {
-    const found = this.pages.find((it) => it.name === page.options.name);
-    if (!found) {
-      throw new Error(`Page ${page.options.name} not found`);
-    }
-    let url = found.path ?? "";
-    let parent = found.parent;
-    while (parent) {
-      url = `${parent.path ?? ""}/${url}`;
-      parent = parent.parent;
-    }
-    url = this.compile(url, params);
-    return url.replace(/\/\/+/g, "/") || "/";
-  }
-  compile(path, params = {}) {
-    for (const [key, value] of Object.entries(params)) {
-      path = path.replace(`:${key}`, value);
-    }
-    return path;
-  }
-  renderView(index, path, view, page) {
-    view ??= this.renderEmptyView();
-    const element = page.client ? createElement(
-      ClientOnly,
-      typeof page.client === "object" ? page.client : {},
-      view
-    ) : view;
-    return createElement(
-      RouterLayerContext.Provider,
-      {
-        value: {
-          index,
-          path
-        }
-      },
-      element
-    );
-  }
-  configure = $hook({
-    name: "configure",
-    handler: () => {
-      let hasNotFoundHandler = false;
-      const pages = this.alepha.getDescriptorValues($page);
-      for (const { value, key } of pages) {
-        value[OPTIONS].name ??= key;
-      }
-      for (const { value } of pages) {
-        if (value[OPTIONS].parent) {
-          continue;
-        }
-        if (value[OPTIONS].path === "/*") {
-          hasNotFoundHandler = true;
-        }
-        this.add(this.map(pages, value));
-      }
-      if (!hasNotFoundHandler && pages.length > 0) {
-        this.add({
-          path: "/*",
-          name: "notFound",
-          cache: true,
-          component: NotFoundPage,
-          afterHandler: ({ reply }) => {
-            reply.status = 404;
-          }
-        });
-      }
-    }
-  });
-  map(pages, target) {
-    const children = target[OPTIONS].children ?? [];
-    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");
-    }
-    entry.name ??= this.nextId();
-    const page = entry;
-    page.match = this.createMatch(page);
-    this.pages.push(page);
-    if (page.children) {
-      for (const child of page.children) {
-        child.parent = page;
-        this.add(child);
-      }
-    }
-  }
-  createMatch(page) {
-    let url = page.path ?? "/";
-    let target = page.parent;
-    while (target) {
-      url = `${target.path ?? ""}/${url}`;
-      target = target.parent;
-    }
-    let path = url.replace(/\/\/+/g, "/");
-    if (path.endsWith("/") && path !== "/") {
-      path = path.slice(0, -1);
-    }
-    return path;
-  }
-  _next = 0;
-  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 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);
-  pageDescriptorProvider = $inject(PageDescriptorProvider);
-  add(entry) {
-    this.pageDescriptorProvider.add(entry);
-  }
-  configure = $hook({
-    name: "configure",
-    handler: async () => {
-      for (const page of this.pageDescriptorProvider.getPages()) {
-        if (page.component || page.lazy) {
-          this.push({
-            path: page.match,
-            page
-          });
-        }
-      }
-    }
-  });
-  async transition(url, options = {}) {
-    const { pathname, search } = url;
-    const state = {
-      pathname,
-      search,
-      layers: []
-    };
-    const context = {
-      url,
-      query: {},
-      params: {},
-      head: {},
-      onError: () => null,
-      ...options.context ?? {}
-    };
-    await this.alepha.emit("react:transition:begin", { state, context });
-    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);
-        }
-      }
-      context.query = query;
-      context.params = params ?? {};
-      context.previous = previous;
-      if (isPageRoute(route)) {
-        const result = await this.pageDescriptorProvider.createLayers(
-          route.page,
-          context
-        );
-        if (result.redirect) {
-          return {
-            redirect: result.redirect,
-            state,
-            context
-          };
-        }
-        state.layers = result.layers;
-      }
-      if (state.layers.length === 0) {
-        state.layers.push({
-          name: "not-found",
-          element: createElement(NotFoundPage),
-          index: 0,
-          path: "/"
-        });
-      }
-      await this.alepha.emit("react:transition:success", { state });
-    } catch (e) {
-      this.log.error(e);
-      state.layers = [
-        {
-          name: "error",
-          element: this.pageDescriptorProvider.renderError(e),
-          index: 0,
-          path: "/"
-        }
-      ];
-      await this.alepha.emit("react:transition:error", {
-        error: e,
-        state,
-        context
-      });
-    }
-    if (options.state) {
-      options.state.layers = state.layers;
-      options.state.pathname = state.pathname;
-      options.state.search = state.search;
-    }
-    await this.alepha.emit("react:transition:end", {
-      state: options.state,
-      context
-    });
-    return {
-      context,
-      state
-    };
-  }
-  root(state, context) {
-    return this.pageDescriptorProvider.root(state, context);
-  }
-}
-
-class ReactBrowserProvider {
-  log = $logger();
-  client = $inject(HttpClient);
-  alepha = $inject(Alepha);
-  router = $inject(BrowserRouterProvider);
-  headProvider = $inject(BrowserHeadProvider);
-  root;
-  transitioning;
-  state = {
-    layers: [],
-    pathname: "",
-    search: ""
-  };
-  get document() {
-    return window.document;
-  }
-  get history() {
-    return window.history;
-  }
-  get url() {
-    return window.location.pathname + window.location.search;
-  }
-  async invalidate(props) {
-    const previous = [];
-    if (props) {
-      const [key] = Object.keys(props);
-      const value = props[key];
-      for (const layer of this.state.layers) {
-        if (layer.props?.[key]) {
-          previous.push({
-            ...layer,
-            props: {
-              ...layer.props,
-              [key]: value
-            }
-          });
-          break;
-        }
-        previous.push(layer);
-      }
-    }
-    await this.render({ previous });
-  }
-  async go(url, options = {}) {
-    const result = await this.render({
-      url
-    });
-    if (result.context.url.pathname !== url) {
-      this.history.replaceState({}, "", result.context.url.pathname);
-      return;
-    }
-    if (options.replace) {
-      this.history.replaceState({}, "", url);
-      return;
-    }
-    this.history.pushState({}, "", url);
-  }
-  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.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 result;
-  }
-  /**
-   * Get embedded layers from the server.
-   */
-  getHydrationState() {
-    try {
-      if ("__ssr" in window && typeof window.__ssr === "object") {
-        return window.__ssr;
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  }
-  // -------------------------------------------------------------------------------------------------------------------
-  ready = $hook({
-    name: "ready",
-    handler: async () => {
-      const hydration = this.getHydrationState();
-      const previous = hydration?.layers ?? [];
-      if (hydration?.links) {
-        for (const link of hydration.links.links) {
-          this.client.pushLink(link);
-        }
-      }
-      const { context } = await this.render({ previous });
-      if (context.head) {
-        this.headProvider.renderHead(this.document, context.head);
-      }
-      await this.alepha.emit("react:browser:render", {
-        state: this.state,
-        context,
-        hydration
-      });
-      window.addEventListener("popstate", () => {
-        this.render();
-      });
-    }
-  });
-  onTransitionEnd = $hook({
-    name: "react:transition:end",
-    handler: async ({ context }) => {
-      this.headProvider.renderHead(this.document, context.head);
-    }
-  });
-}
-
-class RouterHookApi {
-  constructor(pages, state, layer, browser) {
-    this.pages = pages;
-    this.state = state;
-    this.layer = layer;
-    this.browser = browser;
-  }
-  get current() {
-    return this.state;
-  }
-  get pathname() {
-    return this.state.pathname;
-  }
-  get query() {
-    const query = {};
-    for (const [key, value] of new URLSearchParams(
-      this.state.search
-    ).entries()) {
-      query[key] = String(value);
-    }
-    return query;
-  }
-  async back() {
-    this.browser?.history.back();
-  }
-  async forward() {
-    this.browser?.history.forward();
-  }
-  async invalidate(props) {
-    await this.browser?.invalidate(props);
-  }
-  /**
-   * Create a valid href for the given pathname.
-   *
-   * @param pathname
-   * @param layer
-   */
-  createHref(pathname, layer = this.layer, options = {}) {
-    if (typeof pathname === "object") {
-      pathname = pathname.options.path ?? "";
-    }
-    if (options.params) {
-      for (const [key, value] of Object.entries(options.params)) {
-        pathname = pathname.replace(`:${key}`, String(value));
-      }
-    }
-    return pathname.startsWith("/") ? pathname : `${layer.path}/${pathname}`.replace(/\/\/+/g, "/");
-  }
-  async go(path, options) {
-    for (const page of this.pages) {
-      if (page.name === path) {
-        path = page.path ?? "";
-        break;
-      }
-    }
-    await this.browser?.go(this.createHref(path, this.layer, options), options);
-  }
-  anchor(path, options = {}) {
-    for (const page of this.pages) {
-      if (page.name === path) {
-        path = page.path ?? "";
-        break;
-      }
-    }
-    const href = this.createHref(path, this.layer, options);
-    return {
-      href,
-      onClick: (ev) => {
-        ev.stopPropagation();
-        ev.preventDefault();
-        this.go(path, options).catch(console.error);
-      }
-    };
-  }
-  /**
-   * Set query params.
-   *
-   * @param record
-   * @param options
-   */
-  setQueryParams(record, options = {}) {
-    const func = typeof record === "function" ? record : () => record;
-    const search = new URLSearchParams(func(this.query)).toString();
-    const state = search ? `${this.pathname}?${search}` : this.pathname;
-    if (options.push) {
-      window.history.pushState({}, "", state);
-    } else {
-      window.history.replaceState({}, "", state);
-    }
-  }
-}
-
-const useRouter = () => {
-  const ctx = useContext(RouterContext);
-  const layer = useContext(RouterLayerContext);
-  if (!ctx || !layer) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-  const pages = useMemo(() => {
-    return ctx.alepha.get(PageDescriptorProvider).getPages();
-  }, []);
-  return useMemo(
-    () => new RouterHookApi(
-      pages,
-      ctx.state,
-      layer,
-      ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0
-    ),
-    [layer]
-  );
-};
-
-const Link = (props) => {
-  React.useContext(RouterContext);
-  const router = useRouter();
-  const to = typeof props.to === "string" ? props.to : props.to[OPTIONS].path;
-  if (!to) {
-    return null;
-  }
-  const can = typeof props.to === "string" ? void 0 : props.to[OPTIONS].can;
-  if (can && !can()) {
-    return null;
-  }
-  const name = typeof props.to === "string" ? void 0 : props.to[OPTIONS].name;
-  const anchorProps = {
-    ...props,
-    to: void 0
-  };
-  return /* @__PURE__ */ jsx("a", { ...router.anchor(to), ...anchorProps, children: props.children ?? name });
-};
-
-const useActive = (path) => {
-  const router = useRouter();
-  const ctx = useContext(RouterContext);
-  const layer = useContext(RouterLayerContext);
-  if (!ctx || !layer) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-  let name;
-  if (typeof path === "object" && path.options.name) {
-    name = path.options.name;
-  }
-  const [current, setCurrent] = useState(ctx.state.pathname);
-  const href = useMemo(() => router.createHref(path, layer), [path, layer]);
-  const [isPending, setPending] = useState(false);
-  const isActive = current === href;
-  useRouterEvents({
-    onEnd: ({ state }) => setCurrent(state.pathname)
-  });
-  return {
-    name,
-    isPending,
-    isActive,
-    anchorProps: {
-      href,
-      onClick: (ev) => {
-        ev.stopPropagation();
-        ev.preventDefault();
-        if (isActive) return;
-        if (isPending) return;
-        setPending(true);
-        router.go(href).then(() => {
-          setPending(false);
-        });
-      }
-    }
-  };
-};
-
-const useInject = (clazz) => {
-  const ctx = useContext(RouterContext);
-  if (!ctx) {
-    throw new Error("useRouter must be used within a <RouterProvider>");
-  }
-  return useMemo(() => ctx.alepha.get(clazz), []);
-};
-
-const useClient = (_scope) => {
-  return useInject(HttpClient).of();
-};
-
-const useQueryParams = (schema, options = {}) => {
-  const ctx = useContext(RouterContext);
-  if (!ctx) {
-    throw new Error("useQueryParams must be used within a RouterProvider");
-  }
-  const key = options.key ?? "q";
-  const router = useRouter();
-  const querystring = router.query[key];
-  const [queryParams, setQueryParams] = useState(
-    decode(ctx.alepha, schema, router.query[key])
-  );
-  useEffect(() => {
-    setQueryParams(decode(ctx.alepha, schema, querystring));
-  }, [querystring]);
-  return [
-    queryParams,
-    (queryParams2) => {
-      setQueryParams(queryParams2);
-      router.setQueryParams((data) => {
-        return { ...data, [key]: encode(ctx.alepha, schema, queryParams2) };
-      });
-    }
-  ];
-};
-const encode = (alepha, schema, data) => {
-  return btoa(JSON.stringify(alepha.parse(schema, data)));
-};
-const decode = (alepha, schema, data) => {
-  try {
-    return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
-  } catch (_error) {
-    return {};
-  }
-};
-
-const useRouterState = () => {
-  const ctx = useContext(RouterContext);
-  const layer = useContext(RouterLayerContext);
-  if (!ctx || !layer) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-  const [state, setState] = useState(ctx.state);
-  useRouterEvents({
-    onEnd: ({ state: state2 }) => setState({ ...state2 })
-  });
-  return state;
-};
-
-export { $page as $, BrowserRouterProvider as B, ClientOnly as C, ErrorBoundary as E, Link as L, NestedView as N, PageDescriptorProvider as P, RouterContext as R, RouterLayerContext as a, RedirectionError as b, RouterHookApi as c, useAlepha as d, useClient as e, useInject as f, useQueryParams as g, useRouter as h, useRouterEvents as i, useRouterState as j, isPageRoute as k, ReactBrowserProvider as l, useActive as u };