npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@reboot-ui/liquidjs

v9.7.0

Published

Liquid template engine by pure JavaScript: compatible to shopify, easy to extend.

Downloads

6

Readme

@reboot-ui/liquidjs

NOTICE This repo is one fork version for liquidjs, only serve for reboot-ui's requirements. If necessary, we are happly to re-contribute feature/bugfix to orignal repo :)

semver of @reboot-ui/liquidjs would keep same major/minor with the original repo, all synchronization/modification would be reflected in patch of version.

npm version downloads

liquidjs

npm version downloads Build Status Coveralls dependencies semantic-release GitHub issues GitHub contributors David David Dev DUB license Commitizen friendly open collective

A shopify compatible Liquid template engine in pure JavaScript. The purpose of this repo is to provide a standard Liquid implementation for the JavaScript community. All features, filters and tags in shopify/liquid are supposed to be built in LiquidJS, though there are still some differences and limitations (see below).

Version 9 has published, see how to migrate to 9.0.0!

Get Started

Install via npm:

npm install --save liquidjs
var { Liquid } = require('liquidjs');
var engine = new Liquid();

engine
    .parseAndRender('{{name | capitalize}}', {name: 'alice'})
    .then(console.log);     // outputs 'Alice'

Or include the UMD build, a live demo is available on jsfiddle: https://jsfiddle.net/x43eb0z6/. You may need a Promise polyfill for Node.js < 4 and ES5 browsers like IE and Android UC.

<script src="//unpkg.com/liquidjs/dist/liquid.min.js"></script>     <!--for production-->
<script src="//unpkg.com/liquidjs/dist/liquid.js"></script>         <!--for development-->

Also available from CLI:

echo '{{"hello" | capitalize}}' | npx liquidjs

For detailed documents, see:

  • The Wiki Page contains tutorials and advanced topics.
  • The API Reference provides detailed descriptions for classes, methods and properties.

Differences and Limitations

  • Dynamic file locating (enabled by default), that means layout/partial names are treated as variables in liquidjs. See #51.
  • Truthy and Falsy. All values except undefined, null, false are truthy, whereas in Ruby Liquid all except nil and false are truthy. See #26.
  • Number. In JavaScript we cannot distinguish or convert between float and integer, see #59. And when applied size filter, numbers always return 0, which is 8 for integer in ruby, cause they do not have a length property.
  • .to_liquid() is replaced by .toLiquid()
  • .to_s() is replaced by JavaScript .toString()

Features that available on shopify website but not on shopify/liquid repo will not be implemented in this repo, but there're some plugins available: https://github.com/harttle/liquidjs/wiki/Plugins

Related Packages

  • gulp-liquidjs: A shopify compatible Liquid template engine for Gulp using liquidjs.
  • grunt-liquify: A Grunt task to process Liquid using liquidjs. Use it to add Liquid magic to your scripts and css assets.
  • react-liquid: Liquid templating language component for React
  • @11ty/eleventy: A simpler static site generator. An alternative to Jekyll. Written in JavaScript. Transforms a directory of templates (of varying types) into HTML.

Contribute Guidelines

Contributors ✨

This project follows the all-contributors specification. Contributions of any kind are welcome! Thanks goes to these wonderful people:

donate to liquidjs collective