`](/reference/components/portal). This mechanism will still work in testing, so the content of the portals will break out of the testing container. In order to test this content, make sure to use the `screen` export to query the contents:
-
-
-```jsx frame="none"
+```jsx tab title="Toast.test.jsx"
import { test, expect } from "vitest"
import { render, screen } from "@solidjs/testing-library"
import { Toast } from "./Toast"
@@ -256,9 +221,8 @@ test("increments value", async () => {
expect(toast).toHaveTextContent("This is a toast")
})
```
-
-
-```jsx frame="none"
+
+```jsx tab title="Toast.jsx"
import { Portal } from "solid-js/web";
export const Toast = (props) => {
@@ -271,8 +235,6 @@ export const Toast = (props) => {
);
}
```
-
-
#### Testing in context
@@ -402,9 +364,7 @@ This, along with the ability to modify the `arg` signal, are helpful when testin
If, for example, you have a directive that handles the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API), you can test it like this:
-
-
-```ts frame="none"
+```ts tab title="fullscreen.test.ts"
import { test, expect, vi } from "vitest"
import { renderDirective } from "@solidjs/testing-library"
import { createFullScreen } from "./fullscreen"
@@ -417,9 +377,8 @@ test("toggles fullscreen", () => {
expect(fs).toHaveBeenCalled()
})
```
-
-
-```ts frame="none"
+
+```ts tab title="fullscreen.ts"
import { Accessor } from "solid-js"
export const fullscreen = (ref: HTMLElement, active: Accessor) =>
@@ -432,8 +391,6 @@ export const fullscreen = (ref: HTMLElement, active: Accessor) =>
}
})
```
-
-
### Primitive testing
@@ -562,23 +519,9 @@ The numbers should always be taken with a grain of salt, but can still indicate
While coverage numbers can be misleading, they are used by many projects as a rough measurement of code quality.
Vitest supports coverage collection. To use it, it needs an extra package:
-
-
-```bash frame="none"
-npm i -D @vitest/coverage-v8
-```
-
-
-```bash frame="none"
-yarn add -D @vitest/coverage-v8
-```
-
-
-```bash frame="none"
-pnpm i -D @vitest/coverage-v8
+```package-install-dev
+@vitest/coverage-v8
```
-
-
Also, you need to [set up vitest's coverage feature](https://vitest.dev/guide/coverage.html).
diff --git a/src/routes/pt-br/quick-start.mdx b/src/routes/pt-br/quick-start.mdx
index 76a48582aa..b3164b1b3a 100644
--- a/src/routes/pt-br/quick-start.mdx
+++ b/src/routes/pt-br/quick-start.mdx
@@ -36,21 +36,8 @@ cd my-app
3. Install the necessary dependencies:
-
-
-```bash frame="none"
-npm install
-```
-
-
-```bash frame="none" yarn install ```
-
-
-```bash frame="none"
-pnpm install
+```package-install-local
```
-
-
4. Run the application:
@@ -77,21 +64,8 @@ cd my-app
3. Install the necessary dependencies:
-
-
-```bash frame="none"
-npm install
-```
-
-
-```bash frame="none" yarn install ```
-
-
-```bash frame="none"
-pnpm install
+```package-install-local
```
-
-
4. Run the application:
diff --git a/src/routes/pt-br/solid-router/quick-start.mdx b/src/routes/pt-br/solid-router/quick-start.mdx
index 76a48582aa..b3164b1b3a 100644
--- a/src/routes/pt-br/solid-router/quick-start.mdx
+++ b/src/routes/pt-br/solid-router/quick-start.mdx
@@ -36,21 +36,8 @@ cd my-app
3. Install the necessary dependencies:
-
-
-```bash frame="none"
-npm install
-```
-
-
-```bash frame="none" yarn install ```
-
-
-```bash frame="none"
-pnpm install
+```package-install-local
```
-
-
4. Run the application:
@@ -77,21 +64,8 @@ cd my-app
3. Install the necessary dependencies:
-
-
-```bash frame="none"
-npm install
-```
-
-
-```bash frame="none" yarn install ```
-
-
-```bash frame="none"
-pnpm install
+```package-install-local
```
-
-
4. Run the application:
diff --git a/src/routes/quick-start.mdx b/src/routes/quick-start.mdx
index f9df35feb3..b73b61f12b 100644
--- a/src/routes/quick-start.mdx
+++ b/src/routes/quick-start.mdx
@@ -24,38 +24,9 @@ To get an application running, follow the steps below based on the language you
1. Run the following command in your terminal to get the JavaScript starter template:
-
-
-```bash frame="none"
-npx degit solidjs/templates/js my-app
-```
-
-
-
-```bash frame="none"
-yarn dlx degit solidjs/templates/js my-app
-```
-
-
-
-```bash frame="none"
-pnpm dlx degit solidjs/templates/js my-app
-```
-
-
-
-```bash frame="none"
-bunx degit solidjs/templates/js my-app
+```package-exec
+degit solidjs/templates/js my-app
```
-
-
-
-```bash frame="none"
-deno -A npm:degit solidjs/templates/js my-app
-```
-
-
-
2. Navigate to your application's directory:
@@ -65,70 +36,13 @@ cd my-app
3. Install the necessary dependencies:
-
-
-```bash frame="none"
-npm install
-```
-
-
-
-```bash frame="none"
-yarn install
+```package-install-local
```
-
-
-
-```bash frame="none"
-pnpm install
-```
-
-
-
-```bash frame="none"
-bun install
-```
-
-
-
-```bash frame="none"
-deno install
-```
-
-
-
4. Run the application:
-
-
-```bash frame="none"
-npm run dev
+```package-run
+dev
```
-
-
-
-```bash frame="none"
-yarn dev
-```
-
-
-
-```bash frame="none"
-pnpm dev
-```
-
-
-
-```bash frame="none"
-bun dev
-```
-
-
-```bash frame="none"
-deno task dev
-```
-
-
This will start the development server.
Now, you can open your browser and navigate to `localhost:3000` to see your application running.
@@ -137,36 +51,9 @@ Now, you can open your browser and navigate to `localhost:3000` to see your appl
1. To use a TypeScript template, run the following command in your terminal:
-
-
-```bash frame="none"
-npx degit solidjs/templates/ts my-app
-```
-
-
-
-```bash frame="none"
-yarn dlx degit solidjs/templates/ts my-app
-```
-
-
-
-```bash frame="none"
-pnpm dlx degit solidjs/templates/ts my-app
+```package-exec
+degit solidjs/templates/ts my-app
```
-
-
-
-```bash frame="none"
-bunx degit solidjs/templates/ts my-app
-```
-
-
-```bash frame="none"
-deno -A npm:degit solidjs/templates/ts my-app
-```
-
-
2. Navigate to your application's directory:
@@ -176,70 +63,14 @@ cd my-app
3. Install the necessary dependencies:
-
-
-```bash frame="none"
-npm install
-```
-
-
-
-```bash frame="none"
-yarn install
-```
-
-
-
-```bash frame="none"
-pnpm install
-```
-
-
-
-```bash frame="none"
-bun install
-```
-
-
-```bash frame="none"
-deno install
+```package-install-local
```
-
-
4. Run the application:
-
-
-```bash frame="none"
-npm run dev
-```
-
-
-
-```bash frame="none"
-yarn dev
+```package-run
+dev
```
-
-
-
-```bash frame="none"
-pnpm dev
-```
-
-
-
-```bash frame="none"
-bun dev
-```
-
-
-```bash frame="none"
-deno task dev
-```
-
-
-
This will start the development server.
Now, you can open your browser and navigate to `localhost:3000` to see your application running.
diff --git a/src/routes/reference/reactive-utilities/untrack.mdx b/src/routes/reference/reactive-utilities/untrack.mdx
index b73d87b8d8..5a75ba28cc 100644
--- a/src/routes/reference/reactive-utilities/untrack.mdx
+++ b/src/routes/reference/reactive-utilities/untrack.mdx
@@ -19,10 +19,9 @@ export function Component(props) {
It is not necessary to manually untrack values that are suppose to serve as a default or initial value to a signal. Even with the linter configured to enforce tracking, the linter will accept it when a `prop` is prefixed with `default` or `initial` as it is a common pattern to use them as such.
-
-
-```tsx title="component.tsx" {4}
+```tsx tab title="initialValue" {4}
+// component.tsx
import { createSignal } from "solid-js"
export function Component(props) {
@@ -32,11 +31,9 @@ export function Component(props) {
}
}
```
-
-
-
-```tsx title="component.tsx" {4}
+```tsx tab title="defaultValue" {4}
+// component.tsx
import { createSignal } from "solid-js"
export function Component(props) {
@@ -46,5 +43,3 @@ export function Component(props) {
}
}
```
-
-
\ No newline at end of file
diff --git a/src/routes/solid-meta/getting-started/installation-and-setup.mdx b/src/routes/solid-meta/getting-started/installation-and-setup.mdx
index 1e09b57f87..2b2fd7ff0d 100644
--- a/src/routes/solid-meta/getting-started/installation-and-setup.mdx
+++ b/src/routes/solid-meta/getting-started/installation-and-setup.mdx
@@ -12,31 +12,9 @@ For earlier versions (eg. `v0.x`), you must use `v0.26.x`.
To get started, install using your preferred package manager.
-
-
-```bash frame="none"
-npm i @solidjs/meta
+```package-install
+@solidjs/meta
```
-
-
-
-```bash frame="none"
-yarn add @solidjs/meta
-```
-
-
-
-```bash frame="none"
-pnpm add @solidjs/meta
-```
-
-
-
-```bash frame="none"
-deno add npm:@solidjs/meta
-```
-
-
## Setup
@@ -67,4 +45,4 @@ const App = () => (
On the server, tags are collected, and then on the client, server-generated tags are replaced with those rendered on the client side.
This process is important for maintaining the expected behavior, such as Single Page Applications (SPAs) when pages load that require changes to the head tags.
-However, you can manage asset insertion using `getAssets` from `solid-js/web`.
+However, you can manage asset insertion using `getAssets` from `solid-js/web`.
diff --git a/src/routes/solid-router/getting-started/installation-and-setup.mdx b/src/routes/solid-router/getting-started/installation-and-setup.mdx
index c6918d0f17..15ec2e8e9f 100644
--- a/src/routes/solid-router/getting-started/installation-and-setup.mdx
+++ b/src/routes/solid-router/getting-started/installation-and-setup.mdx
@@ -13,37 +13,9 @@ To use Solid Router, components called Routes that depend on the value of the UR
To get started with Solid Router, install it using your preferred package manager.
-
-
-```bash frame="none"
-npm i @solidjs/router
+```package-install
+@solidjs/router
```
-
-
-
-```bash frame="none"
-yarn add @solidjs/router
-```
-
-
-
-```bash frame="none"
-pnpm add @solidjs/router
-```
-
-
-
-```bash frame="none"
-bun add @solidjs/router
-```
-
-
-
-```bash frame="none"
-deno add npm:@solidjs/router
-```
-
-
## Configure the routes
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 777dff79af..f85ceece84 100644
--- a/src/routes/solid-router/reference/data-apis/use-submission.mdx
+++ b/src/routes/solid-router/reference/data-apis/use-submission.mdx
@@ -61,10 +61,8 @@ 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 title="component.tsx" {5,9-11}
+```tsx tab title="TypeScript" {5,9-11}
+// component.tsx
import { Show } from "solid-js";
import { useSubmission } from "@solidjs/router";
@@ -91,9 +89,9 @@ function Component() {
)
}
```
-
-
-```tsx title="component.jsx" {5,9-11}
+
+```tsx tab title="JavaScript" {5,9-11}
+// component.jsx
import { Show } from "solid-js";
import { useSubmission } from "@solidjs/router";
@@ -120,8 +118,6 @@ function Component() {
)
}
```
-
-
## Error Handling
diff --git a/src/routes/solid-router/reference/data-apis/use-submissions.mdx b/src/routes/solid-router/reference/data-apis/use-submissions.mdx
index 2dad465b4d..592de69d89 100644
--- a/src/routes/solid-router/reference/data-apis/use-submissions.mdx
+++ b/src/routes/solid-router/reference/data-apis/use-submissions.mdx
@@ -91,10 +91,8 @@ 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 title="component.tsx" {5,12-19}
+```tsx tab title="TypeScript" {5,12-19}
+// component.tsx
import { Show } from "solid-js";
import { useSubmissions } from "@solidjs/router";
@@ -123,9 +121,9 @@ function Component() {
)
}
```
-
-
-```tsx title="component.jsx" {5,12-19}
+
+```tsx tab title="JavaScript" {5,12-19}
+// component.jsx
import { Show } from "solid-js";
import { useSubmissions } from "@solidjs/router";
@@ -154,8 +152,6 @@ function Component() {
)
}
```
-
-
## Error Handling
diff --git a/src/routes/solid-start/building-your-application/data-loading.mdx b/src/routes/solid-start/building-your-application/data-loading.mdx
index f194e63b5a..607a9c32af 100644
--- a/src/routes/solid-start/building-your-application/data-loading.mdx
+++ b/src/routes/solid-start/building-your-application/data-loading.mdx
@@ -12,9 +12,8 @@ Solid provides a way to load data from your data sources using the [`createResou
It takes an async function and returns a [signal](/reference/basic-reactivity/create-signal) from it.
`createResource` integrates with [`Suspense`](/reference/components/suspense) and [`ErrorBoundary`](/reference/components/error-boundary) to help manage lifecycle and error states.
-
-
-```tsx {6-9} title="/src/routes/users.tsx"
+```tsx tab title="TypeScript" {6-9}
+// src/routes/users.tsx
import { For, createResource } from "solid-js";
type User = { name: string; house: string };
@@ -28,9 +27,9 @@ export default function Page() {
return {(user) => {user.name}};
}
```
-
-
-```tsx {4-7} title="/src/routes/users.jsx"
+
+```tsx tab title="JavaScript" {4-7}
+// src/routes/users.jsx
import { For, createResource } from "solid-js";
export default function Page() {
@@ -42,8 +41,6 @@ export default function Page() {
return {(user) => {user.name}};
}
```
-
-
When fetching inside components, you can encounter unnecessary waterfalls, especially when nested under lazy loaded sections.
To solve this, it is recommended to hoist the data fetching to the top of the component tree or, when in [SolidStart](/solid-start), use the server to fetch data in a non-blocking way.
@@ -51,9 +48,8 @@ For the example below we will be using the data in APIs in [`solid-router`](/sol
Using some of the features of `solid-router`, we can create a cache for our data:
-
-
-```tsx title="/routes/users.tsx" {6, 9, 12}
+```tsx tab title="TypeScript" {6, 9, 12}
+// /routes/users.tsx
import { For } from "solid-js";
import { createAsync, query } from "@solidjs/router";
@@ -74,10 +70,9 @@ export default function Page() {
return {(user) => {user.name}};
}
```
-
-
-```tsx title="/routes/users.jsx" {4, 7, 10}
+```tsx tab title="JavaScript" {4, 7, 10}
+// /routes/users.jsx
import { For } from "solid-js";
import { createAsync, query } from "@solidjs/router";
@@ -96,8 +91,6 @@ export default function Page() {
return {(user) => {user.name}};
}
```
-
-
With this method, however, there are some caveats to be aware of:
@@ -119,9 +112,8 @@ Through the `"use server"` comment you can tell the bundler to create an RPC and
This lets you write code that only runs on the server without needing to create an API route for it.
For example, it could be database access or internal APIs, or when you sit within your function and need to use your server.
-
-
-```tsx title="/routes/users.tsx" {7}
+```tsx tab title="TypeScript" {7}
+// /routes/users.tsx
import { For } from "solid-js";
import { createAsync, query } from "@solidjs/router";
@@ -142,11 +134,9 @@ export default function Page() {
return {(user) => {user.name}};
}
```
-
-
-
-```tsx title="/routes/users.jsx" {5}
+```tsx tab title="JavaScript" {5}
+// /routes/users.jsx
import { For } from "solid-js";
import { createAsync, query } from "@solidjs/router";
@@ -165,5 +155,3 @@ export default function Page() {
return {(user) => {user.name}};
}
```
-
-
diff --git a/src/routes/solid-start/building-your-application/routing.mdx b/src/routes/solid-start/building-your-application/routing.mdx
index eba09201df..b7ac8acf99 100644
--- a/src/routes/solid-start/building-your-application/routing.mdx
+++ b/src/routes/solid-start/building-your-application/routing.mdx
@@ -37,7 +37,7 @@ export default function App() {
```
The `` component expects a `root` prop which functions as the root layout of your entire app.
-You will want to make sure `props.children` is wrapped in `` since each component will be lazy-loaded automatically.
+You will want to make sure `props.children` is wrapped in `` since each component will be lazy-loaded automatically.
Without this, you could see some unexpected hydration errors.
`` will generate a route for each file in the `routes` directory and its subdirectories. For a route to be rendered as a page, it must default export a component.
@@ -78,35 +78,32 @@ When a file is named `index`, it will be rendered when there are no additional U
If you want to create nested layouts you can create a file with the same name as a route folder.
```jsx {2}
-|-- routes/
+|-- routes/
|-- blog.tsx // layout file
|-- blog/
|-- article-1.tsx // example.com/blog/article-1
|-- article-2.tsx // example.com/blog/article-2
```
-In this case, the `blog.tsx` file will act as a layout for the articles in the `blog` folder.
+In this case, the `blog.tsx` file will act as a layout for the articles in the `blog` folder.
You can reference the child's content
by using `props.children` in the layout.
-
-
-```tsx title="routes/blog.tsx"
+```tsx tab title="TypeScript"
+// routes/blog.tsx
import { RouteSectionProps } from "@solidjs/router";
export default function BlogLayout(props: RouteSectionProps) {
return
{props.children}
;
}
```
-
- ```jsx title="routes/blog.jsx"
+
+```jsx tab title="JavaScript"
+// routes/blog.jsx
export default function BlogLayout(props) {
return
{props.children}
;
}
```
-
-```jsx {3-7}
+```jsx tab title="TypeScript" {3-7}
import type { RouteSectionProps, RouteDefinition } from "@solidjs/router";
export const route = {
@@ -270,10 +265,8 @@ export default function UsersLayout(props: RouteSectionProps) {
);
}
```
-
-
-```jsx {3-7}
+```jsx tab title="JavaScript" {3-7}
export const route = {
preload() {
// define preload function
@@ -289,8 +282,6 @@ export default function UsersLayout(props) {
);
}
```
-
-
[api-routes]: /core-concepts/api-routes
diff --git a/src/routes/solid-start/getting-started.mdx b/src/routes/solid-start/getting-started.mdx
index 38302901ac..500d9c8aac 100644
--- a/src/routes/solid-start/getting-started.mdx
+++ b/src/routes/solid-start/getting-started.mdx
@@ -3,43 +3,15 @@ title: "Getting started"
---
The easiest way to get started with Solid is to use the SolidStart starter.
-This starter contains a collection of templates that can be used to quickly bootstrap a new Solid application.
+This starter contains a collection of templates that can be used to quickly bootstrap a new Solid application.
**1. Install SolidStart**
Once you have created a directory for your new application, you can initialize SolidStart with the following command:
-
-
-```bash frame="none"
-npm init solid@latest
+```package-create
+solid@latest
```
-
-
-
-```bash frame="none"
-yarn create solid
-```
-
-
-
-```bash frame="none"
-pnpm create solid
-```
-
-
-
-```bash frame="none"
-bun create solid
-```
-
-
-
-```bash frame="none"
-deno run -A npm:create-solid
-```
-
-
**2. Choose a template**
@@ -56,44 +28,15 @@ You can see a [list of these options in the SolidStart repository](https://githu
with-vitest
```
-Following the prompts, you might be asked questions like whether you want to use Server Side Rendering or TypeScript.
+Following the prompts, you might be asked questions like whether you want to use Server Side Rendering or TypeScript.
Choose your desired options to continue.
**3. Install dependencies**
Once you have chosen your template and configuration options, you can navigate to the directory you created and run the following command to install dependencies:
-
-
-```bash frame="none"
-npm install
-```
-
-
-
-```bash frame="none"
-yarn install
-```
-
-
-
-```bash frame="none"
-pnpm i
+```package-install-local
```
-
-
-
-```bash frame="none"
-bun install
-```
-
-
-
-```bash frame="none"
-deno install
-```
-
-
After this command has finished, your new SolidStart application is ready to go!
@@ -101,37 +44,9 @@ After this command has finished, your new SolidStart application is ready to go!
To run your application locally, you can use the following command:
-
-
-```bash frame="none"
-npm run dev
-```
-
-
-
-```bash frame="none"
-yarn dev
-```
-
-
-
-```bash frame="none"
-pnpm dev
-```
-
-
-
-```bash frame="none"
-bun dev
-```
-
-
-
-```bash frame="none"
-deno task dev
+```package-run
+dev
```
-
-
Your application should now be running locally on port 3000.
You can view it by navigating to [http://localhost:3000](http://localhost:3000).
diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 5bdc6866c3..b0bd1abeb1 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -14,10 +14,8 @@ For detailed API information, refer to the [Solid](/) and [Solid Router](/solid-
Here's a simple example:
-
-
-
-```tsx title="src/routes/index.tsx"
+```tsx tab title="TypeScript"
+// src/routes/index.tsx
import { For } from "solid-js";
import { query, createAsync } from "@solidjs/router";
@@ -36,10 +34,8 @@ export default function Page() {
}
```
-
-
-
-```jsx title="src/routes/index.jsx"
+```jsx tab title="JavaScript"
+// src/routes/index.jsx
import { For } from "solid-js";
import { query, createAsync } from "@solidjs/router";
@@ -58,9 +54,6 @@ export default function Page() {
}
```
-
-
-
In this example, a [`query`](/solid-router/reference/data-apis/query) is created.
In order to access it's data within the component, the [`createAsync`](/solid-router/reference/data-apis/create-async) primitive was used.
@@ -71,10 +64,8 @@ To show a loading UI during data-fetching:
1. Import [`Suspense`](/reference/components/suspense) from `solid-js`.
2. Wrap your data rendering in ``, and use the `fallback` prop to show a component during data fetching.
-
-
-
-```tsx {13} {15} title="src/routes/index.tsx"
+```tsx tab title="TypeScript" {13} {15}
+// src/routes/index.tsx
import { Suspense, For } from "solid-js";
import { query, createAsync } from "@solidjs/router";
@@ -95,10 +86,8 @@ export default function Page() {
}
```
-
-
-
-```jsx {13} {15} title="src/routes/index.jsx"
+```jsx tab title="JavaScript" {13} {15}
+// src/routes/index.jsx
import { Suspense, For } from "solid-js";
import { query, createAsync } from "@solidjs/router";
@@ -119,9 +108,6 @@ export default function Page() {
}
```
-
-
-
## Handling errors
To show a fallback UI if the data-fetching fails:
@@ -129,10 +115,8 @@ To show a fallback UI if the data-fetching fails:
1. Import [`ErrorBoundary`](/reference/components/error-boundary) from `solid-js`.
2. Wrap the data rendering in ``, and use the `fallback` prop to show a component if an error occurs.
-
-
-
-```tsx {13} {17} title="src/routes/index.tsx"
+```tsx tab title="TypeScript" {13} {17}
+// src/routes/index.tsx
import { ErrorBoundary, Suspense, For } from "solid-js";
import { query, createAsync } from "@solidjs/router";
@@ -155,10 +139,8 @@ export default function Page() {
}
```
-
-
-
-```jsx {13} {17} title="src/routes/index.jsx"
+```jsx tab title="JavaScript" {13} {17}
+// src/routes/index.jsx
import { ErrorBoundary, Suspense, For } from "solid-js";
import { query, createAsync } from "@solidjs/router";
@@ -181,9 +163,6 @@ export default function Page() {
}
```
-
-
-
## Preloading data
Data fetching can be optimized during user navigation by preloading the data:
@@ -192,10 +171,8 @@ Data fetching can be optimized during user navigation by preloading the data:
2. Run your query inside the `preload` function.
3. Use the query as usual in your component.
-
-
-
-```tsx {9-11} title="src/routes/index.tsx"
+```tsx tab title="TypeScript" {9-11}
+// src/routes/index.tsx
import { ErrorBoundary } from "solid-js";
import { query, createAsync, type RouteDefinition } from "@solidjs/router";
@@ -220,10 +197,8 @@ export default function Page() {
}
```
-
-
-
-```jsx {9-11} title="src/routes/index.jsx"
+```jsx tab title="JavaScript" {9-11}
+// src/routes/index.jsx
import { ErrorBoundary } from "solid-js";
import { query, createAsync } from "@solidjs/router";
@@ -248,17 +223,12 @@ export default function Page() {
}
```
-
-
-
## Passing parameters to queries
When creating a query that accepts parameters, define your query function to take any number of arguments:
-
-
-
-```tsx {4} {10} {15} title="src/routes/posts/[id]/index.tsx"
+```tsx tab title="TypeScript" {4} {10} {15}
+// src/routes/posts/[id]/index.tsx
import { ErrorBoundary } from "solid-js";
import { query, createAsync, type RouteDefinition } from "@solidjs/router";
@@ -284,10 +254,8 @@ export default function Page() {
}
```
-
-
-
-```jsx {4} {10} {15} title="src/routes/posts/[id]/index.jsx"
+```jsx tab title="JavaScript" {4} {10} {15}
+// src/routes/posts/[id]/index.jsx
import { ErrorBoundary } from "solid-js";
import { query, createAsync } from "@solidjs/router";
@@ -313,17 +281,12 @@ export default function Page() {
}
```
-
-
-
## Using a database or an ORM
To safely interact with your database or ORM in a query, ensure it's server-only by adding [`"use server"`](/solid-start/reference/server/use-server) as the first line of your query:
-
-
-
-```tsx {6-7} title="src/routes/index.tsx"
+```tsx tab title="TypeScript" {6-7}
+// src/routes/index.tsx
import { For, ErrorBoundary } from "solid-js";
import { query, createAsync, type RouteDefinition } from "@solidjs/router";
import { db } from "~/lib/db";
@@ -349,10 +312,8 @@ export default function Page() {
}
```
-
-
-
-```jsx {6-7} title="src/routes/index.jsx"
+```jsx tab title="JavaScript" {6-7}
+// src/routes/index.jsx
import { For, ErrorBoundary } from "solid-js";
import { query, createAsync } from "@solidjs/router";
import { db } from "~/lib/db";
@@ -378,17 +339,12 @@ export default function Page() {
}
```
-
-
-
## Fetching data on the client
To fetch data only on the client, use the [`createResource`](/reference/basic-reactivity/create-resource) primitive:
-
-
-
-```tsx {4-7} title="src/routes/index.tsx"
+```tsx tab title="TypeScript" {4-7}
+// src/routes/index.tsx
import { createResource, ErrorBoundary, Suspense, For } from "solid-js";
export default function Page() {
@@ -408,10 +364,8 @@ export default function Page() {
}
```
-
-
-
-```jsx {4-7} title="src/routes/index.jsx"
+```jsx tab title="JavaScript" {4-7}
+// src/routes/index.jsx
import { createResource, ErrorBoundary, Suspense, For } from "solid-js";
export default function Page() {
@@ -431,9 +385,6 @@ export default function Page() {
}
```
-
-
-
See the [`createResource`](/reference/basic-reactivity/create-resource) API reference for more information.
:::info[Advanced Data Handling]
diff --git a/src/routes/solid-start/guides/data-mutation.mdx b/src/routes/solid-start/guides/data-mutation.mdx
index 99e6a3509c..5ece6e3506 100644
--- a/src/routes/solid-start/guides/data-mutation.mdx
+++ b/src/routes/solid-start/guides/data-mutation.mdx
@@ -14,10 +14,8 @@ To handle [`