Coder Social home page Coder Social logo

broccoli-underscore-template-compiler's Introduction

Broccoli Underscore Template Compiler

Installation

npm install -D broccoli-underscore-template-compiler

Example

var compileTemplates = require('broccoli-underscore-template-compiler');

var templatesTree = compileTemplates('templates', {
  description: 'TemplateCompiler (appTemplates)'
});

Input Format

Given the following input:

<template id="firstTemplate" data-notes="This is my first template">
  <%- message %>
</template>

This plugin will produce an ES6 module equivalent to:

export var firstTemplate = _.extend(_.template('\n  <%- message %>\n'), {
  metadata: {
    notes: 'This is my first template'
  }
});

export default {
  firstTemplate: firstTemplate
};

Each <template> in the source file will be available as a field in the module's default export, as well as an exported variable of the same name, with any data attributes on the template available under a metadata hash hanging off of the resulting function.

Usage

The templates produced by this filter are just the output of Underscore's _.template function, so you can use them as their documentation suggests:

var helloTemplate = _.template("hello: <%= name %>");
helloTemplate({ name: 'moe' });
//=> "hello: moe"

The exported template function is exposed from the compiled module, e.g.

<!-- templates/my-templates.html -->
<template id="helloTemplate">hello: <%= name %></template>
import { helloTemplate } from 'templates/my-templates';
helloTemplate({ name: 'moe' });
//=> "hello: moe"

Configuration

compileTemplates(inputTree, options)


options.extensions {Array} (Optional, default ['html'])

The file extensions which should be read and compiled as templates.

License

This project is distributed under the MIT license.

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.