Skip to content

Commit 3c119ca

Browse files
TylorSTylorS
committed
feat(): really working with Cycle diversity
1 parent d951391 commit 3c119ca

34 files changed

+96
-23092
lines changed

‎.testem.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"framework": "mocha",
3+
"src_files": [
4+
"test/index.js"
5+
],
6+
"before_tests": "browserify test/index.js -t babelify -o test/bundle.js",
7+
"serve_files": [
8+
"test/bundle.js"
9+
],
10+
"after_tests": "rm test/bundle.js",
11+
"launch_in_ci": [
12+
"firefox"
13+
],
14+
"launch_in_dev": [
15+
"chrome"
16+
],
17+
"ignore_missing_launchers": true
18+
}

‎.travis.yml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
language: node_js
2+
addons:
3+
"firefox": "latest"
24
node_js:
35
- "4"
46
- "5"
57
before_script:
68
- "export DISPLAY=:99.0"
79
- "sh -e /etc/init.d/xvfb start"
810
- sleep 3 # give xvfb some time to start
9-
script: npm run test
11+
script: npm run test-ci

‎README.md

Lines changed: 29 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
# cyclic-router
22
cyclic-router is a Router Driver built for Cycle.js
33

4+
**Disclaimer** v2.x.x is for Cycle Diversity!
5+
If you are still using @cycle/core please continue to use v1.x.x
6+
47
## Installation
58

