From 621c719051ce4b18f9357883c38c77122616056a Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 08:50:44 +0200 Subject: [PATCH 01/20] Refactor imports in dynamic-routes.mdx --- src/routes/solid-router/concepts/dynamic-routes.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/routes/solid-router/concepts/dynamic-routes.mdx b/src/routes/solid-router/concepts/dynamic-routes.mdx index aba2b544e..1059a4d5d 100644 --- a/src/routes/solid-router/concepts/dynamic-routes.mdx +++ b/src/routes/solid-router/concepts/dynamic-routes.mdx @@ -47,8 +47,7 @@ This allows for more complex routing descriptions rather than just checking the ```jsx import { lazy } from "solid-js"; import { render } from "solid-js/web"; -import { Router, Route } from "@solidjs/router"; -import type { SegmentValidators } from "./types"; +import { Router, Route, type MatchFilters } from "@solidjs/router"; const User = lazy(() => import("./pages/User")); From a5e33e4c9902f17be471e58fece3c6028d9310e3 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 08:53:14 +0200 Subject: [PATCH 02/20] Update path parameters documentation --- src/routes/solid-router/concepts/path-parameters.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/solid-router/concepts/path-parameters.mdx b/src/routes/solid-router/concepts/path-parameters.mdx index 4d7ff707e..054a791de 100644 --- a/src/routes/solid-router/concepts/path-parameters.mdx +++ b/src/routes/solid-router/concepts/path-parameters.mdx @@ -51,7 +51,7 @@ import { lazy } from "solid-js"; import { render } from "solid-js/web"; import { Router, Route } from "@solidjs/router"; -const User = import("./pages/User"); +const User = lazy(() => import("./pages/User")); const filters = { parent: ["mom", "dad"], // allow enum values @@ -119,3 +119,4 @@ In this case, `rest` will contain the rest of the path after `/users/`. It is important to note that wildcard routes must be located at the **end of the path**. If you place a wildcard route before the end, such as `/users/*rest/:id`, no routes will be matched. + From ed440e30adb610fad77f38801c871787427c5fd6 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 09:04:13 +0200 Subject: [PATCH 03/20] Correct runtime error description for component Fix grammatical error in the description of the component. --- src/routes/solid-router/reference/components/a.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/solid-router/reference/components/a.mdx b/src/routes/solid-router/reference/components/a.mdx index e09be7df1..0e92fc03c 100644 --- a/src/routes/solid-router/reference/components/a.mdx +++ b/src/routes/solid-router/reference/components/a.mdx @@ -3,7 +3,7 @@ title: A --- Solid Router exposes the `` component as a wrapper around the [native anchor tag ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). -It relies on the routing context provided by the [`` component](/solid-router/reference/components/router) and if used outside, will triggers a runtime error.. +It relies on the routing context provided by the [`` component](/solid-router/reference/components/router) and if used outside it will trigger a runtime error. `` supports relative and base paths. `` doesn't. But `` gets augmented when JS is present via a top-level listener to the DOM, so you get the From 7197ed605053c29a40d2d1832e4f63eb0d28798f Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 09:10:01 +0200 Subject: [PATCH 04/20] Refine HashRouter documentation for clarity and SEO --- .../solid-router/reference/components/hash-router.mdx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/routes/solid-router/reference/components/hash-router.mdx b/src/routes/solid-router/reference/components/hash-router.mdx index 168edac88..28d5c0991 100644 --- a/src/routes/solid-router/reference/components/hash-router.mdx +++ b/src/routes/solid-router/reference/components/hash-router.mdx @@ -2,15 +2,13 @@ title: HashRouter --- -The `HashRouter` is a top level component that manages the routing of your application. -It is a client side router that uses hash-values in the URL - providing a single-page application a way to replicate the experience of a multi-page application. +The `HashRouter` is a top-level component that manages the routing of your application. It is a client-side router that uses the hash portion of the URL, allowing a single-page application to mimic the experience of a multi-page site. -Since hash-routing provides a way for an application to run from a single HTML file, it can be used when hosting on a static file server. +Hash routing enables an application to run from a single HTML file, making it suitable for hosting on static file servers. -Compared to a browser-router, such as [`Router`](/solid-router/reference/components/router), is that this approach is not SEO friendly. -Because most search engines do not index the hash portion of a URL, they are only able to see the index page of your application when using this approach. +However, compared to a browser router like [`Router`](/solid-router/reference/components/router), this approach is not SEO-friendly. Most search engines do not index the hash portion of URLs, so they can only crawl the index page of your application. -The `root` property is used for components that wrap a matched route and require access to the router context, relevant with navigation components that use [``](/solid-router/reference/components/a) links. +The `root` prop is used for layout components that wrap matched routes and need access to the router context. This is particularly useful for navigation components that include [``](/solid-router/reference/components/a) links. ```tsx import { render } from "solid-js/web"; From ba07a14634634d0de5d9e31dbda35ce3cc45cd36 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 09:19:45 +0200 Subject: [PATCH 05/20] Fix typos and formatting in action.mdx --- .../reference/data-apis/action.mdx | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/routes/solid-router/reference/data-apis/action.mdx b/src/routes/solid-router/reference/data-apis/action.mdx index 8f3a5e666..f63230344 100644 --- a/src/routes/solid-router/reference/data-apis/action.mdx +++ b/src/routes/solid-router/reference/data-apis/action.mdx @@ -112,7 +112,7 @@ const submission = useSubmission(action, (input) => filter(input)); ## Revalidate cached functions ### Revalidate all (default) -By default all cached functions will be revalidated wether the action does not return or return a "normal" response. +By default all cached functions will be revalidated whether the action does not return or return a "normal" response. ```jsx @@ -120,7 +120,7 @@ const deleteTodo = action(async (formData: FormData) => { const id = Number(formData.get("id")) await api.deleteTodo(id) // ... - return new Response("success", { status: 200 }); + return new Response("success", { status: 200 }); }) ``` @@ -136,15 +136,15 @@ const deleteTodo = action(async (formData: FormData) => { const id = Number(formData.get("id")) await api.deleteTodo(id) return json( - { deleted: id }, - { revalidate: ["getAllTodos", getTodos.key, getTodoByID.keyFor(id)]} + { deleted: id }, + { revalidate: ["getAllTodos", getTodos.key, getTodoById.keyFor(id)]} ) //or - return reload({ revalidate: ["getAllTodos", getTodos.key, getTodoByID.keyFor(id)]}) + return reload({ revalidate: ["getAllTodos", getTodos.key, getTodoById.keyFor(id)]}) //or - return redirect("/", { revalidate: ["getAllTodos", getTodos.key, getTodoByID.keyFor(id)]}) + return redirect("/", { revalidate: ["getAllTodos", getTodos.key, getTodoById.keyFor(id)]}) }) @@ -158,7 +158,7 @@ const deleteTodo = action(async (formData: FormData) => { const id = Number(formData.get("id")) await api.deleteTodo(id) // returns a `json` without revalidating the action. - return json(`deleted ${id}`,{ revalidate: "nothing" }) + return json(`deleted ${id}`, { revalidate: "nothing" }) // or reload the route without revalidating the request. return reload({ revalidate: "nothing" }) @@ -174,21 +174,20 @@ const deleteTodo = action(async (formData: FormData) => { Cached functions can also be revalidated by the `revalidate` helper. ```jsx -revalidate([getTodos.key, getTodoByID.keyFor(id)]) +revalidate([getTodos.key, getTodoById.keyFor(id)]) ``` This is also great if you want to set your own "refresh" interval e.g. poll data every 30 seconds. ```jsx -export default function TodoLayout(){ - - const todos = createAsync(() => getTodos()) +export default function TodoLayout() { + const todos = createAsync(() => getTodos()); onMount(() => { - //30 second polling - const interval = setInterval(() => revalidate(getTodos.key),1000 * 30) - onCleanup(() => clearInterval(interval)) + // 30 second polling + const interval = setInterval(() => revalidate(getTodos.key), 1000 * 30); + onCleanup(() => clearInterval(interval)); }) // ... From 0d18515a4c7270466a5e04f1e3425cc2e54f6e94 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 09:22:47 +0200 Subject: [PATCH 06/20] Fix typo in createAsync documentation --- src/routes/solid-router/reference/data-apis/create-async.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/solid-router/reference/data-apis/create-async.mdx b/src/routes/solid-router/reference/data-apis/create-async.mdx index c8b7b833d..c6fedca50 100644 --- a/src/routes/solid-router/reference/data-apis/create-async.mdx +++ b/src/routes/solid-router/reference/data-apis/create-async.mdx @@ -12,7 +12,7 @@ Reading it before it is ready causes Suspense/Transitions to trigger. ::: This is light wrapper over [`createResource`](/reference/basic-reactivity/create-resource) which serves as a stand-in for a future primitive being brought to Solid core in 2.0. -It is recommended that `createAsync` be used in favor of `createResource` specially when in a **SolidStart** app because `createAsync` works better in conjunction with the [cache](/solid-router/reference/data-apis/cache) helper. +It is recommended that `createAsync` be used in favor of `createResource` especially in a **SolidStart** app because `createAsync` works better in conjunction with the [query](/solid-router/reference/data-apis/query) helper. @@ -21,7 +21,7 @@ import { createAsync } from "@solidjs/router"; import { Suspense } from "solid-js"; import { getUser } from "./api"; -export function Component () => { +export function Component() { const user = createAsync(() => getUser(params.id)); return ( From 6da1d39bad043ce56b205dec430d7037771a9a02 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 09:25:26 +0200 Subject: [PATCH 07/20] Refactor getPosts to correct logic --- src/routes/solid-router/reference/data-apis/revalidate.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/solid-router/reference/data-apis/revalidate.mdx b/src/routes/solid-router/reference/data-apis/revalidate.mdx index 0319ba41d..f184991bb 100644 --- a/src/routes/solid-router/reference/data-apis/revalidate.mdx +++ b/src/routes/solid-router/reference/data-apis/revalidate.mdx @@ -10,9 +10,9 @@ import { For } from "solid-js"; import { query, createAsync, revalidate } from "@solidjs/router"; const getPosts = query(async () => { - return await fetch("https://api.com/posts").then((response) => - response.json() - ); + const response = await fetch("https://api.com/posts"); + const data = await response.json(); + return data; }, "posts"); function Posts() { From 462ddc6325cb4651a55d03f19d37e50525fe9f6e Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 09:28:59 +0200 Subject: [PATCH 08/20] Update filter description and add keyed to Show --- .../reference/data-apis/use-submission.mdx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) 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 7153e664c..75d4eadcb 100644 --- a/src/routes/solid-router/reference/data-apis/use-submission.mdx +++ b/src/routes/solid-router/reference/data-apis/use-submission.mdx @@ -31,8 +31,8 @@ Learn more about actions in the [`action`](/solid-router/reference/data-apis/act ## Filtering Submissions As an optional second parameter, the `useSubmission` helper can receive a filter function to only return the submission that matches the condition. -The filter receives the submitted dated as a parameter and should return a boolean value. -E.g.: action below will only submit if the name is "solid". +The filter receives the submitted data as a parameter and should return a boolean value. +The action below will only submit if the name is "solid". ```tsx title="component.tsx" {4-8} import { useSubmission } from "@solidjs/router"; @@ -40,7 +40,6 @@ import { useSubmission } from "@solidjs/router"; function Component() { const submission = useSubmission(postNameAction, ([formData]) => { const name = formData.get("name") ?? ""; - return name === "solid"; }); @@ -71,11 +70,11 @@ function Component() { return ( <> - + {(name) =>
Optimistic: {name() as string}
} - + {(name) =>
Result: {name()}
} @@ -100,11 +99,11 @@ function Component() { return ( <> - + {(name) =>
Optimistic: {name()}
} - + {(name) =>
Result: {name()}
} @@ -135,7 +134,7 @@ function Component() { return ( <> - + {(error) => (

Error: {error.message}

From a54bca68b7afe267da6a911e020228dd8b6f1c72 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 10:07:00 +0200 Subject: [PATCH 09/20] Refactor useSubmissions example for clarity Updated the useSubmissions example to improve clarity and functionality, including changes to form handling and submission filtering. --- .../reference/data-apis/use-submissions.mdx | 191 ++++++++---------- 1 file changed, 85 insertions(+), 106 deletions(-) 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 c03ac618c..f6c126045 100644 --- a/src/routes/solid-router/reference/data-apis/use-submissions.mdx +++ b/src/routes/solid-router/reference/data-apis/use-submissions.mdx @@ -13,32 +13,27 @@ It's important to note that it requires the form method to be **post** otherwise In the example below, the `useSubmissions` helper is used to retain a list of all submission results to that action while also giving feedback on the pending state of the current in-flight submission. -```tsx title="component.tsx" {4,9-20, 23} +```tsx title="component.tsx" {4,9-15, 18} import { useSubmissions } from "@solidjs/router"; function Component() { const submissions = useSubmissions(postNameAction); - return ( -
-
    - - {([attemptIndex, data]) => ( - - { result => ( -
  • - Backend {attemptIndex}: {result.name} -
    • - )} -     - - )} -     -
- - -
- ) + return ( +
+
    + + {([attemptIndex, data]) => ( + + {(result) =>
  • Backend {attemptIndex}: {result.name}
    • } +     + )} +     +
+ + +
+ ); } ``` @@ -49,39 +44,33 @@ To trigger a submission, [actions](https://docs.solidjs.com/) can be used. ## Filtering Submissions As an optional second parameter, the `useSubmissions` helper can receive a filter function to only return the submission that matches the condition. -The filter receives the submitted dated as a parameter and should return a boolean value. -E.g.: action below will only submit if the name is "solid". +The filter receives the submitted data as a parameter and should return a boolean value. +The action below will only submit if the name is "solid". -```tsx title="component.tsx" {4-8} +```tsx title="component.tsx" {4-7} import { useSubmissions } from "@solidjs/router"; function Component() { - const submissions = useSubmissions(postNameAction, ([formData]) => { - const name = formData.get("name") ?? ""; - - return name === "solid"; - }); + const submissions = useSubmissions( + postNameAction, + ([formData]) => formData.get("name") === "solid" + ); return (
-
    - - {([attemptIndex, data]) => ( - - { result => ( -
  • - Backend {attemptIndex}: {result.name} -
    • - )} -     - - )} -     -
- - -
- ) +
    + + {([attemptIndex, data]) => ( + + {(result) =>
  • Backend {attemptIndex}: {result.name}
    • } +     + )} +     +
+ + + + ); } ``` @@ -99,26 +88,21 @@ import { useSubmissions } from "@solidjs/router"; function Component() { const submissions = useSubmissions(postNameAction); - return ( -
-
    - - {([attemptIndex, data]) => ( - - {(input) => { - const name = (input().value as [string, string])[1] - - return ( -
  • Optimistic: {name}
    • - )}} -     - )} -     -
- - -
- ) + return ( +
+
    + + {([, data]) => ( + + {(input) =>
  • Optimistic: {input().value}
    • } +     + )} +     +
+ + +
+ ); } ``` @@ -130,26 +114,21 @@ import { useSubmissions } from "@solidjs/router"; function Component() { const submissions = useSubmissions(postNameAction); - return ( -
-
    - - {([attemptIndex, data]) => ( - - {(input) => { - const name = input().value[1] - - return ( -
  • Optimistic: {name}
    • - )}} -     - )} -     -
- - -
- ) + return ( +
+
    + + {([, data]) => ( + + {(input) =>
  • Optimistic: {input().value[1]}
    • } +     + )} +     +
+ + +
+ ); } ``` @@ -167,24 +146,24 @@ import { useSubmissions } from "@solidjs/router"; function Component() { const submissions = useSubmissions(postNameAction); - return ( -
-
    - - {([attempt, data]) => ( - -
  • -

    Backend {attempt}: {data.error.message}

    - - -
    • -     - )} -     -
- - -
- ) + return ( +
+
    + + {([attempt, data]) => ( + +
  • +

    Backend {attempt}: {data.error.message}

    + + +
    • +     + )} +     +
+ + +
+ ); } ``` From b94a00a7ff6967f4565e14295e4234c7fbd6bbd7 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 10:16:51 +0200 Subject: [PATCH 10/20] Fix code snippets and improve clarity in use-submissions.mdx --- .../reference/data-apis/use-submissions.mdx | 32 +++++++++++-------- 1 file changed, 19 insertions(+), 13 deletions(-) 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 f6c126045..2f4147b05 100644 --- a/src/routes/solid-router/reference/data-apis/use-submissions.mdx +++ b/src/routes/solid-router/reference/data-apis/use-submissions.mdx @@ -13,7 +13,8 @@ It's important to note that it requires the form method to be **post** otherwise In the example below, the `useSubmissions` helper is used to retain a list of all submission results to that action while also giving feedback on the pending state of the current in-flight submission. -```tsx title="component.tsx" {4,9-15, 18} +```tsx title="component.tsx" {5,10-16, 19} +import { For, Show } from "solid-js"; import { useSubmissions } from "@solidjs/router"; function Component() { @@ -47,7 +48,8 @@ As an optional second parameter, the `useSubmissions` helper can receive a filte The filter receives the submitted data as a parameter and should return a boolean value. The action below will only submit if the name is "solid". -```tsx title="component.tsx" {4-7} +```tsx title="component.tsx" {5-8} +import { For, Show } from "solid-js"; import { useSubmissions } from "@solidjs/router"; function Component() { @@ -80,9 +82,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 tab title="TypeScript" {6,13-20} -// component.tsx -import { Show } from "solid-js"; +```tsx tab title="TypeScript" {5,12-17} +import { For, Show } from "solid-js"; import { useSubmissions } from "@solidjs/router"; function Component() { @@ -93,8 +94,11 @@ function Component() {
    {([, data]) => ( - - {(input) =>
  • Optimistic: {input().value}
    • } + + {(input) => { + const name = (input().value as [string, string])[1]; + return
  • Optimistic: {name}
    • ; + }}     )}     @@ -106,9 +110,8 @@ function Component() { } ``` -```tsx tab title="JavaScript" {6,13-20} -// component.jsx -import { Show } from "solid-js"; +```tsx tab title="JavaScript" {5,12-17} +import { For, Show } from "solid-js"; import { useSubmissions } from "@solidjs/router"; function Component() { @@ -119,8 +122,11 @@ function Component() {
      {([, data]) => ( - - {(input) =>
    • Optimistic: {input().value[1]}
      • } + + {(input) => { + const name = input().value[1]; + return
    • Optimistic: {name}
      • ; + }}       )}       @@ -140,7 +146,7 @@ This allows you to provide feedback to the user that the action has failed. Addi At this stage, you can also use the `retry()` method to attempt the action again or the `clear()` to wipe the filled data in the platform. ```tsx title="component.tsx" {12-18} -import { Show } from "solid-js"; +import { For, Show } from "solid-js"; import { useSubmissions } from "@solidjs/router"; function Component() { From 73e15543314a8044448af2653b044cbb4b34fc3e Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 10:24:30 +0200 Subject: [PATCH 11/20] Refactor useSubmission example for clarity --- .../reference/data-apis/use-submission.mdx | 164 ++++++++---------- 1 file changed, 77 insertions(+), 87 deletions(-) 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 75d4eadcb..a2aa0ef38 100644 --- a/src/routes/solid-router/reference/data-apis/use-submission.mdx +++ b/src/routes/solid-router/reference/data-apis/use-submission.mdx @@ -13,14 +13,12 @@ import { useSubmission } from "@solidjs/router"; function Component() { const submission = useSubmission(postNameAction); - return ( -
      - - -
      - ) + return ( +
      + + +
      + ); } ``` @@ -34,23 +32,21 @@ As an optional second parameter, the `useSubmission` helper can receive a filter The filter receives the submitted data as a parameter and should return a boolean value. The action below will only submit if the name is "solid". -```tsx title="component.tsx" {4-8} +```tsx title="component.tsx" {4-7} import { useSubmission } from "@solidjs/router"; function Component() { - const submission = useSubmission(postNameAction, ([formData]) => { - const name = formData.get("name") ?? ""; - return name === "solid"; - }); - - return ( -
      - - -
      - ) + const submission = useSubmission( + postNameAction, + ([formData]) => formData.get("name") === "solid" + ); + + return ( +
      + + +
      + ); } ``` @@ -60,61 +56,59 @@ 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" {6,10-12} -// component.tsx +```tsx tab title="TypeScript" {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()}
      } -       - -
      - - -
      - - ) + return ( + <> + + {(name) =>
      Optimistic: {name() as string}
      } +       + + + {(name) =>
      Result: {name()}
      } +       + +
      + + +
      + + ); } ``` -```tsx tab title="JavaScript" {6,10-12} -// component.jsx +```tsx tab title="JavaScript" {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()}
      } -       - -
      - - -
      - - ) + return ( + <> + + {(name) =>
      Optimistic: {name()}
      } +       + + + {(name) =>
      Result: {name()}
      } +       + +
      + + +
      + + ); } ``` @@ -125,36 +119,32 @@ This allows you to provide feedback to the user that the action has failed. Addi At this stage, you can also use the `retry()` method to attempt the action again or the `clear()` to wipe the filled data in the platform. -```tsx title="component.tsx" {12-18} +```tsx title="component.tsx" {12-14} import { Show } from "solid-js"; import { useSubmission } from "@solidjs/router"; function Component() { const submission = useSubmission(postNameAction); - return ( - <> - - {(error) => ( -
      -

      Error: {error.message}

      - - -
      - )} -       - -
      - - -
      - - ) + return ( + <> + + {(error) => ( +
      +

      Error: {error.message}

      + + +
      + )} +       + +
      + + +
      + + ); } ``` From 51e356227dcd5f5a523251658080165da16f1884 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 10:36:16 +0200 Subject: [PATCH 12/20] Fix formatting in Vercel rewrites section example --- src/routes/solid-router/rendering-modes/spa.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/routes/solid-router/rendering-modes/spa.mdx b/src/routes/solid-router/rendering-modes/spa.mdx index 6bdcc8263..ce919c7e9 100644 --- a/src/routes/solid-router/rendering-modes/spa.mdx +++ b/src/routes/solid-router/rendering-modes/spa.mdx @@ -16,11 +16,11 @@ Vercel, on the other hand, requires a rewrites section in your `vercel.json`: ```json { - "rewrites": [ - { - "source": "/(.*)", - "destination": "/index.html" - } - ] + "rewrites": [ + { + "source": "/(.*)", + "destination": "/index.html" + } + ] } ``` From 15d46ed611d036e40b28e07b6fddebd99c87732b Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 10:38:01 +0200 Subject: [PATCH 13/20] Clarify prerequisite version wording in documentation --- src/routes/solid-router/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/solid-router/index.mdx b/src/routes/solid-router/index.mdx index d75f93c71..5cc17df81 100644 --- a/src/routes/solid-router/index.mdx +++ b/src/routes/solid-router/index.mdx @@ -5,7 +5,7 @@ title: Overview # Overview :::note[Prerequisites] - The docs are based on latest Solid Router. + The docs are based on the latest version of Solid Router. To use this version, you need to have Solid v1.8.4 or later installed. ::: From da1f9de1d159ca66bf6bab92b5910cf6dd0f6123 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 10:38:36 +0200 Subject: [PATCH 14/20] Improve clarity of Solid Router description --- src/routes/solid-router/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/solid-router/index.mdx b/src/routes/solid-router/index.mdx index 5cc17df81..b03c0ffca 100644 --- a/src/routes/solid-router/index.mdx +++ b/src/routes/solid-router/index.mdx @@ -9,7 +9,7 @@ title: Overview To use this version, you need to have Solid v1.8.4 or later installed. ::: -Solid Router is the universal router for Solid which works for rendering on the client or the server. +Solid Router is the universal router for Solid, supporting rendering on both the client and the server. It was inspired by and combines paradigms of [React Router](https://reactrouter.com/en/main) and the [Ember Router](https://guides.emberjs.com/release/routing/). A router provides a way to change a user's view based on the URL in the browser. From db15d0c4a7ef91ad9ae601cb3b6a537a38109dfe Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 10:42:36 +0200 Subject: [PATCH 15/20] Fix typo in use-match.mdx --- src/routes/solid-router/reference/primitives/use-match.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/solid-router/reference/primitives/use-match.mdx b/src/routes/solid-router/reference/primitives/use-match.mdx index c0391d906..eff177951 100644 --- a/src/routes/solid-router/reference/primitives/use-match.mdx +++ b/src/routes/solid-router/reference/primitives/use-match.mdx @@ -12,7 +12,7 @@ return
      ; ``` As a second parameter, `useMatch` also accepts a group of `MatchFilters`. -These filteres allow for a more granular check. +These filters allow for a more granular check. The filters are the same used by the `` itself and they accept either a an array of strings, or a regular expression. Additionally, there's a `boolean` option to match a route only if it has, or doesn't have, the HTML extension. @@ -44,4 +44,4 @@ The check above will match: /solid-router/reference/... /solid-meta/reference/... /solid-start/reference/... -``` \ No newline at end of file +``` From 319a80f4d5f635f9a680ba8085a967da19a28493 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 10:43:13 +0200 Subject: [PATCH 16/20] Fix typo in useMatch documentation --- src/routes/solid-router/reference/primitives/use-match.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/solid-router/reference/primitives/use-match.mdx b/src/routes/solid-router/reference/primitives/use-match.mdx index eff177951..3637ae3c9 100644 --- a/src/routes/solid-router/reference/primitives/use-match.mdx +++ b/src/routes/solid-router/reference/primitives/use-match.mdx @@ -14,7 +14,7 @@ return
      ; As a second parameter, `useMatch` also accepts a group of `MatchFilters`. These filters allow for a more granular check. -The filters are the same used by the `` itself and they accept either a an array of strings, or a regular expression. Additionally, there's a `boolean` option to match a route only if it has, or doesn't have, the HTML extension. +The filters are the same used by the `` itself and they accept either an array of strings, or a regular expression. Additionally, there's a `boolean` option to match a route only if it has, or doesn't have, the HTML extension. ```js const filters: MatchFilters = { From d8345f994f0e60f1167c3c827981e110f6b36aef Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 10:46:11 +0200 Subject: [PATCH 17/20] Fix formatting and improve clarity in useBeforeLeave docs --- .../reference/primitives/use-before-leave.mdx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/routes/solid-router/reference/primitives/use-before-leave.mdx b/src/routes/solid-router/reference/primitives/use-before-leave.mdx index 784ea506d..5b861231b 100644 --- a/src/routes/solid-router/reference/primitives/use-before-leave.mdx +++ b/src/routes/solid-router/reference/primitives/use-before-leave.mdx @@ -5,27 +5,27 @@ title: useBeforeLeave `useBeforeLeave` takes a function that will be called prior to leaving a route. The function will be called with: -- from (_Location_): current location (before change). -- to (_string | number_}: path passed to `navigate.` -- options (_NavigateOptions_}: options passed to `navigate.` -- preventDefault (_void function_): call to block the route change. -- defaultPrevented (_readonly boolean_): `true` if any previously called leave handlers called `preventDefault()`. -- retry (_void function_, _force?: boolean_ ): call to retry the same navigation. - Pass `true` to skip running the leave handlers again (ie. force navigate without confirming). +- from (_Location_): current location (before change) +- to (_string | number_): path passed to `navigate` +- options (_NavigateOptions_): options passed to `navigate` +- preventDefault (_void function_): call to block the route change +- defaultPrevented (_readonly boolean_): `true` if any previously called leave handlers called `preventDefault()` +- retry (_void function_, _force?: boolean_ ): call to retry the same navigation + Pass `true` to skip running the leave handlers again (ie. force navigate without confirming) -Example usage: +Example usage ```js useBeforeLeave((e: BeforeLeaveEventArgs) => { - if (form.isDirty && !e.defaultPrevented) { - // preventDefault to block immediately and prompt user async - e.preventDefault(); - setTimeout(() => { - if (window.confirm("Discard unsaved changes - are you sure?")) { - // user wants to proceed anyway so retry with force=true - e.retry(true); - } - }, 100); - } + if (form.isDirty && !e.defaultPrevented) { + // preventDefault to block immediately and prompt user async + e.preventDefault(); + setTimeout(() => { + if (window.confirm("Discard unsaved changes - are you sure?")) { + // user wants to proceed anyway so retry with force=true + e.retry(true); + } + }, 100); + } }); ``` From 084e09d7aa5cd0023eff4f56c2d7327c55eb8459 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 10:49:42 +0200 Subject: [PATCH 18/20] Fix wording in use-navigate documentation --- src/routes/solid-router/reference/primitives/use-navigate.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/solid-router/reference/primitives/use-navigate.mdx b/src/routes/solid-router/reference/primitives/use-navigate.mdx index 82988990a..71fe2a4aa 100644 --- a/src/routes/solid-router/reference/primitives/use-navigate.mdx +++ b/src/routes/solid-router/reference/primitives/use-navigate.mdx @@ -13,11 +13,11 @@ Retrieves the method which accepts a path to navigate to and an optional object const navigate = useNavigate(); if (unauthorized) { - navigate("/login", { replace: true }); + navigate("/login", { replace: true }); } ``` -If you are inside of a query, action or cache (deprecated) function you will instead want to use [redirect](/solid-router/reference/response-helpers/redirect) or [reload](/solid-router/reference/response-helpers/reload). +If you are inside a query or action function you will instead want to use [redirect](/solid-router/reference/response-helpers/redirect) or [reload](/solid-router/reference/response-helpers/reload). :::note The state is serialized using the [structured clone From bc7766e261b3069b70f937dc609e3345f7e3a317 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 11:15:36 +0200 Subject: [PATCH 19/20] Addresses #1192 --- src/routes/solid-router/concepts/actions.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/solid-router/concepts/actions.mdx b/src/routes/solid-router/concepts/actions.mdx index 53a96da9c..c2f2bba97 100644 --- a/src/routes/solid-router/concepts/actions.mdx +++ b/src/routes/solid-router/concepts/actions.mdx @@ -49,8 +49,8 @@ In [SolidStart](/solid-start) apps, it's recommended to use the [`"use server"`] ### Using actions -To use the action, you can call it from within a component using [`useAction`](/solid-router/reference/data-apis/use-action). -This returns a function that can be called with the necessary arguments to trigger the action. +To invoke an action, use [`useAction`](/solid-router/reference/data-apis/use-action) in a component. +This returns a callable function that executes the action, passing any arguments if the function wrapped by `action` expects them. ```tsx del={1} ins={2,9-13} import { action } from "@solidjs/router"; From 658dde3c46ab836b5153349d2eac12578450c378 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 14 Sep 2025 11:18:08 +0200 Subject: [PATCH 20/20] Clarify usage of useAction in actions.mdx --- src/routes/solid-router/concepts/actions.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/solid-router/concepts/actions.mdx b/src/routes/solid-router/concepts/actions.mdx index c2f2bba97..1e6982aa1 100644 --- a/src/routes/solid-router/concepts/actions.mdx +++ b/src/routes/solid-router/concepts/actions.mdx @@ -49,8 +49,8 @@ In [SolidStart](/solid-start) apps, it's recommended to use the [`"use server"`] ### Using actions -To invoke an action, use [`useAction`](/solid-router/reference/data-apis/use-action) in a component. -This returns a callable function that executes the action, passing any arguments if the function wrapped by `action` expects them. +With [`useAction`](/solid-router/reference/data-apis/use-action), you can invoke an action from a component. +It returns a function that triggers the action, allowing you to include any parameters needed by the function wrapped by `action`. ```tsx del={1} ins={2,9-13} import { action } from "@solidjs/router";