PragmaticView Loader
Webpack loader for PragmaticView templating engine.
npm install --save pragmatic-view pragmatic-view-loader
Getting started
There are two major ways how to add template files to your webpack. You can either add templates as entry points or import them to your js file.
// webpack.config.js
module.exports = {
entry: ['index.js', 'templates/home.jsx', 'templates/about.jsx']
...
}
// or in index.js
require('templates/home.jsx);
require('templates/about.jsx);
Next important part of using webpack is to configure your loaders. It might be best to exclude templates from other loader. You can use exlude/include options of webpack's loaders or change template files extensions to .pv. Components loaded by loader should always be exported eitehr as defaults in ES6 syntax (export default () => ...) or directly in CommonJS (module.exports = () => ...).
// webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /\.js$/i,
exclude: /(node_modules|templates)/,
loader: 'babel-loader'
},
{
test: /\.(tsx|jsx|pv)/,
include: /templates/,
loader: 'pragmatic-view-loader"
},
]
}
}
PragmaticView loader can be passed options. If you are using layouts or imports in your templates it might me necessary to set templateDir option.
Possible options:
templateDir- directory of templates, necessary if you are importing componentslayout- common layout for templates, usually rest of page including<head>context- data shared to all components, same as context in ViewBuilderregisterOptions- additional Babel config, about register
// with options
module.exports = {
...
module: {
rules: [
{
test: /\.js$/i,
exclude: /(node_modules|templates)/,
loader: 'babel-loader'
},
{
test: /\.(tsx|jsx|pv)/,
include: /templates/,
use: [{
loader: 'pragmatic-view-loader'm
options: {
context: {
title: 'Awesome page'
},
layout: path.resolve(__dirname, './templates/layout'),
templateDir: path.resolve(__dirname, './templates')
}
}]
},
]
}
}
As PragmaticView loader creates html as string you may want to chain additional loader such as html-loader, extract-loader and file-loader in order to turn html strings into files.
// using multiplate loaders
module.exports = {
...
module: {
rules: [
{
test: /\.js$/i,
exclude: /(node_modules|templates)/,
loader: 'babel-loader'
},
{
test: /\.(tsx|jsx|pv)/,
include: /templates/,
use: [
'file-loader?name=[name].html',
'extract-loader',
'html-loader',
{
loader: 'pragmatic-view-loader',
options: {
templateDir: path.resolve(__dirname, './templates')
}
}
]
},
]
}
}
When emitting file it's always necessary to make sure that emited file has .html extension.