goatslacker

import Alt from 'alt'

const alt = new Alt()

const CounterActions = alt.createActions({
  inc: x => x,
  dec: x => x,
});

const CounterStore = alt.createStore({

johanobergman

Laravel-style DI in JavaScript

Honestly, coming from PHP, I really don't like the way dependencies are handled in JavaScript. Using require() or import either gives me a singleton object, or a class that I have to instantiate myself.

The DI container in Laravel is wonderful, and allows you to basically just ask for a dependency in a class constructor and it hands it to you. You can bind things to the container, but you can also resolve things without explicitly binding them, which I think is awesome.

jquense

/*global CodeMirror */

function indexOf(string, pattern, from) {
  if (typeof pattern === "string") {
    var found = string.indexOf(pattern, from);
    return found;
  }
  var m = pattern.exec(from ? string.slice(from) : string);
  return m ? (m.index + from) : -1;
}

goatslacker

import Alt from './'

// the magic sauce
import { createTransform } from './utils/frp'

// decorator utilities
import { createStore, bind } from './utils/decorators'

const alt = new Alt()

mjackson

var React = require('react');

class AutoBindingComponent extends React.Component {
  constructor(props) {
    super(props);

    for (var property in this) {
      if (this.hasOwnProperty(property) && typeof this[property] === 'function') {
        this[property] = this[property].bind(this);
      }

gaearon

/**
 * Stores are just seed + reduce function.
 * Notice they are plain objects and don't own the state.
 */
const countUpStore = {
  seed: {
    counter: 0
  },

  reduce(state, action) {

jquense

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

eldh

module.exports = React.createClass

	displayName: 'InViewWrapper'

	propsTypes:
		onInView: React.PropTypes.func.isRequired
		inViewOffset: React.PropTypes.number

	getDefaultProps: ->
		inViewOffset: 0

gaearon

import React, { Component } from 'react';

// Usage:
//
// @Stateful({
//   initialize(props) {
//     return {
//       count: 0
//     };
//   },

eldh

Style = require '../styles/props'
_ = require 'lodash'

module.exports =
	_setScreenWidth: ->
		if @isMounted() then @setState {screenWidth: window.innerWidth}

	getInitialState: -> screenWidth: window?.innerWidth or 1280

	screenWidth: (minName, maxName) ->