preact-hashish-router 0.1.3 → 0.1.6
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 +30 -19
- package/dist/context.d.ts +5 -1
- package/dist/index.js +1 -1
- package/package.json +22 -21
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
## Features
|
|
4
4
|
|
|
5
|
-
- `
|
|
5
|
+
- `browser` and `hash` routing types.
|
|
6
6
|
- Support for lazy-loaded routes (`lazy` loading).
|
|
7
7
|
- Error handling integration with `ErrorRoute`.
|
|
8
8
|
- Fully typed.
|
|
@@ -22,27 +22,38 @@ npm install preact-hashish-router@latest
|
|
|
22
22
|
First, ensure your application is wrapped within the router context. This will allow you to access routes and related functions.
|
|
23
23
|
|
|
24
24
|
```tsx
|
|
25
|
-
import { Route, Router, RouterErrorBoundary } from "preact-hashish-router";
|
|
26
|
-
import
|
|
27
|
-
import
|
|
28
|
-
import
|
|
29
|
-
|
|
30
|
-
|
|
25
|
+
import { NotFound, Route, Router, RouterErrorBoundary } from "preact-hashish-router";
|
|
26
|
+
import { About } from "./routes/About";
|
|
27
|
+
import { AllLevelWildcard } from "./routes/AllLevelWildcard";
|
|
28
|
+
import { Home } from "./routes/Home";
|
|
29
|
+
import { OneLevelWildcard } from "./routes/OneLevelWildcard";
|
|
30
|
+
import { ProductDetails } from "./routes/ProductDetails";
|
|
31
|
+
|
|
32
|
+
export function App() {
|
|
31
33
|
return (
|
|
32
|
-
// or hash for hash-based routing
|
|
33
34
|
<RouterErrorBoundary>
|
|
34
35
|
<Router type="browser">
|
|
35
|
-
<Route
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<Route
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
<Route
|
|
44
|
-
|
|
45
|
-
|
|
36
|
+
<Route
|
|
37
|
+
path="/"
|
|
38
|
+
element={<Home />}
|
|
39
|
+
/>
|
|
40
|
+
<Route
|
|
41
|
+
path="/about"
|
|
42
|
+
element={<About />}
|
|
43
|
+
/>
|
|
44
|
+
<Route
|
|
45
|
+
path="/product/:id"
|
|
46
|
+
element={<ProductDetails />}
|
|
47
|
+
/>
|
|
48
|
+
<Route
|
|
49
|
+
path="/one-level-wildcard/*"
|
|
50
|
+
element={<OneLevelWildcard />}
|
|
51
|
+
/>
|
|
52
|
+
<Route
|
|
53
|
+
path="/all-level-wildcard/**"
|
|
54
|
+
element={<AllLevelWildcard />}
|
|
55
|
+
/>
|
|
56
|
+
<NotFound element={<h1>Custom Not Found Element</h1>} />
|
|
46
57
|
</Router>
|
|
47
58
|
</RouterErrorBoundary>
|
|
48
59
|
);
|
package/dist/context.d.ts
CHANGED
|
@@ -11,12 +11,16 @@ export type HashisherContextMethods = {
|
|
|
11
11
|
export declare const HashisherContext: import("preact").Context<HashisherContextVal & HashisherContextMethods>;
|
|
12
12
|
export declare const useHashisherContext: () => HashisherContextVal & HashisherContextMethods;
|
|
13
13
|
export declare function useParams<T extends Record<string, string>>(): T & {
|
|
14
|
+
/** Wrap wildcards on multilevels path
|
|
15
|
+
* @example
|
|
16
|
+
* `/docs/**` will return `{"_": "some/thing"}` if the path is `/docs/some/thing`
|
|
17
|
+
*/
|
|
14
18
|
_?: string;
|
|
15
19
|
};
|
|
16
20
|
export declare function useSearchParams(): URLSearchParams;
|
|
17
21
|
export declare const useRouter: () => {
|
|
18
22
|
path: string | null;
|
|
19
23
|
params: Record<string, string> | undefined;
|
|
20
|
-
go: (newPath: string) => void;
|
|
21
24
|
searchParams: URLSearchParams;
|
|
25
|
+
go: (newPath: string) => void;
|
|
22
26
|
};
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{forwardRef as k}from"preact/compat";import{createContext as V}from"preact";import{useContext as h}from"preact/hooks";var o=V({active_path:"",active_route_data:null,params:void 0,searchParams:new URLSearchParams,go(){}}),p=()=>{let e=h(o);if(!e)throw new Error("useHashisherContext should be inside a HashisherContext provider");return e};function S(){let e=h(o);if(!e)throw new Error("useParams should be inside a HashisherContext provider");return e.params}function M(){let e=h(o);if(!e)throw new Error("useSearchParams should be inside a HashisherContext provider");return e.searchParams}var N=()=>{let e=h(o);if(!e)throw new Error("useRouter should be inside a HashisherContext provider");return{path:e.active_path,params:e.params,
|
|
1
|
+
import{forwardRef as k}from"preact/compat";import{createContext as V}from"preact";import{useContext as h}from"preact/hooks";var o=V({active_path:"",active_route_data:null,params:void 0,searchParams:new URLSearchParams,go(){}}),p=()=>{let e=h(o);if(!e)throw new Error("useHashisherContext should be inside a HashisherContext provider");return e};function S(){let e=h(o);if(!e)throw new Error("useParams should be inside a HashisherContext provider");return e.params}function M(){let e=h(o);if(!e)throw new Error("useSearchParams should be inside a HashisherContext provider");return e.searchParams}var N=()=>{let e=h(o);if(!e)throw new Error("useRouter should be inside a HashisherContext provider");return{path:e.active_path,params:e.params,searchParams:e.searchParams,go:e.go}};import{jsx as E}from"preact/jsx-runtime";var L=k(({href:e,...t},s)=>{let{go:m}=p();if(!e)throw new Error("A: href must be defined");return E("a",{ref:s,href:e,onClick:i=>{i.preventDefault(),m(e)},...t})});import{Fragment as z,jsx as w}from"preact/jsx-runtime";var U=e=>(A(e.element),w(z,{})),R=w("div",{children:"404 Not Found"}),A=e=>{R=e},d=()=>R;import{addRoute as W,createRouter as F}from"rou3";var l=F(),y=(e,t)=>{W(l,void 0,e,{component:t.element,fallback:t.fallback||null,lazy:!!t.lazy})};import{Fragment as D,jsx as O}from"preact/jsx-runtime";function T(e){return y(e.path,e),O(D,{})}import{useCallback as G,useLayoutEffect as I,useState as u}from"preact/hooks";import{findRoute as J}from"rou3";import{parseURL as v}from"ufo";import{Suspense as B}from"preact/compat";import{jsx as q}from"preact/jsx-runtime";var C=()=>{let{active_route_data:e}=p();return e?e.component===null?d():e.lazy?q(B,{fallback:e.fallback,children:e.component}):e.component:d()};import{jsx as Q,jsxs as X}from"preact/jsx-runtime";var K=e=>{let[t,s]=u(()=>typeof window<"u"?window.location.pathname:null),[m,i]=u(void 0),[g,x]=u(new URLSearchParams),[b,P]=u(null),_=G(r=>{let a=v(window.location.href),n=r===null?a.pathname:r,c=J(l,void 0,n);if(!c){s(n),x(new URLSearchParams(a.search)),P(null),i(void 0),e.type==="browser"&&window.history.pushState(null,"",n);return}s(n),x(new URLSearchParams(a.search)),i({...c.params}),P({...c.data}),e.type==="browser"&&window.history.pushState(null,"",n)},[]);I(()=>{if(e.type!=="browser")return;let r=()=>{_(null)};return window.addEventListener("popstate",r),r(),()=>{window.removeEventListener("popstate",r)}},[]);let H=r=>{let a=v(r).pathname;_(a)};return X(o.Provider,{value:{active_path:t,searchParams:g,params:m,active_route_data:b,go:H},children:[e.children,Q(C,{})]})};import{Component as Y}from"preact";import{jsxs as Z}from"preact/jsx-runtime";var f=class extends Y{state={error:null};static getDerivedStateFromError(t){return{error:t.message}}componentDidCatch(t){this.setState({error:t.message})}render(){return this.state.error?this.props.fallback?this.props.fallback:Z("p",{children:["Oh no! We ran into an error: ",this.state.error]}):this.props.children}};export{L as A,U as NotFound,T as Route,K as Router,f as RouterErrorBoundary,S as useParams,N as useRouter,M as useSearchParams};
|
package/package.json
CHANGED
|
@@ -1,20 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "preact-hashish-router",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"module": "dist/index.js",
|
|
6
5
|
"description": "A simple router for preact",
|
|
7
6
|
"scripts": {
|
|
8
|
-
"types": "tsc -p ./tsconfig.
|
|
7
|
+
"types": "tsc -p ./tsconfig.json",
|
|
9
8
|
"bundle": "esbuild ./src/index.ts --bundle --minify --platform=browser --packages=external --outfile=./dist/index.js --format=esm",
|
|
10
|
-
"
|
|
9
|
+
"bundle:watch": "esbuild --watch ./src/index.ts --bundle --minify --platform=browser --packages=external --outfile=./dist/index.js --format=esm",
|
|
10
|
+
"format": "prettier --write ./src --ignore-unknown --cache",
|
|
11
11
|
"app:dev": "vite",
|
|
12
12
|
"build": "rm -rf ./dist && bun run types && bun run bundle",
|
|
13
13
|
"prepublishOnly": "bun run types && bun run bundle",
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
14
|
+
"patch": "bun pm version patch && git push",
|
|
15
|
+
"minor": "bun pm version minor && git push",
|
|
16
|
+
"major": "bun pm version major && git push",
|
|
17
|
+
"release": "changelogen --release --push && bun publish"
|
|
17
18
|
},
|
|
19
|
+
"workspaces": [
|
|
20
|
+
"./examples/*"
|
|
21
|
+
],
|
|
18
22
|
"exports": {
|
|
19
23
|
".": "./dist/index.js"
|
|
20
24
|
},
|
|
@@ -26,7 +30,6 @@
|
|
|
26
30
|
"browser",
|
|
27
31
|
"hash"
|
|
28
32
|
],
|
|
29
|
-
"target": "es2020",
|
|
30
33
|
"author": {
|
|
31
34
|
"name": "LiasCode",
|
|
32
35
|
"email": "liascode.dev@gmail.com",
|
|
@@ -35,27 +38,25 @@
|
|
|
35
38
|
"repository": {
|
|
36
39
|
"url": "https://github.com/LiasCode/preact-hashish-router"
|
|
37
40
|
},
|
|
38
|
-
"devDependencies": {
|
|
39
|
-
"@preact/preset-vite": "^2.10.2",
|
|
40
|
-
"@types/node": "^22.17.1",
|
|
41
|
-
"esbuild": "^0.25.9",
|
|
42
|
-
"preact-render-to-string": "^6.5.13",
|
|
43
|
-
"prettier": "^3.6.2",
|
|
44
|
-
"prettier-plugin-organize-imports": "^4.2.0",
|
|
45
|
-
"typescript": "^5.9.2",
|
|
46
|
-
"vite": "^6.3.5"
|
|
47
|
-
},
|
|
48
41
|
"files": [
|
|
49
42
|
"dist",
|
|
50
43
|
"LICENSE",
|
|
51
44
|
"package.json",
|
|
52
45
|
"README.md"
|
|
53
46
|
],
|
|
54
|
-
"peerDependencies": {
|
|
55
|
-
"preact": "^10.27.0"
|
|
56
|
-
},
|
|
57
47
|
"dependencies": {
|
|
58
48
|
"rou3": "^0.7.3",
|
|
59
49
|
"ufo": "^1.6.1"
|
|
50
|
+
},
|
|
51
|
+
"peerDependencies": {
|
|
52
|
+
"preact": "^10.27.0"
|
|
53
|
+
},
|
|
54
|
+
"devDependencies": {
|
|
55
|
+
"@types/node": "^22.17.1",
|
|
56
|
+
"changelogen": "^0.6.2",
|
|
57
|
+
"esbuild": "^0.25.9",
|
|
58
|
+
"prettier": "^3.6.2",
|
|
59
|
+
"prettier-plugin-organize-imports": "^4.2.0",
|
|
60
|
+
"typescript": "^5.9.2"
|
|
60
61
|
}
|
|
61
62
|
}
|