LiquidScript

https://jg-rp.github.io/liquidscript/
Admin
LiquidScript is a JavaScript and TypeScript engine for Liquid, the safe, customer-facing template...
Tokens:99,094
Snippets:3,067
Trust Score:9.7
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install LiquidScript with pnpm

Source: https://jg-rp.github.io/liquidscript/introduction/getting-started

Installs LiquidScript using pnpm.

```bash
pnpm add liquidscript  
```

--------------------------------

### Install LiquidScript with npm

Source: https://jg-rp.github.io/liquidscript/introduction/getting-started

Installs LiquidScript using npm.

```bash
npm install --save liquidscript  
```

--------------------------------

### Install LiquidScript with yarn

Source: https://jg-rp.github.io/liquidscript/introduction/getting-started

Installs LiquidScript using yarn.

```bash
yarn add liquidscript  
```

--------------------------------

### slice filter examples (start index)

Source: https://jg-rp.github.io/liquidscript/language/filters

Demonstrates slicing strings and arrays from the beginning.

```liquid
{{ "Liquid" | slice: 0 }}
{{ "Liquid" | slice: 2 }}
{{ "Liquid" | slice: 2, 5 }}
{% assign beatles = "John, Paul, George, Ringo" | split: ", " -%}
{{ beatles | slice: 1, 2 | join: " " }}

```

--------------------------------

### Browser usage with CDN

Source: https://jg-rp.github.io/liquidscript/introduction/getting-started

Includes LiquidScript in a browser using a CDN and demonstrates template rendering.

```html
<script  
  src="https://cdn.jsdelivr.net/npm/liquidscript@1.3.0/dist/liquidscript.iife.bundle.min.js"  
  integrity="sha256-HzMfVtmaQXB2y2rp9sGVLrcHK8xMFzkX2r83OYCaUhA="  
  crossorigin="anonymous"  
></script>  
<script>  
  const template = liquidscript.Template.from("Hello, {{ you }}!");  
  template.render({ you: "World" }).then(console.log);  
</script>  
```

--------------------------------

### Configure template rendering with options

Source: https://jg-rp.github.io/liquidscript/introduction/getting-started

Demonstrates configuring template rendering with options like `autoEscape` and `undefinedFactory`.

```javascript
import { Template, StrictUndefined } from "liquidscript";  
  
const template = Template.fromString(  
  "Hello, {{ you }}!",  
  {},  
  {  
    autoEscape: true,  
    undefinedFactory: StrictUndefined.from,  
  }  
);  
```

--------------------------------

### Configure an Environment for efficient template loading and rendering

Source: https://jg-rp.github.io/liquidscript/introduction/getting-started

Shows how to set up a LiquidScript Environment with a file system loader and configuration options.

```javascript
import {  
  Environment,  
  NodeFileSystemLoader,  
  StrictUndefined,  
} from "liquidscript";  
  
const env = new Environment({  
  autoEscape: true,  
  loader: new NodeFileSystemLoader("./templates/"),  
  undefinedFactory: StrictUndefined.from,  
});  
  
const template = env.fromString("Hello, {{ you }}!");  
```

--------------------------------

### Render template with loop and data

Source: https://jg-rp.github.io/liquidscript/introduction/getting-started

Shows how to render a template containing a Liquid `for` loop with provided data.

```javascript
import { Template } from "liquidscript";  
  
const template = Template.fromString(`  
{%- for person in people -%}  
  Hello, {{ person.name }}!  
{% endfor -%}  
`);  
  
const data = {  
  people: [{ name: "John" }, { name: "Sally" }],  
};  
  
console.log(template.renderSync(data));  
// Hello, John  
// Hello, Sally  
```

--------------------------------

### size filter examples

Source: https://jg-rp.github.io/liquidscript/language/filters

Illustrates getting the size of strings and arrays.

```liquid
{{ "Ground control to Major Tom." | size }}
{{ "apples, oranges, peaches, plums" | split: ", " | size }}

```

--------------------------------

### Import and use LiquidScript (ESM with namespace)

Source: https://jg-rp.github.io/liquidscript/introduction/getting-started

Imports LiquidScript using ESM and demonstrates basic template creation.

```javascript
import * as liquid from "liquidscript";  
const template = liquid.Template.from("Hello, {{ you }}!");  
```

--------------------------------

### Import and use LiquidScript (CJS with namespace)

Source: https://jg-rp.github.io/liquidscript/introduction/getting-started

Imports LiquidScript using CommonJS and demonstrates basic template creation.

```javascript
const liquid = require("liquidscript");  
const template = liquid.Template.from("Hello, {{ you }}!");  
```

--------------------------------

### Browser usage with local file

Source: https://jg-rp.github.io/liquidscript/introduction/getting-started

Includes LiquidScript in a browser using a local script tag and demonstrates template rendering.

```html
<script src="path/to/liquidscript.iife.bundle.min.js"></script>  
<script>  
  const template = liquidscript.Template.from("Hello, {{ you }}!");  
  template.render({ you: "World" }).then(console.log);  
</script>  
```

--------------------------------

### Chained Filters Example

Source: https://jg-rp.github.io/liquidscript/language/introduction

