@supersoniks/concorde 2.0.7 → 3.0.1

package/src/core/directives/DataProvider.ts

@@ -0,0 +1,113 @@
+import {AsyncDirective, PartInfo} from "lit/async-directive.js";
+import {directive} from "lit/directive.js";
+import {PublisherManager, PublisherProxy} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import {noChange} from "lit";
+import Objects from "../utils/Objects";
+import {SearchableDomElement} from "../utils/HTML";
+import Publisher from "../utils/PublisherProxy";
+type Observable = PublisherProxy | string | (() => unknown);
+function getObservables(observable: Observable): Set<PublisherProxy> {
+  if (typeof observable === "function") {
+    const func = observable as () => unknown;
+    PublisherManager.collectModifiedPublisher();
+    func();
+    return PublisherManager.getModifiedPublishers() || new Set();
+  }
+  if (typeof observable === "string") {
+    const split = observable.split(".");
+    const dataProvider: string = split.shift() || "";
+    let publisher = PublisherManager.get(dataProvider);
+    publisher = Objects.traverse(publisher, split);
+    const set = new Set<PublisherProxy>();
+    set.add(publisher);
+    return set;
+  }
+  return new Set<PublisherProxy>([observable as Publisher]);
+}
+
+class ObserveDirective extends AsyncDirective {
+  observables: Set<PublisherProxy> = new Set();
+  unsubscribe(): void {
+    this.observables.forEach((publisher: PublisherProxy) => publisher.offAssign(this.onAssign));
+  }
+  observable?: Observable;
+  node?: SearchableDomElement;
+
+  /* eslint-disable @typescript-eslint/no-explicit-any*/
+  constructor(partInfo: any) {
+    super(partInfo as PartInfo);
+    this.node = partInfo.options?.host;
+  }
+  /* eslint-enable @typescript-eslint/no-explicit-any*/
+
+  render(observable: Observable) {
+    if (this.observable !== observable) {
+      this.observable = observable;
+      if (this.isConnected) {
+        this.subscribe(observable);
+      }
+    }
+    return noChange;
+  }
+
+  onAssign = (v: unknown) => {
+    this.setValue(v);
+  };
+  // Subscribes to the observable, calling the directive's asynchronous
+  // setValue API each time the value changes
+  subscribe(observable: Observable) {
+    this.unsubscribe();
+    if (typeof observable === "function") {
+      this.onAssign = () => {
+        this.setValue(observable());
+      };
+    } else {
+      this.onAssign = (v: unknown) => {
+        this.setValue(v);
+      };
+    }
+    this.observables = getObservables(observable);
+
+    this.observables.forEach((publisher) => {
+      publisher.onAssign(this.onAssign);
+    });
+  }
+  // When the directive is disconnected from the DOM, unsubscribe to ensure
+  // the directive instance can be garbage collected
+  disconnected() {
+    this.unsubscribe();
+  }
+  // If the subtree the directive is in was disconnected and subsequently
+  // re-connected, re-subscribe to make the directive operable again
+  reconnected() {
+    if (!this.observable) return;
+    this.subscribe(this.observable as Observable);
+  }
+}
+const dir = directive(ObserveDirective);
+//
+//autoUpdate directive
+export const subscribe = dir;
+export const sub = dir;
+
+// get value
+export const get = (id: Observable) => {
+  return getObservables(id).values().next().value.get();
+};
+
+const deepee = (id: Observable, defaultValue?: any) => {
+  const value = getObservables(id).values().next().value;
+  if (defaultValue !== undefined) {
+    const innerValue = value.get();
+    if (Objects.isEmpty(innerValue)) {
+      value.set(defaultValue);
+    }
+  }
+  return value;
+};
+export const dataProvider = deepee;
+export const dp = deepee;
+
+export const set = (id: Observable, value: unknown) => {
+  getObservables(id).values().next().value.set(value);
+};

package/src/core/directives/Wording.ts

