@jsenv/navi 0.0.1 → 0.1.0

package/src/route/route.js

@@ -54,7 +54,12 @@ export const updateRoutes = (
     const newActive = Boolean(match);
     let newParams;
     if (match) {
-      const extractedParams = extractParams(urlPattern, url);
+      const { optionalParamKeySet } = routePrivateProperties;
+      const extractedParams = extractParams(
+        urlPattern,
+        url,
+        optionalParamKeySet,
+      );
       if (compareTwoJsValues(oldParams, extractedParams)) {
         // No change in parameters, keep the old params
         newParams = oldParams;
@@ -112,6 +117,43 @@ export const updateRoutes = (
   const abortSignalMap = new Map();
   const routeLoadRequestedMap = new Map();
 
+  const shouldLoadOrReload = (route, shouldLoad) => {
+    const routeAction = route.action;
+    const currentAction = routeAction.getCurrentAction();
+    if (shouldLoad) {
+      if (replace || currentAction.aborted || currentAction.error) {
+        shouldLoad = false;
+      }
+    }
+    if (shouldLoad) {
+      toLoadSet.add(currentAction);
+    } else {
+      toReloadSet.add(currentAction);
+    }
+    routeLoadRequestedMap.set(route, currentAction);
+    // Create a new abort controller for this action
+    const actionAbortController = new AbortController();
+    actionAbortControllerWeakMap.set(currentAction, actionAbortController);
+    abortSignalMap.set(currentAction, actionAbortController.signal);
+  };
+
+  const shouldLoad = (route) => {
+    shouldLoadOrReload(route, true);
+  };
+  const shouldReload = (route) => {
+    shouldLoadOrReload(route, false);
+  };
+  const shouldAbort = (route) => {
+    const routeAction = route.action;
+    const currentAction = routeAction.getCurrentAction();
+    const actionAbortController =
+      actionAbortControllerWeakMap.get(currentAction);
+    if (actionAbortController) {
+      actionAbortController.abort(`route no longer matching`);
+      actionAbortControllerWeakMap.delete(currentAction);
+    }
+  };
+
   for (const {
     route,
     routePrivateProperties,
@@ -138,31 +180,13 @@ export const updateRoutes = (
           newParams,
         );
       }
-      const currentAction = routeAction.getCurrentAction();
-      if (replace) {
-        toLoadSet.add(currentAction);
-      } else {
-        toReloadSet.add(currentAction);
-      }
-      routeLoadRequestedMap.set(route, currentAction);
-
-      // Create a new abort controller for this action
-      const actionAbortController = new AbortController();
-      actionAbortControllerWeakMap.set(currentAction, actionAbortController);
-      abortSignalMap.set(currentAction, actionAbortController.signal);
-
+      shouldLoad(route);
       continue;
     }
 
     // Handle actions for routes that become inactive - abort them
     if (becomesInactive && ROUTE_DEACTIVATION_STRATEGY === "abort") {
-      const currentAction = routeAction.getCurrentAction();
-      const actionAbortController =
-        actionAbortControllerWeakMap.get(currentAction);
-      if (actionAbortController) {
-        actionAbortController.abort(`route no longer matching`);
-        actionAbortControllerWeakMap.delete(currentAction);
-      }
+      shouldAbort(route);
       continue;
     }
 
@@ -174,16 +198,7 @@ export const updateRoutes = (
           newParams,
         );
       }
-      const currentAction = routeAction.getCurrentAction();
-      if (!replace || currentAction.aborted || currentAction.error) {
-        toReloadSet.add(currentAction);
-        routeLoadRequestedMap.set(route, currentAction);
-        // Create a new abort controller for the reload
-        const actionAbortController = new AbortController();
-        actionAbortControllerWeakMap.set(currentAction, actionAbortController);
-        abortSignalMap.set(currentAction, actionAbortController.signal);
-      }
-      continue;
+      shouldReload(route);
     }
   }
 
@@ -195,7 +210,7 @@ export const updateRoutes = (
     activeRouteSet,
   };
 };
