toshiki-notebook/assets/application_vitepress-plugin-shiki-twoslash_api_multi-file.md.65e2bcd0.js

import{_ as e,c as a,o,R as n,z as s,a as l}from"./chunks/framework.ade46834.js";const E=JSON.parse(`{"title":"Multi-file","description":"Twoslash code examples aren't limited to creating a single file. You can write any file to the virtual file system used by TypeScript to power your code examples.","frontmatter":{"description":"Twoslash code examples aren't limited to creating a single file. You can write any file to the virtual file system used by TypeScript to power your code examples.","title":"Multi-file"},"headers":[],"relativePath":"application/vitepress-plugin-shiki-twoslash/api/multi-file.md","filePath":"application/vitepress-plugin-shiki-twoslash/api/multi-file.md","lastUpdated":1694920472000}`),t={name:"application/vitepress-plugin-shiki-twoslash/api/multi-file.md"},i=n('<h1 id="multi-file" tabindex="-1">Multi-file <a class="header-anchor" href="#multi-file" aria-label="Permalink to &quot;Multi-file&quot;">​</a></h1><p>Twoslash code examples aren&#39;t limited to creating a single file, by using <code>// @filename: [file]</code> you can write any file to the virtual file system used by TypeScript to power your code examples.</p><h2 id="filename-file" tabindex="-1"><code>@filename: [file]</code> <a class="header-anchor" href="#filename-file" aria-label="Permalink to &quot;`@filename: [file]`&quot;">​</a></h2><p>Most of the time, you don&#39;t need to think about the underlaying virtual file system in a code example, but when you have imports between them it becomes important to know. Twoslash will default to creating an <code>index.[type]</code> based on the langauge passed to the code example:</p>',4),c=s("div",{class:"vp-code-group vp-adaptive-theme"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-orWlw",id:"tab-2NGQou2",checked:"checked"}),s("label",{for:"tab-2NGQou2"},"output"),s("input",{type:"radio",name:"group-orWlw",id:"tab-27PfzRU"}),s("label",{for:"tab-27PfzRU"},"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:"#586E75"}},"// I'm index.ts")])])])]),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:"#93A1A1"}},"// I'm index.ts")])])])]),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"}},"// I'm index.ts")]),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"}},"// I'm index.ts")]),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")])])])],-1),p=s("div",{class:"vp-code-group vp-adaptive-theme"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-9f9bE",id:"tab-MqPMxz-",checked:"checked"}),s("label",{for:"tab-MqPMxz-"},"output"),s("input",{type:"radio",name:"group-9f9bE",id:"tab-PII-cSC"}),s("label",{for:"tab-PII-cSC"},"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:"#586E75"}},"// I'm index.tsx")])])])]),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:"#93A1A1"}},"// I'm index.tsx")])])])]),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:"#586E75","font-style":"italic"}},"// I'm index.tsx")]),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:"#93A1A1","font-style":"italic"}},"// I'm index.tsx")]),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")])])])],-1),r=s("div",{class:"vp-code-group vp-adaptive-theme"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-R0hGB",id:"tab-G7c6U3c",checked:"checked"}),s("label",{for:"tab-G7c6U3c"},"output"),s("input",{type:"radio",name:"group-R0hGB",id:"tab-tFSf8zR"}),s("label",{for:"tab-tFSf8zR"},"markdown")]),s("div",{class:"blocks"},[s("div",{class:"language-js vp-adaptive-theme active line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"js"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"},active:"true"},[s("div",{class:"language-id"},"js"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"// I'm index.tjs")])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"},active:"true"},[s("div",{class:"language-id"},"js"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"// I'm index.tjs")])])])]),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"}},"```js twoslash")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-style":"italic"}},"// I'm index.tjs")]),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"}},"```js twoslash")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-style":"italic"}},"// I'm index.tjs")]),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")])])])],-1),d=s("p",null,[l("Then until Twoslash hits another "),s("code",null,"// @filename: [file]"),l(", the parser keeps adding new lines into the same file. After seeing "),s("code",null,"@filename"),l(" Twoslash creates a new virtual file-system file and adds the new lines to that. You can't edit a file after it was created, but you can overwrite it.")],-1),y=s("p",null,"It can be any file. For example, if you want to quickly fake a node module:",-1),u=s("div",{class:"vp-code-group vp-adaptive-theme"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-wLGZd",id:"tab-H9X7gVh",checked:"checked"}),s("label",{for:"tab-H9X7gVh"},"output"),s("input",{type:"radio",name:"group-wLGZd",id:"tab-1S51YdH"}),s("label",{for:"tab-1S51YdH"},"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:"#586E75"}},"// @filename: node_modules/@types/mylib/index.d.ts")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#93A1A1"}},"function"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"function doit(): string"},"doit")]),s("span",{style:{color:"#839496"}},"()"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"// @filename: index.ts")]),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) function doit(): string
import doit`},"doit")]),s("span",{style:{color:"#839496"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'mylib'")]),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) function doit(): string
import doit`},"doit")]),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:"#93A1A1"}},"// @filename: node_modules/@types/mylib/index.d.ts")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#586E75"}},"function"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"function doit(): string"},"doit")]),s("span",{style:{color:"#657B83"}},"()"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"// @filename: index.ts")]),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) function doit(): string
import doit`},"doit")]),s("span",{style:{color:"#657B83"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'mylib'")]),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) function doit(): string
import doit`},"doit")]),s("span",{style:{color:"#657B83"}},")")])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])]),s("p",null,"This code example sets up the types for a non-existent npm module, and TypeScript picks it up as the definitions in the same way it would in a non-virtual TypeScript project."),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: node_modules/@types/mylib/index.d.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"}},"function"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},"doit"),s("span",{style:{color:"#839496"}},"()"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"string")]),l(`
`),s("span",{class:"line"}),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-style":"italic"}},"// @filename: index.ts")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," { "),s("span",{style:{color:"#268BD2"}},"doit"),s("span",{style:{color:"#839496"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'mylib'")]),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"}},"doit"),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: node_modules/@types/mylib/index.d.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"}},"function"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},"doit"),s("span",{style:{color:"#657B83"}},"()"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"string")]),l(`
`),s("span",{class:"line"}),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-style":"italic"}},"// @filename: index.ts")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," { "),s("span",{style:{color:"#268BD2"}},"doit"),s("span",{style:{color:"#657B83"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'mylib'")]),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"}},"doit"),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")])])])],-1),m=s("p",null,"You can also set up a JSON object which can be imported in a TypeScript file:",-1),b=s("div",{class:"vp-code-group vp-adaptive-theme"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-WF2nn",id:"tab-aVf7ILP",checked:"checked"}),s("label",{for:"tab-aVf7ILP"},"output"),s("input",{type:"radio",name:"group-WF2nn",id:"tab-GaUF3Ea"}),s("label",{for:"tab-GaUF3Ea"},"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:"#586E75"}},"// @filename: app.json")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"{ "),s("span",{style:{color:"#2AA198"}},'"version"'),s("span",{style:{color:"#839496"}},": "),s("span",{style:{color:"#2AA198"}},'"23.2.3"'),s("span",{style:{color:"#839496"}}," }")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"// @filename: index.ts")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"import appSettings"},"appSettings")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},'"./app.json"')]),s("div",{class:"line"},[s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"import appSettings"},"appSettings")]),s("span",{style:{color:"#839496"}},"."),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:'(property) "version": string',style:{"border-bottom":"solid 2px lightgrey"}},"version")])]),s("div",{class:"meta-line"},[s("span",{class:"popover-prefix"},"              "),s("span",{class:"popover"},[s("div",{class:"arrow"}),l('(property) "version": string')])])])])]),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:"#93A1A1"}},"// @filename: app.json")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"{ "),s("span",{style:{color:"#2AA198"}},'"version"'),s("span",{style:{color:"#657B83"}},": "),s("span",{style:{color:"#2AA198"}},'"23.2.3"'),s("span",{style:{color:"#657B83"}}," }")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"// @filename: index.ts")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"import appSettings"},"appSettings")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},'"./app.json"')]),s("div",{class:"line"},[s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"import appSettings"},"appSettings")]),s("span",{style:{color:"#657B83"}},"."),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:'(property) "version": string',style:{"border-bottom":"solid 2px lightgrey"}},"version")])]),s("div",{class:"meta-line"},[s("span",{class:"popover-prefix"},"              "),s("span",{class:"popover"},[s("div",{class:"arrow"}),l('(property) "version": string')])])])])]),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"}},"// @resolveJsonModule")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-style":"italic"}},"// @filename: app.json")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"{ "),s("span",{style:{color:"#2AA198"}},'"version"'),s("span",{style:{color:"#839496"}},": "),s("span",{style:{color:"#2AA198"}},'"23.2.3"'),s("span",{style:{color:"#839496"}}," }")]),l(`
`),s("span",{class:"line"}),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-style":"italic"}},"// @filename: index.ts")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},"appSettings"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},'"./app.json"')]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#268BD2"}},"appSettings"),s("span",{style:{color:"#839496"}},"."),s("span",{style:{color:"#268BD2"}},"version")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-style":"italic"}},"//           ^?")]),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"}},"// @resolveJsonModule")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-style":"italic"}},"// @filename: app.json")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"{ "),s("span",{style:{color:"#2AA198"}},'"version"'),s("span",{style:{color:"#657B83"}},": "),s("span",{style:{color:"#2AA198"}},'"23.2.3"'),s("span",{style:{color:"#657B83"}}," }")]),l(`
`),s("span",{class:"line"}),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-style":"italic"}},"// @filename: index.ts")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},"appSettings"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},'"./app.json"')]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#268BD2"}},"appSettings"),s("span",{style:{color:"#657B83"}},"."),s("span",{style:{color:"#268BD2"}},"version")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-style":"italic"}},"//           ^?")]),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"),s("span",{class:"line-number"},"10"),s("br")])])])],-1),v=s("p",null,[l("Finally, the following code allows importing non-TypeScript content. There is a "),s("code",null,".d.ts"),l(` file which globally says 'md files are OK to import' and 'the module "react" exists, but don't worry about the details'.`)],-1),h=s("p",null,[l("Then for a user, they only see the imports and exports inside "),s("code",null,"index.tsx"),l(".")],-1),g=s("div",{class:"vp-code-group vp-adaptive-theme"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-oDeVB",id:"tab--dxNcR3",checked:"checked"}),s("label",{for:"tab--dxNcR3"},"output"),s("input",{type:"radio",name:"group-oDeVB",id:"tab-oK3aX6z"}),s("label",{for:"tab-oK3aX6z"},"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) module "react"
import React`},"React")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},'"react"')]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"import MultiFileDocs"},"MultiFileDocs")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},'"./MultiFileDocs.mdx"')]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#839496"}}," () "),s("span",{style:{color:"#93A1A1"}},"=>"),s("span",{style:{color:"#839496"}}," <"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"import MultiFileDocs"},"MultiFileDocs")]),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) module "react"
import React`},"React")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},'"react"')]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"import MultiFileDocs"},"MultiFileDocs")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},'"./MultiFileDocs.mdx"')]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#657B83"}}," () "),s("span",{style:{color:"#586E75"}},"=>"),s("span",{style:{color:"#657B83"}}," <"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"import MultiFileDocs"},"MultiFileDocs")]),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: ambient.d.ts")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-weight":"bold"}},"declare"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#93A1A1","font-weight":"bold"}},"module"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'*.mdx'"),s("span",{style:{color:"#839496"}}," {")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"    "),s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},"any")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"}")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-weight":"bold"}},"declare"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#93A1A1","font-weight":"bold"}},"module"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},'"react"')]),l(`
`),s("span",{class:"line"}),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-style":"italic"}},"// @filename: MultiFileDocs.mdx")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"## "),s("span",{style:{color:"#CB4B16"}},"Hello"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},"world")]),l(`
`),s("span",{class:"line"}),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-style":"italic"}},"// @filename: index.tsx")]),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"}},"React"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},'"react"')]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},"MultiFileDocs"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},'"./MultiFileDocs.mdx"')]),l(`
`),s("span",{class:"line"}),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#839496"}}," () "),s("span",{style:{color:"#93A1A1","font-weight":"bold"}},"=>"),s("span",{style:{color:"#839496"}}," <"),s("span",{style:{color:"#CB4B16"}},"MultiFileDocs"),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: ambient.d.ts")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-weight":"bold"}},"declare"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#586E75","font-weight":"bold"}},"module"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'*.mdx'"),s("span",{style:{color:"#657B83"}}," {")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"    "),s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},"any")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-weight":"bold"}},"declare"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#586E75","font-weight":"bold"}},"module"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},'"react"')]),l(`
`),s("span",{class:"line"}),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-style":"italic"}},"// @filename: MultiFileDocs.mdx")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"## "),s("span",{style:{color:"#CB4B16"}},"Hello"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},"world")]),l(`
`),s("span",{class:"line"}),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-style":"italic"}},"// @filename: index.tsx")]),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"}},"React"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},'"react"')]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},"MultiFileDocs"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},'"./MultiFileDocs.mdx"')]),l(`
`),s("span",{class:"line"}),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#657B83"}}," () "),s("span",{style:{color:"#586E75","font-weight":"bold"}},"=>"),s("span",{style:{color:"#657B83"}}," <"),s("span",{style:{color:"#CB4B16"}},"MultiFileDocs"),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"),s("span",{class:"line-number"},"10"),s("br"),s("span",{class:"line-number"},"11"),s("br"),s("span",{class:"line-number"},"12"),s("br"),s("span",{class:"line-number"},"13"),s("br"),s("span",{class:"line-number"},"14"),s("br"),s("span",{class:"line-number"},"15"),s("br"),s("span",{class:"line-number"},"16"),s("br"),s("span",{class:"line-number"},"17"),s("br")])])])],-1),f=[i,c,p,r,d,y,u,m,b,v,h,g];function B(A,w,k,x,D,_){return o(),a("div",null,f)}const F=e(t,[["render",B]]);export{E as __pageData,F as default};