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

package/dist/file-system-manager.js

@@ -1,7 +1,7 @@
 import fs from "fs/promises";
 import path from "node:path";
 import * as t from "@babel/types";
-import { getClientApiId, PROCESSED_TRANSACTIONS_ATTRIBUTE, ROOT_WIDGET_ATTRIBUTE, SOURCE_ID_ATTRIBUTE, WIDGET_DISABLE_DND, } from "@superblocksteam/library-shared";
+import { PROCESSED_TRANSACTIONS_ATTRIBUTE, ROOT_WIDGET_ATTRIBUTE, SOURCE_ID_ATTRIBUTE, WIDGET_DISABLE_DND, } from "@superblocksteam/library-shared";
 import { addTracingToMethods, TracedEventEmitter, } from "@superblocksteam/shared";
 import { readAppApiYamlFile, writeApiFiles, } from "@superblocksteam/util";
 import { glob } from "glob";
@@ -11,22 +11,25 @@ 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 { getApiFilePath, getPageFolder, isPageFilePath, PAGES_DIRECTORY, ROUTES_FILE, SCOPE_FILE, } from "./file-system-helpers.js";
+import { getApiFilePath, isPageFilePath, PAGES_DIRECTORY, SCOPE_FILE, } from "./file-system-helpers.js";
 import { generate } from "./generate.js";
-import { OperationProcessor } from "./operations/operation-processor.js";
 import { doesNodePathHaveBinding } from "./parsing/bindings.js";
 import { getSbElementId } from "./parsing/ids.js";
 import { makeJSXAttribute } from "./parsing/jsx.js";
 import { getRootNodes } from "./parsing/page.js";
-import { getScope } from "./parsing/scope.js";
 import { getLegacyComponentsFolder, isCustomBuildEnabled, } from "./plugin-options.js";
 import { RenameManager } from "./rename-manager.js";
 import { getFullImportPath } from "./resolver.js";
+import { findRouterFile } from "./router-parser.js";
 import { SourceTracker } from "./source-tracker.js";
 import { traverse } from "./traverse.js";
 import { getErrorMeta, getLogger } from "./util/logger.js";
