console-toolkit 1.1.1 → 1.2.1

package/README.md

@@ -89,6 +89,8 @@ BSD 3-Clause License
 
 ## Release history
 
-- 1.1.1: *Minor bugfixes in `Table`, some improvements, updated deps.*
-- 1.1.0: *Minor improvements, enhanced `Writer` and `Updater`.*
-- 1.0.0: *Initial release.*
+- 1.2.1 *Added support for `Bun.stringWidth()`.*
+- 1.2.0 *Refactored `strings`.*
+- 1.1.1 *Minor bugfixes in `Table`, some improvements, updated deps.*
+- 1.1.0 *Minor improvements, enhanced `Writer` and `Updater`.*
+- 1.0.0 *Initial release.*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "console-toolkit",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "Toolkit to produce a fancy console output (boxes, tables, charts, colors).",
   "type": "module",
   "main": "src/index.js",
@@ -41,6 +41,10 @@
   ],
   "author": "Eugene Lazutkin <eugene.lazutkin@gmail.com> (https://www.lazutkin.com/)",
   "license": "BSD-3-Clause",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/uhop"
+  },
   "bugs": {
     "url": "https://github.com/uhop/console-toolkit/issues"
   },
@@ -54,6 +58,8 @@
     ]
   },
   "devDependencies": {
+    "emoji-regex": "^10.3.0",
+    "get-east-asian-width": "^1.2.0",
     "tape-six": "^0.9.6"
   }
 }

package/src/box.js

@@ -78,8 +78,8 @@ export class Box {
     return new Box(this);
   }
 
