Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 44 additions & 13 deletions src/routes/concepts/stores.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -277,32 +277,63 @@ setStore("users", store.users.length, {
})
```

### Range specification
### Modifying multiple elements

With path syntax, you can target a subset of elements to update or modify by specifying a range of indices.
You can do this using an array of values:
With path syntax, you can target a subset of elements of an array,
or properties of an object, by specifying an array or range of indices.

The most general form is to specify an array of values.
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", [1, 3], "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)
```

:::info
If your *store* is an array, you can specify a range of indices using an object with `from` and `to` keys.
This array syntax also works for object property names.
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
const [store, setStore] = createStore([]) // A store that is an array
...
setStore({ from: 1, to: store.length - 1 }, "loggedIn", false)
setStore("users", ["me", "you"], "loggedIn", false)
// equivalent to (but more efficient than):
setStore("users", ["me"], "loggedIn", false)
setStore("users", ["you"], "loggedIn", false)
```

In addition to this, including the `by` key, can help you perform iterative updates within an array, which can be useful when you want to update elements at regular intervals.
This key defines the step size for index increments, similar to a [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for):
For arrays specifically, you can specify a range of indices via an object
with `from` and `to` keys (both of which are inclusive).
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({ from: 0, to: store.length, by: 2 }, "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)
}
```

You can also include a `by` key in a range object to specify a step size,
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)
// equivalent to (but more efficient than):
for (let i = 1; i <= store.users.length - 1; i += 2) {
setStore("users", i, "loggedIn", false)
}
```

:::
Multi-setter syntax differs from the "equivalent" code in one key way:
a single store setter call automatically gets wrapped in a
[`batch`](/reference/reactive-utilities/batch), so all the elements update
at once before any downstream effects are triggered.

### Dynamic value assignment

Expand Down
2 changes: 1 addition & 1 deletion src/routes/solid-start/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ title: Overview
SolidStart is an open source meta-framework designed to unify components that make up a web application.
It is built on top of [Solid](/) and uses [Vinxi](https://vinxi.vercel.app/), an agnostic Framework Bundler that combines the power of [Vite](https://vitejs.dev) and [Nitro](https://nitro.unjs.io/).

Start avoids being opinionated by only providing the fewest amount of pieces to get you started.
Start avoids being opinionated by only providing the fewest pieces to get you started.
While templates are available that include many of the expected tools, SolidStart itself does not ship with a Router or Metadata library.
Rather, it leaves that open for you to use any library you want.

Expand Down
Loading