@katabatic/runtime 1.1.1 → 1.1.3

package/package.json

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

package/src/client.js

@@ -3,7 +3,7 @@ import { Animate } from './animate.js'
 
 export class Client extends Set {
     effect(fn) {
-        const effect = new Effect(fn, { orphaned: true, async: true }).run()
+        const effect = new Effect(fn, { orphaned: true }).run()
         this.add(effect)
         return effect
     }

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 {
@@ -94,7 +93,7 @@ export class EachBlock extends Map {
                     index++
                 }
             },
-            { orphaned: true, async: true }
+            { orphaned: true }
         ).run()
 
         return this
@@ -133,24 +132,22 @@ 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'))
+            this.signal.dispatchEvent(new SignalEvent('changed'))
         }
     }
 
     getValue = () => {
-        track?.(new Tracker(this.signal))
+        this.signal.trackEvent('changed')
         return this.value
     }
 
@@ -181,14 +178,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

@@ -46,6 +46,7 @@ export class IfBlock {
     init() {
         this.#effect = new Effect(
             () => {
+                console.log
                 if (this.getCondition()) {
                     this.#altBlock?.out(() => this.#removeBlock(this.#altBlock))
                     this.#condBlock ??= this.#insertBlock(new Block(), this.concequent)
@@ -58,7 +59,7 @@ export class IfBlock {
                     }
                 }
             },
-            { orphaned: true, async: true }
+            { orphaned: true }
         ).run()
 
         return this
@@ -87,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,7 @@ export function $$(customElement) {
     }
 
     const client = new Client()
+    const signal = new Signal(customElement)
 
     client.boundary = function (fn) {
         const boundary = new Boundary(fn, { orphaned: true }).init()
@@ -68,22 +69,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,14 +88,12 @@ 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 }))
         }
     }