mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-16 12:50:38 -07:00
Deploying to gh-pages from @ harttle/liquidjs@8db6c7b28d 🚀
This commit is contained in:
harttle
@@ -77,7 +77,7 @@
|
||||
<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="sync-and-async.html" class="sidebar-link current">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">Differences with Shopify/liquid</a><a href="contribution-guidelines.html" class="sidebar-link">Contribution Guidelines</a>
|
||||
<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 current">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">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">
|
||||
@@ -117,20 +117,48 @@
|
||||
</blockquote>
|
||||
|
||||
<h3 id="Await-Promises" class="article-heading"><a href="#Await-Promises" class="headerlink" title="Await Promises"></a>Await Promises<a class="article-anchor" href="#Await-Promises" aria-hidden="true"></a></h3><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> and keep <code>* render()</code> instead of <code>async render()</code>. e.g.</p>
|
||||
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> { TagToken, Context, Emitter, TopLevelToken } <span class="keyword">from</span> <span class="string">'liquidjs'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Usage: {% upper "alice" %}</span></span><br><span class="line"><span class="comment">// Output: ALICE</span></span><br><span class="line">engine.registerTag(<span class="string">'upper'</span>, {</span><br><span class="line"> <span class="attr">parse</span>: <span class="function"><span class="keyword">function</span>(<span class="params">tagToken: TagToken, remainTokens: TopLevelToken[]</span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.str = tagToken.args</span><br><span class="line"> },</span><br><span class="line"> * render: <span class="function"><span class="keyword">function</span>(<span class="params">ctx: Context</span>) </span>{</span><br><span class="line"> <span class="comment">// _evalValue will behave synchronously when called by synchronous API</span></span><br><span class="line"> <span class="comment">// in which case `ctx.sync == true`</span></span><br><span class="line"> <span class="keyword">var</span> str = <span class="keyword">yield</span> <span class="built_in">this</span>.liquid._evalValue(<span class="built_in">this</span>.str, ctx)</span><br><span class="line"> <span class="keyword">return</span> str.toUpperCase()</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
|
||||
<pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">import</span> <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> <span class="token keyword">from</span> <span class="token string">'liquidjs'</span>
|
||||
|
||||
<span class="token comment">// Usage: {% upper "alice" %}</span>
|
||||
<span class="token comment">// Output: ALICE</span>
|
||||
engine<span class="token punctuation">.</span><span class="token function">registerTag</span><span class="token punctuation">(</span><span class="token string">'upper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">parse</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>tagToken<span class="token operator">:</span> TagToken<span class="token punctuation">,</span> remainTokens<span class="token operator">:</span> TopLevelToken<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>str <span class="token operator">=</span> tagToken<span class="token punctuation">.</span>args
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token operator">*</span> <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>ctx<span class="token operator">:</span> Context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// _evalValue will behave synchronously when called by synchronous API</span>
|
||||
<span class="token comment">// in which case `ctx.sync == true`</span>
|
||||
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token keyword">this</span><span class="token punctuation">.</span>liquid<span class="token punctuation">.</span><span class="token function">_evalValue</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>str<span class="token punctuation">,</span> ctx<span class="token punctuation">)</span>
|
||||
<span class="token keyword">return</span> str<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</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>See this JSFiddle: <a target="_blank" rel="noopener external nofollow noreferrer" href="http://jsfiddle.net/ctj364up/6/">http://jsfiddle.net/ctj364up/6/</a>.</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>For tags that intended to be used only by async API, or those cannot be implemented synchronously, there’s no difference between using generator-base syntax or async syntax. I’ll call them <em>async-only tags</em>.</p>
|
||||
<p>For example, if the above <code>this.liquid._evalValue()</code> doesn’t respect <code>ctx.sync</code> and always returns a Promise, even if the tag is implemented using <code>* render()</code> and <code>yield this.liquid._evalValue()</code>, it will be rendered as <code><object Promise></code> anyway.</p>
|
||||
<p>For <em>async-only tags</em>, you can use async syntax at will. Be careful some APIs in LiquidJS return Promises and others return Generators. You’ll need <a href="/api/modules/liquid_.html#toPromise">toPromise</a> API to convert a Generator to a Promise, for example:</p>
|
||||
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> { TagToken, Context, Emitter, TopLevelToken, toPromise } <span class="keyword">from</span> <span class="string">'liquidjs'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Usage: {% upper "alice" %}</span></span><br><span class="line"><span class="comment">// Output: ALICE</span></span><br><span class="line">engine.registerTag(<span class="string">'upper'</span>, {</span><br><span class="line"> <span class="attr">parse</span>: <span class="function"><span class="keyword">function</span>(<span class="params">tagToken: TagToken, remainTokens: TopLevelToken[]</span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.str = tagToken.args; <span class="comment">// name</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">render</span>: <span class="keyword">async</span> <span class="function"><span class="keyword">function</span>(<span class="params">ctx: Context</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> str = <span class="keyword">await</span> toPromise(<span class="built_in">this</span>.liquid._evalValue(<span class="built_in">this</span>.str, ctx));</span><br><span class="line"> <span class="comment">// Or use the alternate API that returns a Promise</span></span><br><span class="line"> <span class="comment">// var str = await this.liquid.evalValue(this.str, ctx);</span></span><br><span class="line"> <span class="keyword">return</span> str.toUpperCase()</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
<pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">import</span> <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> toPromise <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'liquidjs'</span>
|
||||
|
||||
<span class="token comment">// Usage: {% upper "alice" %}</span>
|
||||
<span class="token comment">// Output: ALICE</span>
|
||||
engine<span class="token punctuation">.</span><span class="token function">registerTag</span><span class="token punctuation">(</span><span class="token string">'upper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">parse</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>tagToken<span class="token operator">:</span> TagToken<span class="token punctuation">,</span> remainTokens<span class="token operator">:</span> TopLevelToken<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>str <span class="token operator">=</span> tagToken<span class="token punctuation">.</span>args<span class="token punctuation">;</span> <span class="token comment">// name</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span>ctx<span class="token operator">:</span> Context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">toPromise</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>liquid<span class="token punctuation">.</span><span class="token function">_evalValue</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>str<span class="token punctuation">,</span> ctx<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// Or use the alternate API that returns a Promise</span>
|
||||
<span class="token comment">// var str = await this.liquid.evalValue(this.str, ctx);</span>
|
||||
<span class="token keyword">return</span> str<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</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>See this JSFiddle: <a target="_blank" rel="noopener external nofollow noreferrer" href="http://jsfiddle.net/ctj364up/5/">http://jsfiddle.net/ctj364up/5/</a>.</p>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2022-01-22T16:03:03.364Z" itemprop="dateModified">Last updated: 2022-01-22</time>
|
||||
<a href="parse-parameters.html" class="article-footer-prev" title="Parse Parameters"><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>
|
||||
<time class="article-footer-updated" datetime="2022-01-23T06:25:32.646Z" itemprop="dateModified">Last updated: 2022-01-23</time>
|
||||
<a href="render-tag-content.html" class="article-footer-prev" title="Render Tag Content"><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>
|
||||
</div>
|
||||
@@ -176,7 +204,7 @@
|
||||
</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="sync-and-async.html" class="mobile-nav-link current">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">Differences with Shopify/liquid</a><a href="contribution-guidelines.html" class="mobile-nav-link">Contribution Guidelines</a>
|
||||
<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 current">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">Differences with Shopify/liquid</a><a href="contribution-guidelines.html" class="mobile-nav-link">Contribution Guidelines</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user