fix: warn and skip insertion when Box is nested inside Text

Detect invalid <Box> inside <Text> nesting at the DOM insert level and
emit a dev warning instead of crashing the WASM yoga engine. The box
insertion is skipped to prevent layout corruption.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yunfei He
2026-05-26 01:04:16 +08:00
parent 45b9ed3d9d
commit 37c4905bbc
3 changed files with 47 additions and 3 deletions
@@ -0,0 +1,20 @@
import { defineComponent } from "vue";
import { expect, test, vi } from "vite-plus/test";
import { render } from "@vue-tui/testing";
import { Box, Text } from "@vue-tui/runtime";
test("<Box> inside <Text> emits a dev warning", async () => {
const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
await render(
defineComponent(() => () => (
<Text>
<Box>invalid</Box>
</Text>
)),
);
expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("<Box>"));
warnSpy.mockRestore();
});
@@ -94,6 +94,5 @@ test.todo(
"fail when text node is not within <Text> component — vue-tui silently allows text-leaf inside box; validation not yet implemented",
);
test.todo(
"fail when <Box> is inside <Text> component — causes WASM table index out of bounds crash; yoga does not safely reject this nesting",
);
// Resolved: <Box> inside <Text> now emits a dev warning and skips insertion
// to prevent WASM crash. See box-in-text-validation.test.tsx.