mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-03 20:13:03 +00:00
update
This commit is contained in:
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "de76ce8219ff39e211ea323d",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "a",
|
||||
"content": "---\ntitle: A\nuse_cases: \u003e-\n creating navigation links, active link styling, soft navigation, relative\n paths, menu items\ntags:\n - component\n - navigation\n - links\n - active-states\n - anchors\n - soft-navigation\nversion: '1.0'\ndescription: \u003e-\n The A component provides enhanced anchor tags with automatic base path\n support, active states, and soft navigation for better user experience.\n---\n\nSolid Router exposes the `\u003cA /\u003e` component as a wrapper around the [native anchor tag ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).\nIt relies on the routing context provided by the [`\u003cRouter\u003e` component](/solid-router/reference/components/router) and if used outside, will triggers a runtime error..\n\n`\u003cA /\u003e` supports relative and base paths. `\u003ca /\u003e` doesn't. But `\u003ca /\u003e` gets augmented\nwhen JS is present via a top-level listener to the DOM, so you get the\nsoft-navigation experience nonetheless.\n\nThe `\u003cA /\u003e` supports the [`\u003cRouter /\u003e`](/solid-router/reference/components/router) base property (`\u003cRouter base=\"/subpath\"\u003e`) and prepend it to the received `href` automatically and the `\u003ca /\u003e`does not.\nThe same happens with relative paths passed to `\u003cA /\u003e`.\n\nThe `\u003cA\u003e` tag has an `active` class if its href matches the current location, and `inactive` otherwise.\nBy default matching includes locations that are descendants (e.g.: href `/users` matches locations `/users` and `/users/123`).\n\n:::tip\n\tUse the boolean `end` prop to prevent matching these. This is particularly\n\tuseful for links to the root route `/` which would match everything.\n:::\n\n## Soft Navigation\n\nWhen JavaScript is present at the runtime, both components behave in a very similar fashion.\nThis is because Solid Router adds a listener at the top level of the DOM and will augment the native `\u003ca /\u003e` tag to a more performant experience (with soft navigation).\n\n:::note\n\nTo prevent, both `\u003cA /\u003e` and `\u003ca /\u003e` tags from soft navigating when JavaScript is present, pass a `target=\"_self\"` attribute.\n\n:::\n\n## Props Reference\n\n| prop | type | description |\n| ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| href | string | The path of the route to navigate to. This will be resolved relative to the route that the link is in, but you can preface it with `/` to refer back to the root. |\n| noScroll | boolean | If true, turn off the default behavior of scrolling to the top of the new page |\n| replace | boolean | If true, don't add a new entry to the browser history. (By default, the new page will be added to the browser history, so pressing the back button will take you to the previous route.) |\n| state | unknown | [Push this value](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) to the history stack when navigating |\n| inactiveClass | string | The class to show when the link is inactive (when the current location doesn't match the link) |\n| activeClass | string | The class to show when the link is active |\n| end | boolean | If `true`, only considers the link to be active when the current location matches the `href` exactly; if `false`, check if the current location _starts with_ `href` |",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/components/a.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-router/reference/components/a.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 3947,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "2589d320f87b6b235e4c65b107559dde2b069b08198c9f88e48ce8e1a323a281",
|
||||
"timestamp": "2026-02-23T11:43:00.192343467+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "04a5fca92d57f145fcbd0c66",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "action",
|
||||
"content": "---\ntitle: action\nuse_cases: \u003e-\n forms, user input, data mutations, optimistic updates, form submissions,\n server actions, post requests\ntags:\n - actions\n - forms\n - mutations\n - post\n - validation\n - optimistic-updates\n - server\nversion: '1.0'\ndescription: \u003e-\n Learn how to handle form submissions and data mutations in SolidJS with\n actions, including optimistic updates and server-side processing.\n---\n\nThe `action` function wraps an asynchronous function and returns an [action](/solid-router/concepts/actions).\n\nWhen an action is triggered, it creates a submission object that tracks its execution status.\nThis state can be accessed with the [`useSubmission`](/solid-router/reference/data-apis/use-submission) and [`useSubmissions`](/solid-router/reference/data-apis/use-submissions) primitives.\n\nAfter an action completed successfully, all queries active in the same page are revalidated, unless revalidation is configured using [response helpers](/solid-router/concepts/actions#managing-navigation-and-revalidation).\n\n## Import\n\n```tsx\nimport { action } from \"@solidjs/router\";\n```\n\n## Type\n\n```tsx\nfunction action\u003cT extends Array\u003cany\u003e, U = void\u003e(\n\tfn: (...args: T) =\u003e Promise\u003cU\u003e,\n\tname?: string\n): Action\u003cT, U\u003e;\n\nfunction action\u003cT extends Array\u003cany\u003e, U = void\u003e(\n\tfn: (...args: T) =\u003e Promise\u003cU\u003e,\n\toptions?: { name?: string; onComplete?: (s: Submission\u003cT, U\u003e) =\u003e void }\n): Action\u003cT, U\u003e;\n\nfunction action\u003cT extends Array\u003cany\u003e, U = void\u003e(\n\tfn: (...args: T) =\u003e Promise\u003cU\u003e,\n\toptions:\n\t\t| string\n\t\t| { name?: string; onComplete?: (s: Submission\u003cT, U\u003e) =\u003e void } = {}\n): Action\u003cT, U\u003e;\n```\n\n## Parameters\n\n### `handler`\n\n- **Type:** `(...args: T) =\u003e Promise\u003cU\u003e`\n- **Required:** Yes\n\nAn asynchronous function that performs the action's logic.\nWhen the action is used with a [`\u003cform\u003e` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form), the function receives a [`FormData` object](https://developer.mozilla.org/en-US/docs/Web/API/FormData) as its first parameter.\n\n### `options`\n\n- **Type:** `string | { name?: string; onComplete?: (s: Submission\u003cT, U\u003e) =\u003e void }`\n- **Required**: No\n\nA unique string used to identify the action in Server-Side Rendering (SSR) environments.\nThis is required when using the action with a `\u003cform\u003e` element.\n\nAlternatively, a configuration object can be passed with the following properties.\n\n#### `name`\n\n- **Type:** `string`\n- **Required:** No\n\nThe unique string to identify the action in SSR environments.\nRequired for `\u003cform\u003e` usage.\n\n#### `onComplete` (optional):\n\n- **Type:** `(s: Submission\u003cT, U\u003e) =\u003e void`\n- **Required:** No\n\nA function that runs after the action completes.\nIt receives a submission object as its parameter.\n\n## Return value\n\n`action` returns an action with the following properties.\n\n### `with`\n\nA method that wraps the original action and returns a new one.\nWhen this new action is triggered, the arguments passed to `with` are forwarded to the original action.\nIf this new action is used with a `\u003cform\u003e`, the `FormData` object is passed as the last parameter, after any other forwarded parameters.\n\n## Examples\n\n### Form submission\n\n```tsx\nimport { action } from \"@solidjs/router\";\n\nconst addTodoAction = action(async (formData: FormData) =\u003e {\n\t// Adds a new todo to the server.\n}, \"addTodo\");\n\nfunction TodoForm() {\n\treturn (\n\t\t\u003cform action={addTodoAction} method=\"post\"\u003e\n\t\t\t\u003cinput name=\"name\" /\u003e\n\t\t\t\u003cbutton\u003eAdd todo\u003c/button\u003e\n\t\t\u003c/form\u003e\n\t);\n}\n```\n\n### Passing additional arguments\n\n```tsx\nimport { action } from \"@solidjs/router\";\n\nconst addTodoAction = action(async (userId: number, formData: FormData) =\u003e {\n\t// ... Adds a new todo for a specific user.\n}, \"addTodo\");\n\nfunction TodoForm() {\n\tconst userId = 1;\n\treturn (\n\t\t\u003cform action={addTodoAction.with(userId)} method=\"post\"\u003e\n\t\t\t\u003cinput name=\"name\" /\u003e\n\t\t\t\u003cbutton\u003eAdd todo\u003c/button\u003e\n\t\t\u003c/form\u003e\n\t);\n}\n```\n\n### Triggering actions programmatically\n\n```tsx\nimport { action, useAction } from \"@solidjs/router\";\n\nconst markDoneAction = action(async (id: string) =\u003e {\n\t// ... Marks a todo as done on the server.\n});\n\nfunction NotificationItem(props: { id: string }) {\n\tconst markDone = useAction(markDoneAction);\n\n\treturn \u003cbutton onClick={() =\u003e markDone(props.id)}\u003eMark as done\u003c/button\u003e;\n}\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/action.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-router/reference/data-apis/action.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 4236,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "5523600ac5072d93213af730058cc9bab92d377d3b66460c29c142462098438f",
|
||||
"timestamp": "2026-02-23T11:43:00.192567398+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "96b53c49f442358edc85e942",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "alternative-routers",
|
||||
"content": "---\ntitle: Alternative routers\nuse_cases: \u003e-\n single-page apps without server routing, legacy hash-based urls, testing\n router logic, client-only navigation\ntags:\n - hash-mode\n - memory-mode\n - client-side\n - testing\n - spa\n - routing\nversion: '1.0'\ndescription: \u003e-\n Learn to use hash-based and memory routers in SolidJS for client-side\n navigation and testing without server interaction.\n---\n\nWhile the default router uses the browser's `location.pathname` to determine the current route, you can use alternative routers to change this behavior.\nThis includes:\n- [**Hash mode**](#hash-mode): Uses the hash portion of the URL to determine the current route.\n- [**Memory mode**](#memory-mode): Keeps the history of the router in memory, useful for testing.\n\n## Hash mode\n\nHash mode routing uses the hash portion of the URL to manage an application's state and navigation.\nUnlike the [default router](/solid-router/reference/components/router), the hash portion of the URL will not be handled by the server meaning this is a client-side only routing.\nTo use hash mode, replace the `\u003cRouter /\u003e` component in the application with [`\u003cHashRouter /\u003e`](/solid-router/reference/components/hash-router).\n\n```jsx del={3, 16} ins={4,17}\nimport { render } from \"solid-js/web\";\nimport {\n Router\n HashRouter,\n Route\n } from \"@solidjs/router\";\n\nconst App = (props) =\u003e (\n \u003c\u003e\n \u003ch1\u003eRoot header\u003c/h1\u003e\n {props.children}\n \u003c/\u003e\n);\n\nrender(\n () =\u003e \u003cRouter root={App}\u003e{/*... routes */}\u003c/Router\u003e,\n () =\u003e \u003cHashRouter root={App}\u003e{/*... routes */}\u003c/HashRouter\u003e,\n document.getElementById(\"app\")\n);\n\n```\n\n## Memory mode\n\nUnlike the default router and hash, the memory router does not interact with the browser's URL.\nThis means that while the URL in the browser's address bar will change, the router will not navigate to the new route.\nThis gives you the ability to control the router's state and history in memory which can be useful for testing purposes.\n\nTo use memory mode, replace the `\u003cRouter /\u003e` component in the application with [`\u003cMemoryRouter /\u003e`](/solid-router/reference/components/memory-router):\n\n```jsx del={3, 16} ins={4,17}\nimport { render } from \"solid-js/web\";\nimport {\n Router\n MemoryRouter,\n Route\n } from \"@solidjs/router\";\n\nconst App = (props) =\u003e (\n \u003c\u003e\n \u003ch1\u003eRoot header\u003c/h1\u003e\n {props.children}\n \u003c/\u003e\n);\n\nrender(\n () =\u003e \u003cRouter root={App}\u003e{/*... routes */}\u003c/Router\u003e,\n () =\u003e \u003cMemoryRouter root={App}\u003e{/*... routes */}\u003c/MemoryRouter\u003e,\n document.getElementById(\"app\")\n);\n\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/alternative-routers.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-router/concepts/alternative-routers.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2555,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "4a56da1c3c701f81dc48db19a1d91c081f2b6a4f9cbf359871451eb7014f69ca",
|
||||
"timestamp": "2026-02-23T11:43:00.191586905+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "f0f790993228be6f44254e88",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "app-config",
|
||||
"content": "---\ntitle: app.config.ts\nuse_cases: 'initial setup, project configuration, build settings, deployment configuration'\ntags:\n - configuration\n - setup\n - app-config\n - defineconfig\nversion: '1.0'\ndescription: \u003e-\n Configure your SolidStart app with app.config.ts. Central configuration file\n for Vite, Vinxi, and Nitro build settings.\n---\n\nThe `app.config.ts` is the root of every SolidStart app and the main point of configuration.\nThis file exports a configuration for SolidStart, [Vinxi](https://vinxi.vercel.app/), [Vite](https://vitejs.dev) and [Nitro](https://nitro.build/).\nThe easiest way to generate a configuration is to use the [`defineConfig`](/solid-start/reference/config/define-config) helper.\n\nHere [`defineConfig`](/solid-start/reference/config/define-config) is used to create a minimal configuration with default settings.\n\n```tsx\nimport { defineConfig } from \"@solidjs/start/config\";\n\nexport default defineConfig({});\n```\n\nTo see more configuration options, see [`defineConfig`](/solid-start/reference/config/define-config).",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/entrypoints/app-config.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/reference/entrypoints/app-config.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1048,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "9c3f622db9ca79ed0791c305037bb0aef2083365042383d2d0d362627016160c",
|
||||
"timestamp": "2026-02-23T11:43:00.194780778+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "d724c278e22c266a3588ade2",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "app",
|
||||
"content": "---\ntitle: app.tsx\nuse_cases: \u003e-\n routing setup, app structure, layout definition, navigation setup, entry point\n configuration\ntags:\n - routing\n - app\n - entry\n - layout\n - navigation\n - components\nversion: '1.0'\ndescription: \u003e-\n Define your SolidStart app's entry point and routing structure. Set up\n navigation, layouts, and isomorphic application logic.\n---\n\nThe `App` component is the isomorphic (shared on server and browser) entry point into your application.\nThis is where the code runs on both sides.\nThis is like the classic entry point where you can define your router, and other top level components.\n\n## Basic example (with routing)\n\nThis is where routers setup navigation between the pages discovered by the [`FileRouter`](/solid-start/reference/routing/file-routes).\n\n```tsx\nimport { A, Router } from \"@solidjs/router\";\nimport { FileRoutes } from \"@solidjs/start/router\";\nimport { Suspense } from \"solid-js\";\n\nexport default function App() {\n\treturn (\n\t\t\u003cRouter\n\t\t\troot={(props) =\u003e (\n\t\t\t\t\t\u003cA href=\"/\"\u003eIndex\u003c/A\u003e\n\t\t\t\t\t\u003cA href=\"/about\"\u003eAbout\u003c/A\u003e\n\t\t\t\t\t\u003cSuspense\u003e{props.children}\u003c/Suspense\u003e\n\t\t\t)}\n\t\t\u003e\n\t\t\t\u003cFileRoutes /\u003e\n\t\t\u003c/Router\u003e\n\t);\n}\n```\n\nSee a similar example in [StackBlitz](https://stackblitz.com/github/solidjs/solid-start/tree/main/examples/basic?file=src%2Fapp.tsx)\n\n## Bare example (no routing)\n\nSince SolidStart does not come packaged with a router, you can simply return your template of choice:\n\n```tsx\nexport default function App() {\n\treturn (\n\t\t\u003cmain\u003e\n\t\t\t\u003ch1\u003eHello world!\u003c/h1\u003e\n\t\t\u003c/main\u003e\n\t);\n}\n```\n\nSee this example in [StackBlitz](https://stackblitz.com/github/solidjs/solid-start/tree/main/examples/bare?file=src%2Fapp.tsx)",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/entrypoints/app.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/reference/entrypoints/app.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1660,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "0be79472fc12636c5ebfc05dde46f56f18a67857f3de13abfdfafba6b3557bf3",
|
||||
"timestamp": "2026-02-23T11:43:00.194827095+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "2cc7f00810938f542dc05a19",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "attr",
|
||||
"content": "---\ntitle: 'attr:*'\nuse_cases: \u003e-\n web components, custom elements, forcing attributes, html attributes, dom\n properties\ntags:\n - attributes\n - web-components\n - dom\n - props\n - typescript\n - custom-elements\nversion: '1.0'\ndescription: \u003e-\n Force props as HTML attributes instead of properties in SolidJS. Essential for\n Web Components and custom element attribute handling.\n---\n\nForces the prop to be treated as an attribute instead of a property.\nUseful for Web Components where you want to set attributes.\n\n```tsx\n\u003cmy-element attr:status={props.status} /\u003e\n```\n\n:::note[Strong-Typing Custom Attributes]\nType definitions are required when using TypeScript.\nSee the[TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.\n:::",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/attr.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/jsx-attributes/attr.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 778,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "0ae1a7028412b7cd5661a55b6761037d521789384e07cc0d698e6201e4671353",
|
||||
"timestamp": "2026-02-23T11:43:00.18930133+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "6b7d98ddbd3dcfe6040e6bae",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "auth",
|
||||
"content": "---\ntitle: Auth\nuse_cases: \u003e-\n user authentication, protected routes, authorization checks, secure data\n access, login systems\ntags:\n - authentication\n - authorization\n - security\n - protected\n - login\n - users\nversion: '1.0'\ndescription: \u003e-\n Implement authentication and protected routes in SolidStart. Secure sensitive\n resources and handle user authorization properly.\n---\n\nServer functions can be used to protect sensitive resources like user data.\n\n```tsx\n\"use server\"\n\nasync function getPrivatePosts() {\n\tconst user = await getUser()\n\tif(!user) {\n\t\treturn null // or throw an error\n\t}\n\n\treturn db.getPosts({ userId: user.id, private: true })\n}\n```\n\nThe `getUser` function can be [implemented using sessions](/solid-start/advanced/session).\n\n## Protected Routes\n\nRoutes can be protected by checking the user or session object during data fetching.\nThis example uses [Solid Router](/solid-router).\n\n```tsx\nconst getPrivatePosts = query(async function() {\n\t\"use server\"\n\tconst user = await getUser()\n\tif(!user) {\n\t\tthrow redirect(\"/login\");\n\t}\n\n\treturn db.getPosts({ userId: user.id, private: true })\n})\n\nexport default function Page() {\n\tconst posts = createAsync(() =\u003e getPrivatePosts(), { deferStream: true });\n}\n```\n\nOnce the user hits this route, the router will attempt to fetch `getPrivatePosts` data.\nIf the user is not signed in, `getPrivatePosts` will throw and the router will redirect to the login page.\n\nTo prevent errors when opening the page directly, set `deferStream: true`.\nThis would ensure `getPrivatePosts` resolves before the page loads since server-side redirects cannot occur after streaming has started.",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/advanced/auth.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/advanced/auth.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1644,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "8fc49a96e28031bf13f061a3145e294b2181b7ee2a4237530cffe139af35a4cc",
|
||||
"timestamp": "2026-02-23T11:43:00.193534235+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "b6d63b32b22f3b1c68fd354a",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "aws-via-flightcontrol",
|
||||
"content": "---\ntitle: AWS via Flightcontrol\norder: 1\nmainNavExclude: true\nuse_cases: \u003e-\n aws deployment, automated deployments, continuous integration, github\n integration, cloud hosting\ntags:\n - aws\n - deployment\n - flightcontrol\n - automation\n - github\n - hosting\nversion: '1.0'\ndescription: \u003e-\n Deploy Solid apps to AWS with Flightcontrol's automated platform featuring\n GitHub integration and continuous deployment.\n---\n\n[Flightcontrol](https://www.flightcontrol.dev/) is a platform that fully automates deployments to Amazon Web Services (AWS).\nFor more information on Flightcontrol's capabilities, you can [visit their docs](https://www.flightcontrol.dev/docs).\n\n## Connecting to a git repository\n\nFlightcontrol offers a GitHub integration, leveraging its continuous development actions.\n\nTo get started with Flightcontrol's GitHub integration, you'll first need to log in or sign up to the Flightcontrol platform.\nAfter you're logged in, simply link your GitHub account to Flightcontrol.\n\nOnce connected, Flightcontrol will take care of the rest.\nIt automatically detects any new pushes to your specified GitHub branches and builds your project.\nThe build process uses the commands in your `package.json` file and adheres to the settings that you have configured in Flightcontrol.\nNo additional setup is needed.\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=h2Uk4xoB8fTpLOTOHIb6wQ\"\n\tpreview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=h2Uk4xoB8fTpLOTOHIb6wQ\u0026type=embed\"\n/\u003e\n\n## Using the dashboard\n\n1. In the Flightcontrol dashboard, create a new project and select the repository you wish to use as the source.\n\n2. Choose the GUI as your configuration type.\n\n3. Add your Solid site as a static site by clicking the \"Add a Static Site\" option.\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=5bE5kc7N_kOSfyHtasalrg\"\n\tpreview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=5bE5kc7N_kOSfyHtasalrg\u0026type=embed\"\n/\u003e\n\n5. Label your output directory as `dist`.\n\n6. If your project requires environment variables, add them in the designated area:\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=HwJhZ7ZJ6sYkj883rwkgOA\"\n\tpreview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=HwJhZ7ZJ6sYkj883rwkgOA\u0026type=embed\"\n/\u003e\n\n7. Finally, connect your AWS account to complete the setup.\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=S5LOC3JVjl2zcynaHreL0g\"\n\tpreview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=S5LOC3JVjl2zcynaHreL0g\u0026type=embed\"\n/\u003e\n\n## Using code\n\n1. Navigate to your Flightcontrol dashboard and initiate a new project.\n Choose the repository you'd like to use as the source.\n\n2. Opt for the `flightcontrol.json` as your configuration type.\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=7XLTmlgp3VJa8tDKobokjA\"\n\tpreview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=7XLTmlgp3VJa8tDKobokjA\u0026type=embed\"\n/\u003e\n\n3. Add a new file named `flightcontrol.json` at the root of your selected repository.\n Below is an example configuration:\n\n```json frame=\"terminal\"\n{\n\t\"$schema\": \"https://app.flightcontrol.dev/schema.json\",\n\t\"environments\": [\n\t\t{\n\t\t\t\"id\": \"production\",\n\t\t\t\"name\": \"Production\",\n\t\t\t\"region\": \"us-west-2\",\n\t\t\t\"source\": {\n\t\t\t\t\"branch\": \"main\"\n\t\t\t},\n\t\t\t\"services\": [\n\t\t\t\t{\n\t\t\t\t\t\"id\": \"my-static-solid\",\n\t\t\t\t\t\"buildType\": \"nixpacks\",\n\t\t\t\t\t\"name\": \"My static solid site\",\n\t\t\t\t\t\"type\": \"static\",\n\t\t\t\t\t\"domain\": \"solid.yourapp.com\",\n\t\t\t\t\t\"outputDirectory\": \"dist\",\n\t\t\t\t\t\"singlePageApp\": true\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t]\n}\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deployment-options/aws-via-flightcontrol.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/guides/deployment-options/aws-via-flightcontrol.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 3719,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "fdc5437e62f1ca868240a39a88d3c3d90eab180c56219be798f66be7138587eb",
|
||||
"timestamp": "2026-02-23T11:43:00.187324805+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "bc495943c2738f3828e2e649",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "aws-via-sst",
|
||||
"content": "---\ntitle: AWS via SST\norder: 1\nmainNavExclude: true\nuse_cases: \u003e-\n serverless deployment, aws lambda, container deployment, cloud infrastructure,\n production deployment\ntags:\n - aws\n - sst\n - serverless\n - lambda\n - deployment\n - containers\nversion: '1.0'\ndescription: \u003e-\n Deploy SolidStart apps to AWS Lambda or containers using SST framework with\n streamlined configuration and deployment.\n---\n\n[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/).\n\n## Quick start\n\n1. [Create a SolidStart app](/solid-start/getting-started).\n\n2. In your project, init SST.\n\n```package-exec\nsst@latest init\n```\n\n3. This will detect your SolidStart app and ask you to update your `app.config.ts`.\n\n```ts title=\"app.config.ts\"\nserver: {\n preset: \"aws-lambda-streaming\"\n}\n```\n\n4. When you are ready, you can deploy your app using:\n\n```package-exec\nsst@latest deploy --stage production\n```\n\nYou can [read the full tutorial on the SST docs](https://sst.dev/docs/start/aws/solid).\n\n## Deploy to a Container\n\nYou can also deploy your SolidStart app to a [container](https://sst.dev/docs/start/aws/solid#containers) using SST.",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deployment-options/aws-via-sst.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/guides/deployment-options/aws-via-sst.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1290,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "c6a07cf2ddccd018a8c9b71b97bf5e7b0ded976bc7b4b3cfb295a87666ddee53",
|
||||
"timestamp": "2026-02-23T11:43:00.187362516+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "b4049256af08e2b53e24d3d4",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "base",
|
||||
"content": "---\ntitle: Base\norder: 5\nuse_cases: \u003e-\n setting base url, relative urls, external resources, multi-page apps, cdn\n assets\ntags:\n - base\n - url\n - meta\n - head\n - routing\nversion: '1.0'\ndescription: \u003e-\n Set the base URL for all relative URLs in your Solid app with the Base\n component. Essential for apps with complex routing or external resources.\n---\n\n`Base` is a component that specifies the base URL for all relative URLs in the document.\nThis provides a way to define the [`base`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) element of your document's `head`.\n\n```tsx twoslash\nimport { Base } from \"@solidjs/meta\";\n\n\u003cBase target=\"_blank\" href=\"https://docs.solidjs.com/\" /\u003e;\n```\n\n## Usage\n\n### Adding `base` tag\n\n```tsx twoslash\nimport { MetaProvider, Base } from \"@solidjs/meta\";\n\nexport default function Root() {\n\treturn (\n\t\t\u003cMetaProvider\u003e\n\t\t\t\u003cBase target=\"_blank\" href=\"https://docs.solidjs.com/\" /\u003e\n\t\t\u003c/MetaProvider\u003e\n\t);\n}\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/reference/meta/base.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-meta/reference/meta/base.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 964,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "61b90fc75b0f269458db57020e4674a3bd22a909a3af6aced00792f01312bfb5",
|
||||
"timestamp": "2026-02-23T11:43:00.191199016+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "35c7dd3c3cad02e34780262a",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "batch",
|
||||
"content": "---\ntitle: batch\nuse_cases: \u003e-\n performance optimization, multiple signal updates, reducing re-renders, bulk\n state changes, avoiding unnecessary recalculations\ntags:\n - performance\n - optimization\n - signals\n - batching\n - updates\nversion: '1.0'\ndescription: \u003e-\n Batch multiple signal updates in SolidJS to improve performance by reducing\n recalculations. Essential for optimizing complex state changes.\n---\n\n```ts\nimport { batch } from \"solid-js\"\n\nfunction batch\u003cT\u003e(fn: () =\u003e T): T\n```\n\n`batch` is a low-level API that batches updates together.\nMore precisely, `batch(fn)` holds the execution of downstream computations during the `fn` block, executing them all together once the block `fn` returns.\nThus, instead of a downstream computation executing after every dependency update, it will update just once at the end of the batch.\n\nBatching improves performance by avoiding unnecessary recalculation.\nSuppose you have a downstream memo `down` that depends on multiple upstream signals `up1`, `up2`, and `up3`:\n\n```ts\nimport { createSignal, createMemo, createEffect } from \"solid-js\"\nconst [up1, setUp1] = createSignal(1)\nconst [up2, setUp2] = createSignal(2)\nconst [up3, setUp3] = createSignal(3)\nconst down = createMemo(() =\u003e up1() + up2() + up3())\n// For illustration, monitor when `down` gets recomputed:\ncreateEffect(() =\u003e console.log(down())) // outputs 6\n```\n\nIf you directly update all of the upstream signals outside of batch mode, then `down` will recompute every time.\n\n```ts\nsetUp1(4) // recomputes down, outputs 9\nsetUp2(5) // recomputes down, outputs 12\nsetUp3(6) // recomputes down, outputs 15\n```\n\nIf instead you update the upstream signals within a `batch`, then `down` will update only once at the end:\n\n```ts\nbatch(() =\u003e {\n setUp1(10) // doesn't update down yet\n setUp2(10) // doesn't update down yet\n setUp3(10) // doesn't update down yet\n}) // recomputes down, outputs 30\n```\n\nThe impact is even more dramatic if you have *m* downstream computations (memos, effects, etc.) that each depends on *n* upstream signals.\nWithout batching, modifying all *n* upstream signals would cause *m n* updates to the downstream computations.\nWith batching, modifying all *n* upstream signals would cause *m* updates to the downstream computations.\nGiven that each update takes at least *n* time (just to read the upstream signals), this cost savings can be significant.\nBatching is also especially helpful when the downstream effects include DOM updates, which can be expensive.\n\nSolid uses `batch` internally to automatically batch updates for you in a few cases:\n\n* Within [`createEffect`](/reference/basic-reactivity/create-effect) and [`onMount`](/reference/lifecycle/on-mount) (unless they are outside a [root](/reference/reactive-utilities/create-root))\n* Within the [setter of a store](/reference/store-utilities/create-store#setter) (which can update several properties at once)\n* Within array methods (e.g. `Array.prototype.splice`) of a [mutable store](/reference/store-utilities/create-mutable) (which can update several elements at once)\n\nThese save you from having to use `batch` yourself in many cases.\nFor the most part, automatic batching should be transparent to you, because accessing a signal or memo will cause it to update if it is out of date (as of Solid 1.4).\nFor example:\n\n```ts\nbatch(() =\u003e {\n setUp1(11) // doesn't update down yet\n setUp2(11) // doesn't update down yet\n setUp3(11) // doesn't update down yet\n console.log(down()) // recomputes down, outputs 33\n setUp1(12) // doesn't update down yet\n setUp2(12) // doesn't update down yet\n setUp3(12) // doesn't update down yet\n}) // recomputes down, outputs 36\n```\n\nYou can think of `batch(fn)` as setting a global \"batch mode\" variable, calling the function `fn`, and then restoring the global variable to its previous value.\nThis means that you can nest `batch` calls, and they will form one big batch.\nIt also means that, if `fn` is asynchronous, only the updates before the first `await` will be batched.",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/batch.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/reactive-utilities/batch.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 4014,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "b8f742c321f4ad8e1b74eb67faffa98f8cd1b93dfe29ac2f196188cc68095501",
|
||||
"timestamp": "2026-02-23T11:43:00.189770742+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "fd9e8f5b126f3e53bf0d69e8",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "bool",
|
||||
"content": "---\ntitle: 'bool:*'\nuse_cases: \u003e-\n web components, custom elements, conditional attributes, boolean attributes,\n dynamic attribute presence\ntags:\n - attributes\n - web-components\n - boolean\n - conditional\n - dynamic\nversion: '1.0'\ndescription: \u003e-\n Control attribute presence with bool:* directive in SolidJS. Add or remove\n attributes dynamically based on truthy/falsy values for web components.\n---\n\n`bool:*` controls the presence of an attribute in an element.\nWhen the value is `truthy` it adds the `attribute` to the element.\nAlternatively, when the value is `falsy` it removes the `attribute` from the element.\nThis attribute is most useful for Web Components.\n\n```tsx\n\u003cmy-element bool:status={prop.value} /\u003e\n```\n\n```tsx\n// Assuming `prop.value` is `truthy`, then it becomes\n\u003cmy-element status /\u003e\n\n// And when `falsy`, then it becomes\n\u003cmy-element /\u003e\n\n```\n\n:::note[Strong-Typing Custom Boolean Attributes]\nType definitions are required when using TypeScript.\nSee the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.\n:::",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/bool.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/jsx-attributes/bool.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1083,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "951d1ca45166e9f993ac2c5754c4663a9ac881d4f263d806383511b1dc841950",
|
||||
"timestamp": "2026-02-23T11:43:00.189331587+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "73229d38f5739dd0b21cb8f9",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "catch-all",
|
||||
"content": "---\ntitle: Catch-all routes\nuse_cases: \u003e-\n 404 pages, handling invalid urls, fallback routes, error boundaries, redirect\n unknown paths\ntags:\n - '404'\n - error-pages\n - fallback\n - routing\n - wildcards\nversion: '1.0'\ndescription: \u003e-\n Create catch-all routes in SolidJS to handle 404 errors and redirect users\n from invalid URLs to proper fallback pages.\n---\n\nCatch-all routes are used to match any URL that does not match any other route in the application.\nThis is useful for displaying a 404 page or redirecting to a specific route when a user enters an invalid URL.\n\nTo create a catch-all route, place a route with an asterisk (`*`) as the path at the end of the route list.\nOptionally, you can name the parameter to access the unmatched part of the URL.\n\n```jsx\nimport { Router, Route } from \"@solidjs/router\";\n\nimport Home from \"./Home\";\nimport About from \"./About\";\nimport NotFound from \"./NotFound\";\n\nconst App = () =\u003e (\n \u003cRouter\u003e\n \u003cRoute path=\"/home\" component={Home} /\u003e\n \u003cRoute path=\"/about\" component={About} /\u003e\n \u003cRoute path=\"*404\" component={NotFound} /\u003e\n \u003c/Router\u003e\n);\n```\n\nNow, if a user navigates to a URL that does not match `/home` or `/about`, the `NotFound` component will be rendered.",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/catch-all.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-router/concepts/catch-all.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1224,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "581140eca5b42c67df184f95386c7cf825b1ca5fdd90e95166a43bc493df05e4",
|
||||
"timestamp": "2026-02-23T11:43:00.191612894+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "dfe5cc7f1b336733080b5f65",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "catch-error",
|
||||
"content": "---\ntitle: catchError\nuse_cases: \u003e-\n error handling, error boundaries, exception management, debugging, graceful\n error recovery\ntags:\n - errors\n - debugging\n - exceptions\n - handlers\nversion: '1.0'\ndescription: \u003e-\n Wrap SolidJS code with error handlers to catch and handle exceptions\n gracefully. Create error boundaries for robust error management in components.\n---\n\n:::note\n\u003cspan\u003eNew in v1.7.0\u003c/span\u003e\n:::\n\n```tsx\nimport { catchError } from \"solid-js\"\n\nfunction catchError\u003cT\u003e(tryFn: () =\u003e T, onError: (err: any) =\u003e void): T\n```\n\nWraps a `tryFn` with an error handler that fires if an error occurs below that point.\nOnly the nearest scope error handlers execute.\nRethrow to trigger up the line.",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/catch-error.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/reactive-utilities/catch-error.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 705,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "57b6feafaba6d58bf14858cc7c7e2d826e2dce8027c4c46058ac23eae0011e88",
|
||||
"timestamp": "2026-02-23T11:43:00.189802672+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "7a74e6c4aa1011a07330ddab",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "children",
|
||||
"content": "---\ntitle: children\nuse_cases: \u003e-\n resolving component children, normalizing JSX children, slot-like helpers,\n interacting with child content in library components\ntags:\n - components\n - children\n - jsx\n - utilities\nversion: \"1.0\"\ndescription: \u003e-\n Resolve and normalize a component's `children` prop into a stable accessor.\n Useful when you need to read or transform children imperatively inside a\n component.\n---\n\n`children` normalizes a component's `children` prop into a stable accessor that returns resolved JSX elements.\nIt accepts functions, arrays, fragments, and nested structures.\n\n## Import\n\n```ts\nimport { children } from \"solid-js\";\n```\n\n## Type\n\n```ts\nfunction children(fn: Accessor\u003cJSX.Element\u003e): ChildrenReturn;\n\ntype ChildrenReturn = Accessor\u003cResolvedChildren\u003e \u0026 {\n\ttoArray: () =\u003e ResolvedChildren[];\n};\n```\n\n## Parameters\n\n### `fn`\n\n- **Type:** `() =\u003e JSX.Element`\n- **Required:** Yes\n\nAn accessor that returns the `children` value (typically `props.children`).\n\n## Return value\n\n- **Type:** `ChildrenReturn`\n\nThe function returns a callable accessor.\nCalling it yields the resolved children, either a single element or an array.\n\n## Helpers\n\n### `toArray()`\n\n- **Type:** `() =\u003e ResolvedChildren[]`\n\n- **Description:** Returns a flattened array of resolved child elements.\n\nThis method is exposed on the returned accessor and is useful for iteration or index-based logic.\n\n## Examples\n\n### Basic usage\n\n```tsx\nfunction Wrapper(props) {\n\tconst resolved = children(() =\u003e props.children);\n\n\treturn \u003cdiv\u003e{resolved()}\u003c/div\u003e;\n}\n\n// Usage\n\u003cWrapper\u003e\n\t\u003cspan\u003eone\u003c/span\u003e\n\t\u003cspan\u003etwo\u003c/span\u003e\n\u003c/Wrapper\u003e;\n```\n\n### `.toArray()` example\n\n```tsx\nfunction List(props) {\n\tconst resolved = children(() =\u003e props.children);\n\tconst items = resolved.toArray();\n\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t{items.map((child) =\u003e (\n\t\t\t\t\u003cli\u003e{child}\u003c/li\u003e\n\t\t\t))}\n\t\t\u003c/ul\u003e\n\t);\n}\n\n// Usage\n\u003cList\u003e\n\t\u003cspan\u003eone\u003c/span\u003e\n\t\u003cspan\u003etwo\u003c/span\u003e\n\u003c/List\u003e;\n```\n\n\u003e [!NOTE]\n\u003e `children` resolves the current value of `props.children`.\n\u003e If `props.children` is reactive, the resolved accessor reflects updates.\n\n### Working with function-as-children\n\nIf `children` is a function, the helper evaluates it and returns its rendered result.\n\n```tsx\nfunction Slot(props) {\n\tconst resolved = children(() =\u003e props.children);\n\treturn \u003cdiv\u003e{resolved()}\u003c/div\u003e;\n}\n\n// Usage\n\u003cSlot\u003e{() =\u003e \u003cspan\u003edynamic\u003c/span\u003e}\u003c/Slot\u003e;\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/component-apis/children.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/component-apis/children.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2360,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "ec211c824d714d34956525702cf2e5c09325ae3e716d7594d978ec6f71091085",
|
||||
"timestamp": "2026-02-23T11:43:00.188612596+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "188e1c80ccd45df452ba3d65",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "classlist",
|
||||
"content": "---\ntitle: classList\norder: 1\nuse_cases: \u003e-\n styling components, dynamic classes, conditional styles, toggling classes,\n reactive styling\ntags:\n - styling\n - css\n - classes\n - reactive\n - conditional\n - dom\nversion: '1.0'\ndescription: \u003e-\n Manage element classes dynamically in SolidJS with class and classList\n attributes. Toggle multiple classes reactively based on application state.\n---\n\nSolid offers two attributes to set the class of an element: `class` and `classList`.\n\nFirst, `class` can be set like other attributes. For example:\n\n```tsx\n// Two static classes\n\u003cdiv class=\"active editing\" /\u003e\n\n// One dynamic class, deleting class attribute if it's not needed\n\u003cdiv class={state.active ? 'active' : undefined} /\u003e\n\n// Two dynamic classes\n\u003cdiv class={`${state.active ? 'active' : ''} ${state.currentId === row.id ? 'editing' : ''}`} /\u003e\n```\n\n:::note\n\tNote that \u003ccode\u003eclassName\u003c/code\u003e was deprecated in Solid 1.4 in favor of {\" \"}\n\t\u003ccode\u003eclass\u003c/code\u003e.\n:::\n\nAlternatively, the `classList` pseudo-attribute lets you specify an object, where each key is a class and the value is treated as a boolean representing whether to include that class. For example (matching the last example):\n\n```tsx\n\u003cdiv\n\tclassList={{\n\t\tactive: state.active,\n\t\tediting: state.currentId === row.id,\n\t}}\n/\u003e\n```\n\nThis example compiles to a render effect that dynamically calls [element.classList.toggle](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle) to turn each class on or off, only when the corresponding boolean changes. For example, when `state.active` becomes true [false], the element gains [loses] the `active` class.\n\nThe value passed into `classList` can be any expression (including a signal getter) that evaluates to an appropriate object. Some examples:\n\n```tsx\n// Dynamic class name and value\n\u003cdiv classList={{ [className()]: classOn() }} /\u003e\n\n// Signal class list\nconst [classes, setClasses] = createSignal({})\nsetClasses((c) =\u003e ({ ...c, active: true }))\n\u003cdiv classList={classes()} /\u003e\n```\n\nWhile possible, mixing `class` and `classList` in Solid can lead to unexpected behavior.\nThe safest approach is to use a static string (or nothing) for `class` and keep `classList` reactive.\nYou can also use a static computed value for class, such as `class={baseClass()}`, however you must make sure it comes before any `classList` pseudo-attributes.\nIf both `class` and `classList` are reactive, changes to `class` will overwrite the entire `class` attribute, potentially undoing any updates made by `classList`.\n\nBecause classList is a compile-time pseudo-attribute, it does not work in a prop spread like `\u003cdiv {...props} /\u003e` or in `\u003cDynamic\u003e`.",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/classlist.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/jsx-attributes/classlist.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2660,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "f2623b36c9542e1252a1228a7808b13111f3b31e51a0768da773a47e29038f94",
|
||||
"timestamp": "2026-02-23T11:43:00.189364719+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "171471127719bfb211fa8d96",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "client-only",
|
||||
"content": "---\ntitle: clientOnly\nuse_cases: \u003e-\n browser apis, window access, document manipulation, third-party widgets, maps,\n charts, avoiding ssr issues\ntags:\n - client-only\n - browser\n - ssr\n - rendering\n - components\nversion: '1.0'\ndescription: \u003e-\n Render components exclusively on the client side in SolidStart. Handle browser\n APIs and bypass SSR for specific components.\n---\n\nThe `clientOnly` function allows components or pages to render exclusively on the client side, bypassing server-side rendering (_SSR_).\nThis is useful for code that relies on the browser-specific APIs, such as `window` or `document`.\n\n## How to Use `clientOnly` in Components\n\n1. **Isolate Client-Only Logic**: Create a separate file for the component that depends on browser-specific features, such as DOM or browser APIs.\n\n ```tsx title=\"ClientOnlyComponent\"\n export default function ClientOnlyComponent() {\n const location = document.location.href;\n return \u003cdiv\u003eCurrent URL: {location}\u003c/div\u003e;\n }\n ```\n\n2. **Import with `clientOnly`**: Use `clientOnly` to dynamically import the isolated component in your parent component or page.\n\n ```tsx title=\"IsomorphicComponent.tsx\"\n import { clientOnly } from \"@solidjs/start\";\n\n const ClientOnlyComp = clientOnly(() =\u003e import(\"./ClientOnlyComponent\"));\n\n export default function IsomorphicComponent() {\n return \u003cClientOnlyComp /\u003e;\n }\n ```\n\n3. **Add a Fallback (Optional)**: Provide a `fallback` prop to display content while the client-only component is loading.\n\n ```tsx\n \u003cClientOnlyComp fallback={\u003cdiv\u003eLoading...\u003c/div\u003e} /\u003e\n ```\n\n## Disabling SSR for Entire Pages\n\nTo disable SSR for an entire page, apply `clientOnly` at the page level. This ensures the page renders only on the client.\n\n```tsx title=\"routes/page.tsx\"\nimport { clientOnly } from \"@solidjs/start\";\n\nexport default clientOnly(async () =\u003e ({ default: Page }), { lazy: true });\n\nfunction Page() {\n // This code runs only on the client\n return \u003cdiv\u003eClient-only page content\u003c/div\u003e;\n}\n```\n\n## Parameters\n\n| Argument | Type | Description |\n| --------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |\n| `fn` | `() =\u003e Promise\u003c{ default: () =\u003e JSX.Element }\u003e` | A function that dynamically imports a component to be rendered only on the client side. |\n| `options` | `{ lazy?: boolean }` | An optional object to configure loading behavior. Set `lazy: false` for eager loading |\n| `props` | `Record\u003cstring, any\u003e \u0026 { fallback?: JSX.Element }` | Props passed to the component, including an optional `fallback` for rendering while the component loads. |",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/client/client-only.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/reference/client/client-only.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2903,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "55bb15880caf8c11110183970e1f15f8730beceb03d1f52eca3d9b0619ab0915",
|
||||
"timestamp": "2026-02-23T11:43:00.194461017+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "8bfa814e4f3d1b5a5ea8a5be",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "client-setup",
|
||||
"content": "---\ntitle: Client setup\norder: 2\nuse_cases: \u003e-\n seo, meta tags, document head management, social media tags, page titles,\n canonical urls\ntags:\n - meta\n - seo\n - head\n - client\n - tags\nversion: '1.0'\ndescription: \u003e-\n Manage document head tags in Solid apps. Add titles, meta tags, and links\n dynamically for better SEO and social media sharing.\n---\n\nYou can inject a tag into the `\u003chead /\u003e` by rendering one of the head tag components when necessary.\nNo special requirements are needed on the client side.\n\n```js\nimport { MetaProvider, Title, Link, Meta } from \"@solidjs/meta\";\n\nconst App = () =\u003e (\n\t\u003cMetaProvider\u003e\n\t\t\u003cdiv class=\"Home\"\u003e\n\t\t\t\u003cTitle\u003eTitle of page\u003c/Title\u003e\n\t\t\t\u003cLink rel=\"canonical\" href=\"http://solidjs.com/\" /\u003e\n\t\t\t\u003cMeta name=\"example\" content=\"whatever\" /\u003e\n\t\t\t// ...\n\t\t\u003c/div\u003e\n\t\u003c/MetaProvider\u003e\n);\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/getting-started/client-setup.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-meta/getting-started/client-setup.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 821,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "bd8404538b4c2445e1c45430771fced87bd6cf923a9b2854b4505990ed71ae08",
|
||||
"timestamp": "2026-02-23T11:43:00.191019539+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "a99d6a20537dd20d89a2bc91",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "cloudflare",
|
||||
"content": "---\ntitle: Cloudflare\norder: 2\nmainNavExclude: true\nuse_cases: \u003e-\n static site hosting, jamstack deployment, edge deployment, cdn hosting, web\n publishing\ntags:\n - cloudflare\n - pages\n - deployment\n - wrangler\n - hosting\n - jamstack\nversion: '1.0'\ndescription: \u003e-\n Deploy Solid apps to Cloudflare Pages for fast, global edge hosting with\n built-in CDN and simple Git integration setup.\n---\n\n[Cloudflare Pages](https://pages.cloudflare.com/) is a JAMstack platform for frontend developers, where JAMstack stands for JavaScript, APIs, and Markup.\nFor additional details and features, you can [visit the Cloudflare website](https://pages.cloudflare.com/).\n\n## Using the Cloudflare's web interface\n\n1. Navigate to the [Cloudflare login page](https://dash.cloudflare.com/login) and log in or sign up.\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=UE1AFe5oESDQkepKNaMxtA\"\n\tpreview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=UE1AFe5oESDQkepKNaMxtA\u0026type=embed\"\n/\u003e\n\n2. After logging in, find \"Pages\" in the left-hand navigation bar.\n Add a new project by clicking \"Create a project,\" then choose \"Connect to Git.\"\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=XcbVyX2a69kSAP1m1220Ug\"\n\tpreview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=XcbVyX2a69kSAP1m1220Ug\u0026type=embed\"\n/\u003e\n\n3. You'll have the option to install Cloudflare Pages on all your repositories or select ones.\n Choose the repository that contains your Solid project.\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=SsbGUghc_Vwlvxefe1xAFg\"\n\tpreview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=SsbGUghc_Vwlvxefe1xAFg\u0026type=embed\"\n/\u003e\n\n4. Configure your build settings:\n\n- The project name will default to the repository name, but you can change it if you wish.\n- In the \"build command\" field, enter `npm run build` .\n- For the \"build output directory\" field, use `dist` .\n- Add an environment variable `NODE_VERSION` and set its value to the version of Node.js you're using.\n\n**Note:** This step is crucial because Cloudflare Pages uses a version of Node.js older than v13, which may not fully support Vite, the bundler used in Solid projects.\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=1HpIQUkxqNl9j3JlXIUvTg\"\n\tpreview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=1HpIQUkxqNl9j3JlXIUvTg\u0026type=embed\"\n/\u003e\n\n5. Once you've configured the settings, click \"Save and Deploy.\"\n In a few minutes, your Solid project will be live on Cloudflare Pages, accessible via a URL formatted as `project_name.pages.dev`.\n\n## Using the Wrangler CLI\n\nWrangler is a command-line tool for building Cloudflare Workers.\nHere are the steps to deploy your Solid project using Wrangler.\n\n1. Use your package manager of choice to install the Wrangler command-line tool:\n\n```package-install-global\nwrangler\n```\n\n2. Open your terminal and run the following command to log in:\n\n```bash frame=\"none\"\nwrangler login\n```\n\n3. Build your project using the following command:\n\n```package-run\nbuild\n```\n\n4. Deploy using Wrangler:\n\n```bash\nwrangler pages deploy dist\n```\n\nAfter running these commands, your project should be live.\nWhile the terminal may provide a link, it's more reliable to check your Cloudflare Pages dashboard for the deployed URL, which usually follows the format `project-name.pages.dev`.",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deployment-options/cloudflare.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/guides/deployment-options/cloudflare.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 3491,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "c0a8de6d56b19c0ebcadebd8aefe540f045c3ac94381aa137f993d078c79505e",
|
||||
"timestamp": "2026-02-23T11:43:00.187415937+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "1853b1634bbb3ba177d3aef8",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "component",
|
||||
"content": "---\ntitle: Component routing\nuse_cases: \u003e-\n defining routes, jsx routing, template-based routing, initial setup, basic\n navigation\ntags:\n - jsx\n - components\n - routing\n - setup\n - templates\nversion: '1.0'\ndescription: \u003e-\n Define routes using JSX components in SolidJS Router for intuitive,\n template-based routing in your applications.\n---\n\nIn Solid Router, routes can be defined directly in an application's template using JSX.\nThis is the most common way to define routes in Solid Router.\n\nTo define routes using JSX, the [`Route`](/solid-router/reference/components/route) is added to the [`\u003cRouter\u003e`](/solid-router/reference/components/router) component for each path you want to define:\n\n```jsx\nimport { render } from \"solid-js/web\";\nimport { Router, Route } from \"@solidjs/router\";\n\nimport Home from \"./routes/Home\";\n\nrender(\n () =\u003e (\n \u003cRouter\u003e\n \u003cRoute path=\"/\" component={Home} /\u003e\n \u003c/Router\u003e\n ),\n document.getElementById(\"app\")\n);\n```\n\nThe Route component takes a `path` prop, which is the path to match, and a `component` prop, where you pass the component (or element) to render when the path matches.\nIn the example above, the `Home` page is rendered when the user navigates to the root path `/`.\n\nTo apply multiple routes to the router, add additional `Route` components to the `Router`:\n\n```jsx\nimport { render } from \"solid-js/web\";\nimport { Router, Route } from \"@solidjs/router\";\n\nimport Home from \"./routes/index.jsx\";\nimport About from \"./routes/about.jsx\";\n\nrender(\n () =\u003e (\n \u003cRouter\u003e\n \u003cRoute path=\"/\" component={Home} /\u003e\n \u003cRoute path=\"/hello-world\" component={() =\u003e \u003ch1\u003eHello World!\u003c/h1\u003e} /\u003e\n \u003cRoute path=\"/about\" component={About} /\u003e\n \u003c/Router\u003e\n ),\n document.getElementById(\"app\")\n);\n```\n\nThis example defines three routes: the root path (`/`) which renders the `Home` page, the path `/hello-world` which renders an `h1` element, and the path `/about` which renders the `About` component.",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/getting-started/component.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-router/getting-started/component.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2009,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "5b3cca8ba62bf7c2639705c3bbaacb262da94ada47379d9a7e07f6d93260c7ac",
|
||||
"timestamp": "2026-02-23T11:43:00.192094199+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "de43c7c4aa2396d5bd9aca68",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "conditional-rendering",
|
||||
"content": "---\ntitle: Conditional rendering\norder: 1\nuse_cases: \u003e-\n showing/hiding content, loading states, error displays, user permissions,\n dynamic ui, feature toggles\ntags:\n - conditional\n - rendering\n - show\n - switch\n - match\n - ui\nversion: '1.0'\ndescription: \u003e-\n Conditionally render UI elements in Solid using Show, Switch, and Match\n components for clean, readable conditional logic.\n---\n\nConditional rendering is the process of displaying different UI elements based on certain conditions.\nThis is a common pattern in UI development, and is often used to show or hide elements based on user input, data, or other conditions.\n\nSolid offers dedicated components to handle conditional rendering in a more straightforward and readable way.\n\n## Show\n\n`\u003cShow\u003e` renders its children when a condition is evaluated to be true.\nSimilar to the [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) in JavaScript, it uses control logic flow within JSX to determine what to render.\n\n`\u003cShow\u003e` has a `when` property that is used to determine whether or not to render its children.\nWhen there is a change in the state or props it depends on, this property is re-evaluated.\nThis property can be a boolean value, or a function that returns a boolean value.\n\n```jsx\nimport { Show } from \"solid-js\"\n\n\u003cShow when={data.loading}\u003e\n \u003cdiv\u003eLoading...\u003c/div\u003e\n\u003c/Show\u003e\n```\n\n`\u003cShow\u003e` has the `fallback` property that can be used to specify the content to be rendered when the condition evaluates to false.\nThis property can return a JSX element.\n\n```jsx\nimport { Show } from \"solid-js\"\n\n\u003cShow when={!data.loading} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n\t\u003ch1\u003eHi, I am {data().name}.\u003c/h1\u003e\n\u003c/Show\u003e\n```\n\nIf there are multiple conditions that need to be handled, `\u003cShow\u003e` can be nested to handle each condition.\n\n```jsx\nimport { Show } from \"solid-js\"\n\n\u003cShow when={data.loading}\u003e\n \u003cdiv\u003eLoading...\u003c/div\u003e\n \u003cShow when={data.error}\u003e\n \u003cdiv\u003eError: {data.error}\u003c/div\u003e\n \u003c/Show\u003e\n\u003c/Show\u003e\n```\n\n## Switch and Match\n\nWhen there are multiple conditions that need to be handled, it can be difficult to manage the logic flow with nested `\u003cShow\u003e` components.\nSolid has the `\u003cSwitch\u003e` and `\u003cMatch\u003e` components for this purpose.\n\nSimilar to JavaScript's [switch/case](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) structure, `\u003cSwitch\u003e` wraps multiple `\u003cMatch\u003e` components so that each condition is evaluated _in sequence_.\nThe first `\u003cMatch\u003e` component that evaluates to true will have its children rendered, and the rest will be ignored.\n\n```jsx\nimport { Switch, Match } from \"solid-js\"\n\n\u003cSwitch\u003e\n \u003cMatch when={condition1}\u003e\n \u003cp\u003eOutcome 1\u003c/p\u003e\n \u003c/Match\u003e\n \u003cMatch when={condition2}\u003e\n \u003cp\u003eOutcome 2\u003c/p\u003e\n \u003c/Match\u003e\n\u003c/Switch\u003e\n```\n\nSimilar to `\u003cShow\u003e`, each `\u003cMatch\u003e` component has a `when` property that is used to determine whether or not to render its children.\nAn optional `fallback` property can also be passed to `\u003cSwitch\u003e` to specify the content be rendered when none of the `\u003cMatch\u003e` components evaluate to true.\n\n```jsx\nimport { Switch, Match } from \"solid-js\"\n\n\u003cSwitch fallback={\u003cp\u003eFallback content\u003c/p\u003e}\u003e\n\t\u003cMatch when={condition1}\u003e\n\t\t\u003cp\u003eOutcome 1\u003c/p\u003e\n\t\u003c/Match\u003e\n\t\u003cMatch when={condition2}\u003e\n\t\t\u003cp\u003eOutcome 2\u003c/p\u003e\n\t\u003c/Match\u003e\n\u003c/Switch\u003e\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/control-flow/conditional-rendering.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/concepts/control-flow/conditional-rendering.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 3300,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "46d373526c6e98deed65f13650a19c7e64d7562875e134e5053e5e358b0eaf91",
|
||||
"timestamp": "2026-02-23T11:43:00.186515604+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "77c820358b816857eedaa7b8",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "config",
|
||||
"content": "---\ntitle: Config-based routing\nuse_cases: \u003e-\n centralized routing, lazy loading, config-based setup, dynamic imports,\n performance optimization\ntags:\n - config\n - lazy-loading\n - routing\n - performance\n - setup\nversion: '1.0'\ndescription: \u003e-\n Configure SolidJS routes with config objects for centralized routing, lazy\n loading, and optimized performance.\n---\n\nSolid Router supports config-based routing, which offers the same capabilities as [component routing](/solid-router/getting-started/component).\nThe decision to use config-based routing over component routing depends largely on personal preference.\n\nTo define a single route, a route definition object can be passed to the [`\u003cRouter\u003e`](/solid-router/reference/components/router) component:\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Router } from \"@solidjs/router\";\n\nconst routes = {\n path: \"/\",\n component: lazy(() =\u003e import(\"/routes/index.js\")),\n}\n\nrender(() =\u003e \u003cRouter\u003e{routes}\u003c/Router\u003e, document.getElementById(\"app\"));\n```\n\nIn the route definition object, a `path` property must be provided to define the path to match and a `component` property that specifies the component (or element) to render when the path matches.\n\nTo define multiple routes, an array of route definition objects can be passed to the `\u003cRouter\u003e` component:\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Router } from \"@solidjs/router\";\n\nconst routes = [\n {\n path: \"/\",\n component: lazy(() =\u003e import(\"/routes/index.js\")),\n },\n {\n path: \"/hello-world\",\n component: () =\u003e \u003ch1\u003eHello, World!\u003c/h1\u003e\n },\n {\n path: \"/about\",\n component: lazy(() =\u003e import(\"/routes/about.js\")),\n }\n]\n\nrender(() =\u003e \u003cRouter\u003e{routes}\u003c/Router\u003e, document.getElementById(\"app\"));\n```\n\nEach path in the array of route definition objects will be matched against the current URL, and the corresponding component will be rendered when a match is found.\nIn the example above, the root path (`/`) renders the `Home` page, the path `/hello-world` renders an `h1` element, and the path `/about` renders the `About` component.\n\n:::note[Lazy Loading]\nWhen using configuration-based routing, it is best practice to use the [`lazy`](/reference/component-apis/lazy) component to load components asynchronously.\nThis will help improve the performance of your application by only loading the components when they are needed.\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Router } from \"@solidjs/router\";\n\nconst routes = [\n {\n path: \"/\",\n component: lazy(() =\u003e import(\"/routes/index.js\")),\n },\n {\n path: \"/hello-world\",\n component: () =\u003e \u003ch1\u003eHello, World!\u003c/h1\u003e\n },\n {\n path: \"/about\",\n component: lazy(() =\u003e import(\"/routes/about.js\")),\n }\n]\n\nrender(() =\u003e \u003cRouter\u003e{routes}\u003c/Router\u003e, document.getElementById(\"app\"));\n```\n\nTo learn more about lazy loading, see the page on [lazy loading components](/solid-router/advanced-concepts/lazy-loading).\n:::",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/getting-started/config.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-router/getting-started/config.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 3106,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "1eefae6b6a1ae1d8e04c3e023897ee5e6c3673c49c62b2a0fb451066d9ae1701",
|
||||
"timestamp": "2026-02-23T11:43:00.192133403+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "ad3277f87472a764a5eb7075",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-async-store",
|
||||
"content": "---\ntitle: createAsyncStore\nuse_cases: \u003e-\n large datasets, reactive stores, model data, fine-grained updates, complex\n state\ntags:\n - async\n - stores\n - reactive\n - data-fetching\n - state\nversion: '1.0'\ndescription: \u003e-\n Create deeply reactive stores from async data sources for fine-grained updates\n on large datasets and complex model structures.\n---\n\nThe `createAsyncStore` primitive manages asynchronous data fetching by tracking the result of a promise-returning function in a [store](/concepts/stores).\n\nThe main difference from [createAsync](/solid-router/reference/data-apis/create-async) is its use of reconciliation: when new data arrives, it intelligently merges with the existing store, updating only changed fields while preserving unchanged state.\n\n## Import\n\n```tsx\nimport { createAsyncStore } from \"@solidjs/router\";\n```\n\n## Type\n\n```tsx\nfunction createAsyncStore\u003cT\u003e(\n fn: (prev: T) =\u003e Promise\u003cT\u003e,\n options: {\n name?: string;\n initialValue: T;\n deferStream?: boolean;\n reconcile?: ReconcileOptions;\n }\n): AccessorWithLatest\u003cT\u003e;\n\nfunction createAsyncStore\u003cT\u003e(\n fn: (prev: T | undefined) =\u003e Promise\u003cT\u003e,\n options?: {\n name?: string;\n initialValue?: T;\n deferStream?: boolean;\n reconcile?: ReconcileOptions;\n }\n): AccessorWithLatest\u003cT | undefined\u003e;\n```\n\n## Parameters\n\n### `fetcher`\n\n- **Type:** `(prev: T | undefined) =\u003e Promise\u003cT\u003e`\n- **Required:** Yes\n\nAn asynchronous function or a function that returns a `Promise`.\nThe resolved value of this `Promise` is what `createAsyncStore` tracks.\nThis function is reactive and will automatically re-execute if any of its dependencies change.\n\n### `options`\n\n- **Type:** `{ name?: string; initialValue?: T; deferStream?: boolean; reconcile?: ReconcileOptions; }`\n- **Required:** No\n\nAn object for configuring the primitive.\nIt has the following properties.\n\n#### `name`\n\n- **Type:** `string`\n- **Required:** No\n\nA name for the resource, used for identification in debugging tools like [Solid Debugger](https://github.com/thetarnav/solid-devtools).\n\n#### `initialValue`\n\n- **Type:** `T`\n- **Required:** No\n\nThe initial value of the returned store before the fetcher resolves.\n\n#### `deferStream`\n\n- **Type:** `boolean`\n- **Required:** No\n\nIf `true`, [streaming](/solid-router/data-fetching/streaming) will be deferred until the resource has resolved.\n\n#### `reconcile`\n\n- **Type:** `ReconcileOptions`\n- **Required:** No\n\n[Options](/reference/store-utilities/reconcile#options) passed directly to the `reconcile` function.\nIt controls how new data is merged with the existing store.\n\n## Return value\n\n`createAsyncStore` returns a derived signal that contains the resolved value of the fetcher as a store.\n\nWhile the fetcher is executing for the first time, unless an `initialValue` is specified, the store's value is `undefined`.\n\n## Examples\n\n### Basic usage\n\n```tsx\nimport { For, createSignal } from \"solid-js\";\nimport { createAsyncStore, query } from \"@solidjs/router\";\n\nconst getNotificationsQuery = query(async (unreadOnly: boolean) =\u003e {\n\t// ... Fetches the list of notifications from the server.\n}, \"notifications\");\n\nfunction Notifications() {\n\tconst [unreadOnly, setUnreadOnly] = createSignal(false);\n\tconst notifications = createAsyncStore(() =\u003e\n\t\tgetNotificationsQuery(unreadOnly())\n\t);\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cbutton onClick={() =\u003e setUnreadOnly(!unreadOnly())}\u003e\n\t\t\t\tToggle unread\n\t\t\t\u003c/button\u003e\n\t\t\t\u003cul\u003e\n\t\t\t\t\u003cFor each={notifications()}\u003e\n\t\t\t\t\t{(notification) =\u003e (\n\t\t\t\t\t\t\u003cli\u003e\n\t\t\t\t\t\t\t\u003cdiv\u003e{notification.message}\u003c/div\u003e\n\t\t\t\t\t\t\t\u003cdiv\u003e{notification.user.name}\u003c/div\u003e\n\t\t\t\t\t\t\u003c/li\u003e\n\t\t\t\t\t)}\n\t\t\t\t\u003c/For\u003e\n\t\t\t\u003c/ul\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/create-async-store.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-router/reference/data-apis/create-async-store.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 3617,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "0ed592b0753c0f9fdeabc4b7ec2d436b65cfe324f425a17f2252212b2f202212",
|
||||
"timestamp": "2026-02-23T11:43:00.19263741+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "d541b637f76c855844cdf477",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-async",
|
||||
"content": "---\ntitle: createAsync\nuse_cases: \u003e-\n data fetching, async operations, suspense boundaries, loading states, api\n calls, ssr data\ntags:\n - async\n - suspense\n - data-fetching\n - loading\n - promises\n - ssr\nversion: \"1.0\"\ndescription: \u003e-\n Transform promises into reactive signals with createAsync. Handle async data\n with Suspense and automatic loading states.\n---\n\nThe `createAsync` primitive manages asynchronous data fetching by tracking the result of a promise-returning function.\n\n:::note\n`createAsync` is currently a thin wrapper over `createResource`.\nWhile `createResource` offers similar functionality, **`createAsync` is the recommended primitive for most asynchronous data fetching**.\nIt is intended to be the standard async primitive in a future Solid 2.0 release.\n:::\n\n## Import\n\n```tsx\nimport { createAsync } from \"@solidjs/router\";\n```\n\n## Type\n\n```tsx\nfunction createAsync\u003cT\u003e(\n\tfn: (prev: T) =\u003e Promise\u003cT\u003e,\n\toptions: {\n\t\tname?: string;\n\t\tinitialValue: T;\n\t\tdeferStream?: boolean;\n\t}\n): AccessorWithLatest\u003cT\u003e;\n\nfunction createAsync\u003cT\u003e(\n\tfn: (prev: T | undefined) =\u003e Promise\u003cT\u003e,\n\toptions?: {\n\t\tname?: string;\n\t\tinitialValue?: T;\n\t\tdeferStream?: boolean;\n\t}\n): AccessorWithLatest\u003cT | undefined\u003e;\n```\n\n## Parameters\n\n### `fetcher`\n\n- **Type:** `(prev: T | undefined) =\u003e Promise\u003cT\u003e`\n- **Required:** Yes\n\nAn asynchronous function or a function that returns a `Promise`.\nThe resolved value of this `Promise` is what `createAsync` tracks.\nThis function is reactive and will automatically re-execute if any of its dependencies change.\n\n### `options`\n\n- **Type:** `{ name?: string; initialValue?: T; deferStream?: boolean; }`\n- **Required:** No\n\nAn object for configuring the primitive.\nIt has the following properties:\n\n#### `name`\n\n- **Type:** `string`\n- **Required:** No\n\nA name for the resource, used for identification in debugging tools like [Solid Debugger](https://github.com/thetarnav/solid-devtools).\n\n#### `initialValue`\n\n- **Type:** `T`\n- **Required:** No\n\nThe initial value of the returned signal before the fetcher finishes executing.\n\n#### `deferStream`\n\n- **Type:** `boolean`\n- **Required:** No\n\nIf `true`, [streaming](/solid-router/data-fetching/streaming) will be deferred until the fetcher finishes executing.\n\n## Return value\n\n`createAsync` returns a derived signal that contains the resolved value of the fetcher.\n\nWhile the fetcher is executing for the first time, unless an `initialValue` is specified, the signal's value is `undefined`.\n\n## Examples\n\n### Basic usage\n\n```tsx\nimport { createAsync, query } from \"@solidjs/router\";\n\nconst getCurrentUser = query(async () =\u003e {\n\t// ... Fetches the current authenticated user from the server.\n}, \"currentUser\");\n\nfunction UserProfile() {\n\tconst user = createAsync(() =\u003e getCurrentUser());\n\n\treturn \u003cdiv\u003e{user()?.name}\u003c/div\u003e;\n}\n```\n\n### With parameter\n\n```tsx\nimport { createAsync, query } from \"@solidjs/router\";\n\nconst getInvoiceQuery = query(async (invoiceId: string) =\u003e {\n\t// ... Fetches the invoice details from the server.\n}, \"invoice\");\n\nfunction InvoiceDetails(props: { invoiceId: string }) {\n\tconst invoice = createAsync(() =\u003e getInvoiceQuery(props.invoiceId));\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch2\u003eInvoice #{invoice()?.number}\u003c/h2\u003e\n\t\t\t\u003cp\u003eTotal: ${invoice()?.total}\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n### With error handling and pending state\n\n```tsx\nimport { createAsync, query } from \"@solidjs/router\";\nimport { Suspense, ErrorBoundary, For } from \"solid-js\";\n\nconst getAllRecipesQuery = query(async () =\u003e {\n\t// ... Fetches the recipes from the server and throws an error if an issue occurred.\n}, \"recipes\");\n\nfunction Recipes() {\n\tconst recipes = createAsync(() =\u003e getAllRecipesQuery());\n\n\treturn (\n\t\t\u003cErrorBoundary fallback={\u003cp\u003eCouldn't fetch any recipes!\u003c/p\u003e}\u003e\n\t\t\t\u003cSuspense fallback={\u003cp\u003eFetching recipes...\u003c/p\u003e}\u003e\n\t\t\t\t\u003cFor each={recipes()}\u003e\n\t\t\t\t\t{(recipe) =\u003e (\n\t\t\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\t\t\t\u003ch3\u003e{recipe.name}\u003c/h3\u003e\n\t\t\t\t\t\t\t\u003cp\u003eCook time: {recipe.time}\u003c/p\u003e\n\t\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t)}\n\t\t\t\t\u003c/For\u003e\n\t\t\t\u003c/Suspense\u003e\n\t\t\u003c/ErrorBoundary\u003e\n\t);\n}\n```\n\n## Related\n\n- [`query`](/solid-router/reference/data-apis/query)\n- [`\u003cSuspense\u003e`](/reference/components/suspense)\n- [`\u003cErrorBoundary\u003e`](/reference/components/error-boundary)",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/create-async.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-router/reference/data-apis/create-async.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 4163,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "8eadcf28a1b2d3de9057a4dc2cb8d3fe8a9bd03d5d1ba346f10aaba2b4456458",
|
||||
"timestamp": "2026-02-23T11:43:00.192676694+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "1a77e939d244345772133842",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-computed",
|
||||
"content": "---\ntitle: createComputed\nuse_cases: \u003e-\n immediate reactivity, building primitives, side effects with dependencies,\n reactive updates, custom reactive patterns\ntags:\n - reactivity\n - computation\n - primitives\n - effects\n - tracking\nversion: \"1.0\"\ndescription: \u003e-\n Create immediate reactive computations with createComputed. Build custom\n primitives and handle side effects that respond to dependencies.\n---\n\nThe `createComputed` function creates a reactive computation that runs _before_ the rendering phase.\nIt is primarily used to synchronize state before rendering begins.\n\n## Import\n\n```ts\nimport { createComputed } from \"solid-js\";\n```\n\n## Type\n\n```ts\nfunction createComputed\u003cNext\u003e(\n\tfn: EffectFunction\u003cundefined | NoInfer\u003cNext\u003e, Next\u003e\n): void;\nfunction createComputed\u003cNext, Init = Next\u003e(\n\tfn: EffectFunction\u003cInit | Next, Next\u003e,\n\tvalue: Init,\n\toptions?: { name?: string }\n): void;\nfunction createComputed\u003cNext, Init\u003e(\n\tfn: EffectFunction\u003cInit | Next, Next\u003e,\n\tvalue?: Init,\n\toptions?: { name?: string }\n): void;\n```\n\n## Parameters\n\n### `fn`\n\n- **Type:** `EffectFunction\u003cundefined | NoInfer\u003cNext\u003e, Next\u003e | EffectFunction\u003cInit | Next, Next\u003e`\n- **Required:** Yes\n\nThe function that performs the computation.\nIt executes immediately to track dependencies and re-runs whenever a dependency changes.\n\nIt receives the value returned from the previous execution as its argument.\nOn the initial execution, it receives the [`value`](#value) parameter (if provided) or `undefined`.\n\n### `value`\n\n- **Type:** `Init`\n- **Required:** No\n\nThe initial value passed to `fn` on its first execution.\n\n### `options`\n\n- **Type:** `{ name?: string }`\n- **Required:** No\n\nAn optional configuration object with the following properties:\n\n#### `name`\n\n- **Type:** `string`\n- **Required:** No\n\nA debug name for the computation.\nIt is used for identification in debugging tools like the [Solid Debugger](https://github.com/thetarnav/solid-devtools).\n\n## Return value\n\n- **Type:** `void`\n\n`createComputed` does not return a value.\n\n## Examples\n\n### Basic usage\n\n```tsx\nimport { createComputed } from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\n\ntype User = {\n\tname?: string;\n};\n\ntype UserEditorProps = {\n\tuser: User;\n};\n\nfunction UserEditor(props: UserEditorProps) {\n\tconst [formData, setFormData] = createStore\u003cUser\u003e({\n\t\tname: \"\",\n\t});\n\n\t// Update the store synchronously when props change.\n\t// This prevents a second render cycle.\n\tcreateComputed(() =\u003e {\n\t\tsetFormData(\"name\", props.user.name);\n\t});\n\n\treturn (\n\t\t\u003cform\u003e\n\t\t\t\u003ch1\u003eEditing: {formData.name}\u003c/h1\u003e\n\t\t\t\u003cinput\n\t\t\t\tvalue={formData.name}\n\t\t\t\tonInput={(e) =\u003e setFormData(\"name\", e.currentTarget.value)}\n\t\t\t/\u003e\n\t\t\u003c/form\u003e\n\t);\n}\n```\n\n## Related\n\n- [`createMemo`](/reference/basic-reactivity/create-memo)\n- [`createRenderEffect`](/reference/secondary-primitives/create-render-effect)",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/secondary-primitives/create-computed.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/secondary-primitives/create-computed.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2834,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "37d216b7ce647893191be65ef19916ed67c96521c9723cb0e3235d27eee57a19",
|
||||
"timestamp": "2026-02-23T11:43:00.190524429+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "f9b5a16cefb4e0d6b77ebf73",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-context",
|
||||
"content": "---\ntitle: createContext\norder: 5\nuse_cases: \u003e-\n prop drilling, global state, theme providers, user authentication, app-wide\n settings, dependency injection\ntags:\n - context\n - providers\n - global-state\n - props\n - dependency-injection\nversion: '1.0'\ndescription: \u003e-\n Create context providers with createContext to share data across components\n without prop drilling. Perfect for themes, auth, and global app state.\n---\n\nContext provides a form of dependency injection in Solid.\nIt is used to save from needing to pass data as props through intermediate components (aka **prop drilling**).\nThis function creates a new context object that can be used with [useContext](/reference/component-apis/use-context) and offers the Provider control flow.\nThe default value is used when no Provider is found above in the hierarchy.\n\n## Usage\n\nTo avoid reinstatiating a new context when Hot-Module Replacement (HMR) occurs, it is recommended to use `createContext` in its own module (file).\n\n:::danger[Hot-Module Replacement]\nWhen using HMR, the context is lost when the module is reloaded.\nWhich will cause an error to be thrown as `useContext` will try to access it while it is still reloading.\n:::\n\nFor example:\n\n```ts title=\"/context/counter.ts\"\nimport { createContext } from \"solid-js\";\n\nexport const INITIAL_COUNT = 0;\n\nconst INITIAL_STORE_SETTER = {\n\tincrement: () =\u003e {},\n\tdecrement: () =\u003e {}\n};\n\nexport const CounterContext = createContext([\n\t{ count: INITIAL_COUNT },\n\tINITIAL_STORE_SETTER\n]);\n```\n\nWith the context created in its own module, you can use to instantiate the context provider.\n\n```ts title=\"/context/counter-component.tsx\"\nimport { createStore } from 'solid-js/store';\nimport { CounterContext, INITIAL_COUNT } from \"./counter.ts\";\n\nexport function CounterProvider(props) {\n const [value, setValue] = createStore({ count: props.initialCount || INITIAL_COUNT })\n\n const counter = [\n value,\n {\n increment() {\n setValue(\"count\", currentCount =\u003e currentCount + 1)\n },\n decrement() {\n setValue(\"count\", currentCount =\u003e currentCount - 1)\n },\n },\n ]\n\n return (\n \u003cCounterContext.Provider value={counter}\u003e\n {props.children}\n \u003c/CounterContext.Provider\u003e\n )\n}\n```\n\nA few imporant notes on how to pass data through the context API:\n\n- The value passed to provider is passed to `useContext` as is.\n- Wrapping as a reactive expression will not work.\n- You should pass in Signals and Stores directly instead of accessing them in the JSX.\n\nTo learn how to consume the context, see the [useContext](/reference/component-apis/use-context) documentation and the [Context concepts entry](/concepts/context).\n\n## Default Values\n\n`createContext()` takes an optional \"default value\" as an argument.\nIf `useContext` is called and there is no corresponding context provider above it in the component hierarchy, then the value passed as `defaultValue` is returned.\n\nHowever, if no `defaultValue` was passed, then `undefined` is returned in this case.\nAlso, `defaultValue` (or `undefined`) is returned if `useContext` is called inside an event callback, as it is then outside of the component hierarchy.\n\nThis has implications for TS.\nIf no `defaultValue` is passed, then it is possible that `useContext()` will return `undefined`, and the types reflect this.\n\nAnother (used in the example in the previous section) is provide a default value to `createContext()`.\nIn that case, `useContext()` will always return a value, and therefore TS will not complain either.\nThe pitfall with this approach is that if you _unintentionally_ use `useContext` outside of a provider, it may not be immediately apparent, because the context is still providing a valid value.\nTherefore, if you expect to always use `useContext` within a provider, it is best to use the error based approach described above.\n\n## Type signature\n\n```ts\ninterface Context\u003cT\u003e {\n\tid: symbol\n\tProvider: (props: { value: T; children: any }) =\u003e any\n\tdefaultValue: T\n}\n\nfunction createContext\u003cT\u003e(defaultValue?: T): Context\u003cT | undefined\u003e\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/component-apis/create-context.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/component-apis/create-context.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 4139,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "e321aead2c2440fe047efdd8223b2f67758e970c6b94ea3cbfc0c0d05e283a69",
|
||||
"timestamp": "2026-02-23T11:43:00.188643674+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "c161456355ba0abce0a55614",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-deferred",
|
||||
"content": "---\ntitle: createDeferred\nuse_cases: \u003e-\n performance optimization, idle updates, non-critical ui updates, debouncing\n changes, reducing re-renders\ntags:\n - performance\n - optimization\n - deferred\n - idle\n - updates\nversion: '1.0'\ndescription: \u003e-\n Defer reactive updates until browser idle with createDeferred. Optimize\n performance by batching non-critical changes with timeout control.\n---\n\n```ts\nimport { createDeferred } from \"solid-js\"\n\nfunction createDeferred\u003cT\u003e(\n\tsource: () =\u003e T,\n\toptions?: {\n\t\ttimeoutMs?: number\n\t\tequals?: false | ((prev: T, next: T) =\u003e boolean)\n\t\tname?: string\n\t}\n): () =\u003e T\n\n```\n\nCreates a readonly that only notifies downstream changes when the browser is idle.\n`timeoutMs` is the maximum time to wait before forcing the update.\n\n## Options\n\n| Name | Type | Description |\n| --------- | ------------------------------------------ | ------------------------------------------------------ |\n| timeoutMs | `number` | The maximum time to wait before forcing the update. |\n| equals | `false or ((prev: T, next: T) =\u003e boolean)` | A function that returns true if the value has changed. |\n| name | `string` | The name of the readonly. |",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/secondary-primitives/create-deferred.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/secondary-primitives/create-deferred.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1362,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "5e7695c0f25de6988dccf95c3fdbe0625b531edd7c0387ba95b351ae2ecf7408",
|
||||
"timestamp": "2026-02-23T11:43:00.190554565+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "f57f946011b9b0354c6543d5",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-handler",
|
||||
"content": "---\ntitle: createHandler\nuse_cases: \u003e-\n ssr mode configuration, server startup, streaming setup, async rendering,\n performance tuning\ntags:\n - handler\n - ssr\n - server\n - streaming\n - async\n - rendering\nversion: '1.0'\ndescription: \u003e-\n Configure server-side rendering modes in SolidStart. Choose between sync,\n async, or streaming SSR for optimal performance and UX.\n---\n\nThe `createHandler` is used to start the server in [`entry-server.tsx`](/solid-start/reference/entrypoints/entry-server).\nIt takes a function that returns a static document (often created with [`\u003cStartServer\u003e`](/solid-start/reference/server/start-server)), and serves it using one of the three function for server side rendering (SSR):\n\n- [`renderToString`](/reference/rendering/render-to-string) - \"sync\"\n- [`renderToStringAsync`](/reference/rendering/render-to-string-async) - \"async\"\n- [`renderToStream`](/reference/rendering/render-to-stream) - \"stream\"\n\nThe SSR mode can be configured through the `mode` property on the options object:\n\n```tsx\nimport { createHandler, StartServer } from \"@solidjs/start/server\";\n\nexport default createHandler(() =\u003e (\n \u003cStartServer document={...}\n /\u003e\n), {\n mode: \"async\"\n});\n```\n\n## Parameters\n\n| Argument | Type | Default | Description |\n| ------------ | ------------------------ | -------- | ----------------------------------------------------------------- |\n| fn | fn: (context: PageEvent) | | A function that returns the static document for your application. |\n| options.mode | string | \"stream\" | The SSR mode. Options are 'sync', 'async' and 'stream'. |",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/server/create-handler.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/reference/server/create-handler.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1708,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "192bebbb484676fdade65ade677a22ec58193c309a0391944d2ecf92e2563f71",
|
||||
"timestamp": "2026-02-23T11:43:00.195108103+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "a09434b760fe98889f5a37cc",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-middleware",
|
||||
"content": "---\ntitle: createMiddleware\nuse_cases: \u003e-\n request interception, logging, authentication checks, cors setup, response\n modification, api middleware\ntags:\n - middleware\n - request\n - response\n - lifecycle\n - interceptor\n - hooks\nversion: '1.0'\ndescription: \u003e-\n Add middleware to SolidStart request lifecycle. Intercept requests and\n responses for logging, auth, CORS, and custom processing.\n---\n\n`createMiddleware` creates a configuration object for SolidStart that specifies when middleware functions are executed during the request lifecycle.\n\nThere are two lifecycle events available: `onRequest` and `onBeforeResponse`.\n\n- The `onRequest` event is triggered at the beginning of the request lifecycle, before the request is handled by the route handler.\n- The `onBeforeResponse` event is triggered after a request has been processed by the route handler but before the response is sent to the client.\n\n:::note\nSolidStart will only execute the middleware functions if the path to the middleware file is configured within `app.config.ts` using the `middleware` option.\nThis file must export the configuration using `export default`.\n:::\n\nLearn more about middleware in the [Middleware documentation](/solid-start/advanced/middleware).\n\n## Parameters\n\n`createMiddleware` takes an object with the following keys:\n\n- `onRequest` (optional): A middleware function or an array of functions to execute at the `onRequest` event.\n If an array is provided, the middleware functions will be executed one by one, in the order they appear in the array.\n- `onBeforeResponse` (optional): A middleware function or an array of functions to execute at the `onBeforeResponse` event.\n If an array is provided, the middleware functions will be executed one by one, in the order they appear in the array.\n\n## Example\n\n```ts title=\"src/middleware/index.ts\"\nimport { createMiddleware } from \"@solidjs/start/middleware\";\n\nexport default createMiddleware({\n\tonRequest: (event) =\u003e {\n\t\tconsole.log(\"Request received:\", event.request.url);\n\t},\n\tonBeforeResponse: (event) =\u003e {\n\t\tconsole.log(\"Sending response:\", event.response.status);\n\t},\n});\n```\n\n```ts title=\"app.config.ts\"\nimport { defineConfig } from \"@solidjs/start/config\";\n\nexport default defineConfig({\n\tmiddleware: \"src/middleware/index.ts\",\n});\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/server/create-middleware.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/reference/server/create-middleware.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2293,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "88d65231f6d4125c482c0f00867b90c8c7124aeffb5af57ff8ae97ec624e1df6",
|
||||
"timestamp": "2026-02-23T11:43:00.195152216+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "062f678266c330dda5494744",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-mutable",
|
||||
"content": "---\ntitle: createMutable\nuse_cases: \u003e-\n mobx migration, vue compatibility, external system integration, mutable state\n patterns, proxy-based reactivity\ntags:\n - store\n - mutable\n - proxy\n - state\n - compatibility\nversion: '1.0'\ndescription: \u003e-\n Create mutable proxy stores with automatic deep tracking. Ideal for MobX/Vue\n compatibility or integrating external mutable systems.\n---\n\n`createMutable` creates a new mutable Store proxy object that provides a way to selectively trigger updates only when values change.\n\nBy intercepting property access, it allows automatic tracking of deep nesting via proxy making it useful for integrating external systems or serving as a compatibility layer with frameworks like MobX or Vue.\n\n```tsx\nimport { createMutable } from \"solid-js/store\"\nimport type { Store, StoreNode } from \"solid-js/store\"\n\nfunction createMutable\u003cT extends StoreNode\u003e(state: T | Store\u003cT\u003e): Store\u003cT\u003e;\n```\n\n:::note\n\tIt's important to recognize that a mutable state, which can be passed around and modified anywhere, may complicate the code structure and increase the risk of breaking unidirectional flow.\n\n\tFor a more robust alternative, it is generally recommended to use `createStore` instead.\n\tAdditionally, the [`produce`](/reference/store-utilities/produce) utility can provide many of these same benefits without the associated downsides.\n:::\n\n```tsx\nimport { createMutable } from \"solid-js/store\"\n\nconst state = createMutable({\n\tsomeValue: 0,\n\tlist: [],\n});\n\n// read value\nstate.someValue;\n\n// set value\nstate.someValue = 5;\n\nstate.list.push(anotherValue);\n```\n\nMutables support setters along with getters.\n\n```tsx\nconst user = createMutable({\n\tfirstName: \"John\",\n\tlastName: \"Smith\",\n\tget fullName() {\n\t\treturn `${this.firstName} ${this.lastName}`;\n\t},\n\tset setFullName(value) {\n\t\t[this.firstName, this.lastName] = value.split(\" \");\n\t},\n});\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/store-utilities/create-mutable.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/store-utilities/create-mutable.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1871,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "676abb2f203a5ecc0e252c2130eddd20c28546153cff88addc7ff702b73a64ef",
|
||||
"timestamp": "2026-02-23T11:43:00.190779929+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "67981896ec63617a429becd3",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-reaction",
|
||||
"content": "---\ntitle: createReaction\nuse_cases: \u003e-\n custom tracking logic, one-time reactions, separating tracking from execution,\n advanced reactive patterns\ntags:\n - reactivity\n - tracking\n - custom\n - effects\n - advanced\nversion: '1.0'\ndescription: \u003e-\n Separate tracking from execution with createReaction. Create one-time reactive\n side effects that run on first dependency change only.\n---\n\n```ts\nimport { createReaction } from \"solid-js\"\n\nfunction createReaction(onInvalidate: () =\u003e void): (fn: () =\u003e void) =\u003e void\n\n```\n\nSometimes it is useful to separate tracking from re-execution.\nThis primitive registers a side effect that is run the first time the expression wrapped by the returned tracking function is notified of a change.\n\n```ts\nconst [s, set] = createSignal(\"start\")\n\nconst track = createReaction(() =\u003e console.log(\"something\"))\n\n// run the reaction next time `s` changes.\ntrack(() =\u003e s())\n\nset(\"end\") // \"something\"\n\nset(\"final\") // no-op since the reaction only runs on the first update, need to call `track` again.\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/secondary-primitives/create-reaction.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/secondary-primitives/create-reaction.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1038,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "ff59d24e0a0ccc5d54212062e0a36b8d5596c3eff156830c38bab4f890891d35",
|
||||
"timestamp": "2026-02-23T11:43:00.19060486+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "c226a46911b30c930f2bdb96",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-root",
|
||||
"content": "---\ntitle: createRoot\nuse_cases: \u003e-\n memory management, nested tracking scopes, non-auto-disposing scopes, manual\n cleanup control, top-level code wrapping\ntags:\n - roots\n - memory\n - scopes\n - disposal\n - tracking\nversion: \"1.0\"\ndescription: \u003e-\n Create non-tracked owner scopes in SolidJS for manual memory management.\n Essential for nested tracking scopes and preventing auto-disposal.\n---\n\nThe `createRoot` function creates a new owned context, which requires explicit disposal of computations it owns.\n\n## Import\n\n```ts\nimport { createRoot } from \"solid-js\";\n```\n\n## Type\n\n```ts\nfunction createRoot\u003cT\u003e(\n\tfn: (dispose: () =\u003e void) =\u003e T,\n\tdetachedOwner?: Owner\n): T;\n```\n\n## Parameters\n\n### `fn`\n\n- **Type:** `(dispose: () =\u003e void) =\u003e T`\n- **Required:** Yes\n\nThe function executes within a newly created owned context.\nThe computations created within this function are managed by the root and will only be disposed of when the provided `dispose` function is called.\n\nIf a function is passed without a `dispose` parameter, an unowned root is created.\nIn this case, the computations are not managed for disposal, which may lead to memory leaks.\n\nThis function itself does not track dependencies and only runs once.\n\n### `detachedOwner`\n\n- **Type:** `Owner`\n- **Required:** No\n\nAn optional owner that establishes the root's position in the ownership hierarchy.\nWhen provided, the root becomes owned by this owner and inherits its contextual state (such as [contexts](/concepts/context)).\n\n## Return Value\n\n`createRoot` returns the value returned by the `fn` function.\n\n## Examples\n\n### Basic Usage\n\n```ts\nimport { createSignal, createEffect, createRoot } from \"solid-js\";\n\nfunction createCounter(initial = 0) {\n\tconst [count, setCount] = createSignal(initial);\n\n\tcreateEffect(() =\u003e {\n\t\tconsole.log(`Count changed, new value: ${count()}`);\n\t});\n\n\tfunction increment() {\n\t\tsetCount((c) =\u003e c + 1);\n\t}\n\n\tfunction reset() {\n\t\tsetCount(initial);\n\t}\n\n\treturn { count, increment, reset };\n}\n\ntest(\"createCounter works correctly\", () =\u003e {\n\tcreateRoot((dispose) =\u003e {\n\t\tconst { count, increment, reset } = createCounter(10);\n\n\t\texpect(count()).toBe(10);\n\t\tincrement();\n\t\texpect(count()).toBe(11);\n\t\treset();\n\t\texpect(count()).toBe(10);\n\n\t\tdispose();\n\t});\n});\n```\n\n### Returning Values\n\n```ts\nimport { createRoot, createSignal, onCleanup } from \"solid-js\";\n\nconst counter = createRoot((dispose) =\u003e {\n\tconst [count, setCount] = createSignal(0);\n\n\tonCleanup(() =\u003e {\n\t\tconsole.log(\"Dispose was called!\");\n\t});\n\n\treturn {\n\t\tvalue: count,\n\t\tincrement: () =\u003e setCount((c) =\u003e c + 1),\n\t\tdispose,\n\t};\n});\n\nconsole.log(counter.value()); // 0\ncounter.increment();\nconsole.log(counter.value()); // 1\ncounter.dispose(); // Logs \"Dispose was called!\"\n```\n\n## Related\n\n- [`render`](/reference/rendering/render)",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/create-root.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/reactive-utilities/create-root.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2792,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "3fe1874fc54a969e96c787156eb0b6388617e93a6caf944d610883f9098db7e2",
|
||||
"timestamp": "2026-02-23T11:43:00.189839481+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "7b0801b2ec325d4fc442e840",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-selector",
|
||||
"content": "---\ntitle: createSelector\nuse_cases: \u003e-\n selection states, active items, dropdown menus, tab navigation, list\n highlighting, performance optimization\ntags:\n - reactivity\n - performance\n - selection\n - ui-state\n - optimization\nversion: '1.0'\ndescription: \u003e-\n Optimize selection state with createSelector. Reduce DOM updates from n to 2\n when tracking active items in lists, tabs, or dropdowns.\n---\n\n```ts\nimport { createSelector } from \"solid-js\"\n\nfunction createSelector\u003cT, U\u003e(\n\tsource: () =\u003e T,\n\tfn?: (a: U, b: T) =\u003e boolean\n): (key: U) =\u003e boolean\n```\n\nCreates a parameterized derived boolean signal `selector(key)` that indicates\nwhether `key` is equal to the current value of the `source` signal.\nThese signals are optimized to notify each subscriber only when their `key`\nstarts or stops matching the reactive `source` value\n(instead of every time `key` changes).\nIf you have *n* different subscribers with different keys,\nand the `source` value changes from `a` to `b`, then\ninstead of all *n* subscribers updating,\nat most two subscribers will update:\nthe signal with key `a` will change to `false`,\nand the signal with key `b` will change to `true`.\nThus it reduces from *n* updates to 2 updates.\n\nUseful for defining the selection state of several selectable elements.\nFor example:\n\n```tsx\nconst [selectedId, setSelectedId] = createSignal()\nconst isSelected = createSelector(selectedId)\n\n\u003cFor each={list()}\u003e\n\t{(item) =\u003e \u003cli classList={{ active: isSelected(item.id) }}\u003e{item.name}\u003c/li\u003e}\n\u003c/For\u003e\n```\n\nIn the code above, each `li` element receives an `active` class\nexactly when the corresponding `item.id` is equal to `selectedId()`.\nWhen the `selectedId` signal changes, the `li` element(s) that previously\nhad previously matching `id` get the `active` class removed, and the\n`li` element(s) that now have a matching `id` get the `active` class added.\nAll other `li` elements get skipped, so if `id`s are distinct,\nonly 2 DOM operations get performed.\n\nBy contrast, the following code would perform `list().length` DOM operations\nevery time the `selectedId` signal changes:\n\n```tsx\nconst [selectedId, setSelectedId] = createSignal()\n\n\u003cFor each={list()}\u003e\n\t{(item) =\u003e \u003cli classList={{ active: selectedId() === item.id }}\u003e{item.name}\u003c/li\u003e}\n\u003c/For\u003e\n```\n\n## Arguments\n\n| Name | Type | Description |\n| :------- | :------------------------ | :------------------------------------------- |\n| `source` | `() =\u003e T` | The source signal to get the value from and compare with keys. |\n| `fn` | `(a: U, b: T) =\u003e boolean` | A function to compare the key and the value, returning whether they should be treated as equal. Default: `===` |",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/secondary-primitives/create-selector.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/secondary-primitives/create-selector.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2715,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "a38ff2b92689bc6f613b4105e79b9902a29ab9f1dbf793acebce3629bbf178f5",
|
||||
"timestamp": "2026-02-23T11:43:00.190673559+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "67d57c604076facd38ff7556",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-signal",
|
||||
"content": "---\ntitle: createSignal\nuse_cases: \u003e-\n state management, reactive values, component state, form inputs, counters,\n toggles, any reactive data\ntags:\n - signals\n - state\n - reactivity\n - core\n - primitives\nversion: \"1.0\"\ndescription: \u003e-\n Create reactive state with createSignal, Solid's fundamental primitive. Track\n values that change over time and automatically update your UI when they do.\n---\n\nCreates a reactive state primitive consisting of a getter (accessor) and a setter function that forms the foundation of Solid's reactivity system.\nSignals use a pull-based reactivity model where tracking subscriptions (reads) is lightweight, while updates (writes) trigger dependency tracking and effect re-execution, making them optimized for frequent reads and infrequent writes.\n\n## Import\n\n```typescript\nimport { createSignal } from \"solid-js\";\n```\n\n## Type signature\n\n```typescript\nfunction createSignal\u003cT\u003e(): Signal\u003cT | undefined\u003e;\nfunction createSignal\u003cT\u003e(value: T, options?: SignalOptions\u003cT\u003e): Signal\u003cT\u003e;\n\ntype Signal\u003cT\u003e = [get: Accessor\u003cT\u003e, set: Setter\u003cT\u003e];\n\ntype Accessor\u003cT\u003e = () =\u003e T;\n\ntype Setter\u003cT\u003e = {\n\t\u003cU extends T\u003e(value: Exclude\u003cU, Function\u003e | ((prev: T) =\u003e U)): U;\n\t\u003cU extends T\u003e(value: (prev: T) =\u003e U): U;\n\t\u003cU extends T\u003e(value: Exclude\u003cU, Function\u003e): U;\n\t\u003cU extends T\u003e(value: Exclude\u003cU, Function\u003e | ((prev: T) =\u003e U)): U;\n};\n\ninterface SignalOptions\u003cT\u003e {\n\tname?: string;\n\tequals?: false | ((prev: T, next: T) =\u003e boolean);\n\tinternal?: boolean;\n}\n```\n\n## Parameters\n\n### `value`\n\n- **Type:** `T`\n- **Default:** `undefined`\n\nThe initial value for the signal.\nIf no initial value is provided, the signal's type is automatically extended with `undefined`.\n\n### `options`\n\n- **Type:** `SignalOptions\u003cT\u003e`\n- **Default:** `undefined`\n\nConfiguration object for the signal.\n\n#### `name`\n\n- **Type:** `string`\n- **Default:** `undefined`\n\nA name for the signal used by debugging tools like [Solid devtools](https://github.com/thetarnav/solid-devtools).\nIt works only in development mode and is removed from the production bundle.\n\n#### `equals`\n\n- **Type:** `false | ((prev: T, next: T) =\u003e boolean)`\n- **Default:** `false`\n\nA custom comparison function to determine when the signal should update.\nBy default, signals use reference equality (`===`) to compare previous and next values.\nWhen set to `false`, the signal will always update regardless of value equality, which is useful for creating signals that trigger manual updates in the reactive system.\n\nWhen providing a custom function, it should be pure and return `true` if the values are equal (no update needed) or `false` if they differ (trigger update).\nImpure functions can create unexpected side effects and performance issues.\n\n#### `internal`\n\n- **Type:** `boolean`\n- **Default:** `false`\n\nMarks the signal as internal, preventing it from appearing in development tools.\nThis is primarily used by Solid's internal systems.\n\n## Return value\n\n- **Type:** `Signal\u003cT\u003e`\n\nReturns a tuple `[getter, setter]` where:\n\n- **getter**: An accessor function that returns the current value and tracks dependencies when called within a reactive context\n- **setter**: A function that updates the signal's value and notifies all dependent computations\n\n## Examples\n\n### Basic usage\n\n```tsx\nimport { createSignal } from \"solid-js\";\n\nfunction Counter() {\n\tconst [count, setCount] = createSignal(0);\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cbutton onClick={() =\u003e setCount(count() + 1)}\u003e+\u003c/button\u003e\n\t\t\t\u003cspan\u003e{count()}\u003c/span\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/basic-reactivity/create-signal.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/basic-reactivity/create-signal.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 3479,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "bd73d2bb8a7fe5adc347e4688c0bbeda66f20311d34f287bd549f924f1a8fb72",
|
||||
"timestamp": "2026-02-23T11:43:00.188553925+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "905c9844113db2c200d4f3c2",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-store",
|
||||
"content": "---\ntitle: createStore\nuse_cases: \u003e-\n complex state management, nested data, arrays and objects, derived values,\n application state\ntags:\n - store\n - state\n - data-structures\n - objects\n - arrays\nversion: '1.0'\ndescription: \u003e-\n Manage complex application state with createStore. Handle nested objects,\n arrays, and derived values with fine-grained reactivity.\n---\n\nStores were intentionally designed to manage data structures like objects and arrays but are capable of handling other data types, such as strings and numbers.\n\n## Types Signature\n\n```tsx\nimport { createStore } from \"solid-js/store\"\nimport type { StoreNode, Store, SetStoreFunction } from \"solid-js/store\"\n\nfunction createStore\u003cT extends StoreNode\u003e(\n\tstate: T | Store\u003cT\u003e\n): [get: Store\u003cT\u003e, set: SetStoreFunction\u003cT\u003e];\n\ntype Store\u003cT\u003e = T; // conceptually readonly, but not typed as such\n```\n\n## Usage\n\n```tsx\nimport { createStore } from \"solid-js/store\";\n\n// Initialize store\nconst [store, setStore] = createStore({\n\tuserCount: 3,\n\tusers: [\n\t\t{\n\t\t\tid: 0,\n\t\t\tusername: \"felix909\",\n\t\t\tlocation: \"England\",\n\t\t\tloggedIn: false,\n\t\t},\n\t\t{\n\t\t\tid: 1,\n\t\t\tusername: \"tracy634\",\n\t\t\tlocation: \"Canada\",\n\t\t\tloggedIn: true,\n\t\t},\n\t\t{\n\t\t\tid: 1,\n\t\t\tusername: \"johny123\",\n\t\t\tlocation: \"India\",\n\t\t\tloggedIn: true,\n\t\t},\n\t],\n});\n```\n\n## Getter\n\nStore objects support the use of getters to store derived values.\n\n```tsx\nconst [state, setState] = createStore({\n\tuser: {\n\t\tfirstName: \"John\",\n\t\tlastName: \"Smith\",\n\t\tget fullName() {\n\t\t\treturn `${this.firstName} ${this.lastName}`;\n\t\t},\n\t},\n});\n```\n\n## Setter\n\nChanges can take the form of function that passes previous state and returns new state or a value.\nObjects are always shallowly merged. Set values to undefined to delete them from the Store.\nIn TypeScript, you can delete a value by using a non-null assertion, like `undefined!`.\n\n```tsx\nconst [state, setState] = createStore({\n\tfirstName: \"John\",\n\tlastName: \"Miller\",\n});\n\nsetState({ firstName: \"Johnny\", middleName: \"Lee\" });\n// ({ firstName: 'Johnny', middleName: 'Lee', lastName: 'Miller' })\n\nsetState((state) =\u003e ({ preferredName: state.firstName, lastName: \"Milner\" }));\n// ({ firstName: 'Johnny', preferredName: 'Johnny', middleName: 'Lee', lastName: 'Milner' })\n```\n\n---\n\nTo learn more about using stores check the [Stores Guide](/concepts/stores), and the **Store utilities** section for more advanced APIs.",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/store-utilities/create-store.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/store-utilities/create-store.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2372,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "a32e10cac95180d2c45e2f2fd487cec2da9db69f23b426e9bfdc0d8dbfec7a3e",
|
||||
"timestamp": "2026-02-23T11:43:00.190822298+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "fe5dfbdda773b21593962fff",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "create-unique-id",
|
||||
"content": "---\ntitle: createUniqueId\nuse_cases: \u003e-\n form elements, accessibility, aria labels, ssr compatibility, html id\n generation, unique identifiers\ntags:\n - ids\n - accessibility\n - ssr\n - forms\n - utilities\nversion: \"1.0\"\ndescription: \u003e-\n Generate unique IDs that are stable across server and client with\n createUniqueId. Essential for accessible forms and SSR-compatible components.\n---\n\nThe `createUniqueId` function generates a unique ID that remains consistent across both server and client renders.\nIt is commonly used with HTML `id` and `for` attributes to ensure stable hydration.\n\n`createUniqueId` does *not* generate a cryptographically secure ID and is not suitable for security-sensitive data.\nAdditionally, it should not be used in scenarios that require uniqueness across a distributed system.\n\n:::note\n`createUniqueId` relies on a counter-based mechanism to generate IDs.\nIt must be called the same number of times on both the server and client.\n\nCalling `createUniqueId` only on the server or only on the client, such as when using [`isServer`](/reference/rendering/is-server) or [`\u003cNoHydration\u003e`](/reference/components/no-hydration), may lead to hydration errors.\n:::\n\n## Import\n\n```ts\nimport { createUniqueId } from \"solid-js\";\n```\n\n## Type\n\n```ts\nfunction createUniqueId(): string;\n```\n\n## Parameters\n\nThis function does not take any parameters.\n\n## Returns\n\n`createUniqueId` returns a unique `string` that is stable across server and client renders.\n\n## Examples\n\n### Basic Usage\n\n```tsx\nimport { createUniqueId } from \"solid-js\";\n\ntype InputProps = {\n\tid?: string;\n};\n\nfunction Input(props: InputProps) {\n\treturn \u003cinput id={props.id ?? createUniqueId()} /\u003e;\n}\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/component-apis/create-unique-id.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/component-apis/create-unique-id.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1688,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "8e506e58c8fb3692c8e326747f80c35974ed106c9a6306a6926387b728a63a86",
|
||||
"timestamp": "2026-02-23T11:43:00.188682798+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "b6ebaeb935e7ce1b60bce9a3",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "css-and-styling",
|
||||
"content": "---\ntitle: CSS and styling\nuse_cases: \u003e-\n styling components, css modules, scoped styles, component styling, design\n system setup, visual customization\ntags:\n - css\n - styling\n - modules\n - components\n - design\n - vite\nversion: '1.0'\ndescription: \u003e-\n Style your SolidStart components with CSS, CSS modules, and other styling\n solutions. Implement scoped styles and design systems.\n---\n\nSolidStart is a standards-based framework that, instead of modifying the behavior of the [`\u003cstyle\u003e` tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style), strives to build on top of it.\n\n## Styling components\n\nVite provides a simple way to [manage CSS for complex web applications](https://vitejs.dev/guide/features.html#css).\nIt does this by allowing users to import CSS using ESM syntax anywhere within the component tree.\nFor example, you can write CSS in a file accompanying your component file:\n\n```\nsrc/\n├── components/\n│ ├── Card.tsx\n│ ├── Card.css\n```\n\nTo use the CSS in the component, you can define the CSS in the `Card.css` file and import it in the `Card.tsx` file:\n\n```css title=\"Card.css\"\n.card {\n background-color: #446b9e;\n}\n\nh1 {\n font-size: 1.5em;\n font-weight: bold;\n}\n\np {\n font-size: 1em;\n font-weight: normal;\n}\n```\n\n```tsx title=\"Card.tsx\"\nimport \"./Card.css\";\n\nconst Card = (props) =\u003e {\n return (\n \u003cdiv class=\"card\"\u003e\n \u003ch1\u003e{props.title}\u003c/h1\u003e\n \u003cp\u003e{props.text}\u003c/p\u003e\n \u003c/div\u003e\n );\n};\n```\n\n### CSS modules for scoped styles\n\nSolidStart also supports [vite's CSS modules](https://vitejs.dev/guide/features.html#css-modules).\nThrough [CSS modules](https://github.com/css-modules/css-modules), you can scope certain CSS to a component and use the CSS class in multiple components to style them differently.\n\nFor this feature to work, the `.css` file must be named with the `.module.css` extension.\nThis convention also works for `.scss` and `.sass` files, which can be named with the `.module.scss` and `.module.sass` extensions, respectively.\n\n```css title=\"Card.module.css\"\n.card {\n background-color: #446b9e;\n}\n\ndiv.card \u003e h1 {\n font-size: 1.5em;\n font-weight: bold;\n}\n\ndiv.card \u003e p {\n font-size: 1em;\n font-weight: normal;\n}\n```\n\nWhen first using CSS modules, you will encounter an error when trying to use the class attribute in your components.\nThis is because, behind the scenes, classes defined in CSS modules are renamed to a series of random letters.\nWhen classes are hard coded using the class attribute (`class=\"card\"`), Solid is not aware that it should rename `card` to something different.\n\nTo fix this, you can import classes used in your CSS module.\nThe import object can be thought of as `humanClass: generatedClass` and within the component, the key (ie. the class on the element) is used to get the unique, generated class name.\n\n```jsx\nimport styles from \"./Card.module.css\";\n\nconst Card = (props) =\u003e {\n return (\n \u003cdiv class={styles.card}\u003e\n \u003ch1\u003e{props.title}\u003c/h1\u003e\n \u003cp\u003e{props.text}\u003c/p\u003e\n \u003c/div\u003e\n );\n};\n```\n\n## Other ways to style components\n\nSolidStart is built on top of Solid, meaning styling is not limited to CSS.\nTo see other ways to style components, see the [styling section in the Solid documentation](/guides/styling-your-components).",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/css-and-styling.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/building-your-application/css-and-styling.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 3265,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "78fa9cf5393606a087d6d8583fab72393b955d09be4b51c3099ec7050f88283e",
|
||||
"timestamp": "2026-02-23T11:43:00.193790868+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "7eeea146d9f353fd4e7381b4",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "css-modules",
|
||||
"content": "---\ntitle: CSS modules\norder: 3\nmainNavExclude: true\nuse_cases: \u003e-\n component styling, scoped styles, style encapsulation, preventing css\n conflicts, modular css\ntags:\n - styling\n - css\n - modules\n - scoped\n - components\n - encapsulation\nversion: '1.0'\ndescription: \u003e-\n Use CSS Modules in Solid for locally scoped styles, preventing global\n conflicts and ensuring component style encapsulation.\n---\n\nCSS Modules are CSS files where class names, animations, and media queries are scoped locally by default.\nThese provide a way to encapsulate styles within components, preventing global conflicts and optimizing the final output by bundling only the used selectors.\n\n## Creating CSS module files\n\nBegin by creating a CSS module file.\nConventionally, these files have a `.module.css` extension, like `style.module.css`.\nHowever, you can also use other extensions, such as `.scss` and `.sass`.\n\n```css\n/* styles.module.css */\n.foo {\n\tcolor: red;\n}\n.bar {\n\tbackground-color: blue;\n}\n```\n\n**Note:** Avoid the use of HTML tags in CSS modules.\nSince they are not considered pure selectors, it can lead to specificity issues which can make it more difficult to override with other styles and lead to unexpected behaviors.\n\n## Using modules in components\n\n1. **Importing styles:** In your component file (eg. `Component.jsx`), import the styles from the CSS module.\n\n```jsx\n// component.jsx\nimport styles from \"styles.module.css\";\n```\n\n2. **Applying styles:** Use the imported styles by referencing them as properties of the styles object in your JSX:\n\n```jsx\nfunction Component() {\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cdiv class={`${styles.foo} ${styles.bar}`}\u003eHello, world!\u003c/div\u003e\n\t\t\u003c/\u003e\n\t);\n}\n```\n\n3. **Using a single style:** If you only need one style from the module, import and apply it directly:\n\n```jsx\n// component.jsx\nimport styles from \"styles.module.css\";\n\nfunction Component() {\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cdiv class={styles.foo}\u003eHello, world!\u003c/div\u003e\n\t\t\u003c/\u003e\n\t);\n}\n```\n\n4. **Mixing with regular class names:** You can combine CSS module syntax with regular string class names, as well:\n\n```jsx\n// component.jsx\nimport styles from \"styles.module.css\";\n\nfunction Component() {\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cdiv class={`${styles.foo} container`}\u003eHello, world!\u003c/div\u003e\n\t\t\u003c/\u003e\n\t);\n}\n```\n\n**Note:** If your styles have dashes in their names, use bracket notation:\n\n```jsx\nconst className = styles[\"foo-with-dash\"];\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/css-modules.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/guides/styling-components/css-modules.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2381,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "d47ea2c709466a2d135f91af4c9da08d23b61112dadcd27b4deb09686f45bd5e",
|
||||
"timestamp": "2026-02-23T11:43:00.1879234+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "3f266ab7800a82b69961fa46",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "data-fetching",
|
||||
"content": "---\ntitle: \"Data fetching\"\n---\n\nFetching data from a remote API or database is a core task for most applications.\n[Solid](/) and [Solid Router](/solid-router) provide foundational tools like the [`createResource` primitive](/guides/fetching-data) and [queries](/solid-router/data-fetching/queries) to manage asynchronous data.\n\nSolidStart builds on these capabilities, extending them to provide a comprehensive solution for data fetching in a full-stack environment.\n\nThis page assumes you are familiar with the fundamental concepts of Solid and Solid Router.\nIf you are a beginner, we highly recommend starting with the [queries documentation](/solid-router/data-fetching/queries).\nYou can also find many practical examples in the [data fetching how-to guide](/solid-start/guides/data-fetching).\n\n## Server functions and queries\n\nServer functions provide a way to write functions that run exclusively on the server.\nThis makes it safe to fetch data directly from a database without relying on a separate API endpoint.\n\nServer functions integrate seamlessly with queries, as they can be used as the fetcher for a query.\n\n```tsx\nimport { query, redirect } from \"@solidjs/router\";\nimport { useSession } from \"vinxi/http\";\nimport { db } from \"./db\";\n\nconst getCurrentUserQuery = query(async (id: string) =\u003e {\n\t\"use server\";\n\tconst session = await useSession({\n\t\tpassword: process.env.SESSION_SECRET as string,\n\t\tname: \"session\",\n\t});\n\n\tif (session.data.userId) {\n\t\treturn await db.users.get({ id: session.data.userId });\n\t} else {\n\t\tthrow redirect(\"/login\");\n\t}\n}, \"currentUser\");\n```\n\nIn this example, the `getCurrentUserQuery` retrieves the session data, and if an authenticated user exists, it gets their information from the database and returns it.\nOtherwise, it redirects the user to the login page.\nAll of these operations are performed completely on the server regardless of how the query is called.\n\n:::caution[Modifying headers after streaming]\nOnce streaming begins, response headers (including status and cookies) are sent and cannot be changed.\nAny header-modifying logic within a server function, such as redirects or APIs like `useSession` that set cookies, must run before streaming starts;\notherwise, this error will occur:\n`Cannot set headers after they are sent to the client.`\n\nTo avoid this, disable streaming for queries that may modify headers by enabling the [`deferStream`](/solid-router/reference/data-apis/create-async#deferstream) option.\n\n```tsx\nconst user = createAsync(() =\u003e getCurrentUserQuery(), { deferStream: true });\n```\n\n:::",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/data-fetching.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/building-your-application/data-fetching.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2559,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "6fe011fbf03a34cbfc987c9ef345ab55d40802888663b338ccc8872cd3989035",
|
||||
"timestamp": "2026-02-23T11:43:00.193821114+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "348b4703edfcd980bc5aba3f",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "data-mutation",
|
||||
"content": "---\ntitle: \"Data mutation\"\n---\n\nMutating data on a server is a common task in most applications.\n[Solid Router](/solid-router) provides [actions](/solid-router/concepts/actions) to manage data mutations effectively.\n\nSolidStart builds upon the capabilities of actions, extending their scope to provide a comprehensive, full-stack solution for data mutations.\n\nThis page does not cover the foundational concepts from Solid Router.\nIf you are a beginner, we highly recommend starting with the [actions documentation](/solid-router/concepts/actions).\nYou can also find many practical examples in the [data mutation how-to guide](/solid-start/guides/data-mutation).\n\n## Server functions and actions\n\nServer functions allow an action to run exclusively on the server.\nThis enables performing sensitive operations—such as writing to a database or working with sessions—directly within the action.\n\n```tsx\nimport { action, redirect } from \"@solidjs/router\";\nimport { useSession } from \"vinxi/http\";\nimport { db } from \"./db\";\n\nconst logoutAction = action(async () =\u003e {\n\t\"use server\";\n\tconst session = await useSession({\n\t\tpassword: process.env.SESSION_SECRET as string,\n\t\tname: \"session\",\n\t});\n\n\tif (session.data.sessionId) {\n\t\tawait session.clear();\n\t\tawait db.session.delete({ id: sessionId });\n\t}\n\n\tthrow redirect(\"/\");\n}, \"logout\");\n```\n\nIn this example, the entire `logoutAction` runs on the server.\nIt safely accesses the session to retrieve the `sessionId` and performs a database deletion without exposing this logic to the client.\nThe `redirect` then navigates the user back to the home page.\n\n## Single-flight mutations\n\nWhen a piece of data changes on the server, the new data needs to be fetched so the UI doesn't fall out of sync.\nTraditionally, this is done in two separate HTTP requests: one to update the data, and a second to fetch the new data.\n\nSingle-flight mutations are a unique feature of SolidStart that handles this pattern in a single request.\nThis is enabled when two requirements are met:\n\n1. The action that updates the data must execute on the server using server functions.\n2. The data that the action updated must be preloaded.\n If the action performs a redirect, preloading needs to happen on the destination page.\n\n```tsx title=\"src/routes/products/[id].tsx\"\nimport {\n\taction,\n\tquery,\n\tcreateAsync,\n\ttype RouteDefinition,\n\ttype RouteSectionProps,\n} from \"@solidjs/router\";\nimport { db } from \"./db\";\n\nconst updateProductAction = action(async (id: string, formData: FormData) =\u003e {\n\t\"use server\";\n\tconst name = formData.get(\"name\")?.toString();\n\tawait db.products.update(id, { name });\n}, \"updateProduct\");\n\nconst getProductQuery = query(async (id: string) =\u003e {\n\t\"use server\";\n\treturn await db.products.get(id);\n}, \"product\");\n\nexport const route = {\n\tpreload: ({ params }) =\u003e getProductQuery(params.id as string),\n} satisfies RouteDefinition;\n\nexport default function ProductDetail(props: RouteSectionProps) {\n\tconst product = createAsync(() =\u003e getProductQuery(props.params.id as string));\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cp\u003eCurrent name: {props.data.product?.name}\u003c/p\u003e\n\t\t\t\u003cform\n\t\t\t\taction={updateProductAction.with(props.params.id as string)}\n\t\t\t\tmethod=\"post\"\n\t\t\t\u003e\n\t\t\t\t\u003cinput name=\"name\" placeholder=\"New name\" /\u003e\n\t\t\t\t\u003cbutton\u003eSave\u003c/button\u003e\n\t\t\t\u003c/form\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\nIn this example, `updateProductAction` updates the product within a server function, and `getProductQuery` is responsible for fetching the product data.\nNote that `getProductQuery` is preloaded on the route.\n\nWhen a user submits the form, a single POST request is sent to the server.\nAfter the action completes, `getProductQuery` is automatically revalidated.\nBecause it's preloaded, SolidStart can trigger the revalidation on the server and stream the result back to the client in the same response.",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/data-mutation.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/building-your-application/data-mutation.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 3796,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "dde180ad28632637e14e123b82c7b2bafa8b952f4e08db2d07f8f2de7135bbe6",
|
||||
"timestamp": "2026-02-23T11:43:00.193857292+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "00de8ca379b716434930b69e",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "deploying-your-app",
|
||||
"content": "---\ntitle: Deploy your app\norder: 9\nuse_cases: 'production deployment, hosting, going live, app publishing, cloud deployment'\ntags:\n - deployment\n - hosting\n - production\n - cloud\n - publishing\nversion: '1.0'\ndescription: \u003e-\n Deploy your Solid application to popular hosting platforms including\n Cloudflare, Vercel, Netlify, AWS, and more with guides.\n---\n\nAre you ready to deploy your Solid application? Follow our guides for different deployment services.\n\n\u003cdiv class=\"flex flex-col md:grid md:grid-cols-4 md:grid-rows-2 gap-3\"\u003e\n\n\u003cImageLinks\n\ttitle=\"Cloudflare\"\n\thref=\"/guides/deployment-options/cloudflare\"\n\tlogo=\"cloudflare\"\n/\u003e\n\n\u003cImageLinks\n\ttitle=\"Firebase\"\n\thref=\"/guides/deployment-options/firebase\"\n\tlogo=\"firebase\"\n/\u003e\n\n\u003cImageLinks\n\ttitle=\"AWS with Flightcontrol\"\n\thref=\"/guides/deployment-options/aws-via-flightcontrol\"\n\tlogo=\"flightControl\"\n/\u003e\n\n\u003cImageLinks\n\ttitle=\"AWS with SST\"\n\thref=\"/guides/deployment-options/aws-via-sst\"\n\tlogo=\"sst\"\n/\u003e\n\n\u003cImageLinks\n\ttitle=\"Netlify\"\n\thref=\"/guides/deployment-options/netlify\"\n\tlogo=\"netlify\"\n/\u003e\n\u003cImageLinks\n\ttitle=\"Railway\"\n\thref=\"/guides/deployment-options/railway\"\n\tlogo=\"railway\"\n/\u003e\n\n\u003cImageLinks\n\ttitle=\"Vercel\"\n\thref=\"/guides/deployment-options/vercel\"\n\tlogo=\"vercel\"\n/\u003e\n\n\u003cImageLinks\n\ttitle=\"Stormkit\"\n\thref=\"/guides/deployment-options/stormkit\"\n\tlogo=\"stormkit\"\n/\u003e\n\n\u003cImageLinks\n\ttitle=\"Zerops\"\n\thref=\"/guides/deployment-options/zerops\"\n\tlogo=\"zerops\"\n/\u003e\n\u003c/div\u003e",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deploying-your-app.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/guides/deploying-your-app.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1422,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "c8f22e6bd4c4a40218422478fdf54fb9dc1d76410fd270361a24f2470dd55078",
|
||||
"timestamp": "2026-02-23T11:43:00.187270032+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "ad9929e18eff55167667493d",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "derived-signals",
|
||||
"content": "---\ntitle: Derived signals\norder: 1\nuse_cases: \u003e-\n computed values, reactive calculations, dependent state, dynamic values from\n signals\ntags:\n - signals\n - reactivity\n - derived\n - computed\n - state\nversion: '1.0'\ndescription: \u003e-\n Create reactive derived values that automatically update when their\n dependencies change using Solid's derived signals.\n---\n\nDerived signals are functions that rely on one or more [signals](/concepts/signals) to produce a value.\n\nThese functions are not executed immediately, but instead are only called when the values they rely on are changed.\nWhen the underlying signal is changed, the function will be called again to produce a new value.\n\n```js\nconst double = () =\u003e count() * 2;\n```\n\nIn the above example, the `double` function relies on the `count` signal to produce a value.\nWhen the `count` signal is changed, the `double` function will be called again to produce a new value.\n\nSimilarly you can create a derived signal that relies on a store value because stores use signals under the hood.\nTo learn more about how stores work, [you can visit the stores section](/concepts/stores).\n\n```js\nconst fullName = () =\u003e store.firstName + ' ' + store.lastName;\n```\n\nThese dependent functions gain reactivity from the signal they access, ensuring that changes in the underlying data propagate throughout your application.\nIt 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.\nIf included within a component's body, these derived signals will trigger an update when necessary.\n\nWhile you can create derived values in this manner, Solid created the [`createMemo`](/reference/basic-reactivity/create-memo) primitive.\nTo dive deeper into how memos work, [check out the memos section](/concepts/derived-values/memos).",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/derived-values/derived-signals.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/concepts/derived-values/derived-signals.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1851,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "6f86857e60203bf5a1621641ee13f840a21f2a12063995d3d9c0a16fd2eba229",
|
||||
"timestamp": "2026-02-23T11:43:00.186698839+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "18db1098eb848d0f6cd2b67c",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "dev",
|
||||
"content": "---\ntitle: DEV\nuse_cases: \u003e-\n development debugging, build optimization, library development, conditional\n code, dev-only features\ntags:\n - development\n - debugging\n - builds\n - optimization\n - conditional\nversion: '1.0'\ndescription: \u003e-\n Access development-only features in SolidJS with the DEV export. Enable\n additional checks and debugging tools that are removed in production.\n---\n\n```ts\nimport { DEV } from \"solid-js\"\n\nconst DEV: object | undefined\n```\n\nOn the client, Solid provides (via [conditional exports](https://nodejs.org/api/packages.html#conditional-exports)) different builds depending on whether the **development** condition is set.\nDevelopment mode provides some additional checking — e.g. detecting accidental use of multiple instances of Solid — which are removed in production builds.\n\nIf you want code to run only in development mode (most useful in libraries), you can check whether the **DEV** export is defined.\nNote that it is always defined on the server, so you may want to combine with [isServer](/reference/rendering/is-server):\n\n```ts\nimport { DEV } from \"solid-js\"\nimport { isServer } from \"solid-js/web\"\n\nif (DEV \u0026\u0026 !isServer) {\n console.log(...);\n}\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/rendering/dev.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/rendering/dev.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1204,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "da0f514739b6746a03d997e6e6efc5819a88f6c10432ea859a2f7ca4e21a9e24",
|
||||
"timestamp": "2026-02-23T11:43:00.190283546+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "0b0eea3734988a658bf3b564",
|
||||
"source": "solid:solid-router",
|
||||
"type": "github-document",
|
||||
"title": "dynamic",
|
||||
"content": "---\ntitle: \u003cDynamic\u003e\norder: 5\nuse_cases: \u003e-\n dynamic components, conditional rendering, polymorphic components, runtime\n component selection, flexible ui, component switching\ntags:\n - dynamic\n - components\n - jsx\n - polymorphic\n - rendering\n - conditional\nversion: '1.0'\ndescription: \u003e-\n Render components dynamically at runtime with the Dynamic component. Perfect\n for polymorphic components and conditional component rendering.\n---\n\nThis component lets you insert an arbitrary Component or tag and passes the props through to it.\n\n```tsx\nimport { Dynamic } from \"solid-js/web\"\nimport type { JSX } from \"solid-js\"\n\nfunction Dynamic\u003cT\u003e(\n\tprops: T \u0026 {\n\t\tchildren?: any\n\t\tcomponent?: Component\u003cT\u003e | string | keyof JSX.IntrinsicElements\n\t}\n): () =\u003e JSX.Element\n```\n\nHere's an example of how you can use it:\n\n```tsx\n\u003cDynamic component={MyComponent} someProp={state.something} /\u003e\n```\n\n## Props\n\n| Name | Type | Description |\n| :---------- | :---------------------------------------------------------- | :---------------------------------------- |\n| `component` | `Component\u003cT\u003e` \\| `string` \\| `keyof JSX.IntrinsicElements` | The component to render. |\n| `children` | `any` | The children to pass to the component. |\n| `...` | `T` | Any other props to pass to the component. |",
|
||||
"url": "file:///tmp/devour-github-216944658/src/routes/reference/components/dynamic.mdx",
|
||||
"metadata": {
|
||||
"path": "/tmp/devour-github-216944658/src/routes/reference/components/dynamic.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1510,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "4c234ef649a66d638dffb352ddf993cabf14553245b376ed2d18ee5e17c94744",
|
||||
"timestamp": "2026-02-23T11:39:22.43921512+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "32adf210b78c50886d413da8",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "dynamic",
|
||||
"content": "---\ntitle: \u003cDynamic\u003e\norder: 5\nuse_cases: \u003e-\n dynamic components, conditional rendering, polymorphic components, runtime\n component selection, flexible ui, component switching\ntags:\n - dynamic\n - components\n - jsx\n - polymorphic\n - rendering\n - conditional\nversion: '1.0'\ndescription: \u003e-\n Render components dynamically at runtime with the Dynamic component. Perfect\n for polymorphic components and conditional component rendering.\n---\n\nThis component lets you insert an arbitrary Component or tag and passes the props through to it.\n\n```tsx\nimport { Dynamic } from \"solid-js/web\"\nimport type { JSX } from \"solid-js\"\n\nfunction Dynamic\u003cT\u003e(\n\tprops: T \u0026 {\n\t\tchildren?: any\n\t\tcomponent?: Component\u003cT\u003e | string | keyof JSX.IntrinsicElements\n\t}\n): () =\u003e JSX.Element\n```\n\nHere's an example of how you can use it:\n\n```tsx\n\u003cDynamic component={MyComponent} someProp={state.something} /\u003e\n```\n\n## Props\n\n| Name | Type | Description |\n| :---------- | :---------------------------------------------------------- | :---------------------------------------- |\n| `component` | `Component\u003cT\u003e` \\| `string` \\| `keyof JSX.IntrinsicElements` | The component to render. |\n| `children` | `any` | The children to pass to the component. |\n| `...` | `T` | Any other props to pass to the component. |",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/dynamic.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/components/dynamic.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1510,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "4c234ef649a66d638dffb352ddf993cabf14553245b376ed2d18ee5e17c94744",
|
||||
"timestamp": "2026-02-23T11:43:00.188935873+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "a9c215f90c60b04e86ba5d32",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "dynamic-routes",
|
||||
"content": "---\ntitle: Dynamic routes\nuse_cases: \u003e-\n user profiles, product pages, blog posts, id-based content, variable urls,\n data-driven pages\ntags:\n - dynamic\n - parameters\n - validation\n - wildcards\n - routing\nversion: '1.0'\ndescription: \u003e-\n Build dynamic routes with parameters in SolidJS for user profiles, products,\n and content that changes based on URL values.\n---\n\nWhen a path is unknown ahead of time, it can be treated as a flexible parameter that is passed on to the component:\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Router, Route } from \"@solidjs/router\";\n\nconst Users = lazy(() =\u003e import(\"./pages/Users\"));\nconst User = lazy(() =\u003e import(\"./pages/User\"));\nconst Home = lazy(() =\u003e import(\"./pages/Home\"));\n\nrender(\n\t() =\u003e (\n\t\t\u003cRouter\u003e\n\t\t\t\u003cRoute path=\"/users\" component={Users} /\u003e\n\t\t\t\u003cRoute path=\"/users/:id\" component={User} /\u003e\n\t\t\t\u003cRoute path=\"/\" component={Home} /\u003e\n\t\t\u003c/Router\u003e\n\t),\n\tdocument.getElementById(\"app\")\n);\n```\n\nThe colon (`:`) indicates that `id` can be any string.\nOnce a URL matches the pattern, the `User` component will be shown.\nWhen using dynamic segments, the values can be accessed via the [`useParams`](/solid-router/reference/primitives/use-params) primitive within the component.\n\n:::note[Note on Animation/Transitions]\nRoutes that share the same path match will be treated as the same route.\nIf you want to force re-render you can wrap your component in a keyed [`Show`](/concepts/control-flow/conditional-rendering) like:\n\n```jsx\n\u003cShow when={params.something} keyed\u003e\n\t\u003cMyComponent /\u003e\n\u003c/Show\u003e\n```\n\n:::\n\nEach path parameter can be validated using a `MatchFilter`.\nThis allows for more complex routing descriptions rather than just checking the presence of a parameter.\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Router, Route } from \"@solidjs/router\";\nimport type { SegmentValidators } from \"./types\";\n\nconst User = lazy(() =\u003e import(\"./pages/User\"));\n\nconst filters: MatchFilters = {\n\tparent: [\"mom\", \"dad\"], // allow enum values\n\tid: /^\\d+$/, // only allow numbers\n\twithHtmlExtension: (v: string) =\u003e v.length \u003e 5 \u0026\u0026 v.endsWith(\".html\"), // we want an `*.html` extension\n};\n\nrender(\n\t() =\u003e (\n\t\t\u003cRouter\u003e\n\t\t\t\u003cRoute\n\t\t\t\tpath=\"/users/:parent/:id/:withHtmlExtension\"\n\t\t\t\tcomponent={User}\n\t\t\t\tmatchFilters={filters}\n\t\t\t/\u003e\n\t\t\u003c/Router\u003e\n\t),\n\tdocument.getElementById(\"app\")\n);\n\n```\n\nHere, `matchFilters` prop allows for validation of the `parent`, `id` and `withHtmlExtension` parameters against the filters defined in `filters`.\nIf the validation fails, the route will not match.\n\nSo in this example:\n\n- `/users/mom/123/contact.html` would match,\n- `/users/dad/123/about.html` would match,\n- `/users/aunt/123/contact.html` would not match as `:parent` is not 'mom' or 'dad',\n- `/users/mom/me/contact.html` would not match as `:id` is not a number,\n- `/users/dad/123/contact` would not match as `:withHtmlExtension` is missing `.html`.\n\n## Optional parameters\n\nParameters can be specified as optional by adding a question mark to the end of the parameter name:\n\n```jsx\n// Matches stories and stories/123 but not stories/123/comments\n\u003cRoute path=\"/stories/:id?\" component={Stories} /\u003e\n```\n\n## Wildcard routes\n\n`:param` provides an arbitrary name at that point in the path.\nUsing an asterisk (`*`) will provide a way to match any end of the path:\n\n```jsx\n// Matches any path that begins with foo, including foo/, foo/a/, foo/a/b/c\n\u003cRoute path=\"foo/*\" component={Foo} /\u003e\n```\n\nIf the wild part of the path to the component as a parameter needs to be exposed, it can be named:\n\n```jsx\n\u003cRoute path=\"foo/*any\" component={Foo} /\u003e\n```\n\n**Note:** that the wildcard token must be the last part of the path; `foo/*any/bar` will not create any routes.\n\n## Multiple paths\n\nRoutes also support defining multiple paths using an array.\nThis allows a route to remain mounted and not rerender when switching between two or more locations that it matches:\n\n```jsx\n// Navigating from login to register does not cause the Login component to re-render\n\u003cRoute path={[\"login\", \"register\"]} component={Login} /\u003e\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/dynamic-routes.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-router/concepts/dynamic-routes.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 4113,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "94723d84926611edc538b4f201b76a0322880586184d70b8e23fdc0d2abb6cd5",
|
||||
"timestamp": "2026-02-23T11:43:00.191663279+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "a29ea0c92a634eb4eb179a01",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "dynamic",
|
||||
"content": "---\ntitle: Dynamic\norder: 2\nuse_cases: \u003e-\n dynamic component selection, polymorphic components, runtime component\n switching, flexible ui rendering, component factories\ntags:\n - dynamic\n - components\n - rendering\n - polymorphic\n - runtime\n - flexible\nversion: '1.0'\ndescription: \u003e-\n Render components dynamically at runtime with Solid's Dynamic component. Build\n flexible UIs with runtime component selection.\n---\n\n`\u003cDynamic\u003e` is a Solid component that allows you to render components dynamically based on data.\nBy passing either a string representing a [native HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) or a component function to the `component` prop, you can render the chosen component with the remaining props you provide.\n\n```jsx\nimport { createSignal, For } from \"solid-js\"\nimport { Dynamic } from \"solid-js/web\"\n\nconst RedDiv = () =\u003e \u003cdiv style=\"color: red\"\u003eRed\u003c/div\u003e\nconst GreenDiv = () =\u003e \u003cdiv style=\"color: green\"\u003eGreen\u003c/div\u003e\nconst BlueDiv = () =\u003e \u003cdiv style=\"color: blue\"\u003eBlue\u003c/div\u003e\n\nconst options = {\n\tred: RedDiv,\n\tgreen: GreenDiv,\n\tblue: BlueDiv,\n}\n\nfunction App() {\n\tconst [selected, setSelected] = createSignal(\"red\")\n\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cselect\n\t\t\t\tvalue={selected()}\n\t\t\t\tonInput={(e) =\u003e setSelected(e.currentTarget.value)}\n\t\t\t\u003e\n\t\t\t\t\u003cFor each={Object.keys(options)}\u003e\n\t\t\t\t\t{(color) =\u003e \u003coption value={color}\u003e{color}\u003c/option\u003e}\n\t\t\t\t\u003c/For\u003e\n\t\t\t\u003c/select\u003e\n\t\t\t\u003cDynamic component={options[selected()]} /\u003e\n\t\t\u003c/\u003e\n\t)\n}\n```\n\nThis example renders a `\u003cselect\u003e` element that allows you to choose between three colors.\nOnce a color is selected, the `\u003cDynamic\u003e` component will render the chosen color's corresponding component or element.\n\n`\u003cDynamic\u003e` creates more concise code than alternative conditional rendering options.\nFor example, the following code renders the same result as the previous example:\n\n```jsx\nimport { createSignal, Switch, Match, For } from \"solid-js\"\n\nconst RedDiv = () =\u003e \u003cdiv style=\"color: red\"\u003eRed\u003c/div\u003e\nconst GreenDiv = () =\u003e \u003cdiv style=\"color: green\"\u003eGreen\u003c/div\u003e\nconst BlueDiv = () =\u003e \u003cdiv style=\"color: blue\"\u003eBlue\u003c/div\u003e\n\nconst options = {\n\tred: RedDiv,\n\tgreen: GreenDiv,\n\tblue: BlueDiv,\n}\n\nfunction App() {\n\tconst [selected, setSelected] = createSignal(\"red\")\n\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cselect\n\t\t\t\tvalue={selected()}\n\t\t\t\tonInput={(e) =\u003e setSelected(e.currentTarget.value)}\n\t\t\t\u003e\n\t\t\t\t\u003cFor each={Object.keys(options)}\u003e\n\t\t\t\t\t{(color) =\u003e \u003coption value={color}\u003e{color}\u003c/option\u003e}\n\t\t\t\t\u003c/For\u003e\n\t\t\t\u003c/select\u003e\n\t\t\t\u003cSwitch fallback={\u003cBlueDiv /\u003e}\u003e\n\t\t\t\t\u003cMatch when={selected() === \"red\"}\u003e\n\t\t\t\t\t\u003cRedDiv /\u003e\n\t\t\t\t\u003c/Match\u003e\n\t\t\t\t\u003cMatch when={selected() === \"green\"}\u003e\n\t\t\t\t\t\u003cGreenDiv /\u003e\n\t\t\t\t\u003c/Match\u003e\n\t\t\t\u003c/Switch\u003e\n\t\t\u003c/\u003e\n\t)\n}\n```\n\nInstead of a more verbose [`\u003cSwitch\u003e` and `\u003cMatch\u003e`](/concepts/control-flow/conditional-rendering) statement, `\u003cDynamic\u003e` offers a more concise way to render components dynamically.\n\n## Props\n\nWhen working with these components, you can pass [props](/concepts/components/props) to the component you are rendering by passing them to the `\u003cDynamic\u003e` component.\nThis makes them available to the component you are rendering, similar to how you would pass props to components in JSX.\n\n```jsx\nimport { Dynamic } from \"solid-js/web\"\n\nfunction App() {\n\treturn (\n\t\t\u003cDynamic component={someComponent} someProp=\"someValue\" /\u003e\n\t)\n}\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/control-flow/dynamic.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/concepts/control-flow/dynamic.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 3290,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "a2aada65d37568dca4dd587cf086808a38fe23e9a6f62150bc2ab8a2b93a211b",
|
||||
"timestamp": "2026-02-23T11:43:00.186556942+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "be30f40fefd4db9bf119432a",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "entry-client",
|
||||
"content": "---\ntitle: entry-client.tsx\nuse_cases: \u003e-\n browser initialization, client-only code, service workers, mounting app, spa\n setup\ntags:\n - entry\n - client\n - browser\n - initialization\n - mount\n - startup\nversion: '1.0'\ndescription: \u003e-\n Configure browser entry point for SolidStart apps. Set up client-side\n initialization, mount components, and register service workers.\n---\n\n`entry-client.tsx` is where an application starts in the browser.\nIt does this by passing [`\u003cStartClient\u003e`](/solid-start/reference/client/start-client) and a DOM Element (the mounting point), to the [`mount`](/solid-start/reference/client/mount) function.\n\n```tsx\nimport { mount, StartClient } from \"@solidjs/start/client\";\n\nmount(() =\u003e \u003cStartClient /\u003e, document.getElementById(\"app\")!);\n```\n\nThis file is an ideal place to run any client specific code that is needed on startup, such as registering service workers.\nThis is important if you are performing client-only rendering or using other modes of server-side rendering.",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/entrypoints/entry-client.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/reference/entrypoints/entry-client.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1011,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "0f034e27f1ff84f97ed8e43806868d52d4cda268e2d038b5cea227ff42e2e084",
|
||||
"timestamp": "2026-02-23T11:43:00.194891466+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "a13179ac029c4de3d3d633fc",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "entry-server",
|
||||
"content": "---\ntitle: entry-server.tsx\nuse_cases: \u003e-\n server initialization, ssr setup, html document structure, meta tags, server\n bootstrap\ntags:\n - entry\n - server\n - ssr\n - initialization\n - document\n - html\nversion: '1.0'\ndescription: \u003e-\n Define server entry point and HTML document structure for SolidStart.\n Configure SSR modes and set up server-side rendering bootstrap.\n---\n\n`entry-server.tsx` is where an application starts on the server.\nThis happens by `entry-server.tsx` providing a document component to [`\u003cStartServer\u003e`](/solid-start/reference/server/start-server) and passing it into [`createHandler`](/solid-start/reference/server/create-handler) for server side rendering.\n A typical `entry-server.tsx` for a new project looks like this:\n\n```tsx\nimport { createHandler, StartServer } from \"@solidjs/start/server\";\n\nexport default createHandler(() =\u003e (\n\t\u003cStartServer\n\t\tdocument={({ assets, children, scripts }) =\u003e (\n\t\t\t\u003chtml lang=\"en\"\u003e\n\t\t\t\t\u003chead\u003e\n\t\t\t\t\t\u003cmeta charset=\"utf-8\" /\u003e\n\t\t\t\t\t\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n\t\t\t\t\t\u003clink rel=\"icon\" href=\"/favicon.ico\" /\u003e\n\t\t\t\t\t{assets}\n\t\t\t\t\u003c/head\u003e\n\t\t\t\t\u003cbody\u003e\n\t\t\t\t\t\u003cdiv id=\"app\"\u003e{children}\u003c/div\u003e\n\t\t\t\t\t{scripts}\n\t\t\t\t\u003c/body\u003e\n\t\t\t\u003c/html\u003e\n\t\t)}\n\t/\u003e\n));\n```\n\nFor setting different SSR modes (sync | async | stream), see [`createHandler`](/solid-start/reference/server/create-handler).",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/entrypoints/entry-server.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/reference/entrypoints/entry-server.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1369,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "3dcf519fab3307cc592b2297e42ffd57c4f137f45cb0a4199a1930467f553ed5",
|
||||
"timestamp": "2026-02-23T11:43:00.194941821+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "fc9918b541dab1c100c08993",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "environment-variables",
|
||||
"content": "---\ntitle: Environment variables\nuse_cases: \u003e-\n api keys, configuration, secrets management, build-time config,\n environment-specific settings\ntags:\n - environment\n - variables\n - config\n - vite\n - secrets\n - deployment\nversion: '1.0'\ndescription: \u003e-\n Configure public and private environment variables in Solid apps using Vite's\n built-in support for secure configuration.\n---\n\nSolid is built on top of [Vite](https://vitejs.dev/), which offers a convenient way to handle environment variables.\n\n## Public Environment Variables\n\nPublic variables are considered safe to expose to the client-side code. These variables are prefixed with `VITE_` and are injected into the client-side code during compilation time.\n\nIn the root directory of the project, create a file called `.env`.\nThis file will store environment variables in the `key = value` format.\n\nIf working with TypeScript it is possible to make such variables type-safe and enable your TypeScript Language Service Provider (LSP) to autocomplete them by creating a file called `env.d.ts` in the root directory of the project.\n\n```typescript\ninterface ImportMetaEnv {\n\treadonly VITE_USER_ID: string;\n\treadonly VITE_PUBLIC_ENDPOINT: string;\n}\n\ninterface ImportMeta {\n\treadonly env: ImportMetaEnv;\n}\n```\n\n:::note\nTo prevent accidental exposure of environment variables to the client, only variables prefixed with `VITE_` will be exposed.\n\nFor example:\n\n```json\nVITE_SECRET_KEY = 123hello\nDB_PASSWORD = foobar\n```\n\nOnly the `VITE_SECRET_KEY` will be exposed to client source code, while `DB_PASSWORD` will not, as shown below.\n\n```jsx\nconsole.log(import.meta.env.VITE_SECRET_KEY); // 123hello\nconsole.log(import.meta.env.DB_PASSWORD); // undefined\n```\n\n:::\n\n```jsx\nfunction MyComponent() {\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch2\u003e\n\t\t\t\tComponent with environment variable used{\" \"}\n\t\t\t\t{import.meta.env.VITE_VARIABLE_NAME}\n\t\t\t\tthe value will be replaced during compilation time.\n\t\t\t\u003c/h2\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n## Private Environment Variables\n\nThese variables should only be accessed in your backend code, so it's best not to use the `VITE_` prefix for them. Instead, use `process.env` to access them. Depending on the [Nitro preset](https://nitro.build/deploy) chosen, they'll be made available automatically or they will require an external dependency such as [dotenv](https://www.npmjs.com/package/dotenv).\n\n```jsx\nDB_HOST=\"somedb://192.110.0\"\nDB_PASSWORD = super_secret_password_hash\n```\n\nTo access them, within your backend code, use `process.env`.\nFor an example, check the pseudo-code below.\n\n```jsx\n\t\"use server\"\n\n\tconst client = new DB({\n\t\thost: process.env.DB_URL,\n\t\tpassword: process.env.DB_PASSWORD\n\t});\n}\n```\n\nIt is also possible to make `process.env` type-safe via the same `env.d.ts` file.\n\n```typescript\n\ndeclare namespace NodeJS {\n\tinterface ProcessEnv {\n\t\treadonly DB_URL: string\n\t\treadonly DB_PASSWORD: string\n\t}\n}\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/configuration/environment-variables.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/configuration/environment-variables.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2883,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "e585fedf74d82a20b93607b37f118e39473398761e8b2b81d45fdcc04240b9f0",
|
||||
"timestamp": "2026-02-23T11:43:00.187010014+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "0d36701d3b46d46f9494e929",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "error-boundary",
|
||||
"content": "---\ntitle: \u003cErrorBoundary\u003e\norder: 5\nuse_cases: \u003e-\n error handling, production apps, preventing crashes, user experience,\n debugging, fallback ui\ntags:\n - error-handling\n - components\n - debugging\n - fallback\n - production\n - stability\nversion: '1.0'\ndescription: \u003e-\n Catch and handle rendering errors in SolidJS components with ErrorBoundary.\n Display fallback UI when errors occur in children components.\n---\n\nThe `\u003cErrorBoundary\u003e` component catches errors that occur during the rendering or updating of its children and shows a fallback UI instead.\nThis includes:\n\n- Errors that occur while rendering JSX.\n- Errors that occur within `createEffect`, `createMemo`, and other state management primitives.\n- Errors that occur within `createResource` and other asynchronous state management or data-fetching primitives.\n\nHowever, errors occurring outside the rendering process are **not** captured by error boundaries.\nFor instance:\n\n- Errors that occur inside event handlers.\n- Errors that occur after a `setTimeout`.\n\n## Props\n\n### `fallback`\n\n**Type**: `JSX.Element | ((err: any, reset: () =\u003e void) =\u003e JSX.Element)`\n\n`fallback` provides content to display when an error occurs.\nIf a function is passed, it receives two parameters:\n\n- `err`: The caught error object.\n- `reset`: A function that forces the `\u003cErrorBoundary\u003e` to re-render its children and clear the error state.\n\nIf there's an error within the `fallback` itself, however, it is not caught by the same `\u003cErrorBoundary\u003e`.\nInstead, it will bubble up to any parent error boundaries.\n\n## Example\n\n```tsx\nimport { ErrorBoundary } from \"solid-js\";\nimport { ErrorProne } from \"./components\";\n\nfunction Example() {\n\treturn (\n\t\t\u003cErrorBoundary\n\t\t\tfallback={(error, reset) =\u003e (\n\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\t\u003cp\u003e{error.message}\u003c/p\u003e\n\t\t\t\t\t\u003cbutton onClick={reset}\u003eTry Again\u003c/button\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t)}\n\t\t\u003e\n\t\t\t\u003cErrorProne /\u003e\n\t\t\u003c/ErrorBoundary\u003e\n\t);\n}\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/error-boundary.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/components/error-boundary.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1893,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "c2d6abfbcb74d3016517b1971629a15d8f79e191c854bc755c03d90c4d59a2e6",
|
||||
"timestamp": "2026-02-23T11:43:00.188968615+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "2979336661d6b8af4dd2be3e",
|
||||
"source": "solid:solid-router",
|
||||
"type": "github-document",
|
||||
"title": "error-boundary",
|
||||
"content": "---\ntitle: \u003cErrorBoundary\u003e\norder: 5\nuse_cases: \u003e-\n error handling, production apps, preventing crashes, user experience,\n debugging, fallback ui\ntags:\n - error-handling\n - components\n - debugging\n - fallback\n - production\n - stability\nversion: '1.0'\ndescription: \u003e-\n Catch and handle rendering errors in SolidJS components with ErrorBoundary.\n Display fallback UI when errors occur in children components.\n---\n\nThe `\u003cErrorBoundary\u003e` component catches errors that occur during the rendering or updating of its children and shows a fallback UI instead.\nThis includes:\n\n- Errors that occur while rendering JSX.\n- Errors that occur within `createEffect`, `createMemo`, and other state management primitives.\n- Errors that occur within `createResource` and other asynchronous state management or data-fetching primitives.\n\nHowever, errors occurring outside the rendering process are **not** captured by error boundaries.\nFor instance:\n\n- Errors that occur inside event handlers.\n- Errors that occur after a `setTimeout`.\n\n## Props\n\n### `fallback`\n\n**Type**: `JSX.Element | ((err: any, reset: () =\u003e void) =\u003e JSX.Element)`\n\n`fallback` provides content to display when an error occurs.\nIf a function is passed, it receives two parameters:\n\n- `err`: The caught error object.\n- `reset`: A function that forces the `\u003cErrorBoundary\u003e` to re-render its children and clear the error state.\n\nIf there's an error within the `fallback` itself, however, it is not caught by the same `\u003cErrorBoundary\u003e`.\nInstead, it will bubble up to any parent error boundaries.\n\n## Example\n\n```tsx\nimport { ErrorBoundary } from \"solid-js\";\nimport { ErrorProne } from \"./components\";\n\nfunction Example() {\n\treturn (\n\t\t\u003cErrorBoundary\n\t\t\tfallback={(error, reset) =\u003e (\n\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\t\u003cp\u003e{error.message}\u003c/p\u003e\n\t\t\t\t\t\u003cbutton onClick={reset}\u003eTry Again\u003c/button\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t)}\n\t\t\u003e\n\t\t\t\u003cErrorProne /\u003e\n\t\t\u003c/ErrorBoundary\u003e\n\t);\n}\n```",
|
||||
"url": "file:///tmp/devour-github-216944658/src/routes/reference/components/error-boundary.mdx",
|
||||
"metadata": {
|
||||
"path": "/tmp/devour-github-216944658/src/routes/reference/components/error-boundary.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1893,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "c2d6abfbcb74d3016517b1971629a15d8f79e191c854bc755c03d90c4d59a2e6",
|
||||
"timestamp": "2026-02-23T11:39:22.439255256+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "cb9709e630e8dc966bcbd93e",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "error-boundary",
|
||||
"content": "---\ntitle: Error boundary\norder: 5\nuse_cases: \u003e-\n error handling, crash prevention, user-friendly errors, app stability, error\n recovery, debugging production issues\ntags:\n - errors\n - boundary\n - handling\n - recovery\n - stability\n - debugging\nversion: '1.0'\ndescription: \u003e-\n Catch and handle rendering errors gracefully with ErrorBoundary. Prevent app\n crashes and provide user-friendly error recovery.\n---\n\nBy default, if part of an application throws an error during rendering, the entire application can crash, resulting in Solid removing its UI from the screen.\nError boundaries provide a way to catch these errors and prevent the entire app from crashing.\n\nThe [`\u003cErrorBoundary\u003e`](/reference/components/error-boundary) component is used to create an error boundary.\nIt catches any error that occurs during the rendering or updating of its children.\nHowever, an important note is that errors occurring outside the rendering process, such as in event handlers or after a `setTimeout`, are _not_ caught by error boundaries.\n\nThe `fallback` prop can be used to display a user-friendly error message or notification when an error occurs.\nIf a function is passed to `fallback`, it will receive the error object as well as a `reset` function.\nThe `reset` function forces the `\u003cErrorBoundary\u003e` to re-render its children and reset the error state, providing users with a way to recover from the error.\n\n```tsx\nimport { ErrorBoundary } from \"solid-js\";\nimport { Header, ErrorProne } from \"./components\";\n\nfunction App() {\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cHeader /\u003e\n\t\t\t\u003cErrorBoundary\n\t\t\t\tfallback={(error, reset) =\u003e (\n\t\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\t\t\u003cp\u003eSomething went wrong: {error.message}\u003c/p\u003e\n\t\t\t\t\t\t\u003cbutton onClick={reset}\u003eTry Again\u003c/button\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t)}\n\t\t\t\u003e\n\t\t\t\t\u003cErrorProne /\u003e\n\t\t\t\u003c/ErrorBoundary\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\nIn this example, when the `ErrorProne` component throws an error, the `\u003cErrorBoundary\u003e` catches it, preventing it from affecting the rest of the application.\nInstead, it displays the error message passed to the fallback prop.",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/control-flow/error-boundary.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/concepts/control-flow/error-boundary.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2032,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "6671a6596001de921044dc599f7e092f3723d0efa289905d67688ef97448a5d0",
|
||||
"timestamp": "2026-02-23T11:43:00.186584233+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "b506c389fb7c42ac06dd41e5",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "file-routes",
|
||||
"content": "---\ntitle: FileRoutes\nuse_cases: \u003e-\n file-based routing, automatic route generation, spa routing, route\n configuration\ntags:\n - routing\n - files\n - routes\n - navigation\n - filesystem\n - spa\nversion: '1.0'\ndescription: \u003e-\n Automatically generate routes from file structure in SolidStart. Create route\n configurations from files in the /src/routes directory.\n---\n\n`FileRoutes` is a component that creates a [`Route`](/solid-router/reference/components/route) for each file in the `/src/routes` directory.\nThis creates a `route` export to define the route configuration for the router of your choice.\n\nFor example, using [`solid-router`](/solid-router) would look like the following:\n\n```tsx {7-9} title=\"app.tsx\"\nimport { Suspense } from \"solid-js\";\nimport { Router } from \"@solidjs/router\";\nimport { FileRoutes } from \"@solidjs/start/router\";\n\nexport default function App() {\n\treturn (\n\t\t\u003cRouter root={(props) =\u003e \u003cSuspense\u003e{props.children}\u003c/Suspense\u003e}\u003e\n\t\t\t\u003cFileRoutes /\u003e\n\t\t\u003c/Router\u003e\n\t);\n}\n```\n\nSee the [SolidStart routing guide](/solid-start/building-your-application/routing) for more details.\n\n:::caution\nIf removing the `FileRoutes` component from your `app.tsx` file, you will need to manually add all of your routes.\n\nWhile this is possible it does come with tradeoffs.\nFor example, optimizations such as preloaded script tags will no longer be available.\n\n:::",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/routing/file-routes.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/reference/routing/file-routes.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1375,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "f0044072c97097e9eb74eb4e292ae3afb082f4962acef5d34f8b58e195b3fc69",
|
||||
"timestamp": "2026-02-23T11:43:00.19502637+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "fddbebfd7a147407db7b7fe1",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "firebase",
|
||||
"content": "---\ntitle: Firebase\norder: 3\nmainNavExclude: true\nuse_cases: \u003e-\n google cloud hosting, static hosting, firebase integration, web app\n deployment, production hosting\ntags:\n - firebase\n - google\n - deployment\n - hosting\n - cli\n - static\nversion: '1.0'\ndescription: \u003e-\n Host your Solid application on Firebase with Google's infrastructure for\n reliable static site hosting and easy deployment.\n---\n\n[Firebase](https://firebase.google.com/) is an all-in-one app development platform by Google, offering a range of services from real-time databases to user authentication.\nFor a detailed overview of the services available, you can visit [Firebase's documentation](https://firebase.google.com/docs).\n\nBefore proceeding, make sure you've already set up a project in your Firebase console.\nIf you haven't, you can follow [Firebase's official guide](https://firebase.google.com/docs/projects/learn-more#creating-cloud-projects) to create a new Firebase project.\n\n## Using the Firebase CLI Tool\n\n1. Use your preferred package manager to install the Firebase command-line tool with one of the following commands:\n\n```package-install-global\nfirebase-tools\n```\n\n2. Execute the `firebase login` command to ensure that you're logged into the Firebase account associated with your project.\n\n3. In the root directory of your Solid project, create two new files: `firebase.json` and `.firebaserc`.\n\n- In `firebase.json`, add the following code:\n\n```json\n{\n\t\"hosting\": {\n\t\t\"public\": \"dist\",\n\t\t\"ignore\": []\n\t}\n}\n```\n\n- In `.firebaserc`, insert the following code (replace `\u003cYOUR_FIREBASE_PROJECT_ID\u003e` with your Firebase project ID):\n\n```bash frame=\"none\"\n{\n \"projects\": {\n \"default\": \"\u003cYOUR_FIREBASE_PROJECT_ID\u003e\"\n }\n}\n```\n\n4. Run `npm run build` , followed by `firebase deploy` to build and deploy your project.\n\nUpon completion, a `Hosting URL` will be displayed, indicating the live deployment of your project.\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=YncoDoKDPPVyet1EOrsa_w\"\n\tpreview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=YncoDoKDPPVyet1EOrsa_w\u0026type=embed\"\n/\u003e",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deployment-options/firebase.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/guides/deployment-options/firebase.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2133,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "15a5fab2329478e9fc8ee0417f773229a727885b8159876c4cea6bbbb335a8de",
|
||||
"timestamp": "2026-02-23T11:43:00.187476921+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "3b1814e333dd5d46a2b0c550",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "for",
|
||||
"content": "---\ntitle: \u003cFor\u003e\norder: 5\nuse_cases: \u003e-\n rendering lists, dynamic arrays, data iteration, collections, tables,\n repeating elements\ntags:\n - lists\n - iteration\n - components\n - arrays\n - rendering\n - performance\nversion: '1.0'\ndescription: \u003e-\n Efficiently render lists in SolidJS with the For component. Provides keyed\n iteration with minimal DOM updates for dynamic array rendering.\n---\n\nThe `\u003cFor\u003e` component is used to render a list of items. It is similar to the `.map()` function in JavaScript.\n\n```ts\nimport { For } from \"solid-js\"\nimport type { JSX } from \"solid-js\"\n\nfunction For\u003cT, U extends JSX.Element\u003e(props: {\n\teach: readonly T[]\n\tfallback?: JSX.Element\n\tchildren: (item: T, index: () =\u003e number) =\u003e U\n}): () =\u003e U[]\n```\n\nA referentially keyed loop with efficient updating of only changed items. The callback takes the current item as the first argument:\n\n```jsx\n\u003cFor each={state.list} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n\t{(item) =\u003e \u003cdiv\u003e{item}\u003c/div\u003e}\n\u003c/For\u003e\n```\n\nThe `each` prop can also be a function that returns a list. This is useful for creating a loop that depends on a state value:\n\n```jsx\n\u003cFor each={stateSignal()}\u003e{(item) =\u003e \u003cdiv\u003e{item}\u003c/div\u003e}\u003c/For\u003e\n```\n\nThe optional second argument is an index signal:\n\n```jsx\n\u003cFor each={state.list} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n\t{(item, index) =\u003e (\n\t\t\u003cdiv\u003e\n\t\t\t#{index()} {item}\n\t\t\u003c/div\u003e\n\t)}\n\u003c/For\u003e\n```\n\n## Props\n\n| Name | Type | Description |\n| :--------- | :------------------------------------ | :--------------------------------------------------------------- |\n| `each` | `readonly T[]` | The list of items to render. |\n| `fallback` | `JSX.Element` | A fallback element to render while the list is loading. |\n| `children` | `(item: T, index: () =\u003e number) =\u003e U` | A callback that returns a JSX element for each item in the list. |",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/for.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/components/for.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1993,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "462af71fccb8ca4a65c12c9338274fc7f60e2c92c335788ef18daf0a3c74e732",
|
||||
"timestamp": "2026-02-23T11:43:00.188993832+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "65095f934b14e8970cabf19c",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "from",
|
||||
"content": "---\ntitle: from\nuse_cases: \u003e-\n rxjs interop, svelte stores integration, external observables, third-party\n state management, converting subscriptions to signals\ntags:\n - interop\n - rxjs\n - observables\n - signals\n - integration\nversion: '1.0'\ndescription: \u003e-\n Convert RxJS observables and external producers into SolidJS signals. Seamless\n integration with third-party reactive libraries and state managers.\n---\n\n```tsx\nimport { from } from \"solid-js\"\n\nfunction from\u003cT\u003e(\n\tproducer:\n\t\t| ((setter: (v: T) =\u003e T) =\u003e () =\u003e void)\n\t\t| {\n\t\t\t\tsubscribe: (\n\t\t\t\t\tfn: (v: T) =\u003e void\n\t\t\t\t) =\u003e (() =\u003e void) | { unsubscribe: () =\u003e void }\n\t\t }\n): () =\u003e T | undefined\n\n```\n\nA helper to make it easier to interop with external producers like RxJS observables or with Svelte Stores.\nThis basically turns any subscribable (object with a subscribe method) into a Signal and manages subscription and disposal.\n\n```tsx\nconst signal = from(obsv$)\n```\n\nIt can also take a custom producer function where the function is passed a setter function that returns an unsubscribe function:\n\n```tsx\nconst clock = from((set) =\u003e {\n\tconst interval = setInterval(() =\u003e {\n\t\tset((v) =\u003e v + 1)\n\t}, 1000)\n\n\treturn () =\u003e clearInterval(interval)\n})\n```\n\n## Arguments\n\n| Name | Type | Description |\n| :------- | :----------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------- |\n| producer | `((setter: (v: T) =\u003e T) =\u003e () =\u003e void) \\| { subscribe: (fn: (v: T) =\u003e void) =\u003e (() =\u003e void) \\| { unsubscribe: () =\u003e void }; }` | The producer function or subscribable object |",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/from.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/reactive-utilities/from.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1801,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "f3e5721a66c081b0e0353309b400e69db74ed081152e1d89bbf070b3980a0dd7",
|
||||
"timestamp": "2026-02-23T11:43:00.18989216+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "713623e78b38920e85ff988f",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "get-owner",
|
||||
"content": "---\ntitle: getOwner\nuse_cases: \u003e-\n advanced tracking control, custom cleanup logic, understanding component\n hierarchy, debugging ownership chains, manual scope management\ntags:\n - ownership\n - tracking\n - scopes\n - cleanup\n - debugging\nversion: '1.0'\ndescription: \u003e-\n Access the current tracking scope owner in SolidJS for advanced control over\n cleanup and disposal. Essential for custom reactive primitives.\n---\n\n```tsx\nimport { getOwner } from \"solid-js\"\nimport type { Owner } from \"solid-js\"\n\nfunction getOwner(): Owner\n\n```\n\nGets the tracking scope that owns the currently running code, e.g., for passing into a later call to `runWithOwner` outside of the current scope.\n\nInternally, 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`.\nIn particular, this ownership tree lets Solid automatically clean up a disposed computation by traversing its subtree and calling all `onCleanup` callbacks.\nFor example, when a createEffect's dependencies change, the effect calls all descendant `onCleanup` callbacks before running the effect function again.\nCalling `getOwner` returns the current owner node that is responsible for disposal of the current execution block.\n\nComponents 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.\nCalling `getOwner` from a component scope returns the owner that is responsible for rendering and unmounting that component.\n\nNote that the owning tracking scope isn't necessarily tracking.\nFor example, untrack turns off tracking for the duration of a function (without creating a new tracking scope), as do components created via JSX (`\u003cComponent ...\u003e`).",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/get-owner.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/reactive-utilities/get-owner.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1879,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "69c3a1f2d7a68b888bdce18563a292898baa07c3381bf143bd08fa3070b0f635",
|
||||
"timestamp": "2026-02-23T11:43:00.189916556+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "dbc23ba19ebd2dbef7e2d6ec",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "get-request-event",
|
||||
"content": "---\ntitle: getRequestEvent\nuse_cases: \u003e-\n server-side rendering, authentication, headers manipulation, cookies, server\n functions, request context access\ntags:\n - server\n - ssr\n - request\n - headers\n - authentication\n - context\nversion: '1.0'\ndescription: \u003e-\n Access server request context with getRequestEvent. Read headers, set cookies,\n and manage response status in SSR and server functions.\n---\n\nSolid uses Async Local Storage as a way of injecting the request context anywhere on the server.\nThe server provides a utility function to access this context\n(called a `RequestEvent`).\n\n```js\nimport { getRequestEvent } from \"solid-js/web\"\nimport type { RequestEvent } from \"solid-js/web\"\n\nfunction getRequestEvent(): RequestEvent | undefined\n```\n\nYou can retrieve the request event by calling `getRequestEvent`:\n\n```js\nimport { getRequestEvent } from \"solid-js/web\"\n\nconst event = getRequestEvent()\n```\n\n## Request\n\n`.request` is the most important property of the `RequestEvent`.\nThis is a Web [Request object](https://developer.mozilla.org/en-US/docs/Web/API/Request) that represents the current request to the server.\nYou can access properties off of it such as `url` and `headers`.\n `body`, however, does not typically need to be handled directly for things such as server functions or rendering, which already handle mapping.\n\n```js\nimport { getRequestEvent } from \"solid-js/web\"\n\nconst event = getRequestEvent();\nif (event) {\n\tconst auth = event.request.headers.get(\"Authorization\");\n}\n```\n\n## Response\n\nThe `getRequestEvent` can also be used to stub out the Response - this extends the [options that can be passed to the `Response constructor`](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#options).\nThis is kept up to date so it can be used to read and write headers and status for the current response.\n\n```js\nimport { getRequestEvent } from \"solid-js/web\"\n\nconst event = getRequestEvent();\nif (event) {\n\tevent.response.headers.append(\"Set-Cookie\", \"foo=hello\");\n\tevent.response.status = 201;\n}\n```\n\n### Change event.response or create a new Response\n\nThe `getRequestEvent` event is considered global and lasts the life of the request.\nTherefore, if you are calling a server function on the server during SSR or an RPC call, setting values on `event.response` will reflect on that request.\n\nThe returned response will only impact the response when it is an RPC call.\nThis is important because some headers previously set may not be needed to be set for the whole page, but only for a specific request.\n\n**Note:** This is important to keep in mind when choosing where to set headers and responses.\n\n:::note[Usage with SolidStart]\n\tSee this guide on [Request\n\tEvents](/solid-start/advanced/request-events).\n:::",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/server-utilities/get-request-event.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/server-utilities/get-request-event.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2752,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "2f7290b6a87cdba1244eeb51f680cd586309ac28e9cb5ea06a3779d86a55bf71",
|
||||
"timestamp": "2026-02-23T11:43:00.190739703+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "7e7d82b3940ee4f540c30083",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "get-server-function-meta",
|
||||
"content": "---\ntitle: getServerFunctionMeta\nuse_cases: \u003e-\n server function identification, parallel processing, worker management,\n caching, multi-core apps\ntags:\n - server\n - functions\n - metadata\n - parallel\n - workers\n - cache\nversion: '1.0'\ndescription: \u003e-\n Get stable IDs for server functions across parallel instances. Enable caching\n and state management in multi-core SolidStart apps.\n---\n\n`getServerFunctionMeta` returns a function-specific id string, that is stable across all instances when server functions are run in parallel on multiple CPU cores or workers.\n\nThis `id` property can and _will_ change between builds.\n\n```tsx\nimport { getServerFunctionMeta } from \"@solidjs/start\";\n\n// or some in-memory db\nconst appCache: any = globalThis;\n\nconst counter = async () =\u003e {\n\t\"use server\";\n\tconst { id } = getServerFunctionMeta()!;\n\tconst key = `counter_${id}`;\n\tappCache[key] = appCache[key] ?? 0;\n\tappCache[key]++;\n\n\treturn appCache[key] as number;\n};\n```\n\n## Parameters\n\n`getServerFunctionMeta(): { id: string }`",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/server/get-server-function-meta.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/reference/server/get-server-function-meta.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1025,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "a8bda8ecbea3183e7d3f450640bf58e45189a494e25176673a62437b3392834a",
|
||||
"timestamp": "2026-02-23T11:43:00.195220454+01:00"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "ea75325c41794ef949a26089",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "get",
|
||||
"content": "---\ntitle: GET\nuse_cases: \u003e-\n http caching, rest api, data fetching, cache headers, seo optimization, cdn\n caching\ntags:\n - http\n - get\n - cache\n - api\n - rest\n - fetch\nversion: '1.0'\ndescription: \u003e-\n Create cacheable GET server functions in SolidStart. Leverage HTTP cache\n headers for improved performance and SEO optimization.\n---\n\n`GET` helps to create a server function which is accessed via an [HTTP GET request](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET).\nWhen this function is called, arguments are serialized into the URL, thus allowing the use of [HTTP cache-control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) headers.\n\nFor example, `GET` can be used to make a streaming promise with a 60 second cache life:\n\n```tsx {4, 8}\nimport { json } from \"@solidjs/router\";\nimport { GET } from \"@solidjs/start\";\n\nconst hello = GET(async (name: string) =\u003e {\n\t\"use server\";\n\treturn json(\n\t\t{ hello: new Promise\u003cstring\u003e((r) =\u003e setTimeout(() =\u003e r(name), 1000)) },\n\t\t{ headers: { \"cache-control\": \"max-age=60\" } }\n\t);\n});\n```\n\n## Parameters\n\n`GET\u003cT extends (...args: any[]) =\u003e any\u003e(fn: T): (...args: Parameters\u003cT\u003e) =\u003e ReturnType\u003cT\u003e`",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/server/get.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/reference/server/get.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 1189,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "0836f3c59fa2a40ee8652756ff7561ec07890e821d0142fc2d88c726adb07d7c",
|
||||
"timestamp": "2026-02-23T11:43:00.195270158+01:00"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "aed11ddeff3b7689f06e648e",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "getting-started",
|
||||
"content": "---\ntitle: Getting started\nuse_cases: \u003e-\n new project, initial setup, project creation, starter template, first app,\n quick start, bootstrapping\ntags:\n - setup\n - installation\n - starter\n - template\n - quickstart\n - init\nversion: '1.0'\ndescription: \u003e-\n Start your first SolidStart project with templates and step-by-step setup.\n Create, configure, and run your Solid application.\n---\n\nThe easiest way to get started with Solid is to use the SolidStart starter.\nThis starter contains a collection of templates that can be used to quickly bootstrap a new Solid application.\n\n**1. Install SolidStart**\n\nTo start a new project you can initialize SolidStart with the following command:\n\n```package-create\nsolid@latest\n```\n\nThis will create a new directory for your project based on the name you enter.\n\n**2. Choose a template**\n\nWhen you run the command above, SolidStart will prompt you to choose a template for your new application.\nYou can see a [list of these options in the templates repository](https://github.com/solidjs/templates/tree/main/solid-start).\n\n```bash frame=\"terminal\"\n◆ Which template would you like to use?\n│ ● basic\n│ ○ bare\n│ ○ with-solidbase\n│ ○ with-auth\n│ ○ with-authjs\n│ ○ with-drizzle\n│ ○ with-mdx\n│ ○ with-prisma\n│ ○ with-solid-styled\n│ ○ with-tailwindcss\n│ ...\n└\n```\n\nFollowing the prompts, you might be asked questions like whether you want to use Server Side Rendering or TypeScript.\nChoose your desired options to continue.\n\n**3. Install dependencies**\n\nOnce you have chosen your template and configuration options, you can navigate to the directory you created and run the following command to install dependencies:\n\n```package-install-local\n```\n\nAfter this command has finished, your new SolidStart application is ready to go!\n\n**4. Run your application**\n\nTo run your application locally, you can use the following command:\n\n```package-run\ndev\n```\n\nYour application should now be running locally on port 3000.\nYou can view it by navigating to [http://localhost:3000](http://localhost:3000).\n\n:::note\n SolidStart uses [Vinxi](https://vinxi.vercel.app/) both for starting a development server with [Vite](https://vitejs.dev/) and for building and starting a production server with [Nitro](https://nitro.build/).\n\n When you run your application, you are actually running `vinxi dev` under the hood.\n\n You can read more about the [Vinxi CLI and how it is configured in the Vinxi documentation](https://vinxi.vercel.app/api/cli.html).\n:::\n\n## Project files\n\nSolidStart will create a new directory for your project, and populate it with the necessary files and directories to get you started.\nThese files and directories are the basic structure of a SolidStart application, and you can modify them to suit your needs.\nThe default structure of a SolidStart application looks like this:\n\n```\npublic/\nsrc/\n├── routes/\n│ ├── index.tsx\n├── entry-client.tsx\n├── entry-server.tsx\n├── app.tsx\n```\n\n**Note:** Depending on the configuration options you chose when creating your project, your file structure may look slightly different.\nFor example, if you chose to use JavaScript rather than TypeScript, your file extensions will be `.jsx` instead of `.tsx`.\n\nEach directory and file in this structure serves a specific purpose in your SolidStart application:\n- `public/` - contains the publicly-accessible assets for your application.\nThis is where images, fonts, and other files that you want to be accessible to the public should be placed.\n- `src/` - where your Start application code will live.\nIt is aliased to `~/` for importing in your code.\n- `src/routes/` - any files or pages will be located in this directory.\nYou can learn more about the [`routes` folder in the routing section](/solid-start/building-your-application/routing).\n- [`src/entry-client.tsx`](/solid-start/reference/entrypoints/entry-client) - this file is what loads and _hydrates_ the JavaScript for our application on the client side (in browser).\nIn most cases, you will **not** need to modify this file.\n- [`src/entry-server.tsx`](/solid-start/reference/entrypoints/entry-server) - this file will handle requests on the server.\nLike `entry-client.tsx`, in most cases you will **not** need to modify this file.\n- [`app.tsx`](/solid-start/reference/entrypoints/app) - this is the HTML root of your application both for client and server rendering. You can think of this as the shell inside which your application will be rendered.",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/getting-started.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/solid-start/getting-started.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 4535,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "f53592374d06641c432c5e5b5a083216f18e7a7859b69a820324a9b490c8ed94",
|
||||
"timestamp": "2026-02-23T11:43:00.194072266+01:00"
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user