@katabatic/runtime 1.0.0 → 1.1.1

package/package.json

@@ -1,19 +1,27 @@
 {
-    "name": "@katabatic/runtime",
-    "license": "MIT",
-    "version": "1.0.0",
-    "type": "module",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/katabatic-js/katabatic.git",
-        "directory": "packages/runtime"
-    },
-    "exports": {
-        ".": {
-            "import": "./src/index.js"
-        }
-    },
-    "dependencies": {
-        "@katabatic/signals": "^1.0.0"
+  "name": "@katabatic/runtime",
+  "license": "MIT",
+  "version": "1.1.1",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/katabatic-js/katabatic.git",
+    "directory": "packages/runtime"
+  },
+  "files": ["/src"],
+  "exports": {
+    ".": {
+      "import": "./src/index.js"
     }
+  },
+  "dependencies": {
+    "@katabatic/signals": "^1.0.0"
+  },
+  "devDependencies": {
+    "@vitest/browser": "^4.1.0",
+    "@vitest/browser-preview": "^4.1.0"
+  },
+  "scripts": {
+    "test": "vitest"
+  }
 }

package/src/animate.js

@@ -42,7 +42,7 @@ export class Animate {
         }
     }
 
-    run(direction) {
+    play(direction) {
         if (this.direction === 'both') {
             this.#build({ direction: 'both' })
             this.#direction(direction)
@@ -53,7 +53,7 @@ export class Animate {
                 this.#build({ direction })
             }
         }
-        return this
+        return this.animation
     }
 
     dispose() {

package/src/client.js

@@ -3,11 +3,29 @@ import { Animate } from './animate.js'
 
 export class Client extends Set {
     effect(fn) {
-        const effect = new Effect(fn, { orphaned: true, async: false }).run()
+        const effect = new Effect(fn, { orphaned: true, async: true }).run()
         this.add(effect)
         return effect
     }
 
+    in() {}
+
+    out(callback) {
+        callback()
+    }
+
+    run() {
+        for (const entry of this) {
+            entry.run?.()
+        }
+    }
+
+    pause() {
+        for (const entry of this) {
+            entry.pause?.()
+        }
+    }
+
     dispose() {
         for (const entry of cleared(this)) {
             entry.dispose?.()
@@ -22,22 +40,59 @@ export class AnimatedClient extends Client {
         return animate
     }
 
-    runAnimate(direction, callback) {
-        const promises = []
-        for (const entry of this) {
-            if (entry instanceof Animate) {
-                promises.push(entry.run(direction).animation?.finished)
+    in() {
+        if (!this.playingIn) {
+            const playingIn = this.#playAnimates('in')?.then(() => {
+                if (this.playingIn === playingIn) {
+                    this.playingIn = undefined
+                }
+            })
+
+            if (this.playingOut) {
+                this.run()
             }
+
+            this.playingIn = playingIn
+            this.playingOut = undefined
         }
+    }
 
-        const finished = Promise.all(promises)
-            .catch(() => {})
-            .finally(() => {
-                if (this.finished === finished) {
-                    callback?.()
+    out(callback) {
+        if (!this.playingOut) {
+            const playingOut = this.#playAnimates('out')?.then((completed) => {
+                if (this.playingOut === playingOut) {
+                    if (completed) {
+                        callback()
+                    }
+                    this.playingOut = undefined
                 }
             })
-        this.finished = finished
+
+            if (playingOut) {
+                this.pause()
+            } else {
+                callback()
+            }
+
+            this.playingOut = playingOut
+            this.playingIn = undefined
+        }
+    }
+
+    #playAnimates(direction) {
+        const playingPromises = []
+        for (const entry of this) {
+            const animation = entry.play?.(direction)
+            if (animation) {
+                playingPromises.push(animation.finished)
+            }
+        }
+
+        if (playingPromises.length > 0) {
+            return Promise.all(playingPromises)
+                .then(() => true)
+                .catch(() => false)
+        }
     }
 }
 

package/src/eachBlock.js

@@ -66,39 +66,53 @@ export class EachBlock extends Map {
     }
 
     init() {
-        this.#effect ??= new Effect(() => {
-            const iterable = this.getIterable()
-
-            for (const block of this.#getRemovedBlocks(iterable)) {
-                this.#removeBlock(block)
-            }
-
-            let tail = this.#head
-            let index = 0
-            for (const item of iterable) {
-                const key = this.getKey(item, index)
-                let block = this.get(key)
-
-                if (block) {
-                    if (tail.nextBlock === block) {
-                        tail = updateBlock(block, item)
+        this.#effect = new Effect(
+            () => {
+                const iterable = this.getIterable()
+
+                for (const block of this.#getRemovedBlocks(iterable)) {
+                    this.#removeBlock(block)
+                }
+
+                let tail = this.#head
+                let index = 0
+                for (const item of iterable) {
+                    const key = this.getKey(item, index)
+                    let block = this.get(key)
+
+                    if (block) {
+                        if (tail.nextBlock === block) {
+                            tail = updateBlock(block, item)
+                        } else {
+                            tail = updateBlock(this.#moveBlockAfter(block, tail), item)
+                        }
                     } else {
-                        tail = updateBlock(this.#moveBlockAfter(block, tail), item)
+                        tail = this.#insertBlockAfter(new Block(key, item), tail)
+                        if (this.#effect) tail.in()
                     }
-                } else {
-                    tail = this.#insertBlockAfter(new Block(key, item), tail)
-                    if (this.#effect) tail.runAnimate('in')
-                }
 
-                index++
-            }
-        }, { orphaned: true, async: false }).run()
+                    index++
+                }
+            },
+            { orphaned: true, async: true }
+        ).run()
 
         return this
     }
 
+    run() {
+        this.#effect.run()
+    }
+
+    pause() {
+        this.#effect.pause()
+        for (const entry of this) {
+            entry.pause()
+        }
+    }
+
     dispose() {
-        this.#effect?.dispose()
+        this.#effect.dispose()
         for (const entry of cleared(this)) {
             entry.dispose()
         }

package/src/ifBlock.js

@@ -1,9 +1,9 @@
-import { Effect } from '@katabatic/signals'
+import { compute, Effect } from '@katabatic/signals'
 import { AnimatedClient } from './client.js'
 
 export class IfBlock {
     constructor(anchor, getCondition, concequent, alternate) {
-        this.getCondition = getCondition
+        this.getCondition = compute(getCondition)
         this.concequent = concequent
         this.alternate = alternate
         this.#headBlock = createHeadBlock(anchor)
@@ -44,36 +44,40 @@ export class IfBlock {
     }
 
     init() {
-        let previousCondition
-
-        this.#effect ??= new Effect(
+        this.#effect = new Effect(
             () => {
-                const condition = this.getCondition()
-
-                if (condition === previousCondition) return
-                previousCondition = condition
-
-                if (condition) {
-                    this.#altBlock?.runAnimate('out', () => this.#removeBlock(this.#altBlock))
+                if (this.getCondition()) {
+                    this.#altBlock?.out(() => this.#removeBlock(this.#altBlock))
                     this.#condBlock ??= this.#insertBlock(new Block(), this.concequent)
-                    if (this.#effect) this.#condBlock.runAnimate('in')
+                    if (this.#effect) this.#condBlock.in()
                 } else {
-                    this.#condBlock?.runAnimate('out', () => this.#removeBlock(this.#condBlock))
+                    this.#condBlock?.out(() => this.#removeBlock(this.#condBlock))
                     if (this.alternate) {
                         this.#altBlock ??= this.#insertBlock(new Block(), this.alternate)
-                        if (this.#effect) this.#altBlock.runAnimate('in')
+                        if (this.#effect) this.#altBlock.in()
                     }
                 }
             },
-            { orphaned: true, async: false }
+            { orphaned: true, async: true }
         ).run()
 
         return this
     }
 
+    run() {
+        this.#effect.run()
+    }
+
+    pause() {
+        this.#effect.pause()
+        this.#condBlock?.pause()
+        this.#altBlock?.pause()
+    }
+
     dispose() {
-        this.#effect?.dispose()
+        this.#effect.dispose()
         this.#condBlock?.dispose()
+        this.#altBlock?.dispose()
     }
 }
 
@@ -89,7 +93,9 @@ class Block extends AnimatedClient {
 
 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/index.js

@@ -7,7 +7,6 @@ import { IfBlock } from './ifBlock.js'
 export { EachBlock, IfBlock }
 
 export function $$(customElement) {
-    
     Client.prototype.ifBlock ??= function (anchor, getCondition, concequent, alternate) {
         const block = new IfBlock(anchor, getCondition, concequent, alternate).init()
         this.add(block)
@@ -21,8 +20,6 @@ export function $$(customElement) {
     }
 
     const client = new Client()
-    let signal
-    let locked = false
 
     client.boundary = function (fn) {
         const boundary = new Boundary(fn, { orphaned: true }).init()
@@ -37,82 +34,72 @@ export function $$(customElement) {
         return block
     }
 
-    client.lifecycle = function (event) {
-        const set = (state, result) => {
-            this.state = state
-            return result
-        }
+    client.lifecycle = function (event, fn) {
+        this.state ??= 'idle'
 
         switch (this.state) {
             case 'connected':
-                if (event === 'disconnected') return set('disconnected', false)
-                if (event === 'microtask') return set('connected', false)
+                if (event === 'disconnected') {
+                    this.state = 'disconnecting'
+                    queueMicrotask(() => {
+                        if (this.state === 'disconnecting') {
+                            this.state = 'disconnected'
+                            fn()
+                        } else {
+                            this.state = 'connected'
+                            customElement.connectedMoveCallback?.()
+                        }
+                    })
+                }
                 break
-            case 'disconnected':
-                if (event === 'connected') return set('connected', false)
-                if (event === 'microtask') return set('disconnected', true)
+            case 'disconnecting':
+                if (event === 'connected') {
+                    this.state = 'connected'
+                }
                 break
-            default:
-                if (event === 'connected') return set('connected', true)
+            case 'disconnected':
+            case 'idle':
+                if (event === 'connected') {
+                    this.state = 'connected'
+                    fn()
+                }
                 break
         }
     }
 
     client.instrument = function (property) {
-        signal ??= new Signal(undefined, customElement)
-
-        let value = customElement[property]
-        Object.defineProperty(customElement, property, {
-            get: () => {
-                track?.(new PropertyTracker(signal, property))
-                return value
-            },
-            set: (nextValue) => {
-                const hasChange = value !== nextValue
-                value = nextValue
-
-                if (hasChange) {
-                    signal.dispatchEvent(new SignalEvent('set', { property }))
-                    signal.dispatchEvent(new SignalEvent('change'))
+        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))
+                    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'))
+                    }
                 }
-            }
-        })
+            })
+        }
     }
 
     client.trackAttribute = function (name) {
-        signal ??= new Signal(undefined, customElement)
-        track?.(new AttributeTracker(signal, name))
+        this.signal ??= new Signal(undefined, customElement)
+        track?.(new AttributeTracker(this.signal, name))
     }
 
     client.attributeChanged = function (name, value, nextValue) {
         if (value !== nextValue) {
-            signal ??= new Signal(undefined, customElement)
-            signal.dispatchEvent(new SignalEvent('attributeChanged', { name }))
-        }
-    }
-
-    client.getBindingProp = function (object, property, fn) {
-        if (
-            !!Object.getOwnPropertyDescriptor(object, property)?.get ||
-            !!Object.getOwnPropertyDescriptor(Object.getPrototypeOf(object), property)?.get
-        ) {
-            locked = true
-            fn(object[property])
-            locked = false
-            return true
-        }
-        return false
-    }
-
-    client.setBindingProp = function (object, property, value) {
-        if (
-            !!Object.getOwnPropertyDescriptor(object, property)?.set ||
-            !!Object.getOwnPropertyDescriptor(Object.getPrototypeOf(object), property)?.set
-        ) {
-            if (!locked) object[property] = value
-            return true
+            this.signal ??= new Signal(undefined, customElement)
+            this.signal.dispatchEvent(new SignalEvent('attributeChanged', { name }))
         }
-        return false
     }
 
     return client

package/src/rootBlock.js

@@ -1,12 +1,7 @@
 import { Client } from './client.js'
 
-export function rootBlock(body) {
+export function rootBlock(fn) {
     const block = new Client()
-    body(block)
-
-    return {
-        dispose() {
-            block.dispose()
-        }
-    }
+    fn(block)
+    return block
 }