Labyricorn/liquidjs
1
0
Fork 0
mirror of https://github.com/harttle/liquidjs.git synced 2026-09-17 05:10:40 -07:00
Code Issues Packages Projects Releases Wiki Activity

Deploying to gh-pages from @ harttle/liquidjs@ed15a52c26 🚀

Browse Source
This commit is contained in:
harttle
2026-06-07 16:27:46 +00:00
parent 1f4d8787e0
commit e5d9012ccb
135 changed files with 1173 additions and 1021 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tutorials/sync-and-async.html
+7 -6
View File
@@ -39,6 +39,7 @@
<script src="https://cdn.cookiehub.eu/c2/e8e44c93.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') return;
var cpm = {};
window.cookiehub.load(cpm);
});
@@ -99,8 +100,8 @@
</header>
<div class="article-content" itemprop="articleBody">
<p>LiquidJS supports both sync and async evaluate, and can be used with Promises. To reuse the same set of tag/filter implementations in both sync and async, LiquidJS tags are implemented as generators.</p>
<h2 id="Sync-and-Async-API" class="article-heading"><a href="#Sync-and-Async-API" class="headerlink" title="Sync and Async API"></a>Sync and Async API<a class="article-anchor" href="#Sync-and-Async-API" aria-hidden="true"></a></h2><p>All major methods on <a href="/api/classes/Liquid.html">Liquid</a> supports both sync and async. These methods return Promises:</p>
<p>LiquidJS supports both synchronous and asynchronous evaluation, and can be used with Promises. To reuse the same set of tag/filter implementations in both sync and async modes, LiquidJS tags are implemented as generators.</p>
<h2 id="Sync-and-Async-API" class="article-heading"><a href="#Sync-and-Async-API" class="headerlink" title="Sync and Async API"></a>Sync and Async API<a class="article-anchor" href="#Sync-and-Async-API" aria-hidden="true"></a></h2><p>All major methods on <a href="/api/classes/Liquid.html">Liquid</a> support both sync and async. These methods return Promises:</p>
<ul>
<li><code>render()</code></li>
<li><code>renderFile()</code></li>
@@ -133,11 +134,11 @@ engine<span class="token punctuation">.</span><span class="token function">regis
<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>All builtin tags are implemented this way and safe to use in both sync and async (I’ll call it <em>sync-compatible</em>). To make your custom tag <em>sync-compatible</em>, you’ll need to:</p>
<p>All built-in tags are implemented this way and are safe to use in both sync and async modes (I’ll call it <em>sync-compatible</em>). To make your custom tag <em>sync-compatible</em>, you’ll need to:</p>
<ul>
<li>declare render function as <code>* render()</code>, in which</li>
<li>do not directly <code>return &lt;Promise&gt;</code>, and</li>
<li>do not call any APIs that returns a Promise.</li>
<li>do not call any APIs that return a Promise.</li>
</ul>
<h2 id="Call-APIs-that-return-a-Promise" class="article-heading"><a href="#Call-APIs-that-return-a-Promise" class="headerlink" title="Call APIs that return a Promise"></a>Call APIs that return a Promise<a class="article-anchor" href="#Call-APIs-that-return-a-Promise" aria-hidden="true"></a></h2><p>But LiquidJS is Promise-friendly, right? You can still call Promise-based functions and wait for that Promise within tag implementations. Just replace <code>await</code> with <code>yield</code>. e.g. we’re calling <code>fs.readFile()</code> which returns a <code>Promise</code>:</p>
<pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token operator">*</span> <span class="token function">render</span> <span class="token punctuation">(</span>ctx<span class="token operator">:</span> Context<span class="token punctuation">,</span> emitter<span class="token operator">:</span> Emitter<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
@@ -167,7 +168,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="Async-only-Tags" class="article-heading"><a href="#Async-only-Tags" class="headerlink" title="Async only Tags"></a>Async only Tags<a class="article-anchor" href="#Async-only-Tags" aria-hidden="true"></a></h2><p>If your tag is intend to be used only asynchronously, it can be declared as <code>async render()</code> so you can use <code>await</code> in its implementation directly:</p>
<h2 id="Async-only-Tags" class="article-heading"><a href="#Async-only-Tags" class="headerlink" title="Async only Tags"></a>Async only Tags<a class="article-anchor" href="#Async-only-Tags" aria-hidden="true"></a></h2><p>If your tag is intended to be used only asynchronously, it can be declared as <code>async render()</code> so you can use <code>await</code> in its implementation directly:</p>
<pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">import</span> <span class="token punctuation">&#123;</span> toPromise<span class="token punctuation">,</span> TagToken<span class="token punctuation">,</span> Context<span class="token punctuation">,</span> Emitter<span class="token punctuation">,</span> TopLevelToken<span class="token punctuation">,</span> Value<span class="token punctuation">,</span> Tag<span class="token punctuation">,</span> Liquid <span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">'liquidjs'</span>
<span class="token comment">// Usage: &#123;% upper "alice" %&#125;</span>
@@ -187,7 +188,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2026-06-06T17:38:08.031Z" itemprop="dateModified">Last updated: 2026-06-06</time>
<time class="article-footer-updated" datetime="2026-06-07T16:27:07.442Z" itemprop="dateModified">Last updated: 2026-06-07</time>
<a href="drops.html" class="article-footer-prev" title="Liquid Drops"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="whitespace-control.html" class="article-footer-next" title="Whitespace Control"><span>Next</span><i class="icon-chevron-right"></i></a>
</footer>
</div>