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