@charmland/lipgloss

LipGloss.js

The lipgloss that you know and love, now in JavaScript.

[!WARNING] LipGloss.js is stll experimental.

Installation

npm i @charmland/lipgloss

Example

const { Table, TableData, Style, Color, List, Tree, Leaf, Bullet, RoundedEnumerator } = require("@charmland/lipgloss");

var s = new Style().foreground(Color("240")).render;
console.log(
  new Table()
    .wrap(false)
    .headers("Drink", "Description")
    .row("Bubble Tea", s("Milky"))
    .row("Milk Tea", s("Also milky"))
    .row("Actual milk", s("Milky as well"))
    .render(),
);

// TableData example - for more complex data management
const employeeData = new TableData(
  ["Employee ID", "Name", "Department"],
  ["001", "John Doe", "Engineering"],
  ["002", "Jane Smith", "Marketing"],
  ["003", "Mike Johnson", "Sales"]
);

console.log(
  new Table()
    .data(employeeData)
    .styleFunc((row, col) => {
      if (row === -1) {
        return new Style().foreground(Color("99")).bold(true);
      }
      return new Style().padding(0, 1);
    })
    .render()
);

// List example
const groceries = new List("Bananas", "Barley", "Cashews", "Milk")
  .enumerator(Bullet)
  .itemStyle(new Style().foreground(Color("255")));

console.log(groceries.render());

// Tree example with Leaf nodes
const makeupTree = new Tree()
  .root("⁜ Makeup")
  .child(
    "Glossier",
    "Fenty Beauty",
    new Tree().child(
      new Leaf("Gloss Bomb Universal Lip Luminizer"),
      new Leaf("Hot Cheeks Velour Blushlighter")
    ),
    new Leaf("Nyx"),
    new Leaf("Mac"),
    "Milk"
  )
  .enumerator(RoundedEnumerator)
  .enumeratorStyle(new Style().foreground(Color("63")).marginRight(1))
  .rootStyle(new Style().foreground(Color("35")))
  .itemStyle(new Style().foreground(Color("212")));

console.log(makeupTree.render());

TableData

The TableData class provides a more structured way to manage table data compared to using individual rows. It's particularly useful when you need to:

• Build tables dynamically
• Access individual cells programmatically
• Manage large datasets
• Separate data logic from presentation

Basic Usage

const { Table, TableData, Style, Color } = require("@charmland/lipgloss");

// Create TableData with initial rows
const data = new TableData(
  ["Name", "Age", "City"],
  ["Alice", "25", "New York"],
  ["Bob", "30", "San Francisco"]
);

// Or build it incrementally
const data2 = new TableData()
  .append(["Product", "Price"])
  .append(["Laptop", "$999"])
  .append(["Mouse", "$25"]);

// Use with Table
const table = new Table()
  .data(data)
  .styleFunc((row, col) => {
    if (row === -1) return new Style().bold(true); // Header
    return new Style().padding(0, 1);
  })
  .render();

TableData Methods

• new TableData(...rows) - Create with optional initial rows
• .append(row) - Add a single row (array of strings)
• .rows(...rows) - Add multiple rows at once
• .at(row, col) - Get value at specific position
• .rowCount() - Get number of rows
• .columnCount() - Get number of columns

See examples/table-data.js for more comprehensive examples.

Environment Variables

You can control debug output using environment variables:

• LIPGLOSS_DEBUG=true - Enable all lipgloss debug output
• DEBUG=lipgloss - Enable lipgloss debug output (standard debug pattern)
• DEBUG=* - Enable all debug output

Example:

node your-script.js

Compability

Lipgloss in JavaScript it's experimental and a lot of existing functionalities are not still ported to JavaScript.

Size (100%)

Function	Status
Width	✅
Height	✅
Size	✅

Color (100%)

Function	Status
Color	✅
NoColor	✅
Complete	✅
LightDark	✅
RGBA	✅

Borders (100%)

Function	Status
NormalBorder	✅
RoundedBorder	✅
BlockBorder	✅
OuterHalfBlockBorder	✅
InnerHalfBlockBorder	✅
ThickBorder	✅
DoubleBorder	✅
HiddenBorder	✅
MarkdownBorder	✅
ASCIIBorder	✅

