console.log(el)} />
33 | ```
34 |
35 | Refs can also be used on Components. They still need to be attached on the other side.
36 |
37 | ```tsx
38 | function MyComp(props) {
39 | return
40 | }
41 |
42 | function App() {
43 | let myDiv
44 | onMount(() => console.log(myDiv.clientWidth))
45 | return
46 | }
47 | ```
48 |
--------------------------------------------------------------------------------
/src/styles/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Geist";
3 | src: url("/fonts/Geist-Light.woff2") format("woff2");
4 | font-weight: 400;
5 | font-style: normal;
6 | font-display: swap;
7 | }
8 |
9 | @font-face {
10 | font-family: "Geist";
11 | src: url("/fonts/Geist-SemiBold.woff2") format("woff2");
12 | font-weight: 600;
13 | font-style: normal;
14 | font-display: swap;
15 | }
16 |
17 | @font-face {
18 | font-family: "Geist";
19 | src: url("/fonts/Geist-Bold.woff2") format("woff2");
20 | font-weight: 700;
21 | font-style: normal;
22 | font-display: swap;
23 | }
24 |
25 | @font-face {
26 | font-family: "GeistMono";
27 | src: url("/fonts/GeistMono-Regular.woff2") format("woff2");
28 | font-weight: normal;
29 | font-style: normal;
30 | font-display: swap;
31 | }
32 |
33 | @font-face {
34 | font-family: "GeistMono";
35 | src: url("/fonts/GeistMono-Medium.woff2") format("woff2");
36 | font-weight: 500;
37 | font-style: normal;
38 | font-display: swap;
39 | }
40 |
41 | @font-face {
42 | font-family: "GeistMono";
43 | src: url("/fonts/GeistMono-SemiBold.woff2") format("woff2");
44 | font-weight: 600;
45 | font-style: normal;
46 | font-display: swap;
47 | }
48 |
49 | @font-face {
50 | font-family: "GeistMono";
51 | src: url("/fonts/GeistMono-Bold.woff2") format("woff2");
52 | font-weight: 700;
53 | font-style: normal;
54 | font-display: swap;
55 | }
56 |
57 | :root {
58 | --font-geist: "Geist", sans-serif;
59 | --font-geist-mono: "GeistMono", monospace;
60 | }
61 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/client/mount.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: mount
3 | use_cases: >-
4 | app initialization, entry point setup, bootstrapping, client rendering,
5 | hydration control
6 | tags:
7 | - mount
8 | - hydration
9 | - rendering
10 | - initialization
11 | - entry-client
12 | version: '1.0'
13 | description: >-
14 | Bootstrap your SolidStart application with mount. Automatically handles
15 | hydration for SSR or client-only rendering modes.
16 | ---
17 |
18 | `mount` is a method that calls either [`hydrate`](/reference/rendering/hydrate) (server rendering) or [`render`](/reference/rendering/render) (client rendering) depending on the configuration.
19 | It is used in [`entry-client.tsx`](/solid-start/reference/entrypoints/entry-client) to bootstrap an application.
20 |
21 | ```tsx
22 | import { mount, StartClient } from "@solidjs/start/client";
23 |
24 | mount(() =>
, document.getElementById("app")!);
25 | ```
26 |
27 | If you set `{ ssr: false }` in the [`defineConfig`](/solid-start/reference/config/define-config), effectively deactivating hydration, then `mount` becomes the same as [`render`](/reference/rendering/render).
28 |
29 | ## Parameters
30 |
31 | | Prop | type | description |
32 | | ---- | ----------------- | ------------------------------------------- |
33 | | fn | () => JSX.Element | Function that returns the application code. |
34 | | el | MountableElement | DOM Element to mount the application to |
35 |
--------------------------------------------------------------------------------
/src/routes/reference/rendering/hydration-script.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: hydrationScript
3 | use_cases: >-
4 | ssr hydration, server-side rendering, initial page load optimization,
5 | capturing events before js loads
6 | tags:
7 | - ssr
8 | - hydration
9 | - performance
10 | - events
11 | - bootstrap
12 | version: '1.0'
13 | description: >-
14 | Bootstrap client-side hydration in SSR apps with HydrationScript. Capture and
15 | replay events before JavaScript loads for seamless user experience.
16 | ---
17 |
18 | ```ts
19 | import { generateHydrationScript, HydrationScript } from "solid-js/web"
20 | import type { JSX } from "solid-js"
21 |
22 | function generateHydrationScript(options: {
23 | nonce?: string
24 | eventNames?: string[]
25 | }): string
26 |
27 | function HydrationScript(props: {
28 | nonce?: string
29 | eventNames?: string[]
30 | }): JSX.Element
31 |
32 | ```
33 |
34 | Hydration Script is a special script that should be placed once on the page to bootstrap hydration before Solid's runtime has loaded.
35 | It comes both as a function that can be called and inserted in an HTML string, or as a Component if you are rendering JSX from the `` tag.
36 |
37 | The options are for the **nonce** to be put on the script tag and any event names for that Solid should capture before scripts have loaded and replay during hydration.
38 | These events are limited to those that Solid delegates which include most UI Events that are composed and bubble.
39 | By default it is only click and input events.
40 |
--------------------------------------------------------------------------------
/src/routes/solid-router/reference/primitives/use-navigate.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: useNavigate
3 | use_cases: >-
4 | programmatic navigation, redirects, auth flows, form submissions, history
5 | manipulation
6 | tags:
7 | - navigate
8 | - redirect
9 | - programmatic
10 | - history
11 | - state
12 | version: '1.0'
13 | description: >-
14 | Navigate programmatically with useNavigate - redirect users, handle auth
15 | flows, and control navigation with replace and scroll options.
16 | ---
17 |
18 | Retrieves the method which accepts a path to navigate to and an optional object with the following options:
19 |
20 | - resolve (_boolean_, default `true`): resolve the path against the current route
21 | - replace (_boolean_, default `false`): replace the history entry
22 | - scroll (_boolean_, default `true`): scroll to top after navigation
23 | - state (_any_, default `undefined`): pass custom state to `location.state`
24 |
25 | ```js
26 | const navigate = useNavigate();
27 |
28 | if (unauthorized) {
29 | navigate("/login", { replace: true });
30 | }
31 | ```
32 |
33 | 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).
34 |
35 | :::note
36 | The state is serialized using the [structured clone
37 | algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)
38 | which does not support all object types.
39 | :::
40 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/index-array.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: indexArray
3 | use_cases: >-
4 | rendering lists by index, stable item references, index-based list operations,
5 | optimized list rendering
6 | tags:
7 | - arrays
8 | - lists
9 | - index
10 | - rendering
11 | - optimization
12 | version: '1.0'
13 | description: >-
14 | Map arrays by index in SolidJS where items are signals and indices are
15 | constant. Optimized helper for index-based list rendering patterns.
16 | ---
17 |
18 | ```tsx
19 | import { indexArray } from "solid-js"
20 |
21 | function indexArray
(
22 | list: () => readonly T[],
23 | mapFn: (v: () => T, i: number) => U
24 | ): () => U[]
25 |
26 | ```
27 |
28 | Similar to `mapArray` except it maps by index.
29 | The item is a signal and the index is now the constant.
30 |
31 | Underlying helper for the `` control flow.
32 |
33 | ```tsx
34 | const mapped = indexArray(source, (model) => {
35 | return {
36 | get id() {
37 | return model().id
38 | }
39 | get firstInitial() {
40 | return model().firstName[0];
41 | },
42 | get fullName() {
43 | return `${model().firstName} ${model().lastName}`;
44 | },
45 | }
46 | });
47 | ```
48 |
49 | ## Arguments
50 |
51 | | Name | Type | Description |
52 | | :---- | :----------------------------- | :-------------------- |
53 | | list | `() => readonly T[]` | The list to map. |
54 | | mapFn | `(v: () => T, i: number) => U` | The mapping function. |
55 |
--------------------------------------------------------------------------------
/src/routes/solid-router/advanced-concepts/lazy-loading.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Lazy loading
3 | use_cases: >-
4 | optimizing bundle size, code splitting, reducing initial load, large apps,
5 | performance optimization
6 | tags:
7 | - lazy
8 | - performance
9 | - routing
10 | - optimization
11 | - splitting
12 | - loading
13 | version: '1.0'
14 | description: >-
15 | Implement lazy loading in Solid Router to reduce initial bundle size. Load
16 | components on-demand for better performance in large applications.
17 | ---
18 |
19 | Lazy loading allows you to load only the necessary resources when they are needed.
20 | This can be useful when you have a large application with a lot of routes and components, and you want to reduce the initial load time.
21 |
22 | In Solid Router, you can lazy load components using the `lazy` function from Solid:
23 |
24 | ```jsx
25 | import { lazy } from "solid-js";
26 | import { Router, Route } from "@solidjs/router";
27 |
28 | const Home = lazy(() => import("./Home"));
29 |
30 | const Users = lazy(() => import("./Users"));
31 |
32 | const App = () => (
33 |
34 |
37 | );
38 | ```
39 |
40 | In the example above, the `Users` component is lazy loaded using the `lazy` function.
41 | The `lazy` function takes a function that returns a promise, which resolves to the component you want to load.
42 | When the route is matched, the component will be loaded and rendered.
43 |
--------------------------------------------------------------------------------
/src/routes/guides/deployment-options/aws-via-sst.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: AWS via SST
3 | order: 1
4 | mainNavExclude: true
5 | use_cases: >-
6 | serverless deployment, aws lambda, container deployment, cloud infrastructure,
7 | production deployment
8 | tags:
9 | - aws
10 | - sst
11 | - serverless
12 | - lambda
13 | - deployment
14 | - containers
15 | version: '1.0'
16 | description: >-
17 | Deploy SolidStart apps to AWS Lambda or containers using SST framework with
18 | streamlined configuration and deployment.
19 | ---
20 |
21 | [SST](https://sst.dev/) is a framework for deploying applications to any cloud provider. It has a built-in way to deploy SolidStart apps to AWS Lambda. For additional details, you can [visit their docs](https://sst.dev/docs/).
22 |
23 | ## Quick start
24 |
25 | 1. [Create a SolidStart app](/solid-start/getting-started).
26 |
27 | 2. In your project, init SST.
28 |
29 | ```package-exec
30 | sst@latest init
31 | ```
32 |
33 | 3. This will detect your SolidStart app and ask you to update your `app.config.ts`.
34 |
35 | ```ts title="app.config.ts"
36 | server: {
37 | preset: "aws-lambda-streaming"
38 | }
39 | ```
40 |
41 | 4. When you are ready, you can deploy your app using:
42 |
43 | ```package-exec
44 | sst@latest deploy --stage production
45 | ```
46 |
47 | You can [read the full tutorial on the SST docs](https://sst.dev/docs/start/aws/solid).
48 |
49 | ## Deploy to a Container
50 |
51 | You can also deploy your SolidStart app to a [container](https://sst.dev/docs/start/aws/solid#containers) using SST.
52 |
--------------------------------------------------------------------------------
/src/routes/solid-router/reference/primitives/use-location.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: useLocation
3 | use_cases: >-
4 | current url tracking, query parameters, pathname parsing, hash navigation,
5 | location state access
6 | tags:
7 | - location
8 | - url
9 | - pathname
10 | - query
11 | - hash
12 | - state
13 | version: '1.0'
14 | description: >-
15 | Access reactive URL information with useLocation - track pathname, query
16 | strings, hash, and navigation state in your SolidJS app.
17 | ---
18 |
19 | Retrieves reactive `location` object useful for getting things like `pathname`
20 |
21 | ```js
22 | const location = useLocation();
23 |
24 | const pathname = createMemo(() => parsePath(location.pathname));
25 | ```
26 |
27 | | attribute | type | description |
28 | | ---------- | ------ | ----------------------------------------------------------------------------------------- |
29 | | `pathname` | string | The pathname part of the URL, without the query string. |
30 | | `search` | string | The query string part of the URL. |
31 | | `hash` | string | The hash part of the URL, including the `#`. |
32 | | `state` | any | Custom state passed from [`useNavigate`](/solid-router/reference/primitives/use-navigate) |
33 | | `query` | object | Returns a store-like object containing all the query parameters of the URL. |
34 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/REQUEST.yml:
--------------------------------------------------------------------------------
1 | name: "Request 💡"
2 | title: "[Request]:"
3 | description: Share an idea.
4 | labels: [
5 | "request", "pending review"
6 | ]
7 | assignees:
8 | - ladybluenotes
9 | body:
10 | - type: markdown
11 | attributes:
12 | value: "## Reminder: If reporting a minor correction (e.g. typo), feel free to submit a PR directly!"
13 | - type: dropdown
14 | id: request-topic
15 | attributes:
16 | label: "What is this request related to?"
17 | options:
18 | - Request
19 | - Styling
20 | - Feature
21 | validations:
22 | required: true
23 | - type: textarea
24 | id: page
25 | attributes:
26 | label: "📋 Suggested"
27 | description: Please provide the URL of the page(s) or section this idea is related to.
28 | placeholder: https://docs.solidjs.com/concepts/intro-to-reactivity
29 | validations:
30 | required: false
31 | - type: textarea
32 | id: generalDesc
33 | attributes:
34 | label: "📋 General description or bullet points"
35 | description: Please provide a general description or bullet points about what you would like to see added.
36 | placeholder: "..."
37 | validations:
38 | required: true
39 | - type: textarea
40 | id: example
41 | attributes:
42 | label: "🖥️ Reproduction of code samples in StackBlitz"
43 | description: If you would like to suggest code samples please attach a working reproduction.
44 | placeholder: "..."
45 | validations:
46 | required: false
47 |
--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 | (
22 | source: () => T,
23 | options?: {
24 | timeoutMs?: number
25 | equals?: false | ((prev: T, next: T) => boolean)
26 | name?: string
27 | }
28 | ): () => T
29 |
30 | ```
31 |
32 | Creates a readonly that only notifies downstream changes when the browser is idle.
33 | `timeoutMs` is the maximum time to wait before forcing the update.
34 |
35 | ## Options
36 |
37 | | Name | Type | Description |
38 | | --------- | ------------------------------------------ | ------------------------------------------------------ |
39 | | timeoutMs | `number` | The maximum time to wait before forcing the update. |
40 | | equals | `false or ((prev: T, next: T) => boolean)` | A function that returns true if the value has changed. |
41 | | name | `string` | The name of the readonly. |
42 |
43 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/CONTENT.yml:
--------------------------------------------------------------------------------
1 | name: "Content Report 📄"
2 | title: "[Content]:"
3 | description: Report an issue with existing content.
4 | labels: [
5 | "improve documentation", "pending review"
6 | ]
7 | assignees:
8 | - ladybluenotes
9 | body:
10 | - type: markdown
11 | attributes:
12 | value: "# Reminder: If reporting a minor correction (e.g. typo), feel free to submit a PR directly!"
13 | - type: input
14 | id: subject
15 | attributes:
16 | label: 📚 Subject area/topic
17 | description: Documentation area/topic (e.g. Components, Signals, Reference)
18 | placeholder: "..."
19 | validations:
20 | required: true
21 | - type: textarea
22 | id: page
23 | attributes:
24 | label: "📋 Page(s) affected (or suggested, for new content)"
25 | description: Please provide the URL of the page(s) affected.
26 | placeholder: https://docs.solidjs.com/concepts/intro-to-reactivity
27 | validations:
28 | required: true
29 | - type: textarea
30 | id: generalDesc
31 | attributes:
32 | label: "📋 Description of content that is out-of-date or incorrect"
33 | description: Let us know what's wrong!
34 | placeholder: "..."
35 | validations:
36 | required: true
37 | - type: textarea
38 | id: incorrectContent
39 | attributes:
40 | label: "🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)"
41 | description: If you are reporting incorrect content or code samples, you can also attach a reproduction in stackblitz.
42 | validations:
43 | required: false
44 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/entrypoints/entry-server.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: entry-server.tsx
3 | use_cases: >-
4 | server initialization, ssr setup, html document structure, meta tags, server
5 | bootstrap
6 | tags:
7 | - entry
8 | - server
9 | - ssr
10 | - initialization
11 | - document
12 | - html
13 | version: '1.0'
14 | description: >-
15 | Define server entry point and HTML document structure for SolidStart.
16 | Configure SSR modes and set up server-side rendering bootstrap.
17 | ---
18 |
19 | `entry-server.tsx` is where an application starts on the server.
20 | This happens by `entry-server.tsx` providing a document component to [``](/solid-start/reference/server/start-server) and passing it into [`createHandler`](/solid-start/reference/server/create-handler) for server side rendering.
21 | A typical `entry-server.tsx` for a new project looks like this:
22 |
23 | ```tsx
24 | import { createHandler, StartServer } from "@solidjs/start/server";
25 |
26 | export default createHandler(() => (
27 | (
29 |
30 |
31 | {children}
38 | {scripts}
39 |
40 |
41 | )}
42 | />
43 | ));
44 | ```
45 |
46 | For setting different SSR modes (sync | async | stream), see [`createHandler`](/solid-start/reference/server/create-handler).
47 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/routing/file-routes.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: FileRoutes
3 | use_cases: >-
4 | file-based routing, automatic route generation, spa routing, route
5 | configuration
6 | tags:
7 | - routing
8 | - files
9 | - routes
10 | - navigation
11 | - filesystem
12 | - spa
13 | version: '1.0'
14 | description: >-
15 | Automatically generate routes from file structure in SolidStart. Create route
16 | configurations from files in the /src/routes directory.
17 | ---
18 |
19 | `FileRoutes` is a component that creates a [`Route`](/solid-router/reference/components/route) for each file in the `/src/routes` directory.
20 | This creates a `route` export to define the route configuration for the router of your choice.
21 |
22 | For example, using [`solid-router`](/solid-router) would look like the following:
23 |
24 | ```tsx {7-9} title="app.tsx"
25 | import { Suspense } from "solid-js";
26 | import { Router } from "@solidjs/router";
27 | import { FileRoutes } from "@solidjs/start/router";
28 |
29 | export default function App() {
30 | return (
31 | {props.children} }>
32 |
34 | );
35 | }
36 | ```
37 |
38 | See the [SolidStart routing guide](/solid-start/building-your-application/routing) for more details.
39 |
40 | :::caution
41 | If removing the `FileRoutes` component from your `app.tsx` file, you will need to manually add all of your routes.
42 |
43 | While this is possible it does come with tradeoffs.
44 | For example, optimizations such as preloaded script tags will no longer be available.
45 |
46 | :::
47 |
--------------------------------------------------------------------------------
/src/routes/reference/components/no-hydration.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | use_cases: >-
4 | static content, ssr optimization, performance, reducing bundle size,
5 | server-only rendering
6 | tags:
7 | - ssr
8 | - hydration
9 | - optimization
10 | - performance
11 | - static
12 | - server-rendering
13 | version: '1.0'
14 | description: >-
15 | Prevent client-side hydration for static content in SolidJS. Optimize
16 | performance by skipping hydration for server-rendered static elements.
17 | ---
18 |
19 | The `` component prevents the client-side hydration process from being applied to its children.
20 | During server-side rendering, components and elements wrapped within `` will render normally on the server, contributing to the initial HTML output.
21 | However, during client-side hydration, Solid bypasses the hydration process for the content within ``.
22 | This means that elements within `` will not have event listeners attached by Solid, and their state will not be managed reactively on the client-side after the initial render.
23 |
24 | :::note
25 | Placing a `` component inside `` has no effect and will not override the `` behavior.
26 | :::
27 |
28 | ## Example
29 |
30 | ```tsx
31 | import { NoHydration } from "solid-js/web";
32 | import { InteractiveComponent, StaticContent } from "./components";
33 |
34 | function Example() {
35 | return (
36 |
37 |
39 |
41 |
42 | );
43 | }
44 | ```
45 |
--------------------------------------------------------------------------------
/src/routes/solid-meta/reference/meta/meta.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Meta
3 | order: 3
4 | use_cases: >-
5 | seo optimization, social media tags, viewport settings, charset configuration,
6 | open graph
7 | tags:
8 | - meta
9 | - seo
10 | - viewport
11 | - metadata
12 | - head
13 | - tags
14 | version: '1.0'
15 | description: >-
16 | Add SEO and viewport metadata to your Solid app with the Meta component.
17 | Configure description, keywords, and social media tags for better reach.
18 | ---
19 |
20 | The `
42 |
46 | );
47 | }
48 | ```
49 |
--------------------------------------------------------------------------------
/src/routes/solid-start/advanced/request-events.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Request events
3 | use_cases: >-
4 | server context access, local data storage, request handling, server functions,
5 | event access
6 | tags:
7 | - events
8 | - server
9 | - context
10 | - locals
11 | - requests
12 | - functions
13 | version: '1.0'
14 | description: >-
15 | Access request events and local context in SolidStart server functions.
16 | Type-safe locals and native event handling for server code.
17 | ---
18 |
19 | Request events in SolidStart are retrieved using the [`getRequestEvent`](/reference/server-utilities/get-request-event) from `@solidjs/web`.
20 | These requests happen anywhere on the server.
21 |
22 | ## Locals
23 |
24 | SolidStart uses `event.locals` to pass around a local context where needed.
25 |
26 | When adding fields to `event.locals`, the fields can be typed:
27 |
28 | ```tsx title="global.d.ts"
29 | ///
13 | >;
14 |
15 | export function Tabs(props: TabsProps) {
16 | return
22 | >;
23 |
24 | export function TabList(props: TabListProps) {
25 | return (
26 |
27 |
29 | );
30 | }
31 |
32 | export type TabProps = PolymorphicProps<
33 | "button",
34 | Omit
35 | >;
36 |
37 | export function Tab(props: TabProps) {
38 | return (
39 |
49 | >;
50 |
51 | export function TabPanel(props: TabPanelProps) {
52 | return (
53 |
25 |
26 | // object
27 |
31 | ```
32 |
33 | Unlike [React's style attribute](https://reactjs.org/docs/dom-elements.html#style), Solid uses **element.style.setProperty** under the hood. This means you need to use the lower-case, dash-separated version of property names instead of the JavaScript camel-cased version, such as `background-color` rather than `backgroundColor`. This actually leads to better performance and consistency with SSR output.
34 |
35 | ```tsx
36 | // string
37 |
38 |
39 | // object
40 |
45 | ```
46 |
47 | This also means you can set CSS variables! For example:
48 |
49 | ```tsx
50 | // set css variable
51 |
52 | ```
53 |
--------------------------------------------------------------------------------
/src/routes/reference/rendering/hydrate.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: hydrate
3 | use_cases: >-
4 | ssr hydration, client initialization, server-rendered apps, spa startup, dom
5 | rehydration
6 | tags:
7 | - hydration
8 | - ssr
9 | - rendering
10 | - initialization
11 | - dom
12 | version: '1.0'
13 | description: >-
14 | Hydrate server-rendered HTML with SolidJS client-side code. Essential for
15 | initializing SSR applications and attaching interactivity to static HTML.
16 | ---
17 |
18 | ```ts
19 | import { hydrate } from "solid-js/web"
20 | import type { JSX } from "solid-js"
21 | import type { MountableElement } from "solid-js/web"
22 |
23 | function hydrate(
24 | fn: () => JSX.Element,
25 | node: MountableElement,
26 | options?: { renderId?: string; owner?: unknown }
27 | ): () => void
28 |
29 | ```
30 |
31 | This method is similar to `render` except that it attempts to rehydrate what is already rendered to the DOM.
32 | When initializing in the browser a page has already been server rendered.
33 |
34 | ```ts
35 | const dispose = hydrate(App, document.getElementById("app"))
36 | ```
37 |
38 | ## Parameters
39 |
40 | | Prop | type | description |
41 | | -------------------- | ------------------ | ----------------------------------------------- |
42 | | fn | `() => JSX.Element`| Function that returns the application code. |
43 | | node | MountableElement | DOM Element to mount the application to |
44 | | options.renderId | string | |
45 | | options.owner | unknown | |
46 |
--------------------------------------------------------------------------------
/public/assets/firebase.svg:
--------------------------------------------------------------------------------
1 |
27 |
28 |
30 |
31 |
32 |
34 |
35 |
37 |
38 |
40 |
41 |
42 |
43 |
44 | );
45 | };
46 |
--------------------------------------------------------------------------------
/src/routes/reference/components/dynamic.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | order: 5
4 | use_cases: >-
5 | dynamic components, conditional rendering, polymorphic components, runtime
6 | component selection, flexible ui, component switching
7 | tags:
8 | - dynamic
9 | - components
10 | - jsx
11 | - polymorphic
12 | - rendering
13 | - conditional
14 | version: '1.0'
15 | description: >-
16 | Render components dynamically at runtime with the Dynamic component. Perfect
17 | for polymorphic components and conditional component rendering.
18 | ---
19 |
20 | This component lets you insert an arbitrary Component or tag and passes the props through to it.
21 |
22 | ```tsx
23 | import { Dynamic } from "solid-js/web"
24 | import type { JSX } from "solid-js"
25 |
26 | function Dynamic(
27 | props: T & {
28 | children?: any
29 | component?: Component | string | keyof JSX.IntrinsicElements
30 | }
31 | ): () => JSX.Element
32 | ```
33 |
34 | Here's an example of how you can use it:
35 |
36 | ```tsx
37 | ` \| `string` \| `keyof JSX.IntrinsicElements` | The component to render. |
45 | | `children` | `any` | The children to pass to the component. |
46 | | `...` | `T` | Any other props to pass to the component. |
47 |
--------------------------------------------------------------------------------
/src/routes/solid-start/building-your-application/route-prerendering.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Route Pre-rendering
3 | use_cases: >-
4 | static site generation, ssg, blog sites, documentation, marketing pages,
5 | performance optimization, seo improvement
6 | tags:
7 | - prerender
8 | - ssg
9 | - static
10 | - performance
11 | - build
12 | - seo
13 | version: '1.0'
14 | description: >-
15 | Pre-render SolidStart routes to static HTML for faster loads and better SEO.
16 | Perfect for blogs, docs, and marketing sites.
17 | ---
18 |
19 | Route pre-rendering powers Static Site Generation (SSG) by producing static HTML pages during the build process.
20 | This results in faster load times and better SEO, making it especially useful for content-rich sites such as documentation, blogs, and marketing pages.
21 | Static files are served without server-side processing at runtime.
22 |
23 | Configure prerendering for specific routes using the `routes` option
24 |
25 | ```js { 6 }
26 | import { defineConfig } from "@solidjs/start/config";
27 |
28 | export default defineConfig({
29 | server: {
30 | prerender: {
31 | routes: ["/", "/about"]
32 | }
33 | }
34 | });
35 | ```
36 |
37 | Or to pre-render all routes, you can pass `true` to the `crawlLinks` option
38 |
39 | ```js { 6 }
40 | import { defineConfig } from "@solidjs/start/config";
41 |
42 | export default defineConfig({
43 | server: {
44 | prerender: {
45 | crawlLinks: true
46 | }
47 | }
48 | });
49 | ```
50 |
51 | For advanced pre-rendering options, refer to [Nitro's documentation](https://nitro.build/config#prerender).
52 |
53 | [SolidBase](https://solidbase.dev) simplifies SSG development with built-in support for fast, pre-rendered Markdown and MDX pages.
54 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/map-array.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: mapArray
3 | use_cases: >-
4 | efficient list rendering, dynamic arrays, cached list transformations,
5 | optimized updates, for loop alternatives
6 | tags:
7 | - arrays
8 | - lists
9 | - rendering
10 | - caching
11 | - optimization
12 | version: '1.0'
13 | description: >-
14 | Efficiently map reactive arrays in SolidJS with cached transformations.
15 | Reduces unnecessary re-renders by tracking items by reference.
16 | ---
17 |
18 | ```ts
19 | import { mapArray } from "solid-js"
20 |
21 | function mapArray(
22 | list: () => readonly T[],
23 | mapFn: (v: T, i: () => number) => U
24 | ): () => U[]
25 |
26 | ```
27 |
28 | Reactive map helper that caches each item by reference to reduce unnecessary mapping on updates.
29 | It only runs the mapping function once per value and then moves or removes it as needed.
30 | The index argument is a signal. The map function itself is not tracking.
31 |
32 | Underlying helper for the `` control flow.
33 |
34 | ```ts
35 | const mapped = mapArray(source, (model) => {
36 | const [name, setName] = createSignal(model.name)
37 | const [description, setDescription] = createSignal(model.description)
38 |
39 | return {
40 | id: model.id,
41 | get name() {
42 | return name()
43 | },
44 | get description() {
45 | return description()
46 | },
47 | setName,
48 | setDescription,
49 | }
50 | })
51 | ```
52 |
53 | ## Arguments
54 |
55 | | Name | Type | Description |
56 | | :---- | :----------------------------- | :----------------------- |
57 | | list | `() => readonly T[]` | The source array to map. |
58 | | mapFn | `(v: T, i: () => number) => U` | The mapping function. |
59 |
--------------------------------------------------------------------------------
/src/routes/solid-router/reference/primitives/use-params.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: useParams
3 | use_cases: "dynamic routes, user profiles, product pages, id-based content, url parameters"
4 | tags:
5 | - params
6 | - dynamic
7 | - routes
8 | - parameters
9 | - reactive
10 | version: "1.0"
11 | description: >-
12 | Access route parameters reactively with useParams - extract dynamic segments
13 | from URLs for user profiles, products, and ID-based pages.
14 | ---
15 |
16 | The `useParams` function reads the path parameters of the current route.
17 |
18 | ## Import
19 |
20 | ```ts
21 | import { useParams } from "@solidjs/router";
22 | ```
23 |
24 | ## Type
25 |
26 | ```ts
27 | function useParams>(): T;
28 | ```
29 |
30 | ## Parameters
31 |
32 | `useParams` takes no arguments.
33 |
34 | ## Return value
35 |
36 | - **Type**: `T`
37 |
38 | `useParams` returns a reactive object where keys match the dynamic segments defined in the route path.
39 | Accessing a property within a tracking scope registers a dependency, causing the computation to re-run when the parameter changes.
40 |
41 | ## Examples
42 |
43 | ### Basic usage
44 |
45 | ```ts
46 | import { createMemo } from "solid-js";
47 | import { useParams } from "@solidjs/router";
48 |
49 | // Rendered via {title()} ;
57 | }
58 | ```
59 |
60 | ## Related
61 |
62 | - [useLocation](/solid-router/reference/primitives/use-location)
63 | - [useSearchParams](/solid-router/reference/primitives/use-search-params)
64 |
--------------------------------------------------------------------------------
/src/routes/guides/deploying-your-app.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Deploy your app
3 | order: 9
4 | use_cases: 'production deployment, hosting, going live, app publishing, cloud deployment'
5 | tags:
6 | - deployment
7 | - hosting
8 | - production
9 | - cloud
10 | - publishing
11 | version: '1.0'
12 | description: >-
13 | Deploy your Solid application to popular hosting platforms including
14 | Cloudflare, Vercel, Netlify, AWS, and more with guides.
15 | ---
16 |
17 | Are you ready to deploy your Solid application? Follow our guides for different deployment services.
18 |
19 |
20 |
21 |
74 |
--------------------------------------------------------------------------------
/src/routes/reference/component-apis/use-context.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: useContext
3 | use_cases: >-
4 | consuming context, accessing global state, avoiding prop drilling, theme
5 | access, auth state, shared data
6 | tags:
7 | - context
8 | - providers
9 | - global-state
10 | - hooks
11 | - consumption
12 | version: '1.0'
13 | description: >-
14 | Access context values with useContext to consume data from parent providers.
15 | Avoid prop drilling and access shared state throughout your component tree.
16 | ---
17 |
18 | Used to grab context within a context provider scope to allow for deep passing of props without having to pass them through each Component function.
19 | It's therefore used in conjunction with [`createContext`](/reference/component-apis/create-context) to consume the data from a Provider scope and thus avoid passing data through intermediate components (prop drilling).
20 |
21 | ```ts
22 | const [state, { increment, decrement }] = useContext(CounterContext)
23 | ```
24 |
25 | ## Recommended usage
26 |
27 | It is often a good idea to wrap `useContext` in a function like so:
28 |
29 | ```ts title="/context/counter-component.tsx"
30 | function useCounterContext() {
31 | const context = useContext(CounterContext)
32 |
33 | if (!context) {
34 | throw new Error("useCounterContext: cannot find a CounterContext")
35 | }
36 |
37 | return context
38 | }
39 | ```
40 |
41 | See the API reference of [createContext](/reference/component-apis/create-context) the API on how to generate a Provider scope.
42 | And check the [Context concepts](/concepts/context) for more information on how to architecture your contexts.
43 |
44 | ## Type signature
45 |
46 | ```ts
47 | import { type Context } from "solid-js"
48 |
49 | function useContext(context: Context): T
50 |
51 | ```
52 |
--------------------------------------------------------------------------------
/src/routes/reference/rendering/render-to-string-async.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: renderToStringAsync
3 | use_cases: >-
4 | ssr with async data, suspense resolution, complete page rendering, data
5 | serialization, seo optimization
6 | tags:
7 | - ssr
8 | - async
9 | - suspense
10 | - serialization
11 | - rendering
12 | version: '1.0'
13 | description: >-
14 | Render complete HTML with async data using renderToStringAsync. Waits for all
15 | Suspense boundaries before returning serialized results.
16 | ---
17 |
18 | ```ts
19 | import { renderToStringAsync } from "solid-js/web"
20 |
21 | function renderToStringAsync(
22 | fn: () => T,
23 | options?: {
24 | timeoutMs?: number
25 | renderId?: string
26 | nonce?: string
27 | }
28 | ): Promise
29 |
30 | ```
31 |
32 | Same as `renderToString` except that it will wait for all `` boundaries to resolve before returning the results.
33 | Resource data is automatically serialized into the script tag and will be hydrated on client load.
34 |
35 | `renderId` is used to namespace renders when having multiple top level roots.
36 |
37 | ```ts
38 | const html = await renderToStringAsync(App)
39 | ```
40 |
41 | ## Options
42 |
43 | | Name | Type | Description |
44 | | ----------- | -------- | -------------------------------------------------------------------------------------------- |
45 | | `timeoutMs` | `number` | The number of milliseconds to wait for a `` boundary to resolve before timing out. |
46 | | `renderId` | `string` | The id to use for the render. |
47 | | `nonce` | `string` | The nonce to use for the script tag. |
48 |
--------------------------------------------------------------------------------
/src/utils/route-metadata-helper.ts:
--------------------------------------------------------------------------------
1 | import { useLocation } from "@solidjs/router";
2 | import { SUPPORTED_LOCALES } from "~/i18n/config";
3 |
4 | export enum Project {
5 | Core = "",
6 | Router = "/solid-router",
7 | Start = "/solid-start",
8 | Meta = "/solid-meta",
9 | }
10 |
11 | interface CurrentRouteMetaData {
12 | project: Project | null;
13 | locale: string;
14 | isProjectRoot: boolean;
15 | }
16 |
17 | export const useCurrentRouteMetaData = (): CurrentRouteMetaData => {
18 | let currentPath = useLocation().pathname;
19 |
20 | // Trim trailing slash
21 | currentPath = currentPath.endsWith("/")
22 | ? currentPath.slice(0, -1)
23 | : currentPath;
24 |
25 | const pathParts = currentPath.split("/").filter(Boolean);
26 | const projectOrLocale: string = pathParts[0];
27 |
28 | const returnObject: CurrentRouteMetaData = {
29 | isProjectRoot: true,
30 | locale: "",
31 | project: null,
32 | };
33 |
34 | if (SUPPORTED_LOCALES.includes(projectOrLocale)) {
35 | if (pathParts.length > 2) {
36 | returnObject.isProjectRoot = false;
37 | }
38 |
39 | returnObject.locale = projectOrLocale;
40 | checkPathBeyondLocale(pathParts[1] ?? "");
41 | } else {
42 | if (pathParts.length > 1) {
43 | returnObject.isProjectRoot = false;
44 | }
45 |
46 | checkPathBeyondLocale(pathParts[0] ?? "");
47 | }
48 |
49 | function isInProjectEnum(projectPath: string): boolean {
50 | return Object.values(Project).includes(projectPath as Project);
51 | }
52 |
53 | function checkPathBeyondLocale(path: string) {
54 | if (path.length > 0) {
55 | path = "/" + path;
56 | }
57 |
58 | if (isInProjectEnum(path)) {
59 | returnObject.project = path as Project;
60 | } else {
61 | returnObject.isProjectRoot = false;
62 | returnObject.project = "" as Project;
63 | }
64 | }
65 |
66 | return returnObject;
67 | };
68 |
--------------------------------------------------------------------------------
/src/routes/reference/rendering/render.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: render
3 | use_cases: >-
4 | app initialization, mounting components, spa entry point, client-side
5 | rendering, dom manipulation
6 | tags:
7 | - mounting
8 | - initialization
9 | - spa
10 | - dom
11 | - client
12 | - entry
13 | version: '1.0'
14 | description: >-
15 | Mount your Solid app to the DOM with render. The essential browser entry point
16 | for initializing and disposing client-side applications.
17 | ---
18 |
19 | ```ts
20 | import { render } from "solid-js/web"
21 | import type { JSX } from "solid-js"
22 | import type { MountableElement } from "solid-js/web"
23 |
24 | function render(
25 | code: () => JSX.Element,
26 | element: MountableElement
27 | ): () => void
28 |
29 | ```
30 |
31 | This is the browser app entry point.
32 | Provide a top-level component function and an element to mount to.
33 | It is recommended this element be empty: while `render` will just append children, the returned dispose function will remove all children.
34 |
35 | ```ts
36 | const dispose = render(App, document.getElementById("app"))
37 | // or
38 | const dispose = render(() => , U, V>(
32 | action: Action
33 | ): (...args: Parameters>) => Promise>;
34 | ```
35 |
36 | ## Parameters
37 |
38 | ### `action`
39 |
40 | - **Type:** `Action`
41 | - **Required:** Yes
42 |
43 | The action to be triggered.
44 |
45 | ## Return value
46 |
47 | `useAction` returns a function that triggers the action.
48 | It takes the same parameters as the action handler and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that resolves with the action's result.
49 |
50 | ## Example
51 |
52 | ```tsx
53 | import { action, useAction } from "@solidjs/router";
54 |
55 | const likePostAction = action(async (id: string) => {
56 | // ... Likes a post on the server.
57 | });
58 |
59 | function LikeButton(props: { postId: string }) {
60 | const likePost = useAction(likePostAction);
61 |
62 | return likePost(props.postId)}>Like ;
63 | }
64 | ```
65 |
--------------------------------------------------------------------------------
/src/routes/guides/styling-components/less.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: LESS
3 | order: 2
4 | mainNavExclude: true
5 | use_cases: >-
6 | css preprocessing, style variables, mixins, nested styles, programmatic
7 | styling
8 | tags:
9 | - styling
10 | - less
11 | - preprocessor
12 | - variables
13 | - mixins
14 | - css
15 | version: '1.0'
16 | description: >-
17 | Integrate LESS preprocessor in Solid apps for variables, mixins, and
18 | programmatic CSS features to write cleaner stylesheets.
19 | ---
20 |
21 | [LESS](https://lesscss.org/) is a preprocessor based on JavaScript.
22 | It provides the ability to use mixins, variables, and other programmatic tools, making styling code cleaner and less redundant.
23 |
24 | ## Installation
25 |
26 | To utilize LESS in a Solid app, it will need to be installed as a development dependency:
27 |
28 | ```package-install-dev
29 | less
30 | ```
31 |
32 | ## Using LESS in your app
33 |
34 | Start by creating a `.less` file in the `src` directory:
35 |
36 | ```less
37 | //styles.less
38 | .foo {
39 | color: red;
40 | }
41 | .bar {
42 | background-color: blue;
43 | }
44 | ```
45 |
46 | The basic syntax of LESS is very similar to CSS.
47 | However, LESS allows the declaration and usage of variables:
48 |
49 | ```less
50 | //styles.less
51 | @plainred: red;
52 | @plainblue: blue;
53 | .foo {
54 | color: @plainred;
55 | }
56 | .bar {
57 | background-color: @plainblue;
58 | }
59 | ```
60 |
61 | To use these styles in a Solid component, import the `.less` file:
62 |
63 | ```jsx
64 | //component.jsx
65 | import "./styles.less";
66 |
67 | function Component() {
68 | return (
69 | <>
70 | Hello, world!
71 |
72 | );
73 | }
74 | ```
75 |
76 | By changing the file extension of the imported styles to `.less`, Vite will recognize it as a LESS file and compile it to CSS on demand.
77 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/server/http-header.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: HttpHeader
3 | use_cases: >-
4 | security headers, cors configuration, cache control, seo headers, custom
5 | headers, api responses
6 | tags:
7 | - headers
8 | - http
9 | - response
10 | - security
11 | - cors
12 | - meta
13 | version: '1.0'
14 | description: >-
15 | Set custom HTTP headers in SolidStart responses. Configure security, caching,
16 | CORS, and SEO headers for server-rendered pages.
17 | ---
18 |
19 | `HttpHeader` provides a way to set headers on HTTPs response sent by the server.
20 |
21 | ```tsx
22 | import { HttpHeader } from "@solidjs/start";
23 |
24 |
35 |
38 | );
39 | }
40 | ```
41 |
42 | As a page is rendered, you may want to add additional HTTP headers to the response and the `HttpHeader` component will do that for you.
43 | By passing it a `name` and `value`, they will get added to the `Response` headers sent back to the browser.
44 |
45 | When streaming responses with [`renderToStream`](/reference/rendering/render-to-stream), HTTP headers can only be added before the stream is first flushed.
46 | This requires adding `deferStream` to any resources that need to be loaded before responding.
47 |
48 | ## Parameters
49 |
50 | | Property | Type | Description |
51 | | -------- | ------ | ------------------------------ |
52 | | name | string | The name of the header to set |
53 | | value | string | The value of the header to set |
54 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/untrack.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: untrack
3 | use_cases: >-
4 | static values, initial values, default props, performance optimization,
5 | non-reactive access
6 | tags:
7 | - tracking
8 | - performance
9 | - props
10 | - reactivity
11 | - optimization
12 | - defaults
13 | version: '1.0'
14 | description: >-
15 | Prevent dependency tracking for static values in SolidJS. Optimize performance
16 | by excluding non-updating props from reactive tracking scope.
17 | ---
18 |
19 | Ignores tracking any of the dependencies in the executing code block and returns the value. This helper is useful when a certain `prop` will never update and thus it is ok to use it outside of the tracking scope.
20 |
21 | ```tsx title="component.tsx"
22 | import { untrack } from "solid-js"
23 |
24 | export function Component(props) {
25 | const value = untrack(() => props.value)
26 |
27 | return {value}
28 | }
29 | }
30 | ```
31 |
32 | ## Initial and Default Values
33 |
34 | 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.
35 |
36 |
37 | ```tsx tab title="initialValue" {5}
38 | // component.tsx
39 | import { createSignal } from "solid-js"
40 |
41 | export function Component(props) {
42 | const [name, setName] = createSignal(props.initialName)
43 |
44 | return {name()}
45 | }
46 | }
47 | ```
48 |
49 | ```tsx tab title="defaultValue" {5}
50 | // component.tsx
51 | import { createSignal } from "solid-js"
52 |
53 | export function Component(props) {
54 | const [name, setName] = createSignal(props.defaultName)
55 |
56 | return {name()}
57 | }
58 | }
59 | ```
60 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/server/create-handler.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: createHandler
3 | use_cases: >-
4 | ssr mode configuration, server startup, streaming setup, async rendering,
5 | performance tuning
6 | tags:
7 | - handler
8 | - ssr
9 | - server
10 | - streaming
11 | - async
12 | - rendering
13 | version: '1.0'
14 | description: >-
15 | Configure server-side rendering modes in SolidStart. Choose between sync,
16 | async, or streaming SSR for optimal performance and UX.
17 | ---
18 |
19 | The `createHandler` is used to start the server in [`entry-server.tsx`](/solid-start/reference/entrypoints/entry-server).
20 | It takes a function that returns a static document (often created with [``](/solid-start/reference/server/start-server)), and serves it using one of the three function for server side rendering (SSR):
21 |
22 | - [`renderToString`](/reference/rendering/render-to-string) - "sync"
23 | - [`renderToStringAsync`](/reference/rendering/render-to-string-async) - "async"
24 | - [`renderToStream`](/reference/rendering/render-to-stream) - "stream"
25 |
26 | The SSR mode can be configured through the `mode` property on the options object:
27 |
28 | ```tsx
29 | import { createHandler, StartServer } from "@solidjs/start/server";
30 |
31 | export default createHandler(() => (
32 | ` definitions |
40 | | preload | `RoutePreloadFunc` | Function called during preload or when the route is navigated to. |
41 |
--------------------------------------------------------------------------------
/src/routes/solid-start/advanced/websocket.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: WebSocket endpoint
3 | use_cases: >-
4 | real-time updates, chat applications, live notifications, multiplayer games,
5 | collaborative editing, streaming data
6 | tags:
7 | - websocket
8 | - real-time
9 | - streaming
10 | - experimental
11 | - server
12 | - events
13 | version: '1.0'
14 | description: >-
15 | Set up WebSocket endpoints in SolidStart for real-time bidirectional
16 | communication. Handle connections, messages, and events.
17 | ---
18 |
19 | WebSocket endpoint may be included by passing the ws handler file you specify in your start config.
20 | Note that this feature is [experimental on the Nitro server](https://nitro.build/guide/websocket#opt-in-to-the-experimental-feature) and its config may change in future releases of SolidStart. Use it with caution.
21 |
22 | ```ts title="./app.config.ts"
23 | import { defineConfig } from "@solidjs/start/config";
24 |
25 | export default defineConfig({
26 | server: {
27 | experimental: {
28 | websocket: true,
29 | },
30 | },
31 | }).addRouter({
32 | name: "ws",
33 | type: "http",
34 | handler: "./src/ws.ts",
35 | target: "server",
36 | base: "/ws",
37 | });
38 | ```
39 |
40 | Inside the ws file, you can export an eventHandler function to manage WebSocket connections and events:
41 |
42 | ```tsx title="./src/ws.ts"
43 | import { eventHandler } from "vinxi/http";
44 |
45 | export default eventHandler({
46 | handler() {},
47 | websocket: {
48 | async open(peer) {
49 | console.log("open", peer.id, peer.url);
50 | },
51 | async message(peer, msg) {
52 | const message = msg.text();
53 | console.log("msg", peer.id, peer.url, message);
54 | },
55 | async close(peer, details) {
56 | console.log("close", peer.id, peer.url);
57 | },
58 | async error(peer, error) {
59 | console.log("error", peer.id, peer.url, error);
60 | },
61 | },
62 | });
63 | ```
64 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/entrypoints/app.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: app.tsx
3 | use_cases: >-
4 | routing setup, app structure, layout definition, navigation setup, entry point
5 | configuration
6 | tags:
7 | - routing
8 | - app
9 | - entry
10 | - layout
11 | - navigation
12 | - components
13 | version: '1.0'
14 | description: >-
15 | Define your SolidStart app's entry point and routing structure. Set up
16 | navigation, layouts, and isomorphic application logic.
17 | ---
18 |
19 | The `App` component is the isomorphic (shared on server and browser) entry point into your application.
20 | This is where the code runs on both sides.
21 | This is like the classic entry point where you can define your router, and other top level components.
22 |
23 | ## Basic example (with routing)
24 |
25 | This is where routers setup navigation between the pages discovered by the [`FileRouter`](/solid-start/reference/routing/file-routes).
26 |
27 | ```tsx
28 | import { A, Router } from "@solidjs/router";
29 | import { FileRoutes } from "@solidjs/start/router";
30 | import { Suspense } from "solid-js";
31 |
32 | export default function App() {
33 | return (
34 | (
36 | Index
37 | About
38 | {props.children}
39 | )}
40 | >
41 |
43 | );
44 | }
45 | ```
46 |
47 | See a similar example in [StackBlitz](https://stackblitz.com/github/solidjs/solid-start/tree/main/examples/basic?file=src%2Fapp.tsx)
48 |
49 | ## Bare example (no routing)
50 |
51 | Since SolidStart does not come packaged with a router, you can simply return your template of choice:
52 |
53 | ```tsx
54 | export default function App() {
55 | return (
56 |
57 | Hello world!
58 |
59 | );
60 | }
61 | ```
62 |
63 | See this example in [StackBlitz](https://stackblitz.com/github/solidjs/solid-start/tree/main/examples/bare?file=src%2Fapp.tsx)
64 |
--------------------------------------------------------------------------------
/src/routes/reference/lifecycle/on-cleanup.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: onCleanup
3 | order: 5
4 | use_cases: >-
5 | component unmounting, memory leak prevention, event listener cleanup, side
6 | effect cleanup, resource disposal
7 | tags:
8 | - lifecycle
9 | - cleanup
10 | - memory
11 | - events
12 | - disposal
13 | version: '1.0'
14 | description: >-
15 | Register cleanup methods in SolidJS to prevent memory leaks. Executes when
16 | components unmount or tracking scopes dispose. Essential for proper cleanup.
17 | ---
18 |
19 | `onCleanup` registers a cleanup method that executes on disposal and recalculation of the current tracking scope.
20 | Can be used anywhere to clean up any side effects left behind by initialization.
21 |
22 | When used in a Component, it runs when the component is unmounted.
23 | When used in tracking scope, such [`createEffect`](/reference/basic-reactivity/create-effect), [`createMemo`](/reference/basic-reactivity/create-memo) or a [`createRoot`](/reference/reactive-utilities/create-root), it runs when the tracking scope is disposed or refreshed.
24 |
25 | ```ts
26 | import { onCleanup } from "solid-js"
27 |
28 | function onCleanup(fn: () => void): void;
29 | ```
30 |
31 | Without the `onCleanup` function, the event listener would remain attached to the `document` even after the component is removed from the page.
32 | This can cause memory leaks and other issues.
33 |
34 | ```tsx
35 | import { createSignal, onCleanup } from "solid-js"
36 |
37 | const Component = () => {
38 | const [count, setCount] = createSignal(0);
39 |
40 | const handleClick = () => setCount((value) => value + 1);
41 |
42 | document.addEventListener("click", handleClick);
43 |
44 | /**
45 | * Remove the event listener when the component is removed/unmounted from the page.
46 | */
47 | onCleanup(() => {
48 | document.removeEventListener("click", handleClick);
49 | });
50 |
51 | return Document has been clicked {count()} times ;
52 | };
53 | ```
54 |
--------------------------------------------------------------------------------
/src/routes/solid-router/reference/primitives/use-match.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: useMatch
3 | use_cases: >-
4 | active links, navigation highlighting, conditional rendering, path matching,
5 | menu items
6 | tags:
7 | - match
8 | - active
9 | - navigation
10 | - path
11 | - conditional
12 | - links
13 | version: '1.0'
14 | description: >-
15 | Check if paths match current route with useMatch - create active navigation
16 | links, conditional rendering based on route matching.
17 | ---
18 |
19 | `useMatch` takes an accessor that returns the path and creates a Memo that returns match information if the current path matches the provided path.
20 | Useful for determining if a given path matches the current route.
21 |
22 | ```js
23 | const match = useMatch(() => props.href);
24 |
25 | return
;
26 | ```
27 |
28 | As a second parameter, `useMatch` also accepts a group of `MatchFilters`.
29 | These filteres allow for a more granular check.
30 |
31 | 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.
32 |
33 | ```js
34 | const filters: MatchFilters = {
35 | parent: ["mom", "dad"]
36 | id: /^\d+$/,
37 | withHtmlExtension: (v: string) => v.length > 5 && v.endsWith(".html")
38 | };
39 | ```
40 |
41 | Finally, any parameter can be determined optional by adding a `?` at the end of the parameter name.
42 |
43 | ```js
44 | const isReference = useMatch(() => "/:project?/reference/*?", {
45 | project: ["solid-router", "solid-meta", "solid-start"],
46 | });
47 | ```
48 |
49 | The check above will match:
50 |
51 | ```text
52 | /reference
53 | /solid-router/reference
54 | /solid-meta/reference
55 | /solid-start/reference
56 |
57 | /reference/...
58 | /solid-router/reference/...
59 | /solid-meta/reference/...
60 | /solid-start/reference/...
61 | ```
62 |
--------------------------------------------------------------------------------
/src/routes/solid-router/reference/data-apis/revalidate.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: revalidate
3 | use_cases: >-
4 | refresh data, invalidate cache, polling, real-time updates, manual refetch,
5 | stale data
6 | tags:
7 | - revalidate
8 | - cache
9 | - refresh
10 | - invalidation
11 | - polling
12 | - refetch
13 | version: '1.0'
14 | description: >-
15 | Manually revalidate cached queries to refresh stale data, implement polling,
16 | or trigger updates after mutations in SolidJS.
17 | ---
18 |
19 | The `revalidate` function is used to revalidate queries associated with specified [query keys](/solid-router/reference/data-apis/query#query-keys).
20 | When a [query](/solid-router/reference/data-apis/query) is revalidated, it is executed again, and any references to the associated query data are updated accordingly.
21 |
22 | ```tsx
23 | import { For } from "solid-js";
24 | import { query, createAsync, revalidate } from "@solidjs/router";
25 |
26 | const getPosts = query(async () => {
27 | return await fetch("https://api.com/posts").then((response) =>
28 | response.json()
29 | );
30 | }, "posts");
31 |
32 | function Posts() {
33 | const posts = createAsync(() => getPosts());
34 |
35 | function refetchPosts() {
36 | revalidate(getPosts.key);
37 | }
38 |
39 | return (
40 |
41 |
Refetch posts
42 |
43 | {(post) => {post.title} }
44 |
45 |
`](/reference/components/no-hydration), may lead to hydration errors.
29 | :::
30 |
31 | ## Import
32 |
33 | ```ts
34 | import { createUniqueId } from "solid-js";
35 | ```
36 |
37 | ## Type
38 |
39 | ```ts
40 | function createUniqueId(): string;
41 | ```
42 |
43 | ## Parameters
44 |
45 | This function does not take any parameters.
46 |
47 | ## Returns
48 |
49 | `createUniqueId` returns a unique `string` that is stable across server and client renders.
50 |
51 | ## Examples
52 |
53 | ### Basic Usage
54 |
55 | ```tsx
56 | import { createUniqueId } from "solid-js";
57 |
58 | type InputProps = {
59 | id?: string;
60 | };
61 |
62 | function Input(props: InputProps) {
63 | return console.log("Welcome!")} />
24 | ```
25 |
26 | This directly attaches an event handler (via [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)) to the `div`.
27 |
28 | :::note
29 |
New in v1.9.0
30 | :::
31 |
32 | An aditional special syntax that allows full control of [`capture`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#capture), [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive), [`once`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#once) and [`signal`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal) is an intersection or combination of `EventListenerObject` & `AddEventListenerOptions`, as follows:
33 |
34 | ```tsx
35 | const handler = {
36 | handleEvent(e) {
37 | console.log(e)
38 | },
39 | once:true,
40 | passive:false,
41 | capture:true
42 | }
43 |
44 |
45 |
46 | // or inline
47 |
48 |
49 | ```
50 |
51 | This new syntax replaces the now deprecated `oncapture:` and it's future proof for any posible new event listener options.
52 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/get-owner.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: getOwner
3 | use_cases: >-
4 | advanced tracking control, custom cleanup logic, understanding component
5 | hierarchy, debugging ownership chains, manual scope management
6 | tags:
7 | - ownership
8 | - tracking
9 | - scopes
10 | - cleanup
11 | - debugging
12 | version: '1.0'
13 | description: >-
14 | Access the current tracking scope owner in SolidJS for advanced control over
15 | cleanup and disposal. Essential for custom reactive primitives.
16 | ---
17 |
18 | ```tsx
19 | import { getOwner } from "solid-js"
20 | import type { Owner } from "solid-js"
21 |
22 | function getOwner(): Owner
23 |
24 | ```
25 |
26 | Gets the tracking scope that owns the currently running code, e.g., for passing into a later call to `runWithOwner` outside of the current scope.
27 |
28 | Internally, computations (effects, memos, etc.) create owners which are children of their owner, all the way up to the root owner created by `createRoot` or `render`.
29 | In particular, this ownership tree lets Solid automatically clean up a disposed computation by traversing its subtree and calling all `onCleanup` callbacks.
30 | For example, when a createEffect's dependencies change, the effect calls all descendant `onCleanup` callbacks before running the effect function again.
31 | Calling `getOwner` returns the current owner node that is responsible for disposal of the current execution block.
32 |
33 | Components are not computations, so do not create an owner node, but they are typically rendered from a `createEffect` which does, so the result is similar: when a component gets unmounted, all descendant `onCleanup` callbacks get called.
34 | Calling `getOwner` from a component scope returns the owner that is responsible for rendering and unmounting that component.
35 |
36 | Note that the owning tracking scope isn't necessarily tracking.
37 | For example, untrack turns off tracking for the duration of a function (without creating a new tracking scope), as do components created via JSX (`
`).
38 |
--------------------------------------------------------------------------------
/src/routes/concepts/derived-values/derived-signals.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Derived signals
3 | order: 1
4 | use_cases: >-
5 | computed values, reactive calculations, dependent state, dynamic values from
6 | signals
7 | tags:
8 | - signals
9 | - reactivity
10 | - derived
11 | - computed
12 | - state
13 | version: '1.0'
14 | description: >-
15 | Create reactive derived values that automatically update when their
16 | dependencies change using Solid's derived signals.
17 | ---
18 |
19 | Derived signals are functions that rely on one or more [signals](/concepts/signals) to produce a value.
20 |
21 | These functions are not executed immediately, but instead are only called when the values they rely on are changed.
22 | When the underlying signal is changed, the function will be called again to produce a new value.
23 |
24 | ```js
25 | const double = () => count() * 2;
26 | ```
27 |
28 | In the above example, the `double` function relies on the `count` signal to produce a value.
29 | When the `count` signal is changed, the `double` function will be called again to produce a new value.
30 |
31 | Similarly you can create a derived signal that relies on a store value because stores use signals under the hood.
32 | To learn more about how stores work, [you can visit the stores section](/concepts/stores).
33 |
34 | ```js
35 | const fullName = () => store.firstName + ' ' + store.lastName;
36 | ```
37 |
38 | These dependent functions gain reactivity from the signal they access, ensuring that changes in the underlying data propagate throughout your application.
39 | It is important to note that these functions do not store a value themselves; instead, they can update any effects or components that depend on them.
40 | If included within a component's body, these derived signals will trigger an update when necessary.
41 |
42 | While you can create derived values in this manner, Solid created the [`createMemo`](/reference/basic-reactivity/create-memo) primitive.
43 | To dive deeper into how memos work, [check out the memos section](/concepts/derived-values/memos).
44 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/from.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: from
3 | use_cases: >-
4 | rxjs interop, svelte stores integration, external observables, third-party
5 | state management, converting subscriptions to signals
6 | tags:
7 | - interop
8 | - rxjs
9 | - observables
10 | - signals
11 | - integration
12 | version: '1.0'
13 | description: >-
14 | Convert RxJS observables and external producers into SolidJS signals. Seamless
15 | integration with third-party reactive libraries and state managers.
16 | ---
17 |
18 | ```tsx
19 | import { from } from "solid-js"
20 |
21 | function from(
22 | producer:
23 | | ((setter: (v: T) => T) => () => void)
24 | | {
25 | subscribe: (
26 | fn: (v: T) => void
27 | ) => (() => void) | { unsubscribe: () => void }
28 | }
29 | ): () => T | undefined
30 |
31 | ```
32 |
33 | A helper to make it easier to interop with external producers like RxJS observables or with Svelte Stores.
34 | This basically turns any subscribable (object with a subscribe method) into a Signal and manages subscription and disposal.
35 |
36 | ```tsx
37 | const signal = from(obsv$)
38 | ```
39 |
40 | It can also take a custom producer function where the function is passed a setter function that returns an unsubscribe function:
41 |
42 | ```tsx
43 | const clock = from((set) => {
44 | const interval = setInterval(() => {
45 | set((v) => v + 1)
46 | }, 1000)
47 |
48 | return () => clearInterval(interval)
49 | })
50 | ```
51 |
52 | ## Arguments
53 |
54 | | Name | Type | Description |
55 | | :------- | :----------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------- |
56 | | producer | `((setter: (v: T) => T) => () => void) \| { subscribe: (fn: (v: T) => void) => (() => void) \| { unsubscribe: () => void }; }` | The producer function or subscribable object |
57 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/split-props.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: splitProps
3 | use_cases: >-
4 | prop forwarding, component composition, prop separation, child components,
5 | prop destructuring
6 | tags:
7 | - props
8 | - components
9 | - composition
10 | - destructuring
11 | - reactive
12 | version: '1.0'
13 | description: >-
14 | Split reactive props objects by keys in SolidJS. Perfect for consuming
15 | specific props while forwarding others to child components efficiently.
16 | ---
17 |
18 | ```ts
19 | import { splitProps } from "solid-js"
20 |
21 | function splitProps(
22 | props: T,
23 | ...keys: Array<(keyof T)[]>
24 | ): [...parts: Partial]
25 |
26 | ```
27 |
28 | Splits a reactive object by keys.
29 |
30 | It takes a reactive object and any number of arrays of keys; for each array of keys, it will return a reactive object with just those properties of the original object.
31 | The last reactive object in the returned array will have any leftover properties of the original object.
32 |
33 | This can be useful if you want to consume a subset of props and pass the rest to a child.
34 |
35 | ```tsx
36 | function MyComponent(props) {
37 | const [local, others] = splitProps(props, ["children"])
38 |
39 | return (
40 | <>
41 | {local.children}
42 |