@supersoniks/concorde 4.7.4 → 4.9.0

package/src/core/utils/AncestorAttributeObserver.ts

@@ -0,0 +1,199 @@
+import HTML, { SearchableDomElement } from "./HTML";
+
+/**
+ * Observateur pour `@ancestorAttribute({ dynamic: true })`.
+ *
+ * Un MutationObserver sur `document` ne voit pas les mutations dans les shadow
+ * roots (Lit par défaut). Chaque abonnement observe donc directement les nœuds
+ * de sa chaîne d'ancêtres (composant → parent → … → host shadow), comme
+ * `watchScopedConfiguration` dans `api.ts`.
+ *
+ * Après un `childList` (wrapper plus proche, reparenting), la chaîne est
+ * recalculée pour écouter les nouveaux ancêtres.
+ */
+
+type SyncOptions = {
+  /** En mode dynamique : écrire `null` si l'attribut ancêtre disparaît. */
+  assignNull: boolean;
+};
+
+type Subscription = {
+  component: HTMLElement;
+  attributeName: string;
+  propertyKey: string;
+  syncOptions: SyncOptions;
+  disconnectObservers: (() => void) | null;
+};
+
+/** Chaîne composant → ancêtres, en traversant les shadow roots. */
+function walkAncestorElements(node: Node): Element[] {
+  const elements: Element[] = [];
+  let current: Node | null = node;
+  while (current) {
+    if (current instanceof Element) {
+      elements.push(current);
+    }
+    const parent: Node | null =
+      current.parentNode || ((current as ShadowRoot).host ?? null);
+    current = parent;
+  }
+  return elements;
+}
+
+/**
+ * Observe attributs + enfants directs de chaque ancêtre.
+ * Retourne une fonction de nettoyage (disconnect).
+ */
+function attachAncestorChainObservers(
+  subscription: Subscription,
+  onMutation: () => void,
+): () => void {
+  const observers: MutationObserver[] = [];
+  let disconnected = false;
+  const attributeFilter = HTML.scopeAttributeNames(subscription.attributeName);
+
+  const reconnect = () => {
+    for (const observer of observers) {
+      observer.disconnect();
+    }
+    observers.length = 0;
+    if (disconnected) return;
+
+    for (const element of walkAncestorElements(subscription.component)) {
+      const observer = new MutationObserver((records) => {
+        if (disconnected) return;
+        if (records.some((record) => record.type === "childList")) {
+          reconnect();
+        }
+        onMutation();
+      });
+      observer.observe(element, {
+        attributes: true,
+        attributeFilter,
+        childList: true,
+        subtree: false,
+      });
+      observers.push(observer);
+    }
+  };
+
+  reconnect();
+
+  return () => {
+    disconnected = true;
+    for (const observer of observers) {
+      observer.disconnect();
+    }
+    observers.length = 0;
+  };
+}
+
+/**
+ * Point unique de synchronisation DOM → propriété du composant.
+ * N'assigne que si la valeur change (`Object.is`) pour limiter les re-renders Lit
+ * et éviter de reboucler inutilement `observeDynamicProperty` (@bind / @subscribe).
+ */
+export function syncAncestorAttributeValue(
+  component: object,
+  attributeName: string,
+  propertyKey: string,
+  options: SyncOptions,
+): void {
+  const record = component as Record<string, unknown>;
+  const value = HTML.getAncestorAttributeValue(
+    component as unknown as SearchableDomElement,
+    attributeName,
+  );
+  if (!options.assignNull && value === null) return;
+  if (!Object.is(record[propertyKey], value)) {
+    record[propertyKey] = value;
+  }
+}
+
+export default class AncestorAttributeObserver {
+  private static subscriptions = new Set<Subscription>();
+  private static pendingRefresh = new Set<Subscription>();
+  private static animationFrameId: number | null = null;
+
+  /**
+   * Enregistre un composant en mode `{ dynamic: true }`.
+   * Le `unsubscribe` retourné doit être appelé au `disconnectedCallback`.
+   */
+  static subscribe(
+    component: HTMLElement,
+    attributeName: string,
+    propertyKey: string,
+    syncOptions: SyncOptions = { assignNull: true },
+  ): () => void {
+    const subscription: Subscription = {
+      component,
+      attributeName,
+      propertyKey,
+      syncOptions,
+      disconnectObservers: null,
+    };
+
+    subscription.disconnectObservers = attachAncestorChainObservers(
+      subscription,
+      () => {
+        if (!AncestorAttributeObserver.subscriptions.has(subscription)) return;
+        AncestorAttributeObserver.pendingRefresh.add(subscription);
+        AncestorAttributeObserver.scheduleRefresh();
+      },
+    );
+
+    AncestorAttributeObserver.subscriptions.add(subscription);
+
+    return () => {
+      AncestorAttributeObserver.unsubscribe(subscription);
+    };
+  }
+
+  /** Coupe les observateurs et retire l'abonnement (pas de fuite après disconnect). */
+  private static unsubscribe(subscription: Subscription): void {
+    if (!AncestorAttributeObserver.subscriptions.has(subscription)) return;
+
+    subscription.disconnectObservers?.();
+    subscription.disconnectObservers = null;
+
+    AncestorAttributeObserver.subscriptions.delete(subscription);
+    AncestorAttributeObserver.pendingRefresh.delete(subscription);
+
+    if (AncestorAttributeObserver.subscriptions.size === 0) {
+      AncestorAttributeObserver.cancelScheduledRefresh();
+    }
+  }
+
+  private static scheduleRefresh(): void {
+    if (AncestorAttributeObserver.pendingRefresh.size === 0) return;
+    if (AncestorAttributeObserver.animationFrameId !== null) return;
+    AncestorAttributeObserver.animationFrameId = requestAnimationFrame(() => {
+      AncestorAttributeObserver.flushRefresh();
+    });
+  }
+
+  private static cancelScheduledRefresh(): void {
+    if (AncestorAttributeObserver.animationFrameId !== null) {
+      cancelAnimationFrame(AncestorAttributeObserver.animationFrameId);
+      AncestorAttributeObserver.animationFrameId = null;
+    }
+    AncestorAttributeObserver.pendingRefresh.clear();
+  }
+
+  private static flushRefresh(): void {
+    AncestorAttributeObserver.animationFrameId = null;
+    const subscriptions = Array.from(AncestorAttributeObserver.pendingRefresh);
+    AncestorAttributeObserver.pendingRefresh.clear();
+
+    for (const subscription of subscriptions) {
+      if (!AncestorAttributeObserver.subscriptions.has(subscription)) continue;
+      if (!subscription.component.isConnected) continue;
+      syncAncestorAttributeValue(
+        subscription.component,
+        subscription.attributeName,
+        subscription.propertyKey,
+        subscription.syncOptions,
+      );
+    }
+  }
+}

