rioct-loader
rioct-loader
is the webpack loader for Rioct templates.
Allows to require()
template source files directly from JavaScript,
letting Webpack compile them and put in the bundle.
Installation
Install in your Webpack build directory with:
npm install --save-dev rioct-loader
Configuration
Modify webpack.config.js
(or any other Webpack config file):
module.exports = {
// ...
module: {
// ...
loaders: [{
test: /\.tag.html?$/, // or another file extension of your choice
loader: "rioct-loader" // or with options: "rioct-loader?trace=false&brackets={{ }}&useRioctRuntime=true"
}]
// ...
}
// ...
}
Usage
From JavaScript and React:
// === if it's a stateless component ===
const MyComponent = require("./my-component.tag.html");
// === if it's a stateful component ===
class MyComponent extends React.Component {
render = require("./my-component.tag.html");
}
ReactDOM.render(React.createElement(MyComponent), document.body);
How it works
When building the bundle, Webpack will intercept all require()
with filenames
ending in .tag.html
, then it calls rioct-cli
to compile the template
and the resulting code is given as result for the require()
call.