@jsenv/navi 0.10.2 → 0.11.0

package/src/utils/merge_two_js_values.js

@@ -1,53 +0,0 @@
-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

@@ -1,131 +0,0 @@
-import { getSignalType } from "./is_signal.js";
-
-const MAX_ENTRIES = 5;
-
-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);
-};

package/src/utils/weak_effect.js

@@ -1,48 +0,0 @@
-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;
-};

package/src/validation/constraints/confirm_constraint.js

@@ -1,14 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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 "";
-    },
-  };
-};

package/src/validation/constraints/native_constraints.js

@@ -1,338 +0,0 @@
-/**
- * https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation
- */
-
-// this constraint is not really a native constraint and browser just not let this happen at all
-// in our case it's just here in case some code is wrongly calling "requestAction" or "checkValidity" on a disabled element
-export const DISABLED_CONSTRAINT = {
-  name: "disabled",
-  check: (element) => {
-    if (element.disabled) {
-      return `Ce champ est désactivé.`;
-    }
-    return null;
-  },
-};
-
-export const REQUIRED_CONSTRAINT = {
-  name: "required",
-  check: (element, { registerChange }) => {
-    if (!element.required) {
-      return null;
-    }
-    const requiredMessage = element.getAttribute("data-required-message");
-
-    if (element.type === "checkbox") {
-      if (!element.checked) {
-        return requiredMessage || `Veuillez cocher cette case.`;
-      }
-      return null;
-    }
-    if (element.type === "radio") {
-      // For radio buttons, check if any radio with the same name is selected
-      const name = element.name;
-      if (!name) {
-        // If no name, check just this radio
-        if (!element.checked) {
-          return requiredMessage || `Veuillez sélectionner une option.`;
-        }
-        return null;
-      }
-
-      const closestFieldset = element.closest("fieldset");
-      const fieldsetRequiredMessage = closestFieldset
-        ? closestFieldset.getAttribute("data-required-message")
-        : null;
-
-      // Find the container (form or closest fieldset)
-      const container = element.form || closestFieldset || document;
-      // Check if any radio with the same name is checked
-      const radioSelector = `input[type="radio"][name="${CSS.escape(name)}"]`;
-      const radiosWithSameName = container.querySelectorAll(radioSelector);
-      for (const radio of radiosWithSameName) {
-        if (radio.checked) {
-          return null; // At least one radio is selected
-        }
-        registerChange((onChange) => {
-          radio.addEventListener("change", onChange);
-          return () => {
-            radio.removeEventListener("change", onChange);
-          };
-        });
-      }
-
-      return {
-        message:
-          requiredMessage ||
-          fieldsetRequiredMessage ||
-          `Veuillez sélectionner une option.`,
-        target: closestFieldset
-          ? closestFieldset.querySelector("legend")
-          : undefined,
-      };
-    }
-    if (element.value) {
-      return null;
-    }
-    if (requiredMessage) {
-      return requiredMessage;
-    }
-    if (element.type === "password") {
-      return element.hasAttribute("data-same-as")
-        ? `Veuillez confirmer le mot de passe.`
-        : `Veuillez saisir un mot de passe.`;
-    }
-    if (element.type === "email") {
-      return element.hasAttribute("data-same-as")
-        ? `Veuillez confirmer l'adresse e-mail`
-        : `Veuillez saisir une adresse e-mail.`;
-    }
-    return element.hasAttribute("data-same-as")
-      ? `Veuillez confirmer le champ précédent`
-      : `Veuillez remplir ce champ.`;
-  },
-};
-export const PATTERN_CONSTRAINT = {
-  name: "pattern",
-  check: (input) => {
-    const pattern = input.pattern;
-    if (!pattern) {
-      return null;
-    }
-    const value = input.value;
-    if (!value) {
-      return null;
-    }
-    const regex = new RegExp(pattern);
-    if (regex.test(value)) {
-      return null;
-    }
-    const patternMessage = input.getAttribute("data-pattern-message");
-    if (patternMessage) {
-      return patternMessage;
-    }
-    let message = `Veuillez respecter le format requis.`;
-    const title = input.title;
-    if (title) {
-      message += `<br />${title}`;
-    }
-    return message;
-  },
-};
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/email#validation
-const emailregex =
-  /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
-export const TYPE_EMAIL_CONSTRAINT = {
-  name: "type_email",
-  check: (input) => {
-    if (input.type !== "email") {
-      return null;
-    }
-    const value = input.value;
-    if (!value) {
-      return null;
-    }
-    if (!value.includes("@")) {
-      return `Veuillez inclure "@" dans l'adresse e-mail. Il manque un symbole "@" dans ${value}.`;
-    }
-    if (!emailregex.test(value)) {
-      return `Veuillez saisir une adresse e-mail valide.`;
-    }
-    return null;
-  },
-};
-
-export const MIN_LENGTH_CONSTRAINT = {
-  name: "min_length",
-  check: (element) => {
-    if (element.tagName === "INPUT") {
-      if (!INPUT_TYPE_SUPPORTING_MIN_LENGTH_SET.has(element.type)) {
-        return null;
-      }
-    } else if (element.tagName !== "TEXTAREA") {
-      return null;
-    }
-
-    const minLength = element.minLength;
-    if (minLength === -1) {
-      return null;
-    }
-
-    const value = element.value;
-    const valueLength = value.length;
-    if (valueLength === 0) {
-      return null;
-    }
-    if (valueLength < minLength) {
-      const thisField = generateThisFieldText(element);
-      if (valueLength === 1) {
-        return `${thisField} doit contenir au moins ${minLength} caractère (il contient actuellement un seul caractère).`;
-      }
-      return `${thisField} doit contenir au moins ${minLength} caractères (il contient actuellement ${valueLength} caractères).`;
-    }
-    return null;
-  },
-};
-const INPUT_TYPE_SUPPORTING_MIN_LENGTH_SET = new Set([
-  "text",
-  "search",
-  "url",
-  "tel",
-  "email",
-  "password",
-]);
-
-const generateThisFieldText = (field) => {
-  return field.type === "password"
-    ? "Ce mot de passe"
-    : field.type === "email"
-      ? "Cette adresse e-mail"
-      : "Ce champ";
-};
-
-export const MAX_LENGTH_CONSTRAINT = {
-  name: "max_length",
-  check: (element) => {
-    if (element.tagName === "INPUT") {
-      if (!INPUT_TYPE_SUPPORTING_MAX_LENGTH_SET.has(element.type)) {
-        return null;
-      }
-    } else if (element.tagName !== "TEXTAREA") {
-      return null;
-    }
-
-    const maxLength = element.maxLength;
-    if (maxLength === -1) {
-      return null;
-    }
-
-    const value = element.value;
-    const valueLength = value.length;
-    if (valueLength > maxLength) {
-      const thisField = generateThisFieldText(element);
-      return `${thisField} doit contenir au maximum ${maxLength} caractères (il contient actuellement ${valueLength} caractères).`;
-    }
-    return null;
-  },
-};
-const INPUT_TYPE_SUPPORTING_MAX_LENGTH_SET = new Set(
-  INPUT_TYPE_SUPPORTING_MIN_LENGTH_SET,
-);
-
-export const TYPE_NUMBER_CONSTRAINT = {
-  name: "type_number",
-  check: (element) => {
-    if (element.tagName !== "INPUT") {
-      return null;
-    }
-    if (element.type !== "number") {
-      return null;
-    }
-    if (element.value === "") {
-      return null;
-    }
-    const value = element.valueAsNumber;
-    if (isNaN(value)) {
-      return `Doit être un nombre.`;
-    }
-    return null;
-  },
-};
-
-export const MIN_CONSTRAINT = {
-  name: "min",
-  check: (element) => {
-    if (element.tagName !== "INPUT") {
-      return null;
-    }
-    if (element.type === "number") {
-      const minString = element.min;
-      if (minString === "") {
-        return null;
-      }
-      const minNumber = parseFloat(minString);
-      if (isNaN(minNumber)) {
-        return null;
-      }
-      const valueAsNumber = element.valueAsNumber;
-      if (isNaN(valueAsNumber)) {
-        return null;
-      }
-      if (valueAsNumber < minNumber) {
-        const minMessage = element.getAttribute("data-min-message");
-        return (
-          minMessage ||
-          `Doit être supérieur ou égal à <strong>${minString}</strong>.`
-        );
-      }
-      return null;
-    }
-    if (element.type === "time") {
-      const min = element.min;
-      if (min === undefined) {
-        return null;
-      }
-      const [minHours, minMinutes] = min.split(":").map(Number);
-      const value = element.value;
-      const [hours, minutes] = value.split(":").map(Number);
-      if (hours < minHours) {
-        return `Doit être <strong>${min}</strong> ou plus.`;
-      }
-      if (hours === minHours && minMinutes < minutes) {
-        return `Doit être <strong>${min}</strong> ou plus.`;
-      }
-      return null;
-    }
-    // "range"
-    // - user interface do not let user enter anything outside the boundaries
-    // - when setting value via js browser enforce boundaries too
-    // "date", "month", "week", "datetime-local"
-    // - same as "range"
-    return null;
-  },
-};
-
-export const MAX_CONSTRAINT = {
-  name: "max",
-  check: (element) => {
-    if (element.tagName !== "INPUT") {
-      return null;
-    }
-    if (element.type === "number") {
-      const maxString = element.max;
-      if (maxString === "") {
-        return null;
-      }
-      const maxNumber = parseFloat(maxString);
-      if (isNaN(maxNumber)) {
-        return null;
-      }
-      const valueAsNumber = element.valueAsNumber;
-      if (isNaN(valueAsNumber)) {
-        return null;
-      }
-      if (valueAsNumber > maxNumber) {
-        const maxMessage = element.getAttribute("data-max-message");
-        return maxMessage || `Doit être <strong>${maxString}</strong> ou plus.`;
-      }
-      return null;
-    }
-    if (element.type === "time") {
-      const max = element.min;
-      if (max === undefined) {
-        return null;
-      }
-      const [maxHours, maxMinutes] = max.split(":").map(Number);
-      const value = element.value;
-      const [hours, minutes] = value.split(":").map(Number);
-      if (hours > maxHours) {
-        return `Doit être <strong>${max}</strong> ou moins.`;
-      }
-      if (hours === maxHours && maxMinutes > minutes) {
-        return `Doit être <strong>${max}</strong> ou moins.`;
-      }
-      return null;
-    }
-    return null;
-  },
-};