-import { getPageName } from "./util.js";
+import { getScopeIdFromName, getScopeNameFromPath } from "./util.js";
 const SUPPORTED_FILETYPES = [
+    {
+        type: "ts",
+        extension: ".ts",
+    },
     {
         type: "tsx",
         extension: ".tsx",
@@ -58,11 +61,10 @@ export class FileSystemManager extends TracedEventEmitter {
     apiFiles = {};
     sourceTracker;
     fsOperationQueue;
-    operationProcessor;
     generationNumberSequence;
-    routes = {};
     routeChangesQueue = [];
     pageAdditionQueue = new Set();
+    routerFilePath = null;
     watcher;
     registeredComponentPaths = {};
     renameManager = new RenameManager();
@@ -76,15 +78,8 @@ 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" },
             handleReparent: { operation: "moving a component" },
             handleCreateComponent: { operation: "creating a component" },
             handleDeleteComponents: { operation: "deleting components" },
@@ -95,13 +90,9 @@ export class FileSystemManager extends TracedEventEmitter {
             handleUpdateApi: { operation: "updating an API" },
             handleDeleteApi: { operation: "deleting an API" },
             handleRenameApi: { operation: "renaming an API" },
-            handleAddEntity: { operation: "adding an entity" },
-            handleUpdateEntity: { operation: "updating an entity" },
-            handleDeleteEntity: { operation: "deleting an entity" },
             handleRenameElement: { operation: "renaming an element" },
         });
         const methods = [
-            "handleCreatePage",
             "handleReparent",
             "handleCreateComponent",
             "handleDeleteComponents",
@@ -112,9 +103,6 @@ export class FileSystemManager extends TracedEventEmitter {
             "handleUpdateApi",
             "handleDeleteApi",
             "handleRenameApi",
-            "handleAddEntity",
-            "handleUpdateEntity",
-            "handleDeleteEntity",
             "handleRenameElement",
         ];
         addTracingToMethods(this, methods, tracer);
@@ -141,11 +129,8 @@ export class FileSystemManager extends TracedEventEmitter {
         // this reads all files excluding ignore list in the root path. Should we read all files in pages and add root.tsx and App.tsx instead?
         const tsxFiles = fileNames.filter((f) => f.endsWith(".tsx") && !f.includes(`${getLegacyComponentsFolder()}/`));
         const yamlFiles = fileNames.filter((f) => f.endsWith(".yaml"));
-        const scopeFiles = fileNames.filter((f) => f.endsWith(SCOPE_FILE));
         logger.info(`scanning ${tsxFiles.length} code files`);
         logger.info(`scanning ${yamlFiles.length} api files`);
-        logger.info(`scanning app theme file`);
-        logger.info(`scanning ${scopeFiles.length} scope files`);
         const allFiles = [
             ...tsxFiles.map((f) => {
                 return {
@@ -154,13 +139,6 @@ export class FileSystemManager extends TracedEventEmitter {
                     content: readFile(f),
                 };
             }),
-            ...scopeFiles.map((f) => {
-                return {
-                    type: "ts",
-                    path: f,
-                    content: readFile(f),
-                };
-            }),
             ...yamlFiles.map((f) => {
                 return {
                     type: "api",
@@ -188,20 +166,6 @@ export class FileSystemManager extends TracedEventEmitter {
                 this.tsFiles[path] = content;
             }
         });
-        // And routes are in the root
-        const routePath = path.join(rootPath, ROUTES_FILE);
-        const routeFile = await readFile(routePath);
-        if (routeFile) {
-            try {
-                this.routes = JSON.parse(routeFile);
-            }
-            catch (e) {
-                logger.error("Error parsing routes file", getErrorMeta({
-                    error: e,
-                    routeFile,
-                }));
-            }
-        }
         try {
             this.initializeSourceTracker();
         }
@@ -224,6 +188,15 @@ export class FileSystemManager extends TracedEventEmitter {
                 this.updateInternalApiData(content, path);
             }
         });
+        // Find and store the router file path for watching
+        try {
+            this.routerFilePath = await findRouterFile(rootPath);
+            logger.info(`Router file found at: ${this.routerFilePath}`);
+        }
+        catch (e) {
+            logger.error("No router file found", getErrorMeta(e));
+            this.routerFilePath = null;
+        }
         watcher.on("all", (event, filePath) => {
             void this.handleFileChange(event, filePath);
         });
@@ -240,6 +213,59 @@ export class FileSystemManager extends TracedEventEmitter {
         }
         return this.sourceTracker.handleNonVisualChangeByDeletingIds(path, content);
     }
+    async getPropertyCode(itemId, propertyName) {
+        const logger = getLogger();
+        if (!this.sourceTracker) {
+            throw new Error("Source tracker not initialized");
+        }
+        try {
+            // Get the element location (cast itemId to SbElement type)
+            const element = this.sourceTracker.getElementToLocation(itemId);
+            if (!element) {
+                logger.warn(`Element not found: ${itemId}`);
+                return null;
+            }
+            // Get the JSX opening element
+            let openingElement = null;
+            if (element.isJSXElement()) {
+                openingElement = element.get("openingElement");
+            }
+            else if (element.isJSXOpeningElement()) {
+                openingElement = element;
+            }
+            if (!openingElement) {
+                logger.warn(`Could not find opening element for: ${itemId}`);
+                return null;
+            }
+            // Find the attribute with the specified property name
+            const attributes = openingElement.get("attributes");
+            for (const attr of attributes) {
+                if (attr.isJSXAttribute()) {
+                    const attrName = attr.get("name");
+                    if (attrName.isJSXIdentifier() &&
+                        attrName.node.name === propertyName) {
+                        const value = attr.get("value");
+                        // Handle different value types
+                        if (value.isStringLiteral()) {
+                            return value.node.value;
+                        }
+                        else if (value.isJSXExpressionContainer()) {
+                            const expression = value.get("expression");
+                            // Generate code from the expression
+                            const code = generate(expression.node).code;
+                            return code;
+                        }
+                    }
+                }
+            }
+            logger.warn(`Property ${propertyName} not found on element ${itemId}`);
+            return null;
+        }
+        catch (error) {
+            logger.error(`Error getting property code for ${itemId}.${propertyName}`, getErrorMeta(error));
+            return null;
+        }
+    }
     async getFileWithIds(filePath) {
         const logger = getLogger();
         if (!this.sourceTracker) {
@@ -389,15 +415,6 @@ export class FileSystemManager extends TracedEventEmitter {
             return null;
         }
     }
-    enableOperationsQueue() {
-        this.operationProcessor.enable();
-    }
-    disableOperationsQueue() {
-        this.operationProcessor.disable();
-    }
-    async flushOperations() {
-        await this.operationProcessor.flush();
-    }
     // MARK: file change handling
     handleFileChange = async (event, filePath) => {
         const logger = getLogger();
@@ -410,7 +427,6 @@ export class FileSystemManager extends TracedEventEmitter {
         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)) {
@@ -422,140 +438,84 @@ export class FileSystemManager extends TracedEventEmitter {
                 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;
-                                await this.handleNonVisualChangeByDeletingIds(filePath, file);
-                                this.emit("addPage", filePath);
-                            }
-                        },
-                    });
-                }
-                else {
-                    void this.operationProcessor.addOperation({
-                        metadata: {
-                            filePath,
-                        },
-                        execute: async () => {
-                            switch (fileType.type) {
-                                case "api":
-                                case "python-api-step":
-                                case "js-api-step": {
-                                    await this.processApiFileUpdates(filePath, fileType);
-                                    break;
-                                }
-                            }
-                        },
-                    });
+                switch (fileType.type) {
+                    case "api":
+                    case "python-api-step":
+                    case "js-api-step": {
+                        await this.processApiFileUpdates(filePath, fileType);
+                    }
                 }
                 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.addRoute assigns this.routes itself, causing this.routes === data
-                                // but we still want to emit the event to HMR root.tsx
-                                this.emit("routesChanged", this.routes);
-                            }
-                            catch (e) {
-                                logger.error("Error parsing routes file", getErrorMeta(e));
-                            }
-                        },
-                    });
+                const fileType = SUPPORTED_FILETYPES.find((f) => filePath.endsWith(f.extension));
+                if (!fileType || !filePath.startsWith(rootPath)) {
                     return;
                 }
