Cheng Lou chenglou

## gist:8701065

      
              1 file
            
          
              0 forks
            
          
              4 comments
            
          
              1 star
            
          
                chenglou
                / gist:8701065
            
            
              Last active
              August 29, 2015 13:55
            
              
                CommonJS-style Asset Bundling
              
          
    The rough underlying implementation is more or less done. Right now we're deciding betwen two forms, require('a.png') vs. requireStatic('a.png').
require('a.png')


Pros: more familiar. One single require for assets too.
Cons: Doesn't follow the CommonJS specs. Overloads require.

requireStatic('a.png')


Pros: isn't tied to CommonJS.
Cons: another thing to learn.


## Anim.jsx
/** @jsx React.DOM */

'use strict';

var Group = React.addons.TransitionGroup;

var Item = React.createClass({
  componentWillEnter: function(done) {
    this.props.componentWillEnter();
    done();

## FRP.js
var App2 = React.createClass({
  getInitialState: function() {
    return {
      x: 0,
      y: 0
    };
  },

  componentDidMount: function() {
    var rect = this.refs.rect.getDOMNode();

## gist:3868454d532dd19ecc0d

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                chenglou
                / gist:3868454d532dd19ecc0d
            
            
              Last active
              August 29, 2015 14:09
            
              
                How to try React
              
          
    If you have no experience with setting up your environment for web development, and don't feel like doing it, just go to the React docs page and play with the live editors on it.
If you're serious about this and want to use React in your app:
npm install react or bower install react
Or you have no idea what that means, then just following the few lines of instructions here
Have fun!

  
## gist:3727637cba297e839642
'use strict';

var transit = require('transit-js');
var I = require('immutable');

var wCache = I.Map();
var wid = 0;

var listHandler = transit.makeWriteHandler({
  tag: function(v) {

## Demo.jsx
import React from 'react';
import {Spring} from '../src/Spring';

const childVal = 275;

const Demo = React.createClass({
  getInitialState() {
    return {open: false};
  },

## demo.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  * {
    padding: 0;
    margin: 0;

## gist:caff72e06e0c3d72c9b4

      
              1 file
            
          
              1 fork
            
          
              0 comments
            
          
              5 stars
            
          
                chenglou
                / gist:caff72e06e0c3d72c9b4
            
            
              Last active
              October 24, 2015 20:05
            
              
                Thoughts on Layout
              
          
    While I was experimenting with animation, I had to make a few basic prototypes for a layout system and see how they intertwine. Here's the API in conjunction with React:
var MyComp = React.createClass({
  registerLayoutValues: function() {
    return {
      self: {
        width: 30,
        left: (get('parent', 'width') - get('self', 'width')) / 2 // Center.
 }

  
## smallestTemplateEngineEver.coffee
# 21 lines, gutter at 80, for a fully functional coffeescript templater.
global.compiledHTML = ''
makeTagFunc = (tagName, isSelfClosing) ->
  (args...) ->
    selfEndingTag = if isSelfClosing then ' /' else ''
    attrs = args.filter((i) -> typeof i is 'object').reduce(((i, j) ->
      i + ("#{key}='#{val}'" for key, val of j).join ' '), '')
    inner = args.filter((i) ->
      typeof i != 'function' and typeof i != 'object').map((i) -> i).join ' '
    global.compiledHTML += "<#{(tagName + ' ' + attrs).trim()}#{selfEndingTag}>"

## csx.js
// globalize everything
for (var tag in React.DOM) {
  if ({}.hasOwnProperty.call(React.DOM, tag) && tag !== 'injection') {
    window[tag] = (function(tag) {
      return function(attrs, rest) {
        if (arguments.length === 1) {
          return React.DOM[tag](null, attrs);
        }
        return React.DOM[tag](attrs, rest);
      };
	/** @jsx React.DOM */

	'use strict';

	var Group = React.addons.TransitionGroup;

	var Item = React.createClass({
	componentWillEnter: function(done) {
	this.props.componentWillEnter();
	done();
	var App2 = React.createClass({
	getInitialState: function() {
	return {
	x: 0,
	y: 0
	};
	},

	componentDidMount: function() {
	var rect = this.refs.rect.getDOMNode();
	'use strict';

	var transit = require('transit-js');
	var I = require('immutable');

	var wCache = I.Map();
	var wid = 0;

	var listHandler = transit.makeWriteHandler({
	tag: function(v) {
	import React from 'react';
	import {Spring} from '../src/Spring';

	const childVal = 275;

	const Demo = React.createClass({
	getInitialState() {
	return {open: false};
	},
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
	padding: 0;
	margin: 0;
	# 21 lines, gutter at 80, for a fully functional coffeescript templater.
	global.compiledHTML = ''
	makeTagFunc = (tagName, isSelfClosing) ->
	(args...) ->
	selfEndingTag = if isSelfClosing then ' /' else ''
	attrs = args.filter((i) -> typeof i is 'object').reduce(((i, j) ->
	i + ("#{key}='#{val}'" for key, val of j).join ' '), '')
	inner = args.filter((i) ->
	typeof i != 'function' and typeof i != 'object').map((i) -> i).join ' '
	global.compiledHTML += "<#{(tagName + ' ' + attrs).trim()}#{selfEndingTag}>"
	// globalize everything
	for (var tag in React.DOM) {
	if ({}.hasOwnProperty.call(React.DOM, tag) && tag !== 'injection') {
	window[tag] = (function(tag) {
	return function(attrs, rest) {
	if (arguments.length === 1) {
	return React.DOM[tag](null, attrs);
	}
	return React.DOM[tag](attrs, rest);
	};