ripple
Version:
Ripple is an elegant TypeScript UI framework
1,784 lines (1,357 loc) • 43.6 kB
JavaScript
// @ts-nocheck
import * as _$_ from 'ripple/internal/client';
var root = _$_.template(`<div></div>`, 0);
var root_1 = _$_.template(`<div></div>`, 0);
var root_2 = _$_.template(`<div></div>`, 0);
var root_3 = _$_.template(`<section></section>`, 0);
var root_4 = _$_.template(`<div><!><!></div>`, 0);
var root_5 = _$_.template(`<div><!><button>Increment</button></div>`, 0);
var root_6 = _$_.template(`<div class="wrapper"><div class="inner"><!></div></div>`, 0);
var root_7 = _$_.template(`<div class="vp-doc"></div>`, 0);
var root_8 = _$_.template(`<h1>Title</h1><div class="content"></div>`, 1, 2);
var root_9 = _$_.template(`<div class="doc"><!><!></div>`, 0);
var root_10 = _$_.template(`<div></div>`, 0);
var root_11 = _$_.template(`<div></div>`, 0);
var root_12 = _$_.template(`<div class="vp-doc"></div>`, 0);
var root_13 = _$_.template(`<footer class="doc-footer">Footer content</footer>`, 0);
var root_15 = _$_.template(`<div class="edit-link"><a>Edit</a></div>`, 0);
var root_16 = _$_.template(`<nav class="prev-next"><a> </a></nav>`, 0);
var root_18 = _$_.template(`<li><a> </a></li>`, 0);
var root_17 = _$_.template(`<div class="toc"><ul></ul></div>`, 0);
var root_14 = _$_.template(`<div class="layout"><div class="content-container"><article><div><!></div></article><!><!><!></div><aside><!></aside></div>`, 0);
var root_19 = _$_.template(`<div class="vp-doc"></div>`, 0);
var root_20 = _$_.template(`<div class="vp-doc"></div>`, 0);
var root_21 = _$_.template(`<div class="vp-doc"></div>`, 0);
var root_22 = _$_.template(`<h1 class="heading"><!></h1>`, 0);
var root_23 = _$_.template(`<h2 class="heading"><!></h2>`, 0);
var root_24 = _$_.template(`<div class="code-block"><div class="header"><button>Copy</button><span class="lang">js</span></div><div class="content"></div></div>`, 0);
var root_25 = _$_.template(`<div class="wrapper"><div class="inner"><!></div></div>`, 0);
var root_26 = _$_.template(`<!><p>First paragraph</p><p>Second paragraph</p><!><p>After code</p>`, 1, 5);
var root_27 = _$_.template(`<h1 class="heading"><!></h1>`, 0);
var root_28 = _$_.template(`<h2 class="heading"><!></h2>`, 0);
var root_29 = _$_.template(`<!><p>First paragraph</p><p>Second paragraph</p><!><p>After code</p>`, 1, 5);
var root_30 = _$_.template(`<span class="for-item"> </span>`, 0);
var root_31 = _$_.template(`<!><p>First paragraph</p><!><p>After code</p>`, 1, 4);
var root_32 = _$_.template(`<div class="try-box"> </div>`, 0);
var root_33 = _$_.template(`<span>error</span>`, 0);
var root_34 = _$_.template(`<!><p>First paragraph</p><!><p>After code</p>`, 1, 4);
var root_35 = _$_.template(`<span class="boxed"><!></span>`, 0);
var root_36 = _$_.template(` `, 1, 1);
var root_37 = _$_.template(`<!><p>First paragraph</p><!><p>After code</p>`, 1, 4);
var root_39 = _$_.template(`<div class="indicator"></div>`, 0);
var root_38 = _$_.template(`<div><!><a><span> </span></a></div>`, 0);
var root_41 = _$_.template(`<div class="section-items"><!></div>`, 0);
var root_40 = _$_.template(`<section class="sidebar-section"><div class="section-header"><h2> </h2><button>Toggle</button></div><!></section>`, 0);
var root_43 = _$_.template(`<!><!>`, 1, 2);
var root_44 = _$_.template(`<!><!>`, 1, 2);
var root_42 = _$_.template(`<aside class="sidebar"><nav><div class="group"></div><div class="group"></div></nav></aside>`, 0);
var root_45 = _$_.template(`<header class="page-header"><div class="logo">MyApp</div></header>`, 0);
var root_47 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
var root_46 = _$_.template(`<div class="layout"><!><div class="content-wrapper"><!><main class="main-content"><div class="article"><div><h1>Introduction</h1><p>Welcome to the docs.</p></div></div><!><!></main></div></div>`, 0);
var root_48 = _$_.template(`<article class="doc-content"><div><!></div></article>`, 0);
var root_49 = _$_.template(`<footer class="doc-footer">Footer</footer>`, 0);
var root_51 = _$_.template(`<h1>Title</h1><p>Content goes here.</p>`, 1, 2);
var root_52 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
var root_53 = _$_.template(`<nav class="prev-next"><a href="/prev">Previous</a></nav>`, 0);
var root_50 = _$_.template(`<div class="content-container"><!><!><!><!></div>`, 0);
var root_55 = _$_.template(`<div class="doc-content"></div>`, 0);
var root_56 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
var root_54 = _$_.template(`<div class="content-container"><!><!><!></div>`, 0);
var root_58 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
var root_57 = _$_.template(`<div class="content-container"><article class="doc-content"><div><!></div></article><!><!></div>`, 0);
var root_59 = _$_.template(`<div class="doc-content"></div>`, 0);
var root_60 = _$_.template(`<header class="header">Header</header>`, 0);
var root_61 = _$_.template(`<aside class="sidebar">Sidebar</aside>`, 0);
var root_62 = _$_.template(`<footer class="footer">Footer</footer>`, 0);
var root_64 = _$_.template(`<div class="edit-link"><a href="/edit">Edit on GitHub</a></div>`, 0);
var root_65 = _$_.template(`<nav class="prev-next"><a> </a></nav>`, 0);
var root_63 = _$_.template(`<div class="layout"><!><div class="docs-wrapper"><!><main class="docs-main"><div class="docs-container"><div class="content"><div class="content-container"><article class="doc-content"><div><!></div></article><!><!><!></div></div></div></main></div></div>`, 0);
var root_66 = _$_.template(`<div class="doc-content"></div>`, 0);
var root_67 = _$_.template(`<div class="doc-content"></div>`, 0);
var root_69 = _$_.template(`<div class="edit-link"><a>Edit on GitHub</a></div>`, 0);
var root_71 = _$_.template(`<a class="pager prev"><span class="title"> </span></a>`, 0);
var root_72 = _$_.template(`<span></span>`, 0);
var root_73 = _$_.template(`<a class="pager next"><span class="title"> </span></a>`, 0);
var root_70 = _$_.template(`<nav class="prev-next"><!><!></nav>`, 0);
var root_75 = _$_.template(`<a> </a>`, 0);
var root_74 = _$_.template(`<div class="aside-content"><nav class="outline"></nav></div>`, 0);
var root_68 = _$_.template(`<div class="layout"><!><div class="docs-wrapper"><!><main class="docs-main"><div class="docs-container"><div class="content"><div class="content-container"><article class="doc-content"><div><!></div></article><!><!><!></div></div><aside class="aside"><!></aside></div></main></div></div>`, 0);
var root_76 = _$_.template(`<div class="doc-content"></div>`, 0);
var root_77 = _$_.template(`<div class="doc-content"></div>`, 0);
var root_78 = _$_.template(`<div><template id="t1"></template><p class="content">Main content</p></div>`, 0);
var root_79 = _$_.template(`<div class="wrapper"><h1>Title</h1><template id="data-template"></template><p class="after-template">Content after template</p></div>`, 0);
var root_80 = _$_.template(`<div class="layout"><template id="page-data"></template><main><!></main></div>`, 0);
var root_81 = _$_.template(`<div class="doc-content"></div>`, 0);
var root_82 = _$_.template(`<section class="readable-section"><p>Ergonomics</p><h2>Sibling traversal pattern</h2><p>Before first block</p><p>Before second block</p><pre class="code-block"><code></code></pre><p>Between one and two</p><pre class="code-block"><code></code></pre><p>Between two and three</p><pre class="code-block"><code></code></pre></section>`, 0);
import { Fragment, track } from 'ripple';
export function StaticHtml() {
return _$_.tsrx_element((__anchor, __block) => {
const html = '<p><strong>Bold</strong> text</p>';
var div = root();
div.innerHTML = html ?? div.innerHTML;
_$_.append(__anchor, div);
});
}
export function DynamicHtml() {
return _$_.tsrx_element((__anchor, __block) => {
const content = '<p>Dynamic <span>HTML</span> content</p>';
var div_1 = root_1();
div_1.innerHTML = content ?? div_1.innerHTML;
_$_.append(__anchor, div_1);
});
}
export function EmptyHtml() {
return _$_.tsrx_element((__anchor, __block) => {
const html = '';
var div_2 = root_2();
div_2.innerHTML = html ?? div_2.innerHTML;
_$_.append(__anchor, div_2);
});
}
export function ComplexHtml() {
return _$_.tsrx_element((__anchor, __block) => {
const html = '<div class="nested"><span>Nested <em>content</em></span></div>';
var section = root_3();
section.innerHTML = html ?? section.innerHTML;
_$_.append(__anchor, section);
});
}
export function MultipleHtml() {
return _$_.tsrx_element((__anchor, __block) => {
const html1 = '<p>First paragraph</p>';
const html2 = '<p>Second paragraph</p>';
var div_3 = root_4();
{
var node = _$_.child(div_3);
var node_1 = _$_.sibling(node);
_$_.pop(div_3);
}
_$_.render(
(__prev) => {
_$_.html(node, () => html1);
_$_.html(node_1, () => html2);
},
{}
);
_$_.append(__anchor, div_3);
});
}
export function HtmlWithReactivity() {
return _$_.tsrx_element((__anchor, __block) => {
var div_4 = root_5();
{
var node_2 = _$_.child(div_4);
_$_.pop(div_4);
}
_$_.render(() => {
_$_.html(node_2, () => "<p>Count: 0</p>");
});
_$_.append(__anchor, div_4);
});
}
export function HtmlWrapper({ children }) {
return _$_.tsrx_element((__anchor, __block) => {
var div_5 = root_6();
{
var div_6 = _$_.child(div_5);
{
var expression = _$_.child(div_6);
_$_.expression(expression, () => children);
_$_.pop(div_6);
}
}
_$_.append(__anchor, div_5);
});
}
export function HtmlInChildren() {
return _$_.tsrx_element((__anchor, __block) => {
const content = '<p><strong>Bold</strong> text</p>';
_$_.render_component(HtmlWrapper, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var div_7 = root_7();
div_7.innerHTML = content ?? div_7.innerHTML;
_$_.append(__anchor, div_7);
})
});
});
}
export function HtmlInChildrenWithSiblings() {
return _$_.tsrx_element((__anchor, __block) => {
const content = '<p>Dynamic content</p>';
_$_.render_component(HtmlWrapper, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var fragment = root_8();
var h1 = _$_.first_child_frag(fragment);
var div_8 = _$_.sibling(h1);
div_8.innerHTML = content ?? div_8.innerHTML;
_$_.next();
_$_.append(__anchor, fragment, true);
})
});
});
}
export function MultipleHtmlInChildren() {
return _$_.tsrx_element((__anchor, __block) => {
const html1 = '<p>First</p>';
const html2 = '<p>Second</p>';
_$_.render_component(HtmlWrapper, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var div_9 = root_9();
{
var node_3 = _$_.child(div_9);
var node_4 = _$_.sibling(node_3);
_$_.pop(div_9);
}
_$_.render(
(__prev) => {
_$_.html(node_3, () => html1);
_$_.html(node_4, () => html2);
},
{}
);
_$_.append(__anchor, div_9);
})
});
});
}
export function HtmlWithComments() {
return _$_.tsrx_element((__anchor, __block) => {
const content = '<p>Before comment</p><!-- TODO: Elaborate --><p>After comment</p>';
var div_10 = root_10();
div_10.innerHTML = content ?? div_10.innerHTML;
_$_.append(__anchor, div_10);
});
}
export function HtmlWithEmptyComment() {
return _$_.tsrx_element((__anchor, __block) => {
const content = '<p>Before</p><!----><p>After</p>';
var div_11 = root_11();
div_11.innerHTML = content ?? div_11.innerHTML;
_$_.append(__anchor, div_11);
});
}
export function HtmlWithCommentsInChildren() {
return _$_.tsrx_element((__anchor, __block) => {
const content = '<h2 id="intro">Introduction</h2><p>Some text</p><!-- TODO --><p>More text</p>';
_$_.render_component(HtmlWrapper, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var div_12 = root_12();
div_12.innerHTML = content ?? div_12.innerHTML;
_$_.append(__anchor, div_12);
})
});
});
}
function DocFooter() {
return _$_.tsrx_element((__anchor, __block) => {
var footer = root_13();
_$_.append(__anchor, footer);
});
}
export function DocLayout(__props) {
return _$_.tsrx_element((__anchor, __block) => {
var div_13 = root_14();
{
var div_15 = _$_.child(div_13);
{
var article = _$_.child(div_15);
{
var div_14 = _$_.child(article);
{
var expression_1 = _$_.child(div_14);
_$_.expression(expression_1, () => __props.children);
_$_.pop(div_14);
}
}
_$_.pop(article);
var node_5 = _$_.sibling(article);
{
var consequent = (__anchor) => {
var div_16 = root_15();
{
var a = _$_.child(div_16);
}
_$_.render(() => {
_$_.set_attribute(a, 'href', `https://github.com/edit/${_$_.fallback(__props.editPath, '')}`);
});
_$_.append(__anchor, div_16);
};
_$_.if(node_5, (__render) => {
if (_$_.fallback(__props.editPath, '')) __render(consequent);
});
}
var node_6 = _$_.sibling(node_5);
{
var consequent_1 = (__anchor) => {
var nav = root_16();
{
var a_1 = _$_.child(nav);
{
var expression_2 = _$_.child(a_1);
_$_.expression(expression_2, () => _$_.fallback(__props.nextLink, null).text);
_$_.pop(a_1);
}
}
_$_.render(() => {
_$_.set_attribute(a_1, 'href', _$_.fallback(__props.nextLink, null).href);
});
_$_.append(__anchor, nav);
};
_$_.if(node_6, (__render) => {
if (_$_.fallback(__props.nextLink, null)) __render(consequent_1);
});
}
var node_7 = _$_.sibling(node_6);
_$_.render_component(DocFooter, node_7, {});
_$_.pop(div_15);
}
var aside = _$_.sibling(div_15);
{
var node_8 = _$_.child(aside);
{
var consequent_2 = (__anchor) => {
var div_17 = root_17();
{
var ul = _$_.child(div_17);
{
_$_.for(
ul,
() => _$_.fallback(__props.toc, []),
(__anchor, item) => {
var li = root_18();
{
var a_2 = _$_.child(li);
{
var expression_3 = _$_.child(a_2);
_$_.expression(expression_3, () => item.text);
_$_.pop(a_2);
}
}
_$_.render(() => {
_$_.set_attribute(a_2, 'href', item.href);
});
_$_.append(__anchor, li);
},
4
);
_$_.pop(ul);
}
}
_$_.append(__anchor, div_17);
};
_$_.if(node_8, (__render) => {
if (_$_.fallback(__props.toc, []).length > 0) __render(consequent_2);
});
}
_$_.pop(aside);
}
}
_$_.append(__anchor, div_13);
});
}
export function HtmlWithServerData() {
return _$_.tsrx_element((__anchor, __block) => {
const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
_$_.render_component(DocLayout, __anchor, {
editPath: "docs/introduction.md",
nextLink: { href: '/docs/quick-start', text: 'Quick Start' },
toc: [
{ href: '#intro', text: 'Introduction' },
{ href: '#features', text: 'Features' }
],
children: _$_.tsrx_element((__anchor, __block) => {
var div_18 = root_19();
div_18.innerHTML = content ?? div_18.innerHTML;
_$_.append(__anchor, div_18);
})
});
});
}
export function HtmlWithClientDefaults() {
return _$_.tsrx_element((__anchor, __block) => {
const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
_$_.render_component(DocLayout, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var div_19 = root_20();
div_19.innerHTML = content ?? div_19.innerHTML;
_$_.append(__anchor, div_19);
})
});
});
}
export function HtmlWithUndefinedContent() {
return _$_.tsrx_element((__anchor, __block) => {
const content = undefined;
_$_.render_component(DocLayout, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var div_20 = root_21();
div_20.innerHTML = content ?? div_20.innerHTML;
_$_.append(__anchor, div_20);
})
});
});
}
function DynamicHeading({ level, children }) {
return _$_.tsrx_element((__anchor, __block) => {
{
var switch_case_0 = (__anchor) => {
var h1_1 = root_22();
{
var expression_4 = _$_.child(h1_1);
_$_.expression(expression_4, () => children);
_$_.pop(h1_1);
}
_$_.append(__anchor, h1_1);
};
var switch_case_1 = (__anchor) => {
var h2 = root_23();
{
var expression_5 = _$_.child(h2);
_$_.expression(expression_5, () => children);
_$_.pop(h2);
}
_$_.append(__anchor, h2);
};
_$_.switch(
__anchor,
() => {
var result = [];
switch (level) {
case 1:
result.push(switch_case_0);
return result;
case 2:
result.push(switch_case_1);
return result;
}
},
true
);
}
});
}
function CodeBlock({ code }) {
return _$_.tsrx_element((__anchor, __block) => {
const highlighted = `<pre class="shiki"><code>${code}</code></pre>`;
var div_21 = root_24();
{
var div_22 = _$_.child(div_21);
_$_.pop(div_22);
var div_23 = _$_.sibling(div_22);
div_23.innerHTML = highlighted ?? div_23.innerHTML;
}
_$_.append(__anchor, div_21);
});
}
function ContentWrapper({ children }) {
return _$_.tsrx_element((__anchor, __block) => {
var div_24 = root_25();
{
var div_25 = _$_.child(div_24);
{
var expression_6 = _$_.child(div_25);
_$_.expression(expression_6, () => children);
_$_.pop(div_25);
}
}
_$_.append(__anchor, div_24);
});
}
export function HtmlAfterSwitchInChildren() {
return _$_.tsrx_element((__anchor, __block) => {
_$_.render_component(ContentWrapper, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var fragment_1 = root_26();
var node_9 = _$_.first_child_frag(fragment_1);
_$_.render_component(DynamicHeading, node_9, {
level: 1,
children: _$_.tsrx_element((__anchor, __block) => {
var expression_7 = _$_.text('Title');
_$_.append(__anchor, expression_7);
})
});
var p_1 = _$_.sibling(node_9);
var p = _$_.sibling(p_1);
var node_10 = _$_.sibling(p);
_$_.render_component(CodeBlock, node_10, { code: "const x = 1;" });
_$_.append(__anchor, fragment_1);
})
});
});
}
function IfHeading({ primary, children }) {
return _$_.tsrx_element((__anchor, __block) => {
{
var consequent_3 = (__anchor) => {
var h1_2 = root_27();
{
var expression_8 = _$_.child(h1_2);
_$_.expression(expression_8, () => children);
_$_.pop(h1_2);
}
_$_.append(__anchor, h1_2);
};
var alternate = (__anchor) => {
var h2_1 = root_28();
{
var expression_9 = _$_.child(h2_1);
_$_.expression(expression_9, () => children);
_$_.pop(h2_1);
}
_$_.append(__anchor, h2_1);
};
_$_.if(
__anchor,
(__render) => {
if (primary) __render(consequent_3); else __render(alternate, false);
},
true
);
}
});
}
export function HtmlAfterIfInChildren() {
return _$_.tsrx_element((__anchor, __block) => {
_$_.render_component(ContentWrapper, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var fragment_2 = root_29();
var node_11 = _$_.first_child_frag(fragment_2);
_$_.render_component(IfHeading, node_11, {
primary: true,
children: _$_.tsrx_element((__anchor, __block) => {
var expression_10 = _$_.text('Title');
_$_.append(__anchor, expression_10);
})
});
var p_3 = _$_.sibling(node_11);
var p_2 = _$_.sibling(p_3);
var node_12 = _$_.sibling(p_2);
_$_.render_component(CodeBlock, node_12, { code: "const x = 1;" });
_$_.append(__anchor, fragment_2);
})
});
});
}
function ForList({ items }) {
return _$_.tsrx_element((__anchor, __block) => {
_$_.for(
__anchor,
() => items,
(__anchor, item) => {
var span = root_30();
{
var expression_11 = _$_.child(span);
_$_.expression(expression_11, () => item);
_$_.pop(span);
}
_$_.append(__anchor, span);
},
16
);
});
}
export function HtmlAfterForInChildren() {
return _$_.tsrx_element((__anchor, __block) => {
_$_.render_component(ContentWrapper, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var fragment_3 = root_31();
var node_13 = _$_.first_child_frag(fragment_3);
_$_.render_component(ForList, node_13, { items: ['Title', 'Subtitle'] });
var p_4 = _$_.sibling(node_13);
var node_14 = _$_.sibling(p_4);
_$_.render_component(CodeBlock, node_14, { code: "const x = 1;" });
_$_.append(__anchor, fragment_3);
})
});
});
}
function TryBox({ value }) {
return _$_.tsrx_element((__anchor, __block) => {
_$_.try(
__anchor,
(__anchor) => {
var div_26 = root_32();
{
var expression_12 = _$_.child(div_26, true);
expression_12.nodeValue = value;
_$_.pop(div_26);
}
_$_.append(__anchor, div_26);
},
(__anchor, e) => {
var span_1 = root_33();
_$_.append(__anchor, span_1);
},
null,
true
);
});
}
export function HtmlAfterTryInChildren() {
return _$_.tsrx_element((__anchor, __block) => {
_$_.render_component(ContentWrapper, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var fragment_4 = root_34();
var node_15 = _$_.first_child_frag(fragment_4);
_$_.render_component(TryBox, node_15, { value: "Title" });
var p_5 = _$_.sibling(node_15);
var node_16 = _$_.sibling(p_5);
_$_.render_component(CodeBlock, node_16, { code: "const x = 1;" });
_$_.append(__anchor, fragment_4);
})
});
});
}
function Boxed({ children }) {
return _$_.tsrx_element((__anchor, __block) => {
var span_2 = root_35();
{
var expression_13 = _$_.child(span_2);
_$_.expression(expression_13, () => children);
_$_.pop(span_2);
}
_$_.append(__anchor, span_2);
});
}
function IndirectHeading({ text }) {
return _$_.tsrx_element((__anchor, __block) => {
_$_.render_component(Boxed, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var fragment_5 = root_36();
var expression_14 = _$_.first_child_frag(fragment_5, true);
expression_14.nodeValue = text;
_$_.append(__anchor, fragment_5);
})
});
});
}
export function HtmlAfterComponentInChildren() {
return _$_.tsrx_element((__anchor, __block) => {
_$_.render_component(ContentWrapper, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var fragment_6 = root_37();
var node_17 = _$_.first_child_frag(fragment_6);
_$_.render_component(IndirectHeading, node_17, { text: "Title" });
var p_6 = _$_.sibling(node_17);
var node_18 = _$_.sibling(p_6);
_$_.render_component(CodeBlock, node_18, { code: "const x = 1;" });
_$_.append(__anchor, fragment_6);
})
});
});
}
function NavItem(__props) {
return _$_.tsrx_element((__anchor, __block) => {
var div_27 = root_38();
{
var node_19 = _$_.child(div_27);
{
var consequent_4 = (__anchor) => {
var div_28 = root_39();
_$_.append(__anchor, div_28);
};
_$_.if(node_19, (__render) => {
if (_$_.fallback(__props.active, false)) __render(consequent_4);
});
}
var a_3 = _$_.sibling(node_19);
{
var span_3 = _$_.child(a_3);
{
var expression_15 = _$_.child(span_3);
_$_.expression(expression_15, () => __props.text);
_$_.pop(span_3);
}
}
_$_.pop(div_27);
}
_$_.render(
(__prev) => {
var __a = __props.href;
if (__prev.a !== __a) {
_$_.set_attribute(a_3, 'href', __prev.a = __a);
}
var __b = `nav-item${_$_.fallback(__props.active, false) ? ' active' : ''}`;
if (__prev.b !== __b) {
_$_.set_class(div_27, __prev.b = __b, void 0, true);
}
},
{ a: void 0, b: Symbol() }
);
_$_.append(__anchor, div_27);
});
}
function SidebarSection({ title, children }) {
return _$_.tsrx_element((__anchor, __block) => {
let lazy = _$_.track(true, __block, '6ac6906f');
var section_1 = root_40();
{
var div_29 = _$_.child(section_1);
{
var h2_2 = _$_.child(div_29);
{
var expression_16 = _$_.child(h2_2, true);
expression_16.nodeValue = title;
_$_.pop(h2_2);
}
var button = _$_.sibling(h2_2);
button.__click = () => _$_.set(lazy, !lazy.value);
}
_$_.pop(div_29);
var node_20 = _$_.sibling(div_29);
{
var consequent_5 = (__anchor) => {
var div_30 = root_41();
{
var expression_17 = _$_.child(div_30);
_$_.expression(expression_17, () => children);
_$_.pop(div_30);
}
_$_.append(__anchor, div_30);
};
_$_.if(node_20, (__render) => {
if (lazy.value) __render(consequent_5);
});
}
_$_.pop(section_1);
}
_$_.append(__anchor, section_1);
});
}
function SideNav({ currentPath }) {
return _$_.tsrx_element((__anchor, __block) => {
var aside_1 = root_42();
{
var nav_1 = _$_.child(aside_1);
{
var div_31 = _$_.child(nav_1);
{
var append_anchor = _$_.append_into(div_31);
_$_.render_component(SidebarSection, append_anchor, {
title: "Getting Started",
children: _$_.tsrx_element((__anchor, __block) => {
var fragment_7 = root_43();
var node_21 = _$_.first_child_frag(fragment_7);
_$_.render_component(NavItem, node_21, {
href: "/intro",
text: "Introduction",
active: currentPath === '/intro'
});
var node_22 = _$_.sibling(node_21);
_$_.render_component(NavItem, node_22, {
href: "/start",
text: "Quick Start",
active: currentPath === '/start'
});
_$_.append(__anchor, fragment_7);
})
});
_$_.pop(div_31);
}
var div_32 = _$_.sibling(div_31);
{
var append_anchor_1 = _$_.append_into(div_32);
_$_.render_component(SidebarSection, append_anchor_1, {
title: "Guide",
children: _$_.tsrx_element((__anchor, __block) => {
var fragment_8 = root_44();
var node_23 = _$_.first_child_frag(fragment_8);
_$_.render_component(NavItem, node_23, {
href: "/guide/app",
text: "Application",
active: currentPath === '/guide/app'
});
var node_24 = _$_.sibling(node_23);
_$_.render_component(NavItem, node_24, {
href: "/guide/syntax",
text: "Syntax",
active: currentPath === '/guide/syntax'
});
_$_.append(__anchor, fragment_8);
})
});
_$_.pop(div_32);
}
}
}
_$_.append(__anchor, aside_1);
});
}
function PageHeader() {
return _$_.tsrx_element((__anchor, __block) => {
var header = root_45();
_$_.append(__anchor, header);
});
}
export function LayoutWithSidebarAndMain() {
return _$_.tsrx_element((__anchor, __block) => {
var div_33 = root_46();
{
var node_25 = _$_.child(div_33);
_$_.render_component(PageHeader, node_25, {});
var div_34 = _$_.sibling(node_25);
{
var node_26 = _$_.child(div_34);
_$_.render_component(SideNav, node_26, { currentPath: "/intro" });
var main = _$_.sibling(node_26);
{
var div_35 = _$_.child(main);
_$_.pop(div_35);
var node_27 = _$_.sibling(div_35);
{
var consequent_6 = (__anchor) => {
var div_36 = root_47();
_$_.append(__anchor, div_36);
};
_$_.if(node_27, (__render) => {
if (true) __render(consequent_6);
});
}
var node_28 = _$_.sibling(node_27);
_$_.render_component(PageHeader, node_28, {});
_$_.pop(main);
}
_$_.pop(div_34);
}
_$_.pop(div_33);
}
_$_.append(__anchor, div_33);
});
}
function ArticleWrapper({ children }) {
return _$_.tsrx_element((__anchor, __block) => {
var article_1 = root_48();
{
var div_37 = _$_.child(article_1);
{
var expression_18 = _$_.child(div_37);
_$_.expression(expression_18, () => children);
_$_.pop(div_37);
}
}
_$_.append(__anchor, article_1);
});
}
function SimpleFooter() {
return _$_.tsrx_element((__anchor, __block) => {
var footer_1 = root_49();
_$_.append(__anchor, footer_1);
});
}
export function ArticleWithChildrenThenSibling() {
return _$_.tsrx_element((__anchor, __block) => {
var div_38 = root_50();
{
var node_29 = _$_.child(div_38);
_$_.render_component(ArticleWrapper, node_29, {
children: _$_.tsrx_element((__anchor, __block) => {
var fragment_9 = root_51();
_$_.append(__anchor, fragment_9);
})
});
var node_30 = _$_.sibling(node_29);
{
var consequent_7 = (__anchor) => {
var div_39 = root_52();
_$_.append(__anchor, div_39);
};
_$_.if(node_30, (__render) => {
if (true) __render(consequent_7);
});
}
var node_31 = _$_.sibling(node_30);
{
var consequent_8 = (__anchor) => {
var nav_2 = root_53();
_$_.append(__anchor, nav_2);
};
_$_.if(node_31, (__render) => {
if (true) __render(consequent_8);
});
}
var node_32 = _$_.sibling(node_31);
_$_.render_component(SimpleFooter, node_32, {});
_$_.pop(div_38);
}
_$_.append(__anchor, div_38);
});
}
export function ArticleWithHtmlChildThenSibling() {
return _$_.tsrx_element((__anchor, __block) => {
const htmlContent = '<pre><code>const x = 1;</code></pre>';
var div_40 = root_54();
{
var node_33 = _$_.child(div_40);
_$_.render_component(ArticleWrapper, node_33, {
children: _$_.tsrx_element((__anchor, __block) => {
var div_41 = root_55();
div_41.innerHTML = htmlContent ?? div_41.innerHTML;
_$_.append(__anchor, div_41);
})
});
var node_34 = _$_.sibling(node_33);
{
var consequent_9 = (__anchor) => {
var div_42 = root_56();
_$_.append(__anchor, div_42);
};
_$_.if(node_34, (__render) => {
if (true) __render(consequent_9);
});
}
var node_35 = _$_.sibling(node_34);
_$_.render_component(SimpleFooter, node_35, {});
_$_.pop(div_40);
}
_$_.append(__anchor, div_40);
});
}
function InlineArticleLayout({ children }) {
return _$_.tsrx_element((__anchor, __block) => {
var div_43 = root_57();
{
var article_2 = _$_.child(div_43);
{
var div_44 = _$_.child(article_2);
{
var expression_19 = _$_.child(div_44);
_$_.expression(expression_19, () => children);
_$_.pop(div_44);
}
}
_$_.pop(article_2);
var node_36 = _$_.sibling(article_2);
{
var consequent_10 = (__anchor) => {
var div_45 = root_58();
_$_.append(__anchor, div_45);
};
_$_.if(node_36, (__render) => {
if (true) __render(consequent_10);
});
}
var node_37 = _$_.sibling(node_36);
_$_.render_component(SimpleFooter, node_37, {});
_$_.pop(div_43);
}
_$_.append(__anchor, div_43);
});
}
export function InlineArticleWithHtmlChild() {
return _$_.tsrx_element((__anchor, __block) => {
const htmlContent = '<pre><code>const x = 1;</code></pre>';
_$_.render_component(InlineArticleLayout, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var div_46 = root_59();
div_46.innerHTML = htmlContent ?? div_46.innerHTML;
_$_.append(__anchor, div_46);
})
});
});
}
function HeaderStub() {
return _$_.tsrx_element((__anchor, __block) => {
var header_1 = root_60();
_$_.append(__anchor, header_1);
});
}
function SidebarStub() {
return _$_.tsrx_element((__anchor, __block) => {
var aside_2 = root_61();
_$_.append(__anchor, aside_2);
});
}
function FooterStub() {
return _$_.tsrx_element((__anchor, __block) => {
var footer_2 = root_62();
_$_.append(__anchor, footer_2);
});
}
function DocsLayoutInner(__props) {
return _$_.tsrx_element((__anchor, __block) => {
var div_47 = root_63();
{
var node_38 = _$_.child(div_47);
_$_.render_component(HeaderStub, node_38, {});
var div_48 = _$_.sibling(node_38);
{
var node_39 = _$_.child(div_48);
_$_.render_component(SidebarStub, node_39, {});
var main_1 = _$_.sibling(node_39);
{
var div_52 = _$_.child(main_1);
{
var div_51 = _$_.child(div_52);
{
var div_50 = _$_.child(div_51);
{
var article_3 = _$_.child(div_50);
{
var div_49 = _$_.child(article_3);
{
var expression_20 = _$_.child(div_49);
_$_.expression(expression_20, () => __props.children);
_$_.pop(div_49);
}
}
_$_.pop(article_3);
var node_40 = _$_.sibling(article_3);
{
var consequent_11 = (__anchor) => {
var div_53 = root_64();
_$_.append(__anchor, div_53);
};
_$_.if(node_40, (__render) => {
if (_$_.fallback(__props.editPath, '')) __render(consequent_11);
});
}
var node_41 = _$_.sibling(node_40);
{
var consequent_12 = (__anchor) => {
var nav_3 = root_65();
{
var a_4 = _$_.child(nav_3);
{
var expression_21 = _$_.child(a_4);
_$_.expression(expression_21, () => _$_.fallback(__props.nextLink, null).text);
_$_.pop(a_4);
}
}
_$_.render(() => {
_$_.set_attribute(a_4, 'href', _$_.fallback(__props.nextLink, null).href);
});
_$_.append(__anchor, nav_3);
};
_$_.if(node_41, (__render) => {
if (_$_.fallback(__props.nextLink, null)) __render(consequent_12);
});
}
var node_42 = _$_.sibling(node_41);
_$_.render_component(FooterStub, node_42, {});
_$_.pop(div_50);
}
}
}
}
_$_.pop(div_48);
}
_$_.pop(div_47);
}
_$_.append(__anchor, div_47);
});
}
export function DocsLayoutWithData() {
return _$_.tsrx_element((__anchor, __block) => {
const htmlContent = '<h1>Title</h1><p>Content</p>';
_$_.render_component(DocsLayoutInner, __anchor, {
editPath: "docs/styling.md",
nextLink: { href: '/next', text: 'Next' },
children: _$_.tsrx_element((__anchor, __block) => {
var div_54 = root_66();
div_54.innerHTML = htmlContent ?? div_54.innerHTML;
_$_.append(__anchor, div_54);
})
});
});
}
export function DocsLayoutWithoutData() {
return _$_.tsrx_element((__anchor, __block) => {
const htmlContent = undefined;
_$_.render_component(DocsLayoutInner, __anchor, {
children: _$_.tsrx_element((__anchor, __block) => {
var div_55 = root_67();
div_55.innerHTML = htmlContent ?? div_55.innerHTML;
_$_.append(__anchor, div_55);
})
});
});
}
function DocsLayoutExact(__props) {
return _$_.tsrx_element((__anchor, __block) => {
var div_56 = root_68();
{
var node_43 = _$_.child(div_56);
_$_.render_component(HeaderStub, node_43, {});
var div_57 = _$_.sibling(node_43);
{
var node_44 = _$_.child(div_57);
_$_.render_component(SidebarStub, node_44, {});
var main_2 = _$_.sibling(node_44);
{
var div_61 = _$_.child(main_2);
{
var div_60 = _$_.child(div_61);
{
var div_59 = _$_.child(div_60);
{
var article_4 = _$_.child(div_59);
{
var div_58 = _$_.child(article_4);
{
var expression_22 = _$_.child(div_58);
_$_.expression(expression_22, () => __props.children);
_$_.pop(div_58);
}
}
_$_.pop(article_4);
var node_45 = _$_.sibling(article_4);
{
var consequent_13 = (__anchor) => {
var div_62 = root_69();
{
var a_5 = _$_.child(div_62);
}
_$_.render(() => {
_$_.set_attribute(a_5, 'href', `/edit/${_$_.fallback(__props.editPath, '')}`);
});
_$_.append(__anchor, div_62);
};
_$_.if(node_45, (__render) => {
if (_$_.fallback(__props.editPath, '')) __render(consequent_13);
});
}
var node_46 = _$_.sibling(node_45);
{
var consequent_16 = (__anchor) => {
var nav_4 = root_70();
{
var node_47 = _$_.child(nav_4);
{
var consequent_14 = (__anchor) => {
var a_6 = root_71();
{
var span_4 = _$_.child(a_6);
{
var expression_23 = _$_.child(span_4);
_$_.expression(expression_23, () => _$_.fallback(__props.prevLink, null).text);
_$_.pop(span_4);
}
}
_$_.render(() => {
_$_.set_attribute(a_6, 'href', _$_.fallback(__props.prevLink, null).href);
});
_$_.append(__anchor, a_6);
};
var alternate_1 = (__anchor) => {
var span_5 = root_72();
_$_.append(__anchor, span_5);
};
_$_.if(node_47, (__render) => {
if (_$_.fallback(__props.prevLink, null)) __render(consequent_14); else __render(alternate_1, false);
});
}
var node_48 = _$_.sibling(node_47);
{
var consequent_15 = (__anchor) => {
var a_7 = root_73();
{
var span_6 = _$_.child(a_7);
{
var expression_24 = _$_.child(span_6);
_$_.expression(expression_24, () => _$_.fallback(__props.nextLink, null).text);
_$_.pop(span_6);
}
}
_$_.render(() => {
_$_.set_attribute(a_7, 'href', _$_.fallback(__props.nextLink, null).href);
});
_$_.append(__anchor, a_7);
};
_$_.if(node_48, (__render) => {
if (_$_.fallback(__props.nextLink, null)) __render(consequent_15);
});
}
_$_.pop(nav_4);
}
_$_.append(__anchor, nav_4);
};
_$_.if(node_46, (__render) => {
if (_$_.fallback(__props.prevLink, null) || _$_.fallback(__props.nextLink, null)) __render(consequent_16);
});
}
var node_49 = _$_.sibling(node_46);
_$_.render_component(FooterStub, node_49, {});
_$_.pop(div_59);
}
}
_$_.pop(div_60);
var aside_3 = _$_.sibling(div_60);
{
var node_50 = _$_.child(aside_3);
{
var consequent_17 = (__anchor) => {
var div_63 = root_74();
{
var nav_5 = _$_.child(div_63);
{
_$_.for(
nav_5,
() => _$_.fallback(__props.toc, []),
(__anchor, item) => {
var a_8 = root_75();
{
var expression_25 = _$_.child(a_8);
_$_.expression(expression_25, () => item.text);
_$_.pop(a_8);
}
_$_.render(() => {
_$_.set_attribute(a_8, 'href', item.href);
});
_$_.append(__anchor, a_8);
},
4
);
_$_.pop(nav_5);
}
}
_$_.append(__anchor, div_63);
};
_$_.if(node_50, (__render) => {
if (_$_.fallback(__props.toc, []).length > 0) __render(consequent_17);
});
}
_$_.pop(aside_3);
}
}
}
_$_.pop(div_57);
}
_$_.pop(div_56);
}
_$_.append(__anchor, div_56);
});
}
export function DocsLayoutExactWithData() {
return _$_.tsrx_element((__anchor, __block) => {
const htmlContent = '<h1>Styling Guide</h1><p>Content</p>';
_$_.render_component(DocsLayoutExact, __anchor, {
editPath: "docs/guide/styling.md",
prevLink: { href: '/prev', text: 'Previous' },
nextLink: { href: '/next', text: 'Next' },
toc: [
{ href: '#intro', text: 'Introduction' },
{ href: '#usage', text: 'Usage' }
],
children: _$_.tsrx_element((__anchor, __block) => {
var div_64 = root_76();
div_64.innerHTML = htmlContent ?? div_64.innerHTML;
_$_.append(__anchor, div_64);
})
});
});
}
export function DocsLayoutExactWithoutData() {
return _$_.tsrx_element((__anchor, __block) => {
const htmlContent = undefined;
const editPath = undefined;
const prevLink = undefined;
const nextLink = undefined;
const toc = undefined;
_$_.render_component(DocsLayoutExact, __anchor, {
editPath,
prevLink,
nextLink,
toc,
children: _$_.tsrx_element((__anchor, __block) => {
var div_65 = root_77();
div_65.innerHTML = htmlContent ?? div_65.innerHTML;
_$_.append(__anchor, div_65);
})
});
});
}
export function TemplateWithHtmlContent() {
return _$_.tsrx_element((__anchor, __block) => {
const data = { title: 'Test', value: 42 };
var div_66 = root_78();
{
var template = _$_.child(div_66);
}
_$_.render(() => {
template.innerHTML = _$_.with_scope(__block, () => JSON.stringify(data)) ?? template.innerHTML;
});
_$_.append(__anchor, div_66);
});
}
export function TemplateWithHtmlAndSiblings() {
return _$_.tsrx_element((__anchor, __block) => {
const data = { name: 'Ripple', version: '1.0' };
var div_67 = root_79();
{
var h1_3 = _$_.child(div_67);
var template_1 = _$_.sibling(h1_3);
}
_$_.render(() => {
template_1.innerHTML = _$_.with_scope(__block, () => JSON.stringify(data)) ?? template_1.innerHTML;
});
_$_.append(__anchor, div_67);
});
}
function LayoutWithTemplate({ children, data }) {
return _$_.tsrx_element((__anchor, __block) => {
var div_68 = root_80();
{
var template_2 = _$_.child(div_68);
var main_3 = _$_.sibling(template_2);
{
var expression_26 = _$_.child(main_3);
_$_.expression(expression_26, () => children);
_$_.pop(main_3);
}
}
_$_.render(() => {
template_2.innerHTML = _$_.with_scope(__block, () => JSON.stringify(data)) ?? template_2.innerHTML;
});
_$_.append(__anchor, div_68);
});
}
export function NestedTemplateInLayout() {
return _$_.tsrx_element((__anchor, __block) => {
const doc = { title: 'Comparison', html: '<p>Content</p>' };
_$_.render_component(LayoutWithTemplate, __anchor, {
data: doc,
children: _$_.tsrx_element((__anchor, __block) => {
var div_69 = root_81();
_$_.render(() => {
div_69.innerHTML = doc.html ?? div_69.innerHTML;
});
_$_.append(__anchor, div_69);
})
});
});
}
export function HtmlCodeBlocksWithSiblingChain() {
return _$_.tsrx_element((__anchor, __block) => {
const html1 = '<span class="kw">const</span> <span class="id">a</span> = 1;';
const html2 = '<span class="kw">const</span> <span class="id">b</span> = 2;';
const html3 = '<span class="kw">const</span> <span class="id">c</span> = 3;';
var section_2 = root_82();
{
var p_9 = _$_.child(section_2);
var h2_3 = _$_.sibling(p_9);
var p_8 = _$_.sibling(h2_3);
var p_7 = _$_.sibling(p_8);
var pre = _$_.sibling(p_7);
{
var code_1 = _$_.child(pre);
code_1.innerHTML = html1 ?? code_1.innerHTML;
}
_$_.pop(pre);
var p_10 = _$_.sibling(pre);
var pre_1 = _$_.sibling(p_10);
{
var code_2 = _$_.child(pre_1);
code_2.innerHTML = html2 ?? code_2.innerHTML;
}
_$_.pop(pre_1);
var p_11 = _$_.sibling(pre_1);
var pre_2 = _$_.sibling(p_11);
{
var code_3 = _$_.child(pre_2);
code_3.innerHTML = html3 ?? code_3.innerHTML;
}
}
_$_.append(__anchor, section_2);
});
}
_$_.delegate(['click']);