@supersoniks/concorde 2.0.7 → 3.0.0

package/src/core/mixins/Subscriber.ts

@@ -0,0 +1,352 @@
+import {APIConfiguration} from "@supersoniks/concorde/core/utils/api";
+import DataBindObserver from "@supersoniks/concorde/core/utils/DataBindObserver";
+import HTML from "@supersoniks/concorde/core/utils/HTML";
+import Objects from "@supersoniks/concorde/core/utils/Objects";
+import {PublisherManager} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import {LitElement, PropertyValues} from "lit";
+import {property} from "lit/decorators.js";
+import WordingDirective from "../directives/Wording";
+import {PublisherInterface, TypeAndRecordOfType, ConcordeWindow, MixinArgsType, CoreJSType} from "@supersoniks/concorde/core/_types/types";
+declare const window: ConcordeWindow;
+type Constructor<T> = new (...args: MixinArgsType[]) => T;
+let keepDebugOnMouseOut = false;
+let debugs = new Set<HTMLElement>();
+export interface SubscriberInterface<PropsType = CoreJSType> {
+  props: PropsType | null;
+  propertyMap: object;
+  isConnected: boolean;
+  children: HTMLCollection;
+  appendChild(node: Node): Node;
+  getAncestorAttributeValue(attributeName: string): string;
+  hasAncestorAttribute(attributeName: string): boolean;
+  querySelectorAll(selector: string): NodeListOf<Element>;
+  publisher: TypeAndRecordOfType<PublisherInterface<PropsType>>;
+  dataProvider: string | null;
+  noShadowDom: string | null;
+  debug: HTMLElement | null;
+  defferedDebug: boolean | null;
+  displayContents: boolean;
+  shadowRoot?: ShadowRoot;
+  dispatchEvent(event: Event): void;
+  setAttribute(name: string, value: string): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+  removeAttribute(name: string): void;
+  initPublisher(): void;
+  getApiConfiguration(): APIConfiguration;
+  connectedCallback(): void;
+  requestUpdate(): void;
+  getAttribute(name: string): string;
+  hasAttribute(attributeName: string): boolean;
+  disconnectedCallback(): void;
+  getBoundingClientRect(): DOMRect;
+}
+
+const Subscriber = <PropsType = CoreJSType, T extends Constructor<LitElement> = Constructor<LitElement>>(
+  superClass: T,
+  type?: PropsType
+) => {
+  /**
+   * La mixin Subscriber permet lier un composant à un publisher.
+   * La liaison à un publisher se fait via l'attribut *dataProvider* du composant qui représente ce que l'on obtient en appellant PublisherManager.get(dataProvider).
+   * les propriétés du composant sont automatiquement remplies avec les propriétés du même nom dans les données du publisher.
+   * Le composant est automatiquement mis à jour lorsque les données du publisher sont mises à jour.
+   */
+  type;
+  class SubscriberElement extends superClass {
+    static instanceCounter = 0;
+
+    publisher?: TypeAndRecordOfType<PublisherInterface<PropsType>>;
+    constructor(...args: MixinArgsType[]) {
+      super();
+      args;
+    }
+
+    @property({type: Number}) collectDependenciesVersion = 0;
+
+    @property({type: Boolean}) displayContents = false;
+
+    /**
+     * noAutoFill permet de désactiver le remplissage automatique des propriétés par le publisher dans le cas ou on utilise "props" seulement ou le dataBinding par exemple
+     */
+    @property({type: Boolean}) noAutoFill = false;
+
+    @property({type: Boolean}) forceAutoFill = false;
+
+    /**
+     * Passer ce paramètre à true permet de ne pas mettre à jour le composant lors d'un changement de interne de la propriété nommé props.
+     */
+    renderOnPropsInternalChange = false;
+
+    /**
+     * Par défaut on chée un shadow dom mais on peut demander à ne pas en avoir via cette propriété et un attribut associé.
+     * Cela se fait à l'initialisation uniquement et n'est pas modifiable lors de la vie du composant.
+     */
+    noShadowDom: string | null = null;
+
+    /**
+     * Permet de mapper un nom de propriété de donnée source vars une propriété du subscriber à la volée
+     */
+
+    @property({type: Object}) propertyMap: object | null = null;
+    @property({type: String, attribute: "data-title"}) title = "";
+
+    /**
+     * va de parent en parent pour trouver un attribut
+     * @param attributeName nom de l'attribut
+     * @returns true si l'attribut est trouvé
+     */
+    hasAncestorAttribute(attributeName: string) {
+      return this.getAncestorAttributeValue(attributeName) != null;
+    }
+    /**
+     * Va de parent en parent pour trouver un attribut
+     * @param attributeName nom de l'attribut
+     * @returns valeur de l'attribut ou null si l'attribut n'est pas trouvé
+     */
+    getAncestorAttributeValue(attributeName: string) {
+      return HTML.getAncestorAttributeValue(this, attributeName);
+    }
+
+    /**
+     * L'id / l'adresse du publisher accessible via PublisherManager.get(dataProvider)
+     */
+    @property({reflect: true}) dataProvider: string | null = null;
+
+    /**
+     * On peut utiliser cette fonction pour lier un publisher spécifique au composant si besoin.
+     * voir l'utilisation dans list.ts
+     */
+    @property() bindPublisher: (() => PublisherInterface<PropsType>) | null = null;
+
+    /**
+     * Les props du composant.
+     * Elles sont injectées en profondeur dans le publisher pour permettre la mutualisation des données entre les composants.
+     * Par conséquent l'assignation de ces propriété avec une chaine json (html classic), ou un objet / un tableaun remplie les données du publisher.
+     * Les propriétés des subscribers associés au même dataProvider sont donc "remplies" avec ces données, voir aussi le dataBinding à ce sujet.
+     */
+    protected _props: PropsType | null = null;
+    @property() get props() {
+      if (this._props !== null || !this.publisher) return this._props;
+      return this.publisher.get();
+    }
+    set props(value) {
+      if (typeof value == "string" && ["{", "["].includes(value.trim().charAt(0))) {
+        value = JSON.parse(value);
+      }
+      if (value == this._props) return;
+
+      this._props = value;
+
+      // if (!this.publisher) this.initPublisher();
+
+      if (this.publisher && this.publisher.get() != value) {
+        this.publisher.set(value);
+      }
+      this.requestUpdate();
+    }
+    protected updated(_changedProperties: PropertyValues): void {
+      super.updated(_changedProperties);
+      const ref = this.shadowRoot || this;
+      const children = [...ref.children].filter((child) => child.tagName != "STYLE");
+      const display = this.displayContents ? "contents" : children.length == 0 ? "none" : null;
+      if (display) this.style.display = display;
+      else this.style.removeProperty("display");
+    }
+    connectedCallback() {
+      SubscriberElement.instanceCounter++;
+      if (this.hasAttribute("lazyRendering")) {
+        const options: IntersectionObserverInit = {
+          root: null,
+          // rootMargin: Math.max(window.innerWidth, window.innerHeight) + "px",
+          threshold: 0.9,
+        };
+
+        let firstView = true;
+        const iObserver = new IntersectionObserver((entries) => {
+          for (const e of entries) {
+            if (firstView && e.isIntersecting) {
+              this.addDebugger();
+              firstView = false;
+              this.initWording();
+              this.initPublisher();
+              iObserver.disconnect();
+              break;
+            }
+          }
+        }, options);
+        iObserver.observe(this);
+      } else {
+        this.initWording();
+        this.initPublisher();
+        this.addDebugger();
+      }
+      super.connectedCallback();
+    }
+
+    disconnectedCallback() {
+      this.removeDebugger();
+      super.disconnectedCallback();
+      if (this.publisher) {
+        this.publisher.stopTemplateFilling(this);
+        this.publisher.offInternalMutation(this.requestUpdate);
+      }
+      WordingDirective.publisher.stopTemplateFilling(this);
+      if (this.onAssign) this.publisher?.offAssign(this.onAssign);
+    }
+    defferedDebug: true | null = null;
+    /**
+     * Ajoute un debugger au composant pour afficher en temps réel les données présentes dans sont publisher
+     */
+    debug: HTMLElement | null = null;
+    addDebugger() {
+      if (this.hasAttribute("debug") && !this.defferedDebug) {
+        if (!this.debug) {
+          this.debug = document.createElement("div");
+          const style = this.debug.style;
+          style.position = "fixed";
+          style.top = "0";
+          style.right = "0";
+          style.margin = "auto";
+          style.borderRadius = ".7rem";
+          style.backgroundColor = "#0f1729";
+          style.color = "#c5d4f9";
+          style.padding = "16px 16px";
+          style.margin = "16px 16px";
+          style.boxShadow = "0 10px 30px -18px rgba(0,0,0,.3)";
+          style.overflowY = "auto";
+          style.zIndex = "99999999";
+          style.maxHeight = "calc(100vh - 32px)";
+          style.fontFamily = "Consolas, monospace";
+          style.maxWidth = "min(50vw,25rem)";
+          style.fontSize = "12px";
+          style.minWidth = "300px";
+          style.overflowWrap = "break-word";
+          style.resize = "vertical";
+        }
+        this.addEventListener("click", (e: MouseEvent) => {
+          if (!e.ctrlKey) return;
+          e.preventDefault();
+          keepDebugOnMouseOut = !keepDebugOnMouseOut;
+        });
+
+        if (this.dataProvider) {
+          window[this.dataProvider] = this.publisher;
+        }
+
+        this.addEventListener("mouseover", () => {
+          if (!keepDebugOnMouseOut) this.removeDebugger();
+          document.body.appendChild(this.debug as Node);
+          debugs.add(this.debug as HTMLElement);
+        });
+        this.addEventListener("mouseout", () => {
+          if (!keepDebugOnMouseOut) this.removeDebugger();
+        });
+        this.publisher?.onInternalMutation(() => {
+          (this.debug as HTMLElement).innerHTML = `🤖 DataProvider : "<b style="font-weight:bold;color:#fff;">${this.dataProvider}</b>"<br>
+          <div style="font-size:10px;border-top:1px dashed;margin-top:5px;padding-left:23px;opacity:.6;padding-top:5px;">
+            Variable disponible dans la console<br>
+            ctrl + Clique : épingler / désépingler
+           </div>
+          <pre style="margin-top:10px;background:transparent;padding:0;font-size:inherit;color:inherit;">${JSON.stringify(
+            this.publisher?.get(),
+            null,
+            "  "
+          )}</pre>`;
+        });
+      }
+    }
+    removeDebugger() {
+      debugs.forEach((debug) => {
+        if (document.body.contains(debug)) document.body.removeChild(debug);
+      });
+      debugs = new Set();
+    }
+    /**
+     * Petite fonction utilitaire pour retourner la configuration a passer à l'utilitaire API
+     * Utilisée pour la configuration du wording / de la traduction ainsi que par le mixin fetcher par exemple
+     * A voir si on le bouge dans un utilitaire
+     */
+    getApiConfiguration(): APIConfiguration {
+      return HTML.getApiConfiguration(this);
+    }
+    /**
+     * Initialise le remplisage automatique des traductions / du wording
+     * Un publisher spécifique est créé pour le composant à l'adresse "sonic-wording"
+     * Le composant recherche la valeur de l'attribute "wordingProvider" que contient le point d'accès à l'api de traduction / libellés
+     * Il utilise ce service et le publisher créé pour remplir automatiquement toutes les propriétés préfixées avec "wording_".
+     */
+    async initWording() {
+      const propNames = Object.getOwnPropertyNames(this.constructor.prototype);
+      for (const p of propNames) {
+        if (p.indexOf("wording_") == 0) {
+          WordingDirective.callApi(this, p.substring(8));
+        }
+      }
+      WordingDirective.publisher.startTemplateFilling(this);
+    }
+    /**
+     *
+     * Fonction native de lit surchargée pour la gestion du mode noShadowDom
+     * Le comportement de data binding est également créé ici va l'utilitaire DataBindObserver
+     */
+    createRenderRoot() {
+      if (this.noShadowDom === "" || this.getAttribute("noShadowDom") === "") {
+        return this;
+      }
+      const shadowRoot = super.createRenderRoot();
+      DataBindObserver.observe(shadowRoot as HTMLElement);
+      return shadowRoot;
+    }
+    /**
+     * On assign est enregistré car c'est un écouteur du publisher qui doit être délié lorsque l'objet est déconnecté du dom.
+     */
+    private onAssign = (v: PropsType) => {
+      this.props = v;
+    };
+
+    initPublisher() {
+      if (!document) return;
+      if (this.publisher) {
+        this.publisher.stopTemplateFilling(this);
+        this.publisher.offInternalMutation(this.requestUpdate);
+        if (this.onAssign) this.publisher.offAssign(this.onAssign);
+      }
+      const mng = PublisherManager.getInstance();
+      if (!this.dataProvider) this.dataProvider = this.getAncestorAttributeValue("dataProvider");
+      let publisherId = this.dataProvider;
+      if (!publisherId && this._props) {
+        this.dataProvider = publisherId = "__subscriber__" + SubscriberElement.instanceCounter;
+      }
+      if (publisherId) {
+        if (this.bindPublisher) {
+          mng.set(publisherId, this.bindPublisher());
+        }
+
+        let pub = mng.get(publisherId, {localStorageMode: this.getAttribute("localStorage") || "disabled"});
+        this.dataProvider = publisherId;
+
+        if (this.hasAttribute("subDataProvider")) {
+          const dataPath: string = this.getAttribute("subDataProvider") as string;
+          this.dataProvider = publisherId + "/" + dataPath;
+          pub = Objects.traverse(pub, dataPath.split("."));
+          mng.set(this.dataProvider, pub);
+          this.publisher = pub;
+        }
+        this.publisher = pub;
+      }
+      if (this.publisher) {
+        if (this._props) {
+          this.publisher.set(this._props);
+        }
+        if (!this.noAutoFill) this.publisher.startTemplateFilling(this);
+        if (this.renderOnPropsInternalChange) this.publisher.onInternalMutation(this.requestUpdate);
+        this.publisher.onAssign(this.onAssign);
+      }
+    }
+  }
+  return SubscriberElement as Constructor<SubscriberInterface<PropsType>> & T;
+};
+export default Subscriber;
+
+if (!window.SonicPublisherManager) window.SonicPublisherManager = PublisherManager;

