├── .gitignore ├── .npmignore ├── README.md ├── example.js ├── files ├── .gitignore ├── README.md ├── containers │ └── app.js ├── index.js ├── package.json ├── public │ ├── index.html │ └── style.css ├── reducers │ └── index.js └── store │ ├── _async.js │ ├── _async_router.js │ ├── _simple.js │ └── _simple_router.js ├── index.js ├── optional-dependencies.json ├── package.json └── programmatical_example.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | test 2 | test.js 3 | example 4 | examples 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## redux-starter 2 | 3 | Redux starter module for [hek](http://github.com/hek/hek). It comes with; 4 | 5 | * [React](https://facebook.github.io/react/) 6 | * [Redux](http://redux.js.org) 7 | * [Browserify](http://github.com/substack/node-browserify) with [Babelify](https://github.com/babel/babelify) 8 | * [UglifyJS](https://github.com/mishoo/UglifyJS) 9 | * [Standard](https://github.com/feross/standard) 10 | 11 | ## Install 12 | 13 | Create your project with [hek](http://github.com/hek/hek) and choose `redux-starter` as one of your starters. 14 | 15 | ## Usage 16 | 17 | It'll setup you a simple but ready-to-go boilerplate, with following commands; 18 | 19 | * `npm run watch`: Build for development enviroment, watch for changes. 20 | * `npm run build`: Build for production. 21 | * `npm run serve`: Start serving the assets (under public/) on `localhost:8565` 22 | 23 | Commands for writing code: (this is not done yet) 24 | 25 | * `hek :action`: Add a new action. 26 | * `hek :reducer`: Add a new reducer. 27 | * `hek :component`: Add a new component. 28 | * `hek :container`: Add a new container. 29 | * `hek :route`: Add a new route. 30 | * `hek :async-store`: Make the store async. 31 | 32 | *P.S: `hek :action` is shortcut to `hek redux:action`. If hek recognizes your current working directory, you don't have to type the name of the starter before colon.* 33 | -------------------------------------------------------------------------------- /example.js: -------------------------------------------------------------------------------- 1 | var Project = require('hek'); 2 | var redux = require("./"); 3 | 4 | var myproject = new Project({ 5 | name: 'yolo', 6 | folder: '/tmp/yolo', 7 | starters:[require('./')], 8 | remote: 'azer/yolo', 9 | context: { 10 | github: 'azer' 11 | } 12 | }); 13 | 14 | myproject.create(function (error) { 15 | if (error) throw error; 16 | console.log('done'); 17 | }); 18 | -------------------------------------------------------------------------------- /files/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /files/README.md: -------------------------------------------------------------------------------- 1 | ## {hek:name} 2 | 3 | Created with [redux-starter](http://github.com/hek/redux-starter) 4 | 5 | ## Install 6 | 7 | ```bash 8 | $ git clone {hek:remote} 9 | $ cd {hek:slug} 10 | $ npm install 11 | ``` 12 | 13 | ## Development 14 | 15 | Commands: 16 | 17 | * `npm run watch`: Build for development enviroment, watch for changes. 18 | * `npm run serve`: Start serving the assets (under public/) on `localhost:8565` 19 | * `npm run build`: Build `public/bundle.js` for production. 20 | 21 | Links: 22 | 23 | * [Redux Manual](http://redux.js.org) 24 | * [ES6 Features](https://github.com/lukehoban/es6features) 25 | * [Hek](http://github.com/hek/hek) 26 | -------------------------------------------------------------------------------- /files/containers/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { connect } from 'react-redux' 3 | 4 | class {hek:className} extends Component { 5 | render () { 6 | return ( 7 |
8 | Hello world 9 |
10 | ) 11 | } 12 | } 13 | 14 | export default connect(mapStateToProps)({hek:className}) 15 | 16 | function mapStateToProps (state) { 17 | return {} 18 | } 19 | -------------------------------------------------------------------------------- /files/index.js: -------------------------------------------------------------------------------- 1 | import { render } from 'react-dom' 2 | import React from 'react' 3 | import { Provider } from 'react-redux' 4 | import {hek:className} from './containers/{hek:slug}' 5 | import createStore from './store' 6 | 7 | const store = createStore() 8 | 9 | render( 10 | 11 | <{hek:className} /> 12 | , 13 | document.getElementById('{hek:slug}-root') 14 | ) 15 | -------------------------------------------------------------------------------- /files/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{hek:name}", 3 | "version": "1.0.0", 4 | "description": "{hek:redux:desc}", 5 | "main": "index.js", 6 | "dependencies": { 7 | "react": "^0.14.1", 8 | "react-dom": "^0.14.1", 9 | "react-redux": "^4.0.0", 10 | "redux": "^3.0.4" 11 | }, 12 | "devDependencies": { 13 | "babelify": "^6.1.3", 14 | "browserify": "^12.0.1", 15 | "uglify-js": "^2.5.0", 16 | "watchify": "^3.6.0", 17 | "standard": "latest", 18 | "standard-format": "latest"{hek:redux:optionalDependencies} 19 | }, 20 | "scripts": { 21 | "build": "browserify index.js | uglifyjs -cm > public/bundle.js", 22 | "watch": "watchify index.js -o public/bundle.js --debug --verbose", 23 | "serve": "cd public && python -m SimpleHTTPServer 8765", 24 | "standard": "standard", 25 | "format": "standard-format -w" 26 | }, 27 | "browserify": { 28 | "transform": [ 29 | "babelify" 30 | ] 31 | }, 32 | "repository": { 33 | "url": "{hek:remote}", 34 | "type": "git" 35 | }, 36 | "author": "{hek:github}", 37 | "license": "WTFPL" 38 | } 39 | -------------------------------------------------------------------------------- /files/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {hek:title} 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /files/public/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | width: 100%; 3 | height: 100%; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | -------------------------------------------------------------------------------- /files/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' 2 | 3 | const rootReducer = combineReducers({}) 4 | 5 | export default rootReducer 6 | -------------------------------------------------------------------------------- /files/store/_async.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from 'redux' 2 | import reducers from '../reducers' 3 | import thunk from 'redux-thunk' 4 | 5 | const createAsyncStore = applyMiddleware(thunk)(createStore) 6 | 7 | export default function configureStore () { 8 | return createAsyncStore(reducers) 9 | } 10 | -------------------------------------------------------------------------------- /files/store/_async_router.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from 'redux' 2 | import reducers from '../reducers' 3 | import { syncHistory, routeReducer } from 'redux-simple-router' 4 | import { browserHistory } from 'react-router' 5 | import thunk from 'redux-thunk' 6 | 7 | const reduxRouterMiddleware = syncHistory(browserHistory) 8 | const createStoreWithMiddleware = applyMiddleware(thunk, reduxRouterMiddleware)(createStore) 9 | 10 | export default function configureStore () { 11 | return createStoreWithMiddleware() 12 | } 13 | -------------------------------------------------------------------------------- /files/store/_simple.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux' 2 | import rootReducer from '../reducers' 3 | 4 | export default function configureStore (initialState) { 5 | return createStore(rootReducer, initialState) 6 | } 7 | -------------------------------------------------------------------------------- /files/store/_simple_router.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from 'redux' 2 | import reducers from '../reducers' 3 | import { syncHistory, routeReducer } from 'redux-simple-router' 4 | import { browserHistory } from 'react-router' 5 | 6 | const reduxRouterMiddleware = syncHistory(browserHistory) 7 | const createStoreWithMiddleware = applyMiddleware(reduxRouterMiddleware)(createStore) 8 | 9 | export default function configureStore () { 10 | return createStoreWithMiddleware() 11 | } 12 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var path = require("path"); 4 | var Starter = require("starter"); 5 | var fs = require("fs"); 6 | var optionalDependencies = require("./optional-dependencies.json"); 7 | 8 | var folder = path.join(__dirname, 'files'); 9 | var form = [ 10 | { key: 'router', title: 'Need routing? (Yes/No?)', yesno: true }, 11 | { key: 'asyncStore', title: 'Store is sync by default. Prefer async? (Yes/No?)', yesno: true } 12 | ]; 13 | 14 | var render = [ 15 | "README.md", 16 | "package.json", 17 | "index.js", 18 | "containers/app.js", 19 | "public/index.html" 20 | ]; 21 | 22 | class ReduxStarter extends Starter { 23 | constructor(project) { 24 | super(project); 25 | 26 | this.name = 'redux'; 27 | this.project = project; 28 | this.folder = folder; 29 | this.form = form; 30 | this.commands = [ 31 | 'action', 32 | 'reducer', 33 | 'component', 34 | 'container', 35 | 'route', 36 | 'async-store' 37 | ]; 38 | } 39 | 40 | start(callback) { 41 | var rename = { 'containers/app.js': 'containers/{hek:slug}.js' }; 42 | var remove = []; 43 | var dependencies = []; 44 | 45 | var async = this.context.asyncStore; 46 | var router = this.context.router; 47 | 48 | if (async && router) { 49 | rename['store/_async_router.js'] = 'store/index.js'; 50 | remove.push('store/_simple.js', 'store/_simple_router.js', 'store/_async.js'); 51 | dependencies.push('redux-simple-router', 'react-router', 'redux-thunk'); 52 | } else if (async) { 53 | rename['store/_async.js'] = 'store/index.js'; 54 | remove.push('store/_simple.js', 'store/_simple_router.js', 'store/_async_router.js'); 55 | dependencies.push('redux-thunk'); 56 | } else if (router) { 57 | rename['store/_simple_router.js'] = 'store/index.js'; 58 | remove.push('store/_simple.js', 'store/_async_router.js', 'store/_async.js'); 59 | dependencies.push('redux-simple-router', 'react-router'); 60 | } else { 61 | rename['store/_simple.js'] = 'store/index.js'; 62 | remove.push('store/_simple_router.js', 'store/_async_router.js', 'store/_async.js'); 63 | } 64 | 65 | this.context.optionalDependencies = renderOptionalDependencies(dependencies); 66 | 67 | this.serial() 68 | .run(this.copy) 69 | .then(this.render, [render]) 70 | .then(this.rename, [rename]) 71 | .then(this.remove, [remove]) 72 | .done(callback); 73 | } 74 | } 75 | 76 | module.exports = ReduxStarter; 77 | 78 | function renderOptionalDependencies (deps) { 79 | if (deps.length == 0) return ''; 80 | 81 | return deps.map(function (d) { 82 | return ',\n "' + d + '": "' + optionalDependencies[d] + '"'; 83 | }).join(''); 84 | } 85 | -------------------------------------------------------------------------------- /optional-dependencies.json: -------------------------------------------------------------------------------- 1 | { 2 | "redux-thunk": "1.0.3", 3 | "redux-simple-router": "2.0.4", 4 | "react-router": "1.0.1" 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-starter", 3 | "version": "1.0.0", 4 | "description": "Redux starter module for Hek", 5 | "main": "index.js", 6 | "repository": { 7 | "url": "git@github.com:hek/redux-starter.git", 8 | "type": "git" 9 | }, 10 | "author": "azer", 11 | "license": "BSD", 12 | "dependencies": { 13 | "starter": "hek/starter" 14 | }, 15 | "devDependencies": { 16 | "hek": "github:hek/hek" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /programmatical_example.js: -------------------------------------------------------------------------------- 1 | var Project = require("hek"); 2 | var ReduxStarter = require("./"); 3 | 4 | var yolo = new Project({ 5 | name: 'yolo', 6 | folder: '/tmp/yolo', 7 | starters: [ReduxStarter], 8 | remote: 'azer/yolo', 9 | context: { 10 | github: 'azer' 11 | } 12 | }); 13 | 14 | yolo.starters[0].context = { 15 | asyncStore: false, 16 | router: false 17 | }; 18 | 19 | yolo.create(function (error) { 20 | if (error) throw error; 21 | console.log('done'); 22 | }); 23 | --------------------------------------------------------------------------------