{'title:' + data}

import { track, trackAsync } from 'ripple'; interface Control { promise: Promise; resolve: (value: string) => void; reject: (reason?: unknown) => void; } function make(): Control { let resolve: (value: string) => void = () => {}; let reject: (reason?: unknown) => void = () => {}; const promise = new Promise((res, rej) => { resolve = res; reject = rej; }); return { promise, resolve, reject }; } export const controls: Record = {}; export function resetControls() { controls.basic = make(); controls.catchOnly = make(); controls.rejects = make(); controls.noCatch = make(); controls.outer = make(); controls.inner = make(); controls.rootDirect = make(); controls.head = make(); } resetControls(); function BasicContent() @{ let &[data] = trackAsync(() => controls.basic.promise); let &[count] = track(0);

{data + ':' + count}

} export function StreamPending() @{ <> {'before'} @try { <> } @pending {

{'loading...'}

} {'sibling-after'} } function CatchOnlyContent() @{ let &[data] = trackAsync(() => controls.catchOnly.promise);

{data}

} export function StreamCatchOnly() @{ <> {'before'} @try { } @catch (e: Error) { {e.message} } } function RejectContent() @{ let &[data] = trackAsync(() => controls.rejects.promise);

{data}

} export function StreamRejects() @{ @try { } @pending {

{'loading...'}

} @catch (e: Error) { {e.message} } } function NoCatchContent() @{ let &[data] = trackAsync(() => controls.noCatch.promise);

{data}

} export function StreamNoCatch() @{ @try { } @pending {

{'loading...'}

} } export function RootCatch({ error, reset }: { error: Error; reset: () => void }) @{

{error.message}

} export function RootPending() @{

{'root-loading'}

} function HeadContent() @{ let &[data] = trackAsync(() => controls.head.promise); <> @if (data) { <> {'title:' + data}

{data}

} } export function StreamHead() @{ @try { } @pending {

{'loading...'}

} } export function StreamRootDirect() @{ let &[data] = trackAsync(() => controls.rootDirect.promise);

{data}

} function OuterContent() @{ let &[data] = trackAsync(() => controls.outer.promise);

{data}

} function InnerContent() @{ let &[data] = trackAsync(() => controls.inner.promise);

{data}

} export function StreamNested() @{ @try { <> @try { } @pending {

{'inner-loading'}

} } @pending {

{'outer-loading'}

} }