firefly-compiler 0.4.79 → 0.4.81

package/lux/Lux.ff

@@ -1,487 +1,593 @@
-import Lux
-import LuxEvent
-import Css
-
-capability Lux(
-    document: LuxDocument
-    jsSystem: JsSystem
-    mutable cssClasses: StringMap[CssClass]
-    mutable renderLock: Lock
-    mutable task: Task
-    mutable renderQueue: Array[RenderQueueItem]
-    mutable element: LuxElement
-    mutable depth: Int
-    mutable keys: Option[StringMap[JsValue]]
-    mutable key: String
-    mutable attributes: Option[StringMap[String]]
-)
-
-capability RenderQueueItem(
-    luxCopy: Lux
-    render: () => Unit
-)
-
-class LuxElement(element: JsValue, mutable child: Int, mutable keepChildren: Bool)
-
-class LuxDocument(document: JsValue)
-
-extend self: LuxElement {
-    childAt(index: Int): JsValue {
-        self.element.get("childNodes").get(index)
-    }
-    insertBefore(newNode: JsValue, referenceNode: JsValue): JsValue {
-        self.element.call2("insertBefore", newNode, referenceNode)
-    }
-    removeAt(index: Int): Bool {
-        let node = self.childAt(index)
-        let remove = !node.isNullOrUndefined()
-        if(remove) {
-            self.element.call1("removeChild", node)
-        }
-        remove
-    }
-}
-
-extend self: LuxDocument {
-    createTextNode(value: String): JsValue {
-        self.document.call1("createTextNode", value)
-    }
-
-    createElement(tagName: String): JsValue {
-        self.document.call1("createElement", tagName)
-    }
-    
-    createFragment(): JsValue {
-        self.document.call0("createDocumentFragment")
-    }
-}
-
-extend self: Lux {
-    
-    copyFrom(lux: Lux) {
-        self.renderLock = lux.renderLock
-        self.renderQueue = lux.renderQueue
-        self.element = lux.element.LuxElement()
-        self.depth = lux.depth
-        self.keys = lux.keys
-        self.key = lux.key
-        self.attributes = lux.attributes
-    }
-    
-    text(value: String) {
-        let oldNode = self.element.childAt(self.element.child)
-        let oldValue = if(!oldNode.isNullOrUndefined()) {oldNode.get("data")} else {oldNode}
-        if(oldValue.isNullOrUndefined() || oldValue.grabString() != value) {
-            let node = self.document.createTextNode(value)
-            self.element.insertBefore(node, oldNode)
-        }
-        self.element.child += 1
-    }
-    
-    add(tagName: String, body: () => Unit = {}) {
-        let node = patchElement(self, tagName)
-        if(!node.get("luxHandlers").isNullOrUndefined()) {
-            node.get("luxHandlers").grabArray().each {pair =>
-                node.call2("removeEventListener", pair.get("event"), pair.get("handler"))
-            }
-            node.set("luxHandlers", self.jsSystem.array([]))
-        }
-        let savedAttributes = self.attributes
-        let savedKeys = self.keys
-        let savedElement = self.element
-        self.attributes = None
-        self.element = LuxElement(node, 0, keepChildren = False)
-        self.element.element.get("classList").set("value", "")
-        self.key = ""
-        self.depth += 1
-        try {
-            body()
-        } finally {
-            if(!self.element.keepChildren) {
-                doWhile {removeCurrentChild(self)}
-            }
-            patchAttributes(self)
-            self.depth -= 1
-            self.attributes = savedAttributes
-            self.keys = savedKeys
-            self.element = savedElement
-            self.element.child += 1
-        } grab()
-    }
-
-    div(body: () => Unit = {}) {self.add("div", body)}
-    span(body: () => Unit = {}) {self.add("span", body)}
-    label(body: () => Unit = {}) {self.add("label", body)}
-    button(body: () => Unit = {}) {self.add("button", body)}
-    form(body: () => Unit = {}) {self.add("form", body)}
-    input(body: () => Unit = {}) {self.add("input", body)}
-        
-    keyed(key: String, body: () => Unit) {
-        try {
-            self.key = key
-            body()
-        } finally {
-            self.key = ""
-        } grab()
-    }
-    
-    keyedList[T](values: List[T], getKey: T => String, body: T => Unit) {
-        try {
-            values.each {item =>
-                self.key = getKey(item)
-                body(item)
-            }
-        } finally {
-            self.key = ""
-        } grab()
-    }
-
-    set(attribute: String, value: String) {
-        let attributes = self.attributes.else {
-            let map = StringMap.new()
-            self.attributes = Some(map)
-            map
-        }
-        attributes.set(attribute, value)
-    }
-    
-    setId(value: String) {self.set("id", value)}
-    
-    setValue(value: String) { // TODO: Not an attribute
-        self.element.element.set("value", value)
-    }
-    
-    css(style: Css) {
-        let attributes = self.attributes.else {
-            let map = StringMap.new()
-            self.attributes = Some(map)
-            map
-        }
-        if(attributes.has("style")) {
-            attributes.set("style", attributes.grab("style") + ";" + style.property + ":" + style.value)
-        } else {
-            attributes.set("style", style.property + ":" + style.value)
-        }
-    }
-    
-    cssClass(class: CssClass) {
-        if(!self.cssClasses.has(class.name())) {
-            self.cssClasses.set(class.name(), class)
-            let styleSheet = self.document.createElement("style")
-            styleSheet.set("textContent", class.show())
-            self.document.document.get("head").call1("appendChild", styleSheet)
-        }
-        self.element.element.get("classList").call1("add", class.name())
-        self.set("class", self.element.element.get("className").grabString())
-    }
-    
-    on(event: String, handler: LuxEvent => Unit) {
-        let jsHandler = unsafeAsyncFunction1ToJs(self) {jsEvent =>
-            self.renderLock.do(reentrant = False) {
-                handler(unsafeJsToValue(jsEvent))
-                processRenderQueue(self)
-            }
-        }
-        self.element.element.call2("addEventListener", event, jsHandler)
-        if(self.element.element.get("luxHandlers").isNullOrUndefined()) {
-            self.element.element.set("luxHandlers", self.jsSystem.array([]))
-        }
-        self.element.element.get("luxHandlers").call1("push"
-            self.jsSystem.object().with("event", event).with("handler", jsHandler)
-        )
-    }
-
-    onClick(handler: LuxEvent => Unit) {self.on("click", handler)}
-    onInput(handler: LuxEvent => Unit) {self.on("input", handler)}
-
-    useState[T: HasAnyTag](initialValue: T, body: (T, T => Unit) => Unit) {
-        self.depth += 1
-        let value = getStateOnElement(self.element.element, self.depth, initialValue)
-        mutable i = 0
-        while {i < self.renderQueue.size()} {
-            let item = self.renderQueue.grab(i)
-            if(item.luxCopy.element.element.equals(self.element.element) && item.luxCopy.depth == self.depth) {
-                self.renderQueue.delete(i, 1)
-            } else {
-                i += 1
-            }
-        }
-        let luxCopy = self.Lux(element = self.element.LuxElement())
-        function setState(newValue: T): Unit {
-            setStateOnElement(luxCopy.element.element, luxCopy.depth, newValue)
-            self.renderQueue.push(RenderQueueItem(
-                luxCopy = luxCopy
-                render = {
-                    let child = luxCopy.element.child
-                    let element = luxCopy.element.childAt(child)
-                    body(newValue, {setState(_)})
-                    if(!element.equals(luxCopy.element.childAt(child))) {
-                        removeCurrentChild(luxCopy.Lux(
-                            element = luxCopy.element.LuxElement(child = luxCopy.element.child + 1)
-                        ))
-                    }
-                }
-            ))
-        }
-        try {
-            body(value, {setState(_)})
-        } finally {
-            self.depth -= 1
-        } grab()
-    }
-
-    useCallback1[A1: Equal: HasAnyTag](callback: A1 => Unit, body: (A1 => Unit) => Unit) {
-        self.depth += 1
-        setStateOnElement(self.element.element, self.depth, callback)
-        let element = self.element.element
-        let depth = self.depth
-        try {
-            body {a1 =>
-                let latestCallback = getStateOnElement(element, depth, callback)
-                latestCallback(a1)
-            }
-        } finally {
-            self.depth -= 1
-        } grab()
-    }
-
-    useLazy1[A1: Equal: HasAnyTag](a1: A1, body: A1 => Unit = {_ => }) {
-        self.depth += 1
-        try {
-            let old = getStateOnElement(self.element.element, self.depth, None)
-            old.{
-                | Some(o1) {a1 == o1} =>
-                    self.element.keepChildren = True
-                | _ =>
-                    setStateOnElement(self.element.element, self.depth, Some(a1))
-                    body(a1)
-            }
-        } finally {
-            self.depth -= 1
-        } grab()
-    }
-
-    useMemo1[A1: Equal: HasAnyTag, T: HasAnyTag](a1: A1, compute: A1 => T, body: T => Unit) {
-        self.depth += 1
-        try {
-            let old = getStateOnElement(self.element.element, self.depth, Pair(a1, None))
-            let computed = old.{
-                | Pair(o1, _) {a1 != o1} => 
-                    let v = compute(a1)
-                    setStateOnElement(self.element.element, self.depth, Pair(a1, Some(v)))
-                    v
-                | Pair(_, Some(v)) => 
-                    v
-                | Pair(_, None) =>
-                    let v = compute(a1)
-                    setStateOnElement(self.element.element, self.depth, Pair(a1, Some(v)))
-                    v
-            }
-            body(computed)
-        } finally {
-            self.depth -= 1
-        } grab()
-    }
-    
-    useSuspense(suspense: () => Unit, body: Lux => Unit) {
-        let oldSubtask = getTaskOnElement(self.element.element)
-        oldSubtask.each {task =>
-            forceAsyncAbort(self, task)
-        }
-        let fragment = self.document.createFragment()
-        let luxCopy = self.Lux(element = self.element.LuxElement())
-        let subtask = self.task.spawn {task =>
-            let lux = luxCopy.Lux(
-                task = task
-                renderLock = task.lock()
-                renderQueue = Array.new()
-                element = luxCopy.element.LuxElement(element = fragment)
-            )
-            try {
-                body(lux)
-                task.throwIfAborted()
-                lux.copyFrom(luxCopy)
-                lux.renderLock.do(reentrant = False) {
-                    abortTasksOnElement(lux, lux.element.childAt(lux.element.child), onlyChildren = True)
-                    lux.element.removeAt(lux.element.child)
-                    lux.element.insertBefore(fragment, lux.jsSystem.null())
-                }
-            } catchAny {error =>
-                if(error.name() != "AbortError") {
-                    error.rethrow()
-                }
-            } grab()
-        }
-        suspense()
-        setTaskOnElement(self.element.childAt(self.element.child - 1), Some(subtask))
-    }
-
-}
-
-processRenderQueue(self: Lux) {
-    self.renderQueue.sortBy {-_.luxCopy.depth}
-    let newLux = self.Lux(element = self.element.LuxElement())
-    try {
-        while {!self.renderQueue.isEmpty()} {
-            let item = self.renderQueue.pop().grab()
-            self.copyFrom(item.luxCopy)
-            item.render()
-        }
-    } finally {
-        self.copyFrom(newLux)
-    } grab()
-}
-
-removeCurrentChild(self: Lux): Bool {
-    let child = self.element.childAt(self.element.child)
-    if(!child.isNullOrUndefined() && !child.get("children").isNullOrUndefined()) {
-        abortTasksOnElement(self, child, False)
-    }
-    self.element.removeAt(self.element.child)
-}
-
-getStateOnElement[T /*: HasAnyTag*/](element: JsValue, depth: Int, fallback: T): T {
-    let value = element.get("lux" + depth)
-    if(value.isNullOrUndefined()) {fallback} else {
-        unsafeJsToValue(value)
-    }
-}
-
-setStateOnElement[T /*: HasAnyTag*/](element: JsValue, depth: Int, value: T): Unit {
-    element.set("lux" + depth, unsafeJsFromValue(value))
-}
-
-
-getTaskOnElement(element: JsValue): Option[Task] {
-    let value = element.get("luxTask")
-    if(value.isNullOrUndefined()) {None} else {
-        unsafeJsToValue(value)
-    }
-}
-
-setTaskOnElement(element: JsValue, task: Option[Task]): Unit {
-    element.set("luxTask", unsafeJsFromValue(task))
-}
-
-abortTasksOnElement(lux: Lux, element: JsValue, onlyChildren: Bool): Unit {
-    if(!onlyChildren) {
-        getTaskOnElement(element).each {task => forceAsyncAbort(lux, task)}
-    }
-    element.get("children").each {child => 
-        abortTasksOnElement(lux, child, False)
-    }
-}
-
-unsafeJsToValue[T](jsValue: JsValue): T
-    target js sync """return jsValue_"""
-
-unsafeJsFromValue[T](value: T): JsValue
-    target js sync """return value_"""
-
-unsafeAsyncFunction1ToJs[R](self: Lux, body: JsValue => R): JsValue
-    target js async "return async a1 => await body_(a1, $task)"
-
-forceAsyncAbort(self: Lux, task: Task): Unit {
-    task.abort()
-}
-        
-patchElement(self: Lux, tagName: String): JsValue {
-    let newKey = if(self.key != "") {tagName.upper() + ">" + self.key} else {""}
-    let oldNode = self.element.childAt(self.element.child)
-    let oldKey = if(!oldNode.isNullOrUndefined()) {oldNode.get("luxKey")} else {oldNode}
-    let match = if(newKey != "") {
-        !oldKey.isNullOrUndefined() && 
-        oldKey.grabString() == newKey
-    } else {
-        oldKey.isNullOrUndefined() && 
-        !oldNode.isNullOrUndefined() &&
-        !oldNode.get("tagName").isNullOrUndefined() && 
-        oldNode.get("tagName").grabString() == tagName.upper()
-    }
-    if(match) {
-        oldNode
-    } else {
-        let newNode = if(newKey == "") {self.document.createElement(tagName)} else {
-            let keys = self.keys.else {
-                let map = StringMap.new()
-                mutable i = self.element.child
-                mutable c = self.element.childAt(i)
-                while {!c.isNullOrUndefined()} {
-                    let k = c.get("luxKey")
-                    if(!k.isNullOrUndefined()) {map.set(k.grabString(), c)}
-                    c = self.element.childAt(i)
-                    i += 1
-                }
-                self.keys = Some(map)
-                map
-            }
-            if(keys.has(newKey)) {
-                let foundNode = keys.grab(newKey)
-                keys.remove(newKey)
-                foundNode
-            } else {
-                let createdNode = self.document.createElement(tagName)
-                createdNode.set("luxKey", newKey)
-                createdNode
-            }
-        }
-        self.element.insertBefore(newNode, oldNode)
-        newNode
-    }
-}
-
-patchAttributes(self: Lux) {
-    let attributes = self.element.element.get("attributes")
-    self.attributes.{
-        | None => 
-            mutable i = attributes.get("length").grabInt() - 1
-            while {i >= 0} {
-                let attribute = attributes.get(i)
-                self.element.element.call1("removeAttribute", attribute.get("name"))
-                i -= 1
-            }
-        | Some(map) => 
-            mutable i = attributes.get("length").grabInt() - 1
-            while {i >= 0} {
-                let attribute = attributes.get(i)
-                if(!map.has(attribute.get("name").grabString())) {
-                    self.element.element.call1("removeAttribute", attribute.get("name"))
-                }
-                i -= 1
-            }
-            map.each {name, value =>
-                let oldValue = self.element.element.call1("getAttribute", name)
-                if(oldValue.isNullOrUndefined() || !oldValue.equals(value)) {
-                    self.element.element.call2("setAttribute", name, value)
-                }
-            }
-    }    
-}
-
-render(browserSystem: BrowserSystem, element: JsValue, body: Lux => Unit) {
-    mutable document = element
-    while {!document.get("parentNode").isNullOrUndefined()} {
-        document = document.get("parentNode")
-    }
-    let lux = Lux(
-        jsSystem = browserSystem.js()
-        renderLock = browserSystem.mainTask().lock()
-        cssClasses = StringMap.new()
-        task = browserSystem.mainTask()
-        depth = 0
-        document = LuxDocument(document)
-        element = LuxElement(element, 0, keepChildren = False)
-        keys = None
-        key = ""
-        attributes = None
-        renderQueue = Array.new()
-    )
-    lux.renderLock.do(reentrant = False) {
-        body(lux)
-    }
-}
-
-renderById(browserSystem: BrowserSystem, id: String, body: Lux => Unit) {
-    let element = browserSystem.js().global().get("document").call1("getElementById", id)
-    render(browserSystem, element, body)
-}
+import Lux
+import LuxEvent
+import Css
+
+capability Lux(
+    document: LuxDocument
+    jsSystem: JsSystem
+    mutable dry: Option[Array[DryNode]]
+    mutable cssClasses: StringMap[CssClass]
+    mutable renderLock: Lock
+    mutable task: Task
+    mutable renderQueue: Array[RenderQueueItem]
+    mutable element: LuxElement
+    mutable depth: Int
+    mutable keys: Option[StringMap[JsValue]]
+    mutable key: String
+    mutable attributes: Option[StringMap[String]]
+)
+
+capability RenderQueueItem(
+    luxCopy: Lux
+    render: () => Unit
+)
+
+class LuxElement(element: JsValue, mutable child: Int, mutable keepChildren: Bool)
+
+class LuxDocument(document: JsValue)
+
+data LuxInvaldNameException(name: String)
+
+class DryNode {
+    DryElement(tagName: String, attributes: StringMap[String], children: Array[DryNode])
+    DryFragment(children: Array[DryNode])
+    DryText(text: String)
+}
+
+extend self: DryNode {
+    toHtml(): String {
+        // https://www.w3.org/TR/xml/ - wrt. checkXmmlName, we only accept the ASCII subset
+        function checkXmlName(name: String): String {
+            if(name.size() == 0) {throw(LuxInvaldNameException(name))}
+            if(!name.grabFirst().isAsciiLetter() && !name.startsWith(":") && !name.startsWith("_")) {throw(LuxInvaldNameException(name))}
+            if(!name.all {c => c.isAsciiLetterOrDigit() || c == ':' || c == '_' || c == '-' || c == '.'}) {throw(LuxInvaldNameException(name))}
+            name
+        }
+        function escapeAttributeValue(value: String): String {
+            value.replace("&", "&#x26;").replace("<", "&#x3C;").replace(">", "&#x3E;").replace("\"", "&#x22;")
+        }
+        function escapeText(text: String): String {
+            text.replace("&", "&#x26;").replace("<", "&#x3C;").replace(">", "&#x3E;")
+        }
+        let voidHtmlElements = [
+            "area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"
+        ].toSet()
+        function toHtml(node: DryNode): String {
+            | DryElement(tagName, attributes, children) => 
+                let attributeHtml = attributes.toList().map {| Pair(name, value) => 
+                    " " + checkXmlName(name) + "=\"" + escapeAttributeValue(value) + "\""
+                }.join()
+                let childrenHtml = children.toList().map {toHtml(_)}.join()
+                let endHtml = if(voidHtmlElements.contains(tagName)) {""} else {"</" + tagName + ">"}
+                "<" + checkXmlName(tagName) + attributeHtml + ">" + childrenHtml + endHtml
+            | DryFragment(children) => 
+                children.toList().map {toHtml(_)}.join()
+            | DryText(text) => 
+                escapeText(text)
+        }
+        toHtml(self)
+    }
+}
+
+extend self: LuxElement {
+    childAt(index: Int): JsValue {
+        self.element.get("childNodes").get(index)
+    }
+    insertBefore(newNode: JsValue, referenceNode: JsValue): JsValue {
+        self.element.call2("insertBefore", newNode, referenceNode)
+    }
+    removeAt(index: Int): Bool {
+        let node = self.childAt(index)
+        let remove = !node.isNullOrUndefined()
+        if(remove) {
+            self.element.call1("removeChild", node)
+        }
+        remove
+    }
+}
+
+extend self: LuxDocument {
+    createTextNode(value: String): JsValue {
+        self.document.call1("createTextNode", value)
+    }
+
+    createElement(tagName: String): JsValue {
+        self.document.call1("createElement", tagName)
+    }
+    
+    createFragment(): JsValue {
+        self.document.call0("createDocumentFragment")
+    }
+}
+
+extend self: Lux {
+    
+    copyFrom(lux: Lux) {
+        self.renderLock = lux.renderLock
+        self.renderQueue = lux.renderQueue
+        self.element = lux.element.LuxElement()
+        self.depth = lux.depth
+        self.keys = lux.keys
+        self.key = lux.key
+        self.attributes = lux.attributes
+    }
+    
+    text(value: String) {
+        self.dry.map {_.push(DryText(value))}.else:
+        let oldNode = self.element.childAt(self.element.child)
+        let oldValue = if(!oldNode.isNullOrUndefined()) {oldNode.get("data")} else {oldNode}
+        if(oldValue.isNullOrUndefined() || oldValue.grabString() != value) {
+            let node = self.document.createTextNode(value)
+            self.element.insertBefore(node, oldNode)
+        }
+        self.element.child += 1
+    }
+    
+    add(tagName: String, body: () => Unit = {}) {
+        self.dry.map {dry => 
+            self.dry = Some([].toArray())
+            let savedAttributes = self.attributes
+            let savedKeys = self.keys
+            self.attributes = None
+            self.key = ""
+            self.depth += 1
+            try {
+                body()
+            } finally {
+                dry.push(DryElement(tagName, self.attributes.else {StringMap.new()}, self.dry.grab()))
+                self.depth -= 1
+                self.attributes = savedAttributes
+                self.keys = savedKeys
+                self.element.child += 1
+                self.dry = Some(dry)
+            }
+        }.else:
+        let node = patchElement(self, tagName)
+        if(!node.get("luxHandlers").isNullOrUndefined()) {
+            node.get("luxHandlers").grabArray().each {pair =>
+                node.call2("removeEventListener", pair.get("event"), pair.get("handler"))
+            }
+            node.set("luxHandlers", self.jsSystem.array([]))
+        }
+        let savedAttributes = self.attributes
+        let savedKeys = self.keys
+        let savedElement = self.element
+        self.attributes = None
+        self.element = LuxElement(node, 0, keepChildren = False)
+        self.element.element.get("classList").set("value", "")
+        self.key = ""
+        self.depth += 1
+        try {
+            body()
+        } finally {
+            if(!self.element.keepChildren) {
+                doWhile {removeCurrentChild(self)}
+            }
+            patchAttributes(self)
+            self.depth -= 1
+            self.attributes = savedAttributes
+            self.keys = savedKeys
+            self.element = savedElement
+            self.element.child += 1
+        }
+    }
+
+    div(body: () => Unit = {}) {self.add("div", body)}
+    span(body: () => Unit = {}) {self.add("span", body)}
+    label(body: () => Unit = {}) {self.add("label", body)}
+    button(body: () => Unit = {}) {self.add("button", body)}
+    form(body: () => Unit = {}) {self.add("form", body)}
+    input(body: () => Unit = {}) {self.add("input", body)}
+        
+    keyed(key: String, body: () => Unit) {
+        try {
+            self.key = key
+            body()
+        } finally {
+            self.key = ""
+        }
+    }
+    
+    keyedList[T](values: List[T], getKey: T => String, body: T => Unit) {
+        try {
+            values.each {item =>
+                self.key = getKey(item)
+                body(item)
+            }
+        } finally {
+            self.key = ""
+        }
+    }
+
+    set(attribute: String, value: String) {
+        let attributes = self.attributes.else {
+            let map = StringMap.new()
+            self.attributes = Some(map)
+            map
+        }
+        attributes.set(attribute, value)
+    }
+    
+    setId(value: String) {self.set("id", value)}
+    
+    setValue(value: String) { // TODO: Not an attribute
+        self.dry.map {_ => self.set("value", value)}.else:
+        self.element.element.set("value", value)
+    }
+    
+    css(style: Css) {
+        let attributes = self.attributes.else {
+            let map = StringMap.new()
+            self.attributes = Some(map)
+            map
+        }
+        if(attributes.has("style")) {
+            attributes.set("style", attributes.grab("style") + ";" + style.property + ":" + style.value)
+        } else {
+            attributes.set("style", style.property + ":" + style.value)
+        }
+    }
+    
+    cssClass(class: CssClass) {
+        if(!self.cssClasses.has(class.name())) {
+            self.cssClasses.set(class.name(), class)
+            if(self.dry.isEmpty()):
+            let styleSheet = self.document.createElement("style")
+            styleSheet.set("textContent", class.show())
+            self.document.document.get("head").call1("appendChild", styleSheet)
+        }
+        if(!self.dry.isEmpty()) {
+            let classNames = self.attributes.flatMap {_.get("class")}.else {""}
+            self.set("class", (classNames + " " + class.name()).trim())
+        } else {
+            self.element.element.get("classList").call1("add", class.name())
+            self.set("class", self.element.element.get("className").grabString())
+        }
+    }
+    
+    on(event: String, handler: LuxEvent => Unit) {
+        if(self.dry.isEmpty()):
+        let jsHandler = unsafeAsyncFunction1ToJs(self) {jsEvent =>
+            self.renderLock.do(reentrant = False) {
+                handler(unsafeJsToValue(jsEvent))
+                processRenderQueue(self)
+            }
+        }
+        self.element.element.call2("addEventListener", event, jsHandler)
+        if(self.element.element.get("luxHandlers").isNullOrUndefined()) {
+            self.element.element.set("luxHandlers", self.jsSystem.array([]))
+        }
+        self.element.element.get("luxHandlers").call1("push"
+            self.jsSystem.object().with("event", event).with("handler", jsHandler)
+        )
+    }
+
+    onClick(handler: LuxEvent => Unit) {self.on("click", handler)}
+    onInput(handler: LuxEvent => Unit) {self.on("input", handler)}
+
+    useState[T: HasAnyTag](initialValue: T, body: (T, T => Unit) => Unit) {
+        self.dry.map {_ => body(initialValue, {_ => })}.else:
+        self.depth += 1
+        let value = getStateOnElement(self.element.element, self.depth, initialValue)
+        mutable i = 0
+        while {i < self.renderQueue.size()} {
+            let item = self.renderQueue.grab(i)
+            if(item.luxCopy.element.element.equals(self.element.element) && item.luxCopy.depth == self.depth) {
+                self.renderQueue.delete(i, 1)
+            } else {
+                i += 1
+            }
+        }
+        let luxCopy = self.Lux(element = self.element.LuxElement())
+        function setState(newValue: T): Unit {
+            setStateOnElement(luxCopy.element.element, luxCopy.depth, newValue)
+            self.renderQueue.push(RenderQueueItem(
+                luxCopy = luxCopy
+                render = {
+                    let child = luxCopy.element.child
+                    let element = luxCopy.element.childAt(child)
+                    body(newValue, {setState(_)})
+                    if(!element.equals(luxCopy.element.childAt(child))) {
+                        removeCurrentChild(luxCopy.Lux(
+                            element = luxCopy.element.LuxElement(child = luxCopy.element.child + 1)
+                        ))
+                    }
+                }
+            ))
+        }
+        try {
+            body(value, {setState(_)})
+        } finally {
+            self.depth -= 1
+        }
+    }
+
+    useCallback1[A1: Equal: HasAnyTag](callback: A1 => Unit, body: (A1 => Unit) => Unit) {
+        self.dry.map {_ => body(callback)}.else:
+        self.depth += 1
+        setStateOnElement(self.element.element, self.depth, callback)
+        let element = self.element.element
+        let depth = self.depth
+        try {
+            body {a1 =>
+                let latestCallback = getStateOnElement(element, depth, callback)
+                latestCallback(a1)
+            }
+        } finally {
+            self.depth -= 1
+        }
+    }
+
+    useLazy1[A1: Equal: HasAnyTag](a1: A1, body: A1 => Unit = {_ => }) {
+        self.dry.map {_ => body(a1)}.else:
+        self.depth += 1
+        try {
+            let old = getStateOnElement(self.element.element, self.depth, None)
+            old.{
+                | Some(o1) {a1 == o1} =>
+                    self.element.keepChildren = True
+                | _ =>
+                    setStateOnElement(self.element.element, self.depth, Some(a1))
+                    body(a1)
+            }
+        } finally {
+            self.depth -= 1
+        }
+    }
+
+    useMemo1[A1: Equal: HasAnyTag, T: HasAnyTag](a1: A1, compute: A1 => T, body: T => Unit) {
+        self.dry.map {_ => body(compute(a1))}.else:
+        self.depth += 1
+        try {
+            let old = getStateOnElement(self.element.element, self.depth, Pair(a1, None))
+            let computed = old.{
+                | Pair(o1, _) {a1 != o1} => 
+                    let v = compute(a1)
+                    setStateOnElement(self.element.element, self.depth, Pair(a1, Some(v)))
+                    v
+                | Pair(_, Some(v)) => 
+                    v
+                | Pair(_, None) =>
+                    let v = compute(a1)
+                    setStateOnElement(self.element.element, self.depth, Pair(a1, Some(v)))
+                    v
+            }
+            body(computed)
+        } finally {
+            self.depth -= 1
+        }
+    }
+    
+    useSuspense(suspense: () => Unit, body: Lux => Unit) {
+        self.dry.map {_ => suspense()}.else:
+        let oldSubtask = getTaskOnElement(self.element.element)
+        oldSubtask.each {task =>
+            forceAsyncAbort(self, task)
+        }
+        let fragment = self.document.createFragment()
+        let luxCopy = self.Lux(element = self.element.LuxElement())
+        let subtask = self.task.spawn {task =>
+            let lux = luxCopy.Lux(
+                task = task
+                renderLock = task.lock()
+                renderQueue = Array.new()
+                element = luxCopy.element.LuxElement(element = fragment)
+            )
+            try {
+                body(lux)
+                task.throwIfAborted()
+                lux.copyFrom(luxCopy)
+                lux.renderLock.do(reentrant = False) {
+                    abortTasksOnElement(lux, lux.element.childAt(lux.element.child), onlyChildren = True)
+                    lux.element.removeAt(lux.element.child)
+                    lux.element.insertBefore(fragment, lux.jsSystem.null())
+                }
+            } catchAny {error =>
+                if(error.name() != "AbortError") {
+                    error.rethrow()
+                }
+            }
+        }
+        suspense()
+        setTaskOnElement(self.element.childAt(self.element.child - 1), Some(subtask))
+    }
+
+}
+
+processRenderQueue(self: Lux) {
+    self.renderQueue.sortBy {-_.luxCopy.depth}
+    let newLux = self.Lux(element = self.element.LuxElement())
+    try {
+        while {!self.renderQueue.isEmpty()} {
+            let item = self.renderQueue.pop().grab()
+            self.copyFrom(item.luxCopy)
+            item.render()
+        }
+    } finally {
+        self.copyFrom(newLux)
+    }
+}
+
+removeCurrentChild(self: Lux): Bool {
+    let child = self.element.childAt(self.element.child)
+    if(!child.isNullOrUndefined() && !child.get("children").isNullOrUndefined()) {
+        abortTasksOnElement(self, child, False)
+    }
+    self.element.removeAt(self.element.child)
+}
+
+getStateOnElement[T /*: HasAnyTag*/](element: JsValue, depth: Int, fallback: T): T {
+    let value = element.get("lux" + depth)
+    if(value.isNullOrUndefined()) {fallback} else {
+        unsafeJsToValue(value)
+    }
+}
+
+setStateOnElement[T /*: HasAnyTag*/](element: JsValue, depth: Int, value: T): Unit {
+    element.set("lux" + depth, unsafeJsFromValue(value))
+}
+
+
+getTaskOnElement(element: JsValue): Option[Task] {
+    let value = element.get("luxTask")
+    if(value.isNullOrUndefined()) {None} else {
+        unsafeJsToValue(value)
+    }
+}
+
+setTaskOnElement(element: JsValue, task: Option[Task]): Unit {
+    element.set("luxTask", unsafeJsFromValue(task))
+}
+
+abortTasksOnElement(lux: Lux, element: JsValue, onlyChildren: Bool): Unit {
+    if(!onlyChildren) {
+        getTaskOnElement(element).each {task => forceAsyncAbort(lux, task)}
+    }
+    element.get("children").each {child => 
+        abortTasksOnElement(lux, child, False)
+    }
+}
+
+unsafeJsToValue[T](jsValue: JsValue): T
+    target js sync """return jsValue_"""
+
+unsafeJsFromValue[T](value: T): JsValue
+    target js sync """return value_"""
+
+unsafeAsyncFunction1ToJs[R](self: Lux, body: JsValue => R): JsValue
+    target js async "return async a1 => await body_(a1, $task)"
+
+forceAsyncAbort(self: Lux, task: Task): Unit {
+    task.abort()
+}
+        
+patchElement(self: Lux, tagName: String): JsValue {
+    let newKey = if(self.key != "") {tagName.upper() + ">" + self.key} else {""}
+    let oldNode = self.element.childAt(self.element.child)
+    let oldKey = if(!oldNode.isNullOrUndefined()) {oldNode.get("luxKey")} else {oldNode}
+    let match = if(newKey != "") {
+        !oldKey.isNullOrUndefined() && 
+        oldKey.grabString() == newKey
+    } else {
+        oldKey.isNullOrUndefined() && 
+        !oldNode.isNullOrUndefined() &&
+        !oldNode.get("tagName").isNullOrUndefined() && 
+        oldNode.get("tagName").grabString() == tagName.upper()
+    }
+    if(match) {
+        oldNode
+    } else {
+        let newNode = if(newKey == "") {self.document.createElement(tagName)} else {
+            let keys = self.keys.else {
+                let map = StringMap.new()
+                mutable i = self.element.child
+                mutable c = self.element.childAt(i)
+                while {!c.isNullOrUndefined()} {
+                    let k = c.get("luxKey")
+                    if(!k.isNullOrUndefined()) {map.set(k.grabString(), c)}
+                    c = self.element.childAt(i)
+                    i += 1
+                }
+                self.keys = Some(map)
+                map
+            }
+            if(keys.has(newKey)) {
+                let foundNode = keys.grab(newKey)
+                keys.remove(newKey)
+                foundNode
+            } else {
+                let createdNode = self.document.createElement(tagName)
+                createdNode.set("luxKey", newKey)
+                createdNode
+            }
+        }
+        self.element.insertBefore(newNode, oldNode)
+        newNode
+    }
+}
+
+patchAttributes(self: Lux) {
+    let attributes = self.element.element.get("attributes")
+    self.attributes.{
+        | None => 
+            mutable i = attributes.get("length").grabInt() - 1
+            while {i >= 0} {
+                let attribute = attributes.get(i)
+                self.element.element.call1("removeAttribute", attribute.get("name"))
+                i -= 1
+            }
+        | Some(map) => 
+            mutable i = attributes.get("length").grabInt() - 1
+            while {i >= 0} {
+                let attribute = attributes.get(i)
+                if(!map.has(attribute.get("name").grabString())) {
+                    self.element.element.call1("removeAttribute", attribute.get("name"))
+                }
+                i -= 1
+            }
+            map.each {name, value =>
+                let oldValue = self.element.element.call1("getAttribute", name)
+                if(oldValue.isNullOrUndefined() || !oldValue.equals(value)) {
+                    self.element.element.call2("setAttribute", name, value)
+                }
+            }
+    }    
+}
+
+render(browserSystem: BrowserSystem, element: JsValue, body: Lux => Unit) {
+    mutable document = element
+    while {!document.get("parentNode").isNullOrUndefined()} {
+        document = document.get("parentNode")
+    }
+    // [...document.querySelectorAll("[lux-class]")].map(x => x.getAttribute("lux-class")) 
+    let staticCssClasses = StringMap.new()
+    let dummyCssClass = CssClass([], [], [])
+    document.call1("querySelectorAll", "[lux-class]").each {e => 
+        staticCssClasses.set(e.call1("getAttribute", "lux-class").grabString(), dummyCssClass)
+    }
+    let lux = Lux(
+        jsSystem = browserSystem.js()
+        renderLock = browserSystem.mainTask().lock()
+        dry = None
+        cssClasses = staticCssClasses
+        task = browserSystem.mainTask()
+        depth = 0
+        document = LuxDocument(document)
+        element = LuxElement(element, 0, keepChildren = False)
+        keys = None
+        key = ""
+        attributes = None
+        renderQueue = Array.new()
+    )
+    lux.renderLock.do(reentrant = False) {
+        body(lux)
+    }
+}
+
+renderById(browserSystem: BrowserSystem, id: String, body: Lux => Unit) {
+    let element = browserSystem.js().global().get("document").call1("getElementById", id)
+    render(browserSystem, element, body)
+}
+
+renderToString(nodeSystem: NodeSystem, body: Lux => Unit): Pair[String, String] {
+    let children = [].toArray()
+    let lux = Lux(
+        jsSystem = nodeSystem.js()
+        renderLock = nodeSystem.mainTask().lock()
+        dry = Some(children)
+        cssClasses = StringMap.new()
+        task = nodeSystem.mainTask()
+        depth = 0
+        document = LuxDocument(nodeSystem.js().null())
+        element = LuxElement(nodeSystem.js().null(), 0, keepChildren = False)
+        keys = None
+        key = ""
+        attributes = None
+        renderQueue = Array.new()
+    )
+    body(lux)
+    let styleTags = lux.cssClasses.values().map {c => 
+        "<style lux-class=\"" + c.name() + "\">" + c.show() + "</style>"
+    }.join()
+    Pair(children.toList().map {_.toHtml()}.join(), styleTags)
+}