diff --git a/packages/csx/package.json b/packages/csx/package.json index 4c08111..e3efee9 100644 --- a/packages/csx/package.json +++ b/packages/csx/package.json @@ -1,6 +1,6 @@ { "name": "@cerxes/csx", - "version": "0.0.8", + "version": "0.0.10", "author": "Miel Truyen ", "description": "CSX is a minimalistic UI-framework inspired by React+JSX for usage with WebComponents.", "repository": { diff --git a/packages/csx/src/custom-element/custom-element.js b/packages/csx/src/custom-element/custom-element.js index ceb75c0..ca8a936 100644 --- a/packages/csx/src/custom-element/custom-element.js +++ b/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) { diff --git a/packages/csx/src/vdom/render.js b/packages/csx/src/vdom/render.js index 5f42a16..b94b5fa 100644 --- a/packages/csx/src/vdom/render.js +++ b/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); - item.host.removeChild(oldChild.element); + 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,10 +207,19 @@ export function render(vnode, opts = {}) { } else { // New child if (oldChild) { - if (oldChild.meta.renderer.remove) - oldChild.meta.renderer.remove({ ...item, parent: item.host, host: oldChild.element }); - else - item.host.removeChild(oldChild.element); + if(oldChild.element) { + if (oldChild.meta.renderer.remove){ + oldChild.meta.renderer.remove({ + ...item, + parent: item.host, + host: oldChild.element + }); + }else { + item.host.removeChild(oldChild.element); + } + }else{ + // This apparantly happens + } } queuedItems.push(child); } @@ -217,10 +230,15 @@ export function render(vnode, opts = {}) { } while (oldChildren && oldChildren.length) { let oldChild = oldChildren.splice(0, 1)[ 0 ]; - if (oldChild.meta.renderer.remove) - oldChild.meta.renderer.remove({ ...item, parent: item.host, host: oldChild.element }); - else - item.host.removeChild(oldChild.element); + if(oldChild.element) { + if (oldChild.meta.renderer.remove) { + oldChild.meta.renderer.remove({ ...item, parent: item.host, host: oldChild.element }); + } else { + item.host.removeChild(oldChild.element); + } + }else{ + // This apparantly happens + } } } diff --git a/tests/basic/index.jsx b/tests/basic/index.jsx index a6778a5..225c126 100644 --- a/tests/basic/index.jsx +++ b/tests/basic/index.jsx @@ -26,4 +26,7 @@ class PrivTest{ } let a = new PrivTest(); console.log(a); -console.log(a.someVar); \ No newline at end of file +console.log(a.someVar); + +let preRenderedText = render("I can prerender text-nodes"); +document.body.appendChild(render(preRenderedText)); \ No newline at end of file