tessl/npm-common-tags

A set of well-tested template literal tag functions for ES2015+ that solve common string manipulation and formatting problems.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

HTML Templates

Name: tessl/npm-common-tags
Author: tessl

HTML-focused template tags that provide proper indentation handling and XSS protection for safe HTML rendering. These tags are designed for generating clean, well-formatted HTML output in template systems and code generators.

Capabilities

HTML Tag

Renders HTML with proper array and newline indentation, maintaining the visual structure of nested HTML elements.

/**
 * Renders HTML with proper indentation for arrays and newlines
 * @param strings - Template strings array
 * @param expressions - Template substitution values
 * @returns Formatted HTML string with preserved indentation
 */
function html(strings, ...expressions): string;

Usage Examples:

import { html } from "common-tags";

// Basic HTML generation
const title = "My Page";
const content = html`
  <!DOCTYPE html>
  <html>
    <head>
      <title>${title}</title>
    </head>
    <body>
      <h1>Welcome</h1>
    </body>
  </html>
`;

// Array rendering with proper indentation
const items = ['Home', 'About', 'Contact'];
const nav = html`
  <nav>
    <ul>
      ${items.map(item => `<li><a href="/${item.toLowerCase()}">${item}</a></li>`)}
    </ul>
  </nav>
`;
// Result:
// <nav>
//   <ul>
//     <li><a href="/home">Home</a></li>
//     <li><a href="/about">About</a></li>
//     <li><a href="/contact">Contact</a></li>
//   </ul>
// </nav>

// Multiline string substitutions with preserved indentation
const multilineContent = `<p>Line 1</p>
<p>Line 2</p>`;
const section = html`
  <section>
    <div class="content">
      ${multilineContent}
    </div>
  </section>
`;
// Result:
// <section>
//   <div class="content">
//     <p>Line 1</p>
//     <p>Line 2</p>
//   </div>
// </section>

Safe HTML Tag

HTML-safe rendering with automatic XSS protection through HTML entity escaping of dangerous characters.

/**
 * Renders HTML with XSS protection via HTML entity escaping
 * @param strings - Template strings array
 * @param expressions - Template substitution values (automatically escaped)
 * @returns HTML string with substitutions safely escaped
 */
function safeHtml(strings, ...expressions): string;

Usage Examples:

import { html, safeHtml } from "common-tags";

// Dangerous user input safely escaped
const userInput = '<script>alert("XSS")</script>';
const username = "John <admin>";
const userCard = html`
  <div class="user-card">
    <h2>${safeHtml`${username}`}</h2>
    <div class="bio">
      ${safeHtml`${userInput}`}
    </div>
  </div>
`;
// Result:
// <div class="user-card">
//   <h2>John &lt;admin&gt;</h2>
//   <div class="bio">
//     &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;
//   </div>
// </div>

// Array of user messages with safe rendering
const userMessages = [
  'Hello there!',
  'Check out this link: <a href="evil.com">click me</a>',
  'I have "quotes" and \'apostrophes\''
];
const messageList = html`
  <div class="messages">
    <ul>
      ${userMessages.map(msg => safeHtml`<li>${msg}</li>`)}
    </ul>
  </div>
`;
// All user content will be safely escaped

Tag Aliases

Source and Code Block

Alternative names for the html tag, providing semantic clarity for different use cases.

/**
 * Alias for html tag - useful for source code formatting
 * @param strings - Template strings array
 * @param expressions - Template substitution values
 * @returns Formatted string with preserved indentation
 */
function source(strings, ...expressions): string;

/**
 * Alias for html tag - useful for code block generation
 * @param strings - Template strings array  
 * @param expressions - Template substitution values
 * @returns Formatted string with preserved indentation
 */
function codeBlock(strings, ...expressions): string;

Usage Examples:

import { source, codeBlock } from "common-tags";

// Using 'source' for code generation
const jsCode = source`
  function calculate(a, b) {
    return a + b;
  }
`;

// Using 'codeBlock' for documentation
const example = codeBlock`
  const result = calculate(5, 3);
  console.log(result); // 8
`;

Security Features

XSS Protection Details

The safeHtml tag automatically escapes the following characters in substitutions:

& → &
< → <
> → >
" → "
' → '
` → `

Safe HTML Patterns

import { html, safeHtml } from "common-tags";

// Combine safe and unsafe content
const trustedHTML = '<strong>Important</strong>';
const userContent = '<script>evil()</script>';

const output = html`
  <div>
    ${trustedHTML}  <!-- This is trusted, not escaped -->
    ${safeHtml`User said: ${userContent}`}  <!-- This is escaped -->
  </div>
`;

Implementation Notes

html tag maintains indentation by analyzing the preceding whitespace pattern
Array substitutions are joined with the same indentation as their position
safeHtml applies escaping only to substitution values, not template strings
Both tags strip initial indentation and trim the final result
Newline characters in substitutions are properly indented to match their context
All HTML tags support tail processing and function call usage