Merge pull request #96 from HichemTab-tech/fix-vite-dev-mode

Omptimise/fix parsing in vite dev mode

Author: HichemTab-tech

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-runtime-picker",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "main": "dist/index.js",
   "exports": {
     ".": {

src/ts-transformer.ts

@@ -1,11 +1,32 @@
 import { Project, SyntaxKind } from "ts-morph";
 
-const project = new Project({
-    tsConfigFilePath: "tsconfig.json",
-});
+export const fileToTypes = new Map<string, Set<string>>();
+
+export const typeToFile = new Map<string, string>();
+
+let project = null as unknown as Project;
+
+export const refreshProject = () => {
+    project = new Project({
+        tsConfigFilePath: "tsconfig.json",
+    });
+}
+
+export const invalidateOneFile = (file: string) => {
+
+    const sourceFileToRefresh = project.getSourceFile(file);
+    if (sourceFileToRefresh) {
+        sourceFileToRefresh.refreshFromFileSystemSync();
+        return true;
+    } else {
+        return false;
+    }
+}
 
 export function transform(code: string, filePath: string): string {
 
+    const usedTypes = new Set<string>();
+
     let sourceFile = project.getSourceFile(filePath);
 
     if (!sourceFile) {
@@ -16,6 +37,20 @@ export function transform(code: string, filePath: string): string {
         sourceFile.replaceWithText(code);
     }
 
+    sourceFile.getDescendantsOfKind(SyntaxKind.TypeReference).forEach(ref => {
+        const typeName = ref.getTypeName().getText();
+        usedTypes.add(typeName);
+
+        // BONUS: resolve where this type is defined
+        const decl = ref.getType().getSymbol()?.getDeclarations()?.[0];
+        const source = decl?.getSourceFile()?.getFilePath();
+        if (source) {
+            typeToFile.set(typeName, source);
+        }
+    });
+
+    fileToTypes.set(filePath, usedTypes);
+
     // Figure out what the “createPicker” import is called (alias or direct)
     let createPickerAlias: string | null = null;
     for (const importDecl of sourceFile.getImportDeclarations()) {
@@ -63,4 +98,6 @@ export function transform(code: string, filePath: string): string {
     }
 
     return sourceFile.getFullText();
-}
+}
+
+refreshProject();

src/vite-plugin.ts

@@ -1,5 +1,5 @@
 import { PluginOption } from "vite";
-import { transform } from "./ts-transformer.js";
+import {fileToTypes, invalidateOneFile, transform, typeToFile} from "./ts-transformer.js";
 
 // noinspection JSUnusedGlobalSymbols
 /**
@@ -27,6 +27,63 @@ export default function TsRuntimePickerVitePlugin(): PluginOption {
 
             return null;
         },
+
+        handleHotUpdate: ({server, file, timestamp}) => {
+            const isKnownTypeDefinitionFile = [...typeToFile.values()].includes(file);
+
+            if (!isKnownTypeDefinitionFile) {
+                // This file change doesn't affect any of our transformations, so we can ignore it.
+                return;
+            }
+
+            console.log(`[ts-runtime-picker] Change detected in a tracked type definition: ${file}`);
+
+
+            // Surgically update the ts-morph project
+            if (!invalidateOneFile(file)) return;
+
+            const dependentModulesToUpdate = [];
+
+            // Find all files (`userFile`) that import a type from the file that just changed (`file`).
+            for (const [userFile, usedTypes] of fileToTypes.entries()) {
+                for (const typeName of usedTypes) {
+                    if (typeToFile.get(typeName) === file) {
+                        // This `userFile` depends on the changed type. We need to update it.
+                        const moduleNode = server.moduleGraph.getModuleById(userFile);
+                        if (moduleNode) {
+                            dependentModulesToUpdate.push(moduleNode);
+                            // Once we know the file is affected, we don't need to check its other types.
+                            break;
+                        }
+                    }
+                }
+            }
+
+            if (dependentModulesToUpdate.length > 0) {
+                console.log(`[ts-runtime-picker] Found ${dependentModulesToUpdate.length} module(s) to update.`);
+
+                //Invalidate modules and notify the client
+                for (const mod of dependentModulesToUpdate) {
+                    server.moduleGraph.invalidateModule(mod);
+                }
+
+                // This sends the HMR update to the client (browser), telling it which
+                // modules have changed so it can re-request them.
+                server.ws.send({
+                    type: 'update',
+                    updates: dependentModulesToUpdate.map((mod) => ({
+                        type: 'js-update',
+                        path: mod.url,
+                        acceptedPath: mod.url,
+                        timestamp: timestamp
+                    }))
+                });
+            }
+
+            // We return the list of modules we've handled so Vite's core HMR logic
+            // doesn't try to process them again.
+            return dependentModulesToUpdate;
+        }
     } as PluginOption;
 }