Automatic!

data/data.ts

@@ -2,6 +2,7 @@ import { ListenerCallback, Listeners, ImmediateListeners } from './listeners.ts'
 import { Pathifier } from './pathifier.ts';
 import { clean } from './paths.ts';
 import { LooseObject, ToCall } from './types.ts';
+
 export * from './types.ts';
 
 function isProbablyPlainObject(obj: any) {
@@ -274,8 +275,8 @@ export class Data {
     const results = listeners.get(path);
     let resultValue;
     for (let res of results) {
+      const { path, fullPath } = res;
       const listeners = res._;
-      res.value = value;
       for (let [ref, listener] of listeners) {
         const refPath = ref + res.path;
         if (listener && !refPaths.has(refPath)) {
@@ -287,7 +288,9 @@ export class Data {
           const valIsObject = isProbablyPlainObject(val);
           resultValue = listener(val, {
             target,
-            path: res.path,
+            subPath: fullPath.slice(path.length),
+            path,
+            fullPath,
             ...res.keys,
             ...(valIsObject
               ? {

data/listeners.ts

@@ -4,6 +4,8 @@ import { LooseObject } from './types.ts';
 export type ListenerCallback<T> = (
   value: T,
   props: {
+    subPath: string;
+    fullPath: string;
     path: string;
     [key: string]: any;
   }

data/pathifier.ts

@@ -139,14 +139,15 @@ export class Pathifier<T> {
         } else {
           const subPath = target.slice(this.cleanFrom.length + 1);
           const updated = this.set(subPath, this.data.get(target));
-          if (updated && this._then) this._then(this.cache, { path: subPath });
+          if (updated && this._then)
+            this._then(this.cache, { path, fullPath: target, subPath, target });
         }
       }),
-      this.data.on(`- ${this.from}`, (_, { target }) => {
+      this.data.on(`- ${this.from}`, (_, { path, fullPath, target }) => {
         const subPath = target.slice(this.cleanFrom.length + 1);
         const updated = this.unset(subPath);
         if (updated && this._then) {
-          this._then(this.cache, { path: subPath });
+          this._then(this.cache, { path, fullPath, subPath, target: fullPath });
         }
       })
     );
@@ -178,7 +179,7 @@ export class Pathifier<T> {
       this.unset(bb);
     }
     if (updated && this._then) {
-      this._then(this.cache, { path: '' });
+      this._then(this.cache, { path: '', fullPath: '', subPath: '' });
     }
   }
 
@@ -200,7 +201,11 @@ export class Pathifier<T> {
     const origValue = value;
     if (this._map) {
       const path = this.keys(this.cleanFrom, k);
-      value = this._map(this.data.get(path), { path });
+      value = this._map(this.data.get(path), {
+        path,
+        fullPath: path,
+        subPath: '',
+      });
       key = k;
     }
 

domdom/hodor.ts

@@ -177,19 +177,18 @@ export class Hodor<T = any> implements Mountable {
     if (this._sort) this.pathifier.sort(this._sort);
     if (this._sortOn)
       this.pathifier.sortOn(this._sortOn.path, this._sortOn.sorterOn);
-    const self = this;
     this.pathifier.toArray({
       or(_: number, __: any): void {},
 
-      add(value: any, subIndex: number, _?: number, path?: string) {
+      add: (value: any, subIndex: number, _?: number, path?: string) => {
         if (value instanceof Element) {
-          (value as any).path = path;
+          (value as any).path = [this.path, path].join('.');
         }
 
-        self._stower?.add(value, self.index!, subIndex, path);
+        this._stower?.add(value, this.index!, subIndex, path);
       },
-      remove(value: any, subIndex: number, _: number, path: string) {
-        self._stower?.remove(value, self.index!, subIndex, path);
+      remove: (value: any, subIndex: number, _: number, path: string) => {
+        this._stower?.remove(value, this.index!, subIndex, path);
       },
     });
   }