Skip to content

Nt 2587 create multi router compatible automatic page view event emission#183

Merged
Lotfi Anwar L Arif (Lotfi-Arif) merged 6 commits intomainfrom
NT-2587-create-multi-router-compatible-automatic-page-view-event-emission
Mar 24, 2026
Merged

Nt 2587 create multi router compatible automatic page view event emission#183
Lotfi Anwar L Arif (Lotfi-Arif) merged 6 commits intomainfrom
NT-2587-create-multi-router-compatible-automatic-page-view-event-emission

Conversation

@Lotfi-Arif
Copy link
Copy Markdown
Contributor

@Lotfi-Arif Lotfi Anwar L Arif (Lotfi-Arif) commented Mar 20, 2026

Core Auto-Page Emission

  • Added shared auto-page emission logic for React Web SDK router adapters.
  • Auto page events now fire on first eligible render and on route changes.
  • Duplicate consecutive route keys are suppressed, including React Strict Mode double-invocation cases.
  • Added payload enrichment support via pagePayload and getPagePayload, merged before calling optimization.page(...).

Router Adapters

  • Introduced a tree-shakeable Next.js Pages Router adapter at @contentful/optimization-react-web/router/next-pages.
  • Added NextPagesAutoPageTracker for mounting in pages/_app.tsx, with all next/router usage isolated to the adapter subpath.
  • Introduced a tree-shakeable Next.js App Router adapter at @contentful/optimization-react-web/router/next-app.
  • Added NextAppAutoPageTracker for mounting in a client provider/layout component, with all next/navigation usage isolated to the adapter subpath.
  • Introduced a tree-shakeable React Router adapter at @contentful/optimization-react-web/router/react-router.
  • Added ReactRouterAutoPageTracker for mounting once inside the react-router-dom router tree.
  • Introduced a tree-shakeable TanStack Router adapter at @contentful/optimization-react-web/router/tanstack-router.
  • Added TanStackRouterAutoPageTracker for mounting once inside the TanStack router tree.

Package Structure and Types

  • Kept router support isolated to router-specific subpath exports so the base package entry does not import router libraries.
  • Exported shared auto-page types and router adapter types/context types for all supported adapters.
  • Refactored the implementation to use router package types directly where practical to keep the adapter surface simpler and easier to follow.

Testing

  • Refactored the unit tests and split them into less redundant testing utils and testing cases.
  • Added rstest coverage for shared emitter behavior and all four router adapters.
  • Covered initial emission, route transitions, duplicate suppression, and static/dynamic payload enrichment behavior.

Docs and Dev Harness

  • Updated React Web SDK docs with setup and enrichment examples for all four routers, plus tree-shakeability guidance.
  • Documented that this feature is implemented through page payload composition only and does not require interceptors.
  • Updated the dev harness to mount the React Router adapter so auto page emission can be exercised interactively through client-side navigation.

Verification

  • Verified with typecheck, eslint, prettier, and unit tests.

- Implement NextPagesAutoPageTracker component for automatic page event
  emission in Next.js Pages Router apps
- Add payload composition utilities and types for static/dynamic
  enrichment
- Export router adapter as isolated subpath entry point
- Provide unit tests for auto page emission and payload merging
- Update README with usage and enrichment examples
- Extend build and test configs for router adapter support
- Add NextAppAutoPageTracker for Next.js App Router
- Add ReactRouterAutoPageTracker for react-router-dom
- Add TanStackRouterAutoPageTracker for @tanstack/react-router
- Include tests for each tracker covering emission behavior and payload
  merging
@Lotfi-Arif Lotfi Anwar L Arif (Lotfi-Arif) merged commit 53aec35 into main Mar 24, 2026
30 checks passed
@Lotfi-Arif Lotfi Anwar L Arif (Lotfi-Arif) deleted the NT-2587-create-multi-router-compatible-automatic-page-view-event-emission branch March 24, 2026 13:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants