mirror of https://github.com/sveltejs/svelte
Rich Harris
6 years ago
commit
b44ee82464
|
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 EventHandler from '../../../nodes/EventHandler';
|
||||
import { x, p } from 'code-red';
|
||||
|
||||
const TRUE = x`true`;
|
||||
const FALSE = x`false`;
|
||||
import EventHandler from '../Element/EventHandler';
|
||||
|
||||
export default function add_event_handlers(
|
||||
block: Block,
|
||||
target: string,
|
||||
handlers: EventHandler[]
|
||||
) {
|
||||
handlers.forEach(handler => {
|
||||
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})`
|
||||
);
|
||||
});
|
||||
handlers.forEach(handler => handler.render(block, target));
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
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>
|
||||
@ -1,10 +1,37 @@
|
||||
import { env, useFakeTimers } from "../../../helpers";
|
||||
|
||||
let clock;
|
||||
|
||||
export default {
|
||||
skip: true, // JSDOM
|
||||
before_test() {
|
||||
clock = useFakeTimers();
|
||||
|
||||
const window = env();
|
||||
Object.defineProperties(window, {
|
||||
pageYOffset: {
|
||||
value: 0,
|
||||
configurable: true
|
||||
},
|
||||
pageXOffset: {
|
||||
value: 0,
|
||||
configurable: true
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
test({ assert, component, target, window }) {
|
||||
after_test() {
|
||||
clock.removeFakeTimers();
|
||||
clock = null;
|
||||
},
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
assert.equal(window.pageYOffset, 0);
|
||||
|
||||
// clear the previous 'scrolling' state
|
||||
clock.flush();
|
||||
component.scrollY = 100;
|
||||
|
||||
clock.flush();
|
||||
assert.equal(window.pageYOffset, 100);
|
||||
}
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
export default {
|
||||
skip_if_ssr: true,
|
||||
before_test() {
|
||||
Object.defineProperties(window, {
|
||||
pageYOffset: {
|
||||
value: 0,
|
||||
configurable: true,
|
||||
},
|
||||
});
|
||||
},
|
||||
async test({ assert, component, target, window }) {
|
||||
assert.equal(window.pageYOffset, 0);
|
||||
|
||||
const event = new window.Event('scroll');
|
||||
Object.defineProperties(window, {
|
||||
pageYOffset: {
|
||||
value: 234,
|
||||
configurable: true,
|
||||
},
|
||||
});
|
||||
|
||||
await window.dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<p style="position: fixed; top: 1em; left: 1em;">scroll\ny\nis\n234.\n234\n*\n234\n=\n54756</p><div style="height: 9999px;"></div>`
|
||||
);
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import { writable, derived } from 'svelte/store';
|
||||
const y = writable(0);
|
||||
const y_squared = derived(y, $y => $y * $y);
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY={$y}/>
|
||||
|
||||
<p style="position: fixed; top: 1em; left: 1em;">
|
||||
scroll y is {$y}. {$y} * {$y} = {$y_squared}
|
||||
</p>
|
||||
|
||||
<div style="height: 9999px">
|
||||
|
||||
</div>
|
||||
Loading…
Reference in new issue