mirror of https://github.com/sveltejs/svelte
pull/8136/head
Yuichiro Yamashita
4 years ago
commit
5522a357b0
@ -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,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,171 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import {
|
||||
SvelteComponent,
|
||||
append,
|
||||
assign,
|
||||
bubble,
|
||||
detach,
|
||||
element,
|
||||
empty,
|
||||
get_spread_update,
|
||||
init,
|
||||
insert,
|
||||
listen,
|
||||
noop,
|
||||
run_all,
|
||||
safe_not_equal,
|
||||
set_attributes,
|
||||
set_custom_element_data_map
|
||||
} from "svelte/internal";
|
||||
|
||||
function create_dynamic_element(ctx) {
|
||||
let svelte_element1;
|
||||
let svelte_element0;
|
||||
let mounted;
|
||||
let dispose;
|
||||
let svelte_element0_levels = [{ class: "inner" }];
|
||||
let svelte_element0_data = {};
|
||||
|
||||
for (let i = 0; i < svelte_element0_levels.length; i += 1) {
|
||||
svelte_element0_data = assign(svelte_element0_data, svelte_element0_levels[i]);
|
||||
}
|
||||
|
||||
let svelte_element1_levels = [{ class: "outer" }];
|
||||
let svelte_element1_data = {};
|
||||
|
||||
for (let i = 0; i < svelte_element1_levels.length; i += 1) {
|
||||
svelte_element1_data = assign(svelte_element1_data, svelte_element1_levels[i]);
|
||||
}
|
||||
|
||||
return {
|
||||
c() {
|
||||
svelte_element1 = element(a);
|
||||
svelte_element0 = element(span);
|
||||
|
||||
if ((/-/).test(span)) {
|
||||
set_custom_element_data_map(svelte_element0, svelte_element0_data);
|
||||
} else {
|
||||
set_attributes(svelte_element0, svelte_element0_data);
|
||||
}
|
||||
|
||||
if ((/-/).test(a)) {
|
||||
set_custom_element_data_map(svelte_element1, svelte_element1_data);
|
||||
} else {
|
||||
set_attributes(svelte_element1, svelte_element1_data);
|
||||
}
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, svelte_element1, anchor);
|
||||
append(svelte_element1, svelte_element0);
|
||||
|
||||
if (!mounted) {
|
||||
dispose = [
|
||||
listen(svelte_element0, "keydown", /*keydown_handler_1*/ ctx[2]),
|
||||
listen(svelte_element0, "keyup", /*keyup_handler_1*/ ctx[3]),
|
||||
listen(svelte_element1, "keydown", /*keydown_handler*/ ctx[0]),
|
||||
listen(svelte_element1, "keyup", /*keyup_handler*/ ctx[1])
|
||||
];
|
||||
|
||||
mounted = true;
|
||||
}
|
||||
},
|
||||
p(ctx, dirty) {
|
||||
svelte_element0_data = get_spread_update(svelte_element0_levels, [{ class: "inner" }]);
|
||||
|
||||
if ((/-/).test(span)) {
|
||||
set_custom_element_data_map(svelte_element0, svelte_element0_data);
|
||||
} else {
|
||||
set_attributes(svelte_element0, svelte_element0_data);
|
||||
}
|
||||
|
||||
svelte_element1_data = get_spread_update(svelte_element1_levels, [{ class: "outer" }]);
|
||||
|
||||
if ((/-/).test(a)) {
|
||||
set_custom_element_data_map(svelte_element1, svelte_element1_data);
|
||||
} else {
|
||||
set_attributes(svelte_element1, svelte_element1_data);
|
||||
}
|
||||
},
|
||||
d(detaching) {
|
||||
if (detaching) detach(svelte_element1);
|
||||
mounted = false;
|
||||
run_all(dispose);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function create_fragment(ctx) {
|
||||
let previous_tag = a;
|
||||
let svelte_element_anchor;
|
||||
let svelte_element = a && create_dynamic_element(ctx);
|
||||
|
||||
return {
|
||||
c() {
|
||||
if (svelte_element) svelte_element.c();
|
||||
svelte_element_anchor = empty();
|
||||
},
|
||||
m(target, anchor) {
|
||||
if (svelte_element) svelte_element.m(target, anchor);
|
||||
insert(target, svelte_element_anchor, anchor);
|
||||
},
|
||||
p(ctx, [dirty]) {
|
||||
if (a) {
|
||||
if (!previous_tag) {
|
||||
svelte_element = create_dynamic_element(ctx);
|
||||
svelte_element.c();
|
||||
svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);
|
||||
} else if (safe_not_equal(previous_tag, a)) {
|
||||
svelte_element.d(1);
|
||||
svelte_element = create_dynamic_element(ctx);
|
||||
svelte_element.c();
|
||||
svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);
|
||||
} else {
|
||||
svelte_element.p(ctx, dirty);
|
||||
}
|
||||
} else if (previous_tag) {
|
||||
svelte_element.d(1);
|
||||
svelte_element = null;
|
||||
}
|
||||
|
||||
previous_tag = a;
|
||||
},
|
||||
i: noop,
|
||||
o: noop,
|
||||
d(detaching) {
|
||||
if (detaching) detach(svelte_element_anchor);
|
||||
if (svelte_element) svelte_element.d(detaching);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const a = 'a';
|
||||
const span = 'span';
|
||||
|
||||
function instance($$self) {
|
||||
function keydown_handler(event) {
|
||||
bubble.call(this, $$self, event);
|
||||
}
|
||||
|
||||
function keyup_handler(event) {
|
||||
bubble.call(this, $$self, event);
|
||||
}
|
||||
|
||||
function keydown_handler_1(event) {
|
||||
bubble.call(this, $$self, event);
|
||||
}
|
||||
|
||||
function keyup_handler_1(event) {
|
||||
bubble.call(this, $$self, event);
|
||||
}
|
||||
|
||||
return [keydown_handler, keyup_handler, keydown_handler_1, keyup_handler_1];
|
||||
}
|
||||
|
||||
class Component extends SvelteComponent {
|
||||
constructor(options) {
|
||||
super();
|
||||
init(this, options, instance, create_fragment, safe_not_equal, {});
|
||||
}
|
||||
}
|
||||
|
||||
export default Component;
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
const a = 'a';
|
||||
const span = 'span';
|
||||
</script>
|
||||
|
||||
<svelte:element this={a} class='outer' on:keydown on:keyup>
|
||||
<svelte:element this={span} class='inner' on:keydown on:keyup />
|
||||
</svelte:element>
|
||||
@ -0,0 +1,41 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import {
|
||||
SvelteComponent,
|
||||
attr,
|
||||
detach,
|
||||
element,
|
||||
init,
|
||||
insert,
|
||||
noop,
|
||||
safe_not_equal
|
||||
} from "svelte/internal";
|
||||
|
||||
function create_fragment(ctx) {
|
||||
let a;
|
||||
|
||||
return {
|
||||
c() {
|
||||
a = element("a");
|
||||
a.innerHTML = `<span class="inner"></span>`;
|
||||
attr(a, "class", "outer");
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, a, anchor);
|
||||
},
|
||||
p: noop,
|
||||
i: noop,
|
||||
o: noop,
|
||||
d(detaching) {
|
||||
if (detaching) detach(a);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
class Component extends SvelteComponent {
|
||||
constructor(options) {
|
||||
super();
|
||||
init(this, options, null, create_fragment, safe_not_equal, {});
|
||||
}
|
||||
}
|
||||
|
||||
export default Component;
|
||||
@ -0,0 +1,3 @@
|
||||
<svelte:element this='a' class='outer'>
|
||||
<svelte:element this='span' class='inner' />
|
||||
</svelte:element>
|
||||
@ -1,3 +1,7 @@
|
||||
<svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
|
||||
<svelte:element this="path" xmlns="http://www.w3.org/2000/svg"></svelte:element>
|
||||
<script>
|
||||
const tag = { svg: 'svg', path: 'path' };
|
||||
</script>
|
||||
|
||||
<svelte:element this={tag.svg} xmlns="http://www.w3.org/2000/svg">
|
||||
<svelte:element this={tag.path} xmlns="http://www.w3.org/2000/svg" />
|
||||
</svelte:element>
|
||||
@ -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,19 @@
|
||||
const realPromise = Promise.resolve(42);
|
||||
|
||||
const promise = () => {};
|
||||
promise.then = realPromise.then.bind(realPromise);
|
||||
promise.catch = realPromise.catch.bind(realPromise);
|
||||
|
||||
export default {
|
||||
props: {
|
||||
promise
|
||||
},
|
||||
|
||||
test({ assert, target }) {
|
||||
return promise.then(() => {
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>42</p>
|
||||
`);
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export let promise;
|
||||
</script>
|
||||
|
||||
{#await promise then value}
|
||||
<p>{JSON.stringify(value)}</p>
|
||||
{/await}
|
||||
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
export let value;
|
||||
value = "bar";
|
||||
</script>
|
||||
|
||||
Child component "{value}"<br />
|
||||
@ -1,7 +1,8 @@
|
||||
export default {
|
||||
async test({ assert, target }) {
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>0</p>
|
||||
Parent component "bar"<br />
|
||||
Child component "bar"<br />
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Component from "./Component.svelte";
|
||||
|
||||
let value = "foo";
|
||||
</script>
|
||||
|
||||
Parent component "{value}"<br />
|
||||
<Component bind:value />
|
||||
@ -0,0 +1,10 @@
|
||||
// this test currently fails because the fix that made it pass broke other tests,
|
||||
// see https://github.com/sveltejs/svelte/pull/8114 for more context.
|
||||
export default {
|
||||
skip: true,
|
||||
async test({ assert, target }) {
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>0</p>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
const obj = {
|
||||
x: 1,
|
||||
y: 2,
|
||||
z: 3
|
||||
};
|
||||
|
||||
export default {
|
||||
props: {
|
||||
obj
|
||||
},
|
||||
|
||||
test({ assert }) {
|
||||
assert.deepEqual(obj, { x: 1, y: 2, z: 3 });
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import Widget from './Widget.svelte';
|
||||
|
||||
export let obj;
|
||||
</script>
|
||||
|
||||
<Widget {...obj} x={2} />
|
||||
@ -0,0 +1,13 @@
|
||||
export default {
|
||||
html: `
|
||||
<div>
|
||||
<p></p>
|
||||
</div>
|
||||
`,
|
||||
|
||||
test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
|
||||
assert.notEqual(p, undefined);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,3 @@
|
||||
<div>
|
||||
<svelte:element this="p" />
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
export default {
|
||||
html: `
|
||||
<div>
|
||||
<p></p>
|
||||
</div>
|
||||
`,
|
||||
|
||||
test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
|
||||
assert.notEqual(p, undefined);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
const p = 'p';
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<svelte:element this={p} />
|
||||
</div>
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
]
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue