updated to Vue 3 and eslint

.eslintignore

@@ -0,0 +1 @@
+/libs

.eslintrc.js

@@ -0,0 +1,55 @@
+module.exports = {
+    env: {
+        commonjs: true,
+        es2021: true,
+        browser: true,
+    },
+    globals: {
+        Vue: 'readonly',
+    },
+    extends: [ 'eslint:recommended' ],
+    parserOptions: {
+        ecmaVersion: 12,
+    },
+    rules: {
+        'indent': [ 'error', 4 ],
+        'linebreak-style': [ 'error', 'unix' ],
+        'quotes': [ 'error', 'single' ],
+        'semi': [ 'error', 'always' ],
+        'curly': [ 'error', 'all' ],
+        'brace-style': [ 'error', '1tbs' ],
+        'jest/no-done-callback': 'off',
+        'jest/expect-expect': 'off',
+        'comma-dangle': [ 'error', 'always-multiline' ],
+        'complexity': 'error',
+        'consistent-return': 'error',
+        'dot-location': [ 'error', 'property' ],
+        'eqeqeq': [ 'error', 'always', { null: 'ignore' } ],
+        'no-empty-function': 'error',
+        'no-floating-decimal': 'error',
+        'no-multi-spaces': 'error',
+        'camelcase': [ 'error', { properties: 'never' } ],
+        'comma-spacing': [ 'error', { before: false, after: true } ],
+        'array-bracket-newline': [ 'error', { multiline: true } ],
+        'array-element-newline': [ 'error', { multiline: true, minItems: 6 } ],
+        'array-bracket-spacing': [ 'error', 'always' ],
+        'object-curly-spacing': [ 'error', 'always' ],
+        'comma-style': 'error',
+        'computed-property-spacing': 'error',
+        'eol-last': 'error',
+        'func-call-spacing': 'error',
+        'key-spacing': 'error',
+        'keyword-spacing': 'error',
+        'multiline-comment-style': 'error',
+        'newline-per-chained-call': 'error',
+        'no-lonely-if': 'error',
+        'no-multiple-empty-lines': 'error',
+        'no-trailing-spaces': 'error',
+        'no-unneeded-ternary': 'error',
+        'no-whitespace-before-property': 'error',
+        'operator-assignment': 'error',
+        'quote-props': [ 'error', 'consistent-as-needed' ],
+        'space-before-blocks': 'error',
+        'space-infix-ops': 'error',
+    },
+};

.jshintignore

@@ -1 +0,0 @@
-lib

.jshintrc

@@ -1,26 +0,0 @@
-{
-  "esversion": 6,
-  "maxerr": 999,
-  "indent": true,
-  "camelcase": true,
-  "eqeqeq": true,
-  "forin": true,
-  "immed": true,
-  "latedef": true,
-  "noarg": true,
-  "noempty": true,
-  "nonew": true,
-  "undef": true,
-  "unused": true,
-  "varstmt": true,
-  "sub": true,
-  "quotmark": "single",
-  "browser": true,
-  "devel": true,
-  "globals": {
-    "Vue": false,
-    "data": true,
-    "cookies": true,
-    "app": true
-  }
-}

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>Change this you moron</title>
     <link rel="stylesheet" href="style.css">
-    <script type="text/javascript" src="lib/vue.min.js"></script>
+    <script type="text/javascript" src="libs/vue.global.js"></script>
     <script type="text/javascript" src="main.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- card related -->
@@ -25,7 +25,7 @@
         <br>
         <p v-html="content"></p>
         <br>
-        <small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - 2019</small>
+        <small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - {{currentYear}}</small>
     </main>
 </body>
 </html>

main.js

