All files / src/internal/client/dom/blocks await.js

100% Statements 166/166
89.79% Branches 44/49
100% Functions 2/2
100% Lines 159/159

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 1602x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 164x 74x 74x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 164x 365x 365x 365x 327x 327x 327x 327x 327x 365x 365x 73x 68x 73x 365x 365x 172x 134x 172x 365x 365x 72x 64x 72x 365x 365x 100x 100x 365x 365x 54x 54x 365x 365x 2x 2x 365x 365x 327x 327x 327x 327x 327x 327x 327x 327x 327x 365x 164x 164x 300x 300x 300x 262x 262x 262x 262x 262x 262x 160x 156x 156x 262x 262x 78x 78x 78x 78x 262x 262x 262x 60x 36x 36x 262x 202x 202x 202x 202x 202x 202x 300x 38x 38x 38x 300x 300x 300x 300x 164x 164x 164x 74x 74x 164x  
/** @import { Effect, Source, TemplateNode } from '#client' */
import { is_promise, noop } from '../../../shared/utils.js';
import {
	current_component_context,
	flush_sync,
	is_runes,
	set_current_component_context,
	set_current_effect,
	set_current_reaction,
	set_dev_current_component_function
} from '../../runtime.js';
import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
import { DEV } from 'esm-env';
import { queue_micro_task } from '../task.js';
import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
import { mutable_source, set, source } from '../../reactivity/sources.js';
 
const PENDING = 0;
const THEN = 1;
const CATCH = 2;
 
/**
 * @template V
 * @param {TemplateNode} node
 * @param {(() => Promise<V>)} get_input
 * @param {null | ((anchor: Node) => void)} pending_fn
 * @param {null | ((anchor: Node, value: Source<V>) => void)} then_fn
 * @param {null | ((anchor: Node, error: unknown) => void)} catch_fn
 * @returns {void}
 */
export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
	if (hydrating) {
		hydrate_next();
	}
 
	var anchor = node;
	var runes = is_runes();
	var component_context = current_component_context;
 
	/** @type {any} */
	var component_function = DEV ? component_context?.function : null;
 
	/** @type {V | Promise<V>} */
	var input;
 
	/** @type {Effect | null} */
	var pending_effect;
 
	/** @type {Effect | null} */
	var then_effect;
 
	/** @type {Effect | null} */
	var catch_effect;
 
	var input_source = runes
		? source(/** @type {V} */ (undefined))
		: mutable_source(/** @type {V} */ (undefined));
	var error_source = runes ? source(undefined) : mutable_source(undefined);
	var resolved = false;
 
	/**
	 * @param {PENDING | THEN | CATCH} state
	 * @param {boolean} restore
	 */
	function update(state, restore) {
		resolved = true;
 
		if (restore) {
			set_current_effect(effect);
			set_current_reaction(effect); // TODO do we need both?
			set_current_component_context(component_context);
			if (DEV) set_dev_current_component_function(component_function);
		}
 
		if (state === PENDING && pending_fn) {
			if (pending_effect) resume_effect(pending_effect);
			else pending_effect = branch(() => pending_fn(anchor));
		}
 
		if (state === THEN && then_fn) {
			if (then_effect) resume_effect(then_effect);
			else then_effect = branch(() => then_fn(anchor, input_source));
		}
 
		if (state === CATCH && catch_fn) {
			if (catch_effect) resume_effect(catch_effect);
			else catch_effect = branch(() => catch_fn(anchor, error_source));
		}
 
		if (state !== PENDING && pending_effect) {
			pause_effect(pending_effect, () => (pending_effect = null));
		}
 
		if (state !== THEN && then_effect) {
			pause_effect(then_effect, () => (then_effect = null));
		}
 
		if (state !== CATCH && catch_effect) {
			pause_effect(catch_effect, () => (catch_effect = null));
		}
 
		if (restore) {
			if (DEV) set_dev_current_component_function(null);
			set_current_component_context(null);
			set_current_reaction(null);
			set_current_effect(null);
 
			// without this, the DOM does not update until two ticks after the promise
			// resolves, which is unexpected behaviour (and somewhat irksome to test)
			flush_sync();
		}
	}
 
	var effect = block(() => {
		if (input === (input = get_input())) return;
 
		if (is_promise(input)) {
			var promise = input;
 
			resolved = false;
 
			promise.then(
				(value) => {
					if (promise !== input) return;
					set(input_source, value);
					update(THEN, true);
				},
				(error) => {
					if (promise !== input) return;
					set(error_source, error);
					update(CATCH, true);
				}
			);
 
			if (hydrating) {
				if (pending_fn) {
					pending_effect = branch(() => pending_fn(anchor));
				}
			} else {
				// Wait a microtask before checking if we should show the pending state as
				// the promise might have resolved by the next microtask.
				Promise.resolve().then(() => {
					if (!resolved) update(PENDING, true);
				});
			}
		} else {
			set(input_source, input);
			update(THEN, false);
		}
 
		// Inert effects are proactively detached from the effect tree. Returning a noop
		// teardown function is an easy way to ensure that this is not discarded
		return noop;
	});
 
	if (hydrating) {
		anchor = hydrate_node;
	}
}