@supersoniks/concorde 4.5.0 → 4.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "4.5.0",
+  "version": "4.5.2",
   "license": "MIT",
   "type": "module",
   "main": "",
@@ -220,6 +220,9 @@
     "./modal-title": "./src/core/components/ui/modal/modal-title.ts",
     "./ui/modal-title": "./src/core/components/ui/modal/modal-title.ts",
     "./ui/modal/modal-title": "./src/core/components/ui/modal/modal-title.ts",
+    "./modal-utils": "./src/core/components/ui/modal/modal-utils.ts",
+    "./ui/modal-utils": "./src/core/components/ui/modal/modal-utils.ts",
+    "./ui/modal/modal-utils": "./src/core/components/ui/modal/modal-utils.ts",
     "./modal": "./src/core/components/ui/modal/modal.ts",
     "./ui/modal": "./src/core/components/ui/modal/modal.ts",
     "./pop": "./src/core/components/ui/pop/pop.ts",
@@ -283,6 +286,7 @@
     "./decorators/subscriber/bind": "./src/core/decorators/subscriber/bind.ts",
     "./decorators/subscriber/common": "./src/core/decorators/subscriber/common.ts",
     "./decorators/subscriber/dynamicPath": "./src/core/decorators/subscriber/dynamicPath.ts",
+    "./decorators/subscriber/dynamicPropertyWatch.spec": "./src/core/decorators/subscriber/dynamicPropertyWatch.spec.ts",
     "./decorators/subscriber/dynamicPropertyWatch": "./src/core/decorators/subscriber/dynamicPropertyWatch.ts",
     "./decorators/subscriber/onAssign": "./src/core/decorators/subscriber/onAssign.ts",
     "./decorators/subscriber/publish.spec": "./src/core/decorators/subscriber/publish.spec.ts",

package/src/core/components/ui/modal/modal-utils.ts

@@ -0,0 +1,46 @@
+import { CSSResultGroup, CSSResult } from "lit";
+
+export type ModalStyleSheetInput =
+  | CSSResultGroup
+  | CSSStyleSheet
+  | Array<CSSResultGroup | CSSStyleSheet>;
+
+const styleSheetCache = new WeakMap<CSSResult, CSSStyleSheet>();
+
+function cssResultToStyleSheet(styleResult: CSSResult): CSSStyleSheet {
+  const cachedStyleSheet = styleSheetCache.get(styleResult);
+  if (cachedStyleSheet) return cachedStyleSheet;
+
+  const styleSheet = new CSSStyleSheet();
+  styleSheet.replaceSync(styleResult.cssText);
+  styleSheetCache.set(styleResult, styleSheet);
+  return styleSheet;
+}
+
+function isCSSResult(value: unknown): value is CSSResult {
+  return value instanceof CSSResult;
+}
+
+export function normalizeStyleSheets(
+  styleSheet?: ModalStyleSheetInput
+): Array<CSSStyleSheet> {
+  if (!styleSheet) return [];
+
+  const styleSheets = Array.isArray(styleSheet) ? styleSheet : [styleSheet];
+
+  return styleSheets.flatMap((sheet) => {
+    if (Array.isArray(sheet)) {
+      return normalizeStyleSheets(sheet);
+    }
+
+    if (sheet instanceof CSSStyleSheet) {
+      return [sheet];
+    }
+
+    if (isCSSResult(sheet)) {
+      return [cssResultToStyleSheet(sheet)];
+    }
+
+    return [];
+  });
+}

package/src/core/components/ui/modal/modal.ts

