Permalink
Browse files

put devToolExtension enhance at last

  • Loading branch information...
bubkoo committed Sep 2, 2017
1 parent 1780b4b commit 3b44f21f6f23af7668c46e34aec480fd7aa30f64
@@ -0,0 +1,18 @@
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"add-module-exports",
"transform-runtime"
],
"env": {
"test": {
"plugins": [
"istanbul"
]
}
}
}
@@ -0,0 +1,23 @@
extends: eslint-config-airbnb
parser: babel-eslint
env:
es6: true
node: true
mocha: true
browser: true
rules:
semi:
- warn
- never
arrow-body-style:
- error
- as-needed
no-param-reassign:
- error
- props: false
parserOptions:
ecmaFeatures:
experimentalObjectRestSpread: true
@@ -0,0 +1,10 @@
# Counter
---
## Usage
```bash
$ npm install
$ npm start
```

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,39 @@
{
"name": "mickey-counter-example",
"version": "0.0.1",
"description": "Counter example for mickey",
"dependencies": {
"mickey": "^0.1.6",
"react": "^15.6.1",
"redux-action-buffer": "^1.1.0",
"redux-persist": "^4.9.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"eslint": "^4.5.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.3.0",
"husky": "^0.14.3",
"rimraf": "^2.6.1",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"scripts": {
"lint": "eslint --ext .js,.jsx src",
"start": "webpack-dev-server --open",
"build": "cross-env NODE_ENV=production webpack -p"
}
}
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Counter Example - Mickey</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>
@@ -0,0 +1,32 @@
body {
height: 100vh;
padding: 0;
margin: 0;
}
#counter-app {
margin: 0 auto;
width: 300px;
}
h1 {
font-size: 180px;
margin: 0;
text-align: center;
}
.btn-wrap {
text-align: center;
}
button {
background-color: #fff;
border: 1px solid #a0a0a0;
border-radius: 4px;
font-size: 120%;
outline: none;
width: 60px;
height: 32px;
margin: 0 10px;
cursor: pointer;
}
@@ -0,0 +1,29 @@
/* eslint-disable react/prop-types */
import React from 'react'
import { actions, connect } from 'mickey'
import './App.css'
const App = props => (
<div id="counter-app">
<h1>{props.count}</h1>
<div className="btn-wrap">
<button onClick={() => actions.counter.decrement()}>-</button>
<button onClick={() => actions.counter.increment()}>+</button>
<button
style={{ width: 100 }}
onClick={() => {
if (props.loading) {
alert('loading') // eslint-disable-line
} else {
actions.counter.incrementAsync()
}
}}
>
{props.loading ? 'loading' : '+ Async'}
</button>
</div>
</div>
)
export default connect(store => ({ ...store.counter }))(App)
@@ -0,0 +1,32 @@
import React from 'react'
import createApp from 'mickey'
import { persistStore, autoRehydrate } from 'redux-persist'
import { REHYDRATE } from 'redux-persist/constants'
import createActionBuffer from 'redux-action-buffer'
import App from './App'
// 1. Initialize
const app = createApp({
hooks: {
// add `autoRehydrate` as an enhancer to your store (note: `autoRehydrate` is not a middleware)
onAction: [createActionBuffer(REHYDRATE)],
extraEnhancers: [autoRehydrate()],
},
})
// 2. Model
app.model(require('./models/counter.js'))
// 3. View
// app.render(<App />, document.getElementById('root'))
app.render(<App />, document.getElementById('root'), {
beforeRender: ({ store }) => {
// begin periodically persisting the store
persistStore(store, {
debounce: 500,
whitelist: ['counter'],
keyPrefix: 'mickey:',
})
},
})
@@ -0,0 +1,41 @@
import { REHYDRATE } from 'redux-persist/constants'
const delay = timeout => new Promise((resolve) => {
setTimeout(resolve, timeout)
})
export default {
namespace: 'counter',
state: {
count: 0,
loading: false,
},
enhancers: [
reducer => (state, action) => {
console.log(state, action)
const { type, payload } = action
if (type === REHYDRATE) {
return {
...state,
...payload.counter,
}
}
const ret = reducer(state, action)
console.log(ret)
console.log('------------------')
return ret
},
],
reducers: {
increment: state => ({ ...state, count: state.count + 1 }),
decrement: state => ({ ...state, count: state.count - 1 }),
},
incrementAsync: {
* effect(payload, { call }, { succeed }) {
yield call(delay, 2000)
yield succeed()
},
prepare: state => ({ ...state, loading: true }),
succeed: state => ({ ...state, count: state.count + 1, loading: false }),
},
}
@@ -0,0 +1,70 @@
const path = require('path')
const webpack = require('webpack')
const config = {
// in development,
// 'webpack-dev-server/client' and 'webpac/hot/dev-server' will be automatically added
entry: [
'./src/index.jsx',
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
publicPath: '/',
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [
path.resolve(__dirname, 'src'),
],
loader: 'babel-loader',
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
],
},
}
if (process.env.NODE_ENV === 'production') {
config.devtool = 'source-map'
// Exclude react and react-dom in the production bundle
config.externals = {
react: 'React',
'react-dom': 'ReactDOM',
}
} else {
config.devtool = 'cheap-module-source-map'
config.devServer = {
contentBase: path.resolve(__dirname, 'public'),
clientLogLevel: 'none',
quiet: true,
port: 8000,
compress: true,
hot: true,
historyApiFallback: {
disableDotRule: true,
},
}
// HMR support
config.plugins = [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
]
}
module.exports = config
@@ -0,0 +1,10 @@
# Counter
---
## Usage
```bash
$ npm install
$ npm start
```
@@ -1,6 +1,6 @@
{
"name": "mickey",
"version": "0.1.5",
"version": "0.1.7",
"description": "Lightweight front-end framework for creating Painless React and Redux based app.",
"main": "./lib/index.js",
"keywords": [
@@ -34,8 +34,8 @@ export default function ({
const enhancers = [
applyMiddleware(...middlewares),
devtools,
...extraEnhancers,
devtools,
]
const store = createStore(reducers, initialState, compose(...enhancers))
@@ -1,5 +1,6 @@
export { MemoryRouter, StaticRouter, Prompt, Redirect, Route, Switch, withRouter } from 'react-router'
export { Link, NavLink, BrowserRouter, HashRouter } from 'react-router-dom'
export { applyMiddleware, compose } from 'redux'
export { connect } from 'react-redux'
export actions from './actions'
export default from './createApp'

0 comments on commit 3b44f21

Please sign in to comment.