@@ -1,101 +1,109 @@
 /* exported app, utils */
 
 const utils = {
-  ajax: {
+    ajax: {
-    proxy: 'cors-anywhere.herokuapp.com',
+        proxy: 'cors-anywhere.herokuapp.com',
-    /**
+        /**
-     * Define a get HTTP request to be executed with .then/.catch
+         * Define a get HTTP request to be executed with .then/.catch
-     * @param {string} url
+         * @param {string} url
-     * @param {Object} data
+         * @param {Object} data
-     * @param {boolean} proxy - use cors proxy
+         * @param {boolean} proxy - use cors proxy
-     * @returns {Promise<Object|string>} return JSON parsed data or string
+         * @returns {Promise<Object|string>} return JSON parsed data or string
-     */
+         */
-    get: (url, data, proxy = false) => {
+        get: (url, data, proxy = false) => {
-      return new Promise((resolve, reject) => {
+            return new Promise((resolve, reject) => {
-        if (data && Object.keys(data).length) {
+                if (data && Object.keys(data).length) {
-          url += '?' + Object.keys(data)
+                    url += '?' + Object.keys(data)
-            .map(k => k + '=' + encodeURIComponent(data[k]))
+                        .map(k => k + '=' + encodeURIComponent(data[k]))
-            .join('&')
+                        .join('&')
-            .replace(/%20/g, '+');
+                        .replace(/%20/g, '+');
-        }
+                }
-        const xhr = new XMLHttpRequest();
+                const xhr = new XMLHttpRequest();
-        if (proxy) {
+                if (proxy) {
-          const http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
+                    const http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
-          url = `${http}//${utils.ajax.proxy}/${url}`;
+                    url = `${http}//${utils.ajax.proxy}/${url}`;
-        }
+                }
-        xhr.open('GET', url);
+                xhr.open('GET', url);
-        xhr.onload = () => {
+                xhr.onload = () => {
-          try {
+                    try {
-            resolve(JSON.parse(xhr.responseText));
+                        resolve(JSON.parse(xhr.responseText));
-          } catch (ignored) {
+                    } catch (ignored) {
-            resolve(xhr.responseText);
+                        resolve(xhr.responseText);
-          }
+                    }
-        };
+                };
-        xhr.onerror = () => reject(xhr);
+                xhr.onerror = () => reject(xhr);
-        xhr.send();
+                xhr.send();
-      });
+            });
+        },
     },
-  },
+    cookies: {
-  cookies: {
     /**
      * Save a value in a cookie
      * @param {string} name
      * @param {string} value
      * @param {number | undefined} days
      */
-    set: function (name, value, days = undefined) {
+        set: function (name, value, days = undefined) {
-      const maxAge = !days ? undefined : days * 864e2;
+            const maxAge = !days ? undefined : days * 864e2;
-      document.cookie = `${name}=${encodeURIComponent(value)}${maxAge ? `;max-age=${maxAge};` : ''}`;
+            document.cookie = `${name}=${encodeURIComponent(value)}${maxAge ? `;max-age=${maxAge};` : ''}`;
+        },
+        /**
+         * Get a value from a cookie
+         * @param {string} name
+         * @return {string} value from cookie or empty if not found
+         */
+        get: function (name) {
+            return document.cookie.split('; ').reduce(function (r, v) {
+                const parts = v.split('=');
+                return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+            }, '');
+        },
+        /**
+         * Delete a cookie
+         * @param {string} name
+         */
+        delete: function (name) {
+            this.set(name, '', -1);
+        },
+        /**
+         * Clear all cookies
+         */
+        clear: function () {
+            const cookies = document.cookie.split(';');
+            for (let i = 0; i < cookies.length; i++) {
+                const cookie = cookies[i];
+                const eqPos = cookie.indexOf('=');
+                const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+                document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+            }
+        },
     },
-    /**
-     * Get a value from a cookie
-     * @param {string} name
-     * @return {string} value from cookie or empty if not found
-     */
-    get: function (name) {
-      return document.cookie.split('; ').reduce(function (r, v) {
-        const parts = v.split('=');
-        return parts[0] === name ? decodeURIComponent(parts[1]) : r;
-      }, '');
-    },
-    /**
-     * Delete a cookie
-     * @param {string} name
-     */
-    delete: function (name) {
-      this.set(name, '', -1);
-    },
-    /**
-     * Clear all cookies
-     */
-    clear: function () {
-      const cookies = document.cookie.split(';');
-      for (let i = 0; i < cookies.length; i++) {
-        const cookie = cookies[i];
-        const eqPos = cookie.indexOf('=');
-        const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
-        document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
-      }
-    }
-  }
 };
 
 let app = {
-  el: '#app',
+    data() {
-  data: {
+        return {
-    title: 'Vue-Boilerplate',
+            title: 'Vue-Boilerplate',
-    content: 'Fill this page with <i>whatever</i> you\'re going to develop.<br><b>Then enjoy!</b>'
+            content: 'Fill this page with <i>whatever</i> you\'re going to develop.<br><b>Then enjoy!</b>',
-  },
+        };
-  methods: {},
+    },
-  'mounted': function () {
+    computed: {
-    const self = this;
+        currentYear() {
-    console.log('app mounted');
+            return new Date().getFullYear();
-    setTimeout(() => {
+        },
-      self.$el.setAttribute('style', '');
+    },
-    });
+    methods: {
-  }
+        showApp() {
+            document.getElementById('app').setAttribute('style', '');
+        },
+    },
+    mounted: function () {
+        console.log('app mounted');
+        setTimeout(this.showApp);
+    },
 };
 
 window.onload = () => {
-  app = new Vue(app);
+    app = Vue.createApp(app);
+    app.mount('#app');
 };