Pass intersection observer disabled state directly

[Sheraff]

Summary

• pass the disabled boolean directly to the React and Solid intersection-observer helpers
• pass Vue's reactive disabled getter directly, preserving watchEffect tracking
• cover disabled viewport links and reactive observer teardown in Vue

Bundle-size impact

Prior isolated prototype measurements from the same main base (6aefb33925):

Scenario	Raw	Gzip	Brotli
react-router.minimal	-32 B	-10 B	-3 B
solid-router.minimal	-23 B	-4 B	-65 B

The final Vue hunk, measured against an otherwise identical worktree:

Scenario	Raw	Gzip	Brotli
vue-router.minimal	-68 B	-25 B	+62 B

Gzip is the benchmark's primary metric.

Validation

• React link tests: 131 passed
• Solid unit tests: 838 client tests passed (1 skipped), 3 server tests passed
• Vue link tests: 131 passed
• React, Solid, and Vue type tests passed
• React, Solid, and Vue builds passed
• React, Solid, and Vue ESLint targets passed with existing warnings only

Summary by CodeRabbit

• Bug Fixes

  • Improved viewport-based link preloading behavior across React, Solid, and Vue.
  • Links now correctly skip observation when disabled or when viewport preloading is unavailable.
  • Preloading observation now responds correctly when link conditions change.
  • Updated behavior is consistent across supported framework integrations.

• Tests

  • Added coverage confirming disabled links are not observed and that observation starts or stops as conditions change.

[coderabbitai]

📝 Walkthrough

Walkthrough

The change separates disabled state from IntersectionObserverInit options in React, Solid, and Vue utilities. Link integrations use the new signatures. Vue tests cover disabled links and reactive observer lifecycle behavior.

Changes

Intersection observer API update

Layer / File(s)	Summary
Update observer utility signatures packages/react-router/src/utils.ts, packages/solid-router/src/utils.ts, packages/vue-router/src/utils.ts, .changeset/quiet-doors-double.md	The utilities accept observer options separately from disabled state. The observer checks, examples, and documentation use the new parameters. A patch changeset covers the three router packages.
Update link observer calls packages/react-router/src/link.tsx, packages/solid-router/src/link.tsx, packages/vue-router/src/link.tsx	Links pass boolean or callback disabled conditions directly to useIntersectionObserver.
Validate Vue observer behavior packages/vue-router/tests/link.test.tsx	Tests verify that disabled viewport links are not observed and that observer creation and disconnection react to a disabled getter.

Estimated code review effort: 3 (Moderate) | ~20 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: passing the intersection observer disabled state directly.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/direct-intersection-observer-disabled

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 7d62f08

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	✅ Succeeded	2m 38s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-08-06 11:10:43 UTC

[github-actions]

🚀 Changeset Version Preview

5 package(s) bumped directly, 18 bumped as dependents.

🟩 Patch bumps

Package	Version	Reason
@tanstack/react-router	1.170.20 → 1.170.21	Changeset
@tanstack/router-core	1.171.17 → 1.171.18	Changeset
@tanstack/solid-router	1.170.20 → 1.170.21	Changeset
@tanstack/start-server-core	1.169.20 → 1.169.21	Changeset
@tanstack/vue-router	1.170.19 → 1.170.20	Changeset
@tanstack/react-start	1.168.37 → 1.168.38	Dependent
@tanstack/react-start-client	1.168.18 → 1.168.19	Dependent
@tanstack/react-start-rsc	0.1.36 → 0.1.37	Dependent
@tanstack/react-start-server	1.167.25 → 1.167.26	Dependent
@tanstack/router-cli	1.167.23 → 1.167.24	Dependent
@tanstack/router-generator	1.167.23 → 1.167.24	Dependent
@tanstack/router-plugin	1.168.25 → 1.168.26	Dependent
@tanstack/router-vite-plugin	1.167.25 → 1.167.26	Dependent
@tanstack/solid-start	1.168.36 → 1.168.37	Dependent
@tanstack/solid-start-client	1.168.18 → 1.168.19	Dependent
@tanstack/solid-start-server	1.167.25 → 1.167.26	Dependent
@tanstack/start-client-core	1.170.16 → 1.170.17	Dependent
@tanstack/start-plugin-core	1.171.28 → 1.171.29	Dependent
@tanstack/start-static-server-functions	1.167.21 → 1.167.22	Dependent
@tanstack/start-storage-context	1.167.19 → 1.167.20	Dependent
@tanstack/vue-start	1.168.35 → 1.168.36	Dependent
@tanstack/vue-start-client	1.167.21 → 1.167.22	Dependent
@tanstack/vue-start-server	1.167.25 → 1.167.26	Dependent

[github-actions]

