@superblocksteam/vite-plugin-file-sync 2.0.55 → 2.0.56-next.1

package/dist/file-sync-vite-plugin.js

@@ -2,29 +2,28 @@ import { writeFileSync, unlinkSync } from "node:fs";
 import path from "node:path";
 import { pipeline } from "node:stream/promises";
 import { createGzip } from "node:zlib";
-import { ViteMessageKind } from "@superblocksteam/library-shared/types";
 import { ApiTriggerType } from "@superblocksteam/shared";
 import bodyParser from "body-parser";
 import { debounce } from "lodash-es";
 import * as tar from "tar";
-import { extractApiDependencies, extractIdentifierPathsFromApi, } from "./binding-extraction/extract-identifiers.js";
+import { extractInputsFromApi } from "./binding-extraction/extract-identifiers.js";
 import { ImportError } from "./build-errors.js";
-import { ComponentDocsService, } from "./component-docs-service/index.js";
-import { ComponentsManager, getComponentSourceCode, } from "./components-manager.js";
+import { ComponentsManager, getComponentSourceCode, getComponentSiblingSourceCode, } from "./components-manager.js";
 import { makeServerError } from "./errors/make-server-error.js";
-import { getPageFilePath, isApiFilePath, SCOPE_FILE, ROUTES_FILE, isPageFilePath, codeModeDownloadExcludedDirectories, codeModeExcludedFiles, } from "./file-system-helpers.js";
+import { isApiFilePath, SCOPE_FILE, isPageFilePath, codeModeDownloadExcludedDirectories, codeModeExcludedFiles, } from "./file-system-helpers.js";
 import { FileSystemManager } from "./file-system-manager.js";
 import { indexHtmlMiddleware } from "./injected-index.js";
 import { LockServiceStatus } from "./lock-service/index.js";
 import { getImports } from "./parsing/imports.js";
 import { getLegacyComponentsFolder, isCustomBuildEnabled, setOptions, } from "./plugin-options.js";
 import { createIdResolver, getFullImportPath } from "./resolver.js";
-import { generateRootSource } from "./routing.js";
+import { parseRouterFile } from "./router-parser.js";
 import { createSocketManager, disposeSocketManager } from "./socket-manager.js";
 import { GenerationNumberSequence } from "./util/generation-number-sequence.js";
 import { getErrorMeta, getLogger, setDefaultLogger } from "./util/logger.js";
-import { getAllApiDefinitions, getAllPages } from "./util.js";
+import { getAllPages } from "./util.js";
 import { resolvedVirtualRegisteredComponentsId, virtualLegacyId, resolvedVirtualLegacyId, virtualRegisteredComponentsId, } from "./virtual-modules.js";
+import { yamlApiTypesPlugin } from "./vite-plugin-yaml-types.js";
 let hasStarted = false;
 let isInitialized = false;
 let config;
@@ -44,7 +43,6 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
     const aiService = pluginParams.aiService;
     const fsOperationQueue = pluginParams.fsOperationQueue;
     const httpServer = pluginParams.httpServer;
-    let componentDocsService;
     let socketManager;
     const fileSyncManager = new FileSystemManager(fsOperationQueue, generationNumberSequence, pluginParams.tracer);
     if (syncService) {
@@ -63,8 +61,9 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
             await aiService.waitUntilGenerationComplete();
         });
     }
-    const componentsManager = ComponentsManager.setInstance(pluginParams.tracer, pluginParams.features);
+    const componentsManager = ComponentsManager.setInstance(pluginParams.tracer);
     const lastImportErrorFiles = new Set();
