@jsenv/navi 0.0.1

package/src/utils/merge_two_js_values.js

@@ -0,0 +1,53 @@
+export const MERGE_AS_PRIMITIVE_SYMBOL = Symbol("navi_merge_as_primitive");
+
+export const mergeTwoJsValues = (firstValue, secondValue) => {
+  const firstIsPrimitive =
+    firstValue === null ||
+    typeof firstValue !== "object" ||
+    MERGE_AS_PRIMITIVE_SYMBOL in firstValue;
+
+  if (firstIsPrimitive) {
+    return secondValue;
+  }
+  const secondIsPrimitive =
+    secondValue === null ||
+    typeof secondValue !== "object" ||
+    MERGE_AS_PRIMITIVE_SYMBOL in secondValue;
+  if (secondIsPrimitive) {
+    return secondValue;
+  }
+  const objectMerge = {};
+  const firstKeys = Object.keys(firstValue);
+  const secondKeys = Object.keys(secondValue);
+  let hasChanged = false;
+
+  // First loop: check for keys in first object and recursively merge with second
+  for (const key of firstKeys) {
+    const firstValueForKey = firstValue[key];
+    const secondHasKey = secondKeys.includes(key);
+
+    if (secondHasKey) {
+      const secondValueForKey = secondValue[key];
+      const mergedValue = mergeTwoJsValues(firstValueForKey, secondValueForKey);
+      objectMerge[key] = mergedValue;
+      if (mergedValue !== firstValueForKey) {
+        hasChanged = true;
+      }
+    } else {
+      objectMerge[key] = firstValueForKey;
+    }
+  }
+
+  for (const key of secondKeys) {
+    if (firstKeys.includes(key)) {
+      continue;
+    }
+    objectMerge[key] = secondValue[key];
+    hasChanged = true;
+  }
+
+  if (!hasChanged) {
+    return firstValue;
+  }
+  return objectMerge;
+};

package/src/utils/stringify_for_display.js

@@ -0,0 +1,150 @@
+export const stringifyForDisplay = (
+  value,
+  maxDepth = 2,
+  currentDepth = 0,
+  options = {},
+) => {
+  const { asFunctionArgs = false } = options;
+  const indent = "  ".repeat(currentDepth);
+  const nextIndent = "  ".repeat(currentDepth + 1);
+
+  if (currentDepth >= maxDepth) {
+    return typeof value === "object" && value !== null
+      ? "[Object]"
+      : String(value);
+  }
+
+  if (value === null) {
+    return "null";
+  }
+  if (value === undefined) {
+    return "undefined";
+  }
+  if (typeof value === "string") {
+    return `"${value}"`;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (typeof value === "function") {
+    return `[Function ${value.name || "anonymous"}]`;
+  }
+  if (value instanceof Date) {
+    return `Date(${value.toISOString()})`;
+  }
+  if (value instanceof RegExp) {
+    return value.toString();
+  }
+
+  if (Array.isArray(value)) {
+    const openBracket = asFunctionArgs ? "(" : "[";
+    const closeBracket = asFunctionArgs ? ")" : "]";
+
+    if (value.length === 0) return `${openBracket}${closeBracket}`;
+
+    // Display arrays with only one element on a single line
+    if (value.length === 1) {
+      const item = stringifyForDisplay(
+        value[0],
+        maxDepth,
+        currentDepth + 1,
+        // Remove asFunctionArgs for nested calls
+        { ...options, asFunctionArgs: false },
+      );
+      return `${openBracket}${item}${closeBracket}`;
+    }
+
+    if (value.length > MAX_ENTRIES) {
+      const preview = value
+        .slice(0, MAX_ENTRIES)
+        .map(
+          (v) =>
+            `${nextIndent}${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
+        );
+      return `${openBracket}\n${preview.join(",\n")},\n${nextIndent}...${value.length - MAX_ENTRIES} more\n${indent}${closeBracket}`;
+    }
+
+    const items = value.map(
+      (v) =>
+        `${nextIndent}${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
+    );
+    return `${openBracket}\n${items.join(",\n")}\n${indent}${closeBracket}`;
+  }
+
+  if (typeof value === "object") {
+    const signalType = getSignalType(value);
+    if (signalType) {
+      const signalValue = value.peek();
+      const prefix = signalType === "computed" ? "computed" : "signal";
+      return `${prefix}(${stringifyForDisplay(signalValue, maxDepth, currentDepth, { ...options, asFunctionArgs: false })})`;
+    }
+
+    const entries = Object.entries(value);
+    if (entries.length === 0) return "{}";
+
+    // ✅ Inclure les clés avec valeurs undefined/null
+    const allEntries = [];
+    for (const [key, val] of entries) {
+      allEntries.push([key, val]);
+    }
+
+    // Ajouter les clés avec undefined (que Object.entries omet)
+    const descriptor = Object.getOwnPropertyDescriptors(value);
+    for (const [key, desc] of Object.entries(descriptor)) {
+      if (desc.value === undefined && !entries.some(([k]) => k === key)) {
+        allEntries.push([key, undefined]);
+      }
+    }
+
+    // Display objects with only one key on a single line
+    if (allEntries.length === 1) {
+      const [key, val] = allEntries[0];
+      const valueStr = stringifyForDisplay(val, maxDepth, currentDepth + 1, {
+        ...options,
+        asFunctionArgs: false,
+      });
+      return `{ ${key}: ${valueStr} }`;
+    }
+
+    if (allEntries.length > MAX_ENTRIES) {
+      const preview = allEntries
+        .slice(0, MAX_ENTRIES)
+        .map(
+          ([k, v]) =>
+            `${nextIndent}${k}: ${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
+        );
+      return `{\n${preview.join(",\n")},\n${nextIndent}...${allEntries.length - MAX_ENTRIES} more\n${indent}}`;
+    }
+
+    const pairs = allEntries.map(
+      ([k, v]) =>
+        `${nextIndent}${k}: ${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
+    );
+    return `{\n${pairs.join(",\n")}\n${indent}}`;
+  }
+
+  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/utils/weak_effect.js

@@ -0,0 +1,48 @@
+import { effect } from "@preact/signals";
+
+/**
+ * Creates an effect that uses WeakRef to prevent garbage collection of referenced values.
+ *
+ * This utility is useful when you want to create reactive effects that watch objects
+ * without preventing those objects from being garbage collected. If any of the referenced
+ * values is collected, the effect automatically disposes itself.
+ *
+ * @param {Array} values - Array of values to create weak references for
+ * @param {Function} callback - Function to call when the effect runs, receives dereferenced values as arguments
+ * @returns {Function} dispose - Function to manually dispose the effect
+ *
+ * @example
+ * ```js
+ * const objectA = { name: "A" };
+ * const objectB = { name: "B" };
+ * const prefixSignal = signal('demo');
+ *
+ * const dispose = weakEffect([objectA, objectB], (a, b) => {
+ *   const prefix = prefixSignal.value
+ *   console.log(prefix, a.name, b.name);
+ * });
+ *
+ * // Effect will auto-dispose if objectA or objectB where garbage collected
+ * // or can be manually disposed:
+ * dispose();
+ * ```
+ */
+export const weakEffect = (values, callback) => {
+  const weakRefSet = new Set();
+  for (const value of values) {
+    weakRefSet.add(new WeakRef(value));
+  }
+  const dispose = effect(() => {
+    const values = [];
+    for (const weakRef of weakRefSet) {
+      const value = weakRef.deref();
+      if (value === undefined) {
+        dispose();
+        return;
+      }
+      values.push(value);
+    }
+    callback(...values);
+  });
+  return dispose;
+};