react-router 0.0.0-experimental-e613d4238 → 0.0.0-experimental-4e44d47

package/dist/development/{chunk-5P3HEZQU.mjs → chunk-XVVWTPHF.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v0.0.0-experimental-e613d4238
+ * react-router v0.0.0-experimental-4e44d47
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -454,19 +454,23 @@ function convertRoutesToDataRoutes(routes, mapRouteProperties2, parentPath = [],
     if (isIndexRoute(route)) {
       let indexRoute = {
         ...route,
-        ...mapRouteProperties2(route),
         id
       };
-      manifest[id] = indexRoute;
+      manifest[id] = mergeRouteUpdates(
+        indexRoute,
+        mapRouteProperties2(indexRoute)
+      );
       return indexRoute;
     } else {
       let pathOrLayoutRoute = {
         ...route,
-        ...mapRouteProperties2(route),
         id,
         children: void 0
       };
-      manifest[id] = pathOrLayoutRoute;
+      manifest[id] = mergeRouteUpdates(
+        pathOrLayoutRoute,
+        mapRouteProperties2(pathOrLayoutRoute)
+      );
       if (route.children) {
         pathOrLayoutRoute.children = convertRoutesToDataRoutes(
           route.children,
@@ -480,6 +484,17 @@ function convertRoutesToDataRoutes(routes, mapRouteProperties2, parentPath = [],
     }
   });
 }
+function mergeRouteUpdates(route, updates) {
+  return Object.assign(route, {
+    ...updates,
+    ...typeof updates.lazy === "object" && updates.lazy != null ? {
+      lazy: {
+        ...route.lazy,
+        ...updates.lazy
+      }
+    } : {}
+  });
+}
 function matchRoutes(routes, locationArg, basename = "/") {
   return matchRoutesImpl(routes, locationArg, basename, false);
 }
@@ -935,6 +950,229 @@ var ErrorResponseImpl = class {
 function isRouteErrorResponse(error) {
   return error != null && typeof error.status === "number" && typeof error.statusText === "string" && typeof error.internal === "boolean" && "data" in error;
 }
+function getRoutePattern(paths) {
+  return paths.filter(Boolean).join("/").replace(/\/\/*/g, "/");
+}
+
+// lib/router/instrumentation.ts
+var UninstrumentedSymbol = Symbol("Uninstrumented");
+function getInstrumentedImplementation(impls, handler, getInfo = () => void 0) {
+  if (impls.length === 0) {
+    return null;
+  }
+  return async (...args) => {
+    let value;
+    let info = getInfo(...args);
+    await recurseRight(
+      impls,
+      info,
+      async () => {
+        value = await handler(...args);
+      },
+      impls.length - 1
+    );
+    return value;
+  };
+}
+async function recurseRight(impls, info, handler, index) {
+  let impl = impls[index];
+  if (!impl) {
+    await handler();
+  } else {
+    await impl(async () => {
+      await recurseRight(impls, info, handler, index - 1);
+    }, info);
+  }
+}
+function getInstrumentationInfo(args) {
+  let { request, context, params, pattern } = args;
+  return {
+    // pseudo "Request" with the info they may want to read from
+    request: {
+      method: request.method,
+      url: request.url,
+      // Maybe make this a proxy that only supports `get`?
+      headers: {
+        get: (...args2) => request.headers.get(...args2)
+      }
+    },
+    params: { ...params },
+    pattern,
+    context: {
+      get: (...args2) => context.get(...args2)
+    }
+  };
+}
+function getInstrumentationsByType(instrumentations, key) {
+  let value = [];
+  for (let i in instrumentations) {
+    let instrumentation = instrumentations[i];
+    if (key in instrumentation && instrumentation[key] != null) {
+      value.push(instrumentation[key]);
+    }
+  }
+  return value;
+}
+function getInstrumentationUpdates(fns, route) {
+  let instrumentations = [];
+  fns.forEach(
+    (fn) => fn({
+      id: route.id,
+      index: route.index,
+      path: route.path,
+      instrument(i) {
+        instrumentations.push(i);
+      }
+    })
+  );
+  let updates = {};
+  if (instrumentations.length > 0) {
+    ["lazy", "loader", "action"].forEach((key) => {
+      let func = route[key];
+      if (typeof func === "function") {
+        let original = func[UninstrumentedSymbol] ?? func;
+        let instrumented = getInstrumentedImplementation(
+          getInstrumentationsByType(instrumentations, key),
+          original,
+          key === "lazy" ? () => void 0 : (...args) => getInstrumentationInfo(
+            args[0]
+          )
+        );
+        if (instrumented) {
+          instrumented[UninstrumentedSymbol] = original;
+          updates[key] = instrumented;
+        }
+      }
+    });
+    if (route.middleware && route.middleware.length > 0) {
+      updates.middleware = route.middleware.map((middleware) => {
+        let original = middleware[UninstrumentedSymbol] ?? middleware;
+        let instrumented = getInstrumentedImplementation(
+          getInstrumentationsByType(instrumentations, "middleware"),
+          original,
+          (...args) => getInstrumentationInfo(
+            args[0]
+          )
+        );
+        if (instrumented) {
+          instrumented[UninstrumentedSymbol] = original;
+          return instrumented;
+        }
+        return middleware;
+      });
+    }
+    if (typeof route.lazy === "object") {
+      let lazyObject = route.lazy;
+      ["middleware", "loader", "action"].forEach((key) => {
+        let func = lazyObject[key];
+        if (typeof func === "function") {
+          let instrumented = getInstrumentedImplementation(
+            getInstrumentationsByType(instrumentations, `lazy.${key}`),
+            func
+          );
+          if (instrumented) {
+            updates.lazy = Object.assign(updates.lazy || {}, {
+              [key]: instrumented
+            });
+          }
+        }
+      });
+    }
+  }
+  return updates;
+}
+function instrumentClientSideRouter(router, fns) {
+  let instrumentations = [];
+  fns.forEach(
+    (fn) => fn({
+      instrument(i) {
+        instrumentations.push(i);
+      }
+    })
+  );
+  if (instrumentations.length > 0) {
+    let navigate = router.navigate[UninstrumentedSymbol] ?? router.navigate;
+    let instrumentedNavigate = getInstrumentedImplementation(
+      getInstrumentationsByType(instrumentations, "navigate"),
+      navigate,
+      (...args) => {
+        let [to, opts] = args;
+        opts = opts ?? {};
+        let info = {
+          to: typeof to === "number" || typeof to === "string" ? to : to ? createPath(to) : ".",
+          currentUrl: createPath(router.state.location),
+          ..."formMethod" in opts ? { formMethod: opts.formMethod } : {},
+          ..."formEncType" in opts ? { formEncType: opts.formEncType } : {},
+          ..."formData" in opts ? { formData: opts.formData } : {},
+          ..."body" in opts ? { body: opts.body } : {}
+        };
+        return info;
+      }
+    );
+    if (instrumentedNavigate) {
+      instrumentedNavigate[UninstrumentedSymbol] = navigate;
+      router.navigate = instrumentedNavigate;
+    }
+    let fetch2 = router.fetch[UninstrumentedSymbol] ?? router.fetch;
+    let instrumentedFetch = getInstrumentedImplementation(
+      getInstrumentationsByType(instrumentations, "fetch"),
+      fetch2,
+      (...args) => {
+        let [key, , href, opts] = args;
+        opts = opts ?? {};
+        let info = {
+          href: href ?? ".",
+          currentUrl: createPath(router.state.location),
+          fetcherKey: key,
+          ..."formMethod" in opts ? { formMethod: opts.formMethod } : {},
+          ..."formEncType" in opts ? { formEncType: opts.formEncType } : {},
+          ..."formData" in opts ? { formData: opts.formData } : {},
+          ..."body" in opts ? { body: opts.body } : {}
+        };
+        return info;
+      }
+    );
+    if (instrumentedFetch) {
+      instrumentedFetch[UninstrumentedSymbol] = fetch2;
+      router.fetch = instrumentedFetch;
+    }
+  }
+  return router;
+}
+function instrumentHandler(handler, fns) {
+  let instrumentations = [];
+  fns.forEach(
+    (fn) => fn({
+      instrument(i) {
+        instrumentations.push(i);
+      }
+    })
+  );
+  if (instrumentations.length === 0) {
+    return handler;
+  }
+  let instrumentedHandler = getInstrumentedImplementation(
+    getInstrumentationsByType(instrumentations, "request"),
+    handler,
+    (...args) => {
+      let [request, context] = args;
+      let info = {
+        request: {
+          method: request.method,
+          url: request.url,
+          headers: {
+            get: (...args2) => request.headers.get(...args2)
+          }
+        },
+        context: {
+          get: (ctx) => context ? context.get(ctx) : void 0
+        }
+      };
+      return info;
+    }
+  );
+  return instrumentedHandler ?? handler;
+}
 
 // lib/router/router.ts
 var validMutationMethodsArr = [
@@ -994,7 +1232,20 @@ function createRouter(init) {
     "You must provide a non-empty routes array to createRouter"
   );
   let hydrationRouteProperties2 = init.hydrationRouteProperties || [];
-  let mapRouteProperties2 = init.mapRouteProperties || defaultMapRouteProperties;
+  let _mapRouteProperties = init.mapRouteProperties || defaultMapRouteProperties;
+  let mapRouteProperties2 = _mapRouteProperties;
+  if (init.unstable_instrumentations) {
+    let instrumentations = init.unstable_instrumentations;
+    mapRouteProperties2 = (route) => {
+      return {
+        ..._mapRouteProperties(route),
+        ...getInstrumentationUpdates(
+          instrumentations.map((i) => i.route).filter(Boolean),
+          route
+        )
+      };
+    };
+  }
   let manifest = {};
   let dataRoutes = convertRoutesToDataRoutes(
     init.routes,
@@ -2746,6 +2997,12 @@ function createRouter(init) {
       updateState(newState);
     }
   };
+  if (init.unstable_instrumentations) {
+    router = instrumentClientSideRouter(
+      router,
+      init.unstable_instrumentations.map((i) => i.router).filter(Boolean)
+    );
+  }
   return router;
 }
 function createStaticHandler(routes, opts) {
@@ -2755,7 +3012,20 @@ function createStaticHandler(routes, opts) {
   );
   let manifest = {};
   let basename = (opts ? opts.basename : null) || "/";
-  let mapRouteProperties2 = opts?.mapRouteProperties || defaultMapRouteProperties;
+  let _mapRouteProperties = opts?.mapRouteProperties || defaultMapRouteProperties;
+  let mapRouteProperties2 = _mapRouteProperties;
+  if (opts?.unstable_instrumentations) {
+    let instrumentations = opts.unstable_instrumentations;
+    mapRouteProperties2 = (route) => {
+      return {
+        ..._mapRouteProperties(route),
+        ...getInstrumentationUpdates(
+          instrumentations.map((i) => i.route).filter(Boolean),
+          route
+        )
+      };
+    };
+  }
   let dataRoutes = convertRoutesToDataRoutes(
     routes,
     mapRouteProperties2,
@@ -2825,6 +3095,7 @@ function createStaticHandler(routes, opts) {
         let response = await runServerMiddlewarePipeline(
           {
             request,
+            pattern: getRoutePattern(matches.map((m) => m.route.path)),
             matches,
             params: matches[0].params,
             // If we're calling middleware then it must be enabled so we can cast
@@ -2970,6 +3241,7 @@ function createStaticHandler(routes, opts) {
       let response = await runServerMiddlewarePipeline(
         {
           request,
+          pattern: getRoutePattern(matches.map((m) => m.route.path)),
           matches,
           params: matches[0].params,
           // If we're calling middleware then it must be enabled so we can cast
@@ -3251,6 +3523,7 @@ function createStaticHandler(routes, opts) {
             mapRouteProperties2,
             manifest,
             request,
+            getRoutePattern(matches.map((m) => m.route.path)),
             match,
             [],
             requestContext,
@@ -3261,6 +3534,7 @@ function createStaticHandler(routes, opts) {
           mapRouteProperties2,
           manifest,
           request,
+          getRoutePattern(matches.map((m) => m.route.path)),
           match,
           [],
           requestContext,
@@ -3564,6 +3838,7 @@ function getMatchesToLoad(request, scopedContext, mapRouteProperties2, manifest,
         mapRouteProperties2,
         manifest,
         request,
+        getRoutePattern(matches.map((m) => m.route.path)),
         match,
         lazyRoutePropertiesToSkip,
         scopedContext,
@@ -3584,6 +3859,7 @@ function getMatchesToLoad(request, scopedContext, mapRouteProperties2, manifest,
       mapRouteProperties2,
       manifest,
       request,
+      getRoutePattern(matches.map((m) => m.route.path)),
       match,
       lazyRoutePropertiesToSkip,
       scopedContext,
@@ -4042,7 +4318,12 @@ async function runMiddlewarePipeline(args, handler, processResult, isResult, err
     (m) => m.route.middleware ? m.route.middleware.map((fn) => [m.route.id, fn]) : []
   );
   let result = await callRouteMiddleware(
-    { request, params, context },
+    {
+      request,
+      params,
+      context,
+      pattern: getRoutePattern(matches.map((m) => m.route.path))
+    },
     tuples,
     handler,
     processResult,
@@ -4120,7 +4401,7 @@ function getDataStrategyMatchLazyPromises(mapRouteProperties2, manifest, request
     handler: lazyRoutePromises.lazyHandlerPromise
   };
 }
-function getDataStrategyMatch(mapRouteProperties2, manifest, request, match, lazyRoutePropertiesToSkip, scopedContext, shouldLoad, unstable_shouldRevalidateArgs = null) {
+function getDataStrategyMatch(mapRouteProperties2, manifest, request, pattern, match, lazyRoutePropertiesToSkip, scopedContext, shouldLoad, unstable_shouldRevalidateArgs = null) {
   let isUsingNewApi = false;
   let _lazyPromises = getDataStrategyMatchLazyPromises(
     mapRouteProperties2,
@@ -4154,6 +4435,7 @@ function getDataStrategyMatch(mapRouteProperties2, manifest, request, match, laz
       if (callHandler && !isMiddlewareOnlyRoute) {
         return callLoaderOrAction({
           request,
+          pattern,
           match,
           lazyHandlerPromise: _lazyPromises?.handler,
           lazyRoutePromise: _lazyPromises?.route,
@@ -4187,6 +4469,7 @@ function getTargetedDataStrategyMatches(mapRouteProperties2, manifest, request,
       mapRouteProperties2,
       manifest,
       request,
+      getRoutePattern(matches.map((m) => m.route.path)),
       match,
       lazyRoutePropertiesToSkip,
       scopedContext,
@@ -4201,6 +4484,7 @@ async function callDataStrategyImpl(dataStrategyImpl, request, matches, fetcherK
   }
   let dataStrategyArgs = {
     request,
+    pattern: getRoutePattern(matches.map((m) => m.route.path)),
     params: matches[0].params,
     context: scopedContext,
     matches
@@ -4241,6 +4525,7 @@ async function callDataStrategyImpl(dataStrategyImpl, request, matches, fetcherK
 }
 async function callLoaderOrAction({
   request,
+  pattern,
   match,
   lazyHandlerPromise,
   lazyRoutePromise,
@@ -4267,6 +4552,7 @@ async function callLoaderOrAction({
       return handler(
         {
           request,
+          pattern,
           params: match.params,
           context: scopedContext
         },
@@ -5552,15 +5838,6 @@ function warningOnce(key, cond, message) {
     warning(false, message);
   }
 }
-function useRoute(routeId) {
-  const state = useDataRouterState("useRouteLoaderData" /* UseRouteLoaderData */);
-  const route = state.matches.find(({ route: route2 }) => route2.id === routeId);
-  if (route === void 0) return void 0;
-  return {
-    loaderData: state.loaderData[routeId],
-    actionData: state.actionData?.[routeId]
-  };
-}
 
 // lib/components.tsx
 import * as React3 from "react";
@@ -5643,7 +5920,8 @@ function createMemoryRouter(routes, opts) {
     hydrationRouteProperties,
     mapRouteProperties,
     dataStrategy: opts?.dataStrategy,
-    patchRoutesOnNavigation: opts?.patchRoutesOnNavigation
+    patchRoutesOnNavigation: opts?.patchRoutesOnNavigation,
+    unstable_instrumentations: opts?.unstable_instrumentations
   }).initialize();
 }
 var Deferred = class {
@@ -8058,7 +8336,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
       let hasInitialError = initialState && initialState.errors && route.id in initialState.errors;
       let initialError = hasInitialError ? initialState?.errors?.[route.id] : void 0;
       let isHydrationRequest = needsRevalidation == null && (routeModule.clientLoader?.hydrate === true || !route.hasLoader);
-      dataRoute.loader = async ({ request, params, context }, singleFetch) => {
+      dataRoute.loader = async ({ request, params, context, pattern }, singleFetch) => {
         try {
           let result = await prefetchStylesAndCallHandler(async () => {
             invariant2(
@@ -8072,6 +8350,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
               request,
               params,
               context,
+              pattern,
               async serverLoader() {
                 preventInvalidServerHandlerCall("loader", route);
                 if (isHydrationRequest) {
@@ -8097,7 +8376,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
         route.hasLoader,
         isSpaMode
       );
-      dataRoute.action = ({ request, params, context }, singleFetch) => {
+      dataRoute.action = ({ request, params, context, pattern }, singleFetch) => {
         return prefetchStylesAndCallHandler(async () => {
           invariant2(
             routeModule,
@@ -8113,6 +8392,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
             request,
             params,
             context,
+            pattern,
             async serverAction() {
               preventInvalidServerHandlerCall("action", route);
               return fetchServerAction(singleFetch);
@@ -9122,7 +9402,7 @@ var isBrowser = typeof window !== "undefined" && typeof window.document !== "und
 try {
   if (isBrowser) {
     window.__reactRouterVersion = // @ts-expect-error
-    "0.0.0-experimental-e613d4238";
+    "0.0.0-experimental-4e44d47";
   }
 } catch (e) {
 }
@@ -9138,7 +9418,8 @@ function createBrowserRouter(routes, opts) {
     hydrationRouteProperties,
     dataStrategy: opts?.dataStrategy,
     patchRoutesOnNavigation: opts?.patchRoutesOnNavigation,
-    window: opts?.window
+    window: opts?.window,
+    unstable_instrumentations: opts?.unstable_instrumentations
   }).initialize();
 }
 function createHashRouter(routes, opts) {
@@ -9153,7 +9434,8 @@ function createHashRouter(routes, opts) {
     hydrationRouteProperties,
     dataStrategy: opts?.dataStrategy,
     patchRoutesOnNavigation: opts?.patchRoutesOnNavigation,
-    window: opts?.window
+    window: opts?.window,
+    unstable_instrumentations: opts?.unstable_instrumentations
   }).initialize();
 }
 function parseHydrationData() {
@@ -10238,6 +10520,7 @@ export {
   replace,
   ErrorResponseImpl,
   isRouteErrorResponse,
+  instrumentHandler,
   IDLE_NAVIGATION,
   IDLE_FETCHER,
   IDLE_BLOCKER,
@@ -10280,7 +10563,6 @@ export {
   useAsyncValue,
   useAsyncError,
   useBlocker,
-  useRoute,
   warnOnce,
   mapRouteProperties,
   hydrationRouteProperties,

package/dist/development/dom-export.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { R as RouterProviderProps$1, a as RouterInit, u as unstable_ClientOnErrorFunction } from './context-BqL5Eckq.mjs';
+import { R as RouterProviderProps$1, a as RouterInit, u as unstable_ClientInstrumentation, b as unstable_ClientOnErrorFunction } from './router-2BoB34m1.mjs';
 import './browser-z32v5KVN.mjs';
 
 type RouterProviderProps = Omit<RouterProviderProps$1, "flushSync">;
@@ -12,12 +12,67 @@ declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">):
  */
 interface HydratedRouterProps {
     /**
-     * Context object to be passed through to {@link createBrowserRouter} and made
-     * available to
+     * Context factory function to be passed through to {@link createBrowserRouter}.
+     * This function will be called to create a fresh `context` instance on each
+     * navigation/fetch and made available to
      * [`clientAction`](../../start/framework/route-module#clientAction)/[`clientLoader`](../../start/framework/route-module#clientLoader)
-     * functions
+     * functions.
      */
     getContext?: RouterInit["getContext"];
+    /**
+     * Array of instrumentation objects allowing you to instrument the router and
+     * individual routes prior to router initialization (and on any subsequently
+     * added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
+     * mostly useful for observability such as wrapping navigations, fetches,
+     * as well as route loaders/actions/middlewares with logging and/or performance
+     * tracing.
+     *
+     * ```tsx
+     * startTransition(() => {
+     *   hydrateRoot(
+     *     document,
+     *     <HydratedRouter unstable_instrumentations={[logging]} />
+     *   );
+     * });
+     *
+     * const logging = {
+     *   router({ instrument }) {
+     *     instrument({
+     *       navigate: (impl, { to }) => logExecution(`navigate ${to}`, impl),
+     *       fetch: (impl, { to }) => logExecution(`fetch ${to}`, impl)
+     *     });
+     *   },
+     *   route({ instrument, id }) {
+     *     instrument({
+     *       middleware: (impl, { request }) => logExecution(
+     *         `middleware ${request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *       loader: (impl, { request }) => logExecution(
+     *         `loader ${request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *       action: (impl, { request }) => logExecution(
+     *         `action ${request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *     })
+     *   }
+     * };
+     *
+     * async function logExecution(label: string, impl: () => Promise<void>) {
+     *   let start = performance.now();
+     *   console.log(`start ${label}`);
+     *   try {
+     *     await impl();
+     *   } finally {
+     *     let end = performance.now();
+     *     console.log(`end ${label} (${Math.round(end - start)}ms)`);
+     *   }
+     * }
+     * ```
+     */
+    unstable_instrumentations?: unstable_ClientInstrumentation[];
     /**
      * An error handler function that will be called for any loader/action/render
      * errors that are encountered in your application.  This is useful for

package/dist/development/dom-export.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { RouterProviderProps as RouterProviderProps$1, RouterInit, unstable_ClientOnErrorFunction } from 'react-router';
+import { u as unstable_ClientInstrumentation } from './instrumentation-XYmrzhe3.js';
 
 type RouterProviderProps = Omit<RouterProviderProps$1, "flushSync">;
 declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">): React.JSX.Element;
@@ -11,12 +12,67 @@ declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">):
  */
 interface HydratedRouterProps {
     /**
-     * Context object to be passed through to {@link createBrowserRouter} and made
-     * available to
+     * Context factory function to be passed through to {@link createBrowserRouter}.
+     * This function will be called to create a fresh `context` instance on each
+     * navigation/fetch and made available to
      * [`clientAction`](../../start/framework/route-module#clientAction)/[`clientLoader`](../../start/framework/route-module#clientLoader)
-     * functions
+     * functions.
      */
     getContext?: RouterInit["getContext"];
+    /**
+     * Array of instrumentation objects allowing you to instrument the router and
+     * individual routes prior to router initialization (and on any subsequently
+     * added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
+     * mostly useful for observability such as wrapping navigations, fetches,
+     * as well as route loaders/actions/middlewares with logging and/or performance
+     * tracing.
+     *
+     * ```tsx
+     * startTransition(() => {
+     *   hydrateRoot(
+     *     document,
+     *     <HydratedRouter unstable_instrumentations={[logging]} />
+     *   );
+     * });
+     *
+     * const logging = {
+     *   router({ instrument }) {
+     *     instrument({
+     *       navigate: (impl, { to }) => logExecution(`navigate ${to}`, impl),
+     *       fetch: (impl, { to }) => logExecution(`fetch ${to}`, impl)
+     *     });
+     *   },
+     *   route({ instrument, id }) {
+     *     instrument({
+     *       middleware: (impl, { request }) => logExecution(
+     *         `middleware ${request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *       loader: (impl, { request }) => logExecution(
+     *         `loader ${request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *       action: (impl, { request }) => logExecution(
+     *         `action ${request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *     })
+     *   }
+     * };
+     *
+     * async function logExecution(label: string, impl: () => Promise<void>) {
+     *   let start = performance.now();
+     *   console.log(`start ${label}`);
+     *   try {
+     *     await impl();
+     *   } finally {
+     *     let end = performance.now();
+     *     console.log(`end ${label} (${Math.round(end - start)}ms)`);
+     *   }
+     * }
+     * ```
+     */
+    unstable_instrumentations?: unstable_ClientInstrumentation[];
     /**
      * An error handler function that will be called for any loader/action/render
      * errors that are encountered in your application.  This is useful for