https://github.com/trapcodeio/xpresser-frontend-helpers
XpresserJs Frontend Helper
https://github.com/trapcodeio/xpresser-frontend-helpers
Last synced: 7 months ago
JSON representation
XpresserJs Frontend Helper
- Host: GitHub
- URL: https://github.com/trapcodeio/xpresser-frontend-helpers
- Owner: trapcodeio
- Created: 2020-12-31T11:02:51.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-12-14T06:26:25.000Z (over 1 year ago)
- Last Synced: 2024-11-29T08:42:23.729Z (7 months ago)
- Language: TypeScript
- Size: 267 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# XpresserJs Frontend Helpers
Create a javascript file of all **named routes** that can be imported and bundled by webpack.
## Problem
When working with lots of routes, Sometimes you find it difficult to remember the url of your routes And the glorious
xpresser `$.helpers.route()` helper function that converts names to urls can't be accessed in Frontend.
For Example, we have a route like this Backend
```javascript
$.router.get('/user/:userId/uploads/:fileId/') // /user/164/song/733
```
In our Frontend
```javascript
axios.get(`/user/${userId}/uploads/${fileId}`)
```
Remembering **urls, required/un-required route named parameters** when you have over **500 routes** will be difficult.
## Solution
AUTOGENERATED routes file that can be imported into your Frontend. This plugin reads your routes then generates a file
that can be configured to use any `Http Library` you are using. This file includes all your routes as a Library.
For example using the same example above, But we have to add a name to identify the route.
```javascript
router.get('/user/:userId/uploads/:fileId/', http => {
return {file: 'image.png'}
}).name('uploaded_file') // /user/164/song/733
```
In your frontend
```javascript
import req from "./auto-generated-file";
await req.get.uploaded_file([userId, fileId]); // returns {"file": "image.png"}
```
### More Examples
Backend
```javascript
router.get('/users', 'UserController@users').name('users');
router.post('/users', 'UserController@create').name('user.create');
router.get('/user/:userId', 'UserController@user').name('user');
router.patch('/user/:userId', 'UserController@update').name('user.update');
router.delete('/user/:userId', 'UserController@delete').name('user.delete');
router.get('/songs/:genre/:year?/:month?/:day?').name('songs');
```
Frontend.
```javascript
import req from "./auto-generated-file";
await req.get.users({page: 2}) // GET: /user?page=2
await req.post.users({
id: 35, name: "John Doe", email: "[email protected]", password: "password"
}) // POST: /users with body
await req.get.user(35) // GET: /user/35
await req.patch.user(35, {
password: "newPassword"
}) // PATCH: /user/35
await req.delete.user(35) // DELETE: /user/35
await req.get.songs(["hip-hop", 2020, 4, 15]) // GET: /songs/hip-hop/2020/4/15
```
## What you get.
- Autocomplete for faster development.
- It will never make a `Http Verb` mistake like send `get` instead of `post`.
- Easily supports any http library.
This came like an idea to me, so I decided to bring it to life.
Note: this is still experimental, I have lots of work on my table. So I won't be paying attention to it for now... I
will be updating my local version during my day-to-day use then someday I will update this.
For now, it only generates the file. you have to configure it to work like the Examples above. 🤦♂️
You can run the test file included.