+    const debouncedFileUpdateHandlers = new Map();
     const addFileTransformError = (filePath, error) => {
         const fileTransformError = makeServerError(error, {
             critical: false,
@@ -88,7 +87,6 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
         enforce: "pre",
         async configureServer(server) {
             config = server.config;
-            componentDocsService = new ComponentDocsService(server.config.root);
             // Set up Vite module invalidation callback for SyncService
             // This ensures that when Clark writes files, Vite's module cache is invalidated
             if (syncService) {
@@ -137,46 +135,11 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
             ]);
             if (aiService) {
                 aiService.setSourceTracker(fileSyncManager.getSourceTracker());
-                aiService.setComponentDocsService(componentDocsService);
                 aiService.setFileSystemManager(fileSyncManager);
             }
             server.middlewares.use((req, res, next) => {
                 void indexHtmlMiddleware(server, pluginParams?.features)(req, res, next);
             });
-            server.middlewares.use("/sb-init", bodyParser.json({ strict: true }));
-            server.middlewares.use("/sb-init", (req, res, next) => {
-                void (async () => {
-                    if (!isInitialized) {
-                        return next();
-                    }
-                    if (req.method !== "GET" && req.method !== "OPTIONS") {
-                        res.statusCode = 405;
-                        res.end("Method not allowed");
-                        return res.end();
-                    }
-                    res.setHeader("Access-Control-Allow-Origin", "*");
-                    res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS");
-                    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
-                    if (req.method === "OPTIONS") {
-                        res.statusCode = 204;
-                        res.end();
-                        return;
-                    }
-                    const fullUrl = new URL(req.url ?? "/", "http://localhost:5173");
-                    if (!fullUrl.searchParams.get("route")) {
-                        res.statusCode = 400;
-                        res.end("Missing route, use ?route=/route");
-                        return res.end();
-                    }
-                    const actualUrl = new URL(fullUrl.searchParams.get("route") ?? "/", fullUrl);
-                    const files = await getAllApiDefinitions({
-                        rootDir: config.root,
-                        currentUrl: actualUrl.toString(),
-                    });
-                    res.setHeader("Content-Type", "application/json");
-                    return res.end(JSON.stringify(files));
-                })();
-            });
             server.middlewares.use("/sb-scopes", bodyParser.json({ strict: true }));
             server.middlewares.use("/sb-scopes", (req, res, next) => {
                 void (async () => {
@@ -275,7 +238,7 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
                 lockService,
                 syncService,
                 aiService,
-                componentDocsService,
+                checkAuthorization: pluginParams.checkAuthorization,
                 tracer: pluginParams.tracer,
                 path: "/sb-updates",
             });
@@ -312,59 +275,10 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
                     });
                 })();
             });
-            const extractApiParamsAndDependencies = (socket) => {
-                const allApis = fileSyncManager.getApiFiles();
-                // If we do not have any APIs, we can mark the apis as loaded immediately
-                // to trigger side effects like page load events
-                if (Object.keys(allApis).length === 0) {
-                    void socket.call.setApisLoaded();
-                    return;
-                }
-                const allApiNames = Object.values(allApis).map(({ api }) => api.apiPb.metadata.name);
-                // TODO: This logic is copied in the getApiDependencies function in the
-                // generateBuildManifestPlugin plugin.
-                //
-                // This logic should be refactored so that it can be shared between the two plugins.
-                const apiDependencyMap = {};
-                return Promise.all([
-                    ...Object.values(allApis).map(async ({ api, scopeId }) => {
-                        const bindings = await extractIdentifierPathsFromApi(api);
-                        const apiDependencies = extractApiDependencies(allApiNames, bindings);
-                        apiDependencyMap[api.apiPb.metadata.name] = apiDependencies;
-                        // We don't need to explicitly call setApisLoaded here because the
-                        // updateApiParams call will trigger that if its not already marked as loaded
-                        return socket.call.updateApiParams({
-                            apiName: api.apiPb.metadata.name,
-                            scopeId,
-                            params: bindings,
-                            apiDependencies,
-                        });
-                    }),
-                ]).then(() => {
-                    void socketManager.callEditorClients((editorClientSocket) => {
-                        return editorClientSocket.call.setApiDependencies({
-                            apiDependencies: apiDependencyMap,
-                        });
-                    });
-                });
-            };
-            socketManager.on("connect:library", (socket) => {
-                void (async () => {
-                    const allApis = fileSyncManager.getApiFiles();
-                    void socket.call
-                        .setApiDefinitions(allApis)
-                        .then(() => extractApiParamsAndDependencies(socket));
-                    const tsFilePaths = fileSyncManager.getTsFilePaths();
-                    void socket.call.updateLocalBindingEntities({
-                        entities: Array.from(new Set(tsFilePaths.flatMap((file) => fileSyncManager.getLocalBindingEntities(file)))),
-                    });
-                })();
-            });
             const sendRootUpdate = async (path, sync = false) => {
                 const roots = await fileSyncManager.getPageRootNodes(path);
                 const scope = fileSyncManager.getScope(path);
                 if (!roots || !scope) {
-                    logger?.error(`sendRootUpdate: no roots or scope ${path}`);
                     return;
                 }
                 const { scopeId } = scope;
@@ -390,49 +304,9 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
                     await syncService.uploadDirectory("multiRootUpdate");
                 }
             };
