Ink 终端 UI 框架

// Custom Reconciler 创建
import ReactReconciler from "react-reconciler";

const reconciler = ReactReconciler({
  createInstance(type, props) {
    return { type, props, children: [] };
  },
  appendInitialChild(parent, child) {
    parent.children.push(child);
  },
  appendChild(parent, child) {
    parent.children.push(child);
  },
  removeChild(parent, child) {
    const idx = parent.children.indexOf(child);
    if (idx !== -1) parent.children.splice(idx, 1);
  },
  prepareUpdate(instance, type, oldProps, newProps) {
    return true; // 简化：总是更新
  },
  commitUpdate(instance, updatePayload, type, oldProps, newProps) {
    instance.props = newProps;
  },
  getRootHostContext() { return {}; },
  getChildHostContext() { return {}; },
  finalizeInitialChildren() { return false; },
  prepareForCommit() { return null; },
  resetAfterCommit(root) {
    root.render(); // 触发终端重绘
  },
});

// Yoga 布局计算
import Yoga from "yoga-layout";

function calculateLayout(node, width, height) {
  const yogaNode = Yoga.Node.create();

  // 映射 Flexbox 属性
  if (node.props.flexDirection) {
    yogaNode.setFlexDirection(
      Yoga.FLEX_DIRECTION[node.props.flexDirection.toUpperCase()]
    );
  }
  if (node.props.padding) {
    yogaNode.setPadding(Yoga.EDGE_ALL, node.props.padding);
  }
  if (node.props.gap) {
    yogaNode.setGap(Yoga.GUTTER_ALL, node.props.gap);
  }

  // 递归添加子节点
  node.children.forEach((child) => {
    const childNode = calculateLayout(child);
    yogaNode.insertChild(childNode, yogaNode.getChildCount());
  });

  // 执行布局计算
  yogaNode.calculateLayout(width, height);

  // 提取计算结果
  return {
    left: yogaNode.getComputedLeft(),
    top: yogaNode.getComputedTop(),
    width: yogaNode.getComputedWidth(),
    height: yogaNode.getComputedHeight(),
    yogaNode,
  };
}

// ANSI 输出生成
function generateANSI(node, offsetX = 0, offsetY = 0) {
  const { left, top, width, height } = node.layout;
  const x = offsetX + left;
  const y = offsetY + top;

  let output = "";

  // 移动光标到目标位置
  output += String.raw`\x1b[${y + 1};${x + 1}H\x60;

  // 应用样式
  if (node.props.color) {
    output += String.raw`\x1b[${colorToANSI(node.props.color)}m\x60;
  }
  if (node.props.bold) output += "\x1b[1m";
  if (node.props.dim) output += "\x1b[2m";

  // 渲染文本内容
  if (node.props.children) {
    const text = typeof node.props.children === "string"
      ? node.props.children : "";
    output += truncate(text, width);
  }

  // 重置样式
  output += "\x1b[0m";

  // 递归渲染子节点
  node.children.forEach((child) => {
    output += generateANSI(child, x, y);
  });

  return output;
}