Mergin better performance branch

js/element/IElement.js

@@ -1,4 +1,4 @@
-// @ts-check
+import { LitElement } from "lit"
 
 /**
  * @typedef {import("../Blueprint").default} Blueprint
@@ -11,15 +11,20 @@
  * @template {IEntity} T
  * @template {ITemplate} U
  */
-export default class IElement extends HTMLElement {
+export default class IElement extends LitElement {
+
+    static properties = {
+    }
+
+    #nextUpdatedCallbacks = []
 
     /** @type {Blueprint} */
     #blueprint
     get blueprint() {
         return this.#blueprint
     }
-    set blueprint(blueprint) {
-        this.#blueprint = blueprint
+    set blueprint(v) {
+        return this.#blueprint = v
     }
 
     /** @type {T} */
@@ -36,9 +41,6 @@ export default class IElement extends HTMLElement {
     get template() {
         return this.#template
     }
-    set template(template) {
-        this.#template = template
-    }
 
     /** @type {IInput[]} */
     inputObjects = []
@@ -52,40 +54,79 @@ export default class IElement extends HTMLElement {
         this.#entity = entity
         this.#template = template
         this.inputObjects = []
+        this.#template.constructed(this)
     }
 
-    getTemplate() {
-        return this.template
+    createRenderRoot() {
+        return this
     }
 
     connectedCallback() {
-        this.#blueprint = this.closest("ueb-blueprint")
-        this.template.setup(this)
+        super.connectedCallback()
+        this.blueprint = this.closest("ueb-blueprint")
+        this.template.connectedCallback(this)
+    }
+
+    /**
+     * @param {Map} changedProperties
+     */
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties)
+        this.template.willUpdate(this, changedProperties)
+    }
+
+    /**
+     * @param {Map} changedProperties
+     */
+    update(changedProperties) {
+        super.update(changedProperties)
+        this.template.update(this, changedProperties)
+    }
+
+    render() {
+        return this.template.render(this)
+    }
+
+    /**
+     * @param {Map} changedProperties
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties)
+        this.template.firstUpdated(this, changedProperties)
         this.template.inputSetup(this)
     }
 
+    updated(changedProperties) {
+        super.updated(changedProperties)
+        this.template.updated(this, changedProperties)
+        this.#nextUpdatedCallbacks.forEach(f => f(changedProperties))
+        this.#nextUpdatedCallbacks = []
+    }
+
     disconnectedCallback() {
+        super.disconnectedCallback()
         this.template.cleanup(this)
     }
 
+    addNextUpdatedCallbacks(callback, requestUpdate = false) {
+        this.#nextUpdatedCallbacks.push(callback)
+        if (requestUpdate) {
+            this.requestUpdate()
+        }
+    }
+
     /**
      * @param {IElement} element
      */
     isSameGraph(element) {
-        return this.#blueprint && this.#blueprint == element?.blueprint
+        return this.blueprint && this.blueprint == element?.blueprint
     }
 
     /**
      * @template {IInput} V
      * @param {new (...args: any[]) => V} type
-     * @returns {V}
      */
     getInputObject(type) {
         return /** @type {V} */ (this.template.inputObjects.find(object => object.constructor == type))
     }
-
-    // Subclasses will want to override
-    createInputObjects() {
-        return []
-    }
 }