@supersoniks/concorde 3.0.0 → 3.0.2

package/src/core/components/functional/router/router.ts

@@ -1,10 +1,10 @@
-import {html, LitElement} from "lit";
-import {customElement, property} from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
-import {templateContent} from "lit/directives/template-content.js";
+import { templateContent } from "lit/directives/template-content.js";
 import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
-import {repeat} from "lit/directives/repeat.js";
-import UrlPattern from "url-pattern";
+import { repeat } from "lit/directives/repeat.js";
+import UrlPattern from "@supersoniks/concorde/core/utils/url-pattern";
 import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
 const tagName = "sonic-router";
 /**
@@ -26,7 +26,7 @@ const tagName = "sonic-router";
 export class SonicRouter extends Subscriber(TemplatesContainer(LitElement)) {
   templateValueAttribute = "data-route";
 
-  @property({type: String}) fallBackRoute?: string;
+  @property({ type: String }) fallBackRoute?: string;
 
   connectedCallback() {
     this.noShadowDom = "";
@@ -37,7 +37,10 @@ export class SonicRouter extends Subscriber(TemplatesContainer(LitElement)) {
     LocationHandler.offChange(this);
     super.disconnectedCallback();
   }
-  private _location: string = document.location.href.replace(document.location.origin, "");
+  private _location: string = document.location.href.replace(
+    document.location.origin,
+    ""
+  );
 
   @property() set location(value: string) {
     this._location = value;
@@ -61,7 +64,10 @@ export class SonicRouter extends Subscriber(TemplatesContainer(LitElement)) {
             templates.push(t);
           }
         } catch (e) {
-          if (this.location.indexOf(path.replace(document.location.origin, "")) != -1) {
+          if (
+            this.location.indexOf(path.replace(document.location.origin, "")) !=
+            -1
+          ) {
             templates.push(t);
           }
         }
@@ -71,7 +77,9 @@ export class SonicRouter extends Subscriber(TemplatesContainer(LitElement)) {
       if (this.fallBackRoute && this.isConnected) {
         document.location.href = this.fallBackRoute;
       }
-      const fallback = this.templatePartsList.find((t) => t.hasAttribute("data-fallback"));
+      const fallback = this.templatePartsList.find((t) =>
+        t.hasAttribute("data-fallback")
+      );
       if (fallback) {
         templates.push(fallback);
       }
@@ -87,19 +95,32 @@ export class SonicRouter extends Subscriber(TemplatesContainer(LitElement)) {
         if (template.title) document.title = template.title;
         if (template.hasAttribute("dataProviderExpression")) {
           let dataProvider = "";
-          const dataProviderExpression = template.getAttribute("dataProviderExpression") || "";
+          const dataProviderExpression =
+            template.getAttribute("dataProviderExpression") || "";
           if (template.getAttribute("mode") == "patternMatching") {
-            const matcher = new UrlPattern("(/)*" + (template.getAttribute(this.templateValueAttribute) || "") + "*");
+            const matcher = new UrlPattern(
+              "(/)*" +
+                (template.getAttribute(this.templateValueAttribute) || "") +
+                "*"
+            );
             const filler = new UrlPattern(dataProviderExpression);
             dataProvider = filler.stringify(matcher.match(this.location));
           } else {
-            const regexp = new RegExp(template.getAttribute(this.templateValueAttribute) || "");
+            const regexp = new RegExp(
+              template.getAttribute(this.templateValueAttribute) || ""
+            );
             const match = (this.location + "").match(regexp);
             if (match) {
-              dataProvider = match.shift()?.replace(regexp, dataProviderExpression) || "";
+              dataProvider =
+                match.shift()?.replace(regexp, dataProviderExpression) || "";
             }
           }
-          return html`<div style="display:contents" dataProvider="${dataProvider}">${templateContent(template)}</div>`;
+          return html`<div
+            style="display:contents"
+            dataProvider="${dataProvider}"
+          >
+            ${templateContent(template)}
+          </div>`;
         }
         return templateContent(template);
       }

package/src/core/components/functional/states/states.ts

@@ -1,13 +1,16 @@
-import {LitElement, html} from "lit";
-import {customElement, property} from "lit/decorators.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
-import {templateContent} from "lit/directives/template-content.js";
-import {repeat} from "lit/directives/repeat.js";
+import { templateContent } from "lit/directives/template-content.js";
+import { repeat } from "lit/directives/repeat.js";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
-import UrlPattern from "url-pattern";
+import UrlPattern from "@supersoniks/concorde/core/utils/url-pattern";
 import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
-import {PublisherInterface, TypeAndRecordOfType} from "@supersoniks/concorde/core/_types/types";
-type UrlPatternExtended = {names: string[]} & UrlPattern;
+import {
+  PublisherInterface,
+  TypeAndRecordOfType,
+} from "@supersoniks/concorde/core/_types/types";
+type UrlPatternExtended = { names: string[] } & UrlPattern;
 
 const tagName = "sonic-states";
 /**
@@ -29,7 +32,7 @@ const tagName = "sonic-states";
 @customElement(tagName)
 export class SonicStates extends Subscriber(TemplatesContainer(LitElement)) {
   @property() state = "";
-  @property({type: Boolean, reflect: true}) inverted = false;
+  @property({ type: Boolean, reflect: true }) inverted = false;
   statePath = "";
   onAssign = (value: string) => {
     this.state = value;
@@ -46,7 +49,9 @@ export class SonicStates extends Subscriber(TemplatesContainer(LitElement)) {
       this.statePublisher = this.publisher;
       const split = this.statePath.split(".");
       for (const s of split) {
-        this.statePublisher = this.statePublisher[s] as typeof this.statePublisher;
+        this.statePublisher = this.statePublisher[
+          s
+        ] as typeof this.statePublisher;
       }
       this.statePublisher.onAssign(this.onAssign);
     }
@@ -58,7 +63,10 @@ export class SonicStates extends Subscriber(TemplatesContainer(LitElement)) {
   render() {
     const templates = [];
     let state = this.state;
-    if ((!Array.isArray(state) && Objects.isObject(state)) || state === undefined) {
+    if (
+      (!Array.isArray(state) && Objects.isObject(state)) ||
+      state === undefined
+    ) {
       state = "";
     }
     for (const t of this.templatePartsList) {
@@ -91,10 +99,14 @@ export class SonicStates extends Subscriber(TemplatesContainer(LitElement)) {
       (template) => {
         if (template.title) document.title = template.title;
         if (template.hasAttribute("dataProviderExpression")) {
-          const dataProviderExpression = template.getAttribute("dataProviderExpression") as string;
+          const dataProviderExpression = template.getAttribute(
+            "dataProviderExpression"
+          ) as string;
           let dataProvider = "";
           let stateToMatch = state;
-          let path: string = template.getAttribute(this.templateValueAttribute) as string;
+          let path: string = template.getAttribute(
+            this.templateValueAttribute
+          ) as string;
           if (this.inverted) {
             stateToMatch = path;
             path = state;
@@ -109,10 +121,17 @@ export class SonicStates extends Subscriber(TemplatesContainer(LitElement)) {
 
             const match = (stateToMatch + "").match(regexp);
             if (match) {
-              dataProvider = match.shift()?.replace(regexp, dataProviderExpression) as string;
+              dataProvider = match
+                .shift()
+                ?.replace(regexp, dataProviderExpression) as string;
             }
           }
-          return html`<div style="display:contents" dataProvider="${dataProvider}">${templateContent(template)}</div>`;
+          return html`<div
+            style="display:contents"
+            dataProvider="${dataProvider}"
+          >
+            ${templateContent(template)}
+          </div>`;
         }
         return templateContent(template);
       }

package/src/core/directives/Wording.ts

@@ -1,14 +1,18 @@
-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 { 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};
+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>;
@@ -22,9 +26,19 @@ 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};
+  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) {
@@ -55,7 +69,9 @@ export const isWordingReady = (key: string) => {
   return value !== loadingString && value != null;
 };
 export default class WordingDirective extends AsyncDirective {
-  static publisher = PublisherManager.get("sonic-wording", {localStorageMode: "enabled"});
+  static publisher = PublisherManager.get("sonic-wording", {
+    localStorageMode: "enabled",
+  });
   unsubscribe(): void {
     WordingDirective.publisher["wording_" + this.key].offAssign(this.onAssign);
   }
@@ -82,7 +98,12 @@ export default class WordingDirective extends AsyncDirective {
   }
 
   static firstCall = true;
-  static async callApi(node: SearchableDomElement | null, key: string, relaunch = true, usedApiCall?: ApiCallValue) {
+  static async callApi(
+    node: SearchableDomElement | null,
+    key: string,
+    relaunch = true,
+    usedApiCall?: ApiCallValue
+  ) {
     await PublisherManager.getInstance().isLocalStrorageReady;
 
     if (WordingDirective.firstCall) {
@@ -97,13 +118,19 @@ export default class WordingDirective extends AsyncDirective {
     }
 
     if (node) {
-      const wordingVersionProvider = HTML.getAncestorAttributeValue(node, "wordingVersionProvider");
+      const wordingVersionProvider = HTML.getAncestorAttributeValue(
+        node,
+        "wordingVersionProvider"
+      );
       if (wordingVersionProvider) {
-        dp(wordingVersionProvider).onAssign(WordingDirective.handleVersionProvider(node));
+        dp(wordingVersionProvider).onAssign(
+          WordingDirective.handleVersionProvider(node)
+        );
       }
     }
 
-    let hasWordingForKey = WordingDirective.publisher.get()["wording_" + key] != null;
+    let hasWordingForKey =
+      WordingDirective.publisher.get()["wording_" + key] != null;
     const apiCall = usedApiCall || getApiCall(node);
     if (!apiCall) return;
     if (hasWordingForKey && key !== "") {
@@ -126,7 +153,8 @@ export default class WordingDirective extends AsyncDirective {
     //
     const api = apiCall.api;
     window.queueMicrotask(async () => {
-      hasWordingForKey = WordingDirective.publisher["wording_" + key].get() != null;
+      hasWordingForKey =
+        WordingDirective.publisher["wording_" + key].get() != null;
       if (!hasWordingForKey && key !== "") {
         apiCall.keysToTranslate.add(key);
         WordingDirective.publisher["wording_" + key] = loadingString;
@@ -136,9 +164,15 @@ export default class WordingDirective extends AsyncDirective {
       if (!wordings.length) return;
       const splittedUrl = wordingProvider.split("?");
       const locationURL = splittedUrl.shift();
-      const queryString = (splittedUrl.length > 0 ? splittedUrl.join("?") + "&" : "") + "labels[]=" + wordings.join("&labels[]=");
+      const queryString =
+        (splittedUrl.length > 0 ? splittedUrl.join("?") + "&" : "") +
+        "labels[]=" +
+        wordings.join("&labels[]=");
       const calledURL = locationURL + "?" + queryString;
-      apiCall.translatedKeys = new Set([...apiCall.translatedKeys, ...apiCall.keysToTranslate]);
+      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) {
@@ -147,7 +181,8 @@ export default class WordingDirective extends AsyncDirective {
     });
   }
 
-  static versionProviderHandlers: Map<ApiCallValue, (v: number) => void> = new Map();
+  static versionProviderHandlers: Map<ApiCallValue, (v: number) => void> =
+    new Map();
   //check if the wording version has changed
   static handleVersionProvider(node: SearchableDomElement) {
     const apiCall = getApiCall(node);
@@ -160,20 +195,24 @@ export default class WordingDirective extends AsyncDirective {
       const wordingVersionProvider = apiCall.wordingVersionProvider;
       if (!wordingVersionProvider) return;
       //
-      const currentVersions: {serviceURL: string | null; version: number}[] = WordingDirective.publisher.get().__wording_versions__ ?? [];
+      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) || {
+      const currentVersionData = currentVersions.find(
+        (v) => v.serviceURL === apiCall.api.serviceURL
+      ) || {
         serviceURL: apiCall.api.serviceURL,
         version: 0,
       };
-      if (!currentVersions.includes(currentVersionData)) currentVersions.push(currentVersionData);
+      if (!currentVersions.includes(currentVersionData))
+        currentVersions.push(currentVersionData);
       if (version === currentVersionData.version) {
         return;
       }
 
       currentVersionData.version = version;
-      WordingDirective.publisher.set({__wording_versions__: currentVersions});
+      WordingDirective.publisher.set({ __wording_versions__: currentVersions });
       for (const apiCall of apiCalls.values()) {
         apiCall.keysToTranslate = new Set(apiCall.translatedKeys);
         if (apiCall.keysToTranslate.size > 0) {
@@ -181,7 +220,10 @@ export default class WordingDirective extends AsyncDirective {
         }
       }
     };
-    WordingDirective.versionProviderHandlers.set(apiCall, versionProviderHandler);
+    WordingDirective.versionProviderHandlers.set(
+      apiCall,
+      versionProviderHandler
+    );
     return versionProviderHandler;
   }
 

package/src/core/mixins/Fetcher.ts

@@ -1,16 +1,16 @@
 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 { 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";
+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();
+const fetchersInError: Set<{ _fetchData: () => void }> = new Set();
 export const invalidateFetchersInError = () => {
   const fetchersInErrorCopy = new Set(fetchersInError);
   fetchersInError.clear();
@@ -21,11 +21,15 @@ export const invalidateFetchersInError = () => {
 
 const errorsListeners = new Set<(apiResponse: Response) => void>();
 
-export const onFetchError = (errorListener: (apiResponse: Response) => void) => {
+export const onFetchError = (
+  errorListener: (apiResponse: Response) => void
+) => {
   errorsListeners.add(errorListener);
 };
 
-export const offFetchError = (errorListener: (apiResponse: Response) => void) => {
+export const offFetchError = (
+  errorListener: (apiResponse: Response) => void
+) => {
   errorsListeners.delete(errorListener);
 };
 const dispatchFetchError = (apiResponse: Response) => {
@@ -34,7 +38,10 @@ const dispatchFetchError = (apiResponse: Response) => {
   }
 };
 
-const Fetcher = <T extends Constructor<SubscriberInterface<PropsType>>, PropsType extends PublisherContentType = PublisherContentType>(
+const Fetcher = <
+  T extends Constructor<SubscriberInterface<PropsType>>,
+  PropsType extends PublisherContentType = PublisherContentType
+>(
   superClass: T,
   propsType?: PropsType
 ) => {
@@ -85,7 +92,7 @@ const Fetcher = <T extends Constructor<SubscriberInterface<PropsType>>, PropsTyp
       super.props = value;
     }
 
-    @property({type: String}) set endPoint(value: string) {
+    @property({ type: String }) set endPoint(value: string) {
       this._endPoint = value;
       if (this.isConnected) this._fetchData();
     }
@@ -94,7 +101,7 @@ const Fetcher = <T extends Constructor<SubscriberInterface<PropsType>>, PropsTyp
     }
 
     @property() requestId = 0;
-    @property({type: Number}) refetchEveryMs = 0;
+    @property({ type: Number }) refetchEveryMs = 0;
     refetchTimeOutId?: ReturnType<typeof setTimeout>;
 
     /**
@@ -110,23 +117,32 @@ const Fetcher = <T extends Constructor<SubscriberInterface<PropsType>>, PropsTyp
       if (!this.api) return;
 
       // if (!this.dataProvider) return;
-      this.dispatchEvent(new CustomEvent("loading", {detail: this}));
+      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();
+      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) {
+      if (
+        Objects.isObject(this.props) &&
+        Object.keys(this.props || {}).length > 0 &&
+        this.isFirstLoad
+      ) {
         window.requestAnimationFrame(() => {
-          this.dispatchEvent(new CustomEvent("load", {detail: this}));
+          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);
+      let data = await this.api.get<PropsType>(
+        this.endPoint || this.dataProvider || "",
+        headerData
+      );
 
       this.fetchedData = data;
       if (this.api.lastResult && !this.api.lastResult.ok) {
@@ -141,12 +157,19 @@ const Fetcher = <T extends Constructor<SubscriberInterface<PropsType>>, PropsTyp
         // 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);
+          this.refetchTimeOutId = setTimeout(
+            () => this._fetchData(),
+            this.refetchEveryMs
+          );
         }
         return;
-      } else if (data._sonic_http_response_ && !data._sonic_http_response_.ok && Object.keys(data).length === 1) {
+      } 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"});
+        SonicToast.add({ text: "Network Error", status: "error" });
       }
       if (this.key) {
         const response = data._sonic_http_response_;
@@ -154,17 +177,25 @@ const Fetcher = <T extends Constructor<SubscriberInterface<PropsType>>, PropsTyp
          * 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"));
+        data = Objects.traverse(
+          data,
+          path,
+          this.hasAttribute("preserveOtherKeys")
+        );
 
-        if (data && Objects.isObject(data) && response) data._sonic_http_response_ = response;
+        if (data && Objects.isObject(data) && response)
+          data._sonic_http_response_ = response;
       }
       this.props = data;
-      this.dispatchEvent(new CustomEvent("load", {detail: this}));
+      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);
+        this.refetchTimeOutId = setTimeout(
+          () => this._fetchData(),
+          this.refetchEveryMs
+        );
       }
     }
 
@@ -178,7 +209,10 @@ const Fetcher = <T extends Constructor<SubscriberInterface<PropsType>>, PropsTyp
     connectedCallback() {
       // this.noShadowDom = "";
 
-      this.lazyLoad = this.lazyLoad !== undefined ? this.lazyLoad : this.hasAttribute("lazyload");
+      this.lazyLoad =
+        this.lazyLoad !== undefined
+          ? this.lazyLoad
+          : this.hasAttribute("lazyload");
 
       super.connectedCallback();
 
@@ -208,22 +242,39 @@ const Fetcher = <T extends Constructor<SubscriberInterface<PropsType>>, PropsTyp
         return;
       }
       const rect = this.getBoundingClientRect();
-      if (rect.x < window.innerWidth && rect.right > 0 && rect.y < window.innerHeight && rect.right > 0) {
+      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 boundsRatio = parseFloat(
+        this.getAttribute("lazyBoundsRatio") || "1"
+      );
 
       const options: IntersectionObserverInit = {
         root: null,
-        rootMargin: Math.max(window.innerWidth * boundsRatio, window.innerHeight * boundsRatio) + "px",
+        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;
+      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;

package/src/core/utils/Electron.ts

@@ -5,7 +5,10 @@ export default class Electron {
     addEventListener: (type: string, callback: (e?: Event) => void) => void;
   }) {
     const electronStr = "electron";
-    const electron = typeof require == "undefined" ? null : require(electronStr);
+    const electron =
+      typeof require == "undefined" || typeof process != "object"
+        ? null
+        : require(electronStr);
     if (typeof electron && link.target == "_blank") {
       link.addEventListener("click", () => {
         electron?.shell.openExternal(link.href);

package/src/docs/code.ts

@@ -1,6 +1,7 @@
 import { html, LitElement, css, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-// import {tailwind} from "@supersoniks/concorde/la-billetterie/tailwind";
+import { tailwind } from "./tailwind";
+
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { query } from "lit/decorators/query.js";
 
@@ -10,7 +11,7 @@ import "./prism/prism";
 import { prismCSS } from "./prism";
 import * as Prism from "prismjs";
 import "prismjs/plugins/normalize-whitespace/prism-normalize-whitespace";
-// import "prismjs/components/prism-json"; // Language
+import "prismjs/components/prism-json"; // Language
 import "prismjs/components/prism-typescript"; // Language
 import "prismjs/components/prism-javascript"; // Language
 import "prismjs/components/prism-bash"; // Language
@@ -21,7 +22,7 @@ const tagName = "sonic-code";
 @customElement(tagName)
 export class DocsCode extends LitElement {
   static styles = [
-    // tailwind,
+    tailwind,
     prismCSS,
     css`
       :host(:not([inline])) {

package/src/docs/example/users.ts

@@ -1,11 +1,11 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
-// import {tailwind} from "@supersoniks/concorde/la-billetterie/tailwind";
+import { tailwind } from "../tailwind";
 
 @customElement("docs-preview-user-item")
 export class user extends Subscriber(LitElement) {
-  // static styles = [tailwind];
+  static styles = [tailwind];
 
   @property({ type: String }) avatar = "";
   @property({ type: String }) first_name = "";