@base44/vite-plugin 0.2.21 → 0.2.23

package/src/jsx-processor.ts

@@ -0,0 +1,147 @@
+import type { NodePath } from "@babel/traverse";
+import type * as t from "@babel/types";
+import { StaticArrayProcessor } from "./processors/static-array-processor.js";
+
+export class JSXProcessor {
+  private staticArrayProcessor: StaticArrayProcessor;
+
+  constructor(
+    private types: typeof t,
+    private filename: string
+  ) {
+    this.staticArrayProcessor = new StaticArrayProcessor(types);
+  }
+
+  processJSXElement(path: NodePath<t.JSXOpeningElement>): void {
+    if (this.hasAttribute(path, "data-source-location")) return;
+
+    this.addSourceLocationAttribute(path);
+    this.addDynamicContentAttribute(path);
+    this.addContentEditableAttribute(path);
+    this.staticArrayProcessor.process(path);
+  }
+
+  private addSourceLocationAttribute(
+    path: NodePath<t.JSXOpeningElement>
+  ): void {
+    const { line, column } = path.node.loc?.start || { line: 1, column: 0 };
+    const value = `${this.filename}:${line}:${column}`;
+
+    path.node.attributes.push(
+      this.types.jsxAttribute(
+        this.types.jsxIdentifier("data-source-location"),
+        this.types.stringLiteral(value)
+      )
+    );
+  }
+
+  private addDynamicContentAttribute(
+    path: NodePath<t.JSXOpeningElement>
+  ): void {
+    const parentElement = path.parentPath;
+    if (!parentElement?.isJSXElement()) return;
+
+    const isDynamic = this.checkIfElementHasDynamicContent(
+      parentElement.node as t.JSXElement
+    );
+
+    path.node.attributes.push(
+      this.types.jsxAttribute(
+        this.types.jsxIdentifier("data-dynamic-content"),
+        this.types.stringLiteral(isDynamic ? "true" : "false")
+      )
+    );
+  }
+
+  private addContentEditableAttribute(
+    path: NodePath<t.JSXOpeningElement>
+  ): void {
+    path.node.attributes.push(
+      this.types.jsxAttribute(
+        this.types.jsxIdentifier("content-editable"),
+        this.types.stringLiteral("true")
+      )
+    );
+  }
+
+  private hasAttribute(
+    path: NodePath<t.JSXOpeningElement>,
+    name: string
+  ): boolean {
+    return path.node.attributes.some(
+      (attr: t.JSXAttribute | t.JSXSpreadAttribute) =>
+        this.types.isJSXAttribute(attr) &&
+        this.types.isJSXIdentifier(attr.name) &&
+        attr.name.name === name
+    );
+  }
+
+  private checkIfElementHasDynamicContent(jsxElement: t.JSXElement): boolean {
+    let hasDynamicContent = false;
+
+    const checkNode = (node: t.Node): boolean => {
+      if (this.types.isJSXExpressionContainer(node)) {
+        const expression = (node as t.JSXExpressionContainer).expression;
+        if (this.types.isJSXEmptyExpression(expression)) return false;
+        if (!this.types.isLiteral(expression)) return true;
+      }
+
+      if (
+        this.types.isTemplateLiteral(node) &&
+        (node as t.TemplateLiteral).expressions.length > 0
+      ) {
+        return true;
+      }
+      if (this.types.isMemberExpression(node)) return true;
+      if (this.types.isCallExpression(node)) return true;
+      if (this.types.isConditionalExpression(node)) return true;
+
+      if (this.types.isIdentifier(node)) {
+        const dynamicNames = [
+          "props",
+          "state",
+          "data",
+          "item",
+          "value",
+          "text",
+          "content",
+        ];
+        if (dynamicNames.some((name) => (node as t.Identifier).name.includes(name))) {
+          return true;
+        }
+      }
+
+      return false;
+    };
+
+    const traverseNode = (node: Record<string, unknown>): void => {
+      if (hasDynamicContent) return;
+      if (checkNode(node as unknown as t.Node)) {
+        hasDynamicContent = true;
+        return;
+      }
+
+      for (const key of Object.keys(node)) {
+        if (hasDynamicContent) return;
+        const value = node[key];
+
+        if (Array.isArray(value)) {
+          for (const child of value) {
+            if (child && typeof child === "object" && "type" in child) {
+              traverseNode(child as Record<string, unknown>);
+            }
+          }
+        } else if (value && typeof value === "object" && "type" in value) {
+          traverseNode(value as Record<string, unknown>);
+        }
+      }
+    };
+
+    for (const child of jsxElement.children) {
+      if (hasDynamicContent) break;
+      traverseNode(child as unknown as Record<string, unknown>);
+    }
+
+    return hasDynamicContent;
+  }
+}

