@katabatic/runtime 1.1.2 → 1.1.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@katabatic/runtime",
   "license": "MIT",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "type": "module",
   "repository": {
     "type": "git",
@@ -15,7 +15,7 @@
     }
   },
   "dependencies": {
-    "@katabatic/signals": "^1.0.3"
+    "@katabatic/signals": "^1.0.4"
   },
   "devDependencies": {
     "@vitest/browser": "^4.1.0",

package/src/eachBlock.js

@@ -1,5 +1,4 @@
-import { Signal, SignalEvent, Effect, track } from '@katabatic/signals'
-import { Tracker } from '@katabatic/signals/tracker'
+import { Signal, SignalEvent, Effect } from '@katabatic/signals'
 import { AnimatedClient } from './client.js'
 
 export class EachBlock extends Map {
@@ -68,7 +67,7 @@ export class EachBlock extends Map {
     init() {
         this.#effect = new Effect(
             () => {
-                const iterable = this.getIterable()
+                const iterable = [...this.getIterable() ?? []]
 
                 for (const block of this.#getRemovedBlocks(iterable)) {
                     this.#removeBlock(block)
@@ -133,24 +132,21 @@ class Block extends AnimatedClient {
         super()
         this.key = key
         this.value = value
-        this.signal = new Signal(undefined, this)
+        this.signal = new Signal(this)
     }
 
     /** @type {Node} */
     anchor
-    /** @type {Node} */
-    parentAnchor
 
     setValue(nextValue) {
-        const hasChange = this.value !== nextValue
-        this.value = nextValue
-        if (hasChange) {
-            this.signal.dispatchEvent(new SignalEvent('change'))
+        if (this.value !== nextValue) {
+            this.value = nextValue
+            this.signal.dispatchEvent(new SignalEvent('changed'))
         }
     }
 
     getValue = () => {
-        track?.(new Tracker(this.signal))
+        this.signal.trackEvent('changed')
         return this.value
     }
 
@@ -181,14 +177,14 @@ class Block extends AnimatedClient {
     }
 
     get nextNode() {
-        return this.anchor?.nextSibling ?? this.parentAnchor.firstChild
+        return this.anchor?.nextSibling
     }
 }
 
 function createHeadBlock(anchor) {
     const block = new Block()
-    block.anchor = anchor.previousSibling
-    block.parentAnchor = block.anchor ? undefined : anchor.parentNode
+    block.anchor = document.createComment('')
+    anchor.parentNode.insertBefore(block.anchor, anchor)
     return block
 }
 

package/src/ifBlock.js

@@ -88,15 +88,13 @@ export function ifBlock(anchor, getCondition, concequent, alternate) {
 
 class Block extends AnimatedClient {
     get nextNode() {
-        return this.anchor?.nextSibling ?? this.parentAnchor.firstChild
+        return this.anchor?.nextSibling
     }
 }
 
 function createHeadBlock(anchor) {
     const block = new Block()
-
     block.anchor = document.createComment('')
     anchor.parentNode.insertBefore(block.anchor, anchor)
-
     return block
 }

package/src/index.js

@@ -20,6 +20,8 @@ export function $$(customElement) {
     }
 
     const client = new Client()
+    const signal = new Signal(customElement)
+    const bindings = new WeakMap()
 
     client.boundary = function (fn) {
         const boundary = new Boundary(fn, { orphaned: true }).init()
@@ -68,22 +70,18 @@ export function $$(customElement) {
     }
 
     client.instrument = function (property) {
-        this.signal ??= new Signal(undefined, customElement)
-
         if (!Object.getOwnPropertyDescriptor(customElement, property)?.get) {
             let value = customElement[property]
+
             Object.defineProperty(customElement, property, {
                 get: () => {
-                    track?.(new PropertyTracker(this.signal, property))
+                    track(() => new PropertyTracker(signal, property))
                     return value
                 },
                 set: (nextValue) => {
-                    const hasChange = value !== nextValue
-                    value = nextValue
-
-                    if (hasChange) {
-                        this.signal.dispatchEvent(new SignalEvent('set', { property }))
-                        this.signal.dispatchEvent(new SignalEvent('change'))
+                    if (nextValue !== value) {
+                        value = nextValue
+                        signal.dispatchEvent(new SignalEvent('propertyChanged', { property }))
                     }
                 }
             })
@@ -91,15 +89,33 @@ export function $$(customElement) {
     }
 
     client.trackAttribute = function (name) {
-        this.signal ??= new Signal(undefined, customElement)
-        track?.(new AttributeTracker(this.signal, name))
+        track(() => new AttributeTracker(signal, name))
     }
 
     client.attributeChanged = function (name, value, nextValue) {
         if (value !== nextValue) {
-            this.signal ??= new Signal(undefined, customElement)
-            this.signal.dispatchEvent(new SignalEvent('attributeChanged', { name }))
+            signal.dispatchEvent(new SignalEvent('attributeChanged', { name }))
+        }
+    }
+
+    client.bind = function(element, fn, _client) {
+        function opts(value) {
+            return {...value, getBinding: client.getBinding}
+        }
+
+        const binding = fn(opts)
+        bindings.set(element, binding)
+        _client.add(binding)
+        return binding
+    }
+
+    client.getBinding = function (element) {
+        let binding = bindings.get(element)
+        if (!binding) {
+            binding = {}
+            bindings.set(element, binding)
         }
+        return binding
     }
 
     return client