feat: Updates docs, and enables Twoslash VFS (ShowEmittedFiles) (#83)

* feat: enhance documentation with TwoslashExample component and code snippets so we can dedupe code examples

* fix: update includes in biome.json to exclude content snippets from linter and file processing

* feat: Refactor Twoslash examples to use Tabs component for better organization

- Replaced TwoslashExample component with Tabs and TabItem components in multiple documentation files for improved code sample presentation.
- Updated installation documentation to reflect the support for showing emitted files.
- Enhanced ESLint, TypeScript, Vue, and other Twoslashers documentation with new examples using Tabs.
- Removed outdated snippet files that were previously used in examples.
- Added utility functions for resolving tsconfig paths and parsing tsconfig files in the plugin code.
- Updated plugin options to include cwd and tsConfigPath for better configuration flexibility.

* feat: add changeset to enable Twoslash's VFS and showEmit functionality

* fix: remove content snippets from linter and file processing includes in biome.json

* fix: update feature links in README to use full URLs for better accessibility

* fix: remove format option from tsdown configuration

* feat: add cwd and tsConfigPath options to Twoslash configuration for enhanced customization

Author: Adammatthiesen

.changeset/long-pillows-sell.md

@@ -0,0 +1,5 @@
+---
+"expressive-code-twoslash": minor
+---
+
+Finally enables Twoslash's VFS and showEmit functionality!

.vscode/settings.json

@@ -46,6 +46,7 @@
 		"recompiles",
 		"rehype",
 		"rgba",
+		"seti",
 		"shiki",
 		"studiocms",
 		"twocustom",

docs/astro.config.mts

@@ -198,6 +198,10 @@ export default defineConfig({
 						{
 							label: "Show Emitted Files",
 							link: "usage/show-emitted-files",
+							badge: {
+								text: "v0.6.0",
+								variant: "success",
+							},
 						},
 					],
 				},

docs/src/content/docs/getting-started/basic.mdx

@@ -13,55 +13,48 @@ It leverages the compiler APIs used by text editors to offer type-driven hover i
 Using the homepage as an example, here is a simple code sample:
 
 <Tabs>
-
-<TabItem label='Before'>
-
-``````md
+<TabItem label="Rendered Output">
 
 ```ts twoslash
 // @errors: 2540
-
 console.log((1 + 2 + 3 + 4).toFixed(2));
 //                            ^|
 
 /** A Basic Todo interface*/
 interface Todo {
-  title: string;
+	title: string;
 }
 
 const todo: Readonly<Todo> = {
-  title: 'Delete inactive users',
-//  ^?
-}
+	title: "Delete inactive users",
+	//  ^?
+};
 
-todo.title = 'Hello';
+todo.title = "Hello";
 ```
 
-``````
-
 </TabItem>
+<TabItem label="Markdown">
 
-<TabItem label="After">
-
+``````md
 ```ts twoslash
 // @errors: 2540
-
 console.log((1 + 2 + 3 + 4).toFixed(2));
 //                            ^|
 
 /** A Basic Todo interface*/
 interface Todo {
-  title: string;
+	title: string;
 }
 
 const todo: Readonly<Todo> = {
-  title: 'Delete inactive users',
-//  ^?
-}
+	title: "Delete inactive users",
+	//  ^?
+};
 
-todo.title = 'Hello';
+todo.title = "Hello";
 ```
+``````
 
 </TabItem>
-
 </Tabs>

docs/src/content/docs/getting-started/installation.mdx

@@ -19,7 +19,7 @@ import { PackageManagers } from 'starlight-package-managers'
 | [Code Cutting](/usage/code-cutting)                       | ✅               |
 | [Callouts](/usage/banners/callouts)                       | ✅               |
 | [TS Compiler Overrides](/usage/ts-compiler-flags)         | ✅               |
-| [Show Emitted Files](/usage/show-emitted-files)           | ⛔️               |
+| [Show Emitted Files](/usage/show-emitted-files)           | ✅               |
 
 ### Installation
 

docs/src/content/docs/index.mdx

@@ -17,8 +17,6 @@ hero:
       icon: star
 ---
 
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-
 ```ts twoslash
 // @errors: 2540
 

docs/src/content/docs/reference/configuration.mdx

@@ -115,6 +115,54 @@ export default defineEcConfig({
 });
 ```
 
+### cwd
+
+<PropertySignature>
+- Type: string
+- Default: `process.cwd()`
+</PropertySignature>
+
+Optionally specify the current working directory for the Twoslash instances. This can be useful if you want to change the base directory from which Twoslash resolves modules and files. By default, Twoslash uses the current working directory of the process, but you can set this option to any valid directory path to customize where Twoslash looks for files and modules.
+
+#### Example
+
+```ts twoslash title="ec.config.mjs" {7}
+import { defineEcConfig } from 'astro-expressive-code';
+import ecTwoSlash from "expressive-code-twoslash";
+
+export default defineEcConfig({
+  plugins: [
+    ecTwoSlash({
+      cwd: "/path/to/your/directory", // Set the current working directory for Twoslash
+    }),
+  ],
+});
+```
+
+### tsConfigPath
+
+<PropertySignature>
+- Type: string
+- Default: `undefined`
+</PropertySignature>
+
+The `tsConfigPath` option allows you to specify the path to a custom `tsconfig.json` file that Twoslash should use when processing TypeScript code blocks. This is useful if you want to provide specific TypeScript compiler options or include/exclude certain files from the Twoslash transformations. By default, Twoslash will look for a `tsconfig.json` file in the current working directory, but you can set this option to point to any valid `tsconfig.json` file in your project.
+
+#### Example
+
+```ts twoslash title="ec.config.mjs" {7}
+import { defineEcConfig } from 'astro-expressive-code';
+import ecTwoSlash from "expressive-code-twoslash";
+
+export default defineEcConfig({
+  plugins: [
+    ecTwoSlash({
+      tsConfigPath: "tsconfig-twoslash.json", // Specify a custom tsconfig.json file for Twoslash
+    }),
+  ],
+});
+```
+
 ### includeJsDoc
 
 <PropertySignature>

docs/src/content/docs/twoslashers/eslint.mdx

@@ -10,7 +10,7 @@ sidebar:
     variant: success
 ---
 
-import { Tabs, TabItem, Aside } from '@astrojs/starlight/components';
+import { Aside, TabItem, Tabs } from "@astrojs/starlight/components";
 
 Included in Expressive code twoslash, [Twoslash ESLint](https://twoslash.netlify.app/packages/eslint) is a Twoslash integration that added support for Twoslash to handle ESLint code blocks. Unlike other Twoslash instances, Twoslash ESLint uses `eslint` as it's meta trigger for codeblocks, and it is designed to work with JavaScript and TypeScript code blocks that contain ESLint errors. When a code block is annotated with `eslint`, Twoslash ESLint will parse the code.
 
@@ -25,32 +25,28 @@ npm install eslint
 This is an example taken from the Twoslash ESLint documentation website.
 
 <Tabs>
-
-<TabItem label="Output">
+<TabItem label="Rendered Output">
 
 ```ts eslint
-const unused = 1
+const unused = 1;
 
 type Foo = {
-  bar: string
-}
+	bar: string;
+};
 ```
-</TabItem>
 
-<TabItem label='Markdown'>
+</TabItem>
+<TabItem label="Markdown">
 
 ``````md
-
 ```ts eslint
-const unused = 1
+const unused = 1;
 
 type Foo = {
-  bar: string
-}
+  bar: string;
+};
 ```
-
 ``````
 
 </TabItem>
-
 </Tabs>

docs/src/content/docs/twoslashers/typescript.mdx

@@ -6,61 +6,55 @@ sidebar:
   label: TypeScript / TSX
 ---
 
-import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { TabItem, Tabs } from "@astrojs/starlight/components";
 
 The primary Twoslasher integration included in Expressive Code Twoslash is the [TypeScript Twoslasher](https://twoslash.netlify.app/guide/), which adds support for Twoslash to handle TypeScript code blocks.
 
 This is an example taken from the Twoslash documentation website.
 
 <Tabs>
-
-<TabItem label="Output">
+<TabItem label="Rendered Output">
 
 ```ts twoslash
 // @errors: 2540
-
 console.log((1 + 2 + 3 + 4).toFixed(2));
 //                            ^|
 
 /** A Basic Todo interface*/
 interface Todo {
-  title: string;
+	title: string;
 }
 
 const todo: Readonly<Todo> = {
-  title: 'Delete inactive users',
-//  ^?
-}
+	title: "Delete inactive users",
+	//  ^?
+};
 
-todo.title = 'Hello';
+todo.title = "Hello";
 ```
-</TabItem>
 
-<TabItem label='Markdown'>
+</TabItem>
+<TabItem label="Markdown">
 
 ``````md
-
 ```ts twoslash
 // @errors: 2540
-
 console.log((1 + 2 + 3 + 4).toFixed(2));
 //                            ^|
 
 /** A Basic Todo interface*/
 interface Todo {
-  title: string;
+	title: string;
 }
 
 const todo: Readonly<Todo> = {
-  title: 'Delete inactive users',
-//  ^?
-}
+	title: "Delete inactive users",
+	//  ^?
+};
 
-todo.title = 'Hello';
+todo.title = "Hello";
 ```
-
 ``````
 
 </TabItem>
-
 </Tabs>

docs/src/content/docs/twoslashers/vue.mdx

@@ -10,7 +10,7 @@ sidebar:
     variant: success
 ---
 
-import { Tabs, TabItem, Aside } from '@astrojs/starlight/components';
+import { Aside, TabItem, Tabs } from '@astrojs/starlight/components';
 
 Included in Expressive code twoslash, [Twoslash Vue](https://twoslash.netlify.app/packages/vue) is a Twoslash integration that added support for Twoslash to handle Vue Single File Component files.
 
@@ -25,8 +25,7 @@ npm install vue
 This is an example taken from the Twoslash Vue documentation website.
 
 <Tabs>
-
-<TabItem label="Output">
+<TabItem label="Rendered Output">
 
 ```vue twoslash
 <script setup>
@@ -53,12 +52,11 @@ onMounted(() => {
   </button>
 </template>
 ```
-</TabItem>
 
-<TabItem label='Markdown'>
+</TabItem>
+<TabItem label="Markdown">
 
 ``````md
-
 ```vue twoslash
 <script setup>
 import { onMounted, ref } from 'vue'
@@ -84,9 +82,7 @@ onMounted(() => {
   </button>
 </template>
 ```
-
 ``````
 
 </TabItem>
-
 </Tabs>