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

98.79% Statements 164/166
86% Branches 43/50
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 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 294x 294x 294x 264x 264x 264x 264x 264x 294x 294x 62x 44x 62x 294x 294x 140x 124x 140x 294x 294x 16x 16x 16x 294x 294x 76x 76x 222x 294x 20x 20x 202x 294x     202x 284x 172x 172x 172x 172x 172x 172x 172x 172x 172x 294x 164x 164x 208x 208x 208x 178x 178x 178x 178x 178x 178x 136x 132x 132x 178x 178x 16x 16x 16x 16x 178x 178x 178x 60x 36x 36x 178x 118x 118x 118x 118x 118x 118x 208x 30x 30x 30x 208x 208x 208x 208x 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.
				queue_micro_task(() => {
					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;
	}
}