mirror of https://github.com/sveltejs/svelte
Michael Leahy
4 years ago
committed by
GitHub
commit
e762949b68
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"title": "Debugging"
|
|
||||||
}
|
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Special tags"
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
export default {
|
||||||
|
warnings: [{
|
||||||
|
filename: 'SvelteComponent.svelte',
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector "img[alt=""]"',
|
||||||
|
start: {
|
||||||
|
character: 87,
|
||||||
|
column: 1,
|
||||||
|
line: 8
|
||||||
|
},
|
||||||
|
end: {
|
||||||
|
character: 98,
|
||||||
|
column: 12,
|
||||||
|
line: 8
|
||||||
|
},
|
||||||
|
pos: 87,
|
||||||
|
frame: `
|
||||||
|
6: }
|
||||||
|
7:
|
||||||
|
8: img[alt=""] {
|
||||||
|
^
|
||||||
|
9: border: 1px solid red;
|
||||||
|
10: }`
|
||||||
|
}]
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
img[alt].svelte-xyz{border:1px solid green}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<img alt="a foo" class="svelte-xyz" src="foo.jpg">
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<img src="foo.jpg" alt="a foo" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
img[alt] {
|
||||||
|
border: 1px solid green;
|
||||||
|
}
|
||||||
|
|
||||||
|
img[alt=""] {
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
add_render_callback,
|
||||||
|
attr,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
listen,
|
||||||
|
noop,
|
||||||
|
safe_not_equal,
|
||||||
|
set_data,
|
||||||
|
space,
|
||||||
|
src_url_equal,
|
||||||
|
text
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let img;
|
||||||
|
let img_src_value;
|
||||||
|
let t0;
|
||||||
|
let t1;
|
||||||
|
let t2;
|
||||||
|
let t3;
|
||||||
|
let mounted;
|
||||||
|
let dispose;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
img = element("img");
|
||||||
|
t0 = space();
|
||||||
|
t1 = text(/*naturalWidth*/ ctx[0]);
|
||||||
|
t2 = text(" x ");
|
||||||
|
t3 = text(/*naturalHeight*/ ctx[1]);
|
||||||
|
if (!src_url_equal(img.src, img_src_value = "something.jpg")) attr(img, "src", img_src_value);
|
||||||
|
if (/*naturalWidth*/ ctx[0] === void 0 || /*naturalHeight*/ ctx[1] === void 0) add_render_callback(() => /*img_load_handler*/ ctx[2].call(img));
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, img, anchor);
|
||||||
|
insert(target, t0, anchor);
|
||||||
|
insert(target, t1, anchor);
|
||||||
|
insert(target, t2, anchor);
|
||||||
|
insert(target, t3, anchor);
|
||||||
|
|
||||||
|
if (!mounted) {
|
||||||
|
dispose = listen(img, "load", /*img_load_handler*/ ctx[2]);
|
||||||
|
mounted = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
p(ctx, [dirty]) {
|
||||||
|
if (dirty & /*naturalWidth*/ 1) set_data(t1, /*naturalWidth*/ ctx[0]);
|
||||||
|
if (dirty & /*naturalHeight*/ 2) set_data(t3, /*naturalHeight*/ ctx[1]);
|
||||||
|
},
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(img);
|
||||||
|
if (detaching) detach(t0);
|
||||||
|
if (detaching) detach(t1);
|
||||||
|
if (detaching) detach(t2);
|
||||||
|
if (detaching) detach(t3);
|
||||||
|
mounted = false;
|
||||||
|
dispose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function instance($$self, $$props, $$invalidate) {
|
||||||
|
let { naturalWidth = 0 } = $$props;
|
||||||
|
let { naturalHeight = 0 } = $$props;
|
||||||
|
|
||||||
|
function img_load_handler() {
|
||||||
|
naturalWidth = this.naturalWidth;
|
||||||
|
naturalHeight = this.naturalHeight;
|
||||||
|
$$invalidate(0, naturalWidth);
|
||||||
|
$$invalidate(1, naturalHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
$$self.$$set = $$props => {
|
||||||
|
if ('naturalWidth' in $$props) $$invalidate(0, naturalWidth = $$props.naturalWidth);
|
||||||
|
if ('naturalHeight' in $$props) $$invalidate(1, naturalHeight = $$props.naturalHeight);
|
||||||
|
};
|
||||||
|
|
||||||
|
return [naturalWidth, naturalHeight, img_load_handler];
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, { naturalWidth: 0, naturalHeight: 1 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<script>
|
||||||
|
export let naturalWidth = 0;
|
||||||
|
export let naturalHeight = 0;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<img src="something.jpg" bind:naturalWidth bind:naturalHeight>
|
||||||
|
|
||||||
|
{naturalWidth} x {naturalHeight}
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
noop,
|
||||||
|
safe_not_equal,
|
||||||
|
set_data,
|
||||||
|
space,
|
||||||
|
text
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let h1;
|
||||||
|
let t3;
|
||||||
|
let t4;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
h1 = element("h1");
|
||||||
|
h1.textContent = `Hello ${name}!`;
|
||||||
|
t3 = space();
|
||||||
|
t4 = text(/*foo*/ ctx[0]);
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, h1, anchor);
|
||||||
|
insert(target, t3, anchor);
|
||||||
|
insert(target, t4, anchor);
|
||||||
|
},
|
||||||
|
p(ctx, [dirty]) {
|
||||||
|
if (dirty & /*foo*/ 1) set_data(t4, /*foo*/ ctx[0]);
|
||||||
|
},
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(h1);
|
||||||
|
if (detaching) detach(t3);
|
||||||
|
if (detaching) detach(t4);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let name = 'world';
|
||||||
|
|
||||||
|
function instance($$self) {
|
||||||
|
let foo;
|
||||||
|
$: foo = name + name;
|
||||||
|
return [foo];
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
let name = 'world';
|
||||||
|
$: foo = name + name;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>Hello {name}!</h1>
|
||||||
|
{foo}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
async test({ assert, component }) {
|
||||||
|
assert.equal(component.toggle, true);
|
||||||
|
assert.equal(component.offsetHeight, 800);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
export let offsetHeight;
|
||||||
|
export let offsetWidth;
|
||||||
|
export let toggle = false;
|
||||||
|
$: if (offsetWidth) {
|
||||||
|
toggle = true;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class:toggle>
|
||||||
|
<div bind:offsetHeight bind:offsetWidth>{offsetHeight}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.toggle > div {
|
||||||
|
height: 800px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
<script>
|
||||||
|
import { afterUpdate, onDestroy } from "svelte";
|
||||||
|
|
||||||
|
export let id;
|
||||||
|
export let items;
|
||||||
|
|
||||||
|
let item = $items[id];
|
||||||
|
let selected = true;
|
||||||
|
|
||||||
|
function onClick() {
|
||||||
|
selected = !selected;
|
||||||
|
items.set({});
|
||||||
|
}
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
console.log("onDestroy");
|
||||||
|
});
|
||||||
|
|
||||||
|
afterUpdate(() => {
|
||||||
|
console.log("afterUpdate");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click="{onClick}">Click Me</button>
|
||||||
|
{#if selected}
|
||||||
|
<div>{item.id}</div>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<button>Click Me</button>
|
||||||
|
<div>1</div>
|
||||||
|
`,
|
||||||
|
async test({ assert, target, window }) {
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
const event = new window.MouseEvent('click');
|
||||||
|
const messages = [];
|
||||||
|
const log = console.log;
|
||||||
|
console.log = msg => messages.push(msg);
|
||||||
|
await button.dispatchEvent(event);
|
||||||
|
console.log = log;
|
||||||
|
assert.deepEqual(messages, ['afterUpdate', 'onDestroy']);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import Component from "./Component.svelte";
|
||||||
|
|
||||||
|
let items = writable({ 1: { id: 1 } });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each Object.values($items) as item (item.id)}
|
||||||
|
<Component id="{item.id}" {items} />
|
||||||
|
{/each}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<a href="/foo" aria-label="baz"></a>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
[]
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!-- VALID -->
|
||||||
|
<input />
|
||||||
|
<input tabindex="0" />
|
||||||
|
<input aria-activedescendant="some-id" />
|
||||||
|
<input aria-activedescendant="some-id" tabindex={0} />
|
||||||
|
<input aria-activedescendant="some-id" tabindex={1} />
|
||||||
|
<input aria-activedescendant="some-id" tabindex="0" />
|
||||||
|
<input aria-activedescendant="some-id" tabindex={-1} />
|
||||||
|
<input aria-activedescendant="some-id" tabindex="-1" />
|
||||||
|
|
||||||
|
<div />
|
||||||
|
<div aria-activedescendant="some-id" role="tablist" tabindex={-1} />
|
||||||
|
<div aria-activedescendant="some-id" role="tablist" tabindex="-1" />
|
||||||
|
|
||||||
|
<!-- INVALID -->
|
||||||
|
<div aria-activedescendant="some-id" />
|
||||||
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "a11y-aria-activedescendant-has-tabindex",
|
||||||
|
"end": {
|
||||||
|
"character": 568,
|
||||||
|
"column": 36,
|
||||||
|
"line": 16
|
||||||
|
},
|
||||||
|
"message": "A11y: Elements with attribute aria-activedescendant should have tabindex value",
|
||||||
|
"pos": 537,
|
||||||
|
"start": {
|
||||||
|
"character": 537,
|
||||||
|
"column": 5,
|
||||||
|
"line": 16
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
Loading…
Reference in new issue