69
Using [npm](https://www.npmjs.com/):
@@ -21,170 +24,37 @@ var makeRouterDriver = require('cyclic-router').makeRouterDriver
2124

2225
For API documentation pleave visit this link [here](http://tylors.github.io/cyclic-router/docs/)
2326

24-
## Example
25-
26-
The example found in the repo can be taken for a test-drive [here](http://tylors.github.io/cyclic-router/example)
27-
28-
## Getting started
29-
30-
###1.
31-
32-
Here is a rundown of the `example` provided with this repo in the folder `/example`. This should allow a better understanding of how to use cyclic-router, for simplicity the styling has been removed here.
33-
34-
Starting in the file which has Cycle `run`, router driver needs to be created here along with the other drivers that you might be using.
35-
36-
```js
37-
// main.js
38-
import {run} from '@cycle/core'
39-
import {makeDOMDriver} from 'cycle-snabbdom'
40-
import {makeRouterDriver} from 'cyclic-router'
41-
import {createHashHistory} from 'history'
42-
43-
import app from './app' // the function of your app
44-
45-
run(app, {
46-
DOM: makeDOMDriver('#app'),
47-
// Notice how you need to feed in funcs from cyclic-history + history
48-
router: makeRouterDriver(createHashHistory()),
49-
})
50-
```
51-
52-
###2.
53-
54-
App.js will be used as the place for showing the correct component in reference to current url (what you'd expect from a router!).
55-
When creating your `routes` object keep in mind that cyclic-router uses [switch-path](https://github.com/staltz/switch-path) and it is worth checking out that repo to understand the structure that `switch-path` expects.
27+
## Basic Usage
5628

5729
```js
58-
// app.js
59-
import {div, nav} from 'cycle-snabbdom'
60-
61-
import Sidebar from './components/sidebar'
62-
import Home from './components/home'
63-
import Inbox from './components/inbox'
64-
import Compose from './components/compose'
65-
import NotFound from './components/notfound'
66-
67-
// routes is used for matching a route to a component
68-
const routes = {
69-
'/': Home,
70-
'/inbox': Inbox,
71-
'/compose': Compose,
72-
'*': NotFound,
73-
}
74-
75-
// the view has sidebar & children passed in
76-
function view(sidebar, children) {
77-
return div([
78-
nav([sidebar]),
79-
div([children]),
80-
])
81-
}
82-
83-
function App(sources) {
84-
const {router} = sources // get router out of sources
85-
const match$ = router.define(routes) // pass routes into the router
86-
const sidebar = Sidebar(sources, match$.pluck('path')) // pass in sources and path$ into our sidebar
87-
88-
// childrenDOM$ takes path$ from `router.define(routes)` above and zips it with values, here is where
89-
// the components swap in reference to the current url, notice router.path(path) is also passed in
90-
// for later use in nested routes.
91-
// This allows components to be nested without ever knowing they are actually nested.
92-
const childrenDOM$ = match$.map(
93-
({path, value}) => value({...sources, router: router.path(path)}).DOM
94-
)
95-
30+
import xs from 'xstream';
31+
import Cycle from '@cycle/xstream-run';
32+
import {makeDOMDriver} from '@cycle/dom';
33+
import {makeRouterDriver} from 'cyclic-router';
34+
import {createHistory} from 'history';
35+
36+
function main(sources) {
37+
const match$ = sources.router.define({
38+
'/': HomeComponent,
39+
'/other': OtherComponent
40+
});
41+
42+
const page$ = match$.map(({path, value}) => {
43+
return value(Object.assign({}, sources, {
44+
router: sources.router.path(path);
45+
}));
46+
});
47+
9648
return {
97-
DOM: sidebar.DOM.combineLatest(childrenDOM$, view),
98-
}
49+
DOM: page$.map(c => c.DOM).flatten(),
50+
router: xs.of('/other'),
51+
};
9952
}
10053

101-
export default App
102-
```
103-
104-
105-
###3.
106-
107-
Next, lets look at what triggers these url changes inside the sidebar
108-
109-
```js
110-
// ./components/sidebar.js
111-
import {ul, li, a} from 'cycle-snabbdom'
112-
113-
function Sidebar(sources, path$) {
114-
// take out createHref from our sources
115-
const {router: {createHref}} = sources
116-
117-
// here the urls we want to use are passed into createHref.
118-
// createHref() will always create the proper href no matter how far it is nested within a hierarchy.
119-
const inboxHref = createHref('/inbox')
120-
const composeHref = createHref('/compose')
121-
const contactHref = createHref('/contact')
122-
123-
// adding li's links and giving them Href's from above
124-
const view$ = path$.map(() => {
125-
return ul({style: ulStyle},[
126-
li([a({props: {href: inboxHref}}, 'Inbox')]),
127-
li([a({props: {href: composeHref}}, 'Compose')]),
128-
li([a({props: {href: contactHref}}, 'Contacts')]),
129-
])
130-
})
131-
132-
return {DOM: view$}
133-
}
134-
135-
export default Sidebar
136-
```
137-
138-
At this point you are at a good stage to be able to make a simple app/site with multiple pages. Next taking a look at nesting these routes directly within children components.
139-
140-
141-
###4.
142-
143-
Nested routing becomes very trivial, as you can see below it is as simple as repeating the same steps as above.
144-
145-
```js
146-
// ./components/inbox/index.js
147-
import {div, ul, li, a} from 'cycle-snabbdom'
148-
149-
import Why from './why'
150-
import Compose from './compose'
151-
import Built from './built'
152-
153-
const routes = {
154-
'*': () => ({DOM: div({style: {opacity: 0}})}),
155-
'/why': Why,
156-
'/built': Built,
157-
'/compose': Compose,
158-
}
159-
160-
function view(createHref) {
161-
return (children) =>
162-
div({}, [
163-
ul([
164-
li([
165-
a({props: {href: createHref('/why')}}, 'Why Cyclic Router?'),
166-
]),
167-
li([
168-
a({props: {href: createHref('/built')}}, 'Built For Cycle.js'),
169-
]),
170-
li([
171-
a({props: {href: createHref('/compose')}}, 'Compose a Message'),
172-
]),
173-
]),
174-
children,
175-
])
176-
}
177-
178-
function Inbox(sources) {
179-
const {router} = sources
180-
const match$ = router.define(routes)
181-
182-
const childrenDOM$ = match$.map(({value}) => value(sources).DOM)
183-
184-
return {DOM: childrenDOM$.map(view(router.createHref))}
185-
}
186-
187-
export default Inbox
54+
Cycle.run(main, {
55+
DOM: makeDOMDriver('#app'),
56+
router: makeRouterDriver(createHistory())
57+
});
18858
```
18959

19060
### Route Parameters

‎buildTests.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎example/.babelrc

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎example/app.css

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎example/contacts.json

Lines changed: 0 additions & 10 deletions
This file was deleted.

0 commit comments

Comments
 (0)