# liquid-to-handlebars
> Convert liquid templates to handlebars templates.
Latest version **3.0.1** (published 2018-05-06) · MIT license · 0 weekly downloads
## Install
```sh
npm install liquid-to-handlebars
pnpm add liquid-to-handlebars
yarn add liquid-to-handlebars
bun add liquid-to-handlebars
```
Provides the commands `lth`, `liquid-to-handlebars`.
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.0.1 |
| Published | 2018-05-06 |
| First published | 2014-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4 |
| Dependencies | 12 |
| Unpacked size | 52.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | Jon Schlinkert |
| Maintainers | jonschlinkert |
| Keywords | assemble, bootstrap, convert, handlebars, jekyll, liquid, refactor, to, transform |
## Links
- npm: https://www.npmjs.com/package/liquid-to-handlebars
- Repository: https://github.com/jonschlinkert/liquid-to-handlebars
- Issues: https://github.com/jonschlinkert/liquid-to-handlebars/issues
- npm.io page: https://npm.io/package/liquid-to-handlebars
## Dependencies (12)
- [delete](https://npm.io/package/delete.md) ^1.1.0
- [log-ok](https://npm.io/package/log-ok.md) ^0.1.1
- [minimist](https://npm.io/package/minimist.md) ^1.2.0
- [through2](https://npm.io/package/through2.md) ^2.0.3
- [vinyl-fs](https://npm.io/package/vinyl-fs.md) ^3.0.2
- [arr-union](https://npm.io/package/arr-union.md) ^3.1.0
- [regex-not](https://npm.io/package/regex-not.md) ^1.0.2
- [snapdragon](https://npm.io/package/snapdragon.md) ^0.11.3
- [export-files](https://npm.io/package/export-files.md) ^2.1.1
- [split-string](https://npm.io/package/split-string.md) ^4.0.0
- [file-is-binary](https://npm.io/package/file-is-binary.md) ^1.0.0
- [strip-bom-string](https://npm.io/package/strip-bom-string.md) ^1.0.0
## Alternatives
- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads
## Recent versions
- 3.0.1 (latest) — 2018-05-06
- 3.0.0 — 2018-03-26
- 2.0.7 — 2017-09-21
- 2.0.6 — 2017-09-21
- 2.0.5 — 2017-09-21
- 2.0.4 — 2017-09-21
- 2.0.3 — 2017-06-15
- 2.0.2 — 2017-06-15
- 2.0.1 — 2017-06-15
- 2.0.0 — 2017-06-15
- 1.1.0 — 2017-06-14
- 1.0.3 — 2017-06-11
- 1.0.2 — 2017-06-08
- 1.0.1 — 2017-02-22
- 1.0.0 — 2017-02-07
- … 8 more at https://npm.io/package/liquid-to-handlebars/versions
## README
# liquid-to-handlebars [](https://www.npmjs.com/package/liquid-to-handlebars) [](https://npmjs.org/package/liquid-to-handlebars) [](https://npmjs.org/package/liquid-to-handlebars) [](https://travis-ci.org/jonschlinkert/liquid-to-handlebars)
> Convert liquid templates to handlebars templates.
Please consider following this project's author, [Jon Schlinkert](https://github.com/jonschlinkert), and consider starring the project to show your :heart: and support.
- [Install](#install)
- [Why use this?](#why-use-this)
- [Usage](#usage)
- [Migration debugging](#migration-debugging)
* [Step 1: Add starter helpers](#step-1-add-starter-helpers)
* [Step 2: Run handlebars](#step-2-run-handlebars)
- [Conversion Examples](#conversion-examples)
* [Conditionals](#conditionals)
* [Arrays](#arrays)
* [Filters](#filters)
- [What is this?](#what-is-this)
- [About](#about)
_(TOC generated by [verb](https://github.com/verbose/verb) using [markdown-toc](https://github.com/jonschlinkert/markdown-toc))_
## Install
Install with [npm](https://www.npmjs.com/):
```sh
$ npm install --save liquid-to-handlebars
```
## Why use this?
If you've ever seen a jekyll boilerplate, or another project that uses [liquid](https://github.com/Shopify/liquid) templates and wished it was written in [handlebars](http://www.handlebarsjs.com/), this is your solution!
* 100% of the tags mentioned in the [shopify liquid documentation](http://shopify.github.io/liquid/) convert to handlebars syntax
* easily migrate any liquid theme or boilerplate
* use more powerful and flexible handlebars helpers instead of liquid filters
**Please [create an issue](../../issues/new) if you find a tag that doesn't convert correctly, and I'll add support. Thanks!**
## Usage
```js
const converter = require('liquid-to-handlebars');
// Converts this liquid
console.log(converter.convert('Price: ${{ product_price | default: 2.99 }}'));
// To this handlebars
//=> 'Price: ${{default product_price 2.99}}'
```
You will also need to include any missing handlebars helpers that provide similar functionality to the liquid filters that are being replaced. For example:
```js
const handlebars = require('handlebars');
handlebars.registerHelper('default', function(a, b) {
return a || b || '';
});
const fn = handlebars.compile('Price: ${{default product_price 2.99}}');
console.log(fn());
//=> 'Price: $2.99'
console.log(fn({default_price: '4.99'}));
//=> 'Price: $4.99'
```
## Migration debugging
_Once your liquid templates are converted to handlebars, if you attempt to render all of the templates with handlebars without any additional work, it's a good bet that you'll receive a bunch of errors from missing helpers._
Save yourself a bunch of time and frustration by following these steps:
### Step 1: Add starter helpers
Add the following to your app:
```js
const handlebars = require('handlebars');
// override handlebars' built-in `helperMissing` helper, so that we
// can easily see which helpers are missing and get them fixed
handlebars.registerHelper('helperMissing', function() {
const opts = [].slice.call(arguments).pop();
console.log(`missing helper {{${opts.name}}}`);
});
```
### Step 2: Run handlebars
Now, when you run handlebars, if you see a message like this:
```js
missing helper {{foo}}
```
You can either create the `foo` helper from scratch, or use a helper library that already includes the helpers you need.
Any of the following libraries may be used, but the [liquid-filters][] library might be most useful (during migration, at least).
* [liquid-filters][] - includes a bunch of utility javascript functions that can be registered as handlebars helpers to provide parity with the built-in liquid filters
* [template-helpers](https://github.com/jonschlinkert/template-helpers) - generic helpers that can be used with any template engine.
* [handlebars-helpers](https://github.com/helpers/handlebars-helpers) - more than 150 handlebars helpers
**Examples**
```js
const handlebars = require('handlebars');
const filters = require('liquid-filters');
const helpers = require('template-helpers');
handlebars.registerHelper(filters());
handlebars.registerHelper(helpers());
```
## Conversion Examples
There are **many more examples** in the [docs folder](./examples.md), as well as [test/fixtures](./test/fixtures) and [test/expected](test/expected).
### Conditionals
**basic operators**
From this liquid:
```liquid
{% if product.type == "Shirt" or product.type == "Shoes" %}
This is a shirt or a pair of shoes.
{% endif %}
```
To this handlebars:
```handlebars
{{#if (or (is product.type "Shirt") (is product.type "Shoes"))}}
This is a shirt or a pair of shoes.
{{/if}}
```
**boolean**
From this liquid:
```liquid
{% if settings.fp_heading %}
{{ settings.fp_heading }}
{% endif %}
```
To this handlebars:
```handlebars
{{#if settings.fp_heading}}
{{ settings.fp_heading }}
{{/if}}
```
**case**
From this liquid:
```liquid
{% case handle %}
{% when 'cake' %}
This is a cake
{% when 'cookie' %}
This is a cookie
{% else %}
This is not a cookie/cake
{% endcase %}
```
To this handlebars:
```handlebars
{{#is handle 'cake'}}
This is a cake
{{else is handle 'cookie'}}
This is a cookie
{{ else }}
This is not a cookie/cake
{{/is}}
```
Requires the ["is" helper](https://github.com/nimojs/handlebars-helper-is).
**else**
From this liquid:
```liquid
{% if username and username.size > 10 %}
Wow, {{ username }}, you have a long name!
{% else %}
Hello there!
{% endif %}
```
To this handlebars:
```handlebars
{{#if (and username (gt username.size 10))}}
Wow, {{ username }}, you have a long name!
{{else}}
Hello there!
{{/if}}
```
**contains**
From this liquid:
```liquid
{% if product.title contains 'Pack' %}
This product's title contains the word Pack.
{% endif %}
```
To this handlebars:
```handlebars
{{#if (contains product.title "Pack")}}
This product's title contains the word Pack.
{{/if}}
```
### Arrays
**Basic loops**
From this liquid:
```liquid
{% for user in site.users %}
{{ user }}
{% endfor %}
```
To this handlebars:
```handlebars
{{#each site.users as |user|}}
{{ user }}
{{/each}}
```
**Accessing specific items in arrays**
From this liquid:
```liquid
{{ site.users[0] }}
{{ site.users[1] }}
{{ site.users[3] }}
```
To this handlebars:
```handlebars
{{get site.users 0}}
{{get site.users 1}}
{{get site.users 3}}
```
### Filters
> Filters are converted to [handlebars subexpressions](http://handlebarsjs.com/expressions.html#subexpressions)
From this liquid:
```liquid
{{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
```
To this handlebars:
```handlebars
{{join (reverse (split "Ground control to Major Tom." "")) ""}}
```
**Many more examples** in the [docs folder](docs) and [unit tests](test).
## What is this?
This is a tool for converting projects that use [liquid](https://github.com/Shopify/liquid) templates to use [handlebars](http://www.handlebarsjs.com/) templates.
## About
Contributing
Pull requests and stars are always welcome. For bugs and feature requests, [please create an issue](../../issues/new).
Running Tests
Running and reviewing unit tests is a great way to get familiarized with a library and its API. You can install dependencies and run tests with the following command:
```sh
$ npm install && npm test
```
Building docs
_(This project's readme.md is generated by [verb](https://github.com/verbose/verb-generate-readme), please don't edit the readme directly. Any changes to the readme must be made in the [.verb.md](.verb.md) readme template.)_
To generate the readme, run the following command:
```sh
$ npm install -g verbose/verb#dev verb-generate-readme && verb
```
### Related projects
You might also be interested in these projects:
* [assemble](https://www.npmjs.com/package/assemble): Get the rocks out of your socks! Assemble makes you fast at creating web projects… [more](https://github.com/assemble/assemble) | [homepage](https://github.com/assemble/assemble "Get the rocks out of your socks! Assemble makes you fast at creating web projects. Assemble is used by thousands of projects for rapid prototyping, creating themes, scaffolds, boilerplates, e-books, UI components, API documentation, blogs, building websit")
* [handlebars](https://www.npmjs.com/package/handlebars): Handlebars provides the power necessary to let you build semantic templates effectively with no frustration | [homepage](http://www.handlebarsjs.com/ "Handlebars provides the power necessary to let you build semantic templates effectively with no frustration")
### Author
**Jon Schlinkert**
* [LinkedIn Profile](https://linkedin.com/in/jonschlinkert)
* [GitHub Profile](https://github.com/jonschlinkert)
* [Twitter Profile](https://twitter.com/jonschlinkert)
### License
Copyright © 2018, [Jon Schlinkert](https://github.com/jonschlinkert).
Released under the [MIT License](LICENSE).
***
_This file was generated by [verb-generate-readme](https://github.com/verbose/verb-generate-readme), v0.6.0, on May 06, 2018._
---
_Source: https://npm.io/package/liquid-to-handlebars · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._