-                else {
-                    void this.operationProcessor.addOperation({
-                        metadata: {
-                            filePath,
-                        },
-                        execute: async () => {
-                            const fileType = SUPPORTED_FILETYPES.find((f) => filePath.endsWith(f.extension));
-                            if (!fileType || !filePath.startsWith(rootPath)) {
+                const data = await readFile(filePath);
+                if (typeof data !== "string")
+                    return;
+                // Handle router file changes
+                if (this.routerFilePath && filePath === this.routerFilePath) {
+                    logger.info("Router file changed, emitting routerChange event");
+                    this.emit("routerChange", filePath);
+                    return;
+                }
+                switch (fileType.type) {
+                    case "ts":
+                    case "tsx":
+                    case "scope":
+                        {
+                            // We do not want to trigger ANY side effects for page additions, we want to control these
+                            // in the addPage handler itself so we can control the order of events
+                            if (this.pageAdditionQueue.has(filePath)) {
+                                logger.info(`File changed: ${filePath} is a page addition, skipping side effects`);
+                                this.pageAdditionQueue.delete(filePath);
                                 return;
                             }
-                            const data = await readFile(filePath);
-                            if (typeof data !== "string")
-                                return;
-                            switch (fileType.type) {
-                                case "tsx":
-                                case "scope":
-                                    {
-                                        // We do not want to trigger ANY side effects for page additions, we want to control these
-                                        // in the addPage handler itself so we can control the order of events
-                                        if (this.pageAdditionQueue.has(filePath)) {
-                                            logger.info(`File changed: ${filePath} is a page addition, skipping side effects`);
-                                            this.pageAdditionQueue.delete(filePath);
-                                            return;
-                                        }
-                                        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
-                                            await 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);
-                                            this.sourceTracker?.updateFileContents(filePath, data);
-                                        }
-                                    }
-                                    break;
-                                case "api":
-                                case "python-api-step":
-                                case "js-api-step":
-                                    {
-                                        await this.processApiFileUpdates(filePath, fileType);
-                                    }
-                                    break;
+                            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
+                                await 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);
+                                this.sourceTracker?.updateFileContents(filePath, data);
                             }
-                        },
-                    });
+                        }
+                        break;
+                    case "api":
+                    case "python-api-step":
+                    case "js-api-step":
+                        {
+                            await this.processApiFileUpdates(filePath, fileType);
+                        }
+                        break;
                 }
                 break;
             }
             case "unlink": {
                 if (filePath in this.tsFiles) {
-                    void this.operationProcessor.addOperation({
-                        metadata: {
-                            filePath,
-                        },
-                        execute: async () => {
-                            await this.deleteTsFile(filePath);
-                        },
-                    });
+                    await this.deleteTsFile(filePath);
+                    if (this.routerFilePath && filePath === this.routerFilePath) {
+                        logger.warn("Router file was deleted, attempting to find new router file");
+                        try {
+                            this.routerFilePath = await findRouterFile(rootPath);
+                            logger.info(`New router file found at: ${this.routerFilePath}`);
+                            this.emit("routerChange", this.routerFilePath);
+                        }
+                        catch {
+                            this.routerFilePath = null;
+                            const error = new Error("Router file was deleted and no replacement could be found.");
+                            logger.error("Router file missing", getErrorMeta(error));
+                        }
+                    }
                 }
                 else if (filePath in this.apiFiles) {
-                    void this.operationProcessor.addOperation({
-                        metadata: {
-                            filePath,
-                        },
-                        execute: async () => {
-                            await this.removeApiData(filePath);
-                        },
-                    });
+                    await this.removeApiData(filePath);
                 }
                 break;
             }
