Events for dom properties

src/compiler/compile/render_dom/wrappers/Element/Attribute.ts

@@ -149,12 +149,16 @@ export default class AttributeWrapper {
 				block.builders.hydrate.add_line(
 					`${element.var}.${property_name} = ${init};`
 				);
-				updater = `${element.var}.${property_name} = ${should_cache ? last : value};`;
+				updater = block.renderer.options.dev
+					? `@prop_dev(${element.var}, "${property_name}", ${should_cache ? last : value});`
+					: `${element.var}.${property_name} = ${should_cache ? last : value};`;
 			} else if (is_dataset) {
 				block.builders.hydrate.add_line(
 					`${element.var}.dataset.${camel_case_name} = ${init};`
 				);
-				updater = `${element.var}.dataset.${camel_case_name} = ${should_cache ? last : value};`;
+				updater = block.renderer.options.dev
+					? `@dataset_dev(${element.var}, "${camel_case_name}", ${should_cache ? last : value});`
+					: `${element.var}.dataset.${camel_case_name} = ${should_cache ? last : value};`;
 			} else {
 				block.builders.hydrate.add_line(
 					`${method}(${element.var}, "${name}", ${init});`

src/runtime/internal/dev.ts

@@ -59,6 +59,18 @@ export function attr_dev(node: Element, attribute: string, value?: string) {
 	else dispatch_dev("SvelteDOMSetAttribute", { node, attribute, value });
 }
 
+export function prop_dev(node: Element, property: string, value?: any) {
+	node[property] = value;
+
+	dispatch_dev("SvelteDOMSetProperty", { node, property, value });
+}
+
+export function dataset_dev(node: HTMLElement, property: string, value?: any) {
+	node.dataset[property] = value;
+
+	dispatch_dev("SvelteDOMSetDataset", { node, property, value });
+}
+
 export function set_data_dev(text, data) {
 	data = '' + data;
 	if (text.data === data) return;