k4rli/react-base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.0.1

Browse Source
This commit is contained in:
Karli
2020-05-17 13:56:21 +03:00
commit e9a41ffc22
32 changed files with 10191 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
.babelrc.js Normal file
View File

@@ -0,0 +1,61 @@
module.exports = (api) => {
api.cache(true);
return {
sourceType: 'module',
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: 3,
}
],
[
'@babel/preset-react',
{
development: process.env.NODE_ENV === 'development',
}
]
],
plugins: [
'@babel/plugin-proposal-optional-chaining',
[
'@babel/plugin-proposal-decorators',
{
legacy: true
}
],
'@babel/plugin-proposal-function-sent',
'@babel/plugin-proposal-export-namespace-from',
'@babel/plugin-proposal-numeric-separator',
'@babel/plugin-proposal-throw-expressions',
// Stage 3
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-syntax-import-meta',
[
'@babel/plugin-proposal-class-properties',
{
loose: true
}
],
'@babel/plugin-proposal-json-strings',
[
'module-resolver', {
root: [
'./src'
],
alias: {
'@slice': './src/slice',
'@util': './src/util',
'@container': './src/container',
'@style': './src/style',
'@constant': './src/constant',
'@context': './src/context',
'@components': './src/components',
'@hook': './src/hook',
'@assets': './assets',
}
}]
],
};
}

4
.browserslistrc Normal file
View File

@@ -0,0 +1,4 @@
> 1%
not dead
not ie <12
Firefox ESR

12
.editorconfig Normal file
View File

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

1
.eslintignore Normal file
View File

