Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

solid-js

Package Overview
Dependencies
Maintainers
1
Versions
506
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

solid-js - npm Package Compare versions

Comparing version
2.0.0-beta.12
 to
2.0.0-beta.13
+17
-6
CHEATSHEET.md

@@ -219,5 +219,8 @@ # Solid 2.0 — Cheatsheet

// "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

@@ -294,3 +297,3 @@ latest(id);

// 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 />

@@ -440,4 +443,12 @@ </Errored>

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

@@ -614,3 +625,3 @@

| `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 |

@@ -630,4 +641,4 @@

- **`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.

@@ -634,0 +645,0 @@ - **`createRoot` is owned by parent by default** — disposed when parent disposes. To detach: `runWithOwner(null, fn)`.

+1
-1
dist/dev.cjs

@@ -872,3 +872,3 @@ 'use strict';

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;

@@ -875,0 +875,0 @@ });

+1
-1
dist/dev.js

@@ -871,3 +871,3 @@ import { getContext, createMemo as createMemo$1, flatten, createRoot, setContext, getOwner, untrack, createOwner, runWithOwner, createEffect as createEffect$1, createErrorBoundary as createErrorBoundary$1, createLoadingBoundary as createLoadingBoundary$1, createOptimistic as createOptimistic$1, createOptimisticStore as createOptimisticStore$1, createProjection as createProjection$1, createRenderEffect as createRenderEffect$1, createSignal as createSignal$1, createStore as createStore$1, setSnapshotCapture, releaseSnapshotScope, getNextChildId, onCleanup, isDisposed, peekNextChildId, clearSnapshots, flush, markSnapshotScope, mapArray, repeat, createRevealOrder, DEV as DEV$1 } from '@solidjs/signals';

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;

@@ -874,0 +874,0 @@ });

+5
-7
dist/server.cjs

@@ -886,4 +886,4 @@ 'use strict';

