check for unknown props even if component doesn't have writable props (#4454)

src/compiler/compile/render_dom/index.ts

@@ -259,6 +259,9 @@ export default function dom(
 		inject_state;
 	if (has_invalidate) {
 		args.push(x`$$props`, x`$$invalidate`);
+	} else if (component.compile_options.dev) {
+		// $$props arg is still needed for unknown prop check
+		args.push(x`$$props`);
 	}
 
 	const has_create_fragment = block.has_content();
@@ -300,6 +303,7 @@ export default function dom(
 	const initial_context = renderer.context.slice(0, i + 1);
 
 	const has_definition = (
+		component.compile_options.dev ||
 		(instance_javascript && instance_javascript.length > 0) ||
 		filtered_props.length > 0 ||
 		uses_props ||
@@ -379,7 +383,7 @@ export default function dom(
 		});
 
 		let unknown_props_check;
-		if (component.compile_options.dev && !component.var_lookup.has('$$props') && writable_props.length) {
+		if (component.compile_options.dev && !component.var_lookup.has('$$props')) {
 			unknown_props_check = b`
 				const writable_props = [${writable_props.map(prop => x`'${prop.export_name}'`)}];
 				@_Object.keys($$props).forEach(key => {

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

@@ -50,6 +50,12 @@ function create_fragment(ctx) {
 function instance($$self, $$props, $$invalidate) {
 	let obj = { x: 5 };
 	let kobzol = 5;
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Component> was created with unknown prop '${key}'`);
+	});
+
 	$$self.$capture_state = () => ({ obj, kobzol });
 
 	$$self.$inject_state = $$props => {

test/js/samples/debug-no-dependencies/expected.js

@@ -134,10 +134,20 @@ function create_fragment(ctx) {
 	return block;
 }
 
+function instance($$self, $$props) {
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Component> was created with unknown prop '${key}'`);
+	});
+
+	return [];
+}
+
 class Component extends SvelteComponentDev {
 	constructor(options) {
 		super(options);
-		init(this, options, null, create_fragment, safe_not_equal, {});
+		init(this, options, instance, create_fragment, safe_not_equal, {});
 
 		dispatch_dev("SvelteRegisterComponent", {
 			component: this,

test/js/samples/loop-protect/expected.js

@@ -6,6 +6,7 @@ import {
 	detach_dev,
 	dispatch_dev,
 	element,
+	globals,
 	init,
 	insert_dev,
 	loop_guard,
@@ -13,6 +14,7 @@ import {
 	safe_not_equal
 } from "svelte/internal";
 
+const { console: console_1 } = globals;
 const file = undefined;
 
 function create_fragment(ctx) {
@@ -102,6 +104,12 @@ function instance($$self, $$props, $$invalidate) {
 		} while (true);
 	}
 
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console_1.warn(`<Component> was created with unknown prop '${key}'`);
+	});
+
 	function div_binding($$value) {
 		binding_callbacks[$$value ? "unshift" : "push"](() => {
 			$$invalidate(0, node = $$value);

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

@@ -0,0 +1 @@
+Foo

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

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

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

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