Merge pull request #1052 from sveltejs/gh-1051

Warn on unused events/transitions

src/validate/html/validateElement.ts

@@ -138,12 +138,15 @@ export default function validateElement(
 				);
 			}
 		} else if (attribute.type === 'EventHandler') {
+			validator.used.events.add(attribute.name);
 			validateEventHandler(validator, attribute, refCallees);
 		} else if (attribute.type === 'Transition') {
 			if (isComponent) {
 				validator.error(`Transitions can only be applied to DOM elements, not components`, attribute.start);
 			}
 
+			validator.used.transitions.add(attribute.name);
+
 			const bidi = attribute.intro && attribute.outro;
 
 			if (hasTransition) {

src/validate/index.ts

@@ -36,7 +36,10 @@ export class Validator {
 	slots: Set<string>;
 
 	used: {
-		components: Set<string>
+		components: Set<string>;
+		helpers: Set<string>;
+		events: Set<string>;
+		transitions: Set<string>;
 	};
 
 	constructor(parsed: Parsed, source: string, options: CompileOptions) {
@@ -56,7 +59,10 @@ export class Validator {
 		this.slots = new Set();
 
 		this.used = {
-			components: new Set()
+			components: new Set(),
+			helpers: new Set(),
+			events: new Set(),
+			transitions: new Set()
 		};
 	}
 
@@ -125,18 +131,28 @@ export default function validate(
 
 		// 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 categories = {
+				components: 'component',
+				// TODO helpers require a bit more work — need to analyse all expressions
+				// helpers: 'helper',
+				events: 'event definition',
+				transitions: 'transition'
+			};
+
+			Object.keys(categories).forEach(category => {
+				const definitions = validator.defaultExport.declaration.properties.find(prop => prop.key.name === category);
+				if (definitions) {
+					definitions.value.properties.forEach(prop => {
 						const { name } = prop.key;
-					if (!validator.used.components.has(name)) {
+						if (!validator.used[category].has(name)) {
 							validator.warn(
-							`The ${name} component is unused`,
+								`The '${name}' ${categories[category]} is unused`,
 								prop.start
 							);
 						}
 					});
 				}
+			});
 		}
 	} catch (err) {
 		if (onerror) {

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

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

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

@@ -0,0 +1,9 @@
+<script>
+	export default {
+		events: {
+			drag: (node, callback) => {
+				// implementation goes here
+			}
+		}
+	};
+</script>

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

@@ -0,0 +1,8 @@
+[{
+	"message": "The 'drag' event definition is unused",
+	"loc": {
+		"line": 4,
+		"column": 3
+	},
+	"pos": 42
+}]

test/validator/samples/unused-helper.skip/input.html

@@ -0,0 +1,7 @@
+<script>
+	export default {
+		helpers: {
+			uppercase: x => x.toUpperCase()
+		}
+	};
+</script>

test/validator/samples/unused-helper.skip/warnings.json

@@ -0,0 +1,8 @@
+[{
+	"message": "The 'uppercase' helper is unused",
+	"loc": {
+		"line": 4,
+		"column": 3
+	},
+	"pos": 43
+}]

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

@@ -0,0 +1,9 @@
+<script>
+	export default {
+		transitions: {
+			spin: node => {
+				// implementation goes here
+			}
+		}
+	};
+</script>

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

@@ -0,0 +1,8 @@
+[{
+	"message": "The 'spin' transition is unused",
+	"loc": {
+		"line": 4,
+		"column": 3
+	},
+	"pos": 47
+}]