"Regen" is an abbreviation of "React Generator". Regen is a Command Line Interface (CLI) program to generate react component, custom hooks, view model template (VVM, like in MVVM), store (currently only supports redux), and scaffold/init a new react project.
To help speed up productivity in your React projects and stop copying, pasting, and renaming files for each time you want to create a new component, hook, etc.
- How to install
- Config file
- Generate components
- Generate hooks
- Generate views
- Generate stores
- Scaffold project
You can install it like so:
# as a `devDependencies`
npm i -D @rifandani/regen
# globally
npm i -g @rifandani/regenand run it from the command line:
# generate a single component `Box`
npx regen component BoxWhen you run regen within your project for the first time, it will ask you a series of questions to customize the CLI for your project needs (this will create a regen.json config file).
Example of the regen.json config file:
{
"usesTypeScript": true,
"usesCssModule": true,
"cssPreprocessor": "scss",
"testLibrary": "Testing Library",
"component": {
"default": {
"path": "src/components",
"withStyle": true,
"withLazy": true,
"withStory": true,
"withTest": true
}
},
"hook": {
"default": {
"path": "src/hooks",
"withTest": true
}
},
"view": {
"default": {
"path": "src/views",
"withRoute": true,
"withViewModel": true,
"withTest": true
}
},
"scaffold": {
"default": {
"url": "https://github.com/rifandani/frontend-template-rest.git"
}
},
"store": {
"default": {
"path": "src/stores",
"withTest": true,
"useEntityAdapter": false
}
}
}Or you can find the full example of regen.json config file here
npx regen component BoxThis command will create a folder with your component name within your default (e.g. src/components) directory, and its corresponding files.
Example of the generated component files structure:
|-- /src
|-- /components
|-- /Box
|-- Box.tsx
|-- Box.module.scss
|-- Box.test.tsx
|-- Box.stories.tsx
|-- Box.lazy.tsx
Check all available command flags:
npx regen component --helpUsage: regen component|c [options] <name...>
Creates a new, generic component definition in the given or default project.
Arguments:
name list of component name to be generated
Options:
-p, --path <path> The path where the component will be generated (default: "src/components")
-t, --type <type> The "component" key/type that you have configured in your config file (default: "default")
-d, --describe <describe> The description of the component you want to generate (e.g. Create a counter component that increments by one
when I click on the increment button)
-f, --flat Generate the files in the mentioned path insted of creating new folder for it
-dr, --dry-run Show what will be generated without writing to disk
-D, --debug Output extra debugging data
--withStyle <withStyle> With corresponding Style file. (default: true)
--withTest <withTest> With corresponding Test file. (default: true)
--withStory <withStory> With corresponding Story file. (default: true)
--withLazy <withLazy> With corresponding Lazy file. (default: true)
-h, --help display help for command
npx regen hook useLatestThis command will create a folder with your hook name within your default (e.g. src/hooks) directory, and its corresponding files.
Example of the generated hook files structure:
|-- /src
|-- /hooks
|-- /useLatest
|-- useLatest.hook.tsx
|-- useLatest.hook.test.tsx
Check all available command flags:
npx regen hook --helpUsage: regen hook|h [options] <name...>
Creates a new, generic hook definition in the given or default project.
Arguments:
name list of hook name to be generated
Options:
-p, --path <path> The path where the hook will be generated (default: "src/hooks")
-t, --type <type> The "hook" key/type that you have configured in your config file (default: "default")
-d, --describe <describe> The description of the hook you want to generate (e.g. A hook that returns the latest value, effectively
avoiding the closure problem)
-f, --flat Generate the files in the mentioned path insted of creating new folder for it
-dr, --dry-run Show what will be generated without writing to disk
-D, --debug Output extra debugging data
--withTest <withTest> With corresponding Test file. (default: true)
-h, --help display help for command
npx regen view DashboardThis command will create a folder with your view name within your default (e.g. src/views) directory, and its corresponding files.
Example of the generated view files structure:
|-- /src
|-- /views
|-- /Dashboard
|-- Dashboard.view.tsx
|-- Dashboard.route.tsx
|-- Dashboard.viewModel.tsx
|-- Dashboard.view.test.tsx
|-- Dashboard.route.test.tsx
|-- Dashboard.viewModel.test.tsx
Check all available command flags:
npx regen view --helpUsage: regen view|v [options] <name...>
Creates a new, generic view definition in the given or default project.
Arguments:
name list of view name to be generated
Options:
-p, --path <path> The path where the view will be generated (default: "src/views")
-t, --type <type> The "view" key/type that you have configured in your config file (default: "default")
-f, --flat Generate the files in the mentioned path insted of creating new folder for it
-dr, --dry-run Show what will be generated without writing to disk
-D, --debug Output extra debugging data
--withRoute <withRoute> With corresponding Route file. (default: true)
--withViewModel <withViewModel> With corresponding ViewModel file. (default: true)
--withTest <withTest> With corresponding Test file. (default: true)
-h, --help display help for command
npx regen store bookThis command will create a folder with your store name within your default (e.g. src/stores) directory, and its corresponding files.
Example of the generated store files structure:
|-- /src
|-- /stores
|-- /book
|-- book.store.ts
|-- book.store.test.ts
Check all available command flags:
npx regen store --helpUsage: regen store|st [options] <name...>
Creates a new, generic "store" definition in the given or default project.
Arguments:
name list of "store" name to be generated
Options:
-p, --path <path> The path where the "store" will be generated (default: "src/stores")
-t, --type <type> The "store" key/type that you have configured in your config file (default: "default")
--useEntityAdapter Normalize your state shape using entity adapter for each store generated (default: false)
-f, --flat Generate the files in the mentioned path insted of creating new folder for it
-dr, --dry-run Show what will be generated without writing to disk
-D, --debug Output extra debugging data
--withTest <withTest> With corresponding Test file. (default: true)
-h, --help display help for command
npx regen scaffoldThis command basically doing a git clone. Or you can pass in a custom command like:
npx regen scaffold "npm create vite@latest my-react-app -- --template react-ts"Check all available command flags:
npx regen scaffold --helpUsage: regen scaffold|sc [options] [url]
Init a new project based on a given url.
Arguments:
url a url in which will be used to scaffold a new project
Options:
-t, --type <type> The "scaffold" key/type that you have configured in your config file (default: "default")
-dr, --dry-run Show what will be generated without writing to disk
-D, --debug Output extra debugging data
-h, --help display help for command
- support more client state management libraries
Greatly inspired by generate-react-cli project.