@superblocksteam/vite-plugin-file-sync 2.0.6-next.22 → 2.0.6-next.24

package/dist/file-system-manager.js

@@ -12,7 +12,7 @@ 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 { getApiFilePath, 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";
@@ -61,6 +61,9 @@ export class FileSystemManager extends TracedEventEmitter {
     registeredComponentPaths = {};
     renameManager = new RenameManager();
     _tracer;
+    transactionNonce = Date.now();
+    pendingTransactions = new Set();
+    processedTransactions = [];
     constructor(fsOperationQueue, generationNumberSequence, tracer) {
         super(tracer, { captureRejections: true });
         this.rootDir = "/";
@@ -118,27 +121,7 @@ export class FileSystemManager extends TracedEventEmitter {
         }
         return path.join(this.rootDir, "App.tsx");
     }
-    updateApi = (content, path) => {
-        if (!this.rootDir) {
-            throw new Error("Root directory not set");
-        }
-        const { api: apiContents, stepPathMap } = content;
-        const pageName = getPageName(path);
-        let scopeId = this.sourceTracker?.getScopeDefinitionForPage(pageName)?.id;
-        if (!scopeId) {
-            console.warn("Scope ID not found for API", apiContents.metadata.name);
-            scopeId = "";
-        }
-        const updatedApi = {
-            apiPb: yaml.parse(JSON.stringify(apiContents)),
-            pageName,
-            stepPathMap,
-            scopeId,
-        };
-        const isNewApi = !this.apiFiles[path];
-        this.apiFiles[path] = updatedApi;
-        return { updatedApi, pageName, isNewApi };
-    };
+    // MARK: core setup/init
     async watch(watcher, rootPath) {
         const logger = getLogger();
         this.rootDir = rootPath;
@@ -224,11 +207,118 @@ export class FileSystemManager extends TracedEventEmitter {
                 return;
             const { type, path } = file;
             if (type === "api") {
-                this.updateApi(content, path);
+                this.updateInternalApiData(content, path);
             }
         });
         watcher.on("all", this.handleFileChange);
     }
+    initializeSourceTracker() {
+        this.sourceTracker = new SourceTracker(this._tracer);
+        this.sourceTracker.initializeSourceTracker({
+            files: this.tsFiles,
+        });
+    }
+    handleNonVisualChangeByDeletingIds(path, content) {
+        if (!this.sourceTracker) {
+            throw new Error("Source tracker not initialized");
+        }
+        return this.sourceTracker.handleNonVisualChangeByDeletingIds(path, content);
+    }
+    async getFileWithIds(filePath) {
+        const logger = getLogger();
+        if (!this.sourceTracker) {
+            throw new Error("Source tracker not initialized");
+        }
+        const files = this.sourceTracker.getCurrentFiles();
+        if (!files[filePath]) {
+            throw new Error("File not found in source tracker " + filePath);
+        }
+        const ast = files[filePath].ast;
+        if (!ast) {
+            throw new Error("No AST found for file in source tracker " + filePath);
+        }
+        const clonedAst = await transformFromAstAsync(ast, undefined, {
+            ast: true,
+        });
+        if (!clonedAst?.ast) {
+            throw new Error("Failed to clone AST for file " + filePath);
+        }
+        const componentsManager = ComponentsManager.getInstance();
+        const processedTransactions = this.getProcessedTransactionsWithNonce();
+        const customImports = new Set();
+        traverse(clonedAst.ast, {
+            Program: {
+                exit(nodePath) {
+                    if (isCustomBuildEnabled()) {
+                        addLegacyCustomComponentVariables(nodePath, customImports);
+                    }
+                    // we want to inject the component name into the file so we can use it for hot reloading purposes
+                    const name = componentsManager.getComponentName(filePath);
+                    if (name) {
+                        nodePath.pushContainer("body", t.variableDeclaration("const", [
+                            t.variableDeclarator(t.identifier("componentName"), t.stringLiteral(name)),
+                        ]));
+                    }
+                },
+            },
+            ImportDeclaration(path) {
+                if (isCustomBuildEnabled()) {
+                    // when we see a custom component, we want to track the import and modify it to point
+                    // to the built source
+                    modifyLegacyCustomComponentImports(path, customImports);
+                }
+            },
+            JSXElement(path) {
+                if (isCustomBuildEnabled()) {
+                    // based on the imports we see, we want to modify the JSXElement that uses the custom component
+                    modifyLegacyCustomComponentElements(path, customImports);
+                }
+            },
+            ReturnStatement(path) {
+                const argument = path.get("argument");
+                if (!argument.isJSXElement()) {
+                    return;
+                }
+                const openingElement = argument.get("openingElement");
+                if (!openingElement.isJSXOpeningElement()) {
+                    return;
+                }
+                openingElement.pushContainer("attributes", makeJSXAttribute(ROOT_WIDGET_ATTRIBUTE, "true"));
+                openingElement.pushContainer("attributes", generateJSXAttribute(PROCESSED_TRANSACTIONS_ATTRIBUTE, {
+                    value: processedTransactions,
+                    type: "EXPRESSION",
+                    __info: true,
+                }));
+            },
+            JSXOpeningElement(path) {
+                const elementId = getSbElementId(path.node);
+                if (elementId) {
+                    path.pushContainer("attributes", makeJSXAttribute(WIDGET_SOURCE_ID_ATTRIBUTE, elementId));
+                }
+            },
+            ObjectProperty(path) {
+                const elementId = getSbElementId(path.node);
+                if (!elementId) {
+                    path.skip();
+                    return;
+                }
+                path.traverse({
+                    ObjectExpression(path) {
+                        path.pushContainer("properties", t.objectProperty(t.identifier("id"), t.stringLiteral(elementId)));
+                        path.skip();
+                    },
+                });
+            },
+        });
+        try {
+            const result = generate(clonedAst.ast);
+            return result.code;
+        }
+        catch (e) {
+            logger.error("Error generating file with ids", getErrorMeta(e));
+            return null;
+        }
+    }
     enableOperationsQueue() {
         this.operationProcessor.enable();
     }
@@ -238,6 +328,7 @@ export class FileSystemManager extends TracedEventEmitter {
     async flushOperations() {
         await this.operationProcessor.flush();
     }
+    // MARK: file change handling
     handleFileChange = async (event, filePath) => {
         const logger = getLogger();
         logger.info(`File changed: ${filePath}, event: ${event}`);
@@ -291,7 +382,7 @@ export class FileSystemManager extends TracedEventEmitter {
                                 case "api":
                                 case "python-api-step":
                                 case "js-api-step": {
-                                    await this.processApiUpdates(filePath, fileType);
+                                    await this.processApiFileUpdates(filePath, fileType);
                                     break;
                                 }
                             }
@@ -357,7 +448,7 @@ export class FileSystemManager extends TracedEventEmitter {
                                 case "python-api-step":
                                 case "js-api-step":
                                     {
-                                        await this.processApiUpdates(filePath, fileType);
+                                        await this.processApiFileUpdates(filePath, fileType);
                                     }
                                     break;
                             }
@@ -383,7 +474,7 @@ export class FileSystemManager extends TracedEventEmitter {
                             filePath,
                         },
                         execute: async () => {
-                            await this.deleteApiFile(filePath);
+                            await this.removeApiData(filePath);
                         },
                     });
                 }