@@ -620,21 +580,6 @@ export class FileSystemManager extends TracedEventEmitter {
     readFile(path) {
         return this.tsFiles[path];
     }
-    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));
-    }
-    async removeRoute(filePath) {
-        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);
@@ -733,26 +678,24 @@ export class FileSystemManager extends TracedEventEmitter {
         const roots = getRootNodes(filePath, currentFile);
         return [...roots, ...importedRoots];
     }
-    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 scope = getScope(scopeFilePath, currentFile);
-        return scope;
-    }
-    getRoutes() {
-        const routes = [];
-        for (const [path, { file }] of Object.entries(this.routes)) {
-            routes.push({
-                path,
-                component: file,
-            });
+    getScope(filePath, fallback) {
+        // Since we no longer use scope.ts files, generate scope info from file path. Pages retain page scope, everything else is App.
+        const scopeName = getScopeNameFromPath(filePath);
+        if (!scopeName) {
+            if (fallback) {
+                return {
+                    entities: {},
+                    scopeName: "App",
+                    scopeId: getScopeIdFromName("App"),
+                };
+            }
+            return undefined;
         }
-        return routes;
+        return {
+            entities: {},
+            scopeName,
+            scopeId: getScopeIdFromName(scopeName),
+        };
     }
     // MARK: transaction handling
     flushTransactions = () => {
@@ -774,80 +717,6 @@ export class FileSystemManager extends TracedEventEmitter {
         return this.processedTransactions.concat(nonce);
     }
     // MARK: editor operations
-    handleCreatePage = async (payload) => {
-        this.trackTransaction(payload.transaction?.id);
-        const { name, route, navigateToRoute } = payload;
-        if (!this.rootDir) {
-            throw new Error("Root directory not set");
-        }
-        if (!route) {
-            throw new Error("Route is required when creating a page");
-        }
-        const pagePath = getPageFolder(this.rootDir, name);
-        const pageIndexPath = path.join(pagePath, "index.tsx");
-        const scopePath = path.join(pagePath, "scope.ts");
-        const pageContent = /*js*/ `import { Page, Dim, registerPage } from "@superblocksteam/library";
-import Stack from "@/components/ui/stack/index";
-import { ${name}, ${name}Scope } from "./scope";
-
-function PageContent() {
-  const {} = ${name};
-  return (
-    <Page name="${name}" height={Dim.fill()} width={Dim.fill()}>
-      <Stack
-        height={Dim.fill()}
-        width={Dim.fill()}
-        layout="vertical"
-        verticalAlign="top"
-        horizontalAlign="center"
-        shouldScrollContents
-      ></Stack>
-    </Page>
-  );
-}
-
-export default registerPage(PageContent, ${name}Scope);
-`;
-        const scopeContent = /*js*/ `/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable no-empty-pattern */
-import { createScope, computed, Global } from "@superblocksteam/library";
-import { App } from "@/scope";
-import { toast } from "sonner";
-
-export const ${name}Scope = createScope<{}>(({ entities }) => ({}), {
-  name: "${name}",
-});
-
-export const ${name} = ${name}Scope.entities;
-`;
-        this.watcher?.unwatch(pagePath);
-        await fs.mkdir(pagePath, { recursive: true });
-        await this.writeFile(pageIndexPath, pageContent, "ts");
-        await this.writeFile(scopePath, scopeContent, "ts");
-        await this.handleNonVisualChangeByDeletingIds(pageIndexPath, pageContent);
-        await this.handleNonVisualChangeByDeletingIds(scopePath, scopeContent);
-        this.pageAdditionQueue.add(pageIndexPath);
-        this.pageAdditionQueue.add(scopePath);
-        this.watcher?.add(pagePath);
-        await this.addRoute(route, pageIndexPath);
-        this.emit("addPage", pageIndexPath, navigateToRoute ? route : undefined);
-    };
-    handleDeletePage = async (payload) => {
-        const { name, transaction } = payload;
-        this.trackTransaction(transaction?.id);
-        if (Object.values(this.routes).length === 1) {
-            throw new Error("You can't delete the last page");
-        }
-        if (!this.rootDir) {
-            throw new Error("Root directory not set");
-        }
-        const pagePath = getPageFolder(this.rootDir, name);
-        const pageIndexPath = path.join(pagePath, "index.tsx");
-        this.watcher?.unwatch(pagePath);
-        await this.removeRoute(pageIndexPath);
-        await fs.rm(pagePath, { recursive: true, force: true });
-        this.emit("deletePage", pagePath);
-    };
     get routeChange() {
         return this.routeChangesQueue.shift();
     }
@@ -973,70 +842,18 @@ export const ${name} = ${name}Scope.entities;
         this.flushTransactions();
         return returnValues;
     };
-    // MARK: entity operations
-    handleAddEntity = async (payload) => {
-        this.sourceTracker?.addEntity({
-            scopeId: payload.scopeId,
-            entity: {
-                type: payload.type,
-                name: payload.name,
-                attributes: payload.attributes,
-            },
-        });
-        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
-        await this.writeChanges(changes, (fileName) => {
-            this.emit("addEntity", fileName, payload);
-        });
-    };
-    handleUpdateEntity = async (payload) => {
-        this.sourceTracker?.updateEntity({
-            entityId: payload.entityId,
-            updates: payload.updates,
-        });
-        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
-        await this.writeChanges(changes, (fileName) => {
-            this.emit("updateEntity", fileName, payload);
-        });
-    };
-    handleDeleteEntity = async (payload) => {
-        const deletedEntityName = this.sourceTracker?.deleteEntity({
-            entityId: payload.entityId,
-        });
-        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
-        await this.writeChanges(changes, (fileName) => {
-            if (deletedEntityName) {
-                this.emit("deleteEntity", fileName, deletedEntityName);
-            }
-        });
-    };
-    handleAddComponentNameToScope = async (payload) => {
-        const { scopeName, componentName } = payload;
-        this.sourceTracker?.addScopeComponent({
-            scopeName,
-            componentName,
-        });
-        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
-        await this.writeChanges(changes);
-    };
     // MARK: rename operations
     handleRenameElement = async (payload) => {
         if (payload.kind === "component") {
             return this.handleRenameComponent(payload);
         }
-        else if (payload.kind === "entity") {
-            return this.handleRenameEntity(payload);
-        }
-        else if (payload.kind === "page") {
-            return this.handleRenamePage(payload);
-        }
     };
     handleRenameComponent = async (payload) => {
-        const { elementId, newName, oldName, scopeName, renameInAst } = payload;
+        const { elementId, newName, oldName, renameInAst } = payload;
         await this.sourceTracker?.renameComponent({
             widgetSourceId: elementId,
             oldName,
             newName,
-            scopeName,
             renameInAst,
         });
         await this.renameIdentifierInApis({
@@ -1049,183 +866,6 @@ export const ${name} = ${name}Scope.entities;
             this.emit("renameComponent", fileName);
         });
     };
-    handleRenameEntity = async (payload) => {
-        const { elementId, newName, oldName, scopeName } = payload;
-        this.sourceTracker?.renameEntity({
-            entityId: elementId,
-            oldName,
-            newName,
-            scopeName,
-        });
-        await this.renameIdentifierInApis(payload);
-        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
-        await this.writeChanges(changes, (fileName) => {
-            this.emit("renameEntity", fileName);
-        });
-    };
-    handleRenamePage = async (payload) => {
-        const { newName, oldName } = payload;
-        if (!this.rootDir) {
-            throw new Error("Root directory not set");
-        }
-        try {
-            await this.performRenamePageTransaction(oldName, newName);
-            this.emit("renamePage", newName);
-        }
-        catch (error) {
-            getLogger().error("Error renaming page", getErrorMeta(error));
-            throw error;
-        }
-    };
-    /**
-     * As much as possible, we want to perform the rename page transaction as an operation we can roll back if it fails.
-     */
-    async performRenamePageTransaction(oldName, newName) {
-        let snapshot;
-        let changes;
-        try {
-            if (!this.rootDir) {
-                throw new Error("Root directory not set");
-            }
-            const newPageFolder = getPageFolder(this.rootDir, newName);
-            const oldPageFolder = getPageFolder(this.rootDir, oldName);
-            const newIndexFilePath = path.join(newPageFolder, "index.tsx");
-            const oldIndexFilePath = path.join(oldPageFolder, "index.tsx");
-            const oldScopeFilePath = path.join(oldPageFolder, SCOPE_FILE);
-            const newScopeFilePath = path.join(newPageFolder, SCOPE_FILE);
-            // Early validations
-            const doesFileExist = await fs.stat(newIndexFilePath).catch(() => false);
-            if (doesFileExist) {
-                throw new Error(`Page ${newName} already exists`);
-            }
-            const existingRoute = Object.keys(this.routes).find((route) => this.routes[route]?.file ===
-                this.getRelativeRoutePath(oldIndexFilePath));
-            if (!existingRoute) {
-                throw new Error(`Route for ${oldName} not found`);
-            }
-            const oldScope = this.sourceTracker?.getScopeDefinitionForPage(oldName);
-            if (!oldScope) {
-                throw new Error(`Scope definition not found for old page, ${oldName}`);
-            }
-            snapshot = {
-                tsFiles: { ...this.tsFiles },
-                apiFiles: { ...this.apiFiles },
-                routes: { ...this.routes },
-            };
-            changes = {
-                newPageFolder,
-                oldPageFolder,
-                newIndexFilePath,
-                oldIndexFilePath,
-                newScopeFilePath,
-                oldScopeFilePath,
-                oldScope,
-                existingRoute,
-            };
-            await this.commitRenamePageChanges(oldName, newName, changes);
-        }
-        catch (error) {
-            if (snapshot && changes) {
-                await this.rollbackRenamePageChanges(snapshot, changes);
-            }
-            throw error;
-        }
-    }
-    async commitRenamePageChanges(oldName, newName, changes) {
-        const { newPageFolder, oldPageFolder, newIndexFilePath, oldIndexFilePath, newScopeFilePath, oldScopeFilePath, existingRoute, } = changes;
-        // we don't want to trigger fs events during the operation
-        this.watcher?.unwatch(newPageFolder);
-        this.watcher?.unwatch(oldPageFolder);
-        await fs.cp(oldPageFolder, newPageFolder, { recursive: true });
-        const newIndexFile = await readFile(newIndexFilePath);
-        if (!newIndexFile) {
-            throw new Error(`New index file ${newIndexFilePath} not found`);
-        }
-        const newScopeFile = await readFile(newScopeFilePath);
-        if (!newScopeFile) {
-            throw new Error(`New scope file ${newScopeFilePath} not found`);
-        }
-        delete this.tsFiles[oldIndexFilePath];
-        delete this.tsFiles[oldScopeFilePath];
-        // lets setup all the ast stuff for the new files
-        await this.handleNonVisualChangeByDeletingIds(newScopeFilePath, newScopeFile);
-        await this.handleNonVisualChangeByDeletingIds(newIndexFilePath, newIndexFile);
-        Object.entries(this.tsFiles).forEach(([key, value]) => {
-            if (key.startsWith(oldPageFolder)) {
-                this.tsFiles[key.replace(oldPageFolder, newPageFolder)] = value;
-                delete this.tsFiles[key];
-            }
-        });
-        // perform the page rename in source tracker now that we have the ast stuff setup
-        this.sourceTracker?.renamePage({
-            oldName,
-            newName,
-            scopeFilePath: newScopeFilePath,
-            pageFilePath: newIndexFilePath,
-        });
-        const newScope = this.sourceTracker?.getScopeDefinitionForPage(newName);
-        if (!newScope) {
-            throw new Error(`Scope definition not found for new page, ${newName}`);
-        }
-        // our apis need the new scope id info, otherwise ui loses track
-        Object.entries(this.apiFiles).forEach(([key, value]) => {
-            if (key.startsWith(oldPageFolder)) {
-                this.apiFiles[key.replace(oldPageFolder, newPageFolder)] = {
-                    ...value,
-                    apiPb: {
-                        ...value.apiPb,
-                        trigger: {
-                            ...value.apiPb.trigger,
-                            pageName: newName,
-                            pageId: newScope.id,
-                        },
-                    },
-                    scopeId: newScope.id,
-                    pageName: newName,
-                };
-                delete this.apiFiles[key];
-            }
-        });
-        await this.removeRoute(oldIndexFilePath);
-        await this.addRoute(existingRoute, newIndexFilePath);
-        await this.sourceTracker?.removeFile(oldIndexFilePath);
-        await this.sourceTracker?.removeFile(oldScopeFilePath);
-        // write all changes
-        const sourceChanges = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
-        await this.writeChanges(sourceChanges);
-        this.watcher?.add(newPageFolder);
-        // should be safe to delete the old page folder now
-        await fs.rm(oldPageFolder, { recursive: true });
-    }
-    async rollbackRenamePageChanges(snapshot, changes) {
-        const { newPageFolder, oldPageFolder, oldScopeFilePath, oldIndexFilePath } = changes;
-        try {
-            this.tsFiles = snapshot.tsFiles;
-            this.apiFiles = snapshot.apiFiles;
-            this.routes = snapshot.routes;
-            // clean up the folders that were created
-            await fs.rm(newPageFolder, { recursive: true }).catch((error) => {
-                getLogger().warn(`Failed to delete new page folder ${newPageFolder} during rollback. Error: ${error}`);
-            });
-            const oldScopeFile = await readFile(oldScopeFilePath).catch(() => null);
-            if (oldScopeFile) {
-                await this.handleNonVisualChangeByDeletingIds(oldScopeFilePath, oldScopeFile);
-            }
-            const oldIndexFile = await readFile(oldIndexFilePath).catch(() => null);
-            if (oldIndexFile) {
-                await this.handleNonVisualChangeByDeletingIds(oldIndexFilePath, oldIndexFile);
-            }
-            // ensure we have the the correct routes on disk
-            if (this.rootDir) {
-                await this.writeFile(path.join(this.rootDir, ROUTES_FILE), JSON.stringify(snapshot.routes, null, 2));
-            }
-            // resume watching the original folder
-            this.watcher?.add(oldPageFolder);
-        }
-        catch (rollbackError) {
-            getLogger().error("Error during transaction rollback", getErrorMeta(rollbackError));
-        }
-    }
     getRelativeRoutePath(filePath) {
         if (!this.rootDir) {
             throw new Error("Root directory not set");
@@ -1242,14 +882,11 @@ export const ${name} = ${name}Scope.entities;
         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 apiFilePath = getApiFilePath(this.rootDir, api.pageName, apiName);
+        const apiFilePath = getApiFilePath(this.rootDir, apiName);
         const apiDir = path.dirname(apiFilePath);
         const isNewApi = !this.getApiFiles()[apiFilePath];
         try {
@@ -1263,14 +900,10 @@ export const ${name} = ${name}Scope.entities;
         }
         await this.writeFile(apiFilePath, yaml.stringify(api.apiPb), "api");
         const generationNumber = this.generationNumberSequence.next();
+        const scopeId = getScopeIdFromName("App");
         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 ?? "";
+            await this.addApiToScope(api);
         }
         this.emit("apiUpdate", { api: apiDef, scopeId });
         return { api: apiDef, scopeId, generationNumber };
@@ -1283,8 +916,8 @@ export const ${name} = ${name}Scope.entities;
         }
         const rootDir = this.rootDir;
         const deletedApis = [];
-        for (const { apiName, pageName } of apis) {
-            const apiFilePath = getApiFilePath(rootDir, pageName, apiName);
+        for (const { apiName } of apis) {
+            const apiFilePath = getApiFilePath(rootDir, apiName);
             const api = this.apiFiles[apiFilePath];
             if (!api || !this.sourceTracker) {
                 continue;
@@ -1297,12 +930,10 @@ export const ${name} = ${name}Scope.entities;
                 }
                 delete this.apiFiles[apiFilePath];
                 const scopeId = this.sourceTracker.deleteApi({
-                    pageName,
                     apiName,
                 });
                 deletedApis.push({
                     apiName,
-                    pageName,
                     scopeId,
                 });
             }
@@ -1318,25 +949,19 @@ export const ${name} = ${name}Scope.entities;
         return { deletedApis };
     };
     handleRenameApi = async (payload) => {
-        const { oldName, newName, pageName } = payload;
+        const { oldName, newName } = 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 existingApiFolder = path.join(this.rootDir, "apis", oldName);
+        const newApiFolder = path.join(this.rootDir, "apis", newName);
         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)
+        const otherAPIs = structuredClone(Object.keys(this.apiFiles)
+            .filter((path) => path !== apiFilePath)
             .map((path) => ({
             api: { apiPb: this.apiFiles[path]?.apiPb },
             filePath: path,
@@ -1350,15 +975,7 @@ export const ${name} = ${name}Scope.entities;
         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],
-        });
+        const scopeId = getScopeIdFromName("App");
         delete this.apiFiles[apiFilePath];
         // not waiting because we are queueing the write further down
         void this.writeFile(path.join(newApiFolder, "api.yaml"), yaml.stringify(apiDef.apiPb), "api");
@@ -1369,26 +986,23 @@ export const ${name} = ${name}Scope.entities;
         this.emit("apiManualUpdate", {
             api: this.createClientApi(apiDef),
             oldName,
-            pageName,
-            scopeId: scopeDef?.id ?? "",
+            scopeId,
         }, true);
         await this.renameManager.renameEntityInApis({
             oldName,
             newName,
-            apis: otherPageAPIs,
+            apis: otherAPIs,
         });
         // only save the APIs that have changed
-        await Promise.all(otherPageAPIs.map(async ({ api, filePath }) => {
+        await Promise.all(otherAPIs.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 ?? "",
+                scopeId,
             }, true);
-            // TODO: Should I delete here?
         }));
     };
     async removeApiData(filePath) {
@@ -1398,18 +1012,15 @@ export const ${name} = ${name}Scope.entities;
         }
         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;
+        const scopeId = getScopeIdFromName("App");
         this.emit("apiManualDelete", {
             api: {
-                id: getClientApiId(api.apiPb.metadata.name, api.pageName),
+                id: api.apiPb.metadata.name,
                 apiName: api.apiPb.metadata.name,
-                // TODO(saksham): get pagename more defensively
-                pageName: getPageName(filePath),
                 scopeId,
             },
         });
@@ -1428,7 +1039,7 @@ export const ${name} = ${name}Scope.entities;
     }
     // 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
