@kithinji/pod 1.0.0

package/src/plugins/transformers/j2d.ts

@@ -0,0 +1,1014 @@
+import type { PluginObj, NodePath } from "@babel/core";
+import * as BabelTypes from "@babel/types";
+
+interface PluginContext {
+  types: typeof BabelTypes;
+}
+
+interface PluginState {
+  helpersImported?: boolean;
+}
+
+interface TransformContext {
+  observables: Map<string, BabelTypes.Expression>;
+  observableSignals: Map<string, BabelTypes.Identifier>;
+}
+
+interface TransformResult {
+  id: BabelTypes.Identifier;
+  statements: BabelTypes.Statement[];
+}
+
+class NodeTypeGuards {
+  constructor(private t: typeof BabelTypes) {}
+
+  isSignalMember(expr: BabelTypes.Node): expr is BabelTypes.MemberExpression {
+    return (
+      this.t.isMemberExpression(expr) &&
+      this.t.isIdentifier(expr.property, { name: "value" })
+    );
+  }
+
+  isObservableMember(
+    expr: BabelTypes.Node
+  ): expr is BabelTypes.MemberExpression {
+    return (
+      this.t.isMemberExpression(expr) &&
+      this.t.isIdentifier(expr.property, { name: "$value" })
+    );
+  }
+}
+
+class ASTUtilities {
+  constructor(private t: typeof BabelTypes, private guards: NodeTypeGuards) {}
+
+  getObject(expr: BabelTypes.Expression): BabelTypes.Expression {
+    if (
+      this.guards.isSignalMember(expr) ||
+      this.guards.isObservableMember(expr)
+    ) {
+      return expr.object as BabelTypes.Expression;
+    }
+    return expr;
+  }
+
+  replaceThisWithSelf<T extends BabelTypes.Node>(node: T): T {
+    const cloned = this.t.cloneNode(node, true) as T;
+    this.walkAndTransform(cloned, (n: any) => {
+      if (this.t.isThisExpression(n)) {
+        Object.assign(n, this.t.identifier("self"));
+      }
+    });
+    return cloned;
+  }
+
+  private walkAndTransform(node: any, transform: (node: any) => void): void {
+    if (!node || typeof node !== "object") return;
+
+    transform(node);
+
+    for (const key in node) {
+      if (this.shouldSkipKey(key)) continue;
+
+      const value = node[key];
+      if (Array.isArray(value)) {
+        value.forEach((item) => this.walkAndTransform(item, transform));
+      } else if (value && typeof value === "object") {
+        this.walkAndTransform(value, transform);
+      }
+    }
+  }
+
+  private shouldSkipKey(key: string): boolean {
+    return ["loc", "start", "end", "extra"].includes(key);
+  }
+
+  buildMemberExpression(name: string): BabelTypes.Expression {
+    const parts = name.split(".");
+    let expr: BabelTypes.Expression = this.t.identifier(parts[0]);
+    for (let i = 1; i < parts.length; i++) {
+      expr = this.t.memberExpression(expr, this.t.identifier(parts[i]));
+    }
+    return expr;
+  }
+
+  insertBeforeReturn(
+    body: BabelTypes.Statement[],
+    statements: BabelTypes.Statement[]
+  ): void {
+    const returnIndex = body.findIndex((stmt) =>
+      this.t.isReturnStatement(stmt)
+    );
+    if (returnIndex !== -1) {
+      body.splice(returnIndex, 0, ...statements);
+    } else {
+      body.push(...statements);
+    }
+  }
+}
+
+class JSXUtilities {
+  constructor(private t: typeof BabelTypes) {}
+
+  getComponentName(
+    nameNode:
+      | BabelTypes.JSXIdentifier
+      | BabelTypes.JSXMemberExpression
+      | BabelTypes.JSXNamespacedName
+  ): string | null {
+    if (this.t.isJSXIdentifier(nameNode)) {
+      return nameNode.name;
+    }
+
+    if (this.t.isJSXMemberExpression(nameNode)) {
+      const parts: string[] = [];
+      let current: BabelTypes.JSXMemberExpression | BabelTypes.JSXIdentifier =
+        nameNode;
+
+      while (this.t.isJSXMemberExpression(current)) {
+        parts.unshift(current.property.name);
+        current = current.object;
+      }
+
+      if (this.t.isJSXIdentifier(current)) {
+        parts.unshift(current.name);
+      }
+
+      return parts.join(".");
+    }
+
+    return null;
+  }
+
+  isComponentTag(tag: string | null): boolean {
+    return tag ? /^[A-Z]/.test(tag) : false;
+  }
+}
+
+class ObservableManager {
+  constructor(private t: typeof BabelTypes, private guards: NodeTypeGuards) {}
+
+  getObservableKey(expr: BabelTypes.Node): string {
+    return this.stringifyNode(expr);
+  }
+
+  private stringifyNode(node: any): string {
+    if (!node) return "";
+    if (this.t.isThisExpression(node)) return "this";
+    if (this.t.isIdentifier(node)) return node.name;
+
+    if (this.t.isMemberExpression(node)) {
+      const obj = this.stringifyNode(node.object);
+      const prop = node.computed
+        ? `[${this.stringifyNode(node.property)}]`
+        : `.${(node.property as BabelTypes.Identifier).name}`;
+      return obj + prop;
+    }
+
+    if (this.t.isCallExpression(node)) {
+      const callee = this.stringifyNode(node.callee);
+      const args = node.arguments
+        .map((arg) => this.stringifyNode(arg))
+        .join(",");
+      return `${callee}(${args})`;
+    }
+
+    if (this.t.isStringLiteral(node)) return `"${node.value}"`;
+    if (this.t.isNumericLiteral(node)) return String(node.value);
+
+    return node.type + JSON.stringify(node.name || node.value || "");
+  }
+
+  collectObservables(
+    node: BabelTypes.Node,
+    observables: Map<string, BabelTypes.Expression>,
+    astUtils: ASTUtilities
+  ): void {
+    this.walkNode(node, (n: any) => {
+      if (this.guards.isObservableMember(n)) {
+        const observable = astUtils.replaceThisWithSelf(
+          n.object as BabelTypes.Expression
+        );
+        const key = this.getObservableKey(observable);
+        if (!observables.has(key)) {
+          observables.set(key, observable);
+        }
+      }
+    });
+  }
+
+  replaceObservablesWithSignals<T extends BabelTypes.Node>(
+    node: T,
+    observableSignals: Map<string, BabelTypes.Identifier>,
+    astUtils: ASTUtilities
+  ): T {
+    const cloned = this.t.cloneNode(node, true) as T;
+
+    this.walkNode(cloned, (n: any) => {
+      if (this.guards.isObservableMember(n)) {
+        const observable = astUtils.replaceThisWithSelf(n.object);
+        const key = this.getObservableKey(observable);
+        const signalId = observableSignals.get(key);
+
+        if (signalId) {
+          n.object = signalId;
+          n.property = this.t.identifier("value");
+        }
+      }
+    });
+
+    return cloned;
+  }
+
+  private walkNode(node: any, callback: (node: any) => void): void {
+    if (!node || typeof node !== "object") return;
+
+    callback(node);
+
+    for (const key in node) {
+      if (["loc", "start", "end", "extra"].includes(key)) continue;
+
+      const value = node[key];
+      if (Array.isArray(value)) {
+        value.forEach((item) => this.walkNode(item, callback));
+      } else if (value && typeof value === "object") {
+        this.walkNode(value, callback);
+      }
+    }
+  }
+}
+
+class ElementTransformer {
+  constructor(
+    private t: typeof BabelTypes,
+    private guards: NodeTypeGuards,
+    private astUtils: ASTUtilities,
+    private jsxUtils: JSXUtilities,
+    private observableManager: ObservableManager
+  ) {}
+
+  transformElement(
+    path: { node: BabelTypes.JSXElement | BabelTypes.JSXFragment },
+    scope: any,
+    context: TransformContext
+  ): TransformResult {
+    if (this.t.isJSXFragment(path.node)) {
+      return this.transformFragment(
+        path as { node: BabelTypes.JSXFragment },
+        scope,
+        context
+      );
+    }
+    return this.transformJSXElement(
+      path as { node: BabelTypes.JSXElement },
+      scope,
+      context
+    );
+  }
+
+  private transformJSXElement(
+    path: { node: BabelTypes.JSXElement },
+    scope: any,
+    context: TransformContext
+  ): TransformResult {
+    const jsxElement = path.node;
+    const tag = this.jsxUtils.getComponentName(jsxElement.openingElement.name);
+    const isComponent = this.jsxUtils.isComponentTag(tag);
+
+    if (isComponent && tag) {
+      return this.transformComponentElement(jsxElement, tag, scope, context);
+    } else if (tag) {
+      return this.transformDOMElement(jsxElement, tag, scope, context);
+    }
+
+    return {
+      id: scope.generateUidIdentifier("el"),
+      statements: [],
+    };
+  }
+
+  private transformComponentElement(
+    jsxElement: BabelTypes.JSXElement,
+    tag: string,
+    scope: any,
+    context: TransformContext
+  ): TransformResult {
+    const elId = scope.generateUidIdentifier("el");
+    const statements: BabelTypes.Statement[] = [];
+    const props: Array<
+      | BabelTypes.ObjectProperty
+      | BabelTypes.ObjectMethod
+      | BabelTypes.SpreadElement
+    > = [];
+    const children: Array<BabelTypes.Expression> = [];
+
+    this.processComponentAttributes(
+      jsxElement.openingElement.attributes,
+      props,
+      context
+    );
+
+    this.processChildren(
+      jsxElement.children,
+      children,
+      statements,
+      scope,
+      context
+    );
+
+    if (children.length > 0) {
+      props.push(
+        this.t.objectProperty(
+          this.t.identifier("children"),
+          children.length === 1 ? children[0] : this.t.arrayExpression(children)
+        )
+      );
+    }
+
+    statements.push(
+      this.t.variableDeclaration("var", [
+        this.t.variableDeclarator(
+          elId,
+          this.t.callExpression(this.t.identifier("$createComponent"), [
+            this.astUtils.buildMemberExpression(tag),
+            this.t.objectExpression(props),
+            this.t.identifier("self"),
+          ])
+        ),
+      ])
+    );
+
+    return { id: elId, statements };
+  }
+
+  private transformDOMElement(
+    jsxElement: BabelTypes.JSXElement,
+    tag: string,
+    scope: any,
+    context: TransformContext
+  ): TransformResult {
+    const elId = scope.generateUidIdentifier("el");
+    const statements: BabelTypes.Statement[] = [];
+
+    statements.push(
+      this.t.variableDeclaration("var", [
+        this.t.variableDeclarator(
+          elId,
+          this.t.callExpression(
+            this.t.memberExpression(
+              this.t.identifier("document"),
+              this.t.identifier("createElement")
+            ),
+            [this.t.stringLiteral(tag)]
+          )
+        ),
+      ])
+    );
+
+    const { hasRef, refValue, hasDangerousHTML, dangerousHTMLValue } =
+      this.processDOMAttributes(
+        jsxElement.openingElement.attributes,
+        elId,
+        statements,
+        context
+      );
+
+    if (hasRef && refValue) {
+      statements.push(
+        this.t.expressionStatement(
+          this.t.assignmentExpression("=", refValue as BabelTypes.LVal, elId)
+        )
+      );
+    }
+
+    if (hasDangerousHTML && dangerousHTMLValue) {
+      statements.push(
+        this.t.expressionStatement(
+          this.t.assignmentExpression(
+            "=",
+            this.t.memberExpression(elId, this.t.identifier("innerHTML")),
+            this.t.memberExpression(
+              dangerousHTMLValue,
+              this.t.identifier("__html")
+            )
+          )
+        )
+      );
+    }
+
+    if (!hasDangerousHTML) {
+      this.processDOMChildren(
+        jsxElement.children,
+        elId,
+        statements,
+        scope,
+        context
+      );
+    }
+
+    return { id: elId, statements };
+  }
+
+  private transformFragment(
+    path: { node: BabelTypes.JSXFragment },
+    scope: any,
+    context: TransformContext
+  ): TransformResult {
+    const fragId = scope.generateUidIdentifier("frag");
+    const statements: BabelTypes.Statement[] = [];
+
+    statements.push(
+      this.t.variableDeclaration("var", [
+        this.t.variableDeclarator(
+          fragId,
+          this.t.callExpression(
+            this.t.memberExpression(
+              this.t.identifier("document"),
+              this.t.identifier("createDocumentFragment")
+            ),
+            []
+          )
+        ),
+      ])
+    );
+
+    this.processDOMChildren(
+      path.node.children,
+      fragId,
+      statements,
+      scope,
+      context
+    );
+
+    return { id: fragId, statements };
+  }
+
+  private processComponentAttributes(
+    attributes: Array<BabelTypes.JSXAttribute | BabelTypes.JSXSpreadAttribute>,
+    props: Array<
+      | BabelTypes.ObjectProperty
+      | BabelTypes.ObjectMethod
+      | BabelTypes.SpreadElement
+    >,
+    context: TransformContext
+  ): void {
+    for (const attr of attributes) {
+      if (this.t.isJSXSpreadAttribute(attr)) {
+        this.observableManager.collectObservables(
+          attr.argument,
+          context.observables,
+          this.astUtils
+        );
+        const replaced = this.observableManager.replaceObservablesWithSignals(
+          attr.argument,
+          context.observableSignals,
+          this.astUtils
+        );
+        props.push(
+          this.t.spreadElement(this.astUtils.replaceThisWithSelf(replaced))
+        );
+        continue;
+      }
+
+      const key = (attr.name as BabelTypes.JSXIdentifier).name;
+
+      if (this.t.isStringLiteral(attr.value)) {
+        props.push(this.t.objectProperty(this.t.identifier(key), attr.value));
+      } else if (this.t.isJSXExpressionContainer(attr.value)) {
+        const expr = attr.value.expression as BabelTypes.Expression;
+        this.observableManager.collectObservables(
+          expr,
+          context.observables,
+          this.astUtils
+        );
+
+        if (
+          this.guards.isSignalMember(expr) ||
+          this.guards.isObservableMember(expr)
+        ) {
+          const replaced = this.observableManager.replaceObservablesWithSignals(
+            expr,
+            context.observableSignals,
+            this.astUtils
+          );
+          props.push(
+            this.t.objectMethod(
+              "get",
+              this.t.identifier(key),
+              [],
+              this.t.blockStatement([
+                this.t.returnStatement(
+                  this.astUtils.replaceThisWithSelf(replaced)
+                ),
+              ])
+            )
+          );
+        } else {
+          const replaced = this.observableManager.replaceObservablesWithSignals(
+            expr,
+            context.observableSignals,
+            this.astUtils
+          );
+          props.push(
+            this.t.objectProperty(
+              this.t.identifier(key),
+              this.astUtils.replaceThisWithSelf(replaced)
+            )
+          );
+        }
+      } else {
+        props.push(
+          this.t.objectProperty(
+            this.t.identifier(key),
+            this.t.booleanLiteral(true)
+          )
+        );
+      }
+    }
+  }
+
+  private processDOMAttributes(
+    attributes: Array<BabelTypes.JSXAttribute | BabelTypes.JSXSpreadAttribute>,
+    elId: BabelTypes.Identifier,
+    statements: BabelTypes.Statement[],
+    context: TransformContext
+  ): {
+    hasRef: boolean;
+    refValue: BabelTypes.Expression | null;
+    hasDangerousHTML: boolean;
+    dangerousHTMLValue: BabelTypes.Expression | null;
+  } {
+    let hasRef = false;
+    let refValue: BabelTypes.Expression | null = null;
+    let hasDangerousHTML = false;
+    let dangerousHTMLValue: BabelTypes.Expression | null = null;
+
+    for (const attr of attributes) {
+      if (this.t.isJSXSpreadAttribute(attr)) {
+        this.observableManager.collectObservables(
+          attr.argument,
+          context.observables,
+          this.astUtils
+        );
+        const replaced = this.observableManager.replaceObservablesWithSignals(
+          attr.argument,
+          context.observableSignals,
+          this.astUtils
+        );
+        statements.push(
+          this.t.expressionStatement(
+            this.t.callExpression(this.t.identifier("$spread"), [
+              elId,
+              this.astUtils.replaceThisWithSelf(replaced),
+            ])
+          )
+        );
+        continue;
+      }
+
+      const key = (attr.name as BabelTypes.JSXIdentifier).name;
+
+      if (key === "ref") {
+        hasRef = true;
+        if (this.t.isJSXExpressionContainer(attr.value)) {
+          this.observableManager.collectObservables(
+            attr.value.expression,
+            context.observables,
+            this.astUtils
+          );
+          const replaced = this.observableManager.replaceObservablesWithSignals(
+            attr.value.expression as BabelTypes.Expression,
+            context.observableSignals,
+            this.astUtils
+          );
+          refValue = this.astUtils.replaceThisWithSelf(replaced);
+        }
+        continue;
+      }
+
+      if (key === "dangerouslySetInnerHTML") {
+        hasDangerousHTML = true;
+        if (this.t.isJSXExpressionContainer(attr.value)) {
+          this.observableManager.collectObservables(
+            attr.value.expression,
+            context.observables,
+            this.astUtils
+          );
+          const replaced = this.observableManager.replaceObservablesWithSignals(
+            attr.value.expression as BabelTypes.Expression,
+            context.observableSignals,
+            this.astUtils
+          );
+          dangerousHTMLValue = this.astUtils.replaceThisWithSelf(replaced);
+        }
+        continue;
+      }
+
+      if (/^on[A-Z]/.test(key)) {
+        this.processEventListener(key, attr, elId, statements, context);
+        continue;
+      }
+
+      if (key === "style" && this.t.isJSXExpressionContainer(attr.value)) {
+        this.processStyleAttribute(attr, elId, statements, context);
+        continue;
+      }
+
+      this.processRegularAttribute(key, attr, elId, statements, context);
+    }
+
+    return { hasRef, refValue, hasDangerousHTML, dangerousHTMLValue };
+  }
+
+  private processEventListener(
+    key: string,
+    attr: BabelTypes.JSXAttribute,
+    elId: BabelTypes.Identifier,
+    statements: BabelTypes.Statement[],
+    context: TransformContext
+  ): void {
+    const eventName = key.slice(2).toLowerCase();
+    let handler: BabelTypes.Expression = this.t.nullLiteral();
+
+    if (this.t.isJSXExpressionContainer(attr.value)) {
+      this.observableManager.collectObservables(
+        attr.value.expression,
+        context.observables,
+        this.astUtils
+      );
+      const replaced = this.observableManager.replaceObservablesWithSignals(
+        attr.value.expression as BabelTypes.Expression,
+        context.observableSignals,
+        this.astUtils
+      );
+      handler = this.astUtils.replaceThisWithSelf(replaced);
+    }
+
+    statements.push(
+      this.t.expressionStatement(
+        this.t.callExpression(
+          this.t.memberExpression(elId, this.t.identifier("addEventListener")),
+          [this.t.stringLiteral(eventName), handler]
+        )
+      )
+    );
+  }
+
+  private processStyleAttribute(
+    attr: BabelTypes.JSXAttribute,
+    elId: BabelTypes.Identifier,
+    statements: BabelTypes.Statement[],
+    context: TransformContext
+  ): void {
+    if (!this.t.isJSXExpressionContainer(attr.value)) return;
+
+    this.observableManager.collectObservables(
+      attr.value.expression,
+      context.observables,
+      this.astUtils
+    );
+    const replaced = this.observableManager.replaceObservablesWithSignals(
+      attr.value.expression as BabelTypes.Expression,
+      context.observableSignals,
+      this.astUtils
+    );
+    statements.push(
+      this.t.expressionStatement(
+        this.t.callExpression(this.t.identifier("$style"), [
+          elId,
+          this.t.arrowFunctionExpression(
+            [],
+            this.astUtils.replaceThisWithSelf(replaced)
+          ),
+        ])
+      )
+    );
+  }
+
+  private processRegularAttribute(
+    key: string,
+    attr: BabelTypes.JSXAttribute,
+    elId: BabelTypes.Identifier,
+    statements: BabelTypes.Statement[],
+    context: TransformContext
+  ): void {
+    const attrName = key === "className" ? "class" : key;
+    let value: BabelTypes.Expression;
+
+    if (this.t.isStringLiteral(attr.value)) {
+      value = attr.value;
+    } else if (this.t.isJSXExpressionContainer(attr.value)) {
+      this.observableManager.collectObservables(
+        attr.value.expression,
+        context.observables,
+        this.astUtils
+      );
+      const replaced = this.observableManager.replaceObservablesWithSignals(
+        attr.value.expression as BabelTypes.Expression,
+        context.observableSignals,
+        this.astUtils
+      );
+      value = this.astUtils.replaceThisWithSelf(replaced);
+    } else {
+      value = this.t.booleanLiteral(true);
+    }
+
+    statements.push(
+      this.t.expressionStatement(
+        this.t.callExpression(
+          this.t.memberExpression(elId, this.t.identifier("setAttribute")),
+          [this.t.stringLiteral(attrName), value]
+        )
+      )
+    );
+  }
+
+  private processChildren(
+    children: Array<
+      | BabelTypes.JSXText
+      | BabelTypes.JSXExpressionContainer
+      | BabelTypes.JSXElement
+      | BabelTypes.JSXFragment
+      | BabelTypes.JSXSpreadChild
+    >,
+    childExpressions: Array<BabelTypes.Expression>,
+    statements: BabelTypes.Statement[],
+    scope: any,
+    context: TransformContext
+  ): void {
+    for (const child of children) {
+      if (this.t.isJSXText(child)) {
+        const text = child.value.trim();
+        if (text) childExpressions.push(this.t.stringLiteral(text));
+      } else if (this.t.isJSXExpressionContainer(child)) {
+        const expr = child.expression;
+        if (!this.t.isJSXEmptyExpression(expr)) {
+          this.observableManager.collectObservables(
+            expr,
+            context.observables,
+            this.astUtils
+          );
+          const replaced = this.observableManager.replaceObservablesWithSignals(
+            expr as BabelTypes.Expression,
+            context.observableSignals,
+            this.astUtils
+          );
+          childExpressions.push(this.astUtils.replaceThisWithSelf(replaced));
+        }
+      } else if (this.t.isJSXElement(child) || this.t.isJSXFragment(child)) {
+        const childEl = this.transformElement({ node: child }, scope, context);
+        statements.push(...childEl.statements);
+        childExpressions.push(childEl.id);
+      }
+    }
+  }
+
+  private processDOMChildren(
+    children: Array<
+      | BabelTypes.JSXText
+      | BabelTypes.JSXExpressionContainer
+      | BabelTypes.JSXElement
+      | BabelTypes.JSXFragment
+      | BabelTypes.JSXSpreadChild
+    >,
+    parentId: BabelTypes.Identifier,
+    statements: BabelTypes.Statement[],
+    scope: any,
+    context: TransformContext
+  ): void {
+    for (const child of children) {
+      if (this.t.isJSXText(child)) {
+        const text = child.value.trim();
+        if (!text) continue;
+        statements.push(
+          this.t.expressionStatement(
+            this.t.callExpression(this.t.identifier("$insert"), [
+              parentId,
+              this.t.stringLiteral(text),
+            ])
+          )
+        );
+      } else if (this.t.isJSXExpressionContainer(child)) {
+        const expr = child.expression;
+        if (this.t.isJSXEmptyExpression(expr)) continue;
+
+        this.observableManager.collectObservables(
+          expr,
+          context.observables,
+          this.astUtils
+        );
+
+        let insertedValue: BabelTypes.Expression;
+        if (this.guards.isSignalMember(expr)) {
+          insertedValue = this.astUtils.getObject(
+            expr as BabelTypes.Expression
+          );
+        } else if (this.guards.isObservableMember(expr)) {
+          const replaced = this.observableManager.replaceObservablesWithSignals(
+            expr as BabelTypes.Expression,
+            context.observableSignals,
+            this.astUtils
+          );
+          insertedValue = this.astUtils.getObject(replaced);
+        } else {
+          const replaced = this.observableManager.replaceObservablesWithSignals(
+            expr as BabelTypes.Expression,
+            context.observableSignals,
+            this.astUtils
+          );
+          insertedValue = this.t.arrowFunctionExpression(
+            [],
+            this.astUtils.replaceThisWithSelf(replaced)
+          );
+        }
+
+        statements.push(
+          this.t.expressionStatement(
+            this.t.callExpression(this.t.identifier("$insert"), [
+              parentId,
+              insertedValue,
+            ])
+          )
+        );
+      } else if (this.t.isJSXElement(child) || this.t.isJSXFragment(child)) {
+        const childEl = this.transformElement({ node: child }, scope, context);
+        statements.push(...childEl.statements);
+        statements.push(
+          this.t.expressionStatement(
+            this.t.callExpression(this.t.identifier("$insert"), [
+              parentId,
+              childEl.id,
+            ])
+          )
+        );
+      }
+    }
+  }
+}
+
+export function j2d({ types: t }: PluginContext): PluginObj<PluginState> {
+  const guards = new NodeTypeGuards(t);
+  const astUtils = new ASTUtilities(t, guards);
+  const jsxUtils = new JSXUtilities(t);
+  const observableManager = new ObservableManager(t, guards);
+  const elementTransformer = new ElementTransformer(
+    t,
+    guards,
+    astUtils,
+    jsxUtils,
+    observableManager
+  );
+
+  return {
+    name: "jsx-to-dom",
+    visitor: {
+      Program: {
+        exit(path: NodePath<BabelTypes.Program>, state: PluginState) {
+          if (state.helpersImported) return;
+
+          const helpers = [
+            { local: "$insert", imported: "insert" },
+            { local: "$createComponent", imported: "createComponent" },
+            { local: "$style", imported: "style" },
+            { local: "$spread", imported: "spread" },
+            { local: "$toSignal", imported: "toSignal" },
+          ];
+
+          for (const helper of helpers) {
+            path.unshiftContainer(
+              "body",
+              t.importDeclaration(
+                [
+                  t.importSpecifier(
+                    t.identifier(helper.local),
+                    t.identifier(helper.imported)
+                  ),
+                ],
+                t.stringLiteral("@kithinji/orca")
+              )
+            );
+          }
+
+          state.helpersImported = true;
+        },
+      },
+
+      ClassMethod(path: NodePath<BabelTypes.ClassMethod>) {
+        if (path.getData("processed")) return;
+
+        // Check if method contains JSX
+        let hasJSX = false;
+        path.traverse({
+          JSXElement() {
+            hasJSX = true;
+          },
+          JSXFragment() {
+            hasJSX = true;
+          },
+        });
+
+        if (!hasJSX) return;
+        path.setData("processed", true);
+
+        const body = path.node.body;
+        if (!t.isBlockStatement(body)) return;
+
+        // Collect all observables from JSX
+        const observables = new Map<string, BabelTypes.Expression>();
+        path.traverse({
+          JSXElement(jsxPath: NodePath<BabelTypes.JSXElement>) {
+            observableManager.collectObservables(
+              jsxPath.node,
+              observables,
+              astUtils
+            );
+          },
+          JSXFragment(jsxPath: NodePath<BabelTypes.JSXFragment>) {
+            observableManager.collectObservables(
+              jsxPath.node,
+              observables,
+              astUtils
+            );
+          },
+        });
+
+        // Add self reference
+        body.body.unshift(
+          t.variableDeclaration("const", [
+            t.variableDeclarator(t.identifier("self"), t.thisExpression()),
+          ])
+        );
+
+        // Create signal declarations for observables
+        const observableSignals = new Map<string, BabelTypes.Identifier>();
+        const signalDeclarations: BabelTypes.Statement[] = [];
+
+        for (const [key, observable] of observables) {
+          const signalId = path.scope.generateUidIdentifier("sig");
+          observableSignals.set(key, signalId);
+          signalDeclarations.push(
+            t.variableDeclaration("const", [
+              t.variableDeclarator(
+                signalId,
+                t.callExpression(t.identifier("$toSignal"), [
+                  observable,
+                  t.identifier("self"),
+                ])
+              ),
+            ])
+          );
+        }
+
+        if (signalDeclarations.length > 0) {
+          astUtils.insertBeforeReturn(body.body, signalDeclarations);
+        }
+
+        const context: TransformContext = { observables, observableSignals };
+
+        // Transform JSX elements and fragments
+        path.traverse({
+          JSXElement(jsxPath: NodePath<BabelTypes.JSXElement>) {
+            if (jsxPath.getData("processed")) return;
+            jsxPath.setData("processed", true);
+
+            const { id, statements } = elementTransformer.transformElement(
+              jsxPath as any,
+              jsxPath.scope,
+              context
+            );
+
+            jsxPath.replaceWith(
+              t.callExpression(
+                t.arrowFunctionExpression(
+                  [],
+                  t.blockStatement([...statements, t.returnStatement(id)])
+                ),
+                []
+              )
+            );
+          },
+          JSXFragment(jsxPath: NodePath<BabelTypes.JSXFragment>) {
+            if (jsxPath.getData("processed")) return;
+            jsxPath.setData("processed", true);
+
+            const { id, statements } = elementTransformer.transformElement(
+              jsxPath as any,
+              jsxPath.scope,
+              context
+            );
+
+            jsxPath.replaceWith(
+              t.callExpression(
+                t.arrowFunctionExpression(
+                  [],
+                  t.blockStatement([...statements, t.returnStatement(id)])
+                ),
+                []
+              )
+            );
+          },
+        });
+      },
+    },
+  };
+}