Fix BorderedLoader to pass theme to DynamicBorder

BorderedLoader receives theme as a parameter but was creating
DynamicBorder() without passing it, causing DynamicBorder to
fall back to the global theme variable which is undefined when
loaded via jiti (separate module cache).

Added doc comment to DynamicBorder explaining the jiti issue.
This commit is contained in:
Mario Zechner 2026-01-02 01:21:07 +01:00
parent 3ad5a168e7
commit af4c66117b
2 changed files with 10 additions and 7 deletions

View file

@ -8,7 +8,8 @@ export class BorderedLoader extends Container {
constructor(tui: TUI, theme: Theme, message: string) {
super();
this.addChild(new DynamicBorder());
const borderColor = (s: string) => theme.fg("border", s);
this.addChild(new DynamicBorder(borderColor));
this.loader = new CancellableLoader(
tui,
(s) => theme.fg("accent", s),
@ -19,7 +20,7 @@ export class BorderedLoader extends Container {
this.addChild(new Spacer(1));
this.addChild(new Text(theme.fg("muted", "esc cancel"), 1, 0));
this.addChild(new Spacer(1));
this.addChild(new DynamicBorder());
this.addChild(new DynamicBorder(borderColor));
}
get signal(): AbortSignal {

View file

@ -2,15 +2,17 @@ import type { Component } from "@mariozechner/pi-tui";
import { theme } from "../theme/theme.js";
/**
* Dynamic border component that adjusts to viewport width
* Dynamic border component that adjusts to viewport width.
*
* Note: When used from hooks loaded via jiti, the global `theme` may be undefined
* because jiti creates a separate module cache. Always pass an explicit color
* function when using DynamicBorder in components exported for hook use.
*/
export class DynamicBorder implements Component {
private color: (str: string) => string;
constructor(color?: (str: string) => string) {
// Use provided color function, or default to theme border color
// Theme may not be initialized at construction time, so we check at render time
this.color = color ?? ((str) => (theme ? theme.fg("border", str) : str));
constructor(color: (str: string) => string = (str) => theme.fg("border", str)) {
this.color = color;
}
invalidate(): void {