cerxes/csx
3
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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)

Browse Source
This commit is contained in:
Miel Truyen 2020-03-29 19:37:54 +02:00
parent de0dd21b8d
commit 05f0e66a42
4 changed files with 42 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/csx/package.json
View File

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

8
packages/csx/src/custom-element/custom-element.js
View File

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

42
packages/csx/src/vdom/render.js
View File

@ -8,7 +8,7 @@ import {
export function getNodeMeta(vnode) { export function getNodeMeta(vnode) {
if (vnode === undefined || vnode === null) return undefined; // Indicate it shouldn't render 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; let type = vnode?.type;
if (!type) return { renderer: PrimitiveRenderer, normedType: Primitive }; if (!type) return { renderer: PrimitiveRenderer, normedType: Primitive };
else if (type === Host) return { renderer: HostNodeRenderer, normedType: Host }; else if (type === Host) return { renderer: HostNodeRenderer, normedType: Host };
@ -84,7 +84,7 @@ export function render(vnode, opts = {}) {
renderer.update(item, meta); renderer.update(item, meta);
// Update children // 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(); 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) // 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); let indexOfKeyed = oldChildren.indexOf(oldChild);
if (indexOfKeyed) { if (indexOfKeyed) {
oldChildren.splice(indexOfKeyed, 1); oldChildren.splice(indexOfKeyed, 1);
item.host.removeChild(oldChild.element); if(oldChild.element) {
item.host.removeChild(oldChild.element);
}else{
// This apparantly happens
}
} }
if (previous) { if (previous) {
previous.item.host.after(oldChild.element); previous.item.host.after(oldChild.element);
@ -195,7 +199,7 @@ export function render(vnode, opts = {}) {
child.previous = previous; child.previous = previous;
if (oldChild && child.meta.normedType === oldChild.meta.normedType && childKey === oldChild.vnode.props?.key 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 // Update old-child
child.item.host = oldChild.element; child.item.host = oldChild.element;
child.item.old = oldChild.vnode; child.item.old = oldChild.vnode;
@ -203,10 +207,19 @@ export function render(vnode, opts = {}) {
} else { } else {
// New child // New child
if (oldChild) { 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.host.removeChild(oldChild.element); ...item,
parent: item.host,
host: oldChild.element
});
}else {
item.host.removeChild(oldChild.element);
}
}else{
// This apparantly happens
}
} }
queuedItems.push(child); queuedItems.push(child);
} }
@ -217,10 +230,15 @@ export function render(vnode, opts = {}) {
} }
while (oldChildren && oldChildren.length) { while (oldChildren && oldChildren.length) {
let oldChild = oldChildren.splice(0, 1)[ 0 ]; let oldChild = oldChildren.splice(0, 1)[ 0 ];
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 });
item.host.removeChild(oldChild.element); } else {
item.host.removeChild(oldChild.element);
}
}else{
// This apparantly happens
}
} }
} }

3
tests/basic/index.jsx
View File

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