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

98.79% Statements 164/166
87.5% Branches 42/48
100% Functions 2/2
98.74% Lines 157/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 163x 74x 74x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 163x 265x 265x 265x 235x 235x 235x 235x 235x 265x 265x 55x 51x 55x 265x 265x 134x 104x 134x 265x 265x 39x 35x 39x 265x 265x 49x 49x 265x 265x 30x 30x 265x 265x     265x 265x 235x 235x 235x 235x 235x 235x 235x 235x 235x 265x 163x 163x 255x 255x 255x 225x 225x 225x 225x 225x 225x 128x 124x 124x 225x 225x 39x 39x 39x 39x 225x 225x 225x 60x 36x 36x 225x 165x 165x 165x 165x 165x 165x 255x 30x 30x 30x 255x 255x 255x 255x 163x 163x 163x 74x 74x 163x  
/** @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;
	}
}