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

100% Statements 166/166
87.5% Branches 42/48
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 170x 74x 74x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 486x 486x 486x 456x 456x 456x 456x 456x 486x 486x 136x 116x 136x 486x 486x 178x 164x 178x 486x 486x 72x 72x 72x 486x 486x 148x 148x 486x 486x 78x 78x 486x 486x 10x 10x 486x 486x 456x 456x 456x 456x 456x 456x 456x 456x 456x 486x 170x 170x 306x 306x 306x 276x 276x 276x 276x 276x 276x 174x 170x 170x 276x 276x 78x 78x 78x 78x 276x 276x 276x 60x 36x 36x 276x 216x 216x 216x 216x 216x 216x 306x 30x 30x 30x 306x 306x 306x 306x 170x 170x 170x 74x 74x 170x  
/** @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;
	}
}