& {
+ value?: string;
+ "prop:disabledDates"?: string[];
+ onDatechange?: (event: CustomEvent<{ value: string }>) => void;
+ };
+ }
+ }
+}
+```
+
+With the file in place, `` type-checks, `event.detail.value` in `onDatechange` is a `string`, and `prop:disabledDates={1}` reports `Type 'number' is not assignable to type 'string[]'`.
+Inside the augmented namespace, `HTMLAttributes` is the namespace's own interface, which supplies the global attributes, `ref`, and the standard event handlers.
+
+Two details decide whether the declaration applies:
+
+- The file must be a module.
+ The `export {}` line, or any `import` or `export`, makes `declare module` an augmentation that merges into the package's types.
+ Without it the file is a global script, and the same block declares a new `@solidjs/web` module that replaces the package's types: imports such as `render` report `Module '"@solidjs/web"' has no exported member 'render'`, and the tag is still unknown.
+- No `.ts` file next to it may share its name.
+ TypeScript treats `date-picker.d.ts` beside `date-picker.ts` as that file's compiled output and leaves it out of the program, so the declaration never applies and nothing reports why.
+
+Augment `@solidjs/web`, not `solid-js`.
+`solid-js` has no `JSX` namespace, so a `declare module "solid-js"` block does not change what the checker accepts in JSX.
+[Web components](/guides/integrate-non-solid-code#web-components) covers how attributes, `prop:` properties, and events reach the element at runtime.
+
## Server functions and the router
A `"use server"` function is typed like any async function, and the caller sees its declared return:
@@ -378,6 +415,11 @@ A function is not a valid child, so the checker reports it; add the parentheses.
The `ref` variable is typed `HTMLInputElement | undefined` and read in the component body, before the element exists.
Move the read into an event handler or `onSettled`, and declare the variable with `!` once every read happens after creation.
+### `Module '"@solidjs/web"' has no exported member` after adding a declaration file
+
+The `.d.ts` file that declares a custom element has no `import` or `export`, so its `declare module "@solidjs/web"` block replaces the package's types instead of adding to them.
+Add `export {};` at the top of the file; see [Custom elements](#custom-elements).
+
## Recap
- Type `props` on the parameter, or use `Component` when the component is a value; both produce the same checks.
diff --git a/src/routes/(5)guides/(13)integrate-non-solid-code.mdx b/src/routes/(5)guides/(13)integrate-non-solid-code.mdx
index c105f274a..fe19b914e 100644
--- a/src/routes/(5)guides/(13)integrate-non-solid-code.mdx
+++ b/src/routes/(5)guides/(13)integrate-non-solid-code.mdx
@@ -131,10 +131,12 @@ Declare it once, with the attribute, property, and event names the element suppo
```ts
// src/types/date-picker.d.ts
+export {};
+
declare module "@solidjs/web" {
namespace JSX {
interface IntrinsicElements {
- "date-picker": JSX.HTMLAttributes & {
+ "date-picker": HTMLAttributes & {
value?: string;
"prop:disabledDates"?: string[];
onDatechange?: (event: CustomEvent<{ value: string }>) => void;
@@ -144,6 +146,9 @@ declare module "@solidjs/web" {
}
```
+The `export {}` line keeps the file a module, so the block adds to the types of `@solidjs/web` instead of replacing them.
+[Custom elements](/guides/typescript#custom-elements) in the TypeScript guide covers the rules for this file.
+
## Render Solid into a foreign container
Two situations move Solid content into a DOM node Solid did not create.
diff --git a/src/routes/reference/(1)solid-js/(1)reactivity/is-pending.mdx b/src/routes/reference/(1)solid-js/(1)reactivity/is-pending.mdx
index 7f4378685..b639af1c8 100644
--- a/src/routes/reference/(1)solid-js/(1)reactivity/is-pending.mdx
+++ b/src/routes/reference/(1)solid-js/(1)reactivity/is-pending.mdx
@@ -71,6 +71,7 @@ const results = createMemo(() => searchProducts(query()));
- Reports on updates to a value that exists. Before a first value, the read inside `fn` follows the surrounding `Loading` path.
- A bare `refresh()` does not flip `isPending`; pair it with `affects()` to make the re-ask visible.
+- An errored expression is not pending: `isPending` returns `false` and does not rethrow the error. Read the value itself inside an `Errored` boundary to show the failure.
## Common problems
diff --git a/src/routes/reference/(1)solid-js/(3)lifecycle-actions/action.mdx b/src/routes/reference/(1)solid-js/(3)lifecycle-actions/action.mdx
index 37914d308..8f841739e 100644
--- a/src/routes/reference/(1)solid-js/(3)lifecycle-actions/action.mdx
+++ b/src/routes/reference/(1)solid-js/(3)lifecycle-actions/action.mdx
@@ -120,11 +120,13 @@ await addTodo("buy milk");
- A plain `await` leaves the transaction. Put a bare `yield` before any writes that follow an `await`, or use `yield` in place of `await`.
- Do not call `flush()` inside the generator; it drains the transaction mid-step.
- Navigation-shaped updates (write an input, read the async result) do not need an action. A plain setter call is held automatically.
+- A failure rejects the returned promise and does not reach an `Errored` boundary. Catch it inside the generator, or with `.catch()` where the action is called.
## Common problems
- [The screen looks dead after a click](/guides/debugging-reactivity#the-screen-looks-dead-after-a-click)
- [Errors show for a moment and then vanish](/guides/forms#errors-show-for-a-moment-and-then-vanish)
+- [A failed action does not show the `Errored` fallback](/concepts/mutations#a-failed-action-does-not-show-the-errored-fallback)
## Learn more
diff --git a/src/routes/reference/(1)solid-js/(5)components-jsx/errored.mdx b/src/routes/reference/(1)solid-js/(5)components-jsx/errored.mdx
index f4edad008..f9c6c6509 100644
--- a/src/routes/reference/(1)solid-js/(5)components-jsx/errored.mdx
+++ b/src/routes/reference/(1)solid-js/(5)components-jsx/errored.mdx
@@ -71,11 +71,14 @@ The subtree to guard.
- The boundary catches errors thrown while rendering its subtree and errors that travel through the reactive graph, including rejected async reads. Handle errors in event handlers where they happen.
- `reset()` recomputes the failing sources. If the cause persists, the boundary errors again.
+- While a `reset()` retry is pending, the fallback stays on screen, so a `Loading` inside the boundary does not show. To show a placeholder during the retry, put `Loading` outside `Errored` with an `on` value that the retry changes.
- Errors thrown from the fallback itself go to the parent `Errored`.
## Common problems
- [Every update stopped after an error](/guides/debugging-reactivity#every-update-stopped-after-an-error)
+- [Retry keeps showing the error instead of a loading state](/concepts/boundaries#retry-keeps-showing-the-error-instead-of-a-loading-state)
+- [A failed action does not show the `Errored` fallback](/concepts/mutations#a-failed-action-does-not-show-the-errored-fallback)
## Learn more
diff --git a/src/routes/reference/(1)solid-js/(6)advanced/(6)interop-async/from.mdx b/src/routes/reference/(1)solid-js/(6)advanced/(6)interop-async/from.mdx
new file mode 100644
index 000000000..9ebf7dc04
--- /dev/null
+++ b/src/routes/reference/(1)solid-js/(6)advanced/(6)interop-async/from.mdx
@@ -0,0 +1,96 @@
+---
+title: "from"
+category: "Advanced / Interop & Async"
+use_cases: "advanced interop & async api, from usage"
+tags:
+ - "from"
+ - "advanced"
+ - "interop"
+ - "async"
+ - "reference"
+ - "api"
+ - "v2"
+version: "2.0"
+description: "Converts a callback subscription, an Observable or an AsyncIterable into an AsyncIterable for a Solid computation."
+source_repo: "solidjs/solid"
+source_ref: "next"
+source_path: "packages/signals/src/from.ts"
+---
+
+{/* Generated by scripts/extract-solid-ref.mjs. Edit the source JSDoc or disposition map, then regenerate. */}
+
+Converts a callback subscription, an Observable or an AsyncIterable into an
+AsyncIterable for a Solid computation. A subscription keeps only the latest
+value, and a value the source emits during `subscribe` is served without a
+loading frame; an AsyncIterable streams every value through.
+
+The source closes on supersede — the owning computation re-running — and
+on owner disposal. Inside an async generator memo that holds for a
+`for await` that starts before the first `await`; one that starts after it
+has no owner to bind to, so its source closes only when the loop ends.
+Prefer returning `from(...)` from its own memo, with awaited inputs read
+from upstream memos and transforms done in a downstream memo.
+
+Iterate the result with `for await` or return it from a computation: its
+`next()` returns an already-buffered value as a bare result, not a promise.
+
+## Import
+
+```ts
+import { from } from "solid-js";
+```
+
+## Type signature
+
+```ts
+function from(source: FromSource): AsyncIterable;
+```
+
+## Parameters
+
+### `source`
+
+- **Type:** `FromSource`
+
+A subscribe function `(next, error, complete) => unsubscribe`, an object with `subscribe(observer)` such as an Observable, or an `AsyncIterable`. See `FromSource` below.
+
+## Examples
+
+```ts
+const position = createMemo(() =>
+ from((next, error) => {
+ const id = navigator.geolocation.watchPosition(next, error);
+ return () => navigator.geolocation.clearWatch(id);
+ })
+);
+const ticks = createMemo(() => from(interval$(rate())));
+```
+
+## Caveats
+
+- During hydration, a subscription read on the server reconnects on the client once its section has hydrated, instead of staying at the server's value.
+
+## Learn more
+
+- [Async reactivity](/concepts/async-reactivity)
+- [Integrate non-Solid code](/guides/integrate-non-solid-code)
+
+## Related types
+
+### `FromSource`
+
+Anything `from` accepts: a subscribe function
+(`(next, error, complete) => unsubscribe`), an object with
+`subscribe(observer)` (RxJS and TC39 Observables, including
+`Symbol.observable` / `"@@observable"` interop), or an AsyncIterable.
+
+```ts
+type FromSource =
+ | ((
+ next: (value: T) => void,
+ error: (err: unknown) => void,
+ complete: () => void
+ ) => Teardown)
+ | { subscribe(observer: FromObserver): Teardown }
+ | AsyncIterable;
+```