yagni-loader

Webpack loader 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>

// main.js
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/yagni-loader @yagni-js/yagni-dom @yagni-js/yagni

Using yarn:

$ yarn add -D @yagni-js/yagni-loader @yagni-js/yagni-dom @yagni-js/yagni

Usage

// webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.(svg|html)$/,
        loader: 'yagni-loader'
      }
    ]
  },
  //...
};

License

Unlicense