toshiki-notebook/assets/application_vitepress-plugin-shiki-twoslash_api_annotations.md.a02512e8.js

95 lines
34 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{_ as r,c as o,z as s,E as e,B as p,a,R as n,G as c,o as t}from"./chunks/framework.ade46834.js";const Xn=JSON.parse('{"title":"Meta Annotations","description":"Annotations provide a way to provide outside commentary on your code.","frontmatter":{"description":"Annotations provide a way to provide outside commentary on your code.","title":"Meta Annotations"},"headers":[],"relativePath":"application/vitepress-plugin-shiki-twoslash/api/annotations.md","filePath":"application/vitepress-plugin-shiki-twoslash/api/annotations.md","lastUpdated":1694919393000}'),i={name:"application/vitepress-plugin-shiki-twoslash/api/annotations.md"},d=s("h1",{id:"queries",tabindex:"-1"},[a("Queries "),s("a",{class:"header-anchor",href:"#queries","aria-label":'Permalink to "Queries"'},"")],-1),_=s("p",null,"Sometimes the thing you want to say is about the code, annotations provide a way to provide outside commentary on your code.",-1),y=s("h2",{id:"annotate-left-right-overrides-text",tabindex:"-1"},[s("code",null,"@annotate: [left|right] [overrides] - [text]"),a(),s("a",{class:"header-anchor",href:"#annotate-left-right-overrides-text","aria-label":'Permalink to "`@annotate: [left|right] [overrides] - [text]`"'},"")],-1),h=s("p",null,"Annotate has a lot more controls than most of the other Twoslash commands, because each use of it probably needs to feel a bit different. Here's an example based on the TypeScript home page, click it to get it running so we can talk about what it does:",-1),u={class:"vp-code-group vp-adaptive-theme"},m=n('<div class="tabs"><input type="radio" name="group-2Cd2a" id="tab-bRqxTBx" checked="checked"><label for="tab-bRqxTBx">output</label><input type="radio" name="group-2Cd2a" id="tab-wDp3pR9"><label for="tab-wDp3pR9">markdown</label></div>',1),g={class:"blocks"},B={class:"language-ts vp-adaptive-theme active line-numbers-mode"},v=s("button",{title:"Copy Code",class:"copy"},null,-1),b=s("span",{class:"lang"},"ts",-1),f={class:"language-ts"},D={class:"tag-container"},T={class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"},active:"true"},w=s("div",{class:"language-id"},"ts",-1),A={class:"code-container"},q=s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"function"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#839496"}},[a("("),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(") {")])],-1),C={class:"line"},x=s("span",{style:{color:"#839496"}}," ",-1),k=s("span",{style:{color:"#859900"}},"if",-1),S=s("span",{style:{color:"#839496"}}," (",-1),P={style:{color:"#268BD2"}},I=s("data-lsp",{lsp:"any"},"orr",-1),V=s("span",{style:{color:"#839496"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),E=n('<span style="color:#859900;">&gt;</span><span style="color:#839496;"> </span><span style="color:#D33682;">10</span><span style="color:#839496;">) </span><span style="color:#859900;">return</span><span style="color:#839496;"> </span>',6),R=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),N=s("span",{style:{color:"#839496"}},".",-1),z=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),M=n('<span style="color:#839496;">(</span><span style="color:#D33682;">0</span><span style="color:#839496;">, </span><span style="color:#D33682;">10</span><span style="color:#839496;">)</span>',5),F=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),L=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),X=s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"return"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),Y=s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")],-1),J={class:"twoslash-annotation left",style:{top:"0rem"}},$={style:{transform:"translateX(8px) translateY(27px) rotate(90deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},G=s("path",{d:"M1 39C1.5 32.7511 6.1 17.5173 20.5 6.57333M11.5 4.04L27 0.999998C24.8333 4.88444 20.5 13.16 20.5 15.1867",stroke:"black"},null,-1),O=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(3deg)"}},"Discovered a typo, the param is arr, not orr!",-1),H={class:"tag-container"},Q={class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"},active:"true"},U=s("div",{class:"language-id"},"ts",-1),j={class:"code-container"},W=s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"function"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#657B83"}},[a("("),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(") {")])],-1),K={class:"line"},Z=s("span",{style:{color:"#657B83"}}," ",-1),ss=s("span",{style:{color:"#859900"}},"if",-1),as=s("span",{style:{color:"#657B83"}}," (",-1),ns={style:{color:"#268BD2"}},os=s("data-lsp",{lsp:"any"},"orr",-1),ts=s("span",{style:{color:"#657B83"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),ls=n('<span style="color:#859900;">&gt;</span><span style="color:#657B83;"> </span><span style="color:#D33682;">10</span><span style="color:#657B83;">) </span><span style="color:#859900;">return</span><span style="color:#657B83;"> </span>',6),es=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),ps=s("span",{style:{color:"#657B83"}},".",-1),rs=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),cs=n('<span style="color:#657B83;">(</span><span style="color:#D33682;">0</span><span style="color:#657B83;">, </span><span style="color:#D33682;">10</span><span style="color:#657B83;">)</span>',5),is=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),ds=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),_s=s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"return"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),ys=s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")],-1),hs={class:"twoslash-annotation left",style:{top:"0rem"}},us={style:{transform:"translateX(8px) translateY(27px) rotate(90deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},ms=s("path",{d:"M1 39C1.5 32.7511 6.1 17.5173 20.5 6.57333M11.5 4.04L27 0.999998C24.8333 4.88444 20.5 13.16 20.5 15.1867",stroke:"black"},null,-1),gs=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(3deg)"}},"Discovered a typo, the param is arr, not orr!",-1),Bs=s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")],-1),vs=n(`<div class="language-md vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">md</span><pre class="shiki solarized-dark vp-code-dark"><code><span class="line"><span style="color:#839496;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#586E75;font-style:italic;">// @errors: 2304</span></span>
<span class="line"><span style="color:#586E75;font-style:italic;">// @strict: false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#93A1A1;font-weight:bold;">function</span><span style="color:#839496;"> </span><span style="color:#268BD2;">compact</span><span style="color:#839496;">(arr) {</span></span>
<span class="line"><span style="color:#839496;"> </span><span style="color:#859900;">if</span><span style="color:#839496;"> (</span><span style="color:#268BD2;">orr</span><span style="color:#839496;">.length </span><span style="color:#859900;">&gt;</span><span style="color:#839496;"> </span><span style="color:#D33682;">10</span><span style="color:#839496;">) </span><span style="color:#859900;">return</span><span style="color:#839496;"> </span><span style="color:#268BD2;">arr</span><span style="color:#839496;">.</span><span style="color:#268BD2;">trim</span><span style="color:#839496;">(</span><span style="color:#D33682;">0</span><span style="color:#839496;">, </span><span style="color:#D33682;">10</span><span style="color:#839496;">)</span></span>
<span class="line"><span style="color:#839496;"> </span><span style="color:#859900;">return</span><span style="color:#839496;"> </span><span style="color:#268BD2;">arr</span></span>
<span class="line"><span style="color:#839496;">}</span></span>
<span class="line"><span style="color:#586E75;font-style:italic;">// @annotate: left { &quot;arrowRot&quot;: &quot;90deg 8px 27px&quot;, &quot;textDegree&quot;: &quot;3deg&quot;, &quot;top&quot;: &quot;0rem&quot; } - Discovered a typo, the param is arr, not orr!</span></span>
<span class="line"><span style="color:#839496;">\`\`\`</span></span></code></pre><pre class="shiki solarized-light vp-code-light"><code><span class="line"><span style="color:#657B83;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#93A1A1;font-style:italic;">// @errors: 2304</span></span>
<span class="line"><span style="color:#93A1A1;font-style:italic;">// @strict: false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#586E75;font-weight:bold;">function</span><span style="color:#657B83;"> </span><span style="color:#268BD2;">compact</span><span style="color:#657B83;">(arr) {</span></span>
<span class="line"><span style="color:#657B83;"> </span><span style="color:#859900;">if</span><span style="color:#657B83;"> (</span><span style="color:#268BD2;">orr</span><span style="color:#657B83;">.length </span><span style="color:#859900;">&gt;</span><span style="color:#657B83;"> </span><span style="color:#D33682;">10</span><span style="color:#657B83;">) </span><span style="color:#859900;">return</span><span style="color:#657B83;"> </span><span style="color:#268BD2;">arr</span><span style="color:#657B83;">.</span><span style="color:#268BD2;">trim</span><span style="color:#657B83;">(</span><span style="color:#D33682;">0</span><span style="color:#657B83;">, </span><span style="color:#D33682;">10</span><span style="color:#657B83;">)</span></span>
<span class="line"><span style="color:#657B83;"> </span><span style="color:#859900;">return</span><span style="color:#657B83;"> </span><span style="color:#268BD2;">arr</span></span>
<span class="line"><span style="color:#657B83;">}</span></span>
<span class="line"><span style="color:#93A1A1;font-style:italic;">// @annotate: left { &quot;arrowRot&quot;: &quot;90deg 8px 27px&quot;, &quot;textDegree&quot;: &quot;3deg&quot;, &quot;top&quot;: &quot;0rem&quot; } - Discovered a typo, the param is arr, not orr!</span></span>
<span class="line"><span style="color:#657B83;">\`\`\`</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div>`,1),bs=n("<p>First up, cool — it adds some text to the left hand side of the code. It features quite a few different options, so lets go through them one by one:</p><ul><li><p><code>left</code> or <code>right</code>: It&#39;s currently <code>left</code>. It&#39;s worth noting the arrow flips also, and <code>90deg</code> isn&#39;t a great option. Let&#39;s look at that next.</p></li><li><p><code>{ &quot;arrrowRot&quot;: &quot;90deg 8px 27px&quot; }</code> - This JSON object is used to manipulate the annotation, you have 3 controls for arrow positioning and rotation: <code>degrees x y</code>. I recommend keeping those in degrees and px, but it&#39;s your life. These are overrides from defaults which are okay, but not really something you ever want to ship.</p></li><li><p><code>{ &quot;textDegree&quot;: &quot;3deg&quot; }</code> - Rotates the text, you probably want something between <code>-3deg</code> and <code>3deg</code>. Optional, defaults to <code>0</code>.</p></li><li><p><code>{ &quot;top&quot;: &quot;0rem&quot; }</code> - Sets the y coordinates for the annotation relative to the code sample, if it&#39;s not included then it becomes <code>[lineNum]rem</code>.</p></li></ul><p>What&#39;s not included in this sample is <code>flipped</code>, which can be used to flip the arrow&#39;s orientation. Here&#39;s some examples:</p><p>A horizontal right example:</p>",4),fs={class:"vp-code-group vp-adaptive-theme"},Ds=n('<div class="tabs"><input type="radio" name="group-0BeR2" id="tab-k40gkd8" checked="checked"><label for="tab-k40gkd8">output</label><input type="radio" name="group-0BeR2" id="tab-zJsPamt"><label for="tab-zJsPamt">markdown</label></div>',1),Ts={class:"blocks"},ws={class:"language-ts vp-adaptive-theme active line-numbers-mode"},As=s("button",{title:"Copy Code",class:"copy"},null,-1),qs=s("span",{class:"lang"},"ts",-1),Cs={class:"language-ts"},xs={class:"tag-container"},ks={class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"},active:"true"},Ss=s("div",{class:"language-id"},"ts",-1),Ps={class:"code-container"},Is=s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"function"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#839496"}},[a("("),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(") {")])],-1),Vs={class:"line"},Es=s("span",{style:{color:"#839496"}}," ",-1),Rs=s("span",{style:{color:"#859900"}},"if",-1),Ns=s("span",{style:{color:"#839496"}}," (",-1),zs={style:{color:"#268BD2"}},Ms=s("data-lsp",{lsp:"any"},"orr",-1),Fs=s("span",{style:{color:"#839496"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),Ls=n('<span style="color:#859900;">&gt;</span><span style="color:#839496;"> </span><span style="color:#D33682;">10</span><span style="color:#839496;">) </span><span style="color:#859900;">return</span><span style="color:#839496;"> </span>',6),Xs=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),Ys=s("span",{style:{color:"#839496"}},".",-1),Js=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),$s=n('<span style="color:#839496;">(</span><span style="color:#D33682;">0</span><span style="color:#839496;">, </span><span style="color:#D33682;">10</span><span style="color:#839496;">)</span>',5),Gs=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),Os=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),Hs=s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"return"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),Qs=s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")],-1),Us={class:"twoslash-annotation right",style:{top:"3rem"}},js={style:{transform:"translateX(-10px) translateY(-10px) rotate(-50deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Ws=s("path",{d:"M27 39C26.5 32.7511 21.9 17.5173 7.5 6.57333M16.5 4.04L0.999999 0.999998C3.16667 4.88444 7.5 13.16 7.5 15.1867",stroke:"black"},null,-1),Ks=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(0deg)"}},"Discovered a typo, the param is arr, not orr!",-1),Zs={class:"tag-container"},sa={class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"},active:"true"},aa=s("div",{class:"language-id"},"ts",-1),na={class:"code-container"},oa=s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"function"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#657B83"}},[a("("),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(") {")])],-1),ta={class:"line"},la=s("span",{style:{color:"#657B83"}}," ",-1),ea=s("span",{style:{color:"#859900"}},"if",-1),pa=s("span",{style:{color:"#657B83"}}," (",-1),ra={style:{color:"#268BD2"}},ca=s("data-lsp",{lsp:"any"},"orr",-1),ia=s("span",{style:{color:"#657B83"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),da=n('<span style="color:#859900;">&gt;</span><span style="color:#657B83;"> </span><span style="color:#D33682;">10</span><span style="color:#657B83;">) </span><span style="color:#859900;">return</span><span style="color:#657B83;"> </span>',6),_a=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),ya=s("span",{style:{color:"#657B83"}},".",-1),ha=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),ua=n('<span style="color:#657B83;">(</span><span style="color:#D33682;">0</span><span style="color:#657B83;">, </span><span style="color:#D33682;">10</span><span style="color:#657B83;">)</span>',5),ma=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),ga=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),Ba=s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"return"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),va=s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")],-1),ba={class:"twoslash-annotation right",style:{top:"3rem"}},fa={style:{transform:"translateX(-10px) translateY(-10px) rotate(-50deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Da=s("path",{d:"M27 39C26.5 32.7511 21.9 17.5173 7.5 6.57333M16.5 4.04L0.999999 0.999998C3.16667 4.88444 7.5 13.16 7.5 15.1867",stroke:"black"},null,-1),Ta=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(0deg)"}},"Discovered a typo, the param is arr, not orr!",-1),wa=s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")],-1),Aa=n(`<div class="language-md vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">md</span><pre class="shiki solarized-dark vp-code-dark"><code><span class="line"><span style="color:#839496;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#586E75;font-style:italic;">// @errors: 2304</span></span>
<span class="line"><span style="color:#586E75;font-style:italic;">// @strict: false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#93A1A1;font-weight:bold;">function</span><span style="color:#839496;"> </span><span style="color:#268BD2;">compact</span><span style="color:#839496;">(arr) {</span></span>
<span class="line"><span style="color:#839496;"> </span><span style="color:#859900;">if</span><span style="color:#839496;"> (</span><span style="color:#268BD2;">orr</span><span style="color:#839496;">.length </span><span style="color:#859900;">&gt;</span><span style="color:#839496;"> </span><span style="color:#D33682;">10</span><span style="color:#839496;">) </span><span style="color:#859900;">return</span><span style="color:#839496;"> </span><span style="color:#268BD2;">arr</span><span style="color:#839496;">.</span><span style="color:#268BD2;">trim</span><span style="color:#839496;">(</span><span style="color:#D33682;">0</span><span style="color:#839496;">, </span><span style="color:#D33682;">10</span><span style="color:#839496;">)</span></span>
<span class="line"><span style="color:#839496;"> </span><span style="color:#859900;">return</span><span style="color:#839496;"> </span><span style="color:#268BD2;">arr</span></span>
<span class="line"><span style="color:#839496;">}</span></span>
<span class="line"><span style="color:#586E75;font-style:italic;">// @annotate: left { &quot;arrowRot&quot;: &quot;90deg 8px 27px&quot;, &quot;textDegree&quot;: &quot;3deg&quot;, &quot;top&quot;: &quot;0rem&quot; } - Discovered a typo, the param is arr, not orr!</span></span>
<span class="line"><span style="color:#839496;">\`\`\`</span></span></code></pre><pre class="shiki solarized-light vp-code-light"><code><span class="line"><span style="color:#657B83;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#93A1A1;font-style:italic;">// @errors: 2304</span></span>
<span class="line"><span style="color:#93A1A1;font-style:italic;">// @strict: false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#586E75;font-weight:bold;">function</span><span style="color:#657B83;"> </span><span style="color:#268BD2;">compact</span><span style="color:#657B83;">(arr) {</span></span>
<span class="line"><span style="color:#657B83;"> </span><span style="color:#859900;">if</span><span style="color:#657B83;"> (</span><span style="color:#268BD2;">orr</span><span style="color:#657B83;">.length </span><span style="color:#859900;">&gt;</span><span style="color:#657B83;"> </span><span style="color:#D33682;">10</span><span style="color:#657B83;">) </span><span style="color:#859900;">return</span><span style="color:#657B83;"> </span><span style="color:#268BD2;">arr</span><span style="color:#657B83;">.</span><span style="color:#268BD2;">trim</span><span style="color:#657B83;">(</span><span style="color:#D33682;">0</span><span style="color:#657B83;">, </span><span style="color:#D33682;">10</span><span style="color:#657B83;">)</span></span>
<span class="line"><span style="color:#657B83;"> </span><span style="color:#859900;">return</span><span style="color:#657B83;"> </span><span style="color:#268BD2;">arr</span></span>
<span class="line"><span style="color:#657B83;">}</span></span>
<span class="line"><span style="color:#93A1A1;font-style:italic;">// @annotate: left { &quot;arrowRot&quot;: &quot;90deg 8px 27px&quot;, &quot;textDegree&quot;: &quot;3deg&quot;, &quot;top&quot;: &quot;0rem&quot; } - Discovered a typo, the param is arr, not orr!</span></span>
<span class="line"><span style="color:#657B83;">\`\`\`</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div>`,1),qa=s("p",null,"Upside down arrow pointing at the error, using flipped to re-flip the arrow:",-1),Ca={class:"vp-code-group vp-adaptive-theme"},xa=n('<div class="tabs"><input type="radio" name="group-FlfS0" id="tab-tPff28l" checked="checked"><label for="tab-tPff28l">output</label><input type="radio" name="group-FlfS0" id="tab-GC9eFDi"><label for="tab-GC9eFDi">markdown</label></div>',1),ka={class:"blocks"},Sa={class:"language-ts vp-adaptive-theme active line-numbers-mode"},Pa=s("button",{title:"Copy Code",class:"copy"},null,-1),Ia=s("span",{class:"lang"},"ts",-1),Va={class:"language-ts"},Ea={class:"tag-container"},Ra={class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"},active:"true"},Na=s("div",{class:"language-id"},"ts",-1),za={class:"code-container"},Ma=s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"function"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#839496"}},[a("("),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(") {")])],-1),Fa={class:"line"},La=s("span",{style:{color:"#839496"}}," ",-1),Xa=s("span",{style:{color:"#859900"}},"if",-1),Ya=s("span",{style:{color:"#839496"}}," (",-1),Ja={style:{color:"#268BD2"}},$a=s("data-lsp",{lsp:"any"},"orr",-1),Ga=s("span",{style:{color:"#839496"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),Oa=n('<span style="color:#859900;">&gt;</span><span style="color:#839496;"> </span><span style="color:#D33682;">10</span><span style="color:#839496;">) </span><span style="color:#859900;">return</span><span style="color:#839496;"> </span>',6),Ha=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),Qa=s("span",{style:{color:"#839496"}},".",-1),Ua=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),ja=n('<span style="color:#839496;">(</span><span style="color:#D33682;">0</span><span style="color:#839496;">, </span><span style="color:#D33682;">10</span><span style="color:#839496;">)</span>',5),Wa=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),Ka=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),Za=s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"return"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),sn=s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")],-1),an={class:"twoslash-annotation right",style:{top:"-0.7rem"}},nn={style:{transform:"translateX(8px) translateY(46px) rotate(190deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},on=s("path",{d:"M1 39C1.5 32.7511 6.1 17.5173 20.5 6.57333M11.5 4.04L27 0.999998C24.8333 4.88444 20.5 13.16 20.5 15.1867",stroke:"black"},null,-1),tn=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(-3deg)"}},"Discovered a typo, the param is arr, not orr!",-1),ln={class:"tag-container"},en={class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"},active:"true"},pn=s("div",{class:"language-id"},"ts",-1),rn={class:"code-container"},cn=s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"function"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#657B83"}},[a("("),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(") {")])],-1),dn={class:"line"},_n=s("span",{style:{color:"#657B83"}}," ",-1),yn=s("span",{style:{color:"#859900"}},"if",-1),hn=s("span",{style:{color:"#657B83"}}," (",-1),un={style:{color:"#268BD2"}},mn=s("data-lsp",{lsp:"any"},"orr",-1),gn=s("span",{style:{color:"#657B83"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),Bn=n('<span style="color:#859900;">&gt;</span><span style="color:#657B83;"> </span><span style="color:#D33682;">10</span><span style="color:#657B83;">) </span><span style="color:#859900;">return</span><span style="color:#657B83;"> </span>',6),vn=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),bn=s("span",{style:{color:"#657B83"}},".",-1),fn=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),Dn=n('<span style="color:#657B83;">(</span><span style="color:#D33682;">0</span><span style="color:#657B83;">, </span><span style="color:#D33682;">10</span><span style="color:#657B83;">)</span>',5),Tn=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),wn=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),An=s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"return"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),qn=s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")],-1),Cn={class:"twoslash-annotation right",style:{top:"-0.7rem"}},xn={style:{transform:"translateX(8px) translateY(46px) rotate(190deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},kn=s("path",{d:"M1 39C1.5 32.7511 6.1 17.5173 20.5 6.57333M11.5 4.04L27 0.999998C24.8333 4.88444 20.5 13.16 20.5 15.1867",stroke:"black"},null,-1),Sn=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(-3deg)"}},"Discovered a typo, the param is arr, not orr!",-1),Pn=s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")],-1),In=n(`<div class="language-md vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">md</span><pre class="shiki solarized-dark vp-code-dark"><code><span class="line"><span style="color:#839496;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#586E75;font-style:italic;">// @errors: 2304</span></span>
<span class="line"><span style="color:#586E75;font-style:italic;">// @strict: false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#93A1A1;font-weight:bold;">function</span><span style="color:#839496;"> </span><span style="color:#268BD2;">compact</span><span style="color:#839496;">(arr) {</span></span>
<span class="line"><span style="color:#839496;"> </span><span style="color:#859900;">if</span><span style="color:#839496;"> (</span><span style="color:#268BD2;">orr</span><span style="color:#839496;">.length </span><span style="color:#859900;">&gt;</span><span style="color:#839496;"> </span><span style="color:#D33682;">10</span><span style="color:#839496;">) </span><span style="color:#859900;">return</span><span style="color:#839496;"> </span><span style="color:#268BD2;">arr</span><span style="color:#839496;">.</span><span style="color:#268BD2;">trim</span><span style="color:#839496;">(</span><span style="color:#D33682;">0</span><span style="color:#839496;">, </span><span style="color:#D33682;">10</span><span style="color:#839496;">)</span></span>
<span class="line"><span style="color:#839496;"> </span><span style="color:#859900;">return</span><span style="color:#839496;"> </span><span style="color:#268BD2;">arr</span></span>
<span class="line"><span style="color:#839496;">}</span></span>
<span class="line"><span style="color:#586E75;font-style:italic;">// @annotate: left { &quot;arrowRot&quot;: &quot;90deg 8px 27px&quot;, &quot;textDegree&quot;: &quot;3deg&quot;, &quot;top&quot;: &quot;0rem&quot; } - Discovered a typo, the param is arr, not orr!</span></span>
<span class="line"><span style="color:#839496;">\`\`\`</span></span></code></pre><pre class="shiki solarized-light vp-code-light"><code><span class="line"><span style="color:#657B83;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#93A1A1;font-style:italic;">// @errors: 2304</span></span>
<span class="line"><span style="color:#93A1A1;font-style:italic;">// @strict: false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#586E75;font-weight:bold;">function</span><span style="color:#657B83;"> </span><span style="color:#268BD2;">compact</span><span style="color:#657B83;">(arr) {</span></span>
<span class="line"><span style="color:#657B83;"> </span><span style="color:#859900;">if</span><span style="color:#657B83;"> (</span><span style="color:#268BD2;">orr</span><span style="color:#657B83;">.length </span><span style="color:#859900;">&gt;</span><span style="color:#657B83;"> </span><span style="color:#D33682;">10</span><span style="color:#657B83;">) </span><span style="color:#859900;">return</span><span style="color:#657B83;"> </span><span style="color:#268BD2;">arr</span><span style="color:#657B83;">.</span><span style="color:#268BD2;">trim</span><span style="color:#657B83;">(</span><span style="color:#D33682;">0</span><span style="color:#657B83;">, </span><span style="color:#D33682;">10</span><span style="color:#657B83;">)</span></span>
<span class="line"><span style="color:#657B83;"> </span><span style="color:#859900;">return</span><span style="color:#657B83;"> </span><span style="color:#268BD2;">arr</span></span>
<span class="line"><span style="color:#657B83;">}</span></span>
<span class="line"><span style="color:#93A1A1;font-style:italic;">// @annotate: left { &quot;arrowRot&quot;: &quot;90deg 8px 27px&quot;, &quot;textDegree&quot;: &quot;3deg&quot;, &quot;top&quot;: &quot;0rem&quot; } - Discovered a typo, the param is arr, not orr!</span></span>
<span class="line"><span style="color:#657B83;">\`\`\`</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div>`,1);function Vn(En,Rn,Nn,zn,Mn,Fn){const l=c("data-err");return t(),o("div",null,[d,_,y,h,s("div",u,[m,s("div",g,[s("div",B,[v,b,s("pre",null,[s("code",f,[s("div",D,[s("pre",T,[w,s("div",A,[s("code",null,[q,s("div",C,[x,k,S,s("span",P,[e(l,null,{default:p(()=>[I]),_:1})]),V,E,R,N,z,M]),F,L,X,Y])])]),a(`
`),s("div",J,[a(`
`),(t(),o("svg",$,[a(`
`),G,a(`
`)])),a(`
`),O,a(`
`)])]),a(`
`),s("div",H,[s("pre",Q,[U,s("div",j,[s("code",null,[W,s("div",K,[Z,ss,as,s("span",ns,[e(l,null,{default:p(()=>[os]),_:1})]),ts,ls,es,ps,rs,cs]),is,ds,_s,ys])])]),a(`
`),s("div",hs,[a(`
`),(t(),o("svg",us,[a(`
`),ms,a(`
`)])),a(`
`),gs,a(`
`)])])])]),Bs]),vs])]),bs,s("div",fs,[Ds,s("div",Ts,[s("div",ws,[As,qs,s("pre",null,[s("code",Cs,[s("div",xs,[s("pre",ks,[Ss,s("div",Ps,[s("code",null,[Is,s("div",Vs,[Es,Rs,Ns,s("span",zs,[e(l,null,{default:p(()=>[Ms]),_:1})]),Fs,Ls,Xs,Ys,Js,$s]),Gs,Os,Hs,Qs])])]),a(`
`),s("div",Us,[a(`
`),(t(),o("svg",js,[a(`
`),Ws,a(`
`)])),a(`
`),Ks,a(`
`)])]),a(`
`),s("div",Zs,[s("pre",sa,[aa,s("div",na,[s("code",null,[oa,s("div",ta,[la,ea,pa,s("span",ra,[e(l,null,{default:p(()=>[ca]),_:1})]),ia,da,_a,ya,ha,ua]),ma,ga,Ba,va])])]),a(`
`),s("div",ba,[a(`
`),(t(),o("svg",fa,[a(`
`),Da,a(`
`)])),a(`
`),Ta,a(`
`)])])])]),wa]),Aa])]),qa,s("div",Ca,[xa,s("div",ka,[s("div",Sa,[Pa,Ia,s("pre",null,[s("code",Va,[s("div",Ea,[s("pre",Ra,[Na,s("div",za,[s("code",null,[Ma,s("div",Fa,[La,Xa,Ya,s("span",Ja,[e(l,null,{default:p(()=>[$a]),_:1})]),Ga,Oa,Ha,Qa,Ua,ja]),Wa,Ka,Za,sn])])]),a(`
`),s("div",an,[a(`
`),(t(),o("svg",nn,[a(`
`),on,a(`
`)])),a(`
`),tn,a(`
`)])]),a(`
`),s("div",ln,[s("pre",en,[pn,s("div",rn,[s("code",null,[cn,s("div",dn,[_n,yn,hn,s("span",un,[e(l,null,{default:p(()=>[mn]),_:1})]),gn,Bn,vn,bn,fn,Dn]),Tn,wn,An,qn])])]),a(`
`),s("div",Cn,[a(`
`),(t(),o("svg",xn,[a(`
`),kn,a(`
`)])),a(`
`),Sn,a(`
`)])])])]),Pn]),In])])])}const Yn=r(i,[["render",Vn]]);export{Xn as __pageData,Yn as default};