mattmccray

# Public: Define components as CoffeeScript classes
#
# Example:
# 
#   class UserChip extends Component
# 
#     @staticMethod: -> # becomes a static method on the React Component
#       "hello"
# 
#     render: ->

mattmccray

So... I would like to be able to use coffeescript without having to add the ".coffee" extension in my requires (in the lib code, not the test code).

I would guess that in my test a require('coffee-script/register') would work -- but I'd be wrong. :)

For example, I'd like to get this working:

util.coffee:

module.exports= 
  log: (msg)->

mattmccray

# Requires SugarJS...

@Ng=
  annotateDependencies: (Class, props={})->
    Class.$inject or= []
    Class.$injected or= []
    for name,deps of props
      deps= [ deps ].flatten()
      Class.$inject.push deps.shift()
      Class.$injected.push { name, params:deps }

mattmccray

// Creates a 'range' Array, extracted from Liquid.js
function makeRange(from, to) {
  var arr= [],
      left= parseInt(from),
      right= parseInt(to);
  // Check if left and right are NaN, if so try as characters
  if( isNaN(left + right) ) {
    // TODO Add in error checking to make sure ranges are single 
    // character, A-Z or a-z, etc.
    left = from.charCodeAt(0);

mattmccray

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

mattmccray

StyleBuilder

Simple JS-based StyleSheets with no cascading.

That's right. There is intentionally no support for 'externalizing' the CSS, or any cascading support. This is a feature. Be explicit. It's best for everyone.

Also a feature: CSS variables are expanded as soon as the objects are merged. So no, you can't change a variable and have it automatically update any currently rendered nodes.

mattmccray

export function ComponentWithMixins( ...mixins) {

    class MixedComponent extends React.Component { }
    
    for( let mixin of mixins) {
        // TODO: Would need to handle mixin collisions...   
        for( let name of Object.keys( mixin)) {
            MixedComponent.prototype[ name]= mixin[ name]
        }
    }

mattmccray

/* global less, _ */

export function componentStyles( context={}, filename='?') {
  if( _.isArray( context)) {
    return componentStyles()( context)
  }

  let ctx= _.extend( {}, componentStyles.context, context)

  return function ( rules, ...subs){

mattmccray

import alt from 'data/alt'

export function StoreStateMixin( ...stores) {

  stores= stores.map(( store)=>{
    if( typeof( store) === 'string') {
      return alt.getStore( store)
    }
    else {
      return store

mattmccray

// Extracted from a live application. Known to work with latest Chrome/Firefox
// and Animate.css. (IE untested)
export let AnimationMixin= {

  playAnimation( animation='pulse', speed=1000) {
    if(! this.isMounted()) {
      log.warn( "Trying to call .playAnimation() on an unmounted component!")
      return
    }