@tehdev/url-pattern v0.1.1

URL Pattern

This package is designed for building and parsing URLs by patterns.

Problem

How are you building url for your site?
Maybe so?

// url.ts
const jobId = '123456';
...
const jobUrl = `/jobs/${jobId}/?from=listing`;
const jobsUrl = `/jobs/`;

This is not good. Why? Because if you will want to change routing you will have to make a lot of changes to your code.
With this package you can do it like this

// jobPattern.ts
import { URLPattern } from '@tehdev/url-pattern';

export const jobPattern = new URLPattern('/jobs(/:jobId)/');

// url.ts
import { jobPattern } from './jobPattern';

const jobId = '123456';
...
const jobUrl = jobPattern.build({ jobId }, { from: 'listing' }); // -> /jobs/123456/?from=listing
const jobsUrl = jobPattern.build(); // -> /jobs/

If you want to change the pattern, then you can change the pattern without changing the number and name of the parameters, then you do not have to change the entire code

Patterns

Static

Static path item

new URLPattern('.../jobs/...');

Parameterized path item

Parameterized path item - version 1

new URLPattern('.../:jobId/...');

Parameterized path item - version 2

new URLPattern('.../id-<:jobId>/...');

In the last example, id- is a static part in a parameterized path item

Optional parameterized path item

Optional parameterized path item - version 1

new URLPattern('...(/:jobId)/...');

Optional parameterized path item - version 2

new URLPattern('...(/id-<:jobId>)/...');

Search params and hash

You can build or parse urls with search and hash

const jobPattern = new URLPattern('/jobs(/:jobId)/');

jobPattern.build({jobId: '1234'}, {from: 'listing'}); // -> /jobs/123456/?from=listing
jobPattern.build({jobId: '1234'}, {from: 'listing'}, 'reviews'); // -> /jobs/123456/?from=listing#reviews

const parseResult = jobPattern.parse('/jobs/123456/?from=listing#reviews');
parseResult.search() -> // {from: 'listing'}
parseResult.params() -> // {jobId: '1234'}
parseResult.hash() -> // "reviews"