Giter Club home page Giter Club logo

handlebars-source-locators's Introduction

handlebars-source-locators

NPM version Travis Build Status Coverage Status

Puts source-position markers into the Handlebars output

Installation

npm install handlebars-source-locators

Usage

The following example demonstrates how to use this module:

const Handlebars = require('handlebars')
const addSourceLocators = require('handlebars-source-locators')

// Create a new Handlebars environment and add source-locators
const hbs = addSourceLocators(Handlebars.create())

hbs.registerPartial('info', `
Name: {{name}}
City: {{city}}
`)

hbs.registerPartial('hobbies', `
{{#each hobbies}}
- {{.}}
{{/each}}
`)

const template = hbs.compile(`
Info:
-----
{{> info}}

Hobbies:
-----
{{> hobbies}}
`)

console.log(template({
  name: 'Nils Knappmeier',
  city: 'Darmstadt',
  hobbies: [
    'Aikido',
    'Programming',
    'Theater',
    'Music'
  ]
}))

This will generate the following output

<sl line="1" col="0"></sl>
Info:
-----
<sl line="4" col="0"></sl><sl line="1" col="0" partial="info"></sl>
Name: <sl line="2" col="6" partial="info"></sl>Nils Knappmeier<sl line="2" col="14" partial="info"></sl>
City: <sl line="3" col="6" partial="info"></sl>Darmstadt<sl line="3" col="14" partial="info"></sl>
<sl line="4" col="0" partial="info"></sl><sl line="4" col="10"></sl>
Hobbies:
-----
<sl line="8" col="0"></sl><sl line="1" col="0" partial="hobbies"></sl>
<sl line="2" col="0" partial="hobbies"></sl><sl line="2" col="17" partial="hobbies"></sl>- <sl line="3" col="2" partial="hobbies"></sl>Aikido<sl line="3" col="7" partial="hobbies"></sl>
<sl line="4" col="0" partial="hobbies"></sl><sl line="2" col="17" partial="hobbies"></sl>- <sl line="3" col="2" partial="hobbies"></sl>Programming<sl line="3" col="7" partial="hobbies"></sl>
<sl line="4" col="0" partial="hobbies"></sl><sl line="2" col="17" partial="hobbies"></sl>- <sl line="3" col="2" partial="hobbies"></sl>Theater<sl line="3" col="7" partial="hobbies"></sl>
<sl line="4" col="0" partial="hobbies"></sl><sl line="2" col="17" partial="hobbies"></sl>- <sl line="3" col="2" partial="hobbies"></sl>Music<sl line="3" col="7" partial="hobbies"></sl>
<sl line="4" col="0" partial="hobbies"></sl>

API-reference

addSourceLocators(handlebarsEnvironment)

Adds source-locators to a Handlebars-environment. The template-output will include tags of the form <sl line="1" col="4" [partial="partialName"]>

The meaning is that the output directly after this tag originates from the line/column in the tag. If the "partial" is not set, the output originates from the main-template.

The "line"-property is based off 1. The "col"-property is based off 0. This is consistent with the output of the "Handlebars.parse()"-function.

Kind: global function
Throws:

  • Error if handlebarsEnvironment is the default Handlebars-environment. Please use "Handlebars.create" to create a new environment and pass that to this function. The default instance may be used in many places of the dependency tree. Modifying it may cause unexpected behavior in other libraries that seem not connected to this one at all.

Access: public

Param Type Description
handlebarsEnvironment Handlebars the Handlebars environment to modify

License

handlebars-source-locators is published under the MIT-license. See LICENSE.md for details.

Release-Notes

For release notes, see CHANGELOG.md

Contributing guidelines

See CONTRIBUTING.md.

handlebars-source-locators's People

Contributors

nknapp avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.