package/src/jsx-utils.ts

@@ -0,0 +1,15 @@
+import type * as t from "@babel/types";
+
+export class JSXUtils {
+  private static types: typeof t;
+
+  static init(types: typeof t) {
+    this.types = types;
+  }
+
+  static getAttributeName(attr: t.JSXAttribute): string {
+    return this.types.isJSXNamespacedName(attr.name)
+      ? `${attr.name.namespace.name}:${attr.name.name.name}`
+      : attr.name.name;
+  }
+}

package/src/processors/shared-utils.ts

@@ -0,0 +1,116 @@
+import type { NodePath } from "@babel/traverse";
+import type * as t from "@babel/types";
+import { JSXUtils } from "../jsx-utils.js";
+
+export class JSXAttributeUtils {
+  constructor(private types: typeof t) {}
+
+  hasAttribute(
+    path: NodePath<t.JSXOpeningElement>,
+    attributeName: string
+  ): boolean {
+    return path.node.attributes.some(
+      (attr: t.JSXAttribute | t.JSXSpreadAttribute) =>
+        this.types.isJSXAttribute(attr) &&
+        JSXUtils.getAttributeName(attr) === attributeName
+    );
+  }
+
+  addStringAttribute(
+    path: NodePath<t.JSXOpeningElement>,
+    attributeName: string,
+    value: string
+  ): void {
+    if (!this.hasAttribute(path, attributeName)) {
+      path.node.attributes.push(
+        this.types.jsxAttribute(
+          this.types.jsxIdentifier(attributeName),
+          this.types.stringLiteral(value)
+        )
+      );
+    }
+  }
+
+  addExpressionAttribute(
+    path: NodePath<t.JSXOpeningElement>,
+    attributeName: string,
+    expression: t.Expression
+  ): void {
+    if (!this.hasAttribute(path, attributeName)) {
+      path.node.attributes.push(
+        this.types.jsxAttribute(
+          this.types.jsxIdentifier(attributeName),
+          this.types.jsxExpressionContainer(expression)
+        )
+      );
+    }
+  }
+}
+
+export class StaticValueUtils {
+  constructor(private types: typeof t) {}
+
+  isPrimitiveLiteral(path: NodePath<t.Node>): boolean {
+    return (
+      path.isStringLiteral() ||
+      path.isNumericLiteral() ||
+      path.isBooleanLiteral() ||
+      path.isNullLiteral()
+    );
+  }
+
+  isStaticValue(
+    path: NodePath<t.Node>,
+    visited: Set<string> = new Set()
+  ): boolean {
+    if (this.isPrimitiveLiteral(path)) return true;
+    if (path.isIdentifier()) return this.isStaticIdentifier(path, visited);
+    if (path.isObjectExpression()) return this.isStaticObject(path, visited);
+    if (path.isArrayExpression())
+      return this.isStaticArrayExpression(path, visited);
+    return false;
+  }
+
+  isStaticIdentifier(
+    path: NodePath<t.Identifier>,
+    visited: Set<string> = new Set()
+  ): boolean {
+    const binding = path.scope.getBinding(path.node.name);
+    if (!binding) return false;
+
+    if (binding.kind === "module") return true;
+
+    if (binding.kind === "const" && binding.path.isVariableDeclarator()) {
+      const name = path.node.name;
+      if (visited.has(name)) return false;
+      visited.add(name);
+
+      const init = binding.path.get("init");
+      if (init.hasNode()) {
+        return this.isStaticValue(init as NodePath<t.Node>, visited);
+      }
+    }
+
+    return false;
+  }
+
+  isStaticObject(
+    path: NodePath<t.ObjectExpression>,
+    visited: Set<string> = new Set()
+  ): boolean {
+    return path.get("properties").every((prop: NodePath) => {
+      if (!prop.isObjectProperty()) return false;
+      return this.isStaticValue(prop.get("value") as NodePath<t.Node>, visited);
+    });
+  }
+
+  isStaticArrayExpression(
+    arrayExpression: NodePath<t.ArrayExpression>,
+    visited: Set<string> = new Set()
+  ): boolean {
+    return arrayExpression.get("elements").every((element) => {
+      if (!element.node || element.isSpreadElement()) return true;
+      return this.isStaticValue(element as unknown as NodePath<t.Node>, visited);
+    });
+  }
+}

