diff --git a/src/routes/solid-router/reference/data-apis/use-submission.mdx b/src/routes/solid-router/reference/data-apis/use-submission.mdx index f85ceece84..f51ca4db20 100644 --- a/src/routes/solid-router/reference/data-apis/use-submission.mdx +++ b/src/routes/solid-router/reference/data-apis/use-submission.mdx @@ -61,7 +61,7 @@ When the form is submitted, the `submission` object will be updated with the new This allows you to provide feedback to the user that the action is in progress. Once the action is complete, the `pending` property will be set to `false` and the `result` property will be updated with final value. -```tsx tab title="TypeScript" {5,9-11} +```tsx tab title="TypeScript" {6,10-12} // component.tsx import { Show } from "solid-js"; import { useSubmission } from "@solidjs/router"; @@ -90,7 +90,7 @@ function Component() { } ``` -```tsx tab title="JavaScript" {5,9-11} +```tsx tab title="JavaScript" {6,10-12} // component.jsx import { Show } from "solid-js"; import { useSubmission } from "@solidjs/router"; diff --git a/src/routes/solid-start/guides/data-mutation.mdx b/src/routes/solid-start/guides/data-mutation.mdx index 5ece6e3506..79b81476e2 100644 --- a/src/routes/solid-start/guides/data-mutation.mdx +++ b/src/routes/solid-start/guides/data-mutation.mdx @@ -14,7 +14,7 @@ To handle [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/f 3. Ensure the `` element uses the `post` method for submission. 4. Use the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData) object in the action to extract field data using the navite `FormData` methods. -```tsx tab title="TypeScript" {3-9} {13} +```tsx tab title="TypeScript" {4-10} {14} // src/routes/index.tsx import { action } from "@solidjs/router"; @@ -36,7 +36,7 @@ export default function Page() { } ``` -```jsx tab title="JavaScript" {3-9} {13} +```jsx tab title="JavaScript" {4-10} {14} // src/routes/index.jsx import { action } from "@solidjs/router"; @@ -62,7 +62,7 @@ export default function Page() { To pass additional arguments to your action, use the `with` method: -```tsx tab title="TypeScript" {14} +```tsx tab title="TypeScript" {15} // src/routes/index.tsx import { action } from "@solidjs/router"; @@ -85,7 +85,7 @@ export default function Page() { } ``` -```jsx {14} tab title="JavaScript" +```jsx tab title="JavaScript" {15} // src/routes/index.jsx import { action } from "@solidjs/router"; @@ -115,7 +115,7 @@ To display a pending UI during action execution: 1. Import [`useSubmission`](/solid-router/reference/data-apis/use-submission) from `@solidjs/router`. 2. Call `useSubmission` with your action, and use the returned `pending` property to display pending UI. -```tsx tab title="TypeScript" {12} {16-18} +```tsx tab title="TypeScript" {13} {17-19} // src/routes/index.tsx import { action, useSubmission } from "@solidjs/router"; @@ -140,7 +140,7 @@ export default function Page() { } ``` -```jsx tab title="JavaScript" {12} {16-18} +```jsx tab title="JavaScript" {13} {17-19} // src/routes/index.jsx import { action, useSubmission } from "@solidjs/router"; @@ -172,7 +172,7 @@ To handle errors that occur within an action: 1. Import [`useSubmission`](/solid-router/reference/data-apis/use-submission) from `@solidjs/router`. 2. Call `useSubmission` with your action, and use the returned `error` property to handle the error. -```tsx tab title="TypeScript" {13} {16-18} +```tsx tab title="TypeScript" {14} {17-19} // src/routes/index.tsx import { Show } from "solid-js"; import { action, useSubmission } from "@solidjs/router"; @@ -199,7 +199,7 @@ export default function Page() { } ``` -```jsx tab title="JavaScript" {13} {16-18} +```jsx tab title="JavaScript" {14} {17-19} // src/routes/index.jsx import { Show } from "solid-js"; import { action, useSubmission } from "@solidjs/router"; @@ -234,7 +234,7 @@ To validate form fields in an action: 2. Import [`useSubmission`](/solid-router/reference/data-apis/use-submission) from `@solidjs/router`. 3. Call `useSubmission` with your action, and use the returned `result` property to handle the errors. -```tsx tab title="TypeScript" {6-10} {17} {22-24} +```tsx tab title="TypeScript" {7-11} {19} {23-25} // src/routes/index.tsx import { Show } from "solid-js"; import { action, useSubmission } from "@solidjs/router"; @@ -266,7 +266,7 @@ export default function Page() { } ``` -```jsx tab title="JavaScript" {6-10} {17} {22-24} +```jsx tab title="JavaScript" {7-11} {19} {23-25} // src/routes/index.jsx import { Show } from "solid-js"; import { action, useSubmission } from "@solidjs/router"; @@ -305,7 +305,7 @@ To update the UI before the server responds: 1. Import [`useSubmission`](/solid-router/reference/data-apis/use-submission) from `@solidjs/router`. 2. Call `useSubmission` with your action, and use the returned `pending` and `input` properties to display optimistic UI. -```tsx tab title="TypeScript" {19} {28-30} +```tsx tab title="TypeScript" {20} {29-31} // src/routes/index.tsx import { For, Show } from "solid-js"; import { action, useSubmission, query, createAsync } from "@solidjs/router"; @@ -343,7 +343,7 @@ export default function Page() { } ``` -```jsx tab title="JavaScript" {19} {28-30} +```jsx tab title="JavaScript" {20} {29-31} // src/routes/index.jsx import { For, Show } from "solid-js"; import { action, useSubmission, query, createAsync } from "@solidjs/router"; @@ -392,7 +392,7 @@ To redirect users to a different route within an action: 1. Import [`redirect`](/solid-router/reference/response-helpers/redirect) from `@solidjs/router`. 2. Call `redirect` with the route you want to navigate to, and throw its response. -```tsx tab title="TypeScript" {10} +```tsx tab title="TypeScript" {11} // src/routes/index.tsx import { action, redirect } from "@solidjs/router"; @@ -416,7 +416,7 @@ export default function Page() { } ``` -```jsx tab title="JavaScript" {10} +```jsx tab title="JavaScript" {11} // src/routes/index.jsx import { action, redirect } from "@solidjs/router"; @@ -444,7 +444,7 @@ export default function Page() { To safely interact with your database or ORM in an action, ensure it's server-only by adding [`"use server"`](/solid-start/reference/server/use-server) as the first line of your action: -```tsx tab title="TypeScript" {5} +```tsx tab title="TypeScript" {6} // src/routes/index.tsx import { action } from "@solidjs/router"; import { db } from "~/lib/db"; @@ -465,7 +465,7 @@ export default function Page() { } ``` -```jsx tab title="JavaScript" {5} +```jsx tab title="JavaScript" {6} // src/routes/index.jsx import { action } from "@solidjs/router"; import { db } from "~/lib/db"; @@ -493,7 +493,7 @@ To programmatically invoke an action: 1. Import [`useAction`](/solid-router/reference/data-apis/use-action) from `@solidjs/router`. 2. Call `useAction` with your action, and use the returned function to invoke the action. -```tsx tab title="TypeScript" {13} {17} +```tsx tab title="TypeScript" {14} {18} // src/routes/index.tsx import { createSignal } from "solid-js"; import { action, useAction } from "@solidjs/router"; @@ -517,7 +517,7 @@ export default function Page() { } ``` -```jsx tab title="JavaScript" {13} {17} +```jsx tab title="JavaScript" {14} {18} // src/routes/index.jsx import { createSignal } from "solid-js"; import { action, useAction } from "@solidjs/router";