Don't bubble events past first listener in our vdom implementation (#97)

(+ other fixes)

This is a short-term solution, we probably want a way to still allow bubbling. Let's wait until the need shows up.

Author: seefeldb

typescript/packages/common-ui/src/hyperscript/render.ts

@@ -65,6 +65,7 @@ const listen = (
 
 /** Read an event, returning a safe description object */
 const readEvent = (event: Event) => {
+  event.stopPropagation();
   switch (event.type) {
     case "click":
       return {
@@ -210,7 +211,7 @@ const renderText = (element: Element, value: any): Cancel =>
 const __id__ = Symbol("list item key");
 
 let _cid = 0;
-const cid = () => `cid${_cid++}`
+const cid = () => `cid${_cid++}`;
 
 /**
  * An element with an id symbol used for efficient rendering of dynamic lists.
@@ -233,13 +234,7 @@ export const renderDynamicChildren = (
     // item will not be efficiently re-rendered by identity, but it will
     // still work.
     const statesById = new Map(
-      gmap(
-        states,
-        (state) => [
-          state.id ?? cid(),
-          state
-        ]
-      )
+      gmap(states, (state) => [state.id ?? cid(), state])
     );
 
     // Build an index of children and a list of children to remove.

typescript/packages/lookslike-high-level/src/components/saga-link.ts

@@ -71,36 +71,6 @@ export class CommonSagaLink extends LitElement {
     );
   }
 
-  override connectedCallback() {
-    super.connectedCallback();
-    this.maybeListenToName();
-  }
-
-  override disconnectedCallback() {
-    super.disconnectedCallback();
-    this.nameEffect?.();
-  }
-
-  override updated(changedProperties: Map<string | number | symbol, unknown>) {
-    super.updated(changedProperties);
-    if (changedProperties.has("saga")) {
-      this.maybeListenToName(true);
-    }
-  }
-
-  private maybeListenToName(skipUpdate = false) {
-    if (signal.isSignal(this.saga?.[NAME])) {
-      this.nameEffect = signal.effect([this.saga[NAME]], (name: string) => {
-        this.nameFromGem = name;
-        if (!skipUpdate) this.requestUpdate();
-        skipUpdate = false;
-      });
-    } else {
-      this.nameEffect?.();
-      this.nameFromGem = this.saga?.[NAME];
-    }
-  }
-
   override render() {
     if (!this.saga) return html``;
     const name = this.name ?? this.nameFromGem;

typescript/packages/lookslike-high-level/src/recipes/todo-list.ts

@@ -3,7 +3,7 @@ import { signal, stream } from "@commontools/common-frp";
 import { recipe, NAME } from "../recipe.js";
 import { annotation } from "../components/annotation.js";
 const { binding, repeat } = view;
-const { list, vstack, include, sendInput, todo, commonInput } = tags;
+const { vstack, include, sendInput, todo, commonInput } = tags;
 const { state, computed } = signal;
 const { subject } = stream;