Merge pull request #2881 from sveltejs/gh-2878

dont create unknown prop warnings for $$scope etc, or if component has $$props

Author: Rich-Harris

src/compile/render-dom/index.ts

@@ -397,11 +397,11 @@ export default function dom(
 		});
 
 		let unknown_props_check;
-		if (component.compile_options.dev && writable_props.length) {
+		if (component.compile_options.dev && !component.var_lookup.has('$$props') && writable_props.length) {
 			unknown_props_check = deindent`
 				const writable_props = [${writable_props.map(prop => `'${prop.export_name}'`).join(', ')}];
 				Object.keys($$props).forEach(key => {
-					if (!writable_props.includes(key)) console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`);
+					if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`);
 				});
 			`;
 		}

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

@@ -67,7 +67,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	const writable_props = ['name'];
 	Object.keys($$props).forEach(key => {
-		if (!writable_props.includes(key)) console.warn(`<Component> was created with unknown prop '${key}'`);
+		if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
 	$$self.$set = $$props => {

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

@@ -153,7 +153,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	const writable_props = ['things', 'foo', 'bar', 'baz'];
 	Object.keys($$props).forEach(key => {
-		if (!writable_props.includes(key)) console.warn(`<Component> was created with unknown prop '${key}'`);
+		if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
 	$$self.$set = $$props => {

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

@@ -153,7 +153,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	const writable_props = ['things', 'foo'];
 	Object.keys($$props).forEach(key => {
-		if (!writable_props.includes(key)) console.warn(`<Component> was created with unknown prop '${key}'`);
+		if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
 	$$self.$set = $$props => {

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

@@ -67,7 +67,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	const writable_props = ['foo'];
 	Object.keys($$props).forEach(key => {
-		if (!writable_props.includes(key)) console.warn(`<Component> was created with unknown prop '${key}'`);
+		if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
 	$$self.$set = $$props => {

test/runtime/samples/dev-warning-unknown-props-with-$$props/Foo.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let foo = undefined;
+
+</script>
+
+<div>{foo}</div>
+<div>{JSON.stringify($$props)}</div>

test/runtime/samples/dev-warning-unknown-props-with-$$props/_config.js

@@ -0,0 +1,7 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: []
+};

test/runtime/samples/dev-warning-unknown-props-with-$$props/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo fo="sho"/>

test/runtime/samples/dev-warning-unknown-props-with-$$scope/Foo.svelte

@@ -0,0 +1,6 @@
+<script>
+	export let answer;
+</script>
+
+<h1>{answer}</h1>
+<div><slot></slot></div>

test/runtime/samples/dev-warning-unknown-props-with-$$scope/_config.js

@@ -0,0 +1,7 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: []
+};

test/runtime/samples/dev-warning-unknown-props-with-$$scope/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo answer={42}>
+	bar
+</Foo>