UNPKG

ripple

Version:

Ripple is an elegant TypeScript UI framework

920 lines (705 loc) 23.3 kB
// @ts-nocheck import * as _$_ from 'ripple/internal/client'; var root = _$_.template(`<div>Hello World</div>`, 0); var root_2 = _$_.template(`<h1>Title</h1><p>Paragraph text</p><span>Span text</span>`, 1, 3); var root_1 = _$_.template(`<!>`, 1, 1); var root_3 = _$_.template(`<div class="outer"><div class="inner"><span>Nested content</span></div></div>`, 0); var root_5 = _$_.template(`<input type="text" placeholder="Enter text" disabled><a href="/link" target="_blank">Link</a>`, 1, 2); var root_4 = _$_.template(`<!>`, 1, 1); var root_6 = _$_.template(`<span class="child">Child content</span>`, 0); var root_7 = _$_.template(`<div class="parent"></div>`, 0); var root_8 = _$_.template(`<div class="first">First</div>`, 0); var root_9 = _$_.template(`<div class="second">Second</div>`, 0); var root_11 = _$_.template(`<!><!>`, 1, 2); var root_10 = _$_.template(`<!>`, 1, 1); var root_12 = _$_.template(`<div> </div>`, 0); var root_14 = _$_.template(`<div> </div><span> </span>`, 1, 2); var root_13 = _$_.template(`<!>`, 1, 1); var root_15 = _$_.template(`<div class="helper-item"> </div>`, 0); var root_17 = _$_.template(`<span class="label"> </span><!>`, 1, 2); var root_16 = _$_.template(`<!>`, 1, 1); var root_19 = _$_.template(`<div class="app-item"> </div>`, 0); var root_18 = _$_.template(`<div class="nested-expression-values"><!><!></div>`, 0); var root_20 = _$_.template(`<strong class="middle">beta</strong>`, 0); var root_21 = _$_.template(`<em class="tail">epsilon</em>`, 0); var root_22 = _$_.template(` `, 1, 1); var root_23 = _$_.template(`<div class="mixed-collection"><!></div>`, 0); var root_24 = _$_.template(`<strong class="middle">beta</strong>`, 0); var root_25 = _$_.template(`<em class="tail">epsilon</em>`, 0); var root_26 = _$_.template(` `, 1, 1); var root_27 = _$_.template(`<div class="mixed-collection-split"><!></div>`, 0); var root_28 = _$_.template(`<strong class="middle">beta</strong>`, 0); var root_29 = _$_.template(`<em class="tail">epsilon</em>`, 0); var root_30 = _$_.template(` `, 1, 1); var root_31 = _$_.template(`<div class="mixed-collection-split"><!></div>`, 0); var root_32 = _$_.template(`<span class="primitive-tail"> ok</span>`, 0); var root_33 = _$_.template(` `, 1, 1); var root_34 = _$_.template(`<div class="mixed-collection-primitive"><!></div>`, 0); var root_35 = _$_.template(`<span class="primitive-tail"> ok</span>`, 0); var root_36 = _$_.template(` `, 1, 1); var root_37 = _$_.template(`<div class="mixed-collection-primitive"><!></div>`, 0); var root_38 = _$_.template(`<div class="dynamic-array-call"> </div>`, 0); var root_39 = _$_.template(`<div class="dynamic-array-track"> </div>`, 0); var root_40 = _$_.template(`<div class="dynamic-array-conditional"> </div>`, 0); var root_41 = _$_.template(`<div class="dynamic-array-logical"> </div>`, 0); var root_42 = _$_.template(`<section class="outer"><div class="inner">from tsrx</div></section>`, 0); var root_44 = _$_.template(`<!>`, 1, 1); var root_43 = _$_.template(`<!>`, 1, 1); var root_45 = _$_.template(`<div class="wrapper"><section class="native"><span class="nested-tsrx">inside nested tsrx</span></section></div>`, 0); var root_47 = _$_.template(`<!>`, 1, 1); var root_46 = _$_.template(`<!>`, 1, 1); var root_48 = _$_.template(`<span class="nested-tsx">inside nested tsx</span>`, 0); var root_49 = _$_.template(`<div class="native"> </div>`, 0); var root_51 = _$_.template(`<!>`, 1, 1); var root_50 = _$_.template(`<!>`, 1, 1); var root_52 = _$_.template(`<div class="text-prop"><!></div>`, 0); var root_54 = _$_.template(`<!><button class="show-text">Show</button>`, 1, 2); var root_53 = _$_.template(`<!>`, 1, 1); var root_56 = _$_.template(`<h1 class="sr-only">heading</h1><p class="subtitle">first paragraph</p><p class="subtitle">second paragraph</p>`, 1, 3); var root_55 = _$_.template(`<!>`, 1, 1); var root_58 = _$_.template(`<!><span class="sibling1"> </span><span class="sibling2"> </span>`, 1, 3); var root_57 = _$_.template(`<!>`, 1, 1); var root_60 = _$_.template(`<h1 class="sr-only">Ripple</h1><img src="/images/logo.png" alt="Logo" class="logo"><p class="subtitle">the elegant TypeScript UI framework</p>`, 1, 3); var root_59 = _$_.template(`<!>`, 1, 1); var root_62 = _$_.template(`<a href="/playground" class="playground-link">Playground</a>`, 0); var root_61 = _$_.template(`<div class="social-links"><a href="https://github.com" class="github-link">GitHub</a><a href="https://discord.com" class="discord-link">Discord</a><!></div>`, 0); var root_63 = _$_.template(`<main><div class="container"><!></div></main>`, 0); var root_64 = _$_.template(`<div class="content"><p>Some content here</p></div>`, 0); var root_65 = _$_.template(`<!><!><!><!>`, 1, 4); var root_66 = _$_.template(`<footer class="last-child">I am the last child</footer>`, 0); var root_67 = _$_.template(`<div class="wrapper"><h1>Header</h1><p>Some content</p><!></div>`, 0); var root_68 = _$_.template(`<div class="inner"><span>Inner text</span><!></div>`, 0); var root_69 = _$_.template(`<section class="outer"><h2>Section title</h2><!></section>`, 0); import { track } from 'ripple'; export function StaticText() { return _$_.tsrx_element((__anchor, __block) => { var div = root(); _$_.append(__anchor, div); }); } export function MultipleElements() { return _$_.tsrx_element((__anchor, __block) => { var fragment = root_1(); var node = _$_.first_child_frag(fragment); _$_.expression(node, () => _$_.tsrx_element((__anchor, __block) => { var fragment_1 = root_2(); _$_.next(2); _$_.append(__anchor, fragment_1, true); })); _$_.append(__anchor, fragment); }); } export function NestedElements() { return _$_.tsrx_element((__anchor, __block) => { var div_1 = root_3(); _$_.append(__anchor, div_1); }); } export function WithAttributes() { return _$_.tsrx_element((__anchor, __block) => { var fragment_2 = root_4(); var node_1 = _$_.first_child_frag(fragment_2); _$_.expression(node_1, () => _$_.tsrx_element((__anchor, __block) => { var fragment_3 = root_5(); _$_.next(); _$_.append(__anchor, fragment_3, true); })); _$_.append(__anchor, fragment_2); }); } export function ChildComponent() { return _$_.tsrx_element((__anchor, __block) => { var span = root_6(); _$_.append(__anchor, span); }); } export function ParentWithChild() { return _$_.tsrx_element((__anchor, __block) => { var div_2 = root_7(); { var append_anchor = _$_.append_into(div_2); _$_.render_component(ChildComponent, append_anchor, {}); _$_.pop(div_2); } _$_.append(__anchor, div_2); }); } export function FirstSibling() { return _$_.tsrx_element((__anchor, __block) => { var div_3 = root_8(); _$_.append(__anchor, div_3); }); } export function SecondSibling() { return _$_.tsrx_element((__anchor, __block) => { var div_4 = root_9(); _$_.append(__anchor, div_4); }); } export function SiblingComponents() { return _$_.tsrx_element((__anchor, __block) => { var fragment_4 = root_10(); var node_4 = _$_.first_child_frag(fragment_4); _$_.expression(node_4, () => _$_.tsrx_element((__anchor, __block) => { var fragment_5 = root_11(); var node_2 = _$_.first_child_frag(fragment_5); _$_.render_component(FirstSibling, node_2, {}); var node_3 = _$_.sibling(node_2); _$_.render_component(SecondSibling, node_3, {}); _$_.append(__anchor, fragment_5); })); _$_.append(__anchor, fragment_4); }); } export function Greeting(props) { return _$_.tsrx_element((__anchor, __block) => { var div_5 = root_12(); { var expression = _$_.child(div_5, true); _$_.pop(div_5); } _$_.render(() => { _$_.set_text(expression, 'Hello ' + _$_.with_scope(__block, () => String(props.name ?? ''))); }); _$_.append(__anchor, div_5); }); } export function WithGreeting() { return _$_.tsrx_element((__anchor, __block) => { _$_.render_component(Greeting, __anchor, { name: "World" }); }); } export function ExpressionContent() { return _$_.tsrx_element((__anchor, __block) => { const value = 42; const label = 'computed'; var fragment_6 = root_13(); var node_5 = _$_.first_child_frag(fragment_6); _$_.expression(node_5, () => _$_.tsrx_element((__anchor, __block) => { var fragment_7 = root_14(); var div_6 = _$_.first_child_frag(fragment_7); { var expression_1 = _$_.child(div_6); _$_.expression(expression_1, () => value); _$_.pop(div_6); } var span_1 = _$_.sibling(div_6); { var expression_2 = _$_.child(span_1); _$_.expression(expression_2, () => _$_.with_scope(__block, () => label.toUpperCase())); _$_.pop(span_1); } _$_.next(); _$_.append(__anchor, fragment_7, true); })); _$_.append(__anchor, fragment_6); }); } function NestedHelperItem({ item }) { return _$_.tsrx_element((__anchor, __block) => { var div_7 = root_15(); { var expression_3 = _$_.child(div_7); _$_.expression(expression_3, () => item); _$_.pop(div_7); } _$_.append(__anchor, div_7); }); } function NestedTsxTsrxFragment({ label }) { return _$_.tsrx_element((__anchor, __block) => { var fragment_8 = root_16(); var node_7 = _$_.first_child_frag(fragment_8); _$_.expression(node_7, () => _$_.tsrx_element((__anchor, __block) => { var fragment_9 = root_17(); var span_2 = _$_.first_child_frag(fragment_9); { var expression_4 = _$_.child(span_2, true); expression_4.nodeValue = label; _$_.pop(span_2); } var node_6 = _$_.sibling(span_2); _$_.for( node_6, () => [1, 2, 3, 4], (__anchor, item) => { _$_.render_component(NestedHelperItem, __anchor, { item }); }, 0 ); _$_.append(__anchor, fragment_9); })); _$_.append(__anchor, fragment_8); }); } export function NestedTsxTsrxExpressionValues() { return _$_.tsrx_element((__anchor, __block) => { var div_8 = root_18(); { var node_8 = _$_.child(div_8); _$_.for( node_8, () => [1, 2, 3], (__anchor, item) => { var div_9 = root_19(); { var expression_5 = _$_.child(div_9); _$_.expression(expression_5, () => item); _$_.pop(div_9); } _$_.append(__anchor, div_9); }, 0 ); var node_9 = _$_.sibling(node_8); _$_.render_component(NestedTsxTsrxFragment, node_9, { label: "from helper" }); _$_.pop(div_8); } _$_.append(__anchor, div_8); }); } export function MixedTsrxCollectionText() { return _$_.tsrx_element((__anchor, __block) => { const content = _$_.tsrx_element((__anchor, __block) => { var fragment_10 = root_22(); var expression_6 = _$_.first_child_frag(fragment_10); _$_.expression(expression_6, () => [ 'alpha ', _$_.tsrx_element((__anchor, __block) => { var strong = root_20(); _$_.append(__anchor, strong); }), ' gamma ', [ 'delta ', _$_.tsrx_element((__anchor, __block) => { var em = root_21(); _$_.append(__anchor, em); }), ' zeta' ] ]); _$_.append(__anchor, fragment_10); }); var div_10 = root_23(); { var expression_7 = _$_.child(div_10); _$_.expression(expression_7, () => content); _$_.pop(div_10); } _$_.append(__anchor, div_10); }); } export function MixedTsrxCollectionSplitServerText() { return _$_.tsrx_element((__anchor, __block) => { const content = _$_.tsrx_element((__anchor, __block) => { var fragment_11 = root_26(); var expression_8 = _$_.first_child_frag(fragment_11); _$_.expression(expression_8, () => [ 'alpha ', _$_.tsrx_element((__anchor, __block) => { var strong_1 = root_24(); _$_.append(__anchor, strong_1); }), ' gamma ', [ 'delta ', _$_.tsrx_element((__anchor, __block) => { var em_1 = root_25(); _$_.append(__anchor, em_1); }), ' zeta' ] ]); _$_.append(__anchor, fragment_11); }); var div_11 = root_27(); { var expression_9 = _$_.child(div_11); _$_.expression(expression_9, () => content); _$_.pop(div_11); } _$_.append(__anchor, div_11); }); } export function MixedTsrxCollectionSplitClientText() { return _$_.tsrx_element((__anchor, __block) => { const content = _$_.tsrx_element((__anchor, __block) => { var fragment_12 = root_30(); var expression_10 = _$_.first_child_frag(fragment_12); _$_.expression(expression_10, () => [ 'alpha ', _$_.tsrx_element((__anchor, __block) => { var strong_2 = root_28(); _$_.append(__anchor, strong_2); }), ' gamma ', [ 'changed ', _$_.tsrx_element((__anchor, __block) => { var em_2 = root_29(); _$_.append(__anchor, em_2); }), ' zeta' ] ]); _$_.append(__anchor, fragment_12); }); var div_12 = root_31(); { var expression_11 = _$_.child(div_12); _$_.expression(expression_11, () => content); _$_.pop(div_12); } _$_.append(__anchor, div_12); }); } export function MixedTsrxCollectionPrimitiveServerText() { return _$_.tsrx_element((__anchor, __block) => { const content = _$_.tsrx_element((__anchor, __block) => { var fragment_13 = root_33(); var expression_12 = _$_.first_child_frag(fragment_13); _$_.expression(expression_12, () => [ 'count: ', 1, ' / ', true, _$_.tsrx_element((__anchor, __block) => { var span_3 = root_32(); _$_.append(__anchor, span_3); }) ]); _$_.append(__anchor, fragment_13); }); var div_13 = root_34(); { var expression_13 = _$_.child(div_13); _$_.expression(expression_13, () => content); _$_.pop(div_13); } _$_.append(__anchor, div_13); }); } export function MixedTsrxCollectionPrimitiveClientText() { return _$_.tsrx_element((__anchor, __block) => { const content = _$_.tsrx_element((__anchor, __block) => { var fragment_14 = root_36(); var expression_14 = _$_.first_child_frag(fragment_14); _$_.expression(expression_14, () => [ 'count: ', 2, ' / ', false, _$_.tsrx_element((__anchor, __block) => { var span_4 = root_35(); _$_.append(__anchor, span_4); }) ]); _$_.append(__anchor, fragment_14); }); var div_14 = root_37(); { var expression_15 = _$_.child(div_14); _$_.expression(expression_15, () => content); _$_.pop(div_14); } _$_.append(__anchor, div_14); }); } function createPrimitiveItems() { return ['start:', ['one', 2], true, null, false, ':end']; } export function DynamicArrayFromCall() { return _$_.tsrx_element((__anchor, __block) => { const items = _$_.with_scope(__block, createPrimitiveItems); var div_15 = root_38(); { var expression_16 = _$_.child(div_15); _$_.expression(expression_16, () => items); _$_.pop(div_15); } _$_.append(__anchor, div_15); }); } export function DynamicArrayFromTrack() { return _$_.tsrx_element((__anchor, __block) => { let lazy = _$_.track(['start:', ['one', 2], true, null, false, ':end'], __block, 'b5de6402'); var div_16 = root_39(); { var expression_17 = _$_.child(div_16); _$_.expression(expression_17, () => lazy.value); _$_.pop(div_16); } _$_.append(__anchor, div_16); }); } export function DynamicArrayFromConditional() { return _$_.tsrx_element((__anchor, __block) => { const condition = true; const items = condition ? ['start:', ['one', 2], true, null, false, ':end'] : ['fallback']; var div_17 = root_40(); { var expression_18 = _$_.child(div_17); _$_.expression(expression_18, () => items); _$_.pop(div_17); } _$_.append(__anchor, div_17); }); } export function DynamicArrayFromLogical() { return _$_.tsrx_element((__anchor, __block) => { const condition = true; const items = condition && ['start:', ['one', 2], true, null, false, ':end']; var div_18 = root_41(); { var expression_19 = _$_.child(div_18); _$_.expression(expression_19, () => items); _$_.pop(div_18); } _$_.append(__anchor, div_18); }); } export function NestedTsrxInsideTopLevelTsxExpression() { return _$_.tsrx_element((__anchor, __block) => { const content = _$_.tsrx_element((__anchor, __block) => { var section = root_42(); _$_.append(__anchor, section); }); var fragment_15 = root_43(); var node_10 = _$_.first_child_frag(fragment_15); _$_.expression(node_10, () => _$_.tsrx_element((__anchor, __block) => { var fragment_16 = root_44(); var expression_20 = _$_.first_child_frag(fragment_16); _$_.expression(expression_20, () => content); _$_.append(__anchor, fragment_16); })); _$_.append(__anchor, fragment_15); }); } export function NestedTsrxElementsInsideTopLevelTsxValue() { return _$_.tsrx_element((__anchor, __block) => { const content = _$_.tsrx_element((__anchor, __block) => { var div_19 = root_45(); _$_.append(__anchor, div_19); }); var fragment_17 = root_46(); var node_11 = _$_.first_child_frag(fragment_17); _$_.expression(node_11, () => _$_.tsrx_element((__anchor, __block) => { var fragment_18 = root_47(); var expression_21 = _$_.first_child_frag(fragment_18); _$_.expression(expression_21, () => content); _$_.append(__anchor, fragment_18); })); _$_.append(__anchor, fragment_17); }); } export function TsxDeclaredBeforeTopLevelTsx() { return _$_.tsrx_element((__anchor, __block) => { const nested = _$_.tsrx_element((__anchor, __block) => { var span_5 = root_48(); _$_.append(__anchor, span_5); }); const content = _$_.tsrx_element((__anchor, __block) => { var div_20 = root_49(); { var expression_22 = _$_.child(div_20); _$_.expression(expression_22, () => nested); _$_.pop(div_20); } _$_.append(__anchor, div_20); }); var fragment_19 = root_50(); var node_12 = _$_.first_child_frag(fragment_19); _$_.expression(node_12, () => _$_.tsrx_element((__anchor, __block) => { var fragment_20 = root_51(); var expression_23 = _$_.first_child_frag(fragment_20); _$_.expression(expression_23, () => content); _$_.append(__anchor, fragment_20); })); _$_.append(__anchor, fragment_19); }); } function TextProp(__props) { return _$_.tsrx_element((__anchor, __block) => { var div_21 = root_52(); { var expression_24 = _$_.child(div_21); _$_.expression(expression_24, () => __props.children); _$_.pop(div_21); } _$_.append(__anchor, div_21); }); } export function TextPropWithToggle() { return _$_.tsrx_element((__anchor, __block) => { let lazy_1 = _$_.track(false, __block, '1ba81c3b'); var fragment_21 = root_53(); var node_14 = _$_.first_child_frag(fragment_21); _$_.expression(node_14, () => _$_.tsrx_element((__anchor, __block) => { var fragment_22 = root_54(); var node_13 = _$_.first_child_frag(fragment_22); _$_.render_component(TextProp, node_13, { get children() { return _$_.normalize_children(lazy_1.value ? 'hello' : ''); } }); var button = _$_.sibling(node_13); button.__click = () => _$_.set(lazy_1, true); _$_.append(__anchor, fragment_22); })); _$_.append(__anchor, fragment_21); }); } function StaticHeader() { return _$_.tsrx_element((__anchor, __block) => { var fragment_23 = root_55(); var node_15 = _$_.first_child_frag(fragment_23); _$_.expression(node_15, () => _$_.tsrx_element((__anchor, __block) => { var fragment_24 = root_56(); _$_.next(2); _$_.append(__anchor, fragment_24, true); })); _$_.append(__anchor, fragment_23); }); } export function StaticChildWithSiblings() { return _$_.tsrx_element((__anchor, __block) => { const foo = 'bar'; var fragment_25 = root_57(); var node_17 = _$_.first_child_frag(fragment_25); _$_.expression(node_17, () => _$_.tsrx_element((__anchor, __block) => { var fragment_26 = root_58(); var node_16 = _$_.first_child_frag(fragment_26); _$_.render_component(StaticHeader, node_16, {}); var span_6 = _$_.sibling(node_16); { var expression_25 = _$_.child(span_6, true); expression_25.nodeValue = foo; _$_.pop(span_6); } var span_7 = _$_.sibling(span_6); { var expression_26 = _$_.child(span_7, true); expression_26.nodeValue = foo; _$_.pop(span_7); } _$_.next(); _$_.append(__anchor, fragment_26, true); })); _$_.append(__anchor, fragment_25); }); } function Header() { return _$_.tsrx_element((__anchor, __block) => { var fragment_27 = root_59(); var node_18 = _$_.first_child_frag(fragment_27); _$_.expression(node_18, () => _$_.tsrx_element((__anchor, __block) => { var fragment_28 = root_60(); _$_.next(2); _$_.append(__anchor, fragment_28, true); })); _$_.append(__anchor, fragment_27); }); } function Actions({ playgroundVisible = false }) { return _$_.tsrx_element((__anchor, __block) => { var div_22 = root_61(); { var a_2 = _$_.child(div_22); var a_1 = _$_.sibling(a_2); var expression_27 = _$_.sibling(a_1); _$_.expression(expression_27, () => playgroundVisible ? _$_.tsrx_element((__anchor, __block) => { var a = root_62(); _$_.append(__anchor, a); }) : null); _$_.pop(div_22); } _$_.append(__anchor, div_22); }); } function Layout({ children }) { return _$_.tsrx_element((__anchor, __block) => { var main = root_63(); { var div_23 = _$_.child(main); { var expression_28 = _$_.child(div_23); _$_.expression(expression_28, () => children); _$_.pop(div_23); } } _$_.append(__anchor, main); }); } function Content() { return _$_.tsrx_element((__anchor, __block) => { var div_24 = root_64(); _$_.append(__anchor, div_24); }); } export function WebsiteIndex() { return _$_.tsrx_element((__anchor, __block) => { _$_.render_component(Layout, __anchor, { children: _$_.tsrx_element((__anchor, __block) => { var fragment_29 = root_65(); var node_19 = _$_.first_child_frag(fragment_29); _$_.render_component(Header, node_19, {}); var node_20 = _$_.sibling(node_19); _$_.render_component(Actions, node_20, { playgroundVisible: true }); var node_21 = _$_.sibling(node_20); _$_.render_component(Content, node_21, {}); var node_22 = _$_.sibling(node_21); _$_.render_component(Actions, node_22, { playgroundVisible: false }); _$_.append(__anchor, fragment_29); }) }); }); } function LastChild() { return _$_.tsrx_element((__anchor, __block) => { var footer = root_66(); _$_.append(__anchor, footer); }); } export function ComponentAsLastSibling() { return _$_.tsrx_element((__anchor, __block) => { var div_25 = root_67(); { var h1 = _$_.child(div_25); var p = _$_.sibling(h1); var node_23 = _$_.sibling(p); _$_.render_component(LastChild, node_23, {}); _$_.pop(div_25); } _$_.append(__anchor, div_25); }); } function InnerContent() { return _$_.tsrx_element((__anchor, __block) => { var div_26 = root_68(); { var span_8 = _$_.child(div_26); var node_24 = _$_.sibling(span_8); _$_.render_component(LastChild, node_24, {}); _$_.pop(div_26); } _$_.append(__anchor, div_26); }); } export function NestedComponentAsLastSibling() { return _$_.tsrx_element((__anchor, __block) => { var section_1 = root_69(); { var h2 = _$_.child(section_1); var node_25 = _$_.sibling(h2); _$_.render_component(InnerContent, node_25, {}); _$_.pop(section_1); } _$_.append(__anchor, section_1); }); } _$_.delegate(['click']);