package/src/validation/constraints/readonly_constraint.js

@@ -1,41 +0,0 @@
-export const READONLY_CONSTRAINT = {
-  name: "readonly",
-  check: (element, { skipReadonly }) => {
-    if (skipReadonly) {
-      return null;
-    }
-    if (!element.readonly && !element.hasAttribute("data-readonly")) {
-      return null;
-    }
-    if (element.type === "hidden") {
-      return null;
-    }
-    const readonlySilent = element.hasAttribute("data-readonly-silent");
-    if (readonlySilent) {
-      return { silent: true };
-    }
-    const readonlyMessage = element.getAttribute("data-readonly-message");
-    if (readonlyMessage) {
-      return {
-        message: readonlyMessage,
-        level: "info",
-      };
-    }
-    const isBusy = element.getAttribute("aria-busy") === "true";
-    if (isBusy) {
-      return {
-        target: element,
-        message: `Cette action est en cours. Veuillez patienter.`,
-        level: "info",
-      };
-    }
-    return {
-      target: element,
-      message:
-        element.tagName === "BUTTON"
-          ? `Cet action n'est pas disponible pour l'instant.`
-          : `Cet élément est en lecture seule et ne peut pas être modifié.`,
-      level: "info",
-    };
-  },
-};

package/src/validation/constraints/same_as_constraint.js

@@ -1,42 +0,0 @@
-export const SAME_AS_CONSTRAINT = {
-  name: "same_as",
-  check: (element) => {
-    const sameAs = element.getAttribute("data-same-as");
-    if (!sameAs) {
-      return null;
-    }
-
-    const otherElement = document.querySelector(sameAs);
-    if (!otherElement) {
-      console.warn(
-        `Same as constraint: could not find element for selector ${sameAs}`,
-      );
-      return null;
-    }
-
-    const value = element.value;
-    const otherValue = otherElement.value;
-    if (value === "" || otherValue === "") {
-      // don't validate if one of the two values is empty
-      return null;
-    }
-
-    if (value === otherValue) {
-      return null;
-    }
-
-    const message = element.getAttribute("data-same-as-message");
-    if (message) {
-      return message;
-    }
-
-    const type = element.type;
-    if (type === "password") {
-      return `Ce mot de passe doit être identique au précédent.`;
-    }
-    if (type === "email") {
-      return `Cette adresse e-mail doit être identique a la précédente.`;
-    }
-    return `Ce champ doit être identique au précédent.`;
-  },
-};