@@ -0,0 +1,220 @@
+import {AsyncDirective} from "lit/async-directive.js";
+import {directive} from "lit/directive.js";
+import {PublisherManager} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import {dp} from "@supersoniks/concorde/core/directives/DataProvider";
+import {noChange} from "lit";
+import {APIConfiguration} from "@supersoniks/concorde/core/utils/api";
+import API from "@supersoniks/concorde/core/utils/api";
+import Objects from "../utils/Objects";
+import HTML, {SearchableDomElement} from "../utils/HTML";
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
+type ApiCallKey = {apiConfiguration: APIConfiguration; wordingProvider: string | null; wordingVersionProvider: string | null};
+type ApiCallValue = {
+  api: API;
+  keysToTranslate: Set<string>;
+  translatedKeys: Set<string>;
+  wordingProvider: string | null;
+  callIndex: number;
+  wordingVersionProvider: string | null;
+  apiCallKey: ApiCallKey;
+};
+const apiCalls: Map<ApiCallKey, ApiCallValue> = new Map();
+const getApiCall = (node: SearchableDomElement | null) => {
+  if (!node) return null;
+  const configuration = HTML.getApiConfiguration(node);
+  const wordingProvider = HTML.getAncestorAttributeValue(node, "wordingProvider");
+  const wordingVersionProvider = HTML.getAncestorAttributeValue(node, "wordingVersionProvider");
+  const searchedKey = {apiConfiguration: configuration, wordingProvider: wordingProvider, wordingVersionProvider: wordingVersionProvider};
+  //touver une api avec la même configuration en comparant les avec l'utilitaire Objects deepEqual
+  let apiCall = null;
+  for (const [key, value] of apiCalls) {
+    if (Objects.deepEqual(key, searchedKey)) {
+      apiCall = value;
+      break;
+    }
+  }
+  if (!apiCall) {
+    const api = new API(configuration);
+    apiCall = {
+      api,
+      keysToTranslate: new Set<string>(),
+      translatedKeys: new Set<string>(),
+      wordingProvider,
+      callIndex: 0,
+      wordingVersionProvider: wordingVersionProvider,
+      apiCallKey: searchedKey,
+    };
+    apiCalls.set(searchedKey, apiCall);
+  }
+  return apiCall;
+};
+
+export const loadingString = "";
+export const isWordingReady = (key: string) => {
+  const value = WordingDirective.publisher["wording_" + key].get();
+  return value !== loadingString && value != null;
+};
+export default class WordingDirective extends AsyncDirective {
+  static publisher = PublisherManager.get("sonic-wording", {localStorageMode: "enabled"});
+  unsubscribe(): void {
+    WordingDirective.publisher["wording_" + this.key].offAssign(this.onAssign);
+  }
+  key?: string;
+  node?: SearchableDomElement;
+  useUnsafeHTML = false;
+
+  /* eslint-disable @typescript-eslint/no-explicit-any*/
+  constructor(partInfo: any) {
+    super(partInfo);
+    this.node = partInfo.options.host; // options n'est pas déclaré sur PartInfo mais exist en réalité d'où le typage "any"
+  }
+  /* eslint-enable @typescript-eslint/no-explicit-any*/
+
+  render(key: string, useUnsafeHTML = false) {
+    this.useUnsafeHTML = useUnsafeHTML;
+    if (this.key !== key) {
+      this.key = key;
+      if (this.isConnected) {
+        this.subscribe(key);
+      }
+    }
+    return noChange;
+  }
+
+  static firstCall = true;
+  static async callApi(node: SearchableDomElement | null, key: string, relaunch = true, usedApiCall?: ApiCallValue) {
+    await PublisherManager.getInstance().isLocalStrorageReady;
+
+    if (WordingDirective.firstCall) {
+      WordingDirective.firstCall = false;
+      //clean keys of the publisher that are equivalent to the loading string
+      const keys = Object.keys(WordingDirective.publisher.get());
+      for (const key of keys) {
+        if (WordingDirective.publisher.get()[key] === loadingString) {
+          delete WordingDirective.publisher[key];
+        }
+      }
+    }
+
+    if (node) {
+      const wordingVersionProvider = HTML.getAncestorAttributeValue(node, "wordingVersionProvider");
+      if (wordingVersionProvider) {
+        dp(wordingVersionProvider).onAssign(WordingDirective.handleVersionProvider(node));
+      }
+    }
+
+    let hasWordingForKey = WordingDirective.publisher.get()["wording_" + key] != null;
+    const apiCall = usedApiCall || getApiCall(node);
+    if (!apiCall) return;
+    if (hasWordingForKey && key !== "") {
+      apiCall.translatedKeys.add(key);
+      return;
+    }
+    apiCall.callIndex++;
+    const callIndex = apiCall.callIndex;
+    const wordingProvider = apiCall.wordingProvider ?? "";
+
+    // if the wording provider is unfortunately not set, we don't call the api now.
+    // We will try later
+    if (!wordingProvider && relaunch) {
+      window.setTimeout(async () => {
+        WordingDirective.callApi(null, key, false, apiCall);
+      }, 1000);
+      return;
+    }
+    //
+    //
+    const api = apiCall.api;
+    window.queueMicrotask(async () => {
+      hasWordingForKey = WordingDirective.publisher["wording_" + key].get() != null;
+      if (!hasWordingForKey && key !== "") {
+        apiCall.keysToTranslate.add(key);
+        WordingDirective.publisher["wording_" + key] = loadingString;
+      }
+      if (callIndex !== apiCall.callIndex) return;
+      const wordings = Array.from(apiCall.keysToTranslate);
+      if (!wordings.length) return;
+      const splittedUrl = wordingProvider.split("?");
+      const locationURL = splittedUrl.shift();
+      const queryString = (splittedUrl.length > 0 ? splittedUrl.join("?") + "&" : "") + "labels[]=" + wordings.join("&labels[]=");
+      const calledURL = locationURL + "?" + queryString;
+      apiCall.translatedKeys = new Set([...apiCall.translatedKeys, ...apiCall.keysToTranslate]);
+      apiCall.keysToTranslate.clear();
+      const result = (await api.get(calledURL)) as Record<string, string>;
+      for (const key in result) {
+        WordingDirective.publisher["wording_" + key] = result[key];
+      }
+    });
+  }
+
+  static versionProviderHandlers: Map<ApiCallValue, (v: number) => void> = new Map();
+  //check if the wording version has changed
+  static handleVersionProvider(node: SearchableDomElement) {
+    const apiCall = getApiCall(node);
+    if (!apiCall) return;
+    if (WordingDirective.versionProviderHandlers.has(apiCall)) {
+      return WordingDirective.versionProviderHandlers.get(apiCall);
+    }
+
+    const versionProviderHandler = function (version: number) {
+      const wordingVersionProvider = apiCall.wordingVersionProvider;
+      if (!wordingVersionProvider) return;
+      //
+      const currentVersions: {serviceURL: string | null; version: number}[] = WordingDirective.publisher.get().__wording_versions__ ?? [];
+
+      if (version == null) return;
+      const currentVersionData = currentVersions.find((v) => v.serviceURL === apiCall.api.serviceURL) || {
+        serviceURL: apiCall.api.serviceURL,
+        version: 0,
+      };
+      if (!currentVersions.includes(currentVersionData)) currentVersions.push(currentVersionData);
+      if (version === currentVersionData.version) {
+        return;
+      }
+
+      currentVersionData.version = version;
+      WordingDirective.publisher.set({__wording_versions__: currentVersions});
+      for (const apiCall of apiCalls.values()) {
+        apiCall.keysToTranslate = new Set(apiCall.translatedKeys);
+        if (apiCall.keysToTranslate.size > 0) {
+          WordingDirective.callApi(null, "", false, apiCall);
+        }
+      }
+    };
+    WordingDirective.versionProviderHandlers.set(apiCall, versionProviderHandler);
+    return versionProviderHandler;
+  }
+
+  onAssign = (v: unknown) => {
+    const value = this.useUnsafeHTML ? unsafeHTML(v as string) : v;
+    this.setValue(value);
+  };
+
+  // Subscribes to the key, calling the directive's asynchronous
+  // setValue API each time the value changes
+  subscribe(key: string) {
+    this.unsubscribe();
+    // this.onAssign = (v: unknown) => {
+    //   this.setValue(v);
+    // };
+    WordingDirective.publisher["wording_" + key].onAssign(this.onAssign);
+    WordingDirective.callApi(this.node as SearchableDomElement, key);
+  }
+  // When the directive is disconnected from the DOM, unsubscribe to ensure
+  // the directive instance can be garbage collected
+  disconnected() {
+    this.unsubscribe();
+  }
+  // If the subtree the directive is in was disconnected and subsequently
+  // re-connected, re-subscribe to make the directive operable again
+  reconnected() {
+    if (!this.key) return;
+    this.subscribe(this.key);
+  }
+}
+
+//autoUpdate directive
+export const wording = directive(WordingDirective);
+export const unsafeWording = (key: string) => wording(key, true);
+export const t = wording;
+export const w = wording;

