ink - npm Package Compare versions

Comparing version 4.2.0 to 4.3.0

build/components/App.d.ts

 /// <reference types="node" resolution-mode="require"/>
-import { PureComponent, type ReactNode } from 'react';
+import React, { PureComponent, type ReactNode } from 'react';
 type Props = {
@@ -36,3 +36,3 @@ readonly children: ReactNode;
     isRawModeSupported(): boolean;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     componentDidMount(): void;
@@ -39,0 +39,0 @@ componentWillUnmount(): void;

build/components/ErrorOverview.d.ts

@@ -1,6 +0,6 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     readonly error: Error;
 };
-export default function ErrorOverview({ error }: Props): JSX.Element;
+export default function ErrorOverview({ error }: Props): React.JSX.Element;
 export {};

build/components/Newline.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 export type Props = {
@@ -13,2 +13,2 @@ /**
  */
-export default function Newline({ count }: Props): JSX.Element;
+export default function Newline({ count }: Props): React.JSX.Element;

build/components/Spacer.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 /**
@@ -6,2 +6,2 @@ * A flexible space that expands along the major axis of its containing layout.
  */
-export default function Spacer(): JSX.Element;
+export default function Spacer(): React.JSX.Element;

build/components/Static.d.ts

@@ -1,2 +0,2 @@
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { type Styles } from '../styles.js';
@@ -31,2 +31,2 @@ export type Props<T> = {
  */
-export default function Static<T>(props: Props<T>): JSX.Element;
+export default function Static<T>(props: Props<T>): React.JSX.Element;

build/components/Text.d.ts

@@ -1,2 +0,2 @@
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { type ForegroundColorName } from 'chalk';
@@ -49,2 +49,2 @@ import { type LiteralUnion } from 'type-fest';
  */
-export default function Text({ color, backgroundColor, dimColor, bold, italic, underline, strikethrough, inverse, wrap, children }: Props): JSX.Element | null;
+export default function Text({ color, backgroundColor, dimColor, bold, italic, underline, strikethrough, inverse, wrap, children }: Props): React.JSX.Element | null;

build/components/Transform.d.ts

@@ -1,2 +0,2 @@
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export type Props = {
@@ -15,2 +15,2 @@ /**
  */
-export default function Transform({ children, transform }: Props): JSX.Element | null;
+export default function Transform({ children, transform }: Props): React.JSX.Element | null;

build/devtools.js

@@ -0,1 +1,2 @@
+/* eslint-disable import/order */
 // eslint-disable-next-line import/no-unassigned-import
@@ -2,0 +3,0 @@ import './devtools-window-polyfill.js';

build/hooks/use-input.js

 import { useEffect } from 'react';
 import { isUpperCase } from 'is-upper-case';
 import parseKeypress, { nonAlphanumericKeys } from '../parse-keypress.js';
+import reconciler from '../reconciler.js';
 import useStdin from './use-stdin.js';
@@ -83,3 +84,6 @@ /**
             if (!(input === 'c' && key.ctrl) || !internal_exitOnCtrlC) {
-                inputHandler(input, key);
+                // @ts-expect-error TypeScript types for `batchedUpdates` require an argument, but React's codebase doesn't provide it and it works without it as exepected.
+                reconciler.batchedUpdates(() => {
+                    inputHandler(input, key);
+                });
             }
@@ -86,0 +90,0 @@ };

build/output.js

 import sliceAnsi from 'slice-ansi';
 import stringWidth from 'string-width';
 import widestLine from 'widest-line';
+import { styledCharsFromTokens, styledCharsToString, tokenize } from '@alcalzone/ansi-tokenize';
 export default class Output {
@@ -56,3 +57,12 @@ constructor(options) {
         for (let y = 0; y < this.height; y++) {
-            output.push(' '.repeat(this.width));
+            const row = [];
+            for (let x = 0; x < this.width; x++) {
+                row.push({
+                    type: 'char',
+                    value: ' ',
+                    fullWidth: false,
+                    styles: []
+                });
+            }
+            output.push(row);
         }
@@ -117,10 +127,22 @@ const clips = [];
                     }
-                    const width = stringWidth(line);
                     for (const transformer of transformers) {
                         line = transformer(line);
                     }
-                    output[y + offsetY] =
-                        sliceAnsi(currentLine, 0, x) +
-                            line +
-                            sliceAnsi(currentLine, x + width);
+                    const characters = styledCharsFromTokens(tokenize(line));
+                    let offsetX = x;
+                    for (const character of characters) {
+                        currentLine[offsetX] = character;
+                        // Some characters take up more than one column. In that case, the following
+                        // pixels need to be cleared to avoid printing extra characters
+                        const isWideCharacter = character.fullWidth || character.value.length > 1;
+                        if (isWideCharacter) {
+                            currentLine[offsetX + 1] = {
+                                type: 'char',
+                                value: '',
+                                fullWidth: false,
+                                styles: character.styles
+                            };
+                        }
+                        offsetX += isWideCharacter ? 2 : 1;
+                    }
                     offsetY++;
@@ -130,3 +152,9 @@ }
         }
-        const generatedOutput = output.map(line => line.trimEnd()).join('\n');
+        const generatedOutput = output
+            .map(line => {
+            // See https://github.com/vadimdemedes/ink/pull/564#issuecomment-1637022742
+            const lineWithoutEmptyItems = line.filter(item => item !== undefined);
+            return styledCharsToString(lineWithoutEmptyItems).trimEnd();
+        })
+            .join('\n');
         return {
@@ -133,0 +161,0 @@ output: generatedOutput,

build/reconciler.js

@@ -14,3 +14,2 @@ import process from 'node:process';
         await import('./devtools.js');
-        // eslint-disable-next-line @typescript-eslint/no-implicit-any-catch
     }
@@ -17,0 +16,0 @@ catch (error) {

build/render-border.js

 import cliBoxes from 'cli-boxes';
+import chalk from 'chalk';
 import colorize from './colorize.js';
@@ -14,2 +15,6 @@ const renderBorder = (x, y, node, output) => {
         const rightBorderColor = node.style.borderRightColor ?? node.style.borderColor;
+        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;
@@ -20,3 +25,3 @@ const showBottomBorder = node.style.borderBottom !== false;
         const contentWidth = width - (showLeftBorder ? 1 : 0) - (showRightBorder ? 1 : 0);
-        const topBorder = showTopBorder
+        let topBorder = showTopBorder
             ? colorize((showLeftBorder ? box.topLeft : '') +
@@ -26,2 +31,5 @@ box.top.repeat(contentWidth) +
             : undefined;
+        if (showTopBorder && dimTopBorderColor) {
+            topBorder = chalk.dim(topBorder);
+        }
         let verticalBorderHeight = height;
@@ -34,5 +42,11 @@ if (showTopBorder) {
         }
-        const leftBorder = (colorize(box.left, leftBorderColor, 'foreground') + '\n').repeat(verticalBorderHeight);
-        const rightBorder = (colorize(box.right, rightBorderColor, 'foreground') + '\n').repeat(verticalBorderHeight);
-        const bottomBorder = showBottomBorder
+        let leftBorder = (colorize(box.left, leftBorderColor, 'foreground') + '\n').repeat(verticalBorderHeight);
+        if (dimLeftBorderColor) {
+            leftBorder = chalk.dim(leftBorder);
+        }
+        let rightBorder = (colorize(box.right, rightBorderColor, 'foreground') + '\n').repeat(verticalBorderHeight);
+        if (dimRightBorderColor) {
+            rightBorder = chalk.dim(rightBorder);
+        }
+        let bottomBorder = showBottomBorder
             ? colorize((showLeftBorder ? box.bottomLeft : '') +
@@ -42,2 +56,5 @@ box.bottom.repeat(contentWidth) +
             : undefined;
+        if (showBottomBorder && dimBottomBorderColor) {
+            bottomBorder = chalk.dim(bottomBorder);
+        }
         const offsetY = showTopBorder ? 1 : 0;
@@ -44,0 +61,0 @@ if (topBorder) {

build/render.d.ts

 /// <reference types="node" resolution-mode="require"/>
-import { type ReactElement } from 'react';
+import type { ReactNode } from 'react';
 import Ink from './ink.js';
@@ -60,7 +60,6 @@ export type RenderOptions = {
 };
-type RenderFunction = <Props, K extends NodeJS.WriteStream | RenderOptions>(tree: ReactElement<Props>, options?: K) => Instance;
 /**
  * Mount a component and render the output.
  */
-declare const render: RenderFunction;
+declare const render: (node: ReactNode, options?: NodeJS.WriteStream | RenderOptions) => Instance;
 export default render;

build/styles.d.ts

@@ -193,2 +193,33 @@ import { type Boxes, type BoxStyle } from 'cli-boxes';
     /**
+     * Dim the border color.
+     * Shorthand for setting `borderTopDimColor`, `borderBottomDimColor`, `borderLeftDimColor` and `borderRightDimColor`.
+     *
+     * @default false
+     */
+    readonly borderDimColor?: boolean;
+    /**
+     * Dim the top border color.
+     *
+     * @default false
+     */
+    readonly borderTopDimColor?: boolean;
+    /**
+     * Dim the bottom border color.
+     *
+     * @default false
+     */
+    readonly borderBottomDimColor?: boolean;
+    /**
+     * Dim the left border color.
+     *
+     * @default false
+     */
+    readonly borderLeftDimColor?: boolean;
+    /**
+     * Dim the right border color.
+     *
+     * @default false
+     */
+    readonly borderRightDimColor?: boolean;
+    /**
      * Behavior for an element's overflow in both directions.
@@ -195,0 +226,0 @@ *

package.json

 {
 	"name": "ink",
-	"version": "4.2.0",
+	"version": "4.3.0",
 	"description": "React for CLI",
@@ -46,2 +46,3 @@ "license": "MIT",
 	"dependencies": {
+		"@alcalzone/ansi-tokenize": "^0.1.1",
 		"ansi-escapes": "^6.0.0",
@@ -106,3 +107,3 @@ "auto-bind": "^5.0.1",
 		"typescript": "^4.9.4",
-		"xo": "^0.53.0"
+		"xo": "^0.54.2"
 	},
@@ -185,3 +186,5 @@ "peerDependencies": {
 					"dot-notation": "off",
-					"react/boolean-prop-naming": "off"
+					"react/boolean-prop-naming": "off",
+					"unicorn/prefer-dom-node-remove": "off",
+					"unicorn/prefer-event-target": "off"
 				}
@@ -188,0 +191,0 @@ },

readme.md

@@ -94,2 +94,3 @@ [![](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)
 
+- [GitHub Copilot for CLI](https://githubnext.com/projects/copilot-cli) - Just say what you want the shell to do.
 - [Cloudflare's Wrangler](https://github.com/cloudflare/wrangler2) - The CLI for Cloudflare Workers.
@@ -132,2 +133,3 @@ - [Gatsby](https://www.gatsbyjs.org) - Gatsby is a modern web framework for blazing fast websites.
 - [ToDesktop CLI](https://www.todesktop.com/electron) - An all-in-one platform for building Electron apps.
+- [Walle](https://github.com/Pobepto/walle) - Full-featured crypto wallet for EVM networks.
 
@@ -1069,2 +1071,68 @@ ## Contents
 
+##### borderDimColor
+
+Type: `boolean`\
+Default: `false`
+
+Dim the border color.
+Shorthand for setting `borderTopDimColor`, `borderBottomDimColor`, `borderLeftDimColor` and `borderRightDimColor`.
+
+```jsx
+<Box borderStyle="round" borderDimColor>
+	<Text>Hello world</Text>
+</Box>
+```
+
+##### borderTopDimColor
+
+Type: `boolean`\
+Default: `false`
+
+Dim the top border color.
+
+```jsx
+<Box borderStyle="round" borderTopDimColor>
+	<Text>Hello world</Text>
+</Box>
+```
+
+##### borderBottomDimColor
+
+Type: `boolean`\
+Default: `false`
+
+Dim the bottom border color.
+
+```jsx
+<Box borderStyle="round" borderBottomDimColor>
+	<Text>Hello world</Text>
+</Box>
+```
+
+##### borderLeftDimColor
+
+Type: `boolean`\
+Default: `false`
+
+Dim the left border color.
+
+```jsx
+<Box borderStyle="round" borderLeftDimColor>
+	<Text>Hello world</Text>
+</Box>
+```
+
+##### borderRightDimColor
+
+Type: `boolean`\
+Default: `false`
+
+Dim the right border color.
+
+```jsx
+<Box borderStyle="round" borderRightDimColor>
+	<Text>Hello world</Text>
+</Box>
+```
+
 ##### borderTop
@@ -1071,0 +1139,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

262949

increased by2.34%

Lines of code

3615

increased by2.23%

Number of lines in readme file

2126

increased by3.3%

Worsened metrics

Dependency count

28

increased by3.7%

Dependency changes

• + Added@alcalzone/ansi-tokenize@^0.1.1

• + Added@alcalzone/ansi-tokenize@0.1.3(transitive)