ripple/tests/hydration/compiled/client/if.js

Ripple is an elegant TypeScript UI framework

// @ts-nocheck
import * as _$_ from 'ripple/internal/client';

var root = _$_.template_el('div', ['class', 'shown'], 'Visible');

function consequent(__anchor, show) {
	var div = root();

	_$_.append(__anchor, div);
}

function if_1(show) {
	if (show) return consequent;
}

function IfTruthy_render(__anchor, __block) {
	const show = true;

	_$_.if(__anchor, if_1, true, show);
}

IfTruthy[_$_.$r] = IfTruthy_render;

var root_1 = _$_.template_el('div', ['class', 'shown'], 'Visible');

function consequent_1(__anchor, show) {
	var div_1 = root_1();

	_$_.append(__anchor, div_1);
}

function if_2(show) {
	if (show) return consequent_1;
}

function IfFalsy_render(__anchor, __block) {
	const show = false;

	_$_.if(__anchor, if_2, true, show);
}

IfFalsy[_$_.$r] = IfFalsy_render;

var root_2 = _$_.template_el('div', ['class', 'logged-in'], 'Welcome back!');
var root_3 = _$_.template_el('div', ['class', 'logged-out'], 'Please log in');

function consequent_2(__anchor, isLoggedIn) {
	var div_2 = root_2();

	_$_.append(__anchor, div_2);
}

function alternate(__anchor, isLoggedIn) {
	var div_3 = root_3();

	_$_.append(__anchor, div_3);
}

function if_3(isLoggedIn) {
	if (isLoggedIn) return consequent_2; else return alternate;
}

function IfElse_render(__anchor, __block) {
	const isLoggedIn = true;

	_$_.if(__anchor, if_3, true, isLoggedIn);
}

IfElse[_$_.$r] = IfElse_render;

var root_6 = _$_.template_el('div', ['class', 'content'], 'Content visible');

function consequent_3(__anchor, show) {
	var div_4 = root_6();

	_$_.append(__anchor, div_4);
}

function if_4(show) {
	if (show.value) return consequent_3;
}

var root_5 = _$_.template(`<button class=toggle>Toggle</button><!>`, 1, 2);

function render(__prev) {
	var __a = if_4(__prev._a);

	if (__prev.a !== __a) {
		_$_.if_update(__prev._b, __prev.a = __a);
	}
}

var root_4 = _$_.template(`<!>`, 1, 1);

function ReactiveIf_render(__anchor, __block) {
	const show = _$_.track(true, __block, '740m40');
	var fragment = root_4();
	var node_1 = _$_.first_child_frag(fragment);

	_$_.expression(node_1, () => _$_.tsrx_element((__anchor, __block) => {
		var fragment_1 = root_5();
		var button = _$_.first_child_frag(fragment_1);

		button.__click = () => {
			show.value = !show.value;
		};

		var node = _$_.hydrating ? _$_.hydrate_sibling() : button.nextSibling;
		var ifs = _$_.if_static(node, if_4, 0, show);

		_$_.render(render, { a: _$_.UNINITIALIZED, _a: show, _b: ifs });
		_$_.append(__anchor, fragment_1);
	}));

	_$_.append(__anchor, fragment);
}

ReactiveIf[_$_.$r] = ReactiveIf_render;

var root_9 = _$_.template_el('div', ['class', 'on'], 'ON');
var root_10 = _$_.template_el('div', ['class', 'off'], 'OFF');

function consequent_4(__anchor, isOn) {
	var div_5 = root_9();

	_$_.append(__anchor, div_5);
}

function alternate_1(__anchor, isOn) {
	var div_6 = root_10();

	_$_.append(__anchor, div_6);
}

function if_5(isOn) {
	if (isOn.value) return consequent_4; else return alternate_1;
}

var root_8 = _$_.template(`<button class=toggle>Toggle</button><!>`, 1, 2);

function render_1(__prev) {
	var __a = if_5(__prev._a);

	if (__prev.a !== __a) {
		_$_.if_update(__prev._b, __prev.a = __a);
	}
}

var root_7 = _$_.template(`<!>`, 1, 1);

function ReactiveIfElse_render(__anchor, __block) {
	const isOn = _$_.track(false, __block, 'i26m2h');
	var fragment_2 = root_7();
	var node_3 = _$_.first_child_frag(fragment_2);

	_$_.expression(node_3, () => _$_.tsrx_element((__anchor, __block) => {
		var fragment_3 = root_8();
		var button_1 = _$_.first_child_frag(fragment_3);

		button_1.__click = () => {
			isOn.value = !isOn.value;
		};

		var node_2 = _$_.hydrating ? _$_.hydrate_sibling() : button_1.nextSibling;
		var ifs_1 = _$_.if_static(node_2, if_5, 0, isOn);

		_$_.render(render_1, { a: _$_.UNINITIALIZED, _a: isOn, _b: ifs_1 });
		_$_.append(__anchor, fragment_3);
	}));

	_$_.append(__anchor, fragment_2);
}

ReactiveIfElse[_$_.$r] = ReactiveIfElse_render;

var root_14 = _$_.template_el('span', ['class', 'inner-content'], 'Inner');

function consequent_5(__anchor, inner) {
	var span = root_14();

	_$_.append(__anchor, span);
}

function if_6(inner) {
	if (inner.value) return consequent_5;
}

