@jsenv/navi 0.10.1 → 0.11.0

package/src/browser_integration/via_navigation.js

@@ -1,168 +0,0 @@
-import { updateDocumentUrl } from "./document_url_signal.js";
-
-let DEBUG = false;
-
-export const setupRoutingViaNavigation = (handler) => {
-  updateDocumentUrl(navigation.currentEntry.url);
-  navigation.addEventListener("currententrychange", () => {
-    updateDocumentUrl(navigation.currentEntry.url);
-  });
-
-  let isReloadFromNavigationAPI = false;
-  const navigationReload = navigation.reload;
-  navigation.reload = (...args) => {
-    isReloadFromNavigationAPI = true;
-    navigationReload.call(navigation, ...args);
-    isReloadFromNavigationAPI = false;
-  };
-
-  navigation.addEventListener("navigate", (event) => {
-    if (!event.canIntercept) {
-      return;
-    }
-    if (event.hashChange || event.downloadRequest !== null) {
-      return;
-    }
-    if (
-      !event.userInitiated &&
-      event.navigationType === "reload" &&
-      event.isTrusted &&
-      !isReloadFromNavigationAPI
-    ) {
-      // let window.location.reload() reload the whole document
-      // (used by jsenv hot reload)
-      return;
-    }
-    const { signal } = event;
-    const formAction = event.info?.formAction;
-    const isReload = event.navigationType === "reload";
-    const isReplace = event.navigationType === "replace";
-    const currentUrl = navigation.currentEntry.url;
-    const destinationUrl = event.destination.url;
-    const currentState = navigation.currentEntry.getState();
-    const destinationState = event.destination.getState();
-    const formData = event.formData || event.info?.formData;
-    const formUrl = event.info?.formUrl;
-    const stopAbortController = new AbortController();
-    const stopSignal = stopAbortController.signal;
-    const removeStopButtonClickDetector = detectBrowserStopButtonClick(
-      signal,
-      () => {
-        stopAbortController.abort("stop button clicked");
-      },
-    );
-
-    if (DEBUG) {
-      console.log("receive navigate event", {
-        destinationUrl,
-        destinationState,
-      });
-    }
-
-    event.intercept({
-      handler: async () => {
-        if (event.info?.onStart) {
-          event.info.onStart();
-        }
-        try {
-          await handler(event, {
-            abortSignal: signal,
-            stopSignal,
-            formAction,
-            formData,
-            formUrl,
-            isReload,
-            isReplace,
-            currentUrl,
-            destinationUrl,
-            currentState,
-            destinationState,
-          });
-        } catch (e) {
-          console.error(e); // browser remains silent in case of error during handler so we explicitely log the error to the console
-          throw e;
-        } finally {
-          removeStopButtonClickDetector();
-        }
-      },
-      // https://github.com/WICG/navigation-api?tab=readme-ov-file#focus-management
-      // without this, after clicking <a href="...">, the focus does to document.body
-      // which is problematic for shortcuts for instance
-      focusReset: "manual",
-    });
-  });
-};
-
-// setupNavigateHandler(async (event, { stopSignal, formAction, formData }) => {
-//   if (formAction) {
-//     const result = await applyAction(formAction, {
-//       signal: stopSignal,
-//       formData,
-//     });
-//     event.info.formActionCallback(result);
-//   }
-
-//   await navMethods.applyRouting({
-//     sourceUrl: currentUrl,
-//     targetUrl: formUrl || destinationUrl,
-//     sourceState: currentState,
-//     targetState: destinationState || currentState,
-//     abortSignal,
-//     stopSignal,
-//     isReload,
-//     isReplace,
-//     info: event.info,
-//   });
-//   if (formUrl) {
-//     const finishedPromise = event.target.transition.finished;
-//     (async () => {
-//       try {
-//         await finishedPromise;
-//       } finally {
-//         navigation.navigate(window.location.href, {
-//           state: navigation.currentEntry.getState(),
-//           history: "replace",
-//         });
-//       }
-//     })();
-//   }
-// });
-
-/**
- * There is 2 distinct reason to abort a navigation:
- * - the user clicked the browser stop button
- * - the user navigate to an other page
- *
- * When navigating to an other page we don't want to abort anything, the routing does that
- * When clicking the stop button we want to cancel everything
- *
- * To detect that when aborted, we wait a setTimeout to see if we receive a new navigation
- * If yes it means this is an abort due to a new navigation
- * Otherwise it's an abort due to the stop button
- *
- * On top of that stop button must cancel X navigation so the last navigation detecting the stop click
- * is notifying any current navigation that stop button was clicked
- */
-let callEffect = () => {};
-const browserStopButtonClickCallbackSet = new Set();
-const detectBrowserStopButtonClick = (navigateEventSignal, callback) => {
-  callEffect();
-  browserStopButtonClickCallbackSet.add(callback);
-  navigateEventSignal.addEventListener("abort", async () => {
-    const timeout = setTimeout(() => {
-      callEffect = () => {};
-
-      for (const browserStopButtonClickCallback of browserStopButtonClickCallbackSet) {
-        browserStopButtonClickCallback();
-      }
-      browserStopButtonClickCallbackSet.clear();
-    });
-    callEffect = () => {
-      clearTimeout(timeout);
-    };
-  });
-
-  return () => {
-    browserStopButtonClickCallbackSet.delete(callback);
-  };
-};

