diff --git a/README.md b/README.md index a588646..1b56bb4 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,7 @@ document.body.append( ## Needs Support: Ternaries within render() Other statements within render() +Multiple-argument attributes in render() ## Limitations: While rendering is underway, an element's state can only be accessed from within that element diff --git a/Test/state.test.js b/Test/state.test.js index 1833855..5717240 100644 --- a/Test/state.test.js +++ b/Test/state.test.js @@ -98,5 +98,29 @@ window.testSuites.push( class testState { return "fail" } } + + StateWorksWithCustomStyleFunctions() { + // reactive setting needs to use the actual style functions + + register(class File extends Shadow { + $paraWidth = 16 + + render = () => { + p("guppy") + .width(this.paraWidth) + } + + constructor() { + super() + } + }, randomName("file")) + + const file = File() + file.paraWidth = 18 + + if(file.firstChild.style.width !== "18px") { + return "Width did not reactively change!" + } + } }) \ No newline at end of file diff --git a/index.js b/index.js index 2bf3e57..6916b7a 100644 --- a/index.js +++ b/index.js @@ -139,59 +139,9 @@ function getSafariVersion() { } /* REGISTER */ -class ObservedArray extends Array { - parent; - name; - - constructor(arr = [], parent, name) { - super(); - this.parent = parent - this.name = name - this.push(...arr); - } - - triggerParent() { - this.parent[this.name] = this - } - - push(...args) { - const result = super.push(...args); - this.triggerParent() - return result; - } - - pop() { - const result = super.pop(); - this.triggerParent() - return result; - } - - shift() { - const result = super.shift(); - this.triggerParent() - return result; - } - - unshift(...args) { - const result = super.unshift(...args); - this.triggerParent() - return result; - } - - splice(start, deleteCount, ...items) { - const removedItems = super.splice(start, deleteCount, ...items); - if (items.length > 0) { - console.log(`Inserted ${items.length} items:`, items); - } - if (removedItems.length > 0) { - console.log(`Removed ${removedItems.length} items:`, removedItems); - } - this.triggerParent() - return removedItems; - } -} class ObservedObject { + constructor() { this._observers = {} } @@ -208,7 +158,7 @@ class ObservedObject { Object.defineProperty(instance, key, { set: function(newValue) { if(Array.isArray(newValue) && newValue.parent === undefined) { - instance[backingFieldName] = new ObservedArray(newValue, this, key) + instance[backingFieldName] = new ObservedObject.ObservedArray(newValue, this, key) } else { instance[backingFieldName] = newValue; } @@ -250,6 +200,58 @@ class ObservedObject { return instance } + + static ObservedArray = class ObservedArray extends Array { + parent; + name; + + constructor(arr = [], parent, name) { + super(); + this.parent = parent + this.name = name + this.push(...arr); + } + + triggerParent() { + this.parent[this.name] = this + } + + push(...args) { + const result = super.push(...args); + this.triggerParent() + return result; + } + + pop() { + const result = super.pop(); + this.triggerParent() + return result; + } + + shift() { + const result = super.shift(); + this.triggerParent() + return result; + } + + unshift(...args) { + const result = super.unshift(...args); + this.triggerParent() + return result; + } + + splice(start, deleteCount, ...items) { + const removedItems = super.splice(start, deleteCount, ...items); + if (items.length > 0) { + console.log(`Inserted ${items.length} items:`, items); + } + if (removedItems.length > 0) { + console.log(`Removed ${removedItems.length} items:`, removedItems); + } + this.triggerParent() + return removedItems; + } + } } window.Page = class Page { @@ -421,7 +423,7 @@ window.Registry = class Registry { foundReactives.push([identifier, expression, operators]) } else { - console.log("Variable or other usage at position:", statePos); + // console.log("Variable or other usage at position:", statePos); } if (observedObjectNames.includes(identifier)) {