path-kanri
TypeScript icon, indicating that this package has built-in type declarations

0.2.2 • Public • Published

linkedin_banner_image_2

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.

Package Sidebar

Install

npm i path-kanri

Weekly Downloads

24

Version

0.2.2

License

MIT

Unpacked Size

33.8 kB

Total Files

24

Last publish

Collaborators

  • koyablue