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

package/dist/file-system-manager.js

@@ -10,6 +10,7 @@ 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";
@@ -19,7 +20,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 } from "./plugin-options.js";
+import { getLegacyComponentsFolder, isCustomBuildEnabled, } from "./plugin-options.js";
 import { RenameManager } from "./rename-manager.js";
 import { getFullImportPath } from "./resolver.js";
 import { SourceTracker } from "./source-tracker.js";
@@ -52,6 +53,7 @@ const SUPPORTED_FILETYPES = [
         extension: ".json",
     },
 ];
+const APP_THEME_FILE_NAME = "appTheme.ts";
 export class FileSystemManager extends TracedEventEmitter {
     rootDir;
     tsFiles = {};
@@ -98,6 +100,7 @@ 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 = [
@@ -115,6 +118,7 @@ export class FileSystemManager extends TracedEventEmitter {
             "handleAddEntity",
             "handleUpdateEntity",
             "handleDeleteEntity",
+            "handleUpdateTheme",
             "handleRenameElement",
         ];
         addTracingToMethods(this, methods, tracer);
@@ -142,6 +146,8 @@ 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`);
@@ -169,6 +175,13 @@ 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") {
@@ -258,9 +271,13 @@ 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) {
@@ -270,6 +287,19 @@ 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()) {
@@ -939,6 +969,19 @@ 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({
@@ -998,164 +1041,133 @@ export const ${name} = ${name}Scope.entities;
         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;
+        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`);
         }
-    };
-    /**
-     * 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;
+        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));
         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);
+            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);
+            // 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`);
             }
-            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];
+            const newScopeFile = await readFile(newScopeFilePath);
+            if (!newScopeFile) {
+                throw new Error(`New scope file ${newScopeFilePath} not found`);
             }
-        });
-        // 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];
+            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}`);
             }
-        });
-        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
+            // 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];
+                }
+            });
+        }
+        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,
+                            },
+                        },
+                        scopeId: oldScope.id,
+                        pageName: oldName,
+                    };
+                    delete this.apiFiles[key];
+                }
+            });
             await fs.rm(newPageFolder, { recursive: true }).catch((error) => {
-                getLogger().warn(`Failed to delete new page folder ${newPageFolder} during rollback. Error: ${error}`);
+                getLogger().warn(`Failed to delete new page folder ${newPageFolder}. Error: ${error}`);
             });
-            const oldScopeFile = await readFile(oldScopeFilePath).catch(() => null);
+            const oldScopeFile = await readFile(oldScopeFilePath);
             if (oldScopeFile) {
                 await this.handleNonVisualChangeByDeletingIds(oldScopeFilePath, oldScopeFile);
             }
-            const oldIndexFile = await readFile(oldIndexFilePath).catch(() => null);
+            const oldIndexFile = await readFile(oldIndexFilePath);
             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));
+            getLogger().error("Error renaming page", getErrorMeta(error));
+            throw error;
         }
-    }
+        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);
+    };
     getRelativeRoutePath(filePath) {
         if (!this.rootDir) {
             throw new Error("Root directory not set");