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;