Merge pull request #3351 from sveltejs/disable-validation

disable validation with magic comments

Author: Rich-Harris

site/content/docs/02-template-syntax.md

@@ -111,6 +111,27 @@ Text can also contain JavaScript expressions:
 ```
 
 
+### Comments
+
+---
+
+You can use HTML comments inside components.
+
+```html
+<!-- this is a comment! -->
+<h1>Hello world</h1>
+```
+
+---
+
+Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually these are accessibility warnings; make sure that you're disabling them for a good reason.
+
+```html
+<!-- svelte-ignore a11y-autofocus -->
+<input bind:value={name} autofocus>
+```
+
+
 ### {#if ...}
 
 ```sv

src/compiler/compile/Component.ts

@@ -23,6 +23,7 @@ import get_object from './utils/get_object';
 import unwrap_parens from './utils/unwrap_parens';
 import Slot from './nodes/Slot';
 import { Node as ESTreeNode } from 'estree';
+import add_to_set from './utils/add_to_set';
 
 interface ComponentOptions {
 	namespace?: string;
@@ -70,6 +71,8 @@ function remove_node(code: MagicString, start: number, end: number, body: Node,
 export default class Component {
 	stats: Stats;
 	warnings: Warning[];
+	ignores: Set<string>;
+	ignore_stack: Set<string>[] = [];
 
 	ast: Ast;
 	source: string;
@@ -442,6 +445,10 @@ export default class Component {
 			message: string;
 		}
 	) {
+		if (this.ignores && this.ignores.has(warning.code)) {
+			return;
+		}
+
 		if (!this.locator) {
 			this.locator = getLocator(this.source, { offsetLine: 1 });
 		}
@@ -1253,6 +1260,17 @@ export default class Component {
 			message
 		});
 	}
+
+	push_ignores(ignores) {
+		this.ignores = new Set(this.ignores || []);
+		add_to_set(this.ignores, ignores);
+		this.ignore_stack.push(this.ignores);
+	}
+
+	pop_ignores() {
+		this.ignore_stack.pop();
+		this.ignores = this.ignore_stack[this.ignore_stack.length - 1];
+	}
 }
 
 function process_component_options(component: Component, nodes) {

src/compiler/compile/nodes/Comment.ts

@@ -1,11 +1,17 @@
 import Node from './shared/Node';
 
+const pattern = /^\s*svelte-ignore\s+([\s\S]+)\s*$/m;
+
 export default class Comment extends Node {
 	type: 'Comment';
 	data: string;
+	ignores: string[];
 
 	constructor(component, parent, scope, info) {
 		super(component, parent, scope, info);
 		this.data = info.data;
+
+		const match = pattern.exec(this.data);
+		this.ignores = match ? match[1].split(/[^\S]/).map(x => x.trim()).filter(Boolean) : [];
 	}
 }

src/compiler/compile/nodes/shared/map_children.ts

@@ -42,9 +42,20 @@ function get_constructor(type) {
 
 export default function map_children(component, parent, scope, children: Node[]) {
 	let last = null;
+	let ignores = [];
+
 	return children.map(child => {
 		const constructor = get_constructor(child.type);
+
+		const use_ignores = child.type !== 'Text' && child.type !== 'Comment' && ignores.length;
+
+		if (use_ignores) component.push_ignores(ignores);
 		const node = new constructor(component, parent, scope, child);
+		if (use_ignores) component.pop_ignores(), ignores = [];
+
+		if (node.type === 'Comment' && node.ignores.length) {
+			ignores.push(...node.ignores);
+		}
 
 		if (last) last.next = node;
 		node.prev = last;

test/validator/samples/ignore-warning/input.svelte

@@ -0,0 +1,7 @@
+<!-- svelte-ignore a11y-missing-attribute -->
+<div>
+	<img src="this-is-fine.jpg">
+	<marquee>but this is still discouraged</marquee>
+</div>
+
+<img src="potato.jpg">

test/validator/samples/ignore-warning/warnings.json

@@ -0,0 +1,32 @@
+[
+	{
+		"code": "a11y-distracting-elements",
+		"end": {
+			"character": 131,
+			"column": 49,
+			"line": 4
+		},
+		"message": "A11y: Avoid <marquee> elements",
+		"pos": 83,
+		"start": {
+			"character": 83,
+			"column": 1,
+			"line": 4
+		}
+	},
+	{
+		"code": "a11y-missing-attribute",
+		"end": {
+			"character": 162,
+			"column": 22,
+			"line": 7
+		},
+		"message": "A11y: <img> element should have an alt attribute",
+		"pos": 140,
+		"start": {
+			"character": 140,
+			"column": 0,
+			"line": 7
+		}
+	}
+]

test/validator/samples/ignore-warnings-cumulative/input.svelte

@@ -0,0 +1,17 @@
+<!-- svelte-ignore a11y-structure a11y-missing-attribute -->
+<div>
+	<figure>
+		<img src="potato.jpg">
+		<marquee>
+			<figcaption>potato</figcaption>
+		</marquee>
+	</figure>
+
+	<!-- svelte-ignore a11y-distracting-elements -->
+	<figure>
+		<img src="potato.jpg">
+		<marquee>
+			<figcaption>potato</figcaption>
+		</marquee>
+	</figure>
+</div>

test/validator/samples/ignore-warnings-cumulative/warnings.json

@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-distracting-elements",
+		"end": {
+			"character": 161,
+			"column": 12,
+			"line": 7
+		},
+		"message": "A11y: Avoid <marquee> elements",
+		"pos": 104,
+		"start": {
+			"character": 104,
+			"column": 2,
+			"line": 5
+		}
+	}
+]

test/validator/samples/ignore-warnings-newline/input.svelte

@@ -0,0 +1,8 @@
+<!-- svelte-ignore a11y-missing-attribute
+                   a11y-distracting-elements -->
+<div>
+	<img src="this-is-fine.jpg">
+	<marquee>but this is still discouraged</marquee>
+</div>
+
+<img src="potato.jpg">

test/validator/samples/ignore-warnings-newline/warnings.json

@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-missing-attribute",
+		"end": {
+			"character": 207,
+			"column": 22,
+			"line": 8
+		},
+		"message": "A11y: <img> element should have an alt attribute",
+		"pos": 185,
+		"start": {
+			"character": 185,
+			"column": 0,
+			"line": 8
+		}
+	}
+]

test/validator/samples/ignore-warnings-stacked/input.svelte

@@ -0,0 +1,8 @@
+<!-- svelte-ignore a11y-missing-attribute -->
+<!-- svelte-ignore a11y-distracting-elements -->
+<div>
+	<img src="this-is-fine.jpg">
+	<marquee>but this is still discouraged</marquee>
+</div>
+
+<img src="potato.jpg">

test/validator/samples/ignore-warnings-stacked/warnings.json

@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-missing-attribute",
+		"end": {
+			"character": 211,
+			"column": 22,
+			"line": 8
+		},
+		"message": "A11y: <img> element should have an alt attribute",
+		"pos": 189,
+		"start": {
+			"character": 189,
+			"column": 0,
+			"line": 8
+		}
+	}
+]

test/validator/samples/ignore-warnings/input.svelte

@@ -0,0 +1,7 @@
+<!-- svelte-ignore a11y-missing-attribute a11y-distracting-elements -->
+<div>
+	<img src="this-is-fine.jpg">
+	<marquee>but this is still discouraged</marquee>
+</div>
+
+<img src="potato.jpg">

test/validator/samples/ignore-warnings/warnings.json

@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-missing-attribute",
+		"end": {
+			"character": 188,
+			"column": 22,
+			"line": 7
+		},
+		"message": "A11y: <img> element should have an alt attribute",
+		"pos": 166,
+		"start": {
+			"character": 166,
+			"column": 0,
+			"line": 7
+		}
+	}
+]