calmm-js / documentation Goto Github PK

How about making a github page with some nicer typography? Reading the default github formatting when there's so much text is a pain.

You've kindly provided many helpful examples, however they are all running in JSbin-esque services.

Aside from the high level concepts and APIs, I'd like to see an example application or skeleton app that includes modern tooling: tree shaking/dead code elimination via Rollup, etc.

The partial.lenses readme discusses this, so I'm pretty sure Calmm.js' authors know and appreciate these techniques.

The Quickstart included in this documentation is based off of CRA which uses webpack and doesn't include any advanced dead code elimination.

I realize bundle optimizations probably don't belong in a Quickstart, and that given the wild west of JS tooling its not exactly your place as a library authors to hold our hands and tuck us in at night. But for those of us unfamiliar with bootstrapping out own JS projects but nevertheless intrigued by the functional and reactive concepts Calmm teaches, a simple example would take us far!

given a stream like this:

const searchUrl  = `https://my.api/users`

const UsersPage = () => {
  const users = U.seq(
    ??? what goes here? Atom? EventEmitter? Bus?,
    U.debounce(300),
    U.flatMapLatest(q => q.length < 3
      ? {items: []}
      : Kefir.fromPromise(fetch(searchUrl).then(req => req.json()))),
    U.view('users'),
    U.map(it => ({
      id: it.id,
      name: it.full_name,
    })))

    return ({<button onClick={?????}>refresh</button> {listOfUsers(users)}

1. how would you execute this on mount? EventEmitter? Bus? Atom? Something else?
2. how would you implement a refresh button?

This example is from milankinen/react-reactive-toolkit.
I can't quite wrap my head around how to do this in calmm. Say I wanted to update two state atoms: searchText and repos. Is there a way to express the atoms as observables instead of .modify-ing them? When using observables as in the example, are you not even supposed to use any state? Or would I have to subscribe to seperate observables who are combined() from the atoms, and then via something like onValue() imperatively set the atom? That feels weird.

import React from "react"
import Kefir from "kefir"
import R from "react.reactive"
import {render} from "react-dom"


const searchUrl = q =>
  `https://api.github.com/search/repositories?q=${q}&sort=stars&order=desc`

const GithubSearch = R(({events}) => {
  const searchText =
    Kefir.fromEvents(events, "searchText:changed")
      .map(e => e.target.value)
      .merge(Kefir.fromEvents(events, "searchText:clear").map(() => ""))
      .merge(Kefir.constant(""))  // initial value
      .toProperty()

  const repos =
    searchText
      .debounce(300)
      .map(encodeURIComponent)
      .flatMapLatest(q => q.length < 3
        ? Kefir.constant({items: []})
        : Kefir.fromPromise(fetch(searchUrl(q)).then(req => req.json()))
      )
      .map(res => res.items.map(it => ({
        id: it.id,
        name: it.full_name,
        stars: it.stargazers_count
      })))

  return (
    <div>
      <h1>Github Repository search</h1>
      <R.input placeholder="Repository name"
               emits={{change: "searchText:changed"}}
               value={searchText} />
      <R.button emits={{click: "searchText:clear"}}
                disabled={searchText.map(t => t.length === 0)}>
        Reset
      </R.button>
      <R.ul>
        {repos.map(repos => repos.map(({id, name, stars}) =>
          <li key={id}>
            {name} (stars: {stars})
          </li>
        ))}
      </R.ul>
    </div>
  )
})

render(<GithubSearch />, document.getElementById("app"))

Computer value concept looks very interesting, but it looks strange why it is put into 'react' package? I thought pure model should not depend from any 'view' stack, right?

I've asked this question within Gitter, maybe it will be useful to add more documentation about it:

Hi! I'm new in FRP world and just found your library. I'm building chat-based app and trying to make my xmpp work in FRP fashion - trying to migrate from redux where i have already too much boilerplate. In redux i have action creator that call xmpp connect function and then change state within xmpp reducer. Now i want to implement the same using Calmm. I've read https://github.com/calmm-js/documentation/blob/master/redux-vs-calmm.md but it seems not have "howto" about doing things "right" in Calmm, but just comparison. I've checked TodoMVC example, but it doesn't look very clear.

In other words how to do properly side effects using Calmm?