@inflector/keeno-router 0.2.0 → 0.3.0

package/dist/index.d.ts

@@ -65,6 +65,11 @@ export interface NavigateOptions {
     state?: unknown;
     /** Scroll to the top after navigating (default true, unless the URL has a hash). */
     scroll?: boolean;
+    /**
+     * Animate the change with the View Transitions API, where the browser supports it (default:
+     * the `viewTransition` prop of `<Router>`). The new page renders inside the transition.
+     */
+    transition?: boolean;
 }
 /** Go to an app path (`/users/1`, prefixed with `base`) or a relative URL (`?tab=2`). */
 export declare function navigate(to: string, options?: NavigateOptions): void;
@@ -85,6 +90,11 @@ export interface RouterProps {
     url?: string;
     /** Rendered when no route matches. */
     fallback?: () => unknown;
+    /**
+     * Animate navigations (links, `navigate()`, back and forward) with the View Transitions API,
+     * where the browser supports it. A navigation can opt out with `transition: false`.
+     */
+    viewTransition?: boolean;
 }
 /**
  * Render the component of the first route matching the URL. The component is kept when only
@@ -98,6 +108,8 @@ export interface LinkProps {
     href: string;
     /** Replace the current history entry. */
     replace?: boolean;
+    /** Animate the navigation with the View Transitions API (default: `<Router viewTransition>`). */
+    transition?: boolean;
     /** Class added while the link's path is active (default `active`). */
     activeClass?: string;
     /** Only active on exactly this path, not below it. */

package/dist/index.js

@@ -1,5 +1,5 @@
 // ../../../../../../../tmp/keeno-build/_inflector_keeno-router/src/index.ts
-import { ErrorBoundary, State, createContext, derived, inject, lazy, provide, untrack } from "@inflector/keeno";
+import { ErrorBoundary, State, createContext, derived, flush, inject, lazy, provide, untrack } from "@inflector/keeno";
 import { attr, callerScope, createComponent, insert, on, template } from "@inflector/keeno/internal";
 
 class HttpError extends Error {
@@ -58,6 +58,21 @@ function restoreScroll(l) {
   else
     setTimeout(run, 0);
 }
+var transitionsDefault = false;
+function withTransition(enabled, update) {
+  const start = enabled && hasWindow ? document.startViewTransition : undefined;
+  if (typeof start !== "function")
+    return update();
+  start.call(document, () => {
+    update();
+    flush();
+  });
+}
+function scrollTo(x, y) {
+  try {
+    window.scrollTo(x, y);
+  } catch {}
+}
 function sync() {
   if (!hasWindow)
     return;
@@ -68,6 +83,18 @@ function sync() {
   window.addEventListener("popstate", () => {
     saveScroll(current.peek());
     const next = readLocation();
+    if (transitionsDefault && typeof document.startViewTransition === "function") {
+      withTransition(true, () => {
+        current.set(next);
+        flush();
+        const saved = scrollPositions.get(locKey(next));
+        if (!saved && next.hash)
+          scrollToHash(next.hash);
+        else
+          scrollTo(saved?.[0] ?? 0, saved?.[1] ?? 0);
+      });
+      return;
+    }
     current.set(next);
     restoreScroll(next);
   });
@@ -122,16 +149,15 @@ function navigate(to, options = {}) {
   else
     history.pushState(options.state ?? null, "", url);
   window.dispatchEvent(new CustomEvent("keeno:navigate", { detail: { url: url.href, state: options.state ?? null } }));
-  current.set(readLocation());
-  if (options.scroll === false)
-    return;
-  if (url.hash)
-    scrollToHash(url.hash);
-  else if (typeof window.scrollTo === "function") {
-    try {
-      window.scrollTo(0, 0);
-    } catch {}
-  }
+  withTransition(options.transition ?? transitionsDefault, () => {
+    current.set(readLocation());
+    if (options.scroll === false)
+      return;
+    if (url.hash)
+      scrollToHash(url.hash);
+    else if (typeof window.scrollTo === "function")
+      scrollTo(0, 0);
+  });
 }
 function isExternalClick(e, a) {
   if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
@@ -149,7 +175,10 @@ function link(e) {
   if (!underBase(url.pathname, base.peek()))
     return;
   e.preventDefault();
-  navigate(stripBase(url.pathname, base.peek()) + url.search + url.hash, { replace: a.hasAttribute("data-replace") });
+  navigate(stripBase(url.pathname, base.peek()) + url.search + url.hash, {
+    replace: a.hasAttribute("data-replace"),
+    transition: a.hasAttribute("data-transition") ? a.getAttribute("data-transition") !== "false" : undefined
+  });
 }
 var compiled = new WeakMap;
 function compile(route) {
@@ -208,6 +237,7 @@ function Router(props) {
   const loc = url != null ? new State(parseUrl(url)) : current;
   if (url == null) {
     base.set(routerBase);
+    transitionsDefault = !!untrack(() => props.viewTransition);
     sync();
   }
   const outside = (l) => !underBase(l.pathname, routerBase);
@@ -323,7 +353,7 @@ function Link(props) {
     if (isExternalClick(e, a))
       return;
     e.preventDefault();
-    navigate(props.href, { replace: props.replace });
+    navigate(props.href, { replace: props.replace, transition: props.transition });
   });
   insert(a, () => props.children?.());
   return a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inflector/keeno-router",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Client-side router for Keeno (.kn) apps",
   "license": "MIT",
   "repository": {
@@ -39,10 +39,10 @@
     "prepack": "bun run build"
   },
   "peerDependencies": {
-    "@inflector/keeno": ">=0.4.0 <1.0.0"
+    "@inflector/keeno": ">=0.5.0 <1.0.0"
   },
   "devDependencies": {
-    "@inflector/keeno": "0.4.0"
+    "@inflector/keeno": "0.5.0"
   },
   "publishConfig": {
     "access": "public"