fix: error when include does not contain *.tsx

Author: ota-meshi

package.json

@@ -44,7 +44,8 @@
     "preversion": "yarn lint && yarn test",
     "release": "changeset publish",
     "test": "yarn mocha \"tests/src/**/*.ts\" --reporter dot --timeout 60000",
-    "ts": "node -r esbuild-register"
+    "ts": "node -r esbuild-register",
+    "update-fixture": "yarn mocha \"tests/src/**/*.ts\" --update --reporter dot --timeout 60000"
   },
   "peerDependencies": {
     "@typescript-eslint/parser": ">=5.41.0",

src/ts.ts

@@ -54,8 +54,8 @@ export class TSService {
   private readonly fileWatchCallbacks = new Map<string, () => void>();
 
   public constructor(tsconfigPath: string, extraFileExtensions: string[]) {
-    this.watch = this.createWatch(tsconfigPath, extraFileExtensions);
     this.extraFileExtensions = extraFileExtensions;
+    this.watch = this.createWatch(tsconfigPath, extraFileExtensions);
   }
 
   public getProgram(code: string, filePath: string): ts.Program {
@@ -84,6 +84,7 @@ export class TSService {
     tsconfigPath: string,
     extraFileExtensions: string[]
   ): ts.WatchOfConfigFile<ts.BuilderProgram> {
+    const normalizedTsconfigPath = normalizeFileName(tsconfigPath);
     const watchCompilerHost = ts.createWatchCompilerHost(
       tsconfigPath,
       {
@@ -103,18 +104,31 @@ export class TSService {
       () => {
         // Not reported in reportWatchStatus.
       },
-      undefined,
-      extraFileExtensions.map((extension) => ({
-        extension,
-        isMixedContent: true,
-        scriptKind: ts.ScriptKind.Deferred,
-      }))
+      undefined
+      // extraFileExtensions.map((extension) => ({
+      //   extension,
+      //   isMixedContent: true,
+      //   scriptKind: ts.ScriptKind.Deferred,
+      // }))
     );
     const original = {
       // eslint-disable-next-line @typescript-eslint/unbound-method -- Store original
       readFile: watchCompilerHost.readFile,
       // eslint-disable-next-line @typescript-eslint/unbound-method -- Store original
       fileExists: watchCompilerHost.fileExists,
+      // eslint-disable-next-line @typescript-eslint/unbound-method -- Store original
+      readDirectory: watchCompilerHost.readDirectory,
+    };
+    watchCompilerHost.readDirectory = (...args) => {
+      const results = original.readDirectory.call(watchCompilerHost, ...args);
+
+      return [
+        ...new Set(
+          results.map((result) =>
+            toVirtualTSXlFileName(result, extraFileExtensions)
+          )
+        ),
+      ];
     };
     watchCompilerHost.readFile = (fileName, ...args) => {
       const realFileName = toRealFileName(fileName, extraFileExtensions);
@@ -127,19 +141,40 @@ export class TSService {
         });
       }
 
-      const code = original.readFile.call(this, realFileName, ...args);
-      return (
-        code &&
-        transformExtraFile(code, {
-          filePath: normalized,
-          current: false,
-        })
+      const code = original.readFile.call(
+        watchCompilerHost,
+        realFileName,
+        ...args
       );
+      if (!code) {
+        return code;
+      }
+      if (normalizedTsconfigPath === normalized) {
+        const configJson = ts.parseConfigFileTextToJson(realFileName, code);
+        if (!configJson.config) {
+          return code;
+        }
+        let include = undefined;
+
+        if (configJson.config.include) {
+          include = [configJson.config.include]
+            .flat()
+            .map((s) => toVirtualTSXlFileName(s, extraFileExtensions));
+        }
+        return JSON.stringify({
+          ...configJson.config,
+          include,
+        });
+      }
+      return transformExtraFile(code, {
+        filePath: normalized,
+        current: false,
+      });
     };
     // Modify it so that it can be determined that the virtual file actually exists.
     watchCompilerHost.fileExists = (fileName, ...args) =>
       original.fileExists.call(
-        this,
+        watchCompilerHost,
         toRealFileName(fileName, extraFileExtensions),
         ...args
       );
@@ -197,6 +232,19 @@ function getFileNamesIncludingVirtualTSX(
   return [fileName];
 }
 
+/** If the given filename has extra file extensions, returns the real virtual filename. */
+function toVirtualTSXlFileName(
+  fileName: string,
+  extraFileExtensions: string[]
+) {
+  for (const extraFileExtension of extraFileExtensions) {
+    if (fileName.endsWith(extraFileExtension)) {
+      return `${fileName}.tsx`;
+    }
+  }
+  return fileName;
+}
+
 /** If the given filename is a virtual filename (.vue.tsx), returns the real filename. */
 function toRealFileName(fileName: string, extraFileExtensions: string[]) {
   for (const extraFileExtension of extraFileExtensions) {

tests/fixtures/types/astro/astro-component-single/source.astro

@@ -0,0 +1,9 @@
+---
+interface Props {
+  a: string;
+  b: number;
+}
+let { a, b } = Astro.props;
+---
+
+{a}{b}

tests/fixtures/types/astro/astro-component-single/types.astro

@@ -0,0 +1,9 @@
+---
+interface Props { // Props: Props
+  a: string; // a: string
+  b: number; // b: number
+}
+let { a, b } = Astro.props; // a: any, a: any, b: any, b: any, Astro.props: any
+---
+
+{a}{b} // a: any, b: any

tests/fixtures/types/astro/astro-component01/source.astro

@@ -7,7 +7,7 @@ interface Props {
   b: TypeFoo;
   foo: string;
 }
-let { b, foo }: number = Astro.props;
+let { b, foo } = Astro.props;
 const t = numberValue * 2;
 ---
 

tests/fixtures/types/astro/astro-component01/types.astro

@@ -7,7 +7,7 @@ interface Props { // Props: Props
   b: TypeFoo; // TypeFoo: string, b: string
   foo: string; // foo: string
 }
-let { b, foo }: number = Astro.props; // b: any, b: any, foo: any, foo: any, Astro.props: any
+let { b, foo } = Astro.props; // b: any, b: any, foo: any, foo: any, Astro.props: any
 const t = numberValue * 2; // t: number, numberValue: 1
 ---
 

tests/fixtures/types/astro/astro-component02/source.astro

@@ -4,7 +4,7 @@ export type TypeFoo = string;
 interface Props {
   a?: number;
 }
-let { a = 1 }: number = Astro.props;
+let { a = 1 } = Astro.props;
 let foo: number = 42;
 ---
 

tests/fixtures/types/astro/astro-component02/types.astro

@@ -4,7 +4,7 @@ export type TypeFoo = string; // TypeFoo: string
 interface Props { // Props: Props
   a?: number; // a: number | undefined
 }
-let { a = 1 }: number = Astro.props; // a: any, a: any, Astro.props: any
+let { a = 1 } = Astro.props; // a: any, a: any, Astro.props: any
 let foo: number = 42; // foo: number
 ---
 

tests/fixtures/types/svelte/svelte-component-single/source.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  export let a: string;
+  export let b: number;
+</script>
+
+{a}{b}

tests/fixtures/types/svelte/svelte-component-single/types.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  export let a: string; // a: string
+  export let b: number; // b: number
+</script>
+
+{a}{b} // a: string, b: number

tests/fixtures/types/vue/vue-component-single/source.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+let a = 1;
+</script>
+
+<template>
+  <div>{{ a }}</div>
+</template>

tests/fixtures/types/vue/vue-component-single/types.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+let a = 1; // a: number
+</script>
+
+<template>
+  <div>{{ a }}</div>
+</template>

tests/src/types.ts

@@ -145,6 +145,9 @@ describe("Template Types", () => {
         const actual = buildTypes(source, result as any);
         const resultPath = sourcePath.replace(/source\.([a-z]+)$/u, "types.$1");
 
+        if (process.argv.includes("--update")) {
+          fs.writeFileSync(resultPath, actual);
+        }
         if (!fs.existsSync(resultPath)) {
           fs.writeFileSync(resultPath, actual);
         }