1.4.1 โ€ข Published 2 years ago

@bloombug/liquidlite v1.4.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

๐Ÿ’ง Liquid (Lite)

npm bundle size (scoped) ยท tests

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

FeatureSymbolSupport
objects{{ }}โœ…
equals==โœ…
greater than>โœ…
less than<โœ…
greater than or equal to>=โœ…
less than or equal to<=โœ…
logical ororโŒ
logical andandโŒ
containscontainsโŒ
control flow ififโœ…
control flow unlessunlessโŒ
control flow elsifelsifโŒ
control flow elseelseโŒ
control flow casecaseโŒ
iteration forforโŒ
template commentcommentโŒ
template inline comment#โŒ
template rawrawโŒ
template liquidliquidโŒ
template echoechoโŒ
template renderrenderโŒ
template includeincludeโŒ
variable assignassignโŒ
variable capturecaptureโŒ
variable incrementincrementโŒ
variable decrementdecrementโŒ
filters\|โŒ
1.4.1

2 years ago

1.4.0

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.0

2 years ago

1.1.0

2 years ago

1.0.0

2 years ago