diff --git a/AliceJS.d.ts b/AliceJS.d.ts index aa0f0d2..2652b9d 100644 --- a/AliceJS.d.ts +++ b/AliceJS.d.ts @@ -34,4 +34,5 @@ type DLComponent = { css: DLCSS, root: Element, children: Element[], + mount?: () => void, } & T; diff --git a/html.js b/html.js index e1e6d7c..98f7333 100644 --- a/html.js +++ b/html.js @@ -1,4 +1,4 @@ - +Object.assign(window, { html }); export function html(strings, ...values) { let flattened = ""; let markers = {}; diff --git a/js.js b/js.js index ac44254..ac2510c 100644 --- a/js.js +++ b/js.js @@ -30,7 +30,7 @@ Object.defineProperty(window, "use", { }; } }); -Object.assign(window, { h, stateful, handle, useValue }); +Object.assign(window, { isAJSReferences, h, stateful, handle, useValue }); // This wraps the target in a proxy, doing 2 things: // - whenever a property is accessed, update the reference stack @@ -177,6 +177,8 @@ export function h(type, props, ...children) { elm.classList.add(newthis.css); elm.classList.add("self"); } + if (typeof newthis.mount === "function") + newthis.mount(); return elm; } @@ -196,11 +198,6 @@ export function h(type, props, ...children) { delete props[name]; } - // insert an element at the start - useProp("before", callback => { - JSXAddChild(callback()); - }) - // if/then/else syntax useProp("if", condition => { let thenblock = props["then"]; @@ -251,71 +248,6 @@ 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:")) { @@ -436,22 +368,6 @@ function JSXAddAttributes(elm, name, prop) { return; } - if (typeof prop === "function" && name.startsWith("observe")) { - const observerclass = window[`${name.substring(8)}Observer`]; - if (!observerclass) { - console.error(`Observer ${name} does not exist`); - return; - } - const observer = new observerclass(entries => { - for (const entry of entries) { - window.$el = elm; - prop(entry); - } - }); - observer.observe(elm); - return; - } - elm.setAttribute(name, prop); } diff --git a/package.json b/package.json index a65f762..5a904f9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mercuryworkshop/alicejs", - "version": "2.1.1", + "version": "2.1.2", "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",