-            const sendRootReset = async (skipLibrary = false) => {
+            const sendFileUpdate = async (_path) => {
                 const appScope = await getAppScope(fileSyncManager);
-                const allApis = fileSyncManager.getApiFiles();
-                void socketManager.callEditorClients(async (socket) => {
-                    await socket.call.resetScope({
-                        appScope,
-                    });
-                    for (const api of Object.values(allApis)) {
-                        void socket.call.manualUpdateApi({
-                            api: {
-                                ...api.api,
-                                scopeId: api.scopeId,
-                            },
-                        });
-                    }
-                });
-                if (!skipLibrary) {
-                    socketManager.callLibraryClients(async (socket) => {
-                        void socket.call.updateApis(Object.values(allApis).map((api) => ({
-                            api: api.api,
-                            scopeId: api.scopeId,
-                        })));
-                    });
-                }
-                if (syncService) {
-                    await syncService.uploadDirectory("rootReset");
-                }
-            };
-            // TODO: @damian - Check if we need both sendFileUpdate and sendEntityUpdate
-            const sendFileUpdate = async (path) => {
-                const scope = fileSyncManager.getScope(path);
-                const entities = scope?.entities ?? {};
-                const scopeId = scope?.scopeId ?? "";
-                // Check if this is an app-level file (App.tsx or root scope.ts)
-                const isAppFile = path === fileSyncManager.appFilePath;
-                const isRootScope = path === fileSyncManager.rootScopeFilePath;
-                const roots = isAppFile || isRootScope
-                    ? await fileSyncManager.getAppRootNodes()
-                    : await fileSyncManager.getPageRootNodes(path);
-                void socketManager.callEditorClients((socket) => socket.call.updateScope({
-                    scopeId,
-                    updates: { entities, roots: roots ?? undefined },
-                }));
+                void socketManager.callEditorClients((socket) => socket.call.resetScope({ appScope }));
             };
             const sendDeleteComponentsUpdate = async (path, sourceIds) => {
                 const scope = fileSyncManager.getScope(path);
@@ -448,50 +322,6 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
                     })));
                 });
             };
