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%)

Color (100%)

Borders (100%)

Style (97.62%)

Table (100%)

List (100%)

Tree (95%)

Join (100%)

Position (100%)

Query (50%)

Align (0%)

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