[fix] do not warn about missing props for bindings (#6583)

src/compiler/compile/render_dom/index.ts

@@ -121,7 +121,7 @@ export default function dom(
 	const accessors = [];
 
 	const not_equal = component.component_options.immutable ? x`@not_equal` : x`@safe_not_equal`;
-	let dev_props_check: Node[] | Node;
+	let missing_props_check: Node[] | Node;
 	let inject_state: Expression;
 	let capture_state: Expression;
 	let props_inject: Node[] | Node;
@@ -227,13 +227,13 @@ export default function dom(
 		const expected = props.filter(prop => prop.writable && !prop.initialised);
 
 		if (expected.length) {
-			dev_props_check = b`
+			missing_props_check = b`
-				const { ctx: #ctx } = this.$$;
+				$$self.$$.on_mount.push(function () {
-				const props = ${options.customElement ? x`this.attributes` : x`options.props || {}`};
+					${expected.map(prop => b`
-				${expected.map(prop => b`
+					if (${prop.name} === undefined && !(('${prop.export_name}' in $$props) || $$self.$$.bound[$$self.$$.props['${prop.export_name}']])) {
-				if (${renderer.reference(prop.name)} === undefined && !('${prop.export_name}' in props)) {
+						@_console.warn("<${component.tag}> was created without expected prop '${prop.export_name}'");
-					@_console.warn("<${component.tag}> was created without expected prop '${prop.export_name}'");
+					}`)}
-				}`)}
+				});
 			`;
 		}
 
@@ -476,6 +476,7 @@ export default function dom(
 
 				${instance_javascript}
 
+				${missing_props_check}
 				${unknown_props_check}
 
 				${renderer.binding_groups.size > 0 && b`const $$binding_groups = [${[...renderer.binding_groups.keys()].map(_ => x`[]`)}];`}
@@ -533,8 +534,6 @@ export default function dom(
 
 					@init(this, { target: this.shadowRoot, props: ${init_props}, customElement: true }, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, null, ${dirty});
 
-					${dev_props_check}
-
 					if (options) {
 						if (options.target) {
 							@insert(options.target, this, options.anchor);
@@ -594,8 +593,6 @@ export default function dom(
 					super(${options.dev && 'options'});
 					@init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, ${optional_parameters});
 					${options.dev && b`@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name.name}", options, id: create_fragment.name });`}
-
-					${dev_props_check}
 				}
 			}
 		`[0] as ClassDeclaration;

test/js/samples/capture-inject-state/expected.js

@@ -113,6 +113,17 @@ function instance($$self, $$props, $$invalidate) {
 	let { alias: realName } = $$props;
 	let local;
 	let shadowedByModule;
+
+	$$self.$$.on_mount.push(function () {
+		if (prop === undefined && !('prop' in $$props || $$self.$$.bound[$$self.$$.props['prop']])) {
+			console.warn("<Component> was created without expected prop 'prop'");
+		}
+
+		if (realName === undefined && !('alias' in $$props || $$self.$$.bound[$$self.$$.props['alias']])) {
+			console.warn("<Component> was created without expected prop 'alias'");
+		}
+	});
+
 	const writable_props = ['prop', 'alias'];
 
 	Object.keys($$props).forEach(key => {
@@ -166,17 +177,6 @@ class Component extends SvelteComponentDev {
 			options,
 			id: create_fragment.name
 		});
-
-		const { ctx } = this.$$;
-		const props = options.props || {};
-
-		if (/*prop*/ ctx[0] === undefined && !('prop' in props)) {
-			console.warn("<Component> was created without expected prop 'prop'");
-		}
-
-		if (/*realName*/ ctx[1] === undefined && !('alias' in props)) {
-			console.warn("<Component> was created without expected prop 'alias'");
-		}
 	}
 
 	get prop() {

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

@@ -72,6 +72,13 @@ function instance($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	validate_slots('Component', slots, []);
 	let { name } = $$props;
+
+	$$self.$$.on_mount.push(function () {
+		if (name === undefined && !('name' in $$props || $$self.$$.bound[$$self.$$.props['name']])) {
+			console.warn("<Component> was created without expected prop 'name'");
+		}
+	});
+
 	const writable_props = ['name'];
 
 	Object.keys($$props).forEach(key => {
@@ -106,13 +113,6 @@ class Component extends SvelteComponentDev {
 			options,
 			id: create_fragment.name
 		});
-
-		const { ctx } = this.$$;
-		const props = options.props || {};
-
-		if (/*name*/ ctx[0] === undefined && !('name' in props)) {
-			console.warn("<Component> was created without expected prop 'name'");
-		}
 	}
 
 	get name() {

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

@@ -176,6 +176,25 @@ function instance($$self, $$props, $$invalidate) {
 	let { foo } = $$props;
 	let { bar } = $$props;
 	let { baz } = $$props;
+
+	$$self.$$.on_mount.push(function () {
+		if (things === undefined && !('things' in $$props || $$self.$$.bound[$$self.$$.props['things']])) {
+			console.warn("<Component> was created without expected prop 'things'");
+		}
+
+		if (foo === undefined && !('foo' in $$props || $$self.$$.bound[$$self.$$.props['foo']])) {
+			console.warn("<Component> was created without expected prop 'foo'");
+		}
+
+		if (bar === undefined && !('bar' in $$props || $$self.$$.bound[$$self.$$.props['bar']])) {
+			console.warn("<Component> was created without expected prop 'bar'");
+		}
+
+		if (baz === undefined && !('baz' in $$props || $$self.$$.bound[$$self.$$.props['baz']])) {
+			console.warn("<Component> was created without expected prop 'baz'");
+		}
+	});
+
 	const writable_props = ['things', 'foo', 'bar', 'baz'];
 
 	Object.keys($$props).forEach(key => {
@@ -216,25 +235,6 @@ class Component extends SvelteComponentDev {
 			options,
 			id: create_fragment.name
 		});
-
-		const { ctx } = this.$$;
-		const props = options.props || {};
-
-		if (/*things*/ ctx[0] === undefined && !('things' in props)) {
-			console.warn("<Component> was created without expected prop 'things'");
-		}
-
-		if (/*foo*/ ctx[1] === undefined && !('foo' in props)) {
-			console.warn("<Component> was created without expected prop 'foo'");
-		}
-
-		if (/*bar*/ ctx[2] === undefined && !('bar' in props)) {
-			console.warn("<Component> was created without expected prop 'bar'");
-		}
-
-		if (/*baz*/ ctx[3] === undefined && !('baz' in props)) {
-			console.warn("<Component> was created without expected prop 'baz'");
-		}
 	}
 
 	get things() {

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

@@ -168,6 +168,17 @@ function instance($$self, $$props, $$invalidate) {
 	validate_slots('Component', slots, []);
 	let { things } = $$props;
 	let { foo } = $$props;
+
+	$$self.$$.on_mount.push(function () {
+		if (things === undefined && !('things' in $$props || $$self.$$.bound[$$self.$$.props['things']])) {
+			console.warn("<Component> was created without expected prop 'things'");
+		}
+
+		if (foo === undefined && !('foo' in $$props || $$self.$$.bound[$$self.$$.props['foo']])) {
+			console.warn("<Component> was created without expected prop 'foo'");
+		}
+	});
+
 	const writable_props = ['things', 'foo'];
 
 	Object.keys($$props).forEach(key => {
@@ -204,17 +215,6 @@ class Component extends SvelteComponentDev {
 			options,
 			id: create_fragment.name
 		});
-
-		const { ctx } = this.$$;
-		const props = options.props || {};
-
-		if (/*things*/ ctx[0] === undefined && !('things' in props)) {
-			console.warn("<Component> was created without expected prop 'things'");
-		}
-
-		if (/*foo*/ ctx[1] === undefined && !('foo' in props)) {
-			console.warn("<Component> was created without expected prop 'foo'");
-		}
 	}
 
 	get things() {

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

@@ -69,6 +69,13 @@ function instance($$self, $$props, $$invalidate) {
 	validate_slots('Component', slots, []);
 	let { foo } = $$props;
 	let bar;
+
+	$$self.$$.on_mount.push(function () {
+		if (foo === undefined && !('foo' in $$props || $$self.$$.bound[$$self.$$.props['foo']])) {
+			console.warn("<Component> was created without expected prop 'foo'");
+		}
+	});
+
 	const writable_props = ['foo'];
 
 	Object.keys($$props).forEach(key => {
@@ -110,13 +117,6 @@ class Component extends SvelteComponentDev {
 			options,
 			id: create_fragment.name
 		});
-
-		const { ctx } = this.$$;
-		const props = options.props || {};
-
-		if (/*foo*/ ctx[0] === undefined && !('foo' in props)) {
-			console.warn("<Component> was created without expected prop 'foo'");
-		}
 	}
 
 	get foo() {

test/runtime/samples/dev-warning-missing-data-component-bind/Foo.svelte

@@ -0,0 +1,8 @@
+<script>
+	export let w;
+	export let x;
+	export let y;
+	export let z = undefined;
+</script>
+
+<div>{w} {x} {y}</div>

test/runtime/samples/dev-warning-missing-data-component-bind/_config.js

@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: [
+		"<Foo> was created without expected prop 'y'"
+	]
+};

test/runtime/samples/dev-warning-missing-data-component-bind/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	let x = undefined;
+	let w = 'w';
+</script>
+
+<Foo bind:w bind:x />