Bundle Size Benchmarks

• Commit: 5d9d59b8b9d5
• Measured at: 2026-08-06T10:52:17.935Z
• Baseline source: history:697ebb6ddbd4
• Dashboard: bundle-size history

The following scenarios have bundle-size changes compared with the baseline:

Scenario	Current (gzip)	Delta vs baseline	Initial gzip	Raw	Brotli	Trend
react-router.minimal	87.10 KiB	-8 B (-0.01%)	86.97 KiB	269.10 KiB	75.87 KiB	████▂▂▂▂▂▁▂▁
react-router.full	90.89 KiB	-4 B (-0.00%)	90.75 KiB	281.06 KiB	79.10 KiB	████▂▂▂▂▂▁▂▂
solid-router.minimal	34.79 KiB	-2 B (-0.01%)	34.67 KiB	99.95 KiB	31.35 KiB	████▂▂▂▂▂▁▁▁
solid-router.full	39.90 KiB	-3 B (-0.01%)	39.77 KiB	115.12 KiB	35.92 KiB	████▂▂▂▂▂▁▁▁
vue-router.minimal	52.07 KiB	-24 B (-0.04%)	51.94 KiB	143.05 KiB	46.90 KiB	████▂▂▂▂▂▁▁▁
vue-router.full	58.03 KiB	-21 B (-0.04%)	57.90 KiB	161.73 KiB	52.05 KiB	████▂▂▂▂▂▁▁▁
react-start.minimal	100.59 KiB	-5 B (-0.00%)	100.46 KiB	312.25 KiB	87.36 KiB	███████▁▁▁▁▁
react-start.deferred-hydration	101.33 KiB	-9 B (-0.01%)	100.48 KiB	313.63 KiB	87.99 KiB	███████▁▁▁▁▁
react-start.full	103.91 KiB	-8 B (-0.01%)	103.78 KiB	322.20 KiB	90.18 KiB	███████▁▁▁▁▁
react-start.rsbuild.minimal	100.23 KiB	-4 B (-0.00%)	100.06 KiB	316.74 KiB	86.39 KiB	▁▁▁▁▂▂▂█████
react-start.rsbuild.minimal-iife	100.64 KiB	-3 B (-0.00%)	100.48 KiB	317.67 KiB	86.73 KiB	▁▁▁▁▂▂▂█████
react-start.rsbuild.full	103.56 KiB	-5 B (-0.00%)	103.39 KiB	326.83 KiB	89.12 KiB	▁▁▁▁▃▃▃█████
solid-start.minimal	48.18 KiB	-1 B (-0.00%)	48.05 KiB	142.08 KiB	42.78 KiB	███████▁▁▁▁▁
solid-start.full	53.42 KiB	-10 B (-0.02%)	53.29 KiB	157.82 KiB	47.41 KiB	████▆▆▆▁▁▁▁▁
vue-start.minimal	68.95 KiB	-26 B (-0.04%)	68.82 KiB	195.05 KiB	61.26 KiB	████▆▆▆▁▁▁▁▁
vue-start.full	72.91 KiB	-22 B (-0.03%)	72.78 KiB	207.55 KiB	64.71 KiB	████▆▆▆▁▁▁▁▁

Current gzip tracks all emitted client JS chunks. Initial gzip tracks only the entry/import graph. Trend sparkline is historical current gzip ending with this PR measurement; lower is better.

