skaterdad / cycle-snabbdom-examples

Cycle.js Component Examples with Routing & Transitions!

Cycle version & Stream Library

This branch uses Cycle Diversity w/ xstream.

cycle-snabbdom-examples

Examples using Cycle.js with Snabbdom as the v-dom library (this is now default).

Examples

1. Color Changer - Basically just a counter app, but background color changes by looping through an array.
2. Redirect After Form Post - Shows one way of handling URL redirects after <form> posts.
3. Github Search - Clone of official Cycle example, with snabbdom-specific animations as search results are added/removed.
4. Hero Transition (Simple) - Checkbox toggles between pages. Each page is a box with some text. The text does a hero transition.
5. Hero Transition (Complex) - 1st page pulls repo list from github. 2nd page is detail for a specific repo. The owner avatar does a hero transition.
6. Hero Transition (Tests) - Hero transitions on multiple types of DOM elements, including text which changes orientation and size. Best viewed in Chrome. Other browsers have problems with one of the text transitions.

snabbdom-specific animations

• Route/Page transitions - currently just opacity fade, but you can easily extend to add transforms. The important part is that your page wrappers are position: absolute so they can overlap while transitioning.
• Search result items animate when added & removed.
• Hero transitions (aka. shared element transitions). An item which is common to two pages will smoothly animate to the new position. This relies on the snabbdom hero module, so you'll need to pass a list of modules to the Cycle DOM driver.

Future plans

• Document how some of these examples work in more detail. There is a careful balance of position: relative and position: absolute on certain elements and containers.

How to use

For client-side hot reloading:

1. Clone the repo
2. Choose a branch
3. npm install
4. npm start
5. Open your browser to http://localhost:3000/

cycle-snabbdom-examples's Issues

Github search page shows previous results on load

Will this be fixed with Cycle-Nested updates?

HTTP requests go crazy when re-entering that example

The project currently contains two example apps, which are implemented as nested dialogues. You can toggle between them, similar to how the routes are toggle in cycle-starter.

The following steps produce a nasty bug (open the browser network monitor in dev tools):

1. Go to the Github search example and do a couple searches. You should see one request being sent per search, possibly some canceled requests depending on how fast you type (it has a 500ms delay).
2. Switch back to the Color Changer example.
3. Go back to the Github search example. Bug #1 is that this page fires off a request right away (duplicate of the last one you did before leaving the page, this issue will be fixed later). Bug #2 is that new searches will fire off 4 times at once. Github's API server doesn't like it, so tread carefully to avoid errors.
4. If you repeat this process, you'll end up with the searches firing off 8 at once.

Is anyone able to shed some light on this? I am new to Rx and Cycle, so I feel like I'm missing something fundamental.

DOM events seem to be firing multiple times

When putting .do(() => {console.log()}) on the DOM.select().events() observables, the messages appear 2 at a time.

Loading indicator code causes http request to fire multiple times

After the last commit, which added a loading indicator, the GitHub searches fire 2 requests every time.