uri-manager

!image

URI serialize and match data, use safety type!
Successfully integration to react-router-v6!

Example

``ts
import { URISchema } from 'uri-manager';

const product = new URISchema('/product');
const productList = product.createSubPath<{ search?: string; }>('/list');
const productDetail = product.createSubPath('/:productId');

// serialize
productList.serialize(); // "/product"
productList.serialize({ search: 'keyword' }); // "/product?search=keyword"
productDetail.serailize({ productId: '10' }); // "product/10"

// match
productDetail.match('/foo/bar'); // null
productDetail.match('/product/15'); // { productId: 15 }

// deep sub path serialize
const media = new URISchema('/media');
const mediaDetail = media.createSubPath('/:mediaId');
const mediaDetailComments = mediaDetail.createSubPath('/comments');
const mediaDetailCommentDetail = mediaDetailComments.createSubPath('/:commentId');

media.serialize(); // "/media"
mediaDetail.serialize({ mediaId: '10' }); // "/media/10"
mediaDetailComments.serialize({ mediaId: '15' }); // "/media/15/comments"
mediaDetailCommentDetail.serialize({ mediaId: '20', commentId: '25' }); // "/media/20/comments/25"
`

Features

$3

`ts
import { URISchema, ParamsFromPath } from 'uri-manager';

const productList = new URISchema<{ search?: string; }>('/product');

productList.serialize(); // ✅ "/product"
productList.serialize({ search: 'foo' }); // ✅ "/product?search=foo"

const productDetail = new URISchema & { tag: string }>('/product/:productId(\\d+)');

productDetail.serialize({ productId: 10, tag: 'bar' }); // ✅ "/product/10?tag=bar"
`

$3

`ts
import { URISchema } from 'uri-manager';

const filter = new URISchema({
template: '/filter/:category?',
defaultParams: {
category: 'ALL'
}
});

filter.serialize(); // ✅ "/filter/ALL"
filter.serialize({ category: 'FEATURES' }); // ✅ "/filter/FEATURES"
`

$3

`ts
import { URISchema } from 'uri-manager';

const viewSchema = new URISchema<{ view: string }>({ baseSchema: 'weverseshop://weverseshop.benx.co' });

viewSchema.serialize({ view: 'noticeDetail' }); // ✅ "weverseshop://weverseshop.benx.co/?view=noticeDetail"
`

$3

This version(v1.0.0) is integration to react-router-v6

`tsx
import React from 'react';
import { Route, Routes, useParams, Outlet } from 'react-router';
import { URISchema, GetURISchemaParamKeys } from 'uri-manager';

const product = new URISchema('/product');
const productDetailRoute = product.createSubPath('/product/:productId');

const ProductDetail = () => {
const { productId } = useParams>();
return (


Product detail id : {productId}

const App = () => {
return (




}>
} />
} />


)
};
``