docs: fix cli create commands#6959
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughStandardized CLI bootstrap examples to Changes
Sequence Diagram(s)sequenceDiagram
participant Client as Client UI
participant Loader as Route Loader
participant Server as Server Function
participant External as External API (TMDB)
Client->>Loader: Request page /movies
Loader->>Server: call fetchMoviesLoader()
Server->>External: fetch TMDB (API key from env)
External-->>Server: movies JSON
Server-->>Loader: return movies data
Loader-->>Client: render page with movies
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 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)
📝 Coding Plan
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 26428ec
☁️ Nx Cloud last updated this comment at |
![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 `@docs/start/framework/solid/getting-started.md`:
- Line 10: The Markdown contains a malformed link reference `[TanStack Start
CLI]` with no target; replace that token with an inline internal docs link using
the same link text and a docs-relative path (e.g., change `[TanStack Start CLI]`
to `[TanStack Start CLI](<relative-doc-path>)`) so the sentence reads like "
[TanStack Start CLI](... ) - Just run `npx `@tanstack/cli`@latest create
--framework solid`."; ensure the link target is a relative link under the docs
tree per the Markdown guidelines.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b4fd1932-ff27-4a1c-b51f-df61e09a9037
📒 Files selected for processing (7)
docs/start/framework/react/getting-started.mddocs/start/framework/react/guide/hosting.mddocs/start/framework/react/quick-start.mddocs/start/framework/react/tutorial/reading-writing-file.mddocs/start/framework/solid/getting-started.mddocs/start/framework/solid/guide/hosting.mddocs/start/framework/solid/quick-start.md
| Choose one of the following options to start building a _new_ TanStack Start project: | ||
|
|
||
| - [TanStack Start CLI] - Just run `npm create @tanstack/start@latest --framework solid`. Local, fast, and optionally customizable | ||
| - [TanStack Start CLI] - Just run `npx @tanstack/cli@latest create --framework solid`. Local, fast, and optionally customizable |
There was a problem hiding this comment.
Fix malformed Markdown link for “TanStack Start CLI”.
[TanStack Start CLI] has no link target, so this renders as a broken/malformed link reference.
Suggested edit
-- [TanStack Start CLI] - Just run `npx `@tanstack/cli`@latest create --framework solid`. Local, fast, and optionally customizable
+- [TanStack Start CLI](./quick-start) - Just run `npx `@tanstack/cli`@latest create --framework solid`. Local, fast, and optionally customizableAs per coding guidelines, **/*.md: Use internal docs links relative to docs/ folder (e.g., ./guide/data-loading).
📝 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.
| - [TanStack Start CLI] - Just run `npx @tanstack/cli@latest create --framework solid`. Local, fast, and optionally customizable | |
| - [TanStack Start CLI](./quick-start) - Just run `npx `@tanstack/cli`@latest create --framework solid`. Local, fast, and optionally customizable |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/start/framework/solid/getting-started.md` at line 10, The Markdown
contains a malformed link reference `[TanStack Start CLI]` with no target;
replace that token with an inline internal docs link using the same link text
and a docs-relative path (e.g., change `[TanStack Start CLI]` to `[TanStack
Start CLI](<relative-doc-path>)`) so the sentence reads like " [TanStack Start
CLI](... ) - Just run `npx `@tanstack/cli`@latest create --framework solid`.";
ensure the link target is a relative link under the docs tree per the Markdown
guidelines.
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/start/framework/solid/tutorial/fetching-external-api.md`:
- Line 300: Replace the nonstandard capitalization/hyphenation "Server-Side
rendering" with the standard phrase "server-side rendering" in the sentence that
currently reads "3. Server-Side rendering: The data is fetched on the server
reducing the load on the client side" (search for that exact phrase) and also
apply the same hyphenation/case to any other occurrences of "Server-Side
rendering" in this document to ensure consistent wording.
- Around line 130-137: The fetchPopularMovies handler calls TMDB using
process.env.TMDB_AUTH_TOKEN without checking it; add an explicit guard at the
start of the createServerFn().handler (fetchPopularMovies) to throw or return an
error when process.env.TMDB_AUTH_TOKEN is missing or empty before calling
fetch(API_URL), so the request is never attempted with a missing token and the
failure is surfaced; reference the TMDB_AUTH_TOKEN env-var and ensure the
handler responds with a clear error (or throws) indicating the missing token.
- Line 25: Replace the site-absolute markdown link "[TanStack
Router](/router/latest/docs/framework/solid/routing/routing-concepts)" in
fetching-external-api.md with a docs-relative (file‑relative) path to the target
markdown (use a relative path from this file to the routing-concepts doc);
update the same pattern found at the other occurrence around line 314 as well so
all internal docs links are file-relative rather than starting with a leading
slash.
- Around line 31-34: Update the example command in the tutorial to use the
standardized TanStack CLI invocation: replace the existing "pnpx
create-start-app movie-discovery" snippet with "npx `@tanstack/cli`@latest create
--framework solid movie-discovery" while keeping the following "cd
movie-discovery" line unchanged so the tutorial matches the other
getting-started docs.
In `@docs/start/framework/solid/tutorial/reading-writing-file.md`:
- Around line 64-80: The fenced project tree block in the markdown (the
triple-backtick block that lists /devjokes, src/, public/, etc.) lacks a
language identifier; update that fenced code block to use ```text so markdown
linting passes (edit the code block in
docs/start/framework/solid/tutorial/reading-writing-file.md that contains the
project tree).
- Around line 212-215: The import paths in the index.tsx snippet are wrong: from
src/routes/index.tsx the relative imports for createFileRoute/getJokes/JokesList
should go up one level; update the import specifiers referencing
createFileRoute, getJokes, and JokesList so they use ../ (one directory up)
rather than the current paths so the modules resolve correctly.
- Around line 390-414: The handleSubmit function must accept the form submit
event and call event.preventDefault() to stop the browser's default
submit/reload behavior; update the handleSubmit signature to take an Event (or
SubmitEvent) parameter, call event.preventDefault() at the top, then proceed
with the existing logic (setIsSubmitting, addJoke, clearing fields,
router.invalidate, error handling) so the async flow runs without a page reload;
reference the handleSubmit function and the form's onSubmit handler when making
this change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b54ed099-6c52-421a-8f1c-c90a3e0b92be
📒 Files selected for processing (3)
docs/start/framework/solid/guide/hosting.mddocs/start/framework/solid/tutorial/fetching-external-api.mddocs/start/framework/solid/tutorial/reading-writing-file.md
|
|
||
| ## Nice to know | ||
|
|
||
| - [TanStack Router](/router/latest/docs/framework/solid/routing/routing-concepts) |
There was a problem hiding this comment.
Internal docs links should be relative, not site-absolute.
Please switch these to docs-relative links so they remain consistent with repo navigation rules.
As per coding guidelines, "**/*.md: Use internal docs links relative to docs/ folder (e.g., ./guide/data-loading)".
Based on learnings, “use file-relative paths … for links between markdown files within the same project.”
Also applies to: 314-314
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/start/framework/solid/tutorial/fetching-external-api.md` at line 25,
Replace the site-absolute markdown link "[TanStack
Router](/router/latest/docs/framework/solid/routing/routing-concepts)" in
fetching-external-api.md with a docs-relative (file‑relative) path to the target
markdown (use a relative path from this file to the routing-concepts doc);
update the same pattern found at the other occurrence around line 314 as well so
all internal docs links are file-relative rather than starting with a leading
slash.
| ```bash | ||
| pnpx create-start-app movie-discovery | ||
| cd movie-discovery | ||
| ``` |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's see what CLI commands are used elsewhere in the documentation
find docs -name "*.md" -type f | head -20Repository: TanStack/router
Length of output: 895
🏁 Script executed:
# Search for patterns of create commands in documentation files
rg "create-start-app|@tanstack/cli" docs/ --type md -A 2 -B 2Repository: TanStack/router
Length of output: 4038
🏁 Script executed:
# Check git history to understand PR context
git log --oneline --all | grep -i "cli\|create\|start" | head -20Repository: TanStack/router
Length of output: 1586
🏁 Script executed:
# Look for package.json or README that might indicate the official CLI command
find . -maxdepth 3 -name "package.json" -o -name "README.md" | xargs grep -l "create-start-app\|@tanstack/cli" 2>/dev/null | head -10Repository: TanStack/router
Length of output: 41
Update to standardized TanStack CLI create command.
The pnpx create-start-app command is inconsistent with the documentation standard across getting-started, quick-start, guide, and other tutorial sections, which all use npx @tanstack/cli@latest create --framework solid.
Suggested fix
-```bash
-pnpx create-start-app movie-discovery
-cd movie-discovery
-```
+```bash
+npx `@tanstack/cli`@latest create --framework solid movie-discovery
+cd movie-discovery
+```🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/start/framework/solid/tutorial/fetching-external-api.md` around lines 31
- 34, Update the example command in the tutorial to use the standardized
TanStack CLI invocation: replace the existing "pnpx create-start-app
movie-discovery" snippet with "npx `@tanstack/cli`@latest create --framework solid
movie-discovery" while keeping the following "cd movie-discovery" line unchanged
so the tutorial matches the other getting-started docs.
| const fetchPopularMovies = createServerFn().handler( | ||
| async (): Promise<TMDBResponse> => { | ||
| const response = await fetch(API_URL, { | ||
| headers: { | ||
| accept: 'application/json', | ||
| Authorization: `Bearer ${process.env.TMDB_AUTH_TOKEN}`, | ||
| }, | ||
| }) |
There was a problem hiding this comment.
Add an explicit env-var guard before calling TMDB.
This avoids silent auth failures when TMDB_AUTH_TOKEN is missing.
Suggested fix
const fetchPopularMovies = createServerFn().handler(
async (): Promise<TMDBResponse> => {
+ if (!process.env.TMDB_AUTH_TOKEN) {
+ throw new Error('TMDB_AUTH_TOKEN is not set')
+ }
const response = await fetch(API_URL, {
headers: {
accept: 'application/json',
Authorization: `Bearer ${process.env.TMDB_AUTH_TOKEN}`,
},
})📝 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.
| const fetchPopularMovies = createServerFn().handler( | |
| async (): Promise<TMDBResponse> => { | |
| const response = await fetch(API_URL, { | |
| headers: { | |
| accept: 'application/json', | |
| Authorization: `Bearer ${process.env.TMDB_AUTH_TOKEN}`, | |
| }, | |
| }) | |
| const fetchPopularMovies = createServerFn().handler( | |
| async (): Promise<TMDBResponse> => { | |
| if (!process.env.TMDB_AUTH_TOKEN) { | |
| throw new Error('TMDB_AUTH_TOKEN is not set') | |
| } | |
| const response = await fetch(API_URL, { | |
| headers: { | |
| accept: 'application/json', | |
| Authorization: `Bearer ${process.env.TMDB_AUTH_TOKEN}`, | |
| }, | |
| }) |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/start/framework/solid/tutorial/fetching-external-api.md` around lines
130 - 137, The fetchPopularMovies handler calls TMDB using
process.env.TMDB_AUTH_TOKEN without checking it; add an explicit guard at the
start of the createServerFn().handler (fetchPopularMovies) to throw or return an
error when process.env.TMDB_AUTH_TOKEN is missing or empty before calling
fetch(API_URL), so the request is never attempted with a missing token and the
failure is surfaced; reference the TMDB_AUTH_TOKEN env-var and ensure the
handler responds with a clear error (or throws) indicating the missing token.
|
|
||
| 1. Route loader: When a user visits `/fetch-movies`, the loader function runs on the server | ||
| 2. API call: The loader calls `fetchPopularMovies()` which makes an HTTP request to TMDB | ||
| 3. Server-Side rendering: The data is fetched on the server reducing the load on the client side |
There was a problem hiding this comment.
Use standard hyphenation: “server-side rendering.”
Minor wording polish for consistency.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~300-~300: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... on the server reducing the load on the client side 4. Component rendering: The `MoviesPage...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/start/framework/solid/tutorial/fetching-external-api.md` at line 300,
Replace the nonstandard capitalization/hyphenation "Server-Side rendering" with
the standard phrase "server-side rendering" in the sentence that currently reads
"3. Server-Side rendering: The data is fetched on the server reducing the load
on the client side" (search for that exact phrase) and also apply the same
hyphenation/case to any other occurrences of "Server-Side rendering" in this
document to ensure consistent wording.
| ``` | ||
| /devjokes | ||
| ├── src/ | ||
| │ ├── routes/ | ||
| │ │ ├── demo/ # Demo routes | ||
| │ │ ├── __root.tsx # Root layout | ||
| │ │ └── index.tsx # Home page | ||
| │ ├── components/ # Solid components | ||
| │ ├── data/ # Data files | ||
| │ ├── router.tsx # Router configuration | ||
| │ ├── routeTree.gen.ts # Generated route tree | ||
| │ └── styles.css # Global styles | ||
| ├── public/ # Static assets | ||
| ├── vite.config.ts # TanStack Start configuration | ||
| ├── package.json # Project dependencies | ||
| └── tsconfig.json # TypeScript configuration | ||
| ``` |
There was a problem hiding this comment.
Add a language identifier to the fenced code block.
Use ```text for the project tree block to satisfy markdown linting.
🧰 Tools
🪛 markdownlint-cli2 (0.21.0)
[warning] 64-64: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/start/framework/solid/tutorial/reading-writing-file.md` around lines 64
- 80, The fenced project tree block in the markdown (the triple-backtick block
that lists /devjokes, src/, public/, etc.) lacks a language identifier; update
that fenced code block to use ```text so markdown linting passes (edit the code
block in docs/start/framework/solid/tutorial/reading-writing-file.md that
contains the project tree).
| // src/routes/index.tsx | ||
| import { createFileRoute } from '@tanstack/solid-router' | ||
| import { getJokes } from './serverActions/jokesActions' | ||
| import { JokesList } from './JokesList' |
There was a problem hiding this comment.
Import paths in the index.tsx snippet are incorrect.
From src/routes/index.tsx, both paths should go up one level.
Suggested fix
import { createFileRoute } from '@tanstack/solid-router'
-import { getJokes } from './serverActions/jokesActions'
-import { JokesList } from './JokesList'
+import { getJokes } from '../serverActions/jokesActions'
+import { JokesList } from '../components/JokesList'📝 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.
| // src/routes/index.tsx | |
| import { createFileRoute } from '@tanstack/solid-router' | |
| import { getJokes } from './serverActions/jokesActions' | |
| import { JokesList } from './JokesList' | |
| // src/routes/index.tsx | |
| import { createFileRoute } from '@tanstack/solid-router' | |
| import { getJokes } from '../serverActions/jokesActions' | |
| import { JokesList } from '../components/JokesList' |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/start/framework/solid/tutorial/reading-writing-file.md` around lines 212
- 215, The import paths in the index.tsx snippet are wrong: from
src/routes/index.tsx the relative imports for createFileRoute/getJokes/JokesList
should go up one level; update the import specifiers referencing
createFileRoute, getJokes, and JokesList so they use ../ (one directory up)
rather than the current paths so the modules resolve correctly.
| const handleSubmit = async () => { | ||
| if (!question() || !answer() || isSubmitting()) return | ||
| try { | ||
| setIsSubmitting(true) | ||
| await addJoke({ | ||
| data: { question(), answer() }, | ||
| }) | ||
|
|
||
| // Clear form | ||
| setQuestion('') | ||
| setAnswer('') | ||
|
|
||
| // Refresh data | ||
| router.invalidate() | ||
| } catch (error) { | ||
| console.error('Failed to add joke:', error) | ||
| setError('Failed to add joke') | ||
| } finally { | ||
| setIsSubmitting(false) | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <form onSubmit={handleSubmit} class="mb-8"> | ||
| {error && ( |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n docs/start/framework/solid/tutorial/reading-writing-file.md | sed -n '380,420p'Repository: TanStack/router
Length of output: 1496
🌐 Web query:
Solid.js form submission preventDefault handler event parameter
💡 Result:
In Solid.js, for a standard HTML form submission handler using the onSubmit event, the event parameter is a SubmitEvent (typed as JSX.EventHandler<HTMLFormElement, SubmitEvent>). This event has a preventDefault method to stop the default form submission behavior (page reload). Example: function MyForm { const handleSubmit = (e: SubmitEvent) => { e.preventDefault; // Handle form data, e.g., const formData = new FormData(e.currentTarget); console.log('Form submitted'); }; return (
Submit ); } The currentTarget is the HTMLFormElement. Solid.js uses delegated events for onSubmit, but the API is standard DOM. Official docs confirm event handlers receive native DOM events [6,22]. TypeScript typing from Solid.js repo shows Event & { submitter: HTMLElement } & { currentTarget: HTMLFormElement; target: Element; } [16]. Note: In Solid Router/Solid Start, use action with instead of onSubmit; it handles preventDefault automatically [4,5]. Form libraries like Modular Forms pass form values first, event second, and call preventDefault internally [1].Citations:
- 1: https://modularforms.dev/solid/guides/handle-submission
- 2: https://docs.solidjs.com/solid-router/concepts/actions
- 3: https://docs.solidjs.com/solid-start/guides/data-mutation
- 4: https://docs.solidjs.com/concepts/components/event-handlers
- 5: What is the correct type for a form event? solidjs/solid#1552
- 6: https://docs.solidjs.com/reference/jsx-attributes/on_
Add preventDefault() to the handleSubmit form submission.
Without it, the browser's default form submission will trigger a page reload despite the async handler completing. The form handler should accept and prevent the submit event.
Suggested fix
- const handleSubmit = async () => {
+ const handleSubmit = async (e: SubmitEvent) => {
+ e.preventDefault()
if (!question() || !answer() || isSubmitting()) return📝 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.
| const handleSubmit = async () => { | |
| if (!question() || !answer() || isSubmitting()) return | |
| try { | |
| setIsSubmitting(true) | |
| await addJoke({ | |
| data: { question(), answer() }, | |
| }) | |
| // Clear form | |
| setQuestion('') | |
| setAnswer('') | |
| // Refresh data | |
| router.invalidate() | |
| } catch (error) { | |
| console.error('Failed to add joke:', error) | |
| setError('Failed to add joke') | |
| } finally { | |
| setIsSubmitting(false) | |
| } | |
| } | |
| return ( | |
| <form onSubmit={handleSubmit} class="mb-8"> | |
| {error && ( | |
| const handleSubmit = async (e: SubmitEvent) => { | |
| e.preventDefault() | |
| if (!question() || !answer() || isSubmitting()) return | |
| try { | |
| setIsSubmitting(true) | |
| await addJoke({ | |
| data: { question(), answer() }, | |
| }) | |
| // Clear form | |
| setQuestion('') | |
| setAnswer('') | |
| // Refresh data | |
| router.invalidate() | |
| } catch (error) { | |
| console.error('Failed to add joke:', error) | |
| setError('Failed to add joke') | |
| } finally { | |
| setIsSubmitting(false) | |
| } | |
| } | |
| return ( | |
| <form onSubmit={handleSubmit} class="mb-8"> | |
| {error && ( |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/start/framework/solid/tutorial/reading-writing-file.md` around lines 390
- 414, The handleSubmit function must accept the form submit event and call
event.preventDefault() to stop the browser's default submit/reload behavior;
update the handleSubmit signature to take an Event (or SubmitEvent) parameter,
call event.preventDefault() at the top, then proceed with the existing logic
(setIsSubmitting, addJoke, clearing fields, router.invalidate, error handling)
so the async flow runs without a page reload; reference the handleSubmit
function and the form's onSubmit handler when making this change.
1 participant
Running
npm create @tanstack/start@latestcauses aTherefore, I've updated to use the
npx @tanstack/cli@latest createeverywhereSummary by CodeRabbit
Documentation
New Tutorials