@alchemy.run/sigil 0.0.0-alpha.1 → 0.0.0-alpha.2

package/src/quick-lru.ts

@@ -0,0 +1,85 @@
+// Derived from `quick-lru` (MIT, Sindre Sorhus), reduced to the surface Ink
+// uses. Implements the same two-generation LRU algorithm: when the hot map
+// fills up, it becomes the cold generation and reads promote entries back.
+export class QuickLru<KeyType, ValueType> {
+  #size = 0;
+  #cache = new Map<KeyType, ValueType>();
+  #oldCache = new Map<KeyType, ValueType>();
+  readonly #maxSize: number;
+
+  constructor({ maxSize }: { maxSize: number }) {
+    if (!(maxSize && maxSize > 0)) {
+      throw new TypeError("`maxSize` must be a number greater than 0");
+    }
+
+    this.#maxSize = maxSize;
+  }
+
+  get size(): number {
+    let oldCacheSize = 0;
+
+    for (const key of this.#oldCache.keys()) {
+      if (!this.#cache.has(key)) {
+        oldCacheSize++;
+      }
+    }
+
+    return Math.min(this.#size + oldCacheSize, this.#maxSize);
+  }
+
+  get(key: KeyType): ValueType | undefined {
+    if (this.#cache.has(key)) {
+      return this.#cache.get(key);
+    }
+
+    if (this.#oldCache.has(key)) {
+      const value = this.#oldCache.get(key)!;
+      this.#oldCache.delete(key);
+      this.#set(key, value);
+      return value;
+    }
+
+    return;
+  }
+
+  set(key: KeyType, value: ValueType): this {
+    if (this.#cache.has(key)) {
+      this.#cache.set(key, value);
+    } else {
+      this.#set(key, value);
+    }
+
+    return this;
+  }
+
+  has(key: KeyType): boolean {
+    return this.#cache.has(key) || this.#oldCache.has(key);
+  }
+
+  delete(key: KeyType): boolean {
+    const deleted = this.#cache.delete(key);
+
+    if (deleted) {
+      this.#size--;
+    }
+
+    return this.#oldCache.delete(key) || deleted;
+  }
+
+  clear(): void {
+    this.#cache.clear();
+    this.#oldCache.clear();
+    this.#size = 0;
+  }
+
+  #set(key: KeyType, value: ValueType): void {
+    this.#cache.set(key, value);
+    this.#size++;
+
+    if (this.#size >= this.#maxSize) {
+      this.#size = 0;
+      this.#oldCache = this.#cache;
+      this.#cache = new Map();
+    }
+  }
+}

package/src/reconciler.ts

@@ -0,0 +1,451 @@
+import process from "node:process";
+
+import { createContext, version as reactVersion } from "react";
+import createReconciler, { type ReactContext } from "react-reconciler";
+import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants.js";
+import * as Scheduler from "scheduler";
+
+import {
+  createTextNode,
+  appendChildNode,
+  insertBeforeNode,
+  removeChildNode,
+  detachYogaSubtree,
+  emitLayoutListeners,
+  setStyle,
+  setTextNodeValue,
+  createNode,
+  setAttribute,
+  type DOMNodeAttribute,
+  type TextNode,
+  type ElementNames,
+  type DOMElement,
+} from "./dom.ts";
+import { type OutputTransformer } from "./render-node-to-output.ts";
+import { styles as applyStyles, type Styles } from "./styles.ts";
+import { Yoga } from "./yoga/index.ts";
+
+// We need to conditionally perform devtools connection to avoid
+// accidentally breaking other third-party code.
+// See https://github.com/vadimdemedes/ink/issues/384
+// See https://github.com/vadimdemedes/ink/issues/648
+if (process.env["SIGIL_DEV"] === "true") {
+  // Intentionally no warning when the package is missing.
+  // SIGIL_DEV may be set for other reasons; devtools is opt-in via installing the package.
+  let isDevtoolsInstalled = false;
+  try {
+    import.meta.resolve("react-devtools-core");
+    isDevtoolsInstalled = true;
+  } catch {}
+
+  if (isDevtoolsInstalled) {
+    await import("./devtools.ts");
+  }
+}
+
+type AnyObject = Record<string, unknown>;
+
+const diff = (before: AnyObject, after: AnyObject): AnyObject | undefined => {
+  if (before === after) {
+    return;
+  }
+
+  if (!before) {
+    return after;
+  }
+
+  const changed: AnyObject = {};
+  let isChanged = false;
+
+  for (const key of Object.keys(before)) {
+    const isDeleted = after ? !Object.hasOwn(after, key) : true;
+
+    if (isDeleted) {
+      changed[key] = undefined;
+      isChanged = true;
+    }
+  }
+
+  if (after) {
+    for (const key of Object.keys(after)) {
+      if (after[key] !== before[key]) {
+        changed[key] = after[key];
+        isChanged = true;
+      }
+    }
+  }
+
+  return isChanged ? changed : undefined;
+};
+
+const findRootNode = (node: DOMElement): DOMElement | undefined => {
+  let current: DOMElement | undefined = node;
+
+  while (current) {
+    if (current.nodeName === "ink-root") {
+      return current;
+    }
+
+    current = current.parentNode;
+  }
+
+  return;
+};
+
+/**
+ * Clear the root's cached `staticNode` when the node it points at is being
+ * removed as part of a larger subtree.
+ *
+ * The previous identity check (`staticNode === removeNode`) only caught direct
+ * removal of the `<Static>` element. When an *ancestor* of `<Static>` is
+ * removed, the stale `staticNode` reference survives and the next render would
+ * replay stale static output (and, before `detachYogaSubtree`, trap on detached
+ * WASM memory — see QwenLM/qwen-code#6820).
+ *
+ * The owning root is derived from the host parent passed to the removal hook,
+ * not a module-level global, so instances with separate stdout streams don't
+ * clobber each other's pointers.
+ */
+const clearStaticNodeIfContained = (
+  rootNode: DOMElement | undefined,
+  removeNode: DOMElement | TextNode,
+): void => {
+  if (!rootNode?.staticNode) {
+    return;
+  }
+
+  // Walk up from staticNode to see if removeNode is an ancestor.
+  let current: DOMElement | undefined = rootNode.staticNode;
+
+  while (current) {
+    if (current === removeNode) {
+      // Only clear staticNode, not previousStaticNode. The inequality
+      // (undefined !== previousStaticNode) triggers onStaticChange in
+      // resetAfterCommit, which resets fullStaticOutput.
+      rootNode.staticNode = undefined;
+      return;
+    }
+
+    current = current.parentNode;
+  }
+};
+
+type Props = Record<string, unknown>;
+
+type HostContext = {
+  isInsideText: boolean;
+};
+
+let currentUpdatePriority = NoEventPriority;
+
+async function loadPackageJson() {
+  const fs = await import("node:fs");
+  const content = fs.readFileSync(new URL("../package.json", import.meta.url), "utf8");
+
+  // oxlint-disable-next-line typescript/no-unsafe-type-assertion
+  const parsedContent = JSON.parse(content) as
+    | {
+        name?: string;
+        version?: string;
+      }
+    | undefined;
+
+  return {
+    name: parsedContent?.name,
+    version: parsedContent?.version,
+  };
+}
+
+let packageInfo = {
+  name: "ink",
+  version: reactVersion,
+};
+
+if (process.env["DEV"] === "true") {
+  try {
+    const loaded = await loadPackageJson();
+    packageInfo = {
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      name: loaded.name || packageInfo.name,
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      version: loaded.version || packageInfo.version,
+    };
+  } catch (error) {
+    console.warn(
+      "Failed to load package.json in development mode. Falling back to default renderer metadata.",
+      error,
+    );
+  }
+}
+
+export const reconciler = createReconciler<
+  ElementNames,
+  Props,
+  DOMElement,
+  DOMElement,
+  TextNode,
+  DOMElement,
+  unknown,
+  unknown,
+  unknown,
+  HostContext,
+  unknown,
+  unknown,
+  unknown,
+  unknown
+>({
+  getRootHostContext: () => ({
+    isInsideText: false,
+  }),
+  prepareForCommit: () => null,
+  preparePortalMount: () => null,
+  clearContainer: () => false,
+  resetAfterCommit(rootNode) {
+    if (typeof rootNode.onComputeLayout === "function") {
+      rootNode.onComputeLayout();
+    }
+
+    emitLayoutListeners(rootNode);
+
+    /*
+		Fire `onStaticChange` BEFORE `onImmediateRender` so ink resets accumulated static output before the new instance emits. Without this, items from a replaced/removed <Static> stay in `fullStaticOutput` and get replayed on rewrites.
+		*/
+    if (rootNode.staticNode !== rootNode.previousStaticNode) {
+      rootNode.previousStaticNode = rootNode.staticNode;
+      if (typeof rootNode.onStaticChange === "function") {
+        rootNode.onStaticChange();
+      }
+    }
+
+    // Since renders are throttled at the instance level and <Static> component children
+    // are rendered only once and then get deleted, we need an escape hatch to
+    // trigger an immediate render to ensure <Static> children are written to output before they get erased
+    if (rootNode.isStaticDirty) {
+      rootNode.isStaticDirty = false;
+      if (typeof rootNode.onImmediateRender === "function") {
+        rootNode.onImmediateRender();
+      }
+
+      return;
+    }
+
+    if (typeof rootNode.onRender === "function") {
+      rootNode.onRender();
+    }
+  },
+  getChildHostContext(parentHostContext, type) {
+    const previousIsInsideText = parentHostContext.isInsideText;
+    const isInsideText = type === "ink-text" || type === "ink-virtual-text";
+
+    if (previousIsInsideText === isInsideText) {
+      return parentHostContext;
+    }
+
+    return { isInsideText };
+  },
+  shouldSetTextContent: () => false,
+  createInstance(originalType, newProps, rootNode, hostContext) {
+    if (hostContext.isInsideText && originalType === "ink-box") {
+      throw new Error(`<Box> can’t be nested inside <Text> component`);
+    }
+
+    const type =
+      originalType === "ink-text" && hostContext.isInsideText ? "ink-virtual-text" : originalType;
+
+    const node = createNode(type);
+
+    for (const [key, value] of Object.entries(newProps)) {
+      if (key === "children") {
+        continue;
+      }
+
+      if (key === "style") {
+        // oxlint-disable-next-line typescript/no-unsafe-type-assertion
+        setStyle(node, value as Styles);
+
+        if (node.yogaNode) {
+          // oxlint-disable-next-line typescript/no-unsafe-type-assertion
+          applyStyles(node.yogaNode, value as Styles);
+        }
+
+        continue;
+      }
+
+      if (key === "internal_transform") {
+        // oxlint-disable-next-line typescript/no-unsafe-type-assertion
+        node.internal_transform = value as OutputTransformer;
+        continue;
+      }
+
+      if (key === "internal_static") {
+        node.internal_static = true;
+        rootNode.isStaticDirty = true;
+
+        // Save reference to <Static> node to skip traversal of entire
+        // node tree to find it
+        rootNode.staticNode = node;
+        continue;
+      }
+
+      setAttribute(node, key, value as DOMNodeAttribute);
+    }
+
+    return node;
+  },
+  createTextInstance(text, _root, hostContext) {
+    if (!hostContext.isInsideText) {
+      throw new Error(`Text string "${text}" must be rendered inside <Text> component`);
+    }
+
+    return createTextNode(text);
+  },
+  resetTextContent() {},
+  hideTextInstance(node) {
+    setTextNodeValue(node, "");
+  },
+  unhideTextInstance(node, text) {
+    setTextNodeValue(node, text);
+  },
+  getPublicInstance: (instance) => instance,
+  hideInstance(node) {
+    node.yogaNode?.setDisplay(Yoga.DISPLAY_NONE);
+  },
+  unhideInstance(node) {
+    node.yogaNode?.setDisplay(Yoga.DISPLAY_FLEX);
+  },
+  appendInitialChild: appendChildNode,
+  appendChild: appendChildNode,
+  insertBefore: insertBeforeNode,
+  finalizeInitialChildren() {
+    return false;
+  },
+  isPrimaryRenderer: true,
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  // Scheduler integration for concurrent mode
+  supportsMicrotasks: true,
+  scheduleMicrotask: queueMicrotask,
+  // @ts-expect-error @types/react-reconciler is outdated and doesn't include scheduleCallback
+  scheduleCallback: Scheduler.unstable_scheduleCallback,
+  cancelCallback: Scheduler.unstable_cancelCallback,
+  shouldYield: Scheduler.unstable_shouldYield,
+  now: Scheduler.unstable_now,
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  beforeActiveInstanceBlur() {},
+  afterActiveInstanceBlur() {},
+  detachDeletedInstance() {},
+  getInstanceFromNode: () => null,
+  prepareScopeUpdate() {},
+  getInstanceFromScope: () => null,
+  appendChildToContainer: appendChildNode,
+  insertInContainerBefore: insertBeforeNode,
+  removeChildFromContainer(node, removeNode) {
+    // `node` is the container, i.e. the root itself. Clear before
+    // removeChildNode breaks the parent chain.
+    clearStaticNodeIfContained(findRootNode(node), removeNode);
+
+    removeChildNode(node, removeNode);
+    detachYogaSubtree(removeNode);
+  },
+  commitUpdate(node, _type, oldProps, newProps) {
+    if (node.internal_static) {
+      const rootNode = findRootNode(node);
+
+      if (rootNode) {
+        rootNode.isStaticDirty = true;
+      }
+    }
+
+    const props = diff(oldProps, newProps);
+
+    // oxlint-disable-next-line typescript/no-unsafe-type-assertion
+    const style = diff(oldProps["style"] as Styles, newProps["style"] as Styles);
+
+    if (!props && !style) {
+      return;
+    }
+
+    if (props) {
+      for (const [key, value] of Object.entries(props)) {
+        if (key === "style") {
+          // oxlint-disable-next-line typescript/no-unsafe-type-assertion
+          setStyle(node, value as Styles);
+          continue;
+        }
+
+        if (key === "internal_transform") {
+          // oxlint-disable-next-line typescript/no-unsafe-type-assertion
+          node.internal_transform = value as OutputTransformer;
+          continue;
+        }
+
+        if (key === "internal_static") {
+          node.internal_static = true;
+          continue;
+        }
+
+        // oxlint-disable-next-line typescript/no-unsafe-type-assertion
+        setAttribute(node, key, value as DOMNodeAttribute);
+      }
+    }
+
+    if (style && node.yogaNode) {
+      // oxlint-disable-next-line typescript/no-unsafe-type-assertion
+      applyStyles(node.yogaNode, style, (newProps["style"] as Styles | undefined) ?? {});
+    }
+  },
+  commitTextUpdate(node, _oldText, newText) {
+    setTextNodeValue(node, newText);
+  },
+  removeChild(node, removeNode) {
+    // `node` is the host parent; its chain up to the root is still intact
+    // here, so derive the owning root from it rather than a global.
+    clearStaticNodeIfContained(findRootNode(node), removeNode);
+
+    removeChildNode(node, removeNode);
+    detachYogaSubtree(removeNode);
+  },
+  setCurrentUpdatePriority(newPriority: number) {
+    currentUpdatePriority = newPriority;
+  },
+  getCurrentUpdatePriority: () => currentUpdatePriority,
+  resolveUpdatePriority() {
+    if (currentUpdatePriority !== NoEventPriority) {
+      return currentUpdatePriority;
+    }
+
+    return DefaultEventPriority;
+  },
+  maySuspendCommit() {
+    // Return true to enable Suspense resource preloading
+    return true;
+  },
+  NotPendingTransition: undefined,
+  // oxlint-disable-next-line typescript/no-unsafe-type-assertion
+  HostTransitionContext: createContext(null) as unknown as ReactContext<unknown>,
+  resetFormInstance() {},
+  requestPostPaintCallback() {},
+  shouldAttemptEagerTransition() {
+    return false;
+  },
+  trackSchedulerEvent() {},
+  resolveEventType() {
+    return null;
+  },
+  resolveEventTimeStamp() {
+    return -1.1;
+  },
+  preloadInstance() {
+    return true;
+  },
+  startSuspendingCommit() {},
+  suspendInstance() {},
+  waitForCommitToBeReady() {
+    return null;
+  },
+  rendererPackageName: packageInfo.name,
+  rendererVersion: packageInfo.version,
+});

