mirror of https://github.com/sveltejs/svelte
Rich Harris
6 years ago
commit
4a7f5a2da2
|
After Width: | Height: | Size: 8.3 KiB |
@ -0,0 +1,129 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
check_outros,
|
||||||
|
create_out_transition,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
empty,
|
||||||
|
group_outros,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
safe_not_equal,
|
||||||
|
transition_in,
|
||||||
|
transition_out
|
||||||
|
} from "svelte/internal";
|
||||||
|
import { fade } from "svelte/transition";
|
||||||
|
|
||||||
|
// (7:0) {#if num < 5}
|
||||||
|
function create_if_block(ctx) {
|
||||||
|
var div, div_outro, current;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
div = element("div");
|
||||||
|
div.innerHTML = `<p>wheeee</p>`;
|
||||||
|
},
|
||||||
|
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, div, anchor);
|
||||||
|
current = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
i(local) {
|
||||||
|
if (current) return;
|
||||||
|
if (div_outro) div_outro.end(1);
|
||||||
|
|
||||||
|
current = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
o(local) {
|
||||||
|
div_outro = create_out_transition(div, fade, {});
|
||||||
|
|
||||||
|
current = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) {
|
||||||
|
detach(div);
|
||||||
|
if (div_outro) div_outro.end();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
var if_block_anchor, current;
|
||||||
|
|
||||||
|
var if_block = (ctx.num < 5) && create_if_block(ctx);
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
if (if_block) if_block.c();
|
||||||
|
if_block_anchor = empty();
|
||||||
|
},
|
||||||
|
|
||||||
|
m(target, anchor) {
|
||||||
|
if (if_block) if_block.m(target, anchor);
|
||||||
|
insert(target, if_block_anchor, anchor);
|
||||||
|
current = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
p(changed, ctx) {
|
||||||
|
if (ctx.num < 5) {
|
||||||
|
if (!if_block) {
|
||||||
|
if_block = create_if_block(ctx);
|
||||||
|
if_block.c();
|
||||||
|
transition_in(if_block, 1);
|
||||||
|
if_block.m(if_block_anchor.parentNode, if_block_anchor);
|
||||||
|
} else {
|
||||||
|
transition_in(if_block, 1);
|
||||||
|
}
|
||||||
|
} else if (if_block) {
|
||||||
|
group_outros();
|
||||||
|
transition_out(if_block, 1, () => {
|
||||||
|
if_block = null;
|
||||||
|
});
|
||||||
|
check_outros();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
i(local) {
|
||||||
|
if (current) return;
|
||||||
|
transition_in(if_block);
|
||||||
|
current = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
o(local) {
|
||||||
|
transition_out(if_block);
|
||||||
|
current = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
d(detaching) {
|
||||||
|
if (if_block) if_block.d(detaching);
|
||||||
|
|
||||||
|
if (detaching) {
|
||||||
|
detach(if_block_anchor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function instance($$self, $$props, $$invalidate) {
|
||||||
|
let { num = 1 } = $$props;
|
||||||
|
|
||||||
|
$$self.$set = $$props => {
|
||||||
|
if ('num' in $$props) $$invalidate('num', num = $$props.num);
|
||||||
|
};
|
||||||
|
|
||||||
|
return { num };
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, ["num"]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
|
||||||
|
export let num = 1;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if num < 5}
|
||||||
|
<div out:fade>
|
||||||
|
<p>wheeee</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
@ -1 +1 @@
|
|||||||
<div data-foo='"quoted"'></div>
|
<div data-foo='semi:"space:" letter:"e number:"1 end:"'></div>
|
||||||
|
|||||||
@ -0,0 +1 @@
|
|||||||
|
<div>foo</div>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
export default {
|
||||||
|
skip_if_ssr: true,
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<div>foo</div>
|
||||||
|
<div>has foo: true</div>
|
||||||
|
`
|
||||||
|
};
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
import Foo from './Foo.svelte';
|
||||||
|
export let foo = {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Foo bind:this={foo['computed']}/>
|
||||||
|
<div>
|
||||||
|
has foo: {!!foo.computed}
|
||||||
|
</div>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<div>foo</div>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
export default {
|
||||||
|
skip_if_ssr: true,
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<div>foo</div>
|
||||||
|
<div>first has foo: true</div>
|
||||||
|
<div>foo</div>
|
||||||
|
<div>second has foo: true</div>
|
||||||
|
<div>foo</div>
|
||||||
|
<div>third has foo: true</div>
|
||||||
|
`
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
import Foo from './Foo.svelte';
|
||||||
|
export let foo = {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each ["first", "second", "third"] as value}
|
||||||
|
<Foo bind:this={foo[value]}/>
|
||||||
|
<div>
|
||||||
|
{value} has foo: {!!foo[value]}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<div>foo</div>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
export default {
|
||||||
|
skip_if_ssr: true,
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<div>foo</div>
|
||||||
|
<div>0 has foo: true</div>
|
||||||
|
<div>foo</div>
|
||||||
|
<div>1 has foo: true</div>
|
||||||
|
<div>foo</div>
|
||||||
|
<div>2 has foo: true</div>
|
||||||
|
`
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
import Foo from './Foo.svelte';
|
||||||
|
export let foo = [];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each Array(3) as _, i}
|
||||||
|
<Foo bind:this={foo[i]}/>
|
||||||
|
<div>
|
||||||
|
{i} has foo: {!!foo[i]}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
export let actualValue;
|
||||||
|
let x = $$props;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value={actualValue}>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
export default {
|
||||||
|
async test({ assert, target, window }) {
|
||||||
|
const input = target.querySelector('input');
|
||||||
|
|
||||||
|
const event = new window.Event('input');
|
||||||
|
input.value = 'changed';
|
||||||
|
await input.dispatchEvent(event);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<input>
|
||||||
|
<p>changed</p>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import Input from './TextInput.svelte';
|
||||||
|
export let actualValue = '';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Input bind:actualValue />
|
||||||
|
<p>{actualValue}</p>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
export let title;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>{title}</p>
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
titles: [{ name: 'a', }, { name: 'b' }, { name: 'c' }]
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<p>a</p>
|
||||||
|
<p>b</p>
|
||||||
|
<p>c</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
component.titles = [{ name: 'b' }, { name: 'c' }];
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>b</p>
|
||||||
|
<p>c</p>
|
||||||
|
`);
|
||||||
|
|
||||||
|
component.titles = [{ name: 'c' }];
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>c</p>
|
||||||
|
`);
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
import Nested from './Nested.svelte';
|
||||||
|
|
||||||
|
export let titles;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each titles as title (title.name)}
|
||||||
|
<Nested title="{title.name}"/>
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
const message = "the quick brown fox jumps over the lazy dog";
|
||||||
|
const expected = [...message].map(c => `<span>${c + " "}</span>`).join("");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
message
|
||||||
|
},
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const firstSpanList = target.children[0];
|
||||||
|
assert.equal(firstSpanList.innerHTML, expected);
|
||||||
|
|
||||||
|
const secondSpanList = target.children[1];
|
||||||
|
assert.equal(secondSpanList.innerHTML, expected);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
let message = "the quick brown fox jumps over the lazy dog"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id="first">
|
||||||
|
{#each message as char}
|
||||||
|
<span>{char} </span>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="second">{#each message as char}<span>{char} </span>{/each}</div>
|
||||||
@ -1,4 +1,4 @@
|
|||||||
<div>
|
<div>
|
||||||
<style>div { color: red; }</style>
|
<style>div { color: red; }</style>
|
||||||
<script>alert('<>');</script>
|
<script>alert(`<>`);</script>
|
||||||
</div>
|
</div>
|
||||||
Loading…
Reference in new issue