package/src/processors/static-array-processor.ts

@@ -0,0 +1,257 @@
+import type { NodePath } from "@babel/traverse";
+import type * as t from "@babel/types";
+import { JSXAttributeUtils, StaticValueUtils } from "./shared-utils.js";
+
+export const DATA_ARR_INDEX = "data-arr-index";
+export const DATA_ARR_VARIABLE_NAME = "data-arr-variable-name";
+export const DATA_ARR_FIELD = "data-arr-field";
+const GENERATED_INDEX_PARAM = "__arrIdx__";
+
+interface ArrayMapInfo {
+  arrayExpression: NodePath<t.Expression>;
+  callbackParam: string;
+  indexParam: string | null;
+  arrayVariableName: string | null;
+  mapCallPath: NodePath<t.CallExpression>;
+}
+
+export class StaticArrayProcessor {
+  private attributeUtils: JSXAttributeUtils;
+  private staticValueUtils: StaticValueUtils;
+
+  constructor(private types: typeof t) {
+    this.attributeUtils = new JSXAttributeUtils(types);
+    this.staticValueUtils = new StaticValueUtils(types);
+  }
+
+  process(path: NodePath<t.JSXOpeningElement>): void {
+    const arrayInfo = this.findParentArrayMap(path);
+    if (!arrayInfo) return;
+
+    if (!this.isStaticArray(arrayInfo.arrayExpression)) return;
+
+    const indexIdentifier = this.ensureIndexParam(arrayInfo);
+    this.addDataAttributes(path, arrayInfo, indexIdentifier);
+  }
+
+  private addDataAttributes(
+    path: NodePath<t.JSXOpeningElement>,
+    arrayInfo: ArrayMapInfo,
+    indexIdentifier: string
+  ): void {
+    this.attributeUtils.addExpressionAttribute(
+      path,
+      DATA_ARR_INDEX,
+      this.types.identifier(indexIdentifier)
+    );
+
+    if (arrayInfo.arrayVariableName) {
+      this.attributeUtils.addStringAttribute(
+        path,
+        DATA_ARR_VARIABLE_NAME,
+        arrayInfo.arrayVariableName
+      );
+    }
+
+    const fieldPath = this.findTextContentFieldPath(
+      path,
+      arrayInfo.callbackParam
+    );
+    if (fieldPath) {
+      this.attributeUtils.addStringAttribute(path, DATA_ARR_FIELD, fieldPath);
+    }
+  }
+
+  private findTextContentFieldPath(
+    path: NodePath<t.JSXOpeningElement>,
+    callbackParam: string
+  ): string | null {
+    const parentElement = path.parentPath;
+    if (!parentElement?.isJSXElement()) return null;
+
+    for (const child of parentElement.get("children")) {
+      const fieldPath = this.extractFieldPathFromChild(child, callbackParam);
+      if (fieldPath) return fieldPath;
+    }
+
+    return null;
+  }
+
+  private extractFieldPathFromChild(
+    child: NodePath<t.JSXElement["children"][number]>,
+    callbackParam: string
+  ): string | null {
+    if (!child.isJSXExpressionContainer()) return null;
+
+    const expression = child.get("expression");
+    if (!expression.isMemberExpression()) return null;
+
+    return this.extractFieldPath(expression, callbackParam);
+  }
+
+  private extractFieldPath(
+    expr: NodePath<t.MemberExpression>,
+    callbackParam: string
+  ): string | null {
+    const parts = this.collectMemberExpressionParts(expr);
+    if (!parts) return null;
+
+    const { rootName, propertyNames } = parts;
+    return rootName === callbackParam ? propertyNames.join(".") : null;
+  }
+
+  private collectMemberExpressionParts(
+    expr: NodePath<t.MemberExpression>
+  ): { rootName: string; propertyNames: string[] } | null {
+    const propertyNames: string[] = [];
+    let current: NodePath<t.Expression> = expr;
+
+    while (current.isMemberExpression()) {
+      const property = current.get("property");
+      if (!property.isIdentifier()) return null;
+
+      propertyNames.unshift(property.node.name);
+      current = current.get("object") as NodePath<t.Expression>;
+    }
+
+    if (!current.isIdentifier()) return null;
+
+    return { rootName: current.node.name, propertyNames };
+  }
+
+  private ensureIndexParam(arrayInfo: ArrayMapInfo): string {
+    if (arrayInfo.indexParam) {
+      return arrayInfo.indexParam;
+    }
+
+    this.addIndexParamToCallback(arrayInfo.mapCallPath);
+    return GENERATED_INDEX_PARAM;
+  }
+
+  private addIndexParamToCallback(
+    mapCallPath: NodePath<t.CallExpression>
+  ): void {
+    const callback = this.getMapCallback(mapCallPath);
+    if (!callback) return;
+
+    const params = callback.get("params");
+    if (params.length === 1) {
+      callback.node.params.push(this.types.identifier(GENERATED_INDEX_PARAM));
+    }
+  }
+
+  private getMapCallback(
+    mapCallPath: NodePath<t.CallExpression>
+  ): NodePath<t.Function> | null {
+    const args = mapCallPath.get("arguments");
+    const firstArg = args[0];
+    if (firstArg && firstArg.isFunction()) {
+      return firstArg as NodePath<t.Function>;
+    }
+    return null;
+  }
+
+  private findParentArrayMap(
+    path: NodePath<t.JSXOpeningElement>,
+    maxDepth: number = 5
+  ): ArrayMapInfo | null {
+    let currentPath: NodePath = path;
+    let depth = 0;
+
+    while (currentPath.parentPath && depth < maxDepth) {
+      const mapInfo = this.tryExtractMapInfo(currentPath.parentPath);
+      if (mapInfo) return mapInfo;
+
+      currentPath = currentPath.parentPath;
+      depth++;
+    }
+
+    return null;
+  }
+
+  private tryExtractMapInfo(parent: NodePath): ArrayMapInfo | null {
+    if (!parent.isCallExpression()) return null;
+    if (!this.isMapCall(parent)) return null;
+
+    return this.extractArrayMapInfo(parent);
+  }
+
+  private isMapCall(callExpr: NodePath<t.CallExpression>): boolean {
+    const callee = callExpr.get("callee");
+    if (!callee.isMemberExpression()) return false;
+
+    const property = callee.get("property");
+    return property.isIdentifier() && property.node.name === "map";
+  }
+
+  private extractArrayMapInfo(
+    mapCall: NodePath<t.CallExpression>
+  ): ArrayMapInfo | null {
+    const callback = this.getMapCallback(mapCall);
+    if (!callback) return null;
+
+    const params = callback.get("params");
+    const firstParam = params[0];
+    if (!firstParam || !firstParam.isIdentifier()) return null;
+
+    const callee = mapCall.get("callee") as NodePath<t.MemberExpression>;
+    const arrayExpression = callee.get("object") as NodePath<t.Expression>;
+
+    return {
+      arrayExpression,
+      callbackParam: firstParam.node.name,
+      indexParam: this.extractIndexParam(params),
+      arrayVariableName: this.extractArrayVariableName(arrayExpression),
+      mapCallPath: mapCall,
+    };
+  }
+
+  private extractIndexParam(params: NodePath<t.Node>[]): string | null {
+    const secondParam = params[1];
+    return secondParam && secondParam.isIdentifier()
+      ? secondParam.node.name
+      : null;
+  }
+
+  private extractArrayVariableName(
+    arrayExpression: NodePath<t.Expression>
+  ): string | null {
+    return arrayExpression.isIdentifier() ? arrayExpression.node.name : null;
+  }
+
+  private isStaticArray(arrayExpression: NodePath<t.Expression>): boolean {
+    const arrayExpr = this.resolveArrayExpression(arrayExpression);
+    return arrayExpr ? this.isStaticArrayExpression(arrayExpr) : false;
+  }
+
+  private resolveArrayExpression(
+    expression: NodePath<t.Expression>
+  ): NodePath<t.ArrayExpression> | null {
+    if (expression.isArrayExpression()) {
+      return expression;
+    }
+
+    if (expression.isIdentifier()) {
+      return this.resolveIdentifierToArray(expression);
+    }
+
+    return null;
+  }
+
+  private resolveIdentifierToArray(
+    identifier: NodePath<t.Identifier>
+  ): NodePath<t.ArrayExpression> | null {
+    const binding = identifier.scope.getBinding(identifier.node.name);
+
+    if (!binding?.path.isVariableDeclarator()) return null;
+
+    const init = binding.path.get("init");
+    return init.isArrayExpression() ? init : null;
+  }
+
+  private isStaticArrayExpression(
+    arrayExpression: NodePath<t.ArrayExpression>
+  ): boolean {
+    return this.staticValueUtils.isStaticArrayExpression(arrayExpression);
+  }
+}