Browse Source

optimizar build por unos KBs :P (pre-compilar graphql-tag & cambiar sistema de toast)

pull/1/head
void 3 months ago
parent
commit
90db910e43
6 changed files with 68 additions and 17 deletions
  1. 5
    2
      babel.config.js
  2. 2
    1
      package.json
  3. 34
    0
      pnpm-lock.yaml
  4. 2
    0
      src/App.vue
  5. 15
    10
      src/components/Tarea.vue
  6. 10
    4
      src/main.js

+ 5
- 2
babel.config.js View File

@@ -1,5 +1,8 @@
1 1
 module.exports = {
2 2
   presets: [
3
-    '@vue/app'
4
-  ]
3
+    '@vue/app',
4
+  ],
5
+  plugins: [
6
+    'babel-plugin-graphql-tag',
7
+  ],
5 8
 }

+ 2
- 1
package.json View File

@@ -21,11 +21,12 @@
21 21
     "vue": "^2.6.10",
22 22
     "vue-apollo": "^3.0.0-beta.29",
23 23
     "vue-router": "^3.0.3",
24
-    "vue-toasted": "^1.1.26"
24
+    "vue-snotify": "^3.2.1"
25 25
   },
26 26
   "devDependencies": {
27 27
     "@vue/cli-plugin-babel": "^3.7.0",
28 28
     "@vue/cli-service": "^3.7.0",
29
+    "babel-plugin-graphql-tag": "^2.2.0",
29 30
     "brotli-webpack-plugin": "^1.1.0",
30 31
     "compression-webpack-plugin": "^2.0.0",
31 32
     "glob-all": "^3.1.0",

+ 34
- 0
pnpm-lock.yaml View File

@@ -12,10 +12,12 @@ dependencies:
12 12
   vue: 2.6.10
13 13
   vue-apollo: 3.0.0-beta.29
14 14
   vue-router: 3.0.6
15
+  vue-snotify: 3.2.1
15 16
   vue-toasted: 1.1.26
16 17
 devDependencies:
17 18
   '@vue/cli-plugin-babel': 3.7.0
18 19
   '@vue/cli-service': 3.7.0
20
+  babel-plugin-graphql-tag: 2.2.0
19 21
   brotli-webpack-plugin: 1.1.0
20 22
   compression-webpack-plugin: 2.0.0
21 23
   glob-all: 3.1.0
@@ -1564,6 +1566,16 @@ packages:
1564 1566
     dev: true
1565 1567
     resolution:
1566 1568
       integrity: sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=
1569
+  /babel-literal-to-ast/2.1.0:
1570
+    dependencies:
1571
+      '@babel/parser': 7.4.4
1572
+      '@babel/traverse': 7.4.4
1573
+      '@babel/types': 7.4.4
1574
+    dev: true
1575
+    peerDependencies:
1576
+      '@babel/core': ^7.1.2
1577
+    resolution:
1578
+      integrity: sha512-CxfpQ0ysQ0bZOhlaPgcWjl79Em16Rhqc6++UAFn0A3duiXmuyhhj8yyl9PYbj0I0CyjrHovdDbp2QEKT7uIMxw==
1567 1579
   /babel-loader/8.0.5_@babel+core@7.4.4+webpack@4.28.4:
1568 1580
     dependencies:
1569 1581
       '@babel/core': 7.4.4
@@ -1586,6 +1598,17 @@ packages:
1586 1598
     dev: true
1587 1599
     resolution:
1588 1600
       integrity: sha512-fP899ELUnTaBcIzmrW7nniyqqdYWrWuJUyPWHxFa/c7r7hS6KC8FscNfLlBNIoPSc55kYMGEEKjPjJGCLbE1qA==
1601
+  /babel-plugin-graphql-tag/2.2.0:
1602
+    dependencies:
1603
+      '@babel/parser': 7.4.4
1604
+      babel-literal-to-ast: 2.1.0
1605
+      debug: 4.1.1
1606
+    dev: true
1607
+    peerDependencies:
1608
+      '@babel/core': ^7.0.0
1609
+      graphql-tag: ^2.10.1
1610
+    resolution:
1611
+      integrity: sha512-+5eJCFt0Ap41mwkukfZASuEAC0uaBjKLmjkDIu5MAW4T83G36zNNbKpZQmL2irkHjTdP6lWoxBbkRBt/wts12w==
1589 1612
   /babel-plugin-module-resolver/3.2.0:
1590 1613
     dependencies:
1591 1614
       find-babel-config: 1.2.0
@@ -7713,6 +7736,15 @@ packages:
7713 7736
     dev: false
7714 7737
     resolution:
7715 7738
       integrity: sha512-Ox0ciFLswtSGRTHYhGvx2L44sVbTPNS+uD2kRISuo8B39Y79rOo0Kw0hzupTmiVtftQYCZl87mwldhh2L9Aquw==
7739
+  /vue-snotify/3.2.1:
7740
+    dev: false
7741
+    engines:
7742
+      node: '>= 6.0.0'
7743
+      npm: '>= 5.0.0'
7744
+    peerDependencies:
7745
+      vue: ^2.4.2
7746
+    resolution:
7747
+      integrity: sha512-7kETtCAK3key/mDkz47FY/LuPzDGNwHHrYmS037JuVac2FW/9GTtoCNIrOp+SNbpMHeXFdLIDktkBK0IdPdHew==
7716 7748
   /vue-style-loader/4.1.2:
7717 7749
     dependencies:
7718 7750
       hash-sum: 1.0.2
@@ -8076,6 +8108,7 @@ specifiers:
8076 8108
   apollo-client: ^2.5.1
8077 8109
   apollo-link: ^1.2.11
8078 8110
   apollo-link-batch-http: ^1.2.11
8111
+  babel-plugin-graphql-tag: ^2.2.0
8079 8112
   brotli-webpack-plugin: ^1.1.0
8080 8113
   bulma: ^0.7.4
8081 8114
   compression-webpack-plugin: ^2.0.0
@@ -8091,6 +8124,7 @@ specifiers:
8091 8124
   vue: ^2.6.10
8092 8125
   vue-apollo: ^3.0.0-beta.29
8093 8126
   vue-router: ^3.0.3
8127
+  vue-snotify: ^3.2.1
8094 8128
   vue-svg-loader: ^0.12.0
8095 8129
   vue-template-compiler: ^2.6.10
8096 8130
   vue-toasted: ^1.1.26

+ 2
- 0
src/App.vue View File

@@ -16,6 +16,7 @@
16 16
       </div>
17 17
     </nav>
18 18
     <router-view />
19
+    <vue-snotify></vue-snotify>
19 20
   </div>
20 21
 </template>
21 22
 
@@ -57,6 +58,7 @@ nav {
57 58
 
58 59
 <style lang="scss">
59 60
 @import "~bulma/css/bulma.min.css";
61
+@import "~vue-snotify/styles/dark";
60 62
 
61 63
 :root {
62 64
   box-sizing: border-box;

+ 15
- 10
src/components/Tarea.vue View File

@@ -76,17 +76,22 @@ export default {
76 76
         },
77 77
       })
78 78
         .then(homework => {
79
-          this.$toasted.show(unarchive
80
-            ? 'Esa tarea fue desarchivada.'
81
-            : 'Esa tarea fue archivada.', {
82
-            action: {
83
-              text: 'Deshacer',
84
-              onClick: (e, toast) => {
85
-                this.archiveHomework(!unarchive)
86
-                toast.goAway(0)
87
-              },
79
+          this.$snotify.confirm(unarchive
80
+              ? 'Esa tarea fue desarchivada.'
81
+              : 'Esa tarea fue archivada.',
82
+            unarchive ? 'Tarea desarchivada' : 'Tarea archivada',
83
+            {
84
+              buttons: [
85
+                {text: 'Deshacer',
86
+                action: async toast => {
87
+                  await this.archiveHomework(!unarchive)
88
+                  this.$snotify.remove(toast.id)
89
+                }},
90
+                {text: 'Cerrar',
91
+                  action: toast => this.$snotify.remove(toast.id)},
92
+              ]
88 93
             }
89
-          })
94
+          )
90 95
         })
91 96
     },
92 97
   },

+ 10
- 4
src/main.js View File

@@ -1,6 +1,6 @@
1 1
 import Vue from 'vue'
2 2
 import VueApollo from 'vue-apollo'
3
-import Toasted from 'vue-toasted'
3
+import Snotify, { SnotifyPosition } from 'vue-snotify'
4 4
 
5 5
 import App from './App.vue'
6 6
 import router from './router'
@@ -9,9 +9,15 @@ import apolloClient from './apollo'
9 9
 window.__VUE_ROUTER = router
10 10
 
11 11
 Vue.use(VueApollo)
12
-Vue.use(Toasted, {
13
-  duration: 7 * 1000,
14
-  position: 'bottom-center',
12
+Vue.use(Snotify, {
13
+  toast: {
14
+    position: SnotifyPosition.centerBottom,
15
+    titleMaxLength: 32,
16
+    timeout: 3000,
17
+    showProgressBar: false,
18
+    closeOnClick: true,
19
+    pauseOnHover: false,
20
+  },
15 21
 })
16 22
 
17 23
 const apolloProvider = new VueApollo({

Loading…
Cancel
Save