toshiki-notebook/assets/application_vitepress-plugin-shiki-twoslash_api_cutting.md.ca757d40.js

import{_ as o,c as e,o as a,z as s,a as l}from"./chunks/framework.ade46834.js";const C=JSON.parse('{"title":"Cutting","description":"Remove unnecessary code from your examples.","frontmatter":{"description":"Remove unnecessary code from your examples.","title":"Cutting"},"headers":[],"relativePath":"application/vitepress-plugin-shiki-twoslash/api/cutting.md","filePath":"application/vitepress-plugin-shiki-twoslash/api/cutting.md","lastUpdated":1686508387000}'),n={name:"application/vitepress-plugin-shiki-twoslash/api/cutting.md"},t=s("h1",{id:"cutting",tabindex:"-1"},[l("Cutting "),s("a",{class:"header-anchor",href:"#cutting","aria-label":'Permalink to "Cutting"'},"​")],-1),c=s("p",null,"Every Twoslash code example needs to be a complete TypeScript program so it can compile. Quite often to make it compile, there is a bunch of code which isn't relevant to the user. This can be extracted out of the code examples via cut comments.",-1),r=s("h2",{id:"cut",tabindex:"-1"},[s("code",null,"---cut---"),l(),s("a",{class:"header-anchor",href:"#cut","aria-label":'Permalink to "`---cut---`"'},"​")],-1),p=s("p",null,[l("Cut works after TypeScript has generated the project and pulled out all the editor information (like identifiers, queries, highlights etc) and then amends all of their offsets and lines to re-fit the smaller output. What your user sees is everything below the "),s("code",null,"---cut---"),l(".")],-1),i=s("div",{class:"vp-code-group vp-adaptive-theme"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-GetG9",id:"tab-u_vGahe",checked:"checked"}),s("label",{for:"tab-u_vGahe"},"output"),s("input",{type:"radio",name:"group-GetG9",id:"tab-m845Yhb"}),s("label",{for:"tab-m845Yhb"},"markdown")]),s("div",{class:"blocks"},[s("div",{class:"language-ts vp-adaptive-theme active line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"},active:"true"},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"var console: Console"},"console")]),s("span",{style:{color:"#839496"}},"."),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(method) Console.log(...data: any[]): void"},"log")]),s("span",{style:{color:"#839496"}},"("),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"const level: string"},"level")]),s("span",{style:{color:"#839496"}},")")])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"},active:"true"},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"var console: Console"},"console")]),s("span",{style:{color:"#657B83"}},"."),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(method) Console.log(...data: any[]): void"},"log")]),s("span",{style:{color:"#657B83"}},"("),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"const level: string"},"level")]),s("span",{style:{color:"#657B83"}},")")])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])]),s("div",{class:"language-md vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"md"),s("pre",{class:"shiki solarized-dark vp-code-dark"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"```ts twoslash")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-weight":"bold"}},"const"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},"level"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"string"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'Danger'")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-style":"italic"}},"// ---cut---")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#268BD2"}},"console"),s("span",{style:{color:"#839496"}},"."),s("span",{style:{color:"#268BD2"}},"log"),s("span",{style:{color:"#839496"}},"("),s("span",{style:{color:"#268BD2"}},"level"),s("span",{style:{color:"#839496"}},")")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"```")])])]),s("pre",{class:"shiki solarized-light vp-code-light"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"```ts twoslash")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-weight":"bold"}},"const"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},"level"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"string"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'Danger'")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-style":"italic"}},"// ---cut---")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#268BD2"}},"console"),s("span",{style:{color:"#657B83"}},"."),s("span",{style:{color:"#268BD2"}},"log"),s("span",{style:{color:"#657B83"}},"("),s("span",{style:{color:"#268BD2"}},"level"),s("span",{style:{color:"#657B83"}},")")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"```")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br"),s("span",{class:"line-number"},"5"),s("br")])])])],-1),d=s("p",null,[l("Cutting even works across "),s("a",{href:"./multi-file"},"multiple files"),l(". This is why "),s("code",null,"// @filename: [file]"),l(" is specifically the only Twoslash command which is not removed, because if it's not relevant it can be "),s("code",null,"---cut---"),l(" away.")],-1),y=s("div",{class:"vp-code-group vp-adaptive-theme"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-jQYb0",id:"tab-lUbkBjO",checked:"checked"}),s("label",{for:"tab-lUbkBjO"},"output"),s("input",{type:"radio",name:"group-jQYb0",id:"tab-OvgPpPI"}),s("label",{for:"tab-OvgPpPI"},"markdown")]),s("div",{class:"blocks"},[s("div",{class:"language-ts vp-adaptive-theme active line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"},active:"true"},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) const helloWorld: string
import helloWorld`},"helloWorld")]),s("span",{style:{color:"#839496"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'./a'")]),s("div",{class:"line"},[s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"var console: Console"},"console")]),s("span",{style:{color:"#839496"}},"."),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(method) Console.log(...data: any[]): void"},"log")]),s("span",{style:{color:"#839496"}},"("),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) const helloWorld: string
import helloWorld`},"helloWorld")]),s("span",{style:{color:"#839496"}},")")])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"},active:"true"},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) const helloWorld: string
import helloWorld`},"helloWorld")]),s("span",{style:{color:"#657B83"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'./a'")]),s("div",{class:"line"},[s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"var console: Console"},"console")]),s("span",{style:{color:"#657B83"}},"."),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(method) Console.log(...data: any[]): void"},"log")]),s("span",{style:{color:"#657B83"}},"("),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) const helloWorld: string
import helloWorld`},"helloWorld")]),s("span",{style:{color:"#657B83"}},")")])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])]),s("div",{class:"language-md vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"md"),s("pre",{class:"shiki solarized-dark vp-code-dark"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"```ts twoslash")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-style":"italic"}},"// @filename: a.ts")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#93A1A1","font-weight":"bold"}},"const"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},"helloWorld"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"string"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'Hi'")]),l(`
`),s("span",{class:"line"}),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-style":"italic"}},"// @filename: b.ts")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-style":"italic"}},"// ---cut---")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," { "),s("span",{style:{color:"#268BD2"}},"helloWorld"),s("span",{style:{color:"#839496"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'./a'")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#268BD2"}},"console"),s("span",{style:{color:"#839496"}},"."),s("span",{style:{color:"#268BD2"}},"log"),s("span",{style:{color:"#839496"}},"("),s("span",{style:{color:"#268BD2"}},"helloWorld"),s("span",{style:{color:"#839496"}},")")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"```")])])]),s("pre",{class:"shiki solarized-light vp-code-light"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"```ts twoslash")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-style":"italic"}},"// @filename: a.ts")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#586E75","font-weight":"bold"}},"const"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},"helloWorld"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"string"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'Hi'")]),l(`
`),s("span",{class:"line"}),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-style":"italic"}},"// @filename: b.ts")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-style":"italic"}},"// ---cut---")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," { "),s("span",{style:{color:"#268BD2"}},"helloWorld"),s("span",{style:{color:"#657B83"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'./a'")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#268BD2"}},"console"),s("span",{style:{color:"#657B83"}},"."),s("span",{style:{color:"#268BD2"}},"log"),s("span",{style:{color:"#657B83"}},"("),s("span",{style:{color:"#268BD2"}},"helloWorld"),s("span",{style:{color:"#657B83"}},")")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"```")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br"),s("span",{class:"line-number"},"5"),s("br"),s("span",{class:"line-number"},"6"),s("br"),s("span",{class:"line-number"},"7"),s("br"),s("span",{class:"line-number"},"8"),s("br"),s("span",{class:"line-number"},"9"),s("br")])])])],-1),u=s("h2",{id:"cut-after",tabindex:"-1"},[s("code",null,"---cut-after---"),l(),s("a",{class:"header-anchor",href:"#cut-after","aria-label":'Permalink to "`---cut-after---`"'},"​")],-1),h=s("p",null,[l("The sibling to "),s("code",null,"---cut---"),l(", which trims anything after the sigil:")],-1),m=s("div",{class:"vp-code-group vp-adaptive-theme"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-RPktm",id:"tab-AYj8n8i",checked:"checked"}),s("label",{for:"tab-AYj8n8i"},"output"),s("input",{type:"radio",name:"group-RPktm",id:"tab-jwMdlT0"}),s("label",{for:"tab-jwMdlT0"},"markdown")]),s("div",{class:"blocks"},[s("div",{class:"language-tsx vp-adaptive-theme active line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"tsx"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"},active:"true"},[s("div",{class:"language-id"},"tsx"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"    "),s("span",{style:{color:"#586E75"}},"<"),s("span",{style:{color:"#859900"}},[s("data-lsp",{lsp:"any"},"Container")]),s("span",{style:{color:"#586E75"}},">")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"        "),s("span",{style:{color:"#586E75"}},"<"),s("span",{style:{color:"#859900"}},[s("data-lsp",{lsp:"any"},"ImportantComponent")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#586E75"}},"/>")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"    "),s("span",{style:{color:"#586E75"}},"</"),s("span",{style:{color:"#859900"}},[s("data-lsp",{lsp:"any"},"Container")]),s("span",{style:{color:"#586E75"}},">")])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"},active:"true"},[s("div",{class:"language-id"},"tsx"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"    "),s("span",{style:{color:"#93A1A1"}},"<"),s("span",{style:{color:"#859900"}},[s("data-lsp",{lsp:"any"},"Container")]),s("span",{style:{color:"#93A1A1"}},">")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"        "),s("span",{style:{color:"#93A1A1"}},"<"),s("span",{style:{color:"#859900"}},[s("data-lsp",{lsp:"any"},"ImportantComponent")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#93A1A1"}},"/>")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"    "),s("span",{style:{color:"#93A1A1"}},"</"),s("span",{style:{color:"#859900"}},[s("data-lsp",{lsp:"any"},"Container")]),s("span",{style:{color:"#93A1A1"}},">")])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])]),s("div",{class:"language-md vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"md"),s("pre",{class:"shiki solarized-dark vp-code-dark"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"```tsx twoslash")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-weight":"bold"}},"const"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},"Page"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," () "),s("span",{style:{color:"#93A1A1","font-weight":"bold"}},"=>"),s("span",{style:{color:"#839496"}}," (")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"    "),s("span",{style:{color:"#586E75","font-style":"italic"}},"// ---cut---")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"    "),s("span",{style:{color:"#586E75"}},"<"),s("span",{style:{color:"#859900"}},"Container"),s("span",{style:{color:"#586E75"}},">")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"        "),s("span",{style:{color:"#586E75"}},"<"),s("span",{style:{color:"#859900"}},"ImportantComponent"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#586E75"}},"/>")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"    "),s("span",{style:{color:"#586E75"}},"</"),s("span",{style:{color:"#859900"}},"Container"),s("span",{style:{color:"#586E75"}},">")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"    "),s("span",{style:{color:"#586E75","font-style":"italic"}},"// ---cut-after---")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},")")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"```")])])]),s("pre",{class:"shiki solarized-light vp-code-light"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"```tsx twoslash")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-weight":"bold"}},"const"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},"Page"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," () "),s("span",{style:{color:"#586E75","font-weight":"bold"}},"=>"),s("span",{style:{color:"#657B83"}}," (")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"    "),s("span",{style:{color:"#93A1A1","font-style":"italic"}},"// ---cut---")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"    "),s("span",{style:{color:"#93A1A1"}},"<"),s("span",{style:{color:"#859900"}},"Container"),s("span",{style:{color:"#93A1A1"}},">")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"        "),s("span",{style:{color:"#93A1A1"}},"<"),s("span",{style:{color:"#859900"}},"ImportantComponent"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#93A1A1"}},"/>")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"    "),s("span",{style:{color:"#93A1A1"}},"</"),s("span",{style:{color:"#859900"}},"Container"),s("span",{style:{color:"#93A1A1"}},">")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"    "),s("span",{style:{color:"#93A1A1","font-style":"italic"}},"// ---cut-after---")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},")")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"```")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br"),s("span",{class:"line-number"},"5"),s("br"),s("span",{class:"line-number"},"6"),s("br"),s("span",{class:"line-number"},"7"),s("br"),s("span",{class:"line-number"},"8"),s("br"),s("span",{class:"line-number"},"9"),s("br")])])])],-1),b=[t,c,r,p,i,d,y,u,h,m];function v(g,B,f,A,k,w){return a(),e("div",null,b)}const _=o(n,[["render",v]]);export{C as __pageData,_ as default};