[pkg-pr-new]

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-authenticated-routes-firebase
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-devtools-panel
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-non-nested-devtools
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-i18n-paraglide
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• router-mono-simple-lazy
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-bare
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-router-react-example-basic-authjs
• tanstack-start-example-basic-cloudflare
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-rsbuild
• tanstack-start-example-basic-static
• tanstack-start-bun-hosting
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-counter
• tanstack-start-i18n-paraglide
• tanstack-start-example-large
• tanstack-start-example-material-ui
• tanstack-start-example-rscs
• tanstack-start-streaming-data-from-server-functions
• tanstack-start-example-supabase-basic
• tanstack-start-tailwind-v4
• tanstack-start-example-trellaux
• tanstack-start-example-workos
• tanstack-router-react-example-view-transitions
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query
• tanstack-router-solid-example-authenticated-routes
• tanstack-router-solid-example-authenticated-routes-firebase
• tanstack-router-solid-example-basic
• tanstack-router-solid-example-basic-default-search-params
• tanstack-router-solid-example-basic-devtools-panel
• tanstack-router-solid-example-basic-file-based
• tanstack-router-solid-example-basic-non-nested-devtools
• tanstack-router-solid-example-basic-solid-query
• tanstack-router-solid-example-basic-solid-query-file-based
• tanstack-router-solid-example-basic-ssr-file-based
• tanstack-router-solid-example-basic-ssr-streaming-file-based
• tanstack-router-solid-example-basic-virtual-file-based
• tanstack-router-solid-example-basic-virtual-inside-file-based
• tanstack-router-solid-example-deferred-data
• tanstack-router-solid-i18n-paraglide
• tanstack-router-solid-example-kitchen-sink
• tanstack-router-solid-example-kitchen-sink-file-based
• tanstack-router-solid-example-kitchen-sink-solid-query
• tanstack-router-solid-example-kitchen-sink-solid-query-file-based
• tanstack-router-solid-example-large-file-based
• tanstack-router-solid-example-location-masking
• tanstack-router-solid-example-navigation-blocking
• tanstack-router-solid-example-quickstart
• tanstack-router-solid-example-quickstart-esbuild-file-based
• tanstack-router-solid-example-quickstart-file-based
• tanstack-router-solid-example-quickstart-rspack-file-based
• tanstack-router-solid-example-quickstart-webpack-file-based
• @tanstack/router-solid-mono-simple
• router-solid-mono-simple-lazy
• router-solid-monorepo-solid-query
• tanstack-router-solid-example-scroll-restoration
• tanstack-solid-router-search-validator-adapters
• tanstack-solid-start-example-basic
• tanstack-solid-start-example-basic-auth
• tanstack-solid-start-example-basic-authjs
• tanstack-solid-start-example-basic-cloudflare
• tanstack-solid-start-example-basic-netlify
• tanstack-solid-start-example-basic-nitro
• tanstack-start-example-basic-solid-query
• tanstack-solid-start-example-basic-static
• tanstack-solid-start-bun-hosting
• tanstack-solid-start-example-convex-better-auth
• tanstack-solid-start-example-counter
• tanstack-solid-start-i18n-paraglide
• tanstack-solid-start-example-large
• tanstack-solid-start-streaming-data-from-server-functions
• tanstack-solid-start-example-supabase-basic
• tanstack-solid-start-tailwind-v4
• tanstack-router-solid-example-view-transitions
• tanstack-router-solid-example-with-framer-motion
• tanstack-router-solid-example-with-trpc
• tanstack-router-vue-example-basic-jsx
• tanstack-router-vue-example-basic-file-based-jsx
• tanstack-router-vue-example-basic-file-based-sfc

@tanstack/arktype-adapter

npm i https://pkg.pr.new/@tanstack/arktype-adapter@7971

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@7971

@tanstack/eslint-plugin-start

npm i https://pkg.pr.new/@tanstack/eslint-plugin-start@7971

@tanstack/history

npm i https://pkg.pr.new/@tanstack/history@7971

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/@tanstack/nitro-v2-vite-plugin@7971

@tanstack/react-router

npm i https://pkg.pr.new/@tanstack/react-router@7971

@tanstack/react-router-devtools

npm i https://pkg.pr.new/@tanstack/react-router-devtools@7971

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/@tanstack/react-router-ssr-query@7971

@tanstack/react-start

npm i https://pkg.pr.new/@tanstack/react-start@7971

@tanstack/react-start-client

npm i https://pkg.pr.new/@tanstack/react-start-client@7971

@tanstack/react-start-rsc

npm i https://pkg.pr.new/@tanstack/react-start-rsc@7971

@tanstack/react-start-server

npm i https://pkg.pr.new/@tanstack/react-start-server@7971

@tanstack/router-cli

npm i https://pkg.pr.new/@tanstack/router-cli@7971

@tanstack/router-core

npm i https://pkg.pr.new/@tanstack/router-core@7971

@tanstack/router-devtools

npm i https://pkg.pr.new/@tanstack/router-devtools@7971

@tanstack/router-devtools-core

npm i https://pkg.pr.new/@tanstack/router-devtools-core@7971

@tanstack/router-generator

npm i https://pkg.pr.new/@tanstack/router-generator@7971

@tanstack/router-plugin

npm i https://pkg.pr.new/@tanstack/router-plugin@7971

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/@tanstack/router-ssr-query-core@7971

@tanstack/router-utils

npm i https://pkg.pr.new/@tanstack/router-utils@7971

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/@tanstack/router-vite-plugin@7971

@tanstack/solid-router

npm i https://pkg.pr.new/@tanstack/solid-router@7971

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/@tanstack/solid-router-devtools@7971

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/@tanstack/solid-router-ssr-query@7971

@tanstack/solid-start

npm i https://pkg.pr.new/@tanstack/solid-start@7971

@tanstack/solid-start-client

npm i https://pkg.pr.new/@tanstack/solid-start-client@7971

@tanstack/solid-start-server

npm i https://pkg.pr.new/@tanstack/solid-start-server@7971

@tanstack/start-client-core

