solid-js 2.0.0-beta.12 → 2.0.0-beta.13

package/CHEATSHEET.md

@@ -216,9 +216,12 @@ const rest = omit(props, "class", "style"); // replaces splitProps
 const user = createMemo(() => fetchUser(id()));
 // Reading user() suspends until ready; wrap in <Loading>.
 
-// "Refreshing…" indicator (false during initial Loading)
+// "Refreshing…" indicator (false on the Loading path)
 isPending(() => user());
 
+// Render guard: pending read follows the Loading path
+isPending(() => user(), true);
+
 // Peek at the in-flight value during a transition
 latest(id);
 
@@ -290,7 +293,7 @@ Optimistic writes revert when the transition completes.
 </Loading>
 
 // Error boundary (replaces <ErrorBoundary>)
-<Errored fallback={(err, reset) => <button onClick={reset}>retry</button>}>
+<Errored fallback={(err, reset) => <button onClick={reset}>retry {String(err())}</button>}>
   <Page />
 </Errored>
 
@@ -435,7 +438,15 @@ function titleDirective(source) {
 <some-element enabled="true" />     // when platform requires the string
 ```
 
-Lowercase HTML attribute names. No `attr:` / `bool:` / `oncapture:` namespaces. Event handlers stay camelCase (`onClick`).
+Lowercase HTML attribute names. No `attr:` / `bool:` / `on:` / `oncapture:` namespaces. Event handlers stay camelCase (`onClick`).
+
+For native listener options, use a ref callback:
+
+```jsx
+const on = (type, handler, options) => el => el.addEventListener(type, handler, options);
+
+<button ref={on("click", handleClick, { capture: true })} />;
+```
 
 ### Conditional classes — always use the array/object form
 
@@ -608,7 +619,7 @@ If your training data is 1.x, these are the corrections. **Read this before gene
 | `indexArray`                       | `mapArray` (handles non-keyed too)                                  |
 | `use:foo={x}` directives           | `ref={foo(x)}` (or array `ref={[a, b(x)]}`)                         |
 | `attr:` / `bool:` namespaces       | Standard attribute behavior                                         |
-| `oncapture:`                       | `addEventListener(..., { capture: true })`                          |
+| `on:` / `oncapture:`               | `onClick` for Solid events; ref callbacks for native listener opts  |
 | `resetErrorBoundaries`             | Boundaries heal automatically                                       |
 
 ### Behavior changes
@@ -623,8 +634,8 @@ If your training data is 1.x, these are the corrections. **Read this before gene
 - **`<Show>` / `<Match>` function children narrow values** — non-keyed children receive accessors; keyed children receive raw values.
 - **Stores: setters take a draft callback** — mutate the draft in place by default. Returning a new value is shallow (array index-replace, object top-level diff); reach for it for filter/remove. Keyed reconcile is a _projection-fn_ feature, not a setter feature.
 - **`undefined` is a real value in `merge`** — it overrides rather than "skip this key".
-- **Async lives in computations** — return a Promise/AsyncIterable from `createMemo`/`createStore(fn)`/`createProjection`. Reads suspend; wrap in `<Loading>`.
-- **`Loading` is initial-only by default** — once content has rendered, revalidation keeps it visible. Use `isPending(() => x())` for "refreshing…" indicators. Use `<Loading on={key}>` to re-show fallback on key changes.
+- **Async lives in computations** — return a Promise/AsyncIterable from `createMemo`/`createStore(fn)`/`createProjection`. Pending reads participate in `<Loading>`.
+- **`Loading` covers unresolved branches** — once content has rendered, revalidation keeps it visible. Use `isPending(() => x())` for "refreshing…" indicators, or `isPending(() => x(), true)` when a render guard should follow the Loading path. Use `<Loading on={key}>` to re-show fallback on key changes.
 - **No `Suspense.Provider` or single error path** — async errors flow to `<Errored>` (or effect `error`); no inline `resource.error` branching.
 - **`createRoot` is owned by parent by default** — disposed when parent disposes. To detach: `runWithOwner(null, fn)`.
 - **Refs are functions** — `ref={el => ...}`. No `useRef`-style ref objects. Compose with arrays: `ref={[a, b]}`.

package/dist/dev.cjs

@@ -869,7 +869,7 @@ function Match(props) {
 function Errored(props) {
   return createErrorBoundary(() => props.children, (err, reset) => {
     const f = props.fallback;
-    if ((typeof f !== "function" || f.length == 0)) console.error(err);
+    if ((typeof f !== "function" || f.length == 0)) console.error(err());
     return typeof f === "function" && f.length ? f(err, reset) : f;
   });
 }

package/dist/dev.js

@@ -868,7 +868,7 @@ function Match(props) {
 function Errored(props) {
   return createErrorBoundary(() => props.children, (err, reset) => {
     const f = props.fallback;
-    if ((typeof f !== "function" || f.length == 0)) console.error(err);
+    if ((typeof f !== "function" || f.length == 0)) console.error(err());
     return typeof f === "function" && f.length ? f(err, reset) : f;
   });
 }

package/dist/server.cjs

@@ -883,8 +883,8 @@ function createErrorBoundary(fn, fallback) {
   };
   const renderFallback = err => ctx ? runWithOwner(parent, () => {
     const fallbackOwner = createOwner();
-    return runWithOwner(fallbackOwner, () => fallback(err, () => {}));
-  }) : fallback(err, () => {});
+    return runWithOwner(fallbackOwner, () => fallback(() => err, () => {}));
+  }) : fallback(() => err, () => {});
   const serializeError = err => {
     if (ctx && owner.id && !runWithOwner(owner, () => getContext(NoHydrateContext))) {
       ctx.serialize(owner.id, err);
@@ -934,15 +934,13 @@ function flush() {}
 function resolve(fn) {
   throw new Error("resolve is not implemented on the server");
 }
-function isPending(fn, fallback) {
+function isPending(fn, loading) {
   try {
     fn();
     return false;
   } catch (err) {
-    if (err instanceof signals.NotReadyError && arguments.length > 1) {
-      return fallback;
-    }
-    throw err;
+    if (!(err instanceof signals.NotReadyError) || loading) throw err;
+    return false;
   }
 }
 function latest(fn) {

package/dist/server.js

@@ -882,8 +882,8 @@ function createErrorBoundary(fn, fallback) {
   };
   const renderFallback = err => ctx ? runWithOwner(parent, () => {
     const fallbackOwner = createOwner();
-    return runWithOwner(fallbackOwner, () => fallback(err, () => {}));
-  }) : fallback(err, () => {});
+    return runWithOwner(fallbackOwner, () => fallback(() => err, () => {}));
+  }) : fallback(() => err, () => {});
   const serializeError = err => {
     if (ctx && owner.id && !runWithOwner(owner, () => getContext(NoHydrateContext))) {
       ctx.serialize(owner.id, err);
@@ -933,15 +933,13 @@ function flush() {}
 function resolve(fn) {
   throw new Error("resolve is not implemented on the server");
 }
-function isPending(fn, fallback) {
+function isPending(fn, loading) {
   try {
     fn();
     return false;
   } catch (err) {
-    if (err instanceof NotReadyError && arguments.length > 1) {
-      return fallback;
-    }
-    throw err;
+    if (!(err instanceof NotReadyError) || loading) throw err;
+    return false;
   }
 }
 function latest(fn) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "Reactive JavaScript library for building user interfaces. Compiles JSX to real DOM with fine-grained signal-based updates — no virtual DOM.",
-  "version": "2.0.0-beta.12",
+  "version": "2.0.0-beta.13",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -107,7 +107,7 @@
     "performance"
   ],
   "dependencies": {
-    "@solidjs/signals": "^2.0.0-beta.12",
+    "@solidjs/signals": "^2.0.0-beta.13",
     "csstype": "^3.1.0",
     "seroval": "~1.5.0",
     "seroval-plugins": "~1.5.0"

package/types/client/flow.d.ts

@@ -2,6 +2,7 @@ import type { Accessor, RevealOrder } from "@solidjs/signals";
 export type { RevealOrder };
 import type { Element as SolidElement } from "../types.js";
 type NonZeroParams<T extends (...args: any[]) => any> = Parameters<T>["length"] extends 0 ? never : T;
+type ErrorAccessor = Accessor<unknown>;
 type ConditionalRenderCallback<T> = (item: Accessor<NonNullable<T>>) => SolidElement;
 type KeyedConditionalRenderCallback<T> = (item: NonNullable<T>) => SolidElement;
 type ConditionalRenderChildren<T, F extends ConditionalRenderCallback<T> = ConditionalRenderCallback<T>> = SolidElement | NonZeroParams<F>;
@@ -193,7 +194,7 @@ export declare function Match<T>(props: AnyMatchProps<T>): SolidElement;
  * @example
  * ```tsx
  * <Errored fallback={(err, reset) => (
- *   <div onClick={reset}>Error: {err.toString()}</div>
+ *   <div onClick={reset}>Error: {err().toString()}</div>
  * )}>
  *   <MyComp />
  * </Errored>
@@ -202,7 +203,7 @@ export declare function Match<T>(props: AnyMatchProps<T>): SolidElement;
  * @description https://docs.solidjs.com/reference/components/error-boundary
  */
 export declare function Errored(props: {
-    fallback: SolidElement | ((err: any, reset: () => void) => SolidElement);
+    fallback: SolidElement | ((err: ErrorAccessor, reset: () => void) => SolidElement);
     children: SolidElement;
 }): SolidElement;
 /**

package/types/client/hydration.d.ts

@@ -1,4 +1,4 @@
-import { createErrorBoundary as coreErrorBoundary, createRenderEffect as coreRenderEffect, createEffect as coreEffect, type ComputeFunction, type MemoOptions, type NoInfer, type ProjectionOptions, type Refreshable, type Signal, type SignalOptions, type SourceAccessor, type Store, type StoreSetter, type Context } from "@solidjs/signals";
+import { createRenderEffect as coreRenderEffect, createEffect as coreEffect, type Accessor, type ComputeFunction, type MemoOptions, type NoInfer, type ProjectionOptions, type Refreshable, type Signal, type SignalOptions, type SourceAccessor, type Store, type StoreSetter, type Context } from "@solidjs/signals";
 import type { Element as SolidElement } from "../types.js";
 type HydrationSsrFields = {
     /**
@@ -201,8 +201,8 @@ export declare const createSignal: {
 /**
  * Lower-level primitive that backs the `<Errored>` flow control.
  * Catches errors thrown inside `fn` and renders `fallback(error,
- * reset)` instead. `reset()` recomputes the failing sources so the
- * boundary can attempt to recover.
+ * reset)` instead. `error` is an accessor for the latest captured error;
+ * `reset()` recomputes the failing sources so the boundary can attempt to recover.
  *
  * App code should use `<Errored fallback={...}>` directly — reach for
  * this only when authoring a custom boundary component.
@@ -216,20 +216,20 @@ export declare const createSignal: {
  * // Custom boundary built on the primitive — adds telemetry around the
  * // canonical `<Errored>` shape.
  * function TracedErrored(props: {
- *   fallback: (e: unknown) => JSX.Element;
+ *   fallback: (e: () => unknown) => JSX.Element;
  *   children: JSX.Element;
  * }): JSX.Element {
  *   return createErrorBoundary(
  *     () => props.children,
  *     (err, reset) => {
- *       reportError(err);
+ *       reportError(err());
  *       return props.fallback(err);
  *     }
  *   ) as unknown as JSX.Element;
  * }
  * ```
  */
-export declare const createErrorBoundary: typeof coreErrorBoundary;
+export declare const createErrorBoundary: <U>(fn: () => any, fallback: (error: Accessor<unknown>, reset: () => void) => U) => () => unknown;
 /**
  * Creates an optimistic signal — a `Signal<T>` whose writes are
  * tentative inside an `action` transition: they show up immediately,

package/types/server/flow.d.ts

@@ -112,7 +112,7 @@ export declare function Match<T>(props: AnyMatchProps<T>): SolidElement;
  * @description https://docs.solidjs.com/reference/components/error-boundary
  */
 export declare function Errored(props: {
-    fallback: SolidElement | ((err: any, reset: () => void) => SolidElement);
+    fallback: SolidElement | ((err: () => any, reset: () => void) => SolidElement);
     children: SolidElement;
 }): SolidElement;
 /**

package/types/server/signals.d.ts

@@ -111,7 +111,7 @@ declare const ErrorContext: Context<((err: any) => void) | null>;
 export { ErrorContext };
 export declare function runWithBoundaryErrorContext<T>(owner: Owner, render: () => T, onError: (err: any, parentHandler: ((err: any) => void) | null) => void, context?: NonNullable<typeof sharedConfig.context>, boundaryId?: string): T;
 export { NoHydrateContext };
-export declare function createErrorBoundary<U>(fn: () => any, fallback: (error: unknown, reset: () => void) => U): () => unknown;
+export declare function createErrorBoundary<U>(fn: () => any, fallback: (error: Accessor<unknown>, reset: () => void) => U): () => unknown;
 export declare function createLoadingBoundary(fn: () => any, fallback: () => any, options?: {
     on?: () => any;
 }): () => unknown;
@@ -123,7 +123,7 @@ export declare function createRevealOrder<T>(fn: () => T, _options?: {
 export declare function untrack<T>(fn: () => T): T;
 export declare function flush(): void;
 export declare function resolve<T>(fn: () => T): Promise<T>;
-export declare function isPending(fn: () => any, fallback?: boolean): boolean;
+export declare function isPending(fn: () => any, loading?: boolean): boolean;
 export declare function latest<T>(fn: () => T): T;
 export declare function isRefreshing(): boolean;
 export declare function refresh<T>(_target: Refreshable<T>): void;

package/types-cjs/client/flow.d.cts

@@ -2,6 +2,7 @@ import type { Accessor, RevealOrder } from "@solidjs/signals";
 export type { RevealOrder };
 import type { Element as SolidElement } from "../types.cjs";
 type NonZeroParams<T extends (...args: any[]) => any> = Parameters<T>["length"] extends 0 ? never : T;
+type ErrorAccessor = Accessor<unknown>;
 type ConditionalRenderCallback<T> = (item: Accessor<NonNullable<T>>) => SolidElement;
 type KeyedConditionalRenderCallback<T> = (item: NonNullable<T>) => SolidElement;
 type ConditionalRenderChildren<T, F extends ConditionalRenderCallback<T> = ConditionalRenderCallback<T>> = SolidElement | NonZeroParams<F>;
@@ -193,7 +194,7 @@ export declare function Match<T>(props: AnyMatchProps<T>): SolidElement;
  * @example
  * ```tsx
  * <Errored fallback={(err, reset) => (
- *   <div onClick={reset}>Error: {err.toString()}</div>
+ *   <div onClick={reset}>Error: {err().toString()}</div>
  * )}>
  *   <MyComp />
  * </Errored>
@@ -202,7 +203,7 @@ export declare function Match<T>(props: AnyMatchProps<T>): SolidElement;
  * @description https://docs.solidjs.com/reference/components/error-boundary
  */
 export declare function Errored(props: {
-    fallback: SolidElement | ((err: any, reset: () => void) => SolidElement);
+    fallback: SolidElement | ((err: ErrorAccessor, reset: () => void) => SolidElement);
     children: SolidElement;
 }): SolidElement;
 /**

package/types-cjs/client/hydration.d.cts

@@ -1,4 +1,4 @@
-import { createErrorBoundary as coreErrorBoundary, createRenderEffect as coreRenderEffect, createEffect as coreEffect, type ComputeFunction, type MemoOptions, type NoInfer, type ProjectionOptions, type Refreshable, type Signal, type SignalOptions, type SourceAccessor, type Store, type StoreSetter, type Context } from "@solidjs/signals";
+import { createRenderEffect as coreRenderEffect, createEffect as coreEffect, type Accessor, type ComputeFunction, type MemoOptions, type NoInfer, type ProjectionOptions, type Refreshable, type Signal, type SignalOptions, type SourceAccessor, type Store, type StoreSetter, type Context } from "@solidjs/signals";
 import type { Element as SolidElement } from "../types.cjs";
 type HydrationSsrFields = {
     /**
@@ -201,8 +201,8 @@ export declare const createSignal: {
 /**
  * Lower-level primitive that backs the `<Errored>` flow control.
  * Catches errors thrown inside `fn` and renders `fallback(error,
- * reset)` instead. `reset()` recomputes the failing sources so the
- * boundary can attempt to recover.
+ * reset)` instead. `error` is an accessor for the latest captured error;
+ * `reset()` recomputes the failing sources so the boundary can attempt to recover.
  *
  * App code should use `<Errored fallback={...}>` directly — reach for
  * this only when authoring a custom boundary component.
@@ -216,20 +216,20 @@ export declare const createSignal: {
  * // Custom boundary built on the primitive — adds telemetry around the
  * // canonical `<Errored>` shape.
  * function TracedErrored(props: {
- *   fallback: (e: unknown) => JSX.Element;
+ *   fallback: (e: () => unknown) => JSX.Element;
  *   children: JSX.Element;
  * }): JSX.Element {
  *   return createErrorBoundary(
  *     () => props.children,
  *     (err, reset) => {
- *       reportError(err);
+ *       reportError(err());
  *       return props.fallback(err);
  *     }
  *   ) as unknown as JSX.Element;
  * }
  * ```
  */
-export declare const createErrorBoundary: typeof coreErrorBoundary;
+export declare const createErrorBoundary: <U>(fn: () => any, fallback: (error: Accessor<unknown>, reset: () => void) => U) => () => unknown;
 /**
  * Creates an optimistic signal — a `Signal<T>` whose writes are
  * tentative inside an `action` transition: they show up immediately,

package/types-cjs/server/flow.d.cts

@@ -112,7 +112,7 @@ export declare function Match<T>(props: AnyMatchProps<T>): SolidElement;
  * @description https://docs.solidjs.com/reference/components/error-boundary
  */
 export declare function Errored(props: {
-    fallback: SolidElement | ((err: any, reset: () => void) => SolidElement);
+    fallback: SolidElement | ((err: () => any, reset: () => void) => SolidElement);
     children: SolidElement;
 }): SolidElement;
 /**

package/types-cjs/server/signals.d.cts

@@ -111,7 +111,7 @@ declare const ErrorContext: Context<((err: any) => void) | null>;
 export { ErrorContext };
 export declare function runWithBoundaryErrorContext<T>(owner: Owner, render: () => T, onError: (err: any, parentHandler: ((err: any) => void) | null) => void, context?: NonNullable<typeof sharedConfig.context>, boundaryId?: string): T;
 export { NoHydrateContext };
-export declare function createErrorBoundary<U>(fn: () => any, fallback: (error: unknown, reset: () => void) => U): () => unknown;
+export declare function createErrorBoundary<U>(fn: () => any, fallback: (error: Accessor<unknown>, reset: () => void) => U): () => unknown;
 export declare function createLoadingBoundary(fn: () => any, fallback: () => any, options?: {
     on?: () => any;
 }): () => unknown;
@@ -123,7 +123,7 @@ export declare function createRevealOrder<T>(fn: () => T, _options?: {
 export declare function untrack<T>(fn: () => T): T;
 export declare function flush(): void;
 export declare function resolve<T>(fn: () => T): Promise<T>;
-export declare function isPending(fn: () => any, fallback?: boolean): boolean;
+export declare function isPending(fn: () => any, loading?: boolean): boolean;
 export declare function latest<T>(fn: () => T): T;
 export declare function isRefreshing(): boolean;
 export declare function refresh<T>(_target: Refreshable<T>): void;