feat: app router support via AppPagination named export#140
Open
JoshTheWanderer wants to merge 7 commits into
Open
feat: app router support via AppPagination named export#140JoshTheWanderer wants to merge 7 commits into
JoshTheWanderer wants to merge 7 commits into
Conversation
Extract the presentational component into `src/pagination.tsx` and inject a routing adapter from per-router wrappers: - `PagesPagination` (default export) uses `next/router` + `next/head` - `AppPagination` uses `next/navigation` and omits the `<link rel=prev|next>` SEO hints (client components cannot write to `<head>`) The default export keeps pointing at `PagesPagination` for backwards compatibility. Both named exports ship from the single entry point. Postbuild fixes for microbundle-crl: - Prepend `'use client'` so Next.js treats the bundled module as a client component (the directive is stripped during rollup bundling) - Inject `__esModule` marker so CJS consumers resolve the default export via `.default` instead of getting the whole exports object Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add an `app/` tree alongside the existing `pages/` directory so the demo covers both routers: - `app/layout.jsx` root layout - `app/app-example/page.jsx` client component rendering `AppPagination` inside `<Suspense>` (required for static export with useSearchParams) - link to `/app-example` from the pages index Switch the build to `output: 'export'` since `next export` no longer supports the app router, and rename `out` back to `build` so the `gh-pages` deploy keeps working. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Boots the example dev server via playwright's webServer and exercises the rendered pagination for the pages router (`/`) and the app router (`/app-example`): first-page state, clicking a page number updates the URL and current marker, and the page-size select resets to page 1 with the new size. Run locally with `npm run test:e2e`. Chromium only; CI wiring is not included in this commit. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Build the lib, install the example and chromium, then run `npm run test:e2e`. Upload the playwright report as an artifact so failures can be inspected. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
mergify
Bot
requested review from
a team and
ella-etch
and removed request for
a team
- src/adapters/app.tsx: simplify searchParams dedup with Set.forEach instead of an ad-hoc seen map. - scripts/add-use-client.js: collapse the two passes into a single prefix-then-write helper so the directive and __esModule marker can no longer interleave incorrectly. The CJS bundle gets both prefixes; the ESM bundle only needs the directive. - playwright + example: run the e2e suite against the production bundle (`next build` + `next start`) when CI is set, matching what users ship. Locally we keep `next dev` for fast iteration. The deploy build now gates `output: 'export'` and basePath/assetPrefix on EXAMPLE_DEPLOY=true so the test build uses plain server output. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bundle split via subpath exports (/app, /pages) so app-router consumers no longer pull in next/router and pages-router consumers can opt out of the 'use client' directive. Root entry keeps both adapters for back-compat. Replace add-use-client.js with postbuild.js: handles multi-entry rename, d.ts flatten, stale cleanup, per-entry directive patching. Throws on missing dist instead of silently no-opping. Clamp invalid ?page=/?size=/total values silently in the shared core (parseInt + Number.isFinite + Math.min, handles string[] query values from the app adapter). Guard null searchParams/pathname in AppPagination with a dev warning, replacing the silent ?? '' fallback that masked missing <Suspense> wrappers. Force CI to re-pack the example's file:.. dep on every run by switching from npm ci to npm install --no-package-lock. Restore unit coverage with src/pagination.test.tsx (core behaviour via stub adapter) and src/adapters/app.test.tsx (mocked next/navigation). Document AppPagination, the entrypoint table, the <Suspense> requirement, and clamping behaviour in the README. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The long-running modernize branch is the base for #140 and future modernization PRs, so CI needs to fire on PRs into it as well as main. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
❌MegaLinter analysis: Error
Detailed Issues❌ JAVASCRIPT / eslint - 8 errors❌ TYPESCRIPT / eslint - 7 errors❌ CSS / stylelint - 1 error❌ REPOSITORY / trufflehog - 1 error
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Pagination+ routing-adapter pattern; addAppPagination(app router) andPagesPagination(pages router) named exports. Default export staysPagesPaginationfor backwards compatibility.'use client'directive and__esModulemarker so the built CJS interop keeps working and app-router consumers don't see RSC boundary errors./app-exampleroute demonstratingAppPagination. Switch example build tooutput: 'export'becausenext exportno longer supports the app router.Test plan
npm test(unit + types) greennpm run buildproducesdist/index.jsstarting with'use client'and an__esModulemarkernpm --prefix example run buildproduces staticbuild/app-example.htmlnpm run test:e2e— 7 tests pass (4 pages, 3 app)e2ejob green on this PR🤖 Generated with Claude Code