UNPKG

ripple

Version:

Ripple is an elegant TypeScript UI framework

230 lines (193 loc) • 4.12 kB
// @ts-nocheck import * as _$_ from 'ripple/internal/server'; export function Layout({ children }) { return _$_.tsrx_element(() => { _$_.regular_block(() => { let __out = ''; __out += '<div class="layout">'; { _$_.output_push(__out); __out = ''; _$_.render_expression(children); } __out += '</div>'; _$_.output_push(__out); }); }); } export function TextWrappedLayout({ children }) { return _$_.tsrx_element(() => { _$_.regular_block(() => { let __out = ''; __out += '<div class="layout">before'; _$_.output_push(__out); __out = ''; _$_.render_expression(children); __out += 'after</div>'; _$_.output_push(__out); }); }); } export function SingleChild() { return _$_.tsrx_element(() => { _$_.regular_block(() => { let __out = ''; __out += '<div class="single">single</div>'; _$_.output_push(__out); }); }); } export function MultiRootChild() { return _$_.tsrx_element(() => { _$_.regular_block(() => { let __out = ''; __out += '<h1>title</h1><p>description</p>'; _$_.output_push(__out); }); }); } export function EmptyLayout() { return _$_.tsrx_element(() => { _$_.regular_block(() => { { const comp = Layout; const args = [{}]; _$_.render_component(comp, ...args); } }); }); } export function LayoutWithSingleChild() { return _$_.tsrx_element(() => { _$_.regular_block(() => { { const comp = Layout; const args = [ { children: _$_.tsrx_element(() => { return _$_.tsrx_element(() => { { const comp = SingleChild; const args = [{}]; _$_.render_component(comp, ...args); } }); }) } ]; _$_.render_component(comp, ...args); } }); }); } export function LayoutWithMultipleChildren() { return _$_.tsrx_element(() => { _$_.regular_block(() => { { const comp = Layout; const args = [ { children: _$_.tsrx_element(() => { return _$_.tsrx_element(() => { let __out = ''; { const comp = SingleChild; const args = [{}]; _$_.output_push(__out); __out = ''; _$_.render_component(comp, ...args); } __out += '<div class="extra">extra</div>'; _$_.output_push(__out); }); }) } ]; _$_.render_component(comp, ...args); } }); }); } export function LayoutWithMultiRootChild() { return _$_.tsrx_element(() => { _$_.regular_block(() => { { const comp = Layout; const args = [ { children: _$_.tsrx_element(() => { return _$_.tsrx_element(() => { { const comp = MultiRootChild; const args = [{}]; _$_.render_component(comp, ...args); } }); }) } ]; _$_.render_component(comp, ...args); } }); }); } export function LayoutWithTextAroundChildren() { return _$_.tsrx_element(() => { _$_.regular_block(() => { { const comp = TextWrappedLayout; const args = [ { children: _$_.tsrx_element(() => { return _$_.tsrx_element(() => { { const comp = SingleChild; const args = [{}]; _$_.render_component(comp, ...args); } }); }) } ]; _$_.render_component(comp, ...args); } }); }); } export function DynamicTagElement() { return _$_.tsrx_element(() => { const Tag = 'section'; _$_.regular_block(() => { _$_.dynamic_element(Tag, { class: "host", children: _$_.tsrx_element(() => { return _$_.tsrx_element(() => { let __out = ''; __out += 'hello'; _$_.output_push(__out); }); }) }); }); }); } export function DynamicTagComponent() { return _$_.tsrx_element(() => { const Comp = SingleChild; _$_.regular_block(() => { { const comp = Layout; const args = [ { children: _$_.tsrx_element(() => { return _$_.tsrx_element(() => { _$_.dynamic_element(Comp, {}); }); }) } ]; _$_.render_component(comp, ...args); } }); }); }