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

package/dist/file-system-manager.js

@@ -12,9 +12,8 @@ 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, isPageFilePath, PAGES_DIRECTORY, ROUTES_FILE, SCOPE_FILE, } from "./file-system-helpers.js";
+import { getPageFolder, 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";
@@ -48,13 +47,12 @@ const SUPPORTED_FILETYPES = [
     },
 ];
 const APP_THEME_FILE_NAME = "appTheme.ts";
-export class FileSystemManager extends TracedEventEmitter {
+export class FileSyncManager extends TracedEventEmitter {
     rootDir;
     tsFiles = {};
     apiFiles = {};
     sourceTracker;
     fsOperationQueue;
-    operationProcessor;
     generationNumberSequence;
     routes = {};
     watcher;
@@ -67,12 +65,6 @@ export class FileSystemManager 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" },
@@ -227,203 +219,139 @@ export class FileSystemManager extends TracedEventEmitter {
                 this.updateApi(content, path);
             }
         });
-        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);
-                            }
-                        },
-                    });
+        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;
                 }
-                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;
+                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);
                                 }
-                            }
-                        },
-                    });
-                }
-                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);
+                                else {
+                                    logger.info(`File unchanged from last tracked state: ${filePath}`);
+                                    this.emit("fileChanged", filePath, data, false);
                                 }
                             }
-                            catch (e) {
-                                logger.error("Error parsing routes file", getErrorMeta(e));
+                            break;
+                        case "api":
+                        case "python-api-step":
+                        case "js-api-step":
+                            {
+                                await this.processApiUpdates(filePath, fileType);
                             }
-                        },
-                    });
-                    return;
+                            break;
+                    }
+                    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;
-                            }
-                        },
-                    });
+                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;
                 }
-                break;
             }
-            case "unlink": {
-                if (filePath in this.tsFiles) {
-                    void this.operationProcessor.addOperation({
-                        metadata: {
-                            filePath,
-                        },
-                        execute: async () => {
-                            await this.deleteTsFile(filePath);
-                        },
+        };
+        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);
                     });
-                }
-                else if (filePath in this.apiFiles) {
-                    void this.operationProcessor.addOperation({
-                        metadata: {
-                            filePath,
-                        },
-                        execute: async () => {
-                            await this.deleteApiFile(filePath);
-                        },
+                    break;
+                default:
+                    // some files including APIs cannot be awaited currently
+                    this.fsOperationQueue.enqueue(async () => {
+                        void handleFileChange(event, 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);
     }
@@ -640,11 +568,11 @@ export default registerPage(Page, { name: "${name}" });
     handleReparent = async (payload, writeFile = true) => {
         const { from, to, changedProps, transaction } = payload;
         this.trackTransaction(transaction?.id);
-        this.sourceTracker?.setProperties({
+        await this.sourceTracker?.setProperties({
             source: from.source,
             changes: changedProps ?? {},
         });
-        this.sourceTracker?.moveElement({
+        await this.sourceTracker?.moveElement({
             from,
             to,
         });
@@ -658,7 +586,7 @@ export default registerPage(Page, { name: "${name}" });
     };
     handleCreateComponent = async (payload, writeFile = true) => {
         this.trackTransaction(payload.transaction?.id);
-        const sourceId = this.sourceTracker?.addElement(payload);
+        const sourceId = await this.sourceTracker?.addElement(payload);
         if (writeFile) {
             const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
             await this.writeChanges(changes ?? [], (fileName) => {
@@ -672,7 +600,7 @@ export default registerPage(Page, { name: "${name}" });
         const { elements, transaction } = payload;
         this.trackTransaction(transaction?.id);
         for (const element of elements) {
-            this.sourceTracker?.deleteElement({
+            await this.sourceTracker?.deleteElement({
                 source: element.source,
                 scopeName: element.scopeName,
             });
@@ -688,7 +616,7 @@ export default registerPage(Page, { name: "${name}" });
     handleSetProperty = async (payload, writeFile = true) => {
         const { element: { source }, property, value, transaction, } = payload;
         this.trackTransaction(transaction?.id);
-        this.sourceTracker?.setProperty({
+        await this.sourceTracker?.setProperty({
             source,
             property,
             info: value,
@@ -703,7 +631,7 @@ export default registerPage(Page, { name: "${name}" });
     handleSetProperties = async (payload, writeFile = true) => {
         const { element: { source }, properties, transaction, } = payload;
         this.trackTransaction(transaction?.id);
-        this.sourceTracker?.setProperties({
+        await this.sourceTracker?.setProperties({
             source,
             changes: properties,
         });
@@ -837,7 +765,7 @@ export default registerPage(Page, { name: "${name}" });
                         await fs.rmdir(apiDir, { recursive: true });
                     }
                     delete this.apiFiles[apiFilePath];
-                    const scopeId = this.sourceTracker.deleteApi({
+                    const scopeId = await this.sourceTracker.deleteApi({
                         pageName,
                         apiName,
                     });
@@ -936,7 +864,7 @@ export default registerPage(Page, { name: "${name}" });
         }));
     };
     handleAddEntity = async (payload) => {
-        this.sourceTracker?.addEntity({
+        await this.sourceTracker?.addEntity({
             scopeId: payload.scopeId,
             entity: {
                 type: payload.type,
@@ -950,7 +878,7 @@ export default registerPage(Page, { name: "${name}" });
         });
     };
     handleUpdateEntity = async (payload) => {
-        this.sourceTracker?.updateEntity({
+        await this.sourceTracker?.updateEntity({
             entityId: payload.entityId,
             updates: payload.updates,
         });
@@ -960,7 +888,7 @@ export default registerPage(Page, { name: "${name}" });
         });
     };
     handleDeleteEntity = async (payload) => {
-        const deletedEntityName = this.sourceTracker?.deleteEntity({
+        const deletedEntityName = await this.sourceTracker?.deleteEntity({
             entityId: payload.entityId,
         });
         const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
@@ -976,7 +904,7 @@ export default registerPage(Page, { name: "${name}" });
             throw new Error("Root directory not set");
         }
         const filePath = path.join(this.rootDir, APP_THEME_FILE_NAME);
-        this.sourceTracker?.updateTheme({
+        await this.sourceTracker?.updateTheme({
             themeFilePath: filePath,
             theme,
         });
@@ -1014,7 +942,7 @@ export default registerPage(Page, { name: "${name}" });
     };
     handleRenameEntity = async (payload) => {
         const { elementId, newName, oldName, scopeName } = payload;
-        this.sourceTracker?.renameEntity({
+        await this.sourceTracker?.renameEntity({
             entityId: elementId,
             oldName,
             newName,
@@ -1233,7 +1161,7 @@ export default registerPage(Page, { name: "${name}" });
     }
 }
 // Add new mock implementation
-export class MockFileSyncManager extends FileSystemManager {
+export class MockFileSyncManager extends FileSyncManager {
     tsFiles = {};
     apiFiles = {};
     async watch(_watcher, _path) {
@@ -1309,7 +1237,7 @@ async function readFiles(dir) {
 const getMergedApiContent = async (path) => {
     return readAppApiYamlFile(path.split("/").slice(0, -1).join("/"));
 };
-export const getPageName = (path) => {
+const getPageName = (path) => {
     const parts = path.split("/");
     const pagesIndex = parts.findIndex((part) => part === "pages");
     if (pagesIndex !== -1 && parts[pagesIndex + 1]) {