package/src/components/action_execution/form_context.js

@@ -1,5 +0,0 @@
-import { createContext } from "preact";
-
-export const FormContext = createContext();
-
-export const FormActionContext = createContext();

package/src/components/action_execution/render_actionable_component.jsx

@@ -1,29 +0,0 @@
-import { useContext } from "preact/hooks";
-
-import { FormContext } from "./form_context.js";
-
-export const renderActionableComponent = (
-  props,
-  ref,
-  { Basic, WithAction, InsideForm, WithActionInsideForm },
-) => {
-  const { action, shortcuts } = props;
-  const formContext = useContext(FormContext);
-  const hasActionProps = Boolean(action || (shortcuts && shortcuts.length > 0));
-  const considerInsideForm = Boolean(formContext);
-
-  if (hasActionProps && WithAction) {
-    if (considerInsideForm && WithActionInsideForm) {
-      return (
-        <WithActionInsideForm formContext={formContext} ref={ref} {...props} />
-      );
-    }
-    return <WithAction ref={ref} {...props} />;
-  }
-
-  if (considerInsideForm && InsideForm) {
-    return <InsideForm formContext={formContext} ref={ref} {...props} />;
-  }
-
-  return <Basic ref={ref} {...props} />;
-};

package/src/components/action_execution/use_action.js

