Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

cheap-di

Package Overview
Dependencies
Maintainers
0
Versions
71
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cheap-di

Easy way to create nice web routes for you application

  • 2.0.0-dev.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

nice-web-routes

Easy way to create nice web routes for you application

license npm latest package codecov

Installation

npm install nice-web-routes

How to use

import { createNiceWebRoutes } from 'nice-web-routes';

const routes = createNiceWebRoutes({
  users: {
    statistic: {},
  },
  user: {
    userId: () => ({
      avatar: {},
      private_info: {},
    }),
    // typed parameter
    form: (form: 'create' | 'edit') => ({}),
  },
});

routes.url(); // '/'
routes.users.url(); // '/users'
routes.users.statistic.url(); // '/users/statistic'
routes.users.statistic.relativeUrl(); // 'statistic'

routes.users.statistic.url({ view: 'print', filter: 'no' }); // '/users/statistic?view=print&filter=no'
routes.users.statistic.url('/*'); // '/users/statistic/*'

routes.user.userId().relativeUrl(); // ':userId'
routes.user.userId('18').private_info.url(); // '/user/18/private-info'

// typed parameter
routes.user.form('create').url(); // '/user/create'
routes.user.form('edit').url(); // '/user/edit'
routes.user.form('something').url(); // error because it violates type constraint of 'create' | 'edit' | undefined

Base route customization

Generally you choose to use base route or don't on routes creation time:

const routes = createObjectNiceWebRoutes({
  home: {},
  welcome: {},
});

routes.home.url(); // "/home"
routes.welcome.url(); // "/welcome"

// with base route

const apiRoutes = createObjectNiceWebRoutes(
  {
    users: {
      userId: () => ({}),
    },
  },
  { parentRoute: '/api/v4' }
);

routes.users.url(); // "/api/v4/users"
routes.users.userId('123').url(); // "/api/v4/users/123"

But there are some cases when you need to change base route dynamically, or for example if your routes are started with locale and after user changes page language, routes should be changed as well:

const routes = createObjectNiceWebRoutes(
  {
    home: {},
    welcome: {},
  },
  { parentRoute: '/en' }
);

routes.home.url(); // "/en/home"
routes.welcome.url(); // "/en/welcome"

routes.setBaseRoute('/de');

routes.home.url(); // "/de/home"
routes.welcome.url(); // "/de/welcome"

Using with react-router

import { createNiceWebRoutes } from 'nice-web-routes';
import { Navigate, Route, Routes } from 'react-router-dom';

const appRoutes = createNiceWebRoutes({
  auth: {
    login: {},
    registration: {},
  },
  profile: {
    userId: () => ({}),
    settings: {},
    edit: {
      personal: {},
      career: {},
    },
  },
});

const App = () => (
  <Routes>
    <Route
      index
      element={<Navigate to={appRoutes.auth.relativeUrl()} replace />}
    />

    <Route path={appRoutes.auth.url('/*')}>
      {' '}
      {/* '/auth/*' */}
      <Route
        index
        element={<Navigate to={appRoutes.auth.login.relativeUrl()} replace />}
      />
      <Route
        path={appRoutes.auth.login.relativeUrl()}
        element={<LoginDisplay />}
      />
      <Route
        path={appRoutes.auth.registration.relativeUrl()}
        element={<RegistrationDisplay />}
      />
    </Route>

    <Route path={appRoutes.profile.url('/*')}>
      {' '}
      {/* '/profile/*' */}
      <Route index element={<MyProfileDisplay />} />
      <Route
        path={appRoutes.profile.userId().relativeUrl()}
        element={<UserProfile />}
      />
      <Route
        path={appRoutes.profile.settings.relativeUrl()}
        element={<SettingsDisplay />}
      />
      <Route path={appRoutes.profile.edit.relativeUrl('/*')}>
        {' '}
        {/* 'edit/*' */}
        <Route index element={<ProfileSettings />} />
        <Route
          path={appRoutes.profile.edit.career.relativeUrl()}
          element={<EditCareerDisplay />}
        />
        <Route
          path={appRoutes.profile.edit.personal.relativeUrl()}
          element={<EditPersonalInformationDisplay />}
        />
      </Route>
    </Route>
  </Routes>
);

Customization

You can customize routes creating by using configureNiceWebRoutesCreating and passing FactoryConfig:

import { configureNiceWebRoutesCreating } from 'nice-web-routes';

const routes = configureNiceWebRoutesCreating({
  getSegmentValue: (segmentName, segmentValue) => {
    if (typeof segmentValue === 'string') {
      return `argument_${segmentValue}`;
    }

    // it is how route parameters are created by default
    if (segmentName.toLowerCase().includes('id')) {
      return ':id';
    }
    return `:${segmentName}`;
  },
  snakeTransformation: {
    disableForSegmentValue: true,
  },
})({
  user: {
    group: () => ({}),
    userId: () => ({
      avatar: {},
    }),
  },
});

routes.user.group().url(); // '/user/:group'
routes.user.userId().url(); // '/user/:id'
routes.user.userId('18').url(); // '/user/argument_18'
FactoryConfig
PropertyTypeDescriptionDefault value
getSegmentValueGetSegmentValue => (segmentName: string, segmentValue: string or undefined) => stringIt is responsible for displaying parametrized route valuevalue is displayed as is, and when there is no value it shows as :segmentName
urlBuilderImplUrlBuilderConstructor => class that implements UrlBuilder interfaceYou can override how the target url is creatingDefaultUrlBuilder - internal implementation
creatingStrategyCreatingStrategyVariant => 'proxy' or 'object'it is about how your routes object is created (see Creating strategies section bellow)object
snakeTransformation{ disableForSegmentName?: boolean; disableForSegmentValue?: boolean; }You can disable transformation of user_list segment name or value to user-list url part{}
Creating strategies

Object strategy creates nested routes only when parametrized route is called.

It is good option, when you have no large trees under parametrized routes, because it traverses description tree for each parametrized node call . Objects nodes are traversed during routes creation time until it reaches parametrized route.

Proxy strategy creates proxy for each tree node when that node is accessed.

It is good option, if you have large route tree or many nested routes under parametrized routes, because it will not traverse entire tree on each node call. But performance in such case is lower than in Object strategy (caused Proxy implementation in js core).

FAQs

Package last updated on 08 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc