@supersoniks/concorde 2.0.7 → 3.0.1

package/src/core/utils/PublisherProxy.ts

@@ -0,0 +1,786 @@
+/* eslint-disable @typescript-eslint/no-explicit-any*/
+/**
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ * Merci de laisser ce fichier sans la moindre dépendance en dehors de types du ceur.
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ * **/
+import {
+  PublisherInterface,
+  CoreJSType,
+  PublisherContentType,
+} from "../_types/types";
+import HTML from "./HTML";
+type DynamicFillingListener = any;
+type TemplateFillingListener = {
+  propertyMap: Record<string, string>;
+} & DynamicFillingListener;
+function isComplex(value: any) {
+  return typeof value === "object" && value != null;
+}
+
+const queueTaskPromise = async () => {
+  return new Promise((resolve) => {
+    window.queueMicrotask(() => resolve(null));
+  });
+};
+
+/**
+ * Custom Proxy contient les méthodes des publishers retournés par PublisherManager.get(publisherId) qui seront utilisées couramment
+ */
+export class PublisherProxy<T = any> {
+  static instances = new Map<number, PublisherProxy>();
+  static instancesCounter = 0;
+  _proxies_: Map<string, PublisherProxy> = new Map();
+  _value_: T;
+  _is_savable_ = false;
+  _invalidateListeners_ = new Set<VoidFunction>();
+  _assignListeners_ = new Set<(value: T) => void>();
+  _mutationListeners_ = new Set<VoidFunction>();
+  _fillListeners_ = new Set<Record<string, CoreJSType>>();
+  _templateFillListeners_ = new Set<TemplateFillingListener>();
+  _lockInternalMutationPublishing_ = false;
+  _instanceCounter_ = 0;
+  parent: PublisherProxy | null;
+  root: PublisherProxy;
+
+  constructor(target: T, parentProxPub: PublisherProxy | null) {
+    this._value_ = target;
+    this.parent = parentProxPub || null;
+    this.root = this;
+    this._instanceCounter_ = 0;
+    while (this.root.parent) {
+      this.root = this.root.parent;
+    }
+  }
+  /**
+   * Supprime le proxy et ses sous proxy
+   * Supprime les écouteurs associés
+   */
+  delete() {
+    for (const proxy of this._proxies_.values()) {
+      proxy.delete();
+    }
+    this._invalidateListeners_.clear();
+    this._assignListeners_.clear();
+    this._mutationListeners_.clear();
+    this._fillListeners_.clear();
+    this._templateFillListeners_.clear();
+    this._proxies_.clear();
+    PublisherProxy.instances.delete(this._instanceCounter_);
+  }
+  /**
+   * Utile pour savoir si quelque chose est en écoute d'une modification sur le proxy via une des methodes associées
+   */
+  hasListener() {
+    return (
+      this._templateFillListeners_.size > 0 ||
+      this._assignListeners_.size > 0 ||
+      this._invalidateListeners_.size > 0 ||
+      this._mutationListeners_.size > 0 ||
+      this._fillListeners_.size > 0
+    );
+  }
+  _assignmentId_ = 0;
+  _publishInternalMutation_(lockInternalMutationsTransmission = false) {
+    this._mutationListeners_.forEach((handler: VoidFunction): void =>
+      handler()
+    );
+    if (this._is_savable_ && !PublisherManager.changed) {
+      PublisherManager.changed = true;
+      PublisherManager.saveId++;
+      const saveId = PublisherManager.saveId;
+      setTimeout(
+        () => PublisherManager.getInstance().saveToLocalStorage(saveId),
+        1000
+      );
+    }
+    if (lockInternalMutationsTransmission) return;
+    if (this.parent) {
+      this.parent._publishInternalMutation_();
+    }
+  }
+  async _publishAssignement_(lockInternalMutationsTransmission = false) {
+    this._assignmentId_++;
+    const currentId = this._assignmentId_;
+    await queueTaskPromise();
+    if (currentId !== this._assignmentId_) return;
+    const newValue = this.get();
+    this._assignListeners_.forEach((handler: (value: T) => void) =>
+      handler(newValue)
+    );
+    this._publishInternalMutation_(lockInternalMutationsTransmission);
+  }
+
+  _publishInvalidation_() {
+    this._invalidateListeners_.forEach((handler: VoidFunction) => handler());
+  }
+  _publishDynamicFilling_(key: string, value: CoreJSType) {
+    this._fillListeners_.forEach((handler) => {
+      if (handler[key] !== value) handler[key] = value;
+    });
+    this._publishTemplateFilling_(key, value);
+  }
+  _publishTemplateFilling_(key: string, value: CoreJSType) {
+    this._templateFillListeners_.forEach((handler) => {
+      const desc = Object.getOwnPropertyDescriptor(handler, key);
+
+      if (desc && !desc.set && !desc.writable) return;
+
+      if (handler.propertyMap && handler.propertyMap[key]) {
+        key = handler.propertyMap[key];
+      }
+      if (typeof handler[key] != "undefined" && handler[key] !== value) {
+        handler[key] = value;
+      }
+    });
+  }
+
+  /**
+   * Appel la fonction "handler" (passée en paramettre) lorsque la valeur gérée par le proxy change par assignation
+   * hanlder reçois alors la nouvelle valeur interne du proxy en paramètre
+   */
+  onAssign(handler: (value: T) => void, directHandlerCall = true) {
+    if (typeof handler != "function") return;
+    if (this._assignListeners_.has(handler)) return;
+    this._assignListeners_.add(handler);
+    if (directHandlerCall) handler(this.get());
+  }
+  /**
+   * Stop les appels de la fonction "handler" (passée en paramettre) lorsque la valeur gérée par le proxy change par assignation
+   */
+  offAssign(handler: (value: T) => void) {
+    this._assignListeners_.delete(handler);
+  }
+
+  /**
+   * Appel la fonction "handler" (passée en paramettre) lorsque la donnée est flaggée comme invalide
+   */
+  onInvalidate(handler: VoidFunction | undefined) {
+    if (typeof handler != "function") return;
+    this._invalidateListeners_.add(handler);
+  }
+  /**
+   * Stop les appels de la fonction "handler" (passée en paramettre) lorsque la donnée est flaggée comme invalide
+   */
+  offInvalidate(handler: VoidFunction | undefined) {
+    if (typeof handler != "function") return;
+    this._invalidateListeners_.delete(handler);
+  }
+  /**
+   * Flag les données comme étant invalides
+   */
+  invalidate() {
+    this._publishInvalidation_();
+  }
+
+  /**
+   * Appel la fonction "handler" (passée en paramettre) lorsque quelque chose change la valeur gérée par le proxy quelque soit la profondeur de la donnée
+   *
+   */
+  onInternalMutation(handler: VoidFunction | undefined) {
+    if (typeof handler != "function") return;
+    this._mutationListeners_.add(handler);
+    handler();
+  }
+  /**
+   * Stop les Appels de la fonction "handler" (passée en paramettre) lorsque quelque chose change la valeur gérée par le proxy quelque soit la profondeur de la donnée
+   */
+  offInternalMutation(handler: VoidFunction | undefined) {
+    if (typeof handler != "function") return;
+    this._mutationListeners_.delete(handler);
+  }
+  /**
+   * Maintient le remplissage de l'objet / tableau "handler" passé en paramètre avec les valeurs du proxy
+   * Remplit uniquement les valeurs déjà présentes dans l'objet / tableau passé en paramètre
+   */
+  startTemplateFilling(handler: TemplateFillingListener) {
+    this._templateFillListeners_.add(handler);
+    if (typeof this._value_ != "object") return;
+    for (const z in this._value_) {
+      let valueKey = z as string;
+      const value = this._value_[z];
+      if (handler.propertyMap && handler.propertyMap[z]) {
+        valueKey = handler.propertyMap[z];
+      }
+      if (typeof handler[z] != "undefined" && handler[z] !== value) {
+        handler[valueKey] = value;
+      }
+    }
+  }
+
+  /**
+   * Arrête  de maintenir le remplissage de l'objet / tableau "handler" passé en paramètre avec les valeurs du proxy
+   */
+  stopTemplateFilling(handler: TemplateFillingListener) {
+    this._templateFillListeners_.delete(handler);
+  }
+
+  /**
+   * Maintient le remplissage de l'objet / tableau "handler" passé en paramètre avec les valeurs du proxy
+   * Remplit toute valeur qu'elle soit présente ou pas initialement dans l'objet
+   */
+  startDynamicFilling(handler: DynamicFillingListener) {
+    this._fillListeners_.add(handler);
+    for (const z in this._value_) {
+      const value = this._value_[z];
+      if (handler[z] !== value) handler[z] = value;
+    }
+  }
+  /*
+   * Arrête  de maintenir le remplissage de l'objet / tableau "handler" passé en paramètre avec les valeurs du proxy
+   */
+  stopDynamicFilling(handler: DynamicFillingListener) {
+    this._fillListeners_.delete(handler);
+  }
+  /**
+   * Assigne une nouvelle valeur au proxy ce qui déclenche la transmission de la donnée en fonction des "écouteurs" associés
+   */
+
+  async set(newValue: T, lockInternalMutationsTransmission = false) {
+    /**
+     * On retounre tout de suite si la valeur n'a pas changé
+     */
+    if (this._value_ === newValue) return true;
+
+    if (
+      this._value_ &&
+      newValue &&
+      Object.prototype.hasOwnProperty.call(this._value_, "__value") &&
+      Object.prototype.hasOwnProperty.call(newValue, "__value") &&
+      (this._value_ as any).__value === (newValue as any).__value
+    ) {
+      return true;
+    }
+    /**
+     * On assigne la nouvelle valeur
+     */
+    const prevValue = this._value_ as any;
+    this._value_ = isComplex(newValue)
+      ? newValue
+      : ({ __value: newValue } as any);
+    this._cachedGet_ = undefined;
+    /**
+     * Si il s'agit d'une valeur primitive (un entier, une chaine ) la valeure en renseignée par un objet contenant la vaeur {__value}
+     * On publie juste et on sen va.
+     */
+    const isPrimitiveValue = Object.prototype.hasOwnProperty.call(
+      this._value_,
+      "__value"
+    );
+    if (isPrimitiveValue) {
+      await this._publishAssignement_(lockInternalMutationsTransmission);
+      return true;
+    }
+    /**
+     * On fait la diff sur l'existant.
+     * On maintient les proxys à supprimer et ceux à ajouter.
+     * On met à jour leur valeur interne
+     * On publie les maj au fur et a mesure de modifications
+     */
+    for (const key in this._value_) {
+      if (this._value_[key] === undefined) delete this._value_[key];
+    }
+    this._proxies_.forEach((_subProxy, key) => {
+      /**
+       * On supprime les proxys qui ne sont plus dans la nouvelle valeur si ils n'on pas d'écouteurs
+       **/
+      if ((this._value_ as any)[key] === undefined) {
+        // if (!_subProxy?.hasListener()) {
+        //   // this._proxies_.delete(key);
+        // } else {
+        if (key != "_parent_") {
+          if (prevValue[key]) (this._value_ as any)[key] = null;
+        }
+        // }
+      }
+    });
+    /**
+     * On prévient les écouteurs que la valeur a changé
+     */
+    await this._publishAssignement_();
+    /**
+     * Si la donnée est complexe (objet, tableau)
+     * on crée les proxys pour les sous-éléments qui n'en on pas
+     * On renseigne les nouvelles valeurs internes des proxies
+     */
+
+    if (isComplex(this._value_)) {
+      for (const key in this._value_) {
+        const v = newValue[key] as any;
+        const isVComplex = isComplex(v);
+        const valueV = isVComplex ? v : { __value: v };
+        if (!this._proxies_.has(key)) {
+          // A surveiller ancienne version
+          // const newPublisher = new Publisher({}, this);
+          // this._proxies_.set(key, newPublisher);
+          // newPublisher._proxies_.set("_parent_", this);
+
+          this._publishDynamicFilling_(key, v);
+          continue;
+        }
+        await this._proxies_.get(key)?.set(valueV, true);
+        this._publishDynamicFilling_(key, v);
+      }
+    }
+    return true;
+  }
+  /**
+   * Extraire la valeur actuelle du proxy
+   */
+  _cachedGet_?: T;
+  get(): T {
+    if (this._cachedGet_ !== undefined) return this._cachedGet_;
+    if (PublisherManager.modifiedCollectore.length > 0)
+      PublisherManager.modifiedCollectore[0].add(this);
+    if (Object.prototype.hasOwnProperty.call(this._value_, "__value")) {
+      const v = (this._value_ as any).__value;
+      return (this._cachedGet_ = (v != undefined ? v : null) as T);
+    }
+    return (this._cachedGet_ = this._value_);
+  }
+  /**
+   * retourner le webcomponent auquel le proxy est associé
+   */
+  get $tag(): string {
+    if (!this._instanceCounter_) {
+      PublisherProxy.instancesCounter++;
+      this._instanceCounter_ = PublisherProxy.instancesCounter;
+    }
+    PublisherProxy.instances.set(this._instanceCounter_, this);
+    const str =
+      '<reactive-publisher-proxy publisher="' +
+      this._instanceCounter_ +
+      '"></reactive-publisher-proxy>';
+    return str;
+  }
+}
+
+/**
+ * Utilitaires de gestion des Publisher
+ * Obtenir, replacer ou supprimer un Publisher
+ *
+ */
+
+declare const __BUILD_DATE__: string;
+if (typeof __BUILD_DATE__ === "undefined") {
+  (window as any).__BUILD_DATE__ = "No build date";
+}
+
+export class PublisherManager {
+  static buildDate = __BUILD_DATE__;
+  static changed = false;
+  static saving = false;
+  static saveId = 0;
+  static instance: PublisherManager | null = null;
+  enabledLocaStorageProxies: string[] = [];
+  publishers = new Map<string, Publisher>();
+  localStorageData: Record<
+    string,
+    { lastModifiationMS: number; data: PublisherContentType }
+  > = {};
+  isLocalStrorageReady: Promise<boolean> | null = null;
+  constructor() {
+    if (PublisherManager.instance != null) throw "Singleton / use getInstance";
+    PublisherManager.instance = this;
+    this.isLocalStrorageReady = this.cleanStorageData() as Promise<boolean>;
+  }
+
+  async cleanStorageData() {
+    return new Promise((resolve) => {
+      const doiIt = async () => {
+        try {
+          let compressedData = localStorage.getItem("publisher-proxies-data");
+
+          let localStorageJSON = null;
+          if (compressedData)
+            localStorageJSON = await this.decompress(compressedData, "gzip");
+
+          if (localStorageJSON) {
+            try {
+              this.localStorageData = JSON.parse(localStorageJSON);
+            } catch (e) {
+              this.localStorageData = {};
+            }
+          } else {
+            compressedData = await this.compress("{}", "gzip");
+            localStorage.setItem("publisher-proxies-data", compressedData);
+            this.localStorageData = {};
+          }
+          const expires = new Date().getTime() - 1000 * 60 * 60 * 12;
+          for (const key in this.localStorageData) {
+            const item = this.localStorageData[key];
+            if (item.lastModifiationMS < expires) {
+              delete this.localStorageData[key];
+            }
+          }
+          resolve(true);
+          // compressedData = await this.compress(JSON.stringify(this.localStorageData), "gzip");
+          // localStorage.setItem("publisher-proxies-data", compressedData);
+        } catch (e) {
+          window.requestAnimationFrame(() => {
+            resolve(false);
+          });
+          console.log("no publisher cache in this browser");
+        }
+      };
+      doiIt();
+    });
+  }
+
+  /**
+   * PublisherManager est un singleton
+   */
+  static getInstance() {
+    if (PublisherManager.instance == null) return new PublisherManager();
+    return PublisherManager.instance;
+  }
+  /**
+   * shortcut static pour obtenir un publisher vias sont id/adresse sans taper getInstance.
+   * Si le publisher n'existe pas, il est créé.
+   */
+  public static get(id: string, options?: { localStorageMode?: string }) {
+    return PublisherManager.getInstance().get(id, options);
+  }
+
+  public static modifiedCollectore: Set<PublisherProxy>[] = [];
+  public static collectModifiedPublisher() {
+    PublisherManager.modifiedCollectore.unshift(new Set());
+  }
+  public static getModifiedPublishers() {
+    return PublisherManager.modifiedCollectore.shift();
+  }
+
+  /**
+   * shortcut static pour supprimer un publisher de la liste et appel également delete sur le publisher ce qui le supprime, de même que ses sous publishers
+   */
+  static delete(id: string | null) {
+    if (!id) return false;
+    return PublisherManager.getInstance().delete(id);
+  }
+
+  /**
+   * Obtenir un publisher vias sont id/adresse
+   * Si le publisher n'existe pas, il est créé.
+   */
+  async setLocalData(publisher: PublisherInterface, id: string) {
+    await this.isLocalStrorageReady;
+    publisher.set(
+      this.localStorageData[id + "¤lang_" + HTML.getLanguage()]?.data ||
+        publisher.get()
+    );
+  }
+
+  initialisedData: string[] = [];
+  get(id: string, options?: { localStorageMode?: string }) {
+    const hasLocalStorage = options?.localStorageMode === "enabled";
+    if (!this.publishers.has(id)) {
+      const data = {};
+      const publisher = new Publisher(data) as PublisherInterface;
+      this.set(id, publisher);
+    }
+    const publisher = this.publishers.get(id) as PublisherInterface;
+    if (hasLocalStorage && this.initialisedData.indexOf(id) === -1) {
+      publisher._is_savable_ = true;
+      this.initialisedData.push(id);
+      this.setLocalData(publisher, id);
+    }
+    return this.publishers.get(id) as PublisherInterface;
+  }
+  /**
+   * Remplace un publisher pour l'id fourni par un autre.
+   * L'autre publisher n'est pas supprimé.
+   */
+  set(id: string, publisher: Publisher) {
+    this.publishers.set(id, publisher);
+  }
+  /**
+   * @warning
+   * !!!!! ATTENTION !!!!!
+   * Il est fort à aprier que vous ne voulez pas utiliser cette methode
+   * Il s'agit d'une supression complete
+   * * du publisher de la liste
+   * * des bindings
+   * * de même que ses sous publishers
+   *
+   * UTILISEZ PLUTÔT la méthode publisher.set({}) pour réinitialiser un publisher sans perdre les ecouteurs
+   */
+  delete(id: string) {
+    if (!this.publishers.has(id)) return false;
+    this.publishers.delete(id);
+    return true;
+  }
+
+  async saveToLocalStorage(saveId = 0) {
+    /**
+     * si l'id a changé et que ce n'est pas un multiple de 10, on ne sauve pas
+     * on sauvegarde quand même tous les 10 au cas ou on aurrait des changements en continue, par exemple à chaque frame
+     */
+    if (saveId !== PublisherManager.saveId && saveId % 10 != 0) return;
+    try {
+      if (!PublisherManager.changed || PublisherManager.saving) return;
+      PublisherManager.saving = true;
+      PublisherManager.changed = false;
+      const keys = Array.from(this.publishers.keys());
+      let hasChanged = false;
+      for (const key of keys) {
+        const publisher = this.publishers.get(key);
+        if (!publisher?._is_savable_) continue;
+        const data = publisher?.get();
+        if (!data) continue;
+        this.localStorageData[key + "¤lang_" + HTML.getLanguage()] = {
+          lastModifiationMS: new Date().getTime(),
+          data: data,
+        };
+        hasChanged = true;
+      }
+      // on enregistre les données
+      if (hasChanged) {
+        const compressedData = await this.compress(
+          JSON.stringify(this.localStorageData),
+          "gzip"
+        );
+        localStorage.setItem("publisher-proxies-data", compressedData);
+      }
+      PublisherManager.saving = false;
+      if (PublisherManager.changed) {
+        PublisherManager.saveId++;
+        const saveId = PublisherManager.saveId;
+        setTimeout(() => this.saveToLocalStorage(saveId), 1000);
+      }
+    } catch (e) {
+      PublisherManager.saving = false;
+    }
+  }
+  async compress(string: string, encoding: string) {
+    const byteArray = new TextEncoder().encode(string);
+    const win = window as any;
+    const cs = new win.CompressionStream(encoding);
+    const writer = cs.writable.getWriter();
+    writer.write(byteArray);
+    writer.close();
+    const result = await new Response(cs.readable).arrayBuffer();
+    const arrayBufferView = new Uint8Array(result);
+    let str = "";
+    for (let i = 0; i < arrayBufferView.length; i++) {
+      str += String.fromCharCode(arrayBufferView[i]);
+    }
+    return btoa(str);
+  }
+
+  async decompress(str: string, encoding: string) {
+    const decodedString = atob(str);
+    const arrayBufferViewFromLocalStorage = Uint8Array.from(
+      decodedString,
+      (c) => c.charCodeAt(0)
+    );
+    const byteArray = arrayBufferViewFromLocalStorage.buffer;
+    const win = window as any;
+    const cs = new win.DecompressionStream(encoding);
+    const writer = cs.writable.getWriter();
+    writer.write(byteArray);
+    writer.close();
+    const result = await new Response(cs.readable).arrayBuffer();
+    return new TextDecoder().decode(result);
+  }
+}
+
+const internalProps: Set<string> = new Set([
+  "invalidate",
+  "onInvalidate",
+  "offInvalidate",
+  "onAssign",
+  "offAssign",
+  "startDynamicFilling",
+  "stopDynamicFilling",
+  "startTemplateFilling",
+  "stopTemplateFilling",
+  "onInternalMutation",
+  "offInternalMutation",
+  "set",
+  "get",
+  "$tag",
+  "_cachedGet_",
+  "_templateFillListeners_",
+  "_fillListeners_",
+  "_assignListeners_",
+  "_invalidateListeners_",
+  "_publishInternalMutation_",
+  "hasListener",
+  "delete",
+  "_mutationListeners_",
+  "_publishDynamicFilling_",
+  "_publishInvalidation_",
+  "_publishTemplateFilling_",
+  "_publishAssignement_",
+  "_proxies_",
+  "parent",
+  "_value_",
+  "_is_savable_",
+  "_lockInternalMutationPublishing_",
+  "_instanceCounter_",
+  "_assignmentId_",
+]);
+
+/**
+ * Le Proxy Javascript
+ */
+export default class Publisher<
+  T = PublisherContentType
+> extends PublisherProxy<T> {
+  constructor(target: T, parentProxPub: PublisherProxy | null = null) {
+    super(target, parentProxPub);
+    const thisProxy = new Proxy(this, {
+      /**
+       * Lorsque l'on écrit monConteneur =  publisher.maClef ou monConteneur = publisher["maClef"] monConteneur contient :
+       * Les methodes de PublisherProxy (onAssign... : voir liste dans kle tableaus si dessous), si la clef est une méthode de PublisherProxy,,
+       * Sinon un autre proxy qui a comme valeur interne la valeur corespondante à la clef dans l'objet.
+       */
+      get: function (publisherInstance: PublisherProxy<T>, sKey: any) {
+        if (sKey == Symbol.toPrimitive) {
+          return () => thisProxy.get();
+        }
+        if (internalProps.has(sKey)) return (publisherInstance as any)[sKey];
+        if (!publisherInstance._proxies_.has(sKey)) {
+          const vValue = (publisherInstance._value_ as any)[sKey];
+          const newPublisher = new Publisher(
+            isComplex(vValue) ? vValue : { __value: vValue },
+            publisherInstance
+          );
+          newPublisher._proxies_.set("_parent_", thisProxy);
+          publisherInstance._proxies_.set(sKey, newPublisher);
+        }
+        return publisherInstance._proxies_.get(sKey);
+      },
+      /**
+       * Lorsque l'on écrit publisher.maClef = value ou publisher["maClef"] = value, on assigne la valeur à la clef dans l'objet interne.
+       * Les gestionnairs associés sopnt déclenchés en conséquence de manière profonde et remontante si nécessaire.
+       */
+      set: function (publisherInstance, sKey: string, vValue) {
+        //Fonctionnement pour la donnée interne pas de dispatch;
+        if (sKey == "_value_") {
+          publisherInstance._value_ = vValue;
+          return true;
+        }
+        if (sKey == "_cachedGet_") {
+          publisherInstance._cachedGet_ = vValue;
+          return true;
+        }
+        if (sKey == "_assignmentId_") {
+          publisherInstance._assignmentId_ = vValue;
+          return true;
+        }
+
+        if (sKey == "_is_savable_") {
+          publisherInstance._is_savable_ = vValue;
+          return true;
+        }
+        if (sKey == "_instanceCounter_") {
+          publisherInstance._instanceCounter_ = vValue;
+          return true;
+        }
+
+        //Création du publisher si il n'existe pas
+        if (!publisherInstance._proxies_.has(sKey)) {
+          const newPublisher = new Publisher({}, publisherInstance);
+          newPublisher._proxies_.set("_parent_", thisProxy);
+          publisherInstance._proxies_.set(sKey, newPublisher);
+        }
+        //mis à jour et publication de la donnée si elle a changé
+        const prevValue = (publisherInstance._value_ as any)[sKey];
+        if (prevValue !== vValue) {
+          (publisherInstance._value_ as any)[sKey] = vValue;
+          publisherInstance._publishDynamicFilling_(sKey, vValue);
+          publisherInstance._proxies_
+            .get(sKey)
+            ?.set(isComplex(vValue) ? vValue : { __value: vValue });
+        }
+        //on retourne  le proxy pour pouvoir chainer les assignements
+        // return publisherInstance._proxies_.get(sKey);
+        return true;
+      },
+      /**
+       * Autres propriétés classiques d'un objet implémentées par le proxy
+       */
+      deleteProperty: function (publisherInstance, sKey: string) {
+        publisherInstance;
+        publisherInstance._publishDynamicFilling_(sKey, null);
+        // if (!publisherInstance._proxies_.get(sKey)?.hasListener()) {
+        //   publisherInstance._proxies_.delete(sKey);
+        // } else {
+        publisherInstance._proxies_.get(sKey)?.set(null);
+        // }
+        return delete (publisherInstance._value_ as any)[sKey];
+      },
+      // enumerate: function (publisherInstance, sKey): CoreJSType {
+      //   return publisherInstance._value_.keys();
+      // },
+      has: function (publisherInstance, sKey) {
+        publisherInstance;
+        return (
+          sKey in (publisherInstance._value_ as any) &&
+          sKey != "_lockInternalMutationPublishing_"
+        );
+      },
+      defineProperty: function (publisherInstance, sKey, oDesc) {
+        publisherInstance;
+        if (oDesc && "value" in oDesc) {
+          (publisherInstance._value_ as any)[sKey] = oDesc.value;
+        }
+        return true;
+        // return publisherInstance._value_;
+      },
+      getOwnPropertyDescriptor: function (publisherInstance, sKey) {
+        publisherInstance;
+        sKey;
+        return {
+          enumerable: true,
+          configurable: true,
+        };
+      },
+      ownKeys: function (publisherInstance) {
+        if ((publisherInstance._value_ as any).__value)
+          return Object.keys((publisherInstance._value_ as any).__value);
+        return Object.keys((publisherInstance as any)._value_);
+      },
+    });
+    return thisProxy as any;
+  }
+
+  toString() {
+    return "hey";
+  }
+
+  valueOf() {
+    return 2;
+  }
+
+  getProperty<U, K extends keyof U>(o: U, propertyName: K): U[K] {
+    return o[propertyName]; // o[propertyName] is of type T[K]
+  }
+}
+
+// if (typeof module != "undefined") module.exports = {Publisher: Publisher, PublisherManager: PublisherManager};
+
+// /**
+//  * A custom webcomponent wich will be linked to a publisher via its attribute "publisher"
+//  * the publisher will be found via PublisherManager.get(publisherId) and will be used to fill the component using the onAssign method
+//  */
+class PublisherWebComponent extends HTMLElement {
+  publisherId = "";
+  publisher: any;
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.publisherId = this.getAttribute("publisher") || "";
+    this.publisher = PublisherProxy.instances.get(parseInt(this.publisherId));
+    this.publisher?.onAssign(this.onAssign);
+  }
+  disconnectedCallback() {
+    this.publisher?.offAssign(this.onAssign);
+  }
+  onAssign = (value: any) => {
+    this.innerHTML = value.toString();
+  };
+}
+customElements.define("reactive-publisher-proxy", PublisherWebComponent);