Upgrade all packages and reinit project. (#25)

Author: staghouse

.gitignore

@@ -10,6 +10,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea

.prettierrc.js

@@ -1,6 +1,6 @@
-MIT License
+# MIT License
 
-Copyright (c) 2019 MTGJSON
+Copyright © 2019 - Eric Lakatos
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

LICENSE LICENSE.md

@@ -3,21 +3,29 @@
 This Vue/Chart.js-based data visualization fetches Magic: The Gathering JSON data and charts the various card "types" present on cards for a single MTG set.
 
 ## Project setup
-```
-yarn
+
+```sh
+npm install
 ```
 
 ### Compiles and hot-reloads for development
-```
-yarn serve
+
+```sh
+npm run serve
 ```
 
 ### Compiles and minifies for production
-```
-yarn build
+
+```sh
+npm run build
 ```
 
 ### Lints and fixes files
+
+```sh
+npm run lint
 ```
-yarn lint
-```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/).

README.md

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }

babel.config.js

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

jsconfig.json

@@ -1,6 +1,6 @@
 {
   "name": "mtgjson-graphs",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode development",
@@ -9,23 +9,24 @@
   },
   "dependencies": {
     "chart.js": "^2.9.3",
-    "core-js": "^3.5.0",
-    "node-fetch": "^3.1.1",
-    "sass": "^1.32.11",
-    "vue": "^2.6.11",
+    "core-js": "^3.8.3",
+    "vue": "^2.6.14",
     "vuex": "^3.1.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.1",
-    "@vue/cli-plugin-eslint": "^4.1.1",
-    "@vue/cli-service": "^4.5.12",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.0.1",
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
     "pug": "^3.0.1",
     "pug-plain-loader": "^1.0.0",
+    "sass": "^1.32.11",
     "sass-loader": "^8.0.0",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {
     "root": true,

package-lock.json

@@ -30,7 +30,7 @@ import Loader from './Loader';
 import Header from './Header';
 
 export default {
-  name: 'Graph',
+  name: 'GraphComponent',
   components: { Loader, Header },
   data() {
     return {

package.json

@@ -4,7 +4,7 @@
       img(class="mtg-icon" src="../assets/images/mtg-pw-icon.svg")
       span Magic: The Gathering Card Graph
     p.intro
-      strong This Vue/Chart.js-based data visualization fetches and charts Magic: The Gathering JSON data for a single set of cards.
+      strong This Vue.js/Chart.js-based data visualization fetches and charts Magic: The Gathering JSON data for a single set of cards.
     p
       strong How to Use:
       span  Select a set from the options below to update the chart with a new data set. You can also select a chart type to visualize the data differently.
@@ -14,6 +14,12 @@
 
 </template>
 
+<script>
+export default {
+  name: 'HeaderComponent'
+};
+</script>
+
 <style lang="scss" scoped>
 @import '../assets/styles/includes/variables';
 

src/components/Graph.vue

@@ -5,7 +5,7 @@
 
 <script>
 export default {
-  name: "Loader",
+  name: "LoaderComponent",
   computed: {
     isLoading() {
       return this.$store.getters.isLoading;

src/components/Header.vue

@@ -9,10 +9,10 @@
 
 <script>
 import Header from './Header';
-import Graph from './Graph.vue';
+import Graph from './Graph';
 
 export default {
-  name: 'Page',
+  name: 'PageComponent',
   components: { Header, Graph }
 }
 </script>

src/components/Loader.vue

@@ -1,8 +1,6 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
-import fetch from 'node-fetch';
-
 Vue.use(Vuex);
 
 export const store = new Vuex.Store({

src/components/Page.vue

@@ -0,0 +1,4 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true
+})