react-templates-preprocess-loader
react-templates pre-processor that works as a Webpack loader.
This utility lets you easily setup a custom webpack loader that:
- loads a
.rt
file - gives you access to the DOM-tree from JavaScript
- feeds the modified DOM to
react-templates
By hacking the DOM-tree you can implement custom features
that you don't find in react-templates
.
Install
Install in your webpack build directory with:
npm install react-templates-preprocess-loader --save-dev
Usage
- import
{ visiter, loader }
from the package - customize
visiter
to your needs - export
loader
to webpack.
The visiter
has the following interface you can modify:
The node
arguments are nodes from cheerio
.
In each on
event function, modify the nodes or throw
an error to halt Webpack bundling.
context
is a generic object you can use to share data betewen different calls of the event functions.
Example
In the following example, the preprocessor is used to turn
into
Write a ./my-loader.js
file as follows:
const visiter loader = ; visiter { if nodename === 'img' if nodeattribs"rt-src" ifnodeattribs"src" throw "can't have both 'src' and 'rt-src' attributes specified on <img>"; let val = nodeattribs"rt-src"; val = `{require('')}`; nodeattribs"src" = val; delete nodeattribs"rt-src"; }; moduleexports = loader;
Last step is to chain the created loader into webpack loader, just before react-templates-loader
:
In webpack.config.js
:
// ...loaders = test: /\.rt$/ loaders: "react-templates-loader" `/my-loader` ;// ...
Note: ${__dirname}/
is not necessary if my-loader
is written as a module under node_modules/
.
License
MIT