console.log("Welcome!")} />
+```
+
+This directly attaches an event handler (via [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)) to the `div`.
+
+
+
+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:
+
+```tsx
+const handler = {
+ handleEvent(e) {
+ console.log(e)
+ },
+ once:true,
+ passive:false,
+ capture:true
+}
+
+
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/on_.mdx b/src/routes/reference/jsx-attributes/on_.mdx
index af0a73d7c0..c274af4775 100644
--- a/src/routes/reference/jsx-attributes/on_.mdx
+++ b/src/routes/reference/jsx-attributes/on_.mdx
@@ -11,7 +11,7 @@ Event handlers in Solid typically take the form of `onclick` or `onClick` depend
Conceptually, this example attaches a `click` event listener (via [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)) to the `div`. However, Solid actually handles common UI events that bubble and are composed (such as `click`) at the document level, and then synthetically implements delegation (capturing and bubbling). This improves performance for these common events by reducing the number of event handlers.
-Note that `onClick` handles the event `click`; in general, event names get mapped to lower case. If you need to work with event names containing capital letters, see [`on:`](/reference/jsx-attributes/on-and-oncapture) which attaches event handlers directly (also avoiding fancy delegation via document).
+Note that `onClick` handles the event `click`; in general, event names get mapped to lower case. If you need to work with event names containing capital letters, or use listener options such once, passive, capture see [`on:`](/reference/jsx-attributes/on) which attaches event handlers directly (also avoiding fancy delegation via document).
Solid also supports passing a two-element array to the event handler to bind a value to the first argument of the event handler. This doesn't use `bind` or create an additional closure, so it is a highly optimized way of delegating events.
@@ -22,7 +22,7 @@ function handler(itemId, e) {
+;
```
Events are never rebound and the bindings are not reactive, as it is expensive to attach and detach listeners. Since event handlers are called like any other function each time an event fires, there is no need for reactivity; shortcut your handler if desired.
diff --git a/src/routes/reference/lifecycle/on-cleanup.mdx b/src/routes/reference/lifecycle/on-cleanup.mdx
index 827f90f0bf..43a4640238 100644
--- a/src/routes/reference/lifecycle/on-cleanup.mdx
+++ b/src/routes/reference/lifecycle/on-cleanup.mdx
@@ -10,6 +10,8 @@ When used in a Component, it runs when the component is unmounted.
When used in reactive contexts, 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 reactive scope is disposed or refreshed.
```ts
+import { onCleanup } from "solid-js"
+
function onCleanup(fn: () => void): void;
```
@@ -17,7 +19,7 @@ Without the `onCleanup` function, the event listener would remain attached to th
This can cause memory leaks and other issues.
```tsx
-import { createSignal, onCleanup } from "solid-js";
+import { createSignal, onCleanup } from "solid-js"
const Component = () => {
const [count, setCount] = createSignal(0);
diff --git a/src/routes/reference/lifecycle/on-mount.mdx b/src/routes/reference/lifecycle/on-mount.mdx
index f6bb7f9707..9d59843dd4 100644
--- a/src/routes/reference/lifecycle/on-mount.mdx
+++ b/src/routes/reference/lifecycle/on-mount.mdx
@@ -4,9 +4,11 @@ order: 5
---
Registers a method that runs after initial rendering is done and the elements are mounted to the page.
-Ideal for using [refs](/reference/jsx-attributes/ref) and managing other one-time setup that requires the
+Ideal for using [refs](/reference/jsx-attributes/ref) and managing other one-time setup.
```tsx
+import { onMount } from "solid-js"
+
function onMount(fn: () => void): void
```
@@ -14,11 +16,11 @@ function onMount(fn: () => void): void
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.
```tsx
-// example that shoes how to use onMount to get a ref to an element
+// example that shows how to use onMount to get a reference to an element
import { onMount } from "solid-js"
function MyComponent() {
- let ref: HTMLDivElement
+ let ref: HTMLButtonElement
// when the component is mounted, the button will be disabled
onMount(() => {
diff --git a/src/routes/reference/reactive-utilities/batch.mdx b/src/routes/reference/reactive-utilities/batch.mdx
index 72c78e6801..c13b753a8b 100644
--- a/src/routes/reference/reactive-utilities/batch.mdx
+++ b/src/routes/reference/reactive-utilities/batch.mdx
@@ -3,7 +3,9 @@ title: batch
---
```ts
-function batch
(fn: () => T): T;
+import { batch } from "solid-js"
+
+function batch(fn: () => T): T
```
This is a low level API that is used by Solid to batch updates.
diff --git a/src/routes/reference/reactive-utilities/catch-error.mdx b/src/routes/reference/reactive-utilities/catch-error.mdx
index f88dcb0ef1..f7b0c86d26 100644
--- a/src/routes/reference/reactive-utilities/catch-error.mdx
+++ b/src/routes/reference/reactive-utilities/catch-error.mdx
@@ -7,9 +7,9 @@ New in v1.7.0
```tsx
-import { catchError } from "solid-js";
+import { catchError } from "solid-js"
-function catchError(tryFn: () => T, onError: (err: any) => void): T;
+function catchError(tryFn: () => T, onError: (err: any) => void): T
```
Wraps a `tryFn` with an error handler that fires if an error occurs below that point.
diff --git a/src/routes/reference/reactive-utilities/create-root.mdx b/src/routes/reference/reactive-utilities/create-root.mdx
index 8092a1099a..aab8ce89ec 100644
--- a/src/routes/reference/reactive-utilities/create-root.mdx
+++ b/src/routes/reference/reactive-utilities/create-root.mdx
@@ -3,6 +3,8 @@ title: createRoot
---
```ts
+import { createRoot } from "solid-js"
+
function createRoot(fn: (dispose: () => void) => T): T
```
diff --git a/src/routes/reference/reactive-utilities/from.mdx b/src/routes/reference/reactive-utilities/from.mdx
index b774a9f753..35de4054b8 100644
--- a/src/routes/reference/reactive-utilities/from.mdx
+++ b/src/routes/reference/reactive-utilities/from.mdx
@@ -3,6 +3,8 @@ title: from
---
```tsx
+import { from } from "solid-js"
+
function from(
producer:
| ((setter: (v: T) => T) => () => void)
diff --git a/src/routes/reference/reactive-utilities/get-owner.mdx b/src/routes/reference/reactive-utilities/get-owner.mdx
index 45b023ef26..1be5c3f788 100644
--- a/src/routes/reference/reactive-utilities/get-owner.mdx
+++ b/src/routes/reference/reactive-utilities/get-owner.mdx
@@ -3,6 +3,9 @@ title: getOwner
---
```tsx
+import { getOwner } from "solid-js"
+import type { Owner } from "solid-js"
+
function getOwner(): Owner
```
diff --git a/src/routes/reference/reactive-utilities/index-array.mdx b/src/routes/reference/reactive-utilities/index-array.mdx
index 92c595494e..a8b6036eef 100644
--- a/src/routes/reference/reactive-utilities/index-array.mdx
+++ b/src/routes/reference/reactive-utilities/index-array.mdx
@@ -3,6 +3,8 @@ title: indexArray
---
```tsx
+import { indexArray } from "solid-js"
+
function indexArray(
list: () => readonly T[],
mapFn: (v: () => T, i: number) => U
diff --git a/src/routes/reference/reactive-utilities/map-array.mdx b/src/routes/reference/reactive-utilities/map-array.mdx
index 2a85a6abd0..78e2dbfd4a 100644
--- a/src/routes/reference/reactive-utilities/map-array.mdx
+++ b/src/routes/reference/reactive-utilities/map-array.mdx
@@ -3,6 +3,8 @@ title: mapArray
---
```ts
+import { mapArray } from "solid-js"
+
function mapArray(
list: () => readonly T[],
mapFn: (v: T, i: () => number) => U
diff --git a/src/routes/reference/reactive-utilities/merge-props.mdx b/src/routes/reference/reactive-utilities/merge-props.mdx
index 84f3222765..5027201f13 100644
--- a/src/routes/reference/reactive-utilities/merge-props.mdx
+++ b/src/routes/reference/reactive-utilities/merge-props.mdx
@@ -3,6 +3,8 @@ title: mergeProps
---
```ts
+import { mergeProps } from "solid-js"
+
function mergeProps(...sources: any): any
```
diff --git a/src/routes/reference/reactive-utilities/observable.mdx b/src/routes/reference/reactive-utilities/observable.mdx
index 13e44389a9..4e1bf23dfa 100644
--- a/src/routes/reference/reactive-utilities/observable.mdx
+++ b/src/routes/reference/reactive-utilities/observable.mdx
@@ -3,6 +3,8 @@ title: observable
---
```ts
+import { observable } from "solid-js"
+
function observable(input: () => T): Observable
```
diff --git a/src/routes/reference/reactive-utilities/on.mdx b/src/routes/reference/reactive-utilities/on.mdx
index 206f50f9b8..33ff2fa321 100644
--- a/src/routes/reference/reactive-utilities/on.mdx
+++ b/src/routes/reference/reactive-utilities/on.mdx
@@ -3,11 +3,13 @@ title: on
---
```ts
+import { on } from "solid-js"
+
function on any> | (() => any), U>(
deps: T,
fn: (input: T, prevInput: T, prevValue?: U) => U,
options: { defer?: boolean } = {}
-): (prevValue?: U) => U | undefined;
+): (prevValue?: U) => U | undefined
```
`on` is designed to be passed into a computation to make its dependencies explicit.
diff --git a/src/routes/reference/reactive-utilities/run-with-owner.mdx b/src/routes/reference/reactive-utilities/run-with-owner.mdx
index 76846c7179..1fa7b60a81 100644
--- a/src/routes/reference/reactive-utilities/run-with-owner.mdx
+++ b/src/routes/reference/reactive-utilities/run-with-owner.mdx
@@ -4,7 +4,10 @@ order: 5
---
```ts
-function runWithOwner(owner: Owner, fn: (() => void) => T): T;
+import { runWithOwner } from "solid-js"
+import type { Owner } from "solid-js"
+
+function runWithOwner(owner: Owner, fn: (() => void) => T): T
```
Executes the given function under the provided owner, instead of (and without affecting) the owner of the outer scope.
diff --git a/src/routes/reference/reactive-utilities/split-props.mdx b/src/routes/reference/reactive-utilities/split-props.mdx
index 0c41b85021..3841792ce2 100644
--- a/src/routes/reference/reactive-utilities/split-props.mdx
+++ b/src/routes/reference/reactive-utilities/split-props.mdx
@@ -3,6 +3,8 @@ title: splitProps
---
```ts
+import { splitProps } from "solid-js"
+
function splitProps(
props: T,
...keys: Array<(keyof T)[]>
diff --git a/src/routes/reference/reactive-utilities/start-transition.mdx b/src/routes/reference/reactive-utilities/start-transition.mdx
index f70f30d822..2abdf9dadd 100644
--- a/src/routes/reference/reactive-utilities/start-transition.mdx
+++ b/src/routes/reference/reactive-utilities/start-transition.mdx
@@ -3,7 +3,9 @@ title: startTransition
---
```ts
-function startTransition: (fn: () => void) => Promise;
+import { startTransition } from "solid-js"
+
+function startTransition: (fn: () => void) => Promise
```
diff --git a/src/routes/reference/reactive-utilities/untrack.mdx b/src/routes/reference/reactive-utilities/untrack.mdx
index 9e886c5d11..285915159a 100644
--- a/src/routes/reference/reactive-utilities/untrack.mdx
+++ b/src/routes/reference/reactive-utilities/untrack.mdx
@@ -3,6 +3,8 @@ title: untrack
---
```ts
+import { untrack } from "solid-js"
+
function untrack(fn: () => T): T
```
diff --git a/src/routes/reference/reactive-utilities/use-transition.mdx b/src/routes/reference/reactive-utilities/use-transition.mdx
index 382fa9b47c..97b085731f 100644
--- a/src/routes/reference/reactive-utilities/use-transition.mdx
+++ b/src/routes/reference/reactive-utilities/use-transition.mdx
@@ -3,6 +3,8 @@ title: useTransition
---
```ts
+import { useTransition } from "solid-js"
+
function useTransition(): [
pending: () => boolean,
startTransition: (fn: () => void) => Promise
diff --git a/src/routes/reference/rendering/dev.mdx b/src/routes/reference/rendering/dev.mdx
index 7a7f92382e..39cf81e4fa 100644
--- a/src/routes/reference/rendering/dev.mdx
+++ b/src/routes/reference/rendering/dev.mdx
@@ -3,6 +3,8 @@ title: DEV
---
```ts
+import { DEV } from "solid-js"
+
const DEV: object | undefined
```
@@ -13,8 +15,8 @@ If you want code to run only in development mode (most useful in libraries), you
Note that it is always defined on the server, so you may want to combine with [isServer](/reference/rendering/is-server):
```ts
-import { DEV } from "solid-js";
-import { isServer } from "solid-js/web";
+import { DEV } from "solid-js"
+import { isServer } from "solid-js/web"
if (DEV && !isServer) {
console.log(...);
diff --git a/src/routes/reference/rendering/hydrate.mdx b/src/routes/reference/rendering/hydrate.mdx
index 208a9cff73..ba63673baa 100644
--- a/src/routes/reference/rendering/hydrate.mdx
+++ b/src/routes/reference/rendering/hydrate.mdx
@@ -3,7 +3,15 @@ title: hydrate
---
```ts
-function hydrate(fn: () => JSX.Element, node: MountableElement, options?: { renderId?: string; owner?: unknown }): () => void
+import { hydrate } from "solid-js/web"
+import type { JSX } from "solid-js"
+import type { MountableElement } from "solid-js/web"
+
+function hydrate(
+ fn: () => JSX.Element,
+ node: MountableElement,
+ options?: { renderId?: string; owner?: unknown }
+): () => void
```
diff --git a/src/routes/reference/rendering/hydration-script.mdx b/src/routes/reference/rendering/hydration-script.mdx
index e11d72930d..3448d9041c 100644
--- a/src/routes/reference/rendering/hydration-script.mdx
+++ b/src/routes/reference/rendering/hydration-script.mdx
@@ -3,6 +3,9 @@ title: hydrationScript
---
```ts
+import { generateHydrationScript, HydrationScript } from "solid-js/web"
+import type { JSX } from "solid-js"
+
function generateHydrationScript(options: {
nonce?: string
eventNames?: string[]
diff --git a/src/routes/reference/rendering/is-server.mdx b/src/routes/reference/rendering/is-server.mdx
index 2c59c4868b..4a8539ab26 100644
--- a/src/routes/reference/rendering/is-server.mdx
+++ b/src/routes/reference/rendering/is-server.mdx
@@ -3,6 +3,8 @@ title: isServer
---
```ts
+import { isServer } from "solid-js/web"
+
const isServer: boolean
```
diff --git a/src/routes/reference/rendering/render-to-stream.mdx b/src/routes/reference/rendering/render-to-stream.mdx
index 82b37aa5be..f0a61c9d47 100644
--- a/src/routes/reference/rendering/render-to-stream.mdx
+++ b/src/routes/reference/rendering/render-to-stream.mdx
@@ -3,6 +3,8 @@ title: renderToStream
---
```ts
+import { renderToStream } from "solid-js/web"
+
function renderToStream(
fn: () => T,
options?: {
diff --git a/src/routes/reference/rendering/render-to-string-async.mdx b/src/routes/reference/rendering/render-to-string-async.mdx
index 45c5416536..5cfb565731 100644
--- a/src/routes/reference/rendering/render-to-string-async.mdx
+++ b/src/routes/reference/rendering/render-to-string-async.mdx
@@ -3,6 +3,8 @@ title: renderToStringAsync
---
```ts
+import { renderToStringAsync } from "solid-js/web"
+
function renderToStringAsync(
fn: () => T,
options?: {
diff --git a/src/routes/reference/rendering/render-to-string.mdx b/src/routes/reference/rendering/render-to-string.mdx
index 159d9a9d21..454b0c9718 100644
--- a/src/routes/reference/rendering/render-to-string.mdx
+++ b/src/routes/reference/rendering/render-to-string.mdx
@@ -3,6 +3,8 @@ title: renderToString
---
```ts
+import { renderToString } from "solid-js/web"
+
function renderToString(
fn: () => T,
options?: {
diff --git a/src/routes/reference/rendering/render.mdx b/src/routes/reference/rendering/render.mdx
index a9585858a4..f30f5b2976 100644
--- a/src/routes/reference/rendering/render.mdx
+++ b/src/routes/reference/rendering/render.mdx
@@ -3,9 +3,14 @@ title: render
---
```ts
-import type { JSX, MountableElement } from "solid-js/web"
-
-function render(code: () => JSX.Element, element: MountableElement): () => void
+import { render } from "solid-js/web"
+import type { JSX } from "solid-js"
+import type { MountableElement } from "solid-js/web"
+
+function render(
+ code: () => JSX.Element,
+ element: MountableElement
+): () => void
```
diff --git a/src/routes/reference/secondary-primitives/create-computed.mdx b/src/routes/reference/secondary-primitives/create-computed.mdx
index e4fc87b7b4..bd565ff381 100644
--- a/src/routes/reference/secondary-primitives/create-computed.mdx
+++ b/src/routes/reference/secondary-primitives/create-computed.mdx
@@ -3,6 +3,8 @@ title: createComputed
---
```ts
+import { createComputed } from "solid-js"
+
function createComputed(fn: (v: T) => T, value?: T): void
```
diff --git a/src/routes/reference/secondary-primitives/create-deferred.mdx b/src/routes/reference/secondary-primitives/create-deferred.mdx
index 047221fb4b..d62f43b088 100644
--- a/src/routes/reference/secondary-primitives/create-deferred.mdx
+++ b/src/routes/reference/secondary-primitives/create-deferred.mdx
@@ -3,6 +3,8 @@ title: createDeferred
---
```ts
+import { createDeferred } from "solid-js"
+
function createDeferred(
source: () => T,
options?: {
diff --git a/src/routes/reference/secondary-primitives/create-reaction.mdx b/src/routes/reference/secondary-primitives/create-reaction.mdx
index 9ce9b5a253..3005c32cfb 100644
--- a/src/routes/reference/secondary-primitives/create-reaction.mdx
+++ b/src/routes/reference/secondary-primitives/create-reaction.mdx
@@ -3,6 +3,8 @@ title: createReaction
---
```ts
+import { createReaction } from "solid-js"
+
function createReaction(onInvalidate: () => void): (fn: () => void) => void
```
diff --git a/src/routes/reference/secondary-primitives/create-render-effect.mdx b/src/routes/reference/secondary-primitives/create-render-effect.mdx
index e7f6f239ec..bf8a77852f 100644
--- a/src/routes/reference/secondary-primitives/create-render-effect.mdx
+++ b/src/routes/reference/secondary-primitives/create-render-effect.mdx
@@ -3,6 +3,8 @@ title: createRenderEffect
---
```ts
+import { createRenderEffect } from "solid-js"
+
function createRenderEffect(fn: (v: T) => T, value?: T): void
```
diff --git a/src/routes/reference/secondary-primitives/create-selector.mdx b/src/routes/reference/secondary-primitives/create-selector.mdx
index aed347960e..d48959d100 100644
--- a/src/routes/reference/secondary-primitives/create-selector.mdx
+++ b/src/routes/reference/secondary-primitives/create-selector.mdx
@@ -3,6 +3,8 @@ title: createSelector
---
```ts
+import { createSelector } from "solid-js"
+
function createSelector(
source: () => T,
fn?: (a: U, b: T) => boolean
diff --git a/src/routes/reference/server-utilities/get-request-event.mdx b/src/routes/reference/server-utilities/get-request-event.mdx
index c281a96ab9..edbb1ce382 100644
--- a/src/routes/reference/server-utilities/get-request-event.mdx
+++ b/src/routes/reference/server-utilities/get-request-event.mdx
@@ -3,14 +3,22 @@ title: getRequestEvent
---
Solid uses Async Local Storage as a way of injecting the request context anywhere on the server.
-This is also the event that shows up in middleware.
+The server provides a utility function to access this context
+(called a `RequestEvent`).
-It can be retrieved by `getRequestEvent` from `"solid-js/web"`.
+```js
+import { getRequestEvent } from "solid-js/web"
+import type { RequestEvent } from "solid-js/web"
+
+function getRequestEvent(): RequestEvent | undefined
+```
+
+You can retrieve the request event by calling `getRequestEvent`:
```js
-import { getRequestEvent } from "solid-js/web";
+import { getRequestEvent } from "solid-js/web"
-const event = getRequestEvent();
+const event = getRequestEvent()
```
## Request
@@ -21,7 +29,7 @@ You can access properties off of it such as `url` and `headers`.
`body`, however, does not typically need to be handled directly for things such as server functions or rendering, which already handle mapping.
```js
-import { getRequestEvent } from "solid-js/web";
+import { getRequestEvent } from "solid-js/web"
const event = getRequestEvent();
if (event) {
@@ -35,7 +43,7 @@ The `getRequestEvent` can also be used to stub out the Response - this extends t
This is kept up to date so it can be used to read and write headers and status for the current response.
```js
-import { getRequestEvent } from "solid-js/web";
+import { getRequestEvent } from "solid-js/web"
const event = getRequestEvent();
if (event) {
diff --git a/src/routes/reference/store-utilities/create-mutable.mdx b/src/routes/reference/store-utilities/create-mutable.mdx
index c69db269eb..83be464fb7 100644
--- a/src/routes/reference/store-utilities/create-mutable.mdx
+++ b/src/routes/reference/store-utilities/create-mutable.mdx
@@ -7,6 +7,9 @@ title: createMutable
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.
```tsx
+import { createMutable } from "solid-js/store"
+import type { Store, StoreNode } from "solid-js/store"
+
function createMutable(state: T | Store): Store;
```
@@ -18,7 +21,7 @@ function createMutable(state: T | Store): Store;
```tsx
-import { createMutable } from "solid-js/store";
+import { createMutable } from "solid-js/store"
const state = createMutable({
someValue: 0,
diff --git a/src/routes/reference/store-utilities/create-store.mdx b/src/routes/reference/store-utilities/create-store.mdx
index cdc53eab20..c084231aac 100644
--- a/src/routes/reference/store-utilities/create-store.mdx
+++ b/src/routes/reference/store-utilities/create-store.mdx
@@ -7,8 +7,8 @@ Stores were intentionally designed to manage data structures like objects and ar
## Types Signature
```tsx
-import { createStore } from "solid-js/store";
-import type { StoreNode, Store, SetStoreFunction } from "solid-js/store";
+import { createStore } from "solid-js/store"
+import type { StoreNode, Store, SetStoreFunction } from "solid-js/store"
function createStore(
state: T | Store
diff --git a/src/routes/reference/store-utilities/modify-mutable.mdx b/src/routes/reference/store-utilities/modify-mutable.mdx
index 82d426153e..e472daff0c 100644
--- a/src/routes/reference/store-utilities/modify-mutable.mdx
+++ b/src/routes/reference/store-utilities/modify-mutable.mdx
@@ -7,7 +7,9 @@ title: modifyMutable
It operates within a single [`batch`](/reference/reactive-utilities/batch), ensuring that dependent computations are updated just once, rather than triggering updates for each individual change.
```tsx
-function modifyMutable(mutable: T, modifier: (state: T) => T): void;
+import { modifyMutable } from "solid-js/store"
+
+function modifyMutable(mutable: T, modifier: (state: T) => T): void
```
The function takes two arguments:
@@ -23,7 +25,7 @@ The function takes two arguments:
For example, if the UI depends on multiple fields of a mutable:
```tsx
-import { createMutable } from "solid-js/store";
+import { createMutable } from "solid-js/store"
const state = createMutable({
user: {
@@ -45,7 +47,7 @@ state.user.lastName = "Doe";
To trigger just a single update, the fields can be modified using a `batch`:
```tsx
-import { batch } from "solid-js";
+import { batch } from "solid-js"
batch(() => {
state.user.firstName = "Jane";
@@ -53,10 +55,10 @@ batch(() => {
});
```
-`modifyMutable` combined with `reconcile` or [`produce`](/reference/store-utilities/produce) provides two alternate ways to do similar things:
+`modifyMutable` combined with [`reconcile`](/reference/store-utilities/reconcile) or [`produce`](/reference/store-utilities/produce) provides two alternate ways to do similar things:
```tsx
-import { modifyMutable, reconcile } from "solid-js/store";
+import { modifyMutable, reconcile } from "solid-js/store"
// Replace state.user with the specified object (deleting any other fields)
modifyMutable(
@@ -69,7 +71,7 @@ modifyMutable(
```
```tsx
-import { modifyMutable, produce } from "solid-js/store";
+import { modifyMutable, produce } from "solid-js/store"
// Modify two fields in batch, triggering just one update
modifyMutable(
diff --git a/src/routes/reference/store-utilities/produce.mdx b/src/routes/reference/store-utilities/produce.mdx
index 412f63ad72..4c6b5b2a04 100644
--- a/src/routes/reference/store-utilities/produce.mdx
+++ b/src/routes/reference/store-utilities/produce.mdx
@@ -5,6 +5,9 @@ title: produce
`produce` is an [Immer](https://immerjs.github.io/immer/) inspired API for Solid's Store objects that allow for localized mutation.
```ts
+import { produce } from "solid-js/store"
+import type { NotWrappable, Store } from "solid-js/store"
+
function produce(
fn: (state: T) => void
): (
diff --git a/src/routes/reference/store-utilities/reconcile.mdx b/src/routes/reference/store-utilities/reconcile.mdx
index 6183dedcd9..5fbaeda8a5 100644
--- a/src/routes/reference/store-utilities/reconcile.mdx
+++ b/src/routes/reference/store-utilities/reconcile.mdx
@@ -6,6 +6,9 @@ title: reconcile
This is useful when dealing with immutable data from stores or handling large API responses.
```tsx
+import { reconcile } from "solid-js/store"
+import type { NotWrappable, Store } from "solid-js/store"
+
function reconcile(
value: T | Store,
options?: {
@@ -14,7 +17,7 @@ function reconcile(
} = { key: "id" }
): (
state: T extends NotWrappable ? T : Store
-) => T extends NotWrappable ? T : Store;
+) => T extends NotWrappable ? T : Store
```
`reconcile` has a key option that can be used when available to match items.
@@ -28,7 +31,7 @@ The `key` and `merge` options provide flexibility to customize the reconciliatio
```ts
// subscribing to an observable
const unsubscribe = store.subscribe(({ todos }) => (
- setState('todos', reconcile(todos)));
+ setState('todos', reconcile(todos));
);
onCleanup(() => unsubscribe());
diff --git a/src/routes/reference/store-utilities/unwrap.mdx b/src/routes/reference/store-utilities/unwrap.mdx
index e055ed095a..64742a17ef 100644
--- a/src/routes/reference/store-utilities/unwrap.mdx
+++ b/src/routes/reference/store-utilities/unwrap.mdx
@@ -5,7 +5,8 @@ title: unwrap
`unwrap` returns the underlying data in the store without a proxy.
```tsx
-import { unwrap } from "solid-js/store";
+import { unwrap } from "solid-js/store"
+import type { Store } from "solid-js/store"
-function unwrap(store: Store): T;
+function unwrap(store: Store): T
```
diff --git a/src/routes/solid-meta/getting-started/installation-and-setup.mdx b/src/routes/solid-meta/getting-started/installation-and-setup.mdx
index 765260b836..80475a1379 100644
--- a/src/routes/solid-meta/getting-started/installation-and-setup.mdx
+++ b/src/routes/solid-meta/getting-started/installation-and-setup.mdx
@@ -42,7 +42,7 @@ pnpm add @solidjs/meta
4. [`
-
);
```
-In the example above, the `Home` component is lazy loaded using the `lazy` function.
+In the example above, the `Users` component is lazy loaded using the `lazy` function.
The `lazy` function takes a function that returns a promise, which resolves to the component you want to load.
-When the route is matched, the component will be loaded and rendered.
\ No newline at end of file
+When the route is matched, the component will be loaded and rendered.
diff --git a/src/routes/solid-router/concepts/actions.mdx b/src/routes/solid-router/concepts/actions.mdx
index a55f9083ee..ea3b969482 100644
--- a/src/routes/solid-router/concepts/actions.mdx
+++ b/src/routes/solid-router/concepts/actions.mdx
@@ -30,7 +30,7 @@ To create an action, use the `action` function from the `@solidjs/router` packag
This function takes an asynchronous function as an argument and returns a new function that can be used to submit data.
```tsx
-import { action, useAction } from "@solidjs/router";
+import { action } from "@solidjs/router";
const echo = action(async (message: string) => {
// Simulates an asynchronous operation, such as an API call
@@ -48,8 +48,14 @@ Typically, route actions are used with some sort of solution like fetch or Graph
To use the action, you can call it from within a component using `useAction`.
This returns a function that can be called with the necessary arguments to trigger the action.
-```tsx
-import { useAction } from "@solidjs/router";
+```tsx del={1} ins={2,9-13}
+import { action } from "@solidjs/router";
+import { action, useAction } from "@solidjs/router";
+
+const echo = action(async (message: string) => {
+ await new Promise((resolve, reject) => setTimeout(resolve, 1000));
+ console.log(message);
+});
export function MyComponent() {
const myEcho = useAction(echo);
@@ -69,7 +75,8 @@ Anything returned from an action can be accessed using the reactive `action.resu
To access the action's result, you must pass the action to `useSubmission`:
-```tsx {8,14}
+```tsx del={1} ins={2,11,15-17}
+import { action, useAction } from "@solidjs/router";
import { action, useAction, useSubmission } from "@solidjs/router";
const echo = action(async (message: string) => {
@@ -90,7 +97,7 @@ export function MyComponent() {
```
Using `useSubmission` leaves the implementation details of how you trigger `echo` up to you.
-Whe handling user inputs, for example, it is better to use a `form` for a multitude of reasons.
+When handling user inputs, for example, it is better to use a `form` for a multitude of reasons.
## Using forms to submit data
diff --git a/src/routes/solid-router/getting-started/component.mdx b/src/routes/solid-router/getting-started/component.mdx
index 8a8563a57b..dd214874ca 100644
--- a/src/routes/solid-router/getting-started/component.mdx
+++ b/src/routes/solid-router/getting-started/component.mdx
@@ -39,7 +39,7 @@ render(
() => (
Hello World!} />
+ Hello World! } />
),
diff --git a/src/routes/solid-router/getting-started/installation-and-setup.mdx b/src/routes/solid-router/getting-started/installation-and-setup.mdx
index 745f430b83..419c943802 100644
--- a/src/routes/solid-router/getting-started/installation-and-setup.mdx
+++ b/src/routes/solid-router/getting-started/installation-and-setup.mdx
@@ -2,7 +2,7 @@
title: Installation and setup
---
-Solid Router is the universal router for SolidJS which works for rendering on the client or the server.
+Solid Router is the universal router for Solid which works for rendering on the client or the server.
It was inspired by and combines paradigms of [React Router](https://reactrouter.com/en/main) and the [Ember Router](https://guides.emberjs.com/release/routing/).
A router provides a way to change a user's view based on the URL in the browser.
@@ -20,11 +20,23 @@ npm i @solidjs/router
```
## Configure the routes
@@ -38,7 +50,13 @@ To configure your routes, import the `Router` component and then start the appli
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";
-render(() =>
, document.getElementById("app"));
+const wrapper = document.getElementById("app");
+
+if (!wrapper) {
+ throw new Error("Wrapper div not found");
+}
+
+render(() =>
, wrapper)
```
This sets up the router that will match on the url and render the appropriate route.
diff --git a/src/routes/solid-router/index.mdx b/src/routes/solid-router/index.mdx
index 0a8cda8354..f6b645832c 100644
--- a/src/routes/solid-router/index.mdx
+++ b/src/routes/solid-router/index.mdx
@@ -5,11 +5,11 @@ title: Overview
# Overview
-Solid Router is the universal router for SolidJS which works for rendering on the client or the server.
+Solid-Router is the universal router for Solid which works for rendering on the client or the server.
It was inspired by and combines paradigms of [React Router](https://reactrouter.com/en/main) and the [Ember Router](https://guides.emberjs.com/release/routing/).
A router provides a way to change a user's view based on the URL in the browser.
diff --git a/src/routes/solid-router/reference/components/route.mdx b/src/routes/solid-router/reference/components/route.mdx
index 1a8ceaf144..5f94c447ac 100644
--- a/src/routes/solid-router/reference/components/route.mdx
+++ b/src/routes/solid-router/reference/components/route.mdx
@@ -5,7 +5,6 @@ title: Route
`Route` is the component used when defining the routes of an application.
This component is used to define the structure of the application and the components that will be rendered for each route.
-
-| prop | type | description |
-| ------------ | --------------- | ----------------------------------------------------------------- |
-| path | `string \| string[]` | Path partial for defining the route segment |
-| component | `Component` | Component that will be rendered for the matched segment |
-| matchFilters | `MatchFilters` | Additional constraints for matching against the route |
-| children | `JSX.Element` | Nested `