Handle vue ts (#375)

Author: Shinigami92

src/printer.ts

@@ -158,20 +158,23 @@ interface FormatDelegatePrettierOptions {
 /**
  * Supported parsers for the `formatDelegatePrettier` function.
  */
-type FormatDelegatePrettierSupportedParser = keyof Pick<
-  typeof PrettierAngularPlugin.parsers &
-    typeof PrettierBabelPlugin.parsers &
-    typeof PrettierHtmlPlugin.parsers &
-    typeof PrettierPostcssPlugin.parsers,
-  | 'css'
-  | 'vue'
-  | '__vue_event_binding'
-  | '__vue_expression'
-  | '__js_expression'
-  | '__ng_binding'
-  | '__ng_action'
-  | '__ng_directive'
->;
+type FormatDelegatePrettierSupportedParser =
+  | keyof Pick<
+      typeof PrettierAngularPlugin.parsers &
+        typeof PrettierBabelPlugin.parsers &
+        typeof PrettierHtmlPlugin.parsers &
+        typeof PrettierPostcssPlugin.parsers,
+      | 'css'
+      | 'vue'
+      | '__vue_event_binding'
+      | '__vue_expression'
+      | '__js_expression'
+      | '__ng_binding'
+      | '__ng_action'
+      | '__ng_directive'
+    >
+  | '__vue_ts_event_binding'
+  | '__vue_ts_expression';
 
 /**
  * The printer class.
@@ -721,13 +724,31 @@ export class PugPrinter {
   }
 
   private async formatVueEventBinding(val: string): Promise<string> {
-    return this.formatDelegatePrettier(val, '__vue_event_binding', {
+    try {
+      return await this.formatDelegatePrettier(val, '__vue_event_binding', {
+        trimTrailingSemicolon: true,
+      });
+    } catch {
+      return this.formatVueTsEventBinding(val);
+    }
+  }
+
+  private async formatVueTsEventBinding(val: string): Promise<string> {
+    return this.formatDelegatePrettier(val, '__vue_ts_event_binding', {
       trimTrailingSemicolon: true,
     });
   }
 
   private async formatVueExpression(val: string): Promise<string> {
-    return this.formatDelegatePrettier(val, '__vue_expression');
+    try {
+      return await this.formatDelegatePrettier(val, '__vue_expression');
+    } catch {
+      return this.formatVueTsExpression(val);
+    }
+  }
+
+  private async formatVueTsExpression(val: string): Promise<string> {
+    return this.formatDelegatePrettier(val, '__vue_ts_expression');
   }
 
   private async formatAngularBinding(val: string): Promise<string> {

tests/issues/issue-365/formatted.vue

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({});
+</script>
+
+<template lang="pug">
+n-input(:ref="(el: any) => (pinRefs[index] = el)", @change="(val: string) => val")
+</template>

tests/issues/issue-365/issue-365.test.ts

@@ -0,0 +1,15 @@
+import { compareFiles } from 'tests/common';
+import { describe, expect, it } from 'vitest';
+
+describe('Issues', () => {
+  it('should handle TS in Vue files', async () => {
+    const { actual, expected } = await compareFiles(import.meta.url, {
+      source: 'unformatted.vue',
+      target: 'formatted.vue',
+      formatOptions: {
+        pugFramework: 'vue',
+      },
+    });
+    expect(actual).toBe(expected);
+  });
+});

tests/issues/issue-365/unformatted.vue

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({});
+</script>
+
+<template lang="pug">
+n-input(:ref="(el:any)=>pinRefs[index]=el", @change="(val:string)=>val")
+</template>