@superblocksteam/vite-plugin-file-sync 2.0.37-next.5 → 2.0.37-next.51

package/dist/file-system-manager.js

@@ -10,7 +10,6 @@ import { isEqual } from "lodash-es";
 import yaml from "yaml";
 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 { generate } from "./generate.js";
@@ -20,7 +19,7 @@ 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 { getLegacyComponentsFolder } from "./plugin-options.js";
 import { RenameManager } from "./rename-manager.js";
 import { getFullImportPath } from "./resolver.js";
 import { SourceTracker } from "./source-tracker.js";
@@ -53,7 +52,6 @@ const SUPPORTED_FILETYPES = [
         extension: ".json",
     },
 ];
-const APP_THEME_FILE_NAME = "appTheme.ts";
 export class FileSystemManager extends TracedEventEmitter {
     rootDir;
     tsFiles = {};
@@ -100,7 +98,6 @@ export class FileSystemManager extends TracedEventEmitter {
             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" },
         });
         const methods = [
@@ -118,7 +115,6 @@ export class FileSystemManager extends TracedEventEmitter {
             "handleAddEntity",
             "handleUpdateEntity",
             "handleDeleteEntity",
-            "handleUpdateTheme",
             "handleRenameElement",
         ];
         addTracingToMethods(this, methods, tracer);
@@ -146,8 +142,6 @@ export class FileSystemManager extends TracedEventEmitter {
         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(`scanning ${tsxFiles.length} code files`);
         logger.info(`scanning ${yamlFiles.length} api files`);
         logger.info(`scanning app theme file`);
@@ -175,13 +169,6 @@ export class FileSystemManager extends TracedEventEmitter {
                 };
             }),
         ].flat();
