convert html elements to react bootstrap components

html-elements-to-react-bootstrap-components.js

const Synvert = require("synvert-core");

new Synvert.Rewriter("react", "html-elements-to-react-bootstrap-components", () => {
  description("convert html elements to react bootstrap components");

  withinFiles(Synvert.ALL_FILES, function () {
    let needImport = false
    withNode({ type: "JSXElement", openingElement: { name: { name: "div" } } }, () => {
      let matched = false;
      gotoNode("openingElement", () => {
        withNode({ type: "JSXAttribute", name: { name: "className" }, value: { value: /container-fluid/ } }, function () {
          matched = true
          if (this.currentNode.value.value === "container-fluid") {
            remove();
          } else {
            const value = this.currentNode.value.value;
            replace('value', { with: `"${value.replace('container-fluid ', '').replace(' container-fluid', '')}"` });
          }
        });
      });
      if (matched) {
        needImport = true;
        replace('openingElement.name', { with: 'Container' });
        insert(' fluid', { to: 'openingElement.name' });
        replace('closingElement.name', { with: 'Container' });
      }
    });
    if (needImport) {
      withNode({ type: "ImportDeclaration", source: { value: 'react' } }, function () {
        insert("\nimport { Container } from 'react-bootstrap';", { at: 'end' });
      })
    }
  });
});