+
+```bash frame="none"
+yarn dlx degit solidjs/templates/ts my-app
+```
-
- ```bash frame="none" pnpm dlx degit solidjs/templates/ts my-app ```
+
+```bash frame="none"
+pnpm dlx 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
```
+
@@ -147,24 +203,39 @@ cd my-app
+
```bash frame="none"
npm install
```
+
+
+
+```bash frame="none"
+yarn install
+```
-
```bash frame="none" yarn install ```
+
-
```bash frame="none" pnpm install ```
+```bash frame="none"
+pnpm install
+```
+
+
```bash frame="none"
bun install
```
+
+
```bash frame="none"
deno install
```
+
@@ -172,24 +243,39 @@ deno install
+
```bash frame="none"
npm run dev
```
+
+
-
```bash frame="none" yarn dev ```
+```bash frame="none"
+yarn dev
+```
+
+
-
```bash frame="none" pnpm dev ```
+```bash frame="none"
+pnpm dev
+```
+
+
```bash frame="none"
bun dev
```
+
+
```bash frame="none"
deno task dev
```
+
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 25bde1e2d..5daf37c9d 100644
--- a/src/routes/solid-meta/getting-started/installation-and-setup.mdx
+++ b/src/routes/solid-meta/getting-started/installation-and-setup.mdx
@@ -14,17 +14,25 @@ To get started, install using your preferred package manager.
+
```bash frame="none"
npm i @solidjs/meta
```
+
+
-
```bash frame="none" yarn add @solidjs/meta ```
+```bash frame="none"
+yarn add @solidjs/meta
+```
+
+
```bash frame="none"
pnpm add @solidjs/meta
```
+
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 aa5855796..f3e0cd132 100644
--- a/src/routes/solid-router/getting-started/installation-and-setup.mdx
+++ b/src/routes/solid-router/getting-started/installation-and-setup.mdx
@@ -15,19 +15,32 @@ To get started with Solid Router, install it using your preferred package manage
+
```bash frame="none"
npm i @solidjs/router
```
+
+
-
```bash frame="none" yarn add @solidjs/router ```
+```bash frame="none"
+yarn add @solidjs/router
+```
-
```bash frame="none" pnpm add @solidjs/router ```
+
+```bash frame="none"
+pnpm add @solidjs/router
+```
+
+
+
```bash frame="none"
bun add @solidjs/router
```
+
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 b01998327..e1f6e93c1 100644
--- a/src/routes/solid-router/reference/data-apis/use-submission.mdx
+++ b/src/routes/solid-router/reference/data-apis/use-submission.mdx
@@ -69,64 +69,65 @@ Once the action is complete, the `pending` property will be set to `false` and t
+
```tsx title="component.tsx" {5,9-11}
import { Show } from "solid-js";
import { useSubmission } from "@solidjs/router";
function Component() {
-const submission = useSubmission(postNameAction);
-
- return (
- <>
-
- {(name) => Optimistic: {name() as string}
}
-
-
-
- {(name) => Result: {name()}
}
-
-
-
-
- )
+ const submission = useSubmission(postNameAction);
+ return (
+ <>
+
+ {(name) => Optimistic: {name() as string}
}
+
+
+
+ {(name) => Result: {name()}
}
+
+
+
+
+ );
}
+```
-````
+
```tsx title="component.jsx" {5,9-11}
import { Show } from "solid-js";
import { useSubmission } from "@solidjs/router";
function Component() {
- const submission = useSubmission(postNameAction);
-
- return (
- <>
-
- {(name) => Optimistic: {name()}
}
-
-
-
- {(name) => Result: {name()}
}
-
-
-
-
- )
+ const submission = useSubmission(postNameAction);
+
+ return (
+ <>
+
+ {(name) => Optimistic: {name()}
}
+
+
+
+ {(name) => Result: {name()}
}
+
+
+
+
+ );
}
-````
+```
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 53df4af40..8e4db5288 100644
--- a/src/routes/solid-router/reference/data-apis/use-submissions.mdx
+++ b/src/routes/solid-router/reference/data-apis/use-submissions.mdx
@@ -104,68 +104,67 @@ Once the action is complete, the `pending` property will be set to `false` and t
+
```tsx title="component.tsx" {5,12-19}
import { Show } from "solid-js";
import { useSubmissions } from "@solidjs/router";
function Component() {
-const submissions = useSubmissions(postNameAction);
-
- return (
-
- )
+ return (
+
+ );
}
+```
-````
+
```tsx title="component.jsx" {5,12-19}
import { Show } from "solid-js";
import { useSubmissions } from "@solidjs/router";
function Component() {
- const submissions = useSubmissions(postNameAction);
+ const submissions = useSubmissions(postNameAction);
- return (
-
+ );
}
-````
+```
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 d652d9b9a..08abdfec6 100644
--- a/src/routes/solid-start/building-your-application/data-loading.mdx
+++ b/src/routes/solid-start/building-your-application/data-loading.mdx
@@ -14,6 +14,7 @@ It takes an async function and returns a [signal](/reference/basic-reactivity/cr
+
```tsx {6-9} title="/src/routes/users.tsx"
import { For, createResource } from "solid-js";
@@ -25,25 +26,25 @@ export default function Page() {
return (await response.json()) as User[];
});
- return {(user) => {user.name}};
-
+ return {(user) => {user.name}};
}
+```
-````
+
```tsx {4-7} title="/src/routes/users.jsx"
import { For, createResource } from "solid-js";
export default function Page() {
const [users] = createResource(async () => {
const response = await fetch("https://example.com/users");
- return (await response.json());
+ return await response.json();
});
return {(user) => {user.name}};
}
-````
+```
@@ -56,6 +57,7 @@ Using some of the features of `solid-router`, we can create a cache for our data
+
```tsx title="/routes/users.tsx" {6, 9, 12}
import { For } from "solid-js";
import { createAsync, query } from "@solidjs/router";
@@ -63,8 +65,8 @@ import { createAsync, query } from "@solidjs/router";
type User = { name: string; email: string };
const getUsers = query(async () => {
-const response = await fetch("https://example.com/users");
-return (await response.json()) as User[];
+ const response = await fetch("https://example.com/users");
+ return (await response.json()) as User[];
}, "users");
export const route = {
@@ -74,21 +76,21 @@ export const route = {
export default function Page() {
const users = createAsync(() => getUsers());
- return {(user) => {user.name}};
-
+ return {(user) => {user.name}};
}
+```
-````
+
```tsx title="/routes/users.jsx" {4, 7, 10}
import { For } from "solid-js";
import { createAsync, query } from "@solidjs/router";
const getUsers = query(async () => {
const response = await fetch("https://example.com/users");
- return (await response.json());
+ return await response.json();
}, "users");
export const route = {
@@ -100,7 +102,7 @@ export default function Page() {
return {(user) => {user.name}};
}
-````
+```
@@ -127,6 +129,7 @@ For example, it could be database access or internal APIs, or when you sit withi
+
```tsx title="/routes/users.tsx" {7}
import { For } from "solid-js";
import { createAsync, query } from "@solidjs/router";
@@ -134,8 +137,8 @@ import { createAsync, query } from "@solidjs/router";
type User = { name: string; email: string };
const getUsers = query(async () => {
-"use server";
-return store.users.list();
+ "use server";
+ return store.users.list();
}, "users");
export const route = {
@@ -145,15 +148,14 @@ export const route = {
export default function Page() {
const users = createAsync(() => getUsers());
- return {(user) => {user.name}};
-
+ return {(user) => {user.name}};
}
+```
-````
-
+
```tsx title="/routes/users.jsx" {5}
import { For } from "solid-js";
import { createAsync, query } from "@solidjs/router";
@@ -172,7 +174,8 @@ 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 9836bf2ff..fd819e695 100644
--- a/src/routes/solid-start/building-your-application/routing.mdx
+++ b/src/routes/solid-start/building-your-application/routing.mdx
@@ -88,7 +88,8 @@ In this case the `blog.tsx` file will act as a layout for the articles in the `b
by using `props.children` in the layout.
-
+
+
```tsx filename="routes/blog.tsx" title="blog.tsx"
import { RouteSectionProps } from "@solidjs/router";
@@ -96,14 +97,17 @@ export default function BlogLayout(props: RouteSectionProps) {
return
{props.children}
;
}
```
-
-
- ```jsx filename="routes/blog.jsx" title="blog.tsx"
+
+
+
+
+```jsx filename="routes/blog.jsx" title="blog.tsx"
export default function BlogLayout(props) {
return
{props.children}
;
}
```
-
+
+
**Note**: Creating a `blog/index.tsx` or `blog/(blogIndex).tsx` is not the same as it would only be used for the index route.
@@ -249,7 +253,8 @@ SolidStart offers a way to add additional route configuration outside of the fil
Since SolidStart supports the use of other routers, you can use the `route` export provided by `
` to define the route configuration for the router of your choice.
-
+
+
```jsx {3-7}
import type { RouteSectionProps, RouteDefinition } from "@solidjs/router";
@@ -268,10 +273,11 @@ export default function UsersLayout(props: RouteSectionProps) {
);
}
```
-
-
-```jsx {3-7}
+
+
+
+```jsx {3-7}
export const route = {
preload() {
// define preload function
@@ -279,15 +285,16 @@ export const route = {
};
export default function UsersLayout(props) {
- return (
-
-
Users
- {props.children}
-
- );
+ return (
+
+
Users
+ {props.children}
+
+ );
}
```
-
+
+
[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 73f1def42..2691d8cd9 100644
--- a/src/routes/solid-start/getting-started.mdx
+++ b/src/routes/solid-start/getting-started.mdx
@@ -10,21 +10,39 @@ Once you have created a directory for your new application, you can initialize S
+
```bash frame="none"
npm init solid@latest
```
+
+
+
+```bash frame="none"
+yarn create solid
+```
-
```bash frame="none" yarn create solid ```
+
-
```bash frame="none" pnpm create solid ```
+```bash frame="none"
+pnpm create solid
+```
-
```bash frame="none" bun create solid ```
+
+```bash frame="none"
+bun create solid
+```
+
+
+
```bash frame="none"
deno run -A npm:create-solid
```
+
@@ -52,19 +70,32 @@ Once you have chosen your template and configuration options, you can navigate t
+
```bash frame="none"
npm install
```
+
+
+
+```bash frame="none"
+yarn install
+```
-
```bash frame="none" yarn install ```
+
-
```bash frame="none" pnpm i ```
+```bash frame="none"
+pnpm i
+```
+
+
```bash frame="none"
bun install
```
+
@@ -76,19 +107,32 @@ 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"
+yarn dev
+```
-
```bash frame="none" pnpm dev ```
+
+```bash frame="none"
+pnpm dev
+```
+
+
+
```bash frame="none"
bun dev
```
+