Polish propchange event detail names

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);
 				}
 			}
 		});

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 }));
 		}
 	},
 };

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);

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,
+			});
 		}
 	}
 

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";