tinky 1.5.0 → 1.7.0

package/lib/utils/colorize.js

@@ -5,49 +5,71 @@ const isNamedColor = (color) => {
     return color in ansis;
 };
 /**
- * Applies a color to a string using Ansis.
- * Supports named colors, hex codes, RGB values, and ANSI-256 color codes.
- *
- * @param str - The string to colorize.
- * @param color - The color to apply.
- * @param type - Whether to apply the color to the foreground or background.
- * @returns The colorized string.
+ * Gets the ANSI style for a color.
  */
-export const colorize = (str, color, type) => {
+export const getStyle = (color, type) => {
     if (!color) {
-        return str;
+        return undefined;
     }
     if (isNamedColor(color)) {
         if (type === "foreground") {
-            return ansis[color](str);
+            return {
+                type: "ansi",
+                code: ansis[color].open,
+                endCode: ansis[color].close,
+            };
         }
         const methodName = `bg${color.charAt(0).toUpperCase() + color.slice(1)}`;
-        return ansis[methodName](str);
+        return {
+            type: "ansi",
+            code: ansis[methodName].open,
+            endCode: ansis[methodName].close,
+        };
     }
     if (color.startsWith("#")) {
-        return type === "foreground"
-            ? ansis.hex(color)(str)
-            : ansis.bgHex(color)(str);
+        const style = type === "foreground" ? ansis.hex(color) : ansis.bgHex(color);
+        return {
+            type: "ansi",
+            code: style.open,
+            endCode: style.close,
+        };
     }
     if (color.startsWith("ansi256")) {
         const matches = ansiRegex.exec(color);
         if (!matches) {
-            return str;
+            return undefined;
         }
         const value = Number(matches[1]);
-        return type === "foreground" ? ansis.fg(value)(str) : ansis.bg(value)(str);
+        const style = type === "foreground" ? ansis.fg(value) : ansis.bg(value);
+        return {
+            type: "ansi",
+            code: style.open,
+            endCode: style.close,
+        };
     }
     if (color.startsWith("rgb")) {
         const matches = rgbRegex.exec(color);
         if (!matches) {
-            return str;
+            return undefined;
         }
         const firstValue = Number(matches[1]);
         const secondValue = Number(matches[2]);
         const thirdValue = Number(matches[3]);
-        return type === "foreground"
-            ? ansis.rgb(firstValue, secondValue, thirdValue)(str)
-            : ansis.bgRgb(firstValue, secondValue, thirdValue)(str);
+        const style = type === "foreground"
+            ? ansis.rgb(firstValue, secondValue, thirdValue)
+            : ansis.bgRgb(firstValue, secondValue, thirdValue);
+        return {
+            type: "ansi",
+            code: style.open,
+            endCode: style.close,
+        };
+    }
+    return undefined;
+};
+export const colorize = (str, color, type) => {
+    const style = getStyle(color, type);
+    if (style) {
+        return style.code + str + style.endCode;
     }
     return str;
 };

package/lib/utils/render-background.d.ts

@@ -1,5 +1,5 @@
 import { type DOMNode } from "../core/dom.js";
-import { type Output } from "../core/output.js";
+import { type OutputLike } from "../core/output.js";
 /**
  * Renders the background color of a node to the output.
  *
@@ -8,4 +8,4 @@ import { type Output } from "../core/output.js";
  * @param node - The DOM node to render the background for.
  * @param output - The output instance to write to.
  */
-export declare const renderBackground: (x: number, y: number, node: DOMNode, output: Output) => void;
+export declare const renderBackground: (x: number, y: number, node: DOMNode, output: OutputLike) => void;

package/lib/utils/render-background.js

@@ -1,4 +1,4 @@
-import { colorize } from "./colorize.js";
+import { getStyle } from "./colorize.js";
 /**
  * Renders the background color of a node to the output.
  *
@@ -25,8 +25,9 @@ export const renderBackground = (x, y, node, output) => {
         return;
     }
     // Create background fill for each row
-    const backgroundLine = colorize(" ".repeat(contentWidth), node.style.backgroundColor, "background");
+    const style = getStyle(node.style.backgroundColor, "background");
+    const styles = style ? [style] : [];
     for (let row = 0; row < contentHeight; row++) {
-        output.write(x + leftBorderWidth, y + topBorderHeight + row, backgroundLine, { transformers: [] });
+        output.fill(x + leftBorderWidth, y + topBorderHeight + row, contentWidth, " ", 1, styles);
     }
 };

package/lib/utils/squash-text-nodes.d.ts

@@ -1,4 +1,9 @@
 import { type DOMElement } from "../core/dom.js";
+/**
+ * Advances the squash cache epoch.
+ * Cached results are valid only within one layout/render cycle.
+ */
+export declare const advanceSquashTextEpoch: () => number;
 /**
  * Consolidates multiple text nodes into a single string.
  * Useful for combining adjacent text nodes to minimize write operations.

package/lib/utils/squash-text-nodes.js

@@ -1,3 +1,13 @@
+const cache = new WeakMap();
+let currentEpoch = 0;
+/**
+ * Advances the squash cache epoch.
+ * Cached results are valid only within one layout/render cycle.
+ */
+export const advanceSquashTextEpoch = () => {
+    currentEpoch += 1;
+    return currentEpoch;
+};
 /**
  * Consolidates multiple text nodes into a single string.
  * Useful for combining adjacent text nodes to minimize write operations.
@@ -7,7 +17,11 @@
  * @returns The consolidated text string.
  */
 export const squashTextNodes = (node) => {
-    let text = "";
+    const cached = cache.get(node);
+    if (cached && cached.epoch === currentEpoch) {
+        return cached.text;
+    }
+    const parts = [];
     for (let index = 0; index < node.childNodes.length; index++) {
         const childNode = node.childNodes[index];
         if (childNode === undefined) {
@@ -30,7 +44,9 @@ export const squashTextNodes = (node) => {
                 nodeText = childNode.internal_transform(nodeText, index);
             }
         }
-        text += nodeText;
+        parts.push(nodeText);
     }
+    const text = parts.join("");
+    cache.set(node, { epoch: currentEpoch, text });
     return text;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinky",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "React for CLIs, re-imagined with the Taffy engine",
   "keywords": [
     "react",
@@ -32,6 +32,7 @@
   ],
   "scripts": {
     "test": "bun test",
+    "benchmark": "bun run benchmark/index.ts",
     "build": "tsc && npm run docs",
     "lint": "eslint src/**/*.ts",
     "prepublish": "npm run build",
@@ -82,6 +83,7 @@
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "husky": "^9.1.7",
+    "ink": "^6.7.0",
     "jiti": "^2.6.1",
     "lint-staged": "^16.2.7",
     "prettier": "^3.7.4",