package/src/render-background.ts

@@ -0,0 +1,38 @@
+import { colorize } from "./colorize.ts";
+import { type DOMNode } from "./dom.ts";
+import type { Output } from "./output.ts";
+
+export const renderBackground = (x: number, y: number, node: DOMNode, output: Output): void => {
+  if (!node.style.backgroundColor) {
+    return;
+  }
+
+  const width = node.yogaNode!.getComputedWidth();
+  const height = node.yogaNode!.getComputedHeight();
+
+  // Calculate the actual content area considering borders
+  const leftBorderWidth = node.style.borderStyle && node.style.borderLeft !== false ? 1 : 0;
+  const rightBorderWidth = node.style.borderStyle && node.style.borderRight !== false ? 1 : 0;
+  const topBorderHeight = node.style.borderStyle && node.style.borderTop !== false ? 1 : 0;
+  const bottomBorderHeight = node.style.borderStyle && node.style.borderBottom !== false ? 1 : 0;
+
+  const contentWidth = width - leftBorderWidth - rightBorderWidth;
+  const contentHeight = height - topBorderHeight - bottomBorderHeight;
+
+  if (!(contentWidth > 0 && contentHeight > 0)) {
+    return;
+  }
+
+  // Create background fill for each row
+  const backgroundLine = colorize(
+    " ".repeat(contentWidth),
+    node.style.backgroundColor,
+    "background",
+  );
+
+  for (let row = 0; row < contentHeight; row++) {
+    output.write(x + leftBorderWidth, y + topBorderHeight + row, backgroundLine, {
+      transformers: [],
+    });
+  }
+};

