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",
"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": {

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;
#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) {

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

@ -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
}
}
}

5
tests/basic/index.jsx
View File

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