drop cjs

.github/workflows/ci.yaml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [12, 16, 18]
+        node: [16, 18]
     steps:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
@@ -21,7 +21,7 @@ jobs:
         env:
           PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true
       - run: npm test
-      - run: npm run check
+      - run: npm run lint
   windows:
     runs-on: windows-latest
     steps:
@@ -53,19 +53,4 @@ jobs:
         with:
           node-version: 14
       - run: npm install
-      - run: npm run test:esm
-  deno:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 14
-      - run: npm install
-      - run: npm run compile
-      - uses: denolib/setup-deno@v2
-        with:
-          deno-version: v1.x
-      - run: |
-          deno --version
-          deno test test/deno/cliui-test.ts
+      - run: npm run test

README.md

@@ -1,16 +1,15 @@
 # cliui
 
-![ci](https://github.com/yargs/cliui/workflows/ci/badge.svg)
-[![NPM version](https://img.shields.io/npm/v/cliui.svg)](https://www.npmjs.com/package/cliui)
-[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
-![nycrc config on GitHub](https://img.shields.io/nycrc/yargs/cliui)
-
 easily create complex multi-column command-line-interfaces.
 
 ## Example
 
+> **Note** This package is ESM only.
+
 ```js
-const ui = require('cliui')()
+import cliui from '@topcli/cli';
+
+const ui = cliui();
 
 ui.div('Usage: $0 [command] [options]')
 
@@ -40,33 +39,7 @@ ui.div(
 console.log(ui.toString())
 ```
 
-## Deno/ESM Support
-
-As of `v7` `cliui` supports [Deno](https://github.com/denoland/deno) and
-[ESM](https://nodejs.org/api/esm.html#esm_ecmascript_modules):
-
-```typescript
-import cliui from "https://deno.land/x/cliui/deno.ts";
-
-const ui = cliui({})
-
-ui.div('Usage: $0 [command] [options]')
-
-ui.div({
-  text: 'Options:',
-  padding: [2, 0, 1, 0]
-})
-
-ui.div({
-  text: "-f, --file",
-  width: 20,
-  padding: [0, 4, 0, 4]
-})
-
-console.log(ui.toString())
-```
-
-<img width="500" src="screenshot.png">
+<img width="500" src="public/screenshot.png">
 
 ## Layout DSL
 
@@ -82,7 +55,9 @@ object:
 **as an example...**
 
 ```js
-var ui = require('./')({
+import cliui from '@topcli/cli';
+
+const ui = cliui({
   width: 60
 })
 
@@ -105,10 +80,6 @@ Usage: node ./bin/foo.js
 
 ## Methods
 
-```js
-cliui = require('cliui')
-```
-
 ### cliui({width: integer})
 
 Specify the maximum width of the UI being generated.

index.mjs → index.js

@@ -1,13 +1,18 @@
-// Bootstrap cliui with CommonJS dependencies:
 import { cliui } from './build/lib/index.js'
-import { wrap, stripAnsi } from './build/lib/string-utils.js'
+import wrap from 'wrap-ansi'
+import stripAnsi from 'strip-ansi'
+
+import  wcswidth from '@topcli/wcwidth'
 
 export default function ui (opts) {
   return cliui(opts, {
     stringWidth: (str) => {
-      return [...str].length
+      return wcswidth(stripAnsi(str))
     },
     stripAnsi,
-    wrap
+
+
+
+    wrap,
   })
 }

lib/index.ts

@@ -108,7 +108,7 @@ export class UI {
     rows.forEach(columns => {
       this.div(...columns.map((r, i) => {
         return {
-          text: r.trim(),
+          text: r,
           padding: this.measurePadding(r),
           width: (i === 0 && columns.length > 1) ? leftColumnWidth : undefined
         } as Column
@@ -152,11 +152,10 @@ export class UI {
       rrow.forEach((col: string, c: number) => {
         const { width } = row[c] // the width with padding.
         const wrapWidth = this.negatePadding(row[c]) // the width without padding.
-
         let ts = col // temporary string used during alignment/padding.
-
-        if (wrapWidth > mixin.stringWidth(col)) {
-          ts += ' '.repeat(wrapWidth - mixin.stringWidth(col))
+        const strWidth = mixin.stringWidth(col.trim())
+        if (wrapWidth > strWidth) {
+          ts += ' '.repeat(wrapWidth - strWidth)
         }
 
         // align the string within its column.
@@ -167,7 +166,6 @@ export class UI {
             ts += ' '.repeat((width || 0) - mixin.stringWidth(ts) - 1)
           }
         }
-
         // apply border and padding to string.
         const padding = row[c].padding || [0, 0, 0, 0]
         if (padding[left]) {
@@ -204,7 +202,7 @@ export class UI {
     const match = source.match(/^ */)
     const leadingWhitespace = match ? match[0].length : 0
     const target = previousLine.text
-    const targetTextWidth = mixin.stringWidth(target.trimRight())
+    const targetTextWidth = mixin.stringWidth(target)
 
     if (!previousLine.span) {
       return source
@@ -222,8 +220,7 @@ export class UI {
     }
 
     previousLine.hidden = true
-
-    return target.trimRight() + ' '.repeat(leadingWhitespace - targetTextWidth) + source.trimLeft()
+    return target + ' '.repeat(leadingWhitespace - targetTextWidth) + source
   }
 
   private rasterize (row: ColumnArray) {
@@ -237,7 +234,7 @@ export class UI {
       // leave room for left and right padding.
       col.width = widths[c]
       if (this.wrap) {
-        wrapped = mixin.wrap(col.text, this.negatePadding(col), { hard: true }).split('\n')
+        wrapped = mixin.wrap(col.text, this.negatePadding(col), { hard: true, trim: true }).split('\n')
       } else {
         wrapped = col.text.split('\n')
       }