-        if (appThemeFile) {
-            allFiles.push({
-                type: "ts",
-                path: appThemeFile,
-                content: readFile(appThemeFile),
-            });
-        }
         const contents = await Promise.allSettled(allFiles.map((f) => f.content));
         contents.forEach((result, i) => {
             if (result.status === "rejected") {
@@ -271,13 +258,9 @@ export class FileSystemManager extends TracedEventEmitter {
         }
         const componentsManager = ComponentsManager.getInstance();
         const processedTransactions = this.getProcessedTransactionsWithNonce();
-        const customImports = new Set();
         traverse(clonedAst.ast, {
             Program: {
                 exit(nodePath) {
-                    if (isCustomBuildEnabled()) {
-                        addLegacyCustomComponentVariables(nodePath, customImports);
-                    }
                     // we want to inject the component name into the file so we can use it for hot reloading purposes
                     const name = componentsManager.getComponentName(filePath);
                     if (name) {
@@ -287,19 +270,6 @@ export class FileSystemManager extends TracedEventEmitter {
                     }
                 },
             },
-            ImportDeclaration(path) {
-                if (isCustomBuildEnabled()) {
-                    // when we see a custom component, we want to track the import and modify it to point
-                    // to the built source
-                    modifyLegacyCustomComponentImports(path, customImports);
-                }
-            },
-            JSXElement(path) {
-                if (isCustomBuildEnabled()) {
-                    // based on the imports we see, we want to modify the JSXElement that uses the custom component
-                    modifyLegacyCustomComponentElements(path, customImports);
-                }
-            },
             ReturnStatement(path) {
                 const argument = path.get("argument");
                 if (!argument.isJSXElement()) {
@@ -969,19 +939,6 @@ export const ${name} = ${name}Scope.entities;
             }
         });
     };
-    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);
-        this.sourceTracker?.updateTheme({
-            themeFilePath: filePath,
-            theme,
-        });
-        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
-        await this.writeChanges(changes);
-    };
     handleAddComponentNameToScope = async (payload) => {
         const { scopeName, componentName } = payload;
         this.sourceTracker?.addScopeComponent({
@@ -1041,133 +998,164 @@ export const ${name} = ${name}Scope.entities;
         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 doesFileExist = await fs.stat(newIndexFilePath).catch(() => false);
-        if (doesFileExist) {
-            throw new Error(`Page ${newName} already exists`);
+        try {
+            await this.performRenamePageTransaction(oldName, newName);
+            this.emit("renamePage", newName);
         }
-        this.watcher?.unwatch(newPageFolder);
-        this.watcher?.unwatch(oldPageFolder);
-        let oldScope;
-        let newScope;
-        const oldScopeFilePath = path.join(oldPageFolder, SCOPE_FILE);
-        const newScopeFilePath = path.join(newPageFolder, SCOPE_FILE);
-        const existingRoute = Object.keys(this.routes).find((route) => this.routes[route]?.file ===
-            this.getRelativeRoutePath(oldIndexFilePath));
+        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`);
             }
-            oldScope = this.sourceTracker?.getScopeDefinitionForPage(oldName);
+            const oldScope = this.sourceTracker?.getScopeDefinitionForPage(oldName);
             if (!oldScope) {
                 throw new Error(`Scope definition not found for old page, ${oldName}`);
             }
-            // we copy because its a safer operation than a rename, so it lets us
-            // recover from errors
-            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];
-            // you have to write the scope first, otherwise the page parsing breaks
-            await this.handleNonVisualChangeByDeletingIds(newScopeFilePath, newScopeFile);
-            await this.handleNonVisualChangeByDeletingIds(newIndexFilePath, newIndexFile);
-            // move all ts file sources first
-            Object.entries(this.tsFiles).forEach(([key, value]) => {
-                if (key.startsWith(oldPageFolder)) {
-                    this.tsFiles[key.replace(oldPageFolder, newPageFolder)] = value;
-                }
-            });
-            // once we are tracking scope internally, we can perform all of the refactoring/renaming
-            // in the actual code files
-            this.sourceTracker?.renamePage({
-                oldName,
-                newName,
-                scopeFilePath: newScopeFilePath,
-                pageFilePath: newIndexFilePath,
-            });
-            newScope = this.sourceTracker?.getScopeDefinitionForPage(newName);
-            if (!newScope) {
-                throw new Error(`Scope definition not found for new page, ${newName}`);
-            }
-            // since we have a scope here, we can move APIs now
-            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];
-                }
-            });
+            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) {
-            // reverse setting the files to the new paths
-            Object.entries(this.tsFiles).forEach(([key, value]) => {
-                if (key.startsWith(newPageFolder)) {
-                    this.tsFiles[key.replace(newPageFolder, oldPageFolder)] = value;
-                }
-            });
-            Object.entries(this.apiFiles).forEach(([key, value]) => {
-                if (key.startsWith(newPageFolder)) {
-                    this.apiFiles[key.replace(newPageFolder, oldPageFolder)] = {
-                        ...value,
-                        apiPb: {
-                            ...value.apiPb,
-                            trigger: {
-                                ...value.apiPb.trigger,
-                                pageName: oldName,
-                                pageId: oldScope.id,
-                            },
+            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: oldScope.id,
-                        pageName: oldName,
-                    };
-                    delete this.apiFiles[key];
-                }
-            });
+                    },
+                    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}. Error: ${error}`);
+                getLogger().warn(`Failed to delete new page folder ${newPageFolder} during rollback. Error: ${error}`);
             });
-            const oldScopeFile = await readFile(oldScopeFilePath);
+            const oldScopeFile = await readFile(oldScopeFilePath).catch(() => null);
             if (oldScopeFile) {
                 await this.handleNonVisualChangeByDeletingIds(oldScopeFilePath, oldScopeFile);
             }
-            const oldIndexFile = await readFile(oldIndexFilePath);
+            const oldIndexFile = await readFile(oldIndexFilePath).catch(() => null);
             if (oldIndexFile) {
                 await this.handleNonVisualChangeByDeletingIds(oldIndexFilePath, oldIndexFile);
             }
-            getLogger().error("Error renaming page", getErrorMeta(error));
-            throw error;
+            // 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);
         }
-        await this.removeRoute(oldIndexFilePath);
-        await this.addRoute(existingRoute, newIndexFilePath);
-        await this.sourceTracker?.removeFile(oldIndexFilePath);
-        await this.sourceTracker?.removeFile(oldScopeFilePath);
-        const changes = (await this.sourceTracker?.getAndFlushChanges()) ?? [];
-        await this.writeChanges(changes);
-        this.watcher?.add(newPageFolder);
-        await fs.rm(oldPageFolder, { recursive: true });
-        this.emit("renamePage", newName);
-    };
+        catch (rollbackError) {
+            getLogger().error("Error during transaction rollback", getErrorMeta(rollbackError));
+        }
+    }
     getRelativeRoutePath(filePath) {
         if (!this.rootDir) {
             throw new Error("Root directory not set");