@@ -1,99 +0,0 @@
-import { useSignal } from "@preact/signals";
-import { useCallback, useRef } from "preact/hooks";
-
-import { createAction } from "../../actions.js";
-import { addIntoArray, removeFromArray } from "../../utils/array_add_remove.js";
-
-// used by form elements such as <input>, <select>, <textarea> to have their own action bound to a single parameter
-// when inside a <form> the form params are updated when the form element single param is updated
-export const useActionBoundToOneParam = (action, externalValue) => {
-  const actionFirstArgSignal = useSignal(externalValue);
-  const boundAction = useBoundAction(action, actionFirstArgSignal);
-  const getValue = useCallback(() => actionFirstArgSignal.value, []);
-  const setValue = useCallback((value) => {
-    actionFirstArgSignal.value = value;
-  }, []);
-  const externalValueRef = useRef(externalValue);
-  if (externalValue !== externalValueRef.current) {
-    externalValueRef.current = externalValue;
-    setValue(externalValue);
-  }
-
-  const value = getValue();
-  return [boundAction, value, setValue];
-};
-export const useActionBoundToOneArrayParam = (
-  action,
-  name,
-  externalValue,
-  fallbackValue,
-  defaultValue,
-) => {
-  const [boundAction, value, setValue] = useActionBoundToOneParam(
-    action,
-    name,
-    externalValue,
-    fallbackValue,
-    defaultValue,
-  );
-
-  const add = (valueToAdd, valueArray = value) => {
-    setValue(addIntoArray(valueArray, valueToAdd));
-  };
-
-  const remove = (valueToRemove, valueArray = value) => {
-    setValue(removeFromArray(valueArray, valueToRemove));
-  };
-
-  const result = [boundAction, value, setValue];
-  result.add = add;
-  result.remove = remove;
-  return result;
-};
-// used by <details> to just call their action
-export const useAction = (action, paramsSignal) => {
-  return useBoundAction(action, paramsSignal);
-};
-
-const useBoundAction = (action, actionParamsSignal) => {
-  const actionRef = useRef();
-  const actionCallbackRef = useRef();
-
-  if (!action) {
-    return null;
-  }
-  if (isFunctionButNotAnActionFunction(action)) {
-    actionCallbackRef.current = action;
-    const existingAction = actionRef.current;
-    if (existingAction) {
-      return existingAction;
-    }
-    const actionFromFunction = createAction(
-      (...args) => {
-        return actionCallbackRef.current?.(...args);
-      },
-      {
-        name: action.name,
-        // We don't want to give empty params by default
-        // we want to give undefined for regular functions
-        params: undefined,
-      },
-    );
-    if (!actionParamsSignal) {
-      actionRef.current = actionFromFunction;
-      return actionFromFunction;
-    }
-    const actionBoundToParams =
-      actionFromFunction.bindParams(actionParamsSignal);
-    actionRef.current = actionBoundToParams;
-    return actionBoundToParams;
-  }
-  if (actionParamsSignal) {
-    return action.bindParams(actionParamsSignal);
-  }
-  return action;
-};
-
-const isFunctionButNotAnActionFunction = (action) => {
-  return typeof action === "function" && !action.isAction;
-};

package/src/components/action_execution/use_execute_action.js

