Giter VIP home page Giter VIP logo

nitro-component-handlebars's Introduction

Nitro Component Handlebars Helper

npm version Build Status Coverage Status Codestyle

This helper allows to render a nitro component using handlebars

Installation

npm i --save-dev @namics/nitro-component-handlebars

Usage

const componentHandlebarsHelper = require('@namics/nitro-component-handlebars');
module.exports = componentHandlebarsHelper({
    rootDirectory: '/path/to/nitro/root'
})

Template usage

Default

The following code will render components/atoms/button/button.hbs:

{{component "components/atoms/button"}}

Child elements

The following code will set the value of {{children}} to 'Click me':

{{#component "components/atoms/button"}}
    Click me
{{/component}}

Attributes

The following code will set the value of {{size}} to 'xl':

{{component "components/atoms/button" size="xl"}}

Array attributes

The following code will set the value of {{sizes}} to ['xl', 'l']:

{{component "components/atoms/button" sizes="['xl', 'l']"}}

Data files

The following code will set the template variables to the content of components/atoms/button/_data/demo.json:

{{component "components/atoms/button" data-file="demo.json"}}

Rendering foreign modules

The following code will render a component from another node_module e.g. node_modules/base-pattern/components/atoms/button/button.json

{{component "~base-pattern/components/atoms/button"}}

Contribution

You're free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. This project uses the Codestyle.

License

This project is licensed under MIT.

nitro-component-handlebars's People

Contributors

jantimon avatar ernscht 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.