Migrate build system to Vue CLI 4

2021-05-04 11:25:56 +02:00 · 2021-05-04 11:25:56 +02:00 · 4ad0b3f32b
commit 4ad0b3f32b
parent b3f62cc10d
16 changed files with 28969 additions and 10107 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,6 +0,0 @@
-{
-  "presets": [
-    ["env", { "modules": false }],
-    "stage-3"
-  ]
-}
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,46 +1,14 @@
 module.exports = {
    root: true,
    env: {
-        browser: true,
+        node: true,
+    },
+    extends: ['plugin:vue/essential', 'eslint:recommended'],
+    parserOptions: {
+        parser: 'babel-eslint',
    },
-    "parser": "vue-eslint-parser",
-    extends: [
-        'plugin:vue/base',
-        'plugin:vue/essential',
-        'plugin:vue/strongly-recommended',
-        // 'plugin:vue/recommended'
-    ],
-    plugins: [
-        'vue',
-    ],
    rules: {
-        indent: 'off',
-        'no-var': 'error',
-        'arrow-parens': ['error', 'always'],
-        'guard-for-in': 'off',
-        'dot-notation': 'off',
-        'no-negated-condition': 'off',
-        'capitalized-comments': 'off',
-        'no-prototype-builtins': 'off',
-        'space-infix-ops': 'off',
-
-        // Rules from https://github.com/vuejs/eslint-plugin-vue
-        'vue/html-self-closing': 'off',
-        'vue/require-default-prop': 'off',
-        'vue/require-prop-types': 'off',
-        'vue/html-quotes': 'error',
-        'vue/html-indent': ['error', 4],
-        'vue/script-indent': ['error', 4, {
-            'baseIndent': 1,
-        }],
-        'vue/max-attributes-per-line': ['error', {
-            'singleline': 6,
-            'multiline': {
-                'max': 4,
-                'allowFirstLine': true
-            }
-        }],
-        'vue/this-in-template': 'error',
+        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    },
-    globals: {},
 };
--- a/.husky/.gitignore
+++ b/.husky/.gitignore
@ -0,0 +1 @@
+_
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx pretty-quick --staged
--- a/.travis.yml
+++ b/.travis.yml
@ -1,26 +1,16 @@
 language: node_js
 node_js:
-  - "lts/*"
+    - 'lts/*'

-install: npm i
+install: npm ci

 script:
- npm test
- npm run build:deploy
-
-  # Remove unwanted files
- find . -maxdepth 1 -type f  -not -name 'LICENSE' -not -name 'index.html' -not -name 'README.md' -delete &&
-  rm -fr node_modules src dist/vanity.js
-
-  # Cache busting
- COMMIT=$(git log --format='%h' -n 1) &&
-  sed -i "s/index.js/index.$COMMIT.js/g" index.html &&
-  sed -i "s/style.css/style.$COMMIT.css/g" index.html &&
-  mv dist/index.js dist/index.$COMMIT.js &&
-  mv dist/style.css dist/style.$COMMIT.css
+    - npm test
+    - npm run build:deploy

 deploy:
