chore: replacing parcel with webpack (#23)

.editorconfig

@@ -2,8 +2,17 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
-indent_size = 2
 end_of_line = lf
+indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
+indent_size = 2
+
+[*.{js,ts,vue}]
+quote_type = single
+max_line_length = 120
+
+[php]
+indent_size = 4
+max_line_length = 120
+quote_type = double

.eslintrc.js

@@ -0,0 +1,56 @@
+module.exports = {
+  root: true,
+
+  parser: 'vue-eslint-parser',
+
+  parserOptions: {
+    parser: '@typescript-eslint/parser'
+  },
+
+  extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
+
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [['~', './src/']],
+        extensions: ['.ts', '.js', '.tsx']
+      }
+    }
+  },
+
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/camelcase': 'off',
+
+    'max-len': [
+      'error',
+      {
+        code: 120,
+        ignoreUrls: true,
+        ignoreRegExpLiterals: true,
+        ignoreStrings: true
+      }
+    ],
+
+    quotes: [
+      'error',
+      'single',
+      {
+        avoidEscape: true
+      }
+    ],
+
+    'require-jsdoc': [
+      'warn',
+      {
+        require: {
+          FunctionDeclaration: true,
+          MethodDefinition: false,
+          ClassDeclaration: false,
+          ArrowFunctionExpression: false
+        }
+      }
+    ]
+  }
+};

.gitignore

@@ -1,17 +1,22 @@
-# Application related files
-.env
-
-# The distribution directory
 dist/
-
-# Javascript dependencies
 node_modules/
+vendor/
 
-# Unit tests coverage report
-coverage/
+# Local ENV files
+.env
+.env.*.local
 
 # Log files
-npm-debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
 
-# Other OS config files
+# Editor directories and files
 .DS_Store
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc

@@ -4,6 +4,7 @@
   "disableLanguages": [
     "markdown"
   ],
-  "printWidth": 150,
-  "jsxSingleQuote": true
+  "printWidth": 120,
+  "jsxSingleQuote": true,
+  "trailingComma": "none"
 }

.sassrc

@@ -1,8 +1,4 @@
 {
   "relativeUrls": true,
-  "includePaths": [
-    "./node_modules/seed-vue/dist",
-    "./node_modules",
-    "./src"
-  ]
+  "includePaths": []
 }

babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      },
+      '@babel/preset-typescript'
+    ]
+  ]
+};

jest.config.js

@@ -1,15 +1,20 @@
 module.exports = {
   verbose: true,
+
+  moduleDirectories: ['node_modules', 'src'],
+
   moduleFileExtensions: ['ts', 'js', 'json', 'vue'],
+
   transform: {
-    '.*\\.(ts|js)$': 'babel-jest',
-    '.*\\.(ts)$': 'ts-jest',
-    '.*\\.(vue)$': 'vue-jest'
+    '^.+\\.(ts|tsx|js)$': 'ts-jest',
+    '^.+\\.(vue)$': 'vue-jest'
   },
+
   moduleNameMapper: {
     '^~/(.*)$': '<rootDir>/src/$1',
     '^vue$': 'vue/dist/vue.esm.js'
-  },
-  collectCoverage: false,
-  collectCoverageFrom: ['src/**/*.{ts,js,vue}', '!**/node_modules/**', '!**/coverage/**', '!**/dist/**']
+  }
+
+  // collectCoverage: false,
+  // collectCoverageFrom: ['src/**/*.{ts,js,vue}', '!**/node_modules/**', '!**/coverage/**', '!**/dist/**']
 };

package.json

@@ -1,61 +1,63 @@
 {
   "name": "vue-start-kit",
-  "version": "2.0.0",
   "description": "Just another starter-kit 😅 to bootstrap Vue applications.",
+  "version": "3.0.0",
   "main": "dist/index.html",
+  "author": "Rogerio Taques",
+  "license": "MIT",
+  "repository": "[email protected]:rogeriotaques/vue-start-kit.git",
   "scripts": {
-    "start": "parcel src/index.pug --no-cache --open",
-    "build": "yarn b:cln && yarn b:run && yarn b:cfg",
+    "start": "webpack serve --hot --no-stats --mode development",
+    "build": "webpack build",
     "lint": "eslint ./src --ext .ts,.js --no-error-on-unmatched-pattern",
-    "unit": "jest",
-    "unit:coverage": "jest --collect-coverage",
-    "b:cln": "rm -rf dist/",
-    "b:run": "NODE_ENV=production parcel build src/index.pug --cache-dir=./dist/.cache",
-    "b:cfg": "cp src/.htaccess.sample dist/.htaccess"
+    "unit": "jest"
   },
-  "repository": "[email protected]:rogeriotaques/vue-start-kit.git",
-  "author": "Rogerio Taques",
-  "license": "MIT",
   "dependencies": {
-    "axios": "^0.21.2",
+    "axios": "^0.22.0",
     "seed-vue": "^0.1.3",
-    "vue": "^2.6.12",
-    "vue-router": "^3.4.9",
-    "vuex": "^3.6.0"
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.2",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0-0",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.7",
-    "@babel/preset-typescript": "^7.12.7",
-    "@types/jest": "^26.0.16",
-    "@typescript-eslint/eslint-plugin": "^4.9.0",
-    "@typescript-eslint/parser": "^4.9.0",
-    "@vue/component-compiler-utils": "^3.2.0",
-    "@vue/composition-api": "^1.0.0-beta.20",
-    "@vue/test-utils": "^1.1.2",
+    "@babel/core": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-typescript": "^7.15.0",
+    "@types/jest": "^27.0.2",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.0.0",
-    "browserslist": "^4.16.5",
-    "eslint": "^7.14.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-config-standard": "^16.0.2",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^7.1.0",
-    "jest": "^26.6.3",
-    "jest-vue-preprocessor": "^1.7.1",
-    "parcel-bundler": "^1.12.4",
-    "pug": "^3.0.1",
-    "sass": "^1.29.0",
-    "ts-jest": "^26.4.4",
-    "ts-node": "^9.0.0",
-    "typescript": "^4.1.2",
-    "vue-hot-reload-api": "^2.3.4",
+    "copy-webpack-plugin": "^9.0.1",
+    "css-loader": "^6.3.0",
+    "eslint": "^8.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^7.19.1",
+    "jest": "^27.2.5",
+    "node-sass": "^6.0.1",
+    "prettier": "^2.4.1",
+    "pug": "^3.0.2",
+    "pug-plain-loader": "^1.1.0",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.42.1",
+    "sass-loader": "^12.1.0",
+    "style-loader": "^3.3.0",
+    "ts-jest": "^27.0.5",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.4.3",
+    "vue-eslint-parser": "^7.11.0",
     "vue-jest": "^3.0.7",
-    "vue-template-compiler": "^2.6.12"
+    "vue-loader": "^15.9.8",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.57.1",
+    "webpack-cli": "^4.9.0",
+    "webpack-dev-server": "^4.3.1"
   },
+  "browserslist": "last 2 versions, not dead, not ie > 0",
   "alias": {
     "vue": "./node_modules/vue/dist/vue.esm.js"
   }

public/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Vue Start Kit, By Rogerio Taques</title>
+
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/style/eva-icons.css" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Roboto:wght@700&display=swap" />
+
+        <style type="text/css" >
+        :root {
+          font-family: 'Noto Sans', sans-serif;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          font-family: 'Roboto', sans-serif;
+        }
+      </style>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="app.js"></script>
+    </body>
+</html>