@jsenv/navi 0.29.223 → 0.29.225

package/dist/dev/jsenv_navi.js

@@ -1632,18 +1632,6 @@ const reportErrorIfNobodyDisplaysIt = (error, { action } = {}) => {
   });
 };
 
-const actionPrivatePropertiesWeakMap = new WeakMap();
-const getActionPrivateProperties = (action) => {
-  const actionPrivateProperties = actionPrivatePropertiesWeakMap.get(action);
-  if (!actionPrivateProperties) {
-    throw new Error(`Cannot find action private properties for "${action}"`);
-  }
-  return actionPrivateProperties;
-};
-const setActionPrivateProperties = (action, properties) => {
-  actionPrivatePropertiesWeakMap.set(action, properties);
-};
-
 const IDLE = { id: "idle" };
 const RUNNING = { id: "running" };
 const ABORTED = { id: "aborted" };
@@ -1791,19 +1779,7 @@ const ActionRenderer = ({
   if (aborted) {
     return renderAborted(action);
   }
-  let renderCompletedSafe;
-  if (renderCompleted) {
-    renderCompletedSafe = renderCompleted;
-  } else {
-    const {
-      ui
-    } = getActionPrivateProperties(action);
-    if (ui.renderCompleted) {
-      renderCompletedSafe = ui.renderCompleted;
-    } else {
-      renderCompletedSafe = renderCompletedDefault;
-    }
-  }
+  const renderCompletedSafe = renderCompleted || renderCompletedDefault;
   if (loading) {
     if (action.canDisplayOldData && data !== undefined) {
       return renderCompletedSafe(data, action);
@@ -2552,6 +2528,18 @@ const weakEffect = (values, callback) => {
   return dispose;
 };
 
+const actionPrivatePropertiesWeakMap = new WeakMap();
+const getActionPrivateProperties = (action) => {
+  const actionPrivateProperties = actionPrivatePropertiesWeakMap.get(action);
+  if (!actionPrivateProperties) {
+    throw new Error(`Cannot find action private properties for "${action}"`);
+  }
+  return actionPrivateProperties;
+};
+const setActionPrivateProperties = (action, properties) => {
+  actionPrivatePropertiesWeakMap.set(action, properties);
+};
+
 const SYMBOL_OBJECT_SIGNAL = Symbol.for("navi_object_signal");
 
 /*
@@ -3264,7 +3252,6 @@ const createAction = (callback, rootOptions = {}) => {
       data = dataDefault,
 
       completed = false,
-      renderLoadedAsync,
       sideEffect = () => {},
       meta = {},
 
@@ -3669,10 +3656,6 @@ const createAction = (callback, rootOptions = {}) => {
     }
 
     {
-      const ui = {
-        renderLoaded: null,
-        renderLoadedAsync,
-      };
       let sideEffectCleanup;
       let completeSideEffectCleanup;
 
@@ -3869,20 +3852,6 @@ const createAction = (callback, rootOptions = {}) => {
           } else {
             runResult = callbackResult;
           }
-          if (ui.renderLoadedAsync && !ui.renderLoaded) {
-            const renderLoadedPromise = ui.renderLoadedAsync(...args).then(
-              (renderLoaded) => {
-                ui.renderLoaded = renderLoaded;
-              },
-              (e) => {
-                if (!rejected) {
-                  rejected = true;
-                  rejectedValue = e;
-                }
-              },
-            );
-            thenableArray.push(renderLoadedPromise);
-          }
           if (thenableArray.length === 0) {
             return onRunEnd();
           }
@@ -3936,7 +3905,6 @@ const createAction = (callback, rootOptions = {}) => {
 
         performRun,
         performReset,
-        ui,
 
         nameSignal: actionNameSignal,
         callSourceSignal: actionCallSourceSignal,
@@ -4211,10 +4179,8 @@ const createActionProxyFromSignal = (
 
       performRun: proxyPrivateMethod("performRun"),
       performReset: proxyPrivateMethod("performReset"),
-      ui: currentActionPrivateProperties.ui,
     };
     onActionTargetChange(() => {
-      proxyPrivateProperties.ui = currentActionPrivateProperties.ui;
       proxyPrivateProperties.childActionWeakSet =
         currentActionPrivateProperties.childActionWeakSet;
     });
@@ -17370,6 +17336,17 @@ const useAsyncData = (promiseOrAction, {
   run,
   onLoad
 } = {}) => {
+  // The request this component owns, as a function: one action per instance,
+  // made on the first render and kept — the function's identity changes on
+  // every render when it is written inline, the action's does not.
+  const ownActionRef = useRef(null);
+  if (typeof promiseOrAction === "function" && !promiseOrAction.isAction) {
+    if (!ownActionRef.current) {
+      ownActionRef.current = createAction(promiseOrAction);
+    }
+    promiseOrAction = ownActionRef.current;
+    run = true;
+  }
   const isAction = Boolean(promiseOrAction && promiseOrAction.isAction);
   if (loading === true) {
     loading = "use";
@@ -17690,6 +17667,13 @@ const LoadingFallback = ({
   useLayoutEffect(() => {
     publishRouteRender();
   });
+  // A suspension nobody here wrote — preact/compat's lazy(), a promise thrown
+  // by hand: the boundary holds the subtree and has nothing to say about it,
+  // so the fallback is not drawn. Said out loud in dev rather than found by
+  // reading this file; an import read through an action never lands here.
+  if (!action) {
+    console.warn(`<Loading> caught a suspension it cannot attribute to an action, so its fallback is not drawn. Read code loaded on demand through an action — a routeAction or useAsyncData(() => import(...)) — see docs/dynamic_import.md.`);
+  }
   if (loadingRef.current.reason !== "loading") {
     return null;
   }
@@ -25014,11 +24998,24 @@ const route = (
     matchesParams: undefined,
     navTo: undefined,
     redirectTo: undefined,
+    preload: undefined,
     subscribeStatus,
     toString: () => {
       return `route "${cleanPattern}"`;
     },
   };
+  // Asks ahead of the arrival for what this route's actions ask without the
+  // address — a page's code, a read without params (see routeAction). An
+  // action keyed by a param waits for the arrival: a prefetch has no address.
+  route.preload = () => {
+    const preloadSet = routePreloadMap.get(route);
+    if (!preloadSet) {
+      return;
+    }
+    for (const preload of preloadSet) {
+      preload();
+    }
+  };
   Object.preventExtensions(route);
 
   // route private props
@@ -25490,6 +25487,34 @@ const paramsTargetCanPlace = (redirectRoute, urlParams) => {
 };
 
 let setupRoutesCalled = false;
+let activeRouteSet = null;
+
+const routePreloadMap = new WeakMap();
+const registerRoutePreload = (route, preload) => {
+  let preloadSet = routePreloadMap.get(route);
+  if (!preloadSet) {
+    preloadSet = new Set();
+    routePreloadMap.set(route, preloadSet);
+  }
+  preloadSet.add(preload);
+};
+/**
+ * Preloads every route the url leads to, a section and the page inside it
+ * alike. What a link does when the pointer or the focus reaches it (see
+ * use_preload_on_intent.js), available to anything else that knows where it
+ * is about to go.
+ */
+const preloadUrl = (url) => {
+  if (!activeRouteSet) {
+    return;
+  }
+  for (const route of activeRouteSet) {
+    const { routePattern } = getRoutePrivateProperties(route);
+    if (routePattern.applyOn(url)) {
+      route.preload();
+    }
+  }
+};
 const setupRoutes = (routes) => {
   if (setupRoutesCalled) {
     throw new Error(
@@ -25501,6 +25526,7 @@ This prevents cross-test pollution and ensures clean state.`,
   setupRoutesCalled = true;
 
   const routeSet = new Set();
+  activeRouteSet = routeSet;
   let currentUrl = null;
   const getUrl = () => currentUrl;
   // PHASE 1: Setup patterns with unified objects (includes all relationships and signal connections)
@@ -25793,6 +25819,7 @@ This prevents cross-test pollution and ensures clean state.`,
     routeSet.clear();
     redirectingRouteSet = null;
     setupRoutesCalled = false;
+    activeRouteSet = null;
   };
   return {
     updateRoutes,
@@ -31189,20 +31216,55 @@ const writeCover = (edge, element, size) => {
   style.setProperty(property, value);
 };
 
+/**
+ * Binds an action to a route: it runs when the route matches, with the params
+ * the effect reads off the address, and is aborted when the route is left.
+ * Its data, its wait and its failure are read by the page through
+ * `useAsyncData`.
+ *
+ * A page's CODE is declared the same way — the import is one more thing the
+ * address asks for, started with the data rather than after it:
+ *
+ * ```js
+ * const GAME_PAGE_CODE = routeAction(GAME_ROUTE, () =>
+ *   import("./game_page.jsx").then((m) => m.GamePage),
+ * );
+ * ```
+ *
+ * @param {object | object[]} routeOrRoutes - the route, or the routes, this
+ *   action belongs to.
+ * @param {object | Function} action - an action, or a function made into one.
+ * @param {() => any} [paramsEffect] - what the action runs with, read off
+ *   signals (the route's params, a search param): re-read when they change.
+ *   Return a falsy value to run nothing. Without it the action asks nothing of
+ *   the address, which is also what makes it worth fetching AHEAD of the
+ *   arrival: a link to the route preruns it when the pointer or the focus
+ *   reaches the link (see docs/dynamic_import.md). An action whose params
+ *   come from the address is never prefetched — a prefetch has no address.
+ * @param {object} [options]
+ * @param {boolean} [options.prefetch=true] - `false` keeps a param-less action
+ *   from being prerun on intent, when the read is not worth a hover.
+ */
 const routeAction = (
   routeOrRoutes,
   action,
-  paramsEffect = () => true,
-  options = {},
+  paramsEffect,
+  { prefetch = true, ...options } = {},
 ) => {
-  const routeMatchingSignal = Array.isArray(routeOrRoutes)
-    ? anyMatchingRouteSignal(routeOrRoutes)
-    : routeOrRoutes.matchingSignal;
+  if (typeof action === "function") {
+    action = createAction(action);
+  }
+  const routes = Array.isArray(routeOrRoutes) ? routeOrRoutes : [routeOrRoutes];
+  const routeMatchingSignal =
+    routes.length === 1
+      ? routes[0].matchingSignal
+      : anyMatchingRouteSignal(routes);
+  const readParams = paramsEffect || (() => true);
   const actionBoundToRoute = actionRunEffect(
     action,
     () => {
       const matching = routeMatchingSignal.value;
-      const params = paramsEffect();
+      const params = readParams();
       if (!matching) {
         return null;
       }
@@ -31210,10 +31272,37 @@ const routeAction = (
     },
     options,
   );
-
+  if (!paramsEffect && prefetch) {
+    for (const route of routes) {
+      registerRoutePreload(route, () => {
+        prefetchParamless(action);
+      });
+    }
+  }
   return actionBoundToRoute;
 };
 
+// The instance the effect above runs on the match is the one bound to `true`
+// (the default params), so a prerun here is what the arrival promotes to a
+// run. A prefetch that fails is forgotten rather than reported: nothing on
+// screen asked for it, and the arrival asks again and shows its own failure.
+const prefetchParamless = (action) => {
+  const instance = action.bindParams(true);
+  const forget = () => {
+    instance.reset({ reason: "prefetch failed" });
+  };
+  let result;
+  try {
+    result = instance.prerun({ reason: "intent" });
+  } catch {
+    forget();
+    return;
+  }
+  if (result && typeof result.catch === "function") {
+    result.catch(forget);
+  }
+};
+
 // I delibrately prefer the term "any" and avoid "some" so dev are not tempted to think
 // "well I could just use array.some" and bypass this helper entirely, which would be incorrect:
 // This helper does return if some/any route is matching but ensure all route matching signals are read (subscribed to)
@@ -41199,6 +41288,34 @@ const Icon = ({
   });
 };
 
+/**
+ * Where a link leads, asked for when the pointer or the focus arrives on it:
+ * the moment the user signals a destination, before the press. Only what the
+ * route's actions ask without the address is fetched (see route.preload), so
+ * a link whose address is not the final one — an id still to be chosen —
+ * loses nothing by asking.
+ */
+const usePreloadOnIntent = (ref, href, prefetch = true) => {
+  useEffect(() => {
+    if (!prefetch || !href) {
+      return undefined;
+    }
+    const element = ref.current;
+    if (!element) {
+      return undefined;
+    }
+    const preload = () => {
+      preloadUrl(href);
+    };
+    element.addEventListener("pointerenter", preload);
+    element.addEventListener("focusin", preload);
+    return () => {
+      element.removeEventListener("pointerenter", preload);
+      element.removeEventListener("focusin", preload);
+    };
+  }, [ref, href, prefetch]);
+};
+
 /**
  * Hook that reactively checks if a URL is visited.
  * Re-renders when the visited URL set changes.
@@ -41708,6 +41825,12 @@ Object.assign(PSEUDO_CLASSES, {
  *   way there changes. What a row of tabs wants — the neighbour is a lateral
  *   move, not a step deeper, so the whole row weighs one entry and the back
  *   button leaves by where the reader came in.
+ * @param {boolean} [props.prefetch=true] Fetch the code of where this leads when the
+ *   pointer or the focus arrives, ahead of the press (see
+ *   docs/dynamic_import.md): the route actions that ask nothing of the
+ *   address — a page's code, a read without params — are prerun; one keyed by
+ *   a param waits for the arrival. `false` for a destination not worth
+ *   fetching on a hover.
  * @param {string} [props.command] - What the press asks of a control around
  *   the link — `"--navi-close"` on a link that leaves the sheet it is in.
  *   Triggered on the press, before the navigation.
@@ -41813,11 +41936,13 @@ const LinkPlain = props => {
     routeTransition,
     pressableDuringRouteTransition,
     replace,
+    prefetch = true,
     children
   } = props;
   if (anchor && !props.id) {
     props.id = href.slice(1);
   }
+  usePreloadOnIntent(props.ref, href, prefetch);
   const selectionContext = useContext(SelectionContext);
   const nav = useContext(NavContext);
   const visited = useIsVisited(href);
@@ -41985,6 +42110,7 @@ const LinkPlain = props => {
     routeTransition: undefined,
     pressableDuringRouteTransition: undefined,
     replace: undefined,
+    prefetch: undefined,
     "data-navi-route-transition-request": routeTransitionRequest,
     ...(pressableDuringRouteTransition ? {
       [PRESSABLE_ATTRIBUTE]: ""
@@ -47910,6 +48036,7 @@ const ButtonUI = props => {
     rel,
     replace,
     pressableDuringRouteTransition,
+    prefetch = true,
     // visual
     variant,
     pressEffect,
@@ -47968,6 +48095,7 @@ const ButtonUI = props => {
     [PRESSABLE_ATTRIBUTE]: ""
   } : null;
   const visualSelector = ".navi_button_content";
+  usePreloadOnIntent(ref, href, prefetch);
   useAccentColorAttributes(ref, null, {
     elementSelector: visualSelector
   });
@@ -47997,8 +48125,10 @@ const ButtonUI = props => {
     ...replaceRequest,
     pressableDuringRouteTransition: undefined,
     ...pressableRequest,
+    prefetch: undefined
     // Respond with the JS prop value directly so callers (e.g. resolveCommandValue)
     // get the original type instead of the DOM-coerced string (e.g. "[object Object]").
+    ,
     onnavi_get_value: e => {
       e.detail.respondWith(props.value);
     },
@@ -48227,6 +48357,12 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
  *   `--navi-nav-to` command — by TAKING THE PLACE of the current history entry
  *   rather than stacking on it: what `<Link replace>` says, for a press drawn
  *   as a button.
+ * @param {boolean} [prefetch=true] Fetch the code of where this leads when the
+ *   pointer or the focus arrives, ahead of the press (see
+ *   docs/dynamic_import.md): the route actions that ask nothing of the
+ *   address — a page's code, a read without params — are prerun; one keyed by
+ *   a param waits for the arrival. `false` for a destination not worth
+ *   fetching on a hover.
  * @param {boolean} [pressableDuringRouteTransition] Keep answering presses
  *   while a route transition plays: what a movement photographs goes deaf to
  *   the pointer for its whole length, and the door that opened the page — a
@@ -83743,5 +83879,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, OfflineError, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, dispatchRequestSetUIState, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, getNowHours, getNowHoursRoundedToStep, isCellSelected, isColumnSelected, isOfflineError, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markAsOutsideTextFlow, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useNetworkPolicyReason, useOrderedColumns, usePopupMode, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useTransitionCover, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, OfflineError, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, dispatchRequestSetUIState, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, getNowHours, getNowHoursRoundedToStep, isCellSelected, isColumnSelected, isOfflineError, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markAsOutsideTextFlow, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, preloadUrl, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useNetworkPolicyReason, useOrderedColumns, usePopupMode, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useTransitionCover, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map