@cajoa/dom 0.10.1 → 0.12.0

package/dist/index.cjs

@@ -21,12 +21,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Link: () => Link,
+  NavLink: () => NavLink,
+  Navigate: () => Navigate,
+  Outlet: () => Outlet,
   Route: () => Route,
   Router: () => Router,
   domRenderer: () => domRenderer,
   navigate: () => navigate,
+  useLocation: () => useLocation,
   useParams: () => useParams,
-  usePath: () => usePath
+  usePath: () => usePath,
+  useSearchParams: () => useSearchParams
 });
 module.exports = __toCommonJS(index_exports);
 var import_core2 = require("@cajoa/core");
@@ -130,8 +135,8 @@ function isEvent(el, key) {
   return /^on[A-Z]/.test(key) || key.startsWith("on") && key in el;
 }
 function setEvent(el, key, value) {
-  const raw = key.slice(2).toLowerCase();
-  const name = EVENT_NAMES[raw] ?? raw;
+  const raw2 = key.slice(2).toLowerCase();
+  const name = EVENT_NAMES[raw2] ?? raw2;
   let byName = listeners.get(el);
   if (!byName) {
     byName = /* @__PURE__ */ new Map();
@@ -217,23 +222,106 @@ var domRenderer = {
 
 // src/router.ts
 var import_core = require("@cajoa/core");
-var read = () => typeof location === "undefined" ? "/" : location.pathname;
-var [path, setPath] = (0, import_core.createSignal)(read());
+var inBrowser = typeof window !== "undefined";
+var readRaw = () => inBrowser ? {
+  pathname: location.pathname,
+  search: location.search,
+  hash: location.hash
+} : { pathname: "/", search: "", hash: "" };
+var [base, setBase] = (0, import_core.createSignal)("");
+var [raw, setRaw] = (0, import_core.createSignal)(readRaw());
+function normalizeBase(value) {
+  const trimmed = (value ?? "").replace(/^\/+|\/+$/g, "");
+  return trimmed ? "/" + trimmed : "";
+}
+function stripBase(pathname, prefix) {
+  if (!prefix) return pathname;
+  if (pathname === prefix) return "/";
+  return pathname.startsWith(prefix + "/") ? pathname.slice(prefix.length) : pathname;
+}
+function withBase(to) {
+  const prefix = base();
+  return prefix && to.startsWith("/") && !to.startsWith("//") ? prefix + to : to;
+}
+var location$ = (0, import_core.createMemo)(() => {
+  const r = raw();
+  return {
+    pathname: stripBase(r.pathname, base()),
+    search: r.search,
+    hash: r.hash
+  };
+});
+var pathname$ = (0, import_core.createMemo)(() => location$().pathname);
+var useLocation = () => location$;
+var usePath = () => pathname$;
+function sync() {
+  if (!inBrowser) return;
+  const next = readRaw();
+  const prev = (0, import_core.untrack)(raw);
+  if (next.pathname !== prev.pathname || next.search !== prev.search || next.hash !== prev.hash) {
+    setRaw(next);
+  }
+}
 var listening = false;
 function listen() {
-  if (listening || typeof window === "undefined") return;
+  if (listening || !inBrowser) return;
   listening = true;
-  window.addEventListener("popstate", () => setPath(read()));
+  window.addEventListener("popstate", sync);
 }
 function navigate(to, options = {}) {
-  if (new URL(to, location.href).href === location.href) return;
-  history[options.replace ? "replaceState" : "pushState"](null, "", to);
-  setPath(read());
+  if (!inBrowser) return;
+  const url = new URL(
+    (0, import_core.untrack)(() => withBase(to)),
+    location.href
+  );
+  if (url.origin !== location.origin) {
+    location.assign(url.href);
+    return;
+  }
+  if (url.href === location.href) {
+    sync();
+    return;
+  }
+  const pathChanged = url.pathname !== location.pathname;
+  history[options.replace ? "replaceState" : "pushState"](
+    null,
+    "",
+    url.pathname + url.search + url.hash
+  );
+  sync();
+  if (options.scroll !== false) restoreScroll(url.hash, pathChanged);
 }
-var usePath = () => path;
-var Params = (0, import_core.createContext)({});
+function restoreScroll(hash, pathChanged) {
+  if (hash) {
+    const target = document.getElementById(decode(hash.slice(1)));
+    if (target) {
+      target.scrollIntoView?.();
+      return;
+    }
+  }
+  if (pathChanged) window.scrollTo(0, 0);
+}
+function useSearchParams() {
+  const params = () => new URLSearchParams(location$().search);
+  const setParams = (values, options = {}) => {
+    if (!inBrowser) return;
+    const next = new URLSearchParams(location.search);
+    for (const [key, value] of Object.entries(values)) {
+      if (value === null || value === void 0) next.delete(key);
+      else next.set(key, String(value));
+    }
+    const search = next.toString();
+    const { pathname, hash } = (0, import_core.untrack)(location$);
+    navigate(pathname + (search ? "?" + search : "") + hash, {
+      replace: options.replace,
+      scroll: false
+    });
+  };
+  return [params, setParams];
+}
+var ParamsContext = (0, import_core.createContext)({});
 function useParams() {
-  return (0, import_core.useContext)(Params);
+  return (0, import_core.useContext)(ParamsContext);
 }
 var split = (s) => s.split("/").filter(Boolean);
 function decode(s) {
@@ -243,47 +331,136 @@ function decode(s) {
     return s;
   }
 }
-function match(pattern, pathname) {
-  if (pattern === "*") return {};
-  const p = split(pattern);
-  const u = split(pathname);
-  if (p.length !== u.length) return null;
+function matchSegments(pattern, segments) {
   const params = {};
-  for (let i = 0; i < p.length; i++) {
-    if (p[i].startsWith(":")) params[p[i].slice(1)] = decode(u[i]);
-    else if (p[i] !== u[i]) return null;
+  for (let i = 0; i < pattern.length; i++) {
+    const part = pattern[i];
+    if (part === "*") {
+      params["*"] = segments.slice(i).map(decode).join("/");
+      return { params, rest: [] };
+    }
+    if (i >= segments.length) return null;
+    if (part.startsWith(":")) params[part.slice(1)] = decode(segments[i]);
+    else if (part !== decode(segments[i])) return null;
   }
-  return params;
+  return { params, rest: segments.slice(pattern.length) };
 }
+var nextRouteId = 1;
+var isRoute = (value) => typeof value === "object" && value !== null && value.__route === true;
+var collectRoutes = (children) => [children].flat(Infinity).filter(isRoute);
 function Route(props) {
-  return { __route: true, path: props.path, component: props.component };
+  return {
+    __route: true,
+    id: nextRouteId++,
+    path: props.path,
+    component: props.component,
+    children: collectRoutes(props.children)
+  };
 }
-function Router(props) {
-  listen();
-  const routes = [props.children].flat(Infinity).filter(
-    (r) => r?.__route === true
-  );
+function matchRoutes(routes, segments, inherited) {
+  for (const route of routes) {
+    const hit = matchSegments(split(route.path), segments);
+    if (!hit) continue;
+    const params = { ...inherited, ...hit.params };
+    if (route.children.length === 0) {
+      if (hit.rest.length === 0) return [{ route, params }];
+      continue;
+    }
+    const inner = matchRoutes(route.children, hit.rest, params);
+    if (inner) return [{ route, params }, ...inner];
+  }
+  return null;
+}
+var OutletContext = (0, import_core.createContext)(null);
+function Outlet() {
+  const render = (0, import_core.useContext)(OutletContext);
+  return render ? render() : null;
+}
+function renderLevel(matches, level) {
+  const key = (0, import_core.createMemo)(() => {
+    const match = matches()[level];
+    return match ? `${match.route.id}:${JSON.stringify(match.params)}` : "";
+  });
   return () => {
-    const current = path();
-    for (const route of routes) {
-      const params = match(route.path, current);
-      if (params) {
-        return (0, import_core.untrack)(() => (0, import_core.provide)(Params, params, () => route.component()));
-      }
+    key();
+    const match = (0, import_core.untrack)(() => matches()[level]);
+    if (!match) return null;
+    const component = match.route.component;
+    if (!component) {
+      return (0, import_core.provide)(
+        ParamsContext,
+        match.params,
+        () => renderLevel(matches, level + 1)()
+      );
     }
-    return null;
+    return (0, import_core.untrack)(
+      () => (0, import_core.provide)(
+        ParamsContext,
+        match.params,
+        () => (0, import_core.provide)(
+          OutletContext,
+          () => renderLevel(matches, level + 1),
+          () => component()
+        )
+      )
+    );
   };
 }
+function Router(props) {
+  setBase(normalizeBase(props.base));
+  (0, import_core.onCleanup)(() => setBase(""));
+  listen();
+  sync();
+  const routes = collectRoutes(props.children);
+  const matches = (0, import_core.createMemo)(
+    () => matchRoutes(routes, split(pathname$()), {}) ?? []
+  );
+  return renderLevel(matches, 0);
+}
 function Link(props) {
   const { href, children, ...rest } = props;
+  const external = /^[a-z][a-z0-9+.-]*:|^\/\//i.test(href);
   const onClick = (e) => {
-    if (/^[a-z][a-z0-9+.-]*:|^\/\//i.test(href)) return;
+    if (external) return;
     if (e.defaultPrevented || e.button !== 0) return;
     if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    const target = rest.target;
+    if (target && target !== "_self" || rest.download !== void 0) return;
     e.preventDefault();
     navigate(href);
   };
-  return (0, import_core.h)("a", { ...rest, href, onClick }, children);
+  return (0, import_core.h)(
+    "a",
+    { ...rest, href: external ? href : () => withBase(href), onClick },
+    children
+  );
+}
+function isActive(current, href, end) {
+  const target = split(href.split(/[?#]/)[0]);
+  const here = split(current);
+  if (end && target.length !== here.length) return false;
+  return target.length <= here.length && target.every((segment, i) => segment === here[i]);
+}
+function NavLink(props) {
+  const {
+    href,
+    activeClass = "active",
+    end = false,
+    class: cls,
+    children,
+    ...rest
+  } = props;
+  const active = () => isActive(pathname$(), href, end);
+  return Link({
+    ...rest,
+    href,
+    children,
+    class: () => [cls, active() ? activeClass : ""].filter(Boolean).join(" ")
+  });
+}
+function Navigate(props) {
+  (0, import_core.onMount)(() => navigate(props.to, { replace: props.replace ?? true }));
+  return null;
 }
 
 // src/index.ts
@@ -291,10 +468,15 @@ function Link(props) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Link,
+  NavLink,
+  Navigate,
+  Outlet,
   Route,
   Router,
   domRenderer,
   navigate,
+  useLocation,
   useParams,
-  usePath
+  usePath,
+  useSearchParams
 });

package/dist/index.d.cts

@@ -2,21 +2,40 @@ import { Renderer } from '@cajoa/core';
 
 declare const domRenderer: Renderer<Node>;
 
-declare function navigate(to: string, options?: {
-    replace?: boolean;
-}): void;
+declare const useLocation: () => () => {
+    pathname: string;
+    search: string;
+    hash: string;
+};
 declare const usePath: () => () => string;
+interface NavigateOptions {
+    replace?: boolean;
+    scroll?: boolean;
+}
+declare function navigate(to: string, options?: NavigateOptions): void;
+type SearchParamValue = string | number | boolean | null | undefined;
+declare function useSearchParams(): [
+    () => URLSearchParams,
+    (values: Record<string, SearchParamValue>, options?: {
+        replace?: boolean;
+    }) => void
+];
 declare function useParams(): Record<string, string>;
 interface RouteDef {
     __route: true;
+    id: number;
     path: string;
-    component: () => unknown;
+    component?: () => unknown;
+    children: RouteDef[];
 }
 declare function Route(props: {
     path: string;
-    component: () => unknown;
+    component?: () => unknown;
+    children?: unknown;
 }): RouteDef;
+declare function Outlet(): unknown;
 declare function Router(props: {
+    base?: string;
     children?: unknown;
 }): () => unknown;
 declare function Link(props: {
@@ -24,6 +43,18 @@ declare function Link(props: {
     children?: unknown;
     [key: string]: unknown;
 }): object;
+declare function NavLink(props: {
+    href: string;
+    activeClass?: string;
+    end?: boolean;
+    class?: string;
+    children?: unknown;
+    [key: string]: unknown;
+}): object;
+declare function Navigate(props: {
+    to: string;
+    replace?: boolean;
+}): null;
 
-export { Link, Route, Router, domRenderer, navigate, useParams, usePath };
-export type { RouteDef };
+export { Link, NavLink, Navigate, Outlet, Route, Router, domRenderer, navigate, useLocation, useParams, usePath, useSearchParams };
+export type { NavigateOptions, RouteDef, SearchParamValue };

package/dist/index.d.ts

@@ -2,21 +2,40 @@ import { Renderer } from '@cajoa/core';
 
 declare const domRenderer: Renderer<Node>;
 
-declare function navigate(to: string, options?: {
-    replace?: boolean;
-}): void;
+declare const useLocation: () => () => {
+    pathname: string;
+    search: string;
+    hash: string;
+};
 declare const usePath: () => () => string;
+interface NavigateOptions {
+    replace?: boolean;
+    scroll?: boolean;
+}
+declare function navigate(to: string, options?: NavigateOptions): void;
+type SearchParamValue = string | number | boolean | null | undefined;
+declare function useSearchParams(): [
+    () => URLSearchParams,
+    (values: Record<string, SearchParamValue>, options?: {
+        replace?: boolean;
+    }) => void
+];
 declare function useParams(): Record<string, string>;
 interface RouteDef {
     __route: true;
+    id: number;
     path: string;
-    component: () => unknown;
+    component?: () => unknown;
+    children: RouteDef[];
 }
 declare function Route(props: {
     path: string;
-    component: () => unknown;
+    component?: () => unknown;
+    children?: unknown;
 }): RouteDef;
+declare function Outlet(): unknown;
 declare function Router(props: {
+    base?: string;
     children?: unknown;
 }): () => unknown;
 declare function Link(props: {
@@ -24,6 +43,18 @@ declare function Link(props: {
     children?: unknown;
     [key: string]: unknown;
 }): object;
+declare function NavLink(props: {
+    href: string;
+    activeClass?: string;
+    end?: boolean;
+    class?: string;
+    children?: unknown;
+    [key: string]: unknown;
+}): object;
+declare function Navigate(props: {
+    to: string;
+    replace?: boolean;
+}): null;
 
-export { Link, Route, Router, domRenderer, navigate, useParams, usePath };
-export type { RouteDef };
+export { Link, NavLink, Navigate, Outlet, Route, Router, domRenderer, navigate, useLocation, useParams, usePath, useSearchParams };
+export type { NavigateOptions, RouteDef, SearchParamValue };

package/dist/index.js

@@ -100,8 +100,8 @@ function isEvent(el, key) {
   return /^on[A-Z]/.test(key) || key.startsWith("on") && key in el;
 }
 function setEvent(el, key, value) {
-  const raw = key.slice(2).toLowerCase();
-  const name = EVENT_NAMES[raw] ?? raw;
+  const raw2 = key.slice(2).toLowerCase();
+  const name = EVENT_NAMES[raw2] ?? raw2;
   let byName = listeners.get(el);
   if (!byName) {
     byName = /* @__PURE__ */ new Map();
@@ -187,30 +187,116 @@ var domRenderer = {
 
 // src/router.ts
 import {
-  createSignal,
   createContext,
+  createMemo,
+  createSignal,
+  h,
+  onCleanup,
+  onMount,
   provide,
-  useContext,
   untrack,
-  h
+  useContext
 } from "@cajoa/core";
-var read = () => typeof location === "undefined" ? "/" : location.pathname;
-var [path, setPath] = createSignal(read());
+var inBrowser = typeof window !== "undefined";
+var readRaw = () => inBrowser ? {
+  pathname: location.pathname,
+  search: location.search,
+  hash: location.hash
+} : { pathname: "/", search: "", hash: "" };
+var [base, setBase] = createSignal("");
+var [raw, setRaw] = createSignal(readRaw());
+function normalizeBase(value) {
+  const trimmed = (value ?? "").replace(/^\/+|\/+$/g, "");
+  return trimmed ? "/" + trimmed : "";
+}
+function stripBase(pathname, prefix) {
+  if (!prefix) return pathname;
+  if (pathname === prefix) return "/";
+  return pathname.startsWith(prefix + "/") ? pathname.slice(prefix.length) : pathname;
+}
+function withBase(to) {
+  const prefix = base();
+  return prefix && to.startsWith("/") && !to.startsWith("//") ? prefix + to : to;
+}
+var location$ = createMemo(() => {
+  const r = raw();
+  return {
+    pathname: stripBase(r.pathname, base()),
+    search: r.search,
+    hash: r.hash
+  };
+});
+var pathname$ = createMemo(() => location$().pathname);
+var useLocation = () => location$;
+var usePath = () => pathname$;
+function sync() {
+  if (!inBrowser) return;
+  const next = readRaw();
+  const prev = untrack(raw);
+  if (next.pathname !== prev.pathname || next.search !== prev.search || next.hash !== prev.hash) {
+    setRaw(next);
+  }
+}
 var listening = false;
 function listen() {
-  if (listening || typeof window === "undefined") return;
+  if (listening || !inBrowser) return;
   listening = true;
-  window.addEventListener("popstate", () => setPath(read()));
+  window.addEventListener("popstate", sync);
 }
 function navigate(to, options = {}) {
-  if (new URL(to, location.href).href === location.href) return;
-  history[options.replace ? "replaceState" : "pushState"](null, "", to);
-  setPath(read());
+  if (!inBrowser) return;
+  const url = new URL(
+    untrack(() => withBase(to)),
+    location.href
+  );
+  if (url.origin !== location.origin) {
+    location.assign(url.href);
+    return;
+  }
+  if (url.href === location.href) {
+    sync();
+    return;
+  }
+  const pathChanged = url.pathname !== location.pathname;
+  history[options.replace ? "replaceState" : "pushState"](
+    null,
+    "",
+    url.pathname + url.search + url.hash
+  );
+  sync();
+  if (options.scroll !== false) restoreScroll(url.hash, pathChanged);
+}
+function restoreScroll(hash, pathChanged) {
+  if (hash) {
+    const target = document.getElementById(decode(hash.slice(1)));
+    if (target) {
+      target.scrollIntoView?.();
+      return;
+    }
+  }
+  if (pathChanged) window.scrollTo(0, 0);
+}
+function useSearchParams() {
+  const params = () => new URLSearchParams(location$().search);
+  const setParams = (values, options = {}) => {
+    if (!inBrowser) return;
+    const next = new URLSearchParams(location.search);
+    for (const [key, value] of Object.entries(values)) {
+      if (value === null || value === void 0) next.delete(key);
+      else next.set(key, String(value));
+    }
+    const search = next.toString();
+    const { pathname, hash } = untrack(location$);
+    navigate(pathname + (search ? "?" + search : "") + hash, {
+      replace: options.replace,
+      scroll: false
+    });
+  };
+  return [params, setParams];
 }
-var usePath = () => path;
-var Params = createContext({});
+var ParamsContext = createContext({});
 function useParams() {
-  return useContext(Params);
+  return useContext(ParamsContext);
 }
 var split = (s) => s.split("/").filter(Boolean);
 function decode(s) {
@@ -220,57 +306,151 @@ function decode(s) {
     return s;
   }
 }
-function match(pattern, pathname) {
-  if (pattern === "*") return {};
-  const p = split(pattern);
-  const u = split(pathname);
-  if (p.length !== u.length) return null;
+function matchSegments(pattern, segments) {
   const params = {};
-  for (let i = 0; i < p.length; i++) {
-    if (p[i].startsWith(":")) params[p[i].slice(1)] = decode(u[i]);
-    else if (p[i] !== u[i]) return null;
+  for (let i = 0; i < pattern.length; i++) {
+    const part = pattern[i];
+    if (part === "*") {
+      params["*"] = segments.slice(i).map(decode).join("/");
+      return { params, rest: [] };
+    }
+    if (i >= segments.length) return null;
+    if (part.startsWith(":")) params[part.slice(1)] = decode(segments[i]);
+    else if (part !== decode(segments[i])) return null;
   }
-  return params;
+  return { params, rest: segments.slice(pattern.length) };
 }
+var nextRouteId = 1;
+var isRoute = (value) => typeof value === "object" && value !== null && value.__route === true;
+var collectRoutes = (children) => [children].flat(Infinity).filter(isRoute);
 function Route(props) {
-  return { __route: true, path: props.path, component: props.component };
+  return {
+    __route: true,
+    id: nextRouteId++,
+    path: props.path,
+    component: props.component,
+    children: collectRoutes(props.children)
+  };
 }
-function Router(props) {
-  listen();
-  const routes = [props.children].flat(Infinity).filter(
-    (r) => r?.__route === true
-  );
+function matchRoutes(routes, segments, inherited) {
+  for (const route of routes) {
+    const hit = matchSegments(split(route.path), segments);
+    if (!hit) continue;
+    const params = { ...inherited, ...hit.params };
+    if (route.children.length === 0) {
+      if (hit.rest.length === 0) return [{ route, params }];
+      continue;
+    }
+    const inner = matchRoutes(route.children, hit.rest, params);
+    if (inner) return [{ route, params }, ...inner];
+  }
+  return null;
+}
+var OutletContext = createContext(null);
+function Outlet() {
+  const render = useContext(OutletContext);
+  return render ? render() : null;
+}
+function renderLevel(matches, level) {
+  const key = createMemo(() => {
+    const match = matches()[level];
+    return match ? `${match.route.id}:${JSON.stringify(match.params)}` : "";
+  });
   return () => {
-    const current = path();
-    for (const route of routes) {
-      const params = match(route.path, current);
-      if (params) {
-        return untrack(() => provide(Params, params, () => route.component()));
-      }
+    key();
+    const match = untrack(() => matches()[level]);
+    if (!match) return null;
+    const component = match.route.component;
+    if (!component) {
+      return provide(
+        ParamsContext,
+        match.params,
+        () => renderLevel(matches, level + 1)()
+      );
     }
-    return null;
+    return untrack(
+      () => provide(
+        ParamsContext,
+        match.params,
+        () => provide(
+          OutletContext,
+          () => renderLevel(matches, level + 1),
+          () => component()
+        )
+      )
+    );
   };
 }
+function Router(props) {
+  setBase(normalizeBase(props.base));
+  onCleanup(() => setBase(""));
+  listen();
+  sync();
+  const routes = collectRoutes(props.children);
+  const matches = createMemo(
+    () => matchRoutes(routes, split(pathname$()), {}) ?? []
+  );
+  return renderLevel(matches, 0);
+}
 function Link(props) {
   const { href, children, ...rest } = props;
+  const external = /^[a-z][a-z0-9+.-]*:|^\/\//i.test(href);
   const onClick = (e) => {
-    if (/^[a-z][a-z0-9+.-]*:|^\/\//i.test(href)) return;
+    if (external) return;
     if (e.defaultPrevented || e.button !== 0) return;
     if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    const target = rest.target;
+    if (target && target !== "_self" || rest.download !== void 0) return;
     e.preventDefault();
     navigate(href);
   };
-  return h("a", { ...rest, href, onClick }, children);
+  return h(
+    "a",
+    { ...rest, href: external ? href : () => withBase(href), onClick },
+    children
+  );
+}
+function isActive(current, href, end) {
+  const target = split(href.split(/[?#]/)[0]);
+  const here = split(current);
+  if (end && target.length !== here.length) return false;
+  return target.length <= here.length && target.every((segment, i) => segment === here[i]);
+}
+function NavLink(props) {
+  const {
+    href,
+    activeClass = "active",
+    end = false,
+    class: cls,
+    children,
+    ...rest
+  } = props;
+  const active = () => isActive(pathname$(), href, end);
+  return Link({
+    ...rest,
+    href,
+    children,
+    class: () => [cls, active() ? activeClass : ""].filter(Boolean).join(" ")
+  });
+}
+function Navigate(props) {
+  onMount(() => navigate(props.to, { replace: props.replace ?? true }));
+  return null;
 }
 
 // src/index.ts
 setRenderer(domRenderer);
 export {
   Link,
+  NavLink,
+  Navigate,
+  Outlet,
   Route,
   Router,
   domRenderer,
   navigate,
+  useLocation,
   useParams,
-  usePath
+  usePath,
+  useSearchParams
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cajoa/dom",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "description": "Cajoa for the browser: DOM renderer and router.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -26,7 +26,7 @@
   ],
   "sideEffects": true,
   "peerDependencies": {
-    "@cajoa/core": "^0.10.1"
+    "@cajoa/core": "^0.12.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --clean",