-const extractParams = (urlPattern, url) => {
+const extractParams = (urlPattern, url, ignoreSet = new Set()) => {
   const match = urlPattern.exec(url);
   if (!match) {
     return NO_PARAMS;
@@ -213,12 +228,15 @@ const extractParams = (urlPattern, url) => {
         const keyAsNumber = parseInt(key, 10);
         if (!isNaN(keyAsNumber)) {
           if (value) {
-            // Only include non-empty values
-            params[wildcardOffset + keyAsNumber] = decodeURIComponent(value);
+            // Only include non-empty values and non-ignored wildcard indices
+            const wildcardKey = String(wildcardOffset + keyAsNumber);
+            if (!ignoreSet.has(wildcardKey)) {
+              params[wildcardKey] = decodeURIComponent(value);
+            }
             localWildcardCount++;
           }
-        } else {
-          // Named group (:param or {param})
+        } else if (!ignoreSet.has(key)) {
+          // Named group (:param or {param}) - only include if not ignored
           params[key] = decodeURIComponent(value);
         }
       }
@@ -252,6 +270,7 @@ const createRoute = (urlPatternInput) => {
   };
 
   const route = {
+    urlPattern: urlPatternInput,
     isRoute: true,
     active: false,
     params: NO_PARAMS,
@@ -275,11 +294,13 @@ const createRoute = (urlPatternInput) => {
     visitedSignal: null,
     relativeUrlSignal: null,
     urlSignal: null,
+    optionalParamKeySet: null,
   };
   routePrivatePropertiesMap.set(route, routePrivateProperties);
 
   const buildRelativeUrl = (params = {}) => {
     let relativeUrl = urlPatternInput;
+
     // Replace named parameters (:param and {param})
     for (const key of Object.keys(params)) {
       const value = params[key];
@@ -287,16 +308,25 @@ const createRoute = (urlPatternInput) => {
       relativeUrl = relativeUrl.replace(`:${key}`, encodedValue);
       relativeUrl = relativeUrl.replace(`{${key}}`, encodedValue);
     }
-    // Replace wildcards (*) with numbered parameters (0, 1, 2, etc.)
-    let wildcardIndex = 0;
-    relativeUrl = relativeUrl.replace(/\*/g, () => {
-      const paramKey = wildcardIndex.toString();
-      const replacement = params[paramKey]
-        ? encodeURIComponent(params[paramKey])
-        : "*";
-      wildcardIndex++;
-      return replacement;
-    });
+
+    // Handle wildcards: if the pattern ends with /*? (optional wildcard)
+    // always remove the wildcard part for URL building since it's optional
+    if (relativeUrl.endsWith("/*?")) {
+      // Always remove the optional wildcard part for URL building
+      relativeUrl = relativeUrl.replace(/\/\*\?$/, "");
+    } else {
+      // For required wildcards (/*) or other patterns, replace normally
+      let wildcardIndex = 0;
+      relativeUrl = relativeUrl.replace(/\*/g, () => {
+        const paramKey = wildcardIndex.toString();
+        const replacement = params[paramKey]
+          ? encodeURIComponent(params[paramKey])
+          : "*";
+        wildcardIndex++;
+        return replacement;
+      });
+    }
+
     return relativeUrl;
   };
   const buildUrl = (params = {}) => {
@@ -429,6 +459,23 @@ const createRoute = (urlPatternInput) => {
     routePrivateProperties.relativeUrlSignal = relativeUrlSignal;
     routePrivateProperties.urlSignal = urlSignal;
     routePrivateProperties.cleanupCallbackSet = cleanupCallbackSet;
+
+    // Analyze pattern once to detect optional params (named and wildcard indices)
+    // Note: Wildcard indices are stored as strings ("0", "1", ...) to match keys from extractParams
+    const optionalParamKeySet = new Set();
+    normalizedUrlPattern.replace(/:([A-Za-z0-9_]+)\?/g, (_m, name) => {
+      optionalParamKeySet.add(name);
+      return "";
+    });
+    let wildcardIndex = 0;
+    normalizedUrlPattern.replace(/\*(\?)?/g, (_m, opt) => {
+      if (opt === "?") {
+        optionalParamKeySet.add(String(wildcardIndex));
+      }
+      wildcardIndex++;
+      return "";
+    });
+    routePrivateProperties.optionalParamKeySet = optionalParamKeySet;
   }
 
   return route;
@@ -450,13 +497,16 @@ export const useRouteStatus = (route) => {
     throw new Error(`Cannot find route private properties for ${route}`);
   }
 
-  const { activeSignal, paramsSignal, visitedSignal } = routePrivateProperties;
+  const { urlSignal, activeSignal, paramsSignal, visitedSignal } =
+    routePrivateProperties;
 
+  const url = urlSignal.value;
   const active = activeSignal.value;
   const params = paramsSignal.value;
   const visited = visitedSignal.value;
 
   return {
+    url,
     active,
     params,
     visited,

package/src/store/resource_graph.js

@@ -1,4 +1,6 @@
+import { createIterableWeakSet } from "@jsenv/dom";
 import { computed, signal } from "@preact/signals";
+
 import { getActionPrivateProperties } from "../action_private_properties.js";
 import { createAction, getActionDispatcher } from "../actions.js";
 import { SYMBOL_OBJECT_SIGNAL } from "../symbol_object_signal.js";
@@ -7,7 +9,6 @@ import {
   compareTwoJsValues,
 } from "../utils/compare_two_js_values.js";
 import { getCallerInfo } from "../utils/get_caller_info.js";
-import { createIterableWeakSet } from "../utils/iterable_weak_set.js";
 import { arraySignalStore, primitiveCanBeId } from "./array_signal_store.js";
 
 let DEBUG = false;

package/src/store/tests/{resource_graph_dependencies.test.js → resource_graph_dependencies.test_manual.js}

@@ -51,45 +51,45 @@ console.log(
 );
 
 // Test the autoreload mechanism
-async function testAutoreload() {
-  console.log("\n🧪 Testing autoreload mechanism...");
+async function testAutorerun() {
+  console.log("\n🧪 Testing autorerun mechanism...");
 
   try {
     // Load the parameterized resource
-    const ownershipData = await ROLE_WITH_OWNERSHIP.GET_MANY.load();
+    const ownershipData = await ROLE_WITH_OWNERSHIP.GET_MANY.run();
     console.log(
-      "✅ ROLE_WITH_OWNERSHIP.GET_MANY.load() executed:",
+      "✅ ROLE_WITH_OWNERSHIP.GET_MANY.run() executed:",
       ownershipData.length,
       "items",
     );
 
-    // Trigger dependency changes that should cause autoreload
+    // Trigger dependency changes that should cause autorerun
     console.log("\n📝 Triggering dependency changes...");
 
-    await tables.POST.load({ name: "new_table", database_id: 1 });
+    await tables.POST.run({ name: "new_table", database_id: 1 });
     console.log(
-      "✅ tables.POST.load() - should trigger ROLE_WITH_OWNERSHIP autoreload",
+      "✅ tables.POST.run() - should trigger ROLE_WITH_OWNERSHIP autorerun",
     );
 
-    await database.POST.load({ name: "new_database" });
+    await database.POST.run({ name: "new_database" });
     console.log(
-      "✅ database.POST.load() - should trigger ROLE_WITH_OWNERSHIP autoreload",
+      "✅ database.POST.run() - should trigger ROLE_WITH_OWNERSHIP autorerun",
     );
 
-    await role.POST.load({ name: "new_role" });
+    await role.POST.run({ name: "new_role" });
     console.log(
-      "✅ role.POST.load() - should trigger ROLE_WITH_OWNERSHIP autoreload",
+      "✅ role.POST.run() - should trigger ROLE_WITH_OWNERSHIP autorerun",
     );
 
     console.log("\n✅ Dependency system test completed successfully!");
     console.log(
-      "💡 In a real application, these would automatically reload ROLE_WITH_OWNERSHIP.GET_MANY",
+      "💡 In a real application, these would automatically rerun ROLE_WITH_OWNERSHIP.GET_MANY",
     );
   } catch (error) {
     console.error("❌ Test failed:", error);
   }
 }
 
-testAutoreload();
+testAutorerun();
 
 export { database, role, ROLE_WITH_OWNERSHIP, tables };

package/src/utils/is_signal.js

@@ -0,0 +1,20 @@
+export const isSignal = (value) => {
+  return getSignalType(value) !== null;
+};
+
+const BRAND_SYMBOL = Symbol.for("preact-signals");
+export const getSignalType = (value) => {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+
+  if (value.brand !== BRAND_SYMBOL) {
+    return null;
+  }
+
+  if (typeof value._fn === "function") {
+    return "computed";
+  }
+
+  return "signal";
+};

package/src/utils/stringify_for_display.js

@@ -1,3 +1,7 @@
+import { getSignalType } from "./is_signal.js";
+
+const MAX_ENTRIES = 5;
+
 export const stringifyForDisplay = (
   value,
   maxDepth = 2,
@@ -125,26 +129,3 @@ export const stringifyForDisplay = (
 
   return String(value);
 };
-
-export const isSignal = (value) => {
-  return getSignalType(value) !== null;
-};
-
-const BRAND_SYMBOL = Symbol.for("preact-signals");
-export const getSignalType = (value) => {
-  if (!value || typeof value !== "object") {
-    return null;
-  }
-
-  if (value.brand !== BRAND_SYMBOL) {
-    return null;
-  }
-
-  if (typeof value._fn === "function") {
-    return "computed";
-  }
-
-  return "signal";
-};
-
-const MAX_ENTRIES = 5;

package/src/validation/constraints/confirm_constraint.js

@@ -0,0 +1,14 @@
+export const CONFIRM_CONSTRAINT = {
+  name: "confirm",
+  check: (element) => {
+    const confirmMessage = element.getAttribute("data-confirm");
+    if (!confirmMessage) {
+      return "";
+    }
+    // eslint-disable-next-line no-alert
+    if (window.confirm(confirmMessage)) {
+      return "";
+    }
+    return "";
+  },
+};

package/src/validation/constraints/create_unique_value_constraint.js

@@ -0,0 +1,27 @@
+export const createUniqueValueConstraint = (
+  // the set might be incomplete (the front usually don't have the full copy of all the items from the backend)
+  // but this is already nice to help user with what we know
+  // it's also possible that front is unsync with backend, preventing user to choose a value
+  // that is actually free.
+  // But this is unlikely to happen and user could reload the page to be able to choose that name
+  // that suddenly became available
+  existingValueSet,
+  message = `"{value}" already exists. Please choose another value.`,
+) => {
+  return {
+    name: "unique_value",
+    check: (input) => {
+      const inputValue = input.value;
+      const hasConflict = existingValueSet.has(inputValue);
+      // console.log({
+      //   inputValue,
+      //   names: Array.from(otherNameSet.values()),
+      //   hasConflict,
+      // });
+      if (hasConflict) {
+        return message.replace("{value}", inputValue);
+      }
+      return "";
+    },
+  };
+};