├── .gitignore
├── LICENSE.txt
├── README.org
├── ROADMAP.org
├── benchmark
    ├── redux-immutable.js
    ├── redux.js
    ├── timer.js
    └── transdux-clj.js
├── ci
    ├── github_page.sh
    └── npm-login.sh
├── circle.yml
├── docs
    └── api.org
├── examples
    └── todomvc
    │   ├── bin
    │       └── compiler.jar
    │   ├── package.json
    │   ├── public
    │       └── index.html
    │   └── src
    │       ├── app.jsx
    │       └── components
    │           ├── Footer.jsx
    │           ├── Header.jsx
    │           ├── MainSection.action.js
    │           ├── MainSection.jsx
    │           ├── TodoItem.jsx
    │           ├── TodoTextInput.jsx
    │           └── __tests__
    │               └── TodoItem-spec.jsx
├── lib
    ├── __tests__
    │   └── transdux-test.jsx
    └── transdux.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by https://www.gitignore.io/api/node
 2 | 
 3 | ### Node ###
 4 | # Logs
 5 | logs
 6 | *.log
 7 | npm-debug.log*
 8 | ##########idea
 9 | .idea/
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | 
15 | # Directory for instrumented libs generated by jscoverage/JSCover
16 | lib-cov
17 | 
18 | # Coverage directory used by tools like istanbul
19 | coverage
20 | 
21 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
22 | .grunt
23 | 
24 | # node-waf configuration
25 | .lock-wscript
26 | 
27 | # Compiled binary addons (http://nodejs.org/api/addons.html)
28 | build/Release
29 | 
30 | # Dependency directory
31 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
32 | node_modules
33 | 
34 | examples/todomvc/public/*
35 | !examples/todomvc/public/index.html
36 | 
37 | 
38 | transdux.js
39 | public


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | /**
 2 | The MIT License (MIT)
 3 | 
 4 | Copyright (c) 2015 Jichao Ouyang
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE.
23 | */
24 | 


