feat(server, react)!: remake server action#308
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis PR introduces the new Changes
Sequence Diagram(s)sequenceDiagram
participant C as React Component
participant H as useServerAction Hook
participant A as ActionableClient
participant S as Server
C->>H: Invoke execute(input)
H->>A: Call actionable client with input
A->>S: Request processing (RPC)
S-->>A: Return data / error
A-->>H: Pass response
H-->>C: Update state (idle → pending → success/error)
sequenceDiagram
participant U as User
participant F as Form (redirectToScalarForm)
participant CA as createFormAction
participant D as dosomething Procedure
participant I as onSuccess Interceptor
participant R as Response (redirect)
U->>F: Submit form data
F->>CA: Process form action
CA->>D: Invoke dosomething action with input
D-->>CA: Return result or error
CA->>I: Trigger onSuccess interceptor
I-->>CA: Return redirect signal
CA-->>F: Complete action (redirect)
F-->>U: Redirect to Scalar Client Page
Possibly related PRs
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
More templates
@orpc/arktype
@orpc/client
@orpc/openapi
@orpc/contract
@orpc/openapi-client
@orpc/react
@orpc/react-query
@orpc/server
@orpc/shared
@orpc/solid-query
@orpc/standard-server
@orpc/standard-server-fetch
@orpc/standard-server-node
@orpc/svelte-query
@orpc/valibot
@orpc/vue-colada
@orpc/vue-query
@orpc/zod
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: 4
🧹 Nitpick comments (24)
packages/client/README.md (1)
56-56: Add@orpc/reactEntry for React Integration
The new bullet clearly informs users about the@orpc/reactpackage and its role in providing utilities for integrating oRPC with React and React Server Actions. The entry is consistent with similar ones in other packages’ READMEs.🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/standard-server-fetch/README.md (1)
56-56: Introduce@orpc/reactin Standard Server Fetch Documentation
This addition succinctly explains the new React integration utility. It aligns well with how the package list is structured in the project. You might consider a slight rewording of sentence beginnings if the static analysis hint about repetitive phrasing becomes an issue.🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/shared/README.md (1)
61-61: Document@orpc/reactAddition in Shared Package README
The update adds a clear and useful entry for the new package. Its description effectively communicates that the package provides utilities for React integration. The uniform style is good; however, you may recheck the phrasing if the static analysis regarding repeated sentence starts persists.🧰 Tools
🪛 LanguageTool
[style] ~61-~61: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/openapi/README.md (1)
56-56: Update with@orpc/reactEntry in OpenAPI Documentation
The entry for@orpc/reactis well-integrated in the packages list. It clearly states that the package delivers utilities for integrating with React and React Server Actions, which aligns perfectly with the overall documentation update. Consider addressing the static analysis note about repetitive sentence structures if needed.🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/arktype/README.md (1)
56-56: Add@orpc/reactDocumentation in ArkType README
This change maintains consistency by adding the new package entry for@orpc/react, along with its clear description as a utility for React integration. The structure matches other README files in the repo. A minor stylistic tweak might be considered if the repeated sentence beginnings flagged by static analysis become a concern.🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/standard-server-node/README.md (1)
51-57: Suggestion: Vary Bullet List Descriptions.
A static analysis hint noted that successive bullet points may start with similar phrasing. Consider varying the opening words of each description to enhance readability.🧰 Tools
🪛 LanguageTool
[style] ~55-~55: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... your API or implement API contract. - [@orpc/client](https://www.npmjs.com/package/@...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~57-~57: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...with React and React Server Actions. - [@orpc/react-query](https://www.npmjs.com/pack...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/contract/README.md (1)
51-57: Minor Suggestion on Bullet Descriptions.
To improve clarity and flow, you might consider varying the introductory language across successive bullet points.🧰 Tools
🪛 LanguageTool
[style] ~55-~55: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... your API or implement API contract. - [@orpc/client](https://www.npmjs.com/package/@...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~57-~57: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...with React and React Server Actions. - [@orpc/react-query](https://www.npmjs.com/pack...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/svelte-query/README.md (1)
51-57: Suggestion: Vary Bullet Sentence Openings.
Consider using varied phrasing in the bullet list to avoid repetitive sentence openings, which can help improve overall readability.🧰 Tools
🪛 LanguageTool
[style] ~55-~55: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... your API or implement API contract. - [@orpc/client](https://www.npmjs.com/package/@...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~57-~57: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...with React and React Server Actions. - [@orpc/react-query](https://www.npmjs.com/pack...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/server/README.md (1)
51-57: Nitpick: Bullet List Sentence Variation.
To further enhance the documentation’s readability, consider rephrasing some of the bullet point descriptions so they don’t all start with the same word or structure.🧰 Tools
🪛 LanguageTool
[style] ~55-~55: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... your API or implement API contract. - [@orpc/client](https://www.npmjs.com/package/@...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~57-~57: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...with React and React Server Actions. - [@orpc/react-query](https://www.npmjs.com/pack...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/vue-colada/README.md (1)
56-56: New @orpc/react Package Entry Added
The new package entry clearly describes@orpc/reactas providing "Utilities for integrating oRPC with React and React Server Actions." This addition is consistent with similar entries in other documentation files.Consider reviewing the phrasing if LanguageTool hints about repeated sentence beginnings become an issue—even though the style here is already in line with the other entries.
🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/solid-query/README.md (1)
56-56: New @orpc/react Package Entry Added
The entry for@orpc/reactis added with a succinct and clear description that matches the pattern used in the rest of the document. This consistency improves discoverability for developers seeking React integration details.A minor stylistic review is recommended if any repetitive sentence structure warnings appear, but the current format is acceptable.
🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/valibot/README.md (1)
56-56: New @orpc/react Package Entry Added
This new entry describes@orpc/reacteffectively as "Utilities for integrating oRPC with React and React Server Actions." The entry aligns well with the other package descriptions across the project.You might consider a brief stylistic review to avoid potential LanguageTool flags regarding similar sentence beginnings, though this is a minor nitpick.
🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/standard-server/README.md (1)
56-56: New @orpc/react Package Entry Added
The inclusion of@orpc/reactin the Packages section, with its clear description, is a great addition. It helps users quickly identify relevant integration utilities for React and React Server Actions.Ensure that the formatting and language style remains consistent with other entries. A small adjustment to diversify sentence openings might be beneficial if similar warnings arise.
🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/zod/README.md (1)
56-56: New @orpc/react Package Entry Added
The update adds the@orpc/reactpackage with a straightforward explanation, matching the style of similar entries in other READMEs. This helps reinforce the availability of React-specific utilities across the project.A slight rewording could be considered in the future if repetitive sentence patterns trigger stylistic alerts, but the current implementation is clear and consistent.
🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
playgrounds/nextjs/src/app/orpc-server-action.tsx (1)
8-14: Consider adding error handling to the server actionThe implementation uses the new hook and success interceptor pattern, which is good. However, there's no error handling in place.
Consider adding an error interceptor to provide feedback when actions fail:
const state = useServerAction(getting, { interceptors: [ onSuccess((message) => { alert(message) }), + onError((error) => { + alert(`Error: ${error.message}`) + }), ], })playgrounds/nextjs/src/app/actions.ts (1)
19-30: Add return type and error handling to the procedureThe
dosomethingprocedure logs input but doesn't have explicit error handling or a defined return type.Consider enhancing the procedure with type definitions and error handling:
const dosomething = pub .input(z.object({ user: z.object({ name: z.string(), age: z.coerce.number(), }), })) + .output(z.void()) .handler(({ input }) => { console.log('An form action was called!') console.log(input) + // Consider error handling here + // if (someCondition) throw new Error('Invalid input') })packages/react/src/action-hooks.test.tsx (1)
7-16: Consider handling undefined input more explicitly.
Although the input schema is optional, you might want to ensure that an undefined input is handled gracefully or defaults to a specific value to prevent potential edge cases.packages/react/src/server/action-form.ts (1)
13-22: Interceptor design is valid; consider additional statuses if needed.
Transforming 401, 403, 404 to Next.js-friendly errors covers key scenarios. If you also handle other codes (e.g., 500), consider extending this approach. Otherwise, this is a sound interceptor.packages/react/README.md (1)
146-156: Sponsors and license information properly included.The README appropriately acknowledges sponsors and licensing information.
However, there's a minor issue in the sponsors image:
- <a href="https://cdn.jsdelivr.net/gh/unnoq/unnoq/sponsors.svg"> - <img src='https://cdn.jsdelivr.net/gh/unnoq/unnoq/sponsors.svg'/> + <a href="https://cdn.jsdelivr.net/gh/unnoq/unnoq/sponsors.svg"> + <img src='https://cdn.jsdelivr.net/gh/unnoq/unnoq/sponsors.svg' alt="Sponsors"/>Adding the
altattribute to the image would improve accessibility and fix the static analysis warning.🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
150-150: Images should have alternate text (alt text)
null(MD045, no-alt-text)
packages/server/src/procedure-decorated.ts (3)
130-133: Avoid Casting toanyfor Stronger Type SafetyIn the
callablemethod,...rest as anycan undermine type safety. Consider preserving or refining parameter types to maintain strict typing instead of resorting toas any.
159-162: Further Type-Safety PossibleWhile constructing the
actionclient, consider avoiding...rest as anyto maintain strict typing, similar to the caution given in thecallablemethod.
163-170: Consider Extracting Shared Proxy LogicReturning a
Proxyhere mirrors the pattern incallable. If multiple methods use the same reflection approach, factoring this into a shared helper could reduce duplication.packages/react/src/action-hooks.ts (2)
103-141: Consider concurrency handling and canceled updates on unmounted components.
If multiple calls toexecute()happen in quick succession or if the component is unmounted before a call completes, the final state could be inaccurate or cause an attempted state update after unmount. Consider implementing concurrency control or an abort mechanism.
147-153: Avoid casting the final result toany.
Casting the hook’s return value toanyreduces type-safety, potentially obscuring type errors. Instead, use proper type assertions or rely on TypeScript inference to ensure safe return types.- return result as any + return result
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (50)
README.md(1 hunks)apps/content/docs/procedure.md(1 hunks)apps/content/docs/server-action.md(2 hunks)apps/content/package.json(1 hunks)packages/arktype/README.md(1 hunks)packages/client/README.md(1 hunks)packages/client/src/types.test-d.ts(2 hunks)packages/contract/README.md(1 hunks)packages/openapi-client/README.md(1 hunks)packages/openapi/README.md(1 hunks)packages/react-query/README.md(1 hunks)packages/react/.gitignore(1 hunks)packages/react/README.md(1 hunks)packages/react/package.json(1 hunks)packages/react/src/action-hooks.test-d.ts(1 hunks)packages/react/src/action-hooks.test.tsx(1 hunks)packages/react/src/action-hooks.ts(1 hunks)packages/react/src/index.ts(1 hunks)packages/react/src/server/action-form.test.ts(1 hunks)packages/react/src/server/action-form.ts(1 hunks)packages/react/src/server/index.ts(1 hunks)packages/react/tsconfig.json(1 hunks)packages/server/README.md(1 hunks)packages/server/src/implementer-procedure.test-d.ts(3 hunks)packages/server/src/implementer-procedure.ts(2 hunks)packages/server/src/index.ts(1 hunks)packages/server/src/procedure-action.test-d.ts(1 hunks)packages/server/src/procedure-action.test.ts(1 hunks)packages/server/src/procedure-action.ts(1 hunks)packages/server/src/procedure-decorated.test-d.ts(2 hunks)packages/server/src/procedure-decorated.test.ts(3 hunks)packages/server/src/procedure-decorated.ts(3 hunks)packages/shared/README.md(1 hunks)packages/shared/src/interceptor.test-d.ts(4 hunks)packages/shared/src/interceptor.ts(1 hunks)packages/solid-query/README.md(1 hunks)packages/standard-server-fetch/README.md(1 hunks)packages/standard-server-node/README.md(1 hunks)packages/standard-server/README.md(1 hunks)packages/svelte-query/README.md(1 hunks)packages/valibot/README.md(1 hunks)packages/vue-colada/README.md(1 hunks)packages/vue-query/README.md(1 hunks)packages/zod/README.md(1 hunks)playgrounds/nextjs/next.config.ts(1 hunks)playgrounds/nextjs/package.json(2 hunks)playgrounds/nextjs/src/app/actions.ts(2 hunks)playgrounds/nextjs/src/app/orpc-server-action.tsx(1 hunks)playgrounds/nextjs/src/app/page.tsx(2 hunks)vitest.workspace.ts(1 hunks)
🧰 Additional context used
🧬 Code Definitions (9)
playgrounds/nextjs/src/app/actions.ts (4)
playgrounds/nextjs/src/orpc.ts (1)
pub(5-6)packages/react/src/server/action-form.ts (1)
createFormAction(24-56)playgrounds/nextjs/src/app/orpc-mutation.tsx (1)
onSuccess(11-15)packages/server/src/index.ts (1)
onSuccess(39-39)
packages/server/src/procedure-action.test.ts (1)
packages/server/src/procedure-action.ts (1)
createActionableClient(29-42)
packages/react/src/action-hooks.test-d.ts (1)
packages/react/src/action-hooks.ts (1)
useServerAction(84-154)
packages/server/src/implementer-procedure.ts (2)
packages/server/src/procedure-client.ts (1)
CreateProcedureClientOptions(44-68)packages/server/src/procedure-action.ts (1)
ProcedureActionableClient(19-27)
packages/server/src/procedure-decorated.test-d.ts (3)
packages/server/src/procedure-action.ts (2)
ActionableClient(15-17)ActionableError(5-5)packages/contract/src/error.ts (1)
ErrorFromErrorMap(43-43)packages/contract/tests/shared.ts (1)
baseErrorMap(12-17)
packages/server/src/procedure-decorated.ts (2)
packages/server/src/procedure-client.ts (3)
ProcedureClient(14-24)createProcedureClient(70-123)CreateProcedureClientOptions(44-68)packages/server/src/procedure-action.ts (2)
ProcedureActionableClient(19-27)createActionableClient(29-42)
packages/server/src/implementer-procedure.test-d.ts (3)
packages/server/src/procedure-action.ts (2)
ActionableClient(15-17)ActionableError(5-5)packages/contract/src/error.ts (1)
ErrorFromErrorMap(43-43)packages/contract/tests/shared.ts (1)
baseErrorMap(12-17)
packages/react/src/server/action-form.test.ts (1)
packages/react/src/server/action-form.ts (1)
createFormAction(24-56)
packages/server/src/procedure-action.ts (1)
packages/server/src/index.ts (4)
ORPCError(23-23)ErrorMap(29-29)InferSchemaInput(31-31)InferSchemaOutput(32-32)
🪛 LanguageTool
packages/react-query/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/client/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/shared/README.md
[style] ~61-~61: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/vue-query/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/openapi/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/standard-server-node/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/server/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/contract/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/standard-server/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/openapi-client/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/arktype/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/zod/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/standard-server-fetch/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/solid-query/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/react/README.md
[misspelling] ~35-~35: Possible spelling mistakes found.
Context: ...tack Query (React, Vue, Solid, Svelte), Pinia Colada, and more. - Server Actions ⚡️: Ful...
(EN_MULTITOKEN_SPELLING_TWO)
[style] ~55-~55: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... your API or implement API contract. - [@orpc/client](https://www.npmjs.com/package/@...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~57-~57: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...with React and React Server Actions. - [@orpc/react-query](https://www.npmjs.com/pack...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~58-~58: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...test/docs/framework/react/overview). - [@orpc/vue-query](https://www.npmjs.com/packag...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~59-~59: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...latest/docs/framework/vue/overview). - [@orpc/solid-query](https://www.npmjs.com/pack...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~60-~60: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...test/docs/framework/solid/overview). - [@orpc/svelte-query](https://www.npmjs.com/pac...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~61-~61: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...est/docs/framework/svelte/overview). - [@orpc/vue-colada](https://www.npmjs.com/packa...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[misspelling] ~61-~61: Possible spelling mistakes found.
Context: ...ge/@orpc/vue-colada): Integration with Pinia Colada. - [@or...
(EN_MULTITOKEN_SPELLING_TWO)
[style] ~62-~62: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...ada](https://pinia-colada.esm.dev/). - [@orpc/openapi](https://www.npmjs.com/package/...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~63-~63: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...I specs and handle OpenAPI requests. - [@orpc/zod](https://www.npmjs.com/package/@orp...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~64-~64: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...tps://zod.dev/) doesn't support yet. - [@orpc/valibot](https://www.npmjs.com/package/...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~65-~65: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...rom Valibot. - [@orpc/arktype](https://www.npmjs.com/package/...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/valibot/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/vue-colada/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/svelte-query/README.md
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
🪛 markdownlint-cli2 (0.17.2)
packages/react/README.md
150-150: Images should have alternate text (alt text)
null
(MD045, no-alt-text)
🪛 GitHub Actions: CI
packages/react/src/action-hooks.test.tsx
[error] 32-32: You called act(async () => ...) without await. This could lead to unexpected testing behaviour, interleaving multiple act calls and mixing their scopes. You should - await act(async () => ...);
[error] 67-67: TypeError: Cannot read properties of null (reading 'status')
[error] 124-124: TypeError: Cannot read properties of null (reading 'execute')
🔇 Additional comments (98)
packages/react/src/server/index.ts (1)
1-2: LGTM: New export provides access to action-form functionalityThe export statement correctly exposes the action-form module, which appears to be part of the new React server action functionality mentioned in the PR objectives.
packages/react/src/index.ts (1)
1-2: LGTM: New export for action-hooks provides client-side accessThis export statement correctly exposes the action-hooks module at the package level, allowing consumers to import hooks for interacting with server actions directly from
@orpc/react.apps/content/package.json (1)
16-16: LGTM: Added @orpc/react dependency to content appThe addition of the
@orpc/reactworkspace dependency is consistent with the PR's objective of adding React utilities and hooks for server actions. Using a workspace reference ensures the content app always uses the local version during development.packages/server/src/index.ts (1)
14-14:Details
✅ Verification successful
LGTM: New export provides access to procedure-action functionality
This export statement correctly exposes the procedure-action module, which is likely a key component of the server action rewrite mentioned in the PR objectives. This allows consumers to access the server-side functionality for creating actionable procedures.
I recommend verifying that all necessary types from this module are properly exported to ensure API consistency.
🏁 Script executed:
#!/bin/bash # Check what's being exported from procedure-action module and verify its completeness cat packages/server/src/procedure-action.ts | grep -E "export |export type" | grep -v "from"Length of output: 800
LGTM: Confirmed complete re-export of procedure-action features
The re-export in
packages/server/src/index.tsproperly exposes theprocedure-actionmodule. Our check confirms that key types and functions—such asActionableError,UnactionableError,ActionableClientRest,ActionableClientResult,ActionableClient,ProcedureActionableClient, andcreateActionableClient—are being exported. Please verify that the definition forActionableClientRestis complete and aligned with the intended API design.apps/content/docs/procedure.md (1)
31-31: Clarify.actionable()Usage.
The updated comment "Server Action compatibility" succinctly captures the purpose of the.actionable()modifier, improving clarity on how this procedure integrates with server actions.packages/standard-server-node/README.md (1)
56-56: New Package Entry for@orpc/react.
The addition of the@orpc/reactpackage in the Packages section clearly informs users about its role in integrating oRPC with React and React Server Actions.🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/contract/README.md (1)
56-56: Consistent Addition of@orpc/reactEntry.
The new bullet entry for@orpc/reactenhances the package documentation by clearly stating its purpose, ensuring consistency with similar additions across the repository.🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/svelte-query/README.md (1)
56-56: New Documentation Entry for@orpc/react.
The bullet entry for@orpc/reactclearly communicates its functionality—providing utilities for integrating oRPC with React and React Server Actions—while remaining consistent with the updates in other package READMEs.🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/server/README.md (1)
56-56: Addition of@orpc/reactPackage.
Including the@orpc/reactpackage in the Packages list is well documented and helps users quickly locate the tools for integrating React with oRPC server actions.🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
playgrounds/nextjs/next.config.ts (1)
11-13:Details
✅ Verification successful
Enabled Next.js experimental authentication feature
The addition of the
authInterruptsexperimental feature in Next.js configuration aligns with the server action rewrite objectives of this PR. This feature enhances authentication handling during server actions.
🏁 Script executed:
#!/bin/bash # Verify if this Next.js experimental feature is documented or referenced elsewhere rg "authInterrupts" --type mdLength of output: 29
I'm not seeing any Markdown documentation references for
authInterruptswith the previous search. To further confirm its usage and documentation across the entire repository (and not just in Markdown files), please run the following shell script:This extended search will help us verify if the experimental feature is referenced anywhere else in the codebase, ensuring we don't miss any related documentation or usage.
🏁 Script executed:
#!/bin/bash # Search for "authInterrupts" references across the entire repository rg "authInterrupts"Length of output: 79
Action: Approved – Experimental Feature Integration Verified
The integration of the
authInterruptsexperimental feature in the Next.js configuration (located inplaygrounds/nextjs/next.config.tsat lines 11–13) aligns with the server action rewrite objectives in this PR. Our repository-wide search confirms that this flag is only referenced in this configuration file, and no additional documentation or conflicting usage was found elsewhere.
- Location:
playgrounds/nextjs/next.config.ts(lines 11–13)- Snippet:
experimental: { authInterrupts: true, },Given its experimental nature, please ensure that you perform thorough manual testing of related authentication flows as the feature evolves in future Next.js releases.
README.md (1)
56-56: Documentation updated with new @orpc/react packageThe addition of the
@orpc/reactpackage to the documentation is appropriate and aligns with the PR objectives of introducing React utilities and hooks.🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/react-query/README.md (1)
56-56: Documentation updated with new @orpc/react packageAdding the
@orpc/reactpackage reference to this package's README maintains documentation consistency across the project and informs users about the new React integration capabilities.🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/vue-query/README.md (1)
56-56: Documentation updated with new @orpc/react packageIncluding the
@orpc/reactpackage reference in the Vue Query README demonstrates good cross-package documentation practice, ensuring users are aware of all available integration options regardless of which package documentation they're viewing.🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
packages/shared/src/interceptor.test-d.ts (2)
8-8: Updated return type expectation to include error handlingThe type test has been updated to reflect the enhanced return type of
options.next(), which now includes an optional__errorproperty. This matches the changes in the interceptor implementation to support rich error handling.
18-18: Consistent error type handling across all interceptorsThe same return type expectation has been consistently applied to all interceptor functions (onStart, onSuccess, onError, onFinish), ensuring uniform error handling throughout the interceptor chain.
Also applies to: 28-28, 38-38
packages/openapi-client/README.md (1)
56-56: Documentation added for new @orpc/react packageThe README has been updated to include information about the new
@orpc/reactpackage, which provides utilities for integrating oRPC with React and React Server Actions. This aligns with the PR objective of introducing utilities and hooks for React.🧰 Tools
🪛 LanguageTool
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
vitest.workspace.ts (1)
19-19: Updated test configuration for new React packageThe test configuration has been modified to include tests from the new
reactpackage instead of thenextpackage. This change ensures that tests for the newly introduced React utilities are included in the test suite.playgrounds/nextjs/src/app/page.tsx (2)
1-1: Added import for new server action functionThe
redirectToScalarFormfunction is imported from the actions module to support the new form-based redirection approach.
10-18: Replaced link with form using server actionThis change demonstrates practical usage of the new React Server Actions functionality. The previous link to the Scalar API reference has been replaced with a form that submits to the
redirectToScalarFormaction, passing user information as hidden inputs.The form implementation showcases how the new
@orpc/reactutilities can be used with React Server Actions for form submissions and redirects in a Next.js application.packages/react/tsconfig.json (1)
1-16: TypeScript configuration for React package looks good!The configuration extends the base library config and correctly excludes test files, benchmarks, and other non-source files from compilation. The empty
typesarray is fine if the base configuration already includes necessary types.packages/react/.gitignore (1)
1-26: Well-structured .gitignore fileThis .gitignore follows best practices by ignoring common generated directories, build artifacts, logs, and sensitive files while appropriately allowing tracked exceptions.
playgrounds/nextjs/src/app/orpc-server-action.tsx (2)
3-5: Proper import of new React hook and client utilitiesThe imports correctly bring in the new
useServerActionhook and theonSuccessinterceptor for handling successful action responses.
16-19: Form action no longer awaits the resultThe form action now uses the state's execute method instead of directly awaiting the result. This is the correct approach with the
useServerActionhook as response handling is delegated to interceptors.playgrounds/nextjs/src/app/actions.ts (2)
5-7: Appropriate imports for form actions and navigationThe imports correctly bring in the necessary utilities for creating form actions and handling navigation.
31-37: Form action with redirect follows Next.js best practicesThe implementation of
redirectToScalarFormcorrectly usescreateFormActionwith theonSuccessinterceptor to handle navigation after form submission. This follows Next.js best practices for handling redirects after server actions.packages/server/src/procedure-decorated.test.ts (3)
4-4: Import looks good for the new actionable client functionality.The import statement correctly adds the new
createActionableClientfunction that will be tested within this file.
19-22: Mock implementation looks well-structured.The new mock for
procedure-actionfollows the same pattern as the existing mocks in the file, which is good for consistency. It preserves the original module exports while adding a mock implementation forcreateActionableClient.
141-143: Test assertions correctly verify actionable client creation.These assertions ensure that
createActionableClientis called exactly once and with the correct parameter (the result from the mockedcreateProcedureClient). This properly tests the integration between the procedure client and the actionable client.packages/server/src/procedure-action.test.ts (4)
1-13: Tests for successful action execution look good.The test correctly verifies that
createActionableClientreturns the expected format[null, result]on success and that the original client is called with the correct input.
15-20: ORPCError handling test is well-implemented.This test correctly validates that when the client throws an ORPCError, the action returns it in the expected format with the error details in the first element of the array and undefined in the second.
22-27: Non-ORPCError handling test provides good coverage.The test verifies that when a generic Error is thrown, it's properly converted to a standard internal server error format, which is important for consistent error handling.
29-36: Security test for ignoring additional arguments is valuable.This test is important as it verifies that extra arguments passed to the action are ignored, preventing potential security issues or unexpected behavior when users misuse the API.
packages/react/package.json (4)
1-17: Package metadata is well-structured.The package metadata follows best practices with appropriate name, version, license, and repository information. The keywords are relevant to the package's purpose.
18-35: Export configuration is clean and supports multiple entry points.The export configuration properly defines both CommonJS and ESM entry points for the main package and a server-specific entry point, which is important for React Server Components compatibility.
44-46: Peer dependency specification looks appropriate.Requiring React 18+ is appropriate since this package likely uses modern React features. This ensures compatibility with applications using the latest React versions.
47-56: Dependencies and devDependencies look good.The package correctly uses workspace dependencies for related oRPC packages and includes zod as a development dependency for schema validation in tests.
packages/react/src/action-hooks.test-d.ts (6)
1-6: Imports and setup are correctly structured.The imports bring in the necessary types and utilities for testing the useServerAction hook, and the setup imports shared test schemas from the contract package.
7-18: Test action setup is clear and appropriate.The test creates an actionable client using the server object pattern, with proper input/output schemas and error handling. This provides a good foundation for testing the hook's type behavior.
19-27: Input type inference tests are comprehensive.These tests thoroughly verify that the hook correctly infers input types, accepts valid inputs, and rejects invalid ones at compile time through TypeScript's type checking.
29-43: Required input tests validate type safety.This test case ensures that the hook enforces non-undefined inputs when the schema requires them, which is important for type safety in application code.
45-89: Interceptor tests are thorough and check type propagation.These tests verify that interceptors receive correctly typed inputs and can properly handle errors and data. The type expectations ensure proper type propagation throughout the interceptor chain.
91-117: Output state type tests are comprehensive.These tests verify that the hook's state correctly reflects the type of data based on the current state (idle, pending, success, error). This ensures that consumers of the hook can safely access data based on the current state.
packages/react/src/action-hooks.test.tsx (1)
1-5: Imports look good.
No issues found in these import statements; they appear to be accurate and relevant for the test setup.packages/react/src/server/action-form.ts (2)
9-11: Interface appears straightforward.
DeclaringFormActionas a function that takesFormDataand returnsPromise<void>is clear and concise.
24-57: Implementation of createFormAction looks good.
Merging interceptors, deserializing form data, and invoking the client are logically structured. Error mapping is neatly handled by the custom interceptor.packages/shared/src/interceptor.ts (2)
8-10: Enhanced type signature for next with TError is beneficial.
Adding the new genericTErrorand the__errorobject to the return type improves flexibility for detailed error handling.
17-17: Consistent Interceptor type update.
Aligning theInterceptortype definition with the changes toInterceptorOptionsensures consistency across the interceptor framework.packages/server/src/implementer-procedure.test-d.ts (2)
1-1: Import changes reflect new architecture for actionable clients.The imports have been updated to use
ActionableClientandActionableErrortypes, aligning with the server action rewrite mentioned in the PR objectives.Also applies to: 12-12
202-202: Type signature updated for actionable method.The updated type signature properly leverages the new
ActionableClientandActionableErrortypes, providing better type safety for error handling with proper generic type parameters.packages/client/src/types.test-d.ts (7)
5-6: Client function signature and test setup improved.The client function type has been properly updated to use a more flexible signature that supports optional inputs and context options.
9-9: Options type signature updated correctly.The expected options type now properly includes the context with an optional cache property, matching the client implementation.
14-14: Function type assertion updated for clarity.The improved function signature matches the expected usage pattern for clients with optional inputs.
18-20: Input handling tests correctly verify optional inputs.Tests now properly verify that both string inputs and undefined inputs are accepted, which aligns with the new client function signature.
28-36: Added test case for required inputs enhances type safety verification.This new test case ensures that non-optional inputs are properly required by the type system, which is an important aspect of the server action implementation.
75-77: Added test for output type inference.Good addition to verify the client function returns the expected output type.
79-83: Added test for type parameter inference.This test ensures the client's generic type parameters can be properly extracted, which is essential for tools and utilities that might need to introspect the client type.
packages/react/src/server/action-form.test.ts (6)
1-8: Test setup imports and initialization look good.The necessary imports and
beforeEachsetup for resetting mocks follow testing best practices.
9-17: Test suite foundation and client setup properly configured.The test suite correctly sets up a mock handler and creates a client with input validation using Zod, which demonstrates a real-world usage pattern.
19-28: Success case test verifies correct form data parsing.The test correctly validates that:
- Form data with bracket notation is properly deserialized
- The handler is called with the expected input
- The action returns undefined as expected
This confirms the core functionality of the form action creator.
30-43: Error handling test verifies validation errors.The test properly checks that:
- Invalid inputs (age > 100) are rejected
- The error is an ORPCError with status 400
- The handler is not called when validation fails
This confirms proper error handling behavior.
45-61: HTTP error fallback test verifies error translation.Good test for verifying that server errors are properly converted to HTTP-compatible errors with appropriate status codes and digests, which is important for Server Actions integration.
63-82: Interceptor test verifies middleware functionality.The test confirms that interceptors can be added to form actions and receive properly parsed input, which allows for customizing behavior (like redirects) after form submission.
packages/react/README.md (5)
1-46: README introduction and highlights well structured.The README provides a comprehensive introduction to oRPC with clear badges for discoverability and a well-organized list of features.
🧰 Tools
🪛 LanguageTool
[misspelling] ~35-~35: Possible spelling mistakes found.
Context: ...tack Query (React, Vue, Solid, Svelte), Pinia Colada, and more. - Server Actions ⚡️: Ful...(EN_MULTITOKEN_SPELLING_TWO)
47-66: Package documentation and links are complete.All packages are properly documented with links to their npm pages, making it easy for users to discover related packages.
🧰 Tools
🪛 LanguageTool
[style] ~55-~55: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... your API or implement API contract. - [@orpc/client](https://www.npmjs.com/package/@...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~56-~56: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... API on the client with type-safety. - [@orpc/react](https://www.npmjs.com/package/@o...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~57-~57: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...with React and React Server Actions. - [@orpc/react-query](https://www.npmjs.com/pack...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~58-~58: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...test/docs/framework/react/overview). - [@orpc/vue-query](https://www.npmjs.com/packag...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~59-~59: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...latest/docs/framework/vue/overview). - [@orpc/solid-query](https://www.npmjs.com/pack...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~60-~60: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...test/docs/framework/solid/overview). - [@orpc/svelte-query](https://www.npmjs.com/pac...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~61-~61: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...est/docs/framework/svelte/overview). - [@orpc/vue-colada](https://www.npmjs.com/packa...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[misspelling] ~61-~61: Possible spelling mistakes found.
Context: ...ge/@orpc/vue-colada): Integration with Pinia Colada. - [@or...(EN_MULTITOKEN_SPELLING_TWO)
[style] ~62-~62: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...ada](https://pinia-colada.esm.dev/). - [@orpc/openapi](https://www.npmjs.com/package/...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~63-~63: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...I specs and handle OpenAPI requests. - [@orpc/zod](https://www.npmjs.com/package/@orp...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~64-~64: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...tps://zod.dev/) doesn't support yet. - [@orpc/valibot](https://www.npmjs.com/package/...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~65-~65: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...rom Valibot. - [@orpc/arktype](https://www.npmjs.com/package/...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
67-70: @orpc/react package description is clear.The introduction to the new React package provides a concise description of its purpose and links to more detailed documentation.
71-106: useServerAction hook documentation is comprehensive.The example clearly demonstrates how to use the hook with a form, including error handling and type-safe error data access.
108-144: createFormAction utility documentation is thorough.The example effectively shows:
- How to define a form-compatible procedure
- How to use interceptors for redirects
- How to use bracket notation for form field names
- How to integrate with React forms
This provides a complete guide for implementing form actions.
playgrounds/nextjs/package.json (4)
6-6: Added Turbopack to the development serverThe
--turbopackflag has been added to thenext devcommand. This will leverage Next.js's Rust-based bundler which should provide faster development experience.
15-15: Added new @orpc/react dependencyThis new package adds React-specific utilities for integrating oRPC with React Server Actions. This addition aligns with the PR's objective of providing enhanced React support.
20-22: Updated Next.js and React versionsThe dependencies have been updated to the latest versions:
- Next.js from 15.1.7 to 15.2.4
- React and React DOM from 19.0.0 to 19.1.0
These updates ensure compatibility with the new @orpc/react package.
27-28: Updated React type definitionsType definitions for React and React DOM have been updated to match the versions of the core libraries.
packages/server/src/procedure-action.test-d.ts (5)
1-4: Well-structured import statementsThe import statements are well-organized, importing types from both internal and external packages. This file establishes type tests for the actionable client functionality.
5-13: Type tests for ActionableErrorThese tests verify that
ActionableErrorcorrectly transforms error types into JSON-serializable formats with adefinedflag to indicate whether the error was explicitly defined or is a generic error.
15-25: Type tests for UnactionableErrorThese tests ensure that
UnactionableErrorcorrectly reverses the transformation ofActionableError, converting the JSON error representations back to their original Error types.
27-81: Comprehensive ActionableClient type testsThe test suite thoroughly validates that the
ActionableClienttype:
- Correctly handles both defined and undefined inputs
- Enforces input requirements when necessary
- Properly returns typed results as a tuple of [error, data]
- Supports type inference for error handling
The extensive test cases should ensure that users receive appropriate type checking when using the actionable clients.
83-97: ProcedureActionableClient type verificationThis test confirms that the
ProcedureActionableClientcorrectly transforms procedure definitions with input/output schemas and error maps into the appropriateActionableClienttype. This ensures compatibility between the procedure definition API and the server action API.packages/server/src/procedure-decorated.test-d.ts (3)
1-9: Updated imports for actionable typesThe imports have been modified to include
ActionableClientandActionableErrorfrom the procedure-action module, while removing the no-longer-neededClientResttype. This reflects the architectural changes in how server actions are implemented.
230-231: Updated return type for .actionable() methodThe test now verifies that the
.actionable()method returns a properly typedActionableClientwith the correct error type transformation throughActionableError. This ensures that the server action client type is correctly inferred from the procedure definition.
233-236:Details
❓ Verification inconclusive
Added test for optional client context properties
This test case ensures that all client context properties must be optional, which is an important constraint for server actions. The test uses a deliberate type error to verify this behavior.
🏁 Script executed:
#!/bin/bash # Verify actual implementation matches the test constraint # Check if the implementation of actionable enforces optional context properties ast-grep --pattern $'actionable<(.*)>\((.*?: \{ context: (.*) \}): (.*)' packages/serverLength of output: 91
Action Required: Verify Optional Client Context Enforcement
The test in
packages/server/src/procedure-decorated.test-d.tsremains unchanged and correctly uses the deliberate type error (via@ts-expect-error --- all clientContext must be optional) to ensure client context properties are optional. However, our automated check (using the ast-grep query) did not yield any output. Please manually verify that the actual implementation ofbuilder.actionableenforces the optionality of client context properties as expected.
- Confirm that the actionable implementation triggers a type error when non-optional client context properties are provided.
- Double-check that the test case in the file adequately covers this constraint.
apps/content/docs/server-action.md (6)
8-8: Clearer introduction to Server ActionsThe introduction has been improved to concisely explain what React Server Actions are and how they integrate with oRPC through the
.actionablemodifier.
12-12: Simplified procedure definition and handler examplesThe documentation now uses clearer wording and provides a more concise example of defining a procedure with
.actionable. The handler has been simplified to a one-line arrow function and the error handling has been streamlined.Also applies to: 22-27
49-57: Updated client-side example with proper error handlingThe client-side example now correctly demonstrates destructuring the result tuple into
[error, data], which is the actual return type of actionable procedures. The form has also been improved with a proper submit button.
64-98: Added comprehensive type-safe error handling documentationThis new section clearly explains how to work with the type-safe error objects returned from actionable procedures. The example shows how to check for defined errors and access typed error data, which is crucial for robust error handling.
130-180: Well-documented useServerAction hookThe documentation for the new
useServerActionhook is clear and comprehensive. It shows:
- How to initialize the hook with interceptors
- How to execute the server action
- How to access status, data, and errors
- How to integrate with form submissions
This will be very helpful for users implementing React components that need to call server actions.
182-226: Documented createFormAction utility with real-world exampleThe documentation for
createFormActionis excellent, providing:
- A clear explanation of its purpose
- A practical example showing form data deserialization
- An example of integrating with Next.js redirects
- Information about automatic handling of common HTTP error statuses
This utility significantly improves the developer experience when working with forms and server actions.
packages/server/src/procedure-decorated.ts (3)
15-21: New Imports Look GoodNo issues with adding
ProcedureActionableClientandcreateActionableClientimports from./procedure-action. These imports align well with the subsequent usage in the file.
144-146: Documentation foractionableIs ClearThe updated JSDoc comment accurately reflects the method’s purpose of making the procedure compatible with server actions. Great clarity!
148-154: Confirm Intention to Drop Client ContextSwitching the type parameter to
Record<never, never>prevents passing any client context toactionable. If this is intentional, it’s fine; otherwise, ensure that no context is indeed required.packages/server/src/implementer-procedure.ts (4)
9-9: New Import for ProcedureActionableClientImporting
ProcedureActionableClientis consistent with the revised types. No issues here.
78-80: Clear Documentation for Server Action IntegrationThe JSDoc comment and method name “actionable” communicate the method’s purpose effectively. Nice improvement.
88-88: Dropping Context in Actionable MethodUsing
Record<never, never>for the context parameter ensures no context is passed to server actions. Confirm that’s intentional to avoid any future friction with user-supplied context.
92-92: Updated Return Type for Actionable ProceduresReturning
ProcedureActionableClient<TInputSchema, TOutputSchema, TErrorMap>aligns the interface with the new approach. Looks consistent with the design goals.packages/server/src/procedure-action.ts (6)
1-3: Imports Are Appropriate for Actionable ClientThe imports from
@orpc/clientand@orpc/contractare relevant for building the actionable client. No concerns here.
5-8: Well-Defined Error Types
ActionableErrorandUnactionableErrorneatly separate known and unknown error cases. This is a clear approach for standardized error handling.
9-14: Flexible Input and Output Structures
ActionableClientRestandActionableClientResultexpand the RPC call’s flexibility with optional inputs and structured success/error returns. Nicely done.
15-17: Concise ActionableClient InterfaceUsing a callable interface for handling an RPC request and returning a promise with defined success/error tuples is a clean design pattern.
19-28: ProcedureActionableClient Type Is ConsistentExtending
ActionableClientwith schema-driven inputs/outputs and mapped errors ensures type safety across procedure boundaries.
29-42: Robust createActionableClient ImplementationTransforming a regular client into an actionable client by returning a tuple of
[error, data]on each call is intuitive for server actions. Good job handling error conversion withtoORPCError.
Codecov ReportAttention: Patch coverage is
📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
packages/react/src/action-hooks.test.tsx (3)
50-52: Use awaited act for reset operation for consistency.While
resetitself isn't async, maintaining consistent use of awaited act throughout your tests prevents potential future issues if the implementation changes.-act(() => { - result.current.reset() -}) +await act(async () => { + result.current.reset() +})
99-101: Apply consistent awaited act pattern for reset operation.For consistency across all test cases.
-act(() => { - result.current.reset() -}) +await act(async () => { + result.current.reset() +})
1-153: Add test for concurrent executions and cancellation scenarios.The current tests verify basic success, error, and interceptor cases, but don't test how the hook behaves when multiple actions are triggered in rapid succession or when component unmounts during a pending action.
Consider adding these test cases:
- A test case that triggers multiple executions in succession to verify proper state handling
- A test that unmounts the component during a pending action to ensure no memory leaks
Example for concurrent executions:
it('handles concurrent executions correctly', async () => { const { result } = renderHook(() => useServerAction(action)) // Start first execution const promise1 = result.current.execute({ input: 123 }) // Second execution should supersede the first await act(async () => { await result.current.execute({ input: 456 }) }) // Verify only the second execution's result is reflected expect(result.current.status).toBe('success') expect(result.current.input).toEqual({ input: 456 }) expect(result.current.data).toEqual({ output: '456' }) // First promise should still resolve await promise1 })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
apps/content/package.json(2 hunks)packages/react-query/package.json(1 hunks)packages/react/package.json(1 hunks)packages/react/src/action-hooks.test.tsx(1 hunks)playgrounds/nextjs/package.json(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/content/package.json
- packages/react/package.json
- playgrounds/nextjs/package.json
🧰 Additional context used
🧬 Code Definitions (1)
packages/react/src/action-hooks.test.tsx (1)
packages/react/src/action-hooks.ts (1)
useServerAction(84-154)
🔇 Additional comments (3)
packages/react/src/action-hooks.test.tsx (3)
28-31: Use awaited act for asynchronous operations to prevent test timing issues.The act function should be awaited when dealing with async state updates to ensure all updates are processed before assertions. This prevents potential test flakiness.
-act(() => { - result.current.execute({ input: 123 }) -}) +await act(async () => { + await result.current.execute({ input: 123 }) +})#!/bin/bash # Check for potential async operation warnings in test files rg "act\(\(\) =>" -A 3 --glob "*.test.{tsx,ts}" | rg "await|Promise|async"
76-79: Use awaited act for async execute operation to prevent test failures.Similar to the first test case, this act call should be awaited as it's triggering async state updates. This was specifically highlighted in previous reviews as causing CI failures.
-act(() => { - // @ts-expect-error --- invalid input - result.current.execute({ input: 'invalid' }) -}) +await act(async () => { + // @ts-expect-error --- invalid input + await result.current.execute({ input: 'invalid' }) +})
126-132: Use awaited act for async execute with interceptors to prevent test failures.This async operation needs to be awaited, as the previous review comments indicated failures accessing properties of null at this point in the tests.
-act(() => { - result.current.execute({ input: 123 }, { - interceptors: [ - executeInterceptor, - ], - }) -}) +await act(async () => { + await result.current.execute({ input: 123 }, { + interceptors: [ + executeInterceptor, + ], + }) +})
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
packages/react/src/hooks/action-hooks.test-d.ts (1)
29-29: Fix minor typo in the test description."undefindable" should be "undefined" or "non-undefined" for clarity.
- it('require non-undefindable input ', () => { + it('require non-undefined input ', () => {packages/react/src/action-form.ts (1)
52-55: Consider returning the client result for better form action handling.By returning the result of
client, the caller can directly handle any success or error states.return async (form) => { const input = bracketNotation.deserialize([...form]) - await client(input as any) + return await client(input as any) }packages/react/src/action-form.test.ts (2)
30-43: Consider awaiting the rejected promise for reliability.When checking for errors using
expect(action(form)).rejects.toSatisfy(...), it’s generally safer to eitherawaitorreturnthe promise to ensure the test completes only after the assertion passes or fails, preventing false positives if the test ends prematurely.-it('on error', async () => { - expect(action(form)).rejects.toSatisfy((error) => { +it('on error', () => { + return expect(action(form)).rejects.toSatisfy((error) => { // ... }) })
45-61: Align test structure for "on fallback-able http next error" with best practices.Similarly, consider returning or awaiting the promise in this test. It ensures that the testing framework properly waits for the asynchronous rejection and the subsequent assertions.
-it('on fallback-able http next error', async () => { - expect(action(form)).rejects.toSatisfy((error) => { +it('on fallback-able http next error', () => { + return expect(action(form)).rejects.toSatisfy((error) => { // ... }) })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
apps/content/docs/server-action.md(2 hunks)packages/react/package.json(1 hunks)packages/react/src/action-form.test.ts(1 hunks)packages/react/src/action-form.ts(1 hunks)packages/react/src/hooks/action-hooks.test-d.ts(1 hunks)packages/react/src/hooks/action-hooks.test.tsx(1 hunks)packages/react/src/hooks/action-hooks.ts(1 hunks)packages/react/src/hooks/index.ts(1 hunks)packages/react/src/index.ts(1 hunks)playgrounds/nextjs/src/app/actions.ts(2 hunks)playgrounds/nextjs/src/app/orpc-server-action.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/react/src/hooks/index.ts
🚧 Files skipped from review as they are similar to previous changes (5)
- packages/react/src/index.ts
- packages/react/package.json
- playgrounds/nextjs/src/app/orpc-server-action.tsx
- playgrounds/nextjs/src/app/actions.ts
- apps/content/docs/server-action.md
🧰 Additional context used
🧬 Code Definitions (2)
packages/react/src/hooks/action-hooks.test-d.ts (1)
packages/react/src/hooks/action-hooks.ts (1)
useServerAction(84-154)
packages/react/src/action-form.test.ts (1)
packages/react/src/action-form.ts (1)
createFormAction(24-56)
🔇 Additional comments (9)
packages/react/src/hooks/action-hooks.test.tsx (2)
12-47: Verify numeric vs. string mismatch in output.Line 12 returns a number (
Number(input?.input ?? 0)), while line 47 expects the output as a string. Confirm this is intentional or adjust the handler or test to align with the desired output type.
64-153: Tests for error-handling and interceptors look good.The logic for transitioning between states, verifying error presence, and interceptors invocation is well-structured.
packages/react/src/action-form.test.ts (2)
9-11: Tests are well-structured and clearly named.The
createFormActiontest suite is well-organized, making it straightforward to identify the exact behavior being tested.
63-83: Great test coverage for interceptors.Verifying that the interceptor is called, and that it can manipulate the action’s input/output, confirms correct integration. The test coverage here looks good.
packages/react/src/hooks/action-hooks.ts (5)
1-6: Imports are consistent and minimal.All imported symbols appear relevant to the hook’s logic. Keeping imports lean helps maintain readability and reduces build times.
7-10: Interface naming is clear.
UseServerActionOptionsis accurately named to convey its purpose as optional configuration for the hook.
30-70: Clean separation of result states.Defining separate result interfaces (
Idle,Pending,Success,Error) is a solid approach to strongly typed “state machine”-like behavior, making the hook usage more intuitive for consumers.
72-83: Initial state clarity.Initializing state as a constant ensures consistent defaults for the hook. This helps prevent subtle bugs from uninitialized fields.
84-154:Details
❓ Verification inconclusive
Potential concurrency edge case when calling
executemultiple times concurrently.Currently, if
executeis called while the hook is already in thependingstate, the existing request state is overwritten. This could be intentional but might lead to race conditions in real-world usage. Consider additional checks or a queue mechanism if multiple simultaneous calls need special handling.Would you like to verify if the consumer code triggers multiple
executecalls concurrently? If so, consider the approach below.
🏁 Script executed:
#!/bin/bash # Attempt to locate concurrent usage of `execute` calls in the codebase. rg -A 5 'useServerAction'Length of output: 7904
Action: Address potential race conditions in concurrent execute calls
After reviewing the tests and usage examples, it appears that current consumer calls to
execute(as seen in both TS and TSX test files) are performed sequentially. However, the implementation ofuseServerActionlacks safeguards for handling concurrent invocations—subsequent calls will overwrite the state of an ongoing request. If concurrent calls are ever issued in a production environment, this could result in unpredictable behavior or race conditions.
- Concern: The hook resets its state on every
executecall without checking if a previous call is still pending.- Recommendation: Consider adding a concurrency check or a queuing mechanism (or cancellation of previous pending calls) if multiple simultaneous executions are a valid use case. Alternatively, if the sequential behavior is intentional, update the documentation to clearly warn users of this limitation.
1 participant
Entirely rewrite server action for oRPC and comewith some utilities and hooks for react
Summary by CodeRabbit
New Features
Documentation
Chores
Tests