Initial commit

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "es2015",
+    "stage-2",
+    "react"
+  ]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc

@@ -0,0 +1,37 @@
+{
+  "parser": "babel-eslint",
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true
+    },
+  },
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "node": true,
+    "es6": true,
+    "jest": true
+  },
+  "rules": {
+    "indent": [2, 2, {
+      "SwitchCase": 1
+    }],
+    "linebreak-style": [2, "unix"],
+    "no-multi-spaces": 2,
+    "no-trailing-spaces": 2,
+    "quotes": [2, "single", {
+      "allowTemplateLiterals": true
+    }],
+    "semi": [2, "never"],
+    "space-before-blocks": 2,
+    "spaced-comment": [2, "always"],
+  },
+  "plugins": [
+    "react"
+  ]
+}

.gitignore

@@ -0,0 +1,19 @@
+**/node_modules
+node_modules
+npm-debug.log.*
+
+dist
+lib
+coverage
+
+**/dist
+**/build
+
+.tmp
+*.swo
+*.swp
+*.diff
+*.log
+*.patch
+
+.DS_STORE

LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2017-present Linghao Li <llh911001@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,124 @@
+# Mirror
+
+#### [以中文查看](https://github.com/mirrorjs/mirror/blob/master/README_zh.md)
+
+A simple and powerful React framework with minimal API and zero boilerplate. (Inspired by [dva](https://github.com/dvajs/dva) and [jumpsuit](https://github.com/jumpsuit/jumpsuit))
+
+> Painless React and Redux.
+
+* [Introduction](#introduction)
+* [Guides](https://github.com/mirrorjs/mirror/blob/master/docs/guides.md)
+  * [State management](https://github.com/mirrorjs/mirror/blob/master/docs/guides.md#state-management)
+  * [Routing](https://github.com/mirrorjs/mirror/blob/master/docs/guides.md#routing)
+  * [Rendering](https://github.com/mirrorjs/mirror/blob/master/docs/guides.md#rendering)
+  * [Hooks](https://github.com/mirrorjs/mirror/blob/master/docs/guides.md#hooks)
+* [Get Started](#get-started)
+* [Examples](#examples)
+* [API](https://github.com/mirrorjs/mirror/blob/master/docs/api.md)
+* [FAQ](#faq)
+
+## Introduction
+
+Mirror is a front-end framework based on [React](https://facebook.github.io/react), [Redux](http://redux.js.org/docs/introduction/) and [react-router](https://github.com/ReactTraining/react-router). It encapsulates *state management*, *routing* and other essential things to build web apps together in very few methods, and makes it much easier to use:
+
+* **Minimal API**
+
+Mirror has very minimal APIs, only [4 of them are newly introduced](https://github.com/mirrorjs/mirror/blob/master/docs/api.md), the rest are all of existed ones from `React` or `Redux`, or `react-router`, like `render` and `connect`(although most of them are enhanced).
+
+* **Easy to start**
+
+You don't have to learn some new things to get started with Mirror, the only requirement is a basic understanding of `React`, `Redux` and `react-router`, you can learn more from the [Redux Docs](http://redux.js.org/docs/introduction/) and [react-router Docs](https://github.com/ReactTraining/react-router). In fact, You can start writing your app from [the first line of your code](#get-started).
+
+* **Simple actions, sync or async**
+
+No manually created action types or action creators, no explicitly `dispatch`s, no thunk or saga stuff -- just [call a function to dispatch your actions](https://github.com/mirrorjs/mirror/blob/master/docs/api.md#actions).
+
+* **Support loading models dynamically**
+
+In large apps, it's very likely that not all `reducer`s and `state`s(`model`s) are defined the same time. In this case you may need to dynamically inject a model into your app's store. Mirror provides a [very simple way](https://github.com/mirrorjs/mirror/blob/master/docs/api.md#rendercomponent-container-callback) to do that.
+
+* **Full-featured hook mechanism**
+
+[Hooks](https://github.com/mirrorjs/mirror/blob/master/docs/api.md#mirrorhookaction-getstate-) give you the power to monitor every `Redux` action you dispatched, and do whatever you want.
+
+
+## Get Started
+
+### Creating an App
+
+Use [create-react-app](https://github.com/facebookincubator/create-react-app) to create an app:
+
+```sh
+$ npm i -g create-react-app
+$ create-react-app my-app
+$ cd my-app
+```
+
+After creating, install Mirror from npm:
+
+```
+$ npm i --save mirrorx
+$ npm start
+```
+
+### `index.js`
+
+```js
+import React from 'react'
+import mirror, {actions, connect, render} from 'mirrorx'
+
+// declare Redux state, reducers and actions,
+// all actions will be added to `actions` object from mirror
+mirror.model({
+  name: 'app',
+  initialState: 0,
+  reducers: {
+    increment(state) {
+      return state + 1
+    },
+    decrement(state) {
+      return state - 1
+    }
+  }
+})
+
+// connect state with component
+const App = connect(state => {
+  return {count: state.app}
+})(props => (
+    <div>
+      <h1>{props.count}</h1>
+      {/* dispatch the action */}
+      <button onClick={() => actions.app.decrement()}>-</button>
+      <button onClick={() => actions.app.increment()}>+</button>
+    </div>
+  )
+)
+
+// start the app
+render(<App/>, document.getElementById('root'))
+```
+
+### [Demo](https://www.webpackbin.com/bins/-Kmdm2zpS4JBvzbKBbIc)
+
+## Examples
+
+* [Counter](https://github.com/mirrorjs/mirror/blob/master/examples/counter)
+* [Simple-Router](https://github.com/mirrorjs/mirror/blob/master/examples/simple-router)
+* [Todo](https://github.com/mirrorjs/mirror/blob/master/examples/todo)
+
+
+## FAQ
+
+##### Does Mirror support [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension)?
+
+Yes.
+
+##### Can I use extra Redux middlewares?
+
+Yes, speicify them in `mirror.defaults`, learn more from the Docs.
+
+##### Which version of react-router does Mirror use?
+
+react-router v4.
+

README_zh.md

@@ -0,0 +1,121 @@
+# Mirror
+
+一款简洁、高效、易上手的 React 框架。（Inspired by [dva](https://github.com/dvajs/dva) and [jumpsuit](https://github.com/jumpsuit/jumpsuit)）
+
+> Painless React and Redux.
+
+* [简介](#简介)
+* [指南](https://github.com/mirrorjs/mirror/blob/master/docs/zh/guides.md)
+  * [状态管理](https://github.com/mirrorjs/mirror/blob/master/docs/zh/guides.md#状态管理)
+  * [路由](https://github.com/mirrorjs/mirror/blob/master/docs/zh/guides.md#路由)
+  * [启动和渲染](https://github.com/mirrorjs/mirror/blob/master/docs/zh/guides.md#启动和渲染)
+  * [Hook](https://github.com/mirrorjs/mirror/blob/master/docs/zh/guides.md#hook)
+* [快速开始](#快速开始)
+* [示例项目](#示例项目)
+* [API](https://github.com/mirrorjs/mirror/blob/master/docs/zh/api.md)
+* [FAQ](#faq)
+
+## 简介
+
+Mirror 是一款基于 [React](https://facebook.github.io/react)，[Redux](http://redux.js.org/docs/introduction/) 和 [react-router](https://github.com/ReactTraining/react-router) 的前端框架。作为一个框架，Mirror 提供了构建 React 应用所需的一切，包括状态管理、路由等。更重要的是，Mirror 概念简单，易于使用：
+
+* **极简 API**
+
+在 Mirror 中，只有 [4 个新 API](https://github.com/mirrorjs/mirror/blob/master/docs/zh/api.md)，其他仅有的几个 API 都来自 `React`、`Redux` 以及 `react-router`，比如 `render` 和 `connect`（当然，经过封装和强化）。
+
+* **易于上手**
+
+你不必学习一些炫酷的新概念就能使用 Mirror，只需要对 `React`、`Redux` 以及 `react-router` 有一个基本的了解即可（可以查看 [Redux Docs](http://redux.js.org/docs/introduction/) 和 [react-router Docs](https://github.com/ReactTraining/react-router) 了解更多）。不仅如此，Mirror 对这些已有概念的处理更为简单，让你用起来更加得心应手。你甚至可以从[第一行代码](#快速开始)开始写你的业务逻辑。
+
+* **Redux action 从未如此简单**
+
+无需手动创建 `action type` 或者 `action creator`，无需明确调用 `dispatch` 方法，无需使用 redux-thunk 或者 redux-saga 来处理异步 action——只需[调用一个函数即可 `dispatch` 你的 `action`](https://github.com/mirrorjs/mirror/blob/master/docs/zh/api.md#actions)，无论是同步还是异步的 action。
+
+* **支持动态创建 model**
+
+在大型应用中，Redux state 很有可能不是同时创建的，也就是说你很可能需要动态地引入一些 reducer 和 state（对应 Mirror 中的 `model`），那么 Mirror 天然地支持这种动态引入，而且[非常简单](https://github.com/mirrorjs/mirror/blob/master/docs/zh/api.md#rendercomponent-container-callback)。
+
+* **强大的 hook 机制**
+
+如果你想监测每一个被 dispatch 的 action，没问题！Mirror 提供了这种 [hook 的能力](https://github.com/mirrorjs/mirror/blob/master/docs/zh/api.md#mirrorhookaction-getstate-)，让你随时监控每一个 action，做任何你想做的事情。
+
+
+## 快速开始
+
+### 初始化项目
+
+使用 [create-react-app](https://github.com/facebookincubator/create-react-app) 创建一个新的 app：
+
+```sh
+$ npm i -g create-react-app
+$ create-react-app my-app
+$ cd my-app
+```
+
+创建之后，从 npm 安装 Mirror：
+
+```
+$ npm i --save mirrorx
+$ npm start
+```
+
+### `index.js`
+
+```js
+import React from 'react'
+import mirror, {actions, connect, render} from 'mirrorx'
+
+// 声明 Redux state, reducer 和 action，
+// 所有的 action 都会以相同名称赋值到全局的 actions 对象上
+mirror.model({
+  name: 'app',
+  initialState: 0,
+  reducers: {
+    increment(state) {
+      return state + 1
+    },
+    decrement(state) {
+      return state - 1
+    }
+  }
+})
+
+// 使用 react-redux 的 connect 方法，连接 state 和组件
+const App = connect(state => {
+  return {count: state.app}
+})(props => (
+    <div>
+      <h1>{props.count}</h1>
+      {/* 调用 actions 上的方法来 dispatch action */}
+      <button onClick={() => actions.app.decrement()}>-</button>
+      <button onClick={() => actions.app.increment()}>+</button>
+    </div>
+  )
+)
+
+// 启动 app，render 方法是加强版的 ReactDOM.render
+render(<App/>, document.getElementById('root'))
+```
+
+### [Demo](https://www.webpackbin.com/bins/-Kmdm2zpS4JBvzbKBbIc)
+
+## 示例项目
+
+* [Counter](https://github.com/mirrorjs/mirror/blob/master/examples/counter)
+* [Simple-Router](https://github.com/mirrorjs/mirror/blob/master/examples/simple-router)
+* [Todo](https://github.com/mirrorjs/mirror/blob/master/examples/todo)
+
+## FAQ
+
+##### 是否支持 [Redux DevTools 扩展](https://github.com/zalmoxisus/redux-devtools-extension)？
+
+支持。
+
+##### 是否可以使用额外的 Redux middleware？
+
+可以，在 `mirror.defaults` 接口中指定即可，具体可查看文档。
+
+##### Mirror 用的是什么版本的 react-router？
+
+react-router 4.x。
+