mercuryworkshop-mirror/dreamlandjs
1
0
Fork 0
mirror of https://github.com/MercuryWorkshop/dreamlandjs.git synced 2025-05-16 23:50:00 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

slot components

Browse source
This commit is contained in:
CoolElectronics 2024-01-19 18:20:03 -05:00
parent b442c8887a
commit a2bb9eeec1
No known key found for this signature in database
GPG key ID: F63593D168636C50
1 changed files with 39 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

73
AliceJS.js
View file

@ -30,7 +30,7 @@ Object.defineProperty(window, "use", {
}; };
} }
}); });
Object.assign(window, { stateful, handle, useValue, css, styled: { new: css } }); Object.assign(window, { h, stateful, handle, useValue, css, styled: { new: css } });
// This wraps the target in a proxy, doing 2 things: // This wraps the target in a proxy, doing 2 things:
// - whenever a property is accessed, update the reference stack // - whenever a property is accessed, update the reference stack
@ -129,6 +129,37 @@ export function useValue(references) {
// Actual JSX factory. Responsible for creating the HTML elements and all of the *reactive* syntactic sugar // Actual JSX factory. Responsible for creating the HTML elements and all of the *reactive* syntactic sugar
export function h(type, props, ...children) { export function h(type, props, ...children) {
function addChild(child, cb) {
if (isAJSReferences(child)) {
let appended = [];
handle(child, (val) => {
if (appended.length > 1) {
// this is why we don't encourage arrays (jank)
appended.forEach(n => n.remove());
appended = addChild(val, cb);
} else if (appended.length > 0) {
appended[0].replaceWith((appended = addChild(val, cb))[0]);
} else {
appended = addChild(val, cb);
}
});
} else if (child instanceof Node) {
cb(child);
return [child];
} else if (child instanceof Array) {
let elms = [];
for (const childchild of child) {
elms = elms.concat(addChild(childchild, cb));
}
return elms;
} else {
let node = document.createTextNode(child);
cb(node);
return [node];
}
}
if (typeof type === "function") { if (typeof type === "function") {
let newthis = stateful({}); let newthis = stateful({});
@ -163,46 +194,20 @@ export function h(type, props, ...children) {
delete props[name]; delete props[name];
} }
} }
let slot = [];
for (const child of children) {
console.log("??");
addChild(child, slot.push.bind(slot));
}
return type.apply(newthis, [props]); return type.apply(newthis, [props, slot]);
} }
const elm = document.createElement(type); const elm = document.createElement(type);
function addChild(child) {
if (isAJSReferences(child)) {
let appended = [];
handle(child, (val) => {
if (appended.length > 1) {
// this is why we don't encourage arrays (jank)
appended.forEach(n => n.remove());
appended = addChild(val);
} else if (appended.length > 0) {
appended[0].replaceWith((appended = addChild(val))[0]);
} else {
appended = addChild(val);
}
});
} else if (child instanceof Node) {
elm.appendChild(child);
return [child];
} else if (child instanceof Array) {
let elms = [];
for (const childchild of child) {
elms = elms.concat(addChild(childchild));
}
return elms;
} else {
let node = document.createTextNode(child);
elm.appendChild(node);
return [node];
}
}
for (const child of children) { for (const child of children) {
addChild(child); addChild(child, elm.appendChild.bind(elm));
} }
if (!props) return elm; if (!props) return elm;