From 927c8929557a12aed58be87b3d6405760c531eb1 Mon Sep 17 00:00:00 2001 From: pushkine Date: Mon, 1 Jun 2020 19:54:13 +0200 Subject: [PATCH] fix --- src/compiler/compile/render_dom/Block.ts | 2 +- .../compile/render_dom/wrappers/EachBlock.ts | 11 +- .../render_dom/wrappers/Element/index.ts | 18 ++-- src/runtime/internal/environment.ts | 5 +- src/runtime/internal/keyed_each.ts | 10 ++ src/runtime/internal/loop.ts | 30 +++--- src/runtime/internal/scheduler.ts | 26 +++-- src/runtime/internal/style_manager.ts | 101 +++++++++--------- src/runtime/internal/transitions.ts | 45 ++++---- src/runtime/transition/index.ts | 14 +-- .../each-block-keyed-animated/expected.js | 15 +-- test/js/samples/each-block-keyed/expected.js | 3 +- test/js/samples/transition-local/expected.js | 12 +-- .../transition-repeated-outro/expected.js | 24 ++--- .../transition-css-in-out-in/_config.js | 10 +- .../transition-js-await-block/_config.js | 4 +- .../samples/transition-js-deferred/_config.js | 2 +- .../transition-js-deferred/main.svelte | 2 +- .../samples/transition-js-delay/_config.js | 8 +- .../_config.js | 12 +-- .../transition-js-events-in-out/_config.js | 12 +-- .../_config.js | 4 +- 22 files changed, 188 insertions(+), 182 deletions(-) diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts index c1a3fdd098..91e326d98c 100644 --- a/src/compiler/compile/render_dom/Block.ts +++ b/src/compiler/compile/render_dom/Block.ts @@ -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) { diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts index e32549a79e..3a6ad03240 100644 --- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts @@ -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) { diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index f8aae39a04..28ad3791c2 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -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}();`); diff --git a/src/runtime/internal/environment.ts b/src/runtime/internal/environment.ts index bda01b4d3f..2dfe05eba5 100644 --- a/src/runtime/internal/environment.ts +++ b/src/runtime/internal/environment.ts @@ -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); diff --git a/src/runtime/internal/keyed_each.ts b/src/runtime/internal/keyed_each.ts index 3c89c01e4b..b7991d2f9f 100644 --- a/src/runtime/internal/keyed_each.ts +++ b/src/runtime/internal/keyed_each.ts @@ -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); + } +} \ No newline at end of file diff --git a/src/runtime/internal/loop.ts b/src/runtime/internal/loop.ts index 5cdfc434ad..95abd518fa 100644 --- a/src/runtime/internal/loop.ts +++ b/src/runtime/internal/loop.ts @@ -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 = [], - next_frame : Array = []; +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 = [], - timed_tasks : Array = []; +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; }; diff --git a/src/runtime/internal/scheduler.ts b/src/runtime/internal/scheduler.ts index 796ca624be..47c6edd08d 100644 --- a/src/runtime/internal/scheduler.ts +++ b/src/runtime/internal/scheduler.ts @@ -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(); + } }; diff --git a/src/runtime/internal/style_manager.ts b/src/runtime/internal/style_manager.ts index 5d5b30885d..2efbae0ec9 100644 --- a/src/runtime/internal/style_manager.ts +++ b/src/runtime/internal/style_manager.ts @@ -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; + } } - } - }; -}); \ No newline at end of file + }; + } +); \ No newline at end of file diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts index 762fa38bf9..4adcfd6915 100644 --- a/src/runtime/internal/transitions.ts +++ b/src/runtime/internal/transitions.ts @@ -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 = 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; diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts index d7ffb3b42d..7c262b194b 100644 --- a/src/runtime/transition/index.ts +++ b/src/runtime/transition/index.ts @@ -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 & { 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; export function blur(node: Element, { delay = 0, duration = 400, easing = cubicInOut, amount = 5, opacity = 0 }: BlurParams): CssTransitionConfig { diff --git a/test/js/samples/each-block-keyed-animated/expected.js b/test/js/samples/each-block-keyed-animated/expected.js index 7fb81c27a2..24dfd5465a 100644 --- a/test/js/samples/each-block-keyed-animated/expected.js +++ b/test/js/samples/each-block-keyed-animated/expected.js @@ -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(); } }, diff --git a/test/js/samples/each-block-keyed/expected.js b/test/js/samples/each-block-keyed/expected.js index ad8c074e99..0707de49e5 100644 --- a/test/js/samples/each-block-keyed/expected.js +++ b/test/js/samples/each-block-keyed/expected.js @@ -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, diff --git a/test/js/samples/transition-local/expected.js b/test/js/samples/transition-local/expected.js index 25a03f026f..30d31805ef 100644 --- a/test/js/samples/transition-local/expected.js +++ b/test/js/samples/transition-local/expected.js @@ -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); } diff --git a/test/js/samples/transition-repeated-outro/expected.js b/test/js/samples/transition-repeated-outro/expected.js index 1f76a93666..02febde2af 100644 --- a/test/js/samples/transition-repeated-outro/expected.js +++ b/test/js/samples/transition-repeated-outro/expected.js @@ -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) { diff --git a/test/runtime/samples/transition-css-in-out-in/_config.js b/test/runtime/samples/transition-css-in-out-in/_config.js index 10719280e9..3142716877 100644 --- a/test/runtime/samples/transition-css-in-out-in/_config.js +++ b/test/runtime/samples/transition-css-in-out-in/_config.js @@ -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`); }, }; diff --git a/test/runtime/samples/transition-js-await-block/_config.js b/test/runtime/samples/transition-js-await-block/_config.js index 80546ae6b8..d019c062d6 100644 --- a/test/runtime/samples/transition-js-await-block/_config.js +++ b/test/runtime/samples/transition-js-await-block/_config.js @@ -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); }); } }; diff --git a/test/runtime/samples/transition-js-deferred/_config.js b/test/runtime/samples/transition-js-deferred/_config.js index 9d6833d2f4..05929964cd 100644 --- a/test/runtime/samples/transition-js-deferred/_config.js +++ b/test/runtime/samples/transition-js-deferred/_config.js @@ -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); diff --git a/test/runtime/samples/transition-js-deferred/main.svelte b/test/runtime/samples/transition-js-deferred/main.svelte index 063773df39..eb75f3a7e3 100644 --- a/test/runtime/samples/transition-js-deferred/main.svelte +++ b/test/runtime/samples/transition-js-deferred/main.svelte @@ -40,7 +40,7 @@ {#if visible} -
a
+
a
{:else}
b
{/if} \ No newline at end of file diff --git a/test/runtime/samples/transition-js-delay/_config.js b/test/runtime/samples/transition-js-delay/_config.js index a0613737b2..43d7cf5b2a 100644 --- a/test/runtime/samples/transition-js-delay/_config.js +++ b/test/runtime/samples/transition-js-delay/_config.js @@ -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); } }; \ No newline at end of file diff --git a/test/runtime/samples/transition-js-each-block-intro-outro/_config.js b/test/runtime/samples/transition-js-each-block-intro-outro/_config.js index 3a764c5612..b3cb9b0977 100644 --- a/test/runtime/samples/transition-js-each-block-intro-outro/_config.js +++ b/test/runtime/samples/transition-js-each-block-intro-outro/_config.js @@ -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); diff --git a/test/runtime/samples/transition-js-events-in-out/_config.js b/test/runtime/samples/transition-js-events-in-out/_config.js index 854e7e2f4b..d6e1019f91 100644 --- a/test/runtime/samples/transition-js-events-in-out/_config.js +++ b/test/runtime/samples/transition-js-events-in-out/_config.js @@ -10,7 +10,7 @@ export default {

waiting...

`, - async test({ assert, component, target, raf }) { + test({ assert, component, target, raf }) { component.visible = true; assert.htmlEqual(target.innerHTML, ` @@ -21,12 +21,12 @@ export default {

d

`); - 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 {

d

`); - 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); diff --git a/test/runtime/samples/transition-js-if-block-intro-outro/_config.js b/test/runtime/samples/transition-js-if-block-intro-outro/_config.js index e6512c93ed..edf7438d27 100644 --- a/test/runtime/samples/transition-js-if-block-intro-outro/_config.js +++ b/test/runtime/samples/transition-js-if-block-intro-outro/_config.js @@ -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);