@jsenv/navi 0.0.1 → 0.1.0

package/index.js

@@ -1,13 +1,12 @@
 // actions
 export { createAction, rerunActions, updateActions } from "./src/actions.js";
-export {
-  ShortcutProvider,
-  useKeyboardShortcuts,
-} from "./src/components/shortcut/shortcut_context.jsx";
+export { useRunOnMount } from "./src/components/action_execution/use_run_on_mount.js";
+export { useKeyboardShortcuts } from "./src/components/keyboard_shortcuts/keyboard_shortcuts.js";
 export { useActionData } from "./src/use_action_data.js";
 export { useActionStatus } from "./src/use_action_status.js";
 
 // state management (store)
+export { useStateArray } from "./src/components/use_state_array.js";
 export { resource } from "./src/store/resource_graph.js";
 export { valueInLocalStorage } from "./src/store/value_in_local_storage.js";
 
@@ -30,22 +29,73 @@ export { ActionRenderer } from "./src/components/action_renderer.jsx";
 export { Details } from "./src/components/details/details.jsx";
 export { SummaryMarker } from "./src/components/details/summary_marker.jsx";
 export {
-  EditableText,
-  useEditableController,
-} from "./src/components/editable_text/editable_text.jsx";
+  Editable,
+  useEditionController,
+} from "./src/components/edition/editable.jsx";
 export { ErrorBoundaryContext } from "./src/components/error_boundary_context.js";
-export { Form } from "./src/components/form.jsx";
-export { Button } from "./src/components/input/button.jsx";
-export { CheckboxList } from "./src/components/input/checkbox_list.jsx";
-export { Field } from "./src/components/input/field.jsx";
-export { Input } from "./src/components/input/input.jsx";
-export { RadioList } from "./src/components/input/radio_list.jsx";
-export { Select } from "./src/components/input/select.jsx";
+export { Button } from "./src/components/field/button.jsx";
+export {
+  Checkbox,
+  CheckboxList,
+} from "./src/components/field/checkbox_list.jsx";
+export { Form } from "./src/components/field/form.jsx";
+export { Input } from "./src/components/field/input.jsx";
+export { Label } from "./src/components/field/label.jsx";
+export { Radio, RadioList } from "./src/components/field/radio_list.jsx";
+export { Select } from "./src/components/field/select.jsx";
+export { ActiveKeyboardShortcuts } from "./src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx";
 export { Link } from "./src/components/link/link.jsx";
 export { Route } from "./src/components/route.jsx";
-export { SelectionProvider } from "./src/components/selection/selection.js";
+export {
+  SelectionContext,
+  createSelectionKeyboardShortcuts,
+  useSelectableElement,
+  useSelectionController,
+} from "./src/components/selection/selection.jsx";
+// Table start
+export {
+  isCellSelected,
+  isColumnSelected,
+  isRowSelected,
+  stringifyTableSelectionValue,
+} from "./src/components/table/selection/table_selection.js";
+export {
+  Col,
+  Colgroup,
+  RowNumberCol,
+  RowNumberTableCell,
+  Table,
+  TableCell,
+  Tbody,
+  Thead,
+  Tr,
+} from "./src/components/table/table.jsx";
+export { useCellsAndColumns } from "./src/components/table/use_cells_and_columns.js";
+// Table end
+export { Tab, TabList } from "./src/components/tablist/tablist.jsx";
+export { UITransition } from "./src/components/ui_transition.jsx";
 export { useSignalSync } from "./src/components/use_signal_sync.js";
 
-// for debbugging testing purposes
+// Text and icons
+export { LinkWithIcon } from "./src/components/link/link_with_icon.jsx";
+export { FontSizedSvg } from "./src/components/svg/font_sized_svg.jsx";
+export { IconAndText } from "./src/components/svg/icon_and_text.jsx";
+export { SVGMaskOverlay } from "./src/components/svg/svg_mask_overlay.jsx";
+export { Overflow } from "./src/components/text/overflow.jsx";
+export { TextAndCount } from "./src/components/text/text_and_count.jsx";
+
+// Validation
+export { createUniqueValueConstraint } from "./src/validation/constraints/create_unique_value_constraint.js";
+export { SINGLE_SPACE_CONSTRAINT } from "./src/validation/constraints/single_space_constraint.js";
+export {
+  addCustomMessage,
+  removeCustomMessage,
+} from "./src/validation/custom_message.js";
+
+// Other
+export { useDependenciesDiff } from "./src/components/use_dependencies_diff.js";
+export { useFocusGroup } from "./src/components/use_focus_group.js";
+
+// for debugging testing purposes
 export { enableDebugActions } from "./src/actions.js";
 export { enableDebugOnDocumentLoading } from "./src/browser_integration/document_loading_signal.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.0.1",
