# minify-html-literals
> Minify HTML template literal strings
Latest version **1.3.5** (published 2021-03-09) · MIT license · 0 weekly downloads
## Install
```sh
npm install minify-html-literals
pnpm add minify-html-literals
yarn add minify-html-literals
bun add minify-html-literals
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.3.5 |
| Published | 2021-03-09 |
| First published | 2018-07-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 51 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 73 |
| Author | Liz Mitchell |
| Maintainers | asyncliz |
| Keywords | minify, html, literal, literals, template, tagged, lit-html |
## Links
- npm: https://www.npmjs.com/package/minify-html-literals
- Repository: https://github.com/asyncLiz/minify-html-literals
- Homepage: https://github.com/asyncLiz/minify-html-literals#readme
- Issues: https://github.com/asyncLiz/minify-html-literals/issues
- npm.io page: https://npm.io/package/minify-html-literals
## Dependencies (5)
- [clean-css](https://npm.io/package/clean-css.md) ^4.2.1
- [magic-string](https://npm.io/package/magic-string.md) ^0.25.0
- [html-minifier](https://npm.io/package/html-minifier.md) ^4.0.0
- [parse-literals](https://npm.io/package/parse-literals.md) ^1.2.1
- [@types/html-minifier](https://npm.io/package/@types/html-minifier.md) ^3.5.3
## Alternatives
- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads
## Recent versions
- 1.3.5 (latest) — 2021-03-09
- 1.3.4 — 2021-03-09
- 1.3.2 — 2020-08-18
- 1.3.1 — 2020-06-10
- 1.3.0 — 2020-02-08
- 1.2.2 — 2019-02-13
- 1.2.1 — 2019-02-13
- 1.2.0 — 2019-02-13
- 1.1.2 — 2018-11-29
- 1.1.1 — 2018-10-25
- 1.1.0 — 2018-10-24
- 1.0.7 — 2018-10-05
- 1.0.6 — 2018-10-03
- 1.0.5 — 2018-09-27
- 1.0.4 — 2018-09-19
- … 4 more at https://npm.io/package/minify-html-literals/versions
## README
# minify-html-literals
_Minify HTML markup inside JavaScript template literal strings._
[](https://www.npmjs.com/package/minify-html-literals)
[](https://travis-ci.com/asyncLiz/minify-html-literals)
[](https://coveralls.io/github/asyncLiz/minify-html-literals?branch=master)
## Why?
Template literals are often used in JavaScript to write HTML and CSS markup (ex. [lit-html](https://www.npmjs.com/package/lit-html)). This library allows a developer to minify markup that is normally ignored by JavaScript minifiers.
## Usage
```js
import { minifyHTMLLiterals } from 'minify-html-literals';
// const minifyHTMLLiterals = require('minify-html-literals').minifyHTMLLiterals
const result = minifyHTMLLiterals(
`function render(title, items) {
return html\`
\${title}
\${items.map(item => {
return getHTML()\`
- \${item}
\`;
})}
\`;
}`,
{
fileName: 'render.js'
}
);
console.log(result.code);
// function render(title, items) {
// return html`${title}
${items.map(item => {
// return getHTML()`- ${item}
`;
// })}
`;
// }
console.log(result.map);
// {
// "version": 3,
// "file": "render.js.map",
// "sources": ["render.js"],
// "sourcesContent": [null],
// "names": [],
// "mappings": "AAAA;gBACgB,qDAMU,QAAQ,SAE1B;2BACmB,IACX,OAAO,KACb;WACC,KAEP;"
// }
```
### ES5 Transpiling Warning
Be sure to minify template literals _before_ transpiling to ES5. Otherwise, the API will not be able to find any template literal (`` `${}` ``) strings.
## Supported Source Syntax
- JavaScript
- TypeScript
## Options
### Basic
The following options are common to typical use cases.
| Property | Type | Default | Description |
| --------------------------- | -------------------------------------------------------------------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fileName` | string | | _Required._ The name of the file, used for syntax parsing and source maps. |
| `minifyOptions?` | [html-minifier options](https://www.npmjs.com/package/html-minifier#options-quick-reference) | `defaultMinifyOptions` | Defaults to production-ready minification. |
| `minifyOptions?.minifyCSS?` | [clean-css options](https://www.npmjs.com/package/clean-css#constructor-options) | `defaultMinifyCSSOptions` | Uses clean-css defaults. |
| `shouldMinify?` | function | `defaultShouldMinify` | A function that determines whether or not an HTML template should be minified. Defaults to minify all tagged templates whose tag name contains "html" (case insensitive). |
| `shouldMinifyCSS?` | function | `defaultShouldMinifyCSS` | A function that determines whether or not a CSS template should be minified. Defaults to minify all tagged templates whose tag name contains "css" (case insensitive). |
### Advanced
All aspects of the API are exposed and customizable. The following options will not typically be used unless you need to change how a certain aspect of the API handles a use case.
| Property | Type | Default | Description |
| ----------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `generateSourceMap?` | boolean or `(ms: MagicString, fileName: string) => SourceMap | undefined` | `defaultGenerateSourceMap` | Set to `false` to disable source maps, or a custom function to control how source maps are generated from a `MagicString` instance. |
| `strategy?` | object | `defaultStrategy` | An object with methods defining how to minify HTML. The default strategy uses [html-minifier](https://www.npmjs.com/package/html-minifier). |
| `validate?` | boolean or object | `defaultValidation` | Set to `false` to disable strategy validation checks, or to a custom set of validation functions. This is only useful when implementing a custom strategy. |
| `parseLiterals?` | function | [parse-literals](https://www.npmjs.com/package/parse-literals) | Override the function used to parse template literals from a source string. |
| `parseLiteralsOptions?` | object | | Additional options to pass to `parseLiterals()` |
| `MagicString?` | function | [MagicString](https://www.npmjs.com/package/magic-string) | Override the MagicString-like constructor to use for manipulating the source string and generating source maps. |
## Customization Examples
### Minify non-tagged templates
> This is particularly useful for libraries that define templates without using tags, such as Polymer's ``.
```js
import { minifyHTMLLiterals, defaultShouldMinify } from 'minify-html-literals';
minifyHTMLLiterals(
`
template.innerHTML = \`
\`;
`,
{
fileName: 'render.js',
shouldMinify(template) {
return (
defaultShouldMinify(template) ||
template.parts.some(part => {
return part.text.includes('');
})
);
}
}
);
```
### Do not minify CSS
```js
import { minifyHTMLLiterals, defaultMinifyOptions } from 'minify-html-literals';
minifyHTMLLiterals(source, {
fileName: 'render.js',
minifyOptions: {
...defaultMinifyOptions,
minifyCSS: false
},
shouldMinifyCSS: () => false
});
```
### Modify generated SourceMap
```js
minifyHTMLLiterals(source, {
fileName: 'render.js',
generateSourceMap(ms, fileName) {
return ms.generateMap({
file: `${fileName}-converted.map`, // change file name
source: fileName,
includeContent: true // include source contents
});
}
});
```
---
_Source: https://npm.io/package/minify-html-literals · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._