@supersoniks/concorde 3.2.8 → 3.3.2

package/src/core/components/functional/queue/queue.demo.ts

@@ -22,17 +22,14 @@ export class QueueDemo extends LitElement {
 
   render() {
     return html`
-      <div class="p-4">
-        <h2 class="text-xl font-medium mb-4">Liste des communes</h2>
-        <sonic-queue
-          class="grid grid-cols-3 gap-3"
-          serviceurl="https://geo.api.gouv.fr/"
-          dataproviderexpression="communes?limit=$limit"
-          limit="30"
-          .items=${this.items}
-          .noItems=${this.noItems}
-        ></sonic-queue>
-      </div>
+      <sonic-queue
+        class="grid grid-cols-3 gap-3"
+        serviceurl="https://geo.api.gouv.fr/"
+        dataproviderexpression="communes?limit=$limit"
+        limit="30"
+        .items=${this.items}
+        .noItems=${this.noItems}
+      ></sonic-queue>
     `;
   }
 }

package/src/core/decorators/Subscriber.ts

@@ -1,187 +1,5 @@
-import {Objects} from "@supersoniks/concorde/utils";
-import {PublisherProxy, PublisherManager} from "../utils/PublisherProxy";
-
-type Callback = (...values: unknown[]) => void;
-type ConnectedComponent = Record<string, unknown> & {
-  __onConnected__: (callback: (component: ConnectedComponent) => void) => void;
-  __onDisconnected__: (callback: (component: ConnectedComponent) => void) => void;
-  __connectedCallbackCalls__?: Set<(component: ConnectedComponent) => void>;
-  __disconnectedCallbackCalls__?: Set<(component: ConnectedComponent) => void>;
-};
-type Configuration = {
-  callbacks: Set<Callback>;
-  publisher: PublisherProxy;
-  onAssign: (value: unknown) => void;
-};
-
-function onConnected(this: ConnectedComponent, callback: (component: ConnectedComponent) => void) {
-  if (!this.__connectedCallbackCalls__) this.__connectedCallbackCalls__ = new Set();
-  this.__connectedCallbackCalls__.add(callback);
-}
-function __onDisconnected__(this: ConnectedComponent, callback: (component: ConnectedComponent) => void) {
-  if (!this.__disconnectedCallbackCalls__) this.__disconnectedCallbackCalls__ = new Set();
-  this.__disconnectedCallbackCalls__.add(callback);
-}
-
-function setSubscribable(target: any) {
-  if (target.__is__setSubscribable__) return;
-  target.__is__setSubscribable__ = true;
-
-  target.__onConnected__ = onConnected;
-  target.__onDisconnected__ = __onDisconnected__;
-  // target.offConnected = onConnected;
-  // target.offDisconnected = __onDisconnected__;
-
-  const originalConnectedCallback = target.connectedCallback;
-  target.connectedCallback = function (this: any) {
-    originalConnectedCallback.call(this);
-    if (this.__connectedCallbackCalls__) {
-      this.__connectedCallbackCalls__.forEach((callback: (component: any) => void) => callback(this));
-    }
-  };
-  const originalDisconnectedCallback = target.disconnectedCallback;
-  target.disconnectedCallback = function (this: any) {
-    originalDisconnectedCallback.call(this);
-    if (this.__disconnectedCallbackCalls__) {
-      this.__disconnectedCallbackCalls__.forEach((callback: (component: any) => void) => callback(this));
-    }
-  };
-}
-
-export function bind(path: string) {
-  const split = path.split(".");
-  if (split.length == 0) {
-    return function () {
-      //Empty def function
-    };
-  }
-  const dataProvider: string = split.shift() || "";
-  let publisher = PublisherManager.get(dataProvider);
-  publisher = Objects.traverse(publisher, split);
-  return function (target: unknown, propertyKey: string) {
-    if (!target) return;
-    let onAssign: (value: unknown) => void;
-    setSubscribable(target);
-
-    (target as ConnectedComponent).__onConnected__((component) => {
-      onAssign = (value: unknown) => {
-        component[propertyKey] = value;
-      };
-      publisher.onAssign(onAssign);
-    });
-
-    (target as ConnectedComponent).__onDisconnected__(() => {
-      publisher.offAssign(onAssign);
-    });
-  };
-}
-
-export function onAssign(...values: Array<string>) {
-  const onAssignValues: unknown[] = [];
-  const confs: Configuration[] = [];
-  for (let i = 0; i < values.length; i++) {
-    const value = values[i];
-    const split = value.split(".");
-    if (split.length == 0) {
-      continue;
-    }
-    const dataProvider: string = split.shift() || "";
-
-    let publisher = PublisherManager.get(dataProvider);
-
-    publisher = Objects.traverse(publisher, split);
-    const callbacks: Set<Callback> = new Set();
-    const onAssign = (value: unknown) => {
-      onAssignValues[i] = value;
-      if (onAssignValues.filter((v) => v !== null).length == values.length) callbacks.forEach((callback) => callback(...onAssignValues));
-    };
-    confs.push({publisher, onAssign, callbacks});
-  }
-  return function (target: unknown, _propertyKey: string, descriptor: PropertyDescriptor) {
-    setSubscribable(target);
-    let callback: Callback;
-
-    (target as ConnectedComponent).__onConnected__((component) => {
-      for (const conf of confs) {
-        callback = descriptor.value.bind(component);
-        conf.callbacks.add(callback);
-        conf.publisher.onAssign(conf.onAssign);
-      }
-    });
-
-    (target as ConnectedComponent).__onDisconnected__(() => {
-      for (const conf of confs) {
-        conf.callbacks.delete(callback);
-        conf.publisher.offAssign(conf.onAssign);
-      }
-    });
-  };
-}
-
-export function autoSubscribe() {
-  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
-    let renderId = 0;
-
-    const originalMethod = descriptor.value;
-    const originalDC = target.constructor.prototype.disconnectedCallback;
-    target.constructor.prototype.disconnectedCallback = function () {
-      originalDC.apply(this);
-      this.__removeAutoSubscribe__();
-    };
-    const originalConnectedCallback = target.connectedCallback;
-    target.connectedCallback = function (this: any) {
-      originalConnectedCallback?.call(this);
-      this[propertyKey]();
-    };
-    descriptor.value = function (...args: unknown[]) {
-      let publishers: Set<PublisherProxy> = new Set();
-      const onAssign = () => {
-        renderId++;
-        const id = renderId;
-        window.queueMicrotask(() => {
-          if (id !== renderId) return;
-          (this as any)[propertyKey]();
-        });
-      };
-      //on désabone les publishers du rendu précédant
-      publishers.forEach((publisher: PublisherProxy) => {
-        publisher.offAssign(onAssign);
-      });
-      //on collecte les publisher modifiés pour s'abonner pour la prochaine modification
-      PublisherManager.collectModifiedPublisher();
-      const result = originalMethod.apply(this, args);
-      publishers = PublisherManager.getModifiedPublishers() || new Set<PublisherProxy>();
-      publishers.forEach((publisher: PublisherProxy) => {
-        publisher.onAssign(onAssign, false);
-      });
-      (this as typeof target.constructor.prototype.disconnectedCallback).__removeAutoSubscribe__ = () => {
-        publishers.forEach((publisher: PublisherProxy) => {
-          publisher.offAssign(onAssign);
-        });
-      };
-      return result;
-    };
-  };
-}
-export function autoFill(values: string[]) {
-  return function (target: unknown) {
-    setSubscribable(target);
-    for (const value of values) {
-      const split = value.split(".");
-      if (split.length == 0) {
-        continue;
-      }
-      const dataProvider: string = split.shift() || "";
-      let publisher = PublisherManager.get(dataProvider);
-      publisher = Objects.traverse(publisher, split);
-      (target as ConnectedComponent).__onConnected__((component: unknown) => {
-        publisher.startTemplateFilling(component);
-      });
-      (target as ConnectedComponent).__onDisconnected__(() => {
-        (component: unknown) => {
-          publisher.stopTemplateFilling(component);
-        };
-      });
-    }
-  };
-}
+export { bind } from "./subscriber/bind";
+export { onAssign } from "./subscriber/onAssign";
+export { autoSubscribe } from "./subscriber/autoSubscribe";
+export { autoFill } from "./subscriber/autoFill";
+export { ancestorAttribute } from "./subscriber/ancestorAttribute";

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

@@ -0,0 +1,17 @@
+import HTML from "../../utils/HTML";
+import { ConnectedComponent, setSubscribable } from "./common";
+
+export function ancestorAttribute(attributeName: string) {
+  return function (target: unknown, propertyKey: string) {
+    if (!target) return;
+    setSubscribable(target);
+
+    (target as ConnectedComponent).__onConnected__((component) => {
+      const value = HTML.getAncestorAttributeValue(
+        component as any,
+        attributeName
+      );
+      component[propertyKey] = value;
+    });
+  };
+}

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

@@ -0,0 +1,28 @@
+import { Objects } from "@supersoniks/concorde/utils";
+
+import { PublisherManager } from "../../utils/PublisherProxy";
+import { ConnectedComponent, setSubscribable } from "./common";
+
+export function autoFill(values: string[]) {
+  return function (target: unknown) {
+    setSubscribable(target);
+    for (const value of values) {
+      const split = value.split(".");
+      if (split.length === 0) {
+        continue;
+      }
+      const dataProvider: string = split.shift() || "";
+      let publisher = PublisherManager.get(dataProvider);
+      publisher = Objects.traverse(publisher, split);
+      (target as ConnectedComponent).__onConnected__((component: unknown) => {
+        publisher.startTemplateFilling(component);
+      });
+      (target as ConnectedComponent).__onDisconnected__(() => {
+        (component: unknown) => {
+          publisher.stopTemplateFilling(component);
+        };
+      });
+    }
+  };
+}
+

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

