Negatory. Postpone Mission.

    @dcmox/stencil-js

    1.0.8 • Public • Published

    stencil-js

    stencil-js is a templating engine that is fast with low overhead. It is compatible with Mustache templates and includes a few core features that differ from it.

    Features

    • Create or use filters on your template variables for simple string manipulation such as:

      • {{paragraph|excerpt}} - (excerpt) Trims down the paragraph to a max of 255 characters and adds ...
      • {{urls|linkify}} - (linkify) Converts URLs in plain text into clickable HTML links
      • {{name|ucwords}} - (ucwords) Uppercases the first letter of any word (delimited by a space).
      • {{key|lower}} - (lower) Converts key to lowercase.
      • {{highlight|upper}} - (upper) Converts the highlight variable to uppercase.
      • {{html|stripTags}} - (stripTags) Removes all HTML from the variable
    • Automatic conversion of special characters to HTML entities to help prevent security vulnerabilities

    • Fast and under 200 lines of code for the core module

    • Supports partial templates using {{> partialTemplate}} syntax

    • Should be fully compatible with Mustache templates. If you know Mustache, you already know 90% of stencil-js.

    • Support for helpers with parameters. Great for conditional logic.

    • Built from scratch with no dependencies

    • We encourage contribution and suggestions to help improve the templating engine!

    Sample Usage

    TypeScript

    const Stencil = require('@dcmox/stencil-js')
    const options = {
        newLineToBr: true,
    }
    const template = `Hello world, my name is {{name}}!`
    const view = {
        firstName: 'John',
        lastName: 'Doe',
        name: function() {
            return `${this.firstName} ${this.lastName}`
        },
    }
    console.time('Render time')
    const rendered = Stencil.render(template, view)
    console.timeEnd('Render time')
    console.log(rendered) // outputs Hello world, my name is John Doe!
    const options = {
        newLineToBr: true,
    }
    const template = `<a href="/home" {{{isActive home}}}>Home</a>`
    const view = {
        firstName: 'John',
        lastName: 'Doe',
        path: 'home',
        isActive: function(path: string) {
            return path === this.path ? 'class="active"' : ''
        },
    }
    console.time('Render time')
    const rendered = Stencil.render(template, view)
    console.timeEnd('Render time')
    console.log(rendered) // outputs class="active"

    HTML

    <script>
        var exports = {}
    </script> 
    <script src="stencil-browser.js"></script>
    <script>
        const template = `Hello world, my name is {{name}}!`
        const view = {
            firstName: 'John',
            lastName: 'Doe',
            name: function() {
                return `${this.firstName} ${this.lastName}`
            },
        }
        document.getElementById('template').innerHTML = Stencil.render(
            template,
            view,
        )
    </script> 
    <div id="template"></div>

    See tests/usage.ts or tests/stencil.test.ts for an example on how to use stencil-js with NodeJS and Typescript.

    Available Scripts

    In the project directory, you can run:

    npm run build

    Builds stencil.ts and tests/usage.ts into JS files for usage. usage.ts is a demo of the script being used in Typescript.

    npm run test-usage

    Runs the sample usage.js file which should output a log in your console.

    Learn More

    You can learn more about the developer here.

    Install

    npm i @dcmox/stencil-js

    DownloadsWeekly Downloads

    9

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    50.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • dancmox