ShadowJSShadowJSv1.0.0
[]previous and next page

Automate it

create-shadow-app codemod solid-to-shadow renames the primitives and moves each import to its package, as the Imports table says.

For agentsUpdated

create-shadow-app codemod solid-to-shadow renames the primitives and moves each import to its package, as the Imports table says. It edits by source range, prints a diff unless you pass --write, and a second run changes nothing. See Migrate code with codemods for the options.

sh
npx create-shadow-app codemod solid-to-shadow src
npx create-shadow-app codemod solid-to-shadow src --write
Solid The codemod writes
createSignal, createEffect, createMemo useSignal, useEffect, useMemo from @shadow-js/core
createSelector, createUniqueId useSelector, useId from @shadow-js/core
createRoot, createContext, useContext, batch, untrack, onMount, onCleanup, onError, catchError, getOwner, runWithOwner, mergeProps, splitProps, children, startTransition, useTransition from solid-js the same names from @shadow-js/core
Show, For, Index, Switch, Match, ErrorBoundary, Suspense, SuspenseList, lazy from solid-js or solid-js/web the same names from @shadow-js/web
render, hydrate, Portal, Dynamic, mergeProps from solid-js/web the same names from @shadow-js/web
isServer, isDev from solid-js/web the same names from @shadow-js/core
renderToString, generateHydrationScript, HydrationScript from solid-js/web the same names from @shadow-js/web/server
produce, reconcile, unwrap from solid-js/store the same names from @shadow-js/core

A local alias is kept (createSignal as signal becomes useSignal as signal). When a call needs an edit and not a rename, the codemod warns with the file:line and leaves the import where it is: createSignal() without an initial value, createEffect or createMemo with an initial value, and every name in Not available or the migration checklist that needs more than a rename (on, createComputed, createRenderEffect, createResource, createStore, createMutable). This is the exact output for the input shown:

app.before.tsxtsx
import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
import { render } from "solid-js/web";

export function Counter() {
  const [count, setCount] = createSignal(0);
  const double = createMemo(() => count() * 2);
  createEffect(() => console.log(count()));
  return (
    <Show when={count() < 10} fallback={<p>Done</p>}>
      <button onClick={() => setCount(count() + 1)}>{double()}</button>
      <For each={[1, 2, 3]}>{(n) => <i>{n}</i>}</For>
    </Show>
  );
}

render(() => <Counter />, document.getElementById("app")!);
app.after.tsxtsx
import { useEffect, useMemo, useSignal } from "@shadow-js/core";
import { For, Show, render } from "@shadow-js/web";

export function Counter() {
  const [count, setCount] = useSignal(0);
  const double = useMemo(() => count() * 2);
  useEffect(() => console.log(count()));
  return (
    <Show when={count() < 10} fallback={<p>Done</p>}>
      <button onClick={() => setCount(count() + 1)}>{double()}</button>
      <For each={[1, 2, 3]}>{(n) => <i>{n}</i>}</For>
    </Show>
  );
}

render(() => <Counter />, document.getElementById("app")!);