Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Easy way to create nice web routes for you application
npm install nice-web-routes
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
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"
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>
);
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'
Property | Type | Description | Default value |
---|---|---|---|
getSegmentValue | GetSegmentValue => (segmentName: string, segmentValue: string or undefined) => string | It is responsible for displaying parametrized route value | value is displayed as is, and when there is no value it shows as :segmentName |
urlBuilderImpl | UrlBuilderConstructor => class that implements UrlBuilder interface | You can override how the target url is creating | DefaultUrlBuilder - internal implementation |
creatingStrategy | CreatingStrategyVariant => '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 | {} |
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
Easy way to create nice web routes for you application
We found that cheap-di demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.