ractive-component-loader

2.0.0 • Public • Published

ractive-component-loader for webpack

Exports a Ractive component as a Ractive constructor function for webpack.

Status

Usage

Documentation: using loaders

Quick start guide

Install this into your project:

$ npm install --save ractive-component-loader

Make all your .html files compile down to [Ractive] templates by modifying your webpack.config.js file:

/* webpack.config.js */
module.exports = {
  module: {
    loaders: [
      { test: /\.html$/, loader: 'ractive-component' }
    ]
  },
  ...
};

Then use your Ractive components via require():

<!-- mycomponent.html -->
<import rel="ractive" href="./subcomponent.html">
 
<div>Hello {{subject}}!</div>
<subcomponent></subcomponent>
 
<script>
component.exports = {
  data: { subject: 'World' }
};
</script> 
 
<!-- subcomponent.html -->
Subcomponent are required correctly
var Component = require('./mycomponent.html');
new Component({ el: document.body });

Alternate usage

You can also use it without modifying your config. Just explicitly call it on your require() call via a prefix:

var Component = require('ractive-component!./mycomponent.html');

Thanks

ractive-component-loader © 2014+, Blake Thomson. Released under the MIT License.
Authored and maintained by Blake Thomson with help from contributors (list).

Package Sidebar

Install

npm i ractive-component-loader

Weekly Downloads

22

Version

2.0.0

License

MIT

Unpacked Size

3.86 kB

Total Files

5

Last publish

Collaborators

  • gtyree
  • ebinmore
  • gesteves
  • pablo.mercado
  • jplhomer
  • thomsbg