undent: решение проблемы с отступами в многострочных строках

TL;DR

Библиотека undent решает классическую проблему форматирования многострочных строк в JavaScript/TypeScript, убирая лишние отступы и сохраняя читаемость кода. Это zero-dependency решение работает в Node, Deno и Bun, предлагая простой API для выравнивания сложных строковых конструкций.

Введение: проблема многострочных строк

Каждый senior frontend-разработчик сталкивался с неочевидным поведением шаблонных литералов при работе с многострочным текстом. Проблема возникает, когда мы хотим сохранить красивый отступ в коде, но не хотим, чтобы эти отступы попали в итоговую строку.

Рассмотрим классический пример:

function getTemplate() {
  return `
    <div>
      <p>Hello world</p>
    </div>
  `;
}

В результате мы получаем нежелательные отступы в начале каждой строки. undent решает эту проблему элегантно и предсказуемо.

Основная функциональность undent

Базовое использование

Установка:

npm install @okikio/undent
# или
yarn add @okikio/undent

Пример использования:

import { undent } from "@okikio/undent";

const message = undent`
  Hello,
    World!
`;

console.log(message);
// Вывод:
// Hello,
//   World!

Работа с интерполяцией

undent корректно обрабатывает интерполированные значения:

const name = "Alice";
const greeting = undent`
  Hello, ${name}!
    Welcome to our platform.
`;

// Результат:
// Hello, Alice!
//   Welcome to our platform.

Метод align()

Для сложных сценариев, где нужно сохранить относительное позиционирование строк:

import { align } from "@okikio/undent";

const items = "- alpha\n- beta\n- gamma";
console.log(undent`list: ${align(items)} end`);
// list:
//   - alpha
//   - beta
//   - gamma
// end

Метод embed()

Полезен для встраивания SQL, GraphQL и других DSL:

import { embed } from "@okikio/undent";

const sql = `
  SELECT id, name
  FROM users
  WHERE active = true
`;

console.log(undent`query: ${embed(sql)}`);
// query:
//   SELECT id, name
//   FROM users
//   WHERE active = true

Практическое применение

1. Генерация HTML

function createEmailTemplate(user: User) {
  return undent`
    <div class="email">
      <h1>Hello, ${user.name}!</h1>
      <p>Your subscription expires on ${user.expiryDate}.</p>
    </div>
  `;
}

2. SQL-запросы

const query = undent`
  SELECT 
    u.id,
    u.name,
    COUNT(o.id) as order_count
  FROM 
    users u
  LEFT JOIN 
    orders o ON u.id = o.user_id
  WHERE 
    u.active = true
  GROUP BY 
    u.id
`;

3. Логирование

function logError(error: Error) {
  console.error(undent`
    [ERROR] ${new Date().toISOString()}
    Message: ${error.message}
    Stack:
    ${embed(error.stack || '')}
  `);
}

Производительность и особенности

undent использует clever-алгоритмы для минимального overhead:

1. Zero-dependencies
2. Поддержка tree-shaking
3. Минимальный bundle impact (~1KB)
4. Работает в SSR/SSG окружениях

Бенчмарки показывают, что undent в 2-3 раза быстрее популярных аналогов вроде dedent.

Заключение

undent — это must-have инструмент в арсенале senior фронтенд-разработчика. Библиотека решает конкретную проблему и делает это максимально эффективно.

Особенно полезна при:

• Генерации сложных HTML-шаблонов
• Работе с DSL (SQL, GraphQL)
• Форматировании логов и диагностических сообщений
• Создании CLI-интерфейсов

Простота API и отсутствие зависимостей делают undent идеальным выбором для production-проектов.

Источник: https://github.com/okikio/undent