@superblocksteam/vite-plugin-file-sync 2.0.6-next.2 → 2.0.6-next.21

package/dist/file-system-manager.js

@@ -12,8 +12,9 @@ import { generateJSXAttribute } from "./codegen.js";
 import { ComponentsManager } from "./components-manager.js";
 import { addLegacyCustomComponentVariables, modifyLegacyCustomComponentElements, modifyLegacyCustomComponentImports, } from "./custom-components.js";
 import { applyErrorHandling, } from "./errors/error-handler.js";
-import { getPageFolder, PAGES_DIRECTORY, ROUTES_FILE, SCOPE_FILE, } from "./file-system-helpers.js";
+import { getPageFolder, isPageFilePath, PAGES_DIRECTORY, ROUTES_FILE, SCOPE_FILE, } from "./file-system-helpers.js";
 import { generate } from "./generate.js";
+import { OperationProcessor } from "./operations/operation-processor.js";
 import { doesElementHaveBinding } from "./parsing/bindings.js";
 import { getSbElementId } from "./parsing/ids.js";
 import { makeJSXAttribute } from "./parsing/jsx.js";
@@ -47,12 +48,13 @@ const SUPPORTED_FILETYPES = [
     },
 ];
 const APP_THEME_FILE_NAME = "appTheme.ts";
