π§ Liquid (Lite)
Liquid (Lite) is a minimal Shopify Liquid compiler for the browser.
Getting started
# for npm
npm install @bloombug/liquidlite
# for yarn
yarn add @bloombug/liquidlite
import {compile} from '@bloombug/liquidlite';
const template = `<p>Hi, my name is {{ name }}.</p>`;
const variables = {name: 'Ryan'};
compile(template, variables);
// <p>Hi, my name is Ryan.</p>
Why build a compiler for a subset of liquid?
Liquid is a popular templating language and used to build Shopify themes. I've often needed a basic templating language to load in some dynamic content, but I don't want to use a different syntax like handlebars.
This project started because I was always including this snippet of code:
export function compile(template, context) {
let output = template;
for (const variable in context) {
const value = context[variable];
if (typeof value === 'string') {
output = output
.replaceAll(`{{${variable}}}`, value)
.replaceAll(`{{ ${variable} }}`, value);
}
}
return output;
}
It's not the best, but it was largely working for what I needed.
It finally got to a point where I need some control flow statements. And there you have it, liquidlite
.
Supported features
Feature | Symbol | Support |
---|---|---|
objects | {{ }} |
β |
equals | == |
β |
greater than | > |
β |
less than | < |
β |
greater than or equal to | >= |
β |
less than or equal to | <= |
β |
logical or | or |
β |
logical and | and |
β |
contains | contains |
β |
control flow if | if |
β |
control flow unless | unless |
β |
control flow elsif | elsif |
β |
control flow else | else |
β |
control flow case | case |
β |
iteration for | for |
β |
template comment | comment |
β |
template inline comment | # |
β |
template raw | raw |
β |
template liquid | liquid |
β |
template echo | echo |
β |
template render | render |
β |
template include | include |
β |
variable assign | assign |
β |
variable capture | capture |
β |
variable increment | increment |
β |
variable decrement | decrement |
β |
filters | | |
β |