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
.npmignore
.travis.yml
HISTORY.md
README.md
index.js
package.json
test.js

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