An example showing how to chain multiple filters (sort and first) to find the cheapest item in a collection.

```liquid
{% assign cheapest = collection.products | sort: "price" | first %}  

```

--------------------------------

### offset example

Source: https://jg-rp.github.io/liquidscript/language/tags

If an offset is specified, the loop will start at the given index in the sequence.

```liquid
{% for product in collection.products offset: 1 %}
    {{ product.title }}
{% endfor %}

```

```text
Shirt
Pants

```

--------------------------------

### slice filter examples (negative start index)

Source: https://jg-rp.github.io/liquidscript/language/filters

Shows slicing strings and arrays using negative indices from the end.

```liquid
{{ "Liquid" | slice: -3 }}
{{ "Liquid" | slice: -3, 2 }}
{% assign beatles = "John, Paul, George, Ringo" | split: ", " -%}
{{ beatles | slice: -2, 2 | join: " " }}

```

--------------------------------

### Render a template string synchronously and asynchronously

Source: https://jg-rp.github.io/liquidscript/introduction/getting-started

Demonstrates rendering a template string using both `renderSync()` and `render()` methods.

```javascript
import { Template } from "liquidscript";  
  
const template = Template.fromString("Hello, {{ you }}!");  
console.log(template.renderSync({ you: "World" })); // Hello, World!  
template.render({ you: "Liquid" }).then(console.log); // Hello, Liquid!  
```

--------------------------------

### offset: continue example

Source: https://jg-rp.github.io/liquidscript/language/tags

After using `limit`, you can start a new loop from where the previous one left off using `offset: continue`.

```liquid
{% for product in collection.products limit: 2 %}
    {{ product.title }}
{% endfor %}

{% for product in collection.products offset: continue %}
    {{ product.title }}!
{% endfor %}

```

```text
Hat
Shirt

Pants!

```

--------------------------------

### Macro and Call Example

Source: https://jg-rp.github.io/liquidscript/extra/tags

Example demonstrating the definition and usage of a 'price' macro, called twice with different arguments.

```liquid
{% macro 'price' product, on_sale: false %}  
  <div class="price-wrapper">  
  {% if on_sale %}  
    <p>Was {{ product.regular_price | prepend: '$' }}</p>  
    <p>Now {{ product.price | prepend: '$' }}</p>  
  {% else %}  
    <p>{{ product.price | prepend: '$' }}</p>  
  {% endif %}  
  </div>  
{% endmacro %}  
  
{% call 'price' products[0], on_sale: true %}  
{% call 'price' products[1] %}  
```

--------------------------------

### Include Tag Example

Source: https://jg-rp.github.io/liquidscript/language/tags

An example of using the include tag to render a partial template.

```liquid
{% comment %} I'm a partial template {% endcomment %}  
{{ greeting }}, World!  

```

```liquid
{% assign greeting = "Hello" %}  
{% include "partial_template" %}  

```

```text
Hello, World!  

```

--------------------------------

### Jekyll Style Include Example

Source: https://jg-rp.github.io/liquidscript/guides/custom-tags

This example implements an `{% include %}` tag, similar to Jekyll's. It handles template names provided as direct strings or resolved from variables, and accepts key/value arguments separated by '=', which are namespaced under 'include'.

```javascript
import { StringLiteral, expressions, tokens } from "liquidscript";  
  
const RE_VARIABLE_SYNTAX =  
  /^		*\{\{\s*(?<stmt>[\w\-.]+\s*(?:\|.*)?)\}\}\s*(?<args>.*)$/ds;  
  
class JekyllIncludeTag {  
  parse(stream) {  
    const token = stream.next();  
    stream.expect(tokens.TOKEN_EXPRESSION);  

    // An expression that evaluates to the template name  
    let templateNameExpression;  
    // An expression token stream including argument tokens only.  
    let argStream;  

    const match = stream.current.value.match(RE_VARIABLE_SYNTAX);  
    if (match) {  
      templateNameExpression = expressions.filtered.parse(match.groups.stmt);  
      argStream = new expressions.ExpressionTokenStream(  
        expressions.arguments.tokenize(  
          match.groups.args,  
          stream.current.index + match.indices.groups.args[0]  
        )  
      );  
    } else {  
      const [name, args] = stream.current.value.trim().split(/\s(.*)/s);  
      templateNameExpression = new StringLiteral(name);  
      argStream = new expressions.ExpressionTokenStream(  
        expressions.arguments.tokenize(args, stream.current.index + name.length)  
      );  
    }  

    // Key/value pairs, separated by commas, with `=` between each key and  
    // it's corresponding value.  
    const args = expressions.arguments.parseArguments(  
      argStream,  
      expressions.TOKEN_ASSIGN  
    );  

    return new JekyllIncludeNode(token, templateNameExpression, args);  
  }  
}  
  
class JekyllIncludeNode {  
  constructor(token, templateName, args) {  
    this.token = token;  
    this.templateName = templateName;  
    this.args = args;  
  }  
  
  async render(context, out) {  
    // Resolve the template name. It could be a variable that resolves to a  
    // string or a string literal.  
    const templateName = await this.templateName.evaluate(context);  

    // Load the template. We tag it with "include" so the template loader  
    // knows what tag is asking for a template.  
    const template = await context.getTemplate(templateName, {  
      tag: "include",  
    });  

    // Arguments go into an `include` namespace.  
    const includeScope = {};  
    for (const [key, value] of Object.entries(this.args)) {  
      includeScope[key] = await value.evaluate(context);  
    }  

    await context.extend({ include: includeScope }, async () => {  
      await template.renderWithContext(context, out, false, true);  
    });  
  }  
  
  renderSync(context, out) {  
    const templateName = this.templateName.evaluateSync(context);  
    const template = context.getTemplateSync(templateName, { tag: "include" });  

    const includeScope = {};  
    for (const [key, value] of Object.entries(this.args)) {  
      includeScope[key] = value.evaluateSync(context);  
    }  

    context.extendSync({ include: includeScope }, () => {  
      template.renderWithContextSync(context, out, false, true);  
    });  
  }  
}

```

