Giter Club home page Giter Club logo

mustachewax's Introduction

Problem

(Mustache)[https://mustache.github.io/] is an excellent templating and code generation utility. There are some limitations however for which we need to add helper functions. Common helpers are like:

  • remove trailing delimiter
  • case changes

While there are several extensions for it exists, such as those stated below:

Most try to introduce new tag types and their parsing logic. While this one just manipulates the input object and is more verbose but completely non intrusive.

Solution

This is a simple helper utility for Mustache in NodeJs which tries to help without introducing new tag types or patterns and tries to stick closely to the core idea of logic-less-ness in templates that Mustache is known for.

The helper.js does the following:

  • addLodashFuncs enables usage of (lodash)[https://lodash.com/] functions in Mustache.
  • addFunctions enables usage of lodash and your bespoke functions (addded via addBespokeFunction) in Mustache with __ prefix to all the functions.
  • Pre-process your input model to add tags for templates
    • handleArrayOfArrays goes deep into the array levels and adds tags for levels and index
    • objs2list converts objects into a list for easier templating
    • commalist creates a list with a @comma property for all but the last item
    • indexedList introduces the @index property in a list
    • filters via | in the blocks, similar to other implementations, but expects the input model to contain the entire element with the filters. This is done automatically by passing the input model into the prepare function.
    • a suffix ? for identifying boolean checks

See the test.js file for usages.

Developers who want to port this to other languages are highly welcomed.

In case you need to extract the mustache templates you can use mustache-extractor, which is another project here.

Install

With npm:

npm install my-mustache-wax --save-dev

Convention Used

  • __ prefix used to define function names
  • @ is used for adding new tags such as index and key/val

Suggestions

In the input model provided to Mustache remember the following to make to template cleaner:

  • Keep parent and children tag names different. While using the helper functions use the name argument for the tags being created.
parent = {name: "A", children: [{name:"B"}]}
should instead be
parent = {parent_name: "A", children: [{child_name:"B"}]}
  • use of has_ prefix to check for nullability may not be needed if above is followed as then we do not need to care about parent and child scopes
  • use ? as suffix for booleans to distinguish between nullability check and boolean checks.
  • Use the prepare function in helper.js

mustachewax's People

Contributors

anshumandas avatar

Watchers

James Cloos 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.