@katabatic/runtime 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+# Katabatic runtime
+
+[Katabatic](https://github.com/katabatic-js/katabatic)'s runtime

package/package.json

@@ -0,0 +1,19 @@
+{
+    "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"
+    }
+}

package/src/animate.js

@@ -0,0 +1,64 @@
+export class Animate {
+    constructor(fn, direction) {
+        this.fn = fn
+        this.direction = direction
+    }
+
+    #build(options) {
+        if (!this.animation) {
+            const animation = this.fn(options)
+
+            animation.finished
+                .catch(() => {})
+                .finally(() => {
+                    if (this.animation === animation) {
+                        this.animation = undefined
+                        this.reversed = undefined
+                    }
+                })
+
+            this.animation = animation
+            this.reversed = false
+        }
+    }
+
+    #direction(direction) {
+        if (this.animation) {
+            if (direction === 'in' && this.reversed) {
+                this.animation.reverse()
+                this.reversed = false
+            } else if (direction === 'out' && !this.reversed) {
+                this.animation.reverse()
+                this.reversed = true
+            }
+        }
+    }
+
+    #cancel() {
+        if (this.animation) {
+            this.animation.cancel()
+            this.animation = undefined
+            this.reversed = undefined
+        }
+    }
+
+    run(direction) {
+        if (this.direction === 'both') {
+            this.#build({ direction: 'both' })
+            this.#direction(direction)
+        } else {
+            if (direction !== this.direction) {
+                this.#cancel()
+            } else {
+                this.#build({ direction })
+            }
+        }
+        return this
+    }
+
+    dispose() {
+        this.animation?.cancel()
+        this.animation = undefined
+        this.reversed = undefined
+    }
+}

package/src/client.js

@@ -0,0 +1,48 @@
+import { Effect } from '@katabatic/signals'
+import { Animate } from './animate.js'
+
+export class Client extends Set {
+    effect(fn) {
+        const effect = new Effect(fn, { orphaned: true, async: false }).run()
+        this.add(effect)
+        return effect
+    }
+
+    dispose() {
+        for (const entry of cleared(this)) {
+            entry.dispose?.()
+        }
+    }
+}
+
+export class AnimatedClient extends Client {
+    animate(direction, fn) {
+        const animate = new Animate(fn, direction)
+        this.add(animate)
+        return animate
+    }
+
+    runAnimate(direction, callback) {
+        const promises = []
+        for (const entry of this) {
+            if (entry instanceof Animate) {
+                promises.push(entry.run(direction).animation?.finished)
+            }
+        }
+
+        const finished = Promise.all(promises)
+            .catch(() => {})
+            .finally(() => {
+                if (this.finished === finished) {
+                    callback?.()
+                }
+            })
+        this.finished = finished
+    }
+}
+
+const cleared = (self) => {
+    const entries = [...self]
+    self.clear()
+    return entries
+}

package/src/eachBlock.js

