ractive component loader for webpack
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore Initial import Jan 28, 2015
.npmignore Initial import Jan 28, 2015
.travis.yml Initial import Jan 28, 2015
HISTORY.md Initial import Jan 28, 2015
README.md Update README.md Feb 2, 2015
index.js Initial import Jan 28, 2015
package.json Relax dependencies Aug 30, 2015
test.js Initial import Jan 28, 2015

README.md

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).