package/src/core/utils/HTML.ts

@@ -60,21 +60,15 @@ class HTML {
   }
 
   /** Noms d'attribut DOM à tester (Lit reflect → minuscules, ex. serviceURL → serviceurl). */
-  private static scopeAttributeNames(attributeName: string): string[] {
+  static scopeAttributeNames(attributeName: string): string[] {
     const lower = attributeName.toLowerCase();
     return lower === attributeName ? [attributeName] : [attributeName, lower];
   }
 
-  private static readScopeValueOnElement(
+  private static readScopeAttributeOnElement(
     element: HTMLElement,
     attributeName: string,
   ): string | null {
-    // Lit : la propriété est fiable avant le reflect ; un attribut vide (serviceurl="")
-    // ne doit pas masquer la propriété.
-    const prop = (element as unknown as Record<string, unknown>)[attributeName];
-    if (typeof prop === "string" && prop.length > 0) {
-      return prop;
-    }
     for (const attrName of HTML.scopeAttributeNames(attributeName)) {
       if (element.hasAttribute(attrName)) {
         const attr = element.getAttribute(attrName);
@@ -88,8 +82,6 @@ class HTML {
 
   /**
    * Va de parent en parent en partant de node pour trouver un attribut.
-   * Si l'attribut n'est pas encore reflété (ex. Lit `@property({ reflect: true })`
-   * au premier `connectedCallback`), lit la propriété homonyme sur l'élément.
    * @param attributeName nom de l'attribut
    * @returns valeur de l'attribut ou null si l'attribut n'est pas trouvé
    */
@@ -101,7 +93,7 @@ class HTML {
     let current: SearchableDomElement | null = node;
     while (current) {
       if (current instanceof HTMLElement) {
-        const value = HTML.readScopeValueOnElement(current, attributeName);
+        const value = HTML.readScopeAttributeOnElement(current, attributeName);
         if (value != null && value.length > 0) {
           return value;
         }

package/src/core/utils/PublisherProxy.ts

@@ -28,6 +28,24 @@ type PublisherProxyOptions = {
   invalidateOnPageShow?: boolean;
 };
 
+/** Options de `dp()` / `dataProvider()` — même surface que `PublisherManager.get()`. */
+export type DpOptions = PublisherProxyOptions;
+
+const DP_OPTION_KEYS = new Set<keyof DpOptions>([
+  "localStorageMode",
+  "expirationDelayMs",
+  "invalidateOnPageShow",
+]);
+
+function isDpOptions(value: unknown): value is DpOptions {
+  if (value == null || typeof value !== "object" || Array.isArray(value)) {
+    return false;
+  }
+  return Object.keys(value).some((key) =>
+    DP_OPTION_KEYS.has(key as keyof DpOptions),
+  );
+}
+
 function isLeaf(value: any) {
   return Object.prototype.hasOwnProperty.call(value, "__value");
 }
@@ -463,8 +481,7 @@ export class PublisherProxy<T = any> {
    */
   _cachedGet_?: T;
   get(): T {
-    if (PublisherManager.modifiedCollectore.length > 0)
-      PublisherManager.modifiedCollectore[0].add(this);
+    trackModifiedPublisher(this);
     if (this._cachedGet_ !== undefined) return this._cachedGet_;
     if (Object.prototype.hasOwnProperty.call(this._value_, "__value")) {
       const v = (this._value_ as any).__value;
@@ -501,6 +518,20 @@ export class PublisherProxy<T = any> {
  *
  */
 
+const modifiedCollectore: Set<any>[] = [];
+
+function trackModifiedPublisher(proxy: any) {
+  if (modifiedCollectore.length > 0) modifiedCollectore[0].add(proxy);
+}
+
+export function collectModifiedPublisher() {
+  modifiedCollectore.unshift(new Set<any>());
+}
+
+export function getModifiedPublishers() {
+  return modifiedCollectore.shift() as Set<any>;
+}
+
 export class PublisherManager {
   static buildDate = __BUILD_DATE__;
   static changed = false;
@@ -523,9 +554,19 @@ export class PublisherManager {
     if (PublisherManager.instance != null) throw "Singleton / use getInstance";
     PublisherManager.instance = this;
     this.isLocalStrorageReady = this.cleanStorageData() as Promise<boolean>;
+    PublisherManager.initPageShowHandler();
+  }
+
+  private static pageShowHandlerInitialized = false;
+  private static initPageShowHandler() {
+    if (PublisherManager.pageShowHandlerInitialized) return;
+    PublisherManager.pageShowHandlerInitialized = true;
+    window.addEventListener("pageshow", (e) => {
+      if (e.persisted) PublisherManager.getInstance().invalidateAll();
+    });
   }
 
-  invalidateAll() {
+  private invalidateAll() {
     this.publishers.forEach((publisher) => {
       if (!publisher._invalidate_on_page_show_) {
         return;
@@ -599,16 +640,6 @@ export class PublisherManager {
     return PublisherManager.instance;
   }
 
-  static registerInstance(id: string, instance: PublisherManager) {
-    if (PublisherManager.instances.has(id)) {
-      console.warn(
-        "PublisherManager instance already registered with id: ",
-        id,
-      );
-    }
-    PublisherManager.instances.set(id, instance);
-  }
-
   /**
    * shortcut static pour obtenir un publisher vias sont id/adresse sans taper getInstance.
    * Si le publisher n'existe pas, il est créé.
@@ -620,22 +651,6 @@ export class PublisherManager {
     return PublisherManager.getInstance().get(id, options);
   }
 
-  public static modifiedCollectore: Set<any>[] = [];
-  public static collectModifiedPublisher() {
-    PublisherManager.modifiedCollectore.unshift(new Set<any>());
-  }
-  public static getModifiedPublishers() {
-    return PublisherManager.modifiedCollectore.shift() as Set<any>;
-  }
-
-  /**
-   * 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éé.
@@ -1041,17 +1056,18 @@ try {
 
 export const getObservables = <T = any>(
   observable: string,
+  options?: DpOptions,
 ): Set<DataProvider<T>> => {
   if (typeof observable === "function") {
     const func = observable as () => any;
-    PublisherManager.collectModifiedPublisher();
+    collectModifiedPublisher();
     func();
-    return PublisherManager.getModifiedPublishers() as Set<DataProvider<T>>;
+    return getModifiedPublishers() as Set<DataProvider<T>>;
   }
   if (typeof observable === "string") {
     const split = observable.split(".");
     const dataProvider: string = split.shift() || "";
-    let publisher = PublisherManager.get(dataProvider);
+    let publisher = PublisherManager.get(dataProvider, options);
     publisher = Objects.traverse(publisher, split);
     const set = new Set<DataProvider<T>>();
     set.add(publisher as DataProvider<T>);
@@ -1068,9 +1084,14 @@ export function get<T>(id: string | DataProviderKey<T>): T {
   return getObservables<T>(path).values().next().value?.get() as T;
 }
 
-function deepee<T>(id: string | DataProviderKey<T>, _defaultValue?: T) {
+function deepee<T>(
+  id: string | DataProviderKey<T>,
+  _defaultValue?: T,
+  options?: DpOptions,
+) {
   const path = resolveStaticPublisherPath(id);
-  const value = getObservables<T>(path).values().next().value as DataProvider<T>;
+  const value = getObservables<T>(path, options).values().next()
+    .value as DataProvider<T>;
   // if (defaultValue !== undefined && value) {
   //   const innerValue = value.get();
   //   if (Objects.isEmpty(innerValue as Record<string, any>)) {
@@ -1081,19 +1102,79 @@ function deepee<T>(id: string | DataProviderKey<T>, _defaultValue?: T) {
   return value;
 }
 
-export function dataProvider<T>(id: DataProviderKey<T>, defaultValue?: T): DataProvider<T>;
-export function dataProvider<T = any>(id: string, defaultValue?: T): DataProvider<T>;
+type MirrorDpSource = DataProvider<any> | string | DataProviderKey<any>;
+
+function isDataProvider(value: unknown): value is DataProvider<any> {
+  return (
+    value != null &&
+    typeof value === "object" &&
+    typeof (value as DataProvider<any>).get === "function" &&
+    typeof (value as DataProvider<any>).set === "function" &&
+    typeof (value as DataProvider<any>).onAssign === "function"
+  );
+}
+
+function resolvePublisherRef(
+  ref: MirrorDpSource,
+  options?: DpOptions,
+): DataProvider<any> {
+  if (isDataProvider(ref)) return ref;
+  return deepee(ref, undefined, options);
+}
+
+export function dataProvider<T>(
+  id: DataProviderKey<T>,
+  options: DpOptions,
+): DataProvider<T>;
+export function dataProvider<T = any>(id: string, options: DpOptions): DataProvider<T>;
+export function dataProvider<T>(id: DataProviderKey<T>): DataProvider<T>;
+export function dataProvider<T = any>(id: string): DataProvider<T>;
+export function dataProvider<T>(id: DataProviderKey<T>, defaultValue: T): DataProvider<T>;
+export function dataProvider<T = any>(id: string, defaultValue: T): DataProvider<T>;
 export function dataProvider<T>(
   id: string | DataProviderKey<T>,
-  defaultValue?: T,
+  second?: T | DpOptions,
 ): DataProvider<T> {
-  return deepee(id, defaultValue);
+  if (isDpOptions(second)) return deepee(id, undefined, second);
+  return deepee(id, second as T | undefined);
 }
 
-export function dp<T>(id: DataProviderKey<T>, defaultValue?: T): DataProvider<T>;
-export function dp<T = any>(id: string, defaultValue?: T): DataProvider<T>;
-export function dp<T>(id: string | DataProviderKey<T>, defaultValue?: T): DataProvider<T> {
-  return deepee(id, defaultValue);
+export function dp<T>(id: DataProviderKey<T>, options: DpOptions): DataProvider<T>;
+export function dp<T = any>(id: string, options: DpOptions): DataProvider<T>;
+export function dp<T>(id: DataProviderKey<T>): DataProvider<T>;
+export function dp<T = any>(id: string): DataProvider<T>;
+export function dp<T>(id: DataProviderKey<T>, defaultValue: T): DataProvider<T>;
+export function dp<T = any>(id: string, defaultValue: T): DataProvider<T>;
+export function dp<T>(
+  id: string | DataProviderKey<T>,
+  second?: T | DpOptions,
+): DataProvider<T> {
+  if (isDpOptions(second)) return deepee(id, undefined, second);
+  return deepee(id, second as T | undefined);
+}
+
+/**
+ * Alias sémantique pour `PublisherManager.set` : enregistre `aliasKey` sur la même
+ * instance publisher que `source`. Utile pour exposer une clé legacy (`scan`) tout en
+ * stockant l'état sous une racine (`app.scan`) — `dp("scan")` et `appState.scan` partagent
+ * alors la même instance, sans copie à chaque assignation.
+ */
+export function mirrorDp<T>(
+  aliasKey: string | DataProviderKey<any>,
+  source: DataProvider<T>,
+): void;
+export function mirrorDp(
+  aliasKey: string | DataProviderKey<any>,
+  source: string | DataProviderKey<any>,
+): void;
+export function mirrorDp(
+  aliasKey: string | DataProviderKey<any>,
+  source: DataProvider<any> | string | DataProviderKey<any>,
+): void {
+  PublisherManager.getInstance().set(
+    resolveStaticPublisherPath(aliasKey),
+    resolvePublisherRef(source),
+  );
 }
 
 export function set<T>(id: DataProviderKey<T>, value: T): void;
@@ -1103,9 +1184,3 @@ export function set<T>(id: string | DataProviderKey<T>, value: T): void {
   getObservables(path).values().next().value?.set(value);
 }
 
-/**
- * next back handling data invalidation
- */
-window.addEventListener("pageshow", (e) => {
-  if (e.persisted) PublisherManager.getInstance().invalidateAll();
-});

package/src/core/utils/api.ts

@@ -37,8 +37,8 @@ export type APIResponse = {
   processed: ResultTypeInterface;
 };
 
-/** Valeur assignée par `@get` : requête native, réponse `fetch` si HTTP, résultat métier typé `T`. */
-export type ApiGetResult<T> = {
+/** Valeur assignée par `@get`, `@post`, `@put`, `@patch`. */
+export type ApiResult<T> = {
   request: Request;
   /** Absent / `undefined` pour les chemins `dataProvider(...)` (pas d’appel réseau). */
   response?: Response;
@@ -46,8 +46,11 @@ export type ApiGetResult<T> = {
   result: T;
 };
 
+/** @deprecated Utiliser `ApiResult`. */
+export type ApiGetResult<T> = ApiResult<T>;
+
 /** Extrait le corps typé depuis le résultat traité par `handleResult`. */
-export function extractTypedApiResult<T>(
+function extractTypedApiResult<T>(
   processed: ResultTypeInterface | null | undefined,
 ): T {
   if (processed == null || typeof processed !== "object") {
@@ -64,7 +67,7 @@ class API {
   /**
    * Ce tableau static permet de ne pas appeler plusieurs fois le même service lors d'appel concurrents en GET.
    */
-  static loadingGetPromises: Map<string, Promise<unknown>> = new Map();
+  private static loadingGetPromises: Map<string, Promise<unknown>> = new Map();
   /**
    * L'url de base du service sans endpoint
    */
@@ -120,14 +123,14 @@ class API {
   /**
    * Tableau static des tokens stokés en memoire vive (comportement à revoir à l'occasion)
    */
-  static tokens = new Map<string | null, string | null | undefined>();
+  private static tokens = new Map<string | null, string | null | undefined>();
 
   /**
    * Tableau stockant l'ensemble des tokens invalides
    */
-  static invalidTokens: (string | null | undefined)[] = [];
+  private static invalidTokens: (string | null | undefined)[] = [];
 
-  handleInvalidToken(token: string | null | undefined) {
+  private handleInvalidToken(token: string | null | undefined) {
     if (!token) return;
 
     if (API.invalidTokens.includes(token)) return;
@@ -139,11 +142,11 @@ class API {
   /**
    * Tableau static des tentatives échouées de récupération auto du token
    */
-  static failledTokenUpdates = new Map<string | null, true>();
+  private static failledTokenUpdates = new Map<string | null, true>();
   /**
    * Tableau static des flags pour savoir si le premier appel a été fait pour chaque serviceURL
    */
-  static firstCallDoneFlags = new Map<string | null, CallState>();
+  private static firstCallDoneFlags = new Map<string | null, CallState>();
 
   /**
    * Le endPoint pour obtenir le bearer token qui sera concaténé à l'url du service
@@ -171,7 +174,7 @@ class API {
     this.cache = config.cache || "default";
     this.keepAlive = config.keepAlive || false;
   }
-  async handleResult(
+  private async handleResult(
     fetchResult: Response,
     lastCall: APICall,
   ): Promise<ResultTypeInterface> {
@@ -228,7 +231,7 @@ class API {
   /**
    * Basic auth
    */
-  async auth() {
+  private async auth() {
     if (this.token) return;
     if (API.tokens.has(this.serviceURL)) {
       this.token = API.tokens.get(this.serviceURL);
@@ -359,7 +362,7 @@ class API {
   /**
    * firstCallDone is a function that returns a promise that is resolved when the first call to the API is done for each serviceURL whatever api instance is used
    */
-  firstCallDone() {
+  private firstCallDone() {
     return new Promise((resolve) => {
       if (!API.firstCallDoneFlags.has(this.serviceURL)) {
         API.firstCallDoneFlags.set(this.serviceURL, "loading");
@@ -434,7 +437,7 @@ class API {
   async getDetailed<T>(
     path: string,
     additionalHeaders?: HeadersInit,
-  ): Promise<ApiGetResult<T> | undefined> {
+  ): Promise<ApiResult<T> | undefined> {
     const isDataProvider = /dataProvider\((.*?)\)(.*?)$/.test(path);
 
     const processed = await this.get<T>(path, additionalHeaders);
@@ -468,6 +471,72 @@ class API {
     };
   }
 
+  /**
+   * S’appuie sur `post()` puis reformate la réponse : `Request` avec body JSON,
+   * `Response` via `lastResult`, `result` typé `T`.
+   */
+  async sendDetailed<T, B>(
+    path: string,
+    body: B,
+    method: "POST" | "PUT" | "PATCH",
+    additionalHeaders?: HeadersInit,
+  ): Promise<ApiResult<T> | undefined> {
+    const processed = await this.send<T, B>(
+      path,
+      body,
+      method,
+      additionalHeaders,
+    );
+    if (processed == null) {
+      return undefined;
+    }
+
+    const result = extractTypedApiResult<T>(processed as ResultTypeInterface);
+    const url = this.computeURL(path);
+    const headers = await this.createHeaders({
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      ...(additionalHeaders as Record<string, string> | undefined),
+    });
+    const request = new Request(url, {
+      method,
+      headers: new Headers(headers as HeadersInit),
+      credentials: this.credentials,
+      body: JSON.stringify(body),
+      keepalive: this.keepAlive,
+    });
+
+    return {
+      request,
+      response: this.lastResult,
+      result,
+    };
+  }
+
+  async postDetailed<T, B>(
+    path: string,
+    body: B,
+    additionalHeaders?: HeadersInit,
+  ): Promise<ApiResult<T> | undefined> {
+    return this.sendDetailed<T, B>(path, body, "POST", additionalHeaders);
+  }
+
+  async putDetailed<T, B>(
+    path: string,
+    body: B,
+    additionalHeaders?: HeadersInit,
+  ): Promise<ApiResult<T> | undefined> {
+    return this.sendDetailed<T, B>(path, body, "PUT", additionalHeaders);
+  }
+
+  async patchDetailed<T, B>(
+    path: string,
+    body: B,
+    additionalHeaders?: HeadersInit,
+  ): Promise<ApiResult<T> | undefined> {
+    return this.sendDetailed<T, B>(path, body, "PATCH", additionalHeaders);
+  }
+
   /**
    * Création du header, avec authentification si besoin
    * ajout du language via le header accept-language qui contient le langue du navigateur