```typescript
import {  
  ContextScope,  
  Expression,  
  expressions,  
  LiquidTypeError,  
  Node,  
  object,  
  RenderContext,  
  RenderStream,  
  StringLiteral,  
  tokens,  
  Tag,  
} from "liquidscript";  
  
const RE_VARIABLE_SYNTAX =  
  /^		*\{\{\s*(?<stmt>[\w\-.]+\s*(?:\|.*)?)\}\}\s*(?<args>.*)$/ds;  
  
/**  
 * The match object we expect back from our variable syntax regular expression.  
 */  
interface VariableSyntaxMatch {  
  groups: { stmt: string; args: string };  
  indices: { groups: { stmt: number[]; args: number[] } };  
}  
  
/**  
 * A type predicate for the `VariableSyntaxMatch` interface.  
 */  
function isVariableSyntaxMatch(match: unknown): match is VariableSyntaxMatch {  
  return match !== null;  
}  
  
class JekyllIncludeTag implements Tag {  
  parse(stream: tokens.TokenStream) {  
    const token = stream.next();  
    stream.expect(tokens.TOKEN_EXPRESSION);  

    // An expression that evaluates to the template name.  
    let templateNameExpression;  
    // An expression token stream including argument tokens only.  
    let argStream;  

    const match = stream.current.value.match(RE_VARIABLE_SYNTAX);  
    if (isVariableSyntaxMatch(match)) {  
      templateNameExpression = expressions.filtered.parse(match.groups.stmt);  

```

--------------------------------

### Template Inheritance Example

Source: https://jg-rp.github.io/liquidscript/extra/tags

A JavaScript example demonstrating template inheritance using 'extends' and 'block' tags with LiquidScript.

```javascript
import { Environment, extra, ObjectLoader } from "liquidscript";

const loader = new ObjectLoader({
  "base.html":
    "<body>\n" +
    '  <div id="content">{% block content required %}{% endblock %}</div>\n' +
    '  <div id="footer">{% block footer %}Default footer{% endblock %}</div>\n' +
    "</body>",
  "page.html":
    "{% extends 'base.html' %}\n" +
    "{% block content %}Hello, {{ you }}!{% endblock %}",
});

const env = new Environment({ loader });
extra.addInheritanceTags(env);

const template = env.getTemplateSync("page.html");
console.log(template.renderSync({ you: "World" }));
```

--------------------------------

### All Template Variables

Source: https://jg-rp.github.io/liquidscript/guides/static-analysis

Example demonstrating how to analyze all template variables and their locations.

```javascript
import { Template } from "liquidscript";  
  
const template = Template.fromString(`
{% assign people = "Sally, John, Brian, Sue" | split: ", " %}  
{{ people }}  
{% for name in people %}  
    {{ forloop.index }} - {{ greeting }}, {{ name }}!  
{% endfor %}`);  
  
const analysis = template.analyzeSync();  
console.log(Object.keys(analysis.variables));  
  
for (const [name, locations] of Object.entries(analysis.variables)) {  
  for (const { templateName, lineNumber } of locations) {  
    console.log(`'${name}' found in '${templateName}' on line ${lineNumber}`);  
  }  
}  

```

```text
output

['people', 'forloop.index', 'greeting', 'name']  
'people' found in '<string>' on line 2  
'people' found in '<string>' on line 3  
'forloop.index' found in '<string>' on line 4  
'greeting' found in '<string>' on line 4  
'name' found in '<string>' on line 4  


```

--------------------------------

### Filters

Source: https://jg-rp.github.io/liquidscript/guides/static-analysis

Example demonstrating how to analyze filter usage and their locations.

```javascript
import { Template } from "liquidscript";  
  
const template = Template.fromString(`
{% assign people = "Sally, John, Brian, Sue" | split: ", " %}  
{% for person in people %}  
  - {{ person | upcase | prepend: 'Hello, ' }}  
{% endfor %}`);  
  
const analysis = template.analyzeSync();  
  
for (const [filterName, locations] of Object.entries(analysis.filters)) {  
  for (const { templateName, lineNumber } of locations) {  
    console.log(  
      `'${filterName}' found in '${templateName}' on line ${lineNumber}`  
    );
  }
}

```

