mirror of https://github.com/sveltejs/svelte
Stefan Hagen
6 years ago
committed by
GitHub
commit
c289c491b0
|
Before Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,69 @@
|
|||||||
|
import EventHandler from '../../../nodes/EventHandler';
|
||||||
|
import Wrapper from '../shared/Wrapper';
|
||||||
|
import Block from '../../Block';
|
||||||
|
import { b, x, p } from 'code-red';
|
||||||
|
|
||||||
|
const TRUE = x`true`;
|
||||||
|
const FALSE = x`false`;
|
||||||
|
|
||||||
|
export default class EventHandlerWrapper {
|
||||||
|
node: EventHandler;
|
||||||
|
parent: Wrapper;
|
||||||
|
|
||||||
|
constructor(node: EventHandler, parent: Wrapper) {
|
||||||
|
this.node = node;
|
||||||
|
this.parent = parent;
|
||||||
|
|
||||||
|
if (!node.expression) {
|
||||||
|
this.parent.renderer.component.add_var({
|
||||||
|
name: node.handler_name.name,
|
||||||
|
internal: true,
|
||||||
|
referenced: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.parent.renderer.component.partly_hoisted.push(b`
|
||||||
|
function ${node.handler_name.name}(event) {
|
||||||
|
@bubble($$self, event);
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get_snippet(block) {
|
||||||
|
const snippet = this.node.expression ? this.node.expression.manipulate(block) : x`#ctx.${this.node.handler_name}`;
|
||||||
|
|
||||||
|
if (this.node.reassigned) {
|
||||||
|
block.maintain_context = true;
|
||||||
|
return x`function () { ${snippet}.apply(this, arguments); }`;
|
||||||
|
}
|
||||||
|
return snippet;
|
||||||
|
}
|
||||||
|
|
||||||
|
render(block: Block, target: string) {
|
||||||
|
let snippet = this.get_snippet(block);
|
||||||
|
|
||||||
|
if (this.node.modifiers.has('preventDefault')) snippet = x`@prevent_default(${snippet})`;
|
||||||
|
if (this.node.modifiers.has('stopPropagation')) snippet = x`@stop_propagation(${snippet})`;
|
||||||
|
if (this.node.modifiers.has('self')) snippet = x`@self(${snippet})`;
|
||||||
|
|
||||||
|
const args = [];
|
||||||
|
|
||||||
|
const opts = ['passive', 'once', 'capture'].filter(mod => this.node.modifiers.has(mod));
|
||||||
|
if (opts.length) {
|
||||||
|
args.push((opts.length === 1 && opts[0] === 'capture')
|
||||||
|
? TRUE
|
||||||
|
: x`{ ${opts.map(opt => p`${opt}: true`)} }`);
|
||||||
|
} else if (block.renderer.options.dev) {
|
||||||
|
args.push(FALSE);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (block.renderer.options.dev) {
|
||||||
|
args.push(this.node.modifiers.has('stopPropagation') ? TRUE : FALSE);
|
||||||
|
args.push(this.node.modifiers.has('preventDefault') ? TRUE : FALSE);
|
||||||
|
}
|
||||||
|
|
||||||
|
block.event_listeners.push(
|
||||||
|
x`@listen(${target}, "${this.node.name}", ${snippet}, ${args})`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,39 +1,10 @@
|
|||||||
import Block from '../../Block';
|
import Block from '../../Block';
|
||||||
import EventHandler from '../../../nodes/EventHandler';
|
import EventHandler from '../Element/EventHandler';
|
||||||
import { x, p } from 'code-red';
|
|
||||||
|
|
||||||
const TRUE = x`true`;
|
|
||||||
const FALSE = x`false`;
|
|
||||||
|
|
||||||
export default function add_event_handlers(
|
export default function add_event_handlers(
|
||||||
block: Block,
|
block: Block,
|
||||||
target: string,
|
target: string,
|
||||||
handlers: EventHandler[]
|
handlers: EventHandler[]
|
||||||
) {
|
) {
|
||||||
handlers.forEach(handler => {
|
handlers.forEach(handler => handler.render(block, target));
|
||||||
let snippet = handler.render(block);
|
|
||||||
if (handler.modifiers.has('preventDefault')) snippet = x`@prevent_default(${snippet})`;
|
|
||||||
if (handler.modifiers.has('stopPropagation')) snippet = x`@stop_propagation(${snippet})`;
|
|
||||||
if (handler.modifiers.has('self')) snippet = x`@self(${snippet})`;
|
|
||||||
|
|
||||||
const args = [];
|
|
||||||
|
|
||||||
const opts = ['passive', 'once', 'capture'].filter(mod => handler.modifiers.has(mod));
|
|
||||||
if (opts.length) {
|
|
||||||
args.push((opts.length === 1 && opts[0] === 'capture')
|
|
||||||
? TRUE
|
|
||||||
: x`{ ${opts.map(opt => p`${opt}: true`)} }`);
|
|
||||||
} else if (block.renderer.options.dev) {
|
|
||||||
args.push(FALSE);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (block.renderer.options.dev) {
|
|
||||||
args.push(handler.modifiers.has('stopPropagation') ? TRUE : FALSE);
|
|
||||||
args.push(handler.modifiers.has('preventDefault') ? TRUE : FALSE);
|
|
||||||
}
|
|
||||||
|
|
||||||
block.event_listeners.push(
|
|
||||||
x`@listen(${target}, "${handler.name}", ${snippet}, ${args})`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,156 +1,8 @@
|
|||||||
import { walk } from 'estree-walker';
|
import { Node } from 'estree';
|
||||||
import is_reference from 'is-reference';
|
import { analyze, Scope, extract_names, extract_identifiers } from 'periscopic';
|
||||||
import { Node, VariableDeclaration, ClassDeclaration, VariableDeclarator, ObjectPattern, Property, RestElement, ArrayPattern, Identifier } from 'estree';
|
|
||||||
import get_object from './get_object';
|
|
||||||
|
|
||||||
// TODO replace this with periscopic?
|
|
||||||
export function create_scopes(expression: Node) {
|
export function create_scopes(expression: Node) {
|
||||||
const map = new WeakMap();
|
return analyze(expression);
|
||||||
|
|
||||||
const globals: Map<string, Node> = new Map();
|
|
||||||
let scope = new Scope(null, false);
|
|
||||||
|
|
||||||
walk(expression, {
|
|
||||||
enter(node, parent) {
|
|
||||||
if (node.type === 'ImportDeclaration') {
|
|
||||||
node.specifiers.forEach(specifier => {
|
|
||||||
scope.declarations.set(specifier.local.name, specifier);
|
|
||||||
});
|
|
||||||
} else if (node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') {
|
|
||||||
if (node.type === 'FunctionDeclaration') {
|
|
||||||
scope.declarations.set(node.id.name, node);
|
|
||||||
scope = new Scope(scope, false);
|
|
||||||
map.set(node, scope);
|
|
||||||
} else {
|
|
||||||
scope = new Scope(scope, false);
|
|
||||||
map.set(node, scope);
|
|
||||||
if (node.type === 'FunctionExpression' && node.id) {
|
|
||||||
scope.declarations.set(node.id.name, node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
node.params.forEach((param) => {
|
|
||||||
extract_names(param).forEach(name => {
|
|
||||||
scope.declarations.set(name, node);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} else if (/For(?:In|Of)?Statement/.test(node.type)) {
|
|
||||||
scope = new Scope(scope, true);
|
|
||||||
map.set(node, scope);
|
|
||||||
} else if (node.type === 'BlockStatement') {
|
|
||||||
scope = new Scope(scope, true);
|
|
||||||
map.set(node, scope);
|
|
||||||
} else if (node.type === 'ClassDeclaration' || node.type === 'VariableDeclaration') {
|
|
||||||
scope.add_declaration(node);
|
|
||||||
} else if (node.type === 'CatchClause') {
|
|
||||||
scope = new Scope(scope, true);
|
|
||||||
map.set(node, scope);
|
|
||||||
|
|
||||||
extract_names(node.param).forEach(name => {
|
|
||||||
scope.declarations.set(name, node.param);
|
|
||||||
});
|
|
||||||
} else if (node.type === 'Identifier' && is_reference(node as Node, parent as Node)) {
|
|
||||||
if (!scope.has(node.name) && !globals.has(node.name)) {
|
|
||||||
globals.set(node.name, node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
leave(node: Node) {
|
|
||||||
if (map.has(node)) {
|
|
||||||
scope = scope.parent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
scope.declarations.forEach((_node, name) => {
|
|
||||||
globals.delete(name);
|
|
||||||
});
|
|
||||||
|
|
||||||
return { map, scope, globals };
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Scope {
|
export { Scope, extract_names, extract_identifiers };
|
||||||
parent: Scope;
|
|
||||||
block: boolean;
|
|
||||||
|
|
||||||
declarations: Map<string, Node> = new Map();
|
|
||||||
initialised_declarations: Set<string> = new Set();
|
|
||||||
|
|
||||||
constructor(parent: Scope, block: boolean) {
|
|
||||||
this.parent = parent;
|
|
||||||
this.block = block;
|
|
||||||
}
|
|
||||||
|
|
||||||
add_declaration(node: VariableDeclaration | ClassDeclaration) {
|
|
||||||
if (node.type === 'VariableDeclaration') {
|
|
||||||
if (node.kind === 'var' && this.block && this.parent) {
|
|
||||||
this.parent.add_declaration(node);
|
|
||||||
} else {
|
|
||||||
node.declarations.forEach((declarator: VariableDeclarator) => {
|
|
||||||
extract_names(declarator.id).forEach(name => {
|
|
||||||
this.declarations.set(name, node);
|
|
||||||
if (declarator.init) this.initialised_declarations.add(name);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.declarations.set(node.id.name, node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
find_owner(name: string): Scope {
|
|
||||||
if (this.declarations.has(name)) return this;
|
|
||||||
return this.parent && this.parent.find_owner(name);
|
|
||||||
}
|
|
||||||
|
|
||||||
has(name: string): boolean {
|
|
||||||
return (
|
|
||||||
this.declarations.has(name) || (this.parent && this.parent.has(name))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function extract_names(param: Node): string[] {
|
|
||||||
return extract_identifiers(param).map((node: any) => node.name);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function extract_identifiers(param: Node): Identifier[] {
|
|
||||||
const nodes: Identifier[] = [];
|
|
||||||
extractors[param.type] && extractors[param.type](nodes, param);
|
|
||||||
return nodes;
|
|
||||||
}
|
|
||||||
|
|
||||||
const extractors = {
|
|
||||||
Identifier(nodes: Node[], param: Node) {
|
|
||||||
nodes.push(param);
|
|
||||||
},
|
|
||||||
|
|
||||||
MemberExpression(nodes: Node[], param: Node) {
|
|
||||||
nodes.push(get_object(param));
|
|
||||||
},
|
|
||||||
|
|
||||||
ObjectPattern(nodes: Node[], param: ObjectPattern) {
|
|
||||||
param.properties.forEach((prop: Property | RestElement) => {
|
|
||||||
if (prop.type === 'RestElement') {
|
|
||||||
nodes.push(prop.argument);
|
|
||||||
} else {
|
|
||||||
extractors[prop.value.type](nodes, prop.value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
ArrayPattern(nodes: Node[], param: ArrayPattern) {
|
|
||||||
param.elements.forEach((element: Node) => {
|
|
||||||
if (element) extractors[element.type](nodes, element);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
RestElement(nodes: Node[], param: any) {
|
|
||||||
extractors[param.argument.type](nodes, param.argument);
|
|
||||||
},
|
|
||||||
|
|
||||||
AssignmentPattern(nodes: Node[], param: any) {
|
|
||||||
extractors[param.left.type](nodes, param.left);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|||||||
@ -0,0 +1,143 @@
|
|||||||
|
export default {
|
||||||
|
warnings: [
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
` 9: <style>
|
||||||
|
10: .foo {color: red;}
|
||||||
|
11: .fooaa {color: red;}
|
||||||
|
^
|
||||||
|
12: .foobb {color: red;}
|
||||||
|
13: .foocc {color: red;}`,
|
||||||
|
start: { line: 11, column: 2, character: 206 },
|
||||||
|
end: { line: 11, column: 8, character: 212 },
|
||||||
|
pos: 206,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`10: .foo {color: red;}
|
||||||
|
11: .fooaa {color: red;}
|
||||||
|
12: .foobb {color: red;}
|
||||||
|
^
|
||||||
|
13: .foocc {color: red;}
|
||||||
|
14: .foodd {color: red;}`,
|
||||||
|
start: { line: 12, column: 2, character: 229 },
|
||||||
|
end: { line: 12, column: 8, character: 235 },
|
||||||
|
pos: 229,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`12: .foobb {color: red;}
|
||||||
|
13: .foocc {color: red;}
|
||||||
|
14: .foodd {color: red;}
|
||||||
|
^
|
||||||
|
15: .aa {color: red;}
|
||||||
|
16: .bb {color: red;}`,
|
||||||
|
start: { line: 14, column: 2, character: 275 },
|
||||||
|
end: { line: 14, column: 8, character: 281 },
|
||||||
|
pos: 275,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`18: .dd {color: red;}
|
||||||
|
19: .aabar {color: red;}
|
||||||
|
20: .bbbar {color: red;}
|
||||||
|
^
|
||||||
|
21: .ccbar {color: red;}
|
||||||
|
22: .ddbar {color: red;}`,
|
||||||
|
start: { line: 20, column: 2, character: 401 },
|
||||||
|
end: { line: 20, column: 8, character: 407 },
|
||||||
|
pos: 401,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`19: .aabar {color: red;}
|
||||||
|
20: .bbbar {color: red;}
|
||||||
|
21: .ccbar {color: red;}
|
||||||
|
^
|
||||||
|
22: .ddbar {color: red;}
|
||||||
|
23: .fooaabar {color: red;}`,
|
||||||
|
start: { line: 21, column: 2, character: 424 },
|
||||||
|
end: { line: 21, column: 8, character: 430 },
|
||||||
|
pos: 424,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`20: .bbbar {color: red;}
|
||||||
|
21: .ccbar {color: red;}
|
||||||
|
22: .ddbar {color: red;}
|
||||||
|
^
|
||||||
|
23: .fooaabar {color: red;}
|
||||||
|
24: .foobbbar {color: red;}`,
|
||||||
|
start: { line: 22, column: 2, character: 447 },
|
||||||
|
end: { line: 22, column: 8, character: 453 },
|
||||||
|
pos: 447,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`21: .ccbar {color: red;}
|
||||||
|
22: .ddbar {color: red;}
|
||||||
|
23: .fooaabar {color: red;}
|
||||||
|
^
|
||||||
|
24: .foobbbar {color: red;}
|
||||||
|
25: .fooccbar {color: red;}`,
|
||||||
|
start: { line: 23, column: 2, character: 470 },
|
||||||
|
end: { line: 23, column: 11, character: 479 },
|
||||||
|
pos: 470,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`22: .ddbar {color: red;}
|
||||||
|
23: .fooaabar {color: red;}
|
||||||
|
24: .foobbbar {color: red;}
|
||||||
|
^
|
||||||
|
25: .fooccbar {color: red;}
|
||||||
|
26: .fooddbar {color: red;}`,
|
||||||
|
start: { line: 24, column: 2, character: 496 },
|
||||||
|
end: { line: 24, column: 11, character: 505 },
|
||||||
|
pos: 496,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`23: .fooaabar {color: red;}
|
||||||
|
24: .foobbbar {color: red;}
|
||||||
|
25: .fooccbar {color: red;}
|
||||||
|
^
|
||||||
|
26: .fooddbar {color: red;}
|
||||||
|
27: .baz {color: red;}`,
|
||||||
|
start: { line: 25, column: 2, character: 522 },
|
||||||
|
end: { line: 25, column: 11, character: 531 },
|
||||||
|
pos: 522,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`26: .fooddbar {color: red;}
|
||||||
|
27: .baz {color: red;}
|
||||||
|
28: .unused {color: red;}
|
||||||
|
^
|
||||||
|
29: </style>`,
|
||||||
|
start: { line: 28, column: 2, character: 595 },
|
||||||
|
end: { line: 28, column: 9, character: 602 },
|
||||||
|
pos: 595,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
.foo.svelte-xyz{color:red}.foocc.svelte-xyz{color:red}.aa.svelte-xyz{color:red}.bb.svelte-xyz{color:red}.cc.svelte-xyz{color:red}.dd.svelte-xyz{color:red}.aabar.svelte-xyz{color:red}.fooddbar.svelte-xyz{color:red}.baz.svelte-xyz{color:red}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<script>
|
||||||
|
export let a, b, c;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="foo{a ? ' aa' : b ? ' bb ' : c ? 'cc ' : 'dd'}bar baz {a ? ' aa' : b ? ' bb ' : c ? 'cc ' : 'dd'}">
|
||||||
|
some stuff
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.foo {color: red;}
|
||||||
|
.fooaa {color: red;}
|
||||||
|
.foobb {color: red;}
|
||||||
|
.foocc {color: red;}
|
||||||
|
.foodd {color: red;}
|
||||||
|
.aa {color: red;}
|
||||||
|
.bb {color: red;}
|
||||||
|
.cc {color: red;}
|
||||||
|
.dd {color: red;}
|
||||||
|
.aabar {color: red;}
|
||||||
|
.bbbar {color: red;}
|
||||||
|
.ccbar {color: red;}
|
||||||
|
.ddbar {color: red;}
|
||||||
|
.fooaabar {color: red;}
|
||||||
|
.foobbbar {color: red;}
|
||||||
|
.fooccbar {color: red;}
|
||||||
|
.fooddbar {color: red;}
|
||||||
|
.baz {color: red;}
|
||||||
|
.unused {color: red;}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
warnings: [],
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}.hover.svelte-xyz{color:blue}.hover.unused.svelte-xyz{color:blue}.unused.svelte-xyz{color:blue}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
export let active;
|
||||||
|
export let hover;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="thing {active ? 'active' : hover}">
|
||||||
|
some stuff
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.thing {color: blue;}
|
||||||
|
.active {color: blue;}
|
||||||
|
.thing.active {color: blue;}
|
||||||
|
.hover { color: blue; }
|
||||||
|
.hover.unused { color: blue; }
|
||||||
|
|
||||||
|
.unused {color: blue;}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
export default {
|
||||||
|
warnings: [
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
end: {
|
||||||
|
character: 205,
|
||||||
|
column: 9,
|
||||||
|
line: 14,
|
||||||
|
},
|
||||||
|
frame: `
|
||||||
|
12: .thing.active {color: blue;}
|
||||||
|
13:
|
||||||
|
14: .unused {color: blue;}
|
||||||
|
^
|
||||||
|
15: </style>`,
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
pos: 198,
|
||||||
|
start: {
|
||||||
|
character: 198,
|
||||||
|
column: 2,
|
||||||
|
line: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
export let active;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="thing {active ? 'active' : ''}">
|
||||||
|
some stuff
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.thing {color: blue;}
|
||||||
|
.active {color: blue;}
|
||||||
|
.thing.active {color: blue;}
|
||||||
|
|
||||||
|
.unused {color: blue;}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
export default {
|
||||||
|
warnings: [
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame: `
|
||||||
|
13: .thing.active {color: blue;}
|
||||||
|
14: .hover { color: blue; }
|
||||||
|
15: .hover.unused { color: blue; }
|
||||||
|
^
|
||||||
|
16:
|
||||||
|
17: .unused {color: blue;}`,
|
||||||
|
start: { line: 15, column: 2, character: 261 },
|
||||||
|
end: { line: 15, column: 15, character: 274 },
|
||||||
|
pos: 261,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame: `
|
||||||
|
15: .hover.unused { color: blue; }
|
||||||
|
16:
|
||||||
|
17: .unused {color: blue;}
|
||||||
|
^
|
||||||
|
18: </style>`,
|
||||||
|
start: { line: 17, column: 2, character: 295 },
|
||||||
|
end: { line: 17, column: 9, character: 302 },
|
||||||
|
pos: 295,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}.hover.svelte-xyz{color:blue}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
export let active;
|
||||||
|
export let hover;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="thing {active ? 'active' : hover ? 'hover' : ''}">
|
||||||
|
some stuff
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.thing {color: blue;}
|
||||||
|
.active {color: blue;}
|
||||||
|
.thing.active {color: blue;}
|
||||||
|
.hover { color: blue; }
|
||||||
|
.hover.unused { color: blue; }
|
||||||
|
|
||||||
|
.unused {color: blue;}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
attr,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
listen,
|
||||||
|
noop,
|
||||||
|
run_all,
|
||||||
|
safe_not_equal,
|
||||||
|
space
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let input0;
|
||||||
|
let t;
|
||||||
|
let input1;
|
||||||
|
let dispose;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
input0 = element("input");
|
||||||
|
t = space();
|
||||||
|
input1 = element("input");
|
||||||
|
attr(input0, "type", "file");
|
||||||
|
attr(input1, "type", "file");
|
||||||
|
|
||||||
|
dispose = [
|
||||||
|
listen(input0, "change", ctx.input0_change_handler),
|
||||||
|
listen(input1, "change", ctx.input1_change_handler)
|
||||||
|
];
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, input0, anchor);
|
||||||
|
insert(target, t, anchor);
|
||||||
|
insert(target, input1, anchor);
|
||||||
|
},
|
||||||
|
p: noop,
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(input0);
|
||||||
|
if (detaching) detach(t);
|
||||||
|
if (detaching) detach(input1);
|
||||||
|
run_all(dispose);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function instance($$self, $$props, $$invalidate) {
|
||||||
|
let { files } = $$props;
|
||||||
|
|
||||||
|
function input0_change_handler() {
|
||||||
|
files = this.files;
|
||||||
|
$$invalidate("files", files);
|
||||||
|
}
|
||||||
|
|
||||||
|
function input1_change_handler() {
|
||||||
|
files = this.files;
|
||||||
|
$$invalidate("files", files);
|
||||||
|
}
|
||||||
|
|
||||||
|
$$self.$set = $$props => {
|
||||||
|
if ("files" in $$props) $$invalidate("files", files = $$props.files);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
files,
|
||||||
|
input0_change_handler,
|
||||||
|
input1_change_handler
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, { files: 0 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
export let files;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input type="file" bind:files>
|
||||||
|
<input bind:files type="file">
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
|
||||||
|
|
||||||
|
function instance($$self) {
|
||||||
|
const a = 1 + 2;
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, null, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<script>
|
||||||
|
const a = 1 + 2;
|
||||||
|
</script>
|
||||||
@ -0,0 +1,107 @@
|
|||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
append,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
listen,
|
||||||
|
noop,
|
||||||
|
run_all,
|
||||||
|
safe_not_equal,
|
||||||
|
set_data,
|
||||||
|
space,
|
||||||
|
text
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let p0;
|
||||||
|
let button0;
|
||||||
|
let t1;
|
||||||
|
let button1;
|
||||||
|
let t3;
|
||||||
|
let p1;
|
||||||
|
let t4;
|
||||||
|
let t5;
|
||||||
|
let button2;
|
||||||
|
let dispose;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
p0 = element("p");
|
||||||
|
button0 = element("button");
|
||||||
|
button0.textContent = "set handler 1";
|
||||||
|
t1 = space();
|
||||||
|
button1 = element("button");
|
||||||
|
button1.textContent = "set handler 2";
|
||||||
|
t3 = space();
|
||||||
|
p1 = element("p");
|
||||||
|
t4 = text(ctx.number);
|
||||||
|
t5 = space();
|
||||||
|
button2 = element("button");
|
||||||
|
button2.textContent = "click";
|
||||||
|
|
||||||
|
dispose = [
|
||||||
|
listen(button0, "click", ctx.updateHandler1),
|
||||||
|
listen(button1, "click", ctx.updateHandler2),
|
||||||
|
listen(button2, "click", function () {
|
||||||
|
ctx.clickHandler.apply(this, arguments);
|
||||||
|
})
|
||||||
|
];
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, p0, anchor);
|
||||||
|
append(p0, button0);
|
||||||
|
append(p0, t1);
|
||||||
|
append(p0, button1);
|
||||||
|
insert(target, t3, anchor);
|
||||||
|
insert(target, p1, anchor);
|
||||||
|
append(p1, t4);
|
||||||
|
insert(target, t5, anchor);
|
||||||
|
insert(target, button2, anchor);
|
||||||
|
},
|
||||||
|
p(changed, new_ctx) {
|
||||||
|
ctx = new_ctx;
|
||||||
|
if (changed.number) set_data(t4, ctx.number);
|
||||||
|
},
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(p0);
|
||||||
|
if (detaching) detach(t3);
|
||||||
|
if (detaching) detach(p1);
|
||||||
|
if (detaching) detach(t5);
|
||||||
|
if (detaching) detach(button2);
|
||||||
|
run_all(dispose);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function instance($$self, $$props, $$invalidate) {
|
||||||
|
let clickHandler;
|
||||||
|
let number = 0;
|
||||||
|
|
||||||
|
function updateHandler1() {
|
||||||
|
$$invalidate("clickHandler", clickHandler = () => $$invalidate("number", number = 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHandler2() {
|
||||||
|
$$invalidate("clickHandler", clickHandler = () => $$invalidate("number", number = 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
clickHandler,
|
||||||
|
number,
|
||||||
|
updateHandler1,
|
||||||
|
updateHandler2
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<script>
|
||||||
|
let clickHandler;
|
||||||
|
let number = 0;
|
||||||
|
|
||||||
|
function updateHandler1(){
|
||||||
|
clickHandler = () => number = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHandler2(){
|
||||||
|
clickHandler = () => number = 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<button on:click={updateHandler1}>set handler 1</button>
|
||||||
|
<button on:click={updateHandler2}>set handler 2</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>{ number }</p>
|
||||||
|
|
||||||
|
<button on:click={clickHandler}>click</button>
|
||||||
@ -1,3 +1,8 @@
|
|||||||
export default {
|
export default {
|
||||||
html: `<span title='"foo"'>foo</span>`
|
html: `
|
||||||
|
<span title='"foo"'>
|
||||||
|
foo
|
||||||
|
<span title='"bar"'>bar</span>
|
||||||
|
</span>
|
||||||
|
`
|
||||||
};
|
};
|
||||||
@ -1 +1,4 @@
|
|||||||
<span title='"foo"'>foo</span>
|
<span title='"foo"'>
|
||||||
|
foo
|
||||||
|
<span title='"bar"'>bar</span>
|
||||||
|
</span>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<button on:click><slot></slot></button>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<button>update handler</button>
|
||||||
|
<button>0</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const [updateButton, button] = target.querySelectorAll('button');
|
||||||
|
const event = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
assert.equal(component.count, 1);
|
||||||
|
|
||||||
|
await updateButton.dispatchEvent(event);
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
assert.equal(component.count, 11);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
import Button from './Button.svelte';
|
||||||
|
export let count = 0;
|
||||||
|
let clickHandler = () => count += 1;
|
||||||
|
function updateHandler(){
|
||||||
|
clickHandler = () => count += 10;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={updateHandler}>update handler</button>
|
||||||
|
<Button on:click={clickHandler}>{count}</Button>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<button on:click><slot></slot></button>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<button>update handler</button>
|
||||||
|
<button>0</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const [updateButton, button] = target.querySelectorAll('button');
|
||||||
|
const event = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
await updateButton.dispatchEvent(event);
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
assert.equal(component.count, 10);
|
||||||
|
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
assert.equal(component.count, 10);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
import Button from './Button.svelte';
|
||||||
|
export let count = 0;
|
||||||
|
let clickHandler = () => count += 1;
|
||||||
|
function updateHandler(){
|
||||||
|
clickHandler = () => count += 10;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={updateHandler}>update handler</button>
|
||||||
|
<Button on:click|once={clickHandler}>{count}</Button>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
html: '',
|
||||||
|
};
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<script>
|
||||||
|
const a = 1 + 2;
|
||||||
|
</script>
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<p>
|
||||||
|
<button>set handler 1</button>
|
||||||
|
<button>set handler 2</button>
|
||||||
|
</p>
|
||||||
|
<p>0</p>
|
||||||
|
<button>click</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const [updateButton1, updateButton2, button] = target.querySelectorAll(
|
||||||
|
'button'
|
||||||
|
);
|
||||||
|
|
||||||
|
const event = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>
|
||||||
|
<button>set handler 1</button>
|
||||||
|
<button>set handler 2</button>
|
||||||
|
</p>
|
||||||
|
<p>0</p>
|
||||||
|
<button>click</button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await updateButton1.dispatchEvent(event);
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>
|
||||||
|
<button>set handler 1</button>
|
||||||
|
<button>set handler 2</button>
|
||||||
|
</p>
|
||||||
|
<p>1</p>
|
||||||
|
<button>click</button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await updateButton2.dispatchEvent(event);
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>
|
||||||
|
<button>set handler 1</button>
|
||||||
|
<button>set handler 2</button>
|
||||||
|
</p>
|
||||||
|
<p>2</p>
|
||||||
|
<button>click</button>
|
||||||
|
`);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<script>
|
||||||
|
let clickHandler;
|
||||||
|
let number = 0;
|
||||||
|
|
||||||
|
function updateHandler1(){
|
||||||
|
clickHandler = () => number = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHandler2(){
|
||||||
|
clickHandler = () => number = 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<button on:click={updateHandler1}>set handler 1</button>
|
||||||
|
<button on:click={updateHandler2}>set handler 2</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>{ number }</p>
|
||||||
|
|
||||||
|
<button on:click={clickHandler}>click</button>
|
||||||
Loading…
Reference in new issue