const fallbackOwner = createOwner();
return runWithOwner(fallbackOwner, () => fallback(err, () => {}));
}) : fallback(err, () => {});
return runWithOwner(fallbackOwner, () => fallback(() => err, () => {}));
}) : fallback(() => err, () => {});
const serializeError = err => {

@@ -938,3 +938,3 @@ if (ctx && owner.id && !runWithOwner(owner, () => getContext(NoHydrateContext))) {

}
function isPending(fn, fallback) {
function isPending(fn, loading) {
try {

@@ -944,6 +944,4 @@ fn();

} catch (err) {
if (err instanceof signals.NotReadyError && arguments.length > 1) {
return fallback;
}
throw err;
if (!(err instanceof signals.NotReadyError) || loading) throw err;
return false;
}

@@ -950,0 +948,0 @@ }

+5
-7
dist/server.js

@@ -885,4 +885,4 @@ import { NotReadyError, $REFRESH, merge as merge$1, isWrappable, NoOwnerError, ContextNotFoundError, $PROXY, flatten } from '@solidjs/signals';

const fallbackOwner = createOwner();
return runWithOwner(fallbackOwner, () => fallback(err, () => {}));
}) : fallback(err, () => {});
return runWithOwner(fallbackOwner, () => fallback(() => err, () => {}));
}) : fallback(() => err, () => {});
const serializeError = err => {

@@ -937,3 +937,3 @@ if (ctx && owner.id && !runWithOwner(owner, () => getContext(NoHydrateContext))) {

}
function isPending(fn, fallback) {
function isPending(fn, loading) {
try {

@@ -943,6 +943,4 @@ fn();

} catch (err) {
if (err instanceof NotReadyError && arguments.length > 1) {
return fallback;
}
throw err;
if (!(err instanceof NotReadyError) || loading) throw err;
return false;
}

@@ -949,0 +947,0 @@ }

+2
-2
package.json
{
"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",

@@ -110,3 +110,3 @@ "license": "MIT",

"dependencies": {
"@solidjs/signals": "^2.0.0-beta.12",
"@solidjs/signals": "^2.0.0-beta.13",
"csstype": "^3.1.0",

@@ -113,0 +113,0 @@ "seroval": "~1.5.0",

+3
-2
types-cjs/client/flow.d.cts

@@ -5,2 +5,3 @@ import type { Accessor, RevealOrder } from "@solidjs/signals";

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;

@@ -197,3 +198,3 @@ type KeyedConditionalRenderCallback<T> = (item: NonNullable<T>) => SolidElement;

* <Errored fallback={(err, reset) => (
* <div onClick={reset}>Error: {err.toString()}</div>
* <div onClick={reset}>Error: {err().toString()}</div>
* )}>

@@ -207,3 +208,3 @@ * <MyComp />

export declare function Errored(props: {
fallback: SolidElement | ((err: any, reset: () => void) => SolidElement);
fallback: SolidElement | ((err: ErrorAccessor, reset: () => void) => SolidElement);
children: SolidElement;

@@ -210,0 +211,0 @@ }): SolidElement;

+6
-6
types-cjs/client/hydration.d.cts

@@ -1,2 +0,2 @@

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";

@@ -204,4 +204,4 @@ type HydrationSsrFields = {

* 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.
*

@@ -220,3 +220,3 @@ * App code should use `<Errored fallback={...}>` directly — reach for

* function TracedErrored(props: {
* fallback: (e: unknown) => JSX.Element;
* fallback: (e: () => unknown) => JSX.Element;
* children: JSX.Element;

@@ -227,3 +227,3 @@ * }): JSX.Element {

* (err, reset) => {
* reportError(err);
* reportError(err());
* return props.fallback(err);

@@ -235,3 +235,3 @@ * }

*/
export declare const createErrorBoundary: typeof coreErrorBoundary;
export declare const createErrorBoundary: <U>(fn: () => any, fallback: (error: Accessor<unknown>, reset: () => void) => U) => () => unknown;
/**

@@ -238,0 +238,0 @@ * Creates an optimistic signal — a `Signal<T>` whose writes are

+1
-1
types-cjs/server/flow.d.cts

@@ -115,3 +115,3 @@ import type { Accessor, RevealOrder } from "./signals.cjs";

export declare function Errored(props: {
fallback: SolidElement | ((err: any, reset: () => void) => SolidElement);
fallback: SolidElement | ((err: () => any, reset: () => void) => SolidElement);
children: SolidElement;

@@ -118,0 +118,0 @@ }): SolidElement;

+2
-2
types-cjs/server/signals.d.cts

@@ -114,3 +114,3 @@ import { $REFRESH } from "@solidjs/signals";

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?: {

@@ -127,3 +127,3 @@ on?: () => any;

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;

@@ -130,0 +130,0 @@ export declare function isRefreshing(): boolean;

+3
-2
types/client/flow.d.ts

@@ -5,2 +5,3 @@ import type { Accessor, RevealOrder } from "@solidjs/signals";

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;

@@ -197,3 +198,3 @@ type KeyedConditionalRenderCallback<T> = (item: NonNullable<T>) => SolidElement;

* <Errored fallback={(err, reset) => (
* <div onClick={reset}>Error: {err.toString()}</div>
* <div onClick={reset}>Error: {err().toString()}</div>
* )}>

@@ -207,3 +208,3 @@ * <MyComp />

export declare function Errored(props: {
fallback: SolidElement | ((err: any, reset: () => void) => SolidElement);
fallback: SolidElement | ((err: ErrorAccessor, reset: () => void) => SolidElement);
children: SolidElement;

@@ -210,0 +211,0 @@ }): SolidElement;

+6
-6
types/client/hydration.d.ts

@@ -1,2 +0,2 @@

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";

@@ -204,4 +204,4 @@ type HydrationSsrFields = {

* 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.
*

@@ -220,3 +220,3 @@ * App code should use `<Errored fallback={...}>` directly — reach for

* function TracedErrored(props: {
* fallback: (e: unknown) => JSX.Element;
* fallback: (e: () => unknown) => JSX.Element;
* children: JSX.Element;

@@ -227,3 +227,3 @@ * }): JSX.Element {

* (err, reset) => {
* reportError(err);
* reportError(err());
* return props.fallback(err);

@@ -235,3 +235,3 @@ * }

*/
export declare const createErrorBoundary: typeof coreErrorBoundary;
export declare const createErrorBoundary: <U>(fn: () => any, fallback: (error: Accessor<unknown>, reset: () => void) => U) => () => unknown;
/**

@@ -238,0 +238,0 @@ * Creates an optimistic signal — a `Signal<T>` whose writes are

+1
-1
types/server/flow.d.ts

@@ -115,3 +115,3 @@ import type { Accessor, RevealOrder } from "./signals.js";

export declare function Errored(props: {
fallback: SolidElement | ((err: any, reset: () => void) => SolidElement);
fallback: SolidElement | ((err: () => any, reset: () => void) => SolidElement);
children: SolidElement;

@@ -118,0 +118,0 @@ }): SolidElement;

+2
-2
types/server/signals.d.ts

@@ -114,3 +114,3 @@ import { $REFRESH } from "@solidjs/signals";

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?: {

@@ -127,3 +127,3 @@ on?: () => any;

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;

@@ -130,0 +130,0 @@ export declare function isRefreshing(): boolean;