@superblocksteam/vite-plugin-file-sync 2.0.3-next.100

package/dist/source-tracker.js

@@ -0,0 +1,967 @@
+import path from "node:path";
+import { parse } from "@babel/parser";
+import t from "@babel/types";
+import { isPropertyInfo, Property, splitJSPath, splitJSPathAdvanced, } from "@superblocksteam/library-shared";
+import { SbEntityType, } from "@superblocksteam/library-shared/types";
+import { format } from "prettier";
+import { generateJSXAttribute, generateJSXElement, writeNestedProperty, } from "./codegen.js";
+import { ComponentsManager } from "./components-manager.js";
+import { SCOPE_FILE } from "./file-system-helpers.js";
+import { generate } from "./generate.js";
+import { generatePredictableId } from "./ids.js";
+import { generateElementId, getSbElementId, supplementElementIds, } from "./parsing/ids.js";
+import { REQUIRED_IMPORTS_BY_PROPERTY_TYPE } from "./parsing/imports.js";
+import { getDescriptiveName, getJSXAttributeName, getJSXAttributeType, getVariableReferences, isNamedComponent, } from "./parsing/jsx.js";
+import { updateThemeAst } from "./parsing/theme.js";
+import { getTagName, addImport, extractImportsFromAst, getImportPath, } from "./parsing/util.js";
+import { RenameManager } from "./rename-manager.js";
+import { SbScopeManager } from "./sb-scope-manager.js";
+import { getErrorMeta, getLogger } from "./util/logger.js";
+const GLOBAL_FUNCTION_NAMES = new Set([
+    "copyToClipboard",
+    "navigateTo",
+    "setQueryParams",
+    "download",
+    "showAlert",
+    "logoutIntegrations",
+]);
+const ATTRIBUTE_TYPES_WITH_STATE_ACCESS = ["COMPUTED", "TEMPLATE"];
+// File Explanation:
+// This file is responsible for tracking the source code of the application.
+// It parses the source code of the application and stores the ASTs of the files.
+// It also tracks the location of JSX elements in the source code.
+// This information is used by the source code editor to provide features like drag and drop and property editing.
+export class SourceTracker {
+    renameManager = new RenameManager();
+    sbScopeManager;
+    elementToLocation = {};
+    elementToFilePath = {};
+    scopeIdToFilePath = {};
+    sbScopeNamesToFilePath = {};
+    newlyAddedCount = 0;
+    fileToMeta = {};
+    changedFiles = new Set();
+    constructor() {
+        this.sbScopeManager = new SbScopeManager(this);
+    }
+    getCurrentFiles() {
+        return this.fileToMeta;
+    }
+    /**
+     * Retrieves and clears the changes made to files, returning them as a record of file
+     * names and their corresponding code.
+     * @returns A Record<string, string> object containing the file names as keys and their corresponding code as values.
+     */
+    getAndFlushChanges = async () => {
+        const files = Array.from(this.changedFiles);
+        this.changedFiles.clear();
+        return await Promise.all(files.map(async (file) => {
+            const meta = this.fileToMeta[file];
+            if (!meta)
+                throw new Error("No meta found for file " + file);
+            const code = generate(meta.ast).code;
+            const formattedCode = await format(code, {
+                parser: "typescript",
+            });
+            return { fileName: file, source: formattedCode, kind: "ts" };
+        }));
+    };
+    getElementToFilePath(el) {
+        if (el === undefined)
+            return this.elementToFilePath;
+        return this.elementToFilePath[el];
+    }
+    getElementToLocation(el) {
+        if (el === undefined)
+            return this.elementToLocation;
+        return this.elementToLocation[el];
+    }
+    setElementToLocation(el, path) {
+        this.elementToLocation[el] = path;
+    }
+    setElementToFilePath(el, filePath) {
+        this.elementToFilePath[el] = filePath;
+    }
+    deleteElementToLocation(el) {
+        delete this.elementToLocation[el];
+    }
+    deleteElementToFilePath(el) {
+        delete this.elementToFilePath[el];
+    }
+    getScopeDefinitionForPage(pageName) {
+        const { scopeDefinition } = this.sbScopeManager.getScopeDefinitionAndFilePathByNameOrId({
+            identifier: pageName,
+            type: "name",
+        });
+        return scopeDefinition;
+    }
+    parseJsxFromEntrypoint({ files, }) {
+        const parsedAsts = {};
+        for (const { fileName, code } of files) {
+            const isTsx = fileName.endsWith(".tsx");
+            const isTs = fileName.endsWith(".ts");
+            if (isTsx || isTs) {
+                try {
+                    parsedAsts[fileName] = parse(code, {
+                        sourceType: "module",
+                        sourceFilename: fileName,
+                        plugins: [["typescript", {}], "jsx"],
+                    });
+                }
+                catch (e) {
+                    getLogger().error(`Error parsing entry point: ${path.relative(process.cwd(), fileName)}`, getErrorMeta(e));
+                }
+            }
+        }
+        return parsedAsts;
+    }
+    initializeSourceTracker = ({ files }) => {
+        const fileContents = Object.entries(files).map(([fileName, code]) => ({
+            fileName,
+            code,
+        }));
+        const parsedAsts = this.parseJsxFromEntrypoint({
+            // entryPointFilePath: rootDir + "/pages/page1/_index.tsx",
+            files: fileContents,
+        });
+        this.fileToMeta = Object.fromEntries(Object.entries(parsedAsts).map(([file, ast]) => [
+            file,
+            {
+                code: fileContents.find((f) => f.fileName === file).code,
+                ast,
+                imports: extractImportsFromAst(ast),
+            },
+        ]));
+        this.sbScopeManager.parseScopes(this.fileToMeta);
+        Object.entries(parsedAsts).forEach(([file, ast]) => {
+            // scope files are handled by the sbScopeManager
+            if (!file.endsWith(SCOPE_FILE)) {
+                const { idMap } = supplementElementIds({
+                    fileName: file,
+                    ast,
+                    shouldModifyAst: false,
+                });
+                idMap.forEach((path, id) => {
+                    this.elementToLocation[id] = path;
+                    this.elementToFilePath[id] = file;
+                });
+            }
+        });
+    };
+    handleNonVisualChangeByDeletingIds = async (fileName, fileContents) => {
+        const extension = path.extname(fileName);
+        if (extension !== ".ts" && extension !== ".tsx")
+            return;
+        try {
+            const astMap = this.parseJsxFromEntrypoint({
+                files: [{ fileName, code: fileContents }],
+            });
+            const ast = astMap[fileName];
+            if (!ast) {
+                throw new Error("Failed to parse file " + fileName);
+            }
+            this.fileToMeta[fileName] = {
+                ast: ast,
+                code: fileContents,
+                imports: extractImportsFromAst(ast),
+            };
+            // delete all existing elements from the ast cache
+            Object.entries(this.elementToLocation)
+                .filter(([id]) => {
+                const filePath = this.getElementToFilePath(id);
+                if (!filePath)
+                    return false;
+                return filePath.startsWith(fileName);
+            })
+                .forEach(([key]) => {
+                delete this.elementToLocation[key];
+                delete this.elementToFilePath[key];
+            });
+            const changedFiles = this.sbScopeManager.resetScope(fileName);
+            // scope file is handled by the sbScopeManager
+            if (!fileName.endsWith(SCOPE_FILE)) {
+                const { idMap } = supplementElementIds({
+                    fileName,
+                    ast,
+                    shouldModifyAst: false,
+                });
+                idMap.forEach((path, id) => {
+                    this.elementToLocation[id] = path;
+                    this.elementToFilePath[id] = fileName;
+                });
+            }
+            changedFiles.forEach((file) => {
+                if (file !== fileName) {
+                    this.changedFiles.add(file);
+                }
+            });
+            // Mark the file as changed
+            this.changedFiles.add(fileName);
+        }
+        catch (e) {
+            getLogger().error("Non-visual change parsing error", getErrorMeta(e));
+            return;
+        }
+    };
+    removeFile = async (fileName) => {
+        delete this.fileToMeta[fileName];
+        // Clean up element mappings
+        Object.entries(this.elementToFilePath).forEach(([id, path]) => {
+            if (path === fileName) {
+                delete this.elementToLocation[id];
+                delete this.elementToFilePath[id];
+            }
+        });
+        // Clean up sb scope mappings
+        Object.entries(this.sbScopeNamesToFilePath).forEach(([scopeName, info]) => {
+            if (info.filePath === fileName) {
+                delete this.sbScopeNamesToFilePath[scopeName];
+            }
+        });
+        // Clean up scope ID mappings
+        Object.entries(this.scopeIdToFilePath).forEach(([scopeId, path]) => {
+            if (path === fileName) {
+                delete this.scopeIdToFilePath[scopeId];
+            }
+        });
+    };
+    moveElement = async ({ from, to, }) => {
+        let fromAstPath = this.getElementToLocation(from.source.id);
+        // if not jsxElement, then its a self closing element? (not sure if always) so get parent element
+        if (!fromAstPath.isJSXElement()) {
+            if (fromAstPath.parentPath == null ||
+                !fromAstPath.parentPath.isJSXElement()) {
+                throw new Error("UNEXPECTED D&D ELEMENT " + fromAstPath.toString());
+            }
+            fromAstPath = fromAstPath.parentPath;
+        }
+        let toAstPath = this.getElementToLocation(to.source.id);
+        // if not jsxElement, then its a self closing element? (not sure if always) so get parent element
+        if (!toAstPath.isJSXElement()) {
+            if (toAstPath.parentPath == null ||
+                !toAstPath.parentPath.isJSXElement()) {
+                throw new Error("UNEXPECTED D&D ELEMENT " + toAstPath.toString());
+            }
+            toAstPath = toAstPath.parentPath;
+        }
+        if (fromAstPath.node == null ||
+            fromAstPath.node == null ||
+            toAstPath.node == null ||
+            toAstPath.node == null) {
+            throw new Error("From/to AST nodes are missing");
+        }
+        const fromFilepath = this.getElementToFilePath(from.source.id);
+        if (!fromFilepath) {
+            getLogger().error(`Filepath not found for element ${from.source.id} ${fromAstPath}`);
+            throw new Error("Filepath not found for element " + from.source.id);
+        }
+        const toFilePath = this.getElementToFilePath(to.source.id);
+        if (!toFilePath) {
+            throw new Error("Filepath not found for element " + to.source.id);
+        }
+        const fromFileAst = this.fileToMeta[fromFilepath]?.ast;
+        if (!fromFileAst) {
+            throw new Error("File not found in source tracker " + fromFilepath);
+        }
+        try {
+            const toElement = toAstPath;
+            const fromNode = fromAstPath.node;
+            const { index = -1 } = to.source;
+            this.transformSelfClosingTagToRegularTag(toElement);
+            // Get the JSXElement children of the toElement
+            const elementChildren = toElement
+                .get("children")
+                .filter((child) => child.isJSXElement());
+            if (elementChildren[index] === fromAstPath) {
+                return;
+            }
+            // First remove the original node
+            // We need to do this first incase the parent element is the same
+            fromAstPath.remove();
+            let newAstPath = null;
+            if (index === 0) {
+                const [insertedPath] = toElement.unshiftContainer("children", fromNode);
+                newAstPath = insertedPath;
+            }
+            else if (index < 0 || index >= elementChildren.length) {
+                const [insertedPath] = toElement.pushContainer("children", fromNode);
+                newAstPath = insertedPath;
+            }
+            else {
+                const child = elementChildren[index];
+                if (!child)
+                    throw new Error("Child not found");
+                const [insertedPath] = child.insertBefore(fromNode);
+                newAstPath = insertedPath;
+            }
+            // We store JSXOpeningElement paths in the elementToLocation map
+            const newOpeningElement = newAstPath.get("openingElement");
+            if (Array.isArray(newOpeningElement)) {
+                throw new Error("Expected single opening element path");
+            }
+            this.elementToLocation[from.source.id] = newOpeningElement;
+            this.changedFiles.add(fromFilepath);
+        }
+        catch (e) {
+            getLogger().error("Error updating source tracker during move", getErrorMeta(e));
+            throw new Error("Error updating source tracker during move" + e.message);
+        }
+    };
+    addApi = async ({ pageName, apiName, }) => {
+        const { scopeDefinition, filePath: scopeFilePath } = this.sbScopeManager.getScopeDefinitionAndFilePathByNameOrId({
+            identifier: pageName,
+            type: "name",
+        });
+        if (!scopeDefinition || !scopeFilePath) {
+            throw new Error("Scope not found for page " + pageName);
+        }
+        const changedFiles = this.sbScopeManager.addScopeEntity(scopeDefinition.id, {
+            type: SbEntityType.API,
+            name: apiName,
+            attributes: {},
+        });
+        changedFiles.forEach((file) => {
+            this.changedFiles.add(file);
+        });
+        return scopeDefinition.id;
+    };
+    deleteApi = async ({ pageName, apiName, }) => {
+        const { scopeDefinition, filePath: scopeFilePath } = this.sbScopeManager.getScopeDefinitionAndFilePathByNameOrId({
+            identifier: pageName,
+            type: "name",
+        });
+        if (!scopeDefinition || !scopeFilePath) {
+            throw new Error("Scope not found for page " + pageName);
+        }
+        const entityId = scopeDefinition.scopeNameToEntityId[apiName];
+        if (!entityId) {
+            throw new Error("Entity ID not found for API " + apiName);
+        }
+        const { changedFiles } = this.sbScopeManager.deleteScopeEntity(entityId);
+        changedFiles.forEach((file) => {
+            this.changedFiles.add(file);
+        });
+        return scopeDefinition.id;
+    };
+    addEntity = async ({ scopeId, entity, }) => {
+        const changedFiles = this.sbScopeManager.addScopeEntity(scopeId, entity);
+        changedFiles.forEach((file) => {
+            this.changedFiles.add(file);
+        });
+    };
+    updateEntity = async (payload) => {
+        const changedFile = this.sbScopeManager.updateScopeEntity(payload);
+        this.changedFiles.add(changedFile);
+    };
+    deleteEntity = async ({ entityId }) => {
+        const { changedFiles, deletedEntitiesNames } = this.sbScopeManager.deleteScopeEntity(entityId);
+        changedFiles.forEach((file) => {
+            this.changedFiles.add(file);
+        });
+        return deletedEntitiesNames[0];
+    };
+    renameEntity = async ({ entityId, oldName, newName, scopeName, }) => {
+        const { changedFiles, scopeFile } = this.sbScopeManager.renameScopeEntity({
+            entityId,
+            newName,
+            oldName,
+        });
+        if (changedFiles.length === 0) {
+            console.warn("No changed files found for entity", entityId);
+            return;
+        }
+        changedFiles.forEach((file) => {
+            this.changedFiles.add(file);
+        });
+        if (!scopeFile) {
+            console.error("Could not find scope file for entity", entityId);
+            return;
+        }
+        this.changedFiles.add(scopeFile);
+        // For now, just look in the same folder as the scope file for renames
+        // in the future, we may need to look in other folders
+        const scopeFolder = path.dirname(scopeFile);
+        for (const filePath of Object.keys(this.fileToMeta)) {
+            if (filePath.startsWith(scopeFolder) && filePath.endsWith(".tsx")) {
+                this.renameIdentifier({
+                    oldName,
+                    newName,
+                    filePath,
+                    parentBinding: scopeName,
+                });
+            }
+        }
+    };
+    // THEMING
+    updateTheme = async ({ themeFilePath, theme, }) => {
+        const ast = this.getCurrentFiles()[themeFilePath]?.ast;
+        if (!ast) {
+            throw new Error("File not found in source tracker " + path);
+        }
+        updateThemeAst(ast, theme);
+        try {
+            this.changedFiles.add(themeFilePath);
+        }
+        catch (e) {
+            getLogger().error("Error generating updated theme file", getErrorMeta(e));
+            throw e;
+        }
+    };
+    addElement = async ({ parentElement, tagName, properties, children, id, scopeName, }) => {
+        const logger = getLogger();
+        const parentOpeningElementPath = this.getElementToLocation(parentElement.source.id);
+        const parentFilepath = this.getElementToFilePath(parentElement.source.id);
+        if (!parentOpeningElementPath || !parentFilepath) {
+            logger.error(`Element not found in source tracker ${parentElement.source.id} ${parentOpeningElementPath?.toString()}`);
+            throw new Error("Element not found in source tracker " + parentElement.source.id);
+        }
+        if (!parentOpeningElementPath.isJSXOpeningElement()) {
+            logger.error(`Parent element is not a JSX element ${parentOpeningElementPath.type} ${parentOpeningElementPath.toString()}`);
+            throw new Error("Parent element is not a JSX element");
+        }
+        const parentJSXElementPath = parentOpeningElementPath.parentPath;
+        if (!parentJSXElementPath?.isJSXElement()) {
+            logger.error(`Parent element is not a JSX element ${String(parentJSXElementPath)}`);
+            throw new Error("Parent element is not a JSX element");
+        }
+        try {
+            const childName = properties.name;
+            if (childName && scopeName) {
+                const { scopeDefinition, filePath: scopeFilePath } = this.sbScopeManager.getScopeDefinitionAndFilePathByNameOrId({
+                    identifier: scopeName,
+                    type: "name",
+                });
+                if (!scopeDefinition || !scopeFilePath) {
+                    console.log("No scope creation found for " + scopeName + " will not add a bind");
+                }
+                else {
+                    const { name: scopeExportName } = scopeDefinition;
+                    if (scopeFilePath !== parentFilepath) {
+                        // check if exportName is already imported into parentFilePath
+                        const parentFileImports = this.fileToMeta[parentFilepath]?.imports;
+                        if (!parentFileImports || !parentFileImports[scopeExportName]) {
+                            // add the import
+                            addImport({
+                                importPath: getImportPath(parentFilepath, scopeFilePath),
+                                importName: scopeExportName,
+                                path: parentOpeningElementPath,
+                                onAdd: () => {
+                                    this.fileToMeta[parentFilepath].imports[scopeExportName] =
+                                        true;
+                                },
+                            });
+                        }
+                    }
+                    const childNameValue = childName.value;
+                    const changedFiles = this.sbScopeManager.addScopeComponent(scopeName, childNameValue);
+                    changedFiles.forEach((file) => {
+                        this.changedFiles.add(file);
+                    });
+                    // if the scope file path is in the same page directory as this file, then we should destructure it
+                    if (path.dirname(scopeFilePath) === path.dirname(parentFilepath)) {
+                        this.sbScopeManager.addScopeDestructuringForComponent({
+                            elementLocation: parentJSXElementPath,
+                            scopeName,
+                            componentFilePath: parentFilepath,
+                        });
+                        properties.bind = Property.Expression(`${childNameValue}`);
+                    }
+                    else {
+                        properties.bind = Property.Expression(`${scopeExportName}.${childNameValue}`);
+                    }
+                    delete properties.name;
+                }
+            }
+            const newElement = generateJSXElement({
+                id,
+                tagName,
+                properties,
+                children,
+            });
+            this.transformSelfClosingTagToRegularTag(parentJSXElementPath);
+            const { index = -1 } = parentElement.source;
+            const elementChildren = parentJSXElementPath
+                .get("children")
+                .filter((child) => child.isJSXElement());
+            let results = null;
+            if (index === 0) {
+                results = parentJSXElementPath.unshiftContainer("children", newElement);
+            }
+            else if (index < 0 || index >= elementChildren.length) {
+                results = parentJSXElementPath.pushContainer("children", newElement);
+            }
+            else {
+                const child = elementChildren[index];
+                if (!child)
+                    throw new Error("Child element not found");
+                results = child.insertBefore(newElement);
+            }
+            if (!Array.isArray(results)) {
+                throw new Error("Failed to add element to parent");
+            }
+            // You can traverse subpaths like this: https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#paths-in-visitors
+            let sourceId;
+            results[0]?.traverse({
+                JSXOpeningElement: (path) => {
+                    if (path.node.name.type !== "JSXIdentifier")
+                        return;
+                    const tagName = getTagName(path.node.name);
+                    if (!tagName)
+                        return;
+                    this.newlyAddedCount++;
+                    const id = getSbElementId(path.node) ??
+                        `SB-${generatePredictableId(parentFilepath + this.newlyAddedCount)}`;
+                    path.node.extra ??= {};
+                    path.node.extra.sbElementId = id;
+                    this.elementToLocation[id] = path;
+                    this.elementToFilePath[id] = parentFilepath;
+                    sourceId = id;
+                },
+            });
+            const manager = ComponentsManager.getInstance();
+            if (manager.isCustomComponent(tagName)) {
+                const importPath = manager.getComponentImportPath(tagName, process.cwd());
+                if (importPath) {
+                    addImport({
+                        path: parentOpeningElementPath,
+                        importName: tagName,
+                        importPath,
+                        isDefaultImport: true,
+                        onAdd: () => {
+                            this.fileToMeta[parentFilepath].imports[tagName] = true;
+                        },
+                    });
+                }
+            }
+            else {
+                addImport({
+                    path: parentOpeningElementPath,
+                    importName: tagName,
+                    importPath: "@superblocksteam/library",
+                    onAdd: () => {
+                        this.fileToMeta[parentFilepath].imports[tagName] = true;
+                    },
+                });
+            }
+            // We need to add the imports for the properties that are used in the new element
+            const requiredImports = this.getAddElementImports({
+                properties,
+                children,
+            });
+            requiredImports.forEach((importName) => {
+                addImport({
+                    path: parentOpeningElementPath,
+                    importName,
+                    importPath: "@superblocksteam/library",
+                    onAdd: () => {
+                        this.fileToMeta[parentFilepath].imports[importName] = true;
+                    },
+                });
+            });
+            this.changedFiles.add(parentFilepath);
+            return sourceId;
+        }
+        catch (e) {
+            getLogger().error("Error updating source tracker during add", getErrorMeta(e));
+            throw new Error("Error updating source tracker during add" + e.message);
+        }
+    };
+    deleteElement = async ({ source, scopeName, }) => {
+        const logger = getLogger();
+        let openingTag = this.getElementToLocation(source.id);
+        if (!openingTag) {
+            logger.error(`Element not found in source tracker ${source.id}`);
+            return;
+        }
+        if (openingTag.isJSXOpeningElement()) {
+            const parent = openingTag.parentPath;
+            if (parent?.isJSXElement()) {
+                openingTag = parent;
+            }
+            else {
+                logger.error(`JSXOpeningElement does not have a JSXElement parent ${source.id}`);
+                return;
+            }
+        }
+        else if (!openingTag.isJSXElement()) {
+            logger.error(`Cannot delete a non-JSX element ${source.id}`);
+            return;
+        }
+        const componentName = getDescriptiveName(openingTag.node);
+        const children = [];
+        openingTag.traverse({
+            JSXElement: (path) => {
+                const sbElementId = getSbElementId(path.get("openingElement").node);
+                const name = getDescriptiveName(path.node);
+                if (sbElementId) {
+                    children.push({ id: sbElementId, name });
+                }
+            },
+        });
+        const fileName = this.getElementToFilePath(source.id);
+        this.deleteSectionIfOnlyChild(openingTag);
+        // First delete the parent and remove it from the AST
+        delete this.elementToLocation[source.id];
+        delete this.elementToFilePath[source.id];
+        openingTag.remove();
+        if (scopeName && componentName) {
+            const changedFiles = this.sbScopeManager.deleteScopeComponent(scopeName, componentName);
+            changedFiles.forEach((file) => {
+                this.changedFiles.add(file);
+            });
+        }
+        // Then remove all traces of the children
+        children.forEach(({ id, name: childComponentName }) => {
+            if (childComponentName && scopeName) {
+                const changedFiles = this.sbScopeManager.deleteScopeComponent(scopeName, childComponentName);
+                changedFiles.forEach((file) => {
+                    this.changedFiles.add(file);
+                });
+            }
+            delete this.elementToLocation[id];
+            delete this.elementToFilePath[id];
+        });
+        this.changedFiles.add(fileName);
+    };
+    // If we're deleting the only SbColumn in an SbSection, remove the SbSection
+    deleteSectionIfOnlyChild = (openingTag) => {
+        const parentElement = openingTag.parentPath;
+        if (!parentElement)
+            return false;
+        const isSbColumn = getTagName(openingTag.node.openingElement.name) ===
+            "SbColumn";
+        const isOnlyChild = parentElement.isJSXElement() &&
+            parentElement.get("children").filter((child) => child.isJSXElement())
+                .length === 1;
+        const isParentSbSection = parentElement.isJSXElement() &&
+            getTagName(parentElement.node.openingElement.name) ===
+                "SbSection";
+        if (isSbColumn && isOnlyChild && isParentSbSection) {
+            const sectionId = getSbElementId(parentElement.get("openingElement").node);
+            if (sectionId) {
+                delete this.elementToLocation[sectionId];
+                delete this.elementToFilePath[sectionId];
+                parentElement.remove();
+            }
+        }
+    };
+    /**
+     * Set's a deeply nested property on a JSX attribute. For example, if you have an attribute that is
+     * an object like:
+     *   ```
+     *   columns={{
+     *     name: {
+     *       accessor: "name",
+     *     },
+     *   }}
+     *   ```
+     * And you want to update the `accessor` property, you can use this function to do so, passing a property path like
+     * `columns.name.accessor`, rather than the entire columns object.
+     */
+    setNestedAttribute = ({ openingTag, property, value, type, }) => {
+        const [parent, ...paths] = splitJSPathAdvanced(property, []);
+        let parentAttr = openingTag
+            .get("attributes")
+            .find((attr) => attr.isJSXAttribute() && attr.node.name.name === parent);
+        if (!parentAttr && parent) {
+            const newAttr = openingTag.pushContainer("attributes", [
+                t.jsxAttribute(t.jsxIdentifier(parent), t.jSXExpressionContainer(t.objectExpression([]))),
+            ]);
+            parentAttr = newAttr[0];
+        }
+        // why does this return an array of node paths, its super annoying
+        const expressionContainer = parentAttr?.get("value");
+        if (!expressionContainer ||
+            !expressionContainer.isJSXExpressionContainer()) {
+            throw new Error("Parent attribute value is not a JSXExpressionContainer");
+        }
+        const currentNode = expressionContainer.get("expression");
+        writeNestedProperty({
+            node: currentNode,
+            paths,
+            value,
+            type,
+        });
+    };
+    setAttribute = (openingTag, property, value, type) => {
+        const paths = splitJSPath(property);
+        if (Array.isArray(paths) && paths.length > 1) {
+            // Sometimes we want to set a nested attribute, like `columns.name.accessor`
+            this.setNestedAttribute({ openingTag, property, value, type });
+            return;
+        }
+        let attr = openingTag
+            .get("attributes")
+            .find((attr) => attr.isJSXAttribute() && attr.node.name.name === property);
+        if (!attr) {
+            attr = openingTag.pushContainer("attributes", [
+                t.jsxAttribute(t.jsxIdentifier(property), t.stringLiteral("")),
+            ])[0];
+        }
+        // TODO: move to proper prop typing for custom components, but for now we just try to coerce
+        // values 🤷
+        if (getTagName(openingTag.node.name) === "SbCustom") {
+            const expressionType = getJSXAttributeType(attr.node);
+            switch (expressionType) {
+                case "string":
+                    value = value.toString();
+                    break;
+                case "number":
+                    value = Number(value);
+                    break;
+                case "boolean":
+                    value = Boolean(value);
+                    break;
+            }
+        }
+        // We currently delete attributes that are undefined or set to an empty string
+        if (value === undefined || (typeof value === "string" && value === "")) {
+            attr.remove();
+            return;
+        }
+        const attrName = getJSXAttributeName(attr.node);
+        if (attrName === null) {
+            throw new Error("Attribute name not found");
+        }
+        const attrValue = attr.get("value");
+        const jsxAttribute = generateJSXAttribute(property, Property.Any(value, type));
+        if (jsxAttribute.value) {
+            attrValue.replaceWith(jsxAttribute.value);
+        }
+        return jsxAttribute;
+    };
+    deleteAttribute = (openingTag, property) => {
+        const attr = openingTag
+            .get("attributes")
+            .find((attr) => attr.isJSXAttribute() && attr.node.name.name === property);
+        attr?.remove();
+    };
+    transformSelfClosingTagToRegularTag = (element) => {
+        const openingElement = element.get("openingElement");
+        if (openingElement.node.selfClosing) {
+            openingElement.node.selfClosing = false;
+            element.node.closingElement = t.jsxClosingElement(t.jsxIdentifier(getTagName(openingElement.node.name) ?? ""));
+        }
+    };
+    setProperty = async ({ source, property, value, type, }) => {
+        await this.setProperties({
+            source,
+            changes: { [property]: { value, type } },
+        });
+    };
+    setProperties = async ({ source, changes, }) => {
+        const logger = getLogger();
+        if (Object.keys(changes).length === 0)
+            return;
+        try {
+            let openingTag = this.getElementToLocation(source.id);
+            if (openingTag?.isJSXElement()) {
+                openingTag = openingTag.get("openingElement");
+            }
+            const fileName = this.getElementToFilePath(source.id);
+            if (!fileName) {
+                logger.error(`Filepath not found for element ${source.id} ${openingTag}`);
+                throw new Error(`Filepath not found for element ${source.id}`);
+            }
+            const currentFile = this.fileToMeta[fileName];
+            if (!currentFile || !openingTag) {
+                throw new Error(`Element ${source.id} not found in source tracker`);
+            }
+            if (!openingTag.isJSXOpeningElement()) {
+                throw new Error(`Element ${source.id} is not a JSXOpeningElement`);
+            }
+            // Iterate over the changes and set each attribute using the helper
+            for (const [key, { value, type }] of Object.entries(changes)) {
+                // TODO(code-mode): should we use property definitions to ensure writes are valid?
+                // For now we will just add the attribute to the element and write the update
+                const processedValue = value;
+                const jsxAttribute = this.setAttribute(openingTag, key, processedValue, type);
+                if (type in REQUIRED_IMPORTS_BY_PROPERTY_TYPE) {
+                    const requiredImports = REQUIRED_IMPORTS_BY_PROPERTY_TYPE[type];
+                    if (requiredImports) {
+                        for (const { importName, importPath } of requiredImports) {
+                            if (!this.fileToMeta[fileName].imports[importName]) {
+                                addImport({
+                                    importPath,
+                                    importName,
+                                    path: openingTag,
+                                    onAdd: () => {
+                                        this.fileToMeta[fileName].imports[importName] = true;
+                                    },
+                                });
+                            }
+                        }
+                    }
+                }
+                if (type === "EVENT" && jsxAttribute) {
+                    const referencedGlobalFunctions = getVariableReferences(jsxAttribute, GLOBAL_FUNCTION_NAMES);
+                    referencedGlobalFunctions.forEach((funcName) => {
+                        if (!this.fileToMeta[fileName].imports[funcName]) {
+                            addImport({
+                                importPath: "@superblocksteam/library",
+                                importName: funcName,
+                                path: openingTag,
+                                onAdd: () => {
+                                    this.fileToMeta[fileName].imports[funcName] = true;
+                                },
+                            });
+                        }
+                    });
+                }
+                if (ATTRIBUTE_TYPES_WITH_STATE_ACCESS.includes(type) && jsxAttribute) {
+                    const elementLocation = this.getElementToLocation(source.id);
+                    const scopeImports = this.sbScopeManager.getAndUpdateScopeImportsForCodeSnippet({
+                        jsxAttribute,
+                        codeFilePath: fileName,
+                        elementLocation,
+                        existingImports: this.fileToMeta[fileName].imports,
+                    });
+                    scopeImports.forEach(({ importPath, importName }) => {
+                        addImport({
+                            importPath,
+                            importName,
+                            path: openingTag,
+                            onAdd: () => {
+                                this.fileToMeta[fileName].imports[importName] = true;
+                            },
+                        });
+                    });
+                }
+            }
+            this.changedFiles.add(fileName);
+        }
+        catch (e) {
+            logger.error("Error setting property", getErrorMeta(e));
+        }
+    };
+    deleteProperties = async ({ source, properties, }) => {
+        const logger = getLogger();
+        try {
+            let openingTag = this.elementToLocation[source.id];
+            if (openingTag?.isJSXElement()) {
+                openingTag = openingTag.get("openingElement");
+            }
+            const fileName = this.getElementToFilePath(source.id);
+            if (!fileName) {
+                logger.error(`Filepath not found for element ${source.id} ${openingTag}`);
+                throw new Error(`Filepath not found for element ${source.id}`);
+            }
+            const currentFile = this.fileToMeta[fileName];
+            if (!currentFile || !openingTag) {
+                throw new Error(`Element ${source.id} not found in source tracker`);
+            }
+            if (!openingTag.isJSXOpeningElement()) {
+                throw new Error(`Element ${source.id} is not a JSXOpeningElement`);
+            }
+            for (const property of properties) {
+                this.deleteAttribute(openingTag, property);
+            }
+            this.changedFiles.add(fileName);
+        }
+        catch (e) {
+            logger.error("Error deleting properties", getErrorMeta(e));
+        }
+    };
+    renameComponent = async ({ widgetSourceId, newName, oldName, scopeName, }) => {
+        const filePath = this.getElementToFilePath(widgetSourceId);
+        const currentFile = this.fileToMeta[filePath];
+        if (!currentFile || !currentFile.ast) {
+            throw new Error(`File not found for element ${filePath}`);
+        }
+        let widgetNode = this.getElementToLocation(widgetSourceId);
+        if (!widgetNode) {
+            throw new Error(`Widget ${widgetSourceId} not found`);
+        }
+        if (widgetNode?.isJSXElement()) {
+            widgetNode = widgetNode.get("openingElement");
+        }
+        const hasNameAttribute = isNamedComponent(widgetNode.node);
+        if (scopeName) {
+            const changedFiles = this.sbScopeManager.renameScopeComponent({
+                oldName: hasNameAttribute ? oldName : undefined,
+                newName,
+                scopeName,
+            });
+            changedFiles.forEach((file) => {
+                this.changedFiles.add(file);
+            });
+        }
+        await this.renameManager.renameComponent({
+            widgetNode: widgetNode,
+            newName,
+            ast: currentFile.ast,
+        });
+        this.changedFiles.add(filePath);
+    };
+    renameIdentifier = ({ oldName, newName, filePath, parentBinding, }) => {
+        const currentFile = this.fileToMeta[filePath];
+        if (!currentFile || !currentFile.ast) {
+            throw new Error(`File not found for element ${filePath}`);
+        }
+        this.renameManager.renameIdentifierInAST({
+            oldName,
+            newName,
+            ast: currentFile.ast,
+            parentBinding,
+        });
+        this.changedFiles.add(filePath);
+    };
+    /**
+     * Change the name of the page element within a page file. Note: this does not actually
+     * rename the page file, but only the name of the page element, you have to perform the
+     * file system operation separately.
+     */
+    renamePage = async ({ newName, filePath, }) => {
+        const currentFile = this.fileToMeta[filePath];
+        if (!currentFile || !currentFile.ast) {
+            throw new Error(`File not found for element ${filePath}`);
+        }
+        const widgetSourceId = generateElementId(filePath, ["SbPage"], 0);
+        const pageElement = this.getElementToLocation(widgetSourceId);
+        if (!pageElement) {
+            throw new Error(`Page element not found for ${widgetSourceId}`);
+        }
+        const attributes = pageElement.get("attributes");
+        const attribute = attributes?.find((attr) => attr.isJSXAttribute() && attr.node.name.name === "name");
+        attribute?.replaceWith(t.jsxAttribute(t.jsxIdentifier("name"), t.stringLiteral(newName)));
+        this.changedFiles.add(filePath);
+    };
+    getAddElementImports = ({ properties, children, }) => {
+        const getPropertyImports = (properties) => {
+            return Object.values(properties)
+                .flatMap((property) => {
+                if (property.type === "EVENT") {
+                    return "SbEventFlow";
+                }
+                if (property.type === "DIMENSION") {
+                    return "Dim";
+                }
+                if (property.type === "BINDING") {
+                    return "SB";
+                }
+                if (property.type === "STATIC" &&
+                    typeof property.value === "object" &&
+                    property.value != null) {
+                    // Object.entries works on arrays as well, so we dont need to special case them for just finding property values
+                    const staticProperties = Object.fromEntries(Object.entries(property.value).filter(([_, value]) => isPropertyInfo(value)));
+                    return getPropertyImports(staticProperties);
+                }
+                return null;
+            })
+                .filter(Boolean);
+        };
+        const getComponentImports = (children) => {
+            return children.flatMap((child) => {
+                return [
+                    child.tagName,
+                    ...getPropertyImports(child.properties),
+                    ...getComponentImports(child.children),
+                ];
+            });
+        };
+        const requiredPropertyImports = getPropertyImports(properties);
+        const requiredComponentImports = getComponentImports(children);
+        return Array.from(new Set([...requiredPropertyImports, ...requiredComponentImports]));
+    };
+}
+//# sourceMappingURL=source-tracker.js.map