diff --git a/js.js b/js.js index ac2510c..4fe0fee 100644 --- a/js.js +++ b/js.js @@ -248,6 +248,71 @@ export function h(type, props, ...children) { delete props["else"]; }); + if ("for" in props && "do" in props) { + const predicate = props["for"]; + const closure = props["do"]; + + if (isAJSReferences(predicate)) { + const __elms = []; + let lastpredicate = []; + handle(predicate, val => { + if ( + Object.keys(val).length && + Object.keys(val).length == lastpredicate.length + ) { + let i = 0; + for (const index in val) { + if ( + deepEqual(val[index], lastpredicate[index]) + ) { + continue; + } + const part = closure(val[index], index, val); + elm.replaceChild(part, __elms[i]); + __elms[i] = part; + + i += 1; + } + lastpredicate = Object.keys( + JSON.parse(JSON.stringify(val)), + ); + } else { + for (const part of __elms) { + part.remove(); + } + for (const index in val) { + const value = val[index]; + + const part = closure(value, index, val); + if (part instanceof HTMLElement) { + __elms.push(part); + elm.appendChild(part); + } + } + + lastpredicate = []; + } + }); + } else { + for (const index in predicate) { + const value = predicate[index]; + + const part = closure(value, index, predicate); + if (part instanceof Node) elm.appendChild(part); + + } + } + + delete props["for"]; + delete props["do"]; + } + + + // insert an element at the end + useProp("after", callback => { + JSXAddChild(callback()); + }) + for (const name in props) { const references = props[name]; if (isAJSReferences(references) && name.startsWith("bind:")) { diff --git a/package.json b/package.json index 5a904f9..3a522a0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mercuryworkshop/alicejs", - "version": "2.1.2", + "version": "2.1.3", "description": "A utilitarian HTML rendering library", "scripts": { "build": "esbuild --minify --bundle AliceJS.js --outfile=index.js && esbuild --minify --bundle css.js js.js html.js --outdir=dist/ && tsc",