```text
output

'split' found in '<string>' on line 1  
'upcase' found in '<string>' on line 3  
'prepend' found in '<string>' on line 3  


```

--------------------------------

### Unless Tag Example

Source: https://jg-rp.github.io/liquidscript/language/tags

An example demonstrating the 'unless' tag to conditionally render text.

```json
{
  "product": {
    "title": "Rubbish Hat"
  }
}

```

```liquid
{% unless product.title == "Awesome Shoes" %}  
  These shoes are not awesome.  
{% endunless %}  

```

```text
These shoes are not awesome.  

```

--------------------------------

### Range Literals

Source: https://jg-rp.github.io/liquidscript/language/introduction

Examples of using range literals in LiquidScript, including iteration and joining.

```liquid
{% assign foo = (1..5) %}  
{{ foo | join: ',' }}  
  
{% for i in (3..6) %}  
    {{ i | plus: forloop.index }}  
{% endfor %}
```

--------------------------------

### Nested Block Example

Source: https://jg-rp.github.io/liquidscript/extra/tags

An example demonstrating nested blocks within LiquidScript templates.

```liquid
<body>
  <div id="content">
    {% block content %}
      {% block title %}
        <h1>Some Title</h1>
      {% endblock title %}
    {% endblock content %}
  </div>
  <div id="footer">
    {% block footer %}
      Default footer
    {% endblock footer %}
  </div>
</body>
```

--------------------------------

### If Tag Example

Source: https://jg-rp.github.io/liquidscript/language/tags

An example demonstrating the if tag with a simple condition.

```json
{
  "product": {
    "title": "Awesome Shoes"
  }
}

```

```liquid
{% if product.title == "Awesome Shoes" %}  
  These shoes are awesome!  
{% endif %}  

```

```text
These shoes are awesome!  

```

--------------------------------

### date filter example

Source: https://jg-rp.github.io/liquidscript/language/filters

Demonstrates formatting a date string using the date filter.

```liquid
{{ "March 14, 2016" | date: "%b %d, %y" }}
```

--------------------------------

### for tag example

Source: https://jg-rp.github.io/liquidscript/language/tags

Renders a block once for each item in a sequence.

```json
{
  "collection": {
    "products": [{ "title": "Hat" }, { "title": "Shirt" }, { "title": "Pants" }]
  }
}

```

```liquid
{% for product in collection.products %}
    {{ product.title }}
{% endfor %}

```

```text
Hat
Shirt
Pants

```

--------------------------------

### If Tag with Else Example

Source: https://jg-rp.github.io/liquidscript/language/tags

An example showing the use of the else tag when if and elsif conditions are false.

```liquid
{% if product.title == "OK Hat" %}  
  This hat is OK.  
{% elsif product.title == "Rubbish Tie" %}  
  This tie is rubbish.  
{% else %}  
  Not sure what this is.  
{% endif %}  

```

```text
Not sure what this is.  

```

--------------------------------

### rstrip filter example

Source: https://jg-rp.github.io/liquidscript/language/filters

Shows how to remove trailing whitespace from a string.

```liquid
{{ "          So much room for activities          " | rstrip }}!
```

--------------------------------

### Global Template Variables

Source: https://jg-rp.github.io/liquidscript/guides/static-analysis

Example demonstrating how to analyze global template variables.

```javascript
import { Template } from "liquidscript";  
  
const template = Template.fromString(`
{% assign people = "Sally, John, Brian, Sue" | split: ", " %}  
{{ people }}  
{% for name in people %}  
    {{ forloop.index }} - {{ greeting }}, {{ name }}!  
{% endfor %}`);  
  
const analysis = template.analyzeSync();  
console.log("all variables:", Object.keys(analysis.variables));  
console.log("global variables:", Object.keys(analysis.globalVariables));  

```

```text
output

all variables:  ['people', 'forloop.index', 'greeting', 'name']  
global variables:  ['greeting']  


```

--------------------------------

### Using MongoDBLoader

Source: https://jg-rp.github.io/liquidscript/guides/custom-loaders

An example of how to use the MongoDBLoader with LiquidScript and MongoDB.

```javascript
import { Environment } from "liquidscript";  
import { MongoClient } from "mongodb";  
import { MongoDBLoader } from "./mongo_loader";  
  
const uri = "mongodb://<somehost>";  
const client = new MongoClient(uri);  
  
async function run() {  
  try {  
    await client.connect();  
    const db = client.db("mydatabase");  
    const col = db.collection("mycollection");  
    const env = new Environment({ loader: new MongoDBLoader(col) });  
  
    const template = await env.getTemplate("index", undefined, undefined, {  
      uid: "ABC0123",  
    });  
  
    const result = await template.render();  
    console.log(result);  
  } finally {  
    await client.close();  
  }  
}  
run().catch(console.dir);  


```

--------------------------------

### default filter example

Source: https://jg-rp.github.io/liquidscript/language/filters

Demonstrates using the default filter to provide a fallback value.

```liquid
{{ product_price | default: 2.99 }}
  
{%- assign product_price = "" %}
{{ product_price | default: 2.99 }}
  
{%- assign product_price = 4.99 %}
{{ product_price | default: 2.99 }}
```