package/src/core/mixins/Fetcher.ts

@@ -0,0 +1,258 @@
+import "@supersoniks/concorde/core/components/ui/button/button";
+import {SonicToast} from "@supersoniks/concorde/core/components/ui/toast/toast";
+import {SubscriberInterface} from "@supersoniks/concorde/core/mixins/Subscriber";
+import API from "@supersoniks/concorde/core/utils/api";
+import Objects from "@supersoniks/concorde/core/utils/Objects";
+import {PublisherManager} from "@supersoniks/concorde/utils";
+import {property} from "lit/decorators.js";
+import {PublisherContentType} from "../_types/types";
+import {MixinArgsType} from "../_types/types";
+import {ResultTypeInterface} from "@supersoniks/concorde/core/utils/api";
+type Constructor<T> = new (...args: MixinArgsType[]) => T;
+
+const fetchersInError: Set<{_fetchData: () => void}> = new Set();
+export const invalidateFetchersInError = () => {
+  const fetchersInErrorCopy = new Set(fetchersInError);
+  fetchersInError.clear();
+  for (const fetcher of fetchersInErrorCopy) {
+    fetcher._fetchData();
+  }
+};
+
+const errorsListeners = new Set<(apiResponse: Response) => void>();
+
+export const onFetchError = (errorListener: (apiResponse: Response) => void) => {
+  errorsListeners.add(errorListener);
+};
+
+export const offFetchError = (errorListener: (apiResponse: Response) => void) => {
+  errorsListeners.delete(errorListener);
+};
+const dispatchFetchError = (apiResponse: Response) => {
+  for (const listener of errorsListeners) {
+    listener(apiResponse);
+  }
+};
+
+const Fetcher = <T extends Constructor<SubscriberInterface<PropsType>>, PropsType extends PublisherContentType = PublisherContentType>(
+  superClass: T,
+  propsType?: PropsType
+) => {
+  propsType;
+  class FetcherElement extends superClass {
+    api: API | null = null;
+    /**
+     * Après le chargement des données on traverse l'objet reçu en fonctione de la cible exprimées dans cette propriété avec la dot syntaxe.
+     * C'est cette donnée cible qui est injectée dans les pros et donc disponible via le publisher disponible globalement via PublisherManager.get(dataProvider)
+     */
+    key = "";
+    /**
+     * isFirstLoad vaut true jusqu'au premier chargement de données
+     */
+    isFirstLoad = true;
+    /**
+     * isLoading vaut true pendant le chargement des données
+     */
+    isLoading = false;
+    lazyLoad?: boolean;
+
+    /**
+     * IObserver est l'intersection observer qui permet de charger les données au scroll si l'attribut lazyload est renseigné
+     */
+    iObserver: IntersectionObserver | null = null;
+    /**
+     * On peut désactiver le fetch programmatiquement via cette propriété.
+     * Cela est le cas pour le composant sonic-list qui ne fetch que si l'attribut fetch est renseigné
+     */
+    isFetchEnabled = true;
+
+    /**
+     * Result of the fetch
+     */
+    fetchedData: any = null;
+
+    constructor(...args: MixinArgsType[]) {
+      super();
+      args;
+      this.dataProvider = "";
+    }
+    _endPoint = "";
+
+    @property() get props(): (PropsType & ResultTypeInterface) | null {
+      return super.props as (PropsType & ResultTypeInterface) | null;
+    }
+    set props(value) {
+      super.props = value;
+    }
+
+    @property({type: String}) set endPoint(value: string) {
+      this._endPoint = value;
+      if (this.isConnected) this._fetchData();
+    }
+    get endPoint(): string {
+      return this._endPoint;
+    }
+
+    @property() requestId = 0;
+    @property({type: Number}) refetchEveryMs = 0;
+    refetchTimeOutId?: ReturnType<typeof setTimeout>;
+
+    /**
+     *
+     * C'est ici que les données sont chargées via l'utilitaire API
+     * Elles sont ensuite injectées dans le publisher en accord avec la cible définie dans la propriété key
+     * Un Toast est affiché si le chargement échoue
+     */
+    async _fetchData() {
+      this.requestUpdate();
+      if (!this.isFetchEnabled) return;
+      this.api = new API(this.getApiConfiguration());
+      if (!this.api) return;
+
+      // if (!this.dataProvider) return;
+      this.dispatchEvent(new CustomEvent("loading", {detail: this}));
+
+      if (this.getAttribute("localStorage") === "enabled") {
+        await PublisherManager.getInstance().isLocalStrorageReady;
+      }
+      if (!this.isConnected) return;
+      const headerData = PublisherManager.getInstance().get(this.getAncestorAttributeValue("headersDataProvider")).get();
+      this.isLoading = true;
+      if (Objects.isObject(this.props) && Object.keys(this.props || {}).length > 0 && this.isFirstLoad) {
+        window.requestAnimationFrame(() => {
+          this.dispatchEvent(new CustomEvent("load", {detail: this}));
+          this.isFirstLoad = false;
+          this.isLoading = false;
+        });
+      }
+
+      let data = await this.api.get<PropsType>(this.endPoint || this.dataProvider || "", headerData);
+
+      this.fetchedData = data;
+      if (this.api.lastResult && !this.api.lastResult.ok) {
+        fetchersInError.add(this);
+        dispatchFetchError(this.api.lastResult);
+      }
+      if (!this.isConnected) {
+        return;
+      }
+
+      if (!data) {
+        // Cela n'arrive normalement que lorsque l'on quitte une page pendant un fetch on n'affiche donc pas de message
+        this.isLoading = false;
+        if (this.refetchEveryMs && this.isConnected) {
+          this.refetchTimeOutId = setTimeout(() => this._fetchData(), this.refetchEveryMs);
+        }
+        return;
+      } else if (data._sonic_http_response_ && !data._sonic_http_response_.ok && Object.keys(data).length === 1) {
+        // Si data ne contient que la réponse HTTP, avec un statut not ok, on affiche un message
+        SonicToast.add({text: "Network Error", status: "error"});
+      }
+      if (this.key) {
+        const response = data._sonic_http_response_;
+        /* preserveOtherKeys s'exprime lorsque le paramètre "key" est défini
+         * Conserve les autres propriétés de l'objet reçu, en plus des propriétés définies sous "key"
+         */
+        const path = this.key.split(".");
+        data = Objects.traverse(data, path, this.hasAttribute("preserveOtherKeys"));
+
+        if (data && Objects.isObject(data) && response) data._sonic_http_response_ = response;
+      }
+      this.props = data;
+      this.dispatchEvent(new CustomEvent("load", {detail: this}));
+      this.isFirstLoad = false;
+      this.isLoading = false;
+
+      if (this.refetchEveryMs && this.isConnected) {
+        this.refetchTimeOutId = setTimeout(() => this._fetchData(), this.refetchEveryMs);
+      }
+    }
+
+    onInvalidate?: () => void;
+    disconnectedCallback(): void {
+      super.disconnectedCallback();
+      this.publisher?.offInvalidate(this.onInvalidate);
+      clearTimeout(this.refetchTimeOutId);
+      this.isFirstLoad = false;
+    }
+    connectedCallback() {
+      // this.noShadowDom = "";
+
+      this.lazyLoad = this.lazyLoad !== undefined ? this.lazyLoad : this.hasAttribute("lazyload");
+
+      super.connectedCallback();
+
+      if (!this.isFetchEnabled) {
+        return;
+      }
+      this.key = this.key != "" ? this.key : this.getAttribute("key");
+
+      if (this.props) {
+        this.publisher.set(this.props);
+      }
+      this.onInvalidate = () => this._fetchData();
+      this.publisher?.onInvalidate(this.onInvalidate);
+
+      if (!this.lazyLoad) {
+        this._fetchData();
+      } else {
+        this.handleLazyLoad();
+      }
+    }
+    /**
+     * Première update, le comportement de lazyload est géré ici a l'aide d'un intersection observer.
+     */
+    lazyLoadSpan?: HTMLSpanElement;
+    handleLazyLoad() {
+      if (!this.lazyLoad) {
+        return;
+      }
+      const rect = this.getBoundingClientRect();
+      if (rect.x < window.innerWidth && rect.right > 0 && rect.y < window.innerHeight && rect.right > 0) {
+        this._fetchData();
+        return;
+      }
+
+      const boundsRatio = parseFloat(this.getAttribute("lazyBoundsRatio") || "1");
+
+      const options: IntersectionObserverInit = {
+        root: null,
+        rootMargin: Math.max(window.innerWidth * boundsRatio, window.innerHeight * boundsRatio) + "px",
+        threshold: 0.9,
+      };
+
+      this.iObserver = new IntersectionObserver((entries) => this.onIntersection(entries), options);
+      let elt = (this.shadowRoot ? this.shadowRoot.children[0] : this.children[0]) as HTMLElement;
+      if (elt?.nodeName.toLocaleLowerCase() == "slot") elt = elt.children[0] as HTMLElement;
+      if (!elt || elt.nodeName.toLocaleLowerCase() == "template") {
+        elt = document.createElement("span");
+        const style = elt.style;
+        /**
+         * !!! Pas de position absolute ici si on veut que le composant soit au bon endroit dans la page pour l'intersection observer
+         * En effest sinon il vpeut remonter en congugaison avec le style display="contents"
+         */
+        style.pointerEvents = "none";
+        this.lazyLoadSpan = elt;
+        this.appendChild(elt);
+      }
+      if (elt) {
+        this.iObserver.observe(elt);
+      } else if (this.isFirstLoad) {
+        this._fetchData();
+      }
+    }
+    onIntersection(entries: IntersectionObserverEntry[]) {
+      for (const e of entries) {
+        if (e.isIntersecting && this.isFirstLoad) {
+          this._fetchData();
+          this.lazyLoadSpan?.remove();
+          this.lazyLoadSpan = undefined;
+          this.iObserver?.disconnect();
+          break;
+        }
+      }
+    }
+  }
+  return FetcherElement; //as Constructor<SubscriberInterface> & T;
+};
+export default Fetcher;