76 | {
77 | require.ensure([], require => {
78 | cb(null, require('./pages/App/Vote').default);
79 | }, 'Vote');
80 | }}/>
81 |
82 |
83 | ```
84 |
85 | ``` javascript
86 | import connectDataFetchers from '../../utils/connectDataFetchers';
87 | import * as ACTIONS from '../../actions/vote';
88 |
89 | @connect(function mapStateToProps(state) {
90 | return {
91 | message: state.vote.message
92 | };
93 | })
94 | @connectDataFetchers([ACTIONS.loadData])
95 | class Vote extends Component {
96 | static pageConfig = {
97 | pageId: 'Vote'
98 | };
99 | render() {
100 | return (
101 |
102 | this is vote
103 | about
104 | test
105 | message: { this.props.message }
106 |
107 | );
108 | }
109 | }
110 | ```
111 | fetch data according to connectDataFetchers.
112 |
113 | ``` javascript
114 | import fetchList from '../../../fetchList';
115 |
116 | export const LOAD_VOTE_SUCCESS = 'LOAD_VOTE_SUCCESS';
117 | export const LOAD_VOTE_FAILED = 'LOAD_VOTE_FAILED';
118 |
119 | export function loadData(opts, req){
120 | return (dispatch) => {
121 | return fetchList.getVote(opts, req).then((resp) => {
122 | dispatch({
123 | type: LOAD_VOTE_SUCCESS,
124 | payload: resp.data
125 | });
126 | }).catch(() => {
127 | dispatch({
128 | type: LOAD_VOTE_FAILED
129 | });
130 | });
131 | };
132 | }
133 | ```
134 |
135 | ## TodoList
136 | * add docker support
137 |
138 |
--------------------------------------------------------------------------------
/client/css/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
--------------------------------------------------------------------------------
/client/js/pages/async.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Immutable from 'immutable';
3 |
4 | import createRender from '../utils/createApp';
5 | import Page from '../../../common/pages/async/Page.jsx';
6 | import rootReducer from '../../../common/reducers/async';
7 |
8 | import '../../css/main.css';
9 |
10 | let createApp = createRender({
11 | transformer: Immutable.fromJS
12 | });
13 |
14 | createApp({
15 | rootReducer,
16 | component:
17 | }).then((store) => {
18 | if (process.env.NODE_ENV !== 'production' && module.hot) {
19 | // Enable Webpack hot module replacement for reducers
20 | module.hot.accept(['../../../common/pages/async/Page.jsx', '../../../common/reducers/async'], () => {
21 | const NewPage = require('../../../common/pages/async/Page.jsx').default;
22 | const newRootReducer = require('../../../common/reducers/async').default;
23 | createApp({
24 | rootReducer: newRootReducer,
25 | component:
26 | });
27 | });
28 | }
29 | });
30 |
--------------------------------------------------------------------------------
/client/js/pages/chat.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import createRender from '../utils/createApp';
4 | import Page from '../../../common/pages/chat/Page.jsx';
5 | // import rootReducer from '../../../common/pages/chat/reducers';
6 |
7 | import '../../css/main.css';
8 |
9 | let createApp = createRender();
10 |
11 | createApp({
12 | component:
13 | });
14 |
--------------------------------------------------------------------------------
/client/js/pages/todo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Immutable from 'immutable';
3 |
4 | import createRender from '../utils/createApp';
5 | import Page from '../../../common/pages/todo/Todo.jsx';
6 | import rootReducer from '../../../common/reducers/todo';
7 |
8 | import '../../css/main.css';
9 |
10 | let createApp = createRender({
11 | transformer: Immutable.fromJS
12 | });
13 |
14 | createApp({
15 | rootReducer,
16 | component:
17 | });
18 |
--------------------------------------------------------------------------------
/client/js/utils/createApp.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {render} from 'react-dom';
3 | import {Provider} from 'react-redux';
4 | import fastclick from 'fastclick';
5 |
6 | import App from '../../../common/App.jsx';
7 | import configureStore from '../../../common/store/index';
8 |
9 | if (process.env.NODE_ENV !== 'production') {
10 | var whyDidYouUpdate = require('why-did-you-update').default;
11 | whyDidYouUpdate(React);
12 | var ReactPerf = require('react-addons-perf');
13 | window.ReactPerf = ReactPerf;
14 | }
15 |
16 | // fastclick解决ios和部分安卓click事件的问题
17 | fastclick.attach(document.body);
18 |
19 | export default function createRender(middlewareConfig = {}){
20 | let store = null;
21 | let page = document.getElementById('page');
22 | let onRenderCompleted = typeof middlewareConfig.onRenderCompleted === 'function' && middlewareConfig.onRenderCompleted;
23 |
24 | if (process.env.NODE_ENV !== 'production') {
25 | // React.addons.Perf性能分析使用
26 | if (window.ReactPerf) {
27 | ReactPerf.start();
28 | }
29 | }
30 |
31 | return function ({
32 | rootReducer = (() => {
33 | }),
34 | component = null
35 | }) {
36 | let transformedData = typeof middlewareConfig.transformer === 'function'
37 | ? middlewareConfig.transformer(window.__INITIAL_STATE__) : window.__INITIAL_STATE__;
38 | if (!store) {
39 | store = configureStore(transformedData, rootReducer);
40 | }
41 | // hot load from hmr
42 | else if (process.env.NODE_ENV !== 'production') {
43 | store.replaceReducer(rootReducer);
44 | }
45 |
46 | render((
47 |
48 |
49 | { component }
50 |
51 |
52 | ), page, onRenderCompleted);
53 |
54 | return Promise.resolve(store);
55 | };
56 | }
57 |
--------------------------------------------------------------------------------
/client/js/utils/spaRenderer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import { Provider } from 'react-redux';
4 | import { match, Router, browserHistory } from 'react-router';
5 | import createRoutes from '../../../common/routes';
6 | import configureStore from '../../../common/store/spaStore';
7 | import App from '../../../common/App';
8 |
9 |
10 | const store = configureStore(window.__INITIAL_STATE__, browserHistory);
11 | const routes = createRoutes(store);
12 |
13 | function onUpdate(){
14 | window.scrollTo(0, 0);
15 | }
16 |
17 | match({ history: browserHistory, routes }, (error, redirectLocation, renderProps) => {
18 | render(
19 |
20 |
21 |
22 |
23 | , document.getElementById('page')
24 | );
25 | });
26 |
--------------------------------------------------------------------------------
/client/js/utils/sw.js:
--------------------------------------------------------------------------------
1 | var config = {
2 | db: 'sw_gamPportal_201612011014'
3 | };
4 |
5 | var urlsToCache = [
6 |
7 | ];
8 |
9 | var addToCache = function (req) {
10 | return fetch(req.clone()).then(function (resp) {
11 | var cacheResp = resp.clone();
12 | if (resp.status !== 200 || (resp.type !== 'basic' && resp.type !== 'cors')) {
13 | return resp;
14 | }
15 | caches.open(config.db).then(function (cache) {
16 | cache.put(req.clone(), cacheResp);
17 | });
18 | return resp;
19 | });
20 | };
21 |
22 |
23 | // self.addEventListener('install', function (e) {
24 | // // See https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-global-scope-skipwaiting
25 | // if (typeof self.skipWaiting === 'function') {
26 | // e.waitUntil(self.skipWaiting());
27 | // }
28 |
29 | // });
30 |
31 | self.addEventListener('activate', function (event) {
32 | // event.waitUntil(Promise.all([
33 | // caches.keys().then(function (cacheNames) {
34 | // return Promise.all(cacheNames.map(function (cacheName) {
35 | // if (cacheName !== config.db) {
36 | // return caches.delete(cacheName);
37 | // }
38 | // }));
39 | // }),
40 | // typeof self.clients.claim === 'function' && self.clients.claim()
41 | // ]));
42 |
43 | // 内核的cache.delete有bug，这里先注释
44 | event.waitUntil(caches.keys().then(function (cacheNames) {
45 | return Promise.all(cacheNames.map(function (cacheName) {
46 | if (cacheName !== config.db) {
47 | return caches.delete(cacheName);
48 | }
49 | }));
50 | }));
51 | });
52 |
53 | self.addEventListener('fetch', function (event) {
54 | var requestUrl = event.request.url;
55 |
56 | var match = false;
57 | for (var i = 0; i < urlsToCache.length; ++i) {
58 | var url = urlsToCache[i];
59 | if (url instanceof RegExp) {
60 | match = url.test(requestUrl);
61 | } else if (requestUrl.indexOf(url) >= 0) {
62 | match = true;
63 | break;
64 | }
65 | }
66 |
67 | if (!match) {
68 | // event.respondWith(fetch(event.request.clone()));
69 | return;
70 | }
71 |
72 | var promise, req, url = event.request.url;
73 |
74 | if (url.indexOf('/ajax/') !== -1 || url.indexOf('bypass=1') !== -1 || url.indexOf('http:') === 0) {
75 | event.respondWith(fetch(event.request.clone()));
76 | return;
77 | }
78 |
79 | // if (url.indexOf('cors=1') !== -1) {
80 | req = new Request(url, {
81 | mode: 'cors'
82 | });
83 | // } else {
84 | // req = event.request.clone();
85 | // }
86 |
87 | promise = caches.open(config.db).then(function (cache) {
88 | return cache.match(req);
89 | }).then(function (response) {
90 | if (response) {
91 | return response;
92 | } else {
93 | return addToCache(req);
94 | }
95 | });
96 |
97 | event.respondWith(promise);
98 |
99 | });
100 |
--------------------------------------------------------------------------------
/common/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import EventEmitter from 'events';
3 |
4 | let mediator = new EventEmitter();
5 |
6 | class App extends Component {
7 | constructor(props, context) {
8 | super(props, context);
9 | }
10 |
11 | getChildContext(){
12 | return {
13 | $eventBus: mediator,
14 | $appConfig: this.props.appConfig
15 | }
16 | }
17 |
18 | componentDidMount(){
19 | }
20 |
21 | componentDidUpdate(){
22 | }
23 |
24 | componentWillUnmount(){
25 | }
26 |
27 | render() {
28 | return React.Children.only(this.props.children);
29 | }
30 | }
31 | App.defaultProps = {
32 | appConfig: null
33 | };
34 | App.propTypes = {
35 | appConfig: PropTypes.object
36 | };
37 | App.childContextTypes = {
38 | $eventBus: PropTypes.instanceOf(EventEmitter),
39 | $appConfig: PropTypes.object
40 | };
41 |
42 | export default App;
43 |
--------------------------------------------------------------------------------
/common/actions/async.js:
--------------------------------------------------------------------------------
1 | import fetch from 'isomorphic-fetch'
2 | import Immutable from 'immutable';
3 |
4 | export const REQUEST_POSTS = 'REQUEST_POSTS'
5 | export const RECEIVE_POSTS = 'RECEIVE_POSTS'
6 | export const SELECT_REDDIT = 'SELECT_REDDIT'
7 | export const INVALIDATE_REDDIT = 'INVALIDATE_REDDIT'
8 |
9 | export function selectReddit(reddit) {
10 | return {
11 | type: SELECT_REDDIT,
12 | reddit
13 | }
14 | }
15 |
16 | export function invalidateReddit(reddit) {
17 | return {
18 | type: INVALIDATE_REDDIT,
19 | reddit
20 | }
21 | }
22 |
23 | function requestPosts(reddit) {
24 | return {
25 | type: REQUEST_POSTS,
26 | reddit
27 | }
28 | }
29 |
30 | function receivePosts(reddit, json) {
31 | return {
32 | type: RECEIVE_POSTS,
33 | reddit,
34 | posts: Immutable.fromJS(json.data.children.map(child => child.data)),
35 | receivedAt: Date.now()
36 | }
37 | }
38 |
39 | function fetchPosts(reddit) {
40 | return async function(dispatch) {
41 | dispatch(requestPosts(reddit))
42 | try {
43 | let response = await fetch(`https://www.reddit.com/r/${reddit}.json`, {
44 | method: 'GET',
45 | timeout: 5000
46 | }).then(response => response.json());
47 | dispatch(receivePosts(reddit, response))
48 | } catch(ex){
49 | console.error(ex);
50 | }
51 | }
52 | }
53 |
54 | function shouldFetchPosts(state, reddit) {
55 | const posts = state.get('postsByReddit').get(reddit)
56 | if (!posts) {
57 | return true
58 | }
59 | if (posts.get('isFetching')) {
60 | return false
61 | }
62 | return posts.get('didInvalidate')
63 | }
64 |
65 | export function fetchPostsIfNeeded(reddit) {
66 | return (dispatch, getState) => {
67 | if (shouldFetchPosts(getState(), reddit)) {
68 | return dispatch(fetchPosts(reddit))
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/common/actions/todo.js:
--------------------------------------------------------------------------------
1 | /*
2 | * action 类型
3 | */
4 |
5 | export const ADD_TODO = 'ADD_TODO';
6 | export const COMPLETE_TODO = 'COMPLETE_TODO';
7 | export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'
8 |
9 | /*
10 | * 其它的常量
11 | */
12 |
13 | export const VisibilityFilters = {
14 | SHOW_ALL: 'SHOW_ALL',
15 | SHOW_COMPLETED: 'SHOW_COMPLETED',
16 | SHOW_ACTIVE: 'SHOW_ACTIVE'
17 | };
18 |
19 | /*
20 | * action 创建函数
21 | */
22 |
23 | export function addTodo(text) {
24 | return { type: ADD_TODO, text }
25 | }
26 |
27 | export function completeTodo(index) {
28 | return { type: COMPLETE_TODO, index }
29 | }
30 |
31 | export function setVisibilityFilter(filter) {
32 | return { type: SET_VISIBILITY_FILTER, filter }
33 | }
34 |
--------------------------------------------------------------------------------
/common/actions/vote.js:
--------------------------------------------------------------------------------
1 | import fetchList from '../fetchList';
2 |
3 | export const LOAD_VOTE_SUCCESS = 'LOAD_VOTE_SUCCESS';
4 | export const LOAD_VOTE_FAILED = 'LOAD_VOTE_FAILED';
5 |
6 | export function loadData(opts, req){
7 | return (dispatch) => {
8 | return fetchList.getVote(opts, req).then((resp) => {
9 | dispatch({
10 | type: LOAD_VOTE_SUCCESS,
11 | payload: resp.data
12 | });
13 | }).catch(() => {
14 | dispatch({
15 | type: LOAD_VOTE_FAILED
16 | });
17 | });
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/common/components/async/Picker.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import Immutable from 'immutable';
3 | import ImmutablePropTypes from 'react-immutable-proptypes';
4 | import Base from '../../pages/Base';
5 |
6 | export default class Picker extends Base {
7 | constructor(props, context) {
8 | super(props, context);
9 | }
10 |
11 | onChange(e) {
12 | this.props.onChange(e.target.value)
13 | }
14 |
15 | render() {
16 | const { value, onChange, options } = this.props
17 |
18 | return (
19 |
20 | {value}
21 |
29 |
30 | )
31 | }
32 | }
33 |
34 | Picker.propTypes = {
35 | options: PropTypes.arrayOf(
36 | PropTypes.string.isRequired
37 | ).isRequired,
38 | value: PropTypes.string.isRequired,
39 | onChange: PropTypes.func.isRequired
40 | }
41 |
--------------------------------------------------------------------------------
/common/components/async/Posts.jsx:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react'
2 | import ImmutablePropTypes from 'react-immutable-proptypes';
3 | import Base from '../../pages/Base';
4 |
5 | export default class Posts extends Base {
6 | render() {
7 | return (
8 |
9 | {this.props.posts.map((post, i) =>
10 | - {post.get('title')}
11 | )}
12 |
13 | )
14 | }
15 | }
16 |
17 | Posts.propTypes = {
18 | posts: ImmutablePropTypes.list.isRequired
19 | }
20 |
--------------------------------------------------------------------------------
/common/components/chat/ChangeNameForm.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Base from '../../pages/Base';
3 |
4 |
5 | export default class ChangeNameForm extends Base {
6 | constructor(props, context) {
7 | super(props, context);
8 |
9 | this.state = {newName: ''};
10 | }
11 |
12 | onKey(e) {
13 | this.setState({ newName : e.target.value });
14 | }
15 |
16 | onSubmit(e) {
17 | e.preventDefault();
18 | var newName = this.state.newName;
19 | this.props.onChangeName(newName);
20 | this.setState({ newName: '' });
21 | }
22 |
23 | render() {
24 | return(
25 |
26 |
Change Name
27 |
33 |
34 | );
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/common/components/chat/Messages.jsx:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import Base from '../../pages/Base';
3 |
4 | export class Message extends Base {
5 | constructor(props, context) {
6 | super(props, context);
7 | }
8 |
9 | render() {
10 | return (
11 |
12 | {this.props.user} :
13 | {this.props.text}
14 |
15 | );
16 | }
17 | }
18 | Message.defaultProps = {
19 | user: '',
20 | text: ''
21 | };
22 | Message.propTypes = {
23 | user: PropTypes.string.isRequired,
24 | text: PropTypes.string.isRequired
25 | };
26 |
27 | export class MessageList extends Base {
28 | constructor(props, context) {
29 | super(props, context);
30 | }
31 |
32 | render() {
33 | return (
34 |
35 |
Conversation:
36 | {
37 | this.props.messages.map((message, i) => {
38 | return (
39 |
44 | );
45 | })
46 | }
47 |
48 | );
49 | }
50 | }
51 |
52 |
53 | export class MessageForm extends Base {
54 | constructor(props, context) {
55 | super(props, context);
56 |
57 | this.state = {text: ''};
58 | }
59 |
60 | onSubmit(e) {
61 | e.preventDefault();
62 | if(!this.state.text) return;
63 |
64 | let message = {
65 | user : this.props.user,
66 | text : this.state.text
67 | };
68 | this.props.onMessageSubmit(message);
69 | this.setState({ text: '' });
70 | }
71 |
72 | onChange(e) {
73 | this.setState({ text : e.target.value });
74 | }
75 |
76 | render() {
77 | return(
78 |
79 |
Write New Message
80 |
86 |
87 | );
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/common/components/chat/UsersList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Base from '../../pages/Base';
3 |
4 | export default class UsersList extends Base {
5 | constructor(props, context) {
6 | super(props, context);
7 | }
8 |
9 | render() {
10 | return (
11 |
12 |
Online Users
13 |
14 | {
15 | this.props.users.map((user, i) => {
16 | return (
17 | -
18 | {user}
19 |
20 | );
21 | })
22 | }
23 |
24 |
59 | {this.props.children}
60 |
61 | );
62 | }
63 | }
64 | Tabs.defaultProps = {
65 | onSelect: null,
66 | activeLinkStyle: null,
67 | defaultSelectedTab: '',
68 | className: '',
69 | style: null
70 | };
71 | Tabs.propTypes = {
72 | onSelect: PropTypes.func,
73 | activeLinkStyle: PropTypes.object,
74 | defaultSelectedTab: PropTypes.string,
75 | className: PropTypes.string,
76 | style: PropTypes.object
77 | };
78 | Tabs.childContextTypes = {
79 | onSelect: PropTypes.func,
80 | selectedTab: PropTypes.string,
81 | activeStyle: PropTypes.object,
82 | firstTabLabel: PropTypes.string
83 | };
84 |
85 | const defaultActiveStyle = {
86 | fontWeight: 'bold'
87 | };
88 |
89 | export class TabTitle extends Component {
90 | constructor(props, context){
91 | super(props, context);
92 |
93 | this.onSelect = this.onSelect.bind(this);
94 | }
95 |
96 | onSelect(){
97 | this.context.onSelect(this.props.label);
98 | }
99 |
100 | componentDidMount() {
101 | if (this.context.selectedTab === this.props.label || (!this.context.selectedTab && this.context.firstTabLabel === this.props.label)) {
102 | this.context.onSelect(this.props.label);
103 | }
104 | }
105 |
106 | render() {
107 | let style = null;
108 | let isActive = this.context.selectedTab === this.props.label;
109 | if (isActive) {
110 | style = this.context.activeStyle;
111 | }
112 | let clsNames = classnames(this.props.className, { active: isActive });
113 |
114 | return (
115 |
120 | {this.props.children}
121 |
122 | );
123 | }
124 | }
125 | TabTitle.defaultProps = {
126 | label: '',
127 | className: 'tab-link'
128 | };
129 | TabTitle.propTypes = {
130 | label: PropTypes.string.isRequired,
131 | className: PropTypes.string
132 | };
133 | TabTitle.contextTypes = {
134 | onSelect: PropTypes.func,
135 | firstTabLabel: PropTypes.string,
136 | activeStyle: PropTypes.object,
137 | selectedTab: PropTypes.string
138 | };
139 |
140 | const styles = {
141 | visible: {
142 | display: 'block'
143 | },
144 | hidden: {
145 | display: 'none'
146 | }
147 | };
148 |
149 | export class TabPanel extends Component {
150 | constructor(props, context){
151 | super(props, context);
152 |
153 | for(let style in styles){
154 | if(styles.hasOwnProperty(style)){
155 | Object.assign(styles[style], this.props.style);
156 | }
157 | }
158 | }
159 |
160 | render() {
161 | let displayStyle = this.context.selectedTab === this.props.for
162 | ? styles.visible : styles.hidden;
163 |
164 | return (
165 |
168 | {this.props.children}
169 |
170 | );
171 | }
172 | }
173 | TabPanel.defaultProps = {
174 | for: '',
175 | className: 'tab-content',
176 | style: null
177 | };
178 | TabPanel.propTypes = {
179 | for: PropTypes.string.isRequired,
180 | className: PropTypes.string,
181 | style: PropTypes.object
182 | };
183 | TabPanel.contextTypes = {
184 | selectedTab: PropTypes.string
185 | };
186 |
--------------------------------------------------------------------------------
/common/components/todo/AddTodo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import Base from '../../pages/Base';
3 |
4 | export default class AddTodo extends Base {
5 | constructor(props, context) {
6 | super(props, context);
7 | }
8 |
9 | render() {
10 | return (
11 |
12 |
13 |
14 |
15 | )
16 | }
17 |
18 | onClick(e) {
19 | const node = this.refs.input;
20 | const text = node.value.trim();
21 | this.props.onAddClick(text);
22 | node.value = '';
23 | }
24 | }
25 |
26 | AddTodo.propTypes = {
27 | onAddClick: PropTypes.func.isRequired
28 | };
29 |
--------------------------------------------------------------------------------
/common/components/todo/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import Base from '../../pages/Base';
3 |
4 | export default class Footer extends Base {
5 | constructor(props, context) {
6 | super(props, context);
7 | }
8 |
9 | renderFilter(filter, name) {
10 | if (filter === this.props.filter) {
11 | return name
12 | }
13 |
14 | return (
15 | {
16 | e.preventDefault()
17 | this.props.onFilterChange(filter)
18 | } }>
19 | {name}
20 |
21 | )
22 | }
23 |
24 | render() {
25 | return (
26 |
27 | Show:
28 | {' '}
29 | {this.renderFilter('SHOW_ALL', 'All') }
30 | {', '}
31 | {this.renderFilter('SHOW_COMPLETED', 'Completed') }
32 | {', '}
33 | {this.renderFilter('SHOW_ACTIVE', 'Active') }
34 | .
35 |
36 | )
37 | }
38 | }
39 |
40 | Footer.propTypes = {
41 | onFilterChange: PropTypes.func.isRequired,
42 | filter: PropTypes.oneOf([
43 | 'SHOW_ALL',
44 | 'SHOW_COMPLETED',
45 | 'SHOW_ACTIVE'
46 | ]).isRequired
47 | }
48 |
--------------------------------------------------------------------------------
/common/components/todo/Todo.jsx:
--------------------------------------------------------------------------------
1 | import React, {Component, PropTypes} from 'react';
2 | import Base from '../../pages/Base';
3 |
4 | let styles = {
5 | completed: {
6 | textDecoration: 'line-through',
7 | cursor: 'default'
8 | },
9 | uncompleted: {
10 | textDecoration: 'none',
11 | cursor: 'pointer'
12 | }
13 | };
14 |
15 | export default class Todo extends Base {
16 | constructor(props, context) {
17 | super(props, context);
18 | }
19 |
20 | componentDidMount() {
21 | this.on('test', function () {
22 | console.log('test event bus');
23 | });
24 | }
25 |
26 | componentWillUnmount(){
27 | // unregister subscribe
28 | super.componentWillUnmount();
29 | }
30 |
31 | render() {
32 | return (
33 |
35 | { this.props.text }
36 |
37 | )
38 | }
39 | }
40 | Todo.defaultProps = {
41 | onClick: function(){},
42 | text: '',
43 | completed: false
44 | };
45 | Todo.propTypes = {
46 | onClick: PropTypes.func.isRequired,
47 | text: PropTypes.string.isRequired,
48 | completed: PropTypes.bool.isRequired
49 | };
50 |
--------------------------------------------------------------------------------
/common/components/todo/TodoList.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { List } from 'immutable';
3 | import ImmutablePropTypes from 'react-immutable-proptypes';
4 | import Todo from './Todo'
5 | import Base from '../../pages/Base';
6 |
7 | export default class TodoList extends Base {
8 | constructor(props, context) {
9 | super(props, context);
10 | }
11 |
12 | render() {
13 | return (
14 |
15 | { this.props.todos.map((todo, index) =>
16 | this.props.onTodoClick(index) } />
20 | ) }
21 |
22 | )
23 | }
24 | }
25 |
26 | TodoList.propTypes = {
27 | onTodoClick: PropTypes.func.isRequired,
28 | todos: ImmutablePropTypes.listOf(ImmutablePropTypes.contains({
29 | text: PropTypes.string.isRequired,
30 | completed: PropTypes.bool.isRequired
31 | }))
32 | };
33 |
--------------------------------------------------------------------------------
/common/config.js:
--------------------------------------------------------------------------------
1 | export const VERSION = 'v3';
2 | export const READY = 0;
3 | export const START = 1;
4 | export const SUCCESS = 2;
5 | export const FAILED = 3;
6 | export const NOMORE = 4;
7 |
8 | export default {
9 | "VERSION": VERSION,
10 |
11 | "READY": READY,
12 | "START": START,
13 | "SUCCESS": SUCCESS,
14 | "FAILED": FAILED,
15 | "NOMORE": NOMORE
16 | };
17 |
--------------------------------------------------------------------------------
/common/fetchList/clientFetch.js:
--------------------------------------------------------------------------------
1 |
2 | export default {
3 | getVote(opts){
4 | return new Promise((resolve, reject) => {
5 | setTimeout(() => {
6 | resolve({
7 | data: {
8 | message: 123
9 | }
10 | });
11 | }, 500);
12 | });
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/common/fetchList/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "fetch-list",
3 | "version": "0.0.1",
4 | "browser": "clientFetch.js",
5 | "main": "serverFetch.js"
6 | }
7 |
--------------------------------------------------------------------------------
/common/fetchList/serverFetch.js:
--------------------------------------------------------------------------------
1 |
2 | export default {
3 | getVote(opts, req){
4 | return new Promise((resolve, reject) => {
5 | setTimeout(() => {
6 | resolve({
7 | data: {
8 | message: 123
9 | }
10 | });
11 | }, 500);
12 | });
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/common/pages/App/About.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from 'react-router';
3 | import { connect } from 'react-redux';
4 |
5 | function mapStateToProps(state) {
6 | return {
7 | text: state.about
8 | };
9 | }
10 |
11 | @connect(mapStateToProps)
12 | class About extends Component {
13 | static pageConfig = {
14 | pageId: 'About'
15 | };
16 |
17 | render() {
18 | return (
19 |
20 | this is about page
21 | vote
22 | text: {this.props.text}
23 |
24 | );
25 | }
26 | }
27 |
28 | export default About;
29 |
--------------------------------------------------------------------------------
/common/pages/App/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 |
3 | let App = ({children}) => {
4 | return (
5 | React.Children.only(children)
6 | );
7 | };
8 |
9 | App.propTypes = {
10 | children: PropTypes.object
11 | };
12 |
13 | export default App;
14 |
--------------------------------------------------------------------------------
/common/pages/App/Vote.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 | import { Link } from 'react-router';
4 |
5 | import connectDataFetchers from '../../utils/connectDataFetchers';
6 | import * as ACTIONS from '../../actions/vote';
7 |
8 | @connect(function mapStateToProps(state) {
9 | return {
10 | message: state.vote.message
11 | };
12 | })
13 | @connectDataFetchers([ACTIONS.loadData])
14 | class Vote extends Component {
15 | static pageConfig = {
16 | pageId: 'Vote'
17 | };
18 | render() {
19 | return (
20 |
21 | this is vote
22 | about
23 | test
24 | message: { this.props.message }
25 |
26 | );
27 | }
28 | }
29 |
30 | export default Vote;
31 |
--------------------------------------------------------------------------------
/common/pages/Base.jsx:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react';
2 | import shallowEqual from '../utils/shallowEqual';
3 | import EventEmitter from 'events';
4 |
5 | const eventMatchReg = /^on[A-Z]/;
6 | function getEventMethodsProps(instance){
7 | let methods = Object.getOwnPropertyNames(instance)
8 | .filter((prop) => {
9 | return eventMatchReg.test(prop)
10 | && typeof instance[prop] === 'function';
11 | });
12 |
13 | let instancePrototype = Object.getPrototypeOf(instance);
14 | if(instancePrototype !== Object.prototype) {
15 | methods = methods.concat(getEventMethodsProps(instancePrototype));
16 | }
17 |
18 | return methods
19 | }
20 |
21 |
22 | export default class Base extends Component {
23 | constructor(props, context){
24 | super(props, context);
25 |
26 | this.__eventNames = {};
27 |
28 | this.__bindFunctions();
29 | }
30 |
31 | __bindFunctions(){
32 | let props = getEventMethodsProps(this);
33 | for(let prop of props){
34 | if(!this[prop].funcBinded){
35 | this[prop] = this[prop].bind(this);
36 | this[prop].funcBinded = true;
37 | }
38 | }
39 | }
40 |
41 | on(eventName, fn){
42 | if(typeof fn !== 'function') throw new Error('fn should be a function');
43 |
44 | if(!this.__eventNames[eventName]){
45 | this.__eventNames[eventName] = [fn];
46 | } else {
47 | this.__eventNames[eventName].push(fn);
48 | }
49 |
50 | return this.context.$eventBus.addListener(eventName, fn);
51 | }
52 |
53 | emit(eventName, ...args){
54 | return this.context.$eventBus.emit(eventName, ...args);
55 | }
56 |
57 | off(eventName, fn){
58 | let events = this.__eventNames[eventName];
59 | if(events){
60 | let index = events.indexOf(fn);
61 |
62 | if(index >= 0) {
63 | this.context.$eventBus.removeListener(eventName, fn);
64 |
65 | events.splice(index, 1);
66 |
67 | if(!events.length) {
68 | delete this.__eventNames[eventName];
69 | }
70 | } else {
71 | console.warn('event: ' + eventName + ' is not registered in ' + this._reactInternalInstance.getName() + ' Component');
72 | }
73 |
74 | return true;
75 | } else {
76 | console.warn('event: ' + eventName + ' is not registered in ' + this.constructor.name + ' Component');
77 |
78 | return false;
79 | }
80 | }
81 |
82 |
83 | /**
84 | * 检验组件更新
85 | * @param nextProps
86 | * @param nextState
87 | * @returns {*}
88 | */
89 | shouldComponentUpdate(nextProps, nextState){
90 | let shouldUpdate = !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
91 |
92 | if(shouldUpdate && process.env.NODE_ENV !== 'production') {
93 | console.log('Component: ' + this.constructor.name + ' will update');
94 | }
95 |
96 | return shouldUpdate;
97 | }
98 |
99 | componentWillUnmount(){
100 | for(let eventName in this.__eventNames){
101 | if(this.__eventNames.hasOwnProperty(eventName)){
102 | for(let fn of this.__eventNames[eventName]){
103 | this.off(eventName, fn);
104 | }
105 | }
106 | }
107 | }
108 | }
109 | Base.contextTypes = {
110 | $eventBus: PropTypes.instanceOf(EventEmitter)
111 | };
112 |
--------------------------------------------------------------------------------
/common/pages/async/Page.jsx:
--------------------------------------------------------------------------------
1 | import React, {Component, PropTypes} from 'react'
2 | import {connect} from 'react-redux'
3 | import Immutable from 'immutable';
4 | import ImmutablePropTypes from 'react-immutable-proptypes';
5 | import {selectReddit, fetchPostsIfNeeded, invalidateReddit} from '../../actions/async'
6 | import Picker from '../../components/async/Picker.jsx'
7 | import Posts from '../../components/async/Posts.jsx'
8 | import Base from '../Base.jsx';
9 |
10 | class AsyncPage extends Base {
11 | constructor(props, context) {
12 | super(props, context);
13 | }
14 |
15 | componentDidMount() {
16 | const {dispatch, selectedReddit} = this.props
17 | dispatch(fetchPostsIfNeeded(selectedReddit))
18 | }
19 |
20 | componentWillReceiveProps(nextProps) {
21 | if (nextProps.selectedReddit !== this.props.selectedReddit) {
22 | const {dispatch, selectedReddit} = nextProps
23 | dispatch(fetchPostsIfNeeded(selectedReddit))
24 | }
25 | }
26 |
27 | onHandleChange(nextReddit) {
28 | this.props.dispatch(selectReddit(nextReddit))
29 | }
30 |
31 | onHandleRefreshClick(e) {
32 | e.preventDefault()
33 |
34 | const {dispatch, selectedReddit} = this.props
35 | dispatch(invalidateReddit(selectedReddit))
36 | dispatch(fetchPostsIfNeeded(selectedReddit))
37 | }
38 |
39 | render() {
40 | const {selectedReddit, posts, isFetching, lastUpdated} = this.props
41 | const isEmpty = posts.size === 0
42 | return (
43 |
44 |
47 |
48 | {
49 | lastUpdated ? (
50 |
51 | Last updated at {new Date(lastUpdated).toLocaleTimeString('en-US', {
52 | hour12: false
53 | })}.
54 | {' '}
55 |
56 | ) : ''
57 | }
58 | {!isFetching &&
59 |
61 | Refresh
62 |
63 | }
64 |
65 | {isEmpty
66 | ? (isFetching ?
Loading...
:
Empty.
)
67 | :
70 | }
71 |
154 |
157 |
160 |
164 |
167 |
168 | );
169 | }
170 | }
171 | export default Page;
172 |
--------------------------------------------------------------------------------
/common/pages/todo/Todo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { connect } from 'react-redux'
3 | import { List } from 'immutable';
4 | import Base from '../Base.jsx';
5 | import { addTodo, completeTodo, setVisibilityFilter, VisibilityFilters } from '../../actions/todo'
6 | import AddTodo from '../../components/todo/AddTodo'
7 | import TodoList from '../../components/todo/TodoList'
8 | import Footer from '../../components/todo/Footer';
9 | import Tabs, { TabTitle, TabPanel } from '../../components/common/Tab';
10 |
11 | class Page extends Base {
12 | constructor(props, context) {
13 | super(props, context);
14 | }
15 |
16 | componentDidMount(){
17 | console.log(this.context.$appConfig.user);
18 |
19 | this.emit('test');
20 | }
21 |
22 | render() {
23 | // Injected by connect() call:
24 | const { dispatch, visibleTodos, visibilityFilter } = this.props
25 | return (
26 |
27 |
29 | dispatch(addTodo(text))
30 | } />
31 |
34 | dispatch(completeTodo(index))
35 | } />
36 | <%- locals.html %>
19 |
23 |
42 | <% if(locals.debug) { %>
43 |
44 | <% } else if(locals.test){ %>
45 |
46 | <% } else { %>
47 |
48 | <% } %>
49 |
50 | <% if(locals.debug) { %>
51 |
52 | <% } else if(locals.test){ %>
53 |
54 | <% } else { %>
55 |
56 | <% } %>
57 |
58 |
59 |
--------------------------------------------------------------------------------
/server/views/error.ejs:
--------------------------------------------------------------------------------
1 | <% include ./partials/header %>
2 | <%- message %>
3 | <%- error.status %>
4 | <%- error.stack %>
5 | <% include ./partials/footer %>
6 |
--------------------------------------------------------------------------------
/server/views/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | <%= locals.title %>
10 | <% if(locals.test) { %>
11 |
12 | <% } else { %>
13 |
14 | <% } %>
15 |
16 |
17 |
18 | <%- locals.html %>
19 |
20 |
24 |
43 | <% if(locals.debug) { %>
44 |
45 | <% } else if(locals.test){ %>
46 |
47 | <% } else { %>
48 |
49 | <% } %>
50 | <% if(locals.debug) { %>
51 |
52 | <% } else if(locals.test){ %>
53 |
54 | <% } else { %>
55 |
56 | <% } %>
57 |
58 |
59 |
--------------------------------------------------------------------------------
/starter.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | let pm2 = require('pm2');
4 |
5 | const instances = process.env.NODE_ENV === 'production'
6 | ? (process.env.WEB_CONCURRENCY || -1) : 1; // Set by Heroku or -1 to scale to max cpu core -1
7 | const maxMemory = process.env.WEB_MEMORY || 512; // " " "
8 |
9 | pm2.connect(function() {
10 | pm2.start({
11 | script : './dist/server.js',
12 | name : 'react-ocean',
13 | exec_mode : 'cluster',
14 | instances : instances,
15 | maxMemoryRestart : `${ maxMemory }M`, // Auto restart if process taking more than XXmo
16 | maxRestarts: 5,
17 | minUptime: 5000,
18 | log_file : './log/combined.outer.log',
19 | error_file: './log/err.log',
20 | out_file: './log/out.log',
21 | merge_logs: true,
22 | env: {
23 | "NODE_ENV": "development"
24 | },
25 | env_testing: {
26 | "NODE_ENV": "test"
27 | },
28 | env_production: {
29 | "NODE_ENV": "production"
30 | }
31 | }, function(err) {
32 | pm2.disconnect(); // Disconnect from PM2
33 |
34 | if (err)
35 | return console.error('Error while launching applications', err.stack || err);
36 |
37 | console.log('PM2 and application has been successfully started');
38 |
39 | // Display logs in standard output
40 | pm2.launchBus(function(err, bus) {
41 | console.log('[PM2] Log streaming started');
42 | bus.on('log:out', function(packet) {
43 | console.log('[App:%s] %s', packet.process.name, packet.data);
44 | });
45 | bus.on('log:err', function(packet) {
46 | console.error('[App:%s][Err] %s', packet.process.name, packet.data);
47 | });
48 | });
49 | });
50 | });
51 |
--------------------------------------------------------------------------------
/webpack-assets.json:
--------------------------------------------------------------------------------
1 | {"async":"883364dc66df5d4fa947","todo":"7c925fbf328875163978","chat":"9ed37d333f9142979733"}
--------------------------------------------------------------------------------
/webpack.config-server.js:
--------------------------------------------------------------------------------
1 | let fs = require('fs');
2 | let path = require('path');
3 | let webpack = require('webpack');
4 | let packageJson = require('./package.json');
5 |
6 |
7 | module.exports = {
8 | entry: path.resolve(__dirname, './server/app.js'),
9 |
10 | output: {
11 | path: path.resolve(__dirname, "./dist"),
12 | pathinfo: true,
13 | filename: 'server.js',
14 | libraryTarget: 'commonjs2'
15 | },
16 |
17 | debug: true,
18 | cache: true,
19 | devtool: 'source-map',
20 |
21 | target: 'node',
22 |
23 | node: {
24 | __filename: true,
25 | __dirname: true
26 | },
27 |
28 | resolve: {
29 | extensions: ['', '.js', '.jsx'],
30 | modulesDirectories: [
31 | // 'client',
32 | 'node_modules',
33 | ],
34 | },
35 |
36 | externals: Object.keys(packageJson.dependencies).filter((item) => {
37 | return (item !== 'react' && item !== 'react-dom')
38 | }).concat([
39 | // {
40 | // 'react': 'react/dist/react.min.js'
41 | // },
42 | 'react',
43 | 'react-dom/server'
44 | ]),
45 |
46 | module: {
47 | loaders: [
48 | {
49 | test: /\.jsx?$/,
50 | exclude: /node_modules/,
51 | loader: 'babel-loader',
52 | // query: {
53 | // presets: [
54 | // 'react'
55 | // ],
56 | // plugins: [
57 | // "transform-es2015-modules-commonjs",
58 | // "transform-async-to-generator",
59 | // ]
60 | // },
61 | }, {
62 | test: /\.json$/,
63 | loader: 'json-loader',
64 | },
65 | ],
66 | },
67 | plugins: [
68 | new webpack.DefinePlugin({
69 | 'process.env': {
70 | NODE_ENV: JSON.stringify('production')
71 | }
72 | }),
73 | new webpack.BannerPlugin('require("source-map-support").install();',
74 | { raw: true, entryOnly: false }),
75 | new webpack.optimize.OccurrenceOrderPlugin(),
76 | new webpack.optimize.DedupePlugin(),
77 | // new webpack.BannerPlugin('require("source-map-support").install();',
78 | // { raw: true, entryOnly: false }),
79 | new webpack.IgnorePlugin(/(\.(css|less)$)|zepto/)
80 | ],
81 | };
82 |
83 |
--------------------------------------------------------------------------------