From 8ad5c4ea2ac85df8839078a036c4ad05f00bc0cc Mon Sep 17 00:00:00 2001 From: Erik Demaine Date: Thu, 6 Mar 2025 18:40:45 -0500 Subject: [PATCH 1/2] Improve writing of store setters with range and multiple indices --- src/routes/concepts/stores.mdx | 52 ++++++++++++++++++++++++-------- src/routes/solid-start/index.mdx | 2 +- 2 files changed, 40 insertions(+), 14 deletions(-) diff --git a/src/routes/concepts/stores.mdx b/src/routes/concepts/stores.mdx index 60ac67ef2..cc835175e 100644 --- a/src/routes/concepts/stores.mdx +++ b/src/routes/concepts/stores.mdx @@ -277,32 +277,58 @@ 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) +} +``` ### Dynamic value assignment diff --git a/src/routes/solid-start/index.mdx b/src/routes/solid-start/index.mdx index fc656ae0d..e1d9c3123 100644 --- a/src/routes/solid-start/index.mdx +++ b/src/routes/solid-start/index.mdx @@ -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. From 103533de4246e1db3ab9c884b1d9f7796cd03352 Mon Sep 17 00:00:00 2001 From: Erik Demaine Date: Thu, 6 Mar 2025 18:48:46 -0500 Subject: [PATCH 2/2] Document automatic batching --- src/routes/concepts/stores.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/routes/concepts/stores.mdx b/src/routes/concepts/stores.mdx index cc835175e..20ada72ab 100644 --- a/src/routes/concepts/stores.mdx +++ b/src/routes/concepts/stores.mdx @@ -330,6 +330,11 @@ for (let i = 1; i <= store.users.length - 1; i += 2) { } ``` +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 Path syntax also provides a way to set values within an array using functions instead of static values.