ripple
Version:
Ripple is an elegant TypeScript UI framework
83 lines (62 loc) • 1.73 kB
JavaScript
// @ts-nocheck
import * as _$_ from 'ripple/internal/client';
var root = _$_.template(`<div class="layout"><nav class="nav">Navigation</nav><main class="main"><!></main></div>`, 0);
var root_2 = _$_.template(`<p class="text">Hello world</p>`, 0);
var root_1 = _$_.template(`<div class="content"><!></div>`, 0);
var root_4 = _$_.template(`<!>`, 1, 1);
var root_3 = _$_.template(`<!>`, 1, 1);
import { track } from 'ripple';
export function Layout(__anchor, { children }, __block) {
_$_.push_component();
var div_1 = root();
{
var nav_1 = _$_.child(div_1);
var main_1 = _$_.sibling(nav_1);
{
var expression = _$_.child(main_1);
_$_.expression(expression, () => children);
_$_.pop(main_1);
}
}
_$_.append(__anchor, div_1);
_$_.pop_component();
}
export function Content(__anchor, _, __block) {
_$_.push_component();
let lazy = _$_.track(true, __block, '0bdb1500');
var div_2 = root_1();
{
var node = _$_.child(div_2);
{
var consequent = (__anchor) => {
var p_1 = root_2();
_$_.append(__anchor, p_1);
};
_$_.if(node, (__render) => {
if (_$_.get(lazy)) __render(consequent);
});
}
_$_.pop(div_2);
}
_$_.append(__anchor, div_2);
_$_.pop_component();
}
export function LayoutWithContent(__anchor, _, __block) {
_$_.push_component();
var fragment = root_3();
var node_1 = _$_.first_child_frag(fragment);
Layout(
node_1,
{
children: _$_.tsrx_element(function render_children(__anchor, __block) {
var fragment_1 = root_4();
var node_2 = _$_.first_child_frag(fragment_1);
Content(node_2, {}, _$_.active_block);
_$_.append(__anchor, fragment_1);
})
},
_$_.active_block
);
_$_.append(__anchor, fragment);
_$_.pop_component();
}