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

Ripple is an elegant TypeScript UI framework

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

var root = _$_.template(`<div><button class="increment">Increment</button><span class="count"> </span></div>`, 0);
var root_1 = _$_.template(`<div><button class="decrement">-</button><span class="count"> </span><button class="increment">+</button></div>`, 0);
var root_2 = _$_.template(`<div><button class="target">Target</button><span class="clicks"> </span><span class="hovers"> </span></div>`, 0);
var root_3 = _$_.template(`<div><button class="btn">Click</button><span class="count"> </span><span class="action"> </span></div>`, 0);
var root_4 = _$_.template(`<div><button class="toggle"> </button></div>`, 0);
var root_5 = _$_.template(`<button class="child-btn"> </button>`, 0);
var root_6 = _$_.template(`<div><!><span class="count"> </span></div>`, 0);

import { track } from 'ripple';

export function ClickCounter(__anchor, _, __block) {
	_$_.push_component();

	let lazy = _$_.track(0, __block, 'a070e3a7');
	var div_1 = root();

	{
		var button_1 = _$_.child(div_1);

		button_1.__click = () => {
			_$_.update(lazy);
		};

		var span_1 = _$_.sibling(button_1);

		{
			var expression = _$_.child(span_1);

			_$_.expression(expression, () => _$_.get(lazy));
			_$_.pop(span_1);
		}
	}

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

export function IncrementDecrement(__anchor, _, __block) {
	_$_.push_component();

	let lazy_1 = _$_.track(0, __block, '87fcabdd');
	var div_2 = root_1();

	{
		var button_2 = _$_.child(div_2);

		button_2.__click = () => {
			_$_.update(lazy_1, -1);
		};

		var span_2 = _$_.sibling(button_2);

		{
			var expression_1 = _$_.child(span_2);

			_$_.expression(expression_1, () => _$_.get(lazy_1));
			_$_.pop(span_2);
		}

		var button_3 = _$_.sibling(span_2);

		button_3.__click = () => {
			_$_.update(lazy_1);
		};
	}

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

export function MultipleEvents(__anchor, _, __block) {
	_$_.push_component();

	let lazy_2 = _$_.track(0, __block, '41b9f0b0');
	let lazy_3 = _$_.track(0, __block, '72789f75');
	var div_3 = root_2();

	{
		var button_4 = _$_.child(div_3);

		button_4.__click = () => {
			_$_.update(lazy_2);
		};

		_$_.event('MouseEnter', button_4, () => {
			_$_.update(lazy_3);
		});

		var span_3 = _$_.sibling(button_4);

		{
			var expression_2 = _$_.child(span_3);

			_$_.expression(expression_2, () => _$_.get(lazy_2));
			_$_.pop(span_3);
		}

		var span_4 = _$_.sibling(span_3);

		{
			var expression_3 = _$_.child(span_4);

			_$_.expression(expression_3, () => _$_.get(lazy_3));
			_$_.pop(span_4);
		}
	}

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

export function MultiStateUpdate(__anchor, _, __block) {
	_$_.push_component();

	let lazy_4 = _$_.track(0, __block, '5a375160');
	let lazy_5 = _$_.track('none', __block, '3ceeb88c');

	const handleClick = () => {
		_$_.update(lazy_4);
		_$_.set(lazy_5, 'increment');
	};

	var div_4 = root_3();

	{
		var button_5 = _$_.child(div_4);

		button_5.__click = handleClick;

		var span_5 = _$_.sibling(button_5);

		{
			var expression_4 = _$_.child(span_5);

			_$_.expression(expression_4, () => _$_.get(lazy_4));
			_$_.pop(span_5);
		}

		var span_6 = _$_.sibling(span_5);

		{
			var expression_5 = _$_.child(span_6);

			_$_.expression(expression_5, () => _$_.get(lazy_5));
			_$_.pop(span_6);
		}
	}

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

export function ToggleButton(__anchor, _, __block) {
	_$_.push_component();

	let lazy_6 = _$_.track(false, __block, 'be823ec7');
	var div_5 = root_4();

	{
		var button_6 = _$_.child(div_5);

		button_6.__click = () => {
			_$_.set(lazy_6, !_$_.get(lazy_6));
		};

		{
			var expression_6 = _$_.child(button_6);

			_$_.expression(expression_6, () => _$_.get(lazy_6) ? 'ON' : 'OFF');
			_$_.pop(button_6);
		}
	}

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

export function ChildButton(__anchor, props, __block) {
	_$_.push_component();

	var button_7 = root_5();

	_$_.render_event('Click', button_7, () => props.onClick);

	{
		var expression_7 = _$_.child(button_7);

		_$_.expression(expression_7, () => props.label);
		_$_.pop(button_7);
	}

	_$_.append(__anchor, button_7);
	_$_.pop_component();
}

export function ParentWithChildButton(__anchor, _, __block) {
	_$_.push_component();

	let lazy_7 = _$_.track(0, __block, 'dcc2e0f9');
	var div_6 = root_6();

	{
		var node = _$_.child(div_6);

		ChildButton(
			node,
			{
				onClick: () => {
					_$_.update(lazy_7);
				},
				label: "Click me"
			},
			_$_.active_block
		);

		var span_7 = _$_.sibling(node);

		{
			var expression_8 = _$_.child(span_7);

			_$_.expression(expression_8, () => _$_.get(lazy_7));
			_$_.pop(span_7);
		}

		_$_.pop(div_6);
	}

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

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