--------------------------------

### sort filter example (simple array)

Source: https://jg-rp.github.io/liquidscript/language/filters

Sorts an array of strings alphabetically.

```liquid
{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " -%}
{{ my_array | sort | join: ", " }}

```

--------------------------------

### concat filter example

Source: https://jg-rp.github.io/liquidscript/language/filters

Demonstrates joining two arrays using the concat filter.

```liquid
{% assign fruits = "apples, oranges, peaches" | split: ", " %}
{% assign vegetables = "carrots, turnips, potatoes" | split: ", " %}
  
{% assign everything = fruits | concat: vegetables %}  
  
{% for item in everything %}  
- {{ item }}  
{% endfor %}
```

--------------------------------

### round filter example

Source: https://jg-rp.github.io/liquidscript/language/filters

Demonstrates rounding a number to a specified number of decimal places.

```liquid
{{ 1.2 | round }}
{{ 2.7 | round }}
{{ 183.357 | round: 2 }}

```

--------------------------------

### Basic Template Example

Source: https://jg-rp.github.io/liquidscript/language/introduction

A simple Liquid template demonstrating variable assignment, a loop, and output statements.

```liquid
{% assign greeting = "Hello" %}  
{% for person in people %}  
  {{ greeting }}, {{ person.name | capitalize }}!  
{% endfor %}  

```

--------------------------------

### Whitespace Control - With Control

Source: https://jg-rp.github.io/liquidscript/language/introduction

Demonstrates output with whitespace control using hyphens.

```liquid
{% assign some_variable = false %}  
{%- if some_variable != true -%}  
Lets go!  
{%- endif -%}  
```

--------------------------------

### Resource Limits Example

Source: https://jg-rp.github.io/liquidscript/guides/resource-limits

Demonstrates setting various resource limits including maxContextDepth, localNamespaceLimit, loopIterationLimit, and outputStreamLimit.

```javascript
import { Environment } from "liquidscript";  
  
const env = new Environment({
  maxContextDepth: 30,
  localNamespaceLimit: 3000,
  loopIterationLimit: 1000,
  outputStreamLimit: 15000,
});  
  
const template = env.fromString(  
  "\n{% for x in (1..1000000) %}  \n{% for y in (1..1000000) %}  \n  {{ x }},{{ y }}  \n{% endfor %}  \n{% endfor %}  "
);
  
template.renderSync();  
// LoopIterationLimitError: loop iteration limit reached (<string>:2)  

```

--------------------------------

### Array Creation with Split Filter

Source: https://jg-rp.github.io/liquidscript/language/introduction

An example of creating an array of strings using the split filter.

```liquid
{% assign my_array = "apple, banana, cabbage" | split: ", " %}  

```

--------------------------------

### Whitespace Control - Without Control

Source: https://jg-rp.github.io/liquidscript/language/introduction

Demonstrates output without whitespace control.

```liquid
{% assign some_variable = false %}  
{% if some_variable != true %}  
Lets go!  
{% endif %}
```

--------------------------------

### Environment Configuration and Template Rendering

Source: https://jg-rp.github.io/liquidscript/introduction/loading-templates

Example demonstrating how to configure the LiquidScript Environment with a NodeFileSystemLoader and render a template synchronously.

```javascript
import { Environment, NodeFileSystemLoader } from "liquidscript";  
  
const env = new Environment({
  loader: new NodeFileSystemLoader("./templates/", {
    fileExtension: ".liquid",
  }),
});

const template = env.getTemplateSync("index.html");
const result = template.renderSync({
  heading: "Some List",
  page_title: "Awesome Title",
  people: [{ name: "John" }, { name: "Sally" }],
});

console.log(result);

```

--------------------------------

### Import and use LiquidScript without namespace (CJS)

Source: https://jg-rp.github.io/liquidscript/introduction/getting-started

Imports specific components from LiquidScript using CommonJS without a namespace.

```javascript
const { Template } = require("liquidscript");  
const template = Template.from("Hello, {{ you }}!");  
```

--------------------------------

### Import and use LiquidScript without namespace (ESM)

Source: https://jg-rp.github.io/liquidscript/introduction/getting-started

Imports specific components from LiquidScript using ESM without a namespace.

```javascript
import { Template } from "liquidscript";  
const template = Template.from("Hello, {{ you }}!");  
```

--------------------------------

### range example

Source: https://jg-rp.github.io/liquidscript/language/tags

Ranges are also valid sequences in for loop expressions. A range expression yields a sequence of integers inclusive of start and stop.

```liquid
{% for i in (1..4) %}
    {{ i }}
{% endfor %}

```

```text
1
2
3
4

```

--------------------------------

### Variable Assignment and Conditional Logic

Source: https://jg-rp.github.io/liquidscript/language/introduction

Demonstrates assigning variables and using an if statement to conditionally modify a greeting.

```liquid
{% assign title = collection.products.first.title %}  
{% assign user = session.user %}  
  
{% assign greeting = "Hello, user" %}  
{% if user %}  
    {% assign greeting = "Hello," | append: user.name %}  
{% endif %}  

```

