@valyrianjs/terminal 0.2.0 → 0.2.2

package/src/text.ts

@@ -5,6 +5,20 @@ const C1_CSI_TERMINAL_CONTROL = /\u009b[0-?]*[ -/]*[@-~]/g;
 const ESC_TERMINAL_CONTROL = /\u001b[ -/]*[0-~]/g;
 const C1_TERMINAL_CONTROL = /[\u0080-\u009f]/g;
 const C0_TERMINAL_CONTROL = /[\u0000-\u0009\u000b-\u001f\u007f]/g;
+const COMBINING_MARK = /\p{Mark}/u;
+const EMOJI_PRESENTATION = /\p{Extended_Pictographic}/u;
+
+type GraphemeSegmenter = {
+  segment(value: string): Iterable<{ segment: string }>;
+};
+
+const Segmenter = (Intl as unknown as {
+  Segmenter?: new (locale?: string, options?: { granularity: "grapheme" }) => GraphemeSegmenter;
+}).Segmenter;
+
+const GRAPHEME_SEGMENTER = typeof Segmenter === "function"
+  ? new Segmenter(undefined, { granularity: "grapheme" })
+  : null;
 
 export function stripTerminalControls(value: unknown) {
   return String(value)
@@ -18,3 +32,137 @@ export function stripTerminalControls(value: unknown) {
 }
 
 export const plainText = stripTerminalControls;
+
+export function terminalGraphemes(value: string): string[] {
+  if (GRAPHEME_SEGMENTER !== null) {
+    return Array.from(GRAPHEME_SEGMENTER.segment(value), (part) => part.segment);
+  }
+
+  return Array.from(value);
+}
+
+function isWideCodePoint(codePoint: number) {
+  return (
+    codePoint >= 0x1100 && (
+      codePoint <= 0x115f
+      || codePoint === 0x2329
+      || codePoint === 0x232a
+      || (codePoint >= 0x2e80 && codePoint <= 0xa4cf && codePoint !== 0x303f)
+      || (codePoint >= 0xac00 && codePoint <= 0xd7a3)
+      || (codePoint >= 0xf900 && codePoint <= 0xfaff)
+      || (codePoint >= 0xfe10 && codePoint <= 0xfe19)
+      || (codePoint >= 0xfe30 && codePoint <= 0xfe6f)
+      || (codePoint >= 0xff00 && codePoint <= 0xff60)
+      || (codePoint >= 0xffe0 && codePoint <= 0xffe6)
+      || (codePoint >= 0x20000 && codePoint <= 0x3fffd)
+    )
+  );
+}
+
+function isZeroWidthCodePoint(codePoint: number, char: string) {
+  return codePoint === 0x200d
+    || (codePoint >= 0xfe00 && codePoint <= 0xfe0f)
+    || (codePoint >= 0xe0100 && codePoint <= 0xe01ef)
+    || COMBINING_MARK.test(char);
+}
+
+function graphemeCellWidth(grapheme: string) {
+  if (grapheme.length === 0) {
+    return 0;
+  }
+
+  if (grapheme.includes("\u200d") || EMOJI_PRESENTATION.test(grapheme)) {
+    return 2;
+  }
+
+  let width = 0;
+  for (const char of Array.from(grapheme)) {
+    const codePoint = char.codePointAt(0);
+    if (typeof codePoint !== "number") {
+      continue;
+    }
+    if (isZeroWidthCodePoint(codePoint, char)) {
+      continue;
+    }
+    width = Math.max(width, isWideCodePoint(codePoint) ? 2 : 1);
+  }
+
+  return width;
+}
+
+export function terminalCellWidth(value: unknown) {
+  const text = stripTerminalControls(value);
+  return terminalGraphemes(text).reduce((width, grapheme) => width + graphemeCellWidth(grapheme), 0);
+}
+
+export function sliceTerminalCells(value: string, maxCells: number) {
+  const limit = Math.max(0, Math.trunc(Number(maxCells) || 0));
+  let width = 0;
+  let output = "";
+
+  for (const grapheme of terminalGraphemes(value)) {
+    const graphemeWidth = graphemeCellWidth(grapheme);
+    if (graphemeWidth > 0 && width + graphemeWidth > limit) {
+      break;
+    }
+    output += grapheme;
+    width += graphemeWidth;
+  }
+
+  return output;
+}
+
+export function dropTerminalCells(value: string, cells: number) {
+  const limit = Math.max(0, Math.trunc(Number(cells) || 0));
+  let width = 0;
+  let output = "";
+  let dropping = true;
+
+  for (const grapheme of terminalGraphemes(value)) {
+    if (dropping) {
+      const graphemeWidth = graphemeCellWidth(grapheme);
+      if (width < limit || (graphemeWidth === 0 && width <= limit)) {
+        width += graphemeWidth;
+        continue;
+      }
+      dropping = false;
+    }
+    output += grapheme;
+  }
+
+  return output;
+}
+
+export function padEndTerminalCells(value: string, width: number) {
+  const size = Math.max(0, Math.trunc(Number(width) || 0));
+  const visibleWidth = terminalCellWidth(value);
+  return visibleWidth >= size ? value : `${value}${" ".repeat(size - visibleWidth)}`;
+}
+
+export function terminalCellToStringIndex(value: string) {
+  const indexes: number[] = [0];
+  let cellOffset = 0;
+  let stringIndex = 0;
+
+  for (const grapheme of terminalGraphemes(value)) {
+    const graphemeWidth = graphemeCellWidth(grapheme);
+    const nextStringIndex = stringIndex + grapheme.length;
+
+    if (graphemeWidth > 0) {
+      for (let cell = 1; cell < graphemeWidth; cell += 1) {
+        indexes[cellOffset + cell] = nextStringIndex;
+      }
+      cellOffset += graphemeWidth;
+      indexes[cellOffset] = nextStringIndex;
+    }
+
+    stringIndex = nextStringIndex;
+  }
+
+  indexes[cellOffset] = stringIndex;
+  return indexes;
+}
+
+export function cursorCellOffset(value: string, cursor: number) {
+  return terminalCellWidth(value.slice(0, Math.max(0, Math.trunc(Number(cursor) || 0))));
+}

package/src/theme.ts

@@ -101,6 +101,9 @@ export const defaultTerminalTheme: TerminalTheme = {
     "list.current": {
       plainPrefix: "> "
     },
+    "list.selected": {
+      plainPrefix: "* "
+    },
     focus: {
       background: "#1f2328"
     },

package/src/tree.ts

@@ -54,12 +54,27 @@ export function resolveToTerminalNodes(input: any): TerminalNode[] {
       return resolveToTerminalNodes(resolveComponent(input.tag, input.props || {}, input.children || []));
     }
 
+    const tag = input.tag as TerminalPrimitiveTag;
+    const props = { ...(input.props || {}) } as Record<string, any>;
+    const vnodeChildren = input.children || [];
+    if (tag === "terminal-list" && vnodeChildren.length === 1 && typeof vnodeChildren[0] === "function") {
+      props.__childrenRenderer = vnodeChildren[0];
+      return [
+        {
+          type: "element",
+          tag,
+          props,
+          children: []
+        }
+      ];
+    }
+
     return [
       {
         type: "element",
-        tag: input.tag as TerminalPrimitiveTag,
-        props: (input.props || {}) as Record<string, any>,
-        children: normalizeChildren(input.children || [])
+        tag,
+        props,
+        children: normalizeChildren(vnodeChildren)
       }
     ];
   }
@@ -106,7 +121,7 @@ export function collectDirectOverlayFocusableNodes(nodes: TerminalNode[], out: T
 
     const overlayChildren = node.children.filter((child) => child.type === "element" && child.tag === "terminal-overlay" && child.props.trapFocus !== false);
     if (overlayChildren.length) {
-      collectFocusableNodes(overlayChildren, out);
+      collectFocusableNodes(overlayChildren.slice().reverse(), out);
       continue;
     }
 

package/src/types.ts

@@ -28,6 +28,10 @@ export type TerminalCommandId =
   | "button.press"
   | "list.prev"
   | "list.next"
+  | "list.pageUp"
+  | "list.pageDown"
+  | "list.home"
+  | "list.end"
   | "list.press"
   | "scroll.up"
   | "scroll.down"
@@ -125,8 +129,13 @@ export interface TerminalHitbox {
   y2: number;
   textStartX?: number;
   textLength?: number;
+  textCellToStringIndex?: number[];
   itemOffset?: number;
+  itemIndexes?: number[];
+  contentY?: number;
   pointerLayer?: number;
+  __listItemIndex?: number;
+  __pressHandler?: (event: TerminalButtonPressEventPayload) => void;
 }
 
 export interface CursorPosition {
@@ -290,14 +299,29 @@ export interface TerminalButtonPressEventPayload extends TerminalEventPayloadBas
   type: "press" | "doublepress" | "contextpress";
 }
 
-export interface TerminalListChangeEventPayload<T = any> extends TerminalValueEventPayloadBase<T> {
+export interface TerminalListStateEventPayload {
+  activeIndex: number;
+  selectedIndex: number | null;
+  viewportOffset: number;
+  viewportRows: number;
+}
+
+export interface TerminalListChangeEventPayload<T = any> extends TerminalValueEventPayloadBase<T>, TerminalListStateEventPayload {
   type: "change";
   index: number;
+  key?: string;
 }
 
-export interface TerminalListPressEventPayload<T = any> extends TerminalValueEventPayloadBase<T> {
+export interface TerminalListViewportChangeEventPayload extends TerminalEventPayloadBase, TerminalListStateEventPayload {
+  type: "viewportchange";
+  offset: number;
+  rows: number;
+}
+
+export interface TerminalListPressEventPayload<T = any> extends TerminalValueEventPayloadBase<T>, TerminalListStateEventPayload {
   type: "press" | "doublepress" | "contextpress";
   index: number;
+  key?: string;
 }
 
 export type TerminalChangeEventPayload =
@@ -334,6 +358,7 @@ export interface TerminalRowPointerEventPayloadBase extends TerminalPointerCoord
 export interface TerminalListPointerEventPayload<T = any> extends TerminalRowPointerEventPayloadBase {
   type: TerminalMouseEventType;
   index: number;
+  key?: string;
   value: T;
 }
 
@@ -363,7 +388,9 @@ export interface TerminalInputProps extends TerminalFocusableProps, TerminalStyl
 export interface TerminalEditorProps extends TerminalFocusableProps, TerminalStyleProps {
   value?: string;
   placeholder?: string;
+  width?: number;
   height?: number;
+  fill?: boolean;
   onchange?(event: TerminalEditorChangeEventPayload): void;
   oninput?(event: TerminalEditorChangeEventPayload): void;
   onsubmit?(event: TerminalEditorSubmitEventPayload): void;
@@ -377,13 +404,31 @@ export interface TerminalButtonProps extends TerminalFocusableProps, TerminalSty
   oncontextpress?(event: TerminalButtonPressEventPayload): void;
 }
 
+export interface TerminalListRenderContext<T = any> {
+  index: number;
+  key: string;
+  active: boolean;
+  selected: boolean;
+  viewportIndex: number;
+  item: T;
+}
+
+export type TerminalListItemKey<T = any> = (item: T, index: number) => string | number;
+export type TerminalListItemRenderer<T = any> = (item: T, ctx: TerminalListRenderContext<T>) => any;
+
 export interface TerminalListProps<T = any> extends TerminalFocusableProps, TerminalPointerCaptureProps, TerminalStyleProps {
   items?: readonly T[];
   virtualized?: boolean;
+  height?: number;
   itemHeight?: 1;
   overscan?: number;
-  renderItem?(item: T, index: number): string;
+  wrap?: boolean;
+  itemKey?: TerminalListItemKey<T>;
+  showActive?: boolean;
+  renderItem?(item: T, index: number): any;
+  children?: TerminalListItemRenderer<T>;
   onchange?(event: TerminalListChangeEventPayload<T>): void;
+  onviewportchange?(event: TerminalListViewportChangeEventPayload): void;
   onpress?(event: TerminalListPressEventPayload<T>): void;
   ondoublepress?(event: TerminalListPressEventPayload<T>): void;
   oncontextpress?(event: TerminalListPressEventPayload<T>): void;