How to use @babel/helper-builder-react-jsx - 5 common examples

const PRAGMA_DEFAULT = options.pragma || "React.createElement";
    const PRAGMA_FRAG_DEFAULT = options.pragmaFrag || "React.Fragment";

    const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
    const JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/;

    // returns a closure that returns an identifier or memberExpression node
    // based on the given id
    const createIdentifierParser = (id) => () => {
        return id
            .split(".")
            .map(name => t.identifier(name))
            .reduce((object, property) => t.memberExpression(object, property));
    };

    const visitor = helper({
        pre(state) {
            const tagName = state.tagName;
            const args = state.args;

            if (compatTagSet.has(tagName)) {
                args.push(t.stringLiteral(tagName));
            } else if (tagName && tagName.endsWith('CPT')) {
                args.push(t.stringLiteral(tagName));
            } else {
                args.push(state.tagExpr);
            }
        },

        post(state, pass) {
            state.callee = pass.get("jsxIdentifier")();
        },

const PRAGMA_DEFAULT = options.pragma || "Easycanvas.createElement";
    const PRAGMA_FRAG_DEFAULT = options.pragmaFrag || "window.Easycanvas ? window.Easycanvas.View : View";

    const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
    const JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/;

    // returns a closure that returns an identifier or memberExpression node
    // based on the given id
    const createIdentifierParser = (id) => () => {
        return id
            .split('.')
            .map(name => t.identifier(name))
            .reduce((object, property) => t.memberExpression(object, property));
    };

    const visitor = helper({
        pre(state) {
            const tagName = state.tagName;
            const args = state.args;
            if (t.react.isCompatTag(tagName)) {
                args.push(t.stringLiteral(tagName));
            } else {
                args.push(state.tagExpr);
            }
        },

        post(state, pass) {
            state.callee = pass.get("jsxIdentifier")();
        },

        throwIfNamespace: THROW_IF_NAMESPACE,
    });

const PRAGMA_DEFAULT = options.pragma || "React.createElement";
  const PRAGMA_FRAG_DEFAULT = options.pragmaFrag || "React.Fragment";

  const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
  const JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/;

  // returns a closure that returns an identifier or memberExpression node
  // based on the given id
  const createIdentifierParser = (id: string) => () => {
    return id
      .split(".")
      .map(name => t.identifier(name))
      .reduce((object, property) => t.memberExpression(object, property));
  };

  const visitor = helper({
    pre(state) {
      const tagName = state.tagName;
      const args = state.args;
      if (t.react.isCompatTag(tagName)) {
        args.push(t.stringLiteral(tagName));
      } else {
        args.push(state.tagExpr);
      }
    },

    post(state, pass) {
      state.callee = pass.get("jsxIdentifier")();
    },

    throwIfNamespace: THROW_IF_NAMESPACE,
  });

function hasRefOrSpread(attrs) {
    for (let i = 0; i < attrs.length; i++) {
      const attr = attrs[i];
      if (t.isJSXSpreadAttribute(attr)) return true;
      if (isJSXAttributeOfName(attr, "ref")) return true;
    }
    return false;
  }

  function isJSXAttributeOfName(attr, name) {
    return (
      t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: name })
    );
  }

  const visitor = helper({
    filter(node) {
      return (
        // Regular JSX nodes have an `openingElement`. JSX fragments, however, don't have an
        // `openingElement` which causes `node.openingElement.attributes` to throw.
        node.openingElement && !hasRefOrSpread(node.openingElement.attributes)
      );
    },
    pre(state) {
      const tagName = state.tagName;
      const args = state.args;
      if (t.react.isCompatTag(tagName)) {
        args.push(t.stringLiteral(tagName));
      } else {
        args.push(state.tagExpr);
      }
    },

export default declare(api => {
  api.assertVersion(7);

  return {
    name: "transform-react-jsx-compat",

    manipulateOptions(opts, parserOpts) {
      parserOpts.plugins.push("jsx");
    },

    visitor: helper({
      pre(state) {
        state.callee = state.tagExpr;
      },

      post(state) {
        if (t.react.isCompatTag(state.tagName)) {
          state.call = t.callExpression(
            t.memberExpression(
              t.memberExpression(t.identifier("React"), t.identifier("DOM")),
              state.tagExpr,
              t.isLiteral(state.tagExpr),
            ),
            state.args,
          );
        }
      },