check for unknown props when creating component

src/compile/render-dom/index.ts

@@ -134,7 +134,6 @@ export default function dom(
 	});
 
 	if (component.compile_options.dev) {
-		// TODO check no uunexpected props were passed, as well as
 		// checking that expected ones were passed
 		const expected = props.filter(prop => !prop.initialised);
 
@@ -395,6 +394,16 @@ export default function dom(
 			return $name;
 		});
 
+		let unknownPropsCheck;
+		if (component.compile_options.dev && writable_props.length) {
+			unknownPropsCheck = deindent`
+				const writableProps = [${writable_props.map(prop => `'${prop.export_name}'`).join(', ')}];
+				Object.keys($$props).forEach(key => {
+					if (!writableProps.includes(key)) console.warn(\`<${component.tag}> was created with unknown attribute '\${key}'\`);
+				});
+			`;
+		}
+
 		builder.add_block(deindent`
 			function ${definition}(${args.join(', ')}) {
 				${reactive_store_declarations.length > 0 && `let ${reactive_store_declarations.join(', ')};`}
@@ -404,6 +413,8 @@ export default function dom(
 				${resubscribable_reactive_store_unsubscribers}
 
 				${component.javascript}
+
+				${unknownPropsCheck}
 
 				${component.slots.size && `let { $$slots = {}, $$scope } = $$props;`}
 

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

@@ -65,6 +65,11 @@ function create_fragment(ctx) {
 function instance($$self, $$props, $$invalidate) {
 	let { name } = $$props;
 
+	const writableProps = ['name'];
+	Object.keys($$props).forEach(key => {
+		if (!writableProps.includes(key)) console.warn(`<Component> was created with unknown attribute '${key}'`);
+	});
+
 	$$self.$set = $$props => {
 		if ('name' in $$props) $$invalidate('name', name = $$props.name);
 	};
@@ -93,4 +98,4 @@ class Component extends SvelteComponentDev {
 	}
 }
 
-export default Component;
+export default Component;

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

@@ -151,6 +151,11 @@ function create_fragment(ctx) {
 function instance($$self, $$props, $$invalidate) {
 	let { things, foo, bar, baz } = $$props;
 
+	const writableProps = ['things', 'foo', 'bar', 'baz'];
+	Object.keys($$props).forEach(key => {
+		if (!writableProps.includes(key)) console.warn(`<Component> was created with unknown attribute '${key}'`);
+	});
+
 	$$self.$set = $$props => {
 		if ('things' in $$props) $$invalidate('things', things = $$props.things);
 		if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo);
@@ -215,4 +220,4 @@ class Component extends SvelteComponentDev {
 	}
 }
 
-export default Component;
+export default Component;

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

@@ -151,6 +151,11 @@ function create_fragment(ctx) {
 function instance($$self, $$props, $$invalidate) {
 	let { things, foo } = $$props;
 
+	const writableProps = ['things', 'foo'];
+	Object.keys($$props).forEach(key => {
+		if (!writableProps.includes(key)) console.warn(`<Component> was created with unknown attribute '${key}'`);
+	});
+
 	$$self.$set = $$props => {
 		if ('things' in $$props) $$invalidate('things', things = $$props.things);
 		if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo);
@@ -191,4 +196,4 @@ class Component extends SvelteComponentDev {
 	}
 }
 
-export default Component;
+export default Component;

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

@@ -65,6 +65,11 @@ function instance($$self, $$props, $$invalidate) {
 
 	let bar;
 
+	const writableProps = ['foo'];
+	Object.keys($$props).forEach(key => {
+		if (!writableProps.includes(key)) console.warn(`<Component> was created with unknown attribute '${key}'`);
+	});
+
 	$$self.$set = $$props => {
 		if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo);
 	};
@@ -97,4 +102,4 @@ class Component extends SvelteComponentDev {
 	}
 }
 
-export default Component;
+export default Component;

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

@@ -0,0 +1,5 @@
+<script>
+	export let foo = undefined;
+</script>
+
+<div>{foo}</div>

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

@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: [
+		`<Foo> was created with unknown attribute 'fo'`
+	]
+};

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

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