refactor(runtime)!: prefix host primitive tags with tui- (align to Ink, drop *Impl)
The renderer's intrinsic elements were named with bare words (box/text/static/
transform/virtual-text), which collide with the same-named public components: a
template `<box>` PascalCase-resolves to `<Box>` under vue-tsc (no isCustomElement
at the type layer), forcing the BoxImpl/TextImpl/StaticImpl workaround.
Prefix the 5 host elements to `tui-*` (mirroring Ink's `ink-box`/`ink-text`):
the prefix + hyphen keeps them in their own namespace, so the components keep
their real names (Box/Text/Static) with no self-recursion — the *Impl rename is
removed. root/text-leaf/comment stay unprefixed (not template tags, not elements).
Mechanics: renamed the TuiNode discriminant literals + factories first, then let
vue-tsc enumerate all 145 stale `node.type === "box"` comparisons (the type-
driven finder also kept `position: "static"` and the ansi-tokenizer's separate
`type: "text"` union untouched). Updated createElement cases, HOST_TAGS,
the .vue templates, transform.ts h(), and raw `h("box")` host-op tests.
Two non-type-checked contaminations the sed caused were caught by tests and fixed:
- patchProp's `key === "transform"` (the PROP name, not the node type) must stay
"transform" — the sed wrongly prefixed it, dropping the transform fn (identity).
- text-measure's `token.type === "text"` is an AnsiToken, not a TuiNode — reverted.
BREAKING CHANGE: the internal host element names are now tui-box/tui-text/
tui-virtual-text/tui-static/tui-transform. Public components (Box/Text/Static/
Spacer/Newline/Transform) and their props/types are unchanged; only raw host-op
callers (h("box") -> h("tui-box")) are affected.
vp run ready green: fmt, lint 0/0, vue-tsc, tests (runtime 350, integration 1161,
PTY 129).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -809,8 +809,10 @@ test("non-string host Box backgroundColor does not override inherited background
|
||||
const { lastFrame } = await render(
|
||||
defineComponent(
|
||||
() => () =>
|
||||
h("box", { backgroundColor: "red", width: 5, height: 2 }, [
|
||||
h("box", { backgroundColor: [0, 0, 255], width: 5, height: 2 }, [h("text", null, "Hi")]),
|
||||
h("tui-box", { backgroundColor: "red", width: 5, height: 2 }, [
|
||||
h("tui-box", { backgroundColor: [0, 0, 255], width: 5, height: 2 }, [
|
||||
h("tui-text", null, "Hi"),
|
||||
]),
|
||||
]),
|
||||
),
|
||||
{ columns: 100 },
|
||||
@@ -828,8 +830,8 @@ test("non-string host Text backgroundColor does not override inherited backgroun
|
||||
const { lastFrame } = await render(
|
||||
defineComponent(
|
||||
() => () =>
|
||||
h("box", { backgroundColor: "red", alignSelf: "flex-start" }, [
|
||||
h("text", { backgroundColor: [0, 0, 255] }, "Hi"),
|
||||
h("tui-box", { backgroundColor: "red", alignSelf: "flex-start" }, [
|
||||
h("tui-text", { backgroundColor: [0, 0, 255] }, "Hi"),
|
||||
]),
|
||||
),
|
||||
{ columns: 100 },
|
||||
|
||||
@@ -884,7 +884,7 @@ test("non-string host borderTopColor falls back to general borderColor", async (
|
||||
const { lastFrame } = await render(
|
||||
defineComponent(
|
||||
() => () =>
|
||||
h("box", {
|
||||
h("tui-box", {
|
||||
borderStyle: "single",
|
||||
borderColor: "red",
|
||||
borderTopColor: [0, 0, 255],
|
||||
@@ -1189,7 +1189,7 @@ test("non-string host borderTopBackgroundColor falls back to general borderBackg
|
||||
const { lastFrame } = await render(
|
||||
defineComponent(
|
||||
() => () =>
|
||||
h("box", {
|
||||
h("tui-box", {
|
||||
borderStyle: "single",
|
||||
borderBackgroundColor: "red",
|
||||
borderTopBackgroundColor: [0, 0, 255],
|
||||
|
||||
@@ -455,7 +455,7 @@ function mountWithInput(kittyKeyboard: { mode: "auto" | "enabled" }) {
|
||||
useInput((input) => {
|
||||
inputs.push(input);
|
||||
});
|
||||
return () => h("text", null, "x");
|
||||
return () => h("tui-text", null, "x");
|
||||
});
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
Reference in New Issue
Block a user