mirror of https://github.com/sveltejs/svelte
Conduitry
5 years ago
commit
a18f745efb
@ -0,0 +1,27 @@
|
||||
export default {
|
||||
warnings: [
|
||||
{
|
||||
code: 'css-unused-selector',
|
||||
end: {
|
||||
character: 111,
|
||||
column: 21,
|
||||
line: 8
|
||||
},
|
||||
frame: `
|
||||
6: color: red;
|
||||
7: }
|
||||
8: a:global(.foo) > div {
|
||||
^
|
||||
9: color: red;
|
||||
10: }
|
||||
`,
|
||||
message: 'Unused CSS selector "a:global(.foo) > div"',
|
||||
pos: 91,
|
||||
start: {
|
||||
character: 91,
|
||||
column: 1,
|
||||
line: 8
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
div>div.svelte-xyz.svelte-xyz{color:red}div.svelte-xyz.foo>div.svelte-xyz{color:red}
|
||||
@ -0,0 +1,3 @@
|
||||
<div class="svelte-xyz">
|
||||
<div class="svelte-xyz"></div>
|
||||
</div>
|
||||
@ -0,0 +1,15 @@
|
||||
<style>
|
||||
:global(div) > div {
|
||||
color: red;
|
||||
}
|
||||
div:global(.foo) > div {
|
||||
color: red;
|
||||
}
|
||||
a:global(.foo) > div {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<div />
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
warnings: []
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
a>b>div.svelte-xyz{color:red}
|
||||
@ -0,0 +1,3 @@
|
||||
<div class="svelte-xyz">
|
||||
<div class="svelte-xyz"></div>
|
||||
</div>
|
||||
@ -0,0 +1,9 @@
|
||||
<style>
|
||||
:global(a) > :global(b) > div {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<div />
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
<div class="svelte-xyz">
|
||||
<div class="svelte-xyz"></div>
|
||||
</div>
|
||||
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
options: {
|
||||
accessors: true
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,34 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
|
||||
|
||||
import { f as f_1, g as g_1 } from './d';
|
||||
import { h as h_1 } from './e';
|
||||
import { i as j } from './f';
|
||||
export { d as e } from './c';
|
||||
export { c } from './b';
|
||||
export { a, b } from './a';
|
||||
|
||||
class Component extends SvelteComponent {
|
||||
constructor(options) {
|
||||
super();
|
||||
init(this, options, null, null, safe_not_equal, {});
|
||||
}
|
||||
|
||||
get f() {
|
||||
return f_1;
|
||||
}
|
||||
|
||||
get g() {
|
||||
return g_1;
|
||||
}
|
||||
|
||||
get h() {
|
||||
return h_1;
|
||||
}
|
||||
|
||||
get j() {
|
||||
return j;
|
||||
}
|
||||
}
|
||||
|
||||
export default Component;
|
||||
@ -0,0 +1,11 @@
|
||||
<script context="module">
|
||||
export { a, b } from './a';
|
||||
export { c } from './b';
|
||||
export { d as e } from './c';
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export { f, g } from './d';
|
||||
export { h } from './e';
|
||||
export { i as j } from './f';
|
||||
</script>
|
||||
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
options: {
|
||||
accessors: true,
|
||||
format: 'cjs'
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,36 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
"use strict";
|
||||
|
||||
const { SvelteComponent, init, safe_not_equal } = require("svelte/internal");
|
||||
const { f: f_1, g: g_1 } = require("./d");
|
||||
const { h: h_1 } = require("./e");
|
||||
const { i: j } = require("./f");
|
||||
exports.e = require("./c").d;
|
||||
exports.c = require("./b").c;
|
||||
exports.a = require("./a").a;
|
||||
exports.b = require("./a").b;
|
||||
|
||||
class Component extends SvelteComponent {
|
||||
constructor(options) {
|
||||
super();
|
||||
init(this, options, null, null, safe_not_equal, {});
|
||||
}
|
||||
|
||||
get f() {
|
||||
return f_1;
|
||||
}
|
||||
|
||||
get g() {
|
||||
return g_1;
|
||||
}
|
||||
|
||||
get h() {
|
||||
return h_1;
|
||||
}
|
||||
|
||||
get j() {
|
||||
return j;
|
||||
}
|
||||
}
|
||||
|
||||
exports.default = Component;
|
||||
@ -0,0 +1,11 @@
|
||||
<script context="module">
|
||||
export { a, b } from './a';
|
||||
export { c } from './b';
|
||||
export { d as e } from './c';
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export { f, g } from './d';
|
||||
export { h } from './e';
|
||||
export { i as j } from './f';
|
||||
</script>
|
||||
@ -0,0 +1,18 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
|
||||
|
||||
import './d';
|
||||
import './e';
|
||||
import './f';
|
||||
export { d as e } from './c';
|
||||
export { c } from './b';
|
||||
export { a, b } from './a';
|
||||
|
||||
class Component extends SvelteComponent {
|
||||
constructor(options) {
|
||||
super();
|
||||
init(this, options, null, null, safe_not_equal, {});
|
||||
}
|
||||
}
|
||||
|
||||
export default Component;
|
||||
@ -0,0 +1,11 @@
|
||||
<script context="module">
|
||||
export { a, b } from './a';
|
||||
export { c } from './b';
|
||||
export { d as e } from './c';
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export { f, g } from './d';
|
||||
export { h } from './e';
|
||||
export { i as j } from './f';
|
||||
</script>
|
||||
@ -0,0 +1,23 @@
|
||||
<script context="module">
|
||||
export { a, b } from './B.svelte';
|
||||
export { c as d } from './B.svelte';
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export { d, e } from './B.svelte';
|
||||
export { f as g } from './B.svelte';
|
||||
let e = 123;
|
||||
let b = 234;
|
||||
function foo() {
|
||||
e = 456;
|
||||
b = 567;
|
||||
}
|
||||
</script>
|
||||
|
||||
a: {typeof a}<br />
|
||||
b: {typeof b}<br />
|
||||
c: {typeof c}<br />
|
||||
d: {typeof d}<br />
|
||||
e: {typeof e}<br />
|
||||
f: {typeof f}<br />
|
||||
g: {typeof g}<br />
|
||||
@ -0,0 +1,8 @@
|
||||
<script context="module">
|
||||
export const a = 'a';
|
||||
export const b = 'b';
|
||||
export const c = 'c';
|
||||
export const d = 'd';
|
||||
export const e = 'e';
|
||||
export const f = 'f';
|
||||
</script>
|
||||
@ -0,0 +1,28 @@
|
||||
export default {
|
||||
html: `
|
||||
a,b,undefined,c
|
||||
<br />
|
||||
a: undefined<br />
|
||||
b: number<br />
|
||||
c: undefined<br />
|
||||
d: undefined<br />
|
||||
e: number<br />
|
||||
f: undefined<br />
|
||||
g: undefined<br />
|
||||
<br />
|
||||
{"d":"d","e":"e","g":"f"}
|
||||
`,
|
||||
ssrHtml: `
|
||||
a,b,undefined,c
|
||||
<br />
|
||||
a: undefined<br />
|
||||
b: number<br />
|
||||
c: undefined<br />
|
||||
d: undefined<br />
|
||||
e: number<br />
|
||||
f: undefined<br />
|
||||
g: undefined<br />
|
||||
<br />
|
||||
{}
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
import A, { a, b, c, d } from './A.svelte';
|
||||
import {onMount} from 'svelte';
|
||||
|
||||
let component;
|
||||
let props = {};
|
||||
onMount(() => {
|
||||
props = {
|
||||
d: component.d,
|
||||
e: component.e,
|
||||
f: component.f,
|
||||
g: component.g,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
{a},{b},{c},{d}
|
||||
<br />
|
||||
<A bind:this={component} />
|
||||
<br />
|
||||
{JSON.stringify(props)}
|
||||
@ -0,0 +1,11 @@
|
||||
export default {
|
||||
html: `
|
||||
<div>$userName1: user1</div>
|
||||
<div>$userName2: undefined</div>
|
||||
<div>$userName3: undefined</div>
|
||||
<div>$userName4: user4</div>
|
||||
<div>$userName5: undefined</div>
|
||||
<div>$userName6: user6</div>
|
||||
<div>$userName7: undefined</div>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,34 @@
|
||||
<script>
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
let userName1 = writable('init1');
|
||||
let userName2 = writable('init2');
|
||||
let userName3 = writable('init3');
|
||||
let userName4 = writable('init4');
|
||||
let userName5 = writable('init5');
|
||||
let userName6 = writable('init6');
|
||||
let userName7 = writable('init7');
|
||||
|
||||
let obj = {
|
||||
userName1: 'user1',
|
||||
userName2: 'user2',
|
||||
userName3: 'user3',
|
||||
$userName4: 'user4',
|
||||
userName5: 'user5',
|
||||
$userName6: 'user6',
|
||||
userName7: 'user7',
|
||||
};
|
||||
|
||||
({userName1: $userName1, $userName2 } = obj);
|
||||
({$userName3} = obj);
|
||||
({$userName4} = obj);
|
||||
({$userName5, $userName6, $userName7} = obj);
|
||||
</script>
|
||||
|
||||
<div>$userName1: {$userName1}</div>
|
||||
<div>$userName2: {$userName2}</div>
|
||||
<div>$userName3: {$userName3}</div>
|
||||
<div>$userName4: {$userName4}</div>
|
||||
<div>$userName5: {$userName5}</div>
|
||||
<div>$userName6: {$userName6}</div>
|
||||
<div>$userName7: {$userName7}</div>
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
let name = 'World';
|
||||
</script>
|
||||
|
||||
<div>Hello {name}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
export default {
|
||||
skip_if_ssr: true,
|
||||
compileOptions: {
|
||||
cssHash: () => 'svelte-xyz'
|
||||
},
|
||||
async test({ assert, component, target, window }) {
|
||||
assert.htmlEqual(
|
||||
window.document.head.innerHTML,
|
||||
'<style id="svelte-xyz">div.svelte-xyz{color:red}</style>'
|
||||
);
|
||||
assert.htmlEqual(
|
||||
component.div.innerHTML,
|
||||
'<div class="svelte-xyz">Hello World</div>'
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
import App from './App.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let div;
|
||||
|
||||
onMount(() => {
|
||||
div = document.createElement('div');
|
||||
|
||||
const app = new App({
|
||||
target: div
|
||||
});
|
||||
|
||||
return () => {
|
||||
app.$destroy();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
let name = 'World';
|
||||
</script>
|
||||
|
||||
<div>Hello {name}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
export default {
|
||||
skip_if_ssr: true,
|
||||
compileOptions: {
|
||||
cssHash: () => 'svelte-xyz'
|
||||
},
|
||||
async test({ assert, component, target, window }) {
|
||||
assert.htmlEqual(
|
||||
window.document.head.innerHTML,
|
||||
'<style id="svelte-xyz">div.svelte-xyz{color:red}</style>'
|
||||
);
|
||||
assert.htmlEqual(
|
||||
component.div.innerHTML,
|
||||
'<div class="svelte-xyz">Hello World</div>'
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
import App from './App.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let div;
|
||||
|
||||
onMount(() => {
|
||||
const app = new App({
|
||||
target: div
|
||||
});
|
||||
|
||||
return () => {
|
||||
app.$destroy();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={div} />
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
let name = 'World';
|
||||
</script>
|
||||
|
||||
<div>Hello {name}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
export default {
|
||||
skip_if_ssr: true,
|
||||
compileOptions: {
|
||||
cssHash: () => 'svelte-xyz'
|
||||
},
|
||||
async test({ assert, component, target, window }) {
|
||||
assert.htmlEqual(window.document.head.innerHTML, '');
|
||||
assert.htmlEqual(component.div.shadowRoot.innerHTML, `
|
||||
<style id="svelte-xyz">div.svelte-xyz{color:red}</style>
|
||||
<div class="svelte-xyz">Hello World</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
import App from './App.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let div;
|
||||
onMount(() => {
|
||||
const root = div.attachShadow({ mode: 'open' });
|
||||
|
||||
const app = new App({
|
||||
target: root
|
||||
});
|
||||
|
||||
return () => {
|
||||
app.$destroy();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={div} />
|
||||
@ -0,0 +1,21 @@
|
||||
export default {
|
||||
test({ assert, component, target, window, raf }) {
|
||||
component.visible = true;
|
||||
const div = target.querySelector('div');
|
||||
|
||||
// animation duration of `in` should be 10ms.
|
||||
assert.equal(div.style.animation, '__svelte_1670736059_0 10ms linear 0ms 1 both');
|
||||
|
||||
// animation duration of `out` should be 5ms.
|
||||
component.visible = false;
|
||||
assert.equal(div.style.animation, '__svelte_1670736059_0 10ms linear 0ms 1 both, __svelte_1998461463_0 5ms linear 0ms 1 both');
|
||||
|
||||
// change param
|
||||
raf.tick(1);
|
||||
component.param = true;
|
||||
component.visible = true;
|
||||
|
||||
// animation duration of `in` should be 20ms.
|
||||
assert.equal(div.style.animation, '__svelte_722598827_0 20ms linear 0ms 1 both');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,26 @@
|
||||
<script>
|
||||
export let visible = false;
|
||||
export let param = false;
|
||||
|
||||
function getInParam() {
|
||||
return {
|
||||
duration: param ? 20 : 10,
|
||||
css: t => {
|
||||
return `opacity: ${t}`;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function getOutParam() {
|
||||
return {
|
||||
duration: param ? 15 : 5,
|
||||
css: t => {
|
||||
return `opacity: ${t}`;
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div in:getInParam out:getOutParam></div>
|
||||
{/if}
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
export let visible;
|
||||
export let slotProps;
|
||||
|
||||
function fade(node) {
|
||||
return {
|
||||
duration: 100,
|
||||
tick: t => {
|
||||
node.foo = t;
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div transition:fade>
|
||||
<slot {slotProps}></slot>
|
||||
</div>
|
||||
{/if}
|
||||
@ -0,0 +1,35 @@
|
||||
// updated props in the middle of transitions
|
||||
// and cancelled the transition halfway
|
||||
export default {
|
||||
html: `
|
||||
<div>outside Foo Foo Foo</div>
|
||||
<div>inside Foo Foo Foo</div>
|
||||
`,
|
||||
props: {
|
||||
props: 'Foo'
|
||||
},
|
||||
|
||||
async test({ assert, component, target, window, raf }) {
|
||||
await component.hide();
|
||||
const [, div] = target.querySelectorAll('div');
|
||||
|
||||
raf.tick(50);
|
||||
assert.equal(div.foo, 0.5);
|
||||
|
||||
component.props = 'Bar';
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>outside Bar Bar Bar</div>
|
||||
<div>inside Foo Foo Foo</div>
|
||||
`);
|
||||
|
||||
await component.show();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>outside Bar Bar Bar</div>
|
||||
<div>inside Bar Bar Bar</div>
|
||||
`);
|
||||
|
||||
raf.tick(100);
|
||||
assert.equal(div.foo, 1);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
|
||||
let visible = true;
|
||||
let state = 'Foo';
|
||||
let slotProps = 'Foo';
|
||||
export let props;
|
||||
|
||||
export function show() {
|
||||
visible = true;
|
||||
}
|
||||
export function hide() {
|
||||
visible = false;
|
||||
state = 'Bar';
|
||||
slotProps = 'Bar';
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>outside {state} {props} {slotProps}</div>
|
||||
<Nested {visible} {slotProps} let:slotProps>
|
||||
inside {state} {props} {slotProps}
|
||||
</Nested>
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
export let visible;
|
||||
export let slotProps;
|
||||
|
||||
function fade(node) {
|
||||
return {
|
||||
duration: 100,
|
||||
tick: t => {
|
||||
node.foo = t;
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div transition:fade>
|
||||
<slot {slotProps}></slot>
|
||||
</div>
|
||||
{/if}
|
||||
@ -0,0 +1,40 @@
|
||||
// updated props in the middle of transitions
|
||||
// and cancelled the transition halfway
|
||||
// + spreaded props + overflow context
|
||||
|
||||
export default {
|
||||
html: `
|
||||
<div>outside Foo Foo Foo</div>
|
||||
<div>inside Foo Foo Foo</div>
|
||||
0
|
||||
`,
|
||||
props: {
|
||||
props: 'Foo'
|
||||
},
|
||||
|
||||
async test({ assert, component, target, window, raf }) {
|
||||
await component.hide();
|
||||
const [, div] = target.querySelectorAll('div');
|
||||
|
||||
raf.tick(50);
|
||||
assert.equal(div.foo, 0.5);
|
||||
|
||||
component.props = 'Bar';
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>outside Bar Bar Bar</div>
|
||||
<div>inside Foo Foo Foo</div>
|
||||
0
|
||||
`);
|
||||
|
||||
await component.show();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>outside Bar Bar Bar</div>
|
||||
<div>inside Bar Bar Bar</div>
|
||||
0
|
||||
`);
|
||||
|
||||
raf.tick(100);
|
||||
assert.equal(div.foo, 1);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
|
||||
export let a1=0,a2=0,a3=0,a4=0,a5=0,a6=0,a7=0,a8=0,a9=0,a10=0,a11=0, a12=0,a13=0,a14=0,a15=0,a16=0,a17=0,a18=0,a19=0,a20=0,a21=0, a22=0,a23=0,a24=0,a25=0,a26=0,a27=0,a28=0,a29=0,a30=0,a31=0,a32=0,a33=0;
|
||||
|
||||
let visible = true;
|
||||
let state = 'Foo';
|
||||
let slotProps = 'Foo';
|
||||
export let props;
|
||||
|
||||
export function show() {
|
||||
visible = true;
|
||||
}
|
||||
export function hide() {
|
||||
visible = false;
|
||||
state = 'Bar';
|
||||
slotProps = 'Bar';
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>outside {state} {props} {slotProps}</div>
|
||||
|
||||
<Nested {visible} {slotProps} let:slotProps>
|
||||
inside {state} {props} {slotProps}
|
||||
</Nested>
|
||||
|
||||
{a1+a2+a3+a4+a5+a6+a7+a8+a9+a10+a11+a12+a13+a14+a15+a16+a17+a18+a19+a20+a21+a22+a23+a24+a25+a26+a27+a28+a29+a30+a31+a32+a33}
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
export let visible;
|
||||
export let slotProps;
|
||||
|
||||
function fade(node) {
|
||||
return {
|
||||
duration: 100,
|
||||
tick: t => {
|
||||
node.foo = t;
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div transition:fade>
|
||||
<slot {...slotProps}></slot>
|
||||
</div>
|
||||
{/if}
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
export let visible;
|
||||
let slotProps = { slotProps: 'XXX' };
|
||||
|
||||
function fade(node) {
|
||||
return {
|
||||
duration: 100,
|
||||
tick: t => {
|
||||
node.foo = t;
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div transition:fade>
|
||||
<slot {...slotProps}></slot>
|
||||
</div>
|
||||
{/if}
|
||||
@ -0,0 +1,40 @@
|
||||
// updated props in the middle of transitions
|
||||
// and cancelled the transition halfway
|
||||
// with spreaded props
|
||||
|
||||
export default {
|
||||
html: `
|
||||
<div>outside Foo Foo Foo</div>
|
||||
<div>inside Foo Foo Foo</div>
|
||||
<div>inside Foo Foo XXX</div>
|
||||
`,
|
||||
props: {
|
||||
props: 'Foo'
|
||||
},
|
||||
|
||||
async test({ assert, component, target, window, raf }) {
|
||||
await component.hide();
|
||||
const [, div] = target.querySelectorAll('div');
|
||||
|
||||
raf.tick(50);
|
||||
assert.equal(div.foo, 0.5);
|
||||
|
||||
component.props = 'Bar';
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>outside Bar Bar Bar</div>
|
||||
<div>inside Foo Foo Foo</div>
|
||||
<div>inside Foo Foo XXX</div>
|
||||
`);
|
||||
|
||||
await component.show();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>outside Bar Bar Bar</div>
|
||||
<div>inside Bar Bar Bar</div>
|
||||
<div>inside Bar Bar XXX</div>
|
||||
`);
|
||||
|
||||
raf.tick(100);
|
||||
assert.equal(div.foo, 1);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,26 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
import Nested2 from './Nested2.svelte';
|
||||
|
||||
let visible = true;
|
||||
let state = 'Foo';
|
||||
let slotProps = { slotProps: 'Foo' };
|
||||
export let props;
|
||||
|
||||
export function show() {
|
||||
visible = true;
|
||||
}
|
||||
export function hide() {
|
||||
visible = false;
|
||||
state = 'Bar';
|
||||
slotProps = { slotProps: 'Bar' };
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>outside {state} {props} {slotProps.slotProps}</div>
|
||||
<Nested {visible} {slotProps} let:slotProps>
|
||||
inside {state} {props} {slotProps}
|
||||
</Nested>
|
||||
<Nested2 {visible} let:slotProps>
|
||||
inside {state} {props} {slotProps}
|
||||
</Nested2>
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
export let visible;
|
||||
export let slotProps;
|
||||
|
||||
function fade(node) {
|
||||
return {
|
||||
duration: 100,
|
||||
tick: t => {
|
||||
node.foo = t;
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div transition:fade>
|
||||
<slot {...slotProps}></slot>
|
||||
</div>
|
||||
{/if}
|
||||
@ -0,0 +1,40 @@
|
||||
// updated props in the middle of transitions
|
||||
// and cancelled the transition halfway
|
||||
// + spreaded props + overflow context
|
||||
|
||||
export default {
|
||||
html: `
|
||||
<div>outside Foo Foo Foo</div>
|
||||
<div>inside Foo Foo Foo</div>
|
||||
0
|
||||
`,
|
||||
props: {
|
||||
props: 'Foo'
|
||||
},
|
||||
|
||||
async test({ assert, component, target, window, raf }) {
|
||||
await component.hide();
|
||||
const [, div] = target.querySelectorAll('div');
|
||||
|
||||
raf.tick(50);
|
||||
assert.equal(div.foo, 0.5);
|
||||
|
||||
component.props = 'Bar';
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>outside Bar Bar Bar</div>
|
||||
<div>inside Foo Foo Foo</div>
|
||||
0
|
||||
`);
|
||||
|
||||
await component.show();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>outside Bar Bar Bar</div>
|
||||
<div>inside Bar Bar Bar</div>
|
||||
0
|
||||
`);
|
||||
|
||||
raf.tick(100);
|
||||
assert.equal(div.foo, 1);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
|
||||
export let a1=0,a2=0,a3=0,a4=0,a5=0,a6=0,a7=0,a8=0,a9=0,a10=0,a11=0, a12=0,a13=0,a14=0,a15=0,a16=0,a17=0,a18=0,a19=0,a20=0,a21=0, a22=0,a23=0,a24=0,a25=0,a26=0,a27=0,a28=0,a29=0,a30=0,a31=0,a32=0,a33=0;
|
||||
|
||||
let visible = true;
|
||||
let state = 'Foo';
|
||||
let slotProps = { slotProps: 'Foo' };
|
||||
export let props;
|
||||
|
||||
export function show() {
|
||||
visible = true;
|
||||
}
|
||||
export function hide() {
|
||||
visible = false;
|
||||
state = 'Bar';
|
||||
slotProps = { slotProps: 'Bar' };
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>outside {state} {props} {slotProps.slotProps}</div>
|
||||
|
||||
<Nested {visible} {slotProps} let:slotProps>
|
||||
inside {state} {props} {slotProps}
|
||||
</Nested>
|
||||
|
||||
{a1+a2+a3+a4+a5+a6+a7+a8+a9+a10+a11+a12+a13+a14+a15+a16+a17+a18+a19+a20+a21+a22+a23+a24+a25+a26+a27+a28+a29+a30+a31+a32+a33}
|
||||
Loading…
Reference in new issue