@@ -19,6 +19,7 @@ import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { ButtonType } from "../button/button";
+import { ModalStyleSheetInput, normalizeStyleSheets } from "./modal-utils";
 
 declare const window: ConcordeWindow;
 declare type ModalCreateOptions = {
@@ -26,6 +27,7 @@ declare type ModalCreateOptions = {
   subtitle?: string | DirectiveResult;
   content?: string | DirectiveResult;
   actions?: string | DirectiveResult;
+  styleSheet?: ModalStyleSheetInput;
   zIndex?: string;
   paddingX?: string;
   paddingY?: string;
@@ -171,7 +173,8 @@ export class Modal extends Subscriber(LitElement) {
         z-index: 20;
         opacity: 0;
         transform: scale(0);
-        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+        transition:
+          transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
           opacity 0.1s linear;
         transform-origin: center center;
         display: flex;
@@ -223,6 +226,7 @@ export class Modal extends Subscriber(LitElement) {
   @property({ type: String }) width = "100%";
   @property({ type: String }) height = "fit-content";
   @property({ type: String }) effect: effectType = "slide";
+  @property({ attribute: false }) styleSheet?: ModalStyleSheetInput;
 
   @property({ type: Object }) options?: ModalCreateOptions;
 
@@ -237,6 +241,7 @@ export class Modal extends Subscriber(LitElement) {
 
   @state() private _animationState: "visible" | "in" | "out" | "hidden" =
     "hidden";
+  private _adoptedStyleSheets: Array<CSSStyleSheet> = [];
 
   static create(options: ModalCreateOptions): Modal {
     const modal = document.createElement(tagName) as Modal;
@@ -260,6 +265,7 @@ export class Modal extends Subscriber(LitElement) {
     if (options.noCloseButton) modal.noCloseButton = true;
     if (options.closeButtonType)
       modal.closeButtonType = options?.closeButtonType;
+    if (options.styleSheet) modal.styleSheet = options?.styleSheet;
     if (options.paddingX) modal.paddingX = options?.paddingX;
     if (options.paddingY) modal.paddingY = options?.paddingY;
     if (options.zIndex) modal.zIndex = options?.zIndex;
@@ -327,6 +333,10 @@ export class Modal extends Subscriber(LitElement) {
     } else if (changedToHidden && this._animationState === "visible") {
       this.hide();
     }
+
+    if (_changedProperties.has("styleSheet")) {
+      this.syncAdoptedStyleSheets();
+    }
   }
 
   // SI c'est en modal
@@ -393,6 +403,21 @@ export class Modal extends Subscriber(LitElement) {
     `;
   }
 
+  syncAdoptedStyleSheets() {
+    if (!(this.renderRoot instanceof ShadowRoot)) return;
+
+    const nextStyleSheets = normalizeStyleSheets(this.styleSheet);
+    const currentStyleSheets = this.renderRoot.adoptedStyleSheets.filter(
+      (sheet) => !this._adoptedStyleSheets.includes(sheet),
+    );
+
+    this.renderRoot.adoptedStyleSheets = [
+      ...currentStyleSheets,
+      ...nextStyleSheets,
+    ];
+    this._adoptedStyleSheets = nextStyleSheets;
+  }
+
   modalFragment(optionKey: keyof ModalCreateOptions) {
     const optionValue: Object | PrimitiveType = this.options?.[optionKey];
     if (!optionValue) return nothing;
@@ -440,7 +465,7 @@ export class Modal extends Subscriber(LitElement) {
     this.visible = false;
     if (this.hasAttribute("resetDataProviderOnHide")) {
       PublisherManager.get(this.getAttribute("resetDataProviderOnHide")).set(
-        {}
+        {},
       );
     }
     if (this.removeHashOnHide) {
@@ -470,7 +495,7 @@ export class Modal extends Subscriber(LitElement) {
     if (e.key === "Escape") {
       e.preventDefault();
       const visibleModals = Modal.modals.filter(
-        (modal) => modal._animationState !== "hidden" && !modal.forceAction
+        (modal) => modal._animationState !== "hidden" && !modal.forceAction,
       );
       if (visibleModals.length > 0) {
         const lastVisibleModal = visibleModals[visibleModals.length - 1];
@@ -529,8 +554,8 @@ export class Modal extends Subscriber(LitElement) {
               easing: isEntering ? quartOut : quadOut,
               fill: "both",
               delay: delay,
-            }
-          )
+            },
+          ),
         );
         animations.push(
           element.animate(
@@ -540,13 +565,13 @@ export class Modal extends Subscriber(LitElement) {
               easing: linear,
               fill: "both",
               delay: delay,
-            }
-          )
+            },
+          ),
         );
       }
 
       Promise.all(animations.map((anim) => anim.finished)).then(() =>
-        resolve()
+        resolve(),
       );
     });
   }

package/src/core/decorators/api.ts

@@ -18,7 +18,7 @@ import {
 } from "./subscriber/dynamicPath";
 import {
   getDynamicWatchKeys,
-  registerDynamicPropertyWatcher,
+  observeDynamicProperty,
 } from "./subscriber/dynamicPropertyWatch";
 import { getPublisherFromPath } from "./subscriber/publisherPath";
 
@@ -203,7 +203,7 @@ export function get<T, Ue = any, Uk = any>(
 
       if (usesPublisherConfig) {
         for (const dependency of mergedDynamicDependencies) {
-          const unsubscribe = registerDynamicPropertyWatcher(
+          const unsubscribe = observeDynamicProperty(
             getDynamicWatchKeys.watcherStore,
             getDynamicWatchKeys.hooked,
             component,
@@ -216,7 +216,7 @@ export function get<T, Ue = any, Uk = any>(
       } else {
         if (isDynamicPath) {
           for (const dependency of endpointDynamicDependencies) {
-            const unsubscribe = registerDynamicPropertyWatcher(
+            const unsubscribe = observeDynamicProperty(
               getDynamicWatchKeys.watcherStore,
               getDynamicWatchKeys.hooked,
               component,

package/src/core/decorators/subscriber/ancestorAttribute.ts

@@ -5,13 +5,14 @@ export function ancestorAttribute(attributeName: string) {
   return function (target: unknown, propertyKey: string) {
     if (!target) return;
     setSubscribable(target);
-
-    (target as ConnectedComponent).__onConnected__((component) => {
+    (target as ConnectedComponent).__onBeforeConnected__((component) => {
       const value = HTML.getAncestorAttributeValue(
         component as any,
-        attributeName
+        attributeName,
       );
-      component[propertyKey] = value;
+      if (value !== null) {
+        component[propertyKey] = value;
+      }
     });
   };
 }

package/src/core/decorators/subscriber/bind.ts

@@ -10,13 +10,13 @@ import {
 } from "./dynamicPath";
 import {
   bindDynamicWatchKeys,
-  registerDynamicPropertyWatcher,
+  observeDynamicProperty,
 } from "./dynamicPropertyWatch";
 import { getPublisherFromPath } from "./publisherPath";
 
 function bindImpl(
   path: string,
-  options?: { reflect?: boolean }
+  options?: { reflect?: boolean },
 ): (target: unknown, propertyKey: string) => void {
   const reflect = options?.reflect ?? false;
   const dynamicDependencies = extractDynamicDependencies(path);
@@ -34,7 +34,7 @@ function bindImpl(
     if (reflect) {
       const existingDescriptor = Object.getOwnPropertyDescriptor(
         target as any,
-        propertyKey
+        propertyKey,
       );
       const internalValueKey = `__bind_${propertyKey}_value__`;
       const reflectUpdateFlagKey = `__bind_${propertyKey}_updating_from_publisher__`;
@@ -152,12 +152,12 @@ function bindImpl(
 
       if (isDynamicPath) {
         for (const dependency of dynamicDependencies) {
-          const unsubscribe = registerDynamicPropertyWatcher(
+          const unsubscribe = observeDynamicProperty(
             bindDynamicWatchKeys.watcherStore,
             bindDynamicWatchKeys.hooked,
             component,
             dependency,
-            () => refreshSubscription()
+            () => refreshSubscription(),
           );
           state.cleanupWatchers.push(unsubscribe);
         }
@@ -199,7 +199,10 @@ function bindImpl(
  * @state()
  * count: number = 0;
  */
-export function bind(path: string, options?: { reflect?: boolean }): (target: unknown, propertyKey: string) => void;
+export function bind(
+  path: string,
+  options?: { reflect?: boolean },
+): (target: unknown, propertyKey: string) => void;
 export function bind<T, U = any>(
   key: DataProviderKey<T, U>,
   options?: { reflect?: boolean },
@@ -214,4 +217,3 @@ export function bind(
   const path = hasPath(pathOrKey) ? pathOrKey.path : pathOrKey;
   return bindImpl(path, options);
 }
-

package/src/core/decorators/subscriber/common.ts

@@ -1,12 +1,26 @@
 type ConnectedCallback = (component: ConnectedComponent) => void;
 
 export type ConnectedComponent = Record<string, unknown> & {
+  /** Hooks exécutés avant le connectedCallback d'origine (ex. lecture DOM ancêtre). */
+  __onBeforeConnected__: (callback: ConnectedCallback) => void;
+  /** Hooks exécutés après le connectedCallback d'origine (ex. abonnements). */
   __onConnected__: (callback: ConnectedCallback) => void;
   __onDisconnected__: (callback: ConnectedCallback) => void;
+  __beforeConnectedCallbackCalls__?: Set<ConnectedCallback>;
   __connectedCallbackCalls__?: Set<ConnectedCallback>;
   __disconnectedCallbackCalls__?: Set<ConnectedCallback>;
 };
 
+function onBeforeConnected(
+  this: ConnectedComponent,
+  callback: ConnectedCallback,
+) {
+  if (!this.__beforeConnectedCallbackCalls__) {
+    this.__beforeConnectedCallbackCalls__ = new Set();
+  }
+  this.__beforeConnectedCallbackCalls__.add(callback);
+}
+
 function onConnected(this: ConnectedComponent, callback: ConnectedCallback) {
   if (!this.__connectedCallbackCalls__) {
     this.__connectedCallbackCalls__ = new Set();
@@ -25,15 +39,21 @@ export function setSubscribable(target: any) {
   if (target.__is__setSubscribable__) return;
   target.__is__setSubscribable__ = true;
 
+  target.__onBeforeConnected__ = onBeforeConnected;
   target.__onConnected__ = onConnected;
   target.__onDisconnected__ = onDisconnected;
 
   const originalConnectedCallback = target.connectedCallback;
   target.connectedCallback = function (this: any) {
+    if (this.__beforeConnectedCallbackCalls__) {
+      this.__beforeConnectedCallbackCalls__.forEach(
+        (callback: ConnectedCallback) => callback(this),
+      );
+    }
     originalConnectedCallback?.call(this);
     if (this.__connectedCallbackCalls__) {
       this.__connectedCallbackCalls__.forEach((callback: ConnectedCallback) =>
-        callback(this)
+        callback(this),
       );
     }
   };
@@ -43,7 +63,7 @@ export function setSubscribable(target: any) {
     originalDisconnectedCallback?.call(this);
     if (this.__disconnectedCallbackCalls__) {
       this.__disconnectedCallbackCalls__.forEach(
-        (callback: ConnectedCallback) => callback(this)
+        (callback: ConnectedCallback) => callback(this),
       );
     }
   };

package/src/core/decorators/subscriber/dynamicPropertyWatch.spec.ts

@@ -0,0 +1,125 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { observeDynamicProperty } from "./dynamicPropertyWatch";
+
+const legacyStoreKey = Symbol("legacyStore");
+const legacyHookedKey = Symbol("legacyHooked");
+
+async function flushFrames(count = 2): Promise<void> {
+  for (let i = 0; i < count; i += 1) {
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve());
+    });
+  }
+}
+
+describe("observeDynamicProperty (poll rAF)", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("déclenche le handler quand une prop observée change", async () => {
+    const component = { userIndex: 0 };
+    const onDependencyChange = vi.fn();
+
+    observeDynamicProperty(
+      legacyStoreKey,
+      legacyHookedKey,
+      component,
+      "userIndex",
+      onDependencyChange,
+    );
+
+    component.userIndex = 1;
+    await flushFrames();
+
+    expect(onDependencyChange).toHaveBeenCalled();
+  });
+
+  it("ne déclenche pas sans changement de valeur", async () => {
+    const component = { userIndex: 0 };
+    const onDependencyChange = vi.fn();
+
+    observeDynamicProperty(
+      legacyStoreKey,
+      legacyHookedKey,
+      component,
+      "userIndex",
+      onDependencyChange,
+    );
+
+    await flushFrames();
+
+    expect(onDependencyChange).not.toHaveBeenCalled();
+  });
+
+  it("propage un changement effectué dans le handler (même frame)", async () => {
+    const component = { a: 0, b: 0 };
+    const onAChange = vi.fn(() => {
+      component.b = 1;
+    });
+    const onBChange = vi.fn();
+
+    observeDynamicProperty(
+      legacyStoreKey,
+      legacyHookedKey,
+      component,
+      "a",
+      onAChange,
+    );
+    observeDynamicProperty(
+      legacyStoreKey,
+      legacyHookedKey,
+      component,
+      "b",
+      onBChange,
+    );
+
+    component.a = 1;
+    await flushFrames();
+
+    expect(onAChange).toHaveBeenCalled();
+    expect(onBChange).toHaveBeenCalled();
+  });
+
+  it("désinscription : plus de handler après cleanup", async () => {
+    const component = { userIndex: 0 };
+    const onDependencyChange = vi.fn();
+
+    const unobserve = observeDynamicProperty(
+      legacyStoreKey,
+      legacyHookedKey,
+      component,
+      "userIndex",
+      onDependencyChange,
+    );
+
+    unobserve();
+    component.userIndex = 2;
+    await flushFrames();
+
+    expect(onDependencyChange).not.toHaveBeenCalled();
+  });
+
+  it("alerte si boucle infinie (handler qui remute la même prop)", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const component = { loop: 0 };
+    const onDependencyChange = vi.fn(() => {
+      component.loop += 1;
+    });
+
+    observeDynamicProperty(
+      legacyStoreKey,
+      legacyHookedKey,
+      component,
+      "loop",
+      onDependencyChange,
+    );
+
+    component.loop = 1;
+    await flushFrames(3);
+
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining("boucle infinie"),
+    );
+  });
+});