2

Plugins

harttle edited this page 2019-10-14 14:56:34 +08:00

Table of Contents

• Write a Plugin
• Use a Plugin
• Plugin List

A number of tags and filters can be encapsulated into a plugin, which will be typically installed via npm. This article provides information about how to create and use a plugin

Write a Plugin

A liquidjs plugin is simple function which takes the Liquid class as the first parameter and the Liquid instance for this. We can call liquidjs APIs on this to make certain changes, especially register filters and tags.

Now we'll make a plugin to upper case every letter of the input, save the following snippet to upup.js:

/**
 * Inside the plugin function, `this` refers to the Liquid instance.
 *
 * @param Liquid: provides facilities to implement tags and filters.
 */
module.exports = function (Liquid) {
    this.registerFilter('upup', x => x.toUpperCase());
}

Use a Plugin

Simply pass the plugin function into the .plugin() method:

const engine = new Liquid()

engine.plugin(require('./upup.js'));
engine
    .parseAndRender('{{ "foo" | upup }}')
    .then(console.log)  // outputs "FOO"

Plugin List

Since this library excludes certain features that are available on the Shopify platform but not on the Shopify/liquid repo, see https://github.com/harttle/liquidjs#differences-and-limitations.

Here's a list of plugins that backfill those features. Feel free to add yours, this file is publicly editable.

• Sections Tags (WIP): https://github.com/harttle/liquidjs-section-tags
• Color Filters: https://github.com/harttle/liquidjs-color-filters

• Home
• Tutorial
  • Render a Template File
  • Caching
  • Use with Express.js
  • Partials and Layouts
  • Whitespace Control
  • Register Filters/Tags
  • Plugins
• API
  • Options
  • Builtin Filters
  • Builtin Tags
  • Operators
  • Truthy and Falsy
• Misc
  • Migrate to 9.0.0

Liquid for JavaScript, authored by harttle.