@supersoniks/concorde 4.9.98-visual-stack.1 → 4.9.98-visual-stack.3

package/src/core/mixins/FormElement.ts

@@ -1,55 +1,73 @@
 import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import { property } from "lit/decorators.js";
-import { SubscriberInterface } from "@supersoniks/concorde/core/mixins/Subscriber";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
 import { traverseDotNotation } from "@supersoniks/concorde/core/utils/Objects";
+import HTML from "@supersoniks/concorde/core/utils/HTML";
+import { LitElement } from "lit";
 import {
   PublisherInterface,
   HTMLFormControl,
   CoreJSType,
+  MixinArgsType,
 } from "../_types/types";
-import { MixinArgsType } from "../_types/types";
+
 type Constructor<T> = new (...args: MixinArgsType[]) => T;
+
 export type FormElementValue = string | string[] | object | null | undefined;
-export interface FormElementInterface extends SubscriberInterface {
-  getFormPublisher(): PublisherInterface;
+
+export interface FormElementInterface {
+  getFormPublisher(): PublisherInterface | null;
   updateDataValue(): void;
   handleChange(e?: Event): void;
   handleBlur(e?: Event): void;
   getValueForFormPublisher(): FormElementValue;
-  setValueFromPublisher(value: FormElementValue): void;
   setFormPublisherValue(value: FormElementValue): void;
   getFormPublisherValue(): FormElementValue;
+  setFormValueFromPublisher(value: FormElementValue): void;
   unsetOnDisconnect(): boolean;
   unset(): void;
-
   validateFormElement(): void;
   focus?: () => void;
   forceAutoFill: boolean;
-  shadowRoot?: ShadowRoot;
+  shadowRoot: ShadowRoot | null;
   error: boolean;
   autofocus: boolean;
   required: boolean;
   disabled: boolean;
   formDataProvider: string;
-  ariaLabelledby?: string;
-  ariaLabel?: string;
+  ariaLabel: string | null;
+  ariaLabelledby: string | null;
   _value: FormElementValue;
   get value(): FormElementValue;
   set value(value: FormElementValue);
   _name: string;
   get name(): string;
   set name(value: string);
+  getAncestorAttributeValue(attributeName: string): string;
+  hasAncestorAttribute(attributeName: string): boolean;
+  isConnected: boolean;
+  requestUpdate(): void;
+  getAttribute(name: string): string | null;
+  hasAttribute(attributeName: string): boolean;
+  setAttribute(name: string, value: string): void;
+  removeAttribute(name: string): void;
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  dispatchEvent(event: Event): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
 }
+
 const keyboardLoops = new Map<string, Array<FormElementInterface>>();
-const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
+
+const Form = <T extends Constructor<LitElement>>(superClass: T) => {
   /**
-   * ## FormElement est la mixin utilisée par les éléments de formulaire de concorde ainsi que par le composant sonic-button.
-   * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
-   * * Par défault lorsque l'on édite l'input, la valeur est également mise à jour via le même dataprovider
-   * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseignent l'attribut *formDataProvider*.
-   * * Par conséquent, on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
-   *
+   * ## FormElement — mixin des champs de formulaire Concorde (et sonic-button).
+   * Synchronise `value` avec `formDataProvider` + `name` uniquement
+   * (plus de canal `dataProvider` / mixin Subscriber).
    */
   class FormElement extends superClass implements FormElementInterface {
     @property({ type: Boolean, reflect: true }) touched = false;
@@ -61,19 +79,16 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
 
     /* Attribut data-aria-label pour passer aria-label */
     @property({ type: String, attribute: "data-aria-label" })
-    ariaLabel?: string;
+    ariaLabel: string | null = null;
     @property({ type: String, attribute: "data-aria-labelledby" })
-    ariaLabelledby?: string;
+    ariaLabelledby: string | null = null;
 
-    onValueAssign?: (v: string) => void;
     onFormValueAssign?: (v: string) => void;
     onFormDataInValidate?: VoidFunction;
+
     constructor(...args: MixinArgsType[]) {
       super();
       args;
-      this.onValueAssign = (value) => {
-        this.setValueFromPublisher(value);
-      };
       this.onFormValueAssign = async (value) => {
         this.setFormValueFromPublisher(value);
       };
@@ -85,24 +100,41 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
         this.validateFormElement();
       };
     }
+
+    @property({ type: String })
     formDataProvider = "";
 
-    /**
-     * Le nom du champ avec des caractéristiques similaire à un input html classique.
-     */
+    hasAncestorAttribute(attributeName: string) {
+      return HTML.getAncestorAttributeValue(
+        this as unknown as HTMLElement,
+        attributeName
+      ) != null;
+    }
+
+    getAncestorAttributeValue(attributeName: string) {
+      return (
+        HTML.getAncestorAttributeValue(
+          this as unknown as HTMLElement,
+          attributeName
+        ) || ""
+      );
+    }
+
     _name = "";
     @property() get name(): string {
       return this._name;
     }
     set name(value: string) {
       if (this.hasAttribute("name") && !this.forceAutoFill)
-        value = this.getAttribute("name");
+        value = this.getAttribute("name") as string;
       this._name = value;
       this.requestUpdate();
     }
+
     validateFormElement() {
-      //Implémentation dans une sous classe
+      // Implémentation dans une sous-classe
     }
+
     unsetOnDisconnect() {
       return this.hasAttribute("unsetOnDisconnect");
     }
@@ -117,15 +149,15 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
         }
       }
     }
