feat(perf): swap React for @tanstack/dom-vite shim#836
feat(perf): swap React for @tanstack/dom-vite shim#836tannerlinsley wants to merge 2 commits intomainfrom
Conversation
Drop-in React-compatible shim (~9-10KB gzipped) replacing react / react-dom / react-dom/server via the @tanstack/dom-vite Vite plugin. Installing just @tanstack/dom-vite pulls the full set (dom-core, scheduler, react, react-dom, react-dom-server) transitively. Build-size win: app-shell + react gzip 160KB → 116KB (-44KB). Mobile Lighthouse: slight improvement (-128ms FCP, -27ms TBT). Desktop Lighthouse: parity with baseline. Also: - oxlint: ignore .claude/, disable nested config discovery so stale agent worktrees with their own oxlintrc copies don't break lint.
✅ Deploy Preview for tanstack ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughAdded TanStack DOM plugin to Vite, updated lint script to disable nested oxlint configs, extended oxlint ignore patterns to include Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Brings in raw REACT_LAZY_TYPE child handling in both SSR (walkNode) and client (pushChildren). RSC Flight serializes 'use client' components — CodeBlock, CodeBlockView, CodeExplorer, etc. — as bare lazy objects directly in the tree (not wrapped in REACT_ELEMENT_TYPE). The previous shim dropped those silently, so code snippets disappeared on docs pages (e.g. /virtual/latest/docs/introduction).
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@package.json`:
- Line 125: The dependency entry "@tanstack/dom-vite": "0.1.0-alpha.3" is
invalid (package/version not published) and will break installs; remove or
replace it in package.json and update any imports accordingly — either change
the dependency to a published package/version or delete the entry and then
remove or adjust the import of tanstackDom in vite.config.ts (the import
statement referencing `@tanstack/dom-vite`) so the build uses a correct package
name or no import at all.
🪄 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: afede75b-8f27-455a-8631-d01234c36ab4
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (1)
package.json
| "@playwright/test": "^1.59.0", | ||
| "@shikijs/transformers": "^4.0.2", | ||
| "@tanstack/devtools-vite": "^0.6.0", | ||
| "@tanstack/dom-vite": "0.1.0-alpha.3", |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Is @tanstack/dom-vite@0.1.0-alpha.3 published on npm, and what changed from 0.1.0-alpha.2 (especially SSR/client handling of raw REACT_LAZY_TYPE children)?
💡 Result:
No, @tanstack/dom-vite@0.1.0-alpha.3 is not published on npm. Extensive searches across npm registry, TanStack repositories, GitHub, and related TanStack Vite plugins (like @tanstack/devtools-vite, @tanstack/vite-config, @tanstack/start-vite-plugin) returned no evidence of this package or version existing. No changelog or mentions of changes from alpha.2 to alpha.3, including SSR/client handling of REACT_LAZY_TYPE children, were found. The package name may be a misremembered or unpublished/internal TanStack project.
Citations:
- 1: https://registry.npmjs.org/%40tanstack%2Fdevtools-vite
- 2: https://www.npmjs.com/package/@tanstack/devtools-vite
- 3: https://github.com/tanstack/config
- 4: https://tanstack.dev/config/latest/docs/vite
- 5: https://tanstack.com/config/latest/docs/vite
- 6: https://www.tanstack.com
- 7: https://github.com/TanStack/tanstack.com/blob/main/vite.config.ts
- 8: How to use react-strict-dom with Vite ? ( and TanStack Start) facebook/react-strict-dom#430
- 9: DOM nodes count keeps in Performance monitoring tab keeps growing virtual#1024
- 10: https://registry.npmjs.org/%40domstack%2Fstatic
- 11: https://registry.npmjs.org/domco
🏁 Script executed:
# Find vite.config file and check its imports
fd -e ts -e js -e mts -e mjs "vite.config" | head -5Repository: TanStack/tanstack.com
Length of output: 79
🏁 Script executed:
# Also search for any references to `@tanstack/dom-vite` in the codebase
rg "@tanstack/dom-vite" --type ts --type jsRepository: TanStack/tanstack.com
Length of output: 128
🏁 Script executed:
cat -n vite.config.ts | head -30Repository: TanStack/tanstack.com
Length of output: 1513
Remove non-existent package dependency
Line 125 adds @tanstack/dom-vite@0.1.0-alpha.3, but this package and version do not exist on npm. While vite.config.ts imports tanstackDom from @tanstack/dom-vite (line 3), the specified version is not published. Adding this to package.json will cause npm install to fail. Either use a published version of this package, find the correct package name, or remove the dependency if it's not needed for this build.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@package.json` at line 125, The dependency entry "@tanstack/dom-vite":
"0.1.0-alpha.3" is invalid (package/version not published) and will break
installs; remove or replace it in package.json and update any imports
accordingly — either change the dependency to a published package/version or
delete the entry and then remove or adjust the import of tanstackDom in
vite.config.ts (the import statement referencing `@tanstack/dom-vite`) so the
build uses a correct package name or no import at all.
1 participant
Summary
@tanstack/dom-vite@0.1.0-alpha.2and enables thetanstackDom()Vite plugin, which aliasesreact/react-dom/react-dom/server/schedulerto a drop-in React-compatible shim (~9-10KB gzipped, single dep pulls the full set).lucide-reactfrom optimizeDeps to avoid the RSC client/ssr/rsc pre-bundle hash divergence the shim exposes.Also piggybacks an oxlint cleanup: ignore
.claude/and disable nested-config discovery so stale agent worktrees inside the repo don't causepnpm lint/ pre-commit to fail on their nested.oxlintrc.jsoncopies.Test plan
pnpm dev— homepage renders, no console errorspnpm build— completes, inspectdist/bundle sizespnpm start:prod— production server renders homepagepnpm test:smoke— all 4 routes green (already verified in pre-commit)Summary by CodeRabbit