Skip to content

Commit

Permalink
Merge pull request BiosBoy#5 from BiosBoy/packageJson-upgrade
Browse files Browse the repository at this point in the history
Package json upgrade
  • Loading branch information
BiosBoy authored Nov 16, 2018
2 parents ad1b381 + 5a2757a commit a3c888c
Show file tree
Hide file tree
Showing 23 changed files with 2,290 additions and 377 deletions.
Binary file modified .DS_Store
Binary file not shown.
7 changes: 6 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@
"@babel/typescript"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import",
["@babel/plugin-transform-async-to-generator", {
"module": "bluebird",
"method": "coroutine"
}]
]
}
15 changes: 15 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,21 @@
## Webpack4 - React16.7 Templater App


# 0.4.0
* Integrated Redux state managment in the app.
* Integrated Redux saga for async actions managment.

# 0.3.2
* Fixed TSLint checking on pre-commit stage.

# 0.3.1
* Fixed hot module replacement with unchecked app changes.

# 0.3.0
* Added polifylls for unsuportated babel methods.
* Added TypeScript support.
* Injected rocket-start React-Redux state controller framework

# 0.2.0
* Added more beatiful mocks (extended from create-react-app).

Expand Down
23 changes: 14 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@


# Webpack4 - React16 Templater App
# Webpack4 - React16 Templater App
### Make custom React app development easly as never before!

This **Webpack4 + React16 Templater** is created from the point of view to solve developer day-to-day problems with app suits boilerplate creation. It has all what we need to start React app creation with rocket speed without worring about, like:
1. Oh, I need optimize my app!
2. Oh, I need create a server for app handling!
3. Oh, I need install Webpack and spend a time to configure it!
4. Oh, I need to optimize and minimize JS/CSS/etc. bundles!
5. Oh, I need to install and configure testing environment!
6. And a lot of other boring things...
3. Oh, I need a Redux/Redux-Saga installations for state managment in app!
4. Oh, I need install Webpack and spend a time to configure it!
5. Oh, I need to optimize and minimize JS/CSS/etc. bundles!
6. Oh, I need to install and configure testing environment!
7. And a lot of other boring things...

So, by using this **Templater** you will save a lot of time and will stay focused only on your own app creation. Have fun :)

Expand All @@ -19,9 +20,9 @@ So, by using this **Templater** you will save a lot of time and will stay focuse
* BrowserSync Server is configured just out of the box!
* All needed packages to work you can bootstap just by one command with `lerna` npm package: `lerna bootstrap`
* Support TypeScript version 3^.



# What is you have out of the box?
## Webpack:
* Fully support all Webpack 4^ possibilities.
Expand All @@ -37,6 +38,10 @@ So, by using this **Templater** you will save a lot of time and will stay focuse
* Support all new features from React 16.7@-alpha release.
* Hooks, Suspence and Lazy load can be used out of the box.

## Redux:
* Redux^4.0.1 is fully integrated with React to start your work asap.
* Including Redux-Saga^0.16.2 for async actions handling.

## Styling:
* Support CSS/SASS style markup.
* Integrated CSSModules for independent component styling.
Expand All @@ -56,7 +61,7 @@ So, by using this **Templater** you will save a lot of time and will stay focuse
* Includes lint-stages ^1 for styling and testing whole app code (js/jsx/ts/tsx/css/scss/json) before commiting.
* Checks code on lint rule errors before accept user commit.
* Run test suits before accept user commit.