@@ -1,177 +0,0 @@
-import { useCallback, useLayoutEffect, useRef, useState } from "preact/hooks";
-import {
-  addCustomMessage,
-  removeCustomMessage,
-} from "../../validation/custom_message.js";
-import { useResetErrorBoundary } from "../error_boundary_context.js";
-
-let debug = false;
-
-export const useExecuteAction = (
-  elementRef,
-  {
-    errorEffect = "show_validation_message", // "show_validation_message" or "throw"
-    errorMapping,
-  } = {},
-) => {
-  // see https://medium.com/trabe/catching-asynchronous-errors-in-react-using-error-boundaries-5e8a5fd7b971
-  // and https://codepen.io/dmail/pen/XJJqeGp?editors=0010
-  // To change if https://github.com/preactjs/preact/issues/4754 lands
-  const [error, setError] = useState(null);
-  const resetErrorBoundary = useResetErrorBoundary();
-  useLayoutEffect(() => {
-    if (error) {
-      error.__handled__ = true; // prevent jsenv from displaying it
-      throw error;
-    }
-  }, [error]);
-
-  const validationMessageTargetRef = useRef(null);
-  const addErrorMessage = (error) => {
-    const validationMessageTarget = validationMessageTargetRef.current;
-    const errorMapped = errorMapping ? errorMapping(error) : error;
-    addCustomMessage(validationMessageTarget, "action_error", errorMapped, {
-      // This error should not prevent <form> submission
-      // so whenever user tries to submit the form the error is cleared
-      // (Hitting enter key, clicking on submit button, etc. would allow to re-submit the form in error state)
-      removeOnRequestAction: true,
-    });
-  };
-  const removeErrorMessage = () => {
-    const validationMessageTarget = validationMessageTargetRef.current;
-    if (validationMessageTarget) {
-      removeCustomMessage(validationMessageTarget, "action_error");
-    }
-  };
-
-  useLayoutEffect(() => {
-    const element = elementRef.current;
-    if (!element) {
-      return null;
-    }
-    const form = element.tagName === "FORM" ? element : element.form;
-    if (!form) {
-      return null;
-    }
-    const onReset = () => {
-      removeErrorMessage();
-    };
-    form.addEventListener("reset", onReset);
-    return () => {
-      form.removeEventListener("reset", onReset);
-    };
-  });
-
-  // const errorEffectRef = useRef();
-  // errorEffectRef.current = errorEffect;
-  const executeAction = useCallback(
-    (actionEvent) => {
-      const { action, actionOrigin, requester, event, method } =
-        actionEvent.detail;
-      const sharedActionEventDetail = {
-        action,
-        actionOrigin,
-        requester,
-        event,
-        method,
-      };
-
-      if (debug) {
-        console.debug(
-          "executing action, requested by",
-          requester,
-          `(event: ${event?.type})`,
-        );
-      }
-
-      const dispatchCustomEvent = (type, options) => {
-        const element = elementRef.current;
-        const customEvent = new CustomEvent(type, options);
-        element.dispatchEvent(customEvent);
-      };
-      if (resetErrorBoundary) {
-        resetErrorBoundary();
-      }
-      removeErrorMessage();
-      setError(null);
-
-      const validationMessageTarget = requester || elementRef.current;
-      validationMessageTargetRef.current = validationMessageTarget;
-
-      dispatchCustomEvent("actionstart", {
-        detail: sharedActionEventDetail,
-      });
-
-      return action[method]({
-        reason: `"${event.type}" event on ${(() => {
-          const target = event.target;
-          const tagName = target.tagName.toLowerCase();
-
-          if (target.id) {
-            return `${tagName}#${target.id}`;
-          }
-
-          const uiName = target.getAttribute("data-ui-name");
-          if (uiName) {
-            return `${tagName}[data-ui-name="${uiName}"]`;
-          }
-
-          return `<${tagName}>`;
-        })()}`,
-        onAbort: (reason) => {
-          if (
-            // at this stage the action side effect might have removed the <element> from the DOM
-            // (in theory no because action side effect are batched to happen after)
-            // but other side effects might do this
-            elementRef.current
-          ) {
-            dispatchCustomEvent("actionabort", {
-              detail: {
-                ...sharedActionEventDetail,
-                reason,
-              },
-            });
-          }
-        },
-        onError: (error) => {
-          if (
-            // at this stage the action side effect might have removed the <element> from the DOM
-            // (in theory no because action side effect are batched to happen after)
-            // but other side effects might do this
-            elementRef.current
-          ) {
-            dispatchCustomEvent("actionerror", {
-              detail: {
-                ...sharedActionEventDetail,
-                error,
-              },
-            });
-          }
-          if (errorEffect === "show_validation_message") {
-            addErrorMessage(error);
-          } else if (errorEffect === "throw") {
-            setError(error);
-          }
-        },
-        onComplete: (data) => {
-          if (
-            // at this stage the action side effect might have removed the <element> from the DOM
-            // (in theory no because action side effect are batched to happen after)
-            // but other side effects might do this
-            elementRef.current
-          ) {
-            dispatchCustomEvent("actionend", {
-              detail: {
-                ...sharedActionEventDetail,
-                data,
-              },
-            });
-          }
-        },
-      });
-    },
-    [errorEffect],
-  );
-
-  return executeAction;
-};

package/src/components/action_execution/use_run_on_mount.js

@@ -1,9 +0,0 @@
-import { useEffect } from "preact/hooks";
-
-export const useRunOnMount = (action, Component) => {
-  useEffect(() => {
-    action.run({
-      reason: `<${Component.name} /> mounted`,
-    });
-  }, []);
-};

package/src/components/action_renderer.jsx

@@ -1,125 +0,0 @@
-import { useErrorBoundary, useLayoutEffect } from "preact/hooks";
-import { getActionPrivateProperties } from "../action_private_properties.js";
-import { useActionStatus } from "../use_action_status.js";
-
-import.meta.css = /* css */ `
-  .action_error {
-    padding: 20px;
-    background: #fdd;
-    border: 1px solid red;
-    margin-top: 0;
-    margin-bottom: 20px;
-  }
-`;
-
-const renderIdleDefault = () => null;
-const renderLoadingDefault = () => null;
-const renderAbortedDefault = () => null;
-const renderErrorDefault = (error) => {
-  let routeErrorText = error && error.message ? error.message : error;
-  return <p className="action_error">An error occured: {routeErrorText}</p>;
-};
-const renderCompletedDefault = () => null;
-
-export const ActionRenderer = ({ action, children, disabled }) => {
-  const {
-    idle: renderIdle = renderIdleDefault,
-    loading: renderLoading = renderLoadingDefault,
-    aborted: renderAborted = renderAbortedDefault,
-    error: renderError = renderErrorDefault,
-    completed: renderCompleted,
-    always: renderAlways,
-  } = typeof children === "function" ? { completed: children } : children || {};
-
-  if (disabled) {
-    return null;
-  }
-
-  if (action === undefined) {
-    throw new Error(
-      "ActionRenderer requires an action to render, but none was provided.",
-    );
-  }
-  const { idle, loading, aborted, error, data } = useActionStatus(action);
-  const UIRenderedPromise = useUIRenderedPromise(action);
-  const [errorBoundary, resetErrorBoundary] = useErrorBoundary();
-
-  // Mark this action as bound to UI components (has renderers)
-  // This tells the action system that errors should be caught and stored
-  // in the action's error state rather than bubbling up
-  useLayoutEffect(() => {
-    if (action) {
-      const { ui } = getActionPrivateProperties(action);
-      ui.hasRenderers = true;
-    }
-  }, [action]);
-
-  useLayoutEffect(() => {
-    resetErrorBoundary();
-  }, [action, loading, idle, resetErrorBoundary]);
-
-  useLayoutEffect(() => {
-    UIRenderedPromise.resolve();
-    return () => {
-      actionUIRenderedPromiseWeakMap.delete(action);
-    };
-  }, [action]);
-
-  // If renderAlways is provided, it wins and handles all rendering
-  if (renderAlways) {
-    return renderAlways({ idle, loading, aborted, error, data });
-  }
-
-  if (idle) {
-    return renderIdle(action);
-  }
-  if (errorBoundary) {
-    return renderError(errorBoundary, "ui_error", action);
-  }
-  if (error) {
-    return renderError(error, "action_error", action);
-  }
-  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;
-    }
-  }
-  if (loading) {
-    if (action.canDisplayOldData && data !== undefined) {
-      return renderCompletedSafe(data, action);
-    }
-    return renderLoading(action);
-  }
-
-  return renderCompletedSafe(data, action);
-};
-
-const defaultPromise = Promise.resolve();
-defaultPromise.resolve = () => {};
-
-const actionUIRenderedPromiseWeakMap = new WeakMap();
-const useUIRenderedPromise = (action) => {
-  if (!action) {
-    return defaultPromise;
-  }
-  const actionUIRenderedPromise = actionUIRenderedPromiseWeakMap.get(action);
-  if (actionUIRenderedPromise) {
-    return actionUIRenderedPromise;
-  }
-  let resolve;
-  const promise = new Promise((res) => {
-    resolve = res;
-  });
-  promise.resolve = resolve;
-  actionUIRenderedPromiseWeakMap.set(action, promise);
-  return promise;
-};