package/src/core/mixins/TemplatesContainer.ts

@@ -0,0 +1,70 @@
+import {property} from "lit/decorators.js";
+import {LitElement} from "lit";
+import {MixinArgsType} from "../_types/types";
+type Constructor<T> = new (...args: MixinArgsType[]) => T;
+
+export declare class TemplatesContainerInterface extends LitElement {
+  connectedCallback(): void;
+  templateParts: Record<string, HTMLTemplateElement>;
+  templatePartsList: HTMLTemplateElement[];
+  templates: HTMLTemplateElement[];
+  templateList: HTMLTemplateElement[];
+  templateValueAttribute: string;
+}
+const TemplatesContainer = <T extends Constructor<LitElement>>(superClass: T) => {
+  /**
+   * Mixin pour mutualiser la gestion des templates dans différents composants (list, router, date, states...)
+   * Les templates sont soit dans aus sein du composant dans la déclaration html, soit renseignés via l'attribut "templates"
+   */
+  class TemplatesContainerElement extends superClass {
+    /**
+     * On peut passer directement un tableu de template au composant via sont attribut.
+     * Voir utilisation dans le composant queue qui permet de ne pas doubler les balises templates à la déclaration.
+     */
+    @property({type: Array}) templates: Array<HTMLTemplateElement> | null = null;
+    /**
+     * C'est le nom de l'attribut qui permet de regrouper les templates possédant cet attributs dans templateParts et templatePartsList.
+     * Ceux qui n'ont pas cet attribut sont stockés dans templateList
+     */
+    templateValueAttribute = "data-value";
+    /**
+     * Tableau contenant tous les templates qui n'on pas d'attribut templateValueAttribute
+     */
+    templateList: HTMLTemplateElement[] = [];
+
+    /**
+     * Objet contenant tous les templates qui ont un attribut templateValueAttribute.
+     * Les clefs sont la valeur de l'attribut du template dont le nom est la valeur de templateValueAttribute.
+     */
+    templateParts: Record<string, HTMLTemplateElement> = {};
+    /**
+     * Comme template parts mais sous forme de tableau, sans les clefs.
+     */
+    templatePartsList: HTMLTemplateElement[] = [];
+    connectedCallback() {
+      const templates = this.templates || ([...this.querySelectorAll("template")] as HTMLTemplateElement[]);
+
+      for (const t of templates) {
+        if (t.hasAttribute(this.templateValueAttribute)) {
+          this.templateParts[t.getAttribute(this.templateValueAttribute) as string] = t;
+          this.templatePartsList.push(t);
+        }
+        if (t.hasAttribute("skeleton")) {
+          this.templateParts["skeleton"] = t;
+        }
+        if (t.hasAttribute("no-result")) {
+          this.templateParts["no-result"] = t;
+        }
+
+        if (t.hasAttribute("no-item")) {
+          this.templateParts["no-item"] = t;
+        }
+      }
+      this.templateList = templates.filter((t) => !t.getAttribute("data-value"));
+      if (this.templateList.length == 0) this.templateList = templates;
+      super.connectedCallback();
+    }
+  }
+  return TemplatesContainerElement as Constructor<TemplatesContainerInterface> & T;
+};
+export default TemplatesContainer;