-  "description": "A navigation library for JS environments",
+  "version": "0.1.0",
+  "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",
     "url": "https://github.com/jsenv/core",
@@ -12,25 +12,36 @@
     "name": "dmail",
     "email": "dmaillard06@gmail.com"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/jsenv_navi.js"
+  ],
   "type": "module",
   "exports": {
-    ".": "./index.js",
+    ".": {
+      "dev:jsenv": "./index.js",
+      "default": "./dist/jsenv_navi.js"
+    },
     "./*": "./*"
   },
   "files": [
-    "/index.js",
-    "/src/"
+    "/dist/",
+    "/src/",
+    "/index.js"
   ],
+  "scripts": {
+    "build": "node ./scripts/build.mjs",
+    "prepublishOnly": "npm run build"
+  },
   "dependencies": {
-    "@jsenv/dom": "0.0.1",
+    "@jsenv/dom": "0.1.0",
     "@jsenv/humanize": "1.6.0"
   },
   "devDependencies": {
-    "@jsenv/assert": "4.5.3",
-    "@jsenv/validation": "0.0.1",
-    "@preact/signals": "2.2.0",
-    "preact": "10.26.9"
+    "@jsenv/assert": "4.5.4",
+    "@jsenv/core": "../../../",
+    "@jsenv/plugin-preact": "../../related/plugin-preact",
+    "@preact/signals": "2.3.2",
+    "preact": "10.27.2"
   },
   "publishConfig": {
     "access": "public"

package/src/actions.js

@@ -1,5 +1,7 @@
+import { createIterableWeakSet } from "@jsenv/dom";
 import { prefixFirstAndIndentRemainingLines } from "@jsenv/humanize";
 import { batch, computed, effect, signal } from "@preact/signals";
+
 import {
   getActionPrivateProperties,
   setActionPrivateProperties,
@@ -12,21 +14,19 @@ import {
   RUNNING,
 } from "./action_run_states.js";
 import { SYMBOL_OBJECT_SIGNAL } from "./symbol_object_signal.js";
-import { createIterableWeakSet } from "./utils/iterable_weak_set.js";
+import { isSignal } from "./utils/is_signal.js";
 import { createJsValueWeakMap } from "./utils/js_value_weak_map.js";
 import { mergeTwoJsValues } from "./utils/merge_two_js_values.js";
-import {
-  isSignal,
-  stringifyForDisplay,
-} from "./utils/stringify_for_display.js";
+import { stringifyForDisplay } from "./utils/stringify_for_display.js";
 import { weakEffect } from "./utils/weak_effect.js";
 
-const ACTION_AS_FUNCTION = true;
 let DEBUG = false;
 export const enableDebugActions = () => {
   DEBUG = true;
 };
 
+const ACTION_AS_FUNCTION = true;
+
 let dispatchActions = (params) => {
   const { requestedResult } = updateActions({
     globalAbortSignal: new AbortController().signal,
@@ -297,7 +297,11 @@ export const updateActions = ({
   }
 
   if (DEBUG) {
-    console.group(`updateActions()`);
+    let argSource = `reason: \`${reason}\``;
+    if (isReplace) {
+      argSource += `, isReplace: true`;
+    }
+    console.group(`updateActions({ ${argSource} })`);
     const lines = [
       ...(prerunSet.size ? [formatActionSet(prerunSet, "- prerun:")] : []),
       ...(runSet.size ? [formatActionSet(runSet, "- run:")] : []),
@@ -306,8 +310,7 @@ export const updateActions = ({
     ];
     console.debug(
       `requested operations:
-${lines.join("\n")}
-- meta: { reason: ${reason}, isReplace: ${isReplace} }`,
+${lines.join("\n")}`,
     );
   }
 
@@ -557,7 +560,6 @@ ${lines.join("\n")}`);
 
 const NO_PARAMS = {};
 const initialParamsDefault = NO_PARAMS;
-const metaDefault = {};
 
 const actionWeakMap = new WeakMap();
 export const createAction = (callback, rootOptions = {}) => {
@@ -568,10 +570,10 @@ export const createAction = (callback, rootOptions = {}) => {
 
   let rootAction;
 
-  const createActionCore = (
-    {
+  const createActionCore = (options, { parentAction } = {}) => {
+    let {
       name = callback.name || "anonymous",
-      params = initialParamsDefault,
+      params,
       isPrerun = true,
       runningState = IDLE,
       aborted = false,
@@ -583,12 +585,15 @@ export const createAction = (callback, rootOptions = {}) => {
       renderLoadedAsync,
       sideEffect = () => {},
       keepOldData = false,
-      meta = metaDefault,
+      meta = {},
       dataEffect,
       completeSideEffect,
-    },
-    { parentAction } = {},
-  ) => {
+    } = options;
+    if (!Object.hasOwn(options, "params")) {
+      // even undefined should be respect it's only when not provided at all we use default
+      params = initialParamsDefault;
+    }
+
     const initialData = data;
     const paramsSignal = signal(params);
     const isPrerunSignal = signal(isPrerun);
@@ -660,7 +665,8 @@ export const createAction = (callback, rootOptions = {}) => {
       if (isSignal(newParamsOrSignal)) {
         const combinedParamsSignal = computed(() => {
           const newParams = newParamsOrSignal.value;
-          return mergeTwoJsValues(params, newParams);
+          const result = mergeTwoJsValues(params, newParams);
+          return result;
         });
         return createActionProxyFromSignal(
           action,
@@ -692,12 +698,15 @@ export const createAction = (callback, rootOptions = {}) => {
         if (signalMap.size === 0) {
           // Pas de signals, merge statique normal
           if (params === null || typeof params !== "object") {
-            return createChildAction(newParamsOrSignal, options);
+            return createChildAction({
+              ...options,
+              params: newParamsOrSignal,
+            });
           }
           const combinedParams = mergeTwoJsValues(params, newParamsOrSignal);
           return createChildAction({
-            params: combinedParams,
             ...options,
+            params: combinedParams,
           });
         }
 
@@ -979,7 +988,7 @@ export const createAction = (callback, rootOptions = {}) => {
             completeSideEffect?.(action);
           });
           if (DEBUG) {
-            console.log(`"${action}": completed (reason: ${reason})`);
+            console.log(`"${action}": completed`);
           }
           return computedDataSignal.peek();
         };
@@ -1196,12 +1205,27 @@ const createActionProxyFromSignal = (
   };
 
   const nameSignal = signal();
-  const actionProxy = {
+  let actionProxy;
+  if (ACTION_AS_FUNCTION) {
+    actionProxy = function actionProxyFunction() {
+      return actionProxy.rerun();
+    };
+    Object.defineProperty(actionProxy, "name", {
+      configurable: true,
+      get() {
+        return nameSignal.value;
+      },
+    });
+  } else {
+    actionProxy = {
+      get name() {
+        return nameSignal.value;
+      },
+    };
+  }
+  Object.assign(actionProxy, {
     isProxy: true,
     callback: undefined,
-    get name() {
-      return nameSignal.value;
-    },
     params: undefined,
     isPrerun: undefined,
     runningState: undefined,
@@ -1228,7 +1252,7 @@ const createActionProxyFromSignal = (
     replaceParams: null, // Will be set below
     toString: () => actionProxy.name,
     meta: {},
-  };
+  });
   Object.preventExtensions(actionProxy);
 
   onActionTargetChange((actionTarget) => {

package/src/browser_integration/browser_integration.js

@@ -26,7 +26,14 @@ const applyActions = (params) => {
 
 const applyRouting = (
   url,
-  { globalAbortSignal, abortSignal, state, replace, isVisited },
+  {
+    globalAbortSignal,
+    abortSignal,
+    // state
+    replace,
+    isVisited,
+    reason,
+  },
 ) => {
   const {
     loadSet,
@@ -34,7 +41,11 @@ const applyRouting = (
     abortSignalMap,
     routeLoadRequestedMap,
     activeRouteSet,
-  } = updateRoutes(url, { state, replace, isVisited });
+  } = updateRoutes(url, {
+    replace,
+    // state,
+    isVisited,
+  });
   if (loadSet.size === 0 && reloadSet.size === 0) {
     return {
       allResult: undefined,
@@ -48,7 +59,7 @@ const applyRouting = (
     runSet: loadSet,
     rerunSet: reloadSet,
     abortSignalMap,
-    reason: `Document navigating to ${url}`,
+    reason,
   });
   const { allResult, runningActionSet } = updateActionsResult;
   const pendingTaskNameArray = [];
@@ -163,12 +174,26 @@ const useNavStateBasic = (id, initialValue, { debug } = {}) => {
     }
 
     const currentState = browserIntegration.getDocumentState() || {};
+
     if (value === undefined) {
+      if (!Object.hasOwn(currentState, id)) {
+        return;
+      }
       delete currentState[id];
-    } else {
-      currentState[id] = value;
+      browserIntegration.replaceDocumentState(currentState, {
+        reason: `delete "${id}" from browser state`,
+      });
+      return;
+    }
+
+    const valueInBrowserState = currentState[id];
+    if (valueInBrowserState === value) {
+      return;
     }
-    browserIntegration.replaceDocumentState(currentState);
+    currentState[id] = value;
+    browserIntegration.replaceDocumentState(currentState, {
+      reason: `set { ${id}: ${value} } in browser state`,
+    });
   };
 
   return [

package/src/browser_integration/via_history.js

@@ -30,10 +30,17 @@ export const setupBrowserIntegrationViaHistory = ({
     return window.history.state ? { ...window.history.state } : null;
   };
 
-  const replaceDocumentState = (newState) => {
+  const replaceDocumentState = (
+    newState,
+    { reason = "replaceDocumentState called" } = {},
+  ) => {
     const url = window.location.href;
     window.history.replaceState(newState, null, url);
-    handleRoutingTask(url, { state: newState });
+    handleRoutingTask(url, {
+      replace: true,
+      state: newState,
+      reason,
+    });
   };
 
   const historyStartAtStart = getDocumentState();
@@ -73,7 +80,7 @@ export const setupBrowserIntegrationViaHistory = ({
   };
 
   let abortController = null;
-  const handleRoutingTask = (url, { state, replace }) => {
+  const handleRoutingTask = (url, { state, replace, reason }) => {
     markUrlAsVisited(url);
     updateDocumentUrl(url);
     updateDocumentState(state);
@@ -88,6 +95,7 @@ export const setupBrowserIntegrationViaHistory = ({
       state,
       replace,
       isVisited,
+      reason,
     });
 
     executeWithCleanup(
@@ -122,11 +130,23 @@ export const setupBrowserIntegrationViaHistory = ({
       if (linkElement.hasAttribute("data-readonly")) {
         return;
       }
-      // TODO: ignore anchor navigation
+      // Ignore anchor navigation (same page, different hash)
+      const currentUrl = new URL(window.location.href);
+      const targetUrl = new URL(href);
+      if (
+        currentUrl.pathname === targetUrl.pathname &&
+        currentUrl.search === targetUrl.search &&
+        targetUrl.hash !== ""
+      ) {
+        return;
+      }
       e.preventDefault();
       const state = null;
       history.pushState(state, null, href);
-      handleRoutingTask(href, { state });
+      handleRoutingTask(href, {
+        state,
+        reason: `"click" on a[href="${href}"]`,
+      });
     },
     { capture: true },
   );
@@ -142,7 +162,10 @@ export const setupBrowserIntegrationViaHistory = ({
   window.addEventListener("popstate", (popstateEvent) => {
     const url = window.location.href;
     const state = popstateEvent.state;
-    handleRoutingTask(url, { state });
+    handleRoutingTask(url, {
+      state,
+      reason: `"popstate" event for ${url}`,
+    });
   });
 
   const goTo = async (url, { state = null, replace } = {}) => {
@@ -155,7 +178,11 @@ export const setupBrowserIntegrationViaHistory = ({
     } else {
       window.history.pushState(state, null, url);
     }
-    handleRoutingTask(url, { state, replace });
+    handleRoutingTask(url, {
+      state,
+      replace,
+      reason: `goTo called with "${url}"`,
+    });
   };
 
   const stop = (reason = "stop called") => {
@@ -165,7 +192,9 @@ export const setupBrowserIntegrationViaHistory = ({
   const reload = () => {
     const url = window.location.href;
     const state = history.state;
-    handleRoutingTask(url, { state });
+    handleRoutingTask(url, {
+      state,
+    });
   };
 
   const goBack = () => {
@@ -180,7 +209,11 @@ export const setupBrowserIntegrationViaHistory = ({
     const url = window.location.href;
     const state = history.state;
     history.replaceState(state, null, url);
-    handleRoutingTask(url, { state, replace: true });
+    handleRoutingTask(url, {
+      state,
+      replace: true,
+      reason: "routing initialization",
+    });
   };
 
   return {

package/src/components/action_execution/render_actionable_component.jsx

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