ripple 0.3.68 → 0.3.69

package/tests/hydration/components/html.tsrx

@@ -1,95 +1,121 @@
-import { track } from 'ripple';
+import { Fragment, track } from 'ripple';
 
-export component StaticHtml() {
-	const html = '<p><strong>Bold</strong> text</p>';
-	<div>{html html}</div>
+export function StaticHtml() {
+	return <>
+		const html = '<p><strong>Bold</strong> text</p>';
+		<div innerHTML={html} />
+	</>;
 }
 
-export component DynamicHtml() {
-	const content = '<p>Dynamic <span>HTML</span> content</p>';
-	<div>{html content}</div>
+export function DynamicHtml() {
+	return <>
+		const content = '<p>Dynamic <span>HTML</span> content</p>';
+		<div innerHTML={content} />
+	</>;
 }
 
-export component EmptyHtml() {
-	const html = '';
-	<div>{html html}</div>
+export function EmptyHtml() {
+	return <>
+		const html = '';
+		<div innerHTML={html} />
+	</>;
 }
 
-export component ComplexHtml() {
-	const html = '<div class="nested"><span>Nested <em>content</em></span></div>';
-	<section>{html html}</section>
+export function ComplexHtml() {
+	return <>
+		const html = '<div class="nested"><span>Nested <em>content</em></span></div>';
+		<section innerHTML={html} />
+	</>;
 }
 
-export component MultipleHtml() {
-	const html1 = '<p>First paragraph</p>';
-	const html2 = '<p>Second paragraph</p>';
-	<div>
-		{html html1}
-		{html html2}
-	</div>
-}
-
-export component HtmlWithReactivity() {
-	<div>
-		{html '<p>Count: 0</p>'}
-		<button>{'Increment'}</button>
-	</div>
+export function MultipleHtml() {
+	return <>
+		const html1 = '<p>First paragraph</p>';
+		const html2 = '<p>Second paragraph</p>';
+		<div>
+			<Fragment innerHTML={html1} />
+			<Fragment innerHTML={html2} />
+		</div>
+	</>;
 }
 
-export component HtmlWrapper({ children }: { children: any }) {
-	<div class="wrapper">
-		<div class="inner">{children}</div>
-	</div>
+export function HtmlWithReactivity() {
+	return <>
+		<div>
+			<Fragment innerHTML="<p>Count: 0</p>" />
+			<button>{'Increment'}</button>
+		</div>
+	</>;
 }
 
-export component HtmlInChildren() {
-	const content = '<p><strong>Bold</strong> text</p>';
-	<HtmlWrapper>
-		<div class="vp-doc">{html content}</div>
-	</HtmlWrapper>
+export function HtmlWrapper({ children }: { children: any }) {
+	return <>
+		<div class="wrapper">
+			<div class="inner">{children}</div>
+		</div>
+	</>;
 }
 
-export component HtmlInChildrenWithSiblings() {
-	const content = '<p>Dynamic content</p>';
-	<HtmlWrapper>
-		<h1>{'Title'}</h1>
-		<div class="content">{html content}</div>
-	</HtmlWrapper>
+export function HtmlInChildren() {
+	return <>
+		const content = '<p><strong>Bold</strong> text</p>';
+		<HtmlWrapper>
+			<div class="vp-doc" innerHTML={content} />
+		</HtmlWrapper>
+	</>;
 }
 
-export component MultipleHtmlInChildren() {
-	const html1 = '<p>First</p>';
-	const html2 = '<p>Second</p>';
-	<HtmlWrapper>
-		<div class="doc">
-			{html html1}
-			{html html2}
-		</div>
-	</HtmlWrapper>
+export function HtmlInChildrenWithSiblings() {
+	return <>
+		const content = '<p>Dynamic content</p>';
+		<HtmlWrapper>
+			<h1>{'Title'}</h1>
+			<div class="content" innerHTML={content} />
+		</HtmlWrapper>
+	</>;
+}
+
+export function MultipleHtmlInChildren() {
+	return <>
+		const html1 = '<p>First</p>';
+		const html2 = '<p>Second</p>';
+		<HtmlWrapper>
+			<div class="doc">
+				<Fragment innerHTML={html1} />
+				<Fragment innerHTML={html2} />
+			</div>
+		</HtmlWrapper>
+	</>;
 }
 
-export component HtmlWithComments() {
-	const content = '<p>Before comment</p><!-- TODO: Elaborate --><p>After comment</p>';
-	<div>{html content}</div>
+export function HtmlWithComments() {
+	return <>
+		const content = '<p>Before comment</p><!-- TODO: Elaborate --><p>After comment</p>';
+		<div innerHTML={content} />
+	</>;
 }
 
-export component HtmlWithEmptyComment() {
-	const content = '<p>Before</p><!----><p>After</p>';
-	<div>{html content}</div>
+export function HtmlWithEmptyComment() {
+	return <>
+		const content = '<p>Before</p><!----><p>After</p>';
+		<div innerHTML={content} />
+	</>;
 }
 
-export component HtmlWithCommentsInChildren() {
-	const content = '<h2 id="intro">Introduction</h2><p>Some text</p><!-- TODO --><p>More text</p>';
-	<HtmlWrapper>
-		<div class="vp-doc">{html content}</div>
-	</HtmlWrapper>
+export function HtmlWithCommentsInChildren() {
+	return <>
+		const content = '<h2 id="intro">Introduction</h2><p>Some text</p><!-- TODO --><p>More text</p>';
+		<HtmlWrapper>
+			<div class="vp-doc" innerHTML={content} />
+		</HtmlWrapper>
+	</>;
 }
 
-component DocFooter() {
-	<footer class="doc-footer">{'Footer content'}</footer>
+function DocFooter() {
+	return <><footer class="doc-footer">{'Footer content'}</footer></>;
 }
 
-export component DocLayout({
+export function DocLayout({
 	children,
 	editPath = '',
 	nextLink = null,
@@ -100,106 +126,122 @@ export component DocLayout({
 	nextLink?: { href: string; text: string } | null;
 	toc?: { href: string; text: string }[];
 }) {
-	<div class="layout">
-		<div class="content-container">
-			<article>
-				<div>{children}</div>
-			</article>
-			if (editPath) {
-				<div class="edit-link">
-					<a href={`https://github.com/edit/${editPath}`}>{'Edit'}</a>
-				</div>
-			}
-			if (nextLink) {
-				<nav class="prev-next">
-					<a href={nextLink.href}>{nextLink.text}</a>
-				</nav>
-			}
-			<DocFooter />
+	return <>
+		<div class="layout">
+			<div class="content-container">
+				<article>
+					<div>{children}</div>
+				</article>
+				if (editPath) {
+					<div class="edit-link">
+						<a href={`https://github.com/edit/${editPath}`}>{'Edit'}</a>
+					</div>
+				}
+				if (nextLink) {
+					<nav class="prev-next">
+						<a href={nextLink.href}>{nextLink.text}</a>
+					</nav>
+				}
+				<DocFooter />
+			</div>
+			<aside>
+				if (toc.length > 0) {
+					<div class="toc">
+						<ul>
+							for (const item of toc) {
+								<li>
+									<a href={item.href}>{item.text}</a>
+								</li>
+							}
+						</ul>
+					</div>
+				}
+			</aside>
 		</div>
-		<aside>
-			if (toc.length > 0) {
-				<div class="toc">
-					<ul>
-						for (const item of toc) {
-							<li>
-								<a href={item.href}>{item.text}</a>
-							</li>
-						}
-					</ul>
-				</div>
-			}
-		</aside>
-	</div>
-}
-
-export component HtmlWithServerData() {
-	const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
-	<DocLayout
-		editPath="docs/introduction.md"
-		nextLink={{ href: '/docs/quick-start', text: 'Quick Start' }}
-		toc={[
-			{ href: '#intro', text: 'Introduction' },
-			{ href: '#features', text: 'Features' },
-		]}
-	>
-		<div class="vp-doc">{html content}</div>
-	</DocLayout>
-}
-
-export component HtmlWithClientDefaults() {
-	const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
-	<DocLayout>
-		<div class="vp-doc">{html content}</div>
-	</DocLayout>
-}
-
-export component HtmlWithUndefinedContent() {
-	const content: string | undefined = undefined;
-	<DocLayout>
-		<div class="vp-doc">{html content}</div>
-	</DocLayout>
-}
-
-component DynamicHeading({ level, children }: { level: number; children: any }) {
-	switch (level) {
-		case 1: {
-			<h1 class="heading">{children}</h1>
-		}
-		case 2: {
-			<h2 class="heading">{children}</h2>
+	</>;
+}
+
+export function HtmlWithServerData() {
+	return <>
+		const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
+		<DocLayout
+			editPath="docs/introduction.md"
+			nextLink={{ href: '/docs/quick-start', text: 'Quick Start' }}
+			toc={[
+				{ href: '#intro', text: 'Introduction' },
+				{ href: '#features', text: 'Features' },
+			]}
+		>
+			<div class="vp-doc" innerHTML={content} />
+		</DocLayout>
+	</>;
+}
+
+export function HtmlWithClientDefaults() {
+	return <>
+		const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
+		<DocLayout>
+			<div class="vp-doc" innerHTML={content} />
+		</DocLayout>
+	</>;
+}
+
+export function HtmlWithUndefinedContent() {
+	return <>
+		const content: string | undefined = undefined;
+		<DocLayout>
+			<div class="vp-doc" innerHTML={content} />
+		</DocLayout>
+	</>;
+}
+
+function DynamicHeading({ level, children }: { level: number; children: any }) {
+	return <>
+		switch (level) {
+			case 1:
+				<h1 class="heading">{children}</h1>
+				break;
+			case 2:
+				<h2 class="heading">{children}</h2>
+				break;
 		}
-	}
+	</>;
 }
 
-component CodeBlock({ code }: { code: string }) {
-	const highlighted = `<pre class="shiki"><code>${code}</code></pre>`;
-	<div class="code-block">
-		<div class="header">
-			<button>{'Copy'}</button>
-			<span class="lang">{'js'}</span>
+function CodeBlock({ code }: { code: string }) {
+	return <>
+		const highlighted = `<pre class="shiki"><code>${code}</code></pre>`;
+		<div class="code-block">
+			<div class="header">
+				<button>{'Copy'}</button>
+				<span class="lang">{'js'}</span>
+			</div>
+			<div class="content" innerHTML={highlighted} />
 		</div>
-		<div class="content">{html highlighted}</div>
-	</div>
+	</>;
 }
 
-component ContentWrapper({ children }: { children: any }) {
-	<div class="wrapper">
-		<div class="inner">{children}</div>
-	</div>
+function ContentWrapper({ children }: { children: any }) {
+	return <>
+		<div class="wrapper">
+			<div class="inner">{children}</div>
+		</div>
+	</>;
 }
 
-export component HtmlAfterSwitchInChildren() {
-	<ContentWrapper>
-		<DynamicHeading level={1}>{'Title'}</DynamicHeading>
-		<p>{'First paragraph'}</p>
-		<p>{'Second paragraph'}</p>
-		<CodeBlock code="const x = 1;" />
-		<p>{'After code'}</p>
-	</ContentWrapper>
+export function HtmlAfterSwitchInChildren() {
+	return <>
+		<ContentWrapper>
+			<DynamicHeading level={1}>{'Title'}</DynamicHeading>
+			<p>{'First paragraph'}</p>
+			<p>{'Second paragraph'}</p>
+			<CodeBlock code="const x = 1;" />
+			<p>{'After code'}</p>
+		</ContentWrapper>
+	</>;
 }
 
-component NavItem({
+function NavItem({
 	href,
 	text: label,
 	active = false,
@@ -208,156 +250,176 @@ component NavItem({
 	text: string;
 	active?: boolean;
 }) {
-	<div class={`nav-item${active ? ' active' : ''}`}>
-		if (active) {
-			<div class="indicator" />
-		}
-		<a {href}>
-			<span>{label}</span>
-		</a>
-	</div>
-}
-
-component SidebarSection({ title, children }: { title: string; children: any }) {
-	let &[expanded] = track(true);
-	<section class="sidebar-section">
-		<div class="section-header">
-			<h2>{title}</h2>
-			<button onClick={() => (expanded = !expanded)}>{'Toggle'}</button>
+	return <>
+		<div class={`nav-item${active ? ' active' : ''}`}>
+			if (active) {
+				<div class="indicator" />
+			}
+			<a {href}>
+				<span>{label}</span>
+			</a>
 		</div>
-		if (expanded) {
-			<div class="section-items">{children}</div>
-		}
-	</section>
+	</>;
 }
 
-component SideNav({ currentPath }: { currentPath: string }) {
-	<aside class="sidebar">
-		<nav>
-			<div class="group">
-				<SidebarSection title="Getting Started">
-					<NavItem href="/intro" text="Introduction" active={currentPath === '/intro'} />
-					<NavItem href="/start" text="Quick Start" active={currentPath === '/start'} />
-				</SidebarSection>
+function SidebarSection({ title, children }: { title: string; children: any }) {
+	return <>
+		let &[expanded] = track(true);
+		<section class="sidebar-section">
+			<div class="section-header">
+				<h2>{title}</h2>
+				<button onClick={() => (expanded = !expanded)}>{'Toggle'}</button>
 			</div>
-			<div class="group">
-				<SidebarSection title="Guide">
-					<NavItem href="/guide/app" text="Application" active={currentPath === '/guide/app'} />
-					<NavItem href="/guide/syntax" text="Syntax" active={currentPath === '/guide/syntax'} />
-				</SidebarSection>
-			</div>
-		</nav>
-	</aside>
-}
-
-component PageHeader() {
-	<header class="page-header">
-		<div class="logo">{'MyApp'}</div>
-	</header>
-}
-
-export component LayoutWithSidebarAndMain() {
-	<div class="layout">
-		<PageHeader />
-		<div class="content-wrapper">
-			<SideNav currentPath="/intro" />
-			<main class="main-content">
-				<div class="article">
-					<div>
-						<h1>{'Introduction'}</h1>
-						<p>{'Welcome to the docs.'}</p>
-					</div>
+			if (expanded) {
+				<div class="section-items">{children}</div>
+			}
+		</section>
+	</>;
+}
+
+function SideNav({ currentPath }: { currentPath: string }) {
+	return <>
+		<aside class="sidebar">
+			<nav>
+				<div class="group">
+					<SidebarSection title="Getting Started">
+						<NavItem href="/intro" text="Introduction" active={currentPath === '/intro'} />
+						<NavItem href="/start" text="Quick Start" active={currentPath === '/start'} />
+					</SidebarSection>
 				</div>
-				if (true) {
-					<div class="edit-link">
-						<a href="/edit">{'Edit'}</a>
+				<div class="group">
+					<SidebarSection title="Guide">
+						<NavItem href="/guide/app" text="Application" active={currentPath === '/guide/app'} />
+						<NavItem href="/guide/syntax" text="Syntax" active={currentPath === '/guide/syntax'} />
+					</SidebarSection>
+				</div>
+			</nav>
+		</aside>
+	</>;
+}
+
+function PageHeader() {
+	return <>
+		<header class="page-header">
+			<div class="logo">{'MyApp'}</div>
+		</header>
+	</>;
+}
+
+export function LayoutWithSidebarAndMain() {
+	return <>
+		<div class="layout">
+			<PageHeader />
+			<div class="content-wrapper">
+				<SideNav currentPath="/intro" />
+				<main class="main-content">
+					<div class="article">
+						<div>
+							<h1>{'Introduction'}</h1>
+							<p>{'Welcome to the docs.'}</p>
+						</div>
 					</div>
-				}
-				<PageHeader />
-			</main>
+					if (true) {
+						<div class="edit-link">
+							<a href="/edit">{'Edit'}</a>
+						</div>
+					}
+					<PageHeader />
+				</main>
+			</div>
 		</div>
-	</div>
+	</>;
 }
 
-component ArticleWrapper({ children }: { children: any }) {
-	<article class="doc-content">
-		<div>{children}</div>
-	</article>
+function ArticleWrapper({ children }: { children: any }) {
+	return <>
+		<article class="doc-content">
+			<div>{children}</div>
+		</article>
+	</>;
 }
 
-component SimpleFooter() {
-	<footer class="doc-footer">{'Footer'}</footer>
+function SimpleFooter() {
+	return <><footer class="doc-footer">{'Footer'}</footer></>;
 }
 
-export component ArticleWithChildrenThenSibling() {
-	<div class="content-container">
-		<ArticleWrapper>
-			<h1>{'Title'}</h1>
-			<p>{'Content goes here.'}</p>
-		</ArticleWrapper>
-		if (true) {
-			<div class="edit-link">
-				<a href="/edit">{'Edit'}</a>
-			</div>
-		}
-		if (true) {
-			<nav class="prev-next">
-				<a href="/prev">{'Previous'}</a>
-			</nav>
-		}
-		<SimpleFooter />
-	</div>
-}
-
-export component ArticleWithHtmlChildThenSibling() {
-	const htmlContent = '<pre><code>const x = 1;</code></pre>';
-	<div class="content-container">
-		<ArticleWrapper>
-			<div class="doc-content">{html htmlContent}</div>
-		</ArticleWrapper>
-		if (true) {
-			<div class="edit-link">
-				<a href="/edit">{'Edit'}</a>
-			</div>
-		}
-		<SimpleFooter />
-	</div>
+export function ArticleWithChildrenThenSibling() {
+	return <>
+		<div class="content-container">
+			<ArticleWrapper>
+				<h1>{'Title'}</h1>
+				<p>{'Content goes here.'}</p>
+			</ArticleWrapper>
+			if (true) {
+				<div class="edit-link">
+					<a href="/edit">{'Edit'}</a>
+				</div>
+			}
+			if (true) {
+				<nav class="prev-next">
+					<a href="/prev">{'Previous'}</a>
+				</nav>
+			}
+			<SimpleFooter />
+		</div>
+	</>;
 }
 
-component InlineArticleLayout({ children }: { children: any }) {
-	<div class="content-container">
-		<article class="doc-content">
-			<div>{children}</div>
-		</article>
-		if (true) {
-			<div class="edit-link">
-				<a href="/edit">{'Edit'}</a>
-			</div>
-		}
-		<SimpleFooter />
-	</div>
+export function ArticleWithHtmlChildThenSibling() {
+	return <>
+		const htmlContent = '<pre><code>const x = 1;</code></pre>';
+		<div class="content-container">
+			<ArticleWrapper>
+				<div class="doc-content" innerHTML={htmlContent} />
+			</ArticleWrapper>
+			if (true) {
+				<div class="edit-link">
+					<a href="/edit">{'Edit'}</a>
+				</div>
+			}
+			<SimpleFooter />
+		</div>
+	</>;
 }
 
-export component InlineArticleWithHtmlChild() {
-	const htmlContent = '<pre><code>const x = 1;</code></pre>';
-	<InlineArticleLayout>
-		<div class="doc-content">{html htmlContent}</div>
-	</InlineArticleLayout>
+function InlineArticleLayout({ children }: { children: any }) {
+	return <>
+		<div class="content-container">
+			<article class="doc-content">
+				<div>{children}</div>
+			</article>
+			if (true) {
+				<div class="edit-link">
+					<a href="/edit">{'Edit'}</a>
+				</div>
+			}
+			<SimpleFooter />
+		</div>
+	</>;
 }
 
-component HeaderStub() {
-	<header class="header">{'Header'}</header>
+export function InlineArticleWithHtmlChild() {
+	return <>
+		const htmlContent = '<pre><code>const x = 1;</code></pre>';
+		<InlineArticleLayout>
+			<div class="doc-content" innerHTML={htmlContent} />
+		</InlineArticleLayout>
+	</>;
 }
 
-component SidebarStub() {
-	<aside class="sidebar">{'Sidebar'}</aside>
+function HeaderStub() {
+	return <><header class="header">{'Header'}</header></>;
 }
 
-component FooterStub() {
-	<footer class="footer">{'Footer'}</footer>
+function SidebarStub() {
+	return <><aside class="sidebar">{'Sidebar'}</aside></>;
 }
 
-component DocsLayoutInner({
+function FooterStub() {
+	return <><footer class="footer">{'Footer'}</footer></>;
+}
+
+function DocsLayoutInner({
 	children,
 	editPath = '',
 	nextLink = null,
@@ -366,51 +428,57 @@ component DocsLayoutInner({
 	editPath?: string;
 	nextLink?: { href: string; text: string } | null;
 }) {
-	<div class="layout">
-		<HeaderStub />
-		<div class="docs-wrapper">
-			<SidebarStub />
-			<main class="docs-main">
-				<div class="docs-container">
-					<div class="content">
-						<div class="content-container">
-							<article class="doc-content">
-								<div>{children}</div>
-							</article>
-							if (editPath) {
-								<div class="edit-link">
-									<a href="/edit">{'Edit on GitHub'}</a>
-								</div>
-							}
-							if (nextLink) {
-								<nav class="prev-next">
-									<a href={nextLink.href}>{nextLink.text}</a>
-								</nav>
-							}
-							<FooterStub />
+	return <>
+		<div class="layout">
+			<HeaderStub />
+			<div class="docs-wrapper">
+				<SidebarStub />
+				<main class="docs-main">
+					<div class="docs-container">
+						<div class="content">
+							<div class="content-container">
+								<article class="doc-content">
+									<div>{children}</div>
+								</article>
+								if (editPath) {
+									<div class="edit-link">
+										<a href="/edit">{'Edit on GitHub'}</a>
+									</div>
+								}
+								if (nextLink) {
+									<nav class="prev-next">
+										<a href={nextLink.href}>{nextLink.text}</a>
+									</nav>
+								}
+								<FooterStub />
+							</div>
 						</div>
 					</div>
-				</div>
-			</main>
+				</main>
+			</div>
 		</div>
-	</div>
+	</>;
 }
 
-export component DocsLayoutWithData() {
-	const htmlContent = '<h1>Title</h1><p>Content</p>';
-	<DocsLayoutInner editPath="docs/styling.md" nextLink={{ href: '/next', text: 'Next' }}>
-		<div class="doc-content">{html htmlContent}</div>
-	</DocsLayoutInner>
+export function DocsLayoutWithData() {
+	return <>
+		const htmlContent = '<h1>Title</h1><p>Content</p>';
+		<DocsLayoutInner editPath="docs/styling.md" nextLink={{ href: '/next', text: 'Next' }}>
+			<div class="doc-content" innerHTML={htmlContent} />
+		</DocsLayoutInner>
+	</>;
 }
 
-export component DocsLayoutWithoutData() {
-	const htmlContent: string | undefined = undefined;
-	<DocsLayoutInner>
-		<div class="doc-content">{html htmlContent}</div>
-	</DocsLayoutInner>
+export function DocsLayoutWithoutData() {
+	return <>
+		const htmlContent: string | undefined = undefined;
+		<DocsLayoutInner>
+			<div class="doc-content" innerHTML={htmlContent} />
+		</DocsLayoutInner>
+	</>;
 }
 
-component DocsLayoutExact({
+function DocsLayoutExact({
 	children,
 	editPath = '',
 	prevLink = null,
@@ -423,136 +491,150 @@ component DocsLayoutExact({
 	nextLink?: { href: string; text: string } | null;
 	toc?: { href: string; text: string }[];
 }) {
-	<div class="layout">
-		<HeaderStub />
-		<div class="docs-wrapper">
-			<SidebarStub />
-			<main class="docs-main">
-				<div class="docs-container">
-					<div class="content">
-						<div class="content-container">
-							<article class="doc-content">
-								<div>{children}</div>
-							</article>
-							if (editPath) {
-								<div class="edit-link">
-									<a href={`/edit/${editPath}`}>{'Edit on GitHub'}</a>
+	return <>
+		<div class="layout">
+			<HeaderStub />
+			<div class="docs-wrapper">
+				<SidebarStub />
+				<main class="docs-main">
+					<div class="docs-container">
+						<div class="content">
+							<div class="content-container">
+								<article class="doc-content">
+									<div>{children}</div>
+								</article>
+								if (editPath) {
+									<div class="edit-link">
+										<a href={`/edit/${editPath}`}>{'Edit on GitHub'}</a>
+									</div>
+								}
+								if (prevLink || nextLink) {
+									<nav class="prev-next">
+										if (prevLink) {
+											<a href={prevLink.href} class="pager prev">
+												<span class="title">{prevLink.text}</span>
+											</a>
+										} else {
+											<span />
+										}
+										if (nextLink) {
+											<a href={nextLink.href} class="pager next">
+												<span class="title">{nextLink.text}</span>
+											</a>
+										}
+									</nav>
+								}
+								<FooterStub />
+							</div>
+						</div>
+						<aside class="aside">
+							if (toc.length > 0) {
+								<div class="aside-content">
+									<nav class="outline">
+										for (const item of toc) {
+											<a href={item.href}>{item.text}</a>
+										}
+									</nav>
 								</div>
 							}
-							if (prevLink || nextLink) {
-								<nav class="prev-next">
-									if (prevLink) {
-										<a href={prevLink.href} class="pager prev">
-											<span class="title">{prevLink.text}</span>
-										</a>
-									} else {
-										<span />
-									}
-									if (nextLink) {
-										<a href={nextLink.href} class="pager next">
-											<span class="title">{nextLink.text}</span>
-										</a>
-									}
-								</nav>
-							}
-							<FooterStub />
-						</div>
+						</aside>
 					</div>
-					<aside class="aside">
-						if (toc.length > 0) {
-							<div class="aside-content">
-								<nav class="outline">
-									for (const item of toc) {
-										<a href={item.href}>{item.text}</a>
-									}
-								</nav>
-							</div>
-						}
-					</aside>
-				</div>
-			</main>
+				</main>
+			</div>
+		</div>
+	</>;
+}
+
+export function DocsLayoutExactWithData() {
+	return <>
+		const htmlContent = '<h1>Styling Guide</h1><p>Content</p>';
+		<DocsLayoutExact
+			editPath="docs/guide/styling.md"
+			prevLink={{ href: '/prev', text: 'Previous' }}
+			nextLink={{ href: '/next', text: 'Next' }}
+			toc={[
+				{ href: '#intro', text: 'Introduction' },
+				{ href: '#usage', text: 'Usage' },
+			]}
+		>
+			<div class="doc-content" innerHTML={htmlContent} />
+		</DocsLayoutExact>
+	</>;
+}
+
+export function DocsLayoutExactWithoutData() {
+	return <>
+		const htmlContent: string | undefined = undefined;
+		const editPath: string | undefined = undefined;
+		const prevLink: { href: string; text: string } | null | undefined = undefined;
+		const nextLink: { href: string; text: string } | null | undefined = undefined;
+		const toc: { href: string; text: string }[] | undefined = undefined;
+		<DocsLayoutExact {editPath} {prevLink} {nextLink} {toc}>
+			<div class="doc-content" innerHTML={htmlContent} />
+		</DocsLayoutExact>
+	</>;
+}
+
+export function TemplateWithHtmlContent() {
+	return <>
+		const data = { title: 'Test', value: 42 };
+		<div>
+			<template id="t1" innerHTML={JSON.stringify(data)} />
+			<p class="content">{'Main content'}</p>
+		</div>
+	</>;
+}
+
+export function TemplateWithHtmlAndSiblings() {
+	return <>
+		const data = { name: 'Ripple', version: '1.0' };
+		<div class="wrapper">
+			<h1>{'Title'}</h1>
+			<template id="data-template" innerHTML={JSON.stringify(data)} />
+			<p class="after-template">{'Content after template'}</p>
+		</div>
+	</>;
+}
+
+function LayoutWithTemplate({ children, data }: { children: any; data: object }) {
+	return <>
+		<div class="layout">
+			<template id="page-data" innerHTML={JSON.stringify(data)} />
+			<main>{children}</main>
 		</div>
-	</div>
-}
-
-export component DocsLayoutExactWithData() {
-	const htmlContent = '<h1>Styling Guide</h1><p>Content</p>';
-	<DocsLayoutExact
-		editPath="docs/guide/styling.md"
-		prevLink={{ href: '/prev', text: 'Previous' }}
-		nextLink={{ href: '/next', text: 'Next' }}
-		toc={[
-			{ href: '#intro', text: 'Introduction' },
-			{ href: '#usage', text: 'Usage' },
-		]}
-	>
-		<div class="doc-content">{html htmlContent}</div>
-	</DocsLayoutExact>
-}
-
-export component DocsLayoutExactWithoutData() {
-	const htmlContent: string | undefined = undefined;
-	const editPath: string | undefined = undefined;
-	const prevLink: { href: string; text: string } | null | undefined = undefined;
-	const nextLink: { href: string; text: string } | null | undefined = undefined;
-	const toc: { href: string; text: string }[] | undefined = undefined;
-
-	<DocsLayoutExact {editPath} {prevLink} {nextLink} {toc}>
-		<div class="doc-content">{html htmlContent}</div>
-	</DocsLayoutExact>
-}
-
-export component TemplateWithHtmlContent() {
-	const data = { title: 'Test', value: 42 };
-	<div>
-		<template id="t1">{html JSON.stringify(data)}</template>
-		<p class="content">{'Main content'}</p>
-	</div>
-}
-
-export component TemplateWithHtmlAndSiblings() {
-	const data = { name: 'Ripple', version: '1.0' };
-	<div class="wrapper">
-		<h1>{'Title'}</h1>
-		<template id="data-template">{html JSON.stringify(data)}</template>
-		<p class="after-template">{'Content after template'}</p>
-	</div>
-}
-
-component LayoutWithTemplate({ children, data }: { children: any; data: object }) {
-	<div class="layout">
-		<template id="page-data">{html JSON.stringify(data)}</template>
-		<main>{children}</main>
-	</div>
-}
-
-export component NestedTemplateInLayout() {
-	const doc = { title: 'Comparison', html: '<p>Content</p>' };
-	<LayoutWithTemplate data={doc}>
-		<div class="doc-content">{html doc.html}</div>
-	</LayoutWithTemplate>
-}
-
-export component HtmlCodeBlocksWithSiblingChain() {
-	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;';
-
-	<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>{html html1}</code>
-		</pre>
-		<p>{'Between one and two'}</p>
-		<pre class="code-block">
-			<code>{html html2}</code>
-		</pre>
-		<p>{'Between two and three'}</p>
-		<pre class="code-block">
-			<code>{html html3}</code>
-		</pre>
-	</section>
+	</>;
+}
+
+export function NestedTemplateInLayout() {
+	return <>
+		const doc = { title: 'Comparison', html: '<p>Content</p>' };
+		<LayoutWithTemplate data={doc}>
+			<div class="doc-content" innerHTML={doc.html} />
+		</LayoutWithTemplate>
+	</>;
+}
+
+export function HtmlCodeBlocksWithSiblingChain() {
+	return <>
+		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;';
+		<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 innerHTML={html1} />
+			</pre>
+			<p>{'Between one and two'}</p>
+			<pre class="code-block">
+				<code innerHTML={html2} />
+			</pre>
+			<p>{'Between two and three'}</p>
+			<pre class="code-block">
+				<code innerHTML={html3} />
+			</pre>
+		</section>
+	</>;
 }