1
1
# cyclic-router
2
2
cyclic-router is a Router Driver built for Cycle.js
3
3
4
+ ## Version 5 Update
5
+
6
+ Version 5 changes the API from a driver to a main wrapper.
7
+
8
+ ``` ts
9
+ import xs from ' xstream' ;
10
+ import {run } from ' @cycle/run' ;
11
+ import {makeDOMDriver } from ' @cycle/dom' ;
12
+ import {makeHistoryDriver } from ' @cycle/history' ;
13
+ import {routerify } from ' cyclic-router' ;
14
+ import switchPath from ' switch-path' ;
15
+
16
+ function main(sources ) {
17
+ const match$ = sources .router .define ({
18
+ ' /' : HomeComponent ,
19
+ ' /other' : OtherComponent
20
+ });
21
+
22
+ const page$ = match$ .map (({path , value }) => {
23
+ return value (Object .assign ({}, sources , {
24
+ router: sources .router .path (path )
25
+ }));
26
+ });
27
+
28
+ return {
29
+ DOM: page$ .map (c => c .DOM ).flatten (),
30
+ router: xs .of (' /other' ),
31
+ };
32
+ }
33
+
34
+ const app = routerify (main , switchPath );
35
+
36
+ run (app , {
37
+ DOM: makeDOMDriver (' #app' ),
38
+ history: makeHistoryDriver ()
39
+ });
40
+
41
+ ```
42
+
4
43
** Disclaimer** Use v4 for Cycle Unified. v2.x.x is for Cycle and v3 is for Cycle Diversity.
5
44
If you are still using @cycle/core please continue to use v1.x.x
6
45
@@ -35,7 +74,7 @@ For API documentation please visit this link [here](http://cyclejs-community.git
35
74
36
75
``` js
37
76
import xs from ' xstream' ;
38
- import Cycle from ' @cycle/xstream- run' ;
77
+ import { run } from ' @cycle/run' ;
39
78
import {makeDOMDriver } from ' @cycle/dom' ;
40
79
import {makeRouterDriver } from ' cyclic-router' ;
41
80
import {createBrowserHistory } from ' history' ;
@@ -59,7 +98,7 @@ function main(sources) {
59
98
};
60
99
}
61
100
62
- Cycle . run (main, {
101
+ run (main, {
63
102
DOM : makeDOMDriver (' #app' ),
64
103
router: makeRouterDriver (createBrowserHistory (), switchPath) // v3
65
104
// router: makeRouterDriver(createHistory()) // <= v2
0 commit comments