From 34f31986ff5dc2628b9c0840db7d9d6cfe7d9ac4 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 22 Feb 2024 12:21:33 -0500 Subject: [PATCH] type stuff --- .../src/internal/client/dom/blocks/each.js | 2 +- .../internal/client/reactivity/computations.js | 12 +++++++----- packages/svelte/src/internal/client/render.js | 16 +++++++++------- .../svelte/src/internal/client/transitions.js | 2 +- packages/svelte/src/internal/client/types.d.ts | 6 ++++++ packages/svelte/tests/animation-helpers.js | 9 +++++++++ 6 files changed, 33 insertions(+), 14 deletions(-) diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js index 2a9505314d..d822b53fac 100644 --- a/packages/svelte/src/internal/client/dom/blocks/each.js +++ b/packages/svelte/src/internal/client/dom/blocks/each.js @@ -354,7 +354,7 @@ export function each_keyed(anchor_node, collection, flags, key_fn, render_fn, fa * @param {Element | Comment} anchor_node * @param {() => V[]} collection * @param {number} flags - * @param {(anchor: Element | Comment | null, item: V, index: import('../../types.js').MaybeSignal) => void} render_fn + * @param {(anchor: Element | Comment | null, item: V | (() => V), index: import('../../types.js').MaybeSignal) => void} render_fn * @param {null | ((anchor: Node) => void)} fallback_fn * @returns {void} */ diff --git a/packages/svelte/src/internal/client/reactivity/computations.js b/packages/svelte/src/internal/client/reactivity/computations.js index 19d620ab6a..47a2d11024 100644 --- a/packages/svelte/src/internal/client/reactivity/computations.js +++ b/packages/svelte/src/internal/client/reactivity/computations.js @@ -291,7 +291,7 @@ export function pause_effect(effect, done) { } /** - * @param {import('../types.js').ComputationSignal} effect + * @param {import('../types.js').BlockEffect} effect * @param {import('../types.js').TransitionObject[]} transitions */ function pause_children(effect, transitions) { @@ -309,7 +309,7 @@ function pause_children(effect, transitions) { } /** - * @param {import('../types.js').ComputationSignal} effect + * @param {import('../types.js').BlockEffect} effect */ export function destroy_effect(effect) { // TODO call cleanup functions (but not sure when exactly?) @@ -328,7 +328,7 @@ export function destroy_effect(effect) { } /** - * @param {import('../types.js').ComputationSignal} effect + * @param {import('../types.js').BlockEffect} effect */ export function resume_effect(effect) { if (effect.r) { @@ -339,7 +339,9 @@ export function resume_effect(effect) { effect.f ^= INERT; - for (const transition of effect.in) { - transition.to(1); + if (effect.in) { + for (const transition of effect.in) { + transition.to(1); + } } } diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js index cf48a0cdb6..24ef448c60 100644 --- a/packages/svelte/src/internal/client/render.js +++ b/packages/svelte/src/internal/client/render.js @@ -268,7 +268,8 @@ export function comment(anchor) { */ function close_template(dom, is_fragment, anchor) { const block = /** @type {import('./types.js').Block} */ (current_block); - const effect = current_effect; + + const effect = /** @type {import('./types.js').BlockEffect} */ (current_effect); /** @type {import('./types.js').TemplateNode | Array} */ const current = is_fragment @@ -1632,16 +1633,17 @@ export function element(anchor_node, tag_fn, is_svg, render_fn) { } /** - * @template P + * @template {Record} P + * @template {(node: Node, props: P) => void} C * @param {Comment} anchor_node - * @param {() => (props: P) => void} component_fn - * @param {(component: (props: P) => void) => void} render_fn + * @param {() => C} component_fn + * @param {(component: C) => void} render_fn * @returns {void} */ export function component(anchor_node, component_fn, render_fn) { hydrate_block_anchor(anchor_node); - /** @type {TODO} */ + /** @type {C | null} */ let Component = null; /** @type {import('./types.js').ComputationSignal | null} */ @@ -1658,7 +1660,7 @@ export function component(anchor_node, component_fn, render_fn) { } if (Component) { - effect = render_effect(() => render_fn(Component), {}, true); + effect = render_effect(() => render_fn(/** @type {C} */ (Component)), {}, true); } }); } @@ -1769,7 +1771,7 @@ export function transition(dom, get_transition_fn, props, global = false) { * @returns {void} */ export function animate(dom, get_transition_fn, props) { - bind_transition(dom, get_transition_fn, props, 'key', false); + throw new Error('TODO animate'); } /** diff --git a/packages/svelte/src/internal/client/transitions.js b/packages/svelte/src/internal/client/transitions.js index 805e6e24be..421d3a95e5 100644 --- a/packages/svelte/src/internal/client/transitions.js +++ b/packages/svelte/src/internal/client/transitions.js @@ -509,7 +509,7 @@ function is_transition_block(block) { * @returns {void} */ export function bind_transition(element, get_fn, get_params, direction, global) { - const effect = /** @type {import('./types.js').EffectSignal} */ (current_effect); + const effect = /** @type {import('./types.js').BlockEffect} */ (current_effect); let p = direction === 'out' ? 1 : 0; diff --git a/packages/svelte/src/internal/client/types.d.ts b/packages/svelte/src/internal/client/types.d.ts index 98d56d80f4..35b9dd0eb7 100644 --- a/packages/svelte/src/internal/client/types.d.ts +++ b/packages/svelte/src/internal/client/types.d.ts @@ -121,6 +121,12 @@ export type ComputationSignal = { w: number; }; +export type BlockEffect = ComputationSignal & { + in?: TransitionObject[]; + out?: TransitionObject[]; + dom?: TemplateNode | Array; +}; + export type Signal = SourceSignal | ComputationSignal; export type SignalDebug = SourceSignalDebug & Signal; diff --git a/packages/svelte/tests/animation-helpers.js b/packages/svelte/tests/animation-helpers.js index 6de42e1874..b7eaa7eef0 100644 --- a/packages/svelte/tests/animation-helpers.js +++ b/packages/svelte/tests/animation-helpers.js @@ -34,7 +34,11 @@ class Animation { #keyframes; #duration; #target; + + /** @type {() => void} */ #finished; + + /** @type {() => void} */ #cancelled; /** @@ -48,12 +52,17 @@ class Animation { this.#duration = options.duration || 0; this.currentTime = 0; + this.#finished = () => {}; + this.#cancelled = () => {}; + // Promise-like semantics, but call callbacks immediately on raf.tick this.finished = { + /** @param {() => void} callback */ then: (callback) => { this.#finished = callback; return { + /** @param {() => void} callback */ catch: (callback) => { this.#cancelled = callback; }