@@ -0,0 +1,185 @@
+import { Signal, SignalEvent, Effect, track } from '@katabatic/signals'
+import { Tracker } from '@katabatic/signals/tracker'
+import { AnimatedClient } from './client.js'
+
+export class EachBlock extends Map {
+    constructor(anchor, getIterable, getKey, fn) {
+        super()
+        this.getIterable = getIterable
+        this.getKey = getKey
+        this.fn = fn
+        this.#head = createHeadBlock(anchor)
+    }
+
+    #head
+    #effect
+
+    #insertBlockAfter(block, tail) {
+        const anchor = tail.nextNode
+        this.fn(block, anchor, block.getValue)
+        block.anchor = anchor.previousSibling
+
+        tail.insertAfter(block)
+        this.set(block.key, block)
+
+        return block
+    }
+
+    #moveBlockAfter(block, tail) {
+        if (block === tail) return block
+
+        const anchor = tail.nextNode
+        let node = block.previousBlock.nextNode
+        while (true) {
+            const nextNode = node.nextSibling
+            anchor.parentNode.insertBefore(node, anchor)
+
+            if (node === block.anchor) break
+            node = nextNode
+        }
+
+        tail.insertAfter(block)
+        return block
+    }
+
+    #removeBlock(block) {
+        let node = block.previousBlock.nextNode
+        while (true) {
+            const nextNode = node.nextSibling
+            node.remove()
+
+            if (node === block.anchor) break
+            node = nextNode
+        }
+
+        block.dispose()
+        block.remove()
+        this.delete(block.key)
+    }
+
+    *#getRemovedBlocks(iterable) {
+        const keys = new Set(iterable.map((v, i) => this.getKey(v, i)))
+
+        for (const block of this.values()) {
+            if (!keys.has(block.key)) yield block
+        }
+    }
+
+    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)
+                    } else {
+                        tail = updateBlock(this.#moveBlockAfter(block, tail), item)
+                    }
+                } else {
+                    tail = this.#insertBlockAfter(new Block(key, item), tail)
+                    if (this.#effect) tail.runAnimate('in')
+                }
+
+                index++
+            }
+        }, { orphaned: true, async: false }).run()
+
+        return this
+    }
+
+    dispose() {
+        this.#effect?.dispose()
+        for (const entry of cleared(this)) {
+            entry.dispose()
+        }
+    }
+}
+
+function updateBlock(block, value) {
+    block.setValue(value)
+    return block
+}
+
+export function eachBlock(anchor, getIterable, getKey, body) {
+    return new EachBlock(anchor, getIterable, getKey, body).init()
+}
+
+class Block extends AnimatedClient {
+    constructor(key, value) {
+        super()
+        this.key = key
+        this.value = value
+        this.signal = new Signal(undefined, 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'))
+        }
+    }
+
+    getValue = () => {
+        track?.(new Tracker(this.signal))
+        return this.value
+    }
+
+    insertAfter(block) {
+        if (block.previousBlock) {
+            block.previousBlock.nextBlock = block.nextBlock
+        }
+        if (block.nextBlock) {
+            block.nextBlock.previousBlock = block.previousBlock
+        }
+        if (this.nextBlock) {
+            this.nextBlock.previousBlock = block
+        }
+        block.previousBlock = this
+        block.nextBlock = this.nextBlock
+        this.nextBlock = block
+    }
+
+    remove() {
+        if (this.previousBlock) {
+            this.previousBlock.nextBlock = this.nextBlock
+        }
+        if (this.nextBlock) {
+            this.nextBlock.previousBlock = this.previousBlock
+        }
+        this.previousBlock = undefined
+        this.nextBlock = undefined
+    }
+
+    get nextNode() {
+        return this.anchor?.nextSibling ?? this.parentAnchor.firstChild
+    }
+}
+
+function createHeadBlock(anchor) {
+    const block = new Block()
+    block.anchor = anchor.previousSibling
+    block.parentAnchor = block.anchor ? undefined : anchor.parentNode
+    return block
+}
+
+const cleared = (self) => {
+    const entries = [...self.values()]
+    self.clear()
+    return entries
+}

package/src/ifBlock.js

