Frontend Platform Labs
Interactive lab

90 min

Write a Codemod

Ship a safe JSX prop migration — rename attributes, guard spreads, and report batch results.

~/playground — 03-codemod-rename-prop · edit codemod.js

Live
import { FIXTURES } from './fixtures.js'

/** Part 1–3: transform a single source string */
export function runCodemod(source) {
  // TODO Part 1: rename isDisabled -> disabled in JSX attributes
  // TODO Part 2: do not rewrite isDisabled inside strings or comments
  // TODO Part 3: if source has spread props, warn and return unchanged
  return source
}

/** Part 4: run across multiple files and report what changed */
export function runBatch(entries) {
  // TODO: map each { path, source } to { path, output, changed }
  return entries.map(({ path, source }) => ({
    path,
    source,
    output: source,
    changed: false,
  }))
}

export function runAllFixtures() {
  return runBatch(FIXTURES)
}

Preview goal: Preview shows transformed fixtures grouped by outcome — renamed, skipped, unchanged.

Checkpoints

  • Part 1 — isDisabled renames to disabled in JSX attributes
  • Part 2 — string literals and comments are untouched
  • Part 3 — spread props skip with a warning
  • Part 4 — runBatch returns per-file change metadata
  • All Sandpack tests pass