From fb9e689627c760e6f7553fa63dcb3db8047f11ee Mon Sep 17 00:00:00 2001 From: Giamir Buoncristiani Date: Fri, 24 Oct 2025 12:38:29 +0200 Subject: [PATCH] chore(pagination): update to svelte 5 runes apis --- .changeset/deep-areas-fail.md | 23 +++++ .../components/Pagination/Pagination.svelte | 17 +++- .../Pagination/PaginationController.svelte | 95 +++++++++++-------- .../Pagination/PaginationController.test.ts | 11 +-- .../Pagination/PaginationItem.svelte | 28 +++++- 5 files changed, 119 insertions(+), 55 deletions(-) create mode 100644 .changeset/deep-areas-fail.md diff --git a/.changeset/deep-areas-fail.md b/.changeset/deep-areas-fail.md new file mode 100644 index 0000000000..e08ba6abbc --- /dev/null +++ b/.changeset/deep-areas-fail.md @@ -0,0 +1,23 @@ +--- +"@stackoverflow/stacks-svelte": minor +--- + +Migrate `Pagination` components to use Svelte 5 runes API. + +BREAKING CHANGES: +- `PaginationItem`: `on:click` event forwarding is replaced by `onclick` callback prop. +- `PaginationController`: `on:pagechange` event is replaced by `onpagechange` callback prop with simplified signature. Previously the event passed `{ detail: pageNumber }`, now the callback directly receives the page number as the argument: `onpagechange(pageNumber)`. + +Migration example: +```svelte + + handlePageChange(e.detail)} +/> + + + handlePageChange(pageNumber)} +/> +``` + diff --git a/packages/stacks-svelte/src/components/Pagination/Pagination.svelte b/packages/stacks-svelte/src/components/Pagination/Pagination.svelte index 1d11323c3d..83c5823c2a 100644 --- a/packages/stacks-svelte/src/components/Pagination/Pagination.svelte +++ b/packages/stacks-svelte/src/components/Pagination/Pagination.svelte @@ -1,9 +1,22 @@ diff --git a/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte b/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte index 22d530fbca..986cd78fce 100644 --- a/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte +++ b/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte @@ -2,47 +2,58 @@ import Pagination from "./Pagination.svelte"; import PaginationItem from "./PaginationItem.svelte"; import PaginationItemClear from "./PaginationItemClear.svelte"; - import { createEventDispatcher } from "svelte"; import { generatePagination } from "./pagination-generator"; - /** - * The current page number - * @type {number} - */ - export let page: number; - /** - * The total number of pages - * @type {number} - */ - export let totalPages: number; - /** - * Function to generate the URL for a given page number - * @type {(page: number) => string} - */ - export let urlGenerator: (page: number) => string; - /** - * Whether to follow the link natively or rely on the pagechange event - * @type {boolean} - */ - export let followLink = true; - /** - * Localized translation for the visible "Next" page link text - */ - export let i18nNextText = "Next"; - /** - * Localized translation for the visible "Prev" page link text - */ - export let i18nPrevText = "Prev"; - /** - * Localized translation for Next/Prev "page" screen reader text - */ - export let i18nPageText = "page"; - /** - * Localized translation aria-label on nav element wrapping the pagination component - */ - export let i18nNavigationLabel: string = "Pagination"; + interface Props { + /** + * The current page number + */ + page: number; + /** + * The total number of pages + */ + totalPages: number; + /** + * Function to generate the URL for a given page number + */ + urlGenerator: (page: number) => string; + /** + * Whether to follow the link natively or rely on the pagechange event + */ + followLink?: boolean; + /** + * Localized translation for the visible "Next" page link text + */ + i18nNextText?: string; + /** + * Localized translation for the visible "Prev" page link text + */ + i18nPrevText?: string; + /** + * Localized translation for Next/Prev "page" screen reader text + */ + i18nPageText?: string; + /** + * Localized translation aria-label on nav element wrapping the pagination component + */ + i18nNavigationLabel?: string; + /** + * Callback fired when a page is changed + */ + onpagechange?: (pageNumber: number) => void; + } - const dispatch = createEventDispatcher<{ pagechange: number }>(); + let { + page, + totalPages, + urlGenerator, + followLink = true, + i18nNextText = "Next", + i18nPrevText = "Prev", + i18nPageText = "page", + i18nNavigationLabel = "Pagination", + onpagechange, + }: Props = $props(); /** * Handles the click event for a pagination item @@ -52,7 +63,7 @@ const onPaginationItemClick = (page: number) => (evt: Event) => { if (!followLink) { evt.preventDefault(); - dispatch("pagechange", page); + onpagechange?.(page); } }; @@ -61,7 +72,7 @@ {#if page > 1} {i18nPrevText} {i18nPageText} @@ -70,7 +81,7 @@ {#if typeof p === "number"} {i18nPageText} @@ -83,7 +94,7 @@ {#if page < totalPages} {i18nNextText} {i18nPageText} diff --git a/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts b/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts index 47ea6b3d03..cd07a8b087 100644 --- a/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts +++ b/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts @@ -104,21 +104,18 @@ describe("PaginationController", () => { totalPages: 5, urlGenerator, followLink: false, - // @ts-expect-error events are not yet typed in the component - $$events: { - pagechange: mockHandler, - }, + onpagechange: mockHandler, }, }); await userEvent.click(screen.getByText("3")); - expect(mockHandler).to.have.been.calledWith(sinon.match({ detail: 3 })); + expect(mockHandler).to.have.been.calledWith(3); await userEvent.click(screen.getByText("Prev")); - expect(mockHandler).to.have.been.calledWith(sinon.match({ detail: 1 })); + expect(mockHandler).to.have.been.calledWith(1); await userEvent.click(screen.getByText("Next")); - expect(mockHandler).to.have.been.calledWith(sinon.match({ detail: 3 })); + expect(mockHandler).to.have.been.calledWith(3); }); it("disables previous button on first page", () => { diff --git a/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte b/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte index 8a1e094634..8f33bb095d 100644 --- a/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte +++ b/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte @@ -1,6 +1,26 @@
  • @@ -9,8 +29,8 @@ class:is-selected={selected} aria-current={selected ? "page" : undefined} href={url} - on:click + {onclick} > - + {@render children?.()}