ripple
Version:
Ripple is an elegant TypeScript UI framework
1,937 lines (1,441 loc) • 44.3 kB
JavaScript
// @ts-nocheck
import * as _$_ from 'ripple/internal/client';
var root_1 = _$_.template_el('li', null, ' ');
var root = _$_.template_el('ul');
function StaticForLoop_render(__anchor, __block) {
const items = ['Apple', 'Banana', 'Cherry'];
var ul = root();
{
_$_.for(
ul,
() => items,
(__anchor, item) => {
var li = root_1();
{
var expression = _$_.hydrating ? _$_.hydrate_child() : li.firstChild;
_$_.expression(expression, () => item);
_$_.hydrating && _$_.pop(li);
}
_$_.append(__anchor, li);
},
4
);
_$_.hydrating && _$_.pop(ul);
}
_$_.append(__anchor, ul);
}
StaticForLoop[_$_.$r] = StaticForLoop_render;
var root_3 = _$_.template_el('li');
function render(__prev) {
var __a = `${__prev._a.value}: ${__prev._b}`;
if (__prev.a !== __a) {
_$_.set_text_content(__prev._c, __a, __prev.a);
__prev.a = __a;
}
}
var root_2 = _$_.template_el('ul');
function ForLoopWithIndex_render(__anchor, __block) {
const items = ['A', 'B', 'C'];
var ul_1 = root_2();
{
_$_.for(
ul_1,
() => items,
(__anchor, item, i) => {
var li_1 = root_3();
_$_.item({ a: '', _a: i, _b: item, _c: li_1 });
_$_.append(__anchor, li_1);
},
12,
void 0,
render
);
_$_.hydrating && _$_.pop(ul_1);
}
_$_.append(__anchor, ul_1);
}
ForLoopWithIndex[_$_.$r] = ForLoopWithIndex_render;
var root_5 = _$_.template_el('li', null, ' ');
var root_4 = _$_.template_el('ul');
function KeyedForLoop_render(__anchor, __block) {
const items = [
{ id: 1, name: 'First' },
{ id: 2, name: 'Second' },
{ id: 3, name: 'Third' }
];
var ul_2 = root_4();
{
_$_.for_keyed(
ul_2,
() => items,
(__anchor, pattern) => {
var li_2 = root_5();
{
var expression_2 = _$_.hydrating ? _$_.hydrate_child() : li_2.firstChild;
_$_.expression(expression_2, () => _$_.get(pattern).name);
_$_.hydrating && _$_.pop(li_2);
}
_$_.append(__anchor, li_2);
},
4,
(pattern) => pattern.id
);
_$_.hydrating && _$_.pop(ul_2);
}
_$_.append(__anchor, ul_2);
}
KeyedForLoop[_$_.$r] = KeyedForLoop_render;
var root_8 = _$_.template_el('li', null, ' ');
var root_7 = _$_.template(`<button class=add>Add</button><ul>`, 1, 2);
var root_6 = _$_.template(`<!>`, 1, 1);
function ReactiveForLoopAdd_render(__anchor, __block) {
const items = _$_.track(['A', 'B'], __block, '1qi64qy');
var fragment = root_6();
var node = _$_.first_child_frag(fragment);
_$_.expression(node, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_1 = root_7();
var button = _$_.first_child_frag(fragment_1);
button.__click = () => {
items.value = [...items.value, 'C'];
};
var ul_3 = _$_.hydrating ? _$_.hydrate_sibling() : button.nextSibling;
{
_$_.for(
ul_3,
() => items.value,
(__anchor, item) => {
var li_3 = root_8();
{
var expression_3 = _$_.hydrating ? _$_.hydrate_child() : li_3.firstChild;
_$_.expression(expression_3, () => item);
_$_.hydrating && _$_.pop(li_3);
}
_$_.append(__anchor, li_3);
},
4
);
_$_.hydrating && _$_.pop(ul_3);
}
_$_.append(__anchor, fragment_1);
}));
_$_.append(__anchor, fragment);
}
ReactiveForLoopAdd[_$_.$r] = ReactiveForLoopAdd_render;
var root_11 = _$_.template_el('li', null, ' ');
var root_10 = _$_.template(`<button class=remove>Remove</button><ul>`, 1, 2);
var root_9 = _$_.template(`<!>`, 1, 1);
function ReactiveForLoopRemove_render(__anchor, __block) {
const items = _$_.track(['A', 'B', 'C'], __block, '1e738lw');
var fragment_2 = root_9();
var node_1 = _$_.first_child_frag(fragment_2);
_$_.expression(node_1, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_3 = root_10();
var button_1 = _$_.first_child_frag(fragment_3);
button_1.__click = () => {
items.value = _$_.with_scope(__block, () => items.value.slice(0, -1));
};
var ul_4 = _$_.hydrating ? _$_.hydrate_sibling() : button_1.nextSibling;
{
_$_.for(
ul_4,
() => items.value,
(__anchor, item) => {
var li_4 = root_11();
{
var expression_4 = _$_.hydrating ? _$_.hydrate_child() : li_4.firstChild;
_$_.expression(expression_4, () => item);
_$_.hydrating && _$_.pop(li_4);
}
_$_.append(__anchor, li_4);
},
4
);
_$_.hydrating && _$_.pop(ul_4);
}
_$_.append(__anchor, fragment_3);
}));
_$_.append(__anchor, fragment_2);
}
ReactiveForLoopRemove[_$_.$r] = ReactiveForLoopRemove_render;
var root_13 = _$_.template_el('div', null, [
['span', ['class', 'value'], ' '],
['button', ['class', 'increment'], '+']
]);
function render_1(__prev) {
var __a = `item-${__prev._a.value}`;
if (__prev.a !== __a) {
_$_.set_class(__prev._b, __prev.a = __a);
}
}
var root_12 = _$_.template_el('div');
function ForLoopInteractive_render(__anchor, __block) {
const counts = _$_.track([0, 0, 0], __block, 'f8yrj3');
var div = root_12();
{
_$_.for(
div,
() => counts.value,
(__anchor, count, i) => {
var div_1 = root_13();
{
var span = _$_.hydrating ? _$_.hydrate_child() : div_1.firstChild;
{
var expression_5 = _$_.hydrating ? _$_.hydrate_child() : span.firstChild;
_$_.expression(expression_5, () => count);
_$_.hydrating && _$_.pop(span);
}
var button_2 = _$_.hydrating ? _$_.hydrate_sibling() : span.nextSibling;
button_2.__click = () => {
const newCounts = [...counts.value];
newCounts[i.value]++;
counts.value = newCounts;
};
}
_$_.item({ a: _$_.UNINITIALIZED, _a: i, _b: div_1 });
_$_.append(__anchor, div_1);
},
12,
void 0,
render_1
);
_$_.hydrating && _$_.pop(div);
}
_$_.append(__anchor, div);
}
ForLoopInteractive[_$_.$r] = ForLoopInteractive_render;
var root_16 = _$_.template_el('span', null, ' ');
function render_2(__prev) {
var __a = `cell-${__prev._a.value}-${__prev._b.value}`;
if (__prev.a !== __a) {
_$_.set_class(__prev._c, __prev.a = __a);
}
}
function render_3(__prev) {
var __a = `row-${__prev._a.value}`;
if (__prev.a !== __a) {
_$_.set_class(__prev._b, __prev.a = __a);
}
}
var root_15 = _$_.template_el('div');
var root_14 = _$_.template_el('div', ['class', 'grid']);
function NestedForLoop_render(__anchor, __block) {
const grid = [[1, 2], [3, 4]];
var div_2 = root_14();
{
_$_.for(
div_2,
() => grid,
(__anchor, row, rowIndex) => {
var div_3 = root_15();
{
_$_.for(
div_3,
() => row,
(__anchor, cell, colIndex) => {
var span_1 = root_16();
{
var expression_6 = _$_.hydrating ? _$_.hydrate_child() : span_1.firstChild;
_$_.expression(expression_6, () => cell);
_$_.hydrating && _$_.pop(span_1);
}
_$_.item({ a: _$_.UNINITIALIZED, _a: rowIndex, _b: colIndex, _c: span_1 });
_$_.append(__anchor, span_1);
},
12,
void 0,
render_2
);
_$_.hydrating && _$_.pop(div_3);
_$_.item({ a: _$_.UNINITIALIZED, _a: rowIndex, _b: div_3 });
}
_$_.append(__anchor, div_3);
},
12,
void 0,
render_3
);
_$_.hydrating && _$_.pop(div_2);
}
_$_.append(__anchor, div_2);
}
NestedForLoop[_$_.$r] = NestedForLoop_render;
var root_18 = _$_.template_el('span');
var root_17 = _$_.template_el('div', ['class', 'container']);
function EmptyForLoop_render(__anchor, __block) {
const items = [];
var div_4 = root_17();
{
_$_.for(
div_4,
() => items,
(__anchor, item) => {
var span_2 = root_18();
{
span_2.textContent = item;
}
_$_.append(__anchor, span_2);
},
4
);
_$_.hydrating && _$_.pop(div_4);
}
_$_.append(__anchor, div_4);
}
EmptyForLoop[_$_.$r] = EmptyForLoop_render;
var root_20 = _$_.template_el('div', null, [
['span', ['class', 'name'], ' '],
['span', ['class', 'role'], ' ']
]);
function render_4(__prev) {
var __a = `user-${_$_.get(__prev._a).id}`;
if (__prev.a !== __a) {
_$_.set_class(__prev._b, __prev.a = __a);
}
}
var root_19 = _$_.template_el('div');
function ForLoopComplexObjects_render(__anchor, __block) {
const users = [
{ id: 1, name: 'Alice', role: 'Admin' },
{ id: 2, name: 'Bob', role: 'User' }
];
var div_5 = root_19();
{
_$_.for_keyed(
div_5,
() => users,
(__anchor, pattern_1) => {
var div_6 = root_20();
{
var span_3 = _$_.hydrating ? _$_.hydrate_child() : div_6.firstChild;
{
var expression_8 = _$_.hydrating ? _$_.hydrate_child() : span_3.firstChild;
_$_.expression(expression_8, () => _$_.get(pattern_1).name);
_$_.hydrating && _$_.pop(span_3);
}
var span_4 = _$_.hydrating ? _$_.hydrate_sibling() : span_3.nextSibling;
{
var expression_9 = _$_.hydrating ? _$_.hydrate_child() : span_4.firstChild;
_$_.expression(expression_9, () => _$_.get(pattern_1).role);
_$_.hydrating && _$_.pop(span_4);
}
}
_$_.item({ a: _$_.UNINITIALIZED, _a: pattern_1, _b: div_6 });
_$_.append(__anchor, div_6);
},
4,
(pattern_1) => pattern_1.id,
void 0,
void 0,
render_4
);
_$_.hydrating && _$_.pop(div_5);
}
_$_.append(__anchor, div_5);
}
ForLoopComplexObjects[_$_.$r] = ForLoopComplexObjects_render;
var root_23 = _$_.template_el('li', null, ' ');
function render_5(__prev) {
var __a = `item-${_$_.get(__prev._a).id}`;
if (__prev.a !== __a) {
_$_.set_class(__prev._b, __prev.a = __a);
}
}
var root_22 = _$_.template(`<button class=reorder>Reorder</button><ul>`, 1, 2);
var root_21 = _$_.template(`<!>`, 1, 1);
function KeyedForLoopReorder_render(__anchor, __block) {
const items = _$_.track(
[
{ id: 1, name: 'First' },
{ id: 2, name: 'Second' },
{ id: 3, name: 'Third' }
],
__block,
'1sa3hr7'
);
var fragment_4 = root_21();
var node_2 = _$_.first_child_frag(fragment_4);
_$_.expression(node_2, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_5 = root_22();
var button_3 = _$_.first_child_frag(fragment_5);
button_3.__click = () => {
items.value = [items.value[2], items.value[0], items.value[1]];
};
var ul_5 = _$_.hydrating ? _$_.hydrate_sibling() : button_3.nextSibling;
{
_$_.for_keyed(
ul_5,
() => items.value,
(__anchor, pattern_2) => {
var li_5 = root_23();
{
var expression_10 = _$_.hydrating ? _$_.hydrate_child() : li_5.firstChild;
_$_.expression(expression_10, () => _$_.get(pattern_2).name);
_$_.hydrating && _$_.pop(li_5);
}
_$_.item({ a: _$_.UNINITIALIZED, _a: pattern_2, _b: li_5 });
_$_.append(__anchor, li_5);
},
4,
(pattern_2) => pattern_2.id,
void 0,
void 0,
render_5
);
_$_.hydrating && _$_.pop(ul_5);
}
_$_.append(__anchor, fragment_5);
}));
_$_.append(__anchor, fragment_4);
}
KeyedForLoopReorder[_$_.$r] = KeyedForLoopReorder_render;
var root_26 = _$_.template_el('li', null, ' ');
function render_6(__prev) {
var __a = `item-${_$_.get(__prev._a).id}`;
if (__prev.a !== __a) {
_$_.set_class(__prev._b, __prev.a = __a);
}
}
var root_25 = _$_.template(`<button class=update>Update</button><ul>`, 1, 2);
var root_24 = _$_.template(`<!>`, 1, 1);
function KeyedForLoopUpdate_render(__anchor, __block) {
const items = _$_.track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }], __block, 'xwci56');
var fragment_6 = root_24();
var node_3 = _$_.first_child_frag(fragment_6);
_$_.expression(node_3, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_7 = root_25();
var button_4 = _$_.first_child_frag(fragment_7);
button_4.__click = () => {
items.value = _$_.with_scope(__block, () => items.value.map((item) => item.id === 1 ? { ...item, name: 'Updated' } : item));
};
var ul_6 = _$_.hydrating ? _$_.hydrate_sibling() : button_4.nextSibling;
{
_$_.for_keyed(
ul_6,
() => items.value,
(__anchor, pattern_3) => {
var li_6 = root_26();
{
var expression_11 = _$_.hydrating ? _$_.hydrate_child() : li_6.firstChild;
_$_.expression(expression_11, () => _$_.get(pattern_3).name);
_$_.hydrating && _$_.pop(li_6);
}
_$_.item({ a: _$_.UNINITIALIZED, _a: pattern_3, _b: li_6 });
_$_.append(__anchor, li_6);
},
4,
(pattern_3) => pattern_3.id,
void 0,
void 0,
render_6
);
_$_.hydrating && _$_.pop(ul_6);
}
_$_.append(__anchor, fragment_7);
}));
_$_.append(__anchor, fragment_6);
}
KeyedForLoopUpdate[_$_.$r] = KeyedForLoopUpdate_render;
var root_29 = _$_.template_el('li', null, ' ');
var root_28 = _$_.template(`<button class=shuffle>Shuffle</button><ul>`, 1, 2);
var root_27 = _$_.template(`<!>`, 1, 1);
function ForLoopMixedOperations_render(__anchor, __block) {
const items = _$_.track(['A', 'B', 'C', 'D'], __block, 'h5qbw6');
var fragment_8 = root_27();
var node_4 = _$_.first_child_frag(fragment_8);
_$_.expression(node_4, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_9 = root_28();
var button_5 = _$_.first_child_frag(fragment_9);
button_5.__click = () => {
items.value = ['D', 'C', 'A', 'E'];
};
var ul_7 = _$_.hydrating ? _$_.hydrate_sibling() : button_5.nextSibling;
{
_$_.for(
ul_7,
() => items.value,
(__anchor, item) => {
var li_7 = root_29();
_$_.set_class(li_7, `item-${item}`);
{
var expression_12 = _$_.hydrating ? _$_.hydrate_child() : li_7.firstChild;
_$_.expression(expression_12, () => item);
_$_.hydrating && _$_.pop(li_7);
}
_$_.append(__anchor, li_7);
},
4
);
_$_.hydrating && _$_.pop(ul_7);
}
_$_.append(__anchor, fragment_9);
}));
_$_.append(__anchor, fragment_8);
}
ForLoopMixedOperations[_$_.$r] = ForLoopMixedOperations_render;
var root_33 = _$_.template_el('li', null, ' ');
var root_32 = _$_.template_el('ul', ['class', 'list']);
function consequent(__anchor, { a: showList, b: items }) {
var ul_8 = root_32();
{
_$_.for(
ul_8,
() => items.value,
(__anchor, item) => {
var li_8 = root_33();
{
var expression_13 = _$_.hydrating ? _$_.hydrate_child() : li_8.firstChild;
_$_.expression(expression_13, () => item);
_$_.hydrating && _$_.pop(li_8);
}
_$_.append(__anchor, li_8);
},
4
);
_$_.hydrating && _$_.pop(ul_8);
}
_$_.append(__anchor, ul_8);
}
function if_1({ a: showList, b: items }) {
if (showList.value) return consequent;
}
var root_31 = _$_.template(`<button class=toggle>Toggle List</button><button class=add>Add Item</button><!>`, 1, 3);
function render_7(__prev) {
var __a = if_1({ a: __prev._a, b: __prev._b });
if (__prev.a !== __a) {
_$_.if_update(__prev._c, __prev.a = __a);
}
}
var root_30 = _$_.template(`<!>`, 1, 1);
function ForLoopInsideIf_render(__anchor, __block) {
const showList = _$_.track(true, __block, '1fjdps');
const items = _$_.track(['X', 'Y', 'Z'], __block, '1h205c3');
var fragment_10 = root_30();
var node_6 = _$_.first_child_frag(fragment_10);
_$_.expression(node_6, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_11 = root_31();
var button_6 = _$_.first_child_frag(fragment_11);
button_6.__click = () => {
showList.value = !showList.value;
};
var button_7 = _$_.hydrating ? _$_.hydrate_sibling() : button_6.nextSibling;
button_7.__click = () => {
items.value = [...items.value, 'W'];
};
var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : button_7.nextSibling;
var ifs = _$_.if_static(node_5, if_1, 0, { a: showList, b: items });
_$_.render(render_7, { a: _$_.UNINITIALIZED, _a: showList, _b: items, _c: ifs });
_$_.append(__anchor, fragment_11);
}));
_$_.append(__anchor, fragment_10);
}
ForLoopInsideIf[_$_.$r] = ForLoopInsideIf_render;
var root_36 = _$_.template_el('li');
var root_35 = _$_.template(`<button class=populate>Populate</button><ul class=list>`, 1, 2);
var root_34 = _$_.template(`<!>`, 1, 1);
function ForLoopEmptyToPopulated_render(__anchor, __block) {
const items = _$_.track([], __block, 'muog58');
var fragment_12 = root_34();
var node_7 = _$_.first_child_frag(fragment_12);
_$_.expression(node_7, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_13 = root_35();
var button_8 = _$_.first_child_frag(fragment_13);
button_8.__click = () => {
items.value = ['One', 'Two', 'Three'];
};
var ul_9 = _$_.hydrating ? _$_.hydrate_sibling() : button_8.nextSibling;
{
_$_.for(
ul_9,
() => items.value,
(__anchor, item) => {
var li_9 = root_36();
{
li_9.textContent = item;
}
_$_.append(__anchor, li_9);
},
4
);
_$_.hydrating && _$_.pop(ul_9);
}
_$_.append(__anchor, fragment_13);
}));
_$_.append(__anchor, fragment_12);
}
ForLoopEmptyToPopulated[_$_.$r] = ForLoopEmptyToPopulated_render;
var root_39 = _$_.template_el('li', null, ' ');
var root_38 = _$_.template(`<button class=clear>Clear</button><ul class=list>`, 1, 2);
var root_37 = _$_.template(`<!>`, 1, 1);
function ForLoopPopulatedToEmpty_render(__anchor, __block) {
const items = _$_.track(['One', 'Two', 'Three'], __block, '1u44ewo');
var fragment_14 = root_37();
var node_8 = _$_.first_child_frag(fragment_14);
_$_.expression(node_8, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_15 = root_38();
var button_9 = _$_.first_child_frag(fragment_15);
button_9.__click = () => {
items.value = [];
};
var ul_10 = _$_.hydrating ? _$_.hydrate_sibling() : button_9.nextSibling;
{
_$_.for(
ul_10,
() => items.value,
(__anchor, item) => {
var li_10 = root_39();
{
var expression_15 = _$_.hydrating ? _$_.hydrate_child() : li_10.firstChild;
_$_.expression(expression_15, () => item);
_$_.hydrating && _$_.pop(li_10);
}
_$_.append(__anchor, li_10);
},
4
);
_$_.hydrating && _$_.pop(ul_10);
}
_$_.append(__anchor, fragment_15);
}));
_$_.append(__anchor, fragment_14);
}
ForLoopPopulatedToEmpty[_$_.$r] = ForLoopPopulatedToEmpty_render;
var root_42 = _$_.template_el('span', null, ' ');
function render_8(__prev) {
var __a = `cell-${__prev._a.value}-${__prev._b.value}`;
if (__prev.a !== __a) {
_$_.set_class(__prev._c, __prev.a = __a);
}
}
function render_9(__prev) {
var __a = `row-${__prev._a.value}`;
if (__prev.a !== __a) {
_$_.set_class(__prev._b, __prev.a = __a);
}
}
var root_41 = _$_.template_el('div');
var root_40 = _$_.template_el('div', ['class', 'nested-for-reactive'], [
['button', ['class', 'add-row'], 'Add Row'],
['button', ['class', 'update-cell'], 'Update Cell'],
['div', ['class', 'grid']]
]);
function NestedForLoopReactive_render(__anchor, __block) {
const grid = _$_.track([[1, 2], [3, 4]], __block, '197p4tv');
var div_7 = root_40();
{
var button_10 = _$_.hydrating ? _$_.hydrate_child() : div_7.firstChild;
button_10.__click = () => {
grid.value = [...grid.value, [5, 6]];
};
var button_11 = _$_.hydrating ? _$_.hydrate_sibling() : button_10.nextSibling;
button_11.__click = () => {
const newGrid = _$_.with_scope(__block, () => grid.value.map((row) => [...row]));
newGrid[0][0] = 99;
grid.value = newGrid;
};
var div_8 = _$_.hydrating ? _$_.hydrate_sibling() : button_11.nextSibling;
{
_$_.for(
div_8,
() => grid.value,
(__anchor, row, rowIndex) => {
var div_9 = root_41();
{
_$_.for(
div_9,
() => row,
(__anchor, cell, colIndex) => {
var span_5 = root_42();
{
var expression_16 = _$_.hydrating ? _$_.hydrate_child() : span_5.firstChild;
_$_.expression(expression_16, () => cell);
_$_.hydrating && _$_.pop(span_5);
}
_$_.item({ a: _$_.UNINITIALIZED, _a: rowIndex, _b: colIndex, _c: span_5 });
_$_.append(__anchor, span_5);
},
12,
void 0,
render_8
);
_$_.hydrating && _$_.pop(div_9);
_$_.item({ a: _$_.UNINITIALIZED, _a: rowIndex, _b: div_9 });
}
_$_.append(__anchor, div_9);
},
12,
void 0,
render_9
);
_$_.hydrating && _$_.pop(div_8);
}
}
_$_.append(__anchor, div_7);
}
NestedForLoopReactive[_$_.$r] = NestedForLoopReactive_render;
var root_46 = _$_.template_el('li', ['class', 'member'], ' ');
var root_45 = _$_.template_el('div', null, [['h3', ['class', 'team-name'], ' '], ['ul']]);
function render_10(__prev) {
var __a = `team-${_$_.get(__prev._a).id}`;
if (__prev.a !== __a) {
_$_.set_class(__prev._b, __prev.a = __a);
}
}
var root_44 = _$_.template_el('div', null, [['h2', ['class', 'dept-name'], ' ']]);
function render_11(__prev) {
var __a = `dept-${_$_.get(__prev._a).id}`;
if (__prev.a !== __a) {
_$_.set_class(__prev._b, __prev.a = __a);
}
}
var root_43 = _$_.template_el('div', ['class', 'org']);
function ForLoopDeeplyNested_render(__anchor, __block) {
const departments = [
{
id: 'd1',
name: 'Engineering',
teams: [
{ id: 't1', name: 'Frontend', members: ['Alice', 'Bob'] },
{ id: 't2', name: 'Backend', members: ['Charlie'] }
]
},
{
id: 'd2',
name: 'Design',
teams: [{ id: 't3', name: 'UX', members: ['Diana', 'Eve', 'Frank'] }]
}
];
var div_10 = root_43();
{
_$_.for_keyed(
div_10,
() => departments,
(__anchor, pattern_4) => {
var div_11 = root_44();
{
var h2 = _$_.hydrating ? _$_.hydrate_child() : div_11.firstChild;
{
var expression_17 = _$_.hydrating ? _$_.hydrate_child() : h2.firstChild;
_$_.expression(expression_17, () => _$_.get(pattern_4).name);
_$_.hydrating && _$_.pop(h2);
}
var node_9 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_11);
_$_.for_keyed(
node_9,
() => _$_.get(pattern_4).teams,
(__anchor, pattern_5) => {
var div_12 = root_45();
{
var h3 = _$_.hydrating ? _$_.hydrate_child() : div_12.firstChild;
{
var expression_18 = _$_.hydrating ? _$_.hydrate_child() : h3.firstChild;
_$_.expression(expression_18, () => _$_.get(pattern_5).name);
_$_.hydrating && _$_.pop(h3);
}
var ul_11 = _$_.hydrating ? _$_.hydrate_sibling() : h3.nextSibling;
{
_$_.for(
ul_11,
() => _$_.get(pattern_5).members,
(__anchor, member) => {
var li_11 = root_46();
{
var expression_19 = _$_.hydrating ? _$_.hydrate_child() : li_11.firstChild;
_$_.expression(expression_19, () => member);
_$_.hydrating && _$_.pop(li_11);
}
_$_.append(__anchor, li_11);
},
4
);
_$_.hydrating && _$_.pop(ul_11);
}
}
_$_.item({ a: _$_.UNINITIALIZED, _a: pattern_5, _b: div_12 });
_$_.append(__anchor, div_12);
},
0,
(pattern_5) => pattern_5.id,
void 0,
void 0,
render_10
);
_$_.hydrating && _$_.pop(div_11);
}
_$_.item({ a: _$_.UNINITIALIZED, _a: pattern_4, _b: div_11 });
_$_.append(__anchor, div_11);
},
4,
(pattern_4) => pattern_4.id,
void 0,
void 0,
render_11
);
_$_.hydrating && _$_.pop(div_10);
}
_$_.append(__anchor, div_10);
}
ForLoopDeeplyNested[_$_.$r] = ForLoopDeeplyNested_render;
var root_49 = _$_.template_el('li');
function render_12(__prev) {
var __a = `[${__prev._a.value}] ${__prev._b}`;
if (__prev.a !== __a) {
_$_.set_text_content(__prev._c, __a, __prev.a);
__prev.a = __a;
}
var __b = `item-${__prev._a.value}`;
if (__prev.b !== __b) {
_$_.set_class(__prev._c, __prev.b = __b);
}
}
var root_48 = _$_.template(`<button class=prepend>Prepend</button><ul>`, 1, 2);
var root_47 = _$_.template(`<!>`, 1, 1);
function ForLoopIndexUpdate_render(__anchor, __block) {
const items = _$_.track(['First', 'Second', 'Third'], __block, '1waej1i');
var fragment_16 = root_47();
var node_10 = _$_.first_child_frag(fragment_16);
_$_.expression(node_10, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_17 = root_48();
var button_12 = _$_.first_child_frag(fragment_17);
button_12.__click = () => {
items.value = ['Zeroth', ...items.value];
};
var ul_12 = _$_.hydrating ? _$_.hydrate_sibling() : button_12.nextSibling;
{
_$_.for(
ul_12,
() => items.value,
(__anchor, item, i) => {
var li_12 = root_49();
_$_.item({ a: '', b: _$_.UNINITIALIZED, _a: i, _b: item, _c: li_12 });
_$_.append(__anchor, li_12);
},
12,
void 0,
render_12
);
_$_.hydrating && _$_.pop(ul_12);
}
_$_.append(__anchor, fragment_17);
}));
_$_.append(__anchor, fragment_16);
}
ForLoopIndexUpdate[_$_.$r] = ForLoopIndexUpdate_render;
var root_52 = _$_.template_el('li');
function render_13(__prev) {
var __pattern_6 = _$_.get(__prev._a);
var __a = `[${__prev._b.value}] ${__pattern_6.id}: ${__pattern_6.value}`;
if (__prev.a !== __a) {
_$_.set_text_content(__prev._c, __a, __prev.a);
__prev.a = __a;
}
var __b = __prev._b.value;
if (__prev.b !== __b) {
_$_.set_attribute_value(__prev._c, 'data-index', __prev.b = __b);
}
var __c = `item-${__pattern_6.id}`;
if (__prev.c !== __c) {
_$_.set_class(__prev._c, __prev.c = __c);
}
}
var root_51 = _$_.template(`<button class=reorder>Rotate</button><ul>`, 1, 2);
var root_50 = _$_.template(`<!>`, 1, 1);
function KeyedForLoopWithIndex_render(__anchor, __block) {
const items = _$_.track(
[
{ id: 'a', value: 'Alpha' },
{ id: 'b', value: 'Beta' },
{ id: 'c', value: 'Gamma' }
],
__block,
'ejgeai'
);
var fragment_18 = root_50();
var node_11 = _$_.first_child_frag(fragment_18);
_$_.expression(node_11, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_19 = root_51();
var button_13 = _$_.first_child_frag(fragment_19);
button_13.__click = () => {
items.value = [items.value[1], items.value[2], items.value[0]];
};
var ul_13 = _$_.hydrating ? _$_.hydrate_sibling() : button_13.nextSibling;
{
_$_.for_keyed(
ul_13,
() => items.value,
(__anchor, pattern_6, i) => {
var li_13 = root_52();
_$_.item({
a: '',
b: void 0,
c: _$_.UNINITIALIZED,
_a: pattern_6,
_b: i,
_c: li_13
});
_$_.append(__anchor, li_13);
},
12,
(pattern_6, i) => pattern_6.id,
void 0,
void 0,
render_13
);
_$_.hydrating && _$_.pop(ul_13);
}
_$_.append(__anchor, fragment_19);
}));
_$_.append(__anchor, fragment_18);
}
KeyedForLoopWithIndex[_$_.$r] = KeyedForLoopWithIndex_render;
var root_55 = _$_.template_el('div', null, ' ');
var root_54 = _$_.template(`<div class=wrapper><header class=before>Before</header><footer class=after>After</footer></div><button class=add>Add`, 1, 2);
var root_53 = _$_.template(`<!>`, 1, 1);
function ForLoopWithSiblings_render(__anchor, __block) {
const items = _$_.track(['A', 'B'], __block, 'gs9c2a');
var fragment_20 = root_53();
var node_13 = _$_.first_child_frag(fragment_20);
_$_.expression(node_13, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_21 = root_54();
var div_13 = _$_.first_child_frag(fragment_21);
{
var header = _$_.hydrating ? _$_.hydrate_child() : div_13.firstChild;
var node_12 = _$_.hydrating ? _$_.hydrate_sibling() : header.nextSibling;
_$_.for(
node_12,
() => items.value,
(__anchor, item) => {
var div_14 = root_55();
_$_.set_class(div_14, `item-${item}`);
{
var expression_22 = _$_.hydrating ? _$_.hydrate_child() : div_14.firstChild;
_$_.expression(expression_22, () => item);
_$_.hydrating && _$_.pop(div_14);
}
_$_.append(__anchor, div_14);
},
0
);
_$_.hydrating && _$_.pop(div_13);
}
var button_14 = _$_.hydrating ? _$_.hydrate_sibling() : div_13.nextSibling;
button_14.__click = () => {
items.value = [...items.value, 'C'];
};
_$_.append(__anchor, fragment_21);
}));
_$_.append(__anchor, fragment_20);
}
ForLoopWithSiblings[_$_.$r] = ForLoopWithSiblings_render;
var root_56 = _$_.template_el('div');
function ForLoopItemState_render(__anchor, __block) {
const initialItems = [
{ id: 1, text: 'Todo 1' },
{ id: 2, text: 'Todo 2' },
{ id: 3, text: 'Todo 3' }
];
var div_15 = root_56();
{
_$_.for_keyed(
div_15,
() => initialItems,
(__anchor, pattern_7) => {
_$_.render_component(TodoItem, __anchor, { id: _$_.get(pattern_7).id, text: _$_.get(pattern_7).text });
},
4,
(pattern_7) => pattern_7.id
);
_$_.hydrating && _$_.pop(div_15);
}
_$_.append(__anchor, div_15);
}
ForLoopItemState[_$_.$r] = ForLoopItemState_render;
var root_57 = _$_.template_el(
'div',
null,
[
['input', ['type', 'checkbox', 'class', 'checkbox']],
['span']
],
1
);
function render_14(__prev) {
var __done_value = __prev._a.value;
var __a = __done_value;
if (__prev.a !== __a) {
_$_.set_checked(__prev._b, __prev.a = __a);
}
var __b = __prev._c.text;
if (__prev.b !== __b) {
_$_.set_text_content(__prev._d, __b, __prev.b);
__prev.b = __b;
}
var __c = __done_value ? 'completed' : 'pending';
if (__prev.c !== __c) {
_$_.set_class(__prev._d, __prev.c = __c);
}
var __d = `todo-${__prev._c.id}`;
if (__prev.d !== __d) {
_$_.set_class(__prev._e, __prev.d = __d);
}
}
function TodoItem_render(__anchor, __block, props) {
const done = _$_.track(false, __block, 'lyii78');
var div_16 = root_57();
{
var input = _$_.hydrating ? _$_.hydrate_child() : div_16.firstChild;
input.__change = (e) => {
done.value = e.target.checked;
};
var span_6 = _$_.hydrating ? _$_.hydrate_sibling() : input.nextSibling;
}
_$_.render(render_14, {
a: void 0,
b: '',
c: _$_.UNINITIALIZED,
d: _$_.UNINITIALIZED,
_a: done,
_b: input,
_c: props,
_d: span_6,
_e: div_16
});
_$_.append(__anchor, div_16);
}
TodoItem[_$_.$r] = TodoItem_render;
var root_59 = _$_.template_el('li', ['class', 'single'], ' ');
var root_58 = _$_.template_el('ul');
function ForLoopSingleItem_render(__anchor, __block) {
const items = ['Only'];
var ul_14 = root_58();
{
_$_.for(
ul_14,
() => items,
(__anchor, item) => {
var li_14 = root_59();
{
var expression_24 = _$_.hydrating ? _$_.hydrate_child() : li_14.firstChild;
_$_.expression(expression_24, () => item);
_$_.hydrating && _$_.pop(li_14);
}
_$_.append(__anchor, li_14);
},
4
);
_$_.hydrating && _$_.pop(ul_14);
}
_$_.append(__anchor, ul_14);
}
ForLoopSingleItem[_$_.$r] = ForLoopSingleItem_render;
var root_62 = _$_.template_el('li', null, ' ');
var root_61 = _$_.template(`<button class=prepend>Prepend A</button><ul>`, 1, 2);
var root_60 = _$_.template(`<!>`, 1, 1);
function ForLoopAddAtBeginning_render(__anchor, __block) {
const items = _$_.track(['B', 'C'], __block, '5xk2t6');
var fragment_22 = root_60();
var node_14 = _$_.first_child_frag(fragment_22);
_$_.expression(node_14, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_23 = root_61();
var button_15 = _$_.first_child_frag(fragment_23);
button_15.__click = () => {
items.value = ['A', ...items.value];
};
var ul_15 = _$_.hydrating ? _$_.hydrate_sibling() : button_15.nextSibling;
{
_$_.for(
ul_15,
() => items.value,
(__anchor, item) => {
var li_15 = root_62();
_$_.set_class(li_15, `item-${item}`);
{
var expression_25 = _$_.hydrating ? _$_.hydrate_child() : li_15.firstChild;
_$_.expression(expression_25, () => item);
_$_.hydrating && _$_.pop(li_15);
}
_$_.append(__anchor, li_15);
},
4
);
_$_.hydrating && _$_.pop(ul_15);
}
_$_.append(__anchor, fragment_23);
}));
_$_.append(__anchor, fragment_22);
}
ForLoopAddAtBeginning[_$_.$r] = ForLoopAddAtBeginning_render;
var root_65 = _$_.template_el('li', null, ' ');
var root_64 = _$_.template(`<button class=insert>Insert B</button><ul>`, 1, 2);
var root_63 = _$_.template(`<!>`, 1, 1);
function ForLoopAddInMiddle_render(__anchor, __block) {
const items = _$_.track(['A', 'C'], __block, '7pf806');
var fragment_24 = root_63();
var node_15 = _$_.first_child_frag(fragment_24);
_$_.expression(node_15, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_25 = root_64();
var button_16 = _$_.first_child_frag(fragment_25);
button_16.__click = () => {
const copy = [...items.value];
_$_.with_scope(__block, () => copy.splice(1, 0, 'B'));
items.value = copy;
};
var ul_16 = _$_.hydrating ? _$_.hydrate_sibling() : button_16.nextSibling;
{
_$_.for(
ul_16,
() => items.value,
(__anchor, item) => {
var li_16 = root_65();
_$_.set_class(li_16, `item-${item}`);
{
var expression_26 = _$_.hydrating ? _$_.hydrate_child() : li_16.firstChild;
_$_.expression(expression_26, () => item);
_$_.hydrating && _$_.pop(li_16);
}
_$_.append(__anchor, li_16);
},
4
);
_$_.hydrating && _$_.pop(ul_16);
}
_$_.append(__anchor, fragment_25);
}));
_$_.append(__anchor, fragment_24);
}
ForLoopAddInMiddle[_$_.$r] = ForLoopAddInMiddle_render;
var root_68 = _$_.template_el('li', null, ' ');
var root_67 = _$_.template(`<button class=remove-middle>Remove B</button><ul>`, 1, 2);
var root_66 = _$_.template(`<!>`, 1, 1);
function ForLoopRemoveFromMiddle_render(__anchor, __block) {
const items = _$_.track(['A', 'B', 'C'], __block, '7wzmn3');
var fragment_26 = root_66();
var node_16 = _$_.first_child_frag(fragment_26);
_$_.expression(node_16, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_27 = root_67();
var button_17 = _$_.first_child_frag(fragment_27);
button_17.__click = () => {
items.value = _$_.with_scope(__block, () => items.value.filter((item) => item !== 'B'));
};
var ul_17 = _$_.hydrating ? _$_.hydrate_sibling() : button_17.nextSibling;
{
_$_.for(
ul_17,
() => items.value,
(__anchor, item) => {
var li_17 = root_68();
_$_.set_class(li_17, `item-${item}`);
{
var expression_27 = _$_.hydrating ? _$_.hydrate_child() : li_17.firstChild;
_$_.expression(expression_27, () => item);
_$_.hydrating && _$_.pop(li_17);
}
_$_.append(__anchor, li_17);
},
4
);
_$_.hydrating && _$_.pop(ul_17);
}
_$_.append(__anchor, fragment_27);
}));
_$_.append(__anchor, fragment_26);
}
ForLoopRemoveFromMiddle[_$_.$r] = ForLoopRemoveFromMiddle_render;
var root_70 = _$_.template_el('li', null, ' ');
function render_15(__prev) {
var __a = `item-${__prev._a.value}`;
if (__prev.a !== __a) {
_$_.set_class(__prev._b, __prev.a = __a);
}
}
var root_69 = _$_.template_el('ul', ['class', 'large-list']);
function ForLoopLargeList_render(__anchor, __block) {
const items = _$_.with_scope(__block, () => Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`));
var ul_18 = root_69();
{
_$_.for(
ul_18,
() => items,
(__anchor, item, i) => {
var li_18 = root_70();
{
var expression_28 = _$_.hydrating ? _$_.hydrate_child() : li_18.firstChild;
_$_.expression(expression_28, () => item);
_$_.hydrating && _$_.pop(li_18);
}
_$_.item({ a: _$_.UNINITIALIZED, _a: i, _b: li_18 });
_$_.append(__anchor, li_18);
},
12,
void 0,
render_15
);
_$_.hydrating && _$_.pop(ul_18);
}
_$_.append(__anchor, ul_18);
}
ForLoopLargeList[_$_.$r] = ForLoopLargeList_render;
var root_73 = _$_.template_el('li', null, ' ');
var root_72 = _$_.template(`<button class=swap>Swap First and Last</button><ul>`, 1, 2);
var root_71 = _$_.template(`<!>`, 1, 1);
function ForLoopSwap_render(__anchor, __block) {
const items = _$_.track(['A', 'B', 'C', 'D'], __block, 'qiflm7');
var fragment_28 = root_71();
var node_17 = _$_.first_child_frag(fragment_28);
_$_.expression(node_17, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_29 = root_72();
var button_18 = _$_.first_child_frag(fragment_29);
button_18.__click = () => {
const copy = [...items.value];
[copy[0], copy[3]] = [copy[3], copy[0]];
items.value = copy;
};
var ul_19 = _$_.hydrating ? _$_.hydrate_sibling() : button_18.nextSibling;
{
_$_.for(
ul_19,
() => items.value,
(__anchor, item) => {
var li_19 = root_73();
_$_.set_class(li_19, `item-${item}`);
{
var expression_29 = _$_.hydrating ? _$_.hydrate_child() : li_19.firstChild;
_$_.expression(expression_29, () => item);
_$_.hydrating && _$_.pop(li_19);
}
_$_.append(__anchor, li_19);
},
4
);
_$_.hydrating && _$_.pop(ul_19);
}
_$_.append(__anchor, fragment_29);
}));
_$_.append(__anchor, fragment_28);
}
ForLoopSwap[_$_.$r] = ForLoopSwap_render;
var root_76 = _$_.template_el('li', null, ' ');
var root_75 = _$_.template(`<button class=reverse>Reverse</button><ul>`, 1, 2);
var root_74 = _$_.template(`<!>`, 1, 1);
function ForLoopReverse_render(__anchor, __block) {
const items = _$_.track(['A', 'B', 'C', 'D'], __block, 'a3chgk');
var fragment_30 = root_74();
var node_18 = _$_.first_child_frag(fragment_30);
_$_.expression(node_18, () => _$_.tsrx_element((__anchor, __block) => {
var fragment_31 = root_75();
var button_19 = _$_.first_child_frag(fragment_31);
button_19.__click = () => {
items.value = _$_.with_scope(__block, () => [...items.value].reverse());
};
var ul_20 = _$_.hydrating ? _$_.hydrate_sibling() : button_19.nextSibling;
{
_$_.for(
ul_20,
() => items.value,
(__anchor, item) => {
var li_20 = root_76();
_$_.set_class(li_20, `item-${item}`);
{
var expression_30 = _$_.hydrating ? _$_.hydrate_child() : li_20.firstChild;
_$_.expression(expression_30, () => item);
_$_.hydrating && _$_.pop(li_20);
}
_$_.append(__anchor, li_20);
},
4
);
_$_.hydrating && _$_.pop(ul_20);
}
_$_.append(__anchor, fragment_31);
}));
_$_.append(__anchor, fragment_30);
}
ForLoopReverse[_$_.$r] = ForLoopReverse_render;
var root_78 = _$_.template_el('span', ['class', 'item'], ' ');
var root_77 = _$_.template_el('div', ['class', 'wrapper'], [
['div', ['class', 'host'], [['p', ['class', 'tail'], 'p']]],
['button', ['class', 'push'], 'Push'],
['button', ['class', 'rotate'], 'Rotate']
]);
function KeyedForLoopAppendAndRotate_render(__anchor, __block) {
const items = _$_.track([1, 2, 3], __block, '1at4qo4');
var div_17 = root_77();
{
var div_18 = _$_.hydrating ? _$_.hydrate_child() : div_17.firstChild;
{
var node_19 = _$_.hydrating ? _$_.hydrate_child() : div_18.firstChild;
_$_.for_keyed(
node_19,
() => items.value,
(__anchor, pattern_8) => {
var span_7 = root_78();
{
var expression_31 = _$_.hydrating ? _$_.hydrate_child() : span_7.firstChild;
_$_.expression(expression_31, () => _$_.get(pattern_8));
_$_.hydrating && _$_.pop(span_7);
}
_$_.append(__anchor, span_7);
},
0
);
_$_.hydrating && _$_.pop(div_18);
}
var button_20 = _$_.hydrating ? _$_.hydrate_sibling() : div_18.nextSibling;
button_20.__click = () => items.value = [...items.value, items.value.length + 1];
var button_21 = _$_.hydrating ? _$_.hydrate_sibling() : button_20.nextSibling;
button_21.__click = () => items.value = [
..._$_.with_scope(__block, () => items.value.slice(1)),
items.value[0]
];
}
_$_.append(__anchor, div_17);
}
KeyedForLoopAppendAndRotate[_$_.$r] = KeyedForLoopAppendAndRotate_render;
var root_79 = _$_.template_el('span', ['class', 'item']);
function render_16(__prev) {
var __a = __prev.$item;
if (__prev.a !== __a) {
_$_.set_text_content(__prev._b, __a, __prev.a);
__prev.a = __a;
}
}
function RootKeyedList_render(__anchor, __block, props) {
_$_.for_keyed(
__anchor,
() => props.items.value,
(__anchor, pattern_9) => {
var span_8 = root_79();
_$_.item({ a: '', $item: pattern_9, _b: span_8 });
_$_.append(__anchor, span_8);
},
144,
void 0,
void 0,
void 0,
render_16
);
}
RootKeyedList[_$_.$r] = RootKeyedList_render;
var root_80 = _$_.template_el('div', ['class', 'wrapper'], [
['div', ['class', 'host'], [['p', ['class', 'tail'], 'p']]],
['button', ['class', 'push'], 'Push'],
['button', ['class', 'rotate'], 'Rotate']
]);
function RootKeyedForLoopAppendAndRotate_render(__anchor, __block) {
const items = _$_.track([1, 2, 3], __block, 'mdp2e8');
var div_19 = root_80();
{
var div_20 = _$_.hydrating ? _$_.hydrate_child() : div_19.firstChild;
{
var node_20 = _$_.hydrating ? _$_.hydrate_child() : div_20.firstChild;
_$_.render_component(RootKeyedList, node_20, { items });
_$_.hydrating && _$_.pop(div_20);
}
var button_22 = _$_.hydrating ? _$_.hydrate_sibling() : div_20.nextSibling;
button_22.__click = () => items.value = [...items.value, items.value.length + 1];
var button_23 = _$_.hydrating ? _$_.hydrate_sibling() : button_22.nextSibling;
button_23.__click = () => items.value = [
..._$_.with_scope(__block, () => items.value.slice(1)),
items.value[0]
];
}
_$_.append(__anchor, div_19);
}
RootKeyedForLoopAppendAndRotate[_$_.$r] = RootKeyedForLoopAppendAndRotate_render;
import { track } from 'ripple';
export function StaticForLoop() {
return _$_.tsrx_element(StaticForLoop_render);
}
export function ForLoopWithIndex() {
return _$_.tsrx_element(ForLoopWithIndex_render);
}
export function KeyedForLoop() {
return _$_.tsrx_element(KeyedForLoop_render);
}
export function ReactiveForLoopAdd() {
return _$_.tsrx_element(ReactiveForLoopAdd_render);
}
export function ReactiveForLoopRemove() {
return _$_.tsrx_element(ReactiveForLoopRemove_render);
}
export function ForLoopInteractive() {
return _$_.tsrx_element(ForLoopInteractive_render);
}
export function NestedForLoop() {
return _$_.tsrx_element(NestedForLoop_render);
}
export function EmptyForLoop() {
return _$_.tsrx_element(EmptyForLoop_render);
}
export function ForLoopComplexObjects() {
return _$_.tsrx_element(ForLoopComplexObjects_render);
}
export function KeyedForLoopReorder() {
return _$_.tsrx_element(KeyedForLoopReorder_render);
}
export function KeyedForLoopUpdate() {
return _$_.tsrx_element(KeyedForLoopUpdate_render);
}
export function ForLoopMixedOperations() {
return _$_.tsrx_element(ForLoopMixedOperations_render);
}
export function ForLoopInsideIf() {
return _$_.tsrx_element(ForLoopInsideIf_render);
}
export function ForLoopEmptyToPopulated() {
return _$_.tsrx_element(ForLoopEmptyToPopulated_render);
}
export function ForLoopPopulatedToEmpty() {
return _$_.tsrx_element(ForLoopPopulatedToEmpty_render);
}
export function NestedForLoopReactive() {
return _$_.tsrx_element(NestedForLoopReactive_render);
}
export function ForLoopDeeplyNested() {
return _$_.tsrx_element(ForLoopDeeplyNested_render);
}
export function ForLoopIndexUpdate() {
return _$_.tsrx_element(ForLoopIndexUpdate_render);
}
export function KeyedForLoopWithIndex() {
return _$_.tsrx_element(KeyedForLoopWithIndex_render);
}
export function ForLoopWithSiblings() {
return _$_.tsrx_element(ForLoopWithSiblings_render);
}
export function ForLoopItemState() {
return _$_.tsrx_element(ForLoopItemState_render);
}
function TodoItem(props) {
return _$_.tsrx_element(TodoItem_render, props);
}
export function ForLoopSingleItem() {
return _$_.tsrx_element(ForLoopSingleItem_render);
}
export function ForLoopAddAtBeginning() {
return _$_.tsrx_element(ForLoopAddAtBeginning_render);
}
export function ForLoopAddInMiddle() {
return _$_.tsrx_element(ForLoopAddInMiddle_render);
}
export function ForLoopRemoveFromMiddle() {
return _$_.tsrx_element(ForLoopRemoveFromMiddle_render);
}
export function ForLoopLargeList() {
return _$_.tsrx_element(ForLoopLargeList_render);
}
export function ForLoopSwap() {
return _$_.tsrx_element(ForLoopSwap_render);
}
export function ForLoopReverse() {
return _$_.tsrx_element(ForLoopReverse_render);
}
export function KeyedForLoopAppendAndRotate() {
return _$_.tsrx_element(KeyedForLoopAppendAndRotate_render);
}
function RootKeyedList(props) {
return _$_.tsrx_element(RootKeyedList_render, props);
}
export function RootKeyedForLoopAppendAndRotate() {
return _$_.tsrx_element(RootKeyedForLoopAppendAndRotate_render);
}
_$_.delegate(['click', 'change']);