diff --git a/README.md b/README.md index a2f1687..4ae8edc 100644 --- a/README.md +++ b/README.md @@ -2,17 +2,27 @@ # Typesafe Routes -- 14Kb bundle size -- 11Kb minified -- 2.6Kb gz compressed - -Enhance your preferred routing library by incorporating type-safety into string-based route definitions. Allow TypeScript to identify broken links during the compilation process, enabling you to develop easily maintainable software. - -- [Conditional Types](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html) -- [Recursive Conditional Types](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#recursive-conditional-types). -- [Template Literal Types](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html) -- [Template Literal Types](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types) -- [Tail-Recursion Elimination on Conditional Types](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-5.html#tail-recursion-elimination-on-conditional-types) +Enhance your preferred routing library by incorporating powerful path generation. + +- Path & template rendering +- Nested, absolute, and relative paths +- Parameter parsing and serialization +- Type-safe, customizable, and extendable +- Also useful with JavaScript + +## Quick Reference + +The complete [documentation can be found here](https://kruschid.github.io/typesafe-routes). + +- Methods + - `render`: renders a path with parameters + - `template`: renders a route template + - `parseParams`: parses dynamic segments in a path + - `parseQuery`: parses parameters in a search query +- Chainable operators: + - `bind`: binds parameters to a route for later rendering + - `from`: creates a new route based on a string-based path (i.e. `location.path`) + - `replace`: replaces segments in a path ## Installation (npm/yarn examples) @@ -38,6 +48,7 @@ yarn add typesafe-routes - check for duplicate param names in route tree - context caching +- customizable parsing of search params - demos & utils - react-router - refinejs diff --git a/docs/README.md b/docs/README.md index e438609..570da55 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1 +1,43 @@ -# dsf \ No newline at end of file +# Typesafe Routes + +## Quickstart + +### 1. Dependency Installation +``` sh +npm install typesafe-routes +``` + +### 2. Route Tree Definition + +``` js +import { createRoutes, int } from "typesafe-routes"; + +const routes = createRoutes({ + groups: { + path: ["groups", int("gid")], + children: { + users: { + path: ["users", int("uid").optional], + } + } + } +}); +``` + +### 3. Path Rendering + +``` js +// only required param +routes.render("groups/users", { + path: { gid: 123 }, +}); // => "/groups/123/users" + +// with optional param +routes.render("groups/users", { + path: { gid: 123, uid: 456 }, +}); // => "/groups/123/users/456" +``` + +### 4. Discover More Features + +To access the other examples, use the navigation on the left (if on mobile, click the burger icon in the bottom left corner). diff --git a/docs/basic-features/absolute-routes.md b/docs/basic-features/absolute-routes.md index 6cbac3a..acacdd0 100644 --- a/docs/basic-features/absolute-routes.md +++ b/docs/basic-features/absolute-routes.md @@ -6,13 +6,13 @@ The method `createRoutes` takes a routes object as the first argument, where pro import { createRoutes } from "typesafe-routes"; const routes = createRoutes({ - // route segment name: "about" + // route segment: "about" about: { - // single semgent path array + // single segment path path: ["about-us"] }, blogCategories: { - // multiple string segments + // multiple segments path: ["blog", "categories", "all"] } });