Migration Before And After

Codemod

Walk every codebase through the same upgrade

Show what changes, explain why, then apply it everywhere. The diff lives in source control, not a memo.

Before

Imperative session handling

Manual cookie reads, race conditions on rotation, and silent failures when refresh times out.

session.tsv1
// Read the refresh token by hand
const cookie = req.headers.cookie;
const token = parseCookie(cookie, "rt");
if (!token) throw new Error(401);
// Try to refresh, hope it works
let session;
try {
  session = refresh(token);
} catch {
  session = null;
}

After

Declarative refresh with retries

One call, typed error states, automatic backoff, and a stale window that survives concurrent requests.

session.tsv2
// Single call replaces the whole flow
import { refresh } from "@beste/auth";
const session = await refresh.fromCookies(req, {
  retry: { on: "5xx", max: 3 },
  staleAfter: "5s",
});
// Errors are typed, not thrown silently
if (!session.ok) {
  return reply(session.error);
}
return session.value;

12 lines removed · 8 lines added

across 14 files in your repo

About this block

Migration Before And AfterPRO

Browser-chrome card pairing a before/after code migration — eyebrow + title + description above each pane, monochrome syntax, and an apply-migration footer with diff summary. Every label is editable; no media props required.

More Showcase blocks

View all Showcase
PRO

showcase34

Polyglot Code Comparison

Browser-chrome card pairing two minimal code panes — same logic in two languages (TypeScript and Python by default). Monochrome syntax with muted comments and language badges. Every label is editable; no media props required.

PRO

showcase20

Code Editor With Environments Panel

Browser-chrome card pairing a syntax-highlighted code editor with a deploy environments panel — health dots, version pills, and a promote-to-production footer. Every label is editable; no media props required.

PRO

showcase23

Component Preview With Code Editor

Browser-chrome card pairing a live button-variant preview on the left with a syntax-highlighted code editor on the right — dotted canvas background, size pill toggle. Every label is editable; no media props required.

PRO

showcase27

Inline Diff Viewer

Browser-chrome card rendering an inline diff — added lines glow emerald, removed lines fade rose, branch arrow row in the header, and an approve-and-merge footer. Every label is editable; no media props required.

PRO

showcase24

Files Changed With Code Editor

Browser-chrome card pairing a changed-files list on the left with a syntax-highlighted code editor on the right — status icons, +/- stats, and an active row highlight. Every label is editable; no media props required.

PRO

showcase17

Code Editor With Test Results

Browser-chrome card pairing a syntax-highlighted code editor with a live test-results panel — pass/fail rows, expandable failures, and a coverage footer. Every label is editable; no media props required.