Skip to content

Instantly share code, notes, and snippets.

Roman Pominov rpominov

Block or report user

Report or block rpominov

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@rpominov
rpominov / compound-components.md
Last active Sep 19, 2018
Compound Components
View compound-components.md

My relationship with Compound Components

What are these?

Compound Component is a pattern in React when a component doesn't work by itself and needs other specific components to be its children or parents in order to operate.

Here is an introduction video https://www.youtube.com/watch?v=hEGg-3pIHlE

How do I feel about it?

@rpominov
rpominov / 1_new_fantasy-land.md
Last active Nov 5, 2016
Example of use of the new approach for fantasy-land
View 1_new_fantasy-land.md
View Task.js
type Result<L,R> =
| {T: 'Right', value: R}
| {T: 'Left', value: L}
| {T: 'Thrown', error: any}
| {T: 'Cancel'}
type Cancel = () => void
type RunHandler<L,R> =
| (result: Result<L,R>) => void
@rpominov
rpominov / Type.js
Last active May 15, 2016
An idea of Algebraic data types helper in JS
View Type.js
const Maybe = Type({Just: ['value'], Nothing: []}, {
map(fn, maybe) {
return Maybe.case({
Just: ({value}) => Maybe.Just(fn(value)),
// Should x => x be the default handler in case() so we could omit Nothing here?
Nothing: m => m,
})
}
View fl2.md

Setoid

  1. S.equals(a, a) = true (reflexivity)
  2. S.equals(a, b) = S.equals(b, a) (symmetry)
  3. If S.equals(a, b) and S.equals(b, c), then S.equals(a, c) (transitivity)

Semigroup

  1. S.concat(S.concat(a, b), c) is equivalent to S.concat(a, S.concat(b, c)) (associativity)
View React-subscribe-component.js
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 = () => {}
View streams.js
/* @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
View router-concept.md
// trnsitionRequests -> BrowserAPI -> [ resolveRoute -> loadData -> render -> restoreScroll ]

// poor man's strem.flatMapLatest()
router.pipe((payload, next) => {
  next(1)
  next(2)
  return () => {
    // cleanup
  }
@rpominov
rpominov / containers-and-pure-views-in-react.md
Last active Nov 23, 2015
About containers VS pure views in React (an untested idea)
View containers-and-pure-views-in-react.md
  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>
</foo>
@rpominov
rpominov / 01-react-testing.md
Last active Nov 1, 2015
React testing ideas
View 01-react-testing.md

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" />
You can’t perform that action at this time.