@reynsu/reactlens-diff-core

Pure semantic-diff helpers over component trees and accessibility trees. Used by reactlens (Playwright) and intended for nativelens (Detox) to detect cross-run regressions without pixel diffing.

Published under @reynsu/ because the @reactlens npm scope is unclaimed.

What's in the box

• diffComponentTree(before, after) → SemanticDiff[] — structural diff over ComponentNode trees. Aligns siblings by (name + React key) when keys are present; falls back to (name + ordinal-among-same-name) otherwise. Reports component-added / component-removed / prop-changed.
• diffA11yTree(before, after) → A11ySemanticDiff[] — structural diff over AxNode trees (W3C ARIA subset). Aligns by (role, name); reorders within a parent don't surface as diffs (a screen-reader user perceives the same set of affordances regardless of DOM order in most cases). Reports node-added / node-removed / attr-changed across 22 ARIA attributes.
• ComponentNode, AxNode, HookSnapshot types — structural shapes the diffs operate over. Consumers' typed trees can be passed directly when the shape matches.

Both diff functions are pure, no I/O, no zod, no runtime deps.

Why "semantic" diff

The diff reports what changed in the rendered tree — a button was added, a prop flipped, an aria-disabled appeared — rather than pixel deltas. Pixel diffs catch every reflow; semantic diffs catch only the changes a human reviewer or screen-reader user would care about. The same fixture under a font-substitution renders identical semantically and produces zero noise.

Usage

import { diffComponentTree, diffA11yTree } from '@reynsu/reactlens-diff-core';

const componentDiff = diffComponentTree(snapshotBefore, snapshotAfter);
const a11yDiff = diffA11yTree(axBefore, axAfter);

// componentDiff: [{ kind: 'prop-changed', path: 'App > Submit', component: 'Submit', prop: 'disabled', before: true, after: false }, ...]

Versioning

Pre-1.0: minor bumps may include shape changes to SemanticDiff / A11ySemanticDiff; pin to the exact minor in dependents.

Development

pnpm install
pnpm test
pnpm typecheck
pnpm build