https://github.com/luwes/rollup-plugin-tagged-template

Use plain HTML files as tagged templates.
https://github.com/luwes/rollup-plugin-tagged-template

rollup rollup-plugin tagged-template template-literals

Last synced: 8 days ago
JSON representation

Use plain HTML files as tagged templates.

• Host: GitHub
• URL: https://github.com/luwes/rollup-plugin-tagged-template
• Owner: luwes
• Created: 2019-10-02T02:41:14.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-06-17T22:09:53.000Z (5 months ago)
• Last Synced: 2024-10-30T00:51:56.503Z (10 days ago)
• Topics: rollup, rollup-plugin, tagged-template, template-literals
• Language: JavaScript
• Size: 149 KB
• Stars: 24
• Watchers: 4
• Forks: 1
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# rollup-plugin-tagged-template

Use plain HTML files as tagged templates.  

`npm install rollup-plugin-tagged-template`

## Usage

### rollup.config.js:

```js

import taggedTemplate from 'rollup-plugin-tagged-template';

export default {

  input: 'app.js',

  output: {

    file: 'bundle.js',

    format: 'esm'

  },

  plugins: [

    taggedTemplate({

      include: '**/*.html',     // required

      exclude: '**/*.js',       // optional

      tagName: 'html',          // optional - for nested tag templates

      propsName: 'props'        // optional

    })

  ]

};

```

### template.html

```html

Hello ${name}

```


### app.js

```js

// for example html from sinuous, can be any tag template function

import { html } from 'sinuous';

import template from './template.html';

const props = {

  name: 'Tiana'

};

console.log(template(html, props)); // outputs a Node: 
Hello Tiana

```