25 | {scripts}
26 |
27 |
28 | );
29 | }}
30 | />
31 | ));
32 |
--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | //
2 |
--------------------------------------------------------------------------------
/src/i18n/config.ts:
--------------------------------------------------------------------------------
1 | import { dictionaries } from "./dictionaries";
2 |
3 | const locales = Object.keys(dictionaries);
4 | locales.shift();
5 |
6 | /**
7 | * An array of locales
8 | * language (ISO 639-1 - set 1): https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes
9 | * country code (ISO 3166-1 alpha-2): https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
10 | * E.g.: Canadian French would be: `fr-ca`
11 | */
12 | export const SUPPORTED_LOCALES: string[] = locales as Array<
13 | keyof Omit
14 | >;
15 |
--------------------------------------------------------------------------------
/src/i18n/dictionaries/index.ts:
--------------------------------------------------------------------------------
1 | import english from "./en/ui";
2 | // import ptbr from "./pt-br/ui";
3 |
4 | export const dictionaries = {
5 | default: english,
6 | // "pt-br": ptbr,
7 | };
8 |
9 | export const languages: { [key: string]: string } = {
10 | en: "English",
11 | // "pt-br": "Português do Brasil",
12 | };
13 |
--------------------------------------------------------------------------------
/src/i18n/dictionaries/pt-br/ui.ts:
--------------------------------------------------------------------------------
1 | export default {
2 | //hero
3 | "hero.title": "UIs com Fine-Grained Reactivity, sem esforço.",
4 | "hero.subtitle": "Solid é um framework JavaScript moderno para a web atual.",
5 | "hero.button.primary": "Comece agora",
6 | "hero.button.secondary": "Junte-se à comunidade",
7 |
8 | // main navigation
9 | "main.nav.tab.learn": "Aprenda",
10 | "main.nav.tab.reference": "Referência",
11 | "main.nav.section.concepts": "Conceitos",
12 | "main.nav.section.components": "Componentes",
13 |
14 | // ToC
15 | "toc.this.page": "Nesta página",
16 | "toc.overview": "Sumário",
17 | "contribute.title": "Contribua",
18 | "contribute.edit": "Edite este artigo",
19 | "contribute.report": "Reporte um erro neste artigo",
20 |
21 | // pagination
22 | "pagination.next": "Próximo",
23 | "pagination.previous": "Anterior",
24 |
25 | // 404
26 | "missing.translation": "Esta seção ainda não foi traduzida",
27 | } as const;
28 |
--------------------------------------------------------------------------------
/src/i18n/helpers.ts:
--------------------------------------------------------------------------------
1 | import { useLocation } from "@solidjs/router";
2 | import { SUPPORTED_LOCALES } from "./config";
3 | import { useCurrentRouteMetaData } from "~/utils/route-metadata-helper";
4 |
5 | export function getLocaleFromPathname(pathname: string) {
6 | return pathname.split("/")[1];
7 | }
8 |
9 | export function isValidLocale(
10 | locale: string
11 | ): locale is (typeof SUPPORTED_LOCALES)[number] {
12 | return SUPPORTED_LOCALES.includes(locale);
13 | }
14 |
15 | export function getValidLocaleFromPathname(pathname: string) {
16 | const locale = getLocaleFromPathname(pathname);
17 |
18 | return isValidLocale(locale) ? locale : null;
19 | }
20 |
21 | export function getEntryFileName() {
22 | const pathname = useLocation().pathname;
23 | const currentRouteMetaData = useCurrentRouteMetaData();
24 |
25 | if (currentRouteMetaData.isProjectRoot) {
26 | return `${pathname}/index.mdx`.replace("//", "/");
27 | } else {
28 | // Trim trailing slash
29 | return (pathname.endsWith("/") ? pathname.slice(0, -1) : pathname) + ".mdx";
30 | }
31 | }
32 |
33 | export const isExternalURL = (url: string) => /^https?:\/\//.test(url);
34 |
--------------------------------------------------------------------------------
/src/i18n/i18n-context.tsx:
--------------------------------------------------------------------------------
1 | import { useLocation } from "@solidjs/router";
2 | import { type JSX, createContext, useContext } from "solid-js";
3 | import { createStore } from "solid-js/store";
4 | import { createTranslator } from "./translator";
5 | import { getValidLocaleFromPathname } from "./helpers";
6 |
7 | type ProviderProps = { children: JSX.Element };
8 |
9 | const initialI18nStore = {
10 | get t() {
11 | const { pathname } = useLocation();
12 | const locale = getValidLocaleFromPathname(pathname);
13 |
14 | return createTranslator(locale);
15 | },
16 | };
17 |
18 | export const I18nContext =
19 | createContext(initialI18nStore);
20 |
21 | export function I18nProvider(props: ProviderProps) {
22 | const [i18n] = createStore(initialI18nStore);
23 |
24 | return (
25 | {props.children}
26 | );
27 | }
28 |
29 | export function useI18n() {
30 | const context = useContext(I18nContext);
31 | if (!context) {
32 | throw new Error("useI18n: must be used inside ");
33 | }
34 | return context;
35 | }
36 |
--------------------------------------------------------------------------------
/src/i18n/translator.ts:
--------------------------------------------------------------------------------
1 | import { dictionaries } from "./dictionaries";
2 | import { SUPPORTED_LOCALES } from "./config";
3 |
4 | export function createTranslator(
5 | locale: (typeof SUPPORTED_LOCALES)[number] | null
6 | ) {
7 | // type overlap will only be 100% when translations are done
8 | // so we're fine with `dictionaries[locale][key]` being implicit `any`
9 | // @ts-expect-error: expected any here
10 | const dictionary = dictionaries[locale || "default"];
11 | return (key: keyof (typeof dictionaries)["default"]) => {
12 | return dictionary[key] || dictionaries["default"][key];
13 | };
14 | }
15 |
--------------------------------------------------------------------------------
/src/middleware/index.ts:
--------------------------------------------------------------------------------
1 | import { createMiddleware } from "@solidjs/start/middleware";
2 | import { handleLegacyRoutes } from "./legacy-routes-redirect";
3 |
4 | export default createMiddleware({
5 | onRequest: [handleLegacyRoutes],
6 | });
7 |
--------------------------------------------------------------------------------
/src/routes/[...404].tsx:
--------------------------------------------------------------------------------
1 | export default function NoEntry() {
2 | throw new Error("404");
3 | }
4 |
--------------------------------------------------------------------------------
/src/routes/advanced-concepts/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Advanced concepts",
3 | "pages": ["fine-grained-reactivity.mdx"]
4 | }
5 |
--------------------------------------------------------------------------------
/src/routes/concepts/components/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Components",
3 | "pages": ["basics.mdx", "class-style.mdx", "event-handlers.mdx", "props.mdx"]
4 | }
5 |
--------------------------------------------------------------------------------
/src/routes/concepts/control-flow/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Control flow",
3 | "pages": [
4 | "conditional-rendering.mdx",
5 | "dynamic.mdx",
6 | "list-rendering.mdx",
7 | "portal.mdx",
8 | "error-boundary.mdx"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/src/routes/concepts/control-flow/error-boundary.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Error boundary"
3 | order: 5
4 | ---
5 |
6 | By 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.
7 | Error boundaries provide a way to catch these errors and prevent the entire app from crashing.
8 |
9 | The [``](/reference/components/error-boundary) component is used to create an error boundary.
10 | It catches any error that occurs during the rendering or updating of its children.
11 | However, 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.
12 |
13 | The `fallback` prop can be used to display a user-friendly error message or notification when an error occurs.
14 | If a function is passed to `fallback`, it will receive the error object as well as a `reset` function.
15 | The `reset` function forces the `` to re-render its children and reset the error state, providing users with a way to recover from the error.
16 |
17 | ```tsx
18 | import { ErrorBoundary } from "solid-js";
19 | import { Header, ErrorProne } from "./components";
20 |
21 | function App() {
22 | return (
23 |
24 |
25 | (
27 |
28 |
Something went wrong: {error.message}
29 |
30 |
31 | )}
32 | >
33 |
34 |
35 |
36 | );
37 | }
38 | ```
39 |
40 | In this example, when the `ErrorProne` component throws an error, the `` catches it, preventing it from affecting the rest of the application.
41 | Instead, it displays the error message passed to the fallback prop.
42 |
--------------------------------------------------------------------------------
/src/routes/concepts/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Concepts",
3 | "pages": [
4 | "intro-to-reactivity.mdx",
5 | "understanding-jsx.mdx",
6 | "components",
7 | "signals.mdx",
8 | "control-flow",
9 | "effects.mdx",
10 | "derived-values",
11 | "context.mdx",
12 | "stores.mdx",
13 | "refs.mdx"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/src/routes/concepts/derived-values/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Derived values",
3 | "pages": ["derived-signals.mdx", "memos.mdx"]
4 | }
5 |
--------------------------------------------------------------------------------
/src/routes/concepts/derived-values/derived-signals.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Derived signals
3 | order: 1
4 | ---
5 |
6 | Derived signals are functions that rely on one or more [signals](/concepts/signals) to produce a value.
7 |
8 | These functions are not executed immediately, but instead are only called when the values they rely on are changed.
9 | When the underlying signal is changed, the function will be called again to produce a new value.
10 |
11 | ```js
12 | const double = () => count() * 2;
13 | ```
14 |
15 | In the above example, the `double` function relies on the `count` signal to produce a value.
16 | When the `count` signal is changed, the `double` function will be called again to produce a new value.
17 |
18 | Similarly you can create a derived signal that relies on a store value because stores use signals under the hood.
19 | To learn more about how stores work, [you can visit the stores section](/concepts/stores).
20 |
21 | ```js
22 | const fullName = () => store.firstName + ' ' + store.lastName;
23 | ```
24 |
25 | These dependent functions gain reactivity from the signal they access, ensuring that changes in the underlying data propagate throughout your application.
26 | It is important to note that these functions do not store a value themselves; instead, they can update any effects or components that depend on them.
27 | If included within a component's body, these derived signals will trigger an update when necessary.
28 |
29 | While you can create derived values in this manner, Solid created the [`createMemo`](/reference/basic-reactivity/create-memo) primitive.
30 | To dive deeper into how memos work, [check out the memos section](/concepts/derived-values/memos).
31 |
--------------------------------------------------------------------------------
/src/routes/configuration/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Configuration",
3 | "pages": ["environment-variables.mdx", "typescript.mdx"]
4 | }
5 |
--------------------------------------------------------------------------------
/src/routes/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "root",
3 | "pages": [
4 | "index.mdx",
5 | "quick-start.mdx",
6 | "concepts",
7 | "advanced-concepts",
8 | "guides",
9 | "configuration"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/src/routes/guides/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Guides",
3 | "pages": [
4 | "styling-your-components.mdx",
5 | "styling-components",
6 | "state-management.mdx",
7 | "routing-and-navigation.mdx",
8 | "complex-state-management.mdx",
9 | "fetching-data.mdx",
10 | "testing.mdx",
11 | "deploying-your-app.mdx",
12 | "deployment-options"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/src/routes/guides/deploying-your-app.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Deploy your app
3 | order: 9
4 | ---
5 |
6 | Are you ready to deploy your Solid application? Follow our guides for different deployment services.
7 |
8 |
63 |
--------------------------------------------------------------------------------
/src/routes/guides/deployment-options/aws-via-sst.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: AWS via SST
3 | order: 1
4 | mainNavExclude: true
5 | ---
6 |
7 | [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/).
8 |
9 | ## Quick start
10 |
11 | 1. [Create a SolidStart app](/solid-start/getting-started).
12 |
13 | 2. In your project, init SST.
14 |
15 | ```package-exec
16 | sst@latest init
17 | ```
18 |
19 | 3. This will detect your SolidStart app and ask you to update your `app.config.ts`.
20 |
21 | ```ts title="app.config.ts"
22 | server: {
23 | preset: "aws-lambda-streaming"
24 | }
25 | ```
26 |
27 | 4. When you are ready, you can deploy your app using:
28 |
29 | ```package-exec
30 | sst@latest deploy --stage production
31 | ```
32 |
33 | You can [read the full tutorial on the SST docs](https://sst.dev/docs/start/aws/solid).
34 |
35 | ## Deploy to a Container
36 |
37 | You can also deploy your SolidStart app to a [container](https://sst.dev/docs/start/aws/solid#containers) using SST.
38 |
--------------------------------------------------------------------------------
/src/routes/guides/deployment-options/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Deploying your App",
3 | "pages": [
4 | "aws-via-flightcontrol.mdx",
5 | "aws-via-sst.mdx",
6 | "cloudflare.mdx",
7 | "firebase.mdx",
8 | "netlify.mdx",
9 | "railway.mdx",
10 | "vercel.mdx",
11 | "stormkit.mdx",
12 | "zerops.mdx"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/src/routes/guides/deployment-options/firebase.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Firebase
3 | order: 3
4 | mainNavExclude: true
5 | ---
6 |
7 | [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.
8 | For a detailed overview of the services available, you can visit [Firebase's documentation](https://firebase.google.com/docs).
9 |
10 | Before proceeding, make sure you've already set up a project in your Firebase console.
11 | If 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.
12 |
13 | ## Using the Firebase CLI Tool
14 |
15 | 1. Use your preferred package manager to install the Firebase command-line tool with one of the following commands:
16 |
17 | ```package-install-global
18 | firebase-tools
19 | ```
20 |
21 | 2. Execute the `firebase login` command to ensure that you're logged into the Firebase account associated with your project.
22 |
23 | 3. In the root directory of your Solid project, create two new files: `firebase.json` and `.firebaserc`.
24 |
25 | - In `firebase.json`, add the following code:
26 |
27 | ```json
28 | {
29 | "hosting": {
30 | "public": "dist",
31 | "ignore": []
32 | }
33 | }
34 | ```
35 |
36 | - In `.firebaserc`, insert the following code (replace `` with your Firebase project ID):
37 |
38 | ```bash frame="none"
39 | {
40 | "projects": {
41 | "default": ""
42 | }
43 | }
44 | ```
45 |
46 | 4. Run `npm run build` , followed by `firebase deploy` to build and deploy your project.
47 |
48 | Upon completion, a `Hosting URL` will be displayed, indicating the live deployment of your project.
49 |
50 |
54 |
--------------------------------------------------------------------------------
/src/routes/guides/deployment-options/stormkit.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Stormkit
3 | order: 7
4 | mainNavExclude: true
5 | ---
6 |
7 | [Stormkit](https://www.stormkit.io) is a deployment platform for static websites, single-page applications (SPAs), and serverless functions.
8 |
9 | 1. Log in to Stormkit.
10 |
11 | 2. Using the user interface, import your Solid project from one of the three supported Git providers (GitHub, GitLab, or Bitbucket).
12 |
13 | 3. Navigate to the project’s production environment in Stormkit or create a new environment if needed.
14 |
15 | 4. Verify the build command in your Stormkit configuration. By default, Stormkit CI will run `npm run build` but you can specify a custom build command on this page.
16 |
17 | 5. Check output folder, unless its specified Stormkit will try to upload contents of build folder.
18 |
19 | 6. Click the “Deploy Now” button to deploy your site. Stormkit CI will build your code and upload contents of it.
20 |
21 | Find more details on [Stormkit Documentation](https://stormkit.io/docs).
22 |
--------------------------------------------------------------------------------
/src/routes/guides/styling-components/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Styling your Components",
3 | "pages": [
4 | "sass.mdx",
5 | "less.mdx",
6 | "css-modules.mdx",
7 | "macaron.mdx",
8 | "tailwind.mdx",
9 | "uno.mdx"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/src/routes/guides/styling-components/less.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: LESS
3 | order: 2
4 | mainNavExclude: true
5 | ---
6 |
7 | [LESS](https://lesscss.org/) is a preprocessor based on JavaScript.
8 | It provides the ability to use mixins, variables, and other programmatic tools, making styling code cleaner and less redundant.
9 |
10 | ## Installation
11 |
12 | To utilize LESS in a Solid app, it will need to be installed as a development dependency:
13 |
14 | ```package-install-dev
15 | less
16 | ```
17 |
18 | ## Using LESS in your app
19 |
20 | Start by creating a `.less` file in the `src` directory:
21 |
22 | ```less
23 | //styles.less
24 | .foo {
25 | color: red;
26 | }
27 | .bar {
28 | background-color: blue;
29 | }
30 | ```
31 |
32 | The basic syntax of LESS is very similar to CSS.
33 | However, LESS allows the declaration and usage of variables:
34 |
35 | ```less
36 | //styles.less
37 | @plainred: red;
38 | @plainblue: blue;
39 | .foo {
40 | color: @plainred;
41 | }
42 | .bar {
43 | background-color: @plainblue;
44 | }
45 | ```
46 |
47 | To use these styles in a Solid component, import the `.less` file:
48 |
49 | ```jsx
50 | //component.jsx
51 | import "./styles.less";
52 |
53 | function Component() {
54 | return (
55 | <>
56 |
Hello, world!
57 |
58 | );
59 | }
60 | ```
61 |
62 | By changing the file extension of the imported styles to `.less`, Vite will recognize it as a LESS file and compile it to CSS on demand.
63 |
--------------------------------------------------------------------------------
/src/routes/guides/styling-components/sass.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: SASS
3 | order: 1
4 | mainNavExclude: true
5 | ---
6 |
7 | [SASS](https://sass-lang.com/) is a popular CSS preprocessor that makes authoring CSS easier.
8 | It is a superset of CSS and offers two syntaxes: SCSS and the indented syntax (often referred to as just "SASS").
9 |
10 | ## Installation
11 |
12 | Depending on your package manager, SASS can be installed as a development dependency:
13 |
14 | ```package-install-dev
15 | sass
16 | ```
17 |
18 | ## Convert filename extensions
19 |
20 | After installation, the `.css` filename extensions will have to be changed to `.scss` or `.sass`.
21 | The `.scss` syntax is a strict superset of CSS, while `.sass` offers a more relaxed syntax.
22 | Vite, which is integrated with Solid, supports both.
23 | However, `.scss` is generally recommended.
24 |
25 | ```scss
26 | // Card.scss
27 | .grid {
28 | display: grid;
29 | &-center {
30 | place-items: center;
31 | }
32 | }
33 | .screen {
34 | min-height: 100vh;
35 | }
36 | .card {
37 | height: 160px;
38 | aspect-ratio: 2;
39 | border-radius: 16px;
40 | background-color: white;
41 | box-shadow: 0 0 0 4px hsl(0 0% 0% / 15%);
42 | }
43 | ```
44 |
45 | In a Solid component:
46 |
47 | ```jsx
48 | // Card.jsx
49 | import "./card.scss";
50 |
51 | function Card() {
52 | return (
53 | <>
54 |
55 |
Hello, world!
56 |
57 |
58 | );
59 | }
60 | ```
61 |
62 | By simply changing the file extension from `.css` to `.scss` or `.sass` , Vite will automatically recognize these files and compile SASS to CSS on demand.
63 | When building in production, all SASS files are converted to CSS.
64 | This ensures compatibility with most modern browsers.
65 |
--------------------------------------------------------------------------------
/src/routes/reference/basic-reactivity/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Basic reactivity",
3 | "pages": [
4 | "create-effect.mdx",
5 | "create-memo.mdx",
6 | "create-resource.mdx",
7 | "create-signal.mdx"
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/src/routes/reference/component-apis/create-unique-id.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: createUniqueId
3 | ---
4 |
5 | ```ts
6 | import { createUniqueId } from "solid-js"
7 |
8 | function createUniqueId(): string
9 |
10 | ```
11 |
12 | A universal id generator that is stable across server/browser.
13 |
14 | ```ts
15 | const id = createUniqueId()
16 | ```
17 |
18 | **Note:** on the server this only works under hydratable components.
19 |
--------------------------------------------------------------------------------
/src/routes/reference/component-apis/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Component APIs",
3 | "pages": [
4 | "children.mdx",
5 | "create-context.mdx",
6 | "create-unique-id.mdx",
7 | "lazy.mdx",
8 | "use-context.mdx"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/src/routes/reference/component-apis/lazy.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: lazy
3 | ---
4 |
5 | ```ts
6 | import { lazy } from "solid-js"
7 | import type { Component } from "solid-js"
8 |
9 | function lazy>(
10 | fn: () => Promise<{ default: T }>
11 | ): T & { preload: () => Promise }
12 | ```
13 |
14 | Used to lazy load components to allow for code splitting.
15 | Components are not loaded until rendered.
16 | Lazy loaded components can be used the same as its statically imported counterpart, receiving props etc.
17 | Lazy components trigger ``
18 |
19 | ```tsx
20 | // wrap import
21 | const ComponentA = lazy(() => import("./ComponentA"));
22 |
23 | // use in JSX
24 |
25 | ```
26 |
--------------------------------------------------------------------------------
/src/routes/reference/component-apis/use-context.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: useContext
3 | ---
4 |
5 | Used to grab context within a context provider scope to allow for deep passing of props without having to pass them through each Component function.
6 | It's therefore used in conjunction with [`createContext`](/reference/component-apis/create-context) to consume the data from a Provider scope and thus avoid passing data through intermediate components (prop drilling).
7 |
8 | ```ts
9 | const [state, { increment, decrement }] = useContext(CounterContext)
10 | ```
11 |
12 | ## Recommended usage
13 |
14 | It is often a good idea to wrap `useContext` in a function like so:
15 |
16 | ```ts title="/context/counter-component.tsx"
17 | function useCounterContext() {
18 | const context = useContext(CounterContext)
19 |
20 | if (!context) {
21 | throw new Error("useCounterContext: cannot find a CounterContext")
22 | }
23 |
24 | return context
25 | }
26 | ```
27 |
28 | See the API reference of [createContext](/reference/component-apis/create-context) the API on how to generate a Provider scope.
29 | And check the [Context concepts](/concepts/context) for more information on how to architecture your contexts.
30 |
31 | ## Type signature
32 |
33 | ```ts
34 | import { type Context } from "solid-js"
35 |
36 | function useContext(context: Context): T
37 |
38 | ```
--------------------------------------------------------------------------------
/src/routes/reference/components/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Components",
3 | "pages": [
4 | "dynamic.mdx",
5 | "error-boundary.mdx",
6 | "for.mdx",
7 | "index-component.mdx",
8 | "no-hydration.mdx",
9 | "portal.mdx",
10 | "show.mdx",
11 | "switch-and-match.mdx",
12 | "suspense.mdx",
13 | "suspense-list.mdx"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/src/routes/reference/components/dynamic.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | order: 5
4 | ---
5 |
6 | This component lets you insert an arbitrary Component or tag and passes the props through to it.
7 |
8 | ```tsx
9 | import { Dynamic } from "solid-js/web"
10 | import type { JSX } from "solid-js"
11 |
12 | function Dynamic(
13 | props: T & {
14 | children?: any
15 | component?: Component | string | keyof JSX.IntrinsicElements
16 | }
17 | ): () => JSX.Element
18 | ```
19 |
20 | Here's an example of how you can use it:
21 |
22 | ```tsx
23 |
24 | ```
25 |
26 | ## Props
27 |
28 | | Name | Type | Description |
29 | | :---------- | :---------------------------------------------------------- | :---------------------------------------- |
30 | | `component` | `Component` \| `string` \| `keyof JSX.IntrinsicElements` | The component to render. |
31 | | `children` | `any` | The children to pass to the component. |
32 | | `...` | `T` | Any other props to pass to the component. |
33 |
--------------------------------------------------------------------------------
/src/routes/reference/components/error-boundary.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | order: 5
4 | ---
5 |
6 | The `` component catches errors that occur during the rendering or updating of its children and shows a fallback UI instead.
7 | This includes:
8 |
9 | - Errors that occur while rendering JSX.
10 | - Errors that occur within `createEffect`, `createMemo`, and other state management primitives.
11 | - Errors that occur within `createResource` and other asynchronous state management or data-fetching primitives.
12 |
13 | However, errors occurring outside the rendering process are **not** captured by error boundaries.
14 | For instance:
15 |
16 | - Errors that occur inside event handlers.
17 | - Errors that occur after a `setTimeout`.
18 |
19 | ## Props
20 |
21 | ### `fallback`
22 |
23 | **Type**: `JSX.Element | ((err: any, reset: () => void) => JSX.Element)`
24 |
25 | `fallback` provides content to display when an error occurs.
26 | If a function is passed, it receives two parameters:
27 |
28 | - `err`: The caught error object.
29 | - `reset`: A function that forces the `` to re-render its children and clear the error state.
30 |
31 | If there's an error within the `fallback` itself, however, it is not caught by the same ``.
32 | Instead, it will bubble up to any parent error boundaries.
33 |
34 | ## Example
35 |
36 | ```tsx
37 | import { ErrorBoundary } from "solid-js";
38 | import { ErrorProne } from "./components";
39 |
40 | function Example() {
41 | return (
42 | (
44 |
45 |
{error.message}
46 |
47 |
48 | )}
49 | >
50 |
51 |
52 | );
53 | }
54 | ```
55 |
--------------------------------------------------------------------------------
/src/routes/reference/components/for.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | order: 5
4 | ---
5 |
6 | The `` component is used to render a list of items. It is similar to the `.map()` function in JavaScript.
7 |
8 | ```ts
9 | import { For } from "solid-js"
10 | import type { JSX } from "solid-js"
11 |
12 | function For(props: {
13 | each: readonly T[]
14 | fallback?: JSX.Element
15 | children: (item: T, index: () => number) => U
16 | }): () => U[]
17 | ```
18 |
19 | A referentially keyed loop with efficient updating of only changed items. The callback takes the current item as the first argument:
20 |
21 | ```jsx
22 | Loading...}>
23 | {(item) =>
{item}
}
24 |
25 | ```
26 |
27 | The `each` prop can also be a function that returns a list. This is useful for creating a loop that depends on a state value:
28 |
29 | ```jsx
30 | {(item) =>
{item}
}
31 | ```
32 |
33 | The optional second argument is an index signal:
34 |
35 | ```jsx
36 | Loading...}>
37 | {(item, index) => (
38 |
39 | #{index()} {item}
40 |
41 | )}
42 |
43 | ```
44 |
45 | ## Props
46 |
47 | | Name | Type | Description |
48 | | :--------- | :------------------------------------ | :--------------------------------------------------------------- |
49 | | `each` | `readonly T[]` | The list of items to render. |
50 | | `fallback` | `JSX.Element` | A fallback element to render while the list is loading. |
51 | | `children` | `(item: T, index: () => number) => U` | A callback that returns a JSX element for each item in the list. |
52 |
--------------------------------------------------------------------------------
/src/routes/reference/components/no-hydration.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | ---
4 |
5 | The `` component prevents the client-side hydration process from being applied to its children.
6 | During server-side rendering, components and elements wrapped within `` will render normally on the server, contributing to the initial HTML output.
7 | However, during client-side hydration, Solid bypasses the hydration process for the content within ``.
8 | This means that elements within `` will not have event listeners attached by Solid, and their state will not be managed reactively on the client-side after the initial render.
9 |
10 | :::info[Note]
11 | Placing a `` component inside `` has no effect and will not override the `` behavior.
12 | :::
13 |
14 | ## Example
15 |
16 | ```tsx
17 | import { NoHydration } from "solid-js/web";
18 | import { InteractiveComponent, StaticContent } from "./components";
19 |
20 | function Example() {
21 | return (
22 |
23 |
24 |
25 |
26 |
27 |
28 | );
29 | }
30 | ```
31 |
--------------------------------------------------------------------------------
/src/routes/reference/components/portal.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | ---
4 |
5 | `` is a component that allows you to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
6 |
7 | This is useful when your UI has some elements that need to appear on top of everything else, such as modals and tooltips.
8 |
9 | ```tsx
10 | import { Portal } from "solid-js/web"
11 | import type { JSX } from "solid-js"
12 |
13 | function Portal(props: {
14 | mount?: Node
15 | useShadow?: boolean
16 | isSVG?: boolean
17 | children: JSX.Element
18 | }): Text
19 | ```
20 |
21 | This inserts the element in the mount node.
22 | Useful for inserting Modals outside of the page layout.
23 | Events still propagate through the component hierarchy, however `` will only run on the client and has hydration _disabled_.
24 |
25 | The portal is mounted in a `
` unless the target is the document head.
26 | `useShadow` places the element in a Shadow Root for style isolation, and `isSVG` is required if inserting into an SVG element so that the `
` is not inserted.
27 |
28 | ```tsx
29 |
30 |
My Content
31 |
32 | ```
33 |
34 | ## Props
35 |
36 | | Name | Type | Default | Description |
37 | | :---------- | :-------- | :------------ | :------------------------------------------------ |
38 | | `mount` | `Node` | document.body | The DOM node to mount the portal in. |
39 | | `useShadow` | `boolean` | false | Whether to use a Shadow Root for style isolation. |
40 | | `isSVG` | `boolean` | false | Whether the mount node is an SVG element. |
41 |
--------------------------------------------------------------------------------
/src/routes/reference/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Reference",
3 | "pages": [
4 | "basic-reactivity",
5 | "component-apis",
6 | "components",
7 | "jsx-attributes",
8 | "lifecycle",
9 | "reactive-utilities",
10 | "rendering",
11 | "secondary-primitives",
12 | "store-utilities",
13 | "server-utilities"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/src/routes/reference/jsx-attributes/attr.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: attr:*
3 | ---
4 |
5 | Forces the prop to be treated as an attribute instead of a property.
6 | Useful for Web Components where you want to set attributes.
7 |
8 | ```tsx
9 |
10 | ```
11 |
12 | :::info[Strong-Typing Custom Attributes]
13 | Type definitions are required when using TypeScript.
14 | See the[TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
15 | :::
16 |
--------------------------------------------------------------------------------
/src/routes/reference/jsx-attributes/bool.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: bool:*
3 | ---
4 |
5 | `bool:*` controls the presence of an attribute in an element.
6 | When the value is `truthy` it adds the `attribute` to the element.
7 | Alternatively, when the value is `falsy` it removes the `attribute` from the element.
8 | This attribute is most useful for Web Components.
9 |
10 | ```tsx
11 |
12 | ```
13 |
14 | ```tsx
15 | // Assuming `prop.value` is `truthy`, then it becomes
16 |
17 |
18 | // And when `falsy`, then it becomes
19 |
20 |
21 | ```
22 |
23 | :::info[Strong-Typing Custom Boolean Attributes]
24 | Type definitions are required when using TypeScript.
25 | See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
26 | :::
27 |
--------------------------------------------------------------------------------
/src/routes/reference/jsx-attributes/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "JSX attributes",
3 | "pages": [
4 | "attr.mdx",
5 | "classlist.mdx",
6 | "bool.mdx",
7 | "innerhtml.mdx",
8 | "textcontent.mdx",
9 | "on_.mdx",
10 | "on.mdx",
11 | "once.mdx",
12 | "prop.mdx",
13 | "ref.mdx",
14 | "style.mdx",
15 | "use.mdx"
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/src/routes/reference/jsx-attributes/innerhtml.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: innerHTML
3 | ---
4 |
5 | The `innerHTML` attribute is equivalent to the [`innerHTML` DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML).
6 | This attribute replaces all existing nodes of the element with new nodes generated by parsing the provided string as HTML.
7 |
8 | :::caution
9 |
10 | Using `innerHTML` with unsanitized user-supplied data can introduce security vulnerabilities.
11 |
12 | :::
13 |
--------------------------------------------------------------------------------
/src/routes/reference/jsx-attributes/on.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: on:*
3 | order: 4
4 | ---
5 |
6 | For events with capital letters, listener options, or if you need to attach event handlers directly to a DOM element instead of optimized delegating via the document, use `on:*` in place of `on*`.
7 |
8 | ```tsx
9 |
console.log("Welcome!")} />
10 | ```
11 |
12 | This directly attaches an event handler (via [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)) to the `div`.
13 |
14 | :::info
15 | New in v1.9.0
16 | :::
17 |
18 | An aditional special syntax that allows full control of [`capture`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#capture), [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive), [`once`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#once) and [`signal`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal) is an intersection or combination of `EventListenerObject` & `AddEventListenerOptions`, as follows:
19 |
20 | ```tsx
21 | const handler = {
22 | handleEvent(e) {
23 | console.log(e)
24 | },
25 | once:true,
26 | passive:false,
27 | capture:true
28 | }
29 |
30 |
31 |
32 | // or inline
33 |
34 |
35 | ```
36 |
37 | This new syntax replaces the now deprecated `oncapture:` and it's future proof for any posible new event listener options.
38 |
--------------------------------------------------------------------------------
/src/routes/reference/jsx-attributes/once.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "@once"
3 | order: 5
4 | ---
5 |
6 | Solid's compiler uses a heuristic for reactive wrapping and lazy evaluation of JSX expressions. Does it contain a function call, a property access, or JSX? If yes we wrap it in a getter when passed to components or in an effect if passed to native elements.
7 |
8 | Knowing this heuristic and its limitations, we can reduce overhead of things we know will never change by accessing them outside of the JSX. A lone variable will never be wrapped. We can also tell the compiler not to wrap them by starting the expression with a comment decorator `/* @once */`.
9 |
10 | ```tsx
11 |
12 | ```
13 |
14 | This also works on children.
15 |
16 | ```tsx
17 | {/*@once*/ state.wontUpdate}
18 | ```
19 |
--------------------------------------------------------------------------------
/src/routes/reference/jsx-attributes/prop.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: prop:*
3 | order: 6
4 | ---
5 |
6 | Forces the prop to be treated as a property instead of an attribute.
7 |
8 | ```tsx
9 |
10 | ```
11 |
12 | :::info[Strong-Typing Custom Properties]
13 | Type definitions are required when using TypeScript.
14 | See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
15 | :::
--------------------------------------------------------------------------------
/src/routes/reference/jsx-attributes/ref.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: ref
3 | order: 7
4 | ---
5 |
6 | Refs are a way of getting access to underlying DOM elements in our JSX. While it is true one could just assign an element to a variable, it is more optimal to leave components in the flow of JSX. Refs are assigned at render time but before the elements are connected to the DOM. They come in 2 flavors.
7 |
8 | ```tsx
9 | // variable assigned directly by ref
10 | let myDiv;
11 |
12 | // use onMount or createEffect to read after connected to the DOM
13 | onMount(() => console.log(myDiv));
14 |
15 |
16 |
17 | // Or, callback function (called before connected to the DOM)
18 |
console.log(el)} />
19 | ```
20 |
21 | Refs can also be used on Components. They still need to be attached on the other side.
22 |
23 | ```tsx
24 | function MyComp(props) {
25 | return
26 | }
27 |
28 | function App() {
29 | let myDiv
30 | onMount(() => console.log(myDiv.clientWidth))
31 | return
32 | }
33 | ```
34 |
--------------------------------------------------------------------------------
/src/routes/reference/jsx-attributes/style.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: style
3 | order: 7
4 | ---
5 |
6 | Solid's style attribute lets you provide either a CSS string or an object where keys are CSS property names:
7 |
8 | ```tsx
9 | // string
10 |
11 |
12 | // object
13 |
17 | ```
18 |
19 | Unlike [React's style attribute](https://reactjs.org/docs/dom-elements.html#style), Solid uses **element.style.setProperty** under the hood. This means you need to use the lower-case, dash-separated version of property names instead of the JavaScript camel-cased version, such as `background-color` rather than `backgroundColor`. This actually leads to better performance and consistency with SSR output.
20 |
21 | ```tsx
22 | // string
23 |
24 |
25 | // object
26 |
31 | ```
32 |
33 | This also means you can set CSS variables! For example:
34 |
35 | ```tsx
36 | // set css variable
37 |
38 | ```
39 |
--------------------------------------------------------------------------------
/src/routes/reference/jsx-attributes/textcontent.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: textContent
3 | ---
4 |
5 | The `textContent` attribute is equivalent to the [`textContent` DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent).
6 | This attribute replaces all existing child nodes of the element with a single text node containing the provided string.
7 |
8 | Using `textContent` can improve performance when the element's children are known to be exclusively text, as it bypasses the generic diffing process.
9 |
--------------------------------------------------------------------------------
/src/routes/reference/jsx-attributes/use.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: use:*
3 | order: 5
4 | ---
5 |
6 | These are custom directives. In a sense this is just syntax sugar over ref but allows us to easily attach multiple directives to a single element. A directive is a function with the following signature:
7 |
8 | ```ts
9 | function directive(element: Element, accessor: () => any): void
10 | ```
11 |
12 | Directive functions are called at render time but before being added to the DOM. You can do whatever you'd like in them including create signals, effects, register clean-up etc.
13 |
14 | ```tsx
15 | const [name, setName] = createSignal("")
16 |
17 | function model(el, value) {
18 | const [field, setField] = value()
19 | createRenderEffect(() => (el.value = field()))
20 | el.addEventListener("input", (e) => setField(e.target.value))
21 | };
22 |
23 |
24 | ```
25 |
26 | To register with TypeScript extend the JSX namespace.
27 |
28 | ```ts
29 | declare module "solid-js" {
30 | namespace JSX {
31 | interface Directives {
32 | model: [() => any, (v: any) => any]
33 | }
34 | }
35 | }
36 | ```
37 |
38 | :::caution[Limitations]
39 | Directives only work with native HTML elements (HTML/SVG/MathML/Custom Elements).
40 | Directives are not forwarded and **won't work in user defined components**, such as `` [see also](https://github.com/solidjs/solid/discussions/722)
41 | :::
42 |
--------------------------------------------------------------------------------
/src/routes/reference/lifecycle/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Lifecycle",
3 | "pages": ["on-mount.mdx", "on-cleanup.mdx"]
4 | }
5 |
--------------------------------------------------------------------------------
/src/routes/reference/lifecycle/on-cleanup.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: onCleanup
3 | order: 5
4 | ---
5 |
6 | `onCleanup` registers a cleanup method that executes on disposal and recalculation of the current tracking scope.
7 | Can be used anywhere to clean up any side effects left behind by initialization.
8 |
9 | When used in a Component, it runs when the component is unmounted.
10 | When used in tracking scope, such [`createEffect`](/reference/basic-reactivity/create-effect), [`createMemo`](/reference/basic-reactivity/create-memo) or a [`createRoot`](/reference/reactive-utilities/create-root), it runs when the tracking scope is disposed or refreshed.
11 |
12 | ```ts
13 | import { onCleanup } from "solid-js"
14 |
15 | function onCleanup(fn: () => void): void;
16 | ```
17 |
18 | Without the `onCleanup` function, the event listener would remain attached to the `document` even after the component is removed from the page.
19 | This can cause memory leaks and other issues.
20 |
21 | ```tsx
22 | import { createSignal, onCleanup } from "solid-js"
23 |
24 | const Component = () => {
25 | const [count, setCount] = createSignal(0);
26 |
27 | const handleClick = () => setCount((value) => value + 1);
28 |
29 | document.addEventListener("click", handleClick);
30 |
31 | /**
32 | * Remove the event listener when the component is removed/unmounted from the page.
33 | */
34 | onCleanup(() => {
35 | document.removeEventListener("click", handleClick);
36 | });
37 |
38 | return Document has been clicked {count()} times;
39 | };
40 | ```
41 |
--------------------------------------------------------------------------------
/src/routes/reference/lifecycle/on-mount.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: onMount
3 | order: 5
4 | ---
5 |
6 | Registers a method that runs after initial rendering is done and the elements are mounted to the page.
7 | Ideal for using [refs](/reference/jsx-attributes/ref) and managing other one-time setup.
8 |
9 | ```tsx
10 | import { onMount } from "solid-js"
11 |
12 | function onMount(fn: () => void): void
13 |
14 | ```
15 |
16 | This is an alias for an effect that is non-tracking, meaning that it is equivalent to a [`createEffect`](/reference/basic-reactivity/create-effect) with no dependencies.
17 |
18 | ```tsx
19 | // example that shows how to use onMount to get a reference to an element
20 | import { onMount } from "solid-js"
21 |
22 | function MyComponent() {
23 | let ref: HTMLButtonElement
24 |
25 | // when the component is mounted, the button will be disabled
26 | onMount(() => {
27 | ref.disabled = true
28 | })
29 | return
30 | }
31 | ```
32 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/catch-error.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: catchError
3 | ---
4 |
5 | :::info
6 | New in v1.7.0
7 | :::
8 |
9 | ```tsx
10 | import { catchError } from "solid-js"
11 |
12 | function catchError(tryFn: () => T, onError: (err: any) => void): T
13 | ```
14 |
15 | Wraps a `tryFn` with an error handler that fires if an error occurs below that point.
16 | Only the nearest scope error handlers execute.
17 | Rethrow to trigger up the line.
18 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/create-root.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: createRoot
3 | ---
4 |
5 | ```ts
6 | import { createRoot } from "solid-js"
7 |
8 | function createRoot(fn: (dispose: () => void) => T): T
9 |
10 | ```
11 |
12 | Creates a new non-tracked owner scope that doesn't auto-dispose.
13 | This is useful for nested tracking scopes that you do not wish to release when the parent re-evaluates.
14 |
15 | All Solid code should be wrapped in one of these top level as they ensure that all memory/computations are freed up.
16 | Normally you do not need to worry about this as createRoot is embedded into all render entry functions.
17 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Reactive utilities",
3 | "pages": [
4 | "batch.mdx",
5 | "catch-error.mdx",
6 | "create-root.mdx",
7 | "from.mdx",
8 | "get-owner.mdx",
9 | "index-array.mdx",
10 | "map-array.mdx",
11 | "merge-props.mdx",
12 | "observable.mdx",
13 | "on-util.mdx",
14 | "run-with-owner.mdx",
15 | "split-props.mdx",
16 | "start-transition.mdx",
17 | "untrack.mdx",
18 | "use-transition.mdx"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/from.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: from
3 | ---
4 |
5 | ```tsx
6 | import { from } from "solid-js"
7 |
8 | function from(
9 | producer:
10 | | ((setter: (v: T) => T) => () => void)
11 | | {
12 | subscribe: (
13 | fn: (v: T) => void
14 | ) => (() => void) | { unsubscribe: () => void }
15 | }
16 | ): () => T | undefined
17 |
18 | ```
19 |
20 | A helper to make it easier to interop with external producers like RxJS observables or with Svelte Stores.
21 | This basically turns any subscribable (object with a subscribe method) into a Signal and manages subscription and disposal.
22 |
23 | ```tsx
24 | const signal = from(obsv$)
25 | ```
26 |
27 | It can also take a custom producer function where the function is passed a setter function that returns an unsubscribe function:
28 |
29 | ```tsx
30 | const clock = from((set) => {
31 | const interval = setInterval(() => {
32 | set((v) => v + 1)
33 | }, 1000)
34 |
35 | return () => clearInterval(interval)
36 | })
37 | ```
38 |
39 | ## Arguments
40 |
41 | | Name | Type | Description |
42 | | :------- | :----------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------- |
43 | | producer | `((setter: (v: T) => T) => () => void) \| { subscribe: (fn: (v: T) => void) => (() => void) \| { unsubscribe: () => void }; }` | The producer function or subscribable object |
44 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/get-owner.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: getOwner
3 | ---
4 |
5 | ```tsx
6 | import { getOwner } from "solid-js"
7 | import type { Owner } from "solid-js"
8 |
9 | function getOwner(): Owner
10 |
11 | ```
12 |
13 | Gets the tracking scope that owns the currently running code, e.g., for passing into a later call to `runWithOwner` outside of the current scope.
14 |
15 | Internally, computations (effects, memos, etc.) create owners which are children of their owner, all the way up to the root owner created by `createRoot` or `render`.
16 | In particular, this ownership tree lets Solid automatically clean up a disposed computation by traversing its subtree and calling all `onCleanup` callbacks.
17 | For example, when a createEffect's dependencies change, the effect calls all descendant `onCleanup` callbacks before running the effect function again.
18 | Calling `getOwner` returns the current owner node that is responsible for disposal of the current execution block.
19 |
20 | Components are not computations, so do not create an owner node, but they are typically rendered from a `createEffect` which does, so the result is similar: when a component gets unmounted, all descendant `onCleanup` callbacks get called.
21 | Calling `getOwner` from a component scope returns the owner that is responsible for rendering and unmounting that component.
22 |
23 | Note that the owning tracking scope isn't necessarily tracking.
24 | For example, untrack turns off tracking for the duration of a function (without creating a new tracking scope), as do components created via JSX (``).
25 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/index-array.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: indexArray
3 | ---
4 |
5 | ```tsx
6 | import { indexArray } from "solid-js"
7 |
8 | function indexArray(
9 | list: () => readonly T[],
10 | mapFn: (v: () => T, i: number) => U
11 | ): () => U[]
12 |
13 | ```
14 |
15 | Similar to `mapArray` except it maps by index.
16 | The item is a signal and the index is now the constant.
17 |
18 | Underlying helper for the `` control flow.
19 |
20 | ```tsx
21 | const mapped = indexArray(source, (model) => {
22 | return {
23 | get id() {
24 | return model().id
25 | }
26 | get firstInitial() {
27 | return model().firstName[0];
28 | },
29 | get fullName() {
30 | return `${model().firstName} ${model().lastName}`;
31 | },
32 | }
33 | });
34 | ```
35 |
36 | ## Arguments
37 |
38 | | Name | Type | Description |
39 | | :---- | :----------------------------- | :-------------------- |
40 | | list | `() => readonly T[]` | The list to map. |
41 | | mapFn | `(v: () => T, i: number) => U` | The mapping function. |
42 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/map-array.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: mapArray
3 | ---
4 |
5 | ```ts
6 | import { mapArray } from "solid-js"
7 |
8 | function mapArray(
9 | list: () => readonly T[],
10 | mapFn: (v: T, i: () => number) => U
11 | ): () => U[]
12 |
13 | ```
14 |
15 | Reactive map helper that caches each item by reference to reduce unnecessary mapping on updates.
16 | It only runs the mapping function once per value and then moves or removes it as needed.
17 | The index argument is a signal. The map function itself is not tracking.
18 |
19 | Underlying helper for the `` control flow.
20 |
21 | ```ts
22 | const mapped = mapArray(source, (model) => {
23 | const [name, setName] = createSignal(model.name)
24 | const [description, setDescription] = createSignal(model.description)
25 |
26 | return {
27 | id: model.id,
28 | get name() {
29 | return name()
30 | },
31 | get description() {
32 | return description()
33 | },
34 | setName,
35 | setDescription,
36 | }
37 | })
38 | ```
39 |
40 | ## Arguments
41 |
42 | | Name | Type | Description |
43 | | :---- | :----------------------------- | :----------------------- |
44 | | list | `() => readonly T[]` | The source array to map. |
45 | | mapFn | `(v: T, i: () => number) => U` | The mapping function. |
46 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/merge-props.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: mergeProps
3 | ---
4 |
5 | ```ts
6 | import { mergeProps } from "solid-js"
7 |
8 | function mergeProps(...sources: any): any
9 |
10 | ```
11 |
12 | A reactive object **merge** method.
13 | Useful for setting default props for components in case caller doesn't provide them.
14 | Or cloning the props object including reactive properties.
15 |
16 | This method works by using a proxy and resolving properties in reverse order.
17 | This allows for dynamic tracking of properties that aren't present when the prop object is first merged.
18 |
19 | ```ts
20 | // default props
21 | props = mergeProps({ name: "Smith" }, props)
22 |
23 | // clone props
24 | newProps = mergeProps(props)
25 |
26 | // merge props
27 | props = mergeProps(props, otherProps)
28 | ```
29 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/observable.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: observable
3 | ---
4 |
5 | ```ts
6 | import { observable } from "solid-js"
7 |
8 | function observable(input: () => T): Observable
9 |
10 | ```
11 |
12 | This method takes a signal and produces an Observable.
13 | You can consume it from another Observable library of your choice, typically with the `from` operator.
14 |
15 | ```ts
16 | // How to integrate rxjs with a Solid signal
17 | import { observable } from "solid-js"
18 | import { from } from "rxjs"
19 |
20 | const [s, set] = createSignal(0)
21 |
22 | const obsv$ = from(observable(s))
23 |
24 | obsv$.subscribe((v) => console.log(v))
25 | ```
26 |
27 | You can also use `from` without rxjs; check out this [page](/reference/reactive-utilities/from).
28 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/split-props.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: splitProps
3 | ---
4 |
5 | ```ts
6 | import { splitProps } from "solid-js"
7 |
8 | function splitProps(
9 | props: T,
10 | ...keys: Array<(keyof T)[]>
11 | ): [...parts: Partial]
12 |
13 | ```
14 |
15 | Splits a reactive object by keys.
16 |
17 | It takes a reactive object and any number of arrays of keys; for each array of keys, it will return a reactive object with just those properties of the original object.
18 | The last reactive object in the returned array will have any leftover properties of the original object.
19 |
20 | This can be useful if you want to consume a subset of props and pass the rest to a child.
21 |
22 | ```tsx
23 | function MyComponent(props) {
24 | const [local, others] = splitProps(props, ["children"])
25 |
26 | return (
27 | <>
28 |
{local.children}
29 |
30 |
31 | )
32 | }
33 | ```
34 |
35 | Because `splitProps` takes any number of arrays, we can split a props object as much as we wish (if, for example, we had multiple child components that each required a subset of the props).
36 |
37 | Let's say a component was passed six props:
38 |
39 | ```tsx
40 | ;
41 | // ...
42 |
43 | function MyComponent(props) {
44 | console.log(props) // {a: 1, b: 2, c: 3, d: 4, e: 5, foo: "bar"}
45 | const [vowels, consonants, leftovers] = splitProps(
46 | props,
47 | ["a", "e"],
48 | ["b", "c", "d"]
49 | )
50 | console.log(vowels) // {a: 1, e: 5}
51 | console.log(consonants) // {b: 2, c: 3, d: 4}
52 | console.log(leftovers.foo) // bar
53 | }
54 | ```
55 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/start-transition.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: startTransition
3 | ---
4 |
5 | ```ts
6 | import { startTransition } from "solid-js"
7 |
8 | function startTransition: (fn: () => void) => Promise
9 |
10 | ```
11 |
12 | Similar to `useTransition` except there is no associated pending state.
13 | This one can just be used directly to start the Transition.
14 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/untrack.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: untrack
3 | ---
4 |
5 | Ignores tracking any of the dependencies in the executing code block and returns the value. This helper is useful when a certain `prop` will never update and thus it is ok to use it outside of the tracking scope.
6 |
7 | ```tsx title="component.tsx"
8 | import { untrack } from "solid-js"
9 |
10 | export function Component(props) {
11 | const value = untrack(() => props.value)
12 |
13 | return
{value}
14 | }
15 | }
16 | ```
17 |
18 | ## Initial and Default Values
19 |
20 | It is not necessary to manually untrack values that are suppose to serve as a default or initial value to a signal. Even with the linter configured to enforce tracking, the linter will accept it when a `prop` is prefixed with `default` or `initial` as it is a common pattern to use them as such.
21 |
22 |
23 | ```tsx tab title="initialValue" {5}
24 | // component.tsx
25 | import { createSignal } from "solid-js"
26 |
27 | export function Component(props) {
28 | const [name, setName] = createSignal(props.initialName)
29 |
30 | return
43 | }
44 | }
45 | ```
46 |
--------------------------------------------------------------------------------
/src/routes/reference/reactive-utilities/use-transition.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: useTransition
3 | ---
4 |
5 | ```ts
6 | import { useTransition } from "solid-js"
7 |
8 | function useTransition(): [
9 | pending: () => boolean,
10 | startTransition: (fn: () => void) => Promise
11 | ]
12 |
13 | ```
14 |
15 | Used to batch async updates in a transaction deferring commit until all async processes are complete.
16 | This is tied into Suspense and only tracks resources read under Suspense boundaries.
17 |
18 | ```ts
19 | const [isPending, start] = useTransition();
20 |
21 | // check if transitioning
22 | isPending();
23 |
24 | // wrap in transition
25 | start(() => setSignal(newValue), () => /* transition is done */)
26 | ```
27 |
--------------------------------------------------------------------------------
/src/routes/reference/rendering/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Rendering",
3 | "pages": [
4 | "dev.mdx",
5 | "hydrate.mdx",
6 | "hydration-script.mdx",
7 | "is-server.mdx",
8 | "render.mdx",
9 | "render-to-stream.mdx",
10 | "render-to-string-async.mdx",
11 | "render-to-string.mdx"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/src/routes/reference/rendering/dev.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: DEV
3 | ---
4 |
5 | ```ts
6 | import { DEV } from "solid-js"
7 |
8 | const DEV: object | undefined
9 | ```
10 |
11 | On 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.
12 | Development mode provides some additional checking — e.g. detecting accidental use of multiple instances of Solid — which are removed in production builds.
13 |
14 | If you want code to run only in development mode (most useful in libraries), you can check whether the **DEV** export is defined.
15 | Note that it is always defined on the server, so you may want to combine with [isServer](/reference/rendering/is-server):
16 |
17 | ```ts
18 | import { DEV } from "solid-js"
19 | import { isServer } from "solid-js/web"
20 |
21 | if (DEV && !isServer) {
22 | console.log(...);
23 | }
24 | ```
25 |
--------------------------------------------------------------------------------
/src/routes/reference/rendering/hydrate.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: hydrate
3 | ---
4 |
5 | ```ts
6 | import { hydrate } from "solid-js/web"
7 | import type { JSX } from "solid-js"
8 | import type { MountableElement } from "solid-js/web"
9 |
10 | function hydrate(
11 | fn: () => JSX.Element,
12 | node: MountableElement,
13 | options?: { renderId?: string; owner?: unknown }
14 | ): () => void
15 |
16 | ```
17 |
18 | This method is similar to `render` except that it attempts to rehydrate what is already rendered to the DOM.
19 | When initializing in the browser a page has already been server rendered.
20 |
21 | ```ts
22 | const dispose = hydrate(App, document.getElementById("app"))
23 | ```
24 |
25 | ## Parameters
26 |
27 | | Prop | type | description |
28 | | -------------------- | ------------------ | ----------------------------------------------- |
29 | | fn | `() => JSX.Element`| Function that returns the application code. |
30 | | node | MountableElement | DOM Element to mount the application to |
31 | | options.renderId | string | |
32 | | options.owner | unknown | |
--------------------------------------------------------------------------------
/src/routes/reference/rendering/hydration-script.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: hydrationScript
3 | ---
4 |
5 | ```ts
6 | import { generateHydrationScript, HydrationScript } from "solid-js/web"
7 | import type { JSX } from "solid-js"
8 |
9 | function generateHydrationScript(options: {
10 | nonce?: string
11 | eventNames?: string[]
12 | }): string
13 |
14 | function HydrationScript(props: {
15 | nonce?: string
16 | eventNames?: string[]
17 | }): JSX.Element
18 |
19 | ```
20 |
21 | Hydration Script is a special script that should be placed once on the page to bootstrap hydration before Solid's runtime has loaded.
22 | It comes both as a function that can be called and inserted in an HTML string, or as a Component if you are rendering JSX from the `` tag.
23 |
24 | The options are for the **nonce** to be put on the script tag and any event names for that Solid should capture before scripts have loaded and replay during hydration.
25 | These events are limited to those that Solid delegates which include most UI Events that are composed and bubble.
26 | By default it is only click and input events.
27 |
--------------------------------------------------------------------------------
/src/routes/reference/rendering/is-server.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: isServer
3 | ---
4 |
5 | ```ts
6 | import { isServer } from "solid-js/web"
7 |
8 | const isServer: boolean
9 |
10 | ```
11 |
12 | This indicates that the code is being run as the server or browser bundle.
13 | As the underlying runtimes export this as a constant boolean it allows bundlers to eliminate the code and their used imports from the respective bundles.
14 |
15 | ```ts
16 | import { isServer } from "solid-js/web";
17 |
18 | if (isServer) {
19 | // I will never make it to the browser bundle
20 | } else {
21 | // won't be run on the server;
22 | }
23 | ```
24 |
--------------------------------------------------------------------------------
/src/routes/reference/rendering/render-to-stream.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: renderToStream
3 | ---
4 |
5 | ```ts
6 | import { renderToStream } from "solid-js/web"
7 |
8 | function renderToStream(
9 | fn: () => T,
10 | options?: {
11 | nonce?: string
12 | renderId?: string
13 | onCompleteShell?: () => void
14 | onCompleteAll?: () => void
15 | }
16 | ): {
17 | pipe: (writable: { write: (v: string) => void }) => void
18 | pipeTo: (writable: WritableStream) => void
19 | }
20 |
21 | ```
22 |
23 | This method renders to a stream.
24 | It renders the content synchronously including any Suspense fallback placeholders, and then continues to stream the data and HTML from any async resource as it completes.
25 |
26 | ```ts
27 | // node
28 | renderToStream(App).pipe(res)
29 |
30 | // web stream
31 | const { readable, writable } = new TransformStream()
32 | renderToStream(App).pipeTo(writable)
33 | ```
34 |
35 | `onCompleteShell` fires when synchronous rendering is complete before writing the first flush to the stream out to the browser.
36 | `onCompleteAll` is called when all server Suspense boundaries have settled.
37 | `renderId` is used to namespace renders when having multiple top level roots.
38 |
39 | :::info
40 | This API replaces the previous pipeToWritable and pipeToNodeWritable
41 | APIs.
42 | :::
43 |
44 | ## Options
45 |
46 | | Name | Type | Description |
47 | | --------------- | ---------- | ---------------------------------------------------------------- |
48 | | nonce | string | The nonce to use for inline scripts. |
49 | | renderId | string | The id to use for this render. |
50 | | onCompleteShell | () => void | A callback that fires when the shell is complete. |
51 | | onCompleteAll | () => void | A callback that fires when all Suspense boundaries have settled. |
52 |
--------------------------------------------------------------------------------
/src/routes/reference/rendering/render-to-string-async.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: renderToStringAsync
3 | ---
4 |
5 | ```ts
6 | import { renderToStringAsync } from "solid-js/web"
7 |
8 | function renderToStringAsync(
9 | fn: () => T,
10 | options?: {
11 | timeoutMs?: number
12 | renderId?: string
13 | nonce?: string
14 | }
15 | ): Promise
16 |
17 | ```
18 |
19 | Same as `renderToString` except that it will wait for all `` boundaries to resolve before returning the results.
20 | Resource data is automatically serialized into the script tag and will be hydrated on client load.
21 |
22 | `renderId` is used to namespace renders when having multiple top level roots.
23 |
24 | ```ts
25 | const html = await renderToStringAsync(App)
26 | ```
27 |
28 | ## Options
29 |
30 | | Name | Type | Description |
31 | | ----------- | -------- | -------------------------------------------------------------------------------------------- |
32 | | `timeoutMs` | `number` | The number of milliseconds to wait for a `` boundary to resolve before timing out. |
33 | | `renderId` | `string` | The id to use for the render. |
34 | | `nonce` | `string` | The nonce to use for the script tag. |
35 |
--------------------------------------------------------------------------------
/src/routes/reference/rendering/render-to-string.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: renderToString
3 | ---
4 |
5 | ```ts
6 | import { renderToString } from "solid-js/web"
7 |
8 | function renderToString(
9 | fn: () => T,
10 | options?: {
11 | nonce?: string
12 | renderId?: string
13 | }
14 | ): string
15 |
16 | ```
17 |
18 | Renders to a string synchronously.
19 | The function also generates a script tag for progressive hydration.
20 | Options include eventNames to listen to before the page loads and play back on hydration, and nonce to put on the script tag.
21 |
22 | `renderId` is used to namespace renders when having multiple top level roots.
23 |
24 | ```ts
25 | const html = renderToString(App)
26 | ```
27 |
28 | ## Options
29 |
30 | | Name | Type | Description |
31 | | ---------- | -------- | ------------------------------------ |
32 | | `nonce` | `string` | The nonce to use for the script tag. |
33 | | `renderId` | `string` | The id to use for the script tag. |
34 |
--------------------------------------------------------------------------------
/src/routes/reference/rendering/render.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: render
3 | ---
4 |
5 | ```ts
6 | import { render } from "solid-js/web"
7 | import type { JSX } from "solid-js"
8 | import type { MountableElement } from "solid-js/web"
9 |
10 | function render(
11 | code: () => JSX.Element,
12 | element: MountableElement
13 | ): () => void
14 |
15 | ```
16 |
17 | This is the browser app entry point.
18 | Provide a top-level component function and an element to mount to.
19 | It is recommended this element be empty: while `render` will just append children, the returned dispose function will remove all children.
20 |
21 | ```ts
22 | const dispose = render(App, document.getElementById("app"))
23 | // or
24 | const dispose = render(() => , document.getElementById("app"))
25 | ```
26 |
27 | It's important that the first argument is a function: do not pass JSX directly (as in `render(, ...)`), because this will call App before render can set up a root to track signal dependencies within App.
28 |
29 | ## Parameters
30 |
31 | | Argument | Type | Description |
32 | | -------------------- | ------------------- | ----------------------------------------------- |
33 | | code | `() => JSX.Element` | Function that returns the application code. |
34 | | element | MountableElement | DOM Element to mount the application to |
--------------------------------------------------------------------------------
/src/routes/reference/secondary-primitives/create-deferred.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: createDeferred
3 | ---
4 |
5 | ```ts
6 | import { createDeferred } from "solid-js"
7 |
8 | function createDeferred(
9 | source: () => T,
10 | options?: {
11 | timeoutMs?: number
12 | equals?: false | ((prev: T, next: T) => boolean)
13 | name?: string
14 | }
15 | ): () => T
16 |
17 | ```
18 |
19 | Creates a readonly that only notifies downstream changes when the browser is idle.
20 | `timeoutMs` is the maximum time to wait before forcing the update.
21 |
22 | ## Options
23 |
24 | | Name | Type | Description |
25 | | --------- | ------------------------------------------ | ------------------------------------------------------ |
26 | | timeoutMs | `number` | The maximum time to wait before forcing the update. |
27 | | equals | `false or ((prev: T, next: T) => boolean)` | A function that returns true if the value has changed. |
28 | | name | `string` | The name of the readonly. |
29 |
30 |
--------------------------------------------------------------------------------
/src/routes/reference/secondary-primitives/create-reaction.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: createReaction
3 | ---
4 |
5 | ```ts
6 | import { createReaction } from "solid-js"
7 |
8 | function createReaction(onInvalidate: () => void): (fn: () => void) => void
9 |
10 | ```
11 |
12 | Sometimes it is useful to separate tracking from re-execution.
13 | This primitive registers a side effect that is run the first time the expression wrapped by the returned tracking function is notified of a change.
14 |
15 | ```ts
16 | const [s, set] = createSignal("start")
17 |
18 | const track = createReaction(() => console.log("something"))
19 |
20 | // run the reaction next time `s` changes.
21 | track(() => s())
22 |
23 | set("end") // "something"
24 |
25 | set("final") // no-op since the reaction only runs on the first update, need to call `track` again.
26 | ```
27 |
--------------------------------------------------------------------------------
/src/routes/reference/secondary-primitives/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Secondary primitives",
3 | "pages": [
4 | "create-computed.mdx",
5 | "create-deferred.mdx",
6 | "create-reaction.mdx",
7 | "create-render-effect.mdx",
8 | "create-selector.mdx"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/src/routes/reference/server-utilities/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Server utilities",
3 | "pages": [
4 | "get-request-event.mdx"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/src/routes/reference/store-utilities/create-mutable.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: createMutable
3 | ---
4 |
5 | `createMutable` creates a new mutable Store proxy object that provides a way to selectively trigger updates only when values change.
6 |
7 | By 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.
8 |
9 | ```tsx
10 | import { createMutable } from "solid-js/store"
11 | import type { Store, StoreNode } from "solid-js/store"
12 |
13 | function createMutable(state: T | Store): Store;
14 | ```
15 |
16 | :::info
17 | It'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.
18 |
19 | For a more robust alternative, it is generally recommended to use `createStore` instead.
20 | Additionally, the [`produce`](/reference/store-utilities/produce) utility can provide many of these same benefits without the associated downsides.
21 | :::
22 |
23 | ```tsx
24 | import { createMutable } from "solid-js/store"
25 |
26 | const state = createMutable({
27 | someValue: 0,
28 | list: [],
29 | });
30 |
31 | // read value
32 | state.someValue;
33 |
34 | // set value
35 | state.someValue = 5;
36 |
37 | state.list.push(anotherValue);
38 | ```
39 |
40 | Mutables support setters along with getters.
41 |
42 | ```tsx
43 | const user = createMutable({
44 | firstName: "John",
45 | lastName: "Smith",
46 | get fullName() {
47 | return `${this.firstName} ${this.lastName}`;
48 | },
49 | set setFullName(value) {
50 | [this.firstName, this.lastName] = value.split(" ");
51 | },
52 | });
53 | ```
54 |
--------------------------------------------------------------------------------
/src/routes/reference/store-utilities/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Store utilities",
3 | "pages": [
4 | "create-mutable.mdx",
5 | "create-store.mdx",
6 | "modify-mutable.mdx",
7 | "produce.mdx",
8 | "reconcile.mdx",
9 | "unwrap.mdx"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/src/routes/reference/store-utilities/produce.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: produce
3 | ---
4 |
5 | `produce` is an [Immer](https://immerjs.github.io/immer/) inspired API for Solid's Store objects that allows the store to be mutated inside the `produce` function.
6 |
7 | ```ts
8 | import { produce } from "solid-js/store"
9 | import type { NotWrappable, Store } from "solid-js/store"
10 |
11 | function produce(
12 | fn: (state: T) => void
13 | ): (
14 | state: T extends NotWrappable ? T : Store
15 | ) => T extends NotWrappable ? T : Store;
16 | ```
17 |
18 | For use with `createStore`:
19 |
20 | ```tsx
21 | import { produce } from "solid-js/store";
22 |
23 | const [state, setState] = createStore({
24 | user: {
25 | name: "John",
26 | age: 30,
27 | },
28 | list: ["book", "pen"],
29 | });
30 |
31 | setState(
32 | produce((state) => {
33 | state.user.name = "Jane";
34 | state.list.push("pencil");
35 | })
36 | );
37 | ```
38 |
--------------------------------------------------------------------------------
/src/routes/reference/store-utilities/reconcile.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: reconcile
3 | ---
4 |
5 | `reconcile` is designed for diffing data changes in situations where granular updates cannot be applied.
6 | This is useful when dealing with immutable data from stores or handling large API responses.
7 |
8 | ```tsx
9 | import { reconcile } from "solid-js/store"
10 | import type { NotWrappable, Store } from "solid-js/store"
11 |
12 | function reconcile(
13 | value: T | Store,
14 | options?: {
15 | key?: string | null;
16 | merge?: boolean;
17 | } = { key: "id" }
18 | ): (
19 | state: T extends NotWrappable ? T : Store
20 | ) => T extends NotWrappable ? T : Store
21 | ```
22 |
23 | `reconcile` has a `key` option that can be used when available to match items.
24 | The `value` accepts either a value of type `T` or a Store containing values of type `T`.
25 | This represents the data to be reconciled.
26 |
27 | The `reconcile` function helps manage data changes by performing a diffing process, making it particularly handy in scenarios where applying granular updates is challenging or inefficient.
28 |
29 | The `key` and `merge` options provide flexibility to customize the reconciliation process based on specific needs.
30 |
31 | ```ts
32 | // subscribing to an observable
33 | const unsubscribe = store.subscribe(({ todos }) => (
34 | setState('todos', reconcile(todos));
35 | );
36 | onCleanup(() => unsubscribe());
37 |
38 | ```
39 |
40 | ##### Options
41 |
42 | | Option | Type | Default | Description |
43 | | ------ | ------- | ------- | ---------------------------------- |
44 | | key | string | "id" | Specifies the key to be used for matching items during reconciliation |
45 | | merge | boolean | false | When merge is false, referential checks are performed where possible to determine equality, and items that are not referentially equal are replaced. When merge is true, all diffing is pushed to the leaves, effectively morphing the previous data to the new value. |
46 |
--------------------------------------------------------------------------------
/src/routes/reference/store-utilities/unwrap.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: unwrap
3 | ---
4 |
5 | `unwrap` returns the underlying data in the store without a proxy.
6 |
7 | ```tsx
8 | import { unwrap } from "solid-js/store"
9 | import type { Store } from "solid-js/store"
10 |
11 | function unwrap(store: Store): T
12 | ```
13 |
--------------------------------------------------------------------------------
/src/routes/solid-meta/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "root",
3 | "pages": ["index.mdx", "getting-started"]
4 | }
5 |
--------------------------------------------------------------------------------
/src/routes/solid-meta/getting-started/client-setup.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Client setup
3 | order: 2
4 | ---
5 |
6 | You can inject a tag into the `` by rendering one of the head tag components when necessary.
7 | No special requirements are needed on the client side.
8 |
9 | ```js
10 | import { MetaProvider, Title, Link, Meta } from "@solidjs/meta";
11 |
12 | const App = () => (
13 |
14 |
15 | Title of page
16 |
17 |
18 | // ...
19 |
20 |
21 | );
22 | ```
23 |
--------------------------------------------------------------------------------
/src/routes/solid-meta/getting-started/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Getting started",
3 | "pages": [
4 | "installation-and-setup.mdx",
5 | "client-setup.mdx",
6 | "server-setup.mdx"
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/src/routes/solid-meta/getting-started/server-setup.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Server setup
3 | order: 3
4 | ---
5 |
6 | For server setup, wrap your application with [`MetaProvider`](/solid-meta/reference/meta/metaprovider) on the server.
7 | This component uses a `tags[]` array to pass down your head tags as part of your server-rendered payload.
8 | Once rendered on the server, the component updates this array to include the tags.
9 |
10 | ```js
11 | import { renderToString, getAssets } from "solid-js/web";
12 | import { MetaProvider } from "@solidjs/meta";
13 | import App from "./App";
14 |
15 | // ... within the context of a request ...
16 | const app = renderToString(() => (
17 |
18 |
19 |
20 | ));
21 |
22 | res.send(`
23 |
24 |
25 |
26 | ${getAssets()}
27 |
28 |
29 |
${app}
30 |
31 |
32 | `);
33 | ```
34 |
--------------------------------------------------------------------------------
/src/routes/solid-meta/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Overview
3 | mainNavExclude: true
4 | ---
5 |
6 | # Overview
7 |
8 | Solid Meta offers asynchronous SSR-ready Document Head management for Solid Applications, based on [React Head](https://github.com/tizmagik/react-head)
9 |
10 | With Solid Meta, you can define `document.head` tags at any level of your component hierarchy.
11 | This helps you to manage tags conveniently, especially when contextual information for specific tags are buried deep within your component hierarchy.
12 |
13 | This library has no dependencies and is designed to seamlessly integrate with asynchronous rendering.
14 |
--------------------------------------------------------------------------------
/src/routes/solid-meta/reference/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Reference",
3 | "pages": ["meta"]
4 | }
5 |
--------------------------------------------------------------------------------
/src/routes/solid-meta/reference/meta/base.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Base
3 | order: 5
4 | ---
5 |
6 | `Base` is a component that specifies the base URL for all relative URLs in the document.
7 | This provides a way to define the [`base`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) element of your document's `head`.
8 |
9 | ```tsx twoslash
10 | import { Base } from "@solidjs/meta";
11 |
12 | ;
13 | ```
14 |
15 | ## Usage
16 |
17 | ### Adding `base` tag
18 |
19 | ```tsx twoslash
20 | import { MetaProvider, Base } from "@solidjs/meta";
21 |
22 | export default function Root() {
23 | return (
24 |
25 |
26 |
27 | );
28 | }
29 | ```
--------------------------------------------------------------------------------
/src/routes/solid-meta/reference/meta/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Meta reference",
3 | "pages": [
4 | "title.mdx",
5 | "link.mdx",
6 | "meta.mdx",
7 | "style.mdx",
8 | "base.mdx",
9 | "metaprovider.mdx"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/src/routes/solid-meta/reference/meta/link.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Link
3 | order: 2
4 | ---
5 |
6 | The Link component establishes a connection between the page and an external resource.
7 | Commonly, this is used for linking stylesheets and other associations.
8 |
9 | This component renders a [`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element within the document's ``.
10 |
11 | ```tsx twoslash
12 | import { Link } from "@solidjs/meta";
13 | ;
14 | ```
15 |
16 | ## Usage
17 |
18 | ### Adding a favicon
19 |
20 | To add a favicon in an app, `` can be used to point to the asset:
21 |
22 | ```tsx twoslash
23 | import { MetaProvider, Link } from "@solidjs/meta";
24 |
25 | export default function Root() {
26 | return (
27 |
28 |
29 |
30 | );
31 | }
32 | ```
33 |
34 | ### Using an emoji as a favicon
35 |
36 | To use an emoji as a favicon, first create a function that returns a data URI containing an SVG image:
37 |
38 | ```jsx
39 | const emojiSvg = (emoji) => {
40 | return (
41 | `data:image/svg+xml;utf8,` +
42 | ``
43 | );
44 | };
45 | ```
46 |
47 | Following this, include the emoji as an argument within that function in the `href` property of the Link component:
48 |
49 | ```jsx
50 | import { MetaProvider, Link } from "@solidjs/meta";
51 |
52 | export default function Root() {
53 | return (
54 |
55 |
56 |
57 | );
58 | }
59 | ```
60 |
--------------------------------------------------------------------------------
/src/routes/solid-meta/reference/meta/meta.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Meta
3 | order: 3
4 | ---
5 |
6 | The `` component represents metadata that cannot be represented by other HTML elements.
7 | It is a wrapper for the native [`meta`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) element and has the same properties.
8 |
9 | ```tsx twoslash
10 | import { Meta } from "@solidjs/meta";
11 |
12 | ;
13 | ```
14 |
15 |
16 | `Meta` components can be placed in the [`MetaProvider`](/solid-meta/reference/meta/metaprovider) or added throughout the application for additional metadata or override parents.
17 | `Meta` tags are considered the same and will be overridden if `name` attributes match.
18 | ## Usage
19 |
20 | ### Adding `meta` tag
21 |
22 | ```tsx twoslash {6-8}
23 | import { MetaProvider, Meta } from "@solidjs/meta";
24 |
25 | export default function Root() {
26 | return (
27 |
28 |
29 |
30 |
31 |
32 | );
33 | }
34 | ```
--------------------------------------------------------------------------------
/src/routes/solid-meta/reference/meta/metaprovider.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: MetaProvider
3 | order: 6
4 | ---
5 |
6 | `MetaProvider` is a parent component responsible for wrapping all the metadata components.
7 | All components that are contained within this will be added to the application ``
8 |
9 | ```tsx twoslash
10 | import { MetaProvider } from "@solidjs/meta";
11 |
12 | // add meta components;
13 | ```
--------------------------------------------------------------------------------
/src/routes/solid-meta/reference/meta/style.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Style
3 | order: 4
4 | ---
5 |
6 | `Style` is a component that adds the [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element to your document's `head`.
7 |
8 | ```tsx twoslash
9 | import { Style } from "@solidjs/meta";
10 |
11 | ;
18 | ```
19 |
20 | ## Usage
21 |
22 | ### Adding `style` tag
23 |
24 | The `Style` component can add CSS to style elements within your application.
25 | It is recommended to add styles in an external stylesheet and use a `Link` instead, rather than using this component, however.
26 |
27 | :::tip[Note]
28 | Styles within the `Style` component are not scoped.
29 | :::
30 |
31 | ```tsx twoslash
32 | import { MetaProvider, Style } from "@solidjs/meta";
33 |
34 | export default function Root() {
35 | return (
36 |
37 |
42 |
43 | );
44 | }
45 | ```
46 |
--------------------------------------------------------------------------------
/src/routes/solid-meta/reference/meta/title.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Title
3 | order: 1
4 | ---
5 |
6 | `Title` is a component that renders the [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) element.
7 | This will render the title of the page in the browser tab.
8 |
9 | ```tsx twoslash
10 | import { Title } from "@solidjs/meta";
11 | My Site;
12 | ```
13 |
14 | ## Usage
15 |
16 | ### Setting the title for your site
17 |
18 | ```tsx twoslash title="root.tsx" {5}
19 | import { MetaProvider, Title } from "@solidjs/meta";
20 | export default function Root() {
21 | return (
22 |
23 | Default Application Title
24 |
25 | );
26 | }
27 | ```
--------------------------------------------------------------------------------
/src/routes/solid-router/advanced-concepts/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Advanced concepts",
3 | "pages": ["lazy-loading.mdx"]
4 | }
5 |
--------------------------------------------------------------------------------
/src/routes/solid-router/advanced-concepts/lazy-loading.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Lazy loading
3 | ---
4 |
5 | Lazy loading allows you to load only the necessary resources when they are needed.
6 | This can be useful when you have a large application with a lot of routes and components, and you want to reduce the initial load time.
7 |
8 | In Solid Router, you can lazy load components using the `lazy` function from Solid:
9 |
10 | ```jsx
11 | import { lazy } from "solid-js";
12 | import { Router, Route } from "@solidjs/router";
13 |
14 | const Home = lazy(() => import("./Home"));
15 |
16 | const Users = lazy(() => import("./Users"));
17 |
18 | const App = () => (
19 |
20 |
21 |
22 |
23 | );
24 | ```
25 |
26 | In the example above, the `Users` component is lazy loaded using the `lazy` function.
27 | The `lazy` function takes a function that returns a promise, which resolves to the component you want to load.
28 | When the route is matched, the component will be loaded and rendered.
29 |
--------------------------------------------------------------------------------
/src/routes/solid-router/concepts/catch-all.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Catch-all routes
3 | ---
4 |
5 | Catch-all routes are used to match any URL that does not match any other route in the application.
6 | This is useful for displaying a 404 page or redirecting to a specific route when a user enters an invalid URL.
7 |
8 | To create a catch-all route, place a route with an asterisk (`*`) as the path at the end of the route list.
9 | Optionally, you can name the parameter to access the unmatched part of the URL.
10 |
11 | ```jsx
12 | import { Router, Route } from "@solidjs/router";
13 |
14 | import Home from "./Home";
15 | import About from "./About";
16 | import NotFound from "./NotFound";
17 |
18 | const App = () => (
19 |
20 |
21 |
22 |
23 |
24 | );
25 | ```
26 |
27 | Now, if a user navigates to a URL that does not match `/home` or `/about`, the `NotFound` component will be rendered.
28 |
--------------------------------------------------------------------------------
/src/routes/solid-router/concepts/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Concepts",
3 | "pages": [
4 | "navigation.mdx",
5 | "path-parameters.mdx",
6 | "search-parameters.mdx",
7 | "catch-all.mdx",
8 | "nesting.mdx",
9 | "layouts.mdx",
10 | "alternative-routers.mdx",
11 | "actions.mdx"
12 | ]
13 | }
--------------------------------------------------------------------------------
/src/routes/solid-router/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "root",
3 | "pages": [
4 | "index.mdx",
5 | "getting-started",
6 | "concepts",
7 | "rendering-modes",
8 | "advanced-concepts",
9 | "guides"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/src/routes/solid-router/getting-started/component.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Component routing"
3 | ---
4 |
5 | In Solid Router, routes can be defined directly in an application's template using JSX.
6 | This is the most common way to define routes in Solid Router.
7 |
8 | To define routes using JSX, the [`Route`](/solid-router/reference/components/route) is added to the [``](/solid-router/reference/components/router) component for each path you want to define:
9 |
10 | ```jsx
11 | import { render } from "solid-js/web";
12 | import { Router, Route } from "@solidjs/router";
13 |
14 | import Home from "./routes/Home";
15 |
16 | render(
17 | () => (
18 |
19 |
20 |
21 | ),
22 | document.getElementById("app")
23 | );
24 | ```
25 |
26 | The 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.
27 | In the example above, the `Home` page is rendered when the user navigates to the root path `/`.
28 |
29 | To apply multiple routes to the router, add additional `Route` components to the `Router`:
30 |
31 | ```jsx
32 | import { render } from "solid-js/web";
33 | import { Router, Route } from "@solidjs/router";
34 |
35 | import Home from "./routes/index.jsx";
36 | import About from "./routes/about.jsx";
37 |
38 | render(
39 | () => (
40 |
41 |
42 |
44 |
45 | );
46 | }
47 | ```
48 |
49 | See this example in [StackBlitz](https://stackblitz.com/github/solidjs/solid-start/tree/main/examples/bare?file=src%2Fapp.tsx)
50 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/entrypoints/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Entrypoints",
3 | "pages": [
4 | "app-config.mdx",
5 | "app.mdx",
6 | "entry-client.mdx",
7 | "entry-server.mdx"
8 | ]
9 | }
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/entrypoints/entry-client.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: entry-client.tsx
3 | ---
4 |
5 | `entry-client.tsx` is where an application starts in the browser.
6 | It does this by passing [``](/solid-start/reference/client/start-client) and a DOM Element (the mounting point), to the [`mount`](/solid-start/reference/client/mount) function.
7 |
8 | ```tsx
9 | import { mount, StartClient } from "@solidjs/start/client";
10 |
11 | mount(() => , document.getElementById("app")!);
12 | ```
13 |
14 | This file is an ideal place to run any client specific code that is needed on startup, such as registering service workers.
15 | This is important if you are performing client-only rendering or using other modes of server-side rendering.
16 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/entrypoints/entry-server.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: entry-server.tsx
3 | ---
4 |
5 | `entry-server.tsx` is where an application starts on the server.
6 | This happens by `entry-server.tsx` providing a document component to [``](/solid-start/reference/server/start-server) and passing it into [`createHandler`](/solid-start/reference/server/create-handler) for server side rendering.
7 | A typical `entry-server.tsx` for a new project looks like this:
8 |
9 | ```tsx
10 | import { createHandler, StartServer } from "@solidjs/start/server";
11 |
12 | export default createHandler(() => (
13 | (
15 |
16 |
17 |
18 |
19 |
20 | {assets}
21 |
22 |
23 |
{children}
24 | {scripts}
25 |
26 |
27 | )}
28 | />
29 | ));
30 | ```
31 |
32 | For setting different SSR modes (sync | async | stream), see [`createHandler`](/solid-start/reference/server/create-handler).
33 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/routing/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Routing",
3 | "pages": [
4 | "file-routes.mdx"
5 | ]
6 | }
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/routing/file-routes.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: FileRoutes
3 | ---
4 |
5 | `FileRoutes` is a component that creates a [`Route`](/solid-router/reference/components/route) for each file in the `/src/routes` directory.
6 | This creates a `route` export to define the route configuration for the router of your choice.
7 |
8 | For example, using [`solid-router`](/solid-router) would look like the following:
9 |
10 | ```tsx {7-9} title="app.tsx"
11 | import { Suspense } from "solid-js";
12 | import { Router } from "@solidjs/router";
13 | import { FileRoutes } from "@solidjs/start/router";
14 |
15 | export default function App() {
16 | return (
17 | {props.children}}>
18 |
19 |
20 | );
21 | }
22 | ```
23 |
24 | See the [SolidStart routing guide](/solid-start/building-your-application/routing) for more details.
25 |
26 | :::caution
27 | If removing the `FileRoutes` component from your `app.tsx` file, you will need to manually add all of your routes.
28 |
29 | While this is possible it does come with tradeoffs.
30 | For example, optimizations such as preloaded script tags will no longer be available.
31 |
32 | :::
33 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/server/create-handler.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: createHandler
3 | ---
4 |
5 | The `createHandler` is used to start the server in [`entry-server.tsx`](/solid-start/reference/entrypoints/entry-server).
6 | It takes a function that returns a static document (often created with [``](/solid-start/reference/server/start-server)), and serves it using one of the three function for server side rendering (SSR):
7 |
8 | - [`renderToString`](/reference/rendering/render-to-string) - "sync"
9 | - [`renderToStringAsync`](/reference/rendering/render-to-string-async) - "async"
10 | - [`renderToStream`](/reference/rendering/render-to-stream) - "stream"
11 |
12 | The SSR mode can be configured through the `mode` property on the options object:
13 |
14 | ```tsx
15 | import { createHandler, StartServer } from "@solidjs/start/server";
16 |
17 | export default createHandler(() => (
18 |
20 | ), {
21 | mode: "async"
22 | });
23 | ```
24 |
25 | ## Parameters
26 |
27 | | Argument | Type | Default | Description |
28 | | ------------ | ------------------------ | -------- | ----------------------------------------------------------------- |
29 | | fn | fn: (context: PageEvent) | | A function that returns the static document for your application. |
30 | | options.mode | string | "stream" | The SSR mode. Options are 'sync', 'async' and 'stream'. |
31 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/server/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Server",
3 | "pages": [
4 | "get.mdx",
5 | "use-server.mdx",
6 | "http-header.mdx",
7 | "http-status-code.mdx",
8 | "start-server.mdx",
9 | "create-handler.mdx",
10 | "get-server-function-meta.mdx",
11 | "create-middleware.mdx"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/server/get-server-function-meta.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: getServerFunctionMeta
3 | ---
4 |
5 | `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.
6 |
7 | This `id` property can and _will_ change between builds.
8 |
9 | ```tsx
10 | import { getServerFunctionMeta } from "@solidjs/start";
11 |
12 | // or some in-memory db
13 | const appCache: any = globalThis;
14 |
15 | const counter = async () => {
16 | "use server";
17 | const { id } = getServerFunctionMeta()!;
18 | const key = `counter_${id}`;
19 | appCache[key] = appCache[key] ?? 0;
20 | appCache[key]++;
21 |
22 | return appCache[key] as number;
23 | };
24 | ```
25 |
26 | ## Parameters
27 |
28 | `getServerFunctionMeta(): { id: string }`
29 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/server/get.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: GET
3 | ---
4 |
5 | `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).
6 | When 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.
7 |
8 | For example, `GET` can be used to make a streaming promise with a 60 second cache life:
9 |
10 | ```tsx {4, 8}
11 | import { json } from "@solidjs/router";
12 | import { GET } from "@solidjs/start";
13 |
14 | const hello = GET(async (name: string) => {
15 | "use server";
16 | return json(
17 | { hello: new Promise((r) => setTimeout(() => r(name), 1000)) },
18 | { headers: { "cache-control": "max-age=60" } }
19 | );
20 | });
21 | ```
22 |
23 | ## Parameters
24 |
25 | `GET any>(fn: T): (...args: Parameters) => ReturnType`
26 |
--------------------------------------------------------------------------------
/src/routes/solid-start/reference/server/http-header.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: HttpHeader
3 | ---
4 |
5 | `HttpHeader` provides a way to set headers on HTTPs response sent by the server.
6 |
7 | ```tsx
8 | import { HttpHeader } from "@solidjs/start";
9 |
10 | ;
11 | ```
12 |
13 | ## Setting a header for catch-all routes
14 |
15 | ```tsx title="routes/*404.tsx"
16 | import { HttpHeader, HttpStatusCode } from "@solidjs/start";
17 |
18 | export default function NotFound() {
19 | return (
20 |