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

package/src/components/Box.tsx

@@ -1,12 +1,12 @@
-import { forwardRef, useContext, type PropsWithChildren } from "react";
+/** @jsxImportSource react */
+import { useContext, type PropsWithChildren, type Ref } from "react";
 
-import { type DOMElement } from "../dom.ts";
-import { type Styles } from "../styles.ts";
-import { type Except } from "../types.ts";
-import { accessibilityContext } from "./AccessibilityContext.ts";
-import { backgroundContext } from "./BackgroundContext.ts";
+import { accessibilityContext } from "#/components/AccessibilityContext.ts";
+import { backgroundContext } from "#/components/BackgroundContext.ts";
+import { type DOMElement } from "#/dom.ts";
+import { type Styles } from "#/styles.ts";
 
-export type Props = Except<Styles, "textWrap"> & {
+export type Props = Omit<Styles, "textWrap"> & {
   /**
 	A label for the element for screen readers.
 	*/
@@ -59,58 +59,50 @@ export type Props = Except<Styles, "textWrap"> & {
 /**
 `<Box>` is an essential Ink component to build your layout. It's like `<div style="display: flex">` in the browser.
 */
-export const Box = forwardRef<DOMElement, PropsWithChildren<Props>>(
-  (
-    {
-      children,
-      backgroundColor,
-      "aria-label": ariaLabel,
-      "aria-hidden": ariaHidden,
-      "aria-role": role,
-      "aria-state": ariaState,
-      ...style
-    },
-    ref,
-  ) => {
-    const { isScreenReaderEnabled } = useContext(accessibilityContext);
-    const label = ariaLabel ? <ink-text>{ariaLabel}</ink-text> : undefined;
-    if (isScreenReaderEnabled && ariaHidden) {
-      return null;
-    }
+export function Box({
+  children,
+  ref,
+  backgroundColor,
+  "aria-label": ariaLabel,
+  "aria-hidden": ariaHidden,
+  "aria-role": role,
+  "aria-state": ariaState,
+  ...style
+}: PropsWithChildren<Props> & { readonly ref?: Ref<DOMElement> }) {
+  const { isScreenReaderEnabled } = useContext(accessibilityContext);
+  const label = ariaLabel ? <ink-text>{ariaLabel}</ink-text> : undefined;
+  if (isScreenReaderEnabled && ariaHidden) {
+    return null;
+  }
 
-    const boxElement = (
-      <ink-box
-        ref={ref}
-        style={{
-          flexWrap: "nowrap",
-          flexDirection: "row",
-          flexGrow: 0,
-          flexShrink: 1,
-          ...style,
-          backgroundColor,
-          overflowX: style.overflowX ?? style.overflow ?? "visible",
-          overflowY: style.overflowY ?? style.overflow ?? "visible",
-        }}
-        internal_accessibility={{
-          role,
-          state: ariaState,
-        }}
-      >
-        {isScreenReaderEnabled && label ? label : children}
-      </ink-box>
-    );
-
-    // If this Box has a background color, provide it to children via context
-    if (backgroundColor) {
-      return (
-        <backgroundContext.Provider value={backgroundColor}>
-          {boxElement}
-        </backgroundContext.Provider>
-      );
-    }
+  const boxElement = (
+    <ink-box
+      ref={ref}
+      style={{
+        flexWrap: "nowrap",
+        flexDirection: "row",
+        flexGrow: 0,
+        flexShrink: 1,
+        ...style,
+        backgroundColor,
+        overflowX: style.overflowX ?? style.overflow ?? "visible",
+        overflowY: style.overflowY ?? style.overflow ?? "visible",
+      }}
+      internal_accessibility={{
+        role,
+        state: ariaState,
+      }}
+    >
+      {isScreenReaderEnabled && label ? label : children}
+    </ink-box>
+  );
 
-    return boxElement;
-  },
-);
+  // If this Box has a background color, provide it to children via context
+  if (backgroundColor) {
+    return (
+      <backgroundContext.Provider value={backgroundColor}>{boxElement}</backgroundContext.Provider>
+    );
+  }
 
-Box.displayName = "Box";
+  return boxElement;
+}

package/src/components/CursorContext.ts

@@ -1,6 +1,6 @@
 import { createContext } from "react";
 
-import { type CursorPosition } from "../log-update.ts";
+import { type CursorPosition } from "#/log-update.ts";
 
 export type Props = {
   /**

package/src/components/ErrorBoundary.tsx

@@ -1,6 +1,7 @@
+/** @jsxImportSource react */
 import { PureComponent, type ReactNode } from "react";
 
-import { ErrorOverview } from "./ErrorOverview.tsx";
+import { ErrorOverview } from "#/components/ErrorOverview.tsx";
 
 type Props = {
   readonly children: ReactNode;

package/src/components/ErrorOverview.tsx

@@ -1,10 +1,12 @@
-import * as fs from "node:fs";
+/** @jsxImportSource react */
+
+import { existsSync, readFileSync } from "node:fs";
 import { cwd } from "node:process";
 
-import { codeExcerpt, type CodeExcerpt } from "../code-excerpt.ts";
-import { parseStackLine } from "../parse-stack-line.ts";
-import { Box } from "./Box.tsx";
-import { Text } from "./Text.tsx";
+import { codeExcerpt, type CodeExcerpt } from "#/code-excerpt.ts";
+import { Box } from "#/components/Box.tsx";
+import { Text } from "#/components/Text.tsx";
+import { parseStackLine } from "#/parse-stack-line.ts";
 
 // Error's source file is reported as file:///home/user/file.js
 // This function removes the file://[cwd] part
@@ -24,8 +26,8 @@ export function ErrorOverview({ error }: Props) {
   let lineWidth = 0;
   const stackLineCounts = new Map<string, number>();
 
-  if (filePath && origin?.line && fs.existsSync(filePath)) {
-    const sourceCode = fs.readFileSync(filePath, "utf8");
+  if (filePath && origin?.line && existsSync(filePath)) {
+    const sourceCode = readFileSync(filePath, "utf8");
     excerpt = codeExcerpt(sourceCode, origin.line);
 
     if (excerpt) {

package/src/components/Newline.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 export type Props = {
   /**
 	Number of newlines to insert.

package/src/components/Spacer.tsx

@@ -1,4 +1,5 @@
-import { Box } from "./Box.tsx";
+/** @jsxImportSource react */
+import { Box } from "#/components/Box.tsx";
 
 /**
 A flexible space that expands along the major axis of its containing layout.

package/src/components/Static.tsx

@@ -1,6 +1,7 @@
+/** @jsxImportSource react */
 import { useMemo, useState, useLayoutEffect, type ReactNode } from "react";
 
-import { type Styles } from "../styles.ts";
+import { type Styles } from "#/styles.ts";
 
 export type Props<T> = {
   /**

package/src/components/StderrContext.ts

@@ -1,5 +1,3 @@
-import process from "node:process";
-
 import { createContext } from "react";
 
 export type Props = {

package/src/components/StdinContext.ts

@@ -1,5 +1,4 @@
 import { EventEmitter } from "node:events";
-import process from "node:process";
 
 import { createContext } from "react";
 

package/src/components/StdoutContext.ts

@@ -1,8 +1,6 @@
-import process from "node:process";
-
 import { createContext } from "react";
 
-import type { OutputStream } from "../stream.ts";
+import type { OutputStream } from "#/stream.ts";
 
 export type Props = {
   /**

package/src/components/Text.tsx

@@ -1,11 +1,12 @@
+/** @jsxImportSource react */
 import { useContext, type ReactNode } from "react";
 
-import { chalk, type ForegroundColorName } from "../ansi/chalk.ts";
-import { colorize } from "../colorize.ts";
-import { type Styles } from "../styles.ts";
-import { type LiteralUnion } from "../types.ts";
-import { accessibilityContext } from "./AccessibilityContext.ts";
-import { backgroundContext } from "./BackgroundContext.ts";
+import { chalk, type ForegroundColorName } from "#/ansi/chalk.ts";
+import { colorize } from "#/colorize.ts";
+import { accessibilityContext } from "#/components/AccessibilityContext.ts";
+import { backgroundContext } from "#/components/BackgroundContext.ts";
+import { type Styles } from "#/styles.ts";
+import { type LiteralUnion } from "#/types.ts";
 
 export type Props = {
   /**

package/src/components/Transform.tsx

@@ -1,6 +1,7 @@
+/** @jsxImportSource react */
 import { useContext, type ReactNode } from "react";
 
-import { accessibilityContext } from "./AccessibilityContext.ts";
+import { accessibilityContext } from "#/components/AccessibilityContext.ts";
 
 export type Props = {
   /**

package/src/cursor-position.ts

@@ -1,4 +1,4 @@
-import { ansiEscapes } from "./ansi/escapes.ts";
+import { ansiEscapes } from "#/ansi/escapes.ts";
 
 export type CursorPosition = {
   x: number;

package/src/devtools.ts

@@ -1,41 +1,101 @@
-/* eslint-disable import-x/order */
+import { setTimeout } from "node:timers";
 
-// eslint-disable-next-line import-x/no-unassigned-import
-import "./devtools-window-polyfill.ts";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import devtools from "react-devtools-core";
-import WebSocket from "ws";
+// Node 22.4+ ships a stable browser-compatible WebSocket client, so no `ws`
+// dependency is needed. react-devtools-core resolves the constructor via the
+// `window`/`ws` globals defined here.
+Object.defineProperties(globalThis, {
+  ws: { value: WebSocket },
+  window: { value: globalThis },
+  self: { value: globalThis },
+});
 
-const isDevToolsReachable = async (): Promise<boolean> =>
-  new Promise((resolve) => {
+// Filter out Ink's internal components from devtools for a cleaner view.
+// Also, since `react-devtools-shared` package isn't published on npm, we can't
+// use its types, that's why there are hard-coded values in `type` fields below.
+// See https://github.com/facebook/react/blob/edf6eac8a181860fd8a2d076a43806f1237495a1/packages/react-devtools-shared/src/types.js#L24
+Object.defineProperty(globalThis, "__REACT_DEVTOOLS_COMPONENT_FILTERS__", {
+  value: [
+    {
+      // ComponentFilterElementType
+      type: 1,
+      // ElementTypeHostComponent
+      value: 7,
+      isEnabled: true,
+    },
+    {
+      // ComponentFilterDisplayName
+      type: 2,
+      value: "InternalApp",
+      isEnabled: true,
+      isValid: true,
+    },
+    {
+      // ComponentFilterDisplayName
+      type: 2,
+      value: "InternalAppContext",
+      isEnabled: true,
+      isValid: true,
+    },
+    {
+      // ComponentFilterDisplayName
+      type: 2,
+      value: "InternalStdoutContext",
+      isEnabled: true,
+      isValid: true,
+    },
+    {
+      // ComponentFilterDisplayName
+      type: 2,
+      value: "InternalStderrContext",
+      isEnabled: true,
+      isValid: true,
+    },
+    {
+      // ComponentFilterDisplayName
+      type: 2,
+      value: "InternalStdinContext",
+      isEnabled: true,
+      isValid: true,
+    },
+    {
+      // ComponentFilterDisplayName
+      type: 2,
+      value: "InternalFocusContext",
+      isEnabled: true,
+      isValid: true,
+    },
+  ],
+});
+
+const isDevToolsReachable = () =>
+  new Promise<boolean>((resolve) => {
     const socket = new WebSocket("ws://localhost:8097");
 
+    const settle = (reachable: boolean) => {
+      clearTimeout(timeout);
+      socket.close();
+      resolve(reachable);
+    };
+
     const timeout = setTimeout(() => {
-      socket.terminate();
-      resolve(false);
+      settle(false);
     }, 2000);
     // Don't let the timeout keep the process alive on its own
     timeout.unref();
 
-    socket.on("open", () => {
-      clearTimeout(timeout);
-      socket.terminate();
-      resolve(true);
+    socket.addEventListener("open", () => {
+      settle(true);
     });
-
-    socket.on("error", () => {
-      clearTimeout(timeout);
-      socket.terminate();
-      resolve(false);
+    socket.addEventListener("error", () => {
+      settle(false);
     });
   });
 
 if (await isDevToolsReachable()) {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-  (devtools as any).initialize();
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-  (devtools as any).connectToDevTools();
+  // @ts-expect-error: react-devtools-core is not typed
+  const devtools = await import("react-devtools-core");
+  devtools.initialize();
+  devtools.connectToDevTools();
 } else {
   console.warn(
     "SIGIL_DEV is set to true, but the React DevTools server is not running. Start it with:\n\n$ npx react-devtools\n",

package/src/dom.ts

@@ -1,9 +1,9 @@
-import { measureText } from "./measure-text.ts";
-import { type OutputTransformer } from "./render-node-to-output.ts";
-import { squashTextNodes } from "./squash-text-nodes.ts";
-import { type Styles } from "./styles.ts";
-import { wrapText } from "./wrap-text.ts";
-import { Yoga, type Node as YogaNode } from "./yoga/index.ts";
+import { measureText } from "#/measure-text.ts";
+import { type OutputTransformer } from "#/render-node-to-output.ts";
+import { squashTextNodes } from "#/squash-text-nodes.ts";
+import { type Styles } from "#/styles.ts";
+import { wrapText } from "#/wrap-text.ts";
+import { Yoga, type Node as YogaNode } from "#/yoga/index.ts";
 
 type InkNode = {
   parentNode: DOMElement | undefined;
@@ -101,7 +101,7 @@ export const createNode = (nodeName: ElementNames): DOMElement => {
   };
 
   if (nodeName === "ink-text") {
-    node.yogaNode?.setMeasureFunc(measureTextNode.bind(null, node));
+    node.yogaNode?.setMeasureFunc((width) => measureTextNode(node, width));
   }
 
   return node;

package/src/env.ts

@@ -0,0 +1,12 @@
+// Every modern CI provider sets CI=1 (or CI=true), so any non-empty value
+export const isInCi = Boolean(process.env.CI);
+
+export const isSigilDev = process.env.SIGIL_DEV === "true";
+
+export const isScreenReader = process.env.SIGIL_SCREEN_READER === "true";
+
+export const isWindows = process.platform === "win32";
+
+export const isMacos = process.platform === "darwin";
+
+export const isTty = (stream: NodeJS.ReadableStream) => "isTTY" in stream && stream.isTTY === true;

package/src/get-max-width.ts

@@ -1,4 +1,4 @@
-import { Yoga, type Node as YogaNode } from "./yoga/index.ts";
+import { Yoga, type Node as YogaNode } from "#/yoga/index.ts";
 
 export const getMaxWidth = (yogaNode: YogaNode) => {
   return (

package/src/global.d.ts

@@ -1,8 +1,7 @@
 import { type ReactNode, type Key, type Ref } from "react";
 
-import { type DOMElement } from "./dom.ts";
-import { type Styles } from "./styles.ts";
-import { type Except } from "./types.ts";
+import { type DOMElement } from "#/dom.ts";
+import { type Styles } from "#/styles.ts";
 
 declare module "react" {
   namespace JSX {
@@ -20,7 +19,7 @@ declare namespace Ink {
     children?: ReactNode;
     key?: Key;
     ref?: Ref<DOMElement>;
-    style?: Except<Styles, "textWrap">;
+    style?: Omit<Styles, "textWrap">;
     internal_accessibility?: DOMElement["internal_accessibility"];
   };
 

package/src/{boxes.ts → glyphs.ts}

@@ -1,20 +1,5 @@
 // Derived from `cli-boxes` (MIT, Sindre Sorhus).
-
-/**
-Style of the box border.
-*/
-export type BoxStyle = {
-  readonly topLeft: string;
-  readonly top: string;
-  readonly topRight: string;
-  readonly right: string;
-  readonly bottomRight: string;
-  readonly bottom: string;
-  readonly bottomLeft: string;
-  readonly left: string;
-};
-
-export const boxes = {
+export const BOXES = {
   single: {
     topLeft: "┌",
     top: "─",
@@ -95,6 +80,20 @@ export const boxes = {
     bottomLeft: "↗",
     left: "→",
   },
-} as const satisfies Record<string, BoxStyle>;
+} as const;
 
-export type Boxes = typeof boxes;
+export type BoxStyle = keyof typeof BOXES;
+
+/**
+The set of glyphs making up a box border, for custom `borderStyle` objects.
+*/
+export type BoxGlyphs = {
+  readonly topLeft: string;
+  readonly top: string;
+  readonly topRight: string;
+  readonly right: string;
+  readonly bottomRight: string;
+  readonly bottom: string;
+  readonly bottomLeft: string;
+  readonly left: string;
+};

package/src/hooks/use-animation.ts

@@ -1,6 +1,6 @@
 import { useState, useLayoutEffect, useRef, useCallback, useContext } from "react";
 
-import { animationContext as AnimationContext } from "../components/AnimationContext.ts";
+import { animationContext as AnimationContext } from "#/components/AnimationContext.ts";
 
 const defaultAnimationInterval = 100;
 const maximumTimerInterval = 2_147_483_647;

package/src/hooks/use-app.ts

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 
-import { AppContext } from "../components/AppContext.ts";
+import { AppContext } from "#/components/AppContext.ts";
 
 /**
 A React hook that returns app lifecycle methods like `exit()` and `waitUntilRenderFlush()`.

package/src/hooks/use-box-metrics.ts

@@ -1,6 +1,6 @@
 import { type RefObject, useState, useEffect, useCallback, useMemo } from "react";
 
-import { type DOMElement, addLayoutListener } from "../dom.ts";
+import { type DOMElement, addLayoutListener } from "#/dom.ts";
 
 // Yoga's `right`/`bottom` are omitted: always `0` for flow layout and unintuitive for absolute positioning.
 /**

package/src/hooks/use-cursor.ts

@@ -1,7 +1,7 @@
 import { useContext, useRef, useCallback, useInsertionEffect } from "react";
 
-import { CursorContext } from "../components/CursorContext.ts";
-import { type CursorPosition } from "../log-update.ts";
+import { CursorContext } from "#/components/CursorContext.ts";
+import { type CursorPosition } from "#/log-update.ts";
 
 /**
 A React hook that returns methods to control the terminal cursor position.

package/src/hooks/use-focus-manager.ts

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 
-import { FocusContext, type Props } from "../components/FocusContext.ts";
+import { FocusContext, type Props } from "#/components/FocusContext.ts";
 
 type Output = {
   /**

package/src/hooks/use-focus.ts

@@ -1,7 +1,7 @@
-import { useEffect, useContext, useMemo } from "react";
+import { useEffect, useContext, useId } from "react";
 
-import { FocusContext } from "../components/FocusContext.ts";
-import { useStdin } from "./use-stdin.ts";
+import { FocusContext } from "#/components/FocusContext.ts";
+import { useStdin } from "#/hooks/use-stdin.ts";
 
 type Input = {
   /**
@@ -44,9 +44,8 @@ export const useFocus = ({
   const { isRawModeSupported, setRawMode } = useStdin();
   const { activeId, add, remove, activate, deactivate, focus } = useContext(FocusContext);
 
-  const id = useMemo(() => {
-    return customId ?? Math.random().toString().slice(2, 7);
-  }, [customId]);
+  const autoId = useId();
+  const id = customId ?? autoId;
 
   useEffect(() => {
     add(id, { autoFocus });

package/src/hooks/use-input.ts

@@ -1,9 +1,9 @@
 import { useEffect, useEffectEvent } from "react";
 
-import { ESC } from "../ansi/escapes.ts";
-import { parseKeypress, nonAlphanumericKeys } from "../parse-keypress.ts";
-import { reconciler } from "../reconciler.ts";
-import { useStdinContext } from "./use-stdin.ts";
+import { ESC } from "#/ansi/escapes.ts";
+import { useStdinContext } from "#/hooks/use-stdin.ts";
+import { parseKeypress, nonAlphanumericKeys } from "#/parse-keypress.ts";
+import { reconciler } from "#/reconciler.ts";
 
 /**
 Handy information about a key that was pressed.

package/src/hooks/use-is-screen-reader-enabled.ts

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 
-import { accessibilityContext } from "../components/AccessibilityContext.ts";
+import { accessibilityContext } from "#/components/AccessibilityContext.ts";
 
 /**
 A React hook that returns whether a screen reader is enabled.

package/src/hooks/use-paste.ts

@@ -1,7 +1,7 @@
 import { useEffect, useEffectEvent } from "react";
 
-import { reconciler } from "../reconciler.ts";
-import { useStdinContext } from "./use-stdin.ts";
+import { useStdinContext } from "#/hooks/use-stdin.ts";
+import { reconciler } from "#/reconciler.ts";
 
 type Options = {
   /**

package/src/hooks/use-stderr.ts

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 
-import { StderrContext } from "../components/StderrContext.ts";
+import { StderrContext } from "#/components/StderrContext.ts";
 
 /**
 A React hook that returns the stderr stream.

package/src/hooks/use-stdin.ts

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 
-import { StdinContext, type PublicProps, type Props } from "../components/StdinContext.ts";
+import { StdinContext, type PublicProps, type Props } from "#/components/StdinContext.ts";
 
 /**
 A React hook that returns the stdin stream and stdin-related utilities.

package/src/hooks/use-stdout.ts

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 
-import { StdoutContext } from "../components/StdoutContext.ts";
+import { StdoutContext } from "#/components/StdoutContext.ts";
 
 /**
 A React hook that returns the stdout stream where Ink renders your app.

package/src/hooks/use-window-size.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 
-import { getWindowSize } from "../utils.ts";
-import { useStdout } from "./use-stdout.ts";
+import { useStdout } from "#/hooks/use-stdout.ts";
+import { getWindowSize } from "#/utils.ts";
 
 /**
 Dimensions of the terminal window.