-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.tsx
83 lines (71 loc) · 1.7 KB
/
app.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import * as Synks from '../src';
import { Hello } from './hello';
export class RouterContext extends Synks.Context {
route = location.pathname || '/';
constructor() {
super();
window.addEventListener('popstate', () => {
if (location.pathname !== this.route) {
this.replace(location.pathname);
}
}, false);
}
navigate(route) {
this.route = route;
history.pushState({}, document.title, route);
}
replace(route) {
this.route = route;
history.replaceState({}, document.title, route);
}
}
export function* Router(props: { routes: Record<string, any> }) {
const router = yield RouterContext;
while (true) {
const { routes } = props;
const route = routes[router.route];
switch (true) {
case route instanceof Function: {
yield route();
break;
}
default: {
const error = routes['*'];
if (error instanceof Function) {
yield error();
} else {
yield <div>ERROR 404</div>;
}
}
}
}
}
const routes = {
'/': () => <div>Examples</div>,
'/hello': () => <Hello what="cool" />,
'/hello2': () => <Hello what="cool" />,
'*': () => <div>Error 404</div>,
};
function* Header() {
const router = yield RouterContext;
while (true) {
yield (
<div class="header">
<ul>
<li onclick={() => router.navigate('/')}>Start</li>
<li onclick={() => router.navigate('/hello')}>Hello</li>
<li onclick={() => router.navigate('/hello2')}>Hello2</li>
</ul>
</div>
);
}
}
export function App() {
return (
<RouterContext>
<Header />
<hr />
<Router routes={routes} />
</RouterContext>
);
}