dzNavitski

TypeScript supports Pick to allow you to get a "subset" object type of a given type, but there is no built-in Pick for deeper nested fields.

If you have a function that takes a large object as argument, but you don't use all of its fields, you can use Pick, Pick2, Pick3, etc to narrow down the input type to be only just what you need. This will make it easier to test your function, because when mocking the input object, you don't need to pass all fields of the "large" object.

dzNavitski

import React from 'react';

function onlyChild(children) {
  return Array.isArray(children) ? children[0] : children;
}

export function combineContext(contexts) {
  class Provider extends React.Component {
    render() {
      const init = this.props.children;

dzNavitski

NGRX Data

A higher-order service abstraction for NGRX. It eliminates the boilerplate for CRUD operations with lists.

provideStore({ pizza: entityReducer('pizza') })

const entity = thie.entityService<Pizza>('pizza', this.pizzaService);
entity.query();

const collection$ = this.store.select(state =&gt; state.pizza.collection);

dzNavitski

module.exports = {
  root: true, // make to not take in any user specified rules in parent folders
  parser: 'babel-eslint',
  extends: ['airbnb', 'prettier', 'prettier/flowtype', 'prettier/react'],
  env: {
    browser: true,
    node: true,
    jest: true,
  },
  plugins: ['react', 'import', 'flowtype'],

dzNavitski

/**
 * Prevent body scroll and overscroll.
 * Tested on mac, iOS chrome / Safari, Android Chrome.
 *
 * Based on: https://benfrain.com/preventing-body-scroll-for-modals-in-ios/
 *           https://stackoverflow.com/a/41601290
 *
 * Use in combination with:
 * html, body {overflow: hidden;}
 *

dzNavitski

Here is how I ended up making this work. For more context and background on the discussion, I recommend reading conversation in ReduxForm#2169 (and chiming in with your learnings, etc).

So, as per the conversation there, I tried the 'many little forms' approach. I am sharing both my approach, and a crude abstracted out gist that can hopefully help out y'all.

Essentially, with this approach:

1. You want to use each field as a little form which submits debounced onChange.
2. For each field as a little form, you want to abstract that into a component which can be provided an input, as much as possible.
3. Set autofocus for the first form.
4. For debounced onChange, I used react-debounced-input.

dzNavitski

The gist: by having a Promise adopt the state of a forever pending one, you can suspend its then handlers chain.

const foreverPending = new Promise(function() {});

let cancel

new Promise(function(fulfill, reject) {
  cancel = function() {fulfill(foreverPending)}
  setTimeout(fulfill, 1000, 5)

dzNavitski

import { Component, PropTypes } from 'react'
import { noop } from 'lodash'
import raf from 'raf'

const cache = new Map()

export function createNonBlockingRenderLoop({ key, concurrencyLevel = 1 }) {
  if (cache.has(key)) {
    return cache.get(key)
  }

dzNavitski

(function() {
'use strict';
angular.module('simple-virtual-repeater', [])
    .directive('virtualRepeater', virtualRepeater);

virtualRepeater.$inject = ['$compile', '$timeout'];
function virtualRepeater($compile, $timeout) {
    var directive = {
        restrict: 'EA',
        replace: 'true',

dzNavitski

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.7)
// ----

=e($name)
  @at-root #{&}__#{$name}
    @content
=m($name)
  @at-root #{&}--#{$name}