+
     getFormPublisher() {
       if (!this.formDataProvider)
         this.formDataProvider =
-          this.getAncestorAttributeValue("formDataProvider");
+          this.getAncestorAttributeValue("formDataProvider") || "";
       if (this.formDataProvider) {
         return PublisherManager.get(this.formDataProvider);
       }
       return null;
-      //else return this.publisher;
     }
 
     setFormPublisherValue(value: FormElementValue): void {
@@ -143,31 +175,14 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
       return null;
     }
 
-    /**
-     * Mise en forme de la valeur fournie au formPublisher associé au composant
-     * Destinée à être surchargée si besoin (cf Form-checkable)
-     */
     getValueForFormPublisher() {
       return this.value;
     }
-    /**
-     * Mise à jour de la valeur interne du composant en fonction de la valeur venant du publisher associé au composant
-     * Destinée à être surchargée si besoin (cf Form-checkable)
-     */
-    setValueFromPublisher(value: FormElementValue) {
-      this.value = value;
-    }
 
-    /**
-     * Mise à jour de la valeur interne du composant en fonction de la valeur venant du formPublisher associé au composant
-     * Destinée à être surchargée si besoin (cf Form-checkable)
-     */
     setFormValueFromPublisher(value: FormElementValue) {
       this.value = value;
     }
-    /**
-     * La valeur du champ avec des caractéristiques similaire à un input html classique :
-     */
+
     _value: FormElementValue = "";
     @property() get value() {
       return this._value;
@@ -188,7 +203,8 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
       this.updateDataValue();
       this.requestUpdate();
     }
