pragmatic-view-loader v0.0.4
PragmaticView Loader
Webpack loader for PragmaticView templating engine.
npm install --save pragmatic-view pragmatic-view-loaderGetting 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.