docs: update build-from-scratch replacements for SolidJS #5216
Conversation
WalkthroughUpdated documentation mapping in the Solid build-from-scratch guide to replace React packages, plugins, JSX runtime settings, import shims, type references, and wording with SolidJS equivalents; retained some existing mappings to Solid-specific packages. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (2)docs/**/*.{md,mdx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
docs/{router,start}/**📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (2)📓 Common learnings📚 Learning: 2025-09-23T17:36:12.598ZApplied to files:
🔇 Additional comments (1)
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. Comment |
|
View your CI Pipeline Execution ↗ for commit baf13f6
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/start/framework/solid/build-from-scratch.md(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/start/framework/solid/build-from-scratch.md
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/start/framework/solid/build-from-scratch.md
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.589Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
📚 Learning: 2025-09-23T17:36:12.589Z
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.589Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Applied to files:
docs/start/framework/solid/build-from-scratch.md
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
docs/start/framework/solid/build-from-scratch.md (1)
9-9: Add replacements for the plugin identifier and call site.Changing only the package specifier will leave code like
import react from 'vite-plugin-solid'andplugins: [react()]. Add mappings for the identifier and invocation.'@vitejs/plugin-react': 'vite-plugin-solid', + 'import react from': 'import solid from', + 'react()': 'solid()',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/start/framework/solid/build-from-scratch.md(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/start/framework/solid/build-from-scratch.md
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/start/framework/solid/build-from-scratch.md
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.589Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
📚 Learning: 2025-09-23T17:36:12.589Z
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.589Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Applied to files:
docs/start/framework/solid/build-from-scratch.md
🔇 Additional comments (2)
docs/start/framework/solid/build-from-scratch.md (2)
8-8: LGTM on package replacement for install commands.Mapping
react react-dom→solid-jscorrectly updates add/install lines.
12-12: Nice fix on quoting for possessives.Using double quotes ensures
react's→solid'sis parsed and applied.
| 'react-router': 'solid-router', | ||
| 'react react-dom': 'solid-js', | ||
| '@vitejs/plugin-react': 'vite-plugin-solid', | ||
| '@types/react @types/react-dom ': '', |
There was a problem hiding this comment.
Remove the trailing space in the key so the replacement actually matches.
The key has a trailing space, which will prevent matches in most occurrences.
- '@types/react @types/react-dom ': '',
+ '@types/react @types/react-dom': '',📝 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.
| '@types/react @types/react-dom ': '', | |
| '@types/react @types/react-dom': '', |
🤖 Prompt for AI Agents
In docs/start/framework/solid/build-from-scratch.md around line 10, the
replacement key "'@types/react @types/react-dom '": '' contains a trailing space
which prevents matches; remove the trailing space so the key reads
"'@types/react @types/react-dom'": '' to ensure replacements match correctly
across occurrences.
| '@tanstack/react-start': '@tanstack/solid-start', | ||
| 'React': 'SolidJS', | ||
| 'react-router': 'solid-router', | ||
| 'react react-dom': 'solid-js', |
There was a problem hiding this comment.
so i guess it just string replaces the docs? I wonder how we would add the viteSolid({ssr: true}) part
There was a problem hiding this comment.
Yeah, it's not the most flexible solution. I couldn't figure out a way to fix the children prop types in __root.tsx either
There was a problem hiding this comment.
Not pretty but could just add 'viteReact()': 'viteSolid({ssr:true})' into the replace array as well
There was a problem hiding this comment.
I think there are some bigger differences like not hydrating the whole html document
There was a problem hiding this comment.
Problem seems to be in the __root.tsx file
function RootDocument({ children }: Readonly<{ children: Solid.JSX.Element }>) {
return (
<html>
<head>
<HeadContent />
</head>
<body>
{children}
<Scripts />
</body>
</html>
);
}from looking at the start-bare and start-basic examples it seems like it should be:
function RootDocument({ children }: Readonly<{ children: Solid.JSX.Element }>) {
return (
<>
<HeadContent />
{children}
<Scripts />
</>
);
}at least this got it as far running under development mode.
will see if I can push to this PR.
brenelz
left a comment
brenelz
left a comment
There was a problem hiding this comment.
I guess can't really preview what this would output but overall looks good
used a local instance of tanstack.com to test, seems fine. will continue with the merge then. @jakst thanks for working on this. |
3 participants
The docs make references to react in a lot of places. I updated the ones I could find in the build-from-scratch guide to use proper solid-js package names and other references.
Summary by CodeRabbit