@@ -0,0 +1,95 @@
+import { Effect } from '@katabatic/signals'
+import { AnimatedClient } from './client.js'
+
+export class IfBlock {
+    constructor(anchor, getCondition, concequent, alternate) {
+        this.getCondition = getCondition
+        this.concequent = concequent
+        this.alternate = alternate
+        this.#headBlock = createHeadBlock(anchor)
+    }
+
+    #headBlock
+    #condBlock
+    #altBlock
+    #effect
+
+    #insertBlock(block, fn) {
+        const alternate = fn === this.alternate
+        const previousBlock = alternate ? this.#condBlock ?? this.#headBlock : this.#headBlock
+        const anchor = previousBlock.nextNode
+
+        fn(block, anchor)
+        block.anchor = anchor.previousSibling
+
+        return block
+    }
+
+    #removeBlock(block) {
+        const alternate = block === this.#altBlock
+        const previousBlock = alternate ? this.#condBlock ?? this.#headBlock : this.#headBlock
+
+        let node = previousBlock.nextNode
+        while (true) {
+            const nextNode = node.nextSibling
+            node.remove()
+
+            if (node === block.anchor) break
+            node = nextNode
+        }
+
+        block.dispose()
+        this.#condBlock = alternate ? this.#condBlock : undefined
+        this.#altBlock = alternate ? undefined : this.#altBlock
+    }
+
+    init() {
+        let previousCondition
+
+        this.#effect ??= new Effect(
+            () => {
+                const condition = this.getCondition()
+
+                if (condition === previousCondition) return
+                previousCondition = condition
+
+                if (condition) {
+                    this.#altBlock?.runAnimate('out', () => this.#removeBlock(this.#altBlock))
+                    this.#condBlock ??= this.#insertBlock(new Block(), this.concequent)
+                    if (this.#effect) this.#condBlock.runAnimate('in')
+                } else {
+                    this.#condBlock?.runAnimate('out', () => this.#removeBlock(this.#condBlock))
+                    if (this.alternate) {
+                        this.#altBlock ??= this.#insertBlock(new Block(), this.alternate)
+                        if (this.#effect) this.#altBlock.runAnimate('in')
+                    }
+                }
+            },
+            { orphaned: true, async: false }
+        ).run()
+
+        return this
+    }
+
+    dispose() {
+        this.#effect?.dispose()
+        this.#condBlock?.dispose()
+    }
+}
+
+export function ifBlock(anchor, getCondition, concequent, alternate) {
+    return new IfBlock(anchor, getCondition, concequent, alternate).init()
+}
+
+class Block extends AnimatedClient {
+    get nextNode() {
+        return this.anchor?.nextSibling ?? this.parentAnchor.firstChild
+    }
+}
+
+function createHeadBlock(anchor) {
+    const block = new Block()
+    block.anchor = anchor.previousSibling
+    block.parentAnchor = block.anchor ? undefined : anchor.parentNode
+    return block
+}

package/src/index.js

@@ -0,0 +1,133 @@
+import { Signal, SignalEvent, Boundary, track } from '@katabatic/signals'
+import { AttributeTracker, PropertyTracker } from '@katabatic/signals/tracker'
+import { Client } from './client.js'
+import { EachBlock } from './eachBlock.js'
+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)
+        return block
+    }
+
+    Client.prototype.eachBlock ??= function (anchor, getIterable, getKey, body) {
+        const block = new EachBlock(anchor, getIterable, getKey, body).init()
+        this.add(block)
+        return block
+    }
+
+    const client = new Client()
+    let signal
+    let locked = false
+
+    client.boundary = function (fn) {
+        const boundary = new Boundary(fn, { orphaned: true }).init()
+        this.add(boundary)
+        return boundary
+    }
+
+    client.block = function (fn) {
+        const block = new Client()
+        fn(block)
+        this.add(block)
+        return block
+    }
+
+    client.lifecycle = function (event) {
+        const set = (state, result) => {
+            this.state = state
+            return result
+        }
+
+        switch (this.state) {
+            case 'connected':
+                if (event === 'disconnected') return set('disconnected', false)
+                if (event === 'microtask') return set('connected', false)
+                break
+            case 'disconnected':
+                if (event === 'connected') return set('connected', false)
+                if (event === 'microtask') return set('disconnected', true)
+                break
+            default:
+                if (event === 'connected') return set('connected', true)
+                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'))
+                }
+            }
+        })
+    }
+
+    client.trackAttribute = function (name) {
+        signal ??= new Signal(undefined, customElement)
+        track?.(new AttributeTracker(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
+        }
+        return false
+    }
+
+    return client
+}
+
+$$.init = function (object, property, value) {
+    const isSetter = arguments.length === 2
+
+    if (object.hasOwnProperty(property)) {
+        value = object[property]
+        delete object[property]
+
+        if (isSetter) {
+            object[property] = value
+        }
+    }
+    return value
+}

package/src/rootBlock.js

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