-export class FileSyncManager extends TracedEventEmitter {
+export class FileSystemManager extends TracedEventEmitter {
     rootDir;
     tsFiles = {};
     apiFiles = {};
     sourceTracker;
     fsOperationQueue;
+    operationProcessor;
     generationNumberSequence;
     routes = {};
     watcher;
@@ -65,6 +67,12 @@ export class FileSyncManager extends TracedEventEmitter {
         this.fsOperationQueue = fsOperationQueue;
         this.generationNumberSequence = generationNumberSequence;
         this._tracer = tracer;
+        // intentionally a new queue here, we don't want to share the queue with the fsOperationQueue
+        this.operationProcessor = new OperationProcessor({
+            batchWindowMs: 50,
+            maxBatchSize: 100,
+        });
+        this.operationProcessor.disable();
         applyErrorHandling(this, {
             watch: { operation: "editing from code" },
             handleCreatePage: { operation: "creating a page" },
@@ -219,139 +227,203 @@ export class FileSyncManager extends TracedEventEmitter {
                 this.updateApi(content, path);
             }
         });
-        const handleFileChange = async (event, filePath) => {
-            logger.info(`File changed: ${filePath}, event: ${event}`);
-            switch (event) {
-                case "add": {
-                    const fileType = SUPPORTED_FILETYPES.find((f) => filePath.endsWith(f.extension));
-                    if (!fileType || !filePath.startsWith(rootPath)) {
-                        return;
-                    }
-                    const data = await readFile(filePath);
-                    if (typeof data !== "string")
-                        return;
-                    // if we match pages/*/index.tsx, we want to emit an addPage event
-                    if (/pages\/.*\/index\.tsx/.test(filePath)) {
-                        const file = await readFile(filePath);
-                        if (!file) {
-                            logger.error(`Failed to read file: ${filePath}`);
-                            return;
-                        }
-                        if (!(filePath in this.tsFiles)) {
-                            this.tsFiles[filePath] = file;
-                            this.handleNonVisualChangeByDeletingIds(filePath, file);
-                            this.emit("addPage", filePath);
-                        }
-                    }
-                    switch (fileType.type) {
-                        case "api":
-                        case "python-api-step":
-                        case "js-api-step": {
-                            await this.processApiUpdates(filePath, fileType);
-                            break;
-                        }
-                    }
-                    break;
+        watcher.on("all", this.handleFileChange);
+    }
+    enableOperationsQueue() {
+        this.operationProcessor.enable();
+    }
+    disableOperationsQueue() {
+        this.operationProcessor.disable();
+    }
+    async flushOperations() {
+        await this.operationProcessor.flush();
+    }
+    handleFileChange = async (event, filePath) => {
+        const logger = getLogger();
+        logger.info(`File changed: ${filePath}, event: ${event}`);
+        const rootPath = this.rootDir;
+        if (!rootPath) {
+            throw new Error("Root directory not set");
+        }
+        // Skip directory events
+        if (event === "addDir" || event === "unlinkDir") {
+            return;
+        }
+        const routePath = path.join(rootPath, ROUTES_FILE);
+        const fileType = SUPPORTED_FILETYPES.find((f) => filePath.endsWith(f.extension));
+        // Only handle files we care about and that are in our root path
+        if (!fileType || !filePath.startsWith(rootPath)) {
+            return;
+        }
+        // Queue the operation based on the event type
+        switch (event) {
+            case "add": {
+                const data = await readFile(filePath);
+                if (typeof data !== "string")
+                    return;
+                const isPage = isPageFilePath(filePath);
+                if (isPage) {
+                    void this.operationProcessor.addOperation({
+                        metadata: {
+                            filePath,
+                        },
+                        execute: async () => {
+                            const file = await readFile(filePath);
+                            if (!file) {
+                                logger.error(`Failed to read file: ${filePath}`);
+                                return;
+                            }
+                            if (!(filePath in this.tsFiles)) {
+                                this.tsFiles[filePath] = file;
+                                this.handleNonVisualChangeByDeletingIds(filePath, file);
+                                this.emit("addPage", filePath);
+                            }
+                        },
+                    });
                 }
-                case "change": {
-                    // Special routes file handling
-                    if (filePath === routePath) {
-                        const data = await readFile(filePath);
-                        try {
-                            this.routes = JSON.parse(data);
-                            this.emit("routesChanged", this.routes);
-                        }
-                        catch (e) {
-                            logger.error("Error parsing routes file", getErrorMeta(e));
-                        }
-                        return;
-                    }
-                    const fileType = SUPPORTED_FILETYPES.find((f) => filePath.endsWith(f.extension));
-                    if (!fileType || !filePath.startsWith(rootPath)) {
-                        return;
-                    }
-                    const data = await readFile(filePath);
-                    if (typeof data !== "string")
-                        return;
-                    switch (fileType.type) {
-                        case "tsx":
-                        case "scope":
-                            {
-                                if (!(filePath in this.tsFiles && this.tsFiles[filePath] === data)) {
-                                    logger.info(`File changed: ${filePath} updating AST tracker`);
-                                    this.tsFiles[filePath] = data;
-                                    // only update the source tracker if the file is different
-                                    this.handleNonVisualChangeByDeletingIds(filePath, data);
-                                    this.emit("fileChanged", filePath, data, true);
+                else {
+                    void this.operationProcessor.addOperation({
+                        metadata: {
+                            filePath,
+                        },
+                        execute: async () => {
+                            switch (fileType.type) {
+                                case "api":
+                                case "python-api-step":
+                                case "js-api-step": {
+                                    await this.processApiUpdates(filePath, fileType);
+                                    break;
                                 }
-                                else {
-                                    logger.info(`File unchanged from last tracked state: ${filePath}`);
-                                    this.emit("fileChanged", filePath, data, false);
+                            }
+                        },
+                    });
+                }
+                break;
+            }
+            case "change": {
+                if (filePath === routePath) {
+                    void this.operationProcessor.addOperation({
+                        metadata: {
+                            filePath,
+                        },
+                        priority: true,
+                        execute: async () => {
+                            try {
+                                const data = JSON.parse((await readFile(filePath)) ?? "{}");
+                                if (!isEqual(this.routes, data)) {
+                                    this.routes = data;
+                                    this.emit("routesChanged", this.routes);
                                 }
                             }
-                            break;
-                        case "api":
-                        case "python-api-step":
-                        case "js-api-step":
-                            {
-                                await this.processApiUpdates(filePath, fileType);
+                            catch (e) {
+                                logger.error("Error parsing routes file", getErrorMeta(e));
                             }
-                            break;
-                    }
-                    break;
+                        },
+                    });
+                    return;
                 }
-                case "unlink": {
-                    if (filePath in this.apiFiles) {
-                        const api = this.apiFiles[filePath];
-                        delete this.apiFiles[filePath];
-                        if (!api || !this.sourceTracker)
-                            break;
-                        const scopeId = await this.sourceTracker.deleteApi({
-                            pageName: api.pageName,
-                            apiName: api.apiPb.metadata.name,
-                        });
-                        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
-                        await this.writeChanges(changes);
-                        this.emit("apiManualDelete", {
-                            api: {
-                                id: getClientApiId(api.apiPb.metadata.name, api.pageName),
-                                apiName: api.apiPb.metadata.name,
-                                // TODO(saksham): get pagename more defensively
-                                pageName: getPageName(filePath),
-                                scopeId,
-                            },
-                        });
-                    }
-                    if (filePath in this.tsFiles) {
-                        delete this.tsFiles[filePath];
-                        this.sourceTracker?.removeFile(filePath);
-                        this.emit("deletePage", filePath);
-                    }
-                    break;
+                else {
+                    void this.operationProcessor.addOperation({
+                        metadata: {
+                            filePath,
+                        },
+                        execute: async () => {
+                            const fileType = SUPPORTED_FILETYPES.find((f) => filePath.endsWith(f.extension));
+                            if (!fileType || !filePath.startsWith(rootPath)) {
+                                return;
+                            }
+                            const data = await readFile(filePath);
+                            if (typeof data !== "string")
+                                return;
+                            switch (fileType.type) {
+                                case "tsx":
+                                case "scope":
+                                    {
+                                        if (!(filePath in this.tsFiles &&
+                                            this.tsFiles[filePath] === data)) {
+                                            logger.info(`File changed: ${filePath} updating AST tracker`);
+                                            this.tsFiles[filePath] = data;
+                                            // only update the source tracker if the file is different
+                                            this.handleNonVisualChangeByDeletingIds(filePath, data);
+                                            this.emit("fileChanged", filePath, data, true);
+                                        }
+                                        else {
+                                            logger.info(`File unchanged from last tracked state: ${filePath}`);
+                                            this.emit("fileChanged", filePath, data, false);
+                                        }
+                                    }
+                                    break;
+                                case "api":
+                                case "python-api-step":
+                                case "js-api-step":
+                                    {
+                                        await this.processApiUpdates(filePath, fileType);
+                                    }
+                                    break;
+                            }
+                        },
+                    });
                 }
+                break;
             }
-        };
-        watcher.on("all", async (event, filePath) => {
-            const fileType = SUPPORTED_FILETYPES.find((f) => filePath.endsWith(f.extension));
-            switch (fileType?.type) {
-                case "tsx":
-                case "scope":
-                    // these can be awaited to ensure sequential execution
-                    this.fsOperationQueue.enqueue(async () => {
-                        return await handleFileChange(event, filePath);
+            case "unlink": {
+                if (filePath in this.tsFiles) {
+                    void this.operationProcessor.addOperation({
+                        metadata: {
+                            filePath,
+                        },
+                        execute: async () => {
+                            await this.deleteTsFile(filePath);
+                        },
                     });
-                    break;
-                default:
-                    // some files including APIs cannot be awaited currently
-                    this.fsOperationQueue.enqueue(async () => {
-                        void handleFileChange(event, filePath);
+                }
+                else if (filePath in this.apiFiles) {
+                    void this.operationProcessor.addOperation({
+                        metadata: {
+                            filePath,
+                        },
+                        execute: async () => {
+                            await this.deleteApiFile(filePath);
+                        },
                     });
+                }
+                break;
             }
-        });
-    }
+        }
+    };
     getApiFiles() {
         return this.formatApisToClientApis(this.apiFiles);
     }
+    async deleteTsFile(filePath) {
+        delete this.tsFiles[filePath];
+        this.sourceTracker?.removeFile(filePath);
+        if (isPageFilePath(filePath)) {
+            this.emit("deletePage", filePath);
+        }
+    }
+    async deleteApiFile(filePath) {
+        const api = this.apiFiles[filePath];
+        if (!api) {
+            return;
+        }
+        delete this.apiFiles[filePath];
+        this.sourceTracker?.deleteApi({
+            pageName: api.pageName,
+            apiName: api.apiPb.metadata.name,
+        });
+        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+        await this.writeChanges(changes);
+        const scopeId = this.sourceTracker?.getScopeDefinitionForPage(api.pageName)?.id;
+        this.emit("apiManualDelete", {
+            api: {
+                id: getClientApiId(api.apiPb.metadata.name, api.pageName),
+                apiName: api.apiPb.metadata.name,
+                // TODO(saksham): get pagename more defensively
+                pageName: getPageName(filePath),
+                scopeId,
+            },
+        });
+    }
     getTsFilePaths() {
         return Object.keys(this.tsFiles);
     }
@@ -568,11 +640,11 @@ export default registerPage(Page, { name: "${name}" });
     handleReparent = async (payload, writeFile = true) => {
         const { from, to, changedProps, transaction } = payload;
         this.trackTransaction(transaction?.id);
-        await this.sourceTracker?.setProperties({
+        this.sourceTracker?.setProperties({
             source: from.source,
             changes: changedProps ?? {},
         });
-        await this.sourceTracker?.moveElement({
+        this.sourceTracker?.moveElement({
             from,
             to,
         });
@@ -586,7 +658,7 @@ export default registerPage(Page, { name: "${name}" });
     };
     handleCreateComponent = async (payload, writeFile = true) => {
         this.trackTransaction(payload.transaction?.id);
-        const sourceId = await this.sourceTracker?.addElement(payload);
+        const sourceId = this.sourceTracker?.addElement(payload);
         if (writeFile) {
             const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
             await this.writeChanges(changes ?? [], (fileName) => {
@@ -600,7 +672,7 @@ export default registerPage(Page, { name: "${name}" });
         const { elements, transaction } = payload;
         this.trackTransaction(transaction?.id);
         for (const element of elements) {
-            await this.sourceTracker?.deleteElement({
+            this.sourceTracker?.deleteElement({
                 source: element.source,
                 scopeName: element.scopeName,
             });
@@ -616,7 +688,7 @@ export default registerPage(Page, { name: "${name}" });
     handleSetProperty = async (payload, writeFile = true) => {
         const { element: { source }, property, value, transaction, } = payload;
         this.trackTransaction(transaction?.id);
-        await this.sourceTracker?.setProperty({
+        this.sourceTracker?.setProperty({
             source,
             property,
             info: value,
@@ -631,7 +703,7 @@ export default registerPage(Page, { name: "${name}" });
     handleSetProperties = async (payload, writeFile = true) => {
         const { element: { source }, properties, transaction, } = payload;
         this.trackTransaction(transaction?.id);
-        await this.sourceTracker?.setProperties({
+        this.sourceTracker?.setProperties({
             source,
             changes: properties,
         });
@@ -765,7 +837,7 @@ export default registerPage(Page, { name: "${name}" });
                         await fs.rmdir(apiDir, { recursive: true });
                     }
                     delete this.apiFiles[apiFilePath];
-                    const scopeId = await this.sourceTracker.deleteApi({
+                    const scopeId = this.sourceTracker.deleteApi({
                         pageName,
                         apiName,
                     });
@@ -864,7 +936,7 @@ export default registerPage(Page, { name: "${name}" });
         }));
     };
     handleAddEntity = async (payload) => {
-        await this.sourceTracker?.addEntity({
+        this.sourceTracker?.addEntity({
             scopeId: payload.scopeId,
             entity: {
                 type: payload.type,
@@ -878,7 +950,7 @@ export default registerPage(Page, { name: "${name}" });
         });
     };
     handleUpdateEntity = async (payload) => {
-        await this.sourceTracker?.updateEntity({
+        this.sourceTracker?.updateEntity({
             entityId: payload.entityId,
             updates: payload.updates,
         });
@@ -888,7 +960,7 @@ export default registerPage(Page, { name: "${name}" });
         });
     };
     handleDeleteEntity = async (payload) => {
-        const deletedEntityName = await this.sourceTracker?.deleteEntity({
+        const deletedEntityName = this.sourceTracker?.deleteEntity({
             entityId: payload.entityId,
         });
         const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
@@ -904,7 +976,7 @@ export default registerPage(Page, { name: "${name}" });
             throw new Error("Root directory not set");
         }
         const filePath = path.join(this.rootDir, APP_THEME_FILE_NAME);
-        await this.sourceTracker?.updateTheme({
+        this.sourceTracker?.updateTheme({
             themeFilePath: filePath,
             theme,
         });
@@ -942,7 +1014,7 @@ export default registerPage(Page, { name: "${name}" });
     };
     handleRenameEntity = async (payload) => {
         const { elementId, newName, oldName, scopeName } = payload;
-        await this.sourceTracker?.renameEntity({
+        this.sourceTracker?.renameEntity({
             entityId: elementId,
             oldName,
             newName,
@@ -1161,7 +1233,7 @@ export default registerPage(Page, { name: "${name}" });
     }
 }
 // Add new mock implementation
-export class MockFileSyncManager extends FileSyncManager {
+export class MockFileSyncManager extends FileSystemManager {
     tsFiles = {};
     apiFiles = {};
     async watch(_watcher, _path) {
@@ -1237,7 +1309,7 @@ async function readFiles(dir) {
 const getMergedApiContent = async (path) => {
     return readAppApiYamlFile(path.split("/").slice(0, -1).join("/"));
 };
-const getPageName = (path) => {
+export const getPageName = (path) => {
     const parts = path.split("/");
     const pagesIndex = parts.findIndex((part) => part === "pages");
     if (pagesIndex !== -1 && parts[pagesIndex + 1]) {