@bloombug/liquidlite NPM

💧 Liquid (Lite)

npm bundle size (scoped) ·

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	`\\|`	❌