-            const sendDeleteEntityUpdate = async (path, entityName) => {
-                const scope = fileSyncManager.getScope(path);
-                if (!scope) {
-                    console.error("No scope found for", path);
-                    return;
-                }
-                const { scopeId } = scope;
-                await sendEntityUpdate(path, undefined, true);
-                void socketManager.callLibraryClients((socket) => {
-                    return socket.call.deleteEntities([
-                        {
-                            scopeId,
-                            entityName,
-                        },
-                    ]);
-                });
-            };
-            const sendEntityUpdate = async (path, _request, includeRootsUpdate = false) => {
-                const scope = fileSyncManager.getScope(path);
-                if (!scope) {
-                    console.error("No scope found for", path);
-                    return;
-                }
-                const { entities, scopeId } = scope;
-                let roots = undefined;
-                if (includeRootsUpdate) {
-                    // Check if this is an app-level file (App.tsx or root scope.ts)
-                    const isAppFile = path === fileSyncManager.appFilePath;
-                    const isRootScope = path === fileSyncManager.rootScopeFilePath;
-                    const newRoots = isAppFile || isRootScope
-                        ? await fileSyncManager.getAppRootNodes()
-                        : await fileSyncManager.getPageRootNodes(path);
-                    if (newRoots) {
-                        roots = newRoots;
-                    }
-                }
-                socketManager.callEditorClients((socket) => socket.call.updateScope({
-                    scopeId,
-                    updates: {
-                        entities,
-                        roots,
-                    },
-                }));
-            };
             const toApiV3Dto = (api) => {
                 const { apiPb } = api;
                 return {
@@ -523,55 +353,20 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
             fileSyncManager.on("deleteComponents", (path, sourceIds) => {
                 void sendDeleteComponentsUpdate(path, sourceIds);
             });
-            fileSyncManager.on("addEntity", (path, request) => {
-                void sendEntityUpdate(path, request);
-            });
-            fileSyncManager.on("updateEntity", (path, request) => {
-                void sendEntityUpdate(path, request);
-            });
-            fileSyncManager.on("deleteEntity", (path, entityName) => {
-                void sendDeleteEntityUpdate(path, entityName);
-            });
-            fileSyncManager.on("renameComponent", (path) => {
-                void sendFileUpdate(path);
-            });
-            fileSyncManager.on("renameEntity", (path) => {
-                void sendFileUpdate(path);
-            });
-            fileSyncManager.on("addPage", (_, navigateTo) => {
-                void sendRootReset();
-                // Send HMR message to update routes without touching root.tsx
-                server.ws.send({
-                    type: "custom",
-                    event: ViteMessageKind.ROUTES_UPDATE,
-                    data: {
-                        routes: fileSyncManager.getRoutes(),
-                        navigateTo,
-                    },
-                });
-            });
-            fileSyncManager.on("deletePage", () => {
-                void sendRootReset();
-                // Send HMR message to update routes without touching root.tsx
-                server.ws.send({
-                    type: "custom",
-                    event: ViteMessageKind.ROUTES_UPDATE,
-                    data: {
-                        routes: fileSyncManager.getRoutes(),
-                        navigateTo: "/",
-                    },
-                });
-            });
-            fileSyncManager.on("renamePage", () => {
-                void sendRootReset();
-                // Send HMR message to update routes without touching root.tsx
-                server.ws.send({
-                    type: "custom",
-                    event: ViteMessageKind.ROUTES_UPDATE,
-                    data: {
-                        routes: fileSyncManager.getRoutes(),
-                    },
-                });
+            fileSyncManager.on("routerChange", (routerFilePath) => {
+                void (async () => {
+                    try {
+                        logger.info("Router file changed, re-parsing routes");
+                        const routes = await parseRouterFile(routerFilePath, config.root);
+                        logger.info(`Routes updated: ${routes.length} routes found`);
+                        // Update editor clients with new app scope
+                        void sendFileUpdate(routerFilePath);
+                        await syncService?.uploadDirectory(aiService?.isBusy() ? "ai:generate:interim" : "fileChanged");
+                    }
+                    catch (e) {
+                        logger.error("Error parsing router file", getErrorMeta(e));
+                    }
+                })();
             });
             if (aiService) {
                 fileSyncManager.on("fileChanged", debounce(() => {
@@ -587,15 +382,20 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
                     })();
                 });
             }
+            const debouncedFileUpdate = (filePath) => {
+                let fn = debouncedFileUpdateHandlers.get(filePath);
+                if (!fn) {
+                    fn = debounce(() => {
+                        void sendFileUpdate(filePath);
+                    }, 100, { leading: true, trailing: true, maxWait: 500 });
+                }
+                debouncedFileUpdateHandlers.set(filePath, fn);
+                fn();
+            };
             fileSyncManager.on("fileChanged", (path, _content, isNonVisualEdit) => {
                 void (async () => {
-                    void socketManager.callLibraryClients((socket) => {
-                        return socket.call.updateLocalBindingEntities({
-                            entities: fileSyncManager.getLocalBindingEntities(path),
-                        });
-                    });
                     if (isNonVisualEdit) {
-                        void sendFileUpdate(path);
+                        void debouncedFileUpdate(path);
                         void socketManager.callLibraryClients((socket) => {
                             return socket.call.nonVisualEdit();
                         });
@@ -612,15 +412,23 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
             fileSyncManager.on("apiUpdate", (payload) => {
                 void (async () => {
                     void socketManager.callLibraryClients(async (socket) => {
-                        void Promise.all([
-                            socket.call.updateApis([payload]),
-                            extractApiParamsAndDependencies(socket),
-                        ]);
+                        void socket.call.updateApis([payload]);
+                    });
+                    void socketManager.callEditorClients(async (socket) => {
+                        if (payload.api.apiPb?.metadata?.id) {
+                            const inputs = await extractInputsFromApi(payload.api);
+                            void socket.call.updateApiInputs({
+                                apiId: payload.api.apiPb.metadata.id,
+                                inputs,
+                            });
+                        }
+                        return socket.call.manualUpdateApi({
+                            api: {
+                                ...payload.api,
+                                scopeId: payload.scopeId ?? "",
+                            },
+                        });
                     });
-                    if (payload.api.pageName) {
-                        const pagePath = getPageFilePath(config.root, payload.api.pageName);
-                        void sendEntityUpdate(pagePath);
-                    }
                     if (syncService) {
                         await syncService.uploadDirectory("apiUpdate");
                     }
@@ -629,50 +437,35 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
                     }
                 })();
             });
-            // Debounce the library client update calls to prevent multiple rapid API invocations
-            // which can occur during AI generation when the API is set to execute on page load
-            const DEBOUNCE_WINDOW_MS = 300;
-            const debouncedLibraryApiUpdates = new Map();
-            const getOrCreateDebouncedLibraryApiUpdate = (apiName) => {
-                if (!debouncedLibraryApiUpdates.has(apiName)) {
-                    debouncedLibraryApiUpdates.set(apiName, debounce(async (payload) => {
-                        void socketManager.callLibraryClients(async (socket) => {
-                            void Promise.all([
-                                socket.call.updateApis([payload]),
-                                extractApiParamsAndDependencies(socket),
-                            ]);
-                        });
-                    }, DEBOUNCE_WINDOW_MS, { leading: false, trailing: true }));
-                }
-                return debouncedLibraryApiUpdates.get(apiName);
-            };
             fileSyncManager.on("apiManualUpdate", (payload, sendScopeUpdates = false) => {
-                const apiName = payload.api.apiPb.metadata.name;
-                // Debounce only the library client update to prevent duplicate auto-executions
-                const debouncedUpdate = getOrCreateDebouncedLibraryApiUpdate(apiName);
-                void debouncedUpdate(payload);
-                // Execute these immediately without debouncing
-                if (sendScopeUpdates) {
-                    void sendFileUpdate(getPageFilePath(config.root, payload.api.pageName));
-                }
-                if (syncService) {
-                    // Use different source during AI generation to prevent individual draft commits
-                    const source = aiService && aiService.isBusy()
-                        ? "ai:generate:interim"
-                        : "apiManualUpdate";
-                    void syncService.uploadDirectory(source);
-                }
-                void socketManager.callEditorClients((socket) => {
-                    return socket.call.manualUpdateApi({
-                        api: {
-                            ...payload.api,
-                            scopeId: payload.scopeId ?? "",
-                        },
+                void (async () => {
+                    if (sendScopeUpdates) {
+                        void sendFileUpdate(path.join(config.root, "App.tsx"));
+                    }
+                    if (syncService) {
+                        // Use different source during AI generation to prevent individual draft commits
+                        const source = aiService && aiService.isBusy()
+                            ? "ai:generate:interim"
+                            : "apiManualUpdate";
+                        void syncService.uploadDirectory(source);
+                    }
+                    void socketManager.callEditorClients(async (socket) => {
+                        const inputs = await extractInputsFromApi(payload.api);
+                        void socket.call.updateApiInputs({
+                            apiId: payload.api.apiPb.metadata.id,
+                            inputs,
+                        });
+                        return socket.call.manualUpdateApi({
+                            api: {
+                                ...payload.api,
+                                scopeId: payload.scopeId ?? "",
+                            },
+                        });
                     });
-                });
-                if (aiService) {
-                    void aiService.appContext.handleApiUpdate(toApiV3Dto(payload.api));
-                }
+                    if (aiService) {
+                        void aiService.appContext.handleApiUpdate(toApiV3Dto(payload.api));
+                    }
+                })();
             });
             if (syncService) {
                 syncService.on("synchronizationStatusChange", (status, generationNumber) => {
@@ -713,38 +506,13 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
                     });
                 });
             }
-            fileSyncManager.on("routesChanged", () => {
-                const rootModule = server.moduleGraph.getModuleById(path.join(config.root, "root.tsx"));
-                if (rootModule) {
-                    server.moduleGraph.invalidateModule(rootModule);
-                }
-                // Send HMR message to update routes without touching root.tsx
-                server.ws.send({
-                    type: "custom",
-                    event: ViteMessageKind.ROUTES_UPDATE,
-                    data: {
-                        routes: fileSyncManager.getRoutes(),
-                    },
-                });
-            });
             fileSyncManager.on("apiDelete", (payload) => {
                 void (async () => {
                     void socketManager.callLibraryClients(async (socket) => {
-                        void Promise.all([
-                            socket.call.deleteApis(payload.apis.map((api) => ({
-                                apiName: api.apiName,
-                                scopeId: api.scopeId,
-                            }))),
-                            extractApiParamsAndDependencies(socket),
-                        ]);
-                        // All APIs should belong to the same page but to be consistant we iterate over all APIs
-                        const pageNames = new Set(payload.apis.map((api) => api.pageName));
-                        if (pageNames.size > 0) {
-                            pageNames.forEach((pageName) => {
-                                const pagePath = getPageFilePath(config.root, pageName);
-                                void sendFileUpdate(pagePath);
-                            });
-                        }
+                        void socket.call.deleteApis(payload.apis.map((api) => ({
+                            apiName: api.apiName,
+                            scopeId: api.scopeId,
+                        })));
                         if (syncService) {
                             await syncService.uploadDirectory("apiDelete");
                         }
@@ -759,17 +527,12 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
             fileSyncManager.on("apiManualDelete", (payload) => {
                 void (async () => {
                     void socketManager.callLibraryClients(async (socket) => {
-                        void Promise.all([
-                            socket.call.deleteApis([
-                                {
-                                    apiName: payload.api.apiName,
-                                    scopeId: payload.api.scopeId,
-                                },
-                            ]),
-                            extractApiParamsAndDependencies(socket),
+                        void socket.call.deleteApis([
+                            {
+                                apiName: payload.api.apiName,
+                                scopeId: payload.api.scopeId,
+                            },
                         ]);
-                        const pagePath = getPageFilePath(config.root, payload.api.pageName);
-                        void sendFileUpdate(pagePath);
                     });
                     void socketManager.callEditorClients((socket) => {
                         return socket.call.manualDeleteApi({
@@ -794,6 +557,16 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
                         if (aiService.isBusy()) {
                             aiService.handleUserConnected(socket, peerId);
                         }
+                        const allApis = fileSyncManager.getApiFiles();
+                        for (const api of Object.values(allApis)) {
+                            if (api.api.apiPb?.metadata?.id) {
+                                const inputs = await extractInputsFromApi(api.api);
+                                void socket.call.updateApiInputs({
+                                    apiId: api.api.apiPb.metadata.id,
+                                    inputs,
+                                });
+                            }
+                        }
                         // Send any pending file transform error
                         if (pendingFileTransformError) {
                             const { filePath, error } = pendingFileTransformError;
@@ -826,18 +599,6 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
                 });
                 aiService.on("generationCompleted", (hasDraft) => {
                     void (async () => {
-                        logger.info("Updating routes");
-                        server.ws.send({
-                            type: "custom",
-                            event: ViteMessageKind.ROUTES_UPDATE,
-                            data: {
-                                routes: fileSyncManager.getRoutes(),
-                            },
-                        });
-                        logger.info("Triggering APIs");
-                        socketManager.callLibraryClients(async (socket) => {
-                            await socket.call.setApisLoaded();
-                        });
                         aiService.handleClearBuildSystemErrors();
                         aiService.handleClearAllRuntimeErrors();
                         // Upload directory after successful AI generation
@@ -887,21 +648,13 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
             });
         },
         async transform(code, id) {
-            if (id.includes("/node_modules/")) {
+            if (id.includes("/node_modules/") || id.endsWith(".d.ts")) {
                 return;
             }
             const relativePath = path.relative(config.root, id);
             if (!this.meta.watchMode)
                 return;
-            if (relativePath === "root.tsx") {
-                const source = generateRootSource(code, fileSyncManager.getRoutes(), fileSyncManager.routeChange);
-                return {
-                    code: source,
-                    map: null,
-                };
-            }
-            else if (id.endsWith(".tsx") &&
-                !id.includes(`${getLegacyComponentsFolder()}/`)) {
+            if (id.endsWith(".tsx")) {
                 try {
                     if (!fileSyncManager.readFile(id)) {
                         return { code, map: null };
@@ -910,10 +663,31 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
                     if (!fileContents) {
                         throw new Error("File not found in file sync manager " + id);
                     }
+                    if (id === fileSyncManager.routerFilePath) {
+                        return;
+                    }
                     if (componentsManager.isCustomComponentFile(id)) {
-                        const code = getComponentSourceCode(fileContents);
+                        const componentName = componentsManager.getComponentName(id);
+                        if (!componentName) {
+                            return {
+                                code,
+                                map: null,
+                            };
+                        }
+                        const transformedCode = getComponentSourceCode(fileContents, componentName);
                         return {
-                            code,
+                            code: transformedCode,
+                            map: null,
+                        };
+                    }
+                    const isComponentFile = id.endsWith(".tsx") ||
+                        id.endsWith(".jsx") ||
+                        id.endsWith(".ts") ||
+                        id.endsWith(".js");
+                    if (isComponentFile && componentsManager.isInComponentDirectory(id)) {
+                        const transformedCode = getComponentSiblingSourceCode(fileContents, path.basename(id));
+                        return {
+                            code: transformedCode,
                             map: null,
                         };
                     }
@@ -1040,10 +814,6 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
             if (isApiFilePath(ctx.file)) {
                 return [];
             }
-            // We do not want route changes to trigger full page reloads, we handle those internally
-            if (ctx.file.endsWith(ROUTES_FILE)) {
-                return [];
-            }
             // if this HMR call reloads a file that an error was thrown about before,
             // perform a full-reload and clear the error.
             if (loggedViteErrors.length > 0) {
@@ -1152,8 +922,11 @@ export const fileSyncVitePlugin = (pluginParams, options) => {
         },
     };
     return {
-        plugin,
+        plugin: [plugin, yamlApiTypesPlugin(syncService, aiService)],
         dispose: () => {
+            // Cancel all pending debounced root updates
+            debouncedFileUpdateHandlers.forEach((fn) => fn.cancel());
+            debouncedFileUpdateHandlers.clear();
             disposeSocketManager();
         },
     };
@@ -1166,14 +939,20 @@ async function getAppScope(fileSyncManager) {
     for (const { name, route, fileName } of pageContents) {
         const roots = await fileSyncManager.getPageRootNodes(fileName);
         const pageScopeDef = fileSyncManager.getScope(fileName);
-        if (roots && pageScopeDef) {
-            pages[name] = {
-                name,
-                ...pageScopeDef,
-                route,
-                roots,
-            };
+        if (!roots || !pageScopeDef)
+            continue;
+        if (pages[name]) {
+            // Page already exists, add this route to its routes array
+            pages[name].routes.push(route);
+            continue;
         }
+        // New page, initialize with routes array
+        pages[name] = {
+            name,
+            ...pageScopeDef,
+            routes: [route],
+            roots,
+        };
     }
     const appScopeDef = fileSyncManager.getScope(fileSyncManager.appFilePath);
     const appRoots = await fileSyncManager.getAppRootNodes();