https://github.com/tinovyatkin/babel-plugin-html-tag

Statically evaluates and minifies tagged html`<..>` template literals into strings
https://github.com/tinovyatkin/babel-plugin-html-tag

babel babel-plugin html template-literals

Last synced: 2 days ago
JSON representation

Statically evaluates and minifies tagged html`<..>` template literals into strings

• Host: GitHub
• URL: https://github.com/tinovyatkin/babel-plugin-html-tag
• Owner: tinovyatkin
• License: mit
• Created: 2018-04-29T19:45:18.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-11-09T11:41:55.000Z (about 1 year ago)
• Last Synced: 2024-04-25T08:42:24.984Z (7 months ago)
• Topics: babel, babel-plugin, html, template-literals
• Language: JavaScript
• Size: 3.3 MB
• Stars: 6
• Watchers: 3
• Forks: 2
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# babel-plugin-html-tag

Statically evaluates and minifies tagged `` html`<..>` `` template literals into strings

![npm](https://img.shields.io/npm/v/babel-plugin-html-tag.svg)

[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) [![codecov](https://codecov.io/gh/tinovyatkin/babel-plugin-html-tag/branch/master/graph/badge.svg)](https://codecov.io/gh/tinovyatkin/babel-plugin-html-tag)

![node](https://img.shields.io/node/v/babel-plugin-html-tag.svg)

## What it does:

Minifies tagged template literals (by default using `html` tag) via `html-minifier` then removes the tag:

In:

```js

const a = html`


  This is paragraph with ${b} subsitutions at several lines: ${1 + 2}

`;


const z = html`

  

    HTML without substitutions

  

`;

```

Out:

```js

const a = `
This is paragraph with ${b} subsitutions at several lines: ${

  1 + 2

}
`;


// becomes static one line string if there is no substitutions

const z =

  'HTML without substitutions';

```

### Tip

Try it with Visual Studio Code [bierner.lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) plugin for beautiful syntax highlight and HTML autocomplete inside tagged HTML string.

## Credits

Inspired by [babel-plugin-template-html-minifier](https://github.com/goto-bus-stop/babel-plugin-template-html-minifier) and [babel-plugin-graphql-tag](https://github.com/gajus/babel-plugin-graphql-tag)