mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-15 12:20:40 -07:00
204 lines
18 KiB
HTML
204 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head prefix="og: http://ogp.me/ns#">
|
||
<meta charset="utf-8">
|
||
<title>Differences with Shopify/liquid | LiquidJS</title>
|
||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="LiquidJS is a simple, expressive and safe Shopify / Github Pages compatible template engine in pure JavaScript.">
|
||
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net/">
|
||
<link rel="manifest" href="/manifest.json">
|
||
<!-- Canonical links -->
|
||
<link rel="canonical" href="https://liquidjs.com/tutorials/differences.html">
|
||
<!-- Alternative links -->
|
||
|
||
|
||
<link rel="alternative" hreflang="en" href="https://liquidjs.com/tutorials/differences">
|
||
|
||
<link rel="alternative" hreflang="zh-cn" href="https://liquidjs.com/zh-cn/tutorials/differences">
|
||
|
||
|
||
<!-- Icon -->
|
||
<link rel="apple-touch-icon" sizes="57x57" href="../icon/apple-touch-icon-57x57.png">
|
||
<link rel="apple-touch-icon" sizes="114x114" href="../icon/apple-touch-icon-114x114.png">
|
||
<link rel="apple-touch-icon" sizes="72x72" href="../icon/apple-touch-icon-72x72.png">
|
||
<link rel="apple-touch-icon" sizes="144x144" href="../icon/apple-touch-icon-144x144.png">
|
||
<link rel="apple-touch-icon" sizes="60x60" href="../icon/apple-touch-icon-60x60.png">
|
||
<link rel="apple-touch-icon" sizes="120x120" href="../icon/apple-touch-icon-120x120.png">
|
||
<link rel="apple-touch-icon" sizes="76x76" href="../icon/apple-touch-icon-76x76.png">
|
||
<link rel="apple-touch-icon" sizes="152x152" href="../icon/apple-touch-icon-152x152.png">
|
||
<link rel="icon" type="image/png" href="../icon/favicon-196x196.png" sizes="196x196">
|
||
<link rel="icon" type="image/png" href="../icon/favicon-160x160.png" sizes="160x160">
|
||
<link rel="icon" type="image/png" href="../icon/favicon-96x96.png" sizes="96x96">
|
||
<link rel="icon" type="image/png" href="../icon/favicon-16x16.png" sizes="16x16">
|
||
<link rel="icon" type="image/png" href="../icon/favicon-32x32.png" sizes="32x32">
|
||
<meta name="msapplication-TileColor" content="#2f83cd">
|
||
<meta name="msapplication-TileImage" content="../icon/mstile-144x144.png">
|
||
|
||
<link rel="stylesheet" href="../css/navy.css">
|
||
|
||
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||
|
||
<body>
|
||
<div id="container">
|
||
<header id="header" class="wrapper">
|
||
<div id="header-inner" class="inner">
|
||
<h1 id="logo-wrap">
|
||
<a href="../index.html" id="logo">LiquidJS</a>
|
||
</h1>
|
||
<nav id="main-nav">
|
||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||
<div id="search-input-wrap">
|
||
<i id="search-input-icon" class="icon-search"></i>
|
||
<input type="search" id="search-input" placeholder="Search...">
|
||
</div>
|
||
</nav>
|
||
<div class="main-nav-link icon-nav-link">
|
||
<label><i class="icon-network"></i> <span class="icon-nav-title">English</span></label>
|
||
<select id="lang-select" data-canonical="tutorials/differences.html">
|
||
|
||
<option value="en" selected>English</option>
|
||
|
||
<option value="zh-cn">简体中文</option>
|
||
|
||
</select>
|
||
</div>
|
||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" class="main-nav-link icon-nav-link"><i class="icon-github"></i> <span class="icon-nav-title">Github</span></a>
|
||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://opencollective.com/liquidjs" class="main-nav-link icon-nav-link"><i class="icon-opencollective"></i> <span class="icon-nav-title">Support</span></a>
|
||
<a id="mobile-nav-toggle">
|
||
<span class="mobile-nav-toggle-bar"></span>
|
||
<span class="mobile-nav-toggle-bar"></span>
|
||
<span class="mobile-nav-toggle-bar"></span>
|
||
</a>
|
||
</div>
|
||
</header>
|
||
|
||
<div id="content-wrap">
|
||
<div id="content" class="wrapper">
|
||
<div id="content-inner">
|
||
<aside id="sidebar" role="navigation">
|
||
<div class="inner">
|
||
<strong class="sidebar-title">Getting Started</strong><a href="intro-to-liquid.html" class="sidebar-link">Intro to Liquid</a><a href="setup.html" class="sidebar-link">Setup</a><a href="options.html" class="sidebar-link">Options</a><a href="render-file.html" class="sidebar-link">Render Files</a><a href="partials-and-layouts.html" class="sidebar-link">Includes and Layouts</a><a href="use-in-expressjs.html" class="sidebar-link">Use in Express.js</a><strong class="sidebar-title">Advanced</strong><a href="caching.html" class="sidebar-link">Caching</a><a href="register-filters-tags.html" class="sidebar-link">Register Filters/Tags</a><a href="access-scope-in-filters.html" class="sidebar-link">Access Scope in Filters</a><a href="parse-parameters.html" class="sidebar-link">Parse Parameters</a><a href="render-tag-content.html" class="sidebar-link">Render Tag Content</a><a href="sync-and-async.html" class="sidebar-link">Sync and Async</a><a href="whitespace-control.html" class="sidebar-link">Whitespace Control</a><a href="plugins.html" class="sidebar-link">Plugins</a><a href="operators.html" class="sidebar-link">Operators</a><a href="truthy-and-falsy.html" class="sidebar-link">Truthy and Falsy</a><strong class="sidebar-title">Miscellaneous</strong><a href="migrate-to-9.html" class="sidebar-link">Migrate to LiquidJS 9</a><a href="changelog.html" class="sidebar-link">Changelog</a><a href="differences.html" class="sidebar-link current">Differences with Shopify/liquid</a><a href="contribution-guidelines.html" class="sidebar-link">Contribution Guidelines</a>
|
||
</div>
|
||
</aside>
|
||
<article class="article-container" itemscope itemtype="http://schema.org/Article">
|
||
<div class="article-inner">
|
||
<div class="article">
|
||
<div class="inner">
|
||
<header class="article-header">
|
||
<h1 class="article-title" itemprop="name">Differences with Shopify/liquid</h1>
|
||
|
||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/differences.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
|
||
|
||
</header>
|
||
<div class="article-content" itemprop="articleBody">
|
||
<h2 id="Compatibility" class="article-heading"><a href="#Compatibility" class="headerlink" title="Compatibility"></a>Compatibility<a class="article-anchor" href="#Compatibility" aria-hidden="true"></a></h2><p>Being compatible the Ruby version is one of our priorities. Liquid language is originally <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid">implemented in Ruby</a> and used by Shopify, Jekyll and thus Github Pages, as you can see it’s one of the most popular template engines in Ruby. There’re lots of people using LiquidJS to serve their templates originally written for Shopify themes and Jekyll sites.</p>
|
||
<p>So “being compatible” means serve developers from Shopify and Jekyll well:</p>
|
||
<ul>
|
||
<li><strong>Well-formed Liquid template should work just fine in LiquidJS</strong>. For example, <code>forloop.index</code> should be 1-indexed, <code>nil</code> should be rendered as empty string rather than <code>undefined</code>, etc. Although some features (e.g. <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/236">#236</a>) are not feasible in JavaScript, at least we’re trying to implement all the semantics of Liquid language.</li>
|
||
<li><strong>All filters and tags in <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid">shopify/liquid</a> are supposed to be built in LiquidJS</strong>. But not those business-logic specific tags/filters typically defined by Shopify platform. Those features should be maintained as <a href="./plugins.html#Plugin-List">plugins</a>. For filters/tags that are not business-logic specific, like <code>{% layout %}</code>, and extremely useful, feel free to file an issue.</li>
|
||
</ul>
|
||
<p>In the meantime, it’s now implemented in JavaScript, that means it has to be more powerful:</p>
|
||
<ul>
|
||
<li><strong>Async as first-class citizen</strong>. Filters and tags can be implemented asynchronously by return a <code>Promise</code>.</li>
|
||
<li><strong>Also can be sync</strong>. For scenarios that are not I/O intensive, render synchronously can be much faster. You can call synchronous APIs like <code>.renderSync()</code> as long as all the filters and tags in template support to be rendered synchronously. All builtin filters/tags support both sync and async render.</li>
|
||
<li><strong><a href="https://liquidjs.com/tutorials/render-file.html#Abstract-File-System">Abstract file system</a></strong>. Along with async feature, LiquidJS can be used to serve templates stored in Databases <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/discussions/414">#414</a>, on remote HTTP server <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/discussions/485">#485</a>, and so on.</li>
|
||
<li><strong>Additional tags and filters</strong> like <code>layout</code> and <code>json</code>.</li>
|
||
</ul>
|
||
<h2 id="Differences" class="article-heading"><a href="#Differences" class="headerlink" title="Differences"></a>Differences<a class="article-anchor" href="#Differences" aria-hidden="true"></a></h2><p>Though we’re trying to be compatible with the Ruby version, there are still some differences:</p>
|
||
<ul>
|
||
<li>Truthy and Falsy. All values except <code>undefined</code>, <code>null</code>, <code>false</code> are truthy, whereas in Ruby Liquid all except <code>nil</code> and <code>false</code> are truthy. See <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/pull/26">#26</a>.</li>
|
||
<li>Number. In JavaScript we cannot distinguish or convert between <code>float</code> and <code>integer</code>, see <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/59">#59</a>. And when applied <code>size</code> filter, numbers always return 0, which is 8 for integer in ruby, cause they do not have a <code>length</code> property.</li>
|
||
<li><a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid/wiki/Introduction-to-Drops">.to_liquid()</a> is replaced by <code>.toLiquid()</code></li>
|
||
<li><a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.rubydoc.info/gems/liquid/Liquid/Drop">.to_s()</a> is replaced by JavaScript <code>.toString()</code></li>
|
||
<li>Iteration order for objects. The iteration order of JavaScript objects, and thus LiquidJS objects, is a combination of the insertion order for string keys, and ascending order for number-like keys, while the iteration order of Ruby Hash is simply the insertion order.</li>
|
||
<li>Sort stability. The <a href="https://liquidjs.com/filters/sort.html">sort</a> stability is also not defined in both shopify/liquid and LiquidJS, but it’s <a target="_blank" rel="noopener external nofollow noreferrer" href="https://v8.dev/features/stable-sort">considered stable</a> for LiquidJS in Node.js 12+ and Google Chrome 70+.</li>
|
||
<li>Trailing unmatched characters inside filters are allowed in shopify/liquid but not in LiquidJS. It means filter arguments without a colon like <code>{{ "a b" | split " "}}</code> will throw an error in LiquidJS. This is intended to improve Liquid usability, see <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/208">#208</a> and <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/212">#212</a>.</li>
|
||
<li>LiquidJS has additional tags: <a href="https://liquidjs.com/tags/layout.html">layout</a> and corresponding <code>block</code> tag.</li>
|
||
<li>LiquidJS has additional filters: <a href="https://liquidjs.com/filters/json.html">json</a>.</li>
|
||
</ul>
|
||
|
||
</div>
|
||
<footer class="article-footer">
|
||
<time class="article-footer-updated" datetime="2022-10-17T19:06:28.671Z" itemprop="dateModified">Last updated: 2022-10-17</time>
|
||
<a href="changelog.html" class="article-footer-prev" title="Changelog"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="contribution-guidelines.html" class="article-footer-next" title="Contribution Guidelines"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
<aside id="article-toc" role="navigation">
|
||
<div id="article-toc-inner">
|
||
<div id="article-toc-inner-list">
|
||
<strong class="sidebar-title">Contents</strong>
|
||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Compatibility"><span class="toc-text">Compatibility</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Differences"><span class="toc-text">Differences</span></a></li></ol>
|
||
</div>
|
||
<a href="#" id="article-toc-top">Back to Top</a>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer id="footer" class="wrapper">
|
||
<div class="inner">
|
||
<div id="footer-copyright">
|
||
© 2022 <a href="https://github.com/harttle/liquidjs/graphs/contributors" rel="external nofollow noreferrer" target="_blank">Harttle</a><br>
|
||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>.
|
||
</div>
|
||
<div id="footer-links">
|
||
<a href="https://twitter.com/harttleharttle" rel="external nofollow noreferrer" class="footer-link" target="_blank"><i class="icon-twitter"></i></a>
|
||
<a href="https://www.patreon.com/harttle" rel="external nofollow noreferrer" class="footer-link" target="_blank"><i class="icon-patreon"></i></a>
|
||
<a href="https://opencollective.com/liquidjs" rel="external nofollow noreferrer" class="footer-link" target="_blank"><i class="icon-opencollective"></i></a>
|
||
<a href="https://github.com/harttle/liquidjs" rel="external nofollow noreferrer" class="footer-link" target="_blank"><i class="icon-github"></i></a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
</div>
|
||
<div id="mobile-nav-dimmer"></div>
|
||
<nav id="mobile-nav">
|
||
<div id="mobile-nav-inner">
|
||
<ul id="mobile-nav-list">
|
||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||
</ul>
|
||
|
||
<div class="mobile-sidebar-list">
|
||
<strong class="mobile-nav-title">Getting Started</strong><a href="intro-to-liquid.html" class="mobile-nav-link">Intro to Liquid</a><a href="setup.html" class="mobile-nav-link">Setup</a><a href="options.html" class="mobile-nav-link">Options</a><a href="render-file.html" class="mobile-nav-link">Render Files</a><a href="partials-and-layouts.html" class="mobile-nav-link">Includes and Layouts</a><a href="use-in-expressjs.html" class="mobile-nav-link">Use in Express.js</a><strong class="mobile-nav-title">Advanced</strong><a href="caching.html" class="mobile-nav-link">Caching</a><a href="register-filters-tags.html" class="mobile-nav-link">Register Filters/Tags</a><a href="access-scope-in-filters.html" class="mobile-nav-link">Access Scope in Filters</a><a href="parse-parameters.html" class="mobile-nav-link">Parse Parameters</a><a href="render-tag-content.html" class="mobile-nav-link">Render Tag Content</a><a href="sync-and-async.html" class="mobile-nav-link">Sync and Async</a><a href="whitespace-control.html" class="mobile-nav-link">Whitespace Control</a><a href="plugins.html" class="mobile-nav-link">Plugins</a><a href="operators.html" class="mobile-nav-link">Operators</a><a href="truthy-and-falsy.html" class="mobile-nav-link">Truthy and Falsy</a><strong class="mobile-nav-title">Miscellaneous</strong><a href="migrate-to-9.html" class="mobile-nav-link">Migrate to LiquidJS 9</a><a href="changelog.html" class="mobile-nav-link">Changelog</a><a href="differences.html" class="mobile-nav-link current">Differences with Shopify/liquid</a><a href="contribution-guidelines.html" class="mobile-nav-link">Contribution Guidelines</a>
|
||
</div>
|
||
|
||
</div>
|
||
<div id="mobile-button-list">
|
||
<a href="https://github.com/harttle/liquidjs" class="mobile-nav-link" rel="external" target="_blank"><i class="icon-github"></i></a>
|
||
<a href="https://opencollective.com/liquidjs" class="mobile-nav-link" rel="external" target="_blank"><i class="icon-opencollective"></i></a>
|
||
<div id="mobile-lang-select-wrap" class="mobile-nav-link">
|
||
<label for="mobile-lang-select"><i class="icon-network"></i></label>
|
||
<select id="mobile-lang-select" data-canonical="tutorials/differences.html">
|
||
|
||
<option value="en" selected>English</option>
|
||
|
||
<option value="zh-cn">简体中文</option>
|
||
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
|
||
<script src="../js/main.js"></script>
|
||
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||
<script>
|
||
document.getElementById('search-input-wrap').classList.add('on');
|
||
docsearch({
|
||
apiKey: '01f36cc168657a26a385308b9e721bc6',
|
||
indexName: 'liquidjs',
|
||
inputSelector: '#search-input',
|
||
debug: false
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |