Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix misalignment in sample codes for data mutation guide #1150

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down
36 changes: 18 additions & 18 deletions src/routes/solid-start/guides/data-mutation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ To handle [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/f
3. Ensure the `<form>` 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";

Expand All @@ -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";

Expand All @@ -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";

Expand All @@ -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";

Expand Down Expand Up @@ -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";

Expand All @@ -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";

Expand Down Expand Up @@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";

Expand All @@ -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";

Expand Down Expand Up @@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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";
Expand All @@ -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";
Expand Down