babel-plugin-r-sugar/src/visitors/formColon.ts

A Babel plugin that adds Vue-style v-if directive support to React

import type { NodePath } from '@babel/traverse';
import type { JSXElement, JSXAttribute } from '@babel/types';
import { types as t } from '@babel/core';

export function formColonPlugin(path: NodePath<JSXElement>, t: typeof import('@babel/core').types) {
  // 安全检查
  if (!path.node?.openingElement?.name) return;

  // 检查是否是 Form 组件
  if (path.node.openingElement.name.type !== 'JSXIdentifier' || 
      path.node.openingElement.name.name !== 'Form') {
    return;
  }

  // 查找现有的 colon 属性
  const colonAttributeIndex = path.node.openingElement.attributes.findIndex(
    (attr): attr is JSXAttribute => 
      attr.type === "JSXAttribute" && attr.name.name === "colon"
  );

  // 创建强制设置为 false 的 colon 属性
  const colonAttribute = t.jsxAttribute(
    t.jsxIdentifier("colon"),
    t.jsxExpressionContainer(
      t.booleanLiteral(false)
    )
  );

  if (colonAttributeIndex !== -1) {
    // 如果已存在 colon 属性，替换它
    path.node.openingElement.attributes[colonAttributeIndex] = colonAttribute;
  } else {
    // 如果不存在 colon 属性，添加它
    path.node.openingElement.attributes.push(colonAttribute);
  }
}