# Technical information:
### App technical environment that are 100% support with:
Expand Down
15 changes: 8 additions & 7 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
// Jest tesitng config. Responce for app tests.
module.exports = {
cacheDirectory: '<rootDir>/.tmp/jest',
coverageDirectory: './.tmp/coverage',
moduleNameMapper: {
'^.+\\.(scss)$': 'identity-obj-proxy'
'^.+\\.(css|scss|cssmodule)$': 'identity-obj-proxy'
},
modulePaths: ['<rootDir>'],
moduleFileExtensions: ['js', 'jsx', 'json'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
globals: {
NODE_ENV: 'test'
},
verbose: true,
testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js|jsx)$',
testPathIgnorePatterns: ['/node_modules/', '/__tests__/mocks/.*'],
transformIgnorePatterns: ['.*(node_modules)(?!.*torn.*).*$'],
coveragePathIgnorePatterns: ['typings.d.ts'],
transformIgnorePatterns: ['.*(node_modules).*$'],
transform: {
'^.+\\.js$': 'babel-jest'
'^.+\\.jsx?$': 'babel-jest',
'^.+\\.tsx?$': 'ts-jest'
},
setupFiles: ['<rootDir>/setupTests.js'],
setupFiles: ['<rootDir>/setupTests.js', '<rootDir>/node_modules/whatwg-fetch/fetch.js'],
snapshotSerializers: ['enzyme-to-json/serializer']
};
29 changes: 27 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
],
"*.@(ts|tsx)": [
"prettier --write --parser typescript",
"tslint --config tsconfig.json",
"tslint --fix -c tslint.json",
"git add",
"jest --bail --findRelatedTests"
]
Expand Down Expand Up @@ -82,6 +82,7 @@
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@types/classnames": "^2.2.6",
"@types/enzyme": "^3.1.14",
"@types/enzyme-adapter-react-16": "^1.0.3",
Expand All @@ -99,6 +100,7 @@
"babel-eslint": "^10.0.1",
"better-npm-run": "^0.1.1",
"classnames": "^2.2.6",
"connect-history-api-fallback": "^1.5.0",
"css-loader": "^1.0.1",
"cssnano": "^4.1.7",
"enzyme": "^3.7.0",
Expand All @@ -113,6 +115,8 @@
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-react-hooks": "^0.0.0",
"husky": "^1.1.2",
"jest": "^23.5.0",
"jest-cli": "^23.5.0",
"jsonlint": "^1.6.3",
"lerna": "^2.11.0",
"lint-staged": "^8.0.3",
Expand All @@ -133,21 +137,33 @@
"stylelint-no-unsupported-browser-features": "^3.0.1",
"stylelint-order": "^1.0.0",
"stylelint-scss": "^3.3.0",
"ts-jest": "^23.1.3",
"tslint": "^5.11.0",
"url-loader": "^1.1.2",
"webpack-bundle-analyzer": "^3.0.3"
},
"dependencies": {
"@babel/core": "^7.1.5",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-async-to-generator": "^7.1.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-3": "^7.0.0",
"@babel/preset-typescript": "^7.1.0",
"babel": "^6.23.0",
"babel-loader": "^8.0.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"browser-sync": "^2.26.3",
"browser-sync-webpack-plugin": "^2.2.2",
"clean-webpack-plugin": "^0.1.19",
"connect-history-api-fallback": "^1.5.0",
"debug": "^4.1.0",
"history": "^4.7.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
Expand All @@ -156,11 +172,20 @@
"prop-types": "^15.6.0",
"react": "^16.7.0-alpha.0",
"react-dom": "^16.7.0-alpha.0",
"react-redux": "^6.0.0-beta.2",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-saga": "^0.16.2",
"redux-saga-watch-actions": "^0.2.0",
"regenerator-runtime": "^0.12.1",
"uglifyjs-webpack-plugin": "^1.2.7",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2",
"webpack-dev-middleware": "^3.4.0",
"webpack-dev-server": "^3.1.10",
"webpack-hot-middleware": "^2.24.3"
"webpack-hot-middleware": "^2.24.3",
"whatwg-fetch": "^3.0.0"
}
}
2 changes: 2 additions & 0 deletions server/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ require('../globals');

const path = require('path');
const browserSync = require('browser-sync');
const historyApiFallback = require('connect-history-api-fallback');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
Expand Down Expand Up @@ -31,6 +32,7 @@ browserSync({
server: {
baseDir: path.resolve(__dirname, '../src'),
middleware: [
historyApiFallback(),
webpackDevMiddleware(bundler, devMiddlewareOptions),
webpackHotMiddleware(bundler)
]
Expand Down
4 changes: 4 additions & 0 deletions src/constants/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const COUNT_ADD = 'COUNT_ADD';
// consts for Saga asyc actions, probably you do not need this below
export const SOME_SAGA = 'SOME_SAGA';
export const SOME_ASYNC_ACTION = 'SOME_ASYNC_ACTION';
21 changes: 14 additions & 7 deletions src/container/index.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
import React, { PureComponent } from 'react';
import { PropTypes } from 'prop-types';
import React from 'react';
import { Provider } from 'react-redux';
import { Header, Footer, HelloWorld } from '../components';
import styles from '../styles/index.scss';

class AppContainer extends PureComponent {
render() {
return (
const AppContainer = ({ store, history }) => {
return (
<Provider store={store} history={history}>
<div className={styles.appWrapper}>
<Header />
<HelloWorld />
<Footer />
</div>
);
}
}
</Provider>
);
};

AppContainer.propTypes = {
store: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
};

export default AppContainer;
13 changes: 13 additions & 0 deletions src/controller/actions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { COUNT_ADD, SOME_ASYNC_ACTION } from '../constants';

const addCount = count => ({
type: COUNT_ADD,
count
});

const someAsyncAction = payload => ({
type: SOME_ASYNC_ACTION,
payload
});

export { addCount, someAsyncAction };
7 changes: 7 additions & 0 deletions src/controller/initialState.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const initialState = {
common: {
appName: 'react-suspense'
}
};

export default initialState;
5 changes: 5 additions & 0 deletions src/controller/middleware/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import logger from './reduxLogger';
import makeRootReducer, { injectReducer } from './rootReducer';
import sagaMiddleware, { rootSaga, cancelTask, injectSaga, runSaga } from './rootSaga';

export { logger, makeRootReducer, injectReducer, sagaMiddleware, rootSaga, cancelTask, injectSaga, runSaga };
9 changes: 9 additions & 0 deletions src/controller/middleware/reduxLogger.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { createLogger } from 'redux-logger';

const logger = createLogger({
collapsed: true,
timestamp: false,
diff: true
});

export default logger;
20 changes: 20 additions & 0 deletions src/controller/middleware/rootReducer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { combineReducers } from 'redux';
import { routerReducer as routing } from 'react-router-redux';
import common from '../reducers';

const makeRootReducer = asyncReducers => {
return combineReducers({
...asyncReducers,
common,
routing
});
};

export const injectReducer = (store, { key, reducer }) => {
if (Object.hasOwnProperty.call(store.asyncReducers, key)) return;
store.asyncReducers[key] = reducer;

store.replaceReducer(makeRootReducer(store.asyncReducers));
};

export default makeRootReducer;
17 changes: 17 additions & 0 deletions src/controller/middleware/rootSaga.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// saga entry point - propbably you do not need it
import createSagaMiddleware from 'redux-saga';
import { all } from 'redux-saga/effects';
import createSagaMiddlewareHelpers from 'redux-saga-watch-actions/lib/middleware';
import someSaga from '../saga';

const sagaMiddleware = createSagaMiddleware();
const runSaga = saga => sagaMiddleware.run(saga);

const { injectSaga, cancelTask } = createSagaMiddlewareHelpers(sagaMiddleware); // <-- bind to sagaMiddleware.run

export function* rootSaga() {
yield all([someSaga()]);
}

export { cancelTask, injectSaga, runSaga };
export default sagaMiddleware;
28 changes: 28 additions & 0 deletions src/controller/reducers.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { COUNT_ADD, SOME_ASYNC_ACTION } from '../constants';
import initialState from './initialState';

// ------------------------------------
// Action Handlers
// ------------------------------------
const ACTION_HANDLERS = {
[COUNT_ADD]: (state, action) => ({
...state,
count: action.count,
countDoubl: action.count % 2 === 0 ? action.count : state.countDoubl
}),
[SOME_ASYNC_ACTION]: (state, action) => ({
...state,
...action.payload
})
};

// ------------------------------------
// Reducer
// ------------------------------------
const reducer = (state = initialState, action) => {
const handler = ACTION_HANDLERS[action.type];

return handler ? handler(state, action) : state;
};

export default reducer;
7 changes: 7 additions & 0 deletions src/controller/saga/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { takeLatest } from 'redux-saga/effects';
import { testSaga } from './testSaga';
import { SOME_SAGA } from '../../constants';

export default function* watchSagas() {
yield takeLatest(SOME_SAGA, testSaga);
}
18 changes: 18 additions & 0 deletions src/controller/saga/testSaga.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { put } from 'redux-saga/effects';
import { someAsyncAction } from '../actions';

export function* testSaga() {
try {
const payload = yield fetch('https://www.github.com');

// some payload from the responce recived
if (!payload) {
throw new Error('Error in payload!');
}
yield put(someAsyncAction(payload));
} catch (error) {
throw new Error('Some error in sagas occured!');
}
}

export default testSaga;
Loading

0 comments on commit a3c888c

Please sign in to comment.