@jsenv/navi 0.10.2 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",
@@ -13,8 +13,8 @@
     "email": "dmaillard06@gmail.com"
   },
   "sideEffects": [
-    "./dist/jsenv_navi.js",
-    "./src/navi_css_vars.js"
+    "./src/navi_css_vars.js",
+    "./dist/jsenv_navi.js"
   ],
   "type": "module",
   "exports": {
@@ -25,16 +25,14 @@
     "./*": "./*"
   },
   "files": [
-    "/dist/",
-    "/src/",
-    "/index.js"
+    "/dist/"
   ],
   "scripts": {
     "build": "node ./scripts/build.mjs",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@jsenv/dom": "0.5.3",
+    "@jsenv/dom": "0.6.0",
     "@jsenv/humanize": "1.6.0"
   },
   "devDependencies": {

package/index.js

@@ -1,122 +0,0 @@
-import "./src/navi_css_vars.js";
-
-// actions
-export { createAction, rerunActions, updateActions } from "./src/actions.js";
-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";
-
-// routing
-export {
-  actionIntegratedVia,
-  goBack,
-  goForward,
-  goTo,
-  reload,
-  stopLoad,
-  useNavState,
-} from "./src/browser_integration/browser_integration.js";
-export { useDocumentState } from "./src/browser_integration/document_state_signal.js";
-export { useDocumentUrl } from "./src/browser_integration/document_url_signal.js";
-export {
-  defineRoutes,
-  rawUrlPart,
-  setBaseUrl,
-  useRouteStatus,
-} from "./src/route/route.js";
-
-// Components
-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 {
-  Editable,
-  useEditionController,
-} from "./src/components/edition/editable.jsx";
-export { ErrorBoundaryContext } from "./src/components/error_boundary_context.js";
-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 {
-  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";
-// 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 { Icon, Text } from "./src/components/text/text.jsx";
-export { TextAndCount } from "./src/components/text/text_and_count.jsx";
-// Callout, dialogs, ...
-export { openCallout } from "./src/components/callout/callout.js";
-// Layout
-export {
-  FlexColumn,
-  FlexItem,
-  FlexRow,
-} from "./src/components/layout/flex.jsx";
-export { Spacing } from "./src/components/layout/spacing.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";
-// advanced constraint validation functions
-export {
-  forwardActionRequested,
-  installCustomConstraintValidation,
-} from "./src/validation/custom_constraint_validation.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/src/action_private_properties.js

@@ -1,11 +0,0 @@
-const actionPrivatePropertiesWeakMap = new WeakMap();
-export const getActionPrivateProperties = (action) => {
-  const actionPrivateProperties = actionPrivatePropertiesWeakMap.get(action);
-  if (!actionPrivateProperties) {
-    throw new Error(`Cannot find action private properties for "${action}"`);
-  }
-  return actionPrivateProperties;
-};
-export const setActionPrivateProperties = (action, properties) => {
-  actionPrivatePropertiesWeakMap.set(action, properties);
-};

package/src/action_proxy_test.html

@@ -1,353 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>Action Proxy Test</title>
-    <meta charset="utf-8" />
-    <link rel="icon" href="data:," />
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        max-width: 1000px;
-        margin: 0 auto;
-        padding: 10px;
-      }
-      .section {
-        border: 1px solid #ccc;
-        margin: 10px 0;
-        padding: 15px;
-        border-radius: 5px;
-      }
-      .section h3 {
-        margin-top: 0;
-      }
-      .controls {
-        margin: 10px 0;
-      }
-      .controls button {
-        margin: 5px;
-        padding: 8px 16px;
-        border: 1px solid #007acc;
-        background: #007acc;
-        color: white;
-        border-radius: 3px;
-        cursor: pointer;
-      }
-      .controls button:hover {
-        background: #005999;
-      }
-      .controls button:disabled {
-        background: #ccc;
-        border-color: #ccc;
-        cursor: not-allowed;
-      }
-      .status {
-        background: #f5f5f5;
-        padding: 10px;
-        margin: 10px 0;
-        border-radius: 3px;
-        font-family: monospace;
-      }
-      .input-group {
-        margin: 10px 0;
-      }
-      .input-group label {
-        display: inline-block;
-        width: 100px;
-        font-weight: bold;
-      }
-      .input-group input {
-        padding: 5px;
-        border: 1px solid #ccc;
-        border-radius: 3px;
-      }
-      .execution-count {
-        font-size: 18px;
-        font-weight: bold;
-        color: #007acc;
-      }
-      .log {
-        background: #f9f9f9;
-        border: 1px solid #ddd;
-        padding: 10px;
-        height: 200px;
-        overflow-y: auto;
-        font-family: monospace;
-        font-size: 12px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>Action Proxy with Signal Parameters Test</h1>
-
-    <div class="section">
-      <h3>Signal Control</h3>
-      <div class="input-group">
-        <label>User ID:</label>
-        <input type="number" id="userIdInput" value="123" />
-        <button onclick="updateSignal()">Update Signal</button>
-        <button onclick="replaceParams()">Replace Params</button>
-      </div>
-      <div class="status">
-        Current Signal Value: <span id="signalValue">123</span>
-      </div>
-    </div>
-
-    <div style="display: flex; gap: 10px; flex: 1; width: 100%">
-      <div class="section" style="flex: 1">
-        <h3>Action Proxy Status</h3>
-        <div class="status">
-          <div>Name: <span id="proxyName">-</span></div>
-          <div>Params: <span id="proxyParams">-</span></div>
-          <div>Loading State: <span id="proxyLoadingState">-</span></div>
-          <div>Load Requested: <span id="proxyLoadRequested">-</span></div>
-          <div>Data: <span id="proxyData">-</span></div>
-          <div>Error: <span id="proxyError">-</span></div>
-        </div>
-      </div>
-
-      <div class="section" style="flex: 1">
-        <h3>All Actions & Proxy Target</h3>
-        <div class="status">
-          <div id="actionsList" style="margin-top: 5px; font-size: 11px">-</div>
-        </div>
-      </div>
-    </div>
-
-    <div class="section">
-      <h3>Execution Counter</h3>
-      <div class="status">
-        <div class="execution-count">
-          Action executed: <span id="executionCount">0</span> times
-        </div>
-      </div>
-    </div>
-
-    <div class="section">
-      <h3>Controls</h3>
-      <div class="controls">
-        <button onclick="loadAction()">Load</button>
-        <button onclick="reloadAction()">Reload</button>
-        <button onclick="unloadAction()">Unload</button>
-        <button onclick="abortAction()">Abort</button>
-        <button onclick="preloadAction()">Preload</button>
-      </div>
-    </div>
-
-    <div class="section">
-      <h3>Log</h3>
-      <div id="log" class="log"></div>
-      <button onclick="clearLog()">Clear Log</button>
-    </div>
-
-    <script type="module">
-      import { signal, effect } from "@preact/signals";
-      import { createAction } from "./actions.js";
-      import { getActionPrivateProperties } from "./action_private_properties.js";
-
-      // Global state
-      let executionCount = 0;
-      let userAction;
-      let userActionProxy;
-      let userIdSignal;
-
-      // DOM elements
-      const elements = {
-        signalValue: document.getElementById("signalValue"),
-        proxyName: document.getElementById("proxyName"),
-        proxyParams: document.getElementById("proxyParams"),
-        proxyLoadingState: document.getElementById("proxyLoadingState"),
-        proxyLoadRequested: document.getElementById("proxyLoadRequested"),
-        proxyData: document.getElementById("proxyData"),
-        proxyError: document.getElementById("proxyError"),
-        actionsList: document.getElementById("actionsList"),
-        executionCount: document.getElementById("executionCount"),
-        userIdInput: document.getElementById("userIdInput"),
-        log: document.getElementById("log"),
-      };
-
-      // Logging utility
-      function log(message) {
-        const timestamp = new Date().toLocaleTimeString();
-        const logElement = elements.log;
-        logElement.innerHTML += `[${timestamp}] ${message}\n`;
-        logElement.scrollTop = logElement.scrollHeight;
-      }
-
-      // Create the action that simulates fetching user data
-      userAction = createAction(
-        async (userId, { signal, reason, isPreload }) => {
-          executionCount++;
-          elements.executionCount.textContent = executionCount;
-
-          log(
-            `🚀 Action executing with userId: ${userId} (reason: ${reason}, isPreload: ${isPreload})`,
-          );
-
-          // Simulate async work
-          await new Promise((resolve) => setTimeout(resolve, 1000));
-
-          // Check if aborted
-          if (signal.aborted) {
-            log(`❌ Action aborted: ${signal.reason}`);
-            throw new Error(`Aborted: ${signal.reason}`);
-          }
-
-          const userData = {
-            id: userId,
-            loadedAt: new Date().toISOString(),
-          };
-
-          log(`✅ Action completed with data: ${JSON.stringify(userData)}`);
-          return userData;
-        },
-        {
-          name: "fetchUser",
-        },
-      );
-
-      // Create signal for user ID
-      userIdSignal = signal("123");
-
-      // Create proxy action bound to the signal
-      userActionProxy = userAction.bindParams(userIdSignal);
-
-      // Update UI functions
-      function updateSignalDisplay() {
-        elements.signalValue.textContent = userIdSignal.value;
-      }
-
-      function updateProxyDisplay() {
-        // Watch proxy properties through private properties signals
-        const {
-          paramsSignal,
-          loadingStateSignal,
-          loadRequestedSignal,
-          dataSignal,
-          errorSignal,
-        } = getActionPrivateProperties(userActionProxy);
-
-        elements.proxyName.textContent = userActionProxy.name;
-        elements.proxyParams.textContent = JSON.stringify(paramsSignal.value);
-        elements.proxyLoadingState.textContent = loadingStateSignal.value.id;
-        elements.proxyLoadRequested.textContent = loadRequestedSignal.value;
-        elements.proxyData.textContent = JSON.stringify(dataSignal.value);
-        elements.proxyError.textContent = errorSignal.value || "null";
-      }
-
-      function updateActionsDisplay() {
-        // Get all actions (exclude proxies)
-        const allActions = userAction.matchAllSelfOrDescendant(() => true);
-
-        // Get the current action the proxy is pointing at
-        const currentProxyTarget =
-          getActionPrivateProperties(userActionProxy).currentAction;
-
-        // Create actions list
-        if (allActions.length === 0) {
-          elements.actionsList.innerHTML = "No actions exist";
-        } else {
-          const actionsHtml = allActions
-            .map((action) => {
-              const isCurrentTarget = action === currentProxyTarget;
-              const actionData = action.data
-                ? JSON.stringify(action.data).substring(0, 50) +
-                  (JSON.stringify(action.data).length > 50 ? "..." : "")
-                : "null";
-              const style = isCurrentTarget
-                ? "background: #ffffcc; font-weight: bold;"
-                : "";
-              const indicator = isCurrentTarget ? "👉 " : "   ";
-
-              return `<div style="${style}; padding: 2px; margin: 1px 0; border-radius: 2px;">
-                ${indicator}<strong>${action.name}</strong> | Data: ${actionData} | State: ${action.loadingState.id}
-              </div>`;
-            })
-            .join("");
-
-          elements.actionsList.innerHTML = actionsHtml;
-        }
-      }
-
-      // Set up reactive updates
-      effect(() => {
-        // Watch the signal value
-        updateSignalDisplay();
-
-        updateProxyDisplay();
-
-        // Watch underlying action properties
-        const currentAction = userActionProxy.matchAllSelfOrDescendant(
-          () => true,
-          { includeProxies: false },
-        )[0];
-        if (currentAction) {
-          const actionPrivateProps = getActionPrivateProperties(currentAction);
-          // Subscribe to action state changes by accessing signal values
-          /* eslint-disable-next-line no-unused-expressions */
-          actionPrivateProps.loadingStateSignal.value;
-          /* eslint-disable-next-line no-unused-expressions */
-          actionPrivateProps.loadRequestedSignal.value;
-          /* eslint-disable-next-line no-unused-expressions */
-          actionPrivateProps.dataSignal.value;
-          /* eslint-disable-next-line no-unused-expressions */
-          actionPrivateProps.errorSignal.value;
-        }
-        updateActionsDisplay();
-      });
-
-      // Global functions for buttons
-      window.updateSignal = function () {
-        const newValue = elements.userIdInput.valueAsNumber;
-        log(`📡 Updating signal from "${userIdSignal.value}" to "${newValue}"`);
-        userIdSignal.value = newValue;
-      };
-
-      window.replaceParams = function () {
-        const newValue = elements.userIdInput.valueAsNumber;
-        log(
-          `🔄 Replacing params from "${JSON.stringify(userActionProxy.params)}" to "{userId: ${newValue}}"`,
-        );
-        userActionProxy.replaceParams(newValue);
-      };
-
-      window.loadAction = function () {
-        log(`🔄 Loading action proxy`);
-        userActionProxy.load({ reason: "Manual load button clicked" });
-      };
-
-      window.reloadAction = function () {
-        log(`🔄 Reloading action proxy`);
-        userActionProxy.reload({ reason: "Manual reload button clicked" });
-      };
-
-      window.unloadAction = function () {
-        log(`🛑 Unloading action proxy`);
-        userActionProxy.unload();
-      };
-
-      window.abortAction = function () {
-        log(`⚠️ Aborting action proxy`);
-        userActionProxy.abort("Manual abort button clicked");
-      };
-
-      window.preloadAction = function () {
-        log(`⏳ Preloading action proxy`);
-        userActionProxy.preload({ reason: "Manual preload button clicked" });
-      };
-
-      window.clearLog = function () {
-        elements.log.innerHTML = "";
-      };
-
-      // Initial update
-      updateSignalDisplay();
-      updateProxyDisplay();
-      updateActionsDisplay();
-
-      log(
-        `🎯 Test setup complete. Action proxy bound to signal with initial value: ${userIdSignal.value}`,
-      );
-    </script>
-  </body>
-</html>

package/src/action_run_states.js

@@ -1,5 +0,0 @@
-export const IDLE = { id: "idle" };
-export const RUNNING = { id: "running" };
-export const ABORTED = { id: "aborted" };
-export const FAILED = { id: "failed" };
-export const COMPLETED = { id: "completed" };