Path-Kanri
Path-Kanri is a utility module for managing paths.
By using Path-Kanri, you can
- register paths with names
- get paths by names
- avoid hard coding paths
(By the way, kanri means management in Japanese.)
Built with
Installation
npm install path-kanri
Getting Started
- import pathManager from 'path-kanri'
- provide object to pathManager
- names as keys, paths as values
- enclose parameters in braces
import pathManager from 'path-kanri';
// name: '/path/{parameterName1}/{parameterName2}'
const { getPath } = pathManager({
example: '/example/{exampleId}/{slug}',
users: '/users',
userProfile: '/users/{userId}',
userPosts: '/users/{userId}/posts',
userPost: '/users/{userId}/posts/{postId}',
});
export { getPath };With base url
You can also provide a base url as the second argument.
const { getPath, getFullPath } = pathManager({
example: '/example/{exampleId}/{slug}',
users: '/users',
userProfile: '/users/{userId}',
userPosts: '/users/{userId}/posts',
userPost: '/users/{userId}/posts/{postId}',
}, 'https://example.com');
export { getPath, getFullPath };In this case, getFullPath returns a path with the base url.
Usage
Import.
import { getPath } from './lib/pathManager';Get a registered path by its name.
getPath('example', { exampleId: 1, slug: 'abc' });
// returns '/example/1/abc'With query parameters.
getPath('example', { exampleId: 1, slug: 'abc' }, { page: '1', type: 'fire' });
// returns '/example/1/abc/?page=1&type=fire'With the base url.
// 'https://example.com' is provided as the second argument of pathManager
getFullPath('example', { exampleId: 1, slug: 'abc' }, { page: '1', type: 'fire' });
// returns 'https://example.com/example/1/abc/?page=1&type=fire'API
pathManager(pathNameAndUriMap, baseUrl)
Register paths and a base url.
baseUrl is optional.
const { getPath, getFullPath } = pathManager({
example: '/example/{exampleId}/{slug}',
users: '/users',
userProfile: '/users/{userId}',
userPosts: '/users/{userId}/posts',
userPost: '/users/{userId}/posts/{postId}',
}, 'https://example.com');getPath(pathName, params, queryParams)
Get a path by its name.
getPath('users');
// '/users'
// With path parameters
getPath('example', { exampleId: 1, slug: 'abc' });
// '/example/1/abc'
// With query parameters
getPath('example', { exampleId: 1, slug: 'abc' }, { page: '1', type: 'fire' });
// '/example/1/abc/?page=1&type=fire'getFullPath(pathName, params, queryParams)
Get a full path by its name.
Returns a path without the base url if the base url is not registered.
getFullPath('example', { exampleId: 1, slug: 'abc' }, { page: '1', type: 'fire' });
// 'https://example.com/example/1/abc/?page=1&type=fire'
// If the base url isn't registered: '/example/1/abc/?page=1&type=fire'Motivation
In front-end coding I often encounter hard coded paths like this.
import { useRouter } from 'next/router'
const ExampleComponent = () => {
const router = useRouter()
const randomFunc = () => {
// do something
router.push(`/example/${exampleId}/${slug}`) // <- THIS!!
}
return(
<div>
</div>
)
}Hard coded paths are generally considered to be magic numbers so they should be avoided.
Laravel(PHP framework) has a very useful built-in function to solve this kind of problem. You can name URIs and get them by their names with route() function like this.
route('route.name', ['param1' => 1, 'param2' => 2])I was inspired by this cool feature and decided to make Path-Kanri.
License
This project is licensed under the MIT License.