--------------------------------

### Front Matter Loader (TypeScript)

Source: https://jg-rp.github.io/liquidscript/guides/custom-loaders

An example implementation of a front matter template loader by extending NodeFileSystemLoader and parsing YAML from the start of every template source file.

```typescript
import {  
  ContextScope,  
  NodeFileSystemLoader,  
  object,  
  TemplateSource,  
} from "liquidscript";  
  
import yaml from "js-yaml";  
  
const RE_FRONT_MATTER = /^\s*---\s*(.*?)\s*---\s*/ms;  
  
class FrontMatterLoader extends NodeFileSystemLoader {  
  public async getSource(name: string): Promise<TemplateSource> {  
    return this.loadMatter(await super.getSource(name));  
  }  
  
  public getSourceSync(name: string): TemplateSource {  
    return this.loadMatter(super.getSourceSync(name));  
  }  
  
  protected loadMatter(templateSource: TemplateSource): TemplateSource {  
    const match = templateSource.source.match(RE_FRONT_MATTER);  
    if (match) {  
      // TODO: check YAML schema and handle YAML errors  
      const matter = yaml.load(match[1]);  
      if (object.isContextScope(matter)) {  
        return new TemplateSource(  
          templateSource.source.slice(match[0].length),  
          templateSource.name,  
          matter,  
          templateSource.upToDate,  
          templateSource.upToDateSync  
        );  
      }
    }
    return templateSource;  
  }
}

```

--------------------------------

### Front Matter Loader (JavaScript)

Source: https://jg-rp.github.io/liquidscript/guides/custom-loaders

An example implementation of a front matter template loader by extending NodeFileSystemLoader and parsing YAML from the start of every template source file.

```javascript
import {  
  Environment,  
  NodeFileSystemLoader,  
  TemplateSource,  
} from "liquidscript";  
  
import yaml from "js-yaml";  
  
const RE_FRONT_MATTER = /^\s*---\s*(.*?)\s*---\s*/ms;  
  
class FrontMatterLoader extends NodeFileSystemLoader {  
  async getSource(name) {  
    return this.loadMatter(await super.getSource(name));  
  }  
  
  getSourceSync(name) {  
    return this.loadMatter(super.getSourceSync(name));  
  }  
  
  loadMatter(templateSource) {  
    const match = templateSource.source.match(RE_FRONT_MATTER);  
    if (match) {  
      // TODO: check YAML schema and handle YAML errors  
      const matter = yaml.load(match[1]);  
      return new TemplateSource(  
        templateSource.source.slice(match[0].length),  
        templateSource.name,  
        matter,  
        templateSource.upToDate,  
        templateSource.upToDateSync  
      );  
    }  
    return templateSource;  
  }  
}

```

--------------------------------

### Loop Iteration Limit Example

Source: https://jg-rp.github.io/liquidscript/guides/resource-limits

Shows how to set a loopIterationLimit and triggers a LoopIterationLimitError with nested for loops.

```javascript
import { Environment } from "liquidscript";  
  
const env = new Environment({
  loopIterationLimit: 999,
});  
  
const template = env.fromString(`  
{% for x in (1..100) %}  
{% for y in (1..100) %}  
  {{ x }},{{ y }}  
{% endfor %}  
{% endfor %}  
`);  
  
template.renderSync();  
// LoopIterationLimitError: loop iteration limit reached (<string>:2)  

```

--------------------------------

### divided_by filter examples

Source: https://jg-rp.github.io/liquidscript/language/filters

Demonstrates the 'divided_by' filter with integer and float division, including cases where inputs are strings.

```liquid
{{ 16 | divided_by: 4 }}
{{ 5 | divided_by: 3 }}

```

```text
4
1

```

```liquid
{{ 20 | divided_by: 7 }}
{{ 20 | divided_by: 7.0 }}

```

```text
2
2.857142857142857

```

```liquid
{{ "20" | divided_by: "7" }}
{{ "hello" | divided_by: 2 }}

```

```text
2
0

```

--------------------------------

### reverse filter example with array

Source: https://jg-rp.github.io/liquidscript/language/filters

Demonstrates the reverse filter on an array, showing how it reverses the order of elements.

```liquid
{% assign my_array = "apples, oranges, peaches, plums" | split: ", " -%}  
  
{{ my_array | reverse | join: ", " }}  

```

--------------------------------

### With Tag Example

Source: https://jg-rp.github.io/liquidscript/extra/tags

Example demonstrating the usage of the with tag to alias a nested variable.

```liquid
{% with product: collection.products.first %}  
  {{- product.title -}}  
{% endwith %}  
```

--------------------------------

### Output Stream Limit Example

Source: https://jg-rp.github.io/liquidscript/guides/resource-limits

Illustrates the OutputStreamLimitError by setting a low outputStreamLimit and rendering a template that exceeds it.

