Init: 🎉 boilerplate code

.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    ["@babel/preset-env", {"modules": false}],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "react-hot-loader/babel"
+  ],
+  "env": {
+    "production": {
+      "presets": ["minify"]
+    },
+    "test": {
+      "presets": ["@babel/preset-env", "@babel/preset-react"]
+    }
+  }
+}

.gitignore

@@ -1,61 +1,6 @@
-# Logs
+.idea/
-logs
+dist/
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
 node_modules/
-jspm_packages/
+src/**/*.jsx
-
+tests/__coverage__/
-# TypeScript v1 declaration files
+tests/**/*.jsx
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# next.js build output
-.next

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -1,2 +1,3 @@
 # clash-dashboard
-web port of clash
+
+web port of clash

configs/webpack/common.js

@@ -0,0 +1,56 @@
+// shared config (dev and prod)
+const { resolve } = require('path')
+const { CheckerPlugin } = require('awesome-typescript-loader')
+const StyleLintPlugin = require('stylelint-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
+  context: resolve(__dirname, '../../src'),
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: ['babel-loader', 'source-map-loader'],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.tsx?$/,
+        use: ['babel-loader', 'awesome-typescript-loader'],
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }],
+      },
+      {
+        test: /\.scss$/,
+        loaders: [
+          'style-loader',
+          { loader: 'css-loader', options: { importLoaders: 1 } },
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        loaders: [
+          'file-loader?hash=sha512&digest=hex&name=img/[hash].[ext]',
+          'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new CheckerPlugin(),
+    new StyleLintPlugin(),
+    new HtmlWebpackPlugin({ template: 'index.html.ejs', }),
+  ],
+  externals: {
+    'react': 'React',
+    'react-dom': 'ReactDOM',
+  },
+  performance: {
+    hints: false,
+  },
+}

configs/webpack/dev.js

@@ -0,0 +1,22 @@
+// development config
+const merge = require('webpack-merge')
+const webpack = require('webpack')
+const commonConfig = require('./common')
+
+module.exports = merge(commonConfig, {
+  mode: 'development',
+  entry: [
+    'react-hot-loader/patch', // activate HMR for React
+    'webpack-dev-server/client?http://localhost:8080',// bundle the client for webpack-dev-server and connect to the provided endpoint
+    'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
+    './index.tsx' // the entry point of our app
+  ],
+  devServer: {
+    hot: true, // enable HMR on the server
+  },
+  devtool: 'cheap-module-eval-source-map',
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(), // enable HMR globally
+    new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates
+  ],
+})

configs/webpack/prod.js

@@ -0,0 +1,17 @@
+// production config
+const merge = require('webpack-merge')
+const { resolve } = require('path')
+
+const commonConfig = require('./common')
+
+module.exports = merge(commonConfig, {
+  mode: 'production',
+  entry: './index.tsx',
+  output: {
+    filename: 'js/bundle.[hash].min.js',
+    path: resolve(__dirname, '../../dist'),
+    publicPath: '/',
+  },
+  devtool: 'source-map',
+  plugins: [],
+})

express.js

@@ -0,0 +1,11 @@
+const express = require('express')
+const app = express()
+const portNumber = 3000
+const sourceDir = 'dist'
+
+app.use(express.static(sourceDir))
+
+app.listen(portNumber, () => {
+  console.log(`Express web server started: http://localhost:${portNumber}`)
+  console.log(`Serving content from /${sourceDir}/`)
+})

package.json

@@ -0,0 +1,65 @@
+{
+  "name": "clash-dashboard",
+  "version": "0.1.0",
+  "description": "Web port of clash.",
+  "keywords": [
+    "clash",
+    "dashboard"
+  ],
+  "author": "Dreamacro",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Dreamacro/clash-dashboard.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Dreamacro/clash-dashboard/issues"
+  },
+  "homepage": "https://github.com/Dreamacro/clash-dashboard",
+  "scripts": {
+    "build": "npm run clean-dist && webpack -p --config=configs/webpack/prod.js",
+    "clean-dist": "rm -f -r -d dist",
+    "lint": "npm run lint:ts && npm run lint:sass",
+    "lint:ts": "tslint './src/**/*.ts*' --format stylish --force",
+    "lint:sass": "stylelint ./src/**/*.scss",
+    "start": "npm run start-dev",
+    "start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
+    "start-prod": "npm run build && node express.js"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@types/node": "^10.7.1",
+    "@types/react": "^16.4.11",
+    "@types/react-dom": "^16.0.7",
+    "awesome-typescript-loader": "^5.2.0",
+    "babel-loader": "^8.0.0",
+    "css-loader": "^1.0.0",
+    "express": "^4.16.3",
+    "file-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "image-webpack-loader": "^4.3.1",
+    "node-sass": "^4.9.3",
+    "react": "^16.4.2",
+    "react-addons-test-utils": "^15.6.2",
+    "react-dom": "^16.4.2",
+    "react-hot-loader": "^4.3.4",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.0",
+    "stylelint": "^9.5.0",
+    "stylelint-config-standard": "^18.2.0",
+    "stylelint-webpack-plugin": "^0.10.5",
+    "tslint": "^5.11.0",
+    "tslint-config-standard": "^7.1.0",
+    "typescript": "^3.0.1",
+    "uglifyjs-webpack-plugin": "^1.3.0",
+    "webpack": "^4.17.1",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-middleware": "^3.1.3",
+    "webpack-dev-server": "^3.1.5",
+    "webpack-merge": "^4.1.4"
+  },
+  "dependencies": {}
+}

src/assets/scss/App.scss

@@ -0,0 +1,12 @@
+$bg-color: yellow;
+$border-color: red;
+
+.app {
+  font-family: helvetica, arial, sans-serif;
+  padding: 2em;
+  border: 5px solid $border-color;
+
+  p {
+    background-color: $bg-color;
+  }
+}

src/components/App.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import './../assets/scss/App.scss'
+
+export interface AppProps {
+}
+
+export default class App extends React.Component<AppProps, {}> {
+  render () {
+    return (
+      <div className='app'>
+        <h1>Hello World!</h1>
+        <p>Foo to the barz</p>
+      </div>
+    )
+  }
+}

src/index.html.ejs

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+    <head>
+        <meta charset="UTF-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title>Hello Clash!</title>
+    </head>
+    <body>
+        <div id="root"></div>
+
+        <!-- Dependencies -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js" integrity="sha256-2EQx5J1ux3sjgPLtDevlo449XNXfvEplcRYWIF6ui8w=" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js" integrity="sha256-3NNU/yoE0R7VxxapKiw/hkgQzcSMztyclb5RpeVlV7Y=" crossorigin="anonymous"></script>
+    </body>
+</html>

src/index.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { render } from 'react-dom'
+import { AppContainer } from 'react-hot-loader'
+import App from './components/App'
+
+const rootEl = document.getElementById('root')
+
+render(
+  <AppContainer>
+    <App />
+  </AppContainer>,
+  rootEl
+)
+
+// Hot Module Replacement API
+declare let module: { hot: any }
+
+if (module.hot) {
+  module.hot.accept('./components/App', () => {
+    const NewApp = require('./components/App').default
+    render(
+      <AppContainer>
+        <NewApp />
+      </AppContainer>,
+      rootEl
+    )
+  })
+}

tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "noImplicitAny": false,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "module": "commonjs",
+        "target": "es5",
+        "jsx": "react",
+        "lib": ["es5", "es6", "dom"]
+    },
+    "include": [
+        "./src/**/*"
+    ]
+}

tslint.json

@@ -0,0 +1,3 @@
+{
+  "extends": "tslint-config-standard"
+}