Add Pretext virtualized text example#1178
Conversation
📝 WalkthroughWalkthroughThis PR adds end-to-end Pretext integration to TanStack Virtual: comprehensive documentation explaining when and how to use Pretext for text-height estimation in virtualized UIs, a fully functional React example rendering a virtualized chat log with variable row heights, and verification infrastructure ensuring examples remain buildable and documentation routes remain consistent. ChangesPretext Integration
Sequence DiagramsequenceDiagram
participant App
participant useVirtualizer as TanStack Virtual
participant Pretext
participant ResizeObserver
participant FontReady as document.fonts
App->>App: Initialize messages (2000 synthetic items)
App->>ResizeObserver: Attach to viewport container
ResizeObserver->>App: Report initial width
App->>useVirtualizer: Create virtualizer with estimateSize callback
useVirtualizer->>Pretext: Call estimateSize for visible row
Pretext->>Pretext: Lookup cached prepare result
Pretext->>Pretext: Call layout() with current width
Pretext-->>useVirtualizer: Return row height
useVirtualizer-->>App: Provide height, start, key for rendering
ResizeObserver->>App: Report width change
App->>useVirtualizer: Call measure() to recompute layout
FontReady->>App: Emit fonts loaded event
App->>Pretext: Call clearCache()
App->>useVirtualizer: Clear measurement cache
App->>App: Bump fontVersion to trigger re-estimation
App->>useVirtualizer: Virtualizer remeasures with font metrics
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
examples/react/pretext/vite.config.jsParsing error: "parserOptions.project" has been provided for Comment |
🚀 Changeset Version PreviewNo changeset entries found. Merging this PR will not cause a version bump for any packages. |
|
View your CI Pipeline Execution ↗ for commit df21b3e
☁️ Nx Cloud last updated this comment at |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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 `@examples/react/pretext/tsconfig.json`:
- Around line 2-3: Move the "composite" setting into the "compilerOptions"
object so TypeScript recognizes it: locate the tsconfig JSON where "composite":
true is at root level and remove it from root and add "composite": true inside
the existing "compilerOptions" object (ensure the JSON remains valid and does
not duplicate keys), referencing the "composite" and "compilerOptions"
properties to find where to change.
In `@scripts/verify-examples.ts`:
- Around line 54-56: After applying the .filter((example) => !filter ||
example.directory.includes(filter)) step, add a guard that fails fast when a
non-empty EXAMPLE_FILTER (the local variable filter) matches zero examples:
compute the filtered array (e.g., filteredExamples or reuse the variable that
holds the pipeline result), then if filter is truthy and filtered array length
is 0 throw a clear Error (or process.exit with non-zero) so CI fails rather than
silently passing; place this check immediately after the filter/sort pipeline
that produces the list used by the rest of the script.
In `@scripts/verify-links.ts`:
- Line 244: The current tail-call verifyLinks().catch(console.error) only logs
errors but leaves the process exit code at 0; change the catch handler on the
verifyLinks invocation so it logs the error (e.g., via console.error or
processLogger) and sets a non-zero exit (either process.exitCode = 1 or
process.exit(1)) to ensure CI fails on errors; update the catch attached to
verifyLinks() accordingly.
🪄 Autofix (Beta)
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
Run ID: 84dbf2d6-86bf-4e0c-9666-54877fb93ce2
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (14)
docs/config.jsondocs/pretext.mdexamples/lit/dynamic/tsconfig.jsonexamples/lit/fixed/tsconfig.jsonexamples/react/pretext/README.mdexamples/react/pretext/index.htmlexamples/react/pretext/package.jsonexamples/react/pretext/src/index.cssexamples/react/pretext/src/main.tsxexamples/react/pretext/tsconfig.jsonexamples/react/pretext/vite.config.jspackage.jsonscripts/verify-examples.tsscripts/verify-links.ts
| "composite": true, | ||
| "compilerOptions": { |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In TypeScript tsconfig.json, is "composite" only valid under "compilerOptions" (and ignored if placed at the root)?
💡 Result:
Yes, the composite option is only valid under the compilerOptions object in a tsconfig.json file [1][2][3]. If you place composite at the root of your tsconfig.json file, it will be ignored by the TypeScript compiler [4][5]. The composite option is a compiler setting that enables project references and enforces specific constraints—such as requiring declaration to be true and ensuring all source files are explicitly included—to allow for faster, incremental builds [1][2][6]. Because it directly modifies how the compiler handles the compilation and emission of the project, it must reside within the compilerOptions block, which is the designated location for all TypeScript compiler settings [1][4]. Placing configuration options directly at the root level that belong inside compilerOptions is a common mistake; the TypeScript compiler simply does not look for them there, and they will have no effect on your project configuration [5].
Citations:
- 1: https://www.typescriptlang.org/tsconfig/composite.html
- 2: https://kindatechnical.com/typescript/project-references-composite-builds.html
- 3: Cannot build when
composite: truein tsconfig.json ezolenko/rollup-plugin-typescript2#112 - 4: https://www.typescriptlang.org/vo/tsconfig/
- 5: https://dev.to/erikch/8-vite-config-options-every-developer-should-know-vite-8-22im
- 6: https://github.com/microsoft/TypeScript-Website/blob/v2/packages/documentation/copy/en/project-config/Project%20References.md
Move composite under compilerOptions (examples/react/pretext/tsconfig.json, lines 2-3).
composite is only recognized when placed inside the compilerOptions object; root-level composite is ignored by TypeScript, so project-reference behavior won’t be enabled.
🤖 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 `@examples/react/pretext/tsconfig.json` around lines 2 - 3, Move the
"composite" setting into the "compilerOptions" object so TypeScript recognizes
it: locate the tsconfig JSON where "composite": true is at root level and remove
it from root and add "composite": true inside the existing "compilerOptions"
object (ensure the JSON remains valid and does not duplicate keys), referencing
the "composite" and "compilerOptions" properties to find where to change.
| .filter((example) => !filter || example.directory.includes(filter)) | ||
| .sort((a, b) => a.directory.localeCompare(b.directory)) | ||
|
|
There was a problem hiding this comment.
Fail fast when EXAMPLE_FILTER matches nothing.
If the filter is wrong, the script currently passes without validating any example. Add a guard so CI cannot go green on zero matched targets.
Proposed fix
const examples = packageJsonPaths
.map((packageJsonPath) => {
@@
.filter((example) => !filter || example.directory.includes(filter))
.sort((a, b) => a.directory.localeCompare(b.directory))
+
+if (filter && examples.length === 0) {
+ console.log(`\nNo examples matched EXAMPLE_FILTER="${filter}".`)
+ process.exit(1)
+}🤖 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 `@scripts/verify-examples.ts` around lines 54 - 56, After applying the
.filter((example) => !filter || example.directory.includes(filter)) step, add a
guard that fails fast when a non-empty EXAMPLE_FILTER (the local variable
filter) matches zero examples: compute the filtered array (e.g.,
filteredExamples or reuse the variable that holds the pipeline result), then if
filter is truthy and filtered array length is 0 throw a clear Error (or
process.exit with non-zero) so CI fails rather than silently passing; place this
check immediately after the filter/sort pipeline that produces the list used by
the rest of the script.
| } | ||
|
|
||
| verifyMarkdownLinks().catch(console.error) | ||
| verifyLinks().catch(console.error) |
There was a problem hiding this comment.
Ensure exceptions fail the process.
Line 244 logs thrown errors but can still exit with code 0. Set a non-zero exit code in the catch path so CI fails on script errors.
Proposed fix
-verifyLinks().catch(console.error)
+verifyLinks().catch((error) => {
+ console.error(error)
+ process.exit(1)
+})📝 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.
| verifyLinks().catch(console.error) | |
| verifyLinks().catch((error) => { | |
| console.error(error) | |
| process.exit(1) | |
| }) |
🤖 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 `@scripts/verify-links.ts` at line 244, The current tail-call
verifyLinks().catch(console.error) only logs errors but leaves the process exit
code at 0; change the catch handler on the verifyLinks invocation so it logs the
error (e.g., via console.error or processLogger) and sets a non-zero exit
(either process.exitCode = 1 or process.exit(1)) to ensure CI fails on errors;
update the catch attached to verifyLinks() accordingly.
1 participant
Summary
Testing
Summary by CodeRabbit
New Features
Documentation
Chores