-    initPublisher() {
+
+    initFormPublisher() {
       let formPublisher = this.getFormPublisher();
       const value =
         this.hasAncestorAttribute("initFromPublisher") &&
@@ -196,22 +212,12 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
         this.getFormPublisherValue()
           ? this.getFormPublisherValue()
           : this.getAttribute("value");
-      if (this._name && this.publisher)
-        traverseDotNotation(this.publisher, this._name).offAssign(
-          this.onValueAssign
-        );
       if (this._name && formPublisher)
         traverseDotNotation(formPublisher, this._name).offAssign(
           this.onFormValueAssign
         );
-      super.initPublisher();
-      if (!this.name) this._name = this.getAttribute("name");
+      if (!this.name) this._name = this.getAttribute("name") || "";
       if (!this.value) this._value = this.getAttribute("value");
-      if (this.publisher && this._name) {
-        traverseDotNotation(this.publisher, this._name).onAssign(
-          this.onValueAssign
-        );
-      }
       formPublisher = this.getFormPublisher();
       if (this._name && formPublisher) {
         traverseDotNotation(formPublisher, this._name).onAssign(
@@ -225,7 +231,6 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
 
     handleBlur() {
       this.touched = true;
-      // this.validateFormElement();
     }
 
     handleChange(e: Event) {
@@ -233,16 +238,10 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
       const event = new Event("change");
       this.dispatchEvent(event);
     }
-    /**
-     * Ajoute un comportement de navigation au clavier pour les éléments de formulaire
-     * data-keyboard-nav peut contenir plusieurs valeurs qui identifient les boucles de navigation auquelles est attaché cet élément.
-     * Les valeurs sont séparées par des espaces.
-     * En appuyant sur la touche "Down", le composant va se déplacer dans la boucle de navigation correspondante en suivant le flux.
-     * En appuyant sur la touche "Up", le déplacement inverse est effectué.
-     */
+
     addKeyboardNavigation() {
       const keyboardLoopIds: string =
-        this.getAncestorAttributeValue("data-keyboard-nav");
+        this.getAncestorAttributeValue("data-keyboard-nav") || "";
       if (!keyboardLoopIds) return;
 
       const split = keyboardLoopIds.split(" ");
@@ -277,7 +276,7 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
           );
         });
 
-        let next: SubscriberInterface | null = null;
+        let next: FormElementInterface | null = null;
         if (keyboardEvent.key == "ArrowDown" && loop) {
           const index = loop.indexOf(this);
           if (index == loop.length - 1) {
@@ -317,13 +316,16 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
     }
 
     connectedCallback(): void {
-      this.formDataProvider = this.getAncestorAttributeValue(
-        "formDataProvider"
-      ) as string;
+      if (!this.formDataProvider) {
+        this.formDataProvider =
+          this.getAncestorAttributeValue("formDataProvider") || "";
+      }
 
       super.connectedCallback();
+      this.initFormPublisher();
       this.addKeyboardNavigation();
     }
+
     unset() {
       this.value = null;
     }
@@ -333,10 +335,6 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
         this.unset();
       }
       super.disconnectedCallback();
-      if (this._name && this.publisher)
-        traverseDotNotation(this.publisher, this._name).offAssign(
-          this.onValueAssign
-        );
       const formPublisher = this.getFormPublisher();
       if (this._name && formPublisher) {
         traverseDotNotation(formPublisher, this._name).offAssign(

package/src/core/mixins/Subscriber.ts

@@ -154,7 +154,11 @@ const Subscriber = <
         typeof value == "string" &&
         ["{", "["].includes(value.trim().charAt(0))
       ) {
-        value = JSON.parse(value);
+        try {
+          value = JSON.parse(value);
+        } catch {
+          /* keep raw string (ex. score/label leaf, not a JSON attr) */
+        }
       }
       if (value == this._props) return;
 

package/src/core/utils/AncestorAttributeObserver.ts

@@ -3,13 +3,14 @@ import HTML, { SearchableDomElement } from "./HTML";
 /**
  * Observateur pour `@ancestorAttribute({ dynamic: true })`.
  *
- * Un MutationObserver sur `document` ne voit pas les mutations dans les shadow
- * roots (Lit par défaut). Chaque abonnement observe donc directement les nœuds
- * de sa chaîne d'ancêtres (composant → parent → … → host shadow), comme
- * `watchScopedConfiguration` dans `api.ts`.
+ * ## Perf (FF / listes denses d'icônes)
+ * Ancien modèle : 1 MO/abonnement avec `childList` sur **toute** la chaîne +
+ * `reconnect()` à chaque mutation → O(n²) quand une list insert des siblings.
  *
- * Après un `childList` (wrapper plus proche, reparenting), la chaîne est
- * recalculée pour écouter les nouveaux ancêtres.
+ * Modèle actuel :
+ * 1. **MO attributs partagés** — 1 observer par `(ancêtre, attributeName)`.
+ * 2. **Reparent** — 1 MO `childList` partagé sur le parent direct ; on ne
+ *    réagit que si *notre* nœud est dans added/removed (insert sibling → no-op).
  */
 
 type SyncOptions = {
@@ -22,7 +23,18 @@ type Subscription = {
   attributeName: string;
   propertyKey: string;
   syncOptions: SyncOptions;
-  disconnectObservers: (() => void) | null;
+  watchedAncestors: Element[];
+  parentForReparent: Element | null;
+};
+
+type AttrSlot = {
+  observer: MutationObserver;
+  subscriptions: Set<Subscription>;
+};
+
+type ParentSlot = {
+  observer: MutationObserver;
+  byComponent: Map<Element, Set<Subscription>>;
 };
 
 /** Chaîne composant → ancêtres, en traversant les shadow roots. */
@@ -40,58 +52,17 @@ function walkAncestorElements(node: Node): Element[] {
   return elements;
 }
 
-/**
- * Observe attributs + enfants directs de chaque ancêtre.
- * Retourne une fonction de nettoyage (disconnect).
- */
-function attachAncestorChainObservers(
-  subscription: Subscription,
-  onMutation: () => void,
-): () => void {
-  const observers: MutationObserver[] = [];
-  let disconnected = false;
-  const attributeFilter = HTML.scopeAttributeNames(subscription.attributeName);
-
-  const reconnect = () => {
-    for (const observer of observers) {
-      observer.disconnect();
-    }
-    observers.length = 0;
-    if (disconnected) return;
-
-    for (const element of walkAncestorElements(subscription.component)) {
-      const observer = new MutationObserver((records) => {
-        if (disconnected) return;
-        if (records.some((record) => record.type === "childList")) {
-          reconnect();
-        }
-        onMutation();
-      });
-      observer.observe(element, {
-        attributes: true,
-        attributeFilter,
-        childList: true,
-        subtree: false,
-      });
-      observers.push(observer);
-    }
-  };
-
-  reconnect();
-
-  return () => {
-    disconnected = true;
-    for (const observer of observers) {
-      observer.disconnect();
-    }
-    observers.length = 0;
-  };
+function directParentElement(component: HTMLElement): Element | null {
+  const parent =
+    component.parentNode ||
+    ((component.getRootNode() as ShadowRoot)?.host ?? null);
+  return parent instanceof Element ? parent : null;
 }
 
 /**
  * Point unique de synchronisation DOM → propriété du composant.
  * N'assigne que si la valeur change (`Object.is`) pour limiter les re-renders Lit
- * et éviter de reboucler inutilement `observeDynamicProperty` (@bind / @subscribe).
+ * et éviter de reboucler inutilement `observeDynamicProperty` (@bind / `@subscribe`).
  */
 export function syncAncestorAttributeValue(
   component: object,
@@ -115,8 +86,11 @@ export default class AncestorAttributeObserver {
   private static pendingRefresh = new Set<Subscription>();
   private static animationFrameId: number | null = null;
 
+  private static attrSlots = new WeakMap<Element, Map<string, AttrSlot>>();
+  private static parentSlots = new WeakMap<Element, ParentSlot>();
+
   /**
-   * Enregistre un composant en mode `{ dynamic: true }`.
+   * Enregistre un composant en mode `{ dynamic: true }` (attributs + reparent).
    * Le `unsubscribe` retourné doit être appelé au `disconnectedCallback`.
    */
   static subscribe(
@@ -130,32 +104,172 @@ export default class AncestorAttributeObserver {
       attributeName,
       propertyKey,
       syncOptions,
-      disconnectObservers: null,
+      watchedAncestors: [],
+      parentForReparent: null,
     };
 
-    subscription.disconnectObservers = attachAncestorChainObservers(
-      subscription,
-      () => {
-        if (!AncestorAttributeObserver.subscriptions.has(subscription)) return;
-        AncestorAttributeObserver.pendingRefresh.add(subscription);
-        AncestorAttributeObserver.scheduleRefresh();
-      },
-    );
-
     AncestorAttributeObserver.subscriptions.add(subscription);
+    AncestorAttributeObserver.bindSubscription(subscription);
 
     return () => {
       AncestorAttributeObserver.unsubscribe(subscription);
     };
   }
 
-  /** Coupe les observateurs et retire l'abonnement (pas de fuite après disconnect). */
+  private static bindSubscription(subscription: Subscription): void {
+    AncestorAttributeObserver.unbindWatchers(subscription);
+
+    const ancestors = walkAncestorElements(subscription.component);
+    subscription.watchedAncestors = ancestors;
+
+    for (const ancestor of ancestors) {
+      AncestorAttributeObserver.addAttrSlot(
+        ancestor,
+        subscription.attributeName,
+        subscription,
+      );
+    }
+
+    const parent = directParentElement(subscription.component);
+    subscription.parentForReparent = parent;
+    if (parent) {
+      AncestorAttributeObserver.addParentSlot(parent, subscription);
+    }
+
+    AncestorAttributeObserver.pendingRefresh.add(subscription);
+    AncestorAttributeObserver.scheduleRefresh();
+  }
+
+  private static unbindWatchers(subscription: Subscription): void {
+    for (const ancestor of subscription.watchedAncestors) {
+      AncestorAttributeObserver.removeAttrSlot(
+        ancestor,
+        subscription.attributeName,
+        subscription,
+      );
+    }
+    subscription.watchedAncestors = [];
+
+    if (subscription.parentForReparent) {
+      AncestorAttributeObserver.removeParentSlot(
+        subscription.parentForReparent,
+        subscription,
+      );
+      subscription.parentForReparent = null;
+    }
+  }
+
+  private static addAttrSlot(
+    element: Element,
+    attributeName: string,
+    subscription: Subscription,
+  ): void {
+    let byAttr = AncestorAttributeObserver.attrSlots.get(element);
+    if (!byAttr) {
+      byAttr = new Map();
+      AncestorAttributeObserver.attrSlots.set(element, byAttr);
+    }
+
+    let slot = byAttr.get(attributeName);
+    if (!slot) {
+      const attributeFilter = HTML.scopeAttributeNames(attributeName);
+      const subscriptions = new Set<Subscription>();
+      const observer = new MutationObserver(() => {
+        for (const sub of subscriptions) {
+          if (!AncestorAttributeObserver.subscriptions.has(sub)) continue;
+          AncestorAttributeObserver.pendingRefresh.add(sub);
+        }
+        AncestorAttributeObserver.scheduleRefresh();
+      });
+      observer.observe(element, {
+        attributes: true,
+        attributeFilter,
+      });
+      slot = { observer, subscriptions };
+      byAttr.set(attributeName, slot);
+    }
+
+    slot.subscriptions.add(subscription);
+  }
+
+  private static removeAttrSlot(
+    element: Element,
+    attributeName: string,
+    subscription: Subscription,
+  ): void {
+    const byAttr = AncestorAttributeObserver.attrSlots.get(element);
+    if (!byAttr) return;
+    const slot = byAttr.get(attributeName);
+    if (!slot) return;
+
+    slot.subscriptions.delete(subscription);
+    if (slot.subscriptions.size > 0) return;
+
+    slot.observer.disconnect();
+    byAttr.delete(attributeName);
+  }
+
+  private static addParentSlot(
+    parent: Element,
+    subscription: Subscription,
+  ): void {
+    let slot = AncestorAttributeObserver.parentSlots.get(parent);
+    if (!slot) {
+      const byComponent = new Map<Element, Set<Subscription>>();
+      const observer = new MutationObserver((records) => {
+        const touched = new Set<Element>();
+        for (const record of records) {
+          record.removedNodes.forEach((n) => {
+            if (n instanceof Element) touched.add(n);
+          });
+          record.addedNodes.forEach((n) => {
+            if (n instanceof Element) touched.add(n);
+          });
+        }
+        for (const el of touched) {
+          const subs = byComponent.get(el);
+          if (!subs) continue;
+          for (const sub of [...subs]) {
+            if (!AncestorAttributeObserver.subscriptions.has(sub)) continue;
+            AncestorAttributeObserver.bindSubscription(sub);
+          }
+        }
+      });
+      observer.observe(parent, { childList: true });
+      slot = { observer, byComponent };
+      AncestorAttributeObserver.parentSlots.set(parent, slot);
+    }
+
+    let set = slot.byComponent.get(subscription.component);
+    if (!set) {
+      set = new Set();
+      slot.byComponent.set(subscription.component, set);
+    }
+    set.add(subscription);
+  }
+
+  private static removeParentSlot(
+    parent: Element,
+    subscription: Subscription,
+  ): void {
+    const slot = AncestorAttributeObserver.parentSlots.get(parent);
+    if (!slot) return;
+
+    const set = slot.byComponent.get(subscription.component);
+    if (set) {
+      set.delete(subscription);
+      if (set.size === 0) slot.byComponent.delete(subscription.component);
+    }
+
+    if (slot.byComponent.size > 0) return;
+    slot.observer.disconnect();
+    AncestorAttributeObserver.parentSlots.delete(parent);
+  }
+
   private static unsubscribe(subscription: Subscription): void {
     if (!AncestorAttributeObserver.subscriptions.has(subscription)) return;
 
-    subscription.disconnectObservers?.();
-    subscription.disconnectObservers = null;
-
+    AncestorAttributeObserver.unbindWatchers(subscription);
     AncestorAttributeObserver.subscriptions.delete(subscription);
     AncestorAttributeObserver.pendingRefresh.delete(subscription);
 
@@ -187,7 +301,6 @@ export default class AncestorAttributeObserver {
 
     for (const subscription of subscriptions) {
       if (!AncestorAttributeObserver.subscriptions.has(subscription)) continue;
-      if (!subscription.component.isConnected) continue;
       syncAncestorAttributeValue(
         subscription.component,
         subscription.attributeName,

package/src/core/utils/LocationHandler.ts

@@ -1,13 +1,20 @@
 import { Route } from "./route";
 
+export type AutoActiveMode =
+  | "strict"
+  | "partial"
+  | "disabled"
+  | "strict-path-only";
+
 declare type Listener = {
   location: string;
 };
-declare type ActivableLink = HTMLElement & {
+
+export type ActivableLink = HTMLElement & {
   location?: string;
   href?: Route | string;
   goBack?: Route | string | null;
-  autoActive?: "strict" | "partial" | "disabled" | "strict-path-only";
+  autoActive?: AutoActiveMode;
   setAttribute(name: string, value: string): void;
   removeAttribute(name: string): void;
 };
@@ -22,7 +29,7 @@ export default class LocationHandler {
   static listening = false;
   static prevURL: string = document.location?.href.replace(
     document.location.origin,
-    ""
+    "",
   );
   static listen() {
     if (!LocationHandler.listening) {
@@ -30,7 +37,7 @@ export default class LocationHandler {
     }
     const newURL = document.location?.href.replace(
       document.location.origin,
-      ""
+      "",
     );
     if (LocationHandler.prevURL && LocationHandler.prevURL != newURL) {
       LocationHandler.prevURL = newURL;
@@ -116,7 +123,7 @@ export default class LocationHandler {
       prevSp = sp;
     }
 
-    to = "/" + newPathName.join("/") + url.search + (url.hash ? +url.hash : "");
+    to = "/" + newPathName.join("/") + url.search + (url.hash ? url.hash : "");
     if (component.hasAttribute("pushState")) {
       history.pushState(null, "", to);
     } else if (component.hasAttribute("replaceState")) {