edgevoid/vue-tui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(runtime): off-spec display value hides, aligning Ink (drop A21 divergence) (#128)

Browse Source 
Ink's applyDisplayStyles hides any present `display` that isn't 'flex'
(DISPLAY_NONE); vue-tui hid only on exact 'none', leaving off-spec values
(reachable via TS-bypass — the prop type is 'flex'|'none') visible. Align: the
yoga display setter now hides any present (non-null) value except 'flex',
matching Ink even for non-string junk (display={5}). The blessed A19 divergence
is preserved — a removed/undefined display (null) still resets to the visible
default (Vue can't distinguish display={undefined} from an omitted prop).

Removes the now-obsolete A21 entry from .agents/docs/ink-divergences.md (the
A19 "removed display resets to visible" entry remains).

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yunfei He
2026-06-03 02:19:48 +08:00
committed by GitHub
parent 1bad1014da
commit d7c62f9b3a
3 changed files with 55 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/runtime-tests/integration/layout/display.test.tsx
+43
View File
@@ -80,3 +80,46 @@ test("display none box does not paint its border", async () => {
);
expect(lastFrame({ trimLines: true })).toBe("AAAZZ");
});
// A21: an off-spec PRESENT `display` value (anything that isn't 'flex') must HIDE,
// matching Ink's applyDisplayStyles (styles.ts): `display === 'flex' ? FLEX : NONE`.
// The public prop type is 'flex' | 'none', so an off-spec value is only reachable
// via a TS bypass; it must still align with Ink and hide.
test("display off-spec present value (block) hides like Ink", async () => {
const { lastFrame } = await render(
defineComponent(() => () => (
<Box flexDirection="column">
<Box display={"block" as never}>
<Text>Kitty!</Text>
</Box>
<Text>Doggo</Text>
</Box>
)),
{ columns: 100 },
);
expect(lastFrame({ trimLines: true })).toBe("Doggo");
});
// A21 (non-string variant): a PRESENT non-string `display` value (e.g. a number,
// reachable only via a TS bypass — the public prop type is 'flex' | 'none') must
// HIDE, matching Ink's `display === 'flex' ? FLEX : NONE` where `5 === 'flex'` is
// false → DISPLAY_NONE. This pins the guard change from `typeof v === "string" && …`
// to `v != null && v !== "flex"`: under the old typeof guard a number stays VISIBLE
// (RED), under the current null-check guard it hides like Ink (GREEN). null/undefined
// (removed) still resets to visible (A19), exercised by prop-reset.test.tsx.
test("display non-string present value (number) hides like Ink", async () => {
const { lastFrame } = await render(
defineComponent(() => () => (
<Box flexDirection="column">
<Box display={5 as never}>
<Text>Kitty!</Text>
</Box>
<Text>Doggo</Text>
</Box>
)),
{ columns: 100 },
);
// Child text must NOT appear: the present number value hides the box.
expect(lastFrame({ trimLines: true })).not.toContain("Kitty!");
expect(lastFrame({ trimLines: true })).toBe("Doggo");
});