Use WeakRefs for eventObservation container references

Improve tests: see iterators.ts#IterableProperties

guide/examples/ts/iterable-array-map.ts

@@ -1,5 +1,4 @@
 import { tag } from '../../../module/esm/ai-ui.js';
-import { AsyncExtraIterable } from '../../../module/esm/iterators.js';
 
 /* Specify what base tags you reference in your UI */
 const { div } = tag();
@@ -9,30 +8,32 @@ function sum(a:number, b:number) {
 }
 
 const App = div.extended(({
+  styles:`.App > div { margin-bottom: 1em } .App > div > div { margin-left: 1em }`,
   override: {
+    className: 'App',
     onclick() {
       this.data.unshift(this.data[0] + this.data[1])
-      // @ts-expect-error: see iterators.ts#IterableProperties
-      this.data = [1,2]
     }
   },
   iterable: {
     data: [3,2,1] as number[]
   },
   constructed() {
     const t = this.data;
-    const w = t[0]
+    const golden = () => this.data[0] / this.data[1];
     return [
       div('Array access',
         div('join: ',t.join(', ')),
         div('reduce: ',t.reduce(sum,0)),
-        div('map: ', Array.prototype.map.call(t, n => String(n)+' ') as string[])
+        div('map: ', Array.prototype.map.call(t, n => String(n)+' ') as string[]),
+        div("golden: ", golden())
       ),
 
       div('AsyncIterator array access',
         div('join: ', t.map!(d => d.join(', '))),
         div('reduce: ', t.map!(d => d.reduce(sum,0))),
-        div('map: ', t.map!(d => d.map( n => String(n)+' ')))
+        div('map: ', t.map!(d => d.map( n => String(n)+' '))),
+        div("golden: ", this.data.map!(golden))
       ),
 
       div('AsyncIterator array item access',

module/esm/when.js

@@ -9,9 +9,10 @@ function docEventHandler(ev) {
     if (observations) {
         for (const o of observations) {
             try {
-                const { push, terminate, container, selector, includeChildren } = o;
-                if (!container.isConnected) {
-                    const msg = "Container `#" + container.id + ">" + (selector || '') + "` removed from DOM. Removing subscription";
+                const { push, terminate, containerRef, selector, includeChildren } = o;
+                const container = containerRef.deref();
+                if (!container || !container.isConnected) {
+                    const msg = "Container `#" + container?.id + ">" + (selector || '') + "` removed from DOM. Removing subscription";
                     observations.delete(o);
                     terminate(new Error(msg));
                 }
@@ -75,7 +76,7 @@ function whenEvent(container, what) {
     const details = {
         push: queue.push,
         terminate(ex) { queue.return?.(ex); },
-        container,
+        containerRef: new WeakRef(container),
         includeChildren,
         selector
     };

module/src/when.ts

@@ -88,7 +88,7 @@ type ExtractEvents<S> = WhenEvents[ExtractEventNames<S>];
 type EventObservation<EventName extends keyof GlobalEventHandlersEventMap> = {
   push: (ev: GlobalEventHandlersEventMap[EventName])=>void;
   terminate: (ex: Error)=>void;
-  container: Element
+  containerRef: WeakRef<Element>
   selector: string | null;
   includeChildren: boolean;
 };
@@ -102,9 +102,10 @@ function docEventHandler<EventName extends keyof GlobalEventHandlersEventMap>(th
   if (observations) {
     for (const o of observations) {
       try {
-        const { push, terminate, container, selector, includeChildren } = o;
-        if (!container.isConnected) {
-          const msg = "Container `#" + container.id + ">" + (selector || '') + "` removed from DOM. Removing subscription";
+        const { push, terminate, containerRef, selector, includeChildren } = o;
+        const container = containerRef.deref();
+        if (!container || !container.isConnected) {
+          const msg = "Container `#" + container?.id + ">" + (selector || '') + "` removed from DOM. Removing subscription";
           observations.delete(o);
           terminate(new Error(msg));
         } else {
@@ -174,7 +175,7 @@ function whenEvent<EventName extends string>(container: Element, what: IsValidWh
   const details: EventObservation<keyof GlobalEventHandlersEventMap> = {
     push: queue.push,
     terminate(ex: Error) { queue.return?.(ex)},
-    container,
+    containerRef: new WeakRef(container),
     includeChildren,
     selector
   };

type_tests/iterable-array-map.ts

@@ -1,4 +1,4 @@
-import { tag } from '../module/src/ai-ui';
+import { tag } from '../module/src/ai-ui.js';
 
 /* Specify what base tags you reference in your UI */
 const { div } = tag();
@@ -8,29 +8,34 @@ function sum(a:number, b:number) {
 }
 
 const App = div.extended(({
+  styles:`.App > div { margin-bottom: 1em } .App > div > div { margin-left: 1em }`,
   override: {
+    className: 'App',
     onclick() {
-      this.data.unshift(this.data[0] + this.data[1]);
       // @ts-expect-error: see iterators.ts#IterableProperties
-      this.data = [1,2];
+      this.data = [200,400];
+      this.data.unshift(this.data[0] + this.data[1]);
     }
   },
   iterable: {
     data: [3,2,1] as number[]
   },
   constructed() {
     const t = this.data;
+    const golden = () => this.data[0] / this.data[1];
     return [
       div('Array access',
         div('join: ',t.join(', ')),
         div('reduce: ',t.reduce(sum,0)),
-        div('map: ', Array.prototype.map.call(t, n => String(n)+' ') as string[])
+        div('map: ', Array.prototype.map.call(t, n => String(n)+' ') as string[]),
+        div("golden: ", golden())
       ),
 
       div('AsyncIterator array access',
         div('join: ', t.map!(d => d.join(', '))),
         div('reduce: ', t.map!(d => d.reduce(sum,0))),
-        div('map: ', t.map!(d => d.map( n => String(n)+' ')))
+        div('map: ', t.map!(d => d.map( n => String(n)+' '))),
+        div("golden: ", this.data.map!(golden))
       ),
 
       div('AsyncIterator array item access',
@@ -43,3 +48,4 @@ const App = div.extended(({
 
 /* Add add it to the document so the user can see it! */
 document.body.append(App());
+