v0.0.10: Attempt to fix a bug, and added callback in customElement to trigger code after-render (renderCallback, in analogy with CustomElement's callbacks)

packages/csx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerxes/csx",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "author": "Miel Truyen <miel.truyen@cerxes.net>",
   "description": "CSX is a minimalistic UI-framework inspired by React+JSX for usage with WebComponents.",
   "repository": {

packages/csx/src/custom-element/custom-element.js

@@ -18,9 +18,15 @@ export class CustomElement extends HTMLElement {
     
     }
     
+    // Custom overridable callback
+    renderedCallback(vnode){
+    
+    }
+    
     #markedDirty;
     #renderedVNode;
     update(){
+        this.#markedDirty=false;
         if (this.render) {
             let newVNode = this.render();
             if(newVNode.type !== Host){
@@ -31,8 +37,8 @@ export class CustomElement extends HTMLElement {
                 old: this.#renderedVNode,
             });
             this.#renderedVNode = newVNode;
+            this.renderedCallback?.(newVNode);
         }
-        this.#markedDirty=false;
     }
     markDirty() {
         if (!this.#markedDirty) {

packages/csx/src/vdom/render.js

@@ -8,7 +8,7 @@ import {
 
 export function getNodeMeta(vnode) {
     if (vnode === undefined || vnode === null) return undefined; // Indicate it shouldn't render
-    if (vnode instanceof Element) return { renderer: NativeRenderer, normedType: Element };
+    if (vnode instanceof Node) return { renderer: NativeRenderer, normedType: Node };
     let type = vnode?.type;
     if (!type) return { renderer: PrimitiveRenderer, normedType: Primitive };
     else if (type === Host) return { renderer: HostNodeRenderer, normedType: Host };
@@ -84,7 +84,7 @@ export function render(vnode, opts = {}) {
         renderer.update(item, meta);
         
         // Update children
-        if (meta.normedType !== Element && (item.vnode?.children || item.old?.children)) {
+        if (meta.normedType !== Node && (item.vnode?.children || item.old?.children)) {
             let childTypes = new Set();
             
             // Flatten and organize new vNode-children (this could be a separate function, or implemented using a helper function (because mucht of the code is similar between old/new vnodes)
@@ -181,7 +181,11 @@ export function render(vnode, opts = {}) {
                                 let indexOfKeyed = oldChildren.indexOf(oldChild);
                                 if (indexOfKeyed) {
                                     oldChildren.splice(indexOfKeyed, 1);
+                                    if(oldChild.element) {
                                         item.host.removeChild(oldChild.element);
+                                    }else{
+                                        // This apparantly happens
+                                    }
                                 }
                                 if (previous) {
                                     previous.item.host.after(oldChild.element);
@@ -195,7 +199,7 @@ export function render(vnode, opts = {}) {
                     
                     child.previous = previous;
                     if (oldChild && child.meta.normedType === oldChild.meta.normedType && childKey === oldChild.vnode.props?.key
-                        && (child.meta.normedType !== Element || child.item.vnode === oldChild.vnode)) {
+                        && (child.meta.normedType !== Node || child.item.vnode === oldChild.vnode)) {
                         // Update old-child
                         child.item.host = oldChild.element;
                         child.item.old = oldChild.vnode;
@@ -203,11 +207,20 @@ export function render(vnode, opts = {}) {
                     } else {
                         // New child
                         if (oldChild) {
-                            if (oldChild.meta.renderer.remove)
+                            if(oldChild.element) {
-                                oldChild.meta.renderer.remove({ ...item, parent: item.host, host: oldChild.element });
+                                if (oldChild.meta.renderer.remove){
-                            else
+                                    oldChild.meta.renderer.remove({
+                                        ...item,
+                                        parent: item.host,
+                                        host: oldChild.element
+                                    });
+                                }else {
                                     item.host.removeChild(oldChild.element);
                                 }
+                            }else{
+                                // This apparantly happens
+                            }
+                        }
                         queuedItems.push(child);
                     }
                     if (!child.meta.renderer.remove) {
@@ -217,11 +230,16 @@ export function render(vnode, opts = {}) {
                 }
                 while (oldChildren && oldChildren.length) {
                     let oldChild = oldChildren.splice(0, 1)[ 0 ];
-                    if (oldChild.meta.renderer.remove)
+                    if(oldChild.element) {
+                        if (oldChild.meta.renderer.remove) {
                             oldChild.meta.renderer.remove({ ...item, parent: item.host, host: oldChild.element });
-                    else
+                        } else {
                             item.host.removeChild(oldChild.element);
                         }
+                    }else{
+                        // This apparantly happens
+                    }
+                }
             }
             
             state.queue.splice(0, 0, ...queuedItems);

tests/basic/index.jsx

@@ -27,3 +27,6 @@ class PrivTest{
 let a = new PrivTest();
 console.log(a);
 console.log(a.someVar);
+
+let preRenderedText = render("I can prerender text-nodes");
+document.body.appendChild(render(preRenderedText));