diff --git a/index.js b/index.js index d805ebe..77e4566 100644 --- a/index.js +++ b/index.js @@ -244,10 +244,25 @@ class ObservedObject { } window.Page = class Page { - appendChild(el) { - document.body.appendChild(el) + constructor() { + return new Proxy(this, { + get(target, prop) { + if (prop in target) { + return target[prop]; + } + + if (prop in document.body) { + if (typeof document.body[prop] === 'function') { + return document.body[prop].bind(document.body); + } + return document.body[prop]; + } + + return undefined; + } + }); } -} +}; window.Shadow = class Shadow extends HTMLElement { constructor() { @@ -635,6 +650,30 @@ window.p = function p(innerText) { return para } +window.h1 = function h1(innerText) { + let header = document.createElement("h1") + header.innerText = innerText + Registry.initReactivity(header, "innerText", innerText) + Registry.render(header) + return header +} + +window.h2 = function h2(innerText) { + let header = document.createElement("h2") + header.innerText = innerText + Registry.initReactivity(header, "innerText", innerText) + Registry.render(header) + return header +} + +window.h3 = function h3(innerText) { + let header = document.createElement("h3") + header.innerText = innerText + Registry.initReactivity(header, "innerText", innerText) + Registry.render(header) + return header +} + window.div = function (innerText) { let div = document.createElement("div") div.innerText = innerText ?? "" @@ -702,9 +741,15 @@ window.HStack = function (cb = () => {}) { window.ZStack = function (cb = () => {}) { let nowRendering = window.rendering.last() - if(nowRendering.innerHTML === "") { + if(nowRendering.innerHTML.trim() === "") { // Parent is Empty, make it a ZStack cb() return nowRendering + } else { + let div = document.createElement("div") + div.classList.add("ZStack") + div.render = cb + Registry.render(div) + return div } } @@ -852,6 +897,8 @@ function checkStyle(el) { } HTMLElement.prototype.x = function(value, unit = "px") { + if (typeof value !== 'number' || isNaN(value)) + throw new Error(`Invalid value: ${value}. Expected a number.`); checkStyle(this) this.style.left = value + unit Registry.initReactivity(this, ["style", "left"], value); @@ -859,6 +906,8 @@ HTMLElement.prototype.x = function(value, unit = "px") { } HTMLElement.prototype.y = function(value, unit = "px") { + if (typeof value !== 'number' || isNaN(value)) + throw new Error(`Invalid value: ${value}. Expected a number.`); checkStyle(this) this.style.top = value + unit Registry.initReactivity(this, ["style", "top"], value); @@ -866,6 +915,8 @@ HTMLElement.prototype.y = function(value, unit = "px") { } HTMLElement.prototype.xRight = function(value, unit = "px") { + if (typeof value !== 'number' || isNaN(value)) + throw new Error(`Invalid value: ${value}. Expected a number.`); checkStyle(this) this.style.right = value + unit Registry.initReactivity(this, ["style", "right"], value); @@ -873,6 +924,8 @@ HTMLElement.prototype.xRight = function(value, unit = "px") { } HTMLElement.prototype.yBottom = function(value, unit = "px") { + if (typeof value !== 'number' || isNaN(value)) + throw new Error(`Invalid value: ${value}. Expected a number.`); checkStyle(this) this.style.bottom = value + unit Registry.initReactivity(this, ["style", "bottom"], value);