rollup-plugin-yagni
Rollup plugin to convert .html or .svg files to yagni-dom compatible hyperscript dialect ES6 modules (uses yagni-parser under the hood).
<!-- layout.html -->
<div class="body">
<div class="sidebar">Sidebar</div>
<div class="content">Hello, {{ ctx.username }}!</div>
</div>import { view as layoutView } from './html/layout.html';
const tree = layoutView({username: 'John Smith'});
console.log(tree);
// tree is an object of the following structure, suitable for render by
// yagni-dom render function
// const tree = {
// tagName: 'div',
// attrs: {'class': 'body'},
// props: {},
// children: [
// {
// tagName: 'div',
// attrs: {'class': 'sidebar'},
// props: {},
// children: ['Sidebar']
// },
// {
// tagName: 'div',
// attrs: {'class': 'content'},
// props: {},
// children: ['Hello, John Smith!']
// }
// ]
// };For an example of generated javascript code please check yagni-parser.
Installation
Using npm:
$ npm install --save-dev @yagni-js/rollup-plugin-yagni @yagni-js/yagni-dom @yagni-js/yagni
Using yarn:
$ yarn add -D @yagni-js/rollup-plugin-yagni @yagni-js/yagni-dom @yagni-js/yagni
Usage
// rollup.config.js
import yagni from '@yagni-js/rollup-plugin-yagni';
export default {
entry: 'src/main.js',
dest: 'dist/bundle.js',
format: 'iife',
plugins: [
yagni({
// All html/svg files will be parsed by default,
// but you can also specifically include/exclude files
include: ['html/**', 'svg/**'],
exclude: ['node_modules/**']
})
]
};