--------------------------------------------------------------------------------
/README.org:
--------------------------------------------------------------------------------
  1 | * Transdux
  2 | #+BEGIN_QUOTE
  3 | For better Performance, please Try most.js version [[https://github.com/jcouyang/mostux][mostux]]
  4 | #+END_QUOTE
  5 | 
  6 | I'm trying to documenting in more detail, but if you have any question, feel free to 
  7 |   #+ATTR_HTML: title="Join the chat at https://gitter.im/jcouyang/transdux"
  8 |   [[https://gitter.im/jcouyang/transdux?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge][file:https://badges.gitter.im/Join%20Chat.svg]]
  9 | 
 10 | Circle CI [[https://circleci.com/gh/jcouyang/transdux][https://circleci.com/gh/jcouyang/transdux.svg?style=svg]]
 11 | 
 12 | [[http://blog.oyanglul.us/javascript/react-transdux-the-clojure-approach-of-flux.html][>中文<]]
 13 | 
 14 | #+BEGIN_QUOTE
 15 | Finnally a flux like framework don't even need a tutorial, our [[./examples/todomvc][TodoMVC]] will tell you all.
 16 | #+END_QUOTE
 17 | 
 18 | Managing React Component state in *Elegant & Functional* way with transducers and channels from ClojureScript
 19 | 
 20 | ** Rationale
 21 | flux and redux are great and solve state management and communication pretty well.
 22 | 
 23 | *But* they are too complicated, users have to know toomany things about store, dispatcher, actions which they *shouldn't*
 24 | 
 25 | In reality what we have to do is actually just need to *talk* to *whatever* component I like and get my state from one *source of truth*, so the simplest way to do this is:
 26 | 
 27 | For component who has *actions*, only thing it have to define is what can it do.
 28 | 
 29 | For component who want to call other component's action, it directly *dispatch* a message to that component.
 30 | 
 31 | SO, all user have to know is to
 32 | - define *actions* for your component
 33 | - *dispatch* messages to *any component* you want to talk to
 34 | 
 35 | and leave all the other *dirty works* (stores, states) to our functional transducers, channels and pubsub that user don't really need to care about.
 36 | 
 37 | *The Big Picture*
 38 | [[https://www.evernote.com/l/ABe_8eE6o2dGlZMCmNnBap_fXy83GvJe6gcB/image.jpg]]
 39 | 
 40 | We're using Channels/Actors Model from Clojure -- core.async, It's compile to JS by [[http://github.com/jcouyang/conjs][conjs]]
 41 | 
 42 | *Basic Idea*
 43 | we composed channels, subs, pubs, and transducers together like tunnels, every message goes through the tunnel will got process by the transducer with action function user provided.
 44 | 
 45 | so, whenever a message is dispatch to input channel, you'll get new state from the corresponding output channel. you don't need to care about how the dispatching really happen in the framework.
 46 | 
 47 | ** Install
 48 | In your React project
 49 | #+BEGIN_SRC sh
 50 | npm install transdux --save
 51 | #+END_SRC
 52 | 
 53 | ** Usage
 54 | to wire in transdux, only 4 place you have to pay attention to.
 55 | *** 1. wrap you app with Transdux
 56 | #+BEGIN_SRC html
 57 |   <Transdux>
 58 |     <App/>
 59 |   </Transdux>
 60 | #+END_SRC
 61 | *** 2. define what your component can do
 62 | #+BEGIN_SRC js
 63 | // MainSection.jsx
 64 | let actions = {
 65 |   complete(msg, state){
 66 |     return {
 67 |       todos:state.todos.map(todo=>{
 68 |         if(todo.id==msg.id)
 69 |           todo.completed = !todo.completed
 70 |         return todo
 71 |       })
 72 |     }
 73 |   },
 74 |   clear(msg,state){
 75 |     return {
 76 |       todos: state.todos.filter(todo=>todo.completed==false)
 77 |     }
 78 |   }
 79 | }
 80 | #+END_SRC
 81 | *** for Mixin lover
 82 | **** 3. mixin Transdux Mixin and Bind Actions
 83 | #+BEGIN_SRC js
 84 | // MainSection.jsx
 85 |   import {TxMixin} from 'transdux'
 86 |   let MainSection = React.createClass({
 87 |     mixins: [TxMixin],
 88 |     componentDidMount(){
 89 |       this.bindActions(actions)
 90 |     },
 91 |     ...
 92 |   })
 93 | 
 94 | #+END_SRC
 95 | 
 96 | **** 4. mixin and dispatch a message
 97 | #+BEGIN_SRC jsx
 98 |   //TodoItem.jsx
 99 |   import MainSection from './MainSection'
100 |   let TodoItem = React.createClass({
101 |       mixins: [TxMixin],
102 |       render(){
103 |           <input className="toggle"
104 |           type="checkbox"
105 |           checked={todo.completed}
106 |           onChange={() => this.dispatch(MainSection, 'complete',{id:todo.id})} />
107 | 
108 |       }
109 |   })
110 | #+END_SRC
111 | 
112 | *** for ES6 class lover
113 | **** 3. mixin transdux into Class
114 | #+BEGIN_SRC js
115 |     // TodoItem.jsx
116 |     import {mixin} from 'transdux'
117 |     let actions = {
118 |       ...
119 |     }
120 |     class TodoItem extends React.Component {
121 |       constructor(props){
122 |         super(props);
123 |         this.state = {editing:false};
124 |       }
125 |       ...
126 |     }
127 |     export default mixin(TodoItem, actions)
128 | 
129 | #+END_SRC
130 | 
131 | **** 4. dispatch a message
132 | #+BEGIN_SRC jsx
133 |   //TodoItem.jsx
134 |   import MainSection from './MainSection'
135 |   class TodoItem extends React.Component {
136 |    ...
137 |       render(){
138 |           <input className="toggle"
139 |           type="checkbox"
140 |           checked={todo.completed}
141 |           onChange={() => this.dispatch(MainSection, 'complete',{id:todo.id})} />
142 | 
143 |       }
144 |    ...
145 |   })
146 |   export default mixin(TodoItem)
147 | #+END_SRC
148 | ** Examples
149 | - [[http://oyanglul.us/transdux/todomvc/][todomvc]]
150 |   - source: [[./examples]]
151 |   
152 | ** API
153 | [[./docs/api.org]]
154 | 
155 | ** Performance
156 | for dispatching *1023 messages* at the same time, here is the Memory Usage and Time elapsed
157 | 
158 | tested on /Macbook Pro 13, CPU 2.9GHz Intel Core i5, Mem 16GB 1867MHz DDR3/
159 | 
160 | *** transdux
161 | #+BEGIN_EXAMPLE
162 | Memory Usage Before: { rss: 43307008, heapTotal: 18550784, heapUsed: 11889192 }
163 | Memory Usage After: { rss: 46444544, heapTotal: 30921984, heapUsed: 15307800 }
164 | Elapsed 51ms
165 | #+END_EXAMPLE
166 | 
167 | *** setTimeout
168 | #+BEGIN_EXAMPLE
169 | Memory Usage Before: { rss: 45432832, heapTotal: 17518848, heapUsed: 12664416 }
170 | Memory Usage After: { rss: 46772224, heapTotal: 19570688, heapUsed: 10927824 }
171 | Elapsed 7ms
172 | #+END_EXAMPLE
173 | 
174 | *** redux
175 | #+BEGIN_EXAMPLE
176 | Memory Usage Before: { rss: 21647360, heapTotal: 9275392, heapUsed: 4559616 }
177 | Memory Usage After: { rss: 22638592, heapTotal: 9275392, heapUsed: 5472112 }
178 | Elapsed 4ms
179 | #+END_EXAMPLE
180 | 
181 | Yeah, I know, it's slower then redux, and I'm working on it.
182 | But, it's not bad, it's totally reasonable trade-off a little performance to get writing code which is more composable, reusable, testable and easy to reason about.
183 | 
184 | ** TODOS
185 | [[./ROADMAP.org]]
186 | 


--------------------------------------------------------------------------------
/ROADMAP.org:
--------------------------------------------------------------------------------
 1 | * RoadMap [33%]
 2 | 
 3 | - [X] using Atom managing state
 4 | - [-] smoke testing
 5 |   - [X] benchmark
 6 |   - [ ] smoke
 7 | - [ ] unsubscribe when component unmount
 8 | - [ ] improve performance
 9 | 
10 | 


--------------------------------------------------------------------------------
/benchmark/redux-immutable.js:
--------------------------------------------------------------------------------
 1 | var createStore =  require('redux').createStore
 2 | var timer = require('./timer')
 3 | var time = timer.time
 4 | var CYCLE = timer.CYCLE
 5 | var immutable = require('immutable')
 6 | var initState = [0]
 7 | for(var i=0;i<1000;i++)
 8 |   initState.push(i)
 9 | 
10 | function counter(state, action) {
11 |   state=immutable.fromJS(state||initState)
12 |   switch (action.type) {
13 |   case 'INCREMENT':
14 |     return state.map(function(item){return item+1}).toJS()
15 |   }
16 | }
17 | 
18 | var store = createStore(counter)
19 | 
20 | time(function(done){
21 |   store.subscribe(() => {
22 |    done(store.getState()[0]) 
23 |   })
24 |   for(var i=0;i<CYCLE+1;i++){
25 |     store.dispatch({ type: 'INCREMENT' });
26 |   }
27 | })
28 | /**
29 | Memory Usage Before: { rss: 21942272, heapTotal: 9275392, heapUsed: 4559784 }
30 | Memory Usage After: { rss: 22929408, heapTotal: 9275392, heapUsed: 5473240 }
31 | Elapsed 4ms
32 | */
33 | 


--------------------------------------------------------------------------------
/benchmark/redux.js:
--------------------------------------------------------------------------------
 1 | var createStore =  require('redux').createStore
 2 | var timer = require('./timer')
 3 | var time = timer.time
 4 | var CYCLE = timer.CYCLE
 5 | 
 6 | function counter(state, action) {
 7 |   state=state||0
 8 |   switch (action.type) {
 9 |   case 'INCREMENT':
10 |     return state + 1
11 |   }
12 | }
13 | 
14 | var store = createStore(counter)
15 | 
16 | time(function(done){
17 |   store.subscribe(() => {
18 |    done(store.getState()) 
19 |   })
20 |   for(var i=0;i<CYCLE+1;i++){
21 |     store.dispatch({ type: 'INCREMENT' });
22 |   }
23 | })
24 | /**
25 | Memory Usage Before: { rss: 21942272, heapTotal: 9275392, heapUsed: 4559784 }
26 | Memory Usage After: { rss: 22929408, heapTotal: 9275392, heapUsed: 5473240 }
27 | Elapsed 4ms
28 | */
29 | 


--------------------------------------------------------------------------------
/benchmark/timer.js:
--------------------------------------------------------------------------------
 1 | var CYCLE = 1023
 2 | exports.time = function(f) {
 3 |   console.log('Memory Usage Before:', process.memoryUsage())
 4 |   var s = new Date();
 5 |   f(function(index){
 6 |     if(index==CYCLE){
 7 |       console.log('Memory Usage After:', process.memoryUsage())
 8 |       console.log("Elapsed "+((new Date()).valueOf()-s.valueOf())+"ms");
 9 |     }
10 | 
11 |   });
12 | }
13 | exports.CYCLE = CYCLE
14 | 


--------------------------------------------------------------------------------
/benchmark/transdux-clj.js:
--------------------------------------------------------------------------------
 1 | var conjs = require('con.js');
 2 | var tx = require('../transdux.js')
 3 | var txmixin = tx.TxMixin
 4 | var timer = require('./timer')
 5 | var time = timer.time
 6 | var CYCLE = timer.CYCLE
 7 | var toJs = conjs.toJs
 8 | var toClj = conjs.toClj
 9 | var inputChan = conjs.async.chan()
10 | var outputChan = conjs.async.chan()
11 | var context = {
12 |   transduxChannel: inputChan,
13 |   transduxPublication: conjs.async.pub(inputChan, function(_){return _['action']}),
14 | }
15 | 
16 | var initState = [0]
17 | for(var i=0;i<1000;i++)
18 |   initState.push(i)
19 | 
20 | time(function(done){
21 |   function Target(){
22 |     return {
23 |       getInitialState: function(){return initState},
24 |       context:context,
25 |       state: [0],
26 |       setState: function(f){
27 |         this.state=f(this.state)
28 |         done(this.state[0])
29 |       },
30 |       constructor: Target
31 |     }
32 |   }
33 |   var target = new Target()
34 |   txmixin.bindActions.call(target, {
35 |     increment: function(msg,state){
36 |       return conjs.map(function(m){return msg+1}, state)
37 |     }
38 |   }, toClj, toJs)
39 | 
40 |   for(var i=0;i<CYCLE+1;i++){
41 |     txmixin.dispatch.call(target, Target, 'increment', i)
42 |   }
43 | })
44 | 


--------------------------------------------------------------------------------
/ci/github_page.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | set -x -e
 3 | git clone git@github.com:jcouyang/transdux.git -b gh-pages public
 4 | cd examples/todomvc
 5 | npm install
 6 | npm run build
 7 | cd ../..
 8 | mkdir -p public/todomvc
 9 | cp examples/todomvc/public/* public/todomvc
10 | cd public
11 | git config --global user.email "oyanglulu@gmail.com"
12 | git config --global user.name $CIRCLE_PROJECT_USERNAME
13 | git add .
14 | git commit -m "publi:ship: $CIRCLE_BUILD_NUM"
15 | git push origin gh-pages
16 | 


--------------------------------------------------------------------------------
/ci/npm-login.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | set -o nounset
 3 | set -o errexit
 4 | 
 5 | npm login <<!
 6 | $NPM_USERNAME
 7 | $NPM_PASSWORD
 8 | $NPM_EMAIL
 9 | !
10 | 


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
 1 | general:
 2 |   branches:
 3 |     only:
 4 |       - master
 5 | machine:
 6 |   node:
 7 |     version: 5.0.0
 8 | dependencies:
 9 |   pre:
10 |     - npm install -g babel-cli    
11 | deployment:
12 |   production:
13 |     tag: /v[0-9]+(\.[0-9]+)*/
14 |     commands:
15 |       - ./ci/npm-login.sh
16 |       - npm publish
17 |   pages:
18 |     tag: /example.*/
19 |     commands:
20 |       - ./ci/github_page.sh


--------------------------------------------------------------------------------
/docs/api.org:
--------------------------------------------------------------------------------
 1 | * API
 2 | ** mixin
 3 | #+BEGIN_QUOTE
 4 | this is for ES6 class
 5 | #+END_QUOTE
 6 | 
 7 | =mixin(ComponentClass:class, actions:object, JsToImmutableFunction:function, ImmutableToJsFunction:function):object=
 8 | 
 9 | =JsToImmutableFunction= and =ImmutableToJsFunction= are *optional*
10 | 
11 | example:
12 | #+BEGIN_SRC js
13 |     import {mixin} from 'transdux'
14 |     let actions = {
15 |       ...
16 |     }
17 |     class TodoItem extends React.Component {
18 |       ...
19 |     }
20 |     export default mixin(TodoItem, actions)
21 | #+END_SRC
22 | ** dispatch
23 | =dispatch(TargetComponentClass:class, actionName:string, value:any)=
24 | 
25 | example:
26 | 
27 | when component =TodoItem= want to send message to component =MainSection= 's =complete= action.
28 | #+BEGIN_SRC js
29 |   import MainSection from './MainSection'
30 |   class TodoItem extends React.Component {
31 |    ...
32 |       render(){
33 |           <input className="toggle"
34 |           onChange={() => this.dispatch(MainSection, 'complete',{id:todo.id})} />
35 | 
36 |       }
37 |    ...
38 |   }
39 | #+END_SRC
40 | 
41 | #+BEGIN_QUOTE
42 | One thing you may need to notice is that message between component is *Class* level, not *Instance* level. For example, if you have multiple =MainSection= components, they will all reveive the same massage from =TodoItem=.
43 | #+END_QUOTE
44 | 
45 | ** actions
46 | action is no more than just a normal javascript object, which contains all the action functions.
47 | 
48 | but you have to pay a little attention to make all function in it. All functions should return object, which normally just like what you wanna put in the parameter of function =this.setState=.
49 | 
50 | ** bindActions
51 | #+BEGIN_QUOTE
52 | for react mixin
53 | #+END_QUOTE
54 | 
55 | =bindActions(actions:object, JsToImmutableFunction:function, ImmutableToJsFunction:function)=
56 | 
57 | =JsToImmutableFunction= and =ImmutableToJsFunction= are *optional*
58 | 
59 | example:
60 | #+BEGIN_SRC js
61 |   import {TxMixin} from 'transdux'
62 |   let MainSection = React.createClass({
63 |     mixins: [TxMixin],
64 |     componentDidMount(){
65 |       this.bindActions(actions)
66 |     },
67 |     ...
68 |   })
69 | #+END_SRC
70 | 
71 | for mixin, you have to maually call =bindActions= some where, it's recommended to put it in =componentDidMount()= where not blocking your component's render.
72 | 


--------------------------------------------------------------------------------
/examples/todomvc/bin/compiler.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reactive-react/transdux/d7f4014ae722c74f97b072ebffb3d48bba71bbff/examples/todomvc/bin/compiler.jar


--------------------------------------------------------------------------------
/examples/todomvc/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "transdux-todomvc",
 3 |   "version": "0.0.1",
 4 |   "description": "",
 5 |   "browserify": {
 6 |     "transform": [
 7 |       [
 8 |         "babelify",
 9 |         {
10 |           "extensions": [
11 |             ".jsx",
12 |             ".js"
13 |           ]
14 |         }
15 |       ]
16 |     ]
17 |   },
18 |   "scripts": {
19 |     "build": "NODE_ENV=production browserify src/app.jsx --extension=.jsx | java -jar bin/compiler.jar > public/app.js",
20 |     "start": "ecstatic -p 8000 public",
21 |     "watch": "watchify -d src/app.jsx --extension=.jsx -o public/app.js -dv",
22 |     "test": "jest"
23 |   },
24 |   "jest": {
25 |     "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
26 |     "testFileExtensions": [
27 |       "es6",
28 |       "js",
29 |       "jsx"
30 |     ],
31 |     "moduleFileExtensions": [
32 |       "js",
33 |       "json",
34 |       "es6",
35 |       "jsx"
36 |     ]
37 |   },
38 |   "dependencies": {
39 |     "classnames": "^2.2.0",
40 |     "transdux": "^0.1.0",
41 |     "react": "^0.14.2",
42 |     "react-dom": "^0.14.2"
43 |   },
44 |   "devDependencies": {
45 |     "babel": "^6.1.18",
46 |     "babel-plugin-transform-react-jsx": "^6.1.18",
47 |     "babel-preset-es2015": "^6.1.18",
48 |     "babel-jest": "^6.0.0",
49 |     "jest-cli": "^0.7.0",
50 |     "babelify": "^7.2.0",
51 |     "browserify": "^12.0.1",
52 |     "ecstatic": "^1.3.1",
53 |     "uglify-js": "^2.6.1",
54 |     "watchify": "^3.6.1"
55 |   },
56 |   "author": "Jichao Ouyang",
57 |   "license": "ISC",
58 |   "babel": {
59 |     "presets": [
60 |       "es2015"
61 |     ],
62 |     "plugins": [
63 |       "transform-react-jsx"
64 |     ]
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/examples/todomvc/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Template • TodoMVC</title>
 7 |     <link rel="stylesheet" href="//rawgit.com/tastejs/todomvc-common/master/base.css">
 8 | 		<link rel="stylesheet" href="//rawgit.com/tastejs/todomvc-app-css/master/index.css">
 9 | 	</head>
10 | 	<body>
11 |       <div id="app"></div>
12 | 		<footer class="info">
13 | 			<p>Double-click to edit a todo</p>
14 | 			<!-- Remove the below line ↓ -->
15 | 			<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
16 | 			<!-- Change this out with your name and url ↓ -->
17 | 			<p>Created by <a href="https://github.com/jcouyang">Jichao Ouyang</a></p>
18 | 			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
19 | 		</footer>
20 | 		<script src="app.js"></script>
21 | 	</body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/examples/todomvc/src/app.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react';
 2 | import Header from './components/Header';
 3 | import MainSection from './components/MainSection';
 4 | import {render} from 'react-dom';
 5 | import Transdux from 'transdux'
 6 | 
 7 | class App extends Component {
 8 |   render(){
 9 |     return (
10 |       <div>
11 |           <Header />
12 |           <MainSection />
13 |       </div>
14 |     )
15 |   }
16 | }
17 | 
18 | render(
19 |   <Transdux>
20 |       <App/>
21 |   </Transdux>
22 |   , document.getElementById('app'));
23 | 


--------------------------------------------------------------------------------
/examples/todomvc/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | import MainSection from './MainSection'
 4 | import {TxMixin} from 'transdux'
 5 | const FILTER_TITLES = {
 6 |   'SHOW_ALL': 'All',
 7 |   'SHOW_ACTIVE': 'Active',
 8 |   'SHOW_COMPLETED': 'Completed'
 9 | }
10 | 
11 | let Footer = React.createClass({
12 |   mixins: [TxMixin],
13 |   renderTodoCount() {
14 |     const { activeCount } = this.props
15 |     const itemWord = activeCount === 1 ? 'item' : 'items'
16 | 
17 |     return (
18 |       <span className="todo-count">
19 |         <strong>{activeCount || 'No'}</strong> {itemWord} left
20 |       </span>
21 |     )
22 |   },
23 | 
24 |   renderFilterLink(filter) {
25 |     const title = FILTER_TITLES[filter]
26 |     const { filter: selectedFilter, onShow } = this.props
27 | 
28 |     return (
29 |       <a className={classnames({ selected: filter === selectedFilter })}
30 |          style={{ cursor: 'pointer' }}
31 |          onClick={() => this.dispatch(MainSection, 'show', filter)}>
32 |         {title}
33 |       </a>
34 |     )
35 |   },
36 | 
37 |   renderClearButton() {
38 |     const { completedCount } = this.props
39 |     if (completedCount > 0) {
40 |       return (
41 |         <button className="clear-completed"
42 |                 onClick={()=>this.dispatch(MainSection, 'clear', null)} >
43 |           Clear completed
44 |         </button>
45 |       )
46 |     }
47 |   },
48 | 
49 |   render() {
50 |     return (
51 |       <footer className="footer">
52 |         {this.renderTodoCount()}
53 |         <ul className="filters">
54 |         {['SHOW_ALL', 'SHOW_ACTIVE', 'SHOW_COMPLETED' ].map(filter =>
55 |             <li key={filter}>
56 |               {this.renderFilterLink(filter)}
57 |             </li>
58 |           )}
59 |         </ul>
60 |         {this.renderClearButton()}
61 |       </footer>
62 |     )
63 |   },
64 | });
65 | 
66 | 
67 | export default Footer
68 | 


--------------------------------------------------------------------------------
/examples/todomvc/src/components/Header.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes, Component } from 'react'
 2 | import TodoTextInput from './TodoTextInput'
 3 | let Header = React.createClass({
 4 |   render() {
 5 |     return (
 6 |       <header className="header">
 7 |           <h1>todos</h1>
 8 |           <TodoTextInput newTodo={true}
 9 |                          placeholder="What needs to be done?" />
10 |       </header>
11 |     )
12 |   },
13 | })
14 | 
15 | export default Header
16 | 


--------------------------------------------------------------------------------
/examples/todomvc/src/components/MainSection.action.js:
--------------------------------------------------------------------------------
 1 | const actions = {
 2 |   complete(msg, state){
 3 |     return {
 4 |       todos:state.todos.map(todo=>{
 5 |         if(todo.id==msg.id)
 6 |           todo.completed = !todo.completed
 7 |         return todo
 8 |       })
 9 |     }
10 |   },
11 |   show(msg,state){
12 |     switch(msg){
13 |     case('SHOW_ALL'):
14 |       return {filter: _=>_}
15 |     case('SHOW_ACTIVE'):
16 |       return {filter: todos=>todos.filter(todo=>!todo.completed)}
17 |     case('SHOW_COMPLETED'):
18 |       return {filter: todos=>todos.filter(todo=>todo.completed)}
19 |     }
20 |   },
21 |   clear(msg,state){
22 |     return {
23 |       todos: state.todos.filter(todo=>todo.completed==false)
24 |     }
25 |   },
26 |   add(msg, state){
27 |     let todos = state.todos
28 |     todos.unshift({id:todos.length+1, text:msg, completed:false})
29 |     return {
30 |       todos: todos
31 |     }
32 |   },
33 |   edit(msg, state){
34 |     return {
35 |       todos: state.todos.map(todo=>{
36 |         if(todo.id == msg.id){todo.text=msg.text}
37 |         return todo;
38 |       })
39 |     } 
40 |   },
41 |   delete(msg, state){
42 |     return {
43 |       todos: state.todos.filter(todo=>{
44 |         return todo.id!=msg.id
45 |       })
46 |     }
47 |   }
48 | }
49 | export default actions
50 | 


--------------------------------------------------------------------------------
/examples/todomvc/src/components/MainSection.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import TodoItem from './TodoItem'
 3 | import Footer from './Footer'
 4 | import {TxMixin} from 'transdux'
 5 | import actions from './MainSection.action'
 6 | const todos = [{
 7 |   text: 'Dont Use Redux',
 8 |   completed: false,
 9 |   id: 0
10 | },{
11 |   text: 'Use transdux',
12 |   completed: false,
13 |   id: 1
14 | }];
15 | 
16 | let MainSection = React.createClass({
17 |   mixins: [TxMixin],
18 |   getInitialState(){
19 |     return {
20 |       todos: todos,
21 |       filter: _=>_
22 |     }
23 |   },
24 |   componentDidMount(){
25 |     this.bindActions(actions)
26 |   },
27 | 
28 |   handleShow(filter) {
29 |     this.setState({ filter })
30 |   },
31 | 
32 |   renderToggleAll(completedCount) {
33 |     const { todos } = this.state
34 |     if (todos.length > 0) {
35 |       return (
36 |         <input className="toggle-all"
37 |                type="checkbox"
38 |                checked={completedCount === todos.length}
39 |                />
40 |       )
41 |     }
42 |   },
43 | 
44 |   renderFooter(completedCount) {
45 |     const { todos } = this.state
46 |     const activeCount = todos.length - completedCount;
47 | 
48 |     if (todos.length) {
49 |       return (
50 |         <Footer completedCount={completedCount} activeCount={activeCount} {...this.props}/>
51 |       )
52 |     }
53 |   },
54 | 
55 |   render() {
56 |     const { actions } = this.props
57 |     const {todos} = this.state
58 |     const completedCount = todos.reduce((count, todo) =>
59 |       todo.completed ? count + 1 : count,
60 |                                         0
61 |     );
62 | 
63 |     const filteredTodos = this.state.filter(todos);
64 |     return (
65 |       <section className="main">
66 |         {this.renderToggleAll(completedCount)}
67 |         <ul className="todo-list">
68 |           {filteredTodos.map(todo =>
69 |             <TodoItem key={todo.id} todo={todo} {...this.props} />
70 |           )}
71 |         </ul>
72 |         {this.renderFooter(completedCount)}
73 |       </section>
74 |     )
75 |   },
76 | });
77 | 
78 | export default MainSection
79 | 


--------------------------------------------------------------------------------
/examples/todomvc/src/components/TodoItem.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classnames from 'classnames'
 3 | import TodoTextInput from './TodoTextInput'
 4 | import MainSection from './MainSection'
 5 | import {mixin} from 'transdux'
 6 | 
 7 | let actions = {
 8 |   save(msg, state,props) {
 9 |     if(msg.id!=props.todo.id) return
10 |     return {
11 |       editing: false
12 |     }
13 |   }
14 | }
15 | 
16 | 
17 | class TodoItem extends React.Component {
18 |   constructor(props){
19 |     super(props);
20 |     this.state = {editing:false};
21 |   }
22 |   render() {
23 |     const { todo } = this.props
24 | 
25 |     let element
26 |     if (this.state.editing) {
27 |       element = (
28 |         <TodoTextInput text={todo.text}
29 |                        itemid={todo.id}
30 |                        editing={this.state.editing}
31 |                        />
32 |       )
33 |     } else {
34 |       element = (
35 |         <div className="view">
36 |           <input className="toggle"
37 |                  type="checkbox"
38 |                  checked={todo.completed}
39 |                  onChange={() => this.dispatch(MainSection, 'complete',{id:todo.id})} />
40 |           <label onDoubleClick={()=> this.setState({editing:true})}>
41 |             {todo.text}
42 |           </label>
43 |           <button className="destroy"
44 |                   onClick={() => this.dispatch(MainSection, 'delete', {id:todo.id})} />
45 |         </div>
46 |       )
47 |     }
48 | 
49 |     return (
50 |       <li className={classnames({
51 |         completed: todo.completed,
52 |         editing: this.state.editing
53 |       })}>
54 |         {element}
55 |       </li>
56 |     )
57 |   }
58 | }
59 | 
60 | 
61 | export default mixin(TodoItem, actions, _=>{console.log('hehe'); return _})
62 | 


--------------------------------------------------------------------------------
/examples/todomvc/src/components/TodoTextInput.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classnames from 'classnames'
 3 | import {TxMixin} from 'transdux'
 4 | import MainSection from './MainSection'
 5 | import TodoItem from './TodoItem'
 6 | let TodoTextInput = React.createClass({
 7 |   mixins: [TxMixin],
 8 |   getInitialState(){
 9 |     return {
10 |       text: this.props.text || ''
11 |     }
12 |   },
13 | 
14 |   handleSubmit(e) {
15 |     const text = e.target.value.trim()
16 |     let msg = {id:this.props.itemid,text:text}
17 |     if (e.which === 13) {
18 |       if (this.props.newTodo) {
19 |         this.dispatch(MainSection, 'add', text)
20 |         this.setState({ text: '' })
21 |       }
22 |       this.handleBlur(e)
23 |     }
24 |   },
25 | 
26 |   handleChange(e) {
27 |     this.setState({ text: e.target.value })
28 |   },
29 | 
30 |   handleBlur(e) {
31 |     if (!this.props.newTodo) {
32 |       let msg = {id:this.props.itemid,text:e.target.value}
33 |       if (msg.text.length === 0) {
34 |         this.dispatch(MainSection, 'delete', msg)
35 |       } else {
36 |         this.dispatch(MainSection, 'edit', msg)
37 |       }
38 |       this.dispatch(TodoItem, 'save', msg)
39 |     }
40 |   },
41 | 
42 |   render() {
43 |     return (
44 |       <input className={
45 |         classnames({
46 |           edit: this.props.editing,
47 |           'new-todo': this.props.newTodo
48 |         })}
49 |         type="text"
50 |         placeholder={this.props.placeholder}
51 |         autoFocus="true"
52 |         value={this.state.text}
53 |         onBlur={this.handleBlur}
54 |         onChange={this.handleChange}
55 |         onKeyDown={this.handleSubmit} />
56 |     )
57 |   },
58 | });
59 | 
60 | export default TodoTextInput
61 | 


--------------------------------------------------------------------------------
/examples/todomvc/src/components/__tests__/TodoItem-spec.jsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reactive-react/transdux/d7f4014ae722c74f97b072ebffb3d48bba71bbff/examples/todomvc/src/components/__tests__/TodoItem-spec.jsx


--------------------------------------------------------------------------------
/lib/__tests__/transdux-test.jsx:
--------------------------------------------------------------------------------
 1 | jest.dontMock('../transdux.js');
 2 | import React from 'react';
 3 | import ReactDOM from 'react-dom';
 4 | import TestUtils from 'react-addons-test-utils';
 5 | import uuid from 'uuid';
 6 | 
 7 | const {default:Transdux, TxMixin} = require('../transdux');
 8 | 
 9 |   describe('transdux', () => {
10 |     describe('todo dispatch', ()=>{
11 |       let todolist;
12 |       let Todo = React.createClass({
13 |         render(){
14 |           return <div className={'todo-'+this.props.todo.id} key={this.props.todo.id} data-complete={this.props.todo.done}>{this.props.todo.text}</div>
15 |         }
16 |       });
17 |       let TodoList = React.createClass({
18 |         mixins: [TxMixin],
19 |         getInitialState(){
20 |           return {
21 |             todos: [
22 |               {id:1, text:'hehe', done:false},
23 |               {id:2, text:'heheda', done:false},
24 |             ]
25 |           }
26 |         },
27 |         componentDidMount(){
28 |           this.bindActions({
29 |             complete(msg, state){
30 |               return {
31 |                 todos: state.todos.map(todo => {
32 |                   if(todo.id == msg){
33 |                     todo.done =! todo.done
34 |                   }
35 |                   return todo
36 |                 })
37 |               }
38 |             }
39 |           })
40 |         },
41 |         render(){
42 |           let todos = this.state.todos.map(todo => {
43 |             return <Todo todo={todo} />
44 |           });
45 |           return <div>{todos}</div>
46 |         }
47 |       });
48 |       let Buttons = React.createClass({
49 |         mixins: [TxMixin],
50 |         render(){
51 |           return (
52 |             <div>
53 |                 <button className="btn-complete" onClick={_=>this.dispatch(TodoList, 'complete', 1)} >complete</button>
54 |                 <button className="btn-change-color" onClick={_=>this.dispatch(Todo, 'colorChange',"red")}>color change</button>
55 |             </div>)
56 |         }   
57 |       });
58 | 
59 |       beforeEach(()=>{
60 |         todolist = TestUtils.renderIntoDocument(
61 |           <Transdux>
62 |             <TodoList />
63 |             <Buttons />
64 |           </Transdux>
65 |         )
66 |       });
67 | 
68 |       it('click complete buttom will complete', () => {
69 |         expect(TestUtils.scryRenderedComponentsWithType(todolist, Todo)[0].props.todo.done).toBe(false);
70 |         TestUtils.Simulate.click(TestUtils.findRenderedDOMComponentWithClass(todolist, 'btn-complete'));
71 |         jest.runAllTimers();
72 |         expect(TestUtils.scryRenderedComponentsWithType(todolist, Todo)[0].props.todo.done).toBe(true);
73 |       });
74 |     })
75 |   });
76 | 


--------------------------------------------------------------------------------
/lib/transdux.js:
--------------------------------------------------------------------------------
 1 | import {async,map} from 'con.js/async';
 2 | const {sub,observe,put,put$,chan,pub,pipeline} = async;
 3 | import React from 'react';
 4 | import uuid from 'uuid';
 5 | 
 6 | function genUuid(reactClass){
 7 |   reactClass.uuid = reactClass.uuid || uuid.v4();
 8 |   return reactClass.uuid;
 9 | }
10 | const id = _=>_;
11 | 
12 | export const TxMixin = {
13 |   contextTypes: {
14 |     transduxChannel: React.PropTypes.object,
15 |     transduxPublication: React.PropTypes.object,
16 |   },
17 |   bindActions(actions, imm=id, unimm=id) {
18 |     for(let name in actions){
19 |       let tx = map((msg)=>{
20 |         this.setState((prevState, props)=>{
21 |           return unimm(actions[name].call(this, msg.value, imm(prevState), imm(props)));
22 |         });
23 |         return this.state
24 |       });
25 |       let actionChan = chan(32,tx);
26 |       sub(this.context.transduxPublication, genUuid(this.constructor)+name, actionChan);
27 |       observe(actionChan, (newstate)=>{});
28 |     }
29 |   },
30 |   dispatch(where, how, what) {
31 |     put(this.context.transduxChannel,
32 |         {action:genUuid(where)+how,
33 |          value:what})
34 |       .then(id,_=>console.log('[Error] dispatching:'+what))
35 |   }
36 | }
37 | 
38 | export function mixin(reactClass, ...actions) {
39 |   reactClass.contextTypes = TxMixin.contextTypes;
40 |   for (let name in TxMixin) {
41 |     if(name!='contextTypes')
42 |       reactClass.prototype[name] = TxMixin[name];
43 |   }
44 |   let oldMountFunc = reactClass.prototype.componentDidMount;
45 |   reactClass.prototype.componentDidMount = function(){
46 |     oldMountFunc && oldMountFunc();
47 |     this.bindActions(...actions);
48 |   }
49 |   return reactClass
50 | }
51 | 
52 | const Transdux = React.createClass({
53 |   childContextTypes: {
54 |     transduxChannel: React.PropTypes.object,
55 |     transduxPublication: React.PropTypes.object,
56 |   },
57 |   getChildContext(){
58 |     let inputchan = chan();
59 |     return {
60 |       transduxChannel: inputchan,
61 |       transduxPublication: pub(inputchan, _=>_['action']),
62 |     }
63 |   },
64 |   render(){
65 |     return <div>{this.props.children}</div>
66 |   }
67 | });
68 | 
69 | export default Transdux;
70 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "transdux",
 3 |   "version": "0.1.1",
 4 |   "description": "",
 5 |   "main": "transdux.js",
 6 |   "scripts": {
 7 |     "build": "cat LICENSE.txt > transdux.js && ./node_modules/.bin/babel lib/transdux.js >> transdux.js",
 8 |     "test": "jest",
 9 |     "prepublish": "npm run build"
10 |   },
11 |   "jest": {
12 |     "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
13 |     "testPathDirs": [
14 |       "lib"
15 |     ],
16 |     "testFileExtensions": [
17 |       "es6",
18 |       "js",
19 |       "jsx"
20 |     ],
21 |     "moduleFileExtensions": [
22 |       "js",
23 |       "json",
24 |       "es6",
25 |       "jsx"
26 |     ],
27 |     "unmockedModulePathPatterns": [
28 |       "<rootDir>/node_modules/react",
29 |       "<rootDir>/node_modules/react-dom",
30 |       "<rootDir>/node_modules/react-addons-test-utils",
31 |       "<rootDir>/node_modules/fbjs",
32 |       "<rootDir>/node_modules/uuid",
33 |       "<rootDir>/node_modules/con.js",
34 |       "<rootDir>/node_modules/fbjs"
35 |     ]
36 |   },
37 |   "dependencies": {
38 |     "con.js": "^0.5.3",
39 |     "react": "^0.14.3",
40 |     "uuid": "^2.0.1"
41 |   },
42 |   "devDependencies": {
43 |     "babel": "^6.1.18",
44 |     "babel-cli": "^6.2.0",
45 |     "babel-jest": "^6.0.0",
46 |     "babel-plugin-transform-react-jsx": "^6.1.18",
47 |     "babel-preset-es2015": "^6.1.18",
48 |     "babelify": "^7.2.0",
49 |     "browserify": "^12.0.1",
50 |     "ecstatic": "^1.3.1",
51 |     "immutable": "^3.7.5",
52 |     "jest-cli": "^0.7.0",
53 |     "react-addons-test-utils": "^0.14.3",
54 |     "react-dom": "^0.14.3",
55 |     "redux": "^3.0.4",
56 |     "uglify-js": "^2.6.1",
57 |     "watchify": "^3.6.1"
58 |   },
59 |   "author": "Jichao Ouyang",
60 |   "license": "MIT",
61 |   "babel": {
62 |     "presets": [
63 |       "es2015"
64 |     ],
65 |     "plugins": [
66 |       "transform-react-jsx"
67 |     ]
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------