-  clip(width, includeLastCommand) {
-    return new Box(clipStrings(this.box, width, includeLastCommand), true);
+  clip(width, options) {
+    return Box.make(clipStrings(this.box, width, options));
   }
 
   // padding

package/src/output/updater.js

@@ -28,14 +28,23 @@ export class Updater {
   }
 
   startRefreshing(ms = 100) {
-    if (this.intervalHandle || this.isDone || !this.writer.isTTY) return;
+    if (this.intervalHandle || this.isDone || !this.writer.isTTY) return this;
     this.intervalHandle = setInterval(this.update.bind(this), ms);
+    return this;
   }
 
   stopRefreshing() {
-    if (!this.intervalHandle) return;
+    if (!this.intervalHandle) return this;
     clearInterval(this.intervalHandle);
     this.intervalHandle = null;
+    return this;
+  }
+
+  reset() {
+    this.stopRefreshing();
+    this.isDone = false;
+    this.lastHeight = 0;
+    return this;
   }
 
   getFrame(state, ...args) {

package/src/panel.js

@@ -10,6 +10,8 @@ import {
   optimize,
   toState
 } from './ansi/sgr-state.js';
+import parse from './strings/parse.js';
+import split, {size} from './strings/split.js';
 import Box from './box.js';
 import {addAliases} from './meta.js';
 
@@ -45,36 +47,15 @@ export class Panel {
       break main;
     }
 
-    const {emptySymbol = '\x07'} = options || {},
-      panel = new Panel(s.width, s.height);
-
-    for (let i = 0, n = s.height; i < n; ++i) {
-      const row = s.box[i],
-        panelRow = panel.box[i];
-      let start = 0,
-        pos = 0,
-        state = {};
-      matchCsi.lastIndex = 0;
-      for (const match of row.matchAll(matchCsi)) {
-        const str = [...row.substring(start, match.index)];
-        for (let j = 0; j < str.length; ++j) {
-          panelRow[pos++] = str[j] === emptySymbol ? null : {symbol: str[j], state};
-        }
-        start = match.index + match[0].length;
-        if (match[3] !== 'm') continue;
-        state = addCommandsToState(state, match[1].split(';'));
-      }
-      const str = [...row.substring(start)];
-      for (let j = 0; j < str.length; ++j) {
-        panelRow[pos++] = str[j] === emptySymbol ? null : {symbol: str[j], state};
-      }
-    }
-
+    const panel = new Panel(s.width, s.height);
+    panel.put(0, 0, s, options);
     return panel;
   }
 
-  toStrings({emptySymbol = ' ', emptyState = RESET_STATE} = {}) {
+  toStrings(options = {}) {
     if (!this.height || !this.width) return Box.makeBlank(this.width, this.height);
+
+    let {emptySymbol = ' ', emptyState = RESET_STATE} = options;
     emptyState = toState(emptyState);
 
     const s = new Array(this.height),
@@ -86,8 +67,9 @@ export class Panel {
         initState = {},
         state = initState;
       for (let j = 0; j < this.width; ++j) {
-        const cell = panelRow[j] || emptyCell,
-          newState = combineStates(state, cell.state),
+        const cell = panelRow[j] || emptyCell;
+        if (cell.ignore) continue;
+        const newState = combineStates(state, cell.state),
           commands = stateTransition(state, newState);
         row += stringifyCommands(commands) + cell.symbol;
         state = newState;
@@ -187,7 +169,7 @@ export class Panel {
     return this;
   }
 
-  put(x, y, text, emptySymbol = '\x07') {
+  put(x, y, text, options = {}) {
     if (text instanceof Panel) return this.copyFrom(x, y, text.width, text.height, text);
 
     // normalize arguments
@@ -203,43 +185,50 @@ export class Panel {
     if (y >= this.height) return this;
     if (y + height > this.height) height = this.height - y;
 
+    const {emptySymbol = '\x07'} = options;
+
     // copy characters
     let state = {};
     for (let i = 0; i < height; ++i) {
       const row = this.box[y + i],
         s = box.box[i];
-      let start = 0,
-        pos = 0;
+      let pos = 0;
       matchCsi.lastIndex = 0;
-      for (const match of s.matchAll(matchCsi)) {
-        const str = [...s.substring(start, match.index)];
-        for (let j = 0; j < str.length; ++j, ++pos) {
+      for (const {string, match} of parse(s, matchCsi)) {
+        const {graphemes} = split(string, options);
+        for (const grapheme of graphemes) {
           if (x + pos >= row.length) break;
-          const cell = row[x + pos];
-          row[x + pos] =
-            str[j] === emptySymbol ? null : {symbol: str[j], state: cell ? combineStates(cell.state, state) : state};
+          if (grapheme.symbol === emptySymbol) {
+            row[x + pos] = null;
+          } else {
+            const cell = row[x + pos];
+            row[x + pos] = {
+              symbol: grapheme.symbol,
+              state: cell && !cell.ignore ? combineStates(cell.state, state) : state
+            };
+          }
+          ++pos;
+          if (grapheme.width === 2) {
+            if (x + pos < row.length) {
+              row[x + pos] = {ignore: true};
+              ++pos;
+            } else {
+              row[x + pos - 1] = null;
+            }
+          }
         }
-        start = match.index + match[0].length;
-        if (match[3] !== 'm') continue;
-        state = addCommandsToState(state, match[1].split(';'));
-      }
-      const str = [...s.substring(start)];
-      for (let j = 0; j < str.length; ++j, ++pos) {
-        if (x + pos >= row.length) break;
-        const cell = row[x + pos];
-        row[x + pos] =
-          str[j] === emptySymbol ? null : {symbol: str[j], state: cell ? combineStates(cell.state, state) : state};
+        if (match && match[3] === 'm') state = addCommandsToState(state, match[1].split(';'));
       }
       if (x + pos < row.length) {
         const cell = row[x + pos];
-        if (cell) row[x + pos] = {symbol: cell.symbol, state: combineStates(state, cell.state)};
+        if (cell && !cell.ignore) row[x + pos] = {symbol: cell.symbol, state: combineStates(state, cell.state)};
       }
     }
 
     return this;
   }
 
-  applyFn(x, y, width, height, fn) {
+  applyFn(x, y, width, height, fn, options) {
     // normalize arguments
 
     if (typeof x == 'function') {
@@ -265,16 +254,27 @@ export class Panel {
     for (let i = 0; i < height; ++i) {
       const row = this.box[y + i];
       for (let j = 0; j < width; ++j) {
-        const cell = row[x + j],
-          newCell = fn(x + j, y + i, cell);
-        if (newCell !== undefined) row[x + j] = newCell;
+        const cell = row[x + j];
+        if (cell?.ignore) continue;
+        const newCell = fn(x + j, y + i, cell);
+        if (newCell !== undefined) {
+          if (cell) {
+            const symbolWidth = size(cell.symbol, options);
+            if (symbolWidth > 1 && x + j + 1 < row.length) row[x + j + 1] = null;
+          }
+          if (newCell) {
+            const symbolWidth = size(newCell.symbol, options);
+            if (symbolWidth > 1 && x + j + 1 < row.length) row[x + j + 1] = {ignore: true};
+          }
+          row[x + j] = newCell;
+        }
       }
     }
 
     return this;
   }
 
-  fill(x, y, width, height, symbol, state = {}) {
+  fill(x, y, width, height, symbol, state = {}, options) {
     if (typeof x === 'string') {
       symbol = x;
       state = y || {};
@@ -290,7 +290,7 @@ export class Panel {
     } else {
       state = toState(state);
     }
-    return this.applyFn(x, y, width, height, () => ({symbol, state}));
+    return this.applyFn(x, y, width, height, () => ({symbol, state}), options);
   }
 
   fillState(x, y, width, height, options) {
@@ -309,7 +309,14 @@ export class Panel {
     } else {
       state = toState(state);
     }
-    return this.applyFn(x, y, width, height, (x, y, cell) => ({symbol: cell ? cell.symbol : emptySymbol, state}));
+    return this.applyFn(
+      x,
+      y,
+      width,
+      height,
+      (x, y, cell) => ({symbol: cell ? cell.symbol : emptySymbol, state}),
+      options
+    );
   }
 
   fillNonEmptyState(x, y, width, height, options) {
@@ -328,7 +335,7 @@ export class Panel {
     } else {
       state = toState(state);
     }
-    return this.applyFn(x, y, width, height, (x, y, cell) => cell && {symbol: cell.symbol, state});
+    return this.applyFn(x, y, width, height, (x, y, cell) => cell && {symbol: cell.symbol, state}, options);
   }
 
   combineStateBefore(x, y, width, height, options) {
@@ -347,10 +354,16 @@ export class Panel {
     } else {
       state = toState(state);
     }
-    return this.applyFn(x, y, width, height, (x, y, cell) =>
-      cell
-        ? {symbol: cell.symbol, state: combineStates(state, cell.state)}
-        : {symbol: emptySymbol, state: combineStates(state, emptyState)}
+    return this.applyFn(
+      x,
+      y,
+      width,
+      height,
+      (x, y, cell) =>
+        cell
+          ? {symbol: cell.symbol, state: combineStates(state, cell.state)}
+          : {symbol: emptySymbol, state: combineStates(state, emptyState)},
+      options
     );
   }
 
@@ -370,14 +383,20 @@ export class Panel {
     } else {
       state = toState(state);
     }
-    return this.applyFn(x, y, width, height, (x, y, cell) =>
-      cell
-        ? {symbol: cell.symbol, state: combineStates(cell.state, state)}
-        : {symbol: emptySymbol, state: combineStates(emptyState, state)}
+    return this.applyFn(
+      x,
+      y,
+      width,
+      height,
+      (x, y, cell) =>
+        cell
+          ? {symbol: cell.symbol, state: combineStates(cell.state, state)}
+          : {symbol: emptySymbol, state: combineStates(emptyState, state)},
+      options
     );
   }
 
-  clear(x, y, width, height) {
+  clear(x, y, width, height, options) {
     // normalize arguments
     if (typeof x != 'number') {
       x = y = 0;
@@ -394,7 +413,7 @@ export class Panel {
       height = this.height;
     }
 
-    return this.applyFn(x, y, width, height, () => null);
+    return this.applyFn(x, y, width, height, () => null, options);
   }
 
   padLeft(n) {

package/src/strings/clip.js

@@ -0,0 +1,31 @@
+import parse, {matchCsiNoGroups} from './parse.js';
+import {split} from './split.js';
+
+export const clip = (s, width, options = {}) => {
+  const {includeLastCommand = false, matcher = matchCsiNoGroups} = options;
+
+  let counter = 0;
+  for (const {start, string, match} of parse(s, matcher)) {
+    if (counter >= width)
+      return match ? s.substring(0, match.index + (includeLastCommand ? match[0].length : 0)) : s.substring(0, start);
+    const prev = split(string, options),
+      newCounter = counter + prev.width;
+    if (newCounter === width)
+      return match ? s.substring(0, match.index + (includeLastCommand ? match[0].length : 0)) : s;
+    if (newCounter < width) {
+      counter = newCounter;
+      continue;
+    }
+    let result = '';
+    for (const grapheme of prev.graphemes) {
+      if (counter + grapheme.width > width) break;
+      result += grapheme.symbol;
+      counter += grapheme.width;
+    }
+    return s.substring(0, start) + result;
+  }
+
+  return s;
+};
+
+export default clip;

package/src/strings/parse.js

@@ -0,0 +1,16 @@
+export const matchCsiNoGroups = /\x1B\[[\x30-\x3F]*[\x20-\x2F]*[\x40-\x7E]/g;
+export const matchCsiNoSgrNoGroups = /\x1B\[[\x30-\x3F]*[\x20-\x2F]*[\x40-\x6C\x6E-\x7E]/g;
+
+export function* parse(s, matcher = matchCsiNoGroups) {
+  s = String(s);
+  let start = 0;
+  matcher.lastIndex = 0;
+  for (const match of s.matchAll(matcher)) {
+    const string = s.substring(start, match.index);
+    yield {start, string, match};
+    start = match.index + match[0].length;
+  }
+  yield {start, string: s.substring(start), match: null};
+}
+
+export default parse;

package/src/strings/split.js

@@ -0,0 +1,109 @@
+// Loosely adapted from https://www.npmjs.com/package/string-width by
+// [Sindre Sorhus](https://www.npmjs.com/~sindresorhus) under the MIT license.
+
+let emojiRegex = null,
+  eastAsianWidth = null;
+if (!globalThis.Bun) {
+  try {
+    emojiRegex = (await import('emoji-regex')).default();
+  } catch (error) {
+    // squelch
+  }
+  try {
+    eastAsianWidth = (await import('get-east-asian-width')).eastAsianWidth;
+  } catch (error) {
+    // squelch
+  }
+}
+
+const segmenter = new Intl.Segmenter();
+
+export const split = (s, options = {}) => {
+  s = String(s);
+  if (!s) return {graphemes: [], width: 0};
+
+  const {ignoreControlSymbols = false, ambiguousAsWide = false} = options,
+    eastAsianWidthOptions = {ambiguousAsWide},
+    bunStringWidthOptions = {ambiguousAsNarrow: !ambiguousAsWide};
+
+  const graphemes = [];
+  let width = 0;
+  for (const {segment} of segmenter.segment(s)) {
+    const codePoint = segment.codePointAt(0);
+    // Control characters: C0, C1
+    if (ignoreControlSymbols && (codePoint < 0x20 || (codePoint >= 0x7f && codePoint <= 0x9f))) continue;
+    // Combining characters
+    if (
+      (codePoint >= 0x300 && codePoint <= 0x36f) ||
+      (codePoint >= 0x1ab0 && codePoint <= 0x1aff) ||
+      (codePoint >= 0x1dc0 && codePoint <= 0x1dff) ||
+      (codePoint >= 0x20d0 && codePoint <= 0x20ff) ||
+      (codePoint >= 0xfe20 && codePoint <= 0xfe2f)
+    ) {
+      if (graphemes.length) graphemes[graphemes.length - 1].symbol += segment;
+      continue;
+    }
+    if (globalThis.Bun) {
+      const w = Bun.stringWidth(segment, bunStringWidthOptions);
+      graphemes.push({symbol: segment, width: w});
+      width += w;
+      continue;
+    }
+    if (emojiRegex && ((emojiRegex.lastIndex = 0), emojiRegex.test(segment))) {
+      graphemes.push({symbol: segment, width: 2});
+      width += 2;
+      continue;
+    }
+    if (eastAsianWidth) {
+      const w = eastAsianWidth(codePoint, eastAsianWidthOptions);
+      graphemes.push({symbol: segment, width: w});
+      width += w;
+      continue;
+    }
+    graphemes.push({symbol: segment, width: 1});
+    ++width;
+  }
+  return {graphemes, width};
+};
+
+export const size = (s, options = {}) => {
+  s = String(s);
+  if (!s) return 0;
+
+  const {ignoreControlSymbols = false, ambiguousAsWide = false} = options,
+    eastAsianWidthOptions = {ambiguousAsWide},
+    bunStringWidthOptions = {ambiguousAsNarrow: !ambiguousAsWide};
+
+  let width = 0;
+  for (const {segment} of segmenter.segment(s)) {
+    const codePoint = segment.codePointAt(0);
+    // Control characters: C0, C1
+    if (ignoreControlSymbols && (codePoint < 0x20 || (codePoint >= 0x7f && codePoint <= 0x9f))) continue;
+    // Combining characters
+    if (
+      (codePoint >= 0x300 && codePoint <= 0x36f) ||
+      (codePoint >= 0x1ab0 && codePoint <= 0x1aff) ||
+      (codePoint >= 0x1dc0 && codePoint <= 0x1dff) ||
+      (codePoint >= 0x20d0 && codePoint <= 0x20ff) ||
+      (codePoint >= 0xfe20 && codePoint <= 0xfe2f)
+    ) {
+      continue;
+    }
+    if (globalThis.Bun) {
+      width += Bun.stringWidth(segment, bunStringWidthOptions);
+      continue;
+    }
+    if (emojiRegex && ((emojiRegex.lastIndex = 0), emojiRegex.test(segment))) {
+      width += 2;
+      continue;
+    }
+    if (eastAsianWidth) {
+      width += eastAsianWidth(codePoint, eastAsianWidthOptions);
+      continue;
+    }
+    ++width;
+  }
+  return width;
+};
+
+export default split;

package/src/strings.js

@@ -1,49 +1,20 @@
-export const matchCsiNoGroups = /\x1B\[[\x30-\x3F]*[\x20-\x2F]*[\x40-\x7E]/g;
-export const matchCsiNoSgrNoGroups = /\x1B\[[\x30-\x3F]*[\x20-\x2F]*[\x40-\x6C\x6E-\x7E]/g;
+import {size} from './strings/split.js';
+import parse, {matchCsiNoGroups, matchCsiNoSgrNoGroups} from './strings/parse.js';
+import clip from './strings/clip.js';
 
-export const getLength = (s, matcher = matchCsiNoGroups) => {
-  s = String(s);
-  let counter = 0,
-    start = 0;
-  matcher.lastIndex = 0;
-  for (const match of s.matchAll(matcher)) {
-    counter += [...s.substring(start, match.index)].length;
-    start = match.index + match[0].length;
+export const getLength = (s, matcher) => {
+  let counter = 0;
+  for (const {string} of parse(s, matcher)) {
+    counter += size(string);
   }
-  counter += [...s.substring(start)].length;
   return counter;
 };
 
-export const getMaxLength = (strings, matcher = matchCsiNoGroups) =>
-  Math.max(0, ...strings.map(s => getLength(s, matcher)));
+export const getMaxLength = (strings, matcher) =>
+  strings.reduce((acc, s) => Math.max(acc, getLength(s, matcher)), 0);
 
-export const clip = (s, width, includeLastCommand, matcher = matchCsiNoGroups) => {
-  s = String(s);
-  let counter = 0,
-    start = 0;
-  matcher.lastIndex = 0;
-  for (const match of s.matchAll(matcher)) {
-    if (counter >= width) return s.substring(0, match.index + (includeLastCommand ? match[0].length : 0));
-    const prev = [...s.substring(start, match.index)];
-    counter += prev.length;
-    if (includeLastCommand ? counter > width : counter >= width) {
-      const diff = width - counter,
-        end = start + (diff ? prev.slice(0, prev.length + diff).join('').length : prev.length);
-      return s.substring(0, end);
-    }
-    start = match.index + match[0].length;
-  }
-  if (counter >= width) return s.substring(0, start);
-  const prev = [...s.substring(start)];
-  if (counter + prev.length > width) {
-    const end = start + prev.slice(0, width - counter).join('').length;
-    return s.substring(0, end);
-  }
-  return s; // unchanged
-};
-
-export const clipStrings = (strings, width, includeLastCommand, matcher = matchCsiNoGroups) =>
-  strings.map(s => clip(s, width, includeLastCommand, matcher));
+export const clipStrings = (strings, width, options) =>
+  strings.map(s => clip(s, width, options));
 
 export const toStrings = s => {
   main: for (;;) {
@@ -70,3 +41,5 @@ export const toStrings = s => {
   }
   return [];
 };
+
+export {clip, matchCsiNoGroups, matchCsiNoSgrNoGroups};