Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reactgular/object-handlebars
Minimal templating with {{handlebars}} in a JavaScript object.
https://github.com/reactgular/object-handlebars
handlebars handlebars-template javascript javascript-library json mustache mustache-templates template-engine typescript typescript-library
Last synced: 19 days ago
JSON representation
Minimal templating with {{handlebars}} in a JavaScript object.
- Host: GitHub
- URL: https://github.com/reactgular/object-handlebars
- Owner: reactgular
- License: mit
- Created: 2019-09-09T16:59:06.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-31T00:38:19.000Z (over 4 years ago)
- Last Synced: 2024-12-21T09:41:58.507Z (about 1 month ago)
- Topics: handlebars, handlebars-template, javascript, javascript-library, json, mustache, mustache-templates, template-engine, typescript, typescript-library
- Language: TypeScript
- Homepage:
- Size: 266 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Build Status](https://travis-ci.org/reactgular/object-handlebars.svg?branch=master)](https://travis-ci.org/reactgular/object-handlebars)
[![Coverage Status](https://coveralls.io/repos/github/reactgular/object-handlebars/badge.svg?branch=master)](https://coveralls.io/github/reactgular/object-handlebars?branch=master)
[![npm version](https://badge.fury.io/js/%40reactgular%2Fobject-handlebars.svg)](https://badge.fury.io/js/%40reactgular%2Fobject-handlebars)## What is ObjectHandlebars?
ObjectHandlebars is a handlebars templating library for use on object properties. It is a *single* function that resolves handlebar
expressions relative to the current object.For example;
```typescript
import {render} from '@reactgular/object-handlebars';const data = {
first: 'John',
last: 'Smith',
fullName: '{{first}} {{last}}'
};console.log(render(data)); // prints {first: "John", last: "Smith", fullName: "John Smith"}
```## Installation
To get started, install the package from npm.
```bash
npm install --save @reactgular/object-handlebars
```## Usage
ObjectHandlerbars is a function that takes the *context object*, *filters* and *recursion depth* as parameters. It does not
directly modify the *context object*, but instead returns a *deep clone*.You can install the library with `npm install @reactgular/object-handlebars` and import the main function.
```typescript
// using TypeScript
import {render} from '@reactgular/object-handlebars';// using NodeJS
const objectHandlebars = require('@reactgular/object-handlebars');
objectHandlebars.render();
```## Function Signature
You can call the ObjectHandlebars function with a single object parameter, and it returns a deep clone of that object with all string
properties rendered with handlebars.```typescript
// function definition for ObjectHandlebars
export type render = (obj: TType, filters: Filters = {}, maxDepth: number = 100) => TType;// filter functions
export type Filter = (s: string) => string;
export interface Filters { [key: string]: Filter;}
```### Basic Usage
Object properties that are *strings* will be rendered as basic handlebar templates.
```typescript
import {render} from '@reactgular/object-handlebars';console.log(render({a: "one", b: "{{a}}"})); // prints {a: "one", b: "one"}
```### Filters
You can pass a map of filter functions. A filter function takes a single argument of a string and returns a string. Filters
can be chained together in a handlebars expression like this `{{property|filterA|filterB|filterC}}`.```typescript
import {render} from '@reactgular/object-handlebars';const upper = (s) => s.toUppercase();
console.log(render({a: "one", b: "{{a|upper}}"}, {upper})); // prints {a: "one", b: "ONE"}
```### Dot notation
Handlebar expressions can use dot notation to reference nested values, but the path is always from the top of the context object.
```typescript
import {render} from '@reactgular/object-handlebars';const data = {
person: {
first: "John",
last: "Smith"
},
fullName: "{{person.first}} {{person.last}}"
};console.log(render(data)); // prints {person: {first: "John", last: "Smith"}, fullName: "John Smith"}
```### Array of objects
ObjectHandlebars will render any nested objects found in arrays.
```typescript
import {render} from '@reactgular/object-handlebars';const data = {
person: {first: "John", last: "Smith"},
values: ["{{person.first}}", "{{person.last}}"],
objects: [
{fullName: "{{person.first}} {{person.last}}"}
]
};console.log(render(data));
// prints
// {
// person: {first: "John", last: "Smith"}
// values: ["John", "Smith"],
// objects: [{fullName: "John Smith"}]
// }
```