waymark 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +55 -23
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,11 +7,36 @@
|
|
|
7
7
|
</p>
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
10
|
-
<a href="https://www.npmjs.com/package/waymark"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
<a href="https://www.npmjs.com/package/waymark">
|
|
11
|
+
<img
|
|
12
|
+
src="https://img.shields.io/npm/v/waymark?style=flat-square&color=0B0D0F&labelColor=0B0D0F"
|
|
13
|
+
alt="npm version"
|
|
14
|
+
/>
|
|
15
|
+
</a>
|
|
16
|
+
<a href="https://www.npmjs.com/package/waymark">
|
|
17
|
+
<img
|
|
18
|
+
src="https://img.badgesize.io/https://unpkg.com/waymark/dist/index.js?compression=gzip&label=gzip&style=flat-square&color=0B0D0F&labelColor=0B0D0F"
|
|
19
|
+
alt="gzip size"
|
|
20
|
+
/>
|
|
21
|
+
</a>
|
|
22
|
+
<a href="https://www.npmjs.com/package/waymark">
|
|
23
|
+
<img
|
|
24
|
+
src="https://img.shields.io/npm/dm/waymark?style=flat-square&color=0B0D0F&labelColor=0B0D0F"
|
|
25
|
+
alt="downloads"
|
|
26
|
+
/>
|
|
27
|
+
</a>
|
|
28
|
+
<a href="https://github.com/strblr/waymark/blob/master/LICENSE">
|
|
29
|
+
<img
|
|
30
|
+
src="https://img.shields.io/npm/l/waymark?style=flat-square&color=0B0D0F&labelColor=0B0D0F"
|
|
31
|
+
alt="license"
|
|
32
|
+
/>
|
|
33
|
+
</a>
|
|
34
|
+
<a href="https://github.com/sponsors/strblr">
|
|
35
|
+
<img
|
|
36
|
+
src="https://img.shields.io/github/sponsors/strblr?style=flat-square&color=0B0D0F&labelColor=0B0D0F"
|
|
37
|
+
alt="sponsors"
|
|
38
|
+
/>
|
|
39
|
+
</a>
|
|
15
40
|
</p>
|
|
16
41
|
|
|
17
42
|
<p align="center">
|
|
@@ -23,9 +48,10 @@
|
|
|
23
48
|
Waymark is a routing library for React built around three core ideas: **type safety**, **simplicity**, and **minimal overhead**.
|
|
24
49
|
|
|
25
50
|
- **Fully type-safe** - Complete TypeScript inference for routes, path params, and search params
|
|
26
|
-
- **Zero config** - No build plugins, no CLI
|
|
51
|
+
- **Zero config** - No build plugins, no CLI, no codegen, no config files, very low boilerplate
|
|
27
52
|
- **Familiar API** - If you've used React Router or TanStack Router, you'll feel at home
|
|
28
|
-
- **3.6kB gzipped** - Extremely lightweight with just one 0.4kB dependency, so
|
|
53
|
+
- **3.6kB gzipped** - Extremely lightweight with just one 0.4kB dependency, so ~4kB total
|
|
54
|
+
- **Feature packed** - Search param validation, lazy loading, data preloading, SSR, error boundaries, etc.
|
|
29
55
|
- **Not vibe-coded** - Built with careful design and attention to detail by a human
|
|
30
56
|
- **Just works** - Define routes, get autocomplete everywhere
|
|
31
57
|
|
|
@@ -80,34 +106,39 @@ Waymark is a routing library for React built around three core ideas: **type saf
|
|
|
80
106
|
|
|
81
107
|
# Showcase
|
|
82
108
|
|
|
83
|
-
Here's what
|
|
109
|
+
Here's what routing looks like with Waymark:
|
|
84
110
|
|
|
85
111
|
```tsx
|
|
86
|
-
import { route, RouterRoot, Link, useParams } from "waymark";
|
|
112
|
+
import { route, RouterRoot, Outlet, Link, useParams } from "waymark";
|
|
87
113
|
|
|
88
|
-
//
|
|
89
|
-
const
|
|
114
|
+
// Layout
|
|
115
|
+
const layout = route("/").component(() => (
|
|
116
|
+
<div>
|
|
117
|
+
<nav>
|
|
118
|
+
<Link to="/">Home</Link>
|
|
119
|
+
<Link to="/users/:id" params={{ id: "42" }}>
|
|
120
|
+
User
|
|
121
|
+
</Link>
|
|
122
|
+
</nav>
|
|
123
|
+
<Outlet />
|
|
124
|
+
</div>
|
|
125
|
+
));
|
|
90
126
|
|
|
91
|
-
|
|
127
|
+
// Pages
|
|
128
|
+
const home = layout.route("/").component(() => <h1>Home</h1>);
|
|
92
129
|
|
|
93
|
-
function UserPage() {
|
|
130
|
+
const user = layout.route("/users/:id").component(function UserPage() {
|
|
94
131
|
const { id } = useParams(user); // Fully typed
|
|
95
|
-
return
|
|
96
|
-
|
|
97
|
-
<h1>User {id}</h1>
|
|
98
|
-
<Link to="/">Back to home</Link> {/* Also fully typed */}
|
|
99
|
-
</div>
|
|
100
|
-
);
|
|
101
|
-
}
|
|
132
|
+
return <h1>User {id}</h1>;
|
|
133
|
+
});
|
|
102
134
|
|
|
103
|
-
//
|
|
135
|
+
// Setup
|
|
104
136
|
const routes = [home, user];
|
|
105
137
|
|
|
106
138
|
function App() {
|
|
107
139
|
return <RouterRoot routes={routes} />;
|
|
108
140
|
}
|
|
109
141
|
|
|
110
|
-
// Register for type safety
|
|
111
142
|
declare module "waymark" {
|
|
112
143
|
interface Register {
|
|
113
144
|
routes: typeof routes;
|
|
@@ -115,7 +146,7 @@ declare module "waymark" {
|
|
|
115
146
|
}
|
|
116
147
|
```
|
|
117
148
|
|
|
118
|
-
|
|
149
|
+
Everything autocompletes and type-checks automatically. No heavy setup, no magic, just a simple API that gets out of your way.
|
|
119
150
|
|
|
120
151
|
---
|
|
121
152
|
|
|
@@ -1733,6 +1764,7 @@ interface PreloadContext {
|
|
|
1733
1764
|
- Possibility to pass an arbitrary context to the Router instance for later use in preloads?
|
|
1734
1765
|
- Relative path navigation? Not sure it's indispensable given that users can export/import route objects and pass them as navigation option.
|
|
1735
1766
|
- Document usage in test environments
|
|
1767
|
+
- Devtools? Let me know if needed.
|
|
1736
1768
|
- Open to suggestions, we can discuss them [here](https://github.com/strblr/waymark/discussions).
|
|
1737
1769
|
|
|
1738
1770
|
---
|