twoslash-vue

import { createTwoSlashFromVueSFC } from 'twoslash-vue'; // Example Vue SFC code demonstrating type queries and errors const vueSFC = ` <script setup lang="ts"> import { ref } from 'vue' const count = ref(0) // ^? const message: string = 'Hello Vue' // ^? function increment() { count.value++ // This would be a type error if uncommented: // message = 123; // @ts-expect-error } </script> <template> <button @click="increment">{{ message }} {{ count }}</button> </template> <style scoped> button { font-weight: bold; } </style> `; // Process the Vue SFC to extract Twoslash information const twoslashResult = createTwoSlashFromVueSFC(vueSFC, 'MyComponent.vue'); console.log('Extracted Errors:', twoslashResult.errors); console.log('Extracted Queries:', twoslashResult.queries); console.log('Extracted Completions:', twoslashResult.completions); // The 'code' property contains the TypeScript code derived from the SFC, // which Twoslash processed internally. console.log('Transformed TS Code snippet (first 200 chars):\n', twoslashResult.code.substring(0, 200) + '...'); // To visualize this, you would typically integrate with a syntax highlighter // (e.g., Shiki) and a Twoslash renderer in a documentation site.