All Projects → luwes → rollup-plugin-tagged-template

luwes / rollup-plugin-tagged-template

Licence: other
Use plain HTML files as tagged templates.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to rollup-plugin-tagged-template

postcss-font-grabber
A postcss plugin, it grabs remote font files and update your CSS, just like that.
Stars: ✭ 26 (+8.33%)
Mutual labels:  rollup, rollup-plugin
rollup-plugin-generate-package-json
Generate package.json file with packages from your bundle using Rollup
Stars: ✭ 29 (+20.83%)
Mutual labels:  rollup, rollup-plugin
rollup-plugin-closure-compiler-js
Rollup plugin for optimizing JavaScript with google-closure-compiler-js.
Stars: ✭ 31 (+29.17%)
Mutual labels:  rollup, rollup-plugin
rollup-plugin-jscc
Conditional compilation and compile-time variable replacement for Rollup
Stars: ✭ 52 (+116.67%)
Mutual labels:  rollup, rollup-plugin
rollup-plugin-external-globals
Transform external imports into global variables like output.globals.
Stars: ✭ 57 (+137.5%)
Mutual labels:  rollup, rollup-plugin
rollup-plugin-markdown
import JavaScript from Markdown code blocks
Stars: ✭ 16 (-33.33%)
Mutual labels:  rollup, rollup-plugin
rollup-plugin-inject-process-env
Inject environment variables in process.env with Rollup
Stars: ✭ 48 (+100%)
Mutual labels:  rollup, rollup-plugin
rollup-plugin-generate-html-template
Rollup plugin for automatically injecting a script tag with the final bundle into an html file.
Stars: ✭ 58 (+141.67%)
Mutual labels:  rollup, rollup-plugin
web-config
A Rollup configuration to build modern web applications with sweet features as for example SCSS imports, Service Worker generation with Workbox, Karma testing, live reloading, coping resources, chunking, treeshaking, Typescript, license extraction, filesize visualizer, JSON import, budgets, build progress, minifying and compression with brotli a…
Stars: ✭ 17 (-29.17%)
Mutual labels:  rollup, rollup-plugin
rollup-plugin-lit-css
Moved to https://github.com/bennypowers/lit-css
Stars: ✭ 35 (+45.83%)
Mutual labels:  rollup, rollup-plugin
rollup-plugin-purs
Bundles PureScript modules with Rollup
Stars: ✭ 71 (+195.83%)
Mutual labels:  rollup, rollup-plugin
hyperstache
👨‍🦰 Handlebars just got a trim, alternative JS template engine, 2kb gzip
Stars: ✭ 36 (+50%)
Mutual labels:  template-literals, tagged-template
rollup-plugin-userscript-metablock
Transform json file to userscript metablock and append on.
Stars: ✭ 26 (+8.33%)
Mutual labels:  rollup, rollup-plugin
rollup-plugin-html
Import HTML files as strings in rollup build
Stars: ✭ 36 (+50%)
Mutual labels:  rollup, rollup-plugin
rollup-plugin-sizes
Rollup plugin to display bundle contents & size information
Stars: ✭ 77 (+220.83%)
Mutual labels:  rollup, rollup-plugin
rollup-plugin-collect-sass
Collect Sass, then compile
Stars: ✭ 17 (-29.17%)
Mutual labels:  rollup, rollup-plugin
npm-es-modules
Breakdown of 7 different ways to use ES modules with npm today.
Stars: ✭ 67 (+179.17%)
Mutual labels:  rollup
zero
📦 A zero config scripts library
Stars: ✭ 17 (-29.17%)
Mutual labels:  rollup
vite-rollup-plugins
A compatibility list of rollup plugins for Vite 2 and test playground
Stars: ✭ 76 (+216.67%)
Mutual labels:  rollup-plugin
vue-methods-promise
Let Vue methods support return Promise
Stars: ✭ 35 (+45.83%)
Mutual labels:  rollup

rollup-plugin-tagged-template

Use plain HTML files as tagged templates.

npm install rollup-plugin-tagged-template

Usage

rollup.config.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

<p>Hello ${name}</p>

app.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: <p>Hello Tiana</p>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].