rpominov

function loadSomeStuff(id) {
  // We return basic-stream https://github.com/rpominov/basic-streams
  return _sink => {
    let sink = _sink
    const onSuccess = data => sink({type: 'success', data})
    const onError = error => sink({type: 'error', error})
    stuffLoadingService.load(id).done(onSuccess, onError)
    return () => {
      // We can't unsubscribe from a Promise, so we simply make sink() a noop
      sink = () => {}

rpominov

/* @flow */

type Sink<T> = (payload: T) => void
type Disposer = () => void
type Stream<T> = (s: Sink<T>) => Disposer
type F<A, B> = (x: A) => B
type LiftedF<A, B> = (s: Stream<A>) => Stream<B>


/* Lifts function `A => B` to a funcion that operates

rpominov

Bacon.fromBinder (sink) ->
  request =
    window.requestAnimationFrame        or
    window.webkitRequestAnimationFrame  or
    window.mozRequestAnimationFrame     or
    window.oRequestAnimationFrame       or
    window.msRequestAnimationFrame      or
    (f) -> window.setTimeout(f, 1000 / 60)
  subscribed = true
  handler = ->

rpominov

do (exports = window.baconSwipes = {}) ->

  getPos = (e) ->
    source = (if e.originalEvent.touches
      e.originalEvent.touches[0]
    else
      e.originalEvent)
    x: source.clientX
    y: source.clientY
    event: e

rpominov

<div class="js-spoiler">
  <button class="js-toggle">скрыть/показать</button>
  <p class="js-content">контент контент контент</p>
</div>

catbug """
  .js-spoiler
    .js-toggle
    .js-content
""", ->

rpominov

javascript:(function()%7Bvar%20script%3Ddocument.createElement(%27script%27)%3Bscript.src%3D%27https://gist.github.com/raw/4475306/readhelp.js%3F%27%2BMath.floor((%2Bnew%20Date)/(864e5))%3Bdocument.body.appendChild(script)%3B%7D)()

rpominov

1. If it works for you just use single container on top of each route, othervise see 2
2. Wrap a view into container whenever necessary, but always pass wrapped component via props:

// pure component's render
<foo>
  <bar>
    {this.props.someWrappedChild}
  </bar>

rpominov

Stateles components

// mark relevant parts of result tree with __tetsId & __testClass
const TestTarget = props => 
  <div>
    <Foo foo={props.foo} __tetsId="foo" />
    <ul>
      <li num={1} __testClass="baz" />
      <li num={2} __testClass="baz" />

rpominov

/* Will render <Counter/>, a number input, 
 * and a log-output widget with all onChange calls e.g.
 *   > onChange(1)
 *   > onChange(2)
 */
<Demo 
  target={Counter}
  props={{
    count: Demo.props.int.arbitrary
    onChange: Demo.props.callback.log

rpominov

Just an idea how to do better than https://github.com/mzabriskie/react-draggable

Idea: extract the state — make it controllable.

Instead of this

<Draggable
    axis="x"
 handle=".handle"