Merge pull request #1050 from sveltejs/gh-1039

detect unused/misplaced components

src/generators/dom/index.ts

@@ -212,10 +212,12 @@ export default function dom(
 		${generator.metaBindings}
 		${computations.length && `this._recompute({ ${Array.from(computationDeps).map(dep => `${dep}: 1`).join(', ')} }, this._state);`}
 		${options.dev &&
-			Array.from(generator.expectedProperties).map(
-				prop =>
-					`if (!('${prop}' in this._state)) console.warn("${debugName} was created without expected data property '${prop}'");`
-			)}
+			Array.from(generator.expectedProperties).map(prop => {
+				const message = generator.components.has(prop) ?
+					`${debugName} expected to find '${prop}' in \`data\`, but found it in \`components\` instead` :
+					`${debugName} was created without expected data property '${prop}'`;
+				return `if (!('${prop}' in this._state)) console.warn("${message}");`
+			})}
 		${generator.bindingGroups.length &&
 			`this._bindingGroups = [${Array(generator.bindingGroups.length).fill('[]').join(', ')}];`}
 

src/generators/server-side-rendering/index.ts

@@ -232,7 +232,7 @@ export default function ssr(
 		${
 			/__missingComponent/.test(generator.renderCode) && deindent`
 				var __missingComponent = {
-					render: () => ''
+					_render: () => ''
 				};
 			`
 		}

src/validate/html/validateElement.ts

@@ -16,6 +16,10 @@ export default function validateElement(
 	const isComponent =
 		node.name === ':Self' || node.name === ':Component' || validator.components.has(node.name);
 
+	if (isComponent) {
+		validator.used.components.add(node.name);
+	}
+
 	if (!isComponent && /^[A-Z]/.test(node.name[0])) {
 		// TODO upgrade to validator.error in v2
 		validator.warn(`${node.name} component is not defined`, node.start);

src/validate/index.ts

@@ -35,6 +35,10 @@ export class Validator {
 	transitions: Map<string, Node>;
 	slots: Set<string>;
 
+	used: {
+		components: Set<string>
+	};
+
 	constructor(parsed: Parsed, source: string, options: CompileOptions) {
 		this.source = source;
 		this.filename = options.filename;
@@ -50,6 +54,10 @@ export class Validator {
 		this.helpers = new Map();
 		this.transitions = new Map();
 		this.slots = new Set();
+
+		this.used = {
+			components: new Set()
+		};
 	}
 
 	error(message: string, pos: number) {
@@ -114,6 +122,22 @@ export default function validate(
 		if (parsed.html) {
 			validateHtml(validator, parsed.html);
 		}
+
+		// need to do a second pass of the JS, now that we've analysed the markup
+		if (parsed.js && validator.defaultExport) {
+			const components = validator.defaultExport.declaration.properties.find(prop => prop.key.name === 'components');
+			if (components) {
+				components.value.properties.forEach(prop => {
+					const { name } = prop.key;
+					if (!validator.used.components.has(name)) {
+						validator.warn(
+							`The ${name} component is unused`,
+							prop.start
+						);
+					}
+				});
+			}
+		}
 	} catch (err) {
 		if (onerror) {
 			onerror(err);

test/runtime/samples/dev-warning-dynamic-components-misplaced/Bar.html

@@ -0,0 +1 @@
+Bar

test/runtime/samples/dev-warning-dynamic-components-misplaced/Foo.html

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

test/runtime/samples/dev-warning-dynamic-components-misplaced/_config.js

@@ -0,0 +1,14 @@
+export default {
+	dev: true,
+
+	data: {
+		x: true
+	},
+
+	html: '',
+
+	warnings: [
+		`<Main$> expected to find 'Foo' in \`data\`, but found it in \`components\` instead`,
+		`<Main$> expected to find 'Bar' in \`data\`, but found it in \`components\` instead`
+	]
+};

test/runtime/samples/dev-warning-dynamic-components-misplaced/main.html

@@ -0,0 +1,13 @@
+<:Component {x ? Foo : Bar}/>
+
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+
+	export default {
+		components: {
+			Foo,
+			Bar
+		}
+	};
+</script>

test/validator/samples/component-unused/input.html

@@ -0,0 +1,11 @@
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+
+	export default {
+		components: {
+			Foo,
+			Bar
+		}
+	};
+</script>

test/validator/samples/component-unused/warnings.json

@@ -0,0 +1,18 @@
+[
+	{
+		"message": "The Foo component is unused",
+		"loc": {
+			"line": 7,
+			"column": 3
+		},
+		"pos": 109
+	},
+	{
+		"message": "The Bar component is unused",
+		"loc": {
+			"line": 8,
+			"column": 3
+		},
+		"pos": 117
+	}
+]

test/validator/samples/properties-components-should-be-capitalised/input.html

@@ -1,4 +1,4 @@
-<div></div>
+<foo></foo>
 
 <script>
 	export default {