diff --git a/src/plugins/events/onprops.js b/src/plugins/events/onprops.js index 9a5be0ac..9a184247 100644 --- a/src/plugins/events/onprops.js +++ b/src/plugins/events/onprops.js @@ -81,12 +81,12 @@ const hooks = { // Implement onEventName attributes/properties let change = event.detail; - if (change.oldInternalValue) { - this.removeEventListener(eventName, change.oldInternalValue); + if (change.oldValue) { + this.removeEventListener(eventName, change.oldValue); } - if (change.parsedValue) { - this.addEventListener(eventName, change.parsedValue); + if (change.value) { + this.addEventListener(eventName, change.value); } } }); diff --git a/src/plugins/events/propchange.js b/src/plugins/events/propchange.js index 36dbf509..ee37f60a 100644 --- a/src/plugins/events/propchange.js +++ b/src/plugins/events/propchange.js @@ -6,6 +6,7 @@ import { symbols } from "xtensible"; import base, { events } from "./base.js"; import { props } from "../props/index.js"; +import PropChangeEvent from "../props/util/PropChangeEvent.js"; const { propchange } = symbols.new; @@ -45,12 +46,13 @@ const hooks = { let propName = this.constructor[propchange][eventName]; let value = this[propName]; - if (value !== undefined) { - this.constructor[props].firePropChangeEvent(this, eventName, { - name: propName, - prop: this.constructor[props].get(propName), - }); + if (value === undefined) { + continue; } + + let prop = this.constructor[props].get(propName); + let detail = { source: "initial", value }; + this.dispatchEvent(new PropChangeEvent(eventName, { name: propName, prop, detail })); } }, }; diff --git a/src/plugins/props/util/Prop.js b/src/plugins/props/util/Prop.js index cdd0d7c2..a2a17565 100644 --- a/src/plugins/props/util/Prop.js +++ b/src/plugins/props/util/Prop.js @@ -183,10 +183,9 @@ let Self = class Prop { return value; } - set (element, value, { source, name, oldValue } = {}) { - let oldInternalValue = element.props[this.name]; + set (element, value, { source, name, oldAttributeValue } = {}) { + let oldValue = element.props[this.name]; - let attributeName = name; let parsedValue; try { @@ -205,7 +204,7 @@ let Self = class Prop { parsedValue = this.spec.convert.call(element, parsedValue); } - if (this.equals(parsedValue, oldInternalValue)) { + if (this.equals(parsedValue, oldValue)) { return; } @@ -214,10 +213,8 @@ let Self = class Prop { let change = { element, source, - value, - parsedValue, - oldInternalValue, - attributeName: name, + value: parsedValue, + oldValue, }; if (source === "property") { @@ -240,9 +237,9 @@ let Self = class Prop { } else if (source === "attribute") { Object.assign(change, { - attributeName, + attributeName: name, attributeValue: value, - oldAttributeValue: oldValue, + oldAttributeValue, }); } @@ -254,7 +251,9 @@ let Self = class Prop { if (element.setAttribute) { let attributeName = change.attributeName ?? this.toAttribute; let attributeValue = - change.attributeValue ?? change.element.getAttribute(attributeName); + change.attributeValue !== undefined + ? change.attributeValue + : change.element.getAttribute(attributeName); if (attributeValue === null) { element.removeAttribute(attributeName); diff --git a/src/plugins/props/util/Props.js b/src/plugins/props/util/Props.js index 62f7d884..b58db1c0 100644 --- a/src/plugins/props/util/Props.js +++ b/src/plugins/props/util/Props.js @@ -133,7 +133,11 @@ export default class Props extends Map { let propsFromAttribute = [...this.values()].filter(spec => spec.fromAttribute === name); for (let prop of propsFromAttribute) { - prop.set(element, element.getAttribute(name), { source: "attribute", name, oldValue }); + prop.set(element, element.getAttribute(name), { + source: "attribute", + name, + oldAttributeValue: oldValue, + }); } } diff --git a/test/plugins/props/propchange.js b/test/plugins/props/propchange.js index 810ace34..bdcb7da7 100644 --- a/test/plugins/props/propchange.js +++ b/test/plugins/props/propchange.js @@ -145,8 +145,7 @@ export default { run () { let { element } = this.data; let log = []; - element.addEventListener("propchange", e => - log.push([e.name, e.detail.parsedValue])); + element.addEventListener("propchange", e => log.push([e.name, e.detail.value])); element.v = "foo"; element.v = "bar";