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"
+}

README.md

@@ -1,2 +1,3 @@
 # clash-dashboard
+
 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"
+}