Last active
March 2, 2023 16:06
-
-
Save Bamblehorse/6ad136c83e6fd2ea62375fa92d843a14 to your computer and use it in GitHub Desktop.
Call this script with 'node autoComponent.js' - nodemon works well too
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const chokidar = require("chokidar"); | |
const fs = require("fs"); | |
const templates = { | |
index: name => | |
`// @flow | |
import React from 'react'; | |
import './${name}.css'; | |
const ${name} = () => ( | |
<div className="${name.toLowerCase()}"> | |
// TODO: write rest of ${name} component | |
</div> | |
); | |
export default ${name};`, | |
test: name => `// TODO: TDD | |
import { shallow, render } from 'enzyme'; | |
import renderer from 'react-test-renderer'; | |
import React from 'react'; | |
import ${name} from '.'; | |
const component = <${name} />; | |
describe('The ${name} component', () => { | |
it('renders correctly', () => { | |
const wrapper = render(component); | |
expect(wrapper.hasClass('${name.toLowerCase()}')).toBeTruthy(); | |
const tree = renderer.create(component).toJSON(); | |
expect(tree).toMatchSnapshot(); | |
}); | |
});`, | |
sass: name => `.${name.toLowerCase()} | |
color: initial | |
background: initial` | |
}; | |
const fileExists = path => file => fs.existsSync(`${path}/${file}`); | |
const writeToPath = path => (file, content) => { | |
const filePath = `${path}/${file}`; | |
fs.writeFile(filePath, content, err => { | |
if (err) throw err; | |
console.log("Created file: ", filePath); | |
return true; | |
}); | |
}; | |
function createFiles(path, name) { | |
const files = { | |
index: "index.jsx", | |
test: `${name}.test.js`, | |
sass: `${name}.sass` | |
}; | |
if (name !== "components") { | |
const writeFile = writeToPath(path); | |
const toFileMissingBool = file => !fileExists(path)(file); | |
const checkAllMissing = (acc, cur) => acc && cur; | |
const noneExist = Object.values(files) | |
.map(toFileMissingBool) | |
.reduce(checkAllMissing); | |
if (noneExist) { | |
console.log(`Detected new component: ${name}, ${path}`); | |
Object.entries(files).forEach(([type, fileName]) => { | |
writeFile(fileName, templates[type](name)); | |
}); | |
} | |
} | |
} | |
const watcher = chokidar | |
.watch("src/components/**", { ignored: /node_modules/ }) | |
.on("addDir", (path, event) => { | |
const name = path.replace(/.*\/components\//, ""); | |
if (!name.includes("/")) createFiles(path, name); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment