# remix-docs-gen
Latest version **0.1.5** (published 2022-10-10) · MIT license · 0 weekly downloads
## Install
```sh
npm install remix-docs-gen
pnpm add remix-docs-gen
yarn add remix-docs-gen
bun add remix-docs-gen
```
Provides the command `remix-docs-gen`.
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.5 |
| Published | 2022-10-10 |
| First published | 2022-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 61.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 60 |
| Maintainers | sandulat |
## Links
- npm: https://www.npmjs.com/package/remix-docs-gen
- Repository: https://github.com/sandulat/remix-docs-gen
- Homepage: https://github.com/sandulat/remix-docs-gen#readme
- Issues: https://github.com/sandulat/remix-docs-gen/issues
- npm.io page: https://npm.io/package/remix-docs-gen
## Dependencies (5)
- [meow](https://npm.io/package/meow.md) ^9.0.0
- [chalk](https://npm.io/package/chalk.md) ^4.1.2
- [chokidar](https://npm.io/package/chokidar.md) ^3.5.3
- [fs-extra](https://npm.io/package/fs-extra.md) ^10.0.0
- [ts-morph](https://npm.io/package/ts-morph.md) ^15.1.0
## Recent versions
- 0.1.5 (latest) — 2022-10-10
- 0.1.4 — 2022-09-11
- 0.1.3 — 2022-08-26
- 0.1.2 — 2022-08-25
- 0.1.1 — 2022-08-24
- 0.1.0 — 2022-08-24
## README
## About
`remix-docs-gen` parses all of your `Remix` loaders and actions and _automatically_ documents all the typings per each route.
## Installation
First, you have to install the package itself:
```
yarn add -D remix-docs-gen
```
> Note that you need @remix-run/server-runtime to be at least ^1.7.0.
## Usage Example
You can simply run:
```
yarn remix-docs-gen -o api-docs.ts
```
It will magically parse all of your routes and extract all the return types of your loaders and actions.
## CLI Options
| Option | Alias | Description |
| ------------- | ----- | ----------------------------------- |
| --help | | Print the help message and exit |
| --version | -v | Print the CLI version and exit |
| --output | -o | The path for docs export |
| --regex | -r | The regex to filter routes |
| --watch | -w | Watch for changes |
| --post-export | | Execute a command after docs export |
## Loader output documentation
For example having a route in `app/routes/articles` with the following content:
```ts
export const loader = () => {
return {
articles: db.articles.findMany(),
};
};
```
The package will fully infer the return type of the loader and produce the following example output:
```ts
export interface RemixDocs {
"/articles": {
loader: { output: { articles: { id: string; title: string }[] } };
};
}
```
## Action output documentation
For example having a route in `app/routes/articles` with the following content:
```ts
export const action = () => {
return {
myNewArticle: db.articles.create(),
};
};
```
The package will fully infer the return type of the action and produce the following example output:
```ts
export interface RemixDocs {
"/articles": {
action: { output: { myNewArticle: { id: string; title: string } } };
};
}
```
## Output typings customization
If you'd like to manually define the typings of the loader's or action's output, in your route simply export your custom `LoaderOutput` or `ActionOutput` types as needed:
```ts
export type LoaderOutput = {
articles: { custom: string }[];
};
export type ActionOutput = {
myNewArticle: { custom: string };
};
```
Which will produce the following result:
```ts
export interface RemixDocs {
"/articles": {
loader: { output: { articles: { custom: string }[] } };
action: { output: { myNewArticle: { custom: string } } };
};
}
```
## Documenting input typings
Besides returing data, `loaders` and `actions` usually also expect data to be coming in from the client. To document that, in your route simply export the `LoaderInput` or `ActionInput` types as needed:
```ts
export type ActionInput = {
articleData: { title: string };
};
```
Which will produce the following result:
```ts
export interface RemixDocs {
"/articles": {
action: { input: { articleData: { title: string } } };
};
}
```
This can be very convenient when working with tools like `Zod`, for example:
```ts
const articleSchema = z.object({
title: z.string().min(1),
});
export type ActionInput = z.infer;
```
## Route documentation override
If you'd like to fully override the generated documentation typings of a specific route, simply export a `Docs` type:
```ts
export type Docs = {
my: {
custom: {
documentation: string;
};
};
};
```
Which will produce the following output:
```ts
export interface RemixDocs {
"/articles": { my: { custom: { documentation: string } } };
}
```
## Generating typings for specific routes only
You can leverage the `--regex` or `--r` flag to only generate typings for the desired routes. For example, that's how you'd document only the routes starting with `/api`.
```
yarn remix-docs-gen --output api-docs.ts --regex /api
```
## Dynamic segments
For routes with dynamic segments, the following pattern is being output:
```ts
export interface RemixDocs {
"/reset-password/:token": {
// ...
};
}
```
## Generating typings for other languages
For generating typings for other languages besides Typescript, you can use tools like [quicktype](https://github.com/quicktype/quicktype) on top of the generated Typescript file.
---
_Source: https://npm.io/package/remix-docs-gen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._