@@ -0,0 +1,54 @@
+import { PublisherProxy, PublisherManager } from "../../utils/PublisherProxy";
+
+export function autoSubscribe() {
+  return function (
+    target: any,
+    propertyKey: string,
+    descriptor: PropertyDescriptor
+  ) {
+    let renderId = 0;
+
+    const originalMethod = descriptor.value;
+    const originalDisconnectedCallback =
+      target.constructor.prototype.disconnectedCallback;
+    target.constructor.prototype.disconnectedCallback = function () {
+      originalDisconnectedCallback?.apply(this);
+      this.__removeAutoSubscribe__();
+    };
+    const originalConnectedCallback = target.connectedCallback;
+    target.connectedCallback = function (this: any) {
+      originalConnectedCallback?.call(this);
+      this[propertyKey]();
+    };
+    descriptor.value = function (...args: unknown[]) {
+      let publishers: Set<PublisherProxy> = new Set();
+      const onAssign = () => {
+        renderId++;
+        const id = renderId;
+        window.queueMicrotask(() => {
+          if (id !== renderId) return;
+          (this as any)[propertyKey]();
+        });
+      };
+      publishers.forEach((publisher: PublisherProxy) => {
+        publisher.offAssign(onAssign);
+      });
+      PublisherManager.collectModifiedPublisher();
+      const result = originalMethod.apply(this, args);
+      publishers =
+        PublisherManager.getModifiedPublishers() || new Set<PublisherProxy>();
+
+      publishers.forEach((publisher: PublisherProxy) => {
+        publisher.onAssign(onAssign, false);
+      });
+      (
+        this as typeof target.constructor.prototype.disconnectedCallback
+      ).__removeAutoSubscribe__ = () => {
+        publishers.forEach((publisher: PublisherProxy) => {
+          publisher.offAssign(onAssign);
+        });
+      };
+      return result;
+    };
+  };
+}

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

