Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/soartec-lab/plop-create-remix-route
remix route/feature component generator by `plop`
https://github.com/soartec-lab/plop-create-remix-route
Last synced: 2 months ago
JSON representation
remix route/feature component generator by `plop`
- Host: GitHub
- URL: https://github.com/soartec-lab/plop-create-remix-route
- Owner: soartec-lab
- License: mit
- Created: 2024-05-12T08:13:37.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-06-02T01:46:11.000Z (7 months ago)
- Last Synced: 2024-10-04T05:41:03.355Z (3 months ago)
- Language: TypeScript
- Size: 37.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# plop-create-remix-route
A [`plop`](https://plopjs.com/) generator for routes of [`Remix`](https://remix.run/docs/en/main/file-conventions/routes).
The package was developed to simplify the generation of the `route component` of the [`Folders for Organization`](https://remix.run/docs/en/main/file-conventions/routes#folders-for-organization) configuration in [`Remix`](https://remix.run/docs/en/main/file-conventions/routes)
# Installation
This package is hosted on [`npm`](https://www.npmjs.com/package/@soartec-lab/plop-create-remix-route).
```bash
npm install --save-dev @soartec-lab/plop-create-remix-route
```
If you haven't installed [`plop`](https://plopjs.com/) yet, please install it together.
```bash
npm install --save-dev plop
```
# Usage
First, load it in the [`plop`](https://plopjs.com/) file. Update `plopfile.js` as follows:
```diff:plopfile.js
export default async function (plop) {
+ await plop.load("@soartec-lab/plop-create-remix-route");
}
```
Now you are ready. Let's start the command.
```bash
$ npx plop create-remix-route-component
? Which type of component do you want to create? route from URL path
? What is the URL path?
ex)
| URL you need to input | route file path | create component name |
|-----------------------|--------------------|-----------------------|
| /users | users._index | UsersRoute |
| /users/posts | users.posts._index | UsersPostsRoute |
| users/:id | users.$id | UserRoute |
? users/:id/posts/:id
✔ ++ /app/routes/users.$id.posts.$id/route.tsx
✔ ++ /app/routes/users.$id.posts.$id/route.test.tsx
```
Here, by selecting `route from URL path` as the `component type` to create and entering `users/:id/posts/:id`, we generate a `route component` that matches the `URL`.
## Types of Components that Can Be Created
The `component type` that can be individually created are as follows:
### route from URL path
If you want to create a `route component` from a `URL` path, select this type.
For example, if you enter `users/:id/posts/:id`, the following files will be created:
- app/routes/users.$id.posts.$id/route.tsx
- app/routes/users.$id.posts.$id/route.test.tsx
### route from file path
If you want to create a `route component` by specifying a file path, select this type.
For example, if you enter `users._index`, the following files will be created:
- app/routes/users._index/route.tsx
- app/routes/users._index/route.test.tsx
### feature
If you want to create a `feature component` instead of a `route component`, select this type.
For example, if you choose `users._index/user-list`, the following files will be created:
- app/routes/users._index/user-list.tsx
- app/routes/users._index/user-list.test.tsx
# Motivation
While routes of [`Remix`](https://remix.run/docs/en/main/file-conventions/routes) is flexible and consistent, I find the catch-up cost high. [`Folders for Organization`](https://remix.run/docs/en/main/file-conventions/routes#folders-for-organization) is one of the aspects.
By using this library, you can create components more intuitively.
# Questions
If you have any issues or ideas for feature additions, please create an issue or mention [`me`](https://twitter.com/SoartecL) on `X`. Feedback is welcome.