const putout = require("putout")

// good: assign
var source = `
function App(props) {
  const div = (
    <div className="app">
      hello {props.name}
    </div>
  );
  return div;
}
`;

// bad: return
var source = `
function App(props) {
  return (
    <div className="app">
      hello {props.name}
    </div>
  );
}
`;

console.log("input:\n" + source)

/* based on
https://github.com/coderaiser/putout/blob/master/packages/plugin-react-router/lib/convert-switch-to-routes/index.js
https://github.com/coderaiser/putout/blob/master/packages/plugin-react-hooks/lib/apply-short-fragment/index.js
*/
const myPlugin = {
  rules: {
    'jsx-classname-to-class': {
        report: () => `Use class instead of className attribute`,
        include: () => [
            'JSXOpeningElement',
        ],
        fix: (path) => {
            const attr = path.node.attributes.find(attr => attr.name.name == "className")
            attr.name.name = "class"
        },
        filter: (path) => {
            const hasClassName = !!path.node.attributes.find(attr => attr.name.name == "className")
            const hasClass = !!path.node.attributes.find(attr => attr.name.name == "class")
            return hasClassName && !hasClass
        },
    },
  }
}

const res = putout(source, {
    isTS: true,
    isJSX: true,
    //sourceFileName: 'input.tsx',
    processors: [
        //'typescript', // @putout/processor-typescript type checking for TypeScript code
    ],
    plugins: [
        //'typescript', // @putout/plugin-typescript transform TypeScript code
        ['my-plugin', myPlugin],
    ],
    rules: {
      // default: all rules are on
      //"my-plugin/jsx-classname-to-class": "on",
    }
});

console.log("output:\n" + res.code)