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 172x 75x 75x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 172x 489x 489x 489x 459x 459x 459x 459x 459x 489x 489x 137x 117x 137x 489x 489x 180x 166x 180x 489x 489x 72x 72x 72x 489x 489x 150x 150x 489x 489x 78x 78x 489x 489x 10x 10x 489x 489x 459x 459x 459x 459x 459x 459x 459x 459x 459x 489x 172x 172x 308x 308x 308x 278x 278x 278x 278x 278x 278x 176x 172x 172x 278x 278x 78x 78x 78x 78x 278x 278x 278x 61x 37x 37x 278x 217x 217x 217x 217x 217x 217x 308x 30x 30x 30x 308x 308x 308x 308x 172x 172x 172x 75x 75x 172x  
/** @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;
	}
}