WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 27 Packages Projects Releases Wiki Activity

fix(ui): make Pagination usable server-rendered, surface output errors

Browse Source 
Pagination reported the requested page only through its change output, so on a
server-rendered page the controls did nothing: the parent had to own client
state to react, and the emitted page never became a URL. An optional
hrefTemplate now renders the steps and page numbers as anchors, which work
before hydration and without JavaScript and give each page a crawlable URL.
Buttons remain the default for client-owned lists. End steps are clamped and
marked disabled rather than linking past the first or last page.

Output handler errors are no longer swallowed. Nothing awaits invokeOutput, so
a handler that threw became an unhandled rejection that never reached the
console and presented as a control that silently does nothing. Handler errors
are now reported as WRN-DEV-OUTPUT-HANDLER-ERROR.

Regenerates the component reference and the UI visual contract.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Clintchiz
2026-08-13 15:46:00 +05:30
co-authored by Claude Opus 5
parent 2e42be7b31
commit 5afb2d1875
6 changed files with 210 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/Pagination.wrn
+88 -28
View File
@@ -26,6 +26,12 @@ component Pagination {
label: string = "Pagination"
previousLabel: string = "Previous"
nextLabel: string = "Next"
// Render links instead of buttons. `{page}` is replaced with the target
// page number, e.g. hrefTemplate="/media/news?page={page}". Server-rendered
// pages should prefer this: the controls then work before hydration and
// without JavaScript, and each page is a real, crawlable URL. Buttons plus
// the change output remain the default for client-owned lists.
hrefTemplate: string = ""
class: string = ""
}
@@ -46,6 +52,11 @@ component Pagination {
return Math.min(value, lastPage())
}
shared function pageHref(target) {
var clamped = Math.min(Math.max(1, Number(target) || 1), lastPage())
return String(hrefTemplate).split("{page}").join(String(clamped))
}
shared function firstShown() {
if (Number(total) < 1) {
return 0
@@ -116,30 +127,55 @@ component Pagination {
</p>
<div class="wrn-pagination__controls">
<button
type="button"
class="wrn-pagination__step"
aria-label='{previousLabel}'
@click='goPrevious()'
>
<span class="wrn-pagination__step-icon" aria-hidden="true">&#8249;</span>
<span class="wrn-pagination__step-label">{previousLabel}</span>
</button>
{#if hrefTemplate}
<a
class="wrn-pagination__step"
aria-label='{previousLabel}'
href='{pageHref(currentPage() - 1)}'
aria-disabled='{currentPage() <= 1}'
data-disabled='{currentPage() <= 1}'
>
<span class="wrn-pagination__step-icon" aria-hidden="true">&#8249;</span>
<span class="wrn-pagination__step-label">{previousLabel}</span>
</a>
{:else}
<button
type="button"
class="wrn-pagination__step"
aria-label='{previousLabel}'
@click='goPrevious()'
>
<span class="wrn-pagination__step-icon" aria-hidden="true">&#8249;</span>
<span class="wrn-pagination__step-label">{previousLabel}</span>
</button>
{/if}
<ol class="wrn-pagination__pages" data-show="variant === 'numbered'">
{#each pageNumbers() as entry}
<li class="wrn-pagination__slot">
<span class="wrn-pagination__gap" data-show="entry.gap">{entry.label}</span>
<button
type="button"
class="wrn-pagination__page"
data-show="!entry.gap"
data-active='{entry.value === currentPage()}'
aria-current='{entry.value === currentPage() ? "page" : "false"}'
@click='goToPage(entry.value)'
>
{entry.label}
</button>
{#if hrefTemplate}
<a
class="wrn-pagination__page"
data-show="!entry.gap"
data-active='{entry.value === currentPage()}'
aria-current='{entry.value === currentPage() ? "page" : "false"}'
href='{pageHref(entry.value)}'
>
{entry.label}
</a>
{:else}
<button
type="button"
class="wrn-pagination__page"
data-show="!entry.gap"
data-active='{entry.value === currentPage()}'
aria-current='{entry.value === currentPage() ? "page" : "false"}'
@click='goToPage(entry.value)'
>
{entry.label}
</button>
{/if}
</li>
{/each}
</ol>
@@ -148,15 +184,28 @@ component Pagination {
{currentPage()} / {lastPage()}
</p>
<button
type="button"
class="wrn-pagination__step"
aria-label='{nextLabel}'
@click='goNext()'
>
<span class="wrn-pagination__step-label">{nextLabel}</span>
<span class="wrn-pagination__step-icon" aria-hidden="true">&#8250;</span>
</button>
{#if hrefTemplate}
<a
class="wrn-pagination__step"
aria-label='{nextLabel}'
href='{pageHref(currentPage() + 1)}'
aria-disabled='{currentPage() >= lastPage()}'
data-disabled='{currentPage() >= lastPage()}'
>
<span class="wrn-pagination__step-label">{nextLabel}</span>
<span class="wrn-pagination__step-icon" aria-hidden="true">&#8250;</span>
</a>
{:else}
<button
type="button"
class="wrn-pagination__step"
aria-label='{nextLabel}'
@click='goNext()'
>
<span class="wrn-pagination__step-label">{nextLabel}</span>
<span class="wrn-pagination__step-icon" aria-hidden="true">&#8250;</span>
</button>
{/if}
</div>
<slot />
@@ -240,6 +289,7 @@ component Pagination {
font: inherit;
font-size: 0.85rem;
cursor: pointer;
text-decoration: none;
}
.wrn-pagination__page:hover,
@@ -247,6 +297,16 @@ component Pagination {
background: var(--wrn-color-surface-soft);
}
/* The href variant renders anchors, which cannot be disabled the way a
button can. At the first or last page the control is marked disabled and
made inert so it neither responds nor takes focus. */
.wrn-pagination__page[data-disabled="true"],
.wrn-pagination__step[data-disabled="true"] {
opacity: 0.5;
pointer-events: none;
cursor: default;
}
.wrn-pagination__page:focus-visible,
.wrn-pagination__step:focus-visible {
outline: 2px solid var(--pagination-accent);