```javascript
import { Environment } from "liquidscript";  
  
const env = new Environment({
  outputStreamLimit: 20, // Very low, for demonstration purposes.  
});  
  
const template = env.fromString(`  
{% if false %}  
this is never rendered, so will not contribute the the output byte counter  
{% endif %}  
Hello, {{ you }}!   
`);  
  
template.renderSync({ you: "World" });  
// "\nHello, World!\n"  
  
template.renderSync({ you: "something longer that exceeds our limit" });  
// OutputStreamLimitError: output stream limit reached (<string>:5)  

```

--------------------------------

### Include Tag with With/As Example

Source: https://jg-rp.github.io/liquidscript/language/tags

Shows how to use 'with' and 'as' with the include tag to pass an object to the included template.

```liquid
{% comment %} I'm a partial template {% endcomment %}  
{{ greeting }}, World!  

```

```liquid
{% assign greetings = "Hello, Goodbye" | split: ", " %}  
{% include "greeting" with greetings[1] %}  

```

```text
Goodbye, World!  

```

--------------------------------

### Include Tag with For/As Example

Source: https://jg-rp.github.io/liquidscript/language/tags

Demonstrates using the 'for' and 'as' keywords with the include tag to iterate over a sequence.

```liquid
{% assign greetings = "Hello, Goodbye" | split: ", " %}  
{% include "partial_template" for greetings as greeting %}  

```

```text
Hello, World!  
Goodbye, World!  

```

--------------------------------

### first filter example

Source: https://jg-rp.github.io/liquidscript/language/filters

Illustrates the 'first' filter retrieving the first element from a split string.

```liquid
{{ "Ground control to Major Tom." | split: " " | first }}

```

```text
Ground

```

--------------------------------

### times

Source: https://jg-rp.github.io/liquidscript/language/filters

Example of using the times filter for multiplication.

```liquid
{{ 3 | times: 2 }}  
{{ "24" | times: "7" }}  
{{ 183.357 | times: 12 }}  

```

--------------------------------

### Checking for Emptiness

Source: https://jg-rp.github.io/liquidscript/language/tags

Example of checking if an array is not empty.

```liquid
{% if somearray != empty %}  
  Do something with the array.  
{% endif %}  

```

--------------------------------

### Literal Types Example

Source: https://jg-rp.github.io/liquidscript/language/introduction

Illustrates the use of literal strings, integers, floats, and booleans in variable assignments.

```liquid
{% assign first_name = "Sally" %}  
{% assign last_name = 'Smith' %}  
{% assign items_in_basket = 5 %}  
{% assign average_item_price = 3.99 %}  
{% assign discount = -0.47 %}  
{% assign special_offer = false %}  
{% assign more_available = true %}  

```

--------------------------------

### truncate

Source: https://jg-rp.github.io/liquidscript/language/filters

Example of using the truncate filter to shorten a string.

```liquid
{{ "Ground control to Major Tom." | truncate: 20 }}  
{{ "Ground control to Major Tom." | truncate: 25, ", and so on" }}  
{{ "Ground control to Major Tom." | truncate: 20, "" }}  

```

--------------------------------

### prepend filter example

Source: https://jg-rp.github.io/liquidscript/language/filters

Demonstrates the prepend filter, which concatenates a string to the beginning of the input string.

```liquid
{{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}  

```

--------------------------------

### Analyzing Partial Templates with FollowPartials Enabled

Source: https://jg-rp.github.io/liquidscript/guides/static-analysis

Example showing how to analyze a template that includes partials, with the `followPartials` option set to true.

```javascript
import { Environment, ObjectLoader } from "liquidscript";  
  
const templates = {  
  layout: `"
        {% include 'nav', title: page_name %}  
        {% render 'foot' with website as site_name %}  
    `,  
  nav: "{{ title }} nav bar",  
  foot: "a footer for {{ site_name }}",  
};

const env = new Environment({ loader: new ObjectLoader(templates) });  
const layout = env.getTemplateSync("layout");  
  
const analysis = layout.analyzeSync({ followPartials: true });  
console.log(analysis.variables);


```

--------------------------------

### strip_html filter example

Source: https://jg-rp.github.io/liquidscript/language/filters

Removes all HTML tags from a string.

```liquid
{{ "Have <em>you</em> read <strong>Ulysses</strong>?" | strip_html }}

```

--------------------------------

### floor filter examples

Source: https://jg-rp.github.io/liquidscript/language/filters

Demonstrates the 'floor' filter rounding numbers down to the nearest whole number.

```liquid
{{ 1.2 | floor }}
{{ 2.0 | floor }}
{{ 183.357 | floor }}
{{ -5.4 | floor }}
{{ "3.5" | floor }}

```

```text
1
2
183
-6
3

```

--------------------------------

### url_encode

Source: https://jg-rp.github.io/liquidscript/language/filters

Example of using the url_encode filter to encode a string for a URL.

```liquid
{{ My email address is bob@example.com! | url_encode }}  

```

--------------------------------

### url_decode

Source: https://jg-rp.github.io/liquidscript/language/filters

Example of using the url_decode filter to decode a URL-encoded string.

```liquid
{{ "My+email+address+is+bob%40example.com%21" | url_decode }}  

```

--------------------------------

### JavaScript Example Tag Implementation

Source: https://jg-rp.github.io/liquidscript/guides/custom-tags

This JavaScript code demonstrates the implementation of a custom tag, including tokenization and argument parsing.

```javascript
import { expressions, tokens } from "liquidscript";  
  
// Reuse the `include` tokenizer.  
const tokenize = expressions.include.makeTokenizer(  
  expressions.include.RE,  
  new Set([
    expressions.TOKEN_TRUE,  
    expressions.TOKEN_FALSE,  
    expressions.TOKEN_NIL,  
    expressions.TOKEN_NULL,  
  ])  
);

// Indicates the end of a `with` block.  
const TAG_ENDWITH = "endwith";  
const END_WITH_BLOCK = new Set([TAG_ENDWITH]);  

// ...  

```

```javascript
class WithTag {  
  parse(stream, environment) {  
    const token = stream.next();  
    stream.expect(tokens.TOKEN_EXPRESSION);  
    const args = this.parseExpression(stream.current);  
    stream.next();  
    const block = environment.parser.parseBlock(stream, END_WITH_BLOCK, token);  
    stream.expectTag(TAG_ENDWITH);  
    return new WithNode(token, args, block);  
  }
  
  parseExpression(expressionToken) {  
    const args = {};  
    const eStream = new expressions.ExpressionTokenStream(  
      tokenize(expressionToken.value, expressionToken.index)  
    );

    while (eStream.current.kind !== tokens.TOKEN_EOF) {  
      const [key, expr] = this.parseArgument(eStream);  
      args[key] = expr;  
      // Eat comma.  
      if (eStream.current.kind === expressions.TOKEN_COMMA) eStream.next();  
    }

    return args;  
  }
  
  parseArgument(eStream) {  
    const key = expressions.parseUnchainedIdentifier(eStream).toString();  
    eStream.next();  
    eStream.expect(expressions.TOKEN_COLON);  
    eStream.next(); // Eat colon  
    const val = expressions.filtered.parseObject(eStream);  
    eStream.next();  
    return [key, val];  
  }
}

// ...  

```

--------------------------------

### upcase

Source: https://jg-rp.github.io/liquidscript/language/filters

Example of using the upcase filter to convert a string to uppercase.

```liquid
{{ 'Hello, World!' | upcase }}  

```

--------------------------------

### strip filter example

Source: https://jg-rp.github.io/liquidscript/language/filters

Removes leading and trailing whitespace from a string.

```liquid
{{ "          So much room for activities          " | strip }}!
```

--------------------------------

### forloop.parentloop example

Source: https://jg-rp.github.io/liquidscript/language/tags

Access a parent `forloop` object when `for` tags are nested.

```liquid
{% assign colors = "Red, Blue, Green" | split: ", " %}
{% for product in collection.products %}
  {% for color in colors %}
    {% if forloop.parentloop.first %}
      <b>{{ color }} {{ product.title }}</b>
    {% else %}
      {{ color }} {{ product.title }}
    {% endif %}

  {% endfor %}
{% endfor %}

```

```text
<b>Red Hat</b>
<b>Blue Hat</b>
<b>Green Hat</b>
Red Shirt
Blue Shirt
Green Shirt
Red Pants
Blue Pants
Green Pants

```

--------------------------------

### Context Depth Limit Example

Source: https://jg-rp.github.io/liquidscript/guides/resource-limits

Illustrates the ContextDepthError by creating a recursive render scenario between 'foo' and 'bar' templates.

```javascript
import { Environment, ObjectLoader } from "liquidscript";  
  
const templates = {  
  foo: "{% render 'bar' %}",
  bar: "{% render 'foo' %}",
};
  
const env = new Environment({
  loader: new ObjectLoader(templates),
  maxContextDepth: 30,
});  
  
const template = env.fromString("{% render 'foo' %}");
template.renderSync();  
// ContextDepthError: maximum context depth reached, possible recursive render (bar:1)  

```

--------------------------------

### break tag example

Source: https://jg-rp.github.io/liquidscript/language/tags

Exits a loop early with the `{% break %}` tag.

```liquid
{% for product in collection.products %}
    {% if product.title == "Shirt" %}
        {% break %}
    {% endif %}
    {{ product.title }}
{% endfor %}

```

```text
Hat

```

--------------------------------

### modulo filter examples

Source: https://jg-rp.github.io/liquidscript/language/filters

Demonstrates the usage of the modulo filter with different numeric inputs, including string representations of numbers.

```liquid
{{ 3 | modulo: 2 }}  
{{ "24" | modulo: "7" }}  
{{ 183.357 | modulo: 12 }}  

```

--------------------------------

### Registering With Tag

Source: https://jg-rp.github.io/liquidscript/extra/tags

Example of how to register the WithTag with a LiquidScript Environment.

```javascript
import { Environment, extra } from "liquidscript";  
  
const env = new Environment();  
env.addTag("with", new extra.tags.WithTag());  
```

--------------------------------

### Registering IfNotTag

Source: https://jg-rp.github.io/liquidscript/extra/tags

Example of how to register the IfNotTag with a LiquidScript Environment.

```javascript
import { Environment, extra } from "liquidscript";

const env = new Environment();
env.addTag("if", new extra.tags.IfNotTag());

```
Tokens:
Raw