Proper TypeScript support - Babel parses TS as JS instead of TS

[JoJk0]

Currently, only Vue SFC files without typescript-specific syntax presence are working with the addon (e.g. TS files with no TS syntax).

Example

Adding anything TypeScript-specific throws an error, e.g. adding and using ComponentProps type inside ./examples/vite/src/writing-docs/mdx-1.basic-example.stories.vue

<script setup lang="ts">
import type { ComponentProps } from 'vue-component-type-helpers'

import Checkbox from '../components/Checkbox.vue'

const a: ComponentProps<typeof Checkbox> = {
  label: 'Unchecked',
}
</script>

[filiprak]

Got same issue, should be fixed in PR #174

This kind of temporary package-patch may work:

diff --git a/node_modules/storybook-vue-addon/dist/chunk-MKPJVWYV.cjs b/node_modules/storybook-vue-addon/dist/chunk-MKPJVWYV.cjs
index 1e3e632..d85b409 100644
--- a/node_modules/storybook-vue-addon/dist/chunk-MKPJVWYV.cjs
+++ b/node_modules/storybook-vue-addon/dist/chunk-MKPJVWYV.cjs
@@ -5,6 +5,7 @@ var _unplugin = require('unplugin');
 var _mdx2csf = require('@storybook/mdx2-csf');
 var _prettier = require('prettier');
 var _compilersfc = require('vue/compiler-sfc');
+var ts = require('typescript');
 
 // src/core/parser.ts
 
@@ -109,8 +110,14 @@ async function transform(code) {
   const { resolvedScript, meta, stories, docs } = parse(code);
   const isTS = _optionalChain([resolvedScript, 'optionalAccess', _32 => _32.lang]) === "ts";
   if (resolvedScript) {
+    const content = isTS ? ts.transpileModule(resolvedScript.content, {
+      compilerOptions: {
+        target: ts.ScriptTarget.ESNext,
+        module: ts.ModuleKind.ESNext,
+      },
+    }).outputText : resolvedScript.content;
     const babelPlugins = isTS ? ["typescript"] : [];
-    result += _compilersfc.rewriteDefault.call(void 0, resolvedScript.content, "_sfc_main", babelPlugins);
+    result += _compilersfc.rewriteDefault.call(void 0, content, "_sfc_main", babelPlugins);
     result += "\n";
   } else {
     result += "const _sfc_main = {}\n";