JamesandGitHub
3492ff63f4
* feat: static variable analysis * Accept any iterable from `children`, `arguments`, etc. * Test analysis of standard tags * Use `TagToken.tokenizer` instead of creating a new one * Test analysis of netsted tags * Group variables by their root value * Test analysis of nested globals and locals * Analyze included and rendered templates WIP * Use existing tokenizer when constructing `Hash` * Improve test coverage * Analyze variables from `layout` and `block` tags * Test analysis of Jekyll style includes * Handle variables that start with a nested variable * Async analysis * Test non-standard tag end to end * Implement convenience analysis methods on the `Liquid` class * More analysis convenience methods * Accept string or template array * Draft static analysis docs * Deduplicate variables names * Fix isolated scope global variable map * Coerce variables to strings instead of extending String * Private map instead of extending Map * Fix e2e test * Tentatively implement analysis of aliased variables * Fix nested variable segments array * Update docs sidebar
liquidjs
A simple, expressive and safe Shopify / GitHub Pages compatible template engine in pure JavaScript. The purpose of this repo is to provide a standard Liquid implementation for the JavaScript community so that Jekyll sites, GitHub Pages and Shopify templates can be ported to Node.js without pain.
- Documentation
- Please star LiquidJS on GitHub!
- Financial support via GitHub Sponsors.
What's it like?
Basically there're two types of Liquid syntax: tags enclosed by {% %} and outputs enclosed by {{ }}. A Liquid template looks like:
{% if username %}
{{ username | append: ", welcome to LiquidJS!" | capitalize }}
{% endif %}
A live demo is also available and here's a quick tutorial for Liquid syntax.
Installation
Install from npm in Node.js:
npm install liquidjs
Or use the UMD bundle from jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.min.js"></script>
Or render directly from CLI using npx:
npx liquidjs --template 'Hello, {{ name }}!' --context '{"name": "Snake"}'
For more details, refer to the Setup Guide.
Who's Using LiquidJS?
- Eleventy: Eleventy, a simpler static site generator.
- Opensense: The smarter way to send email.
- Directus: an instant REST+GraphQL API and intuitive no-code data collaboration app for any SQL database.
- Semgrep: Lightweight static analysis for many languages.
- Rock: An open source CMS, Relationship Management System (RMS) and Church Management System (ChMS) all rolled into one.
- Mitosis: Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
- Pattern Lab: a frontend workshop environment that helps you build, view, test, and showcase your design system's UI components.
- Builder.io: the first and only headless CMS with a visual editor that lets you drag and drop with your components, directly within your current site or app. Completely API-driven, for cleaner code and simpler workflows.
- Microsoft Power Pages: a secure, enterprise-grade, low-code software as a service (SaaS) platform for creating, hosting, and administering modern external-facing business websites.
- Azure API Management developer portal: an automatically generated, fully customizable website with the documentation of your APIs.
- WISMOlabs: Post Purchase Experience platform for eCommerce retailers enhancing customer satisfaction by using LiquidJS to provide customizable post-purchase experiences through programmable email, SMS, order tracking pages, and webhooks.
Feel free to create a PR or contact me to add your use case into this list!
Financial Support
If you personally love LiquidJS or it's benefiting your business, please consider financially support us via GitHub Sponsors. Special thanks to our sponsors!
Contributors ✨
Want to contribute? see Contribution Guidelines. Thanks goes to these wonderful people:
