Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save flyerhzm/19136af12ef27335fe5e64093aee8f6f to your computer and use it in GitHub Desktop.
Save flyerhzm/19136af12ef27335fe5e64093aee8f6f to your computer and use it in GitHub Desktop.
convert html elements to react bootstrap components
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' });
})
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment