@alepha/react 0.5.0 → 0.5.1

package/dist/useRouterState-CvFCmaq7.mjs

@@ -0,0 +1,926 @@
+import { __descriptor, NotImplementedError, KIND, EventEmitter, $logger, $inject, Alepha, $hook } from '@alepha/core';
+import { createContext, useContext, useState, useEffect, createElement, useMemo } from 'react';
+import { HttpClient } from '@alepha/server';
+import { hydrateRoot, createRoot } from 'react-dom/client';
+import { compile, match } from 'path-to-regexp';
+
+const pageDescriptorKey = "PAGE";
+const $page = (options) => {
+  __descriptor(pageDescriptorKey);
+  return {
+    [KIND]: pageDescriptorKey,
+    options,
+    render: () => {
+      throw new NotImplementedError(pageDescriptorKey);
+    },
+    go: () => {
+      throw new NotImplementedError(pageDescriptorKey);
+    },
+    createAnchorProps: () => {
+      throw new NotImplementedError(pageDescriptorKey);
+    }
+  };
+};
+$page[KIND] = pageDescriptorKey;
+
+const RouterContext = createContext(
+  void 0
+);
+
+const RouterLayerContext = createContext(void 0);
+
+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
+  );
+  useEffect(() => {
+    if (app?.alepha.isBrowser()) {
+      return app?.router.on("end", ({ layers }) => {
+        setView(layers[index]?.element);
+      });
+    }
+  }, [app]);
+  return view ?? props.children ?? null;
+};
+
+class RedirectException extends Error {
+  constructor(page) {
+    super("Redirection");
+    this.page = page;
+  }
+}
+class Router extends EventEmitter {
+  log = $logger();
+  alepha = $inject(Alepha);
+  pages = [];
+  notFoundPageRoute;
+  /**
+   * Get the page by name.
+   *
+   * @param name - Page name
+   * @return PageRoute
+   */
+  page(name) {
+    const found = this.pages.find((it) => it.name === name);
+    if (!found) {
+      throw new Error(`Page ${name} not found`);
+    }
+    return found;
+  }
+  /**
+   *
+   */
+  root(state, opts = {}) {
+    return createElement(
+      RouterContext.Provider,
+      {
+        value: {
+          state,
+          router: this,
+          alepha: this.alepha,
+          session: opts.user ? { user: opts.user } : void 0
+        }
+      },
+      state.layers[0]?.element
+    );
+  }
+  /**
+   *
+   * @param url
+   * @param options
+   */
+  async render(url, options = {}) {
+    const [pathname, search = ""] = url.split("?");
+    const state = {
+      pathname,
+      search,
+      layers: []
+    };
+    this.emit("begin", void 0);
+    try {
+      let layers = await this.match(url, options);
+      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;
+      this.emit("success", void 0);
+    } catch (e) {
+      if (e instanceof RedirectException) {
+        return {
+          element: null,
+          layers: [],
+          redirect: typeof e.page === "string" ? e.page : this.href(e.page)
+        };
+      }
+      this.log.error(e);
+      state.layers = [
+        {
+          name: "error",
+          element: this.renderError(e),
+          index: 0,
+          path: "/"
+        }
+      ];
+      this.emit("error", e);
+    }
+    if (options.state) {
+      options.state.layers = state.layers;
+      options.state.pathname = state.pathname;
+      options.state.search = state.search;
+      this.emit("end", options.state);
+      return {
+        element: this.root(options.state, options),
+        layers: options.state.layers
+      };
+    }
+    this.emit("end", state);
+    return {
+      element: this.root(state, options),
+      layers: state.layers
+    };
+  }
+  /**
+   *
+   * @param url
+   * @param options
+   * @protected
+   */
+  async match(url, options = {}) {
+    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.user
+        );
+      }
+    }
+    return [];
+  }
+  /**
+   * Create layers for the given route.
+   *
+   * @param route
+   * @param params
+   * @param query
+   * @param previous
+   * @param user
+   * @protected
+   */
+  async createLayers(url, route, params = {}, query = {}, previous = [], user) {
+    const layers = [];
+    let context = {};
+    const stack = [{ route }];
+    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, query) : {};
+      } catch (e) {
+        it.error = e;
+        break;
+      }
+      try {
+        config.params = route2.schema?.params ? this.alepha.parse(route2.schema.params, params) : {};
+      } catch (e) {
+        it.error = e;
+        break;
+      }
+      it.config = {
+        ...config
+      };
+      if (!route2.resolve) {
+        continue;
+      }
+      if (previous?.[i] && !forceRefresh && previous[i].name === route2.name) {
+        const url2 = (str) => str ? str.replace(/\/\/+/g, "/") : "/";
+        const prev = JSON.stringify({
+          part: url2(previous[i].part),
+          params: previous[i].config?.params ?? {}
+        });
+        const curr = JSON.stringify({
+          part: url2(route2.path),
+          params: config.params ?? {}
+        });
+        if (prev === curr) {
+          it.props = previous[i].props;
+          context = {
+            ...context,
+            ...it.props
+          };
+          continue;
+        }
+        forceRefresh = true;
+      }
+      try {
+        const props = await route2.resolve?.({
+          ...config,
+          ...context,
+          user,
+          url
+        }) ?? {};
+        it.props = {
+          ...props
+        };
+        context = {
+          ...context,
+          ...props
+        };
+      } catch (e) {
+        if (e instanceof RedirectException) {
+          throw e;
+        }
+        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 params2 = { ...it.config?.params };
+      for (const key of Object.keys(params2)) {
+        params2[key] = String(params2[key]);
+      }
+      acc += "/";
+      acc += it.route.path ? compile(it.route.path)(params2) : "";
+      const path = acc.replace(/\/+/, "/");
+      if (it.error) {
+        const errorHandler = this.getErrorHandler(it.route);
+        const element = errorHandler ? errorHandler({
+          ...it.config,
+          error: it.error,
+          url
+        }) : this.renderError(it.error);
+        layers.push({
+          props,
+          name: it.route.name,
+          part: it.route.path,
+          config: it.config,
+          element: this.renderView(i + 1, path, element),
+          index: i + 1,
+          path
+        });
+        break;
+      }
+      const layer = 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, layer),
+        index: i + 1,
+        path
+      });
+    }
+    return layers;
+  }
+  /**
+   *
+   * @param route
+   * @protected
+   */
+  getErrorHandler(route) {
+    if (route.errorHandler) return route.errorHandler;
+    let parent = route.parent;
+    while (parent) {
+      if (parent.errorHandler) return parent.errorHandler;
+      parent = parent.parent;
+    }
+  }
+  /**
+   *
+   * @param page
+   * @param props
+   * @protected
+   */
+  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;
+  }
+  /**
+   *
+   * @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) {
+      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 = compile(url)(params);
+    return url.replace(/\/\/+/g, "/") || "/";
+  }
+  /**
+   *
+   * @param index
+   * @param path
+   * @param view
+   * @protected
+   */
+  renderView(index, path, view = this.renderEmptyView()) {
+    return createElement(
+      RouterLayerContext.Provider,
+      {
+        value: {
+          index,
+          path
+        }
+      },
+      view
+    );
+  }
+  /**
+   *
+   * @param entry
+   */
+  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);
+    this.pages.push(page);
+    if (page.children) {
+      for (const child of page.children) {
+        child.parent = page;
+        this.add(child);
+      }
+    }
+  }
+  /**
+   * Create a match function for the given page.
+   *
+   * @param page
+   * @protected
+   */
+  createMatchFunction(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.slice(0, -1);
+    }
+    if (path.includes("?")) {
+      return {
+        exec: match(path.split("?")[0]),
+        path
+      };
+    }
+    return {
+      exec: match(path),
+      path
+    };
+  }
+  /**
+   *
+   */
+  empty() {
+    return this.pages.length === 0;
+  }
+  /**
+   *
+   * @protected
+   */
+  _next = 0;
+  /**
+   *
+   * @protected
+   */
+  nextId() {
+    this._next += 1;
+    return `P${this._next}`;
+  }
+}
+
+class PageDescriptorProvider {
+  alepha = $inject(Alepha);
+  router = $inject(Router);
+  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;
+        }
+        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);
+      }
+    }
+    return {
+      ...target.options,
+      parent: void 0,
+      children: children.map((it) => this.map(pages, it))
+    };
+  }
+}
+
+class ReactBrowserProvider {
+  log = $logger();
+  client = $inject(HttpClient);
+  router = $inject(Router);
+  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;
+  }
+  /**
+   *
+   * @param props
+   */
+  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 });
+  }
+  /**
+   *
+   * @param url
+   * @param options
+   */
+  async go(url, options = {}) {
+    const result = await this.render({
+      url
+    });
+    if (result.url !== url) {
+      this.history.replaceState({}, "", result.url);
+      return;
+    }
+    if (options.replace) {
+      this.history.replaceState({}, "", url);
+      return;
+    }
+    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
+    });
+    if (result.redirect) {
+      return await this.render({ url: result.redirect });
+    }
+    this.transitioning = void 0;
+    return { url };
+  }
+  /**
+   * Get embedded layers from the server.
+   *
+   * @protected
+   */
+  getEmbeddedCache() {
+    try {
+      if ("__ssr" in window && typeof window.__ssr === "object") {
+        return window.__ssr;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /**
+   *
+   * @protected
+   */
+  getRootElement() {
+    const root = this.document.getElementById("root");
+    if (root) {
+      return root;
+    }
+    const div = this.document.createElement("div");
+    div.id = "root";
+    this.document.body.appendChild(div);
+    return div;
+  }
+  // -------------------------------------------------------------------------------------------------------------------
+  /**
+   *
+   * @protected
+   */
+  ready = $hook({
+    name: "ready",
+    handler: async () => {
+      const cache = this.getEmbeddedCache();
+      const previous = cache?.layers ?? [];
+      const session = cache?.session ?? await this.client.of().session();
+      await this.render({ previous });
+      const element = this.router.root(this.state, session);
+      if (previous.length > 0) {
+        this.root = hydrateRoot(this.getRootElement(), element);
+        this.log.info("Hydrated root element");
+      } else {
+        this.root = createRoot(this.getRootElement());
+        this.root.render(element);
+        this.log.info("Created root element");
+      }
+      window.addEventListener("popstate", () => {
+        this.render();
+      });
+    }
+  });
+  /**
+   *
+   * @protected
+   */
+  stop = $hook({
+    name: "stop",
+    handler: async () => {
+      if (this.root) {
+        this.root.unmount();
+        this.log.info("Unmounted root element");
+      }
+    }
+  });
+}
+
+class RouterHookApi {
+  constructor(state, layer, browser) {
+    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();
+  }
+  /**
+   *
+   * @param props
+   */
+  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) {
+    if (typeof pathname === "object") {
+      pathname = pathname.options.path ?? "";
+    }
+    return pathname.startsWith("/") ? pathname : `${layer.path}/${pathname}`.replace(/\/\/+/g, "/");
+  }
+  /**
+   *
+   * @param path
+   * @param options
+   */
+  async go(path, options = {}) {
+    return await this.browser?.go(this.createHref(path, this.layer), options);
+  }
+  /**
+   *
+   * @param path
+   */
+  createAnchorProps(path) {
+    const href = this.createHref(path, this.layer);
+    return {
+      href,
+      onClick: (ev) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        this.go(path).catch(console.error);
+      }
+    };
+  }
+  /**
+   * Set query params.
+   *
+   * @param record
+   * @param options
+   */
+  setQueryParams(record, options = {}) {
+    const search = new URLSearchParams(
+      options.merge ? {
+        ...this.query,
+        ...record
+      } : {
+        ...record
+      }
+    ).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");
+  }
+  return useMemo(
+    () => new RouterHookApi(
+      ctx.state,
+      layer,
+      ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0
+    ),
+    [ctx.router, layer]
+  );
+};
+
+const useActive = (path) => {
+  const router = useRouter();
+  const ctx = useContext(RouterContext);
+  const layer = useContext(RouterLayerContext);
+  if (!ctx || !layer) {
+    throw new Error("useRouter must be used within a RouterProvider");
+  }
+  let name;
+  if (typeof path === "object" && path.options.name) {
+    name = path.options.name;
+  }
+  const [current, setCurrent] = useState(ctx.state.pathname);
+  const href = useMemo(() => router.createHref(path, layer), [path, layer]);
+  const [isPending, setPending] = useState(false);
+  const isActive = current === href;
+  useEffect(
+    () => ctx.router.on("end", ({ pathname }) => setCurrent(pathname)),
+    []
+  );
+  return {
+    name,
+    isPending,
+    isActive,
+    anchorProps: {
+      href,
+      onClick: (ev) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        if (isActive) return;
+        if (isPending) return;
+        setPending(true);
+        router.go(href).then(() => {
+          setPending(false);
+        });
+      }
+    }
+  };
+};
+
+const useInject = (classEntry) => {
+  const ctx = useContext(RouterContext);
+  if (!ctx) {
+    throw new Error("useRouter must be used within a <RouterProvider>");
+  }
+  return ctx.alepha.get(classEntry);
+};
+
+const useClient = () => {
+  return useInject(HttpClient);
+};
+
+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(
+        { [key]: encode(ctx.alepha, schema, queryParams2) },
+        {
+          merge: true
+        }
+      );
+    }
+  ];
+};
+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 useRouterEvents = (opts = {}) => {
+  const ctx = useContext(RouterContext);
+  const layer = useContext(RouterLayerContext);
+  if (!ctx || !layer) {
+    throw new Error("useRouter must be used within a RouterProvider");
+  }
+  useEffect(() => {
+    const subs = [];
+    const onBegin = opts.onBegin;
+    const onEnd = opts.onEnd;
+    const onError = opts.onError;
+    if (onBegin) {
+      subs.push(ctx.router.on("begin", onBegin));
+    }
+    if (onEnd) {
+      subs.push(ctx.router.on("end", onEnd));
+    }
+    if (onError) {
+      subs.push(ctx.router.on("error", onError));
+    }
+    return () => {
+      for (const sub of subs) {
+        sub();
+      }
+    };
+  }, []);
+};
+
+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);
+  useEffect(
+    () => ctx.router.on("end", (it) => {
+      setState({ ...it });
+    }),
+    []
+  );
+  return state;
+};
+
+export { $page as $, NestedView as N, PageDescriptorProvider as P, Router as R, RouterContext as a, RouterLayerContext as b, useClient as c, useInject as d, useQueryParams as e, RouterHookApi as f, useRouter as g, useRouterEvents as h, useRouterState as i, RedirectException as j, ReactBrowserProvider as k, pageDescriptorKey as p, useActive as u };