msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

fix

Browse Source
pull/4999/head
pushkine 5 years ago
parent 8700cad8a4
commit 927c892955
22 changed files with 188 additions and 182 deletions
Show Stats Download Patch File Download Diff File

2
src/compiler/compile/render_dom/Block.ts
Unescape View File

@ -206,7 +206,7 @@ export default class Block {
}
group_transition_out(fn) {
return this.has_outros ? b`@group_transition_out((#transition_out) => { ${fn(x`#transition_out`)} })` : fn(null);
return b`@group_transition_out((#transition_out) => { ${fn(x`#transition_out`)} })`;
}
add_variable(id: Identifier, init?: Node) {

11
src/compiler/compile/render_dom/wrappers/EachBlock.ts
Unescape View File

@ -7,7 +7,7 @@ import FragmentWrapper from './Fragment';
import { b, x } from 'code-red';
import ElseBlock from '../../nodes/ElseBlock';
import { Identifier, Node } from 'estree';
import bit_state from '../../utils/bit_state'
import bit_state from '../../utils/bit_state';
export class ElseBlockWrapper extends Wrapper {
node: ElseBlock;
@ -434,7 +434,7 @@ export default class EachBlockWrapper extends Wrapper {
${this.renderer.options.dev && b`@validate_each_argument(${this.vars.each_block_value});`}
${this.node.has_animation && b`for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].r();`}
${this.renderer.options.dev && b`@validate_each_keys(#ctx, ${this.vars.each_block_value}, ${this.vars.get_each_context}, ${get_key});`}
${this.block.group_transition_out(update_keyed_each)}
${(this.block.has_outros ? this.block.group_transition_out : v => v(null))(update_keyed_each)}
${this.node.has_animation && b`for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].a();`}
`);
}
@ -548,9 +548,12 @@ export default class EachBlockWrapper extends Wrapper {
if (this.block.has_outros) {
remove_old_blocks = this.block.group_transition_out((transition_out) =>
b`for (#i = ${data_length}; #i < ${view_length}; #i += 1) {
${transition_out}(#i);
const #index = #i;
${transition_out}(${iterations}[#index], () => {
${iterations}[#index] = null;
});
}`
)
);
} else {
remove_old_blocks = b`
for (${this.block.has_update_method ? null : x`#i = ${data_length}`}; #i < ${this.block.has_update_method ? view_length : '#old_length'}; #i += 1) {

18
src/compiler/compile/render_dom/wrappers/Element/index.ts
Unescape View File

@ -751,8 +751,8 @@ export default class ElementWrapper extends Wrapper {
let outro_block = b`${name} = @run_bidirectional_transition(${this.var}, ${fn}, 2, ${snippet});`;
if (intro.is_local) {
intro_block = b`if (#local) {${intro_block}}`;
outro_block = b`if (#local) {${outro_block}}`;
intro_block = b`if (#local) { ${intro_block} }`;
outro_block = b`if (#local) { ${outro_block} }`;
}
block.chunks.intro.push(intro_block);
block.chunks.outro.push(outro_block);
@ -777,12 +777,11 @@ export default class ElementWrapper extends Wrapper {
if (!intro) return;
const [intro_var, node, transitionFn, params] = run_transition(this, block, intro, `intro`);
block.add_variable(intro_var, x`@noop`);
block.add_variable(intro_var, outro ? x`@noop`: null);
let start_intro;
if (intro.is_local)
start_intro = b`if (#local) ${intro_var} = @run_transition(${node}, ${transitionFn}, 1, ${params});`;
else start_intro = b`${intro_var} = @run_transition(${node}, ${transitionFn}, 1, ${params});`;
let start_intro = b`${intro_var} = @run_transition(${node}, ${transitionFn}, 1, ${params});`;
if (!outro) start_intro = b`if (!${intro_var}) { ${start_intro} }`;
if (intro.is_local) start_intro = b`if (#local) { ${start_intro} }`;
block.chunks.intro.push(start_intro);
}
// TODO
@ -798,9 +797,8 @@ export default class ElementWrapper extends Wrapper {
const [outro_var, node, transitionFn, params] = run_transition(this, block, outro, `outro`);
block.add_variable(outro_var, x`@noop`);
let start_outro;
if (outro.is_local) start_outro = b`if (#local) @run_transition(${node}, ${transitionFn}, 2, ${params});`;
else start_outro = b`${outro_var} = @run_transition(${node}, ${transitionFn}, 2, ${params});`;
let start_outro = b`${outro_var} = @run_transition(${node}, ${transitionFn}, 2, ${params});`;
if (outro.is_local) start_outro = b`if (#local) { ${start_outro} }`;
block.chunks.outro.push(start_outro);
block.chunks.destroy.push(b`if (detaching) ${outro_var}();`);

5
src/runtime/internal/environment.ts
Unescape View File

@ -21,8 +21,8 @@ export let raf = is_browser ? requestAnimationFrame : noop;
export let framerate = 1000 / 60;
/*#__PURE__*/ raf((t1) => {
raf((d) => {
const f24 = 1000 / 24,
f144 = 1000 / 144;
const f24 = 1000 / 24;
const f144 = 1000 / 144;
framerate = (d = d - t1) > f144 ? f144 : d < f24 ? f24 : d;
});
});
@ -30,4 +30,3 @@ export let framerate = 1000 / 60;
/* tests only */
export const set_now = (v) => void (now = v);
export const set_raf = (fn) => void (raf = fn);
export const set_framerate = (v) => void (framerate = v);

10
src/runtime/internal/keyed_each.ts
Unescape View File

@ -95,3 +95,13 @@ export const update_keyed_each = (
return new_blocks;
};
export function validate_each_keys(ctx, list, get_context, get_key) {
const keys = new Set();
for (let i = 0; i < list.length; i++) {
const key = get_key(get_context(ctx, list, i));
if (keys.has(key)) {
throw new Error(`Cannot have duplicate keys in a keyed each`);
}
keys.add(key);
}
}

30
src/runtime/internal/loop.ts
Unescape View File

@ -2,13 +2,13 @@ import { now, raf, framerate, noop } from './environment';
type TaskCallback = (t: number) => boolean;
type TaskCanceller = () => void;
let i = 0,
j = 0,
n = 0,
v : TaskCallback;
let i = 0;
let j = 0;
let n = 0;
let v: TaskCallback;
let running_frame : Array<TaskCallback> = [],
next_frame : Array<TaskCallback> = [];
let running_frame: TaskCallback[] = [];
let next_frame: TaskCallback[] = [];
const run = (t: number) => {
[running_frame, next_frame] = [next_frame, running_frame];
@ -24,11 +24,11 @@ const run = (t: number) => {
type TimeoutTask = { timestamp: number; callback: (now: number) => void };
const pending_insert_timed : Array<TimeoutTask> = [],
timed_tasks : Array<TimeoutTask> = [];
const pending_insert_timed: TimeoutTask[] = [];
const timed_tasks: TimeoutTask[] = [];
let pending_inserts = false,
running_timed = false;
let pending_inserts = false;
let running_timed = false;
const run_timed = (now: number) => {
let last_index = timed_tasks.length - 1;
@ -79,20 +79,20 @@ export const setTweenTimeout = (
stop: (now: number) => void,
end_time: number,
run: (now: number) => void,
duration = end_time - now()
duration = end_time - now(),
is_outro = false
): TaskCanceller => {
let running = true;
let t = 0.0;
let t = 1 - (end_time - now) / duration || 0;
if (!is_outro && t <= 1.0) run(t >= 0.0 ? t : 0);
unsafe_loop((now) => {
if (!running) return false;
t = 1.0 - (end_time - now) / duration;
t = 1 - (end_time - now) / duration;
if (t >= 1.0) return run(1), stop(now), false;
if (t >= 0.0) run(t);
return running;
});
return (run_last = false) => {
// since outros are cancelled in group by a setFrameTimeout
// tick(0, 1) has to be called in here
if (run_last) run(1);
running = false;
};

26
src/runtime/internal/scheduler.ts
Unescape View File

@ -28,13 +28,17 @@ export const schedule_update = (component) => {
dirty_components.push(component);
if (!update_scheduled) {
update_scheduled = true;
resolved_promise.then(flush);
if (!is_flushing) {
resolved_promise.then(flush);
}
}
};
export const tick = () => {
if (!update_scheduled) {
update_scheduled = true;
resolved_promise.then(flush);
if (!is_flushing) {
resolved_promise.then(flush);
}
}
return resolved_promise;
};
@ -42,13 +46,13 @@ export const flush = () => {
if (is_flushing) return;
else is_flushing = true;
let i = 0,
j = 0,
t = 0,
$$: T$$,
dirty,
before_update,
after_update;
let i = 0;
let j = 0;
let t = 0;
let $$: T$$;
let dirty;
let before_update;
let after_update;
do {
for (;i < dirty_components.length;i++) {
@ -101,4 +105,8 @@ export const flush = () => {
flush_callbacks.length = i = j = 0;
is_flushing = false;
if (update_scheduled) {
// reflush if applying animations triggered an update
flush();
}
};

101
src/runtime/internal/style_manager.ts
Unescape View File

@ -1,4 +1,5 @@
import { framerate } from './environment';
import { methodify } from './utils';
let documents_uid = 0;
let running_animations = 0;
@ -7,56 +8,54 @@ const document_uid = new Map();
const document_stylesheets = new Map();
const current_rules = new Set();
export const animate_css = /*#__PURE__*/ Function.prototype.call.bind(function animate_css(
this: HTMLElement,
css: (t: number) => string,
duration: number,
delay = 0
) {
if (!document_uid.has(this.ownerDocument)) {
document_uid.set(this.ownerDocument, documents_uid++);
document_stylesheets.set(
this.ownerDocument,
this.ownerDocument.head.appendChild(this.ownerDocument.createElement('style')).sheet
);
}
let rule = '{\n';
for (let t = 0, step = framerate / duration; t < 1; t += step) rule += `${100 * t}%{${css(t)}}\n`;
rule += `100% {${css(1)}}\n}`;
// darkskyapp/string-hash
let i = rule.length, hash = 5381;
while (i--) hash = ((hash << 5) - hash) ^ rule.charCodeAt(i);
const name = `__svelte_${hash >>> 0}${document_uid.get(this.ownerDocument)}`;
if (!current_rules.has(name)) {
current_rules.add(name);
const stylesheet = document_stylesheets.get(this.ownerDocument);
stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
}
export const animate_css = /*#__PURE__*/ methodify(
function animate_css(this: HTMLElement, css: (t: number) => string, duration: number, delay = 0) {
if (!document_uid.has(this.ownerDocument)) {
document_uid.set(this.ownerDocument, documents_uid++);
document_stylesheets.set(
this.ownerDocument,
this.ownerDocument.head.appendChild(this.ownerDocument.createElement('style')).sheet
);
}
let rule = '{\n';
for (let t = 0, step = framerate / duration; t < 1; t += step) rule += `${100 * t}%{${css(t)}}\n`;
rule += `100% {${css(1)}}\n}`;
// darkskyapp/string-hash
let i = rule.length;
let hash = 5381;
while (i--) hash = ((hash << 5) - hash) ^ rule.charCodeAt(i);
const name = `__svelte_${hash >>> 0}${document_uid.get(this.ownerDocument)}`;
if (!current_rules.has(name)) {
current_rules.add(name);
const stylesheet = document_stylesheets.get(this.ownerDocument);
stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
}
const previous = this.style.animation;
this.style.animation = `${
previous ? `${previous}, ` : ''
}${duration}ms linear ${delay}ms 1 normal both running ${name}`;
running_animations++;
return () => {
const prev = (this.style.animation || '').split(', ');
const next = prev.filter((anim) => !anim.includes(name));
if (prev.length !== next.length) this.style.animation = next.join(', ');
if (--running_animations === 0) {
document_stylesheets.forEach((stylesheet) => {
let i = stylesheet.cssRules.length;
while (i--) stylesheet.deleteRule(i);
});
current_rules.clear();
if (1 !== documents_uid) {
document_stylesheets.clear();
document_uid.clear();
documents_uid = 0;
const previous = this.style.animation;
this.style.animation = `${
previous ? `${previous}, ` : ''
}${duration}ms linear ${delay}ms 1 normal both running ${name}`;
running_animations++;
return () => {
const prev = (this.style.animation || '').split(', ');
const next = prev.filter((anim) => !anim.includes(name));
if (prev.length !== next.length) this.style.animation = next.join(', ');
if (--running_animations === 0) {
document_stylesheets.forEach((stylesheet) => {
let i = stylesheet.cssRules.length;
while (i--) stylesheet.deleteRule(i);
});
current_rules.clear();
if (1 !== documents_uid) {
document_stylesheets.clear();
document_uid.clear();
documents_uid = 0;
}
}
}
};
});
};
}
);

45
src/runtime/internal/transitions.ts
Unescape View File

@ -5,6 +5,7 @@ import { now, noop } from './environment';
import { setFrameTimeout, setTweenTimeout } from './loop';
import { add_measure_callback } from './scheduler';
import { animate_css } from './style_manager';
import { methodify } from './utils';
type TransitionFn = (node: HTMLElement, params: any) => CssTransitionConfig;
export type StopResetReverseFn = (t?: number | -1) => StopResetReverseFn | void;
@ -22,9 +23,9 @@ export const transition_out = (block: Fragment, local?) => {
};
type TransitionGroup = {
/* parent group */ p: TransitionGroup;
/* callbacks */ c: ((cancelled: boolean) => void)[];
/* callbacks */ c: Array<((cancelled: boolean) => void)>;
/* running outros */ r: number;
/* stop callbacks */ s: ((t: number) => void)[];
/* stop callbacks */ s: Array<((t: number) => void)>;
/* outro timeout */ t: number;
};
let transition_group: TransitionGroup;
@ -82,7 +83,7 @@ export const enum tx {
bidirectional = 4,
animation = 8,
}
export const run_transition = /*#__PURE__*/ Function.prototype.call.bind(function transition(
export const run_transition = /*#__PURE__*/ methodify(function transition(
this: HTMLElement,
fn: TransitionFn,
rx: tx,
@ -96,11 +97,11 @@ export const run_transition = /*#__PURE__*/ Function.prototype.call.bind(functio
let running = true;
let cancel_css,
cancel_raf;
let cancel_css;
let cancel_raf;
let start_time = 0,
end_time = 0;
let start_time = 0;
let end_time = 0;
const current_group = transition_group;
if (rx & tx.outro) current_group.r++;
@ -129,7 +130,7 @@ export const run_transition = /*#__PURE__*/ Function.prototype.call.bind(functio
}
if (css) cancel_css = animate_css(this, runner(css), duration, delay);
if (rx & tx.outro) {
if (current_group.s.push(stop) === current_group.r) {
setFrameTimeout((t) => {
@ -138,7 +139,7 @@ export const run_transition = /*#__PURE__*/ Function.prototype.call.bind(functio
} else {
current_group.t = Math.max(end_time, current_group.t);
}
if (tick) cancel_raf = setTweenTimeout(noop, end_time, runner(tick), duration);
if (tick) cancel_raf = setTweenTimeout(noop, end_time, runner(tick), duration, true);
} else {
cancel_raf = tick ? setTweenTimeout(stop, end_time, runner(tick), duration) : setFrameTimeout(stop, end_time);
}
@ -146,7 +147,6 @@ export const run_transition = /*#__PURE__*/ Function.prototype.call.bind(functio
});
const stop: StopResetReverseFn = (t?: number | 1 | -1) => {
// resetting `out:` in intros
if (t === 1 && rx & tx.outro && 0 === (rx & tx.bidirectional) && 'tick' in config) config.tick(1, 0);
if (false === running) return;
@ -184,19 +184,16 @@ export const run_transition = /*#__PURE__*/ Function.prototype.call.bind(functio
});
const running_bidi: Map<HTMLElement, StopResetReverseFn> = new Map();
export const run_bidirectional_transition = /*#__PURE__*/ Function.prototype.call.bind(function bidirectional(
this: HTMLElement,
fn: TransitionFn,
rx: tx.intro | tx.outro,
params: any
) {
let cancel;
running_bidi.set(
this,
(cancel =
(running_bidi.has(this) && running_bidi.get(this)(-1)) || run_transition(this, fn, rx | tx.bidirectional, params))
);
return cancel;
});
export const run_bidirectional_transition = /*#__PURE__*/ methodify(
function bidirectional(this: HTMLElement, fn: TransitionFn, rx: tx.intro | tx.outro, params: any ) {
let cancel;
running_bidi.set(
this,
(cancel =
(running_bidi.has(this) && running_bidi.get(this)(-1)) || run_transition(this, fn, rx | tx.bidirectional, params))
);
return cancel;
}
);
export const run_duration = (duration, value1, value2?): number =>
typeof duration === 'function' ? duration(value1, value2) : duration;

14
src/runtime/transition/index.ts
Unescape View File

@ -13,14 +13,14 @@ export interface CssTransitionConfig extends CssAnimationConfig {
tick?: (t: number, u?: number) => void;
}
type FlyParams = FadingConfig & { x: number; y: number; };
type BlurParams = FadingConfig & { amount: number; };
type ScaleParams = FadingConfig & { start: number; };
type DrawParams = CssAnimationConfig & { speed : number };
type FadingConfig = CssAnimationConfig & { opacity: number; };
type MarkedCrossFadeConfig = TimeableConfig & { key: any; };
type FlyParams = FadingConfig & { x: number; y: number };
type BlurParams = FadingConfig & { amount: number };
type ScaleParams = FadingConfig & { start: number };
type DrawParams = CssAnimationConfig & { speed: number };
type FadingConfig = CssAnimationConfig & { opacity: number };
type MarkedCrossFadeConfig = TimeableConfig & { key: any };
export type TimeableConfig = Omit<CssAnimationConfig, 'duration'> & { duration?: number | ((len: number) => number) };
type CrossFadeConfig = TimeableConfig & { fallback(node: Element, params: TimeableConfig, intro: boolean): CssTransitionConfig; };
type CrossFadeConfig = TimeableConfig & { fallback(node: Element, params: TimeableConfig, intro: boolean): CssTransitionConfig };
type ElementMap = Map<any, Element>;
export function blur(node: Element, { delay = 0, duration = 400, easing = cubicInOut, amount = 5, opacity = 0 }: BlurParams): CssTransitionConfig {

15
test/js/samples/each-block-keyed-animated/expected.js
Unescape View File

@ -2,15 +2,14 @@
import {
SvelteComponent,
append,
create_animation,
detach,
element,
empty,
fix_and_destroy_block,
fix_position,
init,
insert,
noop,
run_animation,
safe_not_equal,
set_data,
text,
@ -28,6 +27,7 @@ function create_each_block(key_1, ctx) {
let div;
let t_value = /*thing*/ ctx[1].name + "";
let t;
let unfreeze;
let rect;
let stop_animation = noop;
@ -50,15 +50,18 @@ function create_each_block(key_1, ctx) {
rect = div.getBoundingClientRect();
},
f() {
fix_position(div);
stop_animation();
unfreeze = fix_position(div, rect);
},
a() {
stop_animation();
stop_animation = create_animation(div, rect, foo, {});
if (unfreeze) return; else {
stop_animation();
stop_animation = run_animation(div, rect, foo);
}
},
d(detaching) {
if (detaching) detach(div);
unfreeze = void 0;
}
};
}
@ -95,7 +98,7 @@ function create_fragment(ctx) {
if (dirty & /*things*/ 1) {
const each_value = /*things*/ ctx[0];
for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].r();
each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, each_1_anchor.parentNode, fix_and_destroy_block, create_each_block, each_1_anchor, get_each_context);
each_blocks = update_keyed_each(each_blocks, dirty, ctx, 3, get_key, each_value, each_1_lookup, each_1_anchor.parentNode, create_each_block, each_1_anchor, get_each_context);
for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].a();
}
},

3
test/js/samples/each-block-keyed/expected.js
Unescape View File

@ -2,7 +2,6 @@
import {
SvelteComponent,
append,
destroy_block,
detach,
element,
empty,
@ -79,7 +78,7 @@ function create_fragment(ctx) {
p(ctx, [dirty]) {
if (dirty & /*things*/ 1) {
const each_value = /*things*/ ctx[0];
each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, each_1_anchor.parentNode, destroy_block, create_each_block, each_1_anchor, get_each_context);
each_blocks = update_keyed_each(each_blocks, dirty, ctx, 1, get_key, each_value, each_1_lookup, each_1_anchor.parentNode, create_each_block, each_1_anchor, get_each_context);
}
},
i: noop,

12
test/js/samples/transition-local/expected.js
Unescape View File

@ -1,14 +1,13 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
add_render_callback,
create_in_transition,
detach,
element,
empty,
init,
insert,
noop,
run_transition,
safe_not_equal,
transition_in
} from "svelte/internal";
@ -66,14 +65,13 @@ function create_if_block_1(ctx) {
i(local) {
if (local) {
if (!div_intro) {
add_render_callback(() => {
div_intro = create_in_transition(div, foo, {});
div_intro.start();
});
div_intro = run_transition(div, foo, 1);
}
}
},
o: noop,
o(local) {
div_intro();
},
d(detaching) {
if (detaching) detach(div);
}

24
test/js/samples/transition-repeated-outro/expected.js
Unescape View File

@ -1,14 +1,14 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
check_outros,
create_out_transition,
detach,
element,
empty,
group_outros,
group_transition_out,
init,
insert,
noop,
run_transition,
safe_not_equal,
transition_in,
transition_out
@ -18,7 +18,7 @@ import { fade } from "svelte/transition";
function create_if_block(ctx) {
let div;
let div_outro;
let div_outro = noop;
let current;
return {
@ -32,16 +32,16 @@ function create_if_block(ctx) {
},
i(local) {
if (current) return;
if (div_outro) div_outro.end(1);
div_outro(1);
current = true;
},
o(local) {
div_outro = create_out_transition(div, fade, {});
div_outro = run_transition(div, fade, 2);
current = false;
},
d(detaching) {
if (detaching) detach(div);
if (detaching && div_outro) div_outro.end();
if (detaching) div_outro();
}
};
}
@ -74,13 +74,11 @@ function create_fragment(ctx) {
if_block.m(if_block_anchor.parentNode, if_block_anchor);
}
} else if (if_block) {
group_outros();
transition_out(if_block, 1, 1, () => {
if_block = null;
group_transition_out(transition_out => {
transition_out(if_block, () => {
if_block = null;
});
});
check_outros();
}
},
i(local) {

10
test/runtime/samples/transition-css-in-out-in/_config.js
Unescape View File

@ -2,19 +2,19 @@ export default {
test({ assert, component, target, window, raf }) {
component.visible = true;
const div = target.querySelector('div');
const startsWith = (str) =>
assert.equal(div.style.animation.slice(0, div.style.animation.length-1), str);
assert.equal(div.style.animation, `__svelte_3809512021_0 100ms linear 0ms 1 both`);
startsWith(`100ms linear 0ms 1 normal both running __svelte_3261048502`);
raf.tick(50);
component.visible = false;
// both in and out styles
assert.equal(div.style.animation, `__svelte_3809512021_0 100ms linear 0ms 1 both, __svelte_3750847757_0 100ms linear 0ms 1 both`);
startsWith(`100ms linear 0ms 1 normal both running __svelte_890840093`);
raf.tick(75);
component.visible = true;
// reset original styles
assert.equal(div.style.animation, `__svelte_3809512021_1 100ms linear 0ms 1 both`);
startsWith(`100ms linear 0ms 1 normal both running __svelte_3261048502`);
},
};

4
test/runtime/samples/transition-js-await-block/_config.js
Unescape View File

@ -29,8 +29,8 @@ export default {
const ps = document.querySelectorAll('p');
assert.equal(ps[1].className, 'pending');
assert.equal(ps[0].className, 'then');
assert.equal(ps[1].foo, 0.2);
assert.equal(ps[0].foo, 0.3);
assert.equal(Math.round(ps[1].foo * 10) / 10, 0.2);
assert.equal(Math.round(ps[0].foo * 10) / 10, 0.3);
});
}
};

2
test/runtime/samples/transition-js-deferred/_config.js
Unescape View File

@ -3,7 +3,7 @@ export default {
component.visible = true;
return Promise.resolve().then(() => {
const div = target.querySelector('div');
const div = target.querySelector('.foo');
assert.equal(div.foo, 0);
raf.tick(50);

2
test/runtime/samples/transition-js-deferred/main.svelte
Unescape View File

@ -40,7 +40,7 @@
</script>
{#if visible}
<div transition:foo>a</div>
<div class="foo" transition:foo>a</div>
{:else}
<div transition:bar>b</div>
{/if}

8
test/runtime/samples/transition-js-delay/_config.js
Unescape View File

@ -13,15 +13,9 @@ export default {
component.visible = false;
raf.tick(125);
assert.equal(div.foo, 0.75);
assert.equal(div.foo, 0.25);
raf.tick(150);
assert.equal(div.foo, 1);
raf.tick(175);
assert.equal(div.foo, 0.75);
raf.tick(250);
assert.equal(div.foo, 0);
}
};

12
test/runtime/samples/transition-js-each-block-intro-outro/_config.js
Unescape View File

@ -19,9 +19,9 @@ export default {
component.visible = false;
raf.tick(70);
assert.equal(divs[0].foo, 0.7);
assert.equal(divs[1].foo, 0.7);
assert.equal(divs[2].foo, 0.7);
assert.equal(divs[0].foo, 0.5);
assert.equal(divs[1].foo, 0.5);
assert.equal(divs[2].foo, 0.5);
assert.equal(divs[0].bar, 0.8);
assert.equal(divs[1].bar, 0.8);
@ -30,9 +30,9 @@ export default {
component.visible = true;
raf.tick(100);
assert.equal(divs[0].foo, 0.3);
assert.equal(divs[1].foo, 0.3);
assert.equal(divs[2].foo, 0.3);
assert.equal(Math.round(divs[0].foo * 10) / 10, 0.3);
assert.equal(Math.round(divs[1].foo * 10) / 10, 0.3);
assert.equal(Math.round(divs[2].foo * 10) / 10, 0.3);
assert.equal(divs[0].bar, 1);
assert.equal(divs[1].bar, 1);

12
test/runtime/samples/transition-js-events-in-out/_config.js
Unescape View File

@ -10,7 +10,7 @@ export default {
<p>waiting...</p>
`,
async test({ assert, component, target, raf }) {
test({ assert, component, target, raf }) {
component.visible = true;
assert.htmlEqual(target.innerHTML, `
@ -21,12 +21,12 @@ export default {
<p>d</p>
`);
await raf.tick(50);
raf.tick(50);
assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
assert.equal(component.intro_count, 4);
await raf.tick(100);
raf.tick(100);
assert.equal(component.intro_count, 0);
assert.htmlEqual(target.innerHTML, `
@ -47,16 +47,16 @@ export default {
<p>d</p>
`);
await raf.tick(150);
raf.tick(150);
assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
assert.equal(component.outro_count, 4);
await raf.tick(200);
raf.tick(200);
assert.equal(component.outro_count, 0);
component.visible = true;
await raf.tick(250);
raf.tick(250);
assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
assert.equal(component.intro_count, 4);

4
test/runtime/samples/transition-js-if-block-intro-outro/_config.js
Unescape View File

@ -32,11 +32,11 @@ export default {
component.visible = false;
raf.tick(1300);
assert.equal(div.foo, 0.75);
assert.equal(div.foo, 0.5);
assert.equal(div.bar, 0.75);
raf.tick(1400);
assert.equal(div.foo, 1);
assert.equal(div.foo, 0.5);
assert.equal(div.bar, 0.5);
raf.tick(2000);

Write Preview
Loading…
Cancel
Save