npm i https://pkg.pr.new/@tanstack/start-client-core@7971

@tanstack/start-fn-stubs

npm i https://pkg.pr.new/@tanstack/start-fn-stubs@7971

@tanstack/start-plugin-core

npm i https://pkg.pr.new/@tanstack/start-plugin-core@7971

@tanstack/start-server-core

npm i https://pkg.pr.new/@tanstack/start-server-core@7971

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/@tanstack/start-static-server-functions@7971

@tanstack/start-storage-context

npm i https://pkg.pr.new/@tanstack/start-storage-context@7971

@tanstack/valibot-adapter

npm i https://pkg.pr.new/@tanstack/valibot-adapter@7971

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/@tanstack/virtual-file-routes@7971

@tanstack/vue-router

npm i https://pkg.pr.new/@tanstack/vue-router@7971

@tanstack/vue-router-devtools

npm i https://pkg.pr.new/@tanstack/vue-router-devtools@7971

@tanstack/vue-router-ssr-query

npm i https://pkg.pr.new/@tanstack/vue-router-ssr-query@7971

@tanstack/vue-start

npm i https://pkg.pr.new/@tanstack/vue-start@7971

@tanstack/vue-start-client

npm i https://pkg.pr.new/@tanstack/vue-start-client@7971

@tanstack/vue-start-server

npm i https://pkg.pr.new/@tanstack/vue-start-server@7971

@tanstack/zod-adapter

npm i https://pkg.pr.new/@tanstack/zod-adapter@7971

commit: 7d62f08

[codspeed-hq]

Merging this PR will regress 0 benchmarks

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 9 improved benchmarks
❌ 6 (👁 6) regressed benchmarks
✅ 165 untouched benchmarks

Performance Changes

	Mode	Benchmark	BASE	HEAD	Efficiency
⚡	Memory	mem server server-fn-churn (vue)	4,147.3 KB	270.5 KB	×15
⚡	Memory	mem server error-paths unmatched (vue)	2,142.1 KB	477.8 KB	×4.5
⚡	Memory	mem server peak-large-page (react)	1,737.5 KB	951.6 KB	+82.59%
⚡	Memory	mem server error-paths redirect (solid)	388 KB	283.2 KB	+37%
⚡	Memory	mem server error-paths redirect (vue)	338.6 KB	295.9 KB	+14.42%
⚡	Simulation	ssr server-fn multipart (solid)	64.2 ms	61.2 ms	+4.94%
⚡	Simulation	ssr server-fn raw-stream (solid)	113.2 ms	108.3 ms	+4.5%
⚡	Memory	mem server error-paths not-found (react)	277.7 KB	266.5 KB	+4.2%
⚡	Memory	mem client navigation-churn (vue)	1.3 MB	1.2 MB	+3.71%
👁	Memory	mem server error-paths not-found (solid)	415.1 KB	783.6 KB	-47.03%
👁	Memory	mem server error-paths unmatched (react)	317.5 KB	481.9 KB	-34.12%
👁	Simulation	ssr dehydrate rich types (vue)	135.2 ms	139.4 ms	-3.05%
👁	Simulation	ssr request loop (solid)	156.5 ms	163.9 ms	-4.48%
👁	Simulation	ssr server-fn during document ssr (react)	62.9 ms	66.9 ms	-6.06%
👁	Memory	mem client unique-location-churn (solid)	341.2 KB	471.5 KB	-27.63%

Tip

Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing codex/direct-intersection-observer-disabled (7d62f08) with main (697ebb6)}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.changeset/quiet-doors-double.md:
- Line 7: Update the changeset description to document the released observer API
change: in the React, Solid, and Vue observer helpers, the disabled state is now
separate from the IntersectionObserverInit options. Replace the current
link-component cleanup wording with this API-focused description.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 1c6df6b3-c8b6-4b8d-bd2a-ea26814414cd

📥 Commits

Reviewing files that changed from the base of the PR and between a71c605 and 7d62f08.

📒 Files selected for processing (1)

• .changeset/quiet-doors-double.md

[coderabbitai]

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Describe the released observer API change.

The current text only mentions link-component cleanup. State that disabled state is now separate from IntersectionObserverInit options in the React, Solid, and Vue observer helpers.

Proposed wording

-clean intersection observer options in link component
+Separate disabled state from intersection observer options in React, Solid, and Vue router helpers.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	clean intersection observer options in link component
	Separate disabled state from intersection observer options in React, Solid, and Vue router helpers.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.changeset/quiet-doors-double.md at line 7, Update the changeset description
to document the released observer API change: in the React, Solid, and Vue
observer helpers, the disabled state is now separate from the
IntersectionObserverInit options. Replace the current link-component cleanup
wording with this API-focused description.