-    // to the client with an id generated as PageName_ApiName
+    // to the client with an id equal to the API name
     createClientApi(api) {
         return {
             pageName: api.pageName,
@@ -1436,7 +1047,7 @@ export const ${name} = ${name}Scope.entities;
                 ...api.apiPb,
                 metadata: {
                     ...api.apiPb.metadata,
-                    id: getClientApiId(api.apiPb.metadata.name, api.pageName),
+                    id: api.apiPb.metadata.name,
                 },
             },
         };
@@ -1448,7 +1059,6 @@ export const ${name} = ${name}Scope.entities;
         // 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()) ?? [];
@@ -1473,23 +1083,15 @@ export const ${name} = ${name}Scope.entities;
             const parsedData = { apiPb: apiContent?.api };
             if (!(yamlPath in this.apiFiles &&
                 isEqual(this.apiFiles[yamlPath]?.apiPb, parsedData.apiPb))) {
-                const { updatedApi, pageName, isNewApi } = this.updateInternalApiData({
+                const { updatedApi, isNewApi } = this.updateInternalApiData({
                     api: parsedData.apiPb,
                     stepPathMap: apiContent.stepPathMap,
                 }, yamlPath);
                 logger.info(`API changed: ${yamlPath}`);
-                const scopeDef = this.sourceTracker?.getScopeDefinitionForPage(pageName);
-                if (!scopeDef) {
-                    logger.error(`Scope definition not found for API`);
-                    return;
-                }
-                if (isNewApi) {
-                    await this.addApiToScope(updatedApi);
-                }
+                const scopeId = getScopeIdFromName("App");
                 this.emit("apiManualUpdate", {
                     api: this.createClientApi(updatedApi),
-                    pageName,
-                    scopeId: scopeDef.id,
+                    scopeId,
                 }, isNewApi);
             }
             else {
@@ -1505,21 +1107,15 @@ export const ${name} = ${name}Scope.entities;
             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 scopeId = getScopeIdFromName("App");
         const updatedApi = {
             apiPb: yaml.parse(JSON.stringify(apiContents)),
-            pageName,
             stepPathMap,
             scopeId,
         };
         const isNewApi = !this.apiFiles[path];
         this.apiFiles[path] = updatedApi;
-        return { updatedApi, pageName, isNewApi };
+        return { updatedApi, isNewApi };
     };
     renameIdentifierInApis = async ({ elementId, oldName, newName, parentBinding, }) => {
         const apisInScope = structuredClone(this.getApisInScope(elementId));
@@ -1537,15 +1133,12 @@ export const ${name} = ${name}Scope.entities;
             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 }));
