@alepha/react 0.5.0 → 0.5.1

package/dist/useRouterState-BlKHWZwk.cjs

@@ -0,0 +1,944 @@
+'use strict';
+
+var core = require('@alepha/core');
+var react = require('react');
+var server = require('@alepha/server');
+var client = require('react-dom/client');
+var pathToRegexp = require('path-to-regexp');
+
+const pageDescriptorKey = "PAGE";
+const $page = (options) => {
+  core.__descriptor(pageDescriptorKey);
+  return {
+    [core.KIND]: pageDescriptorKey,
+    options,
+    render: () => {
+      throw new core.NotImplementedError(pageDescriptorKey);
+    },
+    go: () => {
+      throw new core.NotImplementedError(pageDescriptorKey);
+    },
+    createAnchorProps: () => {
+      throw new core.NotImplementedError(pageDescriptorKey);
+    }
+  };
+};
+$page[core.KIND] = pageDescriptorKey;
+
+const RouterContext = react.createContext(
+  void 0
+);
+
+const RouterLayerContext = react.createContext(void 0);
+
+const NestedView = (props) => {
+  const app = react.useContext(RouterContext);
+  const layer = react.useContext(RouterLayerContext);
+  const index = layer?.index ?? 0;
+  const [view, setView] = react.useState(
+    app?.state.layers[index]?.element
+  );
+  react.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 core.EventEmitter {
+  log = core.$logger();
+  alepha = core.$inject(core.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 react.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 ? pathToRegexp.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 react.createElement(component.default, props);
+    }
+    if (page.component) {
+      return react.createElement(page.component, props);
+    }
+    return void 0;
+  }
+  /**
+   *
+   * @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) {
+      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 = pathToRegexp.compile(url)(params);
+    return url.replace(/\/\/+/g, "/") || "/";
+  }
+  /**
+   *
+   * @param index
+   * @param path
+   * @param view
+   * @protected
+   */
+  renderView(index, path, view = this.renderEmptyView()) {
+    return react.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: pathToRegexp.match(path.split("?")[0]),
+        path
+      };
+    }
+    return {
+      exec: pathToRegexp.match(path),
+      path
+    };
+  }
+  /**
+   *
+   */
+  empty() {
+    return this.pages.length === 0;
+  }
+  /**
+   *
+   * @protected
+   */
+  _next = 0;
+  /**
+   *
+   * @protected
+   */
+  nextId() {
+    this._next += 1;
+    return `P${this._next}`;
+  }
+}
+
+class PageDescriptorProvider {
+  alepha = core.$inject(core.Alepha);
+  router = core.$inject(Router);
+  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;
+        }
+        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 = core.$logger();
+  client = core.$inject(server.HttpClient);
+  router = core.$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 = core.$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 = client.hydrateRoot(this.getRootElement(), element);
+        this.log.info("Hydrated root element");
+      } else {
+        this.root = client.createRoot(this.getRootElement());
+        this.root.render(element);
+        this.log.info("Created root element");
+      }
+      window.addEventListener("popstate", () => {
+        this.render();
+      });
+    }
+  });
+  /**
+   *
+   * @protected
+   */
+  stop = core.$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 = react.useContext(RouterContext);
+  const layer = react.useContext(RouterLayerContext);
+  if (!ctx || !layer) {
+    throw new Error("useRouter must be used within a RouterProvider");
+  }
+  return react.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 = react.useContext(RouterContext);
+  const layer = react.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] = react.useState(ctx.state.pathname);
+  const href = react.useMemo(() => router.createHref(path, layer), [path, layer]);
+  const [isPending, setPending] = react.useState(false);
+  const isActive = current === href;
+  react.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 = react.useContext(RouterContext);
+  if (!ctx) {
+    throw new Error("useRouter must be used within a <RouterProvider>");
+  }
+  return ctx.alepha.get(classEntry);
+};
+
+const useClient = () => {
+  return useInject(server.HttpClient);
+};
+
+const useQueryParams = (schema, options = {}) => {
+  const ctx = react.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] = react.useState(
+    decode(ctx.alepha, schema, router.query[key])
+  );
+  react.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 = react.useContext(RouterContext);
+  const layer = react.useContext(RouterLayerContext);
+  if (!ctx || !layer) {
+    throw new Error("useRouter must be used within a RouterProvider");
+  }
+  react.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 = react.useContext(RouterContext);
+  const layer = react.useContext(RouterLayerContext);
+  if (!ctx || !layer) {
+    throw new Error("useRouter must be used within a RouterProvider");
+  }
+  const [state, setState] = react.useState(ctx.state);
+  react.useEffect(
+    () => ctx.router.on("end", (it) => {
+      setState({ ...it });
+    }),
+    []
+  );
+  return state;
+};
+
+exports.$page = $page;
+exports.NestedView = NestedView;
+exports.PageDescriptorProvider = PageDescriptorProvider;
+exports.ReactBrowserProvider = ReactBrowserProvider;
+exports.RedirectException = RedirectException;
+exports.Router = Router;
+exports.RouterContext = RouterContext;
+exports.RouterHookApi = RouterHookApi;
+exports.RouterLayerContext = RouterLayerContext;
+exports.pageDescriptorKey = pageDescriptorKey;
+exports.useActive = useActive;
+exports.useClient = useClient;
+exports.useInject = useInject;
+exports.useQueryParams = useQueryParams;
+exports.useRouter = useRouter;
+exports.useRouterEvents = useRouterEvents;
+exports.useRouterState = useRouterState;