@@ -0,0 +1 @@
webpack/**

130
.eslintrc.js Normal file
View File

@@ -0,0 +1,130 @@
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 2019,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
settings: {
react: {
version: 'detect',
},
'import/resolver': {
// resolves aliases from .babelrc automatically
'babel-module': {},
},
},
env: {
es6: true,
browser: true,
node: true,
},
plugins: [
'react',
'jsx-a11y',
],
extends: [
'airbnb',
'airbnb/hooks',
'react-hooks',
'plugin:react/recommended',
],
globals: {
React: true,
document: true,
window: true,
localStorage: true,
fetch: true,
},
rules: {
'babel/object-curly-spacing': 0,
'class-methods-use-this': 0,
indent: [
'error',
2,
],
'jsx-a11y/anchor-is-valid': [
'warn',
{
aspects: [
'invalidHref',
],
},
],
'jsx-a11y/href-no-hash': 'off',
'no-trailing-spaces': [
2,
{
skipBlankLines: true,
},
],
'prefer-template': 0,
'react/jsx-boolean-value': [
'warn',
'never',
],
'react/jsx-closing-bracket-location': [
'warn',
'after-props',
],
'react/jsx-curly-spacing': [
'warn',
'never',
],
'react/jsx-filename-extension': [
'warn',
{
extensions: [
'.jsx',
],
},
],
'react/jsx-first-prop-new-line': [
'warn',
'multiline',
],
'react/jsx-handler-names': [
'warn',
{
eventHandlerPrefix: 'handle',
eventHandlerPropPrefix: 'on',
},
],
'react/jsx-indent': [
2,
2,
],
'react/jsx-key': 'error',
'react/jsx-wrap-multilines': [
'warn',
],
'react/prop-types': 0,
'react/self-closing-comp': [
'warn',
{
component: true,
html: false,
},
],
'react/sort-comp': [
1,
{
groups: {
rendering: [
'/^render.+$/',
'render',
],
},
order: [
'everything-else',
'lifecycle',
'rendering',
'static-methods',
],
},
],
},
};

2
.gitattributes vendored Normal file
View File

@@ -0,0 +1,2 @@
package-lock.json -diff
yarn.lock -diff

23
.gitignore vendored Normal file
View File

@@ -0,0 +1,23 @@
# Cruft
*~
*#
.#*
.DS_Store
# Test
coverage
.eslintcache
# Logs
*.log
# npm & yarn
node_modules/
.npm
.yarn-integrity
build/*
# Editor/IDE
.idea
.vscode
packages/api/etc/

0
assets/fonts/.gitkeep Normal file
View File

10
jsconfig.json Normal file
View File

@@ -0,0 +1,10 @@
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@*":[
"src/*"
]
}
}
}

8
nodemon.json Normal file
View File

@@ -0,0 +1,8 @@
{
"watch": [
"webpack/webpack.common.js",
"webpack/webpack.dev.js",
".babelrc.js",
"package-lock.json"
]
}

95
package.json Normal file
View File

@@ -0,0 +1,95 @@
{
"name": "react-base",
"version": "0.0.1",
"description": "Base React template",
"main": "index.js",
"scripts": {
"start": "nodemon --exec \"cross-env NODE_ENV=development webpack-dev-server\"",
"prebundle": "rimraf build/*",
"bundle": "cross-env NODE_ENV=production webpack",
"cacheclean": "rimraf node_modules/.cache/hard-source",
"precommit": "lint-staged",
"lint": "eslint --fix src --ext .jsx"
},
"author": "k4rli",
"contributors": [],
"keywords": [
"react",
"reactjs",
"react-boilerplate"
],
"license": "MIT",
"engines": {
"node": ">=11",
"npm": ">=6"
},
"lint-staged": {
"*.{js,jsx,css,md}": [
"eslint --fix",
"git add"
]
},
"dependencies": {
"@reduxjs/toolkit": "1.3.6",
"core-js": "3.6.5",
"react": "16.13.1",
"react-countdown": "2.2.1",
"react-dom": "16.13.1",
"react-hot-loader": "4.12.21",
"regenerator-runtime": "0.13.5",
"use-dark-mode": "2.3.1"
},
"devDependencies": {
"@babel/core": "7.9.6",
"@babel/plugin-proposal-class-properties": "7.8.3",
"@babel/plugin-proposal-decorators": "7.8.3",
"@babel/plugin-proposal-export-namespace-from": "7.8.3",
"@babel/plugin-proposal-function-sent": "7.8.3",
"@babel/plugin-proposal-json-strings": "7.8.3",
"@babel/plugin-proposal-numeric-separator": "7.8.3",
"@babel/plugin-proposal-optional-chaining": "7.9.0",
"@babel/plugin-proposal-throw-expressions": "7.8.3",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/plugin-syntax-import-meta": "7.8.3",
"@babel/plugin-transform-runtime": "7.9.6",
"@babel/preset-env": "7.9.6",
"@babel/preset-react": "7.9.4",
"@babel/register": "7.9.0",
"@babel/runtime-corejs3": "7.9.6",
"babel-eslint": "10.1.0",
"babel-loader": "8.1.0",
"babel-plugin-module-resolver": "4.0.0",
"browserslist": "4.12.0",
"connect-history-api-fallback": "1.6.0",
"copy-webpack-plugin": "6.0.1",
"cross-env": "7.0.2",
"css-loader": "3.5.3",
"eslint": "7.0.0",
"eslint-config-airbnb": "18.1.0",
"eslint-import-resolver-babel-module": "5.1.2",
"eslint-loader": "4.0.2",
"eslint-plugin-import": "2.20.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.20.0",
"eslint-plugin-react-hooks": "4.0.2",
"file-loader": "6.0.0",
"hard-source-webpack-plugin": "0.13.1",
"html-webpack-plugin": "4.3.0",
"koa-connect": "2.0.1",
"lint-staged": "10.2.2",
"mini-css-extract-plugin": "0.9.0",
"node-sass": "4.14.1",
"nodemon": "2.0.4",
"optimize-css-assets-webpack-plugin": "5.0.3",
"rimraf": "3.0.2",
"sass-loader": "8.0.2",
"script-ext-html-webpack-plugin": "2.1.4",
"style-loader": "1.2.1",
"terser-webpack-plugin": "3.0.1",
"webpack": "4.43.0",
"webpack-bundle-analyzer": "3.7.0",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.11.0",
"webpack-merge": "4.2.2"
}
}

1
public/assets/css/skeleton.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
public/assets/images/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

15
public/template.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>&#x1F615;</title>
<link type="text/css" rel="stylesheet" href="./assets/css/skeleton.min.css" />
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/images/icon.png">
<link rel="icon" type="image/png" sizes="64x64" href="./assets/images/icon.png">
</head>
<body>
<div id="root"></div>
</body>
</html>

12
src/constant/Properties.js Normal file
View File

@@ -0,0 +1,12 @@
export default {
STORE_KEY: 'data',
DARK_MODE: {
CLASSNAME: {
Dark: 'dark',
Light: 'light',
},
STORE: {
Key: 'theme',
},
},
};

27
src/container/App.jsx Normal file
View File

@@ -0,0 +1,27 @@
import React, { useReducer, useContext } from 'react';
import { usePersistedContext, usePersistedReducer } from '@hook/usePersist';
import RootContainer from '@container/RootContainer';
import RootContext from '@context/RootContext';
import RootReducer from '@slice/RootSlice';
import Properties from '@constant/Properties';
const App = () => {
const globalStore = usePersistedContext(
useContext(RootContext),
Properties.STORE_KEY,
);
const [state, dispatch] = usePersistedReducer(
useReducer(RootReducer, globalStore),
Properties.STORE_KEY,
);
return (
<RootContext.Provider value={{ state, dispatch }}>
<RootContainer />
</RootContext.Provider>
);
};
export default App;

13
src/container/RootContainer.jsx Normal file
View File

@@ -0,0 +1,13 @@
import React, { useState } from 'react';
import '@style/RootContainer';
const RootContainer = () => {
const [value] = useState('Hello world!');
return (
<>{value}</>
);
};
export default RootContainer;

3
src/context/RootContext.js Normal file
View File

@@ -0,0 +1,3 @@
import { createContext } from 'react';
export default createContext({}); // include initialStates here

23
src/hook/useInterval.js Normal file
View File

@@ -0,0 +1,23 @@
import { useEffect, useRef } from 'react';
// https://overreacted.io/making-setinterval-declarative-with-react-hooks/
const useInterval = (callback, delay) => {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
const tick = () => savedCallback.current();
if (delay !== null) {
const id = setInterval(tick, delay);
return () => clearInterval(id);
}
return () => {};
}, [delay]);
};
export default useInterval;

16
src/hook/usePersist.js Normal file
View File

@@ -0,0 +1,16 @@
import { useEffect } from 'react';
const DEFAULT_STATE_KEY = 'state';
export const usePersistedContext = (context, key = DEFAULT_STATE_KEY) => {
const persistedContext = localStorage.getItem(key);
return persistedContext ? JSON.parse(persistedContext) : context;
};
export const usePersistedReducer = ([state, dispatch], key = DEFAULT_STATE_KEY) => {
useEffect(
() => localStorage.setItem(key, JSON.stringify(state)),
[state],
);
return [state, dispatch];
};

6
src/index.jsx Normal file
View File

@@ -0,0 +1,6 @@
import React from 'react';
import { render } from 'react-dom';
import App from '@container/App';
render(<App />, document.getElementById('root'));

3
src/slice/RootSlice.js Normal file
View File

@@ -0,0 +1,3 @@
import { combineReducers } from '@reduxjs/toolkit';
export default combineReducers({}); // include slices here

10
src/style/RootContainer.scss Normal file
View File

@@ -0,0 +1,10 @@
@import 'palette.scss';
@import 'constants.scss';
body {
margin: 0;
font-family: 'Roboto';
overflow-x: hidden;
width: 100vw;
height: 100vh;
}

2
src/style/constants.scss Normal file
View File

@@ -0,0 +1,2 @@
$asset_dir: '../../assets';
$fonts_dir: '../../assets/fonts';

0
src/style/palette.scss Normal file
View File

14
webpack.config.js Normal file
View File

@@ -0,0 +1,14 @@
const webpackMerge = require('webpack-merge');
const common = require('./webpack/webpack.common');
const Environment = require('./webpack/webpack.common');
const envs = {
development: 'dev',
production: 'prod',
};
/* eslint-disable global-require,import/no-dynamic-require */
const env = envs[process.env.NODE_ENV || Environment.development];
const envConfig = require(`./webpack/webpack.${env}.js`);
module.exports = webpackMerge(common, envConfig);

4
webpack/Environment.js Normal file
View File

@@ -0,0 +1,4 @@
module.exports = {
development: 'development',
production: 'production',
};

20
webpack/paths.js Normal file
View File

@@ -0,0 +1,20 @@
const path = require('path');
const root = '../';
module.exports = {
root: path.resolve(__dirname, root),
outputPath: path.resolve(__dirname, root, 'build'),
entryPath: path.resolve(__dirname, root, 'src/index.jsx'),
source: path.resolve(__dirname, root, 'src/'),
templatePath: path.resolve(__dirname, root, 'public/template.html'),
cachePath: path.join(process.cwd(), 'node_modules/.cache/hard-source/', '[confighash]'),
publicPath: './',
assetPath: 'assets',
assetOriginPath: 'public/assets/',
scriptsPath: 'scripts',
imagesFolder: 'images',
fontsFolder: 'fonts',
cssFolder: 'css',
jsFolder: 'js',
};

122
webpack/webpack.common.js Normal file
View File

@@ -0,0 +1,122 @@
/* eslint-disable import/no-extraneous-dependencies */
const { ProgressPlugin } = require('webpack');
const convert = require('koa-connect');
const history = require('connect-history-api-fallback');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const commonPaths = require('./paths');
const Environment = require('./Environment');
module.exports = {
mode: Environment[process.env.NODE_ENV],
entry: commonPaths.entryPath,
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
options: {
presets: ['@babel/preset-env'],
},
},
{
enforce: 'pre',
test: /\.(js|jsx)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
options: {
emitWarning: process.env.NODE_ENV !== Environment.production,
},
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: commonPaths.imagesFolder,
},
},
],
},
{
test: /\.(woff2|ttf|woff|eot)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: commonPaths.fontsFolder,
},
},
],
},
],
},
serve: {
add: (app) => {
app.use(convert(history()));
},
content: commonPaths.entryPath,
dev: {
publicPath: commonPaths.outputPath,
},
open: false,
},
resolve: {
modules: ['src', 'node_modules'],
extensions: ['*', '.js', '.jsx', '.css', '.scss'],
},
plugins: [
new ProgressPlugin(),
new HtmlWebpackPlugin({
template: commonPaths.templatePath,
}),
new HardSourceWebpackPlugin({
// Either an absolute path or relative to webpack's options.context.
cacheDirectory: commonPaths.cachePath,
// Either a string of object hash function given a webpack config.
// node-object-hash on npm can be used to build this.
configHash: (webpackConfig) => require('node-object-hash')({ // eslint-disable-line
sort: false,
}).hash(webpackConfig),
// Either false, a string, an object, or a project hashing function.
environmentHash: {
root: process.cwd(),
directories: [],
files: [
// Cache will get an unique hash based on those files
// if either of them changes, new cache must be generated
'package-lock.json',
'.babelrc.js',
],
},
info: {
mode: 'none',
level: 'debug',
},
// Clean up large, old caches automatically.
cachePrune: {
// Caches younger than `maxAge` are not considered for deletion.
// They must be at least this old in milliseconds.
maxAge: 3 * 60 * 60 * 1000, // 3 hours
// All caches together must be larger than `sizeThreshold` before any
// caches will be deleted.
// Together they must be at least this big in bytes.
sizeThreshold: 50 * 1024 * 1024, // 50 MB
},
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'async',
}),
new CopyWebpackPlugin({
patterns: [{
from: commonPaths.assetOriginPath,
to: commonPaths.assetPath,
}],
}),
],
};