Style (97.62%)

Function	Status
Foreground	✅
Background	✅
Width	✅
Height	✅
Align	✅
AlignHorizontal	✅
AlignVertical	✅
Padding	✅
PaddingLeft	✅
PaddingRight	✅
PaddingTop	✅
PaddingBottom	✅
ColorWhitespace	✅
Margin	✅
MarginLeft	✅
MarginRight	✅
MarginTop	✅
MarginBottom	✅
MarginBackground	✅
Border	✅
BorderStyle	✅
SetBorderRight	✅
SetBorderLeft	✅
SetBorderTop	✅
SetBorderBottom	✅
BorderForeground	✅
BorderTopForeground	✅
BorderRightForeground	✅
BorderBottomForeground	✅
BorderLeftForeground	✅
BorderBackground	✅
BorderTopBackground	✅
BorderRightBackground	✅
BorderBottomBackground	✅
BorderLeftBackground	✅
Inline	✅
MaxWidth	✅
MaxHeight	✅
TabWidth	✅
UnderlineSpaces	✅
Underline	✅
Reverse	✅
SetString	✅
Inherit	✅
Faint	✅
Italic	✅
Strikethrough	✅
StrikethroughSpaces	✅
Transform	⏳

Table (100%)

Function	Status
table.New	✅
table.Rows	✅
table.Headers	✅
table.Render	✅
table.ClearRows	✅
table.BorderTop	✅
table.BorderBottom	✅
table.BorderLeft	✅
table.BorderRight	✅
table.BorderHeader	✅
table.BorderColumn	✅
table.BorderRow	✅
table.Width	✅
table.Height	✅
table.Offset	✅
table.String	✅
table.StyleFunc	✅
table.Data	✅
table.Border	✅
table.BorderStyle	✅

List (100%)

Function	Status
Hidden	✅
Hide	✅
Offset	✅
Value	✅
String	✅
Indenter	✅
ItemStyle	✅
ItemStyleFunc	✅
EnumeratorStyle	✅
EnumeratorStyleFunc	✅
Item	✅
Items	✅
Enumerator	✅

Tree (95%)

Function	Status
tree.New	✅
tree.Root	✅
tree.Child	✅
tree.Hidden	✅
tree.Hide	✅
tree.SetHidden	✅
tree.Offset	✅
tree.Value	✅
tree.SetValue	✅
tree.String	✅
tree.Render	✅
tree.EnumeratorStyle	✅
tree.EnumeratorStyleFunc	✅
tree.ItemStyle	✅
tree.ItemStyleFunc	✅
tree.RootStyle	✅
tree.Enumerator	✅
tree.Indenter	✅
tree.DefaultEnumerator	✅
tree.RoundedEnumerator	✅
tree.DefaultIndenter	✅
NewLeaf	✅
Leaf.Value	✅
Leaf.SetValue	✅
Leaf.Hidden	✅
Leaf.SetHidden	✅
Leaf.String	✅
Custom Enumerators	⏳
Custom Indenters	⏳

Join (100%)

Function	Status
JoinHorizontal	✅
JoinVertical	✅

Position (100%)

Function	Status
Center	✅
Right	✅
Bottom	✅
Top	✅
Left	✅
Place	✅

Query (50%)

Function	Status
BackgroundColor	⏳
HasDarkBackground	✅

Align (0%)

Function	Status
EnableLegacyWindowsANSI	⏳

Contributing

We'd love to have you contribute! Please see the contributing guidelines for more information.

Testing

The JavaScript bindings include a comprehensive test suite:

# From bindings directory
npm test                      # Run all tests
npm run test:simple           # Basic table functionality
npm run test:comprehensive    # Complete TableData tests
npm run examples              # Showcase functionality

# Or from examples directory
cd examples && npm test

Tests are located in examples/tests/ and cover:

• Basic table functionality
• TableData operations
• Style functions
• Unicode handling (with known limitations)

See contributing.

Feedback

We’d love to hear your thoughts on this project. Feel free to drop us a note!

• Twitter
• The Fediverse
• Discord

License

MIT

Part of Charm.

Charm热爱开源 • Charm loves open source