mirror of https://github.com/sveltejs/svelte
rixo
6 years ago
commit
e478e1f7b1
@ -0,0 +1,26 @@
|
|||||||
|
<script>
|
||||||
|
import contributors from '../_contributors.js';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.contributor {
|
||||||
|
width: 2.4em;
|
||||||
|
height: 2.4em;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-indent: -9999px;
|
||||||
|
display: inline-block;
|
||||||
|
background: no-repeat url(/contributors.jpg);
|
||||||
|
background-size: auto 102%;
|
||||||
|
margin: 0 0.5em 0.5em 0;
|
||||||
|
border: 2px solid var(--second);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
{#each contributors as contributor, i}
|
||||||
|
<a
|
||||||
|
class="contributor"
|
||||||
|
style="background-position: {(100 * i) / (contributors.length - 1)}% 0"
|
||||||
|
href="https://github.com/{contributor}">
|
||||||
|
{contributor}
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
append,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
listen,
|
||||||
|
noop,
|
||||||
|
safe_not_equal,
|
||||||
|
set_data,
|
||||||
|
space,
|
||||||
|
text
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let input;
|
||||||
|
let t0;
|
||||||
|
let h1;
|
||||||
|
let t1;
|
||||||
|
let t2;
|
||||||
|
let dispose;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
input = element("input");
|
||||||
|
t0 = space();
|
||||||
|
h1 = element("h1");
|
||||||
|
t1 = text(/*name*/ ctx[0]);
|
||||||
|
t2 = text("!");
|
||||||
|
input.value = /*name*/ ctx[0];
|
||||||
|
dispose = listen(input, "input", /*onInput*/ ctx[1]);
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, input, anchor);
|
||||||
|
insert(target, t0, anchor);
|
||||||
|
insert(target, h1, anchor);
|
||||||
|
append(h1, t1);
|
||||||
|
append(h1, t2);
|
||||||
|
},
|
||||||
|
p(ctx, [dirty]) {
|
||||||
|
if (dirty & /*name*/ 1 && input.value !== /*name*/ ctx[0]) {
|
||||||
|
input.value = /*name*/ ctx[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]);
|
||||||
|
},
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(input);
|
||||||
|
if (detaching) detach(t0);
|
||||||
|
if (detaching) detach(h1);
|
||||||
|
dispose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function instance($$self, $$props, $$invalidate) {
|
||||||
|
let name = "change me";
|
||||||
|
|
||||||
|
function onInput(event) {
|
||||||
|
$$invalidate(0, name = event.target.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
return [name, onInput];
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
let name = 'change me';
|
||||||
|
|
||||||
|
function onInput(event) {
|
||||||
|
name = event.target.value
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input value={name} on:input={onInput}>
|
||||||
|
|
||||||
|
<h1>{name}!</h1>
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
const value = [];
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
value,
|
||||||
|
},
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const inputs = target.querySelectorAll('input');
|
||||||
|
|
||||||
|
const event = new window.Event('input');
|
||||||
|
|
||||||
|
for (const input of inputs) {
|
||||||
|
input.value = 'h';
|
||||||
|
await input.dispatchEvent(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
assert.deepEqual(value, [
|
||||||
|
'1',
|
||||||
|
'2',
|
||||||
|
'3',
|
||||||
|
'4',
|
||||||
|
'5',
|
||||||
|
'6',
|
||||||
|
'7',
|
||||||
|
'8',
|
||||||
|
'9',
|
||||||
|
'10',
|
||||||
|
'11',
|
||||||
|
'12',
|
||||||
|
'13',
|
||||||
|
'14',
|
||||||
|
'15',
|
||||||
|
'16',
|
||||||
|
'17',
|
||||||
|
'18',
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
<script>
|
||||||
|
export let value = [];
|
||||||
|
|
||||||
|
function one(elem) { elem.addEventListener('input', () => { value.push('1'); }); }
|
||||||
|
function four(elem) { elem.addEventListener('input', () => { value.push('4'); }); }
|
||||||
|
function eight(elem) { elem.addEventListener('input', () => { value.push('8'); }); }
|
||||||
|
function twelve(elem) { elem.addEventListener('input', () => { value.push('12'); }); }
|
||||||
|
function fifteen(elem) { elem.addEventListener('input', () => { value.push('15'); }); }
|
||||||
|
function seventeen(elem) { elem.addEventListener('input', () => { value.push('17'); }); }
|
||||||
|
|
||||||
|
const foo = {
|
||||||
|
set two(v) { value.push('2'); },
|
||||||
|
set six(v) { value.push('6'); },
|
||||||
|
set nine(v) { value.push('9'); },
|
||||||
|
set eleven(v) { value.push('11'); },
|
||||||
|
set thirteen(v) { value.push('13'); },
|
||||||
|
set sixteen(v) { value.push('16'); },
|
||||||
|
}
|
||||||
|
|
||||||
|
function three() { value.push('3'); }
|
||||||
|
function five() { value.push('5'); }
|
||||||
|
function seven() { value.push('7'); }
|
||||||
|
function ten() { value.push('10'); }
|
||||||
|
function fourteen() { value.push('14'); }
|
||||||
|
function eighteen() { value.push('18'); }
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input use:one bind:value={foo.two} on:input={three} />
|
||||||
|
<input use:four on:input={five} bind:value={foo.six} />
|
||||||
|
<input on:input={seven} use:eight bind:value={foo.nine} />
|
||||||
|
<input on:input={ten} bind:value={foo.eleven} use:twelve />
|
||||||
|
<input bind:value={foo.thirteen} on:input={fourteen} use:fifteen />
|
||||||
|
<input bind:value={foo.sixteen} use:seventeen on:input={eighteen} />
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
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');
|
||||||
|
let err = "";
|
||||||
|
window.addEventListener('error', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
err = e.message;
|
||||||
|
});
|
||||||
|
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
assert.equal(err, "", err);
|
||||||
|
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.f = () => number = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHandler2(){
|
||||||
|
clickHandler.f = () => 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.f}>click</button>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
export default {
|
||||||
|
html: `<button>undef</button>
|
||||||
|
<button>null</button>
|
||||||
|
<button>invalid</button>`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const [buttonUndef, buttonNull, buttonInvalid] = target.querySelectorAll(
|
||||||
|
'button'
|
||||||
|
);
|
||||||
|
|
||||||
|
const event = new window.MouseEvent('click');
|
||||||
|
let err = "";
|
||||||
|
window.addEventListener('error', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
err = e.message;
|
||||||
|
});
|
||||||
|
|
||||||
|
// All three should not throw if proper checking is done in runtime code
|
||||||
|
await buttonUndef.dispatchEvent(event);
|
||||||
|
assert.equal(err, "", err);
|
||||||
|
|
||||||
|
await buttonNull.dispatchEvent(event);
|
||||||
|
assert.equal(err, "", err);
|
||||||
|
|
||||||
|
await buttonInvalid.dispatchEvent(event);
|
||||||
|
assert.equal(err, "", err);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
let handlerUndef;
|
||||||
|
let handlerNull;
|
||||||
|
let handlerInvalid;
|
||||||
|
|
||||||
|
handlerUndef = undefined;
|
||||||
|
handlerNull = null;
|
||||||
|
handlerInvalid = 42;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={handlerUndef}>undef</button>
|
||||||
|
<button on:click={handlerNull}>null</button>
|
||||||
|
<button on:click={handlerInvalid}>invalid</button>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<button>0</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
const event = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
assert.equal(component.count, 1);
|
||||||
|
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
assert.equal(component.count, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
let f;
|
||||||
|
export let count = 0;
|
||||||
|
f = () => count += 1;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click|once="{f}">{count}</button>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<button>click me</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
const event = new window.MouseEvent('click', {
|
||||||
|
cancelable: true
|
||||||
|
});
|
||||||
|
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
|
||||||
|
assert.ok(component.default_was_prevented);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
export let default_was_prevented;
|
||||||
|
let f;
|
||||||
|
|
||||||
|
function handle_click(event) {
|
||||||
|
default_was_prevented = event.defaultPrevented;
|
||||||
|
}
|
||||||
|
f = handle_click;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click|preventDefault={f}>click me</button>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>
|
||||||
|
<button>click me</button>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
const event = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
|
||||||
|
assert.ok(!component.inner_clicked);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
export let inner_clicked;
|
||||||
|
let f;
|
||||||
|
|
||||||
|
function handle_click(event) {
|
||||||
|
inner_clicked = true;
|
||||||
|
}
|
||||||
|
f = handle_click;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div on:click|self={f}>
|
||||||
|
<button>click me</button>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>
|
||||||
|
<button>click me</button>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
const event = new window.MouseEvent('click', {
|
||||||
|
bubbles: true
|
||||||
|
});
|
||||||
|
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
|
||||||
|
assert.ok(component.inner_clicked);
|
||||||
|
assert.ok(!component.outer_clicked);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<script>
|
||||||
|
export let inner_clicked;
|
||||||
|
export let outer_clicked;
|
||||||
|
let f1;
|
||||||
|
let f2;
|
||||||
|
|
||||||
|
function handle_inner_click(event) {
|
||||||
|
inner_clicked = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handle_outer_click(event) {
|
||||||
|
outer_clicked = true;
|
||||||
|
}
|
||||||
|
f1 = handle_inner_click;
|
||||||
|
f2 = handle_outer_click;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div on:click={f2}>
|
||||||
|
<button on:click|stopPropagation={f1}>click me</button>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<button>click me</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
const event = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
assert.equal(component.clickHandlerOne, 1);
|
||||||
|
assert.equal(component.clickHandlerTwo, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
export let clickHandlerOne = 0;
|
||||||
|
export let clickHandlerTwo = 0;
|
||||||
|
let f1;
|
||||||
|
let f2;
|
||||||
|
|
||||||
|
f1 = () => clickHandlerOne++;
|
||||||
|
f2 = () => clickHandlerTwo++;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click='{f1}' on:click='{f2}'>click me</button>
|
||||||
Loading…
Reference in new issue