# rc-codegen

> React code generation helpers

Latest version **1.0.1** (published 2022-03-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-codegen
pnpm add rc-codegen
yarn add rc-codegen
bun add rc-codegen
```

Provides the command `rcgen`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-03-19 |
| First published | 2022-03-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 13.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Attila Kling |
| Maintainers | jim-y |
| Keywords | react, code, generation |

## Links

- npm: https://www.npmjs.com/package/rc-codegen
- Repository: https://github.com/jim-y/rc-codegen
- Homepage: https://github.com/jim-y/rc-codegen#readme
- Issues: https://github.com/jim-y/rc-codegen/issues
- npm.io page: https://npm.io/package/rc-codegen

## Dependencies (5)

- [chalk](https://npm.io/package/chalk.md) 4.1.2
- [hygen](https://npm.io/package/hygen.md) ^6.2.0
- [enquirer](https://npm.io/package/enquirer.md) ^2.3.6
- [change-case](https://npm.io/package/change-case.md) ^4.1.2
- [upper-case-first](https://npm.io/package/upper-case-first.md) ^2.0.2

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-03-19
- 1.0.0 — 2022-03-19
- 0.0.1 — 2022-03-19

## README

# rc-codegen

React code generation for your projects. This package contains **opinionated** generators. For a sole
developer this might not be useful however for teams this approach might be useful to keep a consistent coding style among developers (and react projects)

This tool uses [http://www.hygen.io/](http://www.hygen.io/) in the background but exposes only a curated set of generators for the consumers of this package. What does this actually mean?

If you read the `hygen` documentation it tells you that you should

1. init hygen in your project
2. then commit the \_templates to the repository

This works well for one project, but what if your workplace/team runs multiple react projects in parallell however there is a need for a consistent code style.

If you like the generated react code what this lib provides then use it, otherwise you can incorporate the idea behing this and create your own shared react code generator.

# Motivation

I noticed in my team that the developers after setting up some ground rules with regards to coding conventions doesn't care how we write something until we are consistent. For example, in a react `Provider` we make the provider context available to the rest of the codebase via a hook. It doesn't matter for the developers if we export such hook from the `Provider.tsx` file or we create a separate file just for the hook until we all do thee same.

Usually, these kind of conventions are covered by a documentation or coding guidelines. This package takes this to the next level by providing code generation tools where the generated code follows those guidelines.

# Example

In a react project

```shell
npm i rc-codegen
```

This exposes a `rcgen` binary. To use it either run `npm exec rcgen`

```shell
~/Development/repos/rc-codegen-test (main ✗) npm exec rcgen
✔ What do you want to generate? · provider
✔ What kind of provider do you want to generate? · with-context
✔ What's your provider's name? · ThemeProvider
✔ What javascript flavor do you want use? · .tsx
✔ What kind of state container? · useReducer
✔ Outfile: src/providers/ThemeProvider.tsx (y/N) · true

Loaded templates: node_modules/rc-codegen/_templates
✔      exists: src/providers/ThemeProvider.tsx. Overwrite? (y/N):  (y/N) · true
       added: src/providers/ThemeProvider.tsx
```

Or call from `node_modules` as `node_modules/.bin/rcgen`

```shell
~/Development/repos/rc-codegen-test (main ✗) node_modules/.bin/rcgen 
? What do you want to generate? … 
hook
provider
```

Or create an npm script for it in package.json.

# To add a new generator

You should read [http://www.hygen.io/](http://www.hygen.io/) first to have a good idea about generating code with `hygen`

```shell
npx hygen generator new <GENERATOR_NAME>
```

Example:

```shell
npx hygen generator new provider
```

this will generate

```
_templates
└── provider
    └── new
        └── hello.ejs.t
```

Here, `provider` is thee command and `new` is the subcommand. Let's rename `new` to `with-context`. Next, we also want to provide a nice prompt, so add a new file `index.js` next to `hello.ejs.t`. We should also rename `hello.ejs.t` to `provider.ejs.t`. After all this, we end up with

```
_templates
└── provider
    └── with-context
        ├── index.js
        └── provider.ejs.t
```

The `index.js` file covers the `prompt` and `.ejs.t` file is the template

# Writing EJS templates

The playground helps tremendously [https://ionicabizau.github.io/ejs-playground/](https://ionicabizau.github.io/ejs-playground/)

---
_Source: https://npm.io/package/rc-codegen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._