import{_ as d}from"./chunks/PageInfo.vue_vue_type_script_setup_true_lang.65c6b98c.js";import{_ as y,A as u,o as l,c as t,k as n,a as o,E as p,O as a,w as e}from"./chunks/framework.c989bd33.js";import"./chunks/commonjsHelpers.725317a4.js";const Fs=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":1726417910000}'),c={name:"application/vitepress-plugin-shiki-twoslash/api/annotations.md"},A={class:"vp-code-group vp-adaptive-theme"},m={class:"blocks"},C={class:"language-ts vp-adaptive-theme active line-numbers-mode"},g={class:"language-ts"},D={class:"tag-container"},b={class:"shiki github-dark-dimmed twoslash lsp",style:{"background-color":"#22272e",color:"#adbac7"}},v={class:"code-container"},B={class:"line"},f={style:{color:"#ADBAC7"}},F={class:"twoslash-annotation left",style:{top:"0rem"}},w={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"},E={class:"tag-container"},q={class:"shiki github-light twoslash lsp",style:{"background-color":"#fff",color:"#24292e"}},x={class:"code-container"},k={class:"line"},M={style:{color:"#24292E"}},R={class:"twoslash-annotation left",style:{top:"0rem"}},V={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"},P={class:"vp-code-group vp-adaptive-theme"},O={class:"blocks"},I={class:"language-ts vp-adaptive-theme active line-numbers-mode"},S={class:"language-ts"},Y={class:"tag-container"},L={class:"shiki github-dark-dimmed twoslash lsp",style:{"background-color":"#22272e",color:"#adbac7"}},N={class:"code-container"},T={class:"line"},U={style:{color:"#ADBAC7"}},X={class:"twoslash-annotation right",style:{top:"3rem"}},$={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"},H={class:"tag-container"},J={class:"shiki github-light twoslash lsp",style:{"background-color":"#fff",color:"#24292e"}},Q={class:"code-container"},j={class:"line"},z={style:{color:"#24292E"}},W={class:"twoslash-annotation right",style:{top:"3rem"}},G={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"},K={class:"vp-code-group vp-adaptive-theme"},Z={class:"blocks"},h={class:"language-ts vp-adaptive-theme active line-numbers-mode"},_={class:"language-ts"},ss={class:"tag-container"},ns={class:"shiki github-dark-dimmed twoslash lsp",style:{"background-color":"#22272e",color:"#adbac7"}},os={class:"code-container"},as={class:"line"},ls={style:{color:"#ADBAC7"}},ts={class:"twoslash-annotation right",style:{top:"-0.7rem"}},ps={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"},rs={class:"tag-container"},es={class:"shiki github-light twoslash lsp",style:{"background-color":"#fff",color:"#24292e"}},is={class:"code-container"},ds={class:"line"},ys={style:{color:"#24292E"}},us={class:"twoslash-annotation right",style:{top:"-0.7rem"}},cs={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"};function As(ms,s,Cs,gs,Ds,bs){const i=d,r=u("data-err");return l(),t("div",null,[s[150]||(s[150]=n("h1",{id:"queries",tabindex:"-1"},[o("Queries "),n("a",{class:"header-anchor",href:"#queries","aria-label":'Permalink to "Queries"'},"")],-1)),p(i,{readTime:"3",words:"541"}),s[151]||(s[151]=n("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)),s[152]||(s[152]=n("h2",{id:"annotate-left-right-overrides-text",tabindex:"-1"},[n("code",null,"@annotate: [left|right] [overrides] - [text]"),o(),n("a",{class:"header-anchor",href:"#annotate-left-right-overrides-text","aria-label":'Permalink to "`@annotate: [left|right] [overrides] - [text]`"'},"")],-1)),s[153]||(s[153]=n("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)),n("div",A,[s[49]||(s[49]=a('
',1)),n("div",m,[n("div",C,[s[45]||(s[45]=n("button",{title:"Copy Code",class:"copy"},null,-1)),s[46]||(s[46]=n("span",{class:"lang"},"ts",-1)),n("pre",null,[n("code",g,[n("div",D,[n("pre",b,[s[15]||(s[15]=n("div",{class:"language-id"},"ts",-1)),n("div",v,[n("code",null,[s[10]||(s[10]=n("div",{class:"line"},[n("span",{style:{color:"#F47067"}},"function"),n("span",{style:{color:"#ADBAC7"}}," "),n("span",{style:{color:"#DCBDFB"}},[n("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),n("span",{style:{color:"#ADBAC7"}},"("),n("span",{style:{color:"#F69D50"}},[n("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),n("span",{style:{color:"#ADBAC7"}},") {")],-1)),n("div",B,[s[3]||(s[3]=n("span",{style:{color:"#ADBAC7"}}," ",-1)),s[4]||(s[4]=n("span",{style:{color:"#F47067"}},"if",-1)),n("span",f,[s[1]||(s[1]=o(" (")),p(r,null,{default:e(()=>s[0]||(s[0]=[n("data-lsp",{lsp:"any"},"orr",-1)])),_:1}),s[2]||(s[2]=o("."))]),s[5]||(s[5]=n("span",{style:{color:"#6CB6FF"}},[n("data-lsp",{lsp:"any"},"length")],-1)),s[6]||(s[6]=a(' > 10) return',6)),s[7]||(s[7]=n("span",{style:{color:"#ADBAC7"}},[o(),n("data-lsp",{lsp:"(parameter) arr: any"},"arr"),o(".")],-1)),s[8]||(s[8]=n("span",{style:{color:"#DCBDFB"}},[n("data-lsp",{lsp:"any"},"trim")],-1)),s[9]||(s[9]=a('(0, 10)',5))]),s[11]||(s[11]=n("span",{class:"error"},[n("span",null,"Cannot find name 'orr'."),n("span",{class:"code"},"2304")],-1)),s[12]||(s[12]=n("span",{class:"error-behind"},"Cannot find name 'orr'.",-1)),s[13]||(s[13]=n("div",{class:"line"},[n("span",{style:{color:"#ADBAC7"}}," "),n("span",{style:{color:"#F47067"}},"return"),n("span",{style:{color:"#ADBAC7"}},[o(),n("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1)),s[14]||(s[14]=n("div",{class:"line"},[n("span",{style:{color:"#ADBAC7"}},"}")],-1))])])]),s[21]||(s[21]=o(` `)),n("div",F,[s[17]||(s[17]=o(` `)),(l(),t("svg",w,s[16]||(s[16]=[o(` `),n("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[18]||(s[18]=o(` `)),s[19]||(s[19]=n("p",{class:"twoslash-annotation-text",style:{transform:"rotate(3deg)"}},"Discovered a typo, the param is arr, not orr!",-1)),s[20]||(s[20]=o(` `))])]),s[44]||(s[44]=o(` `)),n("div",E,[n("pre",q,[s[37]||(s[37]=n("div",{class:"language-id"},"ts",-1)),n("div",x,[n("code",null,[s[32]||(s[32]=n("div",{class:"line"},[n("span",{style:{color:"#D73A49"}},"function"),n("span",{style:{color:"#24292E"}}," "),n("span",{style:{color:"#6F42C1"}},[n("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),n("span",{style:{color:"#24292E"}},"("),n("span",{style:{color:"#E36209"}},[n("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),n("span",{style:{color:"#24292E"}},") {")],-1)),n("div",k,[s[25]||(s[25]=n("span",{style:{color:"#24292E"}}," ",-1)),s[26]||(s[26]=n("span",{style:{color:"#D73A49"}},"if",-1)),n("span",M,[s[23]||(s[23]=o(" (")),p(r,null,{default:e(()=>s[22]||(s[22]=[n("data-lsp",{lsp:"any"},"orr",-1)])),_:1}),s[24]||(s[24]=o("."))]),s[27]||(s[27]=n("span",{style:{color:"#005CC5"}},[n("data-lsp",{lsp:"any"},"length")],-1)),s[28]||(s[28]=a(' > 10) return',6)),s[29]||(s[29]=n("span",{style:{color:"#24292E"}},[o(),n("data-lsp",{lsp:"(parameter) arr: any"},"arr"),o(".")],-1)),s[30]||(s[30]=n("span",{style:{color:"#6F42C1"}},[n("data-lsp",{lsp:"any"},"trim")],-1)),s[31]||(s[31]=a('(0, 10)',5))]),s[33]||(s[33]=n("span",{class:"error"},[n("span",null,"Cannot find name 'orr'."),n("span",{class:"code"},"2304")],-1)),s[34]||(s[34]=n("span",{class:"error-behind"},"Cannot find name 'orr'.",-1)),s[35]||(s[35]=n("div",{class:"line"},[n("span",{style:{color:"#24292E"}}," "),n("span",{style:{color:"#D73A49"}},"return"),n("span",{style:{color:"#24292E"}},[o(),n("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1)),s[36]||(s[36]=n("div",{class:"line"},[n("span",{style:{color:"#24292E"}},"}")],-1))])])]),s[43]||(s[43]=o(` `)),n("div",R,[s[39]||(s[39]=o(` `)),(l(),t("svg",V,s[38]||(s[38]=[o(` `),n("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[40]||(s[40]=o(` `)),s[41]||(s[41]=n("p",{class:"twoslash-annotation-text",style:{transform:"rotate(3deg)"}},"Discovered a typo, the param is arr, not orr!",-1)),s[42]||(s[42]=o(` `))])])])]),s[47]||(s[47]=n("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[n("span",{class:"line-number"},"1"),n("br")],-1))]),s[48]||(s[48]=a(`\`\`\`ts twoslash
// @errors: 2304
// @strict: false
function compact(arr) {
if (orr.length > 10) return arr.trim(0, 10)
return arr
}
// @annotate: left { "arrowRot": "90deg 8px 27px", "textDegree": "3deg", "top": "0rem" } - Discovered a typo, the param is arr, not orr!
\`\`\`\`\`\`ts twoslash
// @errors: 2304
// @strict: false
function compact(arr) {
if (orr.length > 10) return arr.trim(0, 10)
return arr
}
// @annotate: left { "arrowRot": "90deg 8px 27px", "textDegree": "3deg", "top": "0rem" } - Discovered a typo, the param is arr, not orr!
\`\`\`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:
left or right: It's currently left. It's worth noting the arrow flips also, and 90deg isn't a great option. Let's look at that next.
{ "arrrowRot": "90deg 8px 27px" } - This JSON object is used to manipulate the annotation, you have 3 controls for arrow positioning and rotation: degrees x y. I recommend keeping those in degrees and px, but it's your life. These are overrides from defaults which are okay, but not really something you ever want to ship.
{ "textDegree": "3deg" } - Rotates the text, you probably want something between -3deg and 3deg. Optional, defaults to 0.
{ "top": "0rem" } - Sets the y coordinates for the annotation relative to the code sample, if it's not included then it becomes [lineNum]rem.
What's not included in this sample is flipped, which can be used to flip the arrow's orientation. Here's some examples:
A horizontal right example:
",4)),n("div",P,[s[99]||(s[99]=a('',1)),n("div",O,[n("div",I,[s[95]||(s[95]=n("button",{title:"Copy Code",class:"copy"},null,-1)),s[96]||(s[96]=n("span",{class:"lang"},"ts",-1)),n("pre",null,[n("code",S,[n("div",Y,[n("pre",L,[s[65]||(s[65]=n("div",{class:"language-id"},"ts",-1)),n("div",N,[n("code",null,[s[60]||(s[60]=n("div",{class:"line"},[n("span",{style:{color:"#F47067"}},"function"),n("span",{style:{color:"#ADBAC7"}}," "),n("span",{style:{color:"#DCBDFB"}},[n("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),n("span",{style:{color:"#ADBAC7"}},"("),n("span",{style:{color:"#F69D50"}},[n("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),n("span",{style:{color:"#ADBAC7"}},") {")],-1)),n("div",T,[s[53]||(s[53]=n("span",{style:{color:"#ADBAC7"}}," ",-1)),s[54]||(s[54]=n("span",{style:{color:"#F47067"}},"if",-1)),n("span",U,[s[51]||(s[51]=o(" (")),p(r,null,{default:e(()=>s[50]||(s[50]=[n("data-lsp",{lsp:"any"},"orr",-1)])),_:1}),s[52]||(s[52]=o("."))]),s[55]||(s[55]=n("span",{style:{color:"#6CB6FF"}},[n("data-lsp",{lsp:"any"},"length")],-1)),s[56]||(s[56]=a(' > 10) return',6)),s[57]||(s[57]=n("span",{style:{color:"#ADBAC7"}},[o(),n("data-lsp",{lsp:"(parameter) arr: any"},"arr"),o(".")],-1)),s[58]||(s[58]=n("span",{style:{color:"#DCBDFB"}},[n("data-lsp",{lsp:"any"},"trim")],-1)),s[59]||(s[59]=a('(0, 10)',5))]),s[61]||(s[61]=n("span",{class:"error"},[n("span",null,"Cannot find name 'orr'."),n("span",{class:"code"},"2304")],-1)),s[62]||(s[62]=n("span",{class:"error-behind"},"Cannot find name 'orr'.",-1)),s[63]||(s[63]=n("div",{class:"line"},[n("span",{style:{color:"#ADBAC7"}}," "),n("span",{style:{color:"#F47067"}},"return"),n("span",{style:{color:"#ADBAC7"}},[o(),n("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1)),s[64]||(s[64]=n("div",{class:"line"},[n("span",{style:{color:"#ADBAC7"}},"}")],-1))])])]),s[71]||(s[71]=o(` `)),n("div",X,[s[67]||(s[67]=o(` `)),(l(),t("svg",$,s[66]||(s[66]=[o(` `),n("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),o(` `)]))),s[68]||(s[68]=o(` `)),s[69]||(s[69]=n("p",{class:"twoslash-annotation-text",style:{transform:"rotate(0deg)"}},"Discovered a typo, the param is arr, not orr!",-1)),s[70]||(s[70]=o(` `))])]),s[94]||(s[94]=o(` `)),n("div",H,[n("pre",J,[s[87]||(s[87]=n("div",{class:"language-id"},"ts",-1)),n("div",Q,[n("code",null,[s[82]||(s[82]=n("div",{class:"line"},[n("span",{style:{color:"#D73A49"}},"function"),n("span",{style:{color:"#24292E"}}," "),n("span",{style:{color:"#6F42C1"}},[n("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),n("span",{style:{color:"#24292E"}},"("),n("span",{style:{color:"#E36209"}},[n("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),n("span",{style:{color:"#24292E"}},") {")],-1)),n("div",j,[s[75]||(s[75]=n("span",{style:{color:"#24292E"}}," ",-1)),s[76]||(s[76]=n("span",{style:{color:"#D73A49"}},"if",-1)),n("span",z,[s[73]||(s[73]=o(" (")),p(r,null,{default:e(()=>s[72]||(s[72]=[n("data-lsp",{lsp:"any"},"orr",-1)])),_:1}),s[74]||(s[74]=o("."))]),s[77]||(s[77]=n("span",{style:{color:"#005CC5"}},[n("data-lsp",{lsp:"any"},"length")],-1)),s[78]||(s[78]=a(' > 10) return',6)),s[79]||(s[79]=n("span",{style:{color:"#24292E"}},[o(),n("data-lsp",{lsp:"(parameter) arr: any"},"arr"),o(".")],-1)),s[80]||(s[80]=n("span",{style:{color:"#6F42C1"}},[n("data-lsp",{lsp:"any"},"trim")],-1)),s[81]||(s[81]=a('(0, 10)',5))]),s[83]||(s[83]=n("span",{class:"error"},[n("span",null,"Cannot find name 'orr'."),n("span",{class:"code"},"2304")],-1)),s[84]||(s[84]=n("span",{class:"error-behind"},"Cannot find name 'orr'.",-1)),s[85]||(s[85]=n("div",{class:"line"},[n("span",{style:{color:"#24292E"}}," "),n("span",{style:{color:"#D73A49"}},"return"),n("span",{style:{color:"#24292E"}},[o(),n("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1)),s[86]||(s[86]=n("div",{class:"line"},[n("span",{style:{color:"#24292E"}},"}")],-1))])])]),s[93]||(s[93]=o(` `)),n("div",W,[s[89]||(s[89]=o(` `)),(l(),t("svg",G,s[88]||(s[88]=[o(` `),n("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),o(` `)]))),s[90]||(s[90]=o(` `)),s[91]||(s[91]=n("p",{class:"twoslash-annotation-text",style:{transform:"rotate(0deg)"}},"Discovered a typo, the param is arr, not orr!",-1)),s[92]||(s[92]=o(` `))])])])]),s[97]||(s[97]=n("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[n("span",{class:"line-number"},"1"),n("br")],-1))]),s[98]||(s[98]=a(`\`\`\`ts twoslash
// @errors: 2304
// @strict: false
function compact(arr) {
if (orr.length > 10) return arr.trim(0, 10)
return arr
}
// @annotate: left { "arrowRot": "90deg 8px 27px", "textDegree": "3deg", "top": "0rem" } - Discovered a typo, the param is arr, not orr!
\`\`\`\`\`\`ts twoslash
// @errors: 2304
// @strict: false
function compact(arr) {
if (orr.length > 10) return arr.trim(0, 10)
return arr
}
// @annotate: left { "arrowRot": "90deg 8px 27px", "textDegree": "3deg", "top": "0rem" } - Discovered a typo, the param is arr, not orr!
\`\`\`\`\`\`ts twoslash
// @errors: 2304
// @strict: false
function compact(arr) {
if (orr.length > 10) return arr.trim(0, 10)
return arr
}
// @annotate: left { "arrowRot": "90deg 8px 27px", "textDegree": "3deg", "top": "0rem" } - Discovered a typo, the param is arr, not orr!
\`\`\`\`\`\`ts twoslash
// @errors: 2304
// @strict: false
function compact(arr) {
if (orr.length > 10) return arr.trim(0, 10)
return arr
}
// @annotate: left { "arrowRot": "90deg 8px 27px", "textDegree": "3deg", "top": "0rem" } - Discovered a typo, the param is arr, not orr!
\`\`\`