Router

import { provideContext, RouterServiceContext } from "@juo/blocks";

provideContext(root, RouterServiceContext, {
  push(to) {
    if (typeof to === "string") {
      window.location.href = to;
    } else if ("path" in to) {
      const qs = to.query ? "?" + new URLSearchParams(to.query) : "";
      window.location.href = to.path + qs;
    } else {
      // resolve named route to a path against the route table
      window.location.href = resolveNamed(to.name, to.params);
    }
  },
  subscribe(cb) {
    const handler = () => cb({ path: window.location.pathname });
    window.addEventListener("popstate", handler);
    return () => window.removeEventListener("popstate", handler);
  },
  getPages() {
    return [
      { path: "/", block: "HomePage", title: "Home" },
      { path: "/account", block: "AccountPage", title: "Account" },
    ];
  },
});

type RouterPushTarget =
  | string
  | { path: string; query?: Record<string, string> }
  | { name: string; params?: Record<string, string>; query?: Record<string, string> };

type RouterService = {
  push(to: RouterPushTarget): void;
  subscribe(callback: (event: { path: string }) => void): () => void;
  getPages(): readonly { path: string; block: string; title: string }[];
};

import { defineBlock, injectContext, RouterServiceContext } from "@juo/blocks";

defineBlock("NavLink", {
  group: "theme",
  schema: {
    type: "object",
    properties: {
      props: {
        type: "object",
        properties: { to: { type: "string" }, label: { type: "string" } },
        required: ["to", "label"],
        additionalProperties: false,
      },
    },
    required: ["props"],
    additionalProperties: false,
  } as const,
  initialValue: () => ({ props: { to: "/", label: "Home" } }),
  renderer(block) {
    const el = document.createElement("a");
    const router = injectContext(el, RouterServiceContext);

    el.href = block.props.to;
    el.textContent = block.props.label;
    el.addEventListener("click", (e) => {
      e.preventDefault();
      router.push(block.props.to);
    });

    return el;
  },
});