proper-tags is an evolved version of the widely-used CommonJS package common-tags. It has been updated with the following considerations for modern JavaScript environments:

• 🌟 Extendable: Comes with built-in tools for creating custom tags.
• 📦 ESM Code Base: Ensures native compatibility with modern development tools.
• 🦕 Deno Compatibility: Designed specifically to function seamlessly with the Deno runtime.
• 📝 TypeScript Definitions: Integrated TypeScript typings make development in TypeScript a breeze.
• 🔄 API Consistency: The interface aligns with common-tags, ensuring compatibility with existing frameworks and guides.

Below is a quick guide, check out the full documentation at https://proper-tags.56k.guru.

import { html } from 'proper-tags';

html`
  <div id="user-card">
    <h2>${user.name}</h2>
  </div>
`

Install

npm install proper-tags

ESM Import:

import { stripIndent } from 'proper-tags';

Legacy CommonJS Require:

const { stripIndent } = require('proper-tags');

To use proper-tags with Deno, import it from deno.land:

import { html } from 'https://deno.land/x/proper_tags/dist/proper-tags.js';

Note: Make sure to freeze the url to a specific version

To include proper-tags via jsdelivr, add the following script tag to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/proper-tags@2.0.2/dist/proper-tags.umd.js"></script>

Note: Make sure to replace 2.0.2 with the latest version

Like all ES modules, proper-tags begins with an import.

import { stripIndent } from 'proper-tags'

• html: Properly indents arrays and newline characters in string substitutions.
  • Aliases: source, codeBlock
• safeHtml: Similar to html, but with safe HTML escaping for strings.
• oneLine: Converts multi-line strings into a single line.
• oneLineTrim: Converts multi-line strings into a single line, trimming newlines.
• stripIndent: Strips the initial indentation from the beginning of each line in a multiline string.
• stripIndents: Strips all indentation from the beginning of each line in a multiline string.
• inlineLists: Inlines an array substitution as a list.
• oneLineInlineLists: Inlines an array substitution as a list, rendered on a single line.
• commaLists: Inlines an array substitution as a comma-separated list.
• commaListsOr: Inlines an array as a comma-separated list, with the last item prefixed by "or".
• commaListsAnd: Inlines an array as a comma-separated list, with the last item prefixed by "and".
• oneLineCommaLists: Inlines an array as a comma-separated list on a single line.
• oneLineCommaListsOr: Inlines an array as a comma-separated list on a single line, with the last item prefixed by "or".
• oneLineCommaListsAnd: Inlines an array as a comma-separated list on a single line, with the last item prefixed by "and".
• id: A no-op tag useful in scenarios like mocking.

For more information, examples, functions for advanced usage and best practices, refer to the documentation at proper-tags.56k.guru.

Please see the Contribution Guidelines.

MIT. See license.