package/{core/mixins/mixins.d.ts → src/core/mixins/mixins.ts}

@@ -3,4 +3,4 @@ import "./FormCheckable";
 import "./FormElement";
 import "./FormInput";
 import "./Subscriber";
-import "./TemplatesContainer";
+import "./TemplatesContainer";

package/src/core/utils/Arrays.ts

@@ -0,0 +1,161 @@
+class Arrays {
+  /**
+   * Vérifie si les deux tableaux ont le même contenu
+   */
+  static areEqual<U>(array1: Array<U>, array2: Array<U>) {
+    if (array1.length === array2.length) {
+      return array1.every((element, index) => {
+        if (element === array2[index]) {
+          return true;
+        }
+
+        return false;
+      });
+    }
+
+    return false;
+  }
+
+  /**
+   * Fournie une fonction to1D qui transforme un tableau 2D en un tableau 1D par concaténation
+   */
+
+  /*eslint-disable @typescript-eslint/no-explicit-any*/
+  static from2d(source: any) {
+    return {
+      to1D: () => {
+        let result: Array<any> = [];
+        source.forEach((elt: Array<any>) => (result = result.concat(elt)));
+        return this.from(result);
+      },
+    };
+  }
+  /*eslint-enable @typescript-eslint/no-explicit-any*/
+
+  /**
+   * Fournie des méthodes pour manipuler un tableau
+   * A l'écriture cela permet d'avoir des phrases du type:
+   * let data = Arrays.from(mon tableau)
+   * puis data.everyItem().has().same().value().forkey("key");
+   * Peu mieux faire. ou voir a remplacer un jour par loadHash par exemple.
+   **/
+
+  /*eslint-disable @typescript-eslint/no-explicit-any*/
+  static from(source: any) {
+    return {
+      /**Obtenir le tableau final*/
+      get: () => source || [],
+      everyItem: () => {
+        return {
+          has: () => {
+            return {
+              same: () => {
+                return {
+                  value: () => {
+                    return {
+                      forKey: (key: string) => {
+                        if (source.length < 1) return true;
+                        const first = (source[0] || {})[key];
+                        return source.every(
+                          (item: any) => (item || {})[key] == first
+                        );
+                      },
+                    };
+                  },
+                };
+              },
+            };
+          },
+          value: () => {
+            return {
+              forKey: (key: string) => {
+                return Arrays.from(source.map((item: any) => item[key]));
+              },
+            };
+          },
+          copy: () => {
+            return {
+              fromKey: (atKey: string) => {
+                return {
+                  toKey: (toKey: string) => {
+                    source.forEach((item: any) => {
+                      item[toKey] = Array.isArray(item[atKey])
+                        ? [...item[atKey]]
+                        : typeof item[atKey] === "object" && item[atKey] != null
+                        ? {...item[atKey]}
+                        : item[atKey];
+                    });
+                  },
+                };
+              },
+            };
+          },
+        };
+      },
+      map: (f: (elt: Record<string, any>) => any) => Arrays.from(source.map(f)),
+      filter: (f: (elt: any) => any) => Arrays.from(source.filter(f)),
+      find: (f: (elt: Record<string, any>) => any) => source.find(f),
+      some: (f: (elt: Record<string, any>) => any) => source.some(f),
+      every: (f: (elt: Record<string, any>) => any) => source.every(f),
+      group: () => {
+        return {
+          byKey: (key: string) => {
+            const result: Array<Record<string, any>> = [];
+            const keys: Map<any, number> = new Map();
+            for (const item of source) {
+              const value = item[key];
+              if (!keys.has(value)) {
+                const idx = result.length;
+                keys.set(value, idx);
+                const pushable: Record<string, any> = {items: []};
+                pushable[key] = value;
+                result.push(pushable);
+              }
+              result[keys.get(value) as number].items.push(item);
+            }
+            return Arrays.from(result);
+          },
+        };
+      },
+      without: () => {
+        return {
+          duplicates: () => {
+            return {
+              forKey: (key: string) => {
+                const set = [...new Set(source.map((item: any) => item[key]))];
+                return Arrays.from(
+                  set.map((value) =>
+                    source.find((item: any) => item[key] == value)
+                  ) as Array<Record<string, any>>
+                );
+              },
+            };
+          },
+          itemsIn: (toRemoveFromSource: Array<Record<string, any>>) => {
+            return {
+              havingSameValue: () => {
+                return {
+                  forKey: (key: string) => {
+                    const areValuesDifferentForKey =
+                      (compared1: Record<string, any>, key: string) =>
+                      (compared2: Record<string, any>) =>
+                        compared1[key] != compared2[key];
+                    return Arrays.from(
+                      source.filter((elt: any) =>
+                        toRemoveFromSource.every(
+                          areValuesDifferentForKey(elt, key)
+                        )
+                      )
+                    );
+                  },
+                };
+              },
+            };
+          },
+        };
+      },
+    };
+  }
+  /*eslint-enable @typescript-eslint/no-explicit-any*/
+}
+export default Arrays;