-
Count: {count()}{/* ✅ will update whenever `count()` changes. */}
+
Count: {count()}
+ {/* ✅ will update whenever `count()` changes. */}
diff --git a/src/routes/concepts/refs.mdx b/src/routes/concepts/refs.mdx
index b6d0cc019..a10a90c7c 100644
--- a/src/routes/concepts/refs.mdx
+++ b/src/routes/concepts/refs.mdx
@@ -10,7 +10,7 @@ tags:
- directives
- access
- forward
-version: '1.0'
+version: "1.0"
description: >-
Access and manipulate DOM elements directly using refs, forward refs between
components, and create custom directives.
@@ -34,9 +34,9 @@ JSX can be used as a value and assigned to a variable when looking to directly a
```tsx
function Component() {
- const myElement =
My Element
+ const myElement =
My Element
;
- return
{myElement}
+ return
{myElement}
;
}
```
@@ -60,7 +60,7 @@ function Component() {
- )
+ );
}
```
@@ -68,9 +68,11 @@ These assignments occur at _creation time_ prior to the element being added to t
If access to an element is needed before it is added to the DOM, you can use the callback form of `ref`:
```jsx
-
{
- myElement = el // el is created but not yet added to the DOM
- }}>
+
{
+ myElement = el; // el is created but not yet added to the DOM
+ }}
+>
My Element
```
@@ -83,6 +85,7 @@ confirm it.
```tsx
let myElement!: HTMLDivElement;
```
+
:::
### Signals as refs
@@ -128,21 +131,21 @@ To access the `ref` in the child component, it is passed as a prop:
```tsx
// Parent component
-import { Canvas } from "./Canvas.jsx"
+import { Canvas } from "./Canvas.jsx";
function ParentComponent() {
- let canvasRef
+ let canvasRef;
const animateCanvas = () => {
// Manipulate the canvas using canvasRef...
- }
+ };
return (
- )
+ );
}
// Child component
@@ -151,7 +154,7 @@ function Canvas(props) {
{/* Assign the ref to the canvas element */}
- )
+ );
}
```
@@ -172,8 +175,7 @@ Directives are like callback refs but they enable two extra features:
A directive is essentially a function with a specific signature:
```typescript
-function directive(element: Element, accessor: () => any): void
-
+function directive(element: Element, accessor: () => any): void;
```
- `element`: The DOM element that the directive is applied to.
diff --git a/src/routes/concepts/signals.mdx b/src/routes/concepts/signals.mdx
index ec43c0b37..909443c31 100644
--- a/src/routes/concepts/signals.mdx
+++ b/src/routes/concepts/signals.mdx
@@ -11,7 +11,7 @@ tags:
- getter
- setter
- fundamentals
-version: '1.0'
+version: "1.0"
description: >-
Create reactive state with signals - the foundation of Solid's reactivity
system for automatic UI updates and tracking.
@@ -94,7 +94,7 @@ function Counter() {
```
:::note
-A tracking scope can be created by [`createEffect`](/reference/basic-reactivity/create-effect) or [`createMemo`](/reference/basic-reactivity/create-memo), which are other Solid primitives.
+A tracking scope can be created by [`createEffect`](/reference/basic-reactivity/create-effect) or [`createMemo`](/reference/basic-reactivity/create-memo), which are other Solid primitives.
Both functions subscribe to the signals accessed within them, establishing a dependency relationship.
Once this relationship is established, the function is notified whenever the signal changes.
diff --git a/src/routes/concepts/stores.mdx b/src/routes/concepts/stores.mdx
index 33d7b727a..01eaf0184 100644
--- a/src/routes/concepts/stores.mdx
+++ b/src/routes/concepts/stores.mdx
@@ -12,7 +12,7 @@ tags:
- nested
- produce
- reconcile
-version: '1.0'
+version: "1.0"
description: >-
Manage complex nested state efficiently with stores that provide fine-grained
reactivity for objects and arrays in Solid.
@@ -30,7 +30,7 @@ Using JavaScript's [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScri
With stores, you can now target nested properties and elements within these structures to create a dynamic tree of reactive data.
```jsx
-import { createStore } from "solid-js/store"
+import { createStore } from "solid-js/store";
// Initialize store
const [store, setStore] = createStore({
@@ -55,7 +55,7 @@ const [store, setStore] = createStore({
loggedIn: true,
},
],
-})
+});
```
## Accessing store values
@@ -63,7 +63,7 @@ const [store, setStore] = createStore({
Store properties can be accessed directly from the state proxy through directly referencing the targeted property:
```jsx
-console.log(store.userCount) // Outputs: 3
+console.log(store.userCount); // Outputs: 3
```
Accessing stores within a tracking scope follows a similar pattern to signals.
@@ -72,7 +72,7 @@ This provides access to the store's value directly within a tracking scope:
```jsx
const App = () => {
- const [mySignal, setMySignal] = createSignal("This is a signal.")
+ const [mySignal, setMySignal] = createSignal("This is a signal.");
const [store, setStore] = createStore({
userCount: 3,
users: [
@@ -95,14 +95,14 @@ const App = () => {
loggedIn: true,
},
],
- })
+ });
return (
Hello, {store.users[0].username}
{/* Accessing a store value */}
{mySignal()} {/* Accessing a signal */}
- )
-}
+ );
+};
```
When a store is created, it starts with the initial state but does _not_ immediately set up signals to track changes.
@@ -112,7 +112,6 @@ Once data is used within a tracking scope, such as within the return statement o
For example, if you wanted to print out every new user, adding the console log below will not work because it is not within a tracked scope.
-
```tsx ins={9}
const App = () => {
const [store, setStore] = createStore({
@@ -214,7 +213,7 @@ Separating the read and write capabilities of a store provides a valuable debugg
This separation facilitates the tracking and control of the components that are accessing or changing the values.
:::
:::advanced
- A little hidden feature of stores is that you can also create nested stores to help with setting nested properties.
+A little hidden feature of stores is that you can also create nested stores to help with setting nested properties.
```jsx
const [store, setStore] = createStore({
@@ -235,9 +234,10 @@ This separation facilitates the tracking and control of the components that are
])
```
- Changes made through `setUsers` will update the `store.users` property and reading `users` from this derived store will also be in sync with the values from `store.users`.
- Note that the above relies on `store.users` to be set already in the existing store.
+Changes made through `setUsers` will update the `store.users` property and reading `users` from this derived store will also be in sync with the values from `store.users`.
+
+Note that the above relies on `store.users` to be set already in the existing store.
:::
@@ -282,7 +282,7 @@ setStore("users", (otherUsers) => [
location: "Nigeria",
loggedIn: false,
},
-])
+]);
```
The path syntax adds the new element by assigning it to the index equal to `store.users.length`, directly modifying the existing array.
@@ -294,7 +294,7 @@ setStore("users", store.users.length, {
username: "michael584",
location: "Nigeria",
loggedIn: false,
-})
+});
```
### Modifying multiple elements
@@ -307,11 +307,11 @@ For example, if `store.users` is an array of objects,
you can set the `loggedIn` property of several indices at once like so:
```jsx
-setStore("users", [2, 7, 10], "loggedIn", false)
+setStore("users", [2, 7, 10], "loggedIn", false);
// equivalent to (but more efficient than):
-setStore("users", 2, "loggedIn", false)
-setStore("users", 7, "loggedIn", false)
-setStore("users", 10, "loggedIn", false)
+setStore("users", 2, "loggedIn", false);
+setStore("users", 7, "loggedIn", false);
+setStore("users", 10, "loggedIn", false);
```
This array syntax also works for object property names.
@@ -319,10 +319,10 @@ For example, if `store.users` is an object mapping usernames to objects,
you can set the `loggedIn` property of several users at once like so:
```jsx
-setStore("users", ["me", "you"], "loggedIn", false)
+setStore("users", ["me", "you"], "loggedIn", false);
// equivalent to (but more efficient than):
-setStore("users", ["me"], "loggedIn", false)
-setStore("users", ["you"], "loggedIn", false)
+setStore("users", ["me"], "loggedIn", false);
+setStore("users", ["you"], "loggedIn", false);
```
For arrays specifically, you can specify a range of indices via an object
@@ -331,10 +331,10 @@ For example, assuming `store.users` is an array again,
you can set the `loggedIn` state for all users except index 0 as follows:
```jsx
-setStore("users", { from: 1, to: store.users.length - 1 }, "loggedIn", false)
+setStore("users", { from: 1, to: store.users.length - 1 }, "loggedIn", false);
// equivalent to (but more efficient than):
for (let i = 1; i <= store.users.length - 1; i++) {
- setStore("users", i, "loggedIn", false)
+ setStore("users", i, "loggedIn", false);
}
```
@@ -343,10 +343,15 @@ and thereby update a regular subset of elements.
For example, you can set the `loggedIn` state for even-indexed users like so:
```jsx
-setStore("users", { from: 0, to: store.users.length - 1, by: 2 }, "loggedIn", false)
+setStore(
+ "users",
+ { from: 0, to: store.users.length - 1, by: 2 },
+ "loggedIn",
+ false
+);
// equivalent to (but more efficient than):
for (let i = 1; i <= store.users.length - 1; i += 2) {
- setStore("users", i, "loggedIn", false)
+ setStore("users", i, "loggedIn", false);
}
```
@@ -362,7 +367,7 @@ These functions receive the old value as an argument, allowing you to compute th
This dynamic approach is particularly useful for complex transformations.
```jsx
-setStore("users", 3, "loggedIn" , (loggedIn) => !loggedIn)
+setStore("users", 3, "loggedIn", (loggedIn) => !loggedIn);
```
### Filtering values
@@ -373,14 +378,14 @@ This might include using methods like `.startsWith()`, `includes()`, or other co
```jsx
// update users with username that starts with "t"
-setStore("users", (user) => user.username.startsWith("t"), "loggedIn", false)
+setStore("users", (user) => user.username.startsWith("t"), "loggedIn", false);
// update users with location "Canada"
-setStore("users", (user) => user.location == "Canada" , "loggedIn", false)
+setStore("users", (user) => user.location == "Canada", "loggedIn", false);
// update users with id 1, 2 or 3
-let ids = [1,2,3]
-setStore("users", (user) => ids.includes(user.id) , "loggedIn", false)
+let ids = [1, 2, 3];
+setStore("users", (user) => ids.includes(user.id), "loggedIn", false);
```
## Modifying objects
@@ -393,14 +398,14 @@ What this means, is that you can directly make the change to the store _without_
```jsx
setStore("users", 0, {
id: 109,
-})
+});
// is equivalent to
setStore("users", 0, (user) => ({
...user,
id: 109,
-}))
+}));
```
## Store utilities
@@ -412,21 +417,21 @@ This utility provides a way to work with data as if it were a [mutable](https://
`produce` also provides a way to make changes to multiple properties at the same time which eliminates the need for multiple setter calls.
```jsx
-import { produce } from "solid-js/store"
+import { produce } from "solid-js/store";
// without produce
-setStore("users", 0, "username", "newUsername")
-setStore("users", 0, "location", "newLocation")
+setStore("users", 0, "username", "newUsername");
+setStore("users", 0, "location", "newLocation");
// with produce
setStore(
"users",
0,
produce((user) => {
- user.username = "newUsername"
- user.location = "newLocation"
+ user.username = "newUsername";
+ user.location = "newLocation";
})
-)
+);
```
`produce` and `setStore` do have distinct functionalities.
@@ -443,15 +448,14 @@ When new information needs to be merged into an existing store `reconcile` can b
`reconcile` will determine the differences between new and existing data and initiate updates only when there are _changed_ values, thereby avoiding unnecessary updates.
```jsx
-import { createStore, reconcile } from "solid-js/store"
+import { createStore, reconcile } from "solid-js/store";
const [data, setData] = createStore({
- animals: ['cat', 'dog', 'bird', 'gorilla']
-})
-
-const newData = getNewData() // eg. contains ['cat', 'dog', 'bird', 'gorilla', 'koala']
-setData('animals', reconcile(newData))
+ animals: ["cat", "dog", "bird", "gorilla"],
+});
+const newData = getNewData(); // eg. contains ['cat', 'dog', 'bird', 'gorilla', 'koala']
+setData("animals", reconcile(newData));
```
In this example, the store will look for the differences between the existing and incoming data sets.
@@ -468,13 +472,13 @@ Additionally, `unwrap` provides a means to interface with third-party libraries
This utility acts as a bridge to facilitate smooth integrations with external components and simplifies the incorporation of stores into various applications and workflows.
```jsx
-import { createStore, unwrap } from "solid-js/store"
+import { createStore, unwrap } from "solid-js/store";
const [data, setData] = createStore({
animals: ["cat", "dog", "bird", "gorilla"],
-})
+});
-const rawData = unwrap(data)
+const rawData = unwrap(data);
```
To learn more about how to use Stores in practice, visit the [guide on complex state management](/guides/complex-state-management).
diff --git a/src/routes/concepts/understanding-jsx.mdx b/src/routes/concepts/understanding-jsx.mdx
index f6d16dfd2..9acda4e03 100644
--- a/src/routes/concepts/understanding-jsx.mdx
+++ b/src/routes/concepts/understanding-jsx.mdx
@@ -11,7 +11,7 @@ tags:
- props
- html
- syntax
-version: '1.0'
+version: "1.0"
description: >-
Write HTML-like syntax in JavaScript with JSX to create reactive components
with dynamic expressions and event handlers.
@@ -26,7 +26,7 @@ This provides a concise and readable way to create and represent components.
Solid was designed to align closely with HTML standards.
```jsx
-const element =
I'm JSX!!
+const element =
I'm JSX!!
;
```
It offers a distinct advantage, however: to copy/paste solutions from resources like Stack Overflow; and to allow direct usage of templates from design tools.
@@ -35,14 +35,14 @@ This lets you use dynamic expressions within your HTML by allowing variables and
```jsx
const Component = () => {
- const animal = { breed: "cat", name: "Midnight" }
+ const animal = { breed: "cat", name: "Midnight" };
return (
I have a {animal.breed} named {animal.name}!
- )
-}
+ );
+};
```
This means JavaScript content can be rendered on web pages based on an application's state or logic.
@@ -112,6 +112,7 @@ In JSX files, HTML attributes are used much like regular HTML, with a few key di
Click me!
```
+
:::
### JSX properties (props)
@@ -124,17 +125,17 @@ They connect the component with the data it requires, for seamless data flows an
- **Static props**:
In Solid's JSX, static props are integrated directly into the HTML by cloning the template and using them as attributes.
- - **Dynamic props**:
- Dynamic props rely on state, allowing the content or properties to be dynamic.
- An example is changing the style of an element in response to interactions within an application.
- This can be expressed in the form of signals (`value={value()}`).
+- **Dynamic props**:
+ Dynamic props rely on state, allowing the content or properties to be dynamic.
+ An example is changing the style of an element in response to interactions within an application.
+ This can be expressed in the form of signals (`value={value()}`).
- **Data transfer**:
Props are also used to fill components with data that comes from resources, like [`createResource`](/reference/basic-reactivity/create-resource) calls.
This results in components that react in real-time to data changes.
:::note
-Expressions, whether fixed or dynamic, get applied *in the order defined within the JSX*.
+Expressions, whether fixed or dynamic, get applied _in the order defined within the JSX_.
This works for a wide range of DOM elements, but will not work with elements that require attributes to be defined in a special order, such as input types with `type='range'`.
When order influences an element's behavior, users must define the expressions in the order that the element is expected.
diff --git a/src/routes/configuration/environment-variables.mdx b/src/routes/configuration/environment-variables.mdx
index bb6c65021..6ccf8813f 100644
--- a/src/routes/configuration/environment-variables.mdx
+++ b/src/routes/configuration/environment-variables.mdx
@@ -10,7 +10,7 @@ tags:
- vite
- secrets
- deployment
-version: '1.0'
+version: "1.0"
description: >-
Configure public and private environment variables in Solid apps using Vite's
built-in support for secure configuration.
@@ -76,8 +76,8 @@ function MyComponent() {
These variables should only be accessed in your backend code, so it's best not to use the `VITE_` prefix for them. Instead, use `process.env` to access them. Depending on the [Nitro preset](https://nitro.build/deploy) chosen, they'll be made available automatically or they will require an external dependency such as [dotenv](https://www.npmjs.com/package/dotenv).
```jsx
-DB_HOST="somedb://192.110.0"
-DB_PASSWORD = super_secret_password_hash
+DB_HOST = "somedb://192.110.0";
+DB_PASSWORD = super_secret_password_hash;
```
To access them, within your backend code, use `process.env`.
@@ -96,11 +96,10 @@ For an example, check the pseudo-code below.
It is also possible to make `process.env` type-safe via the same `env.d.ts` file.
```typescript
-
declare namespace NodeJS {
interface ProcessEnv {
- readonly DB_URL: string
- readonly DB_PASSWORD: string
+ readonly DB_URL: string;
+ readonly DB_PASSWORD: string;
}
}
```
diff --git a/src/routes/configuration/typescript.mdx b/src/routes/configuration/typescript.mdx
index d35d2515a..6206710e7 100644
--- a/src/routes/configuration/typescript.mdx
+++ b/src/routes/configuration/typescript.mdx
@@ -11,7 +11,7 @@ tags:
- jsx
- development
- tooling
-version: '1.0'
+version: "1.0"
description: >-
Learn to configure TypeScript with SolidJS for enhanced type safety, better
IDE support, and reliable component development.
@@ -73,7 +73,6 @@ typescript
2. Run the following command to generate a `tsconfig.json` file.
-
```package-exec
tsc --init
```
@@ -660,6 +659,7 @@ declare module "solid-js" {
```
:::note
+
New in v1.9.0
:::
@@ -700,8 +700,10 @@ To include specific native events, you can choose certain events (e.g. `mousemov
```ts
declare module "solid-js" {
namespace JSX {
- interface CustomEvents
- extends Pick
{}
+ interface CustomEvents extends Pick<
+ HTMLElementEventMap,
+ "mousemove" | "pointermove"
+ > {}
}
}
```
diff --git a/src/routes/guides/complex-state-management.mdx b/src/routes/guides/complex-state-management.mdx
index 05f2af8f6..ee5aed88a 100644
--- a/src/routes/guides/complex-state-management.mdx
+++ b/src/routes/guides/complex-state-management.mdx
@@ -11,7 +11,7 @@ tags:
- scaling
- components
- management
-version: '1.0'
+version: "1.0"
description: >-
Master complex state management in Solid using stores and context to build
scalable, maintainable applications efficiently.
@@ -22,25 +22,27 @@ As applications grow and start to involve many components, more intricate user i
Consider this example:
```jsx
-import { For, createSignal, Show, createMemo } from "solid-js"
+import { For, createSignal, Show, createMemo } from "solid-js";
const App = () => {
- const [tasks, setTasks] = createSignal([])
- const [numberOfTasks, setNumberOfTasks] = createSignal(tasks.length)
- const completedTasks = createMemo(() => tasks().filter((task) => task.completed))
- let input
+ const [tasks, setTasks] = createSignal([]);
+ const [numberOfTasks, setNumberOfTasks] = createSignal(tasks.length);
+ const completedTasks = createMemo(() =>
+ tasks().filter((task) => task.completed)
+ );
+ let input;
const addTask = (text) => {
- setTasks([...tasks(), { id: tasks().length, text, completed: false }])
- setNumberOfTasks(numberOfTasks() + 1)
- }
+ setTasks([...tasks(), { id: tasks().length, text, completed: false }]);
+ setNumberOfTasks(numberOfTasks() + 1);
+ };
const toggleTask = (id) => {
setTasks(
tasks().map((task) =>
task.id !== id ? task : { ...task, completed: !task.completed }
)
- )
- }
+ );
+ };
return (
<>
@@ -50,9 +52,9 @@ const App = () => {