+    getApisInScope = (_elementId) => {
+        // All APIs are now at app-level scope
+        return Object.entries(this.apiFiles).map(([filePath, api]) => ({
+            api,
+            filePath,
+        }));
     };
 }
 // Add new mock implementation
@@ -1563,10 +1156,8 @@ export class MockFileSyncManager extends FileSystemManager {
             else {
                 this.apiFiles[path] = {
                     apiPb: yaml.parse(content),
-                    pageName: getPageName(path),
                     stepPathMap: {},
-                    // TODO: generate a scope ID for tests
-                    scopeId: "",
+                    scopeId: getScopeIdFromName("App"),
                 };
             }
             // Notify subscribers
@@ -1585,16 +1176,16 @@ export class MockFileSyncManager extends FileSystemManager {
             stepPathMap: {},
             scopeId: payload.scopeId,
         };
-        const scopeDef = this.sourceTracker?.getScopeDefinitionForPage(payload.api.pageName);
+        const scopeId = getScopeIdFromName("App");
         const generationNumber = this.generationNumberSequence.next();
         this.emit("apiUpdate", {
             api: payload.api,
-            scopeId: scopeDef?.id ?? "",
+            scopeId,
         });
         return {
             api: payload.api,
             generationNumber,
-            scopeId: scopeDef?.id ?? "",
+            scopeId,
         };
     };
 }