this package helps me and our team to generate complex components structues by ease
npm install @youssefb/file-generatorthis package helps me and our team to generate complex components structues by ease
you can install it using npm :
``bash`
npm i component-file-generator
you need to install node on your machine to use this package,
also create a simple file in your app root :
``
└── projectName
└── src
└── generator.js
with the following code :
`javascript`
const generator = require('component-file-generator');
generator.exec('reactjs');
for the above example we make reactjs component as follwing :
``
└── src
├── components
├── [ComponentNameA]
│ ├── [ComponentNameA].spec.js
│ ├── [ComponentNameA].js
│ ├── [ComponentNameA]Container.js
│ ├── [ComponentNameA].scss
│ ├── README.md
└── package.json
to Execut it from root project using CLI :
`bash`
node generator`
it will prompt a question :bash`
Its name ?
_
it will generate the target component with minimal content in the ./src/component directory as its default directory.
for a more customizable execution:
`bash`
node generator [dir name]`
it will prompt a question :bash`
[dir name] name ?
_./src/[dir name]
it will generate the target component with minimal content in the directory.
Ex:
`bash`
node generator services`
it will prompt a question :bash`
services name ?
_LoginService
if you type in , the resulting component will be named LoginService inside the ./src/services directory.
You may use spaces and type at ease for this generator does have syntax corrections.
Ex:
`bash`
node generator`
it will prompt a question :bash`
Its name ?
_next step is part two
if you type in , the resulting component will be named NextStepIsPartTwo.
| Name | description |
| ---- | ---- |
| Custom | DONE |
| reactjs | DONE |
| angular | NOT YET |
| Vuejs | NOT YET |
| expressjs | NOT YET |
For now you can add multiple custom component types, you pass array with each element as an object with a key that has component name, like our example is service and :root
- folder where to generate structurestructure
- that containe your component file architecture
Example :
`javascriptimport Service from '../Service';\n\nexport default class [name] {\n\t// instruction\n\t}\n}\n
generator.exec([
{
'service': {
root:'./app/services',
structure: {
name: "[name]",
children:[
{
type: "file",
name: "readme.md",
content: "# [name] Service\n description"
},
{
type: "file",
name: "[name]Service.js",
content: ``
},
{
type: "file",
name: "package.json",
content: "{\n\t\"main\": \"./[name]Service.js\"\n}"
}
]
}
}
},
...
]);