littlepsylo

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

littlepsylo

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

littlepsylo

The Ultimate Unit Testing Cheat-sheet

For Mocha, Chai and Sinon

using mocha/chai/sinon for node.js unit-tests? check out my utility: mocha-stirrer to easily reuse test components and mock require dependencies

---

• Sinon Chai
• Chai
• Sinon
• Mocha

littlepsylo

import React, { Component, PropTypes } from 'react'

import {
  Text,
  View,
  TouchableHighlight,
  ScrollView,
  StatusBar,
  Dimensions,
  Animated

littlepsylo

import React, { Component, PropTypes } from 'react'
import {
  Text,
  View,
  ScrollView
} from 'react-native'

import Redirect from 'react-router/Redirect'
import Match from 'react-router/Match'

littlepsylo

function waitForElement(selector) {
  return new Promise(function(resolve, reject) {
    var element = document.querySelector(selector);

    if(element) {
      resolve(element);
      return;
    }

    var observer = new MutationObserver(function(mutations) {

littlepsylo

function monitorEvents(element) {
  var log = function(e) { console.log(e);};
  var events = [];
  
  for(var i in element) {
    if(i.startsWith("on")) events.push(i.substr(2));
  }
  events.forEach(function(eventName) { 
    element.addEventListener(eventName, log); 
  }); 

littlepsylo

const io = new WebSocket('ws://yourdomain:port/socket.io/?transport=websocket')

io.onclose = e => console.log('onclose', e.code, e.reason)
io.onerror = e => console.log('onerror', e.message)
io.onopen = () => console.log('connected !')

littlepsylo

import React, { Component } from 'react'
import Subapp from './subapp/Root'

class BigApp extends Component {
  render() {
    return (
      <div>
        <Subapp />
        <Subapp />
        <Subapp />

littlepsylo

var typeOf = (function(Object, RegExp){
  // WTFPL License - http://en.wikipedia.org/wiki/WTFPL
  // thanks to @jdalton and @ljharb
  var toString = Object.prototype.toString,
      cache = (Object.create || Object)(null);
  return function typeOf(Unknown) {
    var asString = typeof Unknown;
    return asString == 'object' ? (
      Unknown === null ? 'null' : (
        cache[asString = toString.call(Unknown)] || (