-  provider: pages
-  skip_cleanup: true
-  github_token: $TOKEN
-  fqdn: vanity-eth.tk
+    provider: pages
+    skip_cleanup: true
+    local_dir: dist
+    github_token: $TOKEN
+    fqdn: vanity-eth.tk
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,3 @@
+module.exports = {
+    presets: ['@vue/cli-plugin-babel/preset'],
+};
--- a/index.html
+++ b/index.html
@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en_US">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Vanity ETH | Ethereum vanity address generator</title>
-    <meta property="og:title" content="Vanity ETH">
-    <meta property="og:locale" content="en_US">
-    <meta name="description" content="Vanity-ETH is an open source generator using your web browser to generate Ethereum
-    vanity addresses. You can get a custom ETH vanity address right now without the need to install any software.
-    Vanity-ETH provides an encrypted keystore compatible with MyEtherWallet, MetaMask, Mist, and geth.">
-    <meta property="og:description" content="Vanity-ETH is an open source generator using your web browser to generate Ethereum
-    vanity addresses. You can get a custom ETH vanity address right now without the need to install any software.
-    Vanity-ETH provides an encrypted keystore compatible with MyEtherWallet, MetaMask, Mist, and geth.">
-    <link rel="canonical" href="https://vanity-eth.tk/">
-    <meta property="og:url" content="https://vanity-eth.tk/">
-    <meta property="og:site_name" content="Vanity ETH">
-    <meta name="google-site-verification" content="DFWJVWz9IRrh-wjBxn0Y8ith5FTqMeJTSUtuJ595BEs">
-    <link rel="stylesheet" href="dist/style.css">
-    <link rel="icon" type="image/x-icon" href="dist/favicon.ico">
-    <script async defer data-website-id="9086c519-8c4a-4f8e-9dfe-daee3739238a" src="https://metrics.vanity-eth.tk/umami.js"></script>
-  </head>
-  <body>
-  <div id="app"></div>
-    <script src="dist/index.js"></script>
-  </body>
-</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,55 +1,48 @@
 {
-  "name": "vanity-eth",
-  "description": "Browser-based ETH vanity address generator ",
-  "version": "1.0.0",
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ],
-  "dependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-stage-3": "^6.24.1",
-    "blockies": "0.0.2",
-    "bootstrap": "^4.5.3",
-    "copy-webpack-plugin": "^4.5.2",
-    "cross-env": "^5.0.5",
-    "crypto-js": "^3.1.9-1",
-    "css-loader": "^0.28.7",
-    "downloadjs": "^1.4.7",
-    "eslint": "^5.5.0",
-    "eslint-plugin-vue": "^4.7.1",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.6",
-    "html-webpack-plugin": "^3.2.0",
-    "keccak": "^3.0.1",
-    "node-sass": "^4.14.1",
-    "pretty": "^2.0.0",
-    "randombytes": "^2.0.6",
-    "remodal": "^1.1.1",
-    "sass-loader": "^6.0.6",
-    "secp256k1": "^3.8.0",
-    "url-loader": "^0.6.2",
-    "vue": "^2.5.11",
-    "vue-eslint-parser": "^3.2.2",
-    "vue-loader": "^13.0.5",
-    "vue-template-compiler": "^2.4.4",
-    "webpack": "^3.12.0",
-    "webpack-dev-server": "^2.11.5",
-    "webpack-subresource-integrity": "^1.1.0-rc.5",
-    "worker-loader": "^1.1.0"
-  },
-  "license": "MIT",
-  "main": "index.js",
-  "private": true,
-  "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
-    "build:deploy": "npm i --no-save prerender-spa-plugin && cross-env DEPLOY=true npm run build",
-    "build:stats": "cross-env NODE_ENV=production webpack --json > stats.json",
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "lint": "eslint --ext .js,.vue src --fix",
-    "test": "eslint --ext .js,.vue src"
-  }
+    "name": "vanity-eth",
+    "description": "Browser-based ETH vanity address generator ",
+    "version": "1.0.0",
+    "license": "MIT",
+    "main": "index.js",
+    "private": true,
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint",
+        "build:deploy": "npm i --no-save prerender-spa-plugin && cross-env DEPLOY=true npm run build",
+        "test": "vue-cli-service lint --nofix",
+        "prepare": "husky install"
+    },
+    "prettier": "@bokub/prettier-config",
+    "dependencies": {
+        "blockies": "^0.0.2",
+        "bootstrap": "^4.6.0",
+        "core-js": "^3.6.5",
+        "crypto-js": "^3.3.0",
+        "downloadjs": "^1.4.7",
+        "keccak": "^3.0.1",
+        "randombytes": "^2.0.6",
+        "register-service-worker": "^1.7.1",
+        "remodal": "^1.1.1",
+        "secp256k1": "^3.8.0",
+        "vue": "^2.6.11"
+    },
+    "devDependencies": {
+        "@bokub/prettier-config": "^1.1.0",
+        "@vue/cli-plugin-babel": "~4.5.0",
+        "@vue/cli-plugin-eslint": "~4.5.0",
+        "@vue/cli-plugin-pwa": "~4.5.0",
+        "@vue/cli-service": "~4.5.0",
+        "babel-eslint": "^10.1.0",
+        "cross-env": "^7.0.3",
+        "eslint": "^6.7.2",
+        "eslint-plugin-vue": "^6.2.2",
+        "husky": "^6.0.0",
+        "prettier": "^2.2.1",
+        "pretty-quick": "^3.1.0",
+        "sass": "^1.26.5",
+        "sass-loader": "^8.0.2",
+        "vue-template-compiler": "^2.6.11",
+        "worker-loader": "^3.0.8"
+    }
 }