@@ -0,0 +1,305 @@
+import { Objects } from "@supersoniks/concorde/utils";
+
+import { PublisherProxy, PublisherManager } from "../../utils/PublisherProxy";
+import { ConnectedComponent, setSubscribable } from "./common";
+
+const dynamicWatcherStore = Symbol("__bindDynamicWatcherStore__");
+const dynamicWillUpdateHookedStore = Symbol("__bindDynamicWillUpdateHooked__");
+
+function registerDynamicWatcher(
+  instance: any,
+  propertyName: string,
+  onChange: () => void
+) {
+  const key = String(propertyName);
+  ensureWillUpdateHook(instance);
+  if (!instance[dynamicWatcherStore]) {
+    Object.defineProperty(instance, dynamicWatcherStore, {
+      value: new Map<string, Set<() => void>>(),
+      enumerable: false,
+      configurable: false,
+      writable: false,
+    });
+  }
+  const watcherMap = instance[dynamicWatcherStore] as Map<
+    string,
+    Set<() => void>
+  >;
+  if (!watcherMap.has(key)) {
+    watcherMap.set(key, new Set());
+  }
+  const watchers = watcherMap.get(key)!;
+  watchers.add(onChange);
+  return () => {
+    watchers.delete(onChange);
+    if (watchers.size === 0) {
+      watcherMap.delete(key);
+    }
+  };
+}
+
+function ensureWillUpdateHook(instance: any) {
+  const proto = Object.getPrototypeOf(instance);
+  if (!proto || proto[dynamicWillUpdateHookedStore]) return;
+  const originalWillUpdate = Object.prototype.hasOwnProperty.call(
+    proto,
+    "willUpdate"
+  )
+    ? proto.willUpdate
+    : Object.getPrototypeOf(proto)?.willUpdate;
+  proto.willUpdate = function (changedProperties?: Map<unknown, unknown>) {
+    const handlers = this[dynamicWatcherStore] as
+      | Map<string, Set<() => void>>
+      | undefined;
+    if (handlers && handlers.size > 0) {
+      if (changedProperties && changedProperties.size > 0) {
+        changedProperties.forEach((_value, dependency) => {
+          const callbacks = handlers.get(String(dependency));
+          if (callbacks) {
+            callbacks.forEach((cb) => cb());
+          }
+        });
+      } else {
+        handlers.forEach((callbacks) => callbacks.forEach((cb) => cb()));
+      }
+    }
+    originalWillUpdate?.call(this, changedProperties);
+  };
+  proto[dynamicWillUpdateHookedStore] = true;
+}
+
+function extractDynamicDependencies(path: string) {
+  const patterns = [/\$\{([^}]+)\}/g, /\{\$([^}]+)\}/g];
+  const deps = new Set<string>();
+  for (const pattern of patterns) {
+    let match;
+    while ((match = pattern.exec(path)) !== null) {
+      const cleaned = cleanPlaceholder(match[1]);
+      if (!cleaned) continue;
+      const [root] = cleaned.split(".");
+      if (root) deps.add(root);
+    }
+  }
+  return Array.from(deps);
+}
+
+function cleanPlaceholder(value: string) {
+  return value.trim().replace(/^this\./, "");
+}
+
+function resolveDynamicPath(component: any, template: string) {
+  let missing = false;
+  const replaceValue = (_match: string, expression: string) => {
+    const cleaned = cleanPlaceholder(expression);
+    const resolved = getValueFromExpression(component, cleaned);
+    if (resolved === undefined || resolved === null) {
+      missing = true;
+      return "";
+    }
+    return `${resolved}`;
+  };
+  const resolvedPath = template
+    .replace(/\$\{([^}]+)\}/g, replaceValue)
+    .replace(/\{\$([^}]+)\}/g, replaceValue)
+    .trim();
+  if (missing || !resolvedPath.length) {
+    return { ready: false, path: null };
+  }
+  const segments = resolvedPath.split(".").filter(Boolean);
+  if (segments.length === 0 || !segments[0]) {
+    return { ready: false, path: null };
+  }
+  return { ready: true, path: resolvedPath };
+}
+
+function getValueFromExpression(component: any, expression: string) {
+  if (!expression) return undefined;
+  const segments = expression.split(".").filter(Boolean);
+  if (segments.length === 0) return undefined;
+  let current: unknown = component;
+  for (const segment of segments) {
+    if (
+      current === undefined ||
+      current === null ||
+      typeof current !== "object"
+    ) {
+      return undefined;
+    }
+    current = (current as Record<string, unknown>)[segment];
+  }
+  return current;
+}
+
+function getPublisherFromPath(path: string) {
+  const segments = path.split(".").filter((segment) => segment.length > 0);
+  if (segments.length === 0) return null;
+  const dataProvider = segments.shift() || "";
+  if (!dataProvider) return null;
+  let publisher = PublisherManager.get(dataProvider);
+  if (!publisher) return null;
+  publisher = Objects.traverse(publisher, segments);
+  return publisher as PublisherProxy | null;
+}
+
+export function bind(path: string, options?: { reflect?: boolean }) {
+  const reflect = options?.reflect ?? false;
+  const dynamicDependencies = extractDynamicDependencies(path);
+  const isDynamicPath = dynamicDependencies.length > 0;
+
+  return function (target: unknown, propertyKey: string) {
+    if (!target) return;
+    setSubscribable(target);
+    const stateKey = `__bind_state_${propertyKey}`;
+    const publisherKey = `__bind_${propertyKey}_publisher__`;
+    const isUpdatingFromPublisherKey = reflect
+      ? `__bind_${propertyKey}_updating_from_publisher__`
+      : null;
+
+    if (reflect) {
+      const existingDescriptor = Object.getOwnPropertyDescriptor(
+        target as any,
+        propertyKey
+      );
+      const internalValueKey = `__bind_${propertyKey}_value__`;
+      const reflectUpdateFlagKey = `__bind_${propertyKey}_updating_from_publisher__`;
+      const initialValue =
+        existingDescriptor && !existingDescriptor.get && !existingDescriptor.set
+          ? existingDescriptor.value
+          : undefined;
+
+      Object.defineProperty(target as any, propertyKey, {
+        get() {
+          if (existingDescriptor?.get) {
+            return existingDescriptor.get.call(this);
+          }
+          if (
+            !Object.prototype.hasOwnProperty.call(this, internalValueKey) &&
+            initialValue !== undefined
+          ) {
+            (this as any)[internalValueKey] = initialValue;
+          }
+          return (this as any)[internalValueKey];
+        },
+        set(newValue: unknown) {
+          if (existingDescriptor?.set) {
+            existingDescriptor.set.call(this, newValue);
+          } else {
+            (this as any)[internalValueKey] = newValue;
+          }
+          if (
+            !(this as any)[reflectUpdateFlagKey] &&
+            (this as any)[publisherKey]
+          ) {
+            (this as any)[publisherKey].set(newValue);
+          }
+        },
+        enumerable: existingDescriptor?.enumerable ?? true,
+        configurable: existingDescriptor?.configurable ?? true,
+      });
+    }
+
+    (target as ConnectedComponent).__onConnected__((component) => {
+      const state =
+        (component as any)[stateKey] ||
+        ((component as any)[stateKey] = {
+          cleanupWatchers: [] as Array<() => void>,
+          unsubscribePublisher: null as null | (() => void),
+          currentPath: null as string | null,
+        });
+
+      if (state.unsubscribePublisher) {
+        state.unsubscribePublisher();
+        state.unsubscribePublisher = null;
+      }
+      state.cleanupWatchers.forEach((cleanup: () => void) => cleanup());
+      state.cleanupWatchers = [];
+      state.currentPath = null;
+
+      const subscribeToPath = (resolvedPath: string | null) => {
+        if (!resolvedPath) {
+          if (state.unsubscribePublisher) {
+            state.unsubscribePublisher();
+            state.unsubscribePublisher = null;
+          }
+          state.currentPath = null;
+          (component as any)[publisherKey] = null;
+          return;
+        }
+        if (resolvedPath === state.currentPath) {
+          return;
+        }
+        if (state.unsubscribePublisher) {
+          state.unsubscribePublisher();
+          state.unsubscribePublisher = null;
+        }
+
+        const publisher = getPublisherFromPath(resolvedPath);
+        if (!publisher) {
+          state.currentPath = null;
+          (component as any)[publisherKey] = null;
+          return;
+        }
+
+        const onAssign = (value: unknown) => {
+          if (reflect && isUpdatingFromPublisherKey) {
+            (component as any)[isUpdatingFromPublisherKey] = true;
+          }
+          component[propertyKey] = value;
+          if (reflect && isUpdatingFromPublisherKey) {
+            (component as any)[isUpdatingFromPublisherKey] = false;
+          }
+        };
+
+        publisher.onAssign(onAssign);
+        state.unsubscribePublisher = () => {
+          publisher.offAssign(onAssign);
+          if ((component as any)[publisherKey] === publisher) {
+            (component as any)[publisherKey] = null;
+          }
+        };
+        state.currentPath = resolvedPath;
+        (component as any)[publisherKey] = publisher;
+      };
+
+      const refreshSubscription = () => {
+        if (isDynamicPath) {
+          const resolution = resolveDynamicPath(component, path);
+          if (!resolution.ready) {
+            subscribeToPath(null);
+            return;
+          }
+          subscribeToPath(resolution.path);
+          return;
+        }
+        subscribeToPath(path);
+      };
+
+      if (isDynamicPath) {
+        for (const dependency of dynamicDependencies) {
+          const unsubscribe = registerDynamicWatcher(
+            component as Record<string, unknown>,
+            dependency,
+            () => refreshSubscription()
+          );
+          state.cleanupWatchers.push(unsubscribe);
+        }
+      }
+
+      refreshSubscription();
+    });
+
+    (target as ConnectedComponent).__onDisconnected__((component) => {
+      const state = (component as any)[stateKey];
+      if (!state) return;
+      if (state.unsubscribePublisher) {
+        state.unsubscribePublisher();
+        state.unsubscribePublisher = null;
+      }
+      state.cleanupWatchers.forEach((cleanup: () => void) => cleanup());
+      state.cleanupWatchers = [];
+      state.currentPath = null;
+      (component as any)[publisherKey] = null;
+    });
+  };
+}
+

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

