diff --git a/Test/init.test.js b/Test/init.test.js index 8ab71a5..f0a7dac 100644 --- a/Test/init.test.js +++ b/Test/init.test.js @@ -171,6 +171,25 @@ window.testSuites.push( class testInit { } } + CannotAddUndefinedPropertiesAfterDefaultConstructor() { + register(class File extends Shadow { + + render = () => { + p("boi") + } + }, randomName("file")) + + try { + const file = File() + file.hey = "unallowed" + return "Did not throw error!" + } catch(e) { + if(!e.message.includes("extensible")) { + throw e + } + } + } + NonStateFieldsGetSet() { register(class File extends Shadow { nonStateField diff --git a/Test/observedobject.test.js b/Test/observedobject.test.js index 43f9c5e..029efb6 100644 --- a/Test/observedobject.test.js +++ b/Test/observedobject.test.js @@ -26,6 +26,14 @@ window.testSuites.push( class testObservedObject { } } + ConstructorWorks() { + return "not done" + } + + NotExtensible() { + return "not done" + } + // MustInitAllFields() { // class Form extends ObservedObject { // id diff --git a/Test/test.html b/Test/test.html index 25b30c6..5ff821c 100644 --- a/Test/test.html +++ b/Test/test.html @@ -14,7 +14,7 @@ } - + diff --git a/Test/test.js b/Test/test.js index c3c95ce..5e6d7bd 100644 --- a/Test/test.js +++ b/Test/test.js @@ -3,8 +3,8 @@ window.testSuites = []; await import ("./parse.test.js") await import ("./init.test.js") -await import ("./observedobject.test.js") await import ("./render.test.js") +await import ("./observedobject.test.js") window.randomName = function randomName(prefix) { const sanitizedPrefix = prefix.toLowerCase().replace(/[^a-z0-9]/g, ''); diff --git a/index.js b/index.js index 4c3ba62..73ab7ad 100644 --- a/index.js +++ b/index.js @@ -550,7 +550,7 @@ window.Registry = class Registry { if (constructorFound && trimmedLine.startsWith('super(') && !superCallFound) { superCallFound = true; - modifiedLines.push(` window.Registry.construct(this, window.Registry.currentStateVariables, ...window.Registry.currentParams);`); + modifiedLines.push(` window.Registry.construct(this);`); } if (constructorFound && braceDepth === 1 && superCallFound && !constructorEndFound) { @@ -574,11 +574,13 @@ window.Registry = class Registry { constructor(...params) { super(...params) window.Registry.construct(this) + Object.preventExtensions(this); + window.Registry.testInitialized(this); } ` let closingBracket = str.lastIndexOf("}"); str = str.slice(0, closingBracket - 1) + constructorString + "\n}" - return eval('(' + str + ')'); + return eval('(' + str + `) //# sourceURL=${classObject.prototype.constructor.name}.shadow`); } } } @@ -619,7 +621,7 @@ window.p = function p(innerText) { window.div = function (innerText) { let div = document.createElement("div") - div.innerText = innerText + div.innerText = innerText ?? "" Registry.render(div) return div } @@ -646,6 +648,19 @@ window.VStack = function (cb = () => {}) { } } +window.HStack = function (cb = () => {}) { + let nowRendering = window.rendering.last() + if(nowRendering.innerHTML === "") { + let styles = ` + display: flex; + flex-direction: row; + ` + quillStyles.update(nowRendering.tagName.toLowerCase(), styles) + cb() + return nowRendering + } +} + /* SHAPES */ window.Circle = function(text = "") { @@ -746,6 +761,41 @@ HTMLElement.prototype.height = function(value, unit = "px") { return this } +function checkStyle(el) { + let computed = window.getComputedStyle(el).position + if(!(computed === "absolute" || computed === "fixed")) { + el.style.position = "absolute" + } +} + +HTMLElement.prototype.x = function(value, unit = "px") { + checkStyle(this) + this.style.left = value + unit + Registry.initReactivity(this, ["style", "left"], value); + return this +} + +HTMLElement.prototype.y = function(value, unit = "px") { + checkStyle(this) + this.style.top = value + unit + Registry.initReactivity(this, ["style", "top"], value); + return this +} + +HTMLElement.prototype.xRight = function(value, unit = "px") { + checkStyle(this) + this.style.right = value + unit + Registry.initReactivity(this, ["style", "right"], value); + return this +} + +HTMLElement.prototype.yBottom = function(value, unit = "px") { + checkStyle(this) + this.style.bottom = value + unit + Registry.initReactivity(this, ["style", "bottom"], value); + return this +} + HTMLElement.prototype.margin = function(direction, value) { const directionName = `margin${direction.charAt(0).toUpperCase()}${direction.slice(1)}`; if (typeof value === 'number') { @@ -767,22 +817,6 @@ HTMLElement.prototype.positionType = function (value) { return this } -HTMLElement.prototype.position = function({x, y} = {}) { - if(!(typeof x === 'number') || !(typeof x === 'number')) { - console.error("HTMLElement.position: must have valid x and y values: {x: 12, y: 23} where x and y are percentages") - return; - } - let computed = window.getComputedStyle(this).position - if(!(computed === "absolute" || computed === "fixed")) { - this.style.position = "absolute" - } - this.style.left = `${x}%` - this.style.top = `${y}%` - Registry.initReactivity(this, ["style", "top"], y); - Registry.initReactivity(this, ["style", "left"], x); - return this -} - /* PROTOTYPE EVENTS */ HTMLElement.prototype.onClick = function(func) {