@uniflowed/router 0.0.0-alpha.40 → 0.0.0-alpha.42

package/internal/navigation-cache.js

@@ -61,6 +61,12 @@ let staleTimeMs: number = 0;
  */
 export function installStaleTime(seconds: number): void {
   staleTimeMs = Number.isFinite(seconds) && seconds > 0 ? seconds * 1000 : 0;
+  if (import.meta.hot != null) {
+    Object.defineProperty((globalThis: $FlowFixMe), "__UF_NAVIGATION_CACHE__", {
+      configurable: true,
+      value: inspectNavigationCache,
+    });
+  }
   if (staleTimeMs === 0) {
     clearNavigationCache();
   }
@@ -87,6 +93,15 @@ export type NavigationCache<T> = {|
   readonly clear: () => void,
   /** How many routes are kept, fresh or not. */
   readonly size: () => number,
+  readonly inspect: () => $ReadOnlyArray<NavigationCacheEntry>,
+|};
+
+/** Metadata only: inspecting the cache never exposes loader or Flight data. */
+export type NavigationCacheEntry = {|
+  readonly key: string,
+  readonly cachedAt: number,
+  readonly staleAt: number,
+  readonly fresh: boolean,
 |};
 
 function createNavigationCache<T>(): NavigationCache<T> {
@@ -128,6 +143,15 @@ function createNavigationCache<T>(): NavigationCache<T> {
     size() {
       return entries.size;
     },
+    inspect() {
+      const now = Date.now();
+      return Array.from(entries, ([key, entry]) => ({
+        key,
+        cachedAt: entry.at,
+        staleAt: entry.at + staleTimeMs,
+        fresh: now - entry.at < staleTimeMs,
+      }));
+    },
   };
 }
 
@@ -137,6 +161,19 @@ export const flightNavigations: NavigationCache<Promise<FetchedFlight>> = create
 /** Resolved routes, for an application rendered from its modules. */
 export const routeNavigations: NavigationCache<Promise<ResolvedRoute>> = createNavigationCache();
 
+/** A fresh snapshot for the development console, without reading an entry. */
+export function inspectNavigationCache(): {|
+  readonly staleTime: number,
+  readonly flight: $ReadOnlyArray<NavigationCacheEntry>,
+  readonly routes: $ReadOnlyArray<NavigationCacheEntry>,
+|} {
+  return {
+    staleTime: staleTimeMs / 1000,
+    flight: flightNavigations.inspect(),
+    routes: routeNavigations.inspect(),
+  };
+}
+
 /** Forget every kept route. `router.refresh()` and each server action call this. */
 export function clearNavigationCache(): void {
   flightNavigations.clear();

package/internal/resolve.js

@@ -722,6 +722,8 @@ export type ResolveOptions = {|
   readonly defer?: boolean,
   /** The route pattern, the moment the URL matches one; see [`resolveMatch`]. */
   readonly onMatch?: (pattern: string) => void,
+  /** The server supplies tracing without importing server code into the browser. */
+  readonly runLoader?: (body: () => mixed | Promise<mixed>) => Promise<mixed>,
 |};
 
 async function resolveRoute(
@@ -799,7 +801,9 @@ async function resolveRoute(
   let data: mixed = options?.data;
   let deferred: ?Promise<mixed> = null;
   if (options?.skipLoader !== true && typeof page.loader === "function") {
-    const running = page.loader({ params: matched.params, searchParams, pathname });
+    const loader = page.loader;
+    const loadData = () => loader({ params: matched.params, searchParams, pathname });
+    const running = options?.runLoader == null ? loadData() : options.runLoader(loadData);
     const canDefer =
       options?.defer === true &&
       (matched.route.loading ?? []).length > 0 &&
@@ -1043,15 +1047,13 @@ export function interceptingRoutes(
  * something to show for one URL, the way two slots each match one URL by their
  * own routes.
  *
- * # Never on a server
+ * # Never for a document
  *
- * Nothing on the server calls this. A document request for an intercepted URL
- * resolves the ordinary page, because a request carries where it is going and
- * not what was on screen when it was made — which is what a reload, a shared
- * link and a crawler all are. That includes the Flight renderer, so a browser
- * holding a payload rather than a resolved route navigates to the page the URL
- * names: interception is a feature of the router that resolves routes from
- * their modules.
+ * A document request for an intercepted URL resolves the ordinary page,
+ * because a request carries where it is going and not what was on screen when
+ * it was made — which is what a reload, a shared link and a crawler all are.
+ * A Flight payload request may carry the page the browser is navigating from,
+ * and the React Server Components renderer calls this for that request only.
  *
  * # When the interception cannot render
  *

package/internal/routing.js

@@ -139,6 +139,10 @@ export type RouteTable<
   TError = mixed,
 > = {|
   readonly routes: $ReadOnlyArray<RouteRecord<TPage, TLayout, TTemplate, TLoading, TError>>,
+  readonly nativeLinks?: {|
+    readonly origins: $ReadOnlyArray<string>,
+    readonly routes: $ReadOnlyArray<string>,
+  |},
   readonly notFound: $ReadOnlyArray<NotFoundBoundary<TPage, TLayout>>,
   readonly errors: $ReadOnlyArray<ErrorBoundary<TError, TLayout>>,
 |};

package/internal/runtime.js

@@ -20,7 +20,9 @@
 
 "use client";
 
-import * as React from "react";
+import { observeNavigation } from "../instrumentation.js";
+
+import type * as React from "react";
 import {
   Suspense,
   createContext,
@@ -28,8 +30,10 @@ import {
   use,
   useContext,
   useEffect,
+  useRef,
   useState,
   useSyncExternalStore,
+  useTransition,
 } from "react";
 // The one thing in this module that only a browser can do, and the reason it
 // is imported here rather than from `../client.js`: a view transition needs
@@ -74,7 +78,13 @@ import {
 import { BoundaryReporter } from "./boundaries.js";
 import { routeBoundaries } from "./boundary-data.js";
 import { composeRoute, pageComponent } from "./compose.js";
-import { type FetchedFlight, type FlightRoot, type RouteState, routeState } from "./flight.js";
+import {
+  type FetchedFlight,
+  type FlightFetchOptions,
+  type FlightRoot,
+  type RouteState,
+  routeState,
+} from "./flight.js";
 import { Head } from "./head.js";
 import { addressOf, applicationPathOf, canonicalAddress } from "./base-path.js";
 import {
@@ -426,15 +436,19 @@ export function navigationMode(): Navigation {
  * shown, whether or not anything calls it, so an import here would put that
  * package in every one of those bundles, or fail the build where it is absent.
  */
-let installedFlightFetch: ((url: string) => Promise<FetchedFlight>) | null = null;
+let installedFlightFetch:
+  | ((url: string, options?: FlightFetchOptions) => Promise<FetchedFlight>)
+  | null = null;
 
 /** Hand the router the payload fetch. Called once, by `hydrateFlight`, before the first render. */
-export function installFlightFetch(fetcher: (url: string) => Promise<FetchedFlight>): void {
+export function installFlightFetch(
+  fetcher: (url: string, options?: FlightFetchOptions) => Promise<FetchedFlight>,
+): void {
   installedFlightFetch = fetcher;
 }
 
 /** The next route's payload, through the fetch `hydrateFlight` installed. */
-function fetchFlight(url: string): Promise<FetchedFlight> {
+function fetchFlight(url: string, options?: FlightFetchOptions): Promise<FetchedFlight> {
   if (installedFlightFetch == null) {
     return Promise.reject(
       new Error(
@@ -444,7 +458,7 @@ function fetchFlight(url: string): Promise<FetchedFlight> {
       ),
     );
   }
-  return installedFlightFetch(url);
+  return installedFlightFetch(url, options);
 }
 
 /** Register the generated route table. Called once by the client and server entries. */
@@ -570,6 +584,12 @@ function historyStateFor(resolved: ResolvedRoute): mixed {
   return { [INTERCEPTED_FROM]: interception.base.pathname + interception.base.search };
 }
 
+/** The state a history entry for a Flight route is written with. */
+function historyStateForRoute(route: RouteState): mixed {
+  const from = route.interception?.from;
+  return from == null ? null : { [INTERCEPTED_FROM]: from };
+}
+
 /** Where the history entry holding `state` was intercepted from, if it was. */
 function interceptedFrom(state: mixed): ?string {
   if (state == null || typeof state !== "object" || Array.isArray(state)) {
@@ -599,6 +619,22 @@ function withoutInterception(state: mixed): mixed {
   return Object.keys(rest).length === 0 ? null : rest;
 }
 
+/** The page a Flight navigation is leaving from, as an application path and query. */
+function flightNavigationOrigin(root: FlightRoot): string {
+  return root.route.interception?.from ?? root.route.pathname + root.route.search;
+}
+
+/** The optional fetch settings for an intercepted payload request. */
+function flightFetchOptions(from: ?string): FlightFetchOptions | void {
+  return from == null ? undefined : { interceptedFrom: from };
+}
+
+/** The cache key for a Flight payload, separated by the page it renders over. */
+function flightNavigationKey(pathname: string, search: string, from: ?string): string {
+  const key = navigationKey(pathname, search);
+  return from == null ? key : `${key}\0${from}`;
+}
+
 /**
  * The provider for a route resolved from its modules: a single-page
  * application, and a project that turned `app.rsc` off.
@@ -625,13 +661,15 @@ component ModuleRouter(url: string, initial: ResolvedRoute, children: React.Node
   // whether a navigation is intercepted is a question about the page it starts
   // on — and `show` writes both in the same breath, so the two cannot disagree
   // about what was last committed.
-  const shown = React.useRef<ResolvedRoute>(initial);
+  const shown = useRef<ResolvedRoute>(initial);
   const show = (next: ResolvedRoute) => {
     shown.current = next;
     setResolved(next);
   };
 
-  const navigate = async (to: string, options?: NavigateOptions): Promise<void> => {
+  const navigate = (to: string, options?: NavigateOptions): Promise<void> =>
+    observeNavigation(to, () => navigateTo(to, options));
+  const navigateTo = async (to: string, options?: NavigateOptions): Promise<void> => {
     if (!isBrowser()) {
       return;
     }
@@ -943,10 +981,17 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
   const [current, setCurrent] = useState<Promise<FlightRoot>>(flight);
   const [pending, setPending] = useState<boolean>(false);
   const root = use(current);
+  const shown = useRef<FlightRoot>(root);
+  const show = (payload: Promise<FlightRoot>, nextRoot: FlightRoot) => {
+    shown.current = nextRoot;
+    setCurrent(payload);
+  };
   // Read once per render, for the reason `ModuleRouter` reads it once.
   const navigation = navigationMode();
 
-  const navigate = async (to: string, options?: NavigateOptions): Promise<void> => {
+  const navigate = (to: string, options?: NavigateOptions): Promise<void> =>
+    observeNavigation(to, () => navigateTo(to, options));
+  const navigateTo = async (to: string, options?: NavigateOptions): Promise<void> => {
     if (!isBrowser()) {
       return;
     }
@@ -967,11 +1012,13 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
     try {
       // The route this page already has while it is fresh, then a prefetch
       // still in hand, then the network. See `./navigation-cache.js`.
-      const key = navigationKey(target.pathname, target.search);
+      const from = flightNavigationOrigin(shown.current);
+      const ordinaryKey = navigationKey(target.pathname, target.search);
+      const key = flightNavigationKey(target.pathname, target.search, from);
       const fetched = await (
         flightNavigations.read(key) ??
-        takePrefetched(next) ??
-        keepFlight(key, fetchFlight(next))
+        takePrefetched(next, from) ??
+        keepFlight(key, fetchFlight(next, flightFetchOptions(from)), ordinaryKey)
       );
       // Not a payload: a redirect off this origin, or a host that has no payload
       // for this URL. The browser loads it as a document, which is what the
@@ -989,13 +1036,14 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
       // address the server answers without a redirect.
       const arrived = new URL(fetched.url, window.location.href);
       const landed = canonicalAddress(arrived.pathname) + arrived.search + target.hash;
+      const state = historyStateForRoute(nextRoot.route);
       if (options?.replace === true) {
-        window.history.replaceState(null, "", landed);
+        window.history.replaceState(state, "", landed);
       } else {
-        window.history.pushState(null, "", landed);
+        window.history.pushState(state, "", landed);
       }
       const commit = () => {
-        setCurrent(payload);
+        show(payload, nextRoot);
         setPending(false);
       };
       if (options?.transition === false) {
@@ -1003,7 +1051,9 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
       } else {
         withViewTransition(nextRoot.route.viewTransition, commit);
       }
-      if (options?.scroll !== false) {
+      const scroll =
+        nextRoot.route.interception == null ? options?.scroll !== false : options?.scroll === true;
+      if (scroll) {
         if (target.hash !== "") {
           const element = document.getElementById(target.hash.slice(1));
           if (element != null) {
@@ -1023,6 +1073,13 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
     if (!isBrowser()) {
       return undefined;
     }
+    // A document reload rendered the URL's ordinary page. If the browser kept
+    // an intercepted history marker for it, clear that marker before a later
+    // back/forward asks for a modal over a page this document did not show.
+    const restored = window.history.state;
+    if (interceptedFrom(restored) != null) {
+      window.history.replaceState(withoutInterception(restored), "", window.location.href);
+    }
     // No history entry was pushed, so there is nothing to pop back into; see
     // `ModuleRouter`.
     if (navigation === "document") {
@@ -1033,8 +1090,13 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
       // The history entry already moved; a payload that cannot be had for it is
       // a document to load, and a reload is the browser's way to load it. While
       // this page keeps the route fresh, what it kept is what comes back.
-      const key = navigationKey(window.location.pathname, window.location.search);
-      (flightNavigations.read(key) ?? keepFlight(key, fetchFlight(next))).then(
+      const from = interceptedFrom(window.history.state);
+      const ordinaryKey = navigationKey(window.location.pathname, window.location.search);
+      const key = flightNavigationKey(window.location.pathname, window.location.search, from);
+      (
+        flightNavigations.read(key) ??
+        keepFlight(key, fetchFlight(next, flightFetchOptions(from)), ordinaryKey)
+      ).then(
         (fetched) => {
           if (fetched.kind === "document") {
             window.location.reload();
@@ -1044,7 +1106,7 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
           payload.then(
             (nextRoot) => {
               withViewTransition(nextRoot.route.viewTransition, () => {
-                setCurrent(payload);
+                show(payload, nextRoot);
               });
             },
             () => {
@@ -1077,14 +1139,19 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
         return;
       }
       const next = target.pathname + target.search;
+      const from = flightNavigationOrigin(shown.current);
       // Kept for every navigation to it while it is fresh, when a project set
       // `app.rendering.staleTime`; otherwise held for the one click after it.
       if (keepsNavigations()) {
-        const key = navigationKey(target.pathname, target.search);
-        await (flightNavigations.read(key) ?? keepFlight(key, fetchFlight(next)));
+        const ordinaryKey = navigationKey(target.pathname, target.search);
+        const key = flightNavigationKey(target.pathname, target.search, from);
+        await (
+          flightNavigations.read(key) ??
+          keepFlight(key, fetchFlight(next, flightFetchOptions(from)), ordinaryKey)
+        );
         return;
       }
-      await prefetchFlight(next);
+      await prefetchFlight(next, from);
     },
     refresh: async () => {
       if (!isBrowser()) {
@@ -1097,20 +1164,23 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
       // Everything a navigation kept is older than what this asks for, so none
       // of it is shown again; see `./navigation-cache.js`.
       clearNavigationCache();
+      const from = root.route.interception?.from ?? null;
+      const ordinaryKey = navigationKey(window.location.pathname, window.location.search);
       const fetched = await keepFlight(
-        navigationKey(window.location.pathname, window.location.search),
-        fetchFlight(window.location.pathname + window.location.search),
+        flightNavigationKey(window.location.pathname, window.location.search, from),
+        fetchFlight(window.location.pathname + window.location.search, flightFetchOptions(from)),
+        ordinaryKey,
       );
       if (fetched.kind === "document") {
         window.location.reload();
         return;
       }
       const payload = fetched.root;
-      await payload;
+      const nextRoot = await payload;
       // No view transition: a refresh is the same URL rendered again. See
       // `ModuleRouter`'s refresh.
       startTransition(() => {
-        setCurrent(payload);
+        show(payload, nextRoot);
       });
     },
     back: () => {
@@ -1157,13 +1227,20 @@ const prefetchedFlights: Map<
  * request that failed, an answer that was a document rather than a payload, or
  * a payload React could not read.
  */
-function keepFlight(key: string, fetched: Promise<FetchedFlight>): Promise<FetchedFlight> {
+function keepFlight(
+  key: string,
+  fetched: Promise<FetchedFlight>,
+  ordinaryKey?: string,
+): Promise<FetchedFlight> {
   if (!keepsNavigations()) {
     return fetched;
   }
   flightNavigations.store(key, fetched);
   const forget = () => {
     flightNavigations.forget(key, fetched);
+    if (ordinaryKey != null) {
+      flightNavigations.forget(ordinaryKey, fetched);
+    }
   };
   void fetched.then((answer) => {
     if (answer.kind === "document") {
@@ -1175,6 +1252,10 @@ function keepFlight(key: string, fetched: Promise<FetchedFlight>): Promise<Fetch
     void answer.root.then((root) => {
       if (root.route.status !== 200) {
         forget();
+        return;
+      }
+      if (ordinaryKey != null && root.route.interception == null) {
+        flightNavigations.store(ordinaryKey, fetched);
       }
     }, forget);
   }, forget);
@@ -1202,8 +1283,13 @@ function keepRoute(key: string, resolved: Promise<ResolvedRoute>): Promise<Resol
   return resolved;
 }
 
-function prefetchFlight(url: string): Promise<FetchedFlight> {
-  const existing = prefetchedFlights.get(url);
+function prefetchedFlightKey(url: string, from: ?string): string {
+  return from == null ? url : `${url}\0${from}`;
+}
+
+function prefetchFlight(url: string, from: ?string): Promise<FetchedFlight> {
+  const key = prefetchedFlightKey(url, from);
+  const existing = prefetchedFlights.get(key);
   if (existing != null && Date.now() - existing.at < PREFETCH_LIFETIME_MS) {
     return existing.fetched;
   }
@@ -1213,17 +1299,18 @@ function prefetchFlight(url: string): Promise<FetchedFlight> {
       prefetchedFlights.delete(oldest.value);
     }
   }
-  const fetched = fetchFlight(url);
-  prefetchedFlights.set(url, { fetched, at: Date.now() });
+  const fetched = fetchFlight(url, flightFetchOptions(from));
+  prefetchedFlights.set(key, { fetched, at: Date.now() });
   fetched.catch(() => {
-    prefetchedFlights.delete(url);
+    prefetchedFlights.delete(key);
   });
   return fetched;
 }
 
-function takePrefetched(url: string): Promise<FetchedFlight> | null {
-  const entry = prefetchedFlights.get(url);
-  prefetchedFlights.delete(url);
+function takePrefetched(url: string, from: ?string): Promise<FetchedFlight> | null {
+  const key = prefetchedFlightKey(url, from);
+  const entry = prefetchedFlights.get(key);
+  prefetchedFlights.delete(key);
   if (entry == null || Date.now() - entry.at >= PREFETCH_LIFETIME_MS) {
     return null;
   }
@@ -1639,6 +1726,13 @@ export hook useSeo(seo: Metadata): React.Node {
 /** When a `Link` loads the route it points at. */
 export type LinkPrefetch = "off" | "intent" | "render";
 
+const LinkStatusContext: React.Context<boolean> = createContext(false);
+
+/** Whether the containing Link is waiting for the navigation it started. */
+export hook useLinkStatus(): {| readonly pending: boolean |} {
+  return { pending: useContext(LinkStatusContext) };
+}
+
 /**
  * A client-side navigation.
  *
@@ -1675,7 +1769,8 @@ export component Link(
   ...rest: { readonly [string]: mixed }
 ) {
   const { router, navigation } = useRouterState();
-  const prefetched = React.useRef(false);
+  const [linkPending, startLinkTransition] = useTransition();
+  const prefetched = useRef(false);
   const drives = navigation === "client";
 
   const doPrefetch = () => {
@@ -1703,15 +1798,21 @@ export component Link(
       event.ctrlKey ||
       event.shiftKey ||
       event.altKey ||
+      (rest.target != null && rest.target !== "_self") ||
+      rest.download != null ||
       isExternal(to)
     ) {
       return;
     }
     event.preventDefault();
-    router.push(to, { replace, transition }).catch((error) => {
-      // A failed navigation falls back to the browser doing it.
-      console.error(error);
-      window.location.assign(addressOf(to));
+    startLinkTransition(async () => {
+      try {
+        await router.push(to, { replace, transition });
+      } catch (error) {
+        // A failed navigation falls back to the browser doing it.
+        console.error(error);
+        window.location.assign(addressOf(to));
+      }
     });
   };
 
@@ -1727,11 +1828,13 @@ export component Link(
       // works before hydration and for a right click goes where this one does.
       href={addressOf(to)}
       className={className}
+      aria-busy={linkPending || undefined}
+      data-pending={linkPending ? "" : undefined}
       onClick={drives ? handleClick : onClick}
       onMouseEnter={drives && prefetch === "intent" ? doPrefetch : undefined}
       onFocus={drives && prefetch === "intent" ? doPrefetch : undefined}
     >
-      {children}
+      <LinkStatusContext value={linkPending}>{children}</LinkStatusContext>
     </a>
   );
 }

package/internal/server-instrumentation.js

@@ -0,0 +1,12 @@
+// @flow
+
+import { traceRequestPhase } from "@uniflowed/server/instrumentation";
+import { NotFoundError, RedirectError } from "./routing.js";
+
+export function traceLoader(body: () => mixed | Promise<mixed>): Promise<mixed> {
+  return traceRequestPhase(
+    "loader",
+    async () => body(),
+    (error) => error instanceof RedirectError || error instanceof NotFoundError,
+  );
+}

package/internal/stream.js

@@ -906,6 +906,11 @@ function withPayload(
  * from chunk to chunk, and otherwise waits for the HTML that finishes what is
  * open.
  *
+ * **Outside replaceable boundaries.** Even between tags, a payload inside a
+ * Suspense fallback disappears when React reveals its content. A browser that
+ * loads the Flight reader afterwards then sees an incomplete stream. React's
+ * boundary comments keep those ranges closed to injection until their end.
+ *
  * **`</body></html>` waits for the end of the payload.** The HTML can finish
  * first — the last boundary's markup is rendered from rows that are already
  * written — and a payload element after `</html>` is one the parser moves
@@ -1020,11 +1025,13 @@ type Boundary = {|
   readonly safe: boolean,
   /** The `script` or `style` element the HTML is inside, if it is inside one. */
   readonly rawText: string | null,
+  /** Suspense/Activity ranges React can replace before hydration starts. */
+  readonly replaceable: number,
   /** A tag, or a comment, the HTML has started and not yet finished. */
   readonly open: string,
 |};
 
-const NOTHING_WRITTEN: Boundary = { safe: false, rawText: null, open: "" };
+const NOTHING_WRITTEN: Boundary = { safe: false, rawText: null, replaceable: 0, open: "" };
 
 /**
  * `boundary`, once `html` has been written after it.
@@ -1041,23 +1048,31 @@ const NOTHING_WRITTEN: Boundary = { safe: false, rawText: null, open: "" };
 function advanced(boundary: Boundary, html: string): Boundary {
   const text = boundary.open + html;
   let rawText = boundary.rawText;
-  const tags = /<(\/?)(script|style)(?=[\s/>])[^>]*>/gi;
+  let replaceable = boundary.replaceable;
+  const tags = /<!--([\s\S]*?)-->|<(\/?)(script|style)(?=[\s/>])[^>]*>/gi;
   let tag = tags.exec(text);
   while (tag != null) {
-    const name = tag[2].toLowerCase();
-    if (tag[1] === "/") {
-      if (rawText === name) {
-        rawText = null;
+    const comment = tag[1];
+    if (comment != null) {
+      if (rawText == null) {
+        if (/^[\$&][?!~]?$/.test(comment)) replaceable += 1;
+        else if (comment === "/$" || comment === "/&") replaceable = Math.max(0, replaceable - 1);
+      }
+    } else {
+      const name = tag[3].toLowerCase();
+      if (tag[2] === "/") {
+        if (rawText === name) rawText = null;
+      } else if (rawText == null) {
+        rawText = name;
       }
-    } else if (rawText == null) {
-      rawText = name;
     }
     tag = tags.exec(text);
   }
   const start = text.lastIndexOf("<");
   return {
-    safe: rawText == null && text.endsWith(">"),
+    safe: rawText == null && replaceable === 0 && text.endsWith(">"),
     rawText,
+    replaceable,
     open: start > text.lastIndexOf(">") ? text.slice(start) : "",
   };
 }