SolidJS 1.9+ / 2.0 Beta Knowledge Patch Skill

SolidJS 1.9+ / 2.0 Beta Knowledge Patch

Claude's baseline knowledge covers SolidJS through 1.8.x. This skill provides features from 1.9 (Sep 2024) through the 2.0 beta (Mar 2026), plus SolidStart 1.0-1.1.

Quick Reference

API Renames (2.0)

| 1.x | 2.0 | |-----|-----| | Suspense | Loading | | ErrorBoundary | Errored | | mergeProps | merge | | splitProps | omit | | unwrap | snapshot | | onMount | onSettled | | classList | class (object/array) | | createResource | async createMemo + Loading | | createSelector | createProjection | | createComputed | split createEffect or createSignal(fn) | | batch() | flush() | | use:directive | ref={directive(opts)} | | Context.Provider | <Context value={...}> |

Import Changes (2.0)

| 1.x | 2.0 | |-----|-----| | solid-js/web | @solidjs/web | | solid-js/store | solid-js (stores merged into core) | | solid-js/h | @solidjs/h | | solid-js/html | @solidjs/html | | solid-js/universal | @solidjs/universal |

Batching & Reads (2.0)

const [count, setCount] = createSignal(0);
setCount(1);
count(); // still 0 -- reads return last committed value
flush();
count(); // now 1

See references/reactivity-effects.md for split effects, onSettled, dev warnings.

Async Data (2.0)

| Pattern | Code | |---------|------| | Fetch data | const user = createMemo(() => fetchUser(id())); | | Loading boundary | <Loading fallback={<Spinner />}><Profile /></Loading> | | Revalidation check | const pending = () => isPending(() => users()); | | Peek stale value | const val = () => latest(signal); | | Refresh after mutation | refresh(derivedStore); |

See references/async-actions.md for actions, optimistic updates, refresh.

Stores (2.0)

// Draft-first setter (produce-style)
const [store, setStore] = createStore({ user: { name: 'A' } });
setStore((s) => {
  s.user.name = 'B';
});

// 1.x-style path setter via storePath helper
setStore(storePath('user', 'name', 'B'));

// Snapshot for serialization
const plain = snapshot(store);

See references/stores.md for derived stores, projections, deep(), merge, omit.

Control Flow (2.0)

// For with accessors (keyed by identity, the default)
<For each={items()}>
  {(item, i) => <Row item={item()} index={i()} />}
</For>

// Index-style (reuse by position)
<For each={items()} keyed={false}>
  {(item, i) => <Row item={item()} index={i()} />}
</For>

// Repeat (no diffing, for skeletons/ranges)
<Repeat count={10}>{(i) => <Skeleton index={i} />}</Repeat>

See references/control-flow-dom.md for Show, Switch/Match, Errored, DOM changes.

SolidStart 1.0-1.1

| Feature | Detail | |---------|--------| | Package | @solidjs/start | | Routing | File-based via <FileRoutes /> + @solidjs/router | | Dynamic routes | [id].tsx, optional [[id]].tsx, catch-all [...path].tsx | | Route groups | (groupName)/ folders | | Nested layouts | blog.tsx + blog/ directory | | API routes | Files in routes/ exporting HTTP methods | | Vite 6 | Supported since SolidStart 1.1 | | Roadmap | SolidStart 2.0 replaces Vinxi with pure Vite ("DeVinxi") |

See references/solidstart.md for routing details, route config, preload.

Reference Files

| File | Contents | |------|----------| | reactivity-effects.md | Split effects, flush, onSettled, dev warnings, ownership | | async-actions.md | Async computations, Loading, isPending, actions, optimistic updates | | stores.md | Draft-first setters, storePath, projections, snapshot, merge, omit | | control-flow-dom.md | For/Repeat/Show/Switch, Loading/Errored, DOM attributes, directives | | solidstart.md | SolidStart 1.0-1.1, file routing, layouts, DeVinxi roadmap |

Critical Knowledge

Solid 1.9 Changes

New features in 1.9 (the last 1.x release before 2.0):

bool: attribute namespace for custom elements: <my-el bool:enable={flag()} />
on: with handleEvent objects for advanced event options (passive, once, capture):

<div
  on:wheel={{
    handleEvent(e) {
      e.preventDefault();
    },
    passive: false,
  }}
/>;

Better JSX validation via JSDOM (detects invalid nesting like <a> inside <a>)
oncapture: deprecated in favor of on: with event objects

Top-Level Read Warning (2.0 dev)

Solid 2.0 warns in dev when you read reactive values at the top level of a component body. This catches a class of bugs where reactivity is accidentally lost.

// BAD: warns -- destructuring loses reactivity
function Bad({ title }) {
  return <h1>{title}</h1>;
}

// GOOD: keep props object
function Good(props) {
  return <h1>{props.title}</h1>;
}

// GOOD: intentional one-time read
function OneTime(props) {
  const t = untrack(() => props.title);
  return <h1>{t}</h1>;
}

Write-Under-Scope Warning (2.0 dev)

Writing to signals inside reactive scopes (effects, memos, component body) warns. Derive instead of writing back.

// BAD: warns
createMemo(() => setDoubled(count() * 2));

// GOOD: derive
const doubled = createMemo(() => count() * 2);

// Escape hatch for internal state only
const [ref, setRef] = createSignal(null, { pureWrite: true });

Context Provider Simplification (2.0)

const Theme = createContext('light');

// 1.x
<Theme.Provider value="dark"><Page /></Theme.Provider>

// 2.0 -- context IS the provider
<Theme value="dark"><Page /></Theme>

Directives via ref (2.0)

// 1.x
<button use:tooltip={{ content: 'Save' }} />

// 2.0 -- ref with directive factory
<button ref={tooltip({ content: 'Save' })} />

// Multiple directives via array
<button ref={[autofocus, tooltip({ content: 'Save' })]} />

Agent Skills: SolidJS 1.9+ / 2.0 Beta Knowledge Patch

Install this agent skill to your local

Skill Files