var root_13 = _$_.template_el('div', ['class', 'outer-content'], 'Outer');

function render_2(__prev) {
	var __a = if_6(__prev._a);

	if (__prev.a !== __a) {
		_$_.if_update(__prev._b, __prev.a = __a);
	}
}

function consequent_6(__anchor, { a: outer, b: inner }) {
	var div_7 = root_13();

	{
		var expression = _$_.hydrating ? _$_.hydrate_child() : div_7.firstChild;
		var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_7, true);
		var ifs_2 = _$_.if_static(node_5, if_6, 0, inner);

		_$_.hydrating && _$_.pop(div_7);
	}

	_$_.render(render_2, { a: _$_.UNINITIALIZED, _a: inner, _b: ifs_2 });
	_$_.append(__anchor, div_7);
}

function if_7({ a: outer, b: inner }) {
	if (outer.value) return consequent_6;
}

var root_12 = _$_.template(`<button class=outer-toggle>Outer</button><button class=inner-toggle>Inner</button><!>`, 1, 3);

function render_3(__prev) {
	var __a = if_7({ a: __prev._a, b: __prev._b });

	if (__prev.a !== __a) {
		_$_.if_update(__prev._c, __prev.a = __a);
	}
}

var root_11 = _$_.template(`<!>`, 1, 1);

function NestedIf_render(__anchor, __block) {
	const outer = _$_.track(true, __block, 'xggelb');
	const inner = _$_.track(true, __block, '1v6cfmu');
	var fragment_4 = root_11();
	var node_6 = _$_.first_child_frag(fragment_4);

	_$_.expression(node_6, () => _$_.tsrx_element((__anchor, __block) => {
		var fragment_5 = root_12();
		var button_2 = _$_.first_child_frag(fragment_5);

		button_2.__click = () => {
			outer.value = !outer.value;
		};

		var button_3 = _$_.hydrating ? _$_.hydrate_sibling() : button_2.nextSibling;

		button_3.__click = () => {
			inner.value = !inner.value;
		};

		var node_4 = _$_.hydrating ? _$_.hydrate_sibling() : button_3.nextSibling;
		var ifs_3 = _$_.if_static(node_4, if_7, 0, { a: outer, b: inner });

		_$_.render(render_3, { a: _$_.UNINITIALIZED, _a: outer, _b: inner, _c: ifs_3 });
		_$_.append(__anchor, fragment_5);
	}));

	_$_.append(__anchor, fragment_4);
}

NestedIf[_$_.$r] = NestedIf_render;

var root_16 = _$_.template_el('div', ['class', 'state'], 'Loading...');
var root_17 = _$_.template_el('div', ['class', 'state'], 'Success!');
var root_18 = _$_.template_el('div', ['class', 'state'], 'Error occurred');

function consequent_7(__anchor, status) {
	var div_9 = root_16();

	_$_.append(__anchor, div_9);
}

function consequent_8(__anchor, status) {
	var div_10 = root_17();

	_$_.append(__anchor, div_10);
}

function alternate_2(__anchor, status) {
	var div_11 = root_18();

	_$_.append(__anchor, div_11);
}

function if_8(status) {
	if (status.value === 'loading') return consequent_7; else if (status.value === 'success') return consequent_8; else return alternate_2;
}

var root_15 = _$_.template_el('div', null, [
	['button', ['class', 'success'], 'Success'],
	['button', ['class', 'error'], 'Error'],
	['button', ['class', 'loading'], 'Loading']
]);

function render_4(__prev) {
	var __a = if_8(__prev._a);

	if (__prev.a !== __a) {
		_$_.if_update(__prev._b, __prev.a = __a);
	}
}

function IfElseIfChain_render(__anchor, __block) {
	const status = _$_.track('loading', __block, 'l79qh6');
	var div_8 = root_15();

	{
		var button_4 = _$_.hydrating ? _$_.hydrate_child() : div_8.firstChild;

		button_4.__click = () => {
			status.value = 'success';
		};

		var button_5 = _$_.hydrating ? _$_.hydrate_sibling() : button_4.nextSibling;

		button_5.__click = () => {
			status.value = 'error';
		};

		var button_6 = _$_.hydrating ? _$_.hydrate_sibling() : button_5.nextSibling;

		button_6.__click = () => {
			status.value = 'loading';
		};

		var node_7 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_8, true);
		var ifs_4 = _$_.if_static(node_7, if_8, 0, status);

		_$_.hydrating && _$_.pop(div_8);
	}

	_$_.render(render_4, { a: _$_.UNINITIALIZED, _a: status, _b: ifs_4 });
	_$_.append(__anchor, div_8);
}

IfElseIfChain[_$_.$r] = IfElseIfChain_render;

import { track } from 'ripple';

export function IfTruthy() {
	return _$_.tsrx_element(IfTruthy_render);
}

export function IfFalsy() {
	return _$_.tsrx_element(IfFalsy_render);
}

export function IfElse() {
	return _$_.tsrx_element(IfElse_render);
}

export function ReactiveIf() {
	return _$_.tsrx_element(ReactiveIf_render);
}

export function ReactiveIfElse() {
	return _$_.tsrx_element(ReactiveIfElse_render);
}

export function NestedIf() {
	return _$_.tsrx_element(NestedIf_render);
}

export function IfElseIfChain() {
	return _$_.tsrx_element(IfElseIfChain_render);
}

_$_.delegate(['click']);