From 09a60d3b0d8b2462429979467a91d6c3b46cda11 Mon Sep 17 00:00:00 2001 From: Brenley Dueck Date: Tue, 11 Aug 2026 17:13:41 -0500 Subject: [PATCH 1/2] docs: apply Solid 2 RC follow-ups --- .claude/launch.json | 11 +++++++++++ osmium/src/ui/layout/main-header.tsx | 2 +- src/routes/(0)index.mdx | 6 +++--- src/routes/(1)getting-started/(0)quick-start.mdx | 8 ++++---- src/routes/(2)concepts/(0)reactivity.mdx | 4 ++++ src/routes/(2)concepts/(2)components-and-jsx.mdx | 12 ++++++++++++ src/routes/(2)concepts/(3)async-reactivity.mdx | 5 ++--- src/routes/(3)building-apps/(3)server-functions.mdx | 2 ++ src/routes/(4)routing/(1)solid-router/(1)setup.mdx | 2 +- 9 files changed, 40 insertions(+), 12 deletions(-) create mode 100644 .claude/launch.json diff --git a/.claude/launch.json b/.claude/launch.json new file mode 100644 index 000000000..eedc4432b --- /dev/null +++ b/.claude/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.0.1", + "configurations": [ + { + "name": "solid-docs-dev", + "runtimeExecutable": "pnpm", + "runtimeArgs": ["dev"], + "port": 3000 + } + ] +} diff --git a/osmium/src/ui/layout/main-header.tsx b/osmium/src/ui/layout/main-header.tsx index ee88762a8..2bf779dfb 100644 --- a/osmium/src/ui/layout/main-header.tsx +++ b/osmium/src/ui/layout/main-header.tsx @@ -114,7 +114,7 @@ export function MainHeader(_props: MainHeaderProps) { )} -
+
- --- :::note[These docs cover the release candidate] -Solid 2.0 is a release candidate (RC). +Solid 2.0 is in its release candidate (RC) phase. APIs may change before the stable release, and packages from the coordinated RC must use compatible versions. For Solid 1.x, SolidStart, and the current stable ecosystem, see the [current Solid documentation](https://docs.solidjs.com/). ::: Solid is a framework for building user interfaces on the web. -Solid 2.0 is a coordinated release of the whole platform: the core library, rendering, routing, head management, and the Vite plugin ship together and are designed to work together. +Solid 2.0 is a coordinated release of the whole platform: the core library, rendering, routing, head management, and the Vite plugin are designed to work together. You can try Solid in the [playground](https://playground.solidjs.com/) or [start a project](/getting-started/quick-start) right away. @@ -35,4 +35,4 @@ You can try Solid in the [playground](https://playground.solidjs.com/) or [start - [Building apps](/building-apps/app-structure): the application layer — structure, server functions, sessions, environment, deployment. - [Routing](/routing/overview): how routers plug in, with guides for Solid Router and TanStack Router. - [Migration](/migration/from-solid-1): moving from Solid 1.x, SolidStart, and earlier ecosystem versions. -- Reference: API documentation for each package, organized by import specifier. +- [Reference](/reference/solid-js/reactivity/create-effect): API documentation for each package, organized by import specifier. diff --git a/src/routes/(1)getting-started/(0)quick-start.mdx b/src/routes/(1)getting-started/(0)quick-start.mdx index 87a44f711..f1f0b44b8 100644 --- a/src/routes/(1)getting-started/(0)quick-start.mdx +++ b/src/routes/(1)getting-started/(0)quick-start.mdx @@ -11,15 +11,15 @@ These versions satisfy the Vite 8 runtime requirement used by the maintained tem Run the Solid CLI: ```bash -npm init solid +npm init solid@latest ``` Use the equivalent command for another package manager: ```bash -pnpm create solid -yarn create solid -bun create solid +pnpm create solid@latest +yarn create solid@latest +bun create solid@latest ``` Choose the `basic` project shape when the CLI prompts you. diff --git a/src/routes/(2)concepts/(0)reactivity.mdx b/src/routes/(2)concepts/(0)reactivity.mdx index 73370231c..87291ac91 100644 --- a/src/routes/(2)concepts/(0)reactivity.mdx +++ b/src/routes/(2)concepts/(0)reactivity.mdx @@ -79,6 +79,10 @@ console.log(model.fullName()); // "Grace Lovelace" model.dispose(); ``` +:::note +`model.fullName()` doesn't update until you call `flush()`. +::: + Use a memo when multiple consumers need the same derivation or when the derived value should form an equality boundary in the reactive graph. An expression used in only one JSX location can often read its sources directly. diff --git a/src/routes/(2)concepts/(2)components-and-jsx.mdx b/src/routes/(2)concepts/(2)components-and-jsx.mdx index 76cc795d9..75b5b2fc8 100644 --- a/src/routes/(2)concepts/(2)components-and-jsx.mdx +++ b/src/routes/(2)concepts/(2)components-and-jsx.mdx @@ -96,6 +96,11 @@ function SaveButton(props: { onSave: () => void }) { Use a `ref` directive with `addEventListener` when you need native listener options such as capture or passive handling. +:::note +If you are coming from React, you might be used to using onChange instead of onInput. +In Solid, the event name is the same as the DOM event name. +::: + ## Refs and directives A `ref` callback receives an element after Solid creates it. @@ -147,6 +152,10 @@ function listen( } ``` +:::note +`onSettled` replaces `onMount` from Solid v1. Read the [onSettled](/reference/solid-js/lifecycle-actions/on-settled) reference for more information. +::: + The factory registers setup and cleanup while it has an owner. The returned callback only stores the element for the settled work. @@ -285,6 +294,9 @@ When a context has a default value, `useContext` returns that value outside a ma When it has no default, reading it outside a matching provider throws `ContextNotFoundError`. Providers create a scoped owner, so nested providers can replace a value for their own descendants. +If you are coming from Solid 1, you might be used to a `ThemeContext.Provider` component. +In Solid 2, you can use the `ThemeContext` directly. + ## Rendering lists Use [`For`](/reference/solid-js/components-jsx/for) when rows come from an array. diff --git a/src/routes/(2)concepts/(3)async-reactivity.mdx b/src/routes/(2)concepts/(3)async-reactivity.mdx index 92d3b63ea..a25495c99 100644 --- a/src/routes/(2)concepts/(3)async-reactivity.mdx +++ b/src/routes/(2)concepts/(3)async-reactivity.mdx @@ -88,9 +88,6 @@ import { Loading, isPending } from "solid-js"; The result becomes `true` when another answer for that expression is in flight and has not revealed. If the expression has no settled answer yet, its read still follows the surrounding `Loading` path. -Read the async source itself. -Reading only an upstream input such as `id` cannot reveal whether a separate downstream computation is pending. - ## Work rejects: `Errored` If async work rejects, the error travels through the reactive graph. @@ -305,6 +302,8 @@ If the next answer exists, `latest(user)` returns it before the held update comm Otherwise, it returns the visible settled answer. Before any answer exists, the read still follows the normal `Loading` path. +A common use case for `latest` is an autocomplete or typeahead interface that keeps results visible while the next value loads. + ### Declare a committed first value Most applications should let unresolved first reads reach a `Loading` boundary. diff --git a/src/routes/(3)building-apps/(3)server-functions.mdx b/src/routes/(3)building-apps/(3)server-functions.mdx index 01a57a08a..af7474ad2 100644 --- a/src/routes/(3)building-apps/(3)server-functions.mdx +++ b/src/routes/(3)building-apps/(3)server-functions.mdx @@ -211,6 +211,8 @@ export const renameCurrentUser = action(async (form: FormData) => { }); ``` +Place the `"use server"` directive inside the callback passed to `query()` or `action()`. + `query()` caches reads by its name and arguments and declares a wrapped server function as an HTTP `GET`. `action()` tracks mutation submissions and applies response metadata to the router's query cache. When the router registers its single-flight integration, an action response can carry refreshed route data with the mutation result. diff --git a/src/routes/(4)routing/(1)solid-router/(1)setup.mdx b/src/routes/(4)routing/(1)solid-router/(1)setup.mdx index 83cbc2c8a..0abc6ddb9 100644 --- a/src/routes/(4)routing/(1)solid-router/(1)setup.mdx +++ b/src/routes/(4)routing/(1)solid-router/(1)setup.mdx @@ -7,7 +7,7 @@ description: "Install Solid Router, create a route tree, and mount the router in Install Solid Router in a Solid 2 application: ```sh -pnpm add @solidjs/router +pnpm add @solidjs/router@next ``` Define the route tree and create the router at module scope: From 79573589592c8f294891caab1e0c135bf73212a6 Mon Sep 17 00:00:00 2001 From: Brenley Dueck Date: Tue, 11 Aug 2026 17:36:19 -0500 Subject: [PATCH 2/2] docs: remove component migration notes --- src/routes/(2)concepts/(2)components-and-jsx.mdx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/routes/(2)concepts/(2)components-and-jsx.mdx b/src/routes/(2)concepts/(2)components-and-jsx.mdx index 75b5b2fc8..76cc795d9 100644 --- a/src/routes/(2)concepts/(2)components-and-jsx.mdx +++ b/src/routes/(2)concepts/(2)components-and-jsx.mdx @@ -96,11 +96,6 @@ function SaveButton(props: { onSave: () => void }) { Use a `ref` directive with `addEventListener` when you need native listener options such as capture or passive handling. -:::note -If you are coming from React, you might be used to using onChange instead of onInput. -In Solid, the event name is the same as the DOM event name. -::: - ## Refs and directives A `ref` callback receives an element after Solid creates it. @@ -152,10 +147,6 @@ function listen( } ``` -:::note -`onSettled` replaces `onMount` from Solid v1. Read the [onSettled](/reference/solid-js/lifecycle-actions/on-settled) reference for more information. -::: - The factory registers setup and cleanup while it has an owner. The returned callback only stores the element for the settled work. @@ -294,9 +285,6 @@ When a context has a default value, `useContext` returns that value outside a ma When it has no default, reading it outside a matching provider throws `ContextNotFoundError`. Providers create a scoped owner, so nested providers can replace a value for their own descendants. -If you are coming from Solid 1, you might be used to a `ThemeContext.Provider` component. -In Solid 2, you can use the `ThemeContext` directly. - ## Rendering lists Use [`For`](/reference/solid-js/components-jsx/for) when rows come from an array.