package/src/render-border.ts

@@ -0,0 +1,134 @@
+import { chalk } from "./ansi/chalk.ts";
+import { boxes as cliBoxes } from "./boxes.ts";
+import { colorize } from "./colorize.ts";
+import { type DOMNode } from "./dom.ts";
+import type { Output } from "./output.ts";
+
+const stylePiece = (segment: string, fg?: string, bg?: string, dim?: boolean): string => {
+  let styled = colorize(segment, fg, "foreground");
+  styled = colorize(styled, bg, "background");
+  if (dim) {
+    styled = chalk.dim(styled);
+  }
+
+  return styled;
+};
+
+export const renderBorder = (x: number, y: number, node: DOMNode, output: Output): void => {
+  if (node.style.borderStyle) {
+    const width = node.yogaNode!.getComputedWidth();
+    const height = node.yogaNode!.getComputedHeight();
+    const box =
+      typeof node.style.borderStyle === "string"
+        ? cliBoxes[node.style.borderStyle]
+        : node.style.borderStyle;
+
+    const topBorderColor = node.style.borderTopColor ?? node.style.borderColor;
+    const bottomBorderColor = node.style.borderBottomColor ?? node.style.borderColor;
+    const leftBorderColor = node.style.borderLeftColor ?? node.style.borderColor;
+    const rightBorderColor = node.style.borderRightColor ?? node.style.borderColor;
+
+    const topBorderBackgroundColor =
+      node.style.borderTopBackgroundColor ?? node.style.borderBackgroundColor;
+    const bottomBorderBackgroundColor =
+      node.style.borderBottomBackgroundColor ?? node.style.borderBackgroundColor;
+    const leftBorderBackgroundColor =
+      node.style.borderLeftBackgroundColor ?? node.style.borderBackgroundColor;
+    const rightBorderBackgroundColor =
+      node.style.borderRightBackgroundColor ?? node.style.borderBackgroundColor;
+
+    const dimTopBorderColor = node.style.borderTopDimColor ?? node.style.borderDimColor;
+
+    const dimBottomBorderColor = node.style.borderBottomDimColor ?? node.style.borderDimColor;
+
+    const dimLeftBorderColor = node.style.borderLeftDimColor ?? node.style.borderDimColor;
+
+    const dimRightBorderColor = node.style.borderRightDimColor ?? node.style.borderDimColor;
+
+    const showTopBorder = node.style.borderTop !== false;
+    const showBottomBorder = node.style.borderBottom !== false;
+    const showLeftBorder = node.style.borderLeft !== false;
+    const showRightBorder = node.style.borderRight !== false;
+
+    const contentWidth = width - (showLeftBorder ? 1 : 0) - (showRightBorder ? 1 : 0);
+
+    let topBorder = showTopBorder
+      ? (showLeftBorder ? box.topLeft : "") +
+        box.top.repeat(contentWidth) +
+        (showRightBorder ? box.topRight : "")
+      : undefined;
+
+    topBorder &&= stylePiece(
+      topBorder,
+      topBorderColor,
+      topBorderBackgroundColor,
+      dimTopBorderColor,
+    );
+
+    let verticalBorderHeight = height;
+
+    if (showTopBorder) {
+      verticalBorderHeight -= 1;
+    }
+
+    if (showBottomBorder) {
+      verticalBorderHeight -= 1;
+    }
+
+    let leftBorder = "";
+
+    if (showLeftBorder) {
+      const one = stylePiece(
+        box.left,
+        leftBorderColor,
+        leftBorderBackgroundColor,
+        dimLeftBorderColor,
+      );
+      leftBorder = (one + "\n").repeat(verticalBorderHeight);
+    }
+
+    let rightBorder = "";
+
+    if (showRightBorder) {
+      const one = stylePiece(
+        box.right,
+        rightBorderColor,
+        rightBorderBackgroundColor,
+        dimRightBorderColor,
+      );
+      rightBorder = (one + "\n").repeat(verticalBorderHeight);
+    }
+
+    let bottomBorder = showBottomBorder
+      ? (showLeftBorder ? box.bottomLeft : "") +
+        box.bottom.repeat(contentWidth) +
+        (showRightBorder ? box.bottomRight : "")
+      : undefined;
+    bottomBorder &&= stylePiece(
+      bottomBorder,
+      bottomBorderColor,
+      bottomBorderBackgroundColor,
+      dimBottomBorderColor,
+    );
+
+    const offsetY = showTopBorder ? 1 : 0;
+
+    if (topBorder) {
+      output.write(x, y, topBorder, { transformers: [] });
+    }
+
+    if (leftBorder) {
+      output.write(x, y + offsetY, leftBorder, { transformers: [] });
+    }
+
+    if (rightBorder) {
+      output.write(x + width - 1, y + offsetY, rightBorder, {
+        transformers: [],
+      });
+    }
+
+    if (bottomBorder) {
+      output.write(x, y + height - 1, bottomBorder, { transformers: [] });
+    }
+  }
+};