# datauri.template

> Wraps datauri module with template support

Latest version **0.0.1** (published 2014-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install datauri.template
pnpm add datauri.template
yarn add datauri.template
bun add datauri.template
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2014-11-02 |
| First published | 2014-11-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.10 |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Helder Santana |
| Maintainers | helder |
| Keywords | datauri, data uri, data-uri, template, preprocessor, optimization, uri, optimize, inline, png, jpg, woff, base64 |

## Links

- npm: https://www.npmjs.com/package/datauri.template
- Repository: https://github.com/heldr/datauri.template
- Issues: https://github.com/heldr/datauri.template/issues
- npm.io page: https://npm.io/package/datauri.template

## Dependencies (2)

- [datauri](https://npm.io/package/datauri.md) ^0.5.5
- [hogan.js](https://npm.io/package/hogan.js.md) ^3.0.2

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2014-11-02

## README

datauri.template [![Build Status](http://img.shields.io/travis/heldr/datauri.template/master.svg?style=flat)](http://travis-ci.org/heldr/datauri.template) [![NPM version](http://img.shields.io/npm/dm/datauri.template.svg?style=flat)](https://www.npmjs.org/package/datauri.template)
=======

Wraps [datauri module][datauri] with template support.

`npm install --save datauri.template`

GET STARTED
-----------
This template method runs on top of Hogan(Mustache) by default, but you can change to any engine of your choice.

### Hello World

We are going to start creating a template file, this can be CSS, HTML or JS. Make sure to add the variables **classNameSuffix** and **dataURISchema**. Both are reserved at this time, but custom variable names will be available soon.

```css
/* foobar.css */
.image-{{classNameSuffix}} {
    background: url("{{dataURISchema}}");
}
```

Now we can create a JS file to preprocess the respective template. Remember that you do not necessarily need to instance DataURI like the example bellow. More examples using Callbacks and Events are available in the [main doc][datauri].

```js
var DataURI = require('datauri.template'),
    data    = new DataURI('test/myfile.png');

var content = data.template('template/foobar.css');

// result
console.log(content); // =>> .image-myfile {\n...
```

### Write file + Extra variables

```css
/* variables.css */
.image-{{classNameSuffix}} {
    background: url("{{dataURISchema}}");
    margin: {{defaultMargin}};
}
```

```js
var fs      = require('fs'),
    DataURI = require('datauri.template'),
    data    = new DataURI('test/flag.gif'),
    content = data.template('template/variables.css', {
        defaultMargin: '.1rem'
    });

fs.writeFile('variables.compiled.css');
```

```css
/* variables.compiled.css */
.image-flag {
    background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    margin: .1rem;
}
```

### Custom template engine

Consider lodash.template as example. If your favorite template engine does support a compile + render shorthand, you just need to point the handler after a given template path, otherwise you will need to create a template adapter.

```css
/* lodash.css */
.image-<%= classNameSuffix %> {
    background: url("<%= dataURISchema %>");
    border-radius: <%= borderRadius %>;
}
```

```js
var fs      = require('fs'),
    DataURI = require('datauri.template'),
    _       = require('lodash'), // or lodash.template for custom builds
    handleb = require('handlebars'), // or lodash.template for custom builds
    data    = new DataURI('test/flag.gif');
    content = data.template('template/lodash.css', _.template, {
        borderRadius: '2px'
    });

fs.writeFile('lodash.css');
```

```css
/* lodash.css */
.image-flag {
    background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    border-radius: 2px;
}
```

### Create a template adapter

Some templates engines does not have a shorthand to compile + render at the same call. In this specific cases we can create a template wrapper as the example bellow:

```js
var DataURI    = require('datauri.template'),
    handlebars = require('handlebars'),
    data       = new DataURI('test/flag.gif');

data.templateAdapter = function (templateContent) {
    var tpl = handlebars.compile(templateContent);

    // bind is used to ensure scope
    return tpl.bind(handlebars);
};

var content = data.template('template/foobar.css');

// result
console.log(content); // =>> .image-flag {\n...
```

DEVELOPING
----------

```CLI
$ make install
$ make test
```

If you'd like to test the full process including npm installer, just run:

```CLI
$ make fulltest
```

## Release notes

* 0.1 - First release

## License

MIT License
(c) [Helder Santana](http://git.io/heldr)

[datauri]: https://github.com/heldr/datauri

---
_Source: https://npm.io/package/datauri.template · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._