From e3e3ad9be07aae3052077557ea6446e03ef1db34 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sun, 4 Aug 2019 10:58:43 -0400 Subject: [PATCH 1/2] disable validation with magic comments --- src/compiler/compile/Component.ts | 18 +++++++++++ src/compiler/compile/nodes/Comment.ts | 6 ++++ .../compile/nodes/shared/map_children.ts | 11 +++++++ .../samples/ignore-warning/input.svelte | 7 ++++ .../samples/ignore-warning/warnings.json | 32 +++++++++++++++++++ .../ignore-warnings-cumulative/input.svelte | 17 ++++++++++ .../ignore-warnings-cumulative/warnings.json | 17 ++++++++++ .../ignore-warnings-newline/input.svelte | 8 +++++ .../ignore-warnings-newline/warnings.json | 17 ++++++++++ .../ignore-warnings-stacked/input.svelte | 8 +++++ .../ignore-warnings-stacked/warnings.json | 17 ++++++++++ .../samples/ignore-warnings/input.svelte | 7 ++++ .../samples/ignore-warnings/warnings.json | 17 ++++++++++ 13 files changed, 182 insertions(+) create mode 100644 test/validator/samples/ignore-warning/input.svelte create mode 100644 test/validator/samples/ignore-warning/warnings.json create mode 100644 test/validator/samples/ignore-warnings-cumulative/input.svelte create mode 100644 test/validator/samples/ignore-warnings-cumulative/warnings.json create mode 100644 test/validator/samples/ignore-warnings-newline/input.svelte create mode 100644 test/validator/samples/ignore-warnings-newline/warnings.json create mode 100644 test/validator/samples/ignore-warnings-stacked/input.svelte create mode 100644 test/validator/samples/ignore-warnings-stacked/warnings.json create mode 100644 test/validator/samples/ignore-warnings/input.svelte create mode 100644 test/validator/samples/ignore-warnings/warnings.json diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts index 5b08b795ce..28e8535c63 100644 --- a/src/compiler/compile/Component.ts +++ b/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; + ignore_stack: Set[] = []; 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) { diff --git a/src/compiler/compile/nodes/Comment.ts b/src/compiler/compile/nodes/Comment.ts index 97a28f25a1..161150bd25 100644 --- a/src/compiler/compile/nodes/Comment.ts +++ b/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) : []; } } \ No newline at end of file diff --git a/src/compiler/compile/nodes/shared/map_children.ts b/src/compiler/compile/nodes/shared/map_children.ts index 71d764a889..4072b176e5 100644 --- a/src/compiler/compile/nodes/shared/map_children.ts +++ b/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; diff --git a/test/validator/samples/ignore-warning/input.svelte b/test/validator/samples/ignore-warning/input.svelte new file mode 100644 index 0000000000..c4e7556d74 --- /dev/null +++ b/test/validator/samples/ignore-warning/input.svelte @@ -0,0 +1,7 @@ + +
+ + but this is still discouraged +
+ + \ No newline at end of file diff --git a/test/validator/samples/ignore-warning/warnings.json b/test/validator/samples/ignore-warning/warnings.json new file mode 100644 index 0000000000..6123fafae8 --- /dev/null +++ b/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 elements", + "pos": 83, + "start": { + "character": 83, + "column": 1, + "line": 4 + } + }, + { + "code": "a11y-missing-attribute", + "end": { + "character": 162, + "column": 22, + "line": 7 + }, + "message": "A11y: element should have an alt attribute", + "pos": 140, + "start": { + "character": 140, + "column": 0, + "line": 7 + } + } +] \ No newline at end of file diff --git a/test/validator/samples/ignore-warnings-cumulative/input.svelte b/test/validator/samples/ignore-warnings-cumulative/input.svelte new file mode 100644 index 0000000000..2843a890ce --- /dev/null +++ b/test/validator/samples/ignore-warnings-cumulative/input.svelte @@ -0,0 +1,17 @@ + +
+
+ + +
potato
+ +
+ + +
+ + +
potato
+ +
+
\ No newline at end of file diff --git a/test/validator/samples/ignore-warnings-cumulative/warnings.json b/test/validator/samples/ignore-warnings-cumulative/warnings.json new file mode 100644 index 0000000000..3ab413824d --- /dev/null +++ b/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 elements", + "pos": 104, + "start": { + "character": 104, + "column": 2, + "line": 5 + } + } +] \ No newline at end of file diff --git a/test/validator/samples/ignore-warnings-newline/input.svelte b/test/validator/samples/ignore-warnings-newline/input.svelte new file mode 100644 index 0000000000..c75a91c630 --- /dev/null +++ b/test/validator/samples/ignore-warnings-newline/input.svelte @@ -0,0 +1,8 @@ + +
+ + but this is still discouraged +
+ + \ No newline at end of file diff --git a/test/validator/samples/ignore-warnings-newline/warnings.json b/test/validator/samples/ignore-warnings-newline/warnings.json new file mode 100644 index 0000000000..8247468444 --- /dev/null +++ b/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: element should have an alt attribute", + "pos": 185, + "start": { + "character": 185, + "column": 0, + "line": 8 + } + } +] \ No newline at end of file diff --git a/test/validator/samples/ignore-warnings-stacked/input.svelte b/test/validator/samples/ignore-warnings-stacked/input.svelte new file mode 100644 index 0000000000..c6edb7240a --- /dev/null +++ b/test/validator/samples/ignore-warnings-stacked/input.svelte @@ -0,0 +1,8 @@ + + +
+ + but this is still discouraged +
+ + \ No newline at end of file diff --git a/test/validator/samples/ignore-warnings-stacked/warnings.json b/test/validator/samples/ignore-warnings-stacked/warnings.json new file mode 100644 index 0000000000..dd647d7cb2 --- /dev/null +++ b/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: element should have an alt attribute", + "pos": 189, + "start": { + "character": 189, + "column": 0, + "line": 8 + } + } +] \ No newline at end of file diff --git a/test/validator/samples/ignore-warnings/input.svelte b/test/validator/samples/ignore-warnings/input.svelte new file mode 100644 index 0000000000..5fd7229f9a --- /dev/null +++ b/test/validator/samples/ignore-warnings/input.svelte @@ -0,0 +1,7 @@ + +
+ + but this is still discouraged +
+ + \ No newline at end of file diff --git a/test/validator/samples/ignore-warnings/warnings.json b/test/validator/samples/ignore-warnings/warnings.json new file mode 100644 index 0000000000..576dfe76f4 --- /dev/null +++ b/test/validator/samples/ignore-warnings/warnings.json @@ -0,0 +1,17 @@ +[ + { + "code": "a11y-missing-attribute", + "end": { + "character": 188, + "column": 22, + "line": 7 + }, + "message": "A11y: element should have an alt attribute", + "pos": 166, + "start": { + "character": 166, + "column": 0, + "line": 7 + } + } +] \ No newline at end of file From 8170d4f455a0ce036ef0ce633d90b4548285da20 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sun, 4 Aug 2019 12:16:06 -0400 Subject: [PATCH 2/2] add docs --- site/content/docs/02-template-syntax.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 3d396f2f24..ae07c90993 100644 --- a/site/content/docs/02-template-syntax.md +++ b/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 + +

Hello world

+``` + +--- + +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 + + +``` + + ### {#if ...} ```sv