solid22

Solid 2 primitives and helpers organized as focused subpath modules.

Installation

npm install solid22 solid-js

solid-js is a peer dependency.

Effects

Import the effects helpers from solid22/effects:

import { createEffect, on } from "solid22/effects";

Explicit dependencies

import { createSignal, onCleanup } from "solid-js";
import { createEffect } from "solid22/effects";

const [count, setCount] = createSignal(0);

createEffect(
  [count],
  ([value]) => {
    console.log("count", value);

    onCleanup(() => {
      console.log("cleanup", value);
    });
  }
);

setCount(1);

Dependencies can also be computed in any value shape. The effect callback receives the same inferred shape:

createEffect(
  () => ({ count: count(), doubled: count() * 2 }),
  ({ count, doubled }) => {
    console.log(count, doubled);
  }
);

Tuples and scalar values are supported too:

createEffect(
  () => [count(), count() * 2],
  ([count, doubled]) => {
    console.log(count, doubled);
  }
);

createEffect(() => count(), value => {
  console.log(value);
});

Effect context and scope

The second callback argument is an effect context. Its scope helper re-enters the owner for that specific invocation, which is useful after an async boundary.

createEffect(
  [count],
  async ([value], { scope }) => {
    const result = await load(value);

    scope(() => {
      onCleanup(() => result.dispose());
    });
  }
);

DSL

on([count]).effect(([value]) => {
  console.log(value);
});

on([count]).deferEffect(([value]) => {
  console.log("changed", value);
});

The DSL can attach per-invocation cleanup and opt into effect-body error isolation:

on(() => ({ count: count() }))
  .effect(({ count }) => {
    console.log("run", count);
    if (count === 1) throw new Error("failed run");
  })
  .cleanup(({ count }) => {
    console.log("cleanup", count);
  })
  .error(error => {
    console.error(error);
  });

.cleanup() and .error() may be chained in either order. The cleanup belongs to the individual effect invocation, so it runs when that invocation is replaced or disposed, including disposal after an isolated failure.

Error isolation

Effect-body errors preserve Solid's normal behavior by default. Add an error handler when one effect should handle its own failure without halting unrelated reactivity:

createEffect(
  () => ({ count: count() }),
  ({ count }) => {
    if (count === 1) throw new Error("failed run");
  },
  {
    error(error, context) {
      console.error(error);
    }
  }
);

The failed invocation is disposed before the effect can run again. If the error handler itself throws, that error propagates normally. No Solid error boundary is created internally.

Options

createEffect and on(...).effect(...) support Solid effect options plus these helpers:

• once — stop observing after the first dependency-change execution.
• owned — control whether the callback itself runs under the invocation owner. Defaults to true.
• untrack — explicitly untrack reads in the callback body. Defaults to true.
• defer — skip the initial effect execution.
• error — opt into handling effect-callback throws/rejections locally.

For the complete behavior, async semantics, cleanup rules, overloads, DSL, and exported TypeScript types, see Effects API.

Package modules

solid22 is organized by primitive family so additional APIs can be added without flattening everything into one entrypoint.

src/
  effects/
    createEffect.ts
    index.ts
  index.ts

Current public entrypoints:

import { createEffect, on } from "solid22/effects";
import { createEffect, on } from "solid22";

Future primitive families can use the same structure, for example solid22/loading or solid22/signals.

Development

npm install
npm run typecheck
npm test
npm run build

Status

Experimental. The API may change while Solid 2 and these helpers evolve.