pragmatic-view-loader
    TypeScript icon, indicating that this package has built-in type declarations

    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

    12

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    13.1 MB

    Total Files

    39

    Last publish

    Collaborators

    • deathrage