Splint says every SwiftUI screen you'll ever write is assembled from the same small set
of data shapes — resources, catalogs, lenses, jobs, selections, settings, credentials.
Naming them sounds cosmetic. It isn’t.
Four exhibits, below. Twist the knobs until the cost of not naming becomes
visible, then go see what shape your next screen is in.
{Object.keys(TYPES).map(t => )}
);
}
// =============================================================================
// Exhibit chrome
// =============================================================================
function ExhibitShell({ number, kicker, title, thesis, children }) {
return (
EXHIBIT {String(number).padStart(2, "0")}{kicker}
{title}
{thesis}
{children}
);
}
function Insight({ children }) {
return (
);
}
// =============================================================================
// Exhibit 1 — The unnamed @Observable class
// =============================================================================
function Exhibit1() {
const [revealed, setRevealed] = useState(() => new Set());
const [grouped, setGrouped] = useState(false);
const toggle = (idx) => {
setRevealed(prev => {
const next = new Set(prev);
if (next.has(idx)) next.delete(idx); else next.add(idx);
return next;
});
};
const revealAll = () => setRevealed(new Set(SCREEN_PROPERTIES.map((_, i) => i)));
const hideAll = () => { setRevealed(new Set()); setGrouped(false); };
const progress = revealed.size;
const total = SCREEN_PROPERTIES.length;
const groups = useMemo(() => {
const byType = {};
SCREEN_PROPERTIES.forEach((p, idx) => {
if (!byType[p.type]) byType[p.type] = [];
byType[p.type].push({ ...p, idx });
});
return byType;
}, []);
return (
Here’s the state a typical SwiftUI screen accumulates. On the surface it’s
just a pile of var declarations.
Underneath, every one is secretly a Splint shape. Click to reveal. Then toggle
Group by shape to see what the pile wanted to be.
}
>
@Observable class BookReaderScreen {"{"}
named: {progress} / {total}
{!grouped && (
{SCREEN_PROPERTIES.map((p, idx) => {
const isOn = revealed.has(idx);
const tone = TYPES[p.type].tone;
return (
Eleven var declarations.
Seven shapes. Three of them (the loading bool, the error, the result array) were
pieces of the same Job. Three more (search, genre, sort) were knobs on the
same Lens. Naming doesn’t just decorate — it reveals which properties
were secretly one thing all along.
);
}
// =============================================================================
// Exhibit 2 — Observation scope
// =============================================================================
function Exhibit2() {
const [rows, setRows] = useState(INITIAL_ROWS);
const [tickKey, setTickKey] = useState(0); // bumped to force a parent re-render with no data change
const [epoch, setEpoch] = useState(0); // bumped to remount the rows and zero the counters
const bump = useCallback((id) => {
setRows(prev =>
prev.map(r => r.id === id ? { ...r, name: r.name.endsWith("′") ? r.name.slice(0, -1) : r.name + "′" } : r)
);
}, []);
const touchUnrelated = () => {
setTickKey(k => k + 1);
};
const reset = () => {
setRows(INITIAL_ROWS);
setTickKey(0);
setEpoch(e => e + 1);
};
return (
SwiftUI’s @Observable{" "}
tracks at the property level, but the boundary where tracking happens is the
view. Read a property inside a
{" "}ForEach closure
and the whole parent re-evaluates. Extract the row into its own view and only
the changed row wakes up. Same data, different cost.
}
>
{/* Narrow / correct */}
Row is a memoized child component}
>
{rows.map(item => (
))}
Try:|
You can also click any row directly to bump it.
Click change row #4 a few times. On the left, every row’s render count
ticks — a wide-scope ForEach
{" "}wakes all the things. On the right, only row #4. Now click parent re-renders:
the wide column flashes 8 times for a non-change; the narrow column doesn’t flinch.
This is why Splint keeps lifecycle (phase) separate from result
(value) — a header observing only .phase stays asleep while a list bound to .value updates.
);
}
function Panel({ tone, label, sublabel, children }) {
const t = TONE[tone];
return (
{label}
{sublabel}
{children}
);
}
// =============================================================================
// Exhibit 3 — Lens over Catalog
// =============================================================================
function Exhibit3() {
const [query, setQuery] = useState("");
const [genre, setGenre] = useState("All");
const [sort, setSort] = useState("title-asc");
const filtered = useMemo(() => {
const q = query.trim().toLowerCase();
let out = BOOKS.filter(b => {
if (genre !== "All" && b.genre !== genre) return false;
if (!q) return true;
return b.title.toLowerCase().includes(q) || b.author.toLowerCase().includes(q);
});
const comparators = {
"title-asc": (a, b) => a.title.localeCompare(b.title),
"title-desc": (a, b) => b.title.localeCompare(a.title),
"year-asc": (a, b) => a.year - b.year,
"year-desc": (a, b) => b.year - a.year,
"author": (a, b) => a.author.localeCompare(b.author),
};
return [...out].sort(comparators[sort]);
}, [query, genre, sort]);
const matchSet = useMemo(() => new Set(filtered.map(b => b.id)), [filtered]);
const resetLens = () => { setQuery(""); setGenre("All"); setSort("title-asc"); };
return (
A Catalog is the loaded data. A Lens is just a projection over it —
a filter plus a sort. Twist the knobs below. Watch the right column reorder and shrink.
Watch the left column — the Catalog itself — stay exactly where it is.
}
>
The Catalog sits on the left like a table of contents that doesn’t move.
You filter and sort by changing the Lens, not by rebuilding the source. That
sounds obvious — until you remember how many SwiftUI codebases carry around a
filteredBooks array kept in sync by hand. Duplicate arrays are a whole class
of bugs Lens exists to prevent.
);
}
function Header({ tone, title, countLabel }) {
const t = TONE[tone];
return (
{title}
{countLabel}
);
}
// =============================================================================
// Exhibit 4 — Booleans vs. Phase
// =============================================================================
const PHASE_CASES = [
{ id: "idle", label: ".idle", blurb: "no work has started" },
{ id: "running", label: ".running", blurb: "work is in flight" },
{ id: "completed", label: ".completed", blurb: "finished successfully" },
{ id: "failed", label: ".failed(msg)", blurb: "failed — message in the associated value" },
];
function Exhibit4() {
// Booleans (left panel — the nonsense bag)
const [isLoading, setLoading] = useState(false);
const [hasError, setHasError] = useState(false);
const [hasData, setHasData] = useState(false);
const [isRetrying, setRetrying] = useState(false);
// Phase (right panel — the enum)
const [phase, setPhase] = useState("idle");
const bools = { isLoading, hasError, hasData, isRetrying };
const rawFlags = Object.entries(bools).filter(([_, v]) => v).map(([k]) => k);
// Classify the current boolean combination.
const diagnosis = useMemo(() => {
const on = rawFlags;
const s = on.join("+") || "∅";
if (on.length === 0)
return { kind: "valid", name: "idle", msg: "no work started", view: "idle" };
if (s === "isLoading")
return { kind: "valid", name: "loading", msg: "loading, no data yet", view: "loading" };
if (s === "isLoading+isRetrying")
return { kind: "valid", name: "retrying", msg: "refetching after a prior failure", view: "loading" };
if (s === "hasData")
return { kind: "valid", name: "loaded", msg: "data ready, no active fetch", view: "loaded" };
if (s === "hasError")
return { kind: "valid", name: "failed", msg: "error, no data", view: "failed" };
// Nonsense combinations:
const reasons = [];
if (isLoading && hasError) reasons.push("loading yet already errored");
if (isLoading && hasData && !isRetrying) reasons.push("loading without being a retry yet already has data");
if (hasError && hasData) reasons.push("errored but also has data");
if (isRetrying && !isLoading) reasons.push("retrying without loading");
if (isRetrying && hasError) reasons.push("retrying and in failure at once");
if (reasons.length === 0) reasons.push("unreachable state");
return { kind: "bogus", name: "impossible", msg: reasons.join("; "), view: "bogus" };
}, [isLoading, hasError, hasData, isRetrying, rawFlags.join("|")]);
// Actions that synchronize both panels when you pretend to do "real" work.
const runAction = (name) => {
if (name === "start") { setLoading(true); setHasError(false); setRetrying(false); setPhase("running"); }
if (name === "succeed") { setLoading(false); setHasError(false); setRetrying(false); setHasData(true); setPhase("completed"); }
if (name === "fail") { setLoading(false); setHasError(true); setRetrying(false); setHasData(false); setPhase("failed"); }
if (name === "retry") { setLoading(true); setHasError(false); setRetrying(true); setPhase("running"); }
if (name === "reset") { setLoading(false); setHasError(false); setRetrying(false); setHasData(false); setPhase("idle"); }
};
return (
A Phase has exactly four cases:{" "}
.idle,{" "}
.running,{" "}
.completed,{" "}
.failed(msg).
Before Splint you probably had the same states, scattered across three or four
booleans. Tick the boxes on the left and see what you were secretly asking SwiftUI to render.
}
>
Scripted actions:
{[
["start", "amber"],
["succeed", "emerald"],
["fail", "rose"],
["retry", "amber"],
["reset", "slate"],
].map(([n, tone]) => (
))}
Each action sets both models. The enum never contradicts itself.
{/* State-space grid */}
The boolean bag carries sixteen combinations. Five of them are the four states
you’d have written anyway (idle, loading, retrying, loaded, failed). Eleven are
impossible states that you nevertheless have to decide how to render — and,
worse, that arbitrary code paths can accidentally construct. A Phase enum collapses
the state space to exactly what the domain allows. Less surface, less nonsense.
);
}
function RenderedView({ kind, diagnosis }) {
const base = "rounded border px-3 py-3 min-h-[64px] flex items-center gap-3";
if (kind === "idle")
return