--- a/src/assets/images/favicon.ico
+++ b/src/assets/images/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en_US">
+    <head>
+        <meta charset="UTF-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+        />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>Vanity ETH | Ethereum vanity address generator</title>
+        <meta property="og:title" content="Vanity ETH" />
+        <meta property="og:locale" content="en_US" />
+        <meta
+            name="description"
+            content="Vanity-ETH is an open source generator using your web browser to generate Ethereum
+    vanity addresses. You can get a custom ETH vanity address right now without the need to install any software.
+    Vanity-ETH provides an encrypted keystore compatible with MyEtherWallet, MetaMask, Mist, and geth."
+        />
+        <meta
+            property="og:description"
+            content="Vanity-ETH is an open source generator using your web browser to generate Ethereum
+    vanity addresses. You can get a custom ETH vanity address right now without the need to install any software.
+    Vanity-ETH provides an encrypted keystore compatible with MyEtherWallet, MetaMask, Mist, and geth."
+        />
+        <link rel="canonical" href="https://vanity-eth.tk/" />
+        <meta property="og:url" content="https://vanity-eth.tk/" />
+        <meta property="og:site_name" content="Vanity ETH" />
+        <meta name="google-site-verification" content="DFWJVWz9IRrh-wjBxn0Y8ith5FTqMeJTSUtuJ595BEs" />
+        <link rel="icon" type="image/x-icon" href="favicon.ico" />
+        <script
+            async
+            defer
+            data-website-id="9086c519-8c4a-4f8e-9dfe-daee3739238a"
+            src="https://metrics.vanity-eth.tk/umami.js"
+        ></script>
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>
--- a/src/main.js
+++ b/src/main.js
@ -1,9 +1,9 @@
-/* eslint-env browser */
-
 import Vue from 'vue';
 import App from './App.vue';
+import './registerServiceWorker';
+
+Vue.config.productionTip = false;

 new Vue({
-    el: '#app',
-    render: (h) => h(App)
-});
+    render: (h) => h(App),
+}).$mount('#app');
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@ -0,0 +1,32 @@
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker';
+
+if (process.env.NODE_ENV === 'production') {
+    register(`${process.env.BASE_URL}service-worker.js`, {
+        ready() {
+            console.log(
+                'App is being served from cache by a service worker.\n' +
+                    'For more details, visit https://goo.gl/AFskqB'
+            );
+        },
+        registered() {
+            console.log('Service worker has been registered.');
+        },
+        cached() {
+            console.log('Content has been cached for offline use.');
+        },
+        updatefound() {
+            console.log('New content is downloading.');
+        },
+        updated() {
+            console.log('New content is available; please refresh.');
+        },
+        offline() {
+            console.log('No internet connection found. App is running in offline mode.');
+        },
+        error(error) {
+            console.error('Error during service worker registration:', error);
+        },
+    });
+}
--- a/src/vue/Footer.vue
+++ b/src/vue/Footer.vue
@ -4,10 +4,14 @@
            <div class="row">
                <div class="col-12 col-lg-6 address">
                    Tips:
-                    <a :href="`https://etherscan.io/address/${tipsAddress}#tokentxns`" target="_blank" v-text="tipsAddress"></a>
+                    <a
+                        :href="`https://etherscan.io/address/${tipsAddress}#tokentxns`"
+                        target="_blank"
+                        v-text="tipsAddress"
+                    ></a>
                </div>
                <div class="col-12 col-lg-6 links">
-                    <a :href="`https://etherdonation.com/d?to=${tipsAddress}`" target="_blank">
+                    <a :href="`https://etherscan.io/address/${tipsAddress}`" target="_blank">
                        <i class="icon-ethereum"></i>&nbsp;&nbsp;&nbsp;Donate
                    </a>
                    <a href="https://github.com/bokub/vanity-eth" target="_blank">
@ -26,9 +30,9 @@
    export default {
        data: function () {
            return {
-                tipsAddress: '0xAceBabe64807cb045505b268ef253D8fC2FeF5Bc'
+                tipsAddress: '0xAceBabe64807cb045505b268ef253D8fC2FeF5Bc',
            };
-        }
+        },
    };
 </script>

--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,36 @@
+const path = require('path');
+const prettier = require('prettier');
+
+module.exports = {
+    publicPath: '',
+    chainWebpack: (config) => {
+        // Worker Loader
+        config.module
+            .rule('worker')
+            .test(/vanity\.js$/)
+            .use('worker-loader')
+            .loader('worker-loader')
+            .options({
+                inline: 'no-fallback',
+                filename: 'vanity.js',
+            })
+            .end();
+    },
+    configureWebpack: {
+        plugins: process.env.DEPLOY
+            ? [
+                  new (require('prerender-spa-plugin'))({
+                      staticDir: path.join(__dirname, 'dist'),
+                      routes: ['/'],
+                      postProcess(renderedRoute) {
+                          renderedRoute.html = prettier
+                              .format(renderedRoute.html, { filepath: 'index.html', printWidth: 120 })
+                              .replace('render', 'prerender')
+                              .replace(/(data-v-[0-9a-f]+)=""/gm, '$1');
+                          return renderedRoute;
+                      },
+                  }),
+              ]
+            : [],
+    },
+};