57
webpack/webpack.dev.js Normal file
View File

@@ -0,0 +1,57 @@
/* eslint-disable import/no-extraneous-dependencies */
const { HotModuleReplacementPlugin } = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const commonPaths = require('./paths');
module.exports = {
devtool: 'cheap-eval-source-map',
output: {
filename: '[name].js',
path: commonPaths.outputPath,
chunkFilename: '[name].js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/, // allows both .jsx and .js
exclude: /node_modules/,
include: commonPaths.source,
loader: 'babel-loader',
options: {
cacheDirectory: true,
plugins: ['react-hot-loader/babel'],
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: false,
},
},
{
loader: 'sass-loader',
},
],
},
],
},
devServer: {
contentBase: commonPaths.outputPath,
compress: true,
hot: true,
port: 3000,
},
plugins: [
new HotModuleReplacementPlugin(),
new BundleAnalyzerPlugin({
analyzerPort: 8888,
openAnalyzer: false,
}),
],
};

98
webpack/webpack.prod.js Normal file
View File

@@ -0,0 +1,98 @@
/* eslint-disable import/no-extraneous-dependencies */
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const commonPaths = require('./paths');
module.exports = {
output: {
publicPath: commonPaths.publicPath,
filename: `${commonPaths.scriptsPath}/${commonPaths.jsFolder}/[name].[hash].js`,
path: commonPaths.outputPath,
chunkFilename: `${commonPaths.scriptsPath}/${commonPaths.jsFolder}/[name].[chunkHash].js`,
},
module: {
rules: [
{
test: /\.(js|jsx)$/, // allows both .jsx and .js
exclude: /node_modules/,
include: commonPaths.source,
use: [
{
loader: 'babel-loader',
},
],
},
{
test: /\.(sa|sc|c)ss$/,
enforce: 'pre',
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
modules: false
},
},
{
loader: 'sass-loader',
},
],
},
],
},
optimization: {
usedExports: true, // to remove unused exports
splitChunks: {
chunks: 'all',
automaticNameDelimiter: '.',
minSize: 30000,
},
noEmitOnErrors: true,
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true, // use multi-process parallel running to improve the build speed
sourceMap: false, // set to true if you want JS source maps
terserOptions: {
mangle: true, // pass false to skip mangling names
toplevel: false, // set to true if you wish to enable top level variable and function name mangling and to drop unused variables and functions
ie8: false, // set to true to support IE8.
keep_fnames: false, // pass true to prevent discarding or mangling of function names
output: {
comments: false,
},
},
}),
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessorPluginOptions: {
preset: [
'default',
{
discardComments: {
removeAll: true,
},
},
],
},
canPrint: true,
}),
],
},
plugins: [
new MiniCssExtractPlugin({
filename: `${commonPaths.assetPath}/${commonPaths.cssFolder}/[name].css`,
chunkFilename: '[id].css',
}),
new BundleAnalyzerPlugin({
generateStatsFile: true,
reportFilename: 'bundleReport.html',
analyzerMode: 'static',
}),
],
};

9399
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff