agentsclimarketplace

Solidjs v2 migration

Skill khmm12/solidjs-v2-skills/skills/solidjs-v2-migration

Claude Code skills for SolidJS 2.0 — write, migrate, and review solid-js 2.x code without React/1.x reflexes

Install
npx -y skills add khmm12/solidjs-v2-skills --skill solidjs-v2-migration

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Migrate a Solid 1.x codebase, file, or component to SolidJS 2.0 (solid-js 2.x / next / beta). Use when converting code that imports solid-js/web, solid-js/store, createResource, Suspense, onMount, batch, or other 1.x APIs to the 2.0 equivalents. Not for writing new v2 code from scratch (see solidjs-v2).

SKILL.md

5.0 KB, ~1.3k tokens by cl100k_base, as published. Nobody here has run it

Migrate Solid 1.x → 2.0

Convert 1.x code to 2.0 in passes: mechanical first, then semantic, then diagnostics-driven cleanup. The full rename/removal table with before/after recipes is in references/migration-map.md — read it before starting; this file is the workflow.

Step 0 — establish the direction

  • Source must be Solid 1.x (imports like solid-js/web, solid-js/store, createResource, Suspense). Target version: whatever [email protected] / @solidjs/web beta the project declares (or the latest, if you're also bumping package.json).
  • Betas drift. The installed typings (node_modules/solid-js/types, @solidjs/web) outrank docs and this skill's references when they disagree.
  • Upgrade solid-js, @solidjs/web, and babel-preset-solid together.

Pass 1 — mechanical (grep-and-replace, low judgement)

  1. Dependencies: [email protected], add @solidjs/web, matching babel-preset-solid.
  2. tsconfig.json: "jsxImportSource": "@solidjs/web".
  3. Import paths and pure renames — tables at the top of references/migration-map.md. Greppable: solid-js/web, solid-js/store, Suspense, SuspenseList, ErrorBoundary, mergeProps, splitProps, unwrap, onMount, createSelector, Context.Provider, classList, equalFn, getListener.

Mind the non-1:1 renames: Errored's fallback gets an error accessor (err()), splitPropsomit inverts the result (rest-only), merge treats undefined as an override, onSettled is a leaf owner.

Pass 2 — semantic rewrites (per call site, by intent)

Work through references/migration-map.md sections in this order — each names the decision to make:

  1. Effects: single-callback createEffect → split (compute, apply); on() → compute phase; initialValue → default parameter; onCleanup inside effects → returned cleanup.
  2. createComputedcreateMemo / split effect / createSignal(fn) — pick by intent (derivation / side effect / writable derived).
  3. batch → delete; add flush() only where code reads its own writes synchronously.
  4. createResource → async createMemo (or createProjection for keyed collections) + <Loading>; .loading/.error/refetch/mutate each map differently — see the table.
  5. Mutations: ad-hoc flag flipping / startTransitionaction() + optimistic primitives + refresh().
  6. Stores: produce wrappers → plain drafts; path setters → drafts (or storePath compat); reconcile moves inside the draft; createMutablecreateStore.
  7. Lists: <Index><For keyed={false}>; audit default <For> callbacks — item is now raw, index is an accessor.
  8. DOM: use: → ref factories; on:/attr:/bool:/class:/style: namespaces → standard forms; /*@once*/ → reactive or defaultValue; camelCase attributes → lowercase.
  9. Context: .Provider → context-as-component; delete useX-with-throw wrappers (useContext now returns T and throws without Provider).
  10. from/observable → async iterables / push-out effects.

Pass 3 — run dev and fix diagnostics

2.0 ships structured dev diagnostics; the first dev run after migration is the real review. Typical wave, in order of volume:

  • STRICT_READ_UNTRACKED — top-level/destructured prop reads the old code tolerated. Move reads into JSX/memos, or untrack deliberate one-shots.
  • REACTIVE_WRITE_IN_OWNED_SCOPE (throws) — 1.x effects that write signals. Rewrite as derivations or move writes to handlers/actions.
  • ASYNC_OUTSIDE_LOADING_BOUNDARY — async reads with no <Loading> ancestor; add boundaries where fallback UI is wanted.
  • CLEANUP_IN_FORBIDDEN_SCOPEonCleanup inside onSettled; return the cleanup instead.

Then run the test suite: assertions reading right after writes need flush(), and reactive setups in tests need createRoot.

Pass 4 — behavioral audit (no grep pattern)

The "Behavioral changes that need an audit" section of the map: synchronous read-after-write assumptions, undefined-as-override in merges, forever-roots needing runWithOwner(null, ...).

Failure modes

  • A 1.x API has no entry in the map → check the installed typings before inventing a replacement; some conveniences (e.g. observable, createDeferred) intentionally have none — surface the gap rather than papering over it.
  • App mounts blank after migration → pending async outside Loading defers the root mount (ASYNC_OUTSIDE_LOADING_BOUNDARY in console).
  • Migration of one file pulls in half the app → migrate bottom-up (leaf components first), keep passes 1–2 per-file but expect pass 3 diagnostics to surface cross-file issues.

What ships with it: 1 file

11.8 KB alongside SKILL.md

references/

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.