74 lines
2.2 KiB
JavaScript
74 lines
2.2 KiB
JavaScript
(function () {
|
|
const RegistryApp = (window.RegistryApp = window.RegistryApp || {});
|
|
|
|
function h(tag, props = {}, ...children) {
|
|
const el = document.createElement(tag);
|
|
|
|
if (props) {
|
|
Object.entries(props).forEach(([key, value]) => {
|
|
if (key.startsWith("on") && typeof value === "function") {
|
|
el.addEventListener(key.substring(2).toLowerCase(), value);
|
|
} else if (key === "className") {
|
|
el.className = value;
|
|
} else if (key === "style" && typeof value === "object") {
|
|
Object.assign(el.style, value);
|
|
} else if (typeof value === "boolean") {
|
|
if (value) {
|
|
el.setAttribute(key, "");
|
|
} else {
|
|
el.removeAttribute(key);
|
|
}
|
|
} else if (value === null || value === undefined) {
|
|
el.removeAttribute(key);
|
|
} else {
|
|
el.setAttribute(key, value);
|
|
}
|
|
});
|
|
}
|
|
|
|
children.forEach((child) => {
|
|
if (typeof child === "string" || typeof child === "number") {
|
|
el.appendChild(document.createTextNode(child));
|
|
} else if (child instanceof Node) {
|
|
el.appendChild(child);
|
|
} else if (Array.isArray(child)) {
|
|
child.forEach((c) => el.appendChild(c));
|
|
}
|
|
});
|
|
|
|
return el;
|
|
}
|
|
|
|
let rootContainer = null;
|
|
let rootComponent = null;
|
|
|
|
function render(component, container) {
|
|
rootContainer = container;
|
|
rootComponent = component;
|
|
rerender();
|
|
}
|
|
|
|
function rerender() {
|
|
rootContainer.innerHTML = "";
|
|
rootContainer.appendChild(rootComponent());
|
|
}
|
|
|
|
function createSignal(initialValue) {
|
|
let value = initialValue;
|
|
|
|
const getValue = () => value;
|
|
const setValue = (newValue) => {
|
|
value = typeof newValue === "function" ? newValue(value) : newValue;
|
|
rerender();
|
|
};
|
|
|
|
return [getValue, setValue];
|
|
}
|
|
|
|
RegistryApp.runtime = {
|
|
h,
|
|
render,
|
|
createSignal,
|
|
};
|
|
})();
|