Refine to 0.1.0

Author: mizchi

.npmignore

@@ -1 +1 @@
-src
+ignore_gitignore

README.md

@@ -1,28 +1,100 @@
-# Flumt
+# Flumpt
 
 Conceptual Implementation of EventEmitter based Flux.
 
-// TODO Documentation
+## Concepts
 
+Flux is (...What you think) but all you need is just an `EventEmitter`.
+
+Interface is inpired by `Om`.
 
 ## Example
 
 ### Hello World
 
 ```js
 import * as React from "react";
-import {Flux} from "flumt";
+import {Flux, Component} from "flumpt";
 import {render} from "react-dom";
 
-class App extends Flux<{}> {
-  render(prors) {
-    return <divHelloWorld</div>;
+class MyComponent extends Component {
+  componentDidMount() {
+    this.dispatch("increment");
+  }
+  render() {
+    return (
+      <div>
+        {this.props.counter}
+        <button onClick={() => this.dispatch("increment")}>increment</button>
+      </div>
+    );
+  }
+}
+
+class App extends Flux {
+  subscribe() { // `subscribe` is called once in constructor
+    this.on("increment", () => {
+      this.update(({count}) => {
+        return {count: count + 1}; // return next state
+      });
+    });
+  }
+  render(state) {
+    return <MyComponent {}...state}/>;
   }
 }
 
 // Setup renderer
-const app = new App(el => {
-  render(el, document.querySelector("#root"));
+const app = new App({
+  renderer: el => {
+    render(el, document.querySelector("#root"));
+  },
+  initialState: {count: 0}
 });
-app.update(_initialState => ({}))
+
+app.on(":start-updating", () => {
+  // overlay ui lock
+});
+app.on(":end-updating", () => {
+  // hide ui lock
+});
+
+app.update(_initialState => ({count: 1})) // it fires rendering
+```
+
+- `Flux` is `EventEmitter`
+- `Component` is just `ReactComponent` with `dispatch` method.
+  - You can also use `flumpt.mixin` with React.createClass
+
+## With TypeScript
+
+Need `node react reace-dom es6-promise` type definitions.
+
+- `npm install -g dtsm`
+- `dtsm install node react reace-dom`
+
+
+```js
+import {Flux} from "flumpt";
+
+interface State {
+  count: number;
+}
+
+class App extends Flux<State> {
+  subscribe() {
+    this.on("increment", () => {
+      this.update((s: State) => {
+        return {count: count + 1};
+      });
+    });
+  }
+  // ... render or others
+}
 ```
+
+See detail in `index.d.ts`
+
+## LICENSE
+
+MIT

index.d.ts

@@ -9,7 +9,7 @@ export class Component<Props, State> extends React.Component<Props, State> {
 }
 
 export class Flux<State> {
-  constructor(render: Function);
+  constructor(initalizers: {renderer: Function; initialState: State});
   state: State;
   on: (eventName: string, fn: Function) => void;
   update(updater: (s?: State) => State | Promise<State>): Promise<any>;

package.json

@@ -1,14 +1,14 @@
 {
-  "name": "flumt",
-  "version": "0.0.10",
+  "name": "flumpt",
+  "version": "0.1.0",
   "description": "Conceptual Implementation of EventEmitter based Flux.",
-  "main": "lib/flumt.js",
+  "main": "lib/flumpt.js",
   "scripts": {
     "prepublish": "babel src --out-dir lib",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "author": "",
-  "license": "ISC",
+  "author": "mizchi",
+  "license": "MIT",
   "peerDependencies": {
     "react": ">=0.14"
   },
@@ -24,10 +24,17 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/mizchi/flumt.git"
+    "url": "git+https://github.com/mizchi/flumpt.git"
   },
   "bugs": {
-    "url": "https://github.com/mizchi/flumt/issues"
+    "url": "https://github.com/mizchi/flupmt/issues"
   },
-  "homepage": "https://github.com/mizchi/flumt#readme"
+  "homepage": "https://github.com/mizchi/flumpt#readme",
+  "dependencies": {
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.3.13",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-stage-2": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "react": "^0.14.3"
+  }
 }

src/flumt.js src/flumpt.jssrc/flumt.js renamed to src/flumpt.js

@@ -41,10 +41,11 @@ export function createRenderer({emitter, render}) {
 }
 
 export class Flux extends EventEmitter {
-  constructor(renderer) {
+  constructor({renderer, initialState}) {
     super();
-    this.state = {};
+    this.state = initialState ? {};
     this._renderer = createRenderer({emitter: this, render: renderer});
+    this._renderedElement = null;
     this.subscribe();
     this.updating = false;
     // this._updatingQueues = []; // TODO
@@ -62,17 +63,23 @@ export class Flux extends EventEmitter {
       this.emit(":start-updating");
       return promiseOrState.then(nextState => {
         this.state = nextState;
-        this._renderer(this.render(this.state));
+        this._renderedElement = this._renderer(this.render(this.state));
         this.updating = false;
         this.emit(":end-updating");
       });
     } else {
       this.state = promiseOrState;
-      this._renderer(this.render(this.state));
+      this._renderedElement = this._renderer(this.render(this.state));
       this.updating = false;
     }
   }
 
+  _setState(...args) {
+    if (this._renderedElement) {
+      this._renderedElement.setState(...args)
+    }
+  }
+
   render(props) {
     // override me
     throw "Override Me"