4. Run the application:
@@ -111,6 +123,11 @@ pnpm dev
bun dev
```
+
+```bash frame="none"
+deno task dev
+```
+
This will start the development server.
@@ -144,6 +161,11 @@ pnpm dlx degit solidjs/templates/ts my-app
bunx degit solidjs/templates/ts my-app
```
+
+```bash frame="none"
+deno -A npm:degit solidjs/templates/ts my-app
+```
+
2. Navigate to your application's directory:
@@ -178,6 +200,11 @@ pnpm install
bun install
```
+
+```bash frame="none"
+deno install
+```
+
4. Run the application:
@@ -206,6 +233,11 @@ pnpm dev
bun dev
```
+
+```bash frame="none"
+deno task dev
+```
+
diff --git a/src/routes/reference/basic-reactivity/create-resource.mdx b/src/routes/reference/basic-reactivity/create-resource.mdx
index 2f0266919..56c33c807 100644
--- a/src/routes/reference/basic-reactivity/create-resource.mdx
+++ b/src/routes/reference/basic-reactivity/create-resource.mdx
@@ -97,7 +97,7 @@ You can now check whether a Resource is `unresolved`, `pending`, `ready`, `refre
| `refreshing` | Yes | Yes | No |
| `error` | No | No | Yes |
-2. When server rendering resources especially when fetching when embedding Solid in other system that fetch before render, you might want to initiate the resource with this prefetched value instead of fetching again and having the resource serialize it in it's own state.
+2. When server-rendering resources, especially when embedding Solid in other systems that fetch data before rendering, you might want to initialize the resource with this prefetched value instead of fetching again and having the resource serialize it in its own state.
You can use the new `ssrLoadFrom` option for this.
Instead of using the default `server` value, you can pass `initial` and the resource will use `initialValue` as if it were the result of the first fetch for both SSR and hydration.
@@ -197,4 +197,4 @@ function createResource(
options?: ResourceOptions
): ResourceReturn
-```
\ No newline at end of file
+```
diff --git a/src/routes/reference/basic-reactivity/create-signal.mdx b/src/routes/reference/basic-reactivity/create-signal.mdx
index 3b3aac76a..7ac42f3de 100644
--- a/src/routes/reference/basic-reactivity/create-signal.mdx
+++ b/src/routes/reference/basic-reactivity/create-signal.mdx
@@ -3,7 +3,7 @@ title: createSignal
---
Signals are the most basic reactive primitive.
-They track a single value (which can be any JavaScript object) that changes over time.
+They track a single value (which can be a value of any type) that changes over time.
```tsx
import { createSignal } from "solid-js"
@@ -39,7 +39,7 @@ Calling the getter (e.g., `count()` or `ready()`) returns the current value of t
Crucial to automatic dependency tracking, calling the getter within a tracking scope causes the calling function to depend on this Signal, so that function will rerun if the Signal gets updated.
Calling the setter (e.g., `setCount(nextCount)` or `setReady(nextReady)`) sets the Signal's value and updates the Signal (triggering dependents to rerun) if the value actually changed (see details below).
-The setter takes either the new value for the signal or a function that maps the last value of the signal to a new value as its only argument.
+The setter takes either the new value for the signal or a function that maps the previous value of the signal to a new value as its only argument.
The updated value is also returned by the setter. As an example:
```tsx
@@ -102,7 +102,7 @@ const [count, setCount] = createSignal(0, {
})
```
-Here's are some examples of this option in use:
+Here are some examples of this option in use:
```tsx
// use { equals: false } to allow modifying object in-place;
@@ -115,7 +115,7 @@ setObject((current) => {
return current
})
-// use { equals: false } signal as trigger without value:
+// use { equals: false } to create a signal that acts as a trigger without storing a value:
const [depend, rerun] = createSignal(undefined, { equals: false })
// now calling depend() in a tracking scope
// makes that scope rerun whenever rerun() gets called
diff --git a/src/routes/reference/component-apis/children.mdx b/src/routes/reference/component-apis/children.mdx
index 314e10970..2d001fb0c 100644
--- a/src/routes/reference/component-apis/children.mdx
+++ b/src/routes/reference/component-apis/children.mdx
@@ -10,9 +10,9 @@ function children(fn: () => JSX.Element): () => ResolvedChildren
```
-The children's helper is used for more complex interactions with props.
-When you're not just passing children to another component using props.children once in JSX, you should use children.
-Props are normally passed in via a getter for props.children in this manner:
+The `children` helper is used for more complex interactions with props.
+When you're not just passing children to another component using `props.children` once in JSX, you should use `children`.
+Props are normally passed in via a getter for `props.children` in this manner:
```tsx
const resolved = children(() => props.children)
@@ -57,7 +57,7 @@ const resolved = children(() => props.children)
return {resolved()}
```
-To evaluate the children only when `` would render them, you can push the call to children inside a component or a function within ``, which only evaluates its children when the when condition is true.
+To evaluate the children only when `` would render them, you can push the call to children inside a component or a function within ``, which only evaluates its children when `when` condition is true.
Another nice workaround is to pass `props.children` to the children helper only when you actually want to evaluate the children:
```tsx
diff --git a/src/routes/reference/component-apis/create-context.mdx b/src/routes/reference/component-apis/create-context.mdx
index cbf43b158..7ef06f310 100644
--- a/src/routes/reference/component-apis/create-context.mdx
+++ b/src/routes/reference/component-apis/create-context.mdx
@@ -7,7 +7,7 @@ order: 5
Context provides a form of dependency injection in Solid.
It is used to save from needing to pass data as props through intermediate components (aka** prop drilling**).
This function creates a new context object that can be used with [useContext](/reference/component-apis/use-context) and offers the Provider control flow.
-Default Context is used when no Provider is found above in the hierarchy.
+The default value is used when no Provider is found above in the hierarchy.
## Usage
diff --git a/src/routes/reference/components/show.mdx b/src/routes/reference/components/show.mdx
index c983d38da..b8c1d6f30 100644
--- a/src/routes/reference/components/show.mdx
+++ b/src/routes/reference/components/show.mdx
@@ -3,7 +3,7 @@ title:
order: 5
---
-The Show control flow is used to conditional render part of the view: it renders children when the when is truthy, a fallback otherwise. It is similar to the ternary operator `(when ? children : fallback)` but is ideal for templating JSX.
+The `Show` control flow is used to conditionally render part of the view: it renders children when `when` is truthy, a fallback otherwise. It is similar to the ternary operator `(when ? children : fallback)` but is ideal for templating JSX.
```ts
import { Show } from "solid-js"
@@ -17,7 +17,7 @@ function Show(props: {
}): () => JSX.Element
```
-Here's an example of using the Show control flow:
+Here's an example of using the `Show` control flow:
```tsx
0} fallback={
Loading...
}>
@@ -25,7 +25,7 @@ Here's an example of using the Show control flow:
```
-Show can also be used as a way of keying blocks to a specific data model. For example the function is re-executed whenever the user model is replaced.
+`Show` can also be used as a way of keying blocks to a specific data model. For example the function is re-executed whenever the user model is replaced.
```tsx
Loading...} keyed>
@@ -33,7 +33,7 @@ Show can also be used as a way of keying blocks to a specific data model. For ex
```
-If the `keyed` property is not used, the argument of a child function will be an accessor containing the item.
+If the `keyed` property is not used, the argument of the child function will be an accessor containing the item.
```tsx
Loading...}>
@@ -47,4 +47,4 @@ If the `keyed` property is not used, the argument of a child function will be an
| :--------- | :-------------------------------- | :-------------------------------------------- |
| `when` | `T \| undefined \| null \| false` | The value to test for truthiness |
| `keyed` | `boolean` | Whether to key the block to the value of when |
-| `fallback` | `JSX.Element` | The fallback to render when when is falsy |
+| `fallback` | `JSX.Element` | The fallback to render when the `when` is falsy |
diff --git a/src/routes/reference/components/suspense.mdx b/src/routes/reference/components/suspense.mdx
index fe3efd23b..ec0537adb 100644
--- a/src/routes/reference/components/suspense.mdx
+++ b/src/routes/reference/components/suspense.mdx
@@ -3,7 +3,7 @@ title:
order: 5
---
-A component that tracks all resources read under it and shows a fallback placeholder state until they are resolved. What makes `Suspense` different than `Show` is it is non-blocking in that both branches exist at the same time even if not currently in the DOM. This means that the fallback can be rendered while the children are loading. This is useful for loading states and other asynchronous operations.
+A component that tracks all resources read under it and shows a fallback placeholder state until they are resolved. What makes `Suspense` different than `Show` is that it is non-blocking in the sense that both branches exist at the same time even if not currently in the DOM. This means that the fallback can be rendered while the children are loading. This is useful for loading states and other asynchronous operations.
```tsx
import { Suspense } from "solid-js"
@@ -30,7 +30,7 @@ Here's an example of a `Suspense` component that shows a loading spinner while t
`` is triggered whenever a resource is read under the suspense boundary, and waits until all resources read
under the suspense boundary have resolved. Often, however, you may not want this behavior. For example, if your entire page is
wrapped in suspense, you may not want a resource that only populates a certain part of the page to trigger suspense.
-In that case, you can wrap that resource usage its own suspense boundary, and the resource will only trigger the
+In that case, you can wrap that resource usage in its own suspense boundary, and the resource will only trigger the
closest suspense boundary.
For example, in the code below, only the `title()` resource will trigger the top level suspense boundary, and only the `data()`
@@ -52,7 +52,7 @@ const MyComponent = () => {
## The purpose of {""}
-To understand the purpose of suspense, let's consider the following code snippets. These snippets will have some drawbacks which we will solve by using suspense. We will also see how it is possible to use suspense yet not reap its benefits.
+To understand the purpose of suspense, let's consider the following code snippets. These snippets will have some drawbacks which we will solve by using suspense. We will also see how it is possible to use `Suspense` yet not reap its benefits.
Our example use case is to display a user profile. A naive snippet would look like this:
@@ -112,7 +112,7 @@ const MyComponentWithSuspense = () => {
In this case, the `div`s are created immediately, but instead of being attached to the document body, the fallback is shown. Once the resource resolves, the text in the `div`s is updated, and then they are attached to the document (and the fallback removed).
-It is important to note that _execution of the component does not pause_ when using suspense. Instead, when a resource is read under a suspense boundary, it ensures that the nodes are not attached to the document until after the resource has resolved. Suspense allows us to have the best of both worlds: do as much work as we can _before_ the resource resolves, and also show a fallback until then.
+It is important to note that _the execution of the component does not pause_ when using suspense. Instead, when a resource is read under a suspense boundary, it ensures that the nodes are not attached to the document until after the resource has resolved. Suspense allows us to have the best of both worlds: do as much work as we can _before_ the resource resolves, and also show a fallback until then.
With this in mind, we can understand that there isn't much gained from suspense in the following code:
diff --git a/src/routes/reference/jsx-attributes/attr.mdx b/src/routes/reference/jsx-attributes/attr.mdx
index 7aed74fca..4faaed513 100644
--- a/src/routes/reference/jsx-attributes/attr.mdx
+++ b/src/routes/reference/jsx-attributes/attr.mdx
@@ -2,8 +2,14 @@
title: attr:*
---
-Forces the prop to be treated as an attribute instead of a property. Useful for Web Components where you want to set attributes.
+Forces the prop to be treated as an attribute instead of a property.
+Useful for Web Components where you want to set attributes.
```tsx
```
+
+
+ Type definitions are required when using TypeScript.
+ See the[TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
+
diff --git a/src/routes/reference/jsx-attributes/bool.mdx b/src/routes/reference/jsx-attributes/bool.mdx
index 24be71374..fb6c0110b 100644
--- a/src/routes/reference/jsx-attributes/bool.mdx
+++ b/src/routes/reference/jsx-attributes/bool.mdx
@@ -19,3 +19,8 @@ This attribute is most useful for Web Components.
```
+
+
+ Type definitions are required when using TypeScript.
+ See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
+
diff --git a/src/routes/reference/jsx-attributes/on.mdx b/src/routes/reference/jsx-attributes/on.mdx
index d611ad486..de9a516ea 100644
--- a/src/routes/reference/jsx-attributes/on.mdx
+++ b/src/routes/reference/jsx-attributes/on.mdx
@@ -29,7 +29,7 @@ const handler = {
// or inline
-
console.log("Weeeee!")}} />
+
```
This new syntax replaces the now deprecated `oncapture:` and it's future proof for any posible new event listener options.
diff --git a/src/routes/reference/jsx-attributes/prop.mdx b/src/routes/reference/jsx-attributes/prop.mdx
index 72a2851f2..a13c553e0 100644
--- a/src/routes/reference/jsx-attributes/prop.mdx
+++ b/src/routes/reference/jsx-attributes/prop.mdx
@@ -8,3 +8,8 @@ Forces the prop to be treated as a property instead of an attribute.
```tsx
```
+
+
+ Type definitions are required when using TypeScript.
+ See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
+
\ No newline at end of file
diff --git a/src/routes/reference/jsx-attributes/ref.mdx b/src/routes/reference/jsx-attributes/ref.mdx
index 466b2a40d..630806570 100644
--- a/src/routes/reference/jsx-attributes/ref.mdx
+++ b/src/routes/reference/jsx-attributes/ref.mdx
@@ -9,12 +9,12 @@ Refs are a way of getting access to underlying DOM elements in our JSX. While it
// variable assigned directly by ref
let myDiv;
-// use onMount or createEffect to read after connected to DOM
+// use onMount or createEffect to read after connected to the DOM
onMount(() => console.log(myDiv));
-// Or, callback function (called before connected to DOM)
+// Or, callback function (called before connected to the DOM)
console.log(el)} />
```
diff --git a/src/routes/reference/jsx-attributes/use.mdx b/src/routes/reference/jsx-attributes/use.mdx
index 3e6139380..cce2a6827 100644
--- a/src/routes/reference/jsx-attributes/use.mdx
+++ b/src/routes/reference/jsx-attributes/use.mdx
@@ -34,3 +34,8 @@ declare module "solid-js" {
}
}
```
+
+
+Directives only work with native HTML elements (HTML/SVG/MathML/Custom Elements).
+Directives are not forwarded and **won't work in user defined components**, such as `` [see also](https://github.com/solidjs/solid/discussions/722)
+
diff --git a/src/routes/reference/reactive-utilities/from.mdx b/src/routes/reference/reactive-utilities/from.mdx
index 35de4054b..ad45aea13 100644
--- a/src/routes/reference/reactive-utilities/from.mdx
+++ b/src/routes/reference/reactive-utilities/from.mdx
@@ -24,7 +24,7 @@ This basically turns any subscribable (object with a subscribe method) into a Si
const signal = from(obsv$)
```
-It can also take a custom producer function where the function is passed a setter function that returns a unsubscribe function:
+It can also take a custom producer function where the function is passed a setter function that returns an unsubscribe function:
```tsx
const clock = from((set) => {
diff --git a/src/routes/reference/reactive-utilities/run-with-owner.mdx b/src/routes/reference/reactive-utilities/run-with-owner.mdx
index 1fa7b60a8..10638849f 100644
--- a/src/routes/reference/reactive-utilities/run-with-owner.mdx
+++ b/src/routes/reference/reactive-utilities/run-with-owner.mdx
@@ -19,7 +19,7 @@ Having a (correct) owner is important for two reasons:
- Computations without an owner cannot be cleaned up.
For example, if you call `createEffect` without an owner (e.g., in the global scope), the effect will continue running forever, instead of being disposed when its owner gets disposed.
-- useContext obtains context by walking up the owner tree to find the nearest ancestor providing the desired context.
+- `useContext` obtains context by walking up the owner tree to find the nearest ancestor providing the desired context.
So without an owner you cannot look up any provided context (and with the wrong owner, you might obtain the wrong context).
Manually setting the owner is especially helpful when doing reactivity outside of any owner scope.
diff --git a/src/routes/reference/rendering/hydrate.mdx b/src/routes/reference/rendering/hydrate.mdx
index ba63673ba..31ce37db1 100644
--- a/src/routes/reference/rendering/hydrate.mdx
+++ b/src/routes/reference/rendering/hydrate.mdx
@@ -15,7 +15,7 @@ function hydrate(
```
-This method is similar to **render** except it attempts to rehydrate what is already rendered to the DOM.
+This method is similar to `render` except that it attempts to rehydrate what is already rendered to the DOM.
When initializing in the browser a page has already been server rendered.
```ts
diff --git a/src/routes/reference/rendering/render-to-string-async.mdx b/src/routes/reference/rendering/render-to-string-async.mdx
index 5cfb56573..16c2509eb 100644
--- a/src/routes/reference/rendering/render-to-string-async.mdx
+++ b/src/routes/reference/rendering/render-to-string-async.mdx
@@ -16,7 +16,7 @@ function renderToStringAsync(
```
-Same as `renderToString` except it will wait for all `` boundaries to resolve before returning the results.
+Same as `renderToString` except that it will wait for all `` boundaries to resolve before returning the results.
Resource data is automatically serialized into the script tag and will be hydrated on client load.
`renderId` is used to namespace renders when having multiple top level roots.
diff --git a/src/routes/reference/secondary-primitives/create-reaction.mdx b/src/routes/reference/secondary-primitives/create-reaction.mdx
index 3005c32cf..9a49a35c1 100644
--- a/src/routes/reference/secondary-primitives/create-reaction.mdx
+++ b/src/routes/reference/secondary-primitives/create-reaction.mdx
@@ -17,10 +17,10 @@ const [s, set] = createSignal("start")
const track = createReaction(() => console.log("something"))
-// next time s changes run the reaction
+// run the reaction next time `s` changes.
track(() => s())
set("end") // "something"
-set("final") // no-op as reaction only runs on first update, need to call track again.
+set("final") // no-op since the reaction only runs on the first update, need to call `track` again.
```
diff --git a/src/routes/reference/secondary-primitives/create-selector.mdx b/src/routes/reference/secondary-primitives/create-selector.mdx
index d48959d10..8b5c0ade0 100644
--- a/src/routes/reference/secondary-primitives/create-selector.mdx
+++ b/src/routes/reference/secondary-primitives/create-selector.mdx
@@ -8,14 +8,27 @@ import { createSelector } from "solid-js"
function createSelector(
source: () => T,
fn?: (a: U, b: T) => boolean
-): (k: U) => boolean
-
+): (key: U) => boolean
```
-Creates a conditional signal that only notifies subscribers when entering or exiting their key matching the value.
-Useful for delegated selection state. As it makes the operation O(1) instead of O(n).
+Creates a parameterized derived boolean signal `selector(key)` that indicates
+whether `key` is equal to the current value of the `source` signal.
+These signals are optimized to notify each subscriber only when their `key`
+starts or stops matching the reactive `source` value
+(instead of every time `key` changes).
+If you have *n* different subscribers with different keys,
+and the `source` value changes from `a` to `b`, then
+instead of all *n* subscribers updating,
+at most two subscribers will update:
+the signal with key `a` will change to `false`,
+and the signal with key `b` will change to `true`.
+Thus it reduces from *n* updates to 2 updates.
+
+Useful for defining the selection state of several selectable elements.
+For example:
```tsx
+const [selectedId, setSelectedId] = createSignal()
const isSelected = createSelector(selectedId)
@@ -23,12 +36,28 @@ const isSelected = createSelector(selectedId)
```
-In the above code if the `item.id` is equal to the `selectedId` the `active` class will be added to the `li` element.
-If the `item.id` is not equal to the `selectedId` the `active` class will be removed from the `li` element.
+In the code above, each `li` element receives an `active` class
+exactly when the corresponding `item.id` is equal to `selectedId()`.
+When the `selectedId` signal changes, the `li` element(s) that previously
+had previously matching `id` get the `active` class removed, and the
+`li` element(s) that now have a matching `id` get the `active` class added.
+All other `li` elements get skipped, so if `id`s are distinct,
+only 2 DOM operations get performed.
+
+By contrast, the following code would perform `list().length` DOM operations
+every time the `selectedId` signal changes:
+
+```tsx
+const [selectedId, setSelectedId] = createSignal()
+
+
+ {(item) =>
{item.name}
}
+
+```
## Arguments
| Name | Type | Description |
| :------- | :------------------------ | :------------------------------------------- |
-| `source` | `() => T` | The source signal to get the value from. |
-| `fn` | `(a: U, b: T) => boolean` | A function to compare the key and the value. |
+| `source` | `() => T` | The source signal to get the value from and compare with keys. |
+| `fn` | `(a: U, b: T) => boolean` | A function to compare the key and the value, returning whether they should be treated as equal. Default: `===` |
diff --git a/src/routes/reference/server-utilities/get-request-event.mdx b/src/routes/reference/server-utilities/get-request-event.mdx
index edbb1ce38..9ab4e6d80 100644
--- a/src/routes/reference/server-utilities/get-request-event.mdx
+++ b/src/routes/reference/server-utilities/get-request-event.mdx
@@ -39,7 +39,7 @@ if (event) {
## Response
-The `getRequestEvent` can also be used to stub out the Response - this extends the [options that can pass to the `Response constructor`](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#options).
+The `getRequestEvent` can also be used to stub out the Response - this extends the [options that can be passed to the `Response constructor`](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#options).
This is kept up to date so it can be used to read and write headers and status for the current response.
```js
diff --git a/src/routes/reference/store-utilities/modify-mutable.mdx b/src/routes/reference/store-utilities/modify-mutable.mdx
index e472daff0..df420abc2 100644
--- a/src/routes/reference/store-utilities/modify-mutable.mdx
+++ b/src/routes/reference/store-utilities/modify-mutable.mdx
@@ -73,7 +73,7 @@ modifyMutable(
```tsx
import { modifyMutable, produce } from "solid-js/store"
-// Modify two fields in batch, triggering just one update
+// Modify two fields in a batch, triggering just one update
modifyMutable(
state,
produce((state) => {
diff --git a/src/routes/reference/store-utilities/produce.mdx b/src/routes/reference/store-utilities/produce.mdx
index 4c6b5b2a0..1f0153fc5 100644
--- a/src/routes/reference/store-utilities/produce.mdx
+++ b/src/routes/reference/store-utilities/produce.mdx
@@ -2,7 +2,7 @@
title: produce
---
-`produce` is an [Immer](https://immerjs.github.io/immer/) inspired API for Solid's Store objects that allow for localized mutation.
+`produce` is an [Immer](https://immerjs.github.io/immer/) inspired API for Solid's Store objects that allows for localized mutation.
```ts
import { produce } from "solid-js/store"
diff --git a/src/routes/reference/store-utilities/reconcile.mdx b/src/routes/reference/store-utilities/reconcile.mdx
index 5fbaeda8a..cfd0e7d94 100644
--- a/src/routes/reference/store-utilities/reconcile.mdx
+++ b/src/routes/reference/store-utilities/reconcile.mdx
@@ -20,7 +20,7 @@ function reconcile(
) => T extends NotWrappable ? T : Store
```
-`reconcile` has a key option that can be used when available to match items.
+`reconcile` has a `key` option that can be used when available to match items.
The `value` accepts either a value of type `T` or a Store containing values of type `T`.
This represents the data to be reconciled.
diff --git a/src/routes/solid-router/concepts/actions.mdx b/src/routes/solid-router/concepts/actions.mdx
index 379514278..d1e4647f7 100644
--- a/src/routes/solid-router/concepts/actions.mdx
+++ b/src/routes/solid-router/concepts/actions.mdx
@@ -137,6 +137,8 @@ export function MyComponent() {
}
```
+**Note:** If you are uploading files make sure you include `enctype="multipart/form-data"` to your `