@@ -0,0 +1,50 @@
+type ConnectedCallback = (component: ConnectedComponent) => void;
+
+export type ConnectedComponent = Record<string, unknown> & {
+  __onConnected__: (callback: ConnectedCallback) => void;
+  __onDisconnected__: (callback: ConnectedCallback) => void;
+  __connectedCallbackCalls__?: Set<ConnectedCallback>;
+  __disconnectedCallbackCalls__?: Set<ConnectedCallback>;
+};
+
+function onConnected(this: ConnectedComponent, callback: ConnectedCallback) {
+  if (!this.__connectedCallbackCalls__) {
+    this.__connectedCallbackCalls__ = new Set();
+  }
+  this.__connectedCallbackCalls__.add(callback);
+}
+
+function onDisconnected(this: ConnectedComponent, callback: ConnectedCallback) {
+  if (!this.__disconnectedCallbackCalls__) {
+    this.__disconnectedCallbackCalls__ = new Set();
+  }
+  this.__disconnectedCallbackCalls__.add(callback);
+}
+
+export function setSubscribable(target: any) {
+  if (target.__is__setSubscribable__) return;
+  target.__is__setSubscribable__ = true;
+
+  target.__onConnected__ = onConnected;
+  target.__onDisconnected__ = onDisconnected;
+
+  const originalConnectedCallback = target.connectedCallback;
+  target.connectedCallback = function (this: any) {
+    originalConnectedCallback?.call(this);
+    if (this.__connectedCallbackCalls__) {
+      this.__connectedCallbackCalls__.forEach((callback: ConnectedCallback) =>
+        callback(this)
+      );
+    }
+  };
+
+  const originalDisconnectedCallback = target.disconnectedCallback;
+  target.disconnectedCallback = function (this: any) {
+    originalDisconnectedCallback?.call(this);
+    if (this.__disconnectedCallbackCalls__) {
+      this.__disconnectedCallbackCalls__.forEach(
+        (callback: ConnectedCallback) => callback(this)
+      );
+    }
+  };
+}