@@ -391,9 +482,6 @@ export class FileSystemManager extends TracedEventEmitter {
             }
         }
     };
-    getApiFiles() {
-        return this.formatApisToClientApis(this.apiFiles);
-    }
     async deleteTsFile(filePath) {
         delete this.tsFiles[filePath];
         this.sourceTracker?.removeFile(filePath);
@@ -401,35 +489,13 @@ export class FileSystemManager extends TracedEventEmitter {
             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);
     }
     getSourceTracker() {
         return this.sourceTracker;
     }
+    // MARK: fs read/write
     async writeFile(path, content, kind) {
         if (kind === "ts") {
             // happens eagerly regardless of error - possible desync
@@ -447,7 +513,7 @@ export class FileSystemManager extends TracedEventEmitter {
                 delete apiPb.metadata.id;
             }
             const stepPathMap = currentApiFile?.stepPathMap ?? {};
-            this.updateApi({ api: apiPb, stepPathMap }, path);
+            this.updateInternalApiData({ api: apiPb, stepPathMap }, path);
             // TODO(george): as an optimization, we could update the memory snapshot of the file that SyncService is holding
             await this.fsOperationQueue.enqueue(async () => {
                 await writeApiFiles({ apiPb }, "api", path.split("/").slice(0, -1).join("/"), false, [], [], { extractLargeSourceFiles: true, minLinesForExtraction: 1 }, new Set(Object.keys(this.apiFiles)), stepPathMap);
@@ -461,142 +527,84 @@ export class FileSystemManager extends TracedEventEmitter {
     readFile(path) {
         return this.tsFiles[path];
     }
-    initializeSourceTracker() {
-        this.sourceTracker = new SourceTracker(this._tracer);
-        this.sourceTracker.initializeSourceTracker({
-            files: this.tsFiles,
-        });
+    async addRoute(route, filePath) {
+        if (!this.rootDir) {
+            throw new Error("Root directory not set");
+        }
+        this.routes[route] = { file: this.getRelativeRoutePath(filePath) };
+        await this.writeFile(path.join(this.rootDir, ROUTES_FILE), JSON.stringify(this.routes, null, 2));
     }
-    handleNonVisualChangeByDeletingIds(path, content) {
-        if (!this.sourceTracker) {
-            throw new Error("Source tracker not initialized");
+    async removeRoute(filePath) {
+        if (!this.rootDir) {
+            throw new Error("Root directory not set");
         }
-        return this.sourceTracker.handleNonVisualChangeByDeletingIds(path, content);
+        const relativeFilePath = this.getRelativeRoutePath(filePath);
+        this.routes = Object.fromEntries(Object.entries(this.routes).filter(([_, value]) => value.file !== relativeFilePath));
+        await this.writeFile(path.join(this.rootDir, ROUTES_FILE), JSON.stringify(this.routes, null, 2));
     }
-    async getFileWithIds(filePath) {
+    async writeChanges(changes, callback) {
+        return Promise.all(changes.map(async ({ fileName, source, kind }) => {
+            await this.writeFile(fileName, source, kind);
+            return callback?.(fileName, source);
+        }));
+    }
+    getLocalBindingEntities(path) {
         const logger = getLogger();
-        if (!this.sourceTracker) {
-            throw new Error("Source tracker not initialized");
-        }
-        const files = this.sourceTracker.getCurrentFiles();
-        if (!files[filePath]) {
-            throw new Error("File not found in source tracker " + filePath);
+        const files = this.sourceTracker?.getCurrentFiles();
+        if (!files || !files[path]) {
+            logger.warn(`File not found in source tracker for local binding entities: ${path}`);
+            return [];
         }
-        const ast = files[filePath].ast;
+        const ast = files[path].ast;
         if (!ast) {
-            throw new Error("No AST found for file in source tracker " + filePath);
-        }
-        const clonedAst = await transformFromAstAsync(ast, undefined, {
-            ast: true,
-        });
-        if (!clonedAst?.ast) {
-            throw new Error("Failed to clone AST for file " + filePath);
+            logger.warn(`No AST found for file in source tracker for local binding entities: ${path}`);
+            return [];
         }
-        const componentsManager = ComponentsManager.getInstance();
-        const processedTransactions = this.getProcessedTransactionsWithNonce();
-        const customImports = new Set();
-        traverse(clonedAst.ast, {
-            Program: {
-                exit(nodePath) {
-                    if (isCustomBuildEnabled()) {
-                        addLegacyCustomComponentVariables(nodePath, customImports);
-                    }
-                    // we want to inject the component name into the file so we can use it for hot reloading purposes
-                    const name = componentsManager.getComponentName(filePath);
-                    if (name) {
-                        nodePath.pushContainer("body", t.variableDeclaration("const", [
-                            t.variableDeclarator(t.identifier("componentName"), t.stringLiteral(name)),
-                        ]));
-                    }
-                },
-            },
-            ImportDeclaration(path) {
-                if (isCustomBuildEnabled()) {
-                    // when we see a custom component, we want to track the import and modify it to point
-                    // to the built source
-                    modifyLegacyCustomComponentImports(path, customImports);
-                }
-            },
-            JSXElement(path) {
-                if (isCustomBuildEnabled()) {
-                    // based on the imports we see, we want to modify the JSXElement that uses the custom component
-                    modifyLegacyCustomComponentElements(path, customImports);
-                }
-            },
-            ReturnStatement(path) {
-                const argument = path.get("argument");
-                if (!argument.isJSXElement()) {
+        const localBindingEntities = new Set();
+        traverse(ast, {
+            JSXOpeningElement(path) {
+                const elementId = getSbElementId(path.node);
+                if (!elementId) {
                     return;
                 }
-                const openingElement = argument.get("openingElement");
-                if (!openingElement.isJSXOpeningElement()) {
-                    return;
+                const hasLocalBinding = doesElementHaveBinding(path);
+                if (hasLocalBinding) {
+                    localBindingEntities.add(elementId);
                 }
-                openingElement.pushContainer("attributes", makeJSXAttribute(ROOT_WIDGET_ATTRIBUTE, "true"));
-                openingElement.pushContainer("attributes", generateJSXAttribute(PROCESSED_TRANSACTIONS_ATTRIBUTE, {
-                    value: processedTransactions,
-                    type: "EXPRESSION",
-                    __info: true,
-                }));
-            },
-            JSXOpeningElement(path) {
-                const elementId = getSbElementId(path.node);
-                if (elementId) {
-                    path.pushContainer("attributes", makeJSXAttribute(WIDGET_SOURCE_ID_ATTRIBUTE, elementId));
-                }
-            },
-            ObjectProperty(path) {
-                const elementId = getSbElementId(path.node);
-                if (!elementId) {
-                    path.skip();
-                    return;
-                }
-                path.traverse({
-                    ObjectExpression(path) {
-                        path.pushContainer("properties", t.objectProperty(t.identifier("id"), t.stringLiteral(elementId)));
-                        path.skip();
-                    },
-                });
             },
         });
-        try {
-            const result = generate(clonedAst.ast);
-            return result.code;
-        }
-        catch (e) {
-            logger.error("Error generating file with ids", getErrorMeta(e));
+        return Array.from(localBindingEntities);
+    }
+    getPageRoots(filePath) {
+        const scopeFilePath = path.join(path.dirname(filePath), "index.tsx");
+        const currentFile = this.sourceTracker?.getCurrentFiles()[scopeFilePath];
+        if (!currentFile) {
             return null;
         }
+        return getPageRoots(filePath, currentFile);
     }
-    getLocalBindingEntities(path) {
-        const logger = getLogger();
-        const files = this.sourceTracker?.getCurrentFiles();
-        if (!files || !files[path]) {
-            logger.warn(`File not found in source tracker for local binding entities: ${path}`);
-            return [];
+    getScope(filePath) {
+        // get the scope.ts file in the same directory as path
+        const scopeFilePath = path.join(path.dirname(filePath), SCOPE_FILE);
+        const currentFile = this.sourceTracker?.getCurrentFiles()[scopeFilePath];
+        if (!currentFile) {
+            console.log("File not found", scopeFilePath);
+            return null;
         }
-        const ast = files[path].ast;
-        if (!ast) {
-            logger.warn(`No AST found for file in source tracker for local binding entities: ${path}`);
-            return [];
+        const scope = getScope(scopeFilePath, currentFile);
+        return scope;
+    }
+    getRoutes() {
+        const routes = [];
+        for (const [path, { file }] of Object.entries(this.routes)) {
+            routes.push({
+                path,
+                component: file,
+            });
         }
-        const localBindingEntities = new Set();
-        traverse(ast, {
-            JSXOpeningElement(path) {
-                const elementId = getSbElementId(path.node);
-                if (!elementId) {
-                    return;
-                }
-                const hasLocalBinding = doesElementHaveBinding(path);
-                if (hasLocalBinding) {
-                    localBindingEntities.add(elementId);
-                }
-            },
-        });
-        return Array.from(localBindingEntities);
+        return routes;
     }
-    pendingTransactions = new Set();
-    processedTransactions = [];
+    // MARK: transaction handling
     flushTransactions = () => {
         // TODO do something more sophisticated than this.
         this.processedTransactions = this.processedTransactions.slice(-20);
@@ -609,13 +617,13 @@ export class FileSystemManager extends TracedEventEmitter {
         }
         this.pendingTransactions.add(transactionId);
     };
-    transactionNonce = Date.now();
     // Until we have a sophisticated way to track ALL operations, including non-UI initiated ops, we will use a nonce
     // TODO https://github.com/superblocksteam/superblocks/pull/11788
     getProcessedTransactionsWithNonce() {
         const nonce = `t-${this.transactionNonce++}`;
         return this.processedTransactions.concat(nonce);
     }
+    // MARK: editor operations
     handleCreatePage = async (payload) => {
         const { name } = payload;
         if (!this.rootDir) {
@@ -632,7 +640,9 @@ function Page() {
 
 export default registerPage(Page, { name: "${name}" });
 `;
-        await fs.mkdir(pagePath, { recursive: true });
+        await this.fsOperationQueue.enqueue(async () => {
+            await fs.mkdir(pagePath, { recursive: true });
+        });
         await this.writeFile(pageIndexPath, pageContent, "ts");
         await this.handleNonVisualChangeByDeletingIds(pageIndexPath, pageContent);
         this.emit("addPage", pageIndexPath);
@@ -759,182 +769,7 @@ export default registerPage(Page, { name: "${name}" });
         this.flushTransactions();
         return returnValues;
     };
-    handleUpdateApi = async (payload) => {
-        const { api } = payload;
-        if (!this.sourceTracker) {
-            throw new Error("Source tracker not initialized");
-        }
-        if (!this.rootDir) {
-            throw new Error("Root directory not set");
-        }
-        if (!api.pageName) {
-            throw new Error("API page name is not set");
-        }
-        const apiName = api.apiPb.metadata.name;
-        if (!apiName) {
-            throw new Error("API name is not set");
-        }
-        const apiDir = path.join(this.rootDir, "pages", api.pageName, "apis", apiName);
-        const apiPath = path.join(apiDir, "api.yaml");
-        const isNewApi = !this.getApiFiles()[apiPath];
-        try {
-            const stats = await fs.stat(apiDir);
-            if (!stats.isDirectory()) {
-                await fs.mkdir(apiDir, { recursive: true });
-            }
-        }
-        catch {
-            await fs.mkdir(apiDir, { recursive: true });
-        }
-        await this.writeFile(apiPath, yaml.stringify(api.apiPb), "api");
-        const generationNumber = this.generationNumberSequence.next();
-        const apiDef = this.createClientApi(api);
-        let scopeId = "";
-        if (isNewApi) {
-            scopeId = await this.createScopedApi(api);
-        }
-        else {
-            const scopeDef = this.sourceTracker.getScopeDefinitionForPage(api.pageName);
-            scopeId = scopeDef?.id ?? "";
-        }
-        this.emit("apiUpdate", { api: apiDef, scopeId });
-        return { api: apiDef, scopeId, generationNumber };
-    };
-    createScopedApi = async (api) => {
-        if (!this.sourceTracker) {
-            throw new Error("Source tracker not initialized");
-        }
-        // We want to add the API entity to our scope, but we do not want to emit entity events, because
-        // the API update event handles this particular side effect.
-        const scopeId = await this.sourceTracker.addApi({
-            pageName: api.pageName,
-            apiName: api.apiPb.metadata.name,
-        });
-        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
-        await this.writeChanges(changes);
-        return scopeId;
-    };
-    handleDeleteApi = async (payload) => {
-        const logger = getLogger();
-        const { apis } = payload;
-        if (!this.rootDir) {
-            throw new Error("Root directory not set");
-        }
-        const rootDir = this.rootDir;
-        const executeDeleteApis = Promise.all(apis.map(({ apiName, pageName }) => {
-            return new Promise(
-            // eslint-disable-next-line no-async-promise-executor
-            async (resolve) => {
-                const apiFilePath = path.join(rootDir, "pages", pageName, "apis", apiName, "api.yaml");
-                const api = this.apiFiles[apiFilePath];
-                if (!api || !this.sourceTracker) {
-                    return resolve(undefined);
-                }
-                const apiDir = path.join(rootDir, "pages", pageName, "apis", apiName);
-                try {
-                    const stats = await fs.stat(apiDir);
-                    if (stats.isDirectory()) {
-                        await fs.rmdir(apiDir, { recursive: true });
-                    }
-                    delete this.apiFiles[apiFilePath];
-                    const scopeId = this.sourceTracker.deleteApi({
-                        pageName,
-                        apiName,
-                    });
-                    resolve({
-                        apiName,
-                        pageName,
-                        scopeId,
-                    });
-                }
-                catch (e) {
-                    logger.warn(`Could not delete api ${apiFilePath} ${JSON.stringify(e)}`);
-                    resolve(undefined);
-                }
-                resolve(undefined);
-            });
-        }));
-        const deletedApis = (await executeDeleteApis).filter((api) => api !== undefined);
-        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
-        await this.writeChanges(changes);
-        this.emit("apiDelete", {
-            apis: deletedApis.filter((api) => api !== undefined),
-        });
-        return { deletedApis };
-    };
-    handleRenameApi = async (payload) => {
-        const { oldName, newName, pageName } = payload;
-        if (!this.rootDir) {
-            throw new Error("Root directory not set");
-        }
-        const pagePath = getPageFolder(this.rootDir, pageName);
-        const existingApiFolder = path.join(this.rootDir, "pages", pageName, "apis", oldName);
-        const newApiFolder = path.join(this.rootDir, "pages", pageName, "apis", newName);
-        const files = this.sourceTracker?.getCurrentFiles();
-        const file = files?.[path.join(pagePath, "index.tsx")];
-        if (!file || !file.ast) {
-            throw new Error(`Page ${pageName} not found`);
-        }
-        const apiFilePath = path.join(existingApiFolder, "api.yaml");
-        const apiDef = this.apiFiles[apiFilePath];
-        if (!apiDef) {
-            throw new Error(`API ${oldName} not found`);
-        }
-        const otherPageAPIs = structuredClone(Object.keys(this.apiFiles)
-            .filter((path) => path.startsWith(pagePath) && path !== apiFilePath)
-            .map((path) => ({
-            api: { apiPb: this.apiFiles[path]?.apiPb },
-            filePath: path,
-        }))
-            .filter((api) => !!api.api));
-        const newApiFolderExists = await fs.stat(newApiFolder).catch(() => false);
-        if (newApiFolderExists) {
-            throw new Error(`API ${newName} already exists`);
-        }
-        this.watcher?.unwatch(existingApiFolder);
-        this.watcher?.unwatch(newApiFolder);
-        apiDef.apiPb.metadata.name = newName;
-        await fs.rename(existingApiFolder, newApiFolder);
-        const scopeDef = this.sourceTracker?.getScopeDefinitionForPage(pageName);
-        if (!scopeDef) {
-            throw new Error(`Scope definition not found for API`);
-        }
-        this.sourceTracker?.renameEntity({
-            oldName,
-            newName,
-            entityId: scopeDef.scopeNameToEntityId[oldName],
-        });
-        delete this.apiFiles[apiFilePath];
-        this.writeFile(path.join(newApiFolder, "api.yaml"), yaml.stringify(apiDef.apiPb), "api");
-        this.watcher?.add(existingApiFolder);
-        this.watcher?.add(newApiFolder);
-        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
-        await this.writeChanges(changes);
-        this.emit("apiManualUpdate", {
-            api: this.createClientApi(apiDef),
-            oldName,
-            pageName,
-            scopeId: scopeDef?.id ?? "",
-        }, true);
-        await this.renameManager.renameEntityInApis({
-            oldName,
-            newName,
-            apis: otherPageAPIs,
-        });
-        // only save the APIs that have changed
-        await Promise.all(otherPageAPIs.map(async ({ api, filePath }) => {
-            if (isEqual(api?.apiPb, this.apiFiles[filePath]?.apiPb)) {
-                return Promise.resolve();
-            }
-            await this.writeFile(filePath, yaml.stringify(api?.apiPb), "api");
-            this.emit("apiManualUpdate", {
-                api: this.createClientApi(api),
-                pageName,
-                scopeId: scopeDef?.id ?? "",
-            }, true);
-            // TODO: Should I delete here?
-        }));
-    };
+    // MARK: entity operations
     handleAddEntity = async (payload) => {
         this.sourceTracker?.addEntity({
             scopeId: payload.scopeId,
@@ -983,6 +818,7 @@ export default registerPage(Page, { name: "${name}" });
         const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
         await this.writeChanges(changes);
     };
+    // MARK: rename operations
     handleRenameElement = async (payload) => {
         if (payload.kind === "component") {
             return this.handleRenameComponent(payload);
@@ -1066,98 +902,204 @@ export default registerPage(Page, { name: "${name}" });
         this.watcher?.add(newPageFolder);
         this.watcher?.add(oldPageFolder);
     };
-    getPageRoots(filePath) {
-        const scopeFilePath = path.join(path.dirname(filePath), "index.tsx");
-        const currentFile = this.sourceTracker?.getCurrentFiles()[scopeFilePath];
-        if (!currentFile) {
-            return null;
+    getRelativeRoutePath(filePath) {
+        if (!this.rootDir) {
+            throw new Error("Root directory not set");
         }
-        return getPageRoots(filePath, currentFile);
+        // no leading slash
+        return path.relative(path.join(this.rootDir, PAGES_DIRECTORY), filePath);
     }
-    getScope(filePath) {
-        // get the scope.ts file in the same directory as path
-        const scopeFilePath = path.join(path.dirname(filePath), SCOPE_FILE);
-        const currentFile = this.sourceTracker?.getCurrentFiles()[scopeFilePath];
-        if (!currentFile) {
-            console.log("File not found", scopeFilePath);
-            return null;
+    // MARK: API operations
+    handleUpdateApi = async (payload) => {
+        const { api } = payload;
+        if (!this.sourceTracker) {
+            throw new Error("Source tracker not initialized");
         }
-        const scope = getScope(scopeFilePath, currentFile);
-        return scope;
-    }
-    getRoutes() {
-        const routes = [];
-        for (const [path, { file }] of Object.entries(this.routes)) {
-            routes.push({
-                path,
-                component: file,
-            });
+        if (!this.rootDir) {
+            throw new Error("Root directory not set");
         }
-        return routes;
-    }
-    async addRoute(route, filePath) {
+        if (!api.pageName) {
+            throw new Error("API page name is not set");
+        }
+        const apiName = api.apiPb.metadata.name;
+        if (!apiName) {
+            throw new Error("API name is not set");
+        }
+        const apiFilePath = getApiFilePath(this.rootDir, api.pageName, apiName);
+        const apiDir = path.dirname(apiFilePath);
+        const isNewApi = !this.getApiFiles()[apiFilePath];
+        try {
+            const stats = await fs.stat(apiDir);
+            if (!stats.isDirectory()) {
+                await this.fsOperationQueue.enqueue(async () => await fs.mkdir(apiDir, { recursive: true }));
+            }
+        }
+        catch {
+            await this.fsOperationQueue.enqueue(async () => await fs.mkdir(apiDir, { recursive: true }));
+        }
+        await this.writeFile(apiFilePath, yaml.stringify(api.apiPb), "api");
+        const generationNumber = this.generationNumberSequence.next();
+        const apiDef = this.createClientApi(api);
+        let scopeId = "";
+        if (isNewApi) {
+            scopeId = await this.addApiToScope(api);
+        }
+        else {
+            const scopeDef = this.sourceTracker.getScopeDefinitionForPage(api.pageName);
+            scopeId = scopeDef?.id ?? "";
+        }
+        this.emit("apiUpdate", { api: apiDef, scopeId });
+        return { api: apiDef, scopeId, generationNumber };
+    };
+    handleDeleteApi = async (payload) => {
+        const logger = getLogger();
+        const { apis } = payload;
         if (!this.rootDir) {
             throw new Error("Root directory not set");
         }
-        this.routes[route] = { file: this.getRelativeRoutePath(filePath) };
-        await this.writeFile(path.join(this.rootDir, ROUTES_FILE), JSON.stringify(this.routes, null, 2));
-    }
-    async removeRoute(filePath) {
+        const rootDir = this.rootDir;
+        const deletedApis = [];
+        for (const { apiName, pageName } of apis) {
+            const apiFilePath = getApiFilePath(rootDir, pageName, apiName);
+            const api = this.apiFiles[apiFilePath];
+            if (!api || !this.sourceTracker) {
+                continue;
+            }
+            const apiDir = path.dirname(apiFilePath);
+            try {
+                const stats = await fs.stat(apiDir);
+                if (stats.isDirectory()) {
+                    await fs.rmdir(apiDir, { recursive: true });
+                }
+                delete this.apiFiles[apiFilePath];
+                const scopeId = this.sourceTracker.deleteApi({
+                    pageName,
+                    apiName,
+                });
+                deletedApis.push({
+                    apiName,
+                    pageName,
+                    scopeId,
+                });
+            }
+            catch (e) {
+                logger.warn(`Could not delete api ${apiFilePath} ${JSON.stringify(e)}`);
+            }
+        }
+        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+        await this.writeChanges(changes);
+        this.emit("apiDelete", {
+            apis: deletedApis.filter((api) => api !== undefined),
+        });
+        return { deletedApis };
+    };
+    handleRenameApi = async (payload) => {
+        const { oldName, newName, pageName } = payload;
         if (!this.rootDir) {
             throw new Error("Root directory not set");
         }
-        const relativeFilePath = this.getRelativeRoutePath(filePath);
-        this.routes = Object.fromEntries(Object.entries(this.routes).filter(([_, value]) => value.file !== relativeFilePath));
-        await this.writeFile(path.join(this.rootDir, ROUTES_FILE), JSON.stringify(this.routes, null, 2));
-    }
-    async writeChanges(changes, callback) {
-        return Promise.all(changes.map(async ({ fileName, source, kind }) => {
-            await this.writeFile(fileName, source, kind);
-            return callback?.(fileName, source);
-        }));
-    }
-    getNodeForWidgetSourceId(id) {
-        return this.sourceTracker?.getElementToLocation(id);
-    }
-    getAstForWidgetSourceId(id) {
-        const filePath = this.sourceTracker?.getElementToFilePath(id);
-        if (!filePath) {
-            return null;
+        const pagePath = getPageFolder(this.rootDir, pageName);
+        const existingApiFolder = path.join(this.rootDir, "pages", pageName, "apis", oldName);
+        const newApiFolder = path.join(this.rootDir, "pages", pageName, "apis", newName);
+        const files = this.sourceTracker?.getCurrentFiles();
+        const file = files?.[path.join(pagePath, "index.tsx")];
+        if (!file || !file.ast) {
+            throw new Error(`Page ${pageName} not found`);
         }
-        return this.sourceTracker?.getCurrentFiles()[filePath]?.ast;
-    }
-    renameIdentifierInApis = async ({ elementId, oldName, newName, parentBinding, }) => {
-        const apisInScope = structuredClone(this.getApisInScope(elementId));
+        const apiFilePath = path.join(existingApiFolder, "api.yaml");
+        const apiDef = this.apiFiles[apiFilePath];
+        if (!apiDef) {
+            throw new Error(`API ${oldName} not found`);
+        }
+        const otherPageAPIs = structuredClone(Object.keys(this.apiFiles)
+            .filter((path) => path.startsWith(pagePath) && path !== apiFilePath)
+            .map((path) => ({
+            api: { apiPb: this.apiFiles[path]?.apiPb },
+            filePath: path,
+        }))
+            .filter((api) => !!api.api));
+        const newApiFolderExists = await fs.stat(newApiFolder).catch(() => false);
+        if (newApiFolderExists) {
+            throw new Error(`API ${newName} already exists`);
+        }
+        this.watcher?.unwatch(existingApiFolder);
+        this.watcher?.unwatch(newApiFolder);
+        apiDef.apiPb.metadata.name = newName;
+        await fs.rename(existingApiFolder, newApiFolder);
+        const scopeDef = this.sourceTracker?.getScopeDefinitionForPage(pageName);
+        if (!scopeDef) {
+            throw new Error(`Scope definition not found for API`);
+        }
+        this.sourceTracker?.renameEntity({
+            oldName,
+            newName,
+            entityId: scopeDef.scopeNameToEntityId[oldName],
+        });
+        delete this.apiFiles[apiFilePath];
+        this.writeFile(path.join(newApiFolder, "api.yaml"), yaml.stringify(apiDef.apiPb), "api");
+        this.watcher?.add(existingApiFolder);
+        this.watcher?.add(newApiFolder);
+        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+        await this.writeChanges(changes);
+        this.emit("apiManualUpdate", {
+            api: this.createClientApi(apiDef),
+            oldName,
+            pageName,
+            scopeId: scopeDef?.id ?? "",
+        }, true);
         await this.renameManager.renameEntityInApis({
             oldName,
             newName,
-            parentBinding,
-            apis: apisInScope,
+            apis: otherPageAPIs,
         });
         // only save the APIs that have changed
-        await Promise.all(apisInScope.map(({ api, filePath }) => {
+        await Promise.all(otherPageAPIs.map(async ({ api, filePath }) => {
             if (isEqual(api?.apiPb, this.apiFiles[filePath]?.apiPb)) {
                 return Promise.resolve();
             }
-            return this.writeFile(filePath, yaml.stringify(api?.apiPb), "api");
+            await this.writeFile(filePath, yaml.stringify(api?.apiPb), "api");
+            this.emit("apiManualUpdate", {
+                api: this.createClientApi(api),
+                pageName,
+                scopeId: scopeDef?.id ?? "",
+            }, true);
+            // TODO: Should I delete here?
         }));
     };
-    getApisInScope = (elementId) => {
-        const filePath = this.sourceTracker?.getElementToFilePath(elementId);
-        if (!filePath) {
-            return [];
-        }
-        const pagePath = path.dirname(filePath);
-        return Object.entries(this.apiFiles)
-            .filter(([filePath]) => filePath.includes(pagePath))
-            .map(([filePath, api]) => ({ api, filePath }));
-    };
-    getRelativeRoutePath(filePath) {
-        if (!this.rootDir) {
-            throw new Error("Root directory not set");
+    async removeApiData(filePath) {
+        const api = this.apiFiles[filePath];
+        if (!api) {
+            return;
         }
-        // no leading slash
-        return path.relative(path.join(this.rootDir, PAGES_DIRECTORY), filePath);
+        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,
+            },
+        });
+    }
+    getApiFiles() {
+        return Object.keys(this.apiFiles).reduce((acc, key) => {
+            if (!this.apiFiles[key]) {
+                return acc;
+            }
+            acc[key] = {
+                api: this.createClientApi(this.apiFiles[key]),
+                scopeId: this.apiFiles[key].scopeId,
+            };
+            return acc;
+        }, {});
     }
     // Utilities for converting server API format to Client API format
     // We internally save the API as the server does, but we return should always return it
@@ -1174,19 +1116,21 @@ export default registerPage(Page, { name: "${name}" });
             },
         };
     }
-    formatApisToClientApis(serverApis) {
-        return Object.keys(serverApis).reduce((acc, key) => {
-            if (!serverApis[key]) {
-                return acc;
-            }
-            acc[key] = {
-                api: this.createClientApi(serverApis[key]),
-                scopeId: serverApis[key].scopeId,
-            };
-            return acc;
-        }, {});
-    }
-    async processApiUpdates(filePath, fileType) {
+    addApiToScope = async (api) => {
+        if (!this.sourceTracker) {
+            throw new Error("Source tracker not initialized");
+        }
+        // We want to add the API entity to our scope, but we do not want to emit entity events, because
+        // the API update event handles this particular side effect.
+        const scopeId = await this.sourceTracker.addApi({
+            pageName: api.pageName,
+            apiName: api.apiPb.metadata.name,
+        });
+        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+        await this.writeChanges(changes);
+        return scopeId;
+    };
+    async processApiFileUpdates(filePath, fileType) {
         let yamlPath = filePath;
         if (fileType.type === "python-api-step" ||
             fileType.type === "js-api-step") {
@@ -1204,7 +1148,7 @@ export default registerPage(Page, { name: "${name}" });
             const parsedData = { apiPb: apiContent?.api };
             if (!(yamlPath in this.apiFiles &&
                 isEqual(this.apiFiles[yamlPath]?.apiPb, parsedData.apiPb))) {
-                const { updatedApi, pageName, isNewApi } = this.updateApi({
+                const { updatedApi, pageName, isNewApi } = this.updateInternalApiData({
                     api: parsedData.apiPb,
                     stepPathMap: apiContent.stepPathMap,
                 }, yamlPath);
@@ -1215,7 +1159,7 @@ export default registerPage(Page, { name: "${name}" });
                     return;
                 }
                 if (isNewApi) {
-                    await this.createScopedApi(updatedApi);
+                    await this.addApiToScope(updatedApi);
                 }
                 this.emit("apiManualUpdate", {
                     api: this.createClientApi(updatedApi),
@@ -1231,6 +1175,53 @@ export default registerPage(Page, { name: "${name}" });
             logger.error(`Error updating API: ${yamlPath}, error: ${error}`);
         }
     }
+    updateInternalApiData = (content, path) => {
+        if (!this.rootDir) {
+            throw new Error("Root directory not set");
+        }
+        const { api: apiContents, stepPathMap } = content;
+        const pageName = getPageName(path);
+        let scopeId = this.sourceTracker?.getScopeDefinitionForPage(pageName)?.id;
+        if (!scopeId) {
+            console.warn("Scope ID not found for API", apiContents.metadata.name);
+            scopeId = "";
+        }
+        const updatedApi = {
+            apiPb: yaml.parse(JSON.stringify(apiContents)),
+            pageName,
+            stepPathMap,
+            scopeId,
+        };
+        const isNewApi = !this.apiFiles[path];
+        this.apiFiles[path] = updatedApi;
+        return { updatedApi, pageName, isNewApi };
+    };
+    renameIdentifierInApis = async ({ elementId, oldName, newName, parentBinding, }) => {
+        const apisInScope = structuredClone(this.getApisInScope(elementId));
+        await this.renameManager.renameEntityInApis({
+            oldName,
+            newName,
+            parentBinding,
+            apis: apisInScope,
+        });
+        // only save the APIs that have changed
+        await Promise.all(apisInScope.map(({ api, filePath }) => {
+            if (isEqual(api?.apiPb, this.apiFiles[filePath]?.apiPb)) {
+                return Promise.resolve();
+            }
+            return this.writeFile(filePath, yaml.stringify(api?.apiPb), "api");
+        }));
+    };
+    getApisInScope = (elementId) => {
+        const filePath = this.sourceTracker?.getElementToFilePath(elementId);
+        if (!filePath) {
+            return [];
+        }
+        const pagePath = path.dirname(filePath);
+        return Object.entries(this.apiFiles)
+            .filter(([filePath]) => filePath.includes(pagePath))
+            .map(([filePath, api]) => ({ api, filePath }));
+    };
 }
 // Add new mock implementation
 export class MockFileSyncManager extends FileSystemManager {