HMR Hooks (Discussion)

src/compiler/compile/render_dom/index.ts

@@ -94,7 +94,7 @@ export default function dom(
 	const body = [];
 
 	const not_equal = component.component_options.immutable ? `@not_equal` : `@safe_not_equal`;
-	let dev_props_check;
+	let dev_props_check; let inject_state; let capture_state;
 
 	props.forEach(x => {
 		const variable = component.var_lookup.get(x.name);
@@ -151,6 +151,29 @@ export default function dom(
 				}`)}
 			`;
 		}
+
+		capture_state = (uses_props || writable_props.length > 0) ? deindent`
+			() => {
+				return { ${component.vars.filter(prop => prop.writable).map(prop => prop.name).join(", ")} };
+			}
+		` : deindent`
+			() => {
+				return {}
+			}
+		`;
+
+		inject_state = (uses_props || writable_props.length > 0) ? deindent`
+			${$$props} => {
+				${uses_props && component.invalidate('$$props', `$$props = @assign(@assign({}, $$props), $$new_props)`)}
+				${component.vars.filter(prop => prop.writable).map(prop => deindent`
+					if ('${prop.name}' in $$props) ${component.invalidate(prop.name, `${prop.name} = ${$$props}.${prop.name}`)};
+				`)}
+			}
+		` : deindent`
+			${$$props} => {
+				return
+			}
+		`;
 	}
 
 	// instrument assignments
@@ -430,6 +453,10 @@ export default function dom(
 
 				${set && `$$self.$set = ${set};`}
 
+				${capture_state && `$$self.$capture_state = ${capture_state};`}
+
+				${inject_state && `$$self.$inject_state = ${inject_state};`}
+
 				${injected.length && `let ${injected.join(', ')};`}
 
 				${reactive_declarations.length > 0 && deindent`

test/js/samples/capture-inject-dev-only/_config.js

@@ -0,0 +1,5 @@
+export default {
+	options: {
+		dev: false
+	}
+};

test/js/samples/capture-inject-dev-only/expected.js

@@ -0,0 +1,79 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_data,
+	space,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	var p, t0, t1, input, dispose;
+
+	return {
+		c() {
+			p = element("p");
+			t0 = text(ctx.foo);
+			t1 = space();
+			input = element("input");
+			dispose = listen(input, "input", ctx.input_input_handler);
+		},
+
+		m(target, anchor) {
+			insert(target, p, anchor);
+			append(p, t0);
+			insert(target, t1, anchor);
+			insert(target, input, anchor);
+
+			input.value = ctx.foo;
+		},
+
+		p(changed, ctx) {
+			if (changed.foo) {
+				set_data(t0, ctx.foo);
+			}
+
+			if (changed.foo && (input.value !== ctx.foo)) input.value = ctx.foo;
+		},
+
+		i: noop,
+		o: noop,
+
+		d(detaching) {
+			if (detaching) {
+				detach(p);
+				detach(t1);
+				detach(input);
+			}
+
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let foo = "bar";
+
+	function input_input_handler() {
+		foo = this.value;
+		$$invalidate('foo', foo);
+	}
+
+	return { foo, input_input_handler };
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, []);
+	}
+}
+
+export default Component;

test/js/samples/capture-inject-dev-only/input.svelte

@@ -0,0 +1,5 @@
+<script>
+    let foo = "bar";
+</script>
+<p>{foo}</p>
+<input bind:value={foo}>

test/js/samples/debug-empty/expected.js

@@ -74,6 +74,14 @@ function instance($$self, $$props, $$invalidate) {
 		if ('name' in $$props) $$invalidate('name', name = $$props.name);
 	};
 
+	$$self.$capture_state = () => {
+		return { name };
+	};
+
+	$$self.$inject_state = $$props => {
+		if ('name' in $$props) $$invalidate('name', name = $$props.name);
+	};
+
 	return { name };
 }
 

test/js/samples/debug-foo-bar-baz-things/expected.js

@@ -163,6 +163,17 @@ function instance($$self, $$props, $$invalidate) {
 		if ('baz' in $$props) $$invalidate('baz', baz = $$props.baz);
 	};
 
+	$$self.$capture_state = () => {
+		return { things, foo, bar, baz };
+	};
+
+	$$self.$inject_state = $$props => {
+		if ('things' in $$props) $$invalidate('things', things = $$props.things);
+		if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo);
+		if ('bar' in $$props) $$invalidate('bar', bar = $$props.bar);
+		if ('baz' in $$props) $$invalidate('baz', baz = $$props.baz);
+	};
+
 	return { things, foo, bar, baz };
 }
 

test/js/samples/debug-foo/expected.js

@@ -161,6 +161,15 @@ function instance($$self, $$props, $$invalidate) {
 		if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo);
 	};
 
+	$$self.$capture_state = () => {
+		return { things, foo };
+	};
+
+	$$self.$inject_state = $$props => {
+		if ('things' in $$props) $$invalidate('things', things = $$props.things);
+		if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo);
+	};
+
 	return { things, foo };
 }
 

test/js/samples/debug-hoisted/expected.js

@@ -43,6 +43,14 @@ let kobzol = 5;
 function instance($$self) {
 	let obj = { x: 5 };
 
+	$$self.$capture_state = () => {
+		return {}
+	};
+
+	$$self.$inject_state = $$props => {
+		return
+	};
+
 	return { obj };
 }
 

test/js/samples/dev-warning-missing-data-computed/expected.js

@@ -74,6 +74,15 @@ function instance($$self, $$props, $$invalidate) {
 		if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo);
 	};
 
+	$$self.$capture_state = () => {
+		return { foo, bar };
+	};
+
+	$$self.$inject_state = $$props => {
+		if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo);
+		if ('bar' in $$props) $$invalidate('bar', bar = $$props.bar);
+	};
+
 	$$self.$$.update = ($$dirty = { foo: 1 }) => {
 		if ($$dirty.foo) { $$invalidate('bar', bar = foo * 2); }
 	};