@superblocksteam/vite-plugin-file-sync 1.99.99-next.2

package/dist/file-system-manager.js

@@ -0,0 +1,1205 @@
+import fs from "fs/promises";
+import EventEmitter from "node:events";
+import path from "node:path";
+import { transformFromAstAsync } from "@babel/core";
+import t from "@babel/types";
+import { getClientApiId, PROCESSED_TRANSACTIONS_ATTRIBUTE, ROOT_WIDGET_ATTRIBUTE, WIDGET_SOURCE_ID_ATTRIBUTE, } from "@superblocksteam/library-shared";
+import { readAppApiYamlFile, writeApiFiles, } from "@superblocksteam/util";
+import { glob } from "glob";
+import { isEqual } from "lodash-es";
+import yaml from "yaml";
+import { generateJSXAttribute } from "./codegen.js";
+import { addLegacyCustomComponentVariables, modifyLegacyCustomComponentElements, modifyLegacyCustomComponentImports, } from "./custom-components.js";
+import { applyErrorHandling, } from "./errors/error-handler.js";
+import { getPageFolder, PAGES_DIRECTORY, ROUTES_FILE, SCOPE_FILE, } from "./file-system-helpers.js";
+import { generate } from "./generate.js";
+import { doesElementHaveBinding } from "./parsing/bindings.js";
+import { getSbElementId } from "./parsing/ids.js";
+import { makeJSXAttribute } from "./parsing/jsx.js";
+import { getPageRoots } from "./parsing/page.js";
+import { getScope } from "./parsing/scope.js";
+import { getLegacyComponentsFolder, isCustomBuildEnabled, } from "./plugin-options.js";
+import { RenameManager } from "./rename-manager.js";
+import { SourceTracker } from "./source-tracker.js";
+import { traverse } from "./traverse.js";
+import { getErrorMeta, getLogger } from "./util/logger.js";
+import { isValidApi } from "./util.js";
+const SUPPORTED_FILETYPES = [
+    {
+        type: "tsx",
+        extension: ".tsx",
+    },
+    {
+        type: "scope",
+        extension: SCOPE_FILE,
+    },
+    {
+        type: "api",
+        extension: ".yaml",
+    },
+    {
+        type: "python-api-step",
+        extension: ".py",
+    },
+    {
+        type: "js-api-step",
+        extension: ".js",
+    },
+];
+const APP_THEME_FILE_NAME = "appTheme.ts";
+export class FileSyncManager extends EventEmitter {
+    rootDir;
+    tsFiles = {};
+    apiFiles = {};
+    sourceTracker;
+    fsOperationQueue;
+    generationNumberSequence;
+    routes = {};
+    watcher;
+    registeredComponentPaths = {};
+    renameManager = new RenameManager();
+    constructor(fsOperationQueue, generationNumberSequence) {
+        super({ captureRejections: true });
+        this.rootDir = "/";
+        this.fsOperationQueue = fsOperationQueue;
+        this.generationNumberSequence = generationNumberSequence;
+        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" },
+            handleSetProperty: { operation: "setting a property" },
+            handleSetProperties: { operation: "setting properties" },
+            handleDeleteProperties: { operation: "deleting properties" },
+            handleBatchUpdate: { operation: "updating multiple things" },
+            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" },
+            handleUpdateTheme: { operation: "updating the theme" },
+            handleRenameElement: { operation: "renaming an element" },
+        });
+    }
+    get appFilePath() {
+        if (!this.rootDir) {
+            throw new Error("Root directory not set");
+        }
+        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 };
+    };
+    async watch(watcher, rootPath) {
+        const logger = getLogger();
+        this.rootDir = rootPath;
+        this.watcher = watcher;
+        // APIs and pages are in the pages subfolder
+        const fileNames = await readFiles(path.join(rootPath));
+        // 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));
+        // For the moment, the theme file is `appTheme.ts`. This may change in the future.
+        const appThemeFile = path.join(rootPath, APP_THEME_FILE_NAME);
+        logger.info(`files to be scanned ${JSON.stringify(tsxFiles)}`);
+        logger.info(`api files to be scanned ${JSON.stringify(yamlFiles)}`);
+        logger.info(`app theme file to be scanned ${JSON.stringify(appThemeFile)}`);
+        logger.info(`scope files to be scanned ${JSON.stringify(scopeFiles)}`);
+        const allFiles = [
+            ...tsxFiles.map((f) => {
+                return {
+                    type: "tsx",
+                    path: f,
+                    content: readFile(f),
+                };
+            }),
+            ...scopeFiles.map((f) => {
+                return {
+                    type: "ts",
+                    path: f,
+                    content: readFile(f),
+                };
+            }),
+            ...yamlFiles.map((f) => {
+                return {
+                    type: "api",
+                    path: f,
+                    content: getMergedApiContent(f),
+                };
+            }),
+        ].flat();
+        if (appThemeFile) {
+            allFiles.push({
+                type: "ts",
+                path: appThemeFile,
+                content: readFile(appThemeFile),
+            });
+        }
+        const contents = await Promise.all(allFiles.map((f) => f.content));
+        contents.forEach((content, i) => {
+            if (!content)
+                return;
+            const file = allFiles[i];
+            if (!file)
+                return;
+            const { type, path } = file;
+            // We only want to load the typescript files here, before the source tracker is initialized
+            // API setup needs to be deferred until we've parsed the scope files (which is done in the source tracker)
+            if (type === "tsx" || type === "ts") {
+                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(e));
+            }
+        }
+        try {
+            this.initializeSourceTracker();
+        }
+        catch (e) {
+            logger.error("Error initializing source tracker", getErrorMeta(e));
+        }
+        contents.forEach((content, i) => {
+            if (!content)
+                return;
+            const file = allFiles[i];
+            if (!file)
+                return;
+            const { type, path } = file;
+            if (type === "api") {
+                this.updateApi(content, path);
+            }
+        });
+        watcher.on("all", async (event, filePath) => {
+            logger.info(`File changed: ${filePath}, event: ${event}`);
+            switch (event) {
+                case "add": {
+                    const fileType = SUPPORTED_FILETYPES.find((f) => filePath.endsWith(f.extension));
+                    if (!fileType || !filePath.startsWith(rootPath)) {
+                        return;
+                    }
+                    const data = await readFile(filePath);
+                    if (typeof data !== "string")
+                        return;
+                    // if we match pages/*/index.tsx, we want to emit an addPage event
+                    if (/pages\/.*\/index\.tsx/.test(filePath)) {
+                        const file = await readFile(filePath);
+                        if (!file) {
+                            logger.error(`Failed to read file: ${filePath}`);
+                            return;
+                        }
+                        if (!(filePath in this.tsFiles)) {
+                            this.tsFiles[filePath] = file;
+                            this.handleNonVisualChangeByDeletingIds(filePath, file);
+                            this.emit("addPage", filePath);
+                        }
+                    }
+                    switch (fileType.type) {
+                        case "api":
+                        case "python-api-step":
+                        case "js-api-step": {
+                            await this.processApiUpdates(filePath, fileType);
+                            break;
+                        }
+                    }
+                    break;
+                }
+                case "change": {
+                    // Special routes file handling
+                    if (filePath === routePath) {
+                        const data = await readFile(filePath);
+                        try {
+                            this.routes = JSON.parse(data);
+                            this.emit("routesChanged", this.routes);
+                        }
+                        catch (e) {
+                            logger.error("Error parsing routes file", getErrorMeta(e));
+                        }
+                        return;
+                    }
+                    const fileType = SUPPORTED_FILETYPES.find((f) => filePath.endsWith(f.extension));
+                    if (!fileType || !filePath.startsWith(rootPath)) {
+                        return;
+                    }
+                    const data = await readFile(filePath);
+                    if (typeof data !== "string")
+                        return;
+                    switch (fileType.type) {
+                        case "tsx":
+                        case "scope":
+                            {
+                                if (!(filePath in this.tsFiles && this.tsFiles[filePath] === data)) {
+                                    logger.info(`File changed: ${filePath} updating AST tracker`);
+                                    this.tsFiles[filePath] = data;
+                                    // only update the source tracker if the file is different
+                                    this.handleNonVisualChangeByDeletingIds(filePath, data);
+                                    this.emit("fileChanged", filePath, data, true);
+                                }
+                                else {
+                                    logger.info(`File unchanged from last tracked state: ${filePath}`);
+                                    this.emit("fileChanged", filePath, data, false);
+                                }
+                            }
+                            break;
+                        case "api":
+                        case "python-api-step":
+                        case "js-api-step":
+                            {
+                                await this.processApiUpdates(filePath, fileType);
+                            }
+                            break;
+                    }
+                    break;
+                }
+                case "unlink": {
+                    if (filePath in this.apiFiles) {
+                        const api = this.apiFiles[filePath];
+                        delete this.apiFiles[filePath];
+                        if (!api || !this.sourceTracker)
+                            break;
+                        const scopeId = await this.sourceTracker.deleteApi({
+                            pageName: api.pageName,
+                            apiName: api.apiPb.metadata.name,
+                        });
+                        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+                        await this.writeChanges(changes);
+                        this.emit("apiManualDelete", {
+                            api: {
+                                id: getClientApiId(api.apiPb.metadata.name, api.pageName),
+                                apiName: api.apiPb.metadata.name,
+                                // TODO(saksham): get pagename more defensively
+                                pageName: getPageName(filePath),
+                                scopeId,
+                            },
+                        });
+                    }
+                    if (filePath in this.tsFiles) {
+                        delete this.tsFiles[filePath];
+                        this.sourceTracker?.removeFile(filePath);
+                        this.emit("deletePage", filePath);
+                    }
+                    break;
+                }
+            }
+        });
+    }
+    getApiFiles() {
+        return this.formatApisToClientApis(this.apiFiles);
+    }
+    getTsFilePaths() {
+        return Object.keys(this.tsFiles);
+    }
+    async writeFile(path, content, kind) {
+        if (kind === "ts") {
+            // happens eagerly regardless of error - possible desync
+            this.tsFiles[path] = content;
+            // TODO(george): as an optimization, we could update the memory snapshot of the file that SyncService is holding
+            await this.fsOperationQueue.enqueue(async () => {
+                await fs.writeFile(path, content);
+            });
+        }
+        else if (kind === "api") {
+            const currentApiFile = this.apiFiles[path];
+            const apiPb = yaml.parse(content);
+            // Client APIs have id, but server APIs don't
+            if (apiPb.metadata.id) {
+                delete apiPb.metadata.id;
+            }
+            const stepPathMap = currentApiFile?.stepPathMap ?? {};
+            this.updateApi({ 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);
+                // stepPathMap will be generated after the write when the file doesn't exist
+                if (this.apiFiles[path]) {
+                    this.apiFiles[path].stepPathMap = stepPathMap;
+                }
+            });
+        }
+    }
+    readFile(path) {
+        return this.tsFiles[path];
+    }
+    initializeSourceTracker() {
+        this.sourceTracker = new SourceTracker();
+        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(path) {
+        const logger = getLogger();
+        if (!this.sourceTracker) {
+            throw new Error("Source tracker not initialized");
+        }
+        const files = this.sourceTracker.getCurrentFiles();
+        if (!files[path]) {
+            throw new Error("File not found in source tracker " + path);
+        }
+        const ast = files[path].ast;
+        if (!ast) {
+            throw new Error("No AST found for file in source tracker " + path);
+        }
+        const clonedAst = await transformFromAstAsync(ast, undefined, {
+            ast: true,
+        });
+        if (!clonedAst?.ast) {
+            throw new Error("Failed to clone AST for file " + path);
+        }
+        const processedTransactions = this.getProcessedTransactionsWithNonce();
+        const customImports = new Set();
+        let customBuildTraversal = {};
+        if (isCustomBuildEnabled()) {
+            customBuildTraversal = {
+                ImportDeclaration(path) {
+                    // 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) {
+                    // based on the imports we see, we want to modify the JSXElement that uses the custom component
+                    modifyLegacyCustomComponentElements(path, customImports);
+                },
+                Program: {
+                    // we want to write the wrapped custom elements as local variables to the file
+                    exit(path) {
+                        addLegacyCustomComponentVariables(path, customImports);
+                    },
+                },
+            };
+        }
+        traverse(clonedAst.ast, {
+            ...customBuildTraversal,
+            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;
+        }
+    }
+    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 [];
+        }
+        const ast = files[path].ast;
+        if (!ast) {
+            logger.warn(`No AST found for file in source tracker for local binding entities: ${path}`);
+            return [];
+        }
+        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);
+    }
+    pendingTransactions = new Set();
+    processedTransactions = [];
+    flushTransactions = () => {
+        // TODO do something more sophisticated than this.
+        this.processedTransactions = this.processedTransactions.slice(-20);
+        this.processedTransactions.push(...Array.from(this.pendingTransactions));
+        this.pendingTransactions.clear();
+    };
+    trackTransaction = (transactionId) => {
+        if (!transactionId) {
+            return;
+        }
+        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);
+    }
+    handleCreatePage = async (payload) => {
+        const { name } = payload;
+        if (!this.rootDir) {
+            throw new Error("Root directory not set");
+        }
+        const pagePath = getPageFolder(this.rootDir, name);
+        const pageIndexPath = path.join(pagePath, "index.tsx");
+        const pageContent = /*js*/ `import { SbPage, SbContainer, registerPage } from "@superblocksteam/library";
+function Page() {
+  return <SbPage name="${name}">
+    <SbContainer width={Dim.fill()} />
+  </SbPage>;
+}
+
+export default registerPage(Page, { name: "${name}" });
+`;
+        await fs.mkdir(pagePath, { recursive: true });
+        await this.writeFile(pageIndexPath, pageContent, "ts");
+        await this.handleNonVisualChangeByDeletingIds(pageIndexPath, pageContent);
+        this.emit("addPage", pageIndexPath);
+    };
+    handleReparent = async (payload, writeFile = true) => {
+        const { from, to, changedProps, transaction } = payload;
+        this.trackTransaction(transaction?.id);
+        await this.sourceTracker?.setProperties({
+            source: from.source,
+            changes: changedProps ?? {},
+        });
+        await this.sourceTracker?.moveElement({
+            from,
+            to,
+        });
+        if (writeFile) {
+            const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+            await this.writeChanges(changes ?? [], (fileName) => {
+                this.emit("reparent", fileName);
+            });
+            this.flushTransactions();
+        }
+    };
+    handleCreateComponent = async (payload, writeFile = true) => {
+        this.trackTransaction(payload.transaction?.id);
+        const sourceId = await this.sourceTracker?.addElement(payload);
+        if (writeFile) {
+            const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+            await this.writeChanges(changes ?? [], (fileName) => {
+                this.emit("createComponent", fileName);
+            });
+            this.flushTransactions();
+        }
+        return sourceId;
+    };
+    handleDeleteComponents = async (payload, writeFile = true) => {
+        const { elements, transaction } = payload;
+        this.trackTransaction(transaction?.id);
+        for (const element of elements) {
+            await this.sourceTracker?.deleteElement({
+                source: element.source,
+                scopeName: element.scopeName,
+            });
+        }
+        if (writeFile) {
+            const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+            await this.writeChanges(changes ?? [], (fileName) => {
+                this.emit("deleteComponents", fileName, elements.map((el) => el.source.id));
+            });
+            this.flushTransactions();
+        }
+    };
+    handleSetProperty = async (payload, writeFile = true) => {
+        const { element: { source }, property, value: { value, type }, transaction, } = payload;
+        this.trackTransaction(transaction?.id);
+        await this.sourceTracker?.setProperty({
+            source,
+            property,
+            value: value,
+            type,
+        });
+        if (writeFile) {
+            const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+            await this.writeChanges(changes ?? []);
+            this.flushTransactions();
+        }
+        this.emit("setProperty", payload);
+    };
+    handleSetProperties = async (payload, writeFile = true) => {
+        const { element: { source }, properties, transaction, } = payload;
+        this.trackTransaction(transaction?.id);
+        await this.sourceTracker?.setProperties({
+            source,
+            changes: properties,
+        });
+        if (writeFile) {
+            const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+            await this.writeChanges(changes ?? []);
+            this.flushTransactions();
+        }
+        this.emit("setProperties", payload);
+    };
+    handleDeleteProperties = async (payload, writeFile = true) => {
+        this.trackTransaction(payload.transaction?.id);
+        await this.sourceTracker?.deleteProperties({
+            source: payload.element.source,
+            properties: payload.properties,
+        });
+        if (writeFile) {
+            const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+            await this.writeChanges(changes ?? []);
+            this.flushTransactions();
+        }
+        this.emit("deleteProperties", payload);
+    };
+    handleBatchUpdate = async (payload) => {
+        const { updates, transaction } = payload;
+        this.trackTransaction(transaction?.id);
+        const returnValues = [];
+        for (const update of updates) {
+            switch (update.type) {
+                case "editor:setProperty":
+                    returnValues.push(await this.handleSetProperty(update.payload, false));
+                    break;
+                case "editor:setProperties":
+                    returnValues.push(await this.handleSetProperties(update.payload, false));
+                    break;
+                case "editor:moveComponent":
+                    returnValues.push(await this.handleReparent(update.payload, false));
+                    break;
+                case "editor:createComponent":
+                    returnValues.push(await this.handleCreateComponent(update.payload, false));
+                    break;
+                case "editor:deleteProperties":
+                    returnValues.push(await this.handleDeleteProperties(update.payload, false));
+                    break;
+                case "editor:deleteComponents":
+                    returnValues.push(await this.handleDeleteComponents(update.payload, false));
+                    break;
+            }
+        }
+        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+        await this.writeChanges(changes ?? []);
+        this.emit("batchUpdate", Array.from(new Set(changes.map((c) => c.fileName))));
+        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 = await 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?
+        }));
+    };
+    handleAddEntity = async (payload) => {
+        await 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) => {
+        await 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 = await this.sourceTracker?.deleteEntity({
+            entityId: payload.entityId,
+        });
+        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+        await this.writeChanges(changes, (fileName) => {
+            if (deletedEntityName) {
+                this.emit("deleteEntity", fileName, deletedEntityName);
+            }
+        });
+    };
+    handleUpdateTheme = async (payload) => {
+        const { theme } = payload;
+        if (!this.rootDir) {
+            throw new Error("Root directory not set");
+        }
+        const filePath = path.join(this.rootDir, APP_THEME_FILE_NAME);
+        await this.sourceTracker?.updateTheme({
+            themeFilePath: filePath,
+            theme,
+        });
+        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+        await this.writeChanges(changes);
+    };
+    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 } = payload;
+        await this.sourceTracker?.renameComponent({
+            widgetSourceId: elementId,
+            oldName,
+            newName,
+            scopeName,
+        });
+        await this.renameIdentifierInApis({
+            elementId,
+            oldName,
+            newName,
+        });
+        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+        await this.writeChanges(changes, (fileName) => {
+            this.emit("renameComponent", fileName);
+        });
+    };
+    handleRenameEntity = async (payload) => {
+        const { elementId, newName, oldName, scopeName } = payload;
+        await 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");
+        }
+        const newPageFolder = getPageFolder(this.rootDir, newName);
+        const newIndexFilePath = path.join(newPageFolder, "index.tsx");
+        const oldIndexFilePath = path.join(this.rootDir, "pages", oldName, "index.tsx");
+        const oldPageFolder = getPageFolder(this.rootDir, oldName);
+        this.watcher?.unwatch(newPageFolder);
+        this.watcher?.unwatch(oldPageFolder);
+        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`);
+        }
+        // Write the name attribute to the page file
+        await this.sourceTracker?.renamePage({
+            newName,
+            filePath: oldIndexFilePath,
+        });
+        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
+        await this.writeChanges(changes);
+        // A rename of a folder is an unlink followed by an add, so the file watcher will take over initializing this
+        // "new" page
+        await fs.rename(oldPageFolder, newPageFolder);
+        // Now we just clean up the routes
+        await this.removeRoute(oldIndexFilePath);
+        await this.addRoute(existingRoute, newIndexFilePath);
+        const newIndexFile = await readFile(newIndexFilePath);
+        if (!newIndexFile) {
+            throw new Error(`New index file ${newIndexFilePath} not found`);
+        }
+        this.tsFiles[newIndexFilePath] = newIndexFile;
+        await this.handleNonVisualChangeByDeletingIds(newIndexFilePath, newIndexFile);
+        this.emit("renamePage", newIndexFilePath);
+        // Re-add the watcher
+        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;
+        }
+        return getPageRoots(filePath, currentFile);
+    }
+    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,
+            });
+        }
+        return routes;
+    }
+    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);
+            return callback?.(fileName, source);
+        }));
+    }
+    getNodeForWidgetSourceId(id) {
+        return this.sourceTracker?.getElementToLocation(id);
+    }
+    getAstForWidgetSourceId(id) {
+        const filePath = this.sourceTracker?.getElementToFilePath(id);
+        if (!filePath) {
+            return null;
+        }
+        return this.sourceTracker?.getCurrentFiles()[filePath]?.ast;
+    }
+    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 }));
+    };
+    getRelativeRoutePath(filePath) {
+        if (!this.rootDir) {
+            throw new Error("Root directory not set");
+        }
+        // no leading slash
+        return path.relative(path.join(this.rootDir, PAGES_DIRECTORY), filePath);
+    }
+    // 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
+    createClientApi(api) {
+        return {
+            pageName: api.pageName,
+            apiPb: {
+                ...api.apiPb,
+                metadata: {
+                    ...api.apiPb.metadata,
+                    id: getClientApiId(api.apiPb.metadata.name, api.pageName),
+                },
+            },
+        };
+    }
+    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) {
+        let yamlPath = filePath;
+        if (fileType.type === "python-api-step" ||
+            fileType.type === "js-api-step") {
+            const apiFolderPath = filePath.split("/").slice(0, -1).join("/");
+            yamlPath = path.join(apiFolderPath, "api.yaml");
+        }
+        const logger = getLogger();
+        try {
+            const apiContent = await getMergedApiContent(yamlPath);
+            if (!isValidApi(apiContent.api)) {
+                return;
+            }
+            if (!apiContent) {
+                return;
+            }
+            const parsedData = { apiPb: apiContent?.api };
+            if (!(yamlPath in this.apiFiles &&
+                isEqual(this.apiFiles[yamlPath]?.apiPb, parsedData.apiPb))) {
+                const { updatedApi, pageName, isNewApi } = this.updateApi({
+                    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.createScopedApi(updatedApi);
+                }
+                this.emit("apiManualUpdate", {
+                    api: this.createClientApi(updatedApi),
+                    pageName,
+                    scopeId: scopeDef.id,
+                }, isNewApi);
+            }
+            else {
+                logger.info(`File unchanged from last tracked state: ${filePath}`);
+            }
+        }
+        catch {
+            logger.info(`API file incomplete: ${yamlPath}`);
+        }
+    }
+}
+// Add new mock implementation
+export class MockFileSyncManager extends FileSyncManager {
+    tsFiles = {};
+    apiFiles = {};
+    async watch(_watcher, _path) {
+        // Mock implementation doesn't actually watch files
+    }
+    async writeFile(path, content, kind) {
+        await this.fsOperationQueue.enqueue(async () => {
+            if (kind === "ts") {
+                this.tsFiles[path] = content;
+            }
+            else {
+                this.apiFiles[path] = {
+                    apiPb: yaml.parse(content),
+                    pageName: getPageName(path),
+                    stepPathMap: {},
+                    // TODO: generate a scope ID for tests
+                    scopeId: "",
+                };
+            }
+            // Notify subscribers
+            this.emit("fileChanged", path, content, true);
+        });
+    }
+    // Helper methods for testing
+    mockFileChange(path, content) {
+        this.tsFiles[path] = content;
+        this.emit("fileChanged", path, content, true);
+    }
+    handleUpdateApi = async (payload) => {
+        const apiName = payload.api.apiPb.metadata.name;
+        this.apiFiles[apiName] = {
+            ...payload.api,
+            stepPathMap: {},
+            scopeId: payload.scopeId,
+        };
+        const scopeDef = this.sourceTracker?.getScopeDefinitionForPage(payload.api.pageName);
+        const generationNumber = this.generationNumberSequence.next();
+        this.emit("apiUpdate", {
+            api: payload.api,
+            scopeId: scopeDef?.id ?? "",
+        });
+        return {
+            api: payload.api,
+            generationNumber,
+            scopeId: scopeDef?.id ?? "",
+        };
+    };
+    getSourceTracker() {
+        return this.sourceTracker;
+    }
+}
+async function readFile(path) {
+    try {
+        // in order for try-catch to work, we need to intentionally await the readFile call,
+        // otherwise the error won't be be caught
+        // see: https://github.com/nodejs/node/issues/51894#issuecomment-1974017737
+        const content = await fs.readFile(path, "utf-8");
+        return content;
+    }
+    catch (e) {
+        getLogger().error(`error reading file: ${path}`, getErrorMeta(e));
+        return null;
+    }
+}
+async function readFiles(dir) {
+    return await glob(path.join(dir, "**/*.{tsx,yaml,ts}"), {
+        ignore: [
+            "node_modules/**",
+            "dist/**",
+            "build/**",
+            ".superblocks/**",
+            `./${getLegacyComponentsFolder()}/**`,
+        ],
+    });
+}
+const getMergedApiContent = async (path) => {
+    return readAppApiYamlFile(path.split("/").slice(0, -1).join("/"));
+};
+const getPageName = (path) => {
+    const parts = path.split("/");
+    const pagesIndex = parts.findIndex((part) => part === "pages");
+    if (pagesIndex !== -1 && parts[pagesIndex + 1]) {
+        return parts[pagesIndex + 1] ?? "";
+    }
+    return "";
+};
+//# sourceMappingURL=file-system-manager.js.map