Need private packages and team management tools?Check out npm Teams »

pragmatic-view-loader

0.0.4 • Public • Published

npm node Coverage Status Gitlab pipeline status

PragmaticView Loader

PragmaticView Loader

Webpack loader for PragmaticView templating engine.

npm install --save pragmatic-view pragmatic-view-loader

Getting started

Documentation

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 components
  • layout - common layout for templates, usually rest of page including <head>
  • context - data shared to all components, same as context in ViewBuilder
  • registerOptions - 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.

Install

npm i pragmatic-view-loader

DownloadsWeekly Downloads

0

Version

0.0.4

License

MIT

Unpacked Size

13.1 MB

Total Files

39

Last publish

Collaborators

  • avatar