fix(cli-utils): vue losing the graphql call due to missing sfc plugin (…

…#305)

Co-authored-by: Phil Pluckthun <phil@kitten.sh>

.changeset/silver-eels-rhyme.md

@@ -0,0 +1,6 @@
+---
+"@gql.tada/cli-utils": patch
+"gql.tada": patch
+---
+
+Fix Vue not transpiling to `.tsx` files properly due to missing SFC plugin

packages/cli-utils/src/ts/transformers/vue.ts

@@ -2,6 +2,60 @@ import ts from 'typescript';
 import type { VirtualCode } from '@vue/language-core';
 import * as vueCompilerDOM from '@vue/compiler-dom';
 import * as vue from '@vue/language-core';
+import { parse } from '@vue/language-core';
+
+const useVueFilePlugin: vue.VueLanguagePlugin = (_ctx) => {
+  return {
+    version: 2,
+
+    parseSFC(_fileName, content) {
+      return parse(content);
+    },
+
+    updateSFC(sfc, change) {
+      const blocks = [
+        sfc.descriptor.template,
+        sfc.descriptor.script,
+        sfc.descriptor.scriptSetup,
+        ...sfc.descriptor.styles,
+        ...sfc.descriptor.customBlocks,
+      ].filter((block): block is NonNullable<typeof block> => !!block);
+
+      const hitBlock = blocks.find(
+        (block) => change.start >= block.loc.start.offset && change.end <= block.loc.end.offset
+      );
+      if (!hitBlock) {
+        return;
+      }
+
+      const oldContent = hitBlock.content;
+      const newContent = (hitBlock.content =
+        hitBlock.content.substring(0, change.start - hitBlock.loc.start.offset) +
+        change.newText +
+        hitBlock.content.substring(change.end - hitBlock.loc.start.offset));
+
+      // #3449
+      const endTagRegex = new RegExp(`</\\s*${hitBlock.type}\\s*>`);
+      const insertedEndTag = !!oldContent.match(endTagRegex) !== !!newContent.match(endTagRegex);
+      if (insertedEndTag) {
+        return;
+      }
+
+      const lengthDiff = change.newText.length - (change.end - change.start);
+
+      for (const block of blocks) {
+        if (block.loc.start.offset > change.end) {
+          block.loc.start.offset += lengthDiff;
+        }
+        if (block.loc.end.offset >= change.end) {
+          block.loc.end.offset += lengthDiff;
+        }
+      }
+
+      return sfc;
+    },
+  };
+};
 
 function* forEachEmbeddedCode(virtualCode: VirtualCode) {
   yield virtualCode;
@@ -34,15 +88,18 @@ export const transform = (sourceFile: ts.SourceFile): VirtualCode | undefined =>
   if (!VueVirtualCode || !getBasePlugins) {
     return undefined;
   } else if (!plugins) {
-    plugins = getBasePlugins({
+    const pluginContext = {
       modules: {
         typescript: ts,
         '@vue/compiler-dom': vueCompilerDOM,
       },
       compilerOptions: {},
       globalTypesHolder: undefined,
       vueCompilerOptions,
-    });
+    };
+    plugins = getBasePlugins(pluginContext);
+    const vueSfcPlugin = useVueFilePlugin(pluginContext);
+    plugins.push(vueSfcPlugin);
   }
 
   const snapshot = ts.ScriptSnapshot.fromString(sourceFile.getFullText());