From 8e163e27ef8e62c3d10eb6346dde2b3f49a70656 Mon Sep 17 00:00:00 2001
From: Timothy Johnson <timothy@idioticdev.com>
Date: Thu, 13 Jun 2019 16:14:58 -0700
Subject: [PATCH] Events for dom properties

---
 .../compile/render_dom/wrappers/Element/Attribute.ts |  8 ++++++--
 src/runtime/internal/dev.ts                          | 12 ++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
index f55e731fdb..354539b657 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
+++ b/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});`
diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts
index 3cafd1dfdd..f06dcfffbc 100644
--- a/src/runtime/internal/dev.ts
+++ b/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;