@supersoniks/concorde 3.3.2 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.3.2",
+  "version": "4.0.0",
   "license": "MIT",
   "type": "module",
   "main": "",
@@ -260,9 +260,6 @@
     "./ui/theme/light": "./src/core/components/ui/theme/theme-collection/light.ts",
     "./theme": "./src/core/components/ui/theme/theme.ts",
     "./ui/theme": "./src/core/components/ui/theme/theme.ts",
-    "./message-subscriber.stories": "./src/core/components/ui/toast/message-subscriber.stories.ts",
-    "./ui/message-subscriber.stories": "./src/core/components/ui/toast/message-subscriber.stories.ts",
-    "./ui/toast/message-subscriber.stories": "./src/core/components/ui/toast/message-subscriber.stories.ts",
     "./message-subscriber": "./src/core/components/ui/toast/message-subscriber.ts",
     "./ui/message-subscriber": "./src/core/components/ui/toast/message-subscriber.ts",
     "./ui/toast/message-subscriber": "./src/core/components/ui/toast/message-subscriber.ts",

package/src/core/_types/types.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any*/
 
 import DataBindObserver from "@supersoniks/concorde/core/utils/DataBindObserver";
-import Publisher from "../utils/PublisherProxy";
+import type { Publisher } from "../utils/PublisherProxy";
 export type Message = {
   type?: string;
   content?: string;

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

@@ -2,9 +2,8 @@ import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { map } from "lit/directives/map.js";
-import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import DataProvider, { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import "@supersoniks/concorde/core/components/functional/list/list";
-import { PublisherProxy } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import { HTML } from "@supersoniks/concorde/utils";
 import { ListItems } from "@supersoniks/concorde/core/components/functional/list/list";
 
@@ -118,7 +117,7 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
     this.lastRequestTime = new Date().getTime();
     this.configFilter();
   }
-  filterPublisher: PublisherProxy | null = null;
+  filterPublisher: DataProvider | null = null;
   configFilter() {
     const dataFilterProvider =
       this.getAncestorAttributeValue("dataFilterProvider");
@@ -145,7 +144,7 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
     split.shift();
     const searchParams = new URLSearchParams(split.join("?"));
     const filterData: Record<string, string | string[]> =
-      this.filterPublisher?.get();
+      this.filterPublisher?.get() ;
     const filteredFieldsArray = this.filteredFields.split(" ");
     for (const f in filterData) {
       let value = filterData[f];

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

@@ -1,9 +1,12 @@
 import { LitElement } from "lit";
 import { html } from "lit";
 import { customElement, state } from "lit/decorators.js";
-import { dp } from "@supersoniks/concorde/directives";
+import { dp } from "@supersoniks/concorde/dataprovider";
 import "./states";
 import { tailwind } from "../../../../docs/tailwind";
+type StatesDemoProvider = {
+  status?: string;
+};
 
 @customElement("sonic-states-demo")
 export class SonicStatesDemo extends LitElement {
@@ -12,7 +15,7 @@ export class SonicStatesDemo extends LitElement {
   constructor() {
     super();
     // Initialisation du dataProvider
-    dp("states-demo-provider").set({});
+    dp<StatesDemoProvider>("states-demo-provider").set({});
   }
 
   @state()

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

@@ -5,7 +5,7 @@ import "./states";
 import { dp } from "@supersoniks/concorde/directives";
 
 function create(template = "", addToDocument = true) {
-  dp("state-dataprovider-test").set({});
+  dp<{state: string}>("state-dataprovider-test").set({state: ""});
   return TestUtils.bootstrap(
     `
     <sonic-states dataProvider="state-dataprovider-test" data-path="status">
@@ -25,8 +25,9 @@ describe("SonicStates", () => {
       <template data-value="inactive">
         <div>État Inactif</div>
       </template>
-    `);
-    dp("state-dataprovider-test").state = "active";
+    `);    
+
+    dp<{state: string}>("state-dataprovider-test").set({state: "active"});
     await elt.updated();
     expect(elt.textContent.trim()).toBe("État Actif");
   });
@@ -37,7 +38,7 @@ describe("SonicStates", () => {
         <div>Nombre</div>
       </template>
     `);
-    dp("state-dataprovider-test").status = "123";
+    dp<{state: string}>("state-dataprovider-test").set({state: "123"});
     await elt.updated();
     expect(elt.textContent.trim()).toBe("Nombre");
   });
@@ -48,7 +49,7 @@ describe("SonicStates", () => {
         <div>Utilisateur</div>
       </template>
     `);
-    dp("state-dataprovider-test").status = "user/123";
+    dp<{state: string}>("state-dataprovider-test").set({state: "user/123"});
     await elt.updated();
     expect(elt.textContent.trim()).toBe("Utilisateur");
   });
@@ -59,7 +60,7 @@ describe("SonicStates", () => {
         <div>Utilisateur</div>
       </template>
     `);
-    dp("state-dataprovider-test").status = "user/123";
+    dp<{state: string}>("state-dataprovider-test").set({state: "user/123"});
     await elt.updated();
     const divWrapper = elt.querySelector("div[dataProvider]");
     expect(divWrapper.getAttribute("dataProvider")).toBe("/api/user/123");
@@ -71,7 +72,7 @@ describe("SonicStates", () => {
         <div>Utilisateur</div>
       </template>
     `);
-    dp("state-dataprovider-test").status = "user/123";
+    dp<{state: string}>("state-dataprovider-test").set({state: "user/123"});
     await elt.updated();
     const divWrapper = elt.querySelector("div[dataProvider]");
     expect(divWrapper.getAttribute("dataProvider")).toBe("/api/user/123");
@@ -82,7 +83,7 @@ describe("SonicStates", () => {
     elt.states = {
       active: () => html`<div>État Actif Programmatique</div>`,
     };
-    dp("state-dataprovider-test").status = "active";
+    dp<{state: string}>("state-dataprovider-test").set({state: "active"});
     await elt.updated();
     expect(elt.textContent.trim()).toBe("État Actif Programmatique");
   });
@@ -92,7 +93,7 @@ describe("SonicStates", () => {
     elt.states = {
       "(\\d+)": (status: string) => html`<div>Nombre: ${status}</div>`,
     };
-    dp("state-dataprovider-test").status = "123";
+    dp<{state: string}>("state-dataprovider-test").set({state: "123"});
     await elt.updated();
     expect(elt.textContent.trim()).toBe("Nombre: 123");
   });
@@ -104,7 +105,7 @@ describe("SonicStates", () => {
         return html`<div>Utilisateur ${id} ${slug}</div>`;
       },
     };
-    dp("state-dataprovider-test").status = "user/123/mySlug";
+    dp<{state: string}>("state-dataprovider-test").set({state: "user/123/mySlug"});
     await elt.updated();
     expect(elt.textContent.trim()).toBe("Utilisateur 123 mySlug");
   });
@@ -115,7 +116,7 @@ describe("SonicStates", () => {
       active: () => html`<div>État Actif</div>`,
       fallback: () => html`<div>État Par Défaut</div>`,
     };
-    dp("state-dataprovider-test").status = "unknown";
+    dp<{state: string}>("state-dataprovider-test").set({state: "unknown"});
     await elt.updated();
     expect(elt.textContent.trim()).toBe("État Par Défaut");
   });
@@ -130,11 +131,11 @@ describe("SonicStates", () => {
       prog: () => html`<div>Template Programmatique</div>`,
     };
 
-    dp("state-dataprovider-test").status = "html";
+    dp<{state: string}>("state-dataprovider-test").set({state: "html"});
     await elt.updated();
     expect(elt.textContent.trim()).toBe("Template HTML");
 
-    dp("state-dataprovider-test").status = "prog";
+    dp<{state: string}>("state-dataprovider-test").set({state: "prog"});
     await elt.updated();
     expect(elt.textContent.trim()).toBe("Template Programmatique");
   });

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

@@ -113,7 +113,7 @@ export class Submit extends Subscriber(LitElement) {
     );
     //
     // Validation du formulaire
-    formPublisher.isFormValid = true;
+    formPublisher.isFormValid.set(true);
     formPublisher.invalidateForm();
     if (!formPublisher.isFormValid.get()) return;
     this.disabled = true;
@@ -258,7 +258,7 @@ export class Submit extends Subscriber(LitElement) {
         ? formPublisher
         : null;
     if (captchaPublisher) {
-      captchaPublisher.captchaToken = "request_token";
+      captchaPublisher.captchaToken.set("request_token");
       const captchaAssign = (token?: string) => {
         if (token != "request_token") {
           sendData();

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

@@ -1,9 +1,9 @@
 import { Subscriber } from "@supersoniks/concorde/mixins";
-import { HTML, PublisherManager } from "@supersoniks/concorde/utils";
+import { dp, HTML } from "@supersoniks/concorde/utils";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ConcordeWindow } from "@supersoniks/concorde/core/_types/types";
-import Publisher from "@supersoniks/concorde/core/utils/PublisherProxy";
+import type { DataProvider, Publisher } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import {
   generateKey,
   encryptToBase64,
@@ -51,15 +51,15 @@ export class Captcha extends Subscriber(LitElement) {
   @property() key = "";
   @property() action: string | null = null;
   @property({ type: Number }) zIndex = 9999;
-  formPublisher?: {
+  formPublisher?: DataProvider<{
     needsCaptchaValidation: boolean;
     captchaKey: string;
-    captchaToken: Publisher<string> | string;
-  };
+    captchaToken: string;
+  }>;
 
   onCaptchaTokenChanged = (v: string) => {
     if (v == "request_token") {
-      if (this.formPublisher) this.formPublisher.captchaToken = "";
+      if (this.formPublisher) this.formPublisher.captchaToken.set("");
       this.requestToken();
     }
   };
@@ -78,7 +78,11 @@ export class Captcha extends Subscriber(LitElement) {
     }
     this.generateEncryptedKey();
     super.connectedCallback();
-    this.formPublisher = PublisherManager.get(
+    this.formPublisher = dp<{
+      needsCaptchaValidation: boolean;
+      captchaKey: string;
+      captchaToken: string;
+    }>(
       this.getAncestorAttributeValue("headersDataProvider") ??
         this.getAncestorAttributeValue("formDataProvider")
     );
@@ -87,7 +91,7 @@ export class Captcha extends Subscriber(LitElement) {
       this.formPublisher &&
       !(this.formPublisher.captchaToken as Publisher<string>).get()
     ) {
-      this.formPublisher.needsCaptchaValidation = true;
+      this.formPublisher.needsCaptchaValidation.set(true);
       (this.formPublisher.captchaToken as Publisher<string>).onAssign(
         this.onCaptchaTokenChanged
       );
@@ -98,8 +102,8 @@ export class Captcha extends Subscriber(LitElement) {
       (this.formPublisher.captchaToken as Publisher<string>).offAssign(
         this.onCaptchaTokenChanged
       );
-      this.formPublisher.captchaToken = "";
-      this.formPublisher.needsCaptchaValidation = false;
+      this.formPublisher.captchaToken.set("");
+      this.formPublisher.needsCaptchaValidation.set(false);
     }
 
     super.disconnectedCallback();
@@ -110,8 +114,8 @@ export class Captcha extends Subscriber(LitElement) {
     const form = this.shadowRoot.querySelector("form");
     if (!form) return;
     const formData = new FormData(form);
-    this.formPublisher.captchaKey = this.key;
-    this.formPublisher.captchaToken = formData.get("altcha")?.toString() || "";
+    this.formPublisher.captchaKey.set(this.key);
+    this.formPublisher.captchaToken.set(formData.get("altcha")?.toString() || "");
   }
 
   async generateEncryptedKey() {

package/src/core/components/ui/form/input-autocomplete/input-autocomplete.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, css, nothing } from "lit";
+import { html, LitElement, css, nothing, PropertyValues } from "lit";
 import {
   customElement,
   property,
@@ -18,7 +18,7 @@ import "@supersoniks/concorde/core/components/functional/queue/queue";
 import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { PublisherManager } from "@supersoniks/concorde/utils";
-import { PublisherProxy } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import DataProvider from "@supersoniks/concorde/core/utils/PublisherProxy";
 import { Size } from "../../_css/size";
 import { Input } from "@supersoniks/concorde/core/components/ui/form/input/input";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
@@ -98,10 +98,10 @@ export class InputAutocomplete extends TemplatesContainer(
   private initQueueDataProvider = "";
   @state()
   private lastValidSearch: ListItem | string = "";
-  private searchPublisher?: PublisherProxy;
-  private countPublisher?: PublisherProxy;
-  private initCountPublisher?: PublisherProxy;
-  private formValuePublisher?: PublisherProxy;
+  private searchPublisher?: DataProvider;
+  private countPublisher?:  DataProvider;
+  private initCountPublisher?: DataProvider;
+  private formValuePublisher?: DataProvider;
 
   /**
    * Les fonctions de gestion
@@ -239,7 +239,7 @@ export class InputAutocomplete extends TemplatesContainer(
      * Pour récupérer la valeur de searchParameter correspondante et renseigner l'input
      **/
     if (this.value) {
-      PublisherManager.get(this.initSearchDataProvider)[this.name] = this.value;
+      PublisherManager.get(this.initSearchDataProvider)[this.name].set(this.value);
     }
     this.initCountPublisher?.onAssign(this.initSearchParameter);
 
@@ -257,6 +257,12 @@ export class InputAutocomplete extends TemplatesContainer(
     this.searchPublisher?.onAssign(this.updatePopContentVisibility);
   }
 
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+    // Écouter le focusout sur le popElement pour fermer le pop quand le focus sort
+    this.popElement.addEventListener("focusout", this.handleFocusOut);
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this.initCountPublisher?.offAssign(this.initSearchParameter);
@@ -269,6 +275,9 @@ export class InputAutocomplete extends TemplatesContainer(
     getPublisher(this.queueDataProvider).delete();
 
     this.searchPublisher?.offAssign(this.updatePopContentVisibility);
+
+    // Retirer l'écouteur de focusout
+    this.popElement.removeEventListener("focusout", this.handleFocusOut);
   }
 
   /**
@@ -331,6 +340,31 @@ export class InputAutocomplete extends TemplatesContainer(
     this.popElement.show();
   }
 
+  handleFocusOut = (_e: FocusEvent): void => {
+    // Utiliser setTimeout pour vérifier où va le focus après le focusout
+    // Cela permet de ne pas fermer le pop si le focus va vers un élément du pop
+    setTimeout(() => {
+      const activeElement = document.activeElement;
+      if (!activeElement) {
+        this.popElement.hide();
+        return;
+      }
+
+      // Vérifier si le focus est dans le popElement ou dans ce composant
+      const isInPop =
+        this.popElement.contains(activeElement) ||
+        this.popElement.shadowRoot?.contains(activeElement);
+      const isInComponent =
+        this.contains(activeElement) ||
+        this.shadowRoot?.contains(activeElement);
+
+      // Si le focus n'est ni dans le pop ni dans ce composant, fermer le pop
+      if (!isInPop && !isInComponent) {
+        this.popElement.hide();
+      }
+    }, 0);
+  };
+
   render() {
     return html`
       <sonic-pop manual style="display:block;" @hide=${this.handleHide}>

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

@@ -30,7 +30,7 @@ export class Pop extends LitElement {
       }
 
       slot[name="content"] {
-        max-width: 80vw;
+        max-width: 100vw;
         background-color: var(--sc-base, #fff);
         position: fixed;
         z-index: 99999;
@@ -76,7 +76,7 @@ export class Pop extends LitElement {
   lastContentX = 0;
   lastContentY = 0;
   resizeObserver: ResizeObserver = new ResizeObserver(() =>
-    this.computePosition(this.placement)
+    this.computePosition(this.placement),
   );
 
   @state() private triggerElement: HTMLElement | null = null;
@@ -176,7 +176,7 @@ export class Pop extends LitElement {
     Pop.pops.forEach((pop: Pop) => {
       const popContainsTarget = path.includes(pop);
       const popContentContainsTarget = path.includes(
-        pop.querySelector('[slot="content"]') as EventTarget
+        pop.querySelector('[slot="content"]') as EventTarget,
       );
       const isCloseManual =
         HTML.getAncestorAttributeValue(target, "data-on-select") === "keep";
@@ -230,7 +230,7 @@ export class Pop extends LitElement {
     const thisRect = this.getBoundingClientRect();
 
     const scrollableAncestor = HTML.getScrollableAncestor(
-      this.popContent
+      this.popContent,
     ) as HTMLElement;
     const scrollableAncestorRect = scrollableAncestor?.getBoundingClientRect();
     const minX = Math.max(0, scrollableAncestorRect?.left || 0) + padding;
@@ -238,12 +238,12 @@ export class Pop extends LitElement {
     const maxX =
       Math.min(
         window.innerWidth,
-        scrollableAncestorRect?.right || window.innerWidth
+        scrollableAncestorRect?.right || window.innerWidth,
       ) - padding;
     const maxY =
       Math.min(
         window.innerHeight,
-        scrollableAncestorRect?.bottom || window.innerHeight
+        scrollableAncestorRect?.bottom || window.innerHeight,
       ) - padding;
     const x0 = thisRect.left;
     const y0 = thisRect.top;

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

@@ -24,7 +24,7 @@ export class Theme extends LitElement {
         font-style: var(--sc-font-style-base, normal);
       }
       ::slotted(.sonic-pop-content) {
-        max-width: 80vw;
+        max-width: 100vw;
         background-color: var(--sc-base, #fff);
         position: fixed;
         z-index: 99999;
@@ -99,8 +99,8 @@ export class Theme extends LitElement {
           type: "SonicTheme",
           ...theme,
         },
-        "*"
-      )
+        "*",
+      ),
     );
   }
 

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

@@ -1,6 +1,6 @@
 import { Objects } from "@supersoniks/concorde/utils";
 
-import { PublisherProxy, PublisherManager } from "../../utils/PublisherProxy";
+import DataProvider, { PublisherManager } from "../../utils/PublisherProxy";
 import { ConnectedComponent, setSubscribable } from "./common";
 
 const dynamicWatcherStore = Symbol("__bindDynamicWatcherStore__");
@@ -138,7 +138,7 @@ function getPublisherFromPath(path: string) {
   let publisher = PublisherManager.get(dataProvider);
   if (!publisher) return null;
   publisher = Objects.traverse(publisher, segments);
-  return publisher as PublisherProxy | null;
+  return publisher as DataProvider | null;
 }
 
 export function bind(path: string, options?: { reflect?: boolean }) {

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

@@ -1,6 +1,6 @@
 import { Objects } from "@supersoniks/concorde/utils";
 
-import { PublisherProxy, PublisherManager } from "../../utils/PublisherProxy";
+import DataProvider, { PublisherManager } from "../../utils/PublisherProxy";
 import { ConnectedComponent, setSubscribable } from "./common";
 
 const dynamicWatcherStore = Symbol("__onAssignDynamicWatcherStore__");
@@ -43,12 +43,14 @@ function registerDynamicWatcher(
 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>>
@@ -140,7 +142,7 @@ function getPublisherFromPath(path: string) {
   let publisher = PublisherManager.get(dataProvider);
   if (!publisher) return null;
   publisher = Objects.traverse(publisher, segments);
-  return publisher as PublisherProxy | null;
+  return publisher as DataProvider | null;
 }
 
 type Callback = (...values: unknown[]) => void;
@@ -152,7 +154,7 @@ type PathConfiguration = {
 
 type Configuration = {
   callbacks: Set<Callback>;
-  publisher: PublisherProxy | null;
+  publisher: DataProvider | null;
   onAssign: (value: unknown) => void;
   unsubscribePublisher: (() => void) | null;
   pathConfig: PathConfiguration;
@@ -175,7 +177,7 @@ export function onAssign(...values: Array<string>) {
     descriptor: PropertyDescriptor
   ) {
     setSubscribable(target);
-    const stateKey = `__onAssign_state__`;
+    const stateKey = `__onAssign_state_${_propertyKey}__`;
     let callback: Callback;
 
     (target as ConnectedComponent).__onConnected__((component) => {

package/src/core/directives/DataProvider.ts

@@ -1,41 +1,22 @@
 import { AsyncDirective, PartInfo } from "lit/async-directive.js";
 import { directive } from "lit/directive.js";
-import {
-  PublisherManager,
-  PublisherProxy,
-} from "@supersoniks/concorde/core/utils/PublisherProxy";
 import { noChange } from "lit";
-import Objects from "../utils/Objects";
 import { SearchableDomElement } from "../utils/HTML";
-import Publisher from "../utils/PublisherProxy";
-type Observable = PublisherProxy | string | (() => unknown);
-function getObservables(observable: Observable): Set<PublisherProxy> {
-  if (typeof observable === "function") {
-    const func = observable as () => unknown;
-    PublisherManager.collectModifiedPublisher();
-    func();
-    return PublisherManager.getModifiedPublishers() || new Set();
-  }
-  if (typeof observable === "string") {
-    const split = observable.split(".");
-    const dataProvider: string = split.shift() || "";
-    let publisher = PublisherManager.get(dataProvider);
-    publisher = Objects.traverse(publisher, split);
-    const set = new Set<PublisherProxy>();
-    set.add(publisher);
-    return set;
-  }
-  return new Set<PublisherProxy>([observable as Publisher]);
-}
+import { 
+  getObservables,
+  get as pubGet, set as pubSet, dataProvider as pubDataProvider ,
+  dp as pubDp, DataProvider
+} from "../utils/PublisherProxy";
+
 
 class ObserveDirective extends AsyncDirective {
-  observables: Set<PublisherProxy> = new Set();
+  observables: Set<DataProvider<any>> = new Set();
   unsubscribe(): void {
-    this.observables.forEach((publisher: PublisherProxy) =>
+    this.observables.forEach((publisher: DataProvider<any>) =>
       publisher.offAssign(this.onAssign)
     );
   }
-  observable?: Observable;
+  observable?: string;
   node?: SearchableDomElement;
 
   /* eslint-disable @typescript-eslint/no-explicit-any*/
@@ -45,7 +26,7 @@ class ObserveDirective extends AsyncDirective {
   }
   /* eslint-enable @typescript-eslint/no-explicit-any*/
 
-  render(observable: Observable) {
+  render(observable: string) {
     if (this.observable !== observable) {
       this.observable = observable;
       if (this.isConnected) {
@@ -60,18 +41,12 @@ class ObserveDirective extends AsyncDirective {
   };
   // Subscribes to the observable, calling the directive's asynchronous
   // setValue API each time the value changes
-  subscribe(observable: Observable) {
+  subscribe<T>(observable: string) {
     this.unsubscribe();
-    if (typeof observable === "function") {
-      this.onAssign = () => {
-        this.setValue(observable());
-      };
-    } else {
-      this.onAssign = (v: unknown) => {
-        this.setValue(v);
-      };
-    }
-    this.observables = getObservables(observable);
+    this.onAssign = (v: unknown) => {
+      this.setValue(v);
+    };
+    this.observables = getObservables<T>(observable);
 
     this.observables.forEach((publisher) => {
       publisher.onAssign(this.onAssign);
@@ -86,7 +61,7 @@ class ObserveDirective extends AsyncDirective {
   // re-connected, re-subscribe to make the directive operable again
   reconnected() {
     if (!this.observable) return;
-    this.subscribe(this.observable as Observable);
+    this.subscribe(this.observable);
   }
 }
 const dir = directive(ObserveDirective);
@@ -95,25 +70,37 @@ const dir = directive(ObserveDirective);
 export const subscribe = dir;
 export const sub = dir;
 
-// get value
-export const get = (id: Observable) => {
-  return getObservables(id).values().next().value?.get();
-};
 
-const deepee = (id: Observable, defaultValue?: any) => {
-  const value = getObservables(id).values().next().value;
-  if (defaultValue !== undefined && value) {
-    const innerValue = value.get();
-    if (Objects.isEmpty(innerValue)) {
-      value.set(defaultValue);
-    }
-  }
-  return value as any;
-};
+/**
+ * @deprecated @see {@link "/src/core/utils/PublisherProxy.ts#get"}
+ * @param id Observable
+ * @returns value of the observable
+ * 
+ */
+export const get: <T = any>(id: string) => T = pubGet;
+
+
+
+/**
+ * @deprecated @see {@link "/src/core/utils/PublisherProxy.ts#dataProvider"}
+ * @param id Observable
+ * @param defaultValue Optional default value
+ * @returns Observable
+ */
+export const dataProvider = pubDataProvider;
 
-export const dataProvider = deepee;
-export const dp = deepee;
+/**
+ * @deprecated @see {@link "/src/core/utils/PublisherProxy.ts#dp"}
+ * @param id Observable
+ * @param defaultValue Optional default value
+ * @returns Observable
+ */
+export const dp = pubDp;
 
-export const set = (id: Observable, value: unknown) => {
-  getObservables(id).values().next().value?.set(value);
-};
+/**
+ * @deprecated @see {@link "/src/core/utils/PublisherProxy.ts#set"}
+ * @param id Observable
+ * @param value value to set
+ * @returns void
+ */
+export const set: <T = any>(id: string, value: T) => void = pubSet;