@jsenv/navi 0.16.49 → 0.16.51

package/dist/jsenv_navi.js

@@ -300,7 +300,9 @@ const getSignalType = (value) => {
  *
  * @param {any} a - First value to compare
  * @param {any} b - Second value to compare
- * @param {Set} seenSet - Internal cycle detection set (automatically managed)
+ * @param {Object} [options={}] - Comparison options
+ * @param {Function} [options.keyComparator] - Custom comparator function for object properties and array elements
+ * @param {boolean} [options.ignoreArrayOrder=false] - If true, arrays are considered equal regardless of element order
  * @returns {boolean} true if values are deeply equal, false otherwise
  */
 
@@ -319,7 +321,11 @@ const getSignalType = (value) => {
  */
 const SYMBOL_IDENTITY = Symbol.for("navi_object_identity");
 
-const compareTwoJsValues = (rootA, rootB, { keyComparator } = {}) => {
+const compareTwoJsValues = (
+  rootA,
+  rootB,
+  { keyComparator, ignoreArrayOrder = false } = {},
+) => {
   const seenSet = new Set();
   const compare = (a, b) => {
     if (a === b) {
@@ -370,6 +376,32 @@ const compareTwoJsValues = (rootA, rootB, { keyComparator } = {}) => {
       if (a.length !== b.length) {
         return false;
       }
+      if (ignoreArrayOrder) {
+        // Unordered array comparison: each element in 'a' must have a match in 'b'
+        const usedIndices = new Set();
+        for (let i = 0; i < a.length; i++) {
+          const aValue = a[i];
+          let foundMatch = false;
+
+          for (let j = 0; j < b.length; j++) {
+            if (usedIndices.has(j)) continue; // Already matched with another element
+
+            const bValue = b[j];
+            const comparator = keyComparator || compare;
+            if (comparator(aValue, bValue, i, compare)) {
+              foundMatch = true;
+              usedIndices.add(j);
+              break;
+            }
+          }
+
+          if (!foundMatch) {
+            return false;
+          }
+        }
+        return true;
+      }
+      // Ordered array comparison (original behavior)
       let i = 0;
       while (i < a.length) {
         const aValue = a[i];
@@ -2393,11 +2425,17 @@ const stateSignal = (defaultValue, options = {}) => {
     if (dynamicDefaultSignal) {
       const dynamicValue = dynamicDefaultSignal.peek();
       if (dynamicValue === undefined) {
-        return value !== staticDefaultValue;
+        return !compareTwoJsValues(value, staticDefaultValue, {
+          ignoreArrayOrder: true,
+        });
       }
-      return value !== dynamicValue;
+      return !compareTwoJsValues(value, dynamicValue, {
+        ignoreArrayOrder: true,
+      });
     }
-    return value !== staticDefaultValue;
+    return !compareTwoJsValues(value, staticDefaultValue, {
+      ignoreArrayOrder: true,
+    });
   };
 
   // Create signal with initial value: use stored value, or undefined to indicate no explicit value
@@ -2553,6 +2591,21 @@ const stateSignal = (defaultValue, options = {}) => {
     }
     effect(() => {
       const value = preactSignal.value;
+
+      if (dynamicDefaultSignal) {
+        // With dynamic defaults: always persist to preserve user intent
+        // even when value matches dynamic defaults that may change
+        if (value !== undefined) {
+          if (debug) {
+            console.debug(
+              `[stateSignal:${signalIdString}] dynamic default: writing to localStorage "${localStorageKey}"=${value}`,
+            );
+          }
+          writeIntoLocalStorage(value);
+        }
+        return;
+      }
+      // Static defaults: only persist custom values
       if (isCustomValue(value)) {
         if (debug) {
           console.debug(
@@ -2630,6 +2683,7 @@ const localStorageTypeMap = {
   date: "string",
   time: "string",
   email: "string",
+  array: "object",
 };
 
 const getCallerInfo = (targetFunction = null, additionalOffset = 0) => {
@@ -7578,8 +7632,17 @@ const buildQueryString = (params) => {
     if (value !== undefined && value !== null) {
       const encodedKey = encodeURIComponent(key);
 
+      // Handle array values - join with commas
+      if (Array.isArray(value)) {
+        if (value.length === 0) ; else {
+          const encodedValue = value
+            .map((item) => encodeURIComponent(String(item)))
+            .join(",");
+          searchParamPairs.push(`${encodedKey}=${encodedValue}`);
+        }
+      }
       // Handle boolean values - if true, just add the key without value
-      if (value === true || value === "") {
+      else if (value === true || value === "") {
         searchParamPairs.push(encodedKey);
       } else {
         const encodedValue = encodeParamValue(value, false); // Search params encode slashes
@@ -7702,7 +7765,6 @@ const createRoutePattern = (pattern) => {
   const signalSet = new Set();
   for (const connection of connections) {
     connectionMap.set(connection.paramName, connection);
-
     signalSet.add(connection.signal);
   }
 
@@ -7717,7 +7779,7 @@ const createRoutePattern = (pattern) => {
   const applyOn = (url) => {
     const result = matchUrl(parsedPattern, url, {
       baseUrl,
-      connections,
+      connectionMap,
       patternObj: patternObject,
     });
 
@@ -9531,7 +9593,7 @@ const checkIfLiteralCanBeOptionalWithPatternObj = (
 const matchUrl = (
   parsedPattern,
   url,
-  { baseUrl, connections = [], patternObj = null },
+  { baseUrl, connectionMap, patternObj = null },
 ) => {
   // Parse the URL
   const urlObj = new URL(url, baseUrl);
@@ -9554,14 +9616,14 @@ const matchUrl = (
   // OR when URL exactly matches baseUrl (treating baseUrl as root)
   if (parsedPattern.segments.length === 0) {
     if (pathname === "/" || pathname === "") {
-      return extractSearchParams(urlObj, connections);
+      return extractSearchParams(urlObj, connectionMap);
     }
 
     // Special case: if URL exactly matches baseUrl, treat as root route
     if (baseUrl) {
       const baseUrlObj = new URL(baseUrl);
       if (originalPathname === baseUrlObj.pathname) {
-        return extractSearchParams(urlObj, connections);
+        return extractSearchParams(urlObj, connectionMap);
       }
     }
 
@@ -9651,7 +9713,7 @@ const matchUrl = (
   // If pattern has trailing slash, wildcard, or children, allow extra segments
 
   // Add search parameters
-  const searchParams = extractSearchParams(urlObj, connections);
+  const searchParams = extractSearchParams(urlObj, connectionMap);
   Object.assign(params, searchParams);
 
   // Don't add defaults here - rawParams should only contain what's in the URL
@@ -9663,36 +9725,75 @@ const matchUrl = (
 /**
  * Extract search parameters from URL
  */
-const extractSearchParams = (urlObj, connections = []) => {
+const extractSearchParams = (urlObj, connectionMap) => {
   const params = {};
 
-  // Create a map for quick signal type lookup
-  const signalTypes = new Map();
-  for (const connection of connections) {
-    if (connection.type) {
-      signalTypes.set(connection.paramName, connection.type);
+  // Parse the raw query string manually instead of using urlObj.searchParams
+  // This is necessary for array parameters to handle encoded commas correctly.
+  // urlObj.searchParams automatically decodes %2C to , which breaks our comma-based array splitting.
+  //
+  // Design choice: We use comma-separated values (colors=red,blue,green) instead of
+  // the standard repeated parameters (colors=red&colors=blue&colors=green) because:
+  // 1. More human-readable URLs
+  // 2. Shorter URL length
+  // 3. Easier to copy/paste and manually edit
+  if (!urlObj.search) {
+    return params;
+  }
+
+  const rawQuery = urlObj.search.slice(1); // Remove leading ?
+  const pairs = rawQuery.split("&");
+
+  for (const pair of pairs) {
+    const eqIndex = pair.indexOf("=");
+    let key;
+    let rawValue;
+
+    if (eqIndex > -1) {
+      key = decodeURIComponent(pair.slice(0, eqIndex));
+      rawValue = pair.slice(eqIndex + 1); // Keep raw for array processing
+    } else {
+      key = decodeURIComponent(pair);
+      rawValue = "";
     }
-  }
 
-  for (const [key, value] of urlObj.searchParams) {
-    const signalType = signalTypes.get(key);
+    const connection = connectionMap.get(key);
+    const signalType = connection ? connection.type : null;
 
     // Cast value based on signal type
-    if (signalType === "number" || signalType === "float") {
-      const numberValue = Number(value);
-      params[key] = isNaN(numberValue) ? value : numberValue;
+    if (signalType === "array") {
+      // Handle array query parameters with proper comma encoding:
+      // ?colors=red,blue,green → ["red", "blue", "green"]
+      // ?colors=red,blue%2Cgreen → ["red", "blue,green"] (comma in value)
+      // ?colors= → []
+      // ?colors → []
+      if (rawValue === "") {
+        params[key] = [];
+      } else {
+        params[key] = rawValue
+          .split(",")
+          .map((item) => decodeURIComponent(item))
+          .filter((item) => item.trim() !== "");
+      }
+    } else if (signalType === "number" || signalType === "float") {
+      const decodedValue = decodeURIComponent(rawValue);
+      const numberValue = Number(decodedValue);
+      params[key] = isNaN(numberValue) ? decodedValue : numberValue;
     } else if (signalType === "boolean") {
+      const decodedValue = decodeURIComponent(rawValue);
       // Handle boolean query parameters:
       // ?walk=true → true
       // ?walk=1 → true
       // ?walk → true (parameter present without value)
       // ?walk=false → false
       // ?walk=0 → false
-      params[key] = value === "true" || value === "1" || value === "";
+      params[key] =
+        decodedValue === "true" || decodedValue === "1" || decodedValue === "";
     } else {
-      params[key] = value;
+      params[key] = decodeURIComponent(rawValue);
     }
   }
+
   return params;
 };