workflow: added rollup-plugin-esbuild, bundling should be a bit faster; style: fixed settings flags display

package-lock.json

@@ -4,63 +4,6 @@
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
-		"@babel/code-frame": {
-			"version": "7.10.4",
-			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-			"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
-			"dev": true,
-			"requires": {
-				"@babel/highlight": "^7.10.4"
-			}
-		},
-		"@babel/helper-validator-identifier": {
-			"version": "7.10.4",
-			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
-			"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
-			"dev": true
-		},
-		"@babel/highlight": {
-			"version": "7.10.4",
-			"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
-			"integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
-			"dev": true,
-			"requires": {
-				"@babel/helper-validator-identifier": "^7.10.4",
-				"chalk": "^2.0.0",
-				"js-tokens": "^4.0.0"
-			},
-			"dependencies": {
-				"ansi-styles": {
-					"version": "3.2.1",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-					"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^1.9.0"
-					}
-				},
-				"chalk": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^3.2.1",
-						"escape-string-regexp": "^1.0.5",
-						"supports-color": "^5.3.0"
-					}
-				},
-				"supports-color": {
-					"version": "5.5.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-					"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^3.0.0"
-					}
-				}
-			}
-		},
 		"@babel/runtime": {
 			"version": "7.12.1",
 			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.1.tgz",
@@ -721,12 +664,6 @@
 				"node-releases": "^1.1.65"
 			}
 		},
-		"buffer-from": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-			"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
-			"dev": true
-		},
 		"builtin-modules": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
@@ -1008,12 +945,6 @@
 				"delayed-stream": "~1.0.0"
 			}
 		},
-		"commander": {
-			"version": "2.20.3",
-			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-			"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-			"dev": true
-		},
 		"commondir": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -1771,6 +1702,12 @@
 				"is-symbol": "^1.0.2"
 			}
 		},
+		"esbuild": {
+			"version": "0.8.3",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.8.3.tgz",
+			"integrity": "sha512-PxoukdXYOyT3pxwZmcD6jDLaPH4e2oRmWx51aflBUYk5+JcGLqwjfH9eXsnkK/1kgOA3WOVP7IhQ2gLyEH+Xbg==",
+			"dev": true
+		},
 		"escalade": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -2418,33 +2355,11 @@
 			"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
 			"dev": true
 		},
-		"jest-worker": {
+		"joycon": {
-			"version": "26.6.1",
+			"version": "2.2.5",
-			"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.1.tgz",
+			"resolved": "https://registry.npmjs.org/joycon/-/joycon-2.2.5.tgz",
-			"integrity": "sha512-R5IE3qSGz+QynJx8y+ICEkdI2OJ3RJjRQVEyCcFAd3yVhQSEtquziPO29Mlzgn07LOVE8u8jhJ1FqcwegiXWOw==",
+			"integrity": "sha512-YqvUxoOcVPnCp0VU1/56f+iKSdvIRJYPznH22BdXV3xMk75SFXhWeJkZ8C9XxUWt1b5x2X1SxuFygW1U0FmkEQ==",
-			"dev": true,
+			"dev": true
-			"requires": {
-				"@types/node": "*",
-				"merge-stream": "^2.0.0",
-				"supports-color": "^7.0.0"
-			},
-			"dependencies": {
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
-			}
 		},
 		"js-base64": {
 			"version": "2.6.4",
@@ -2452,12 +2367,6 @@
 			"integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
 			"dev": true
 		},
-		"js-tokens": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-			"dev": true
-		},
 		"js-yaml": {
 			"version": "3.14.0",
 			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
@@ -2697,12 +2606,6 @@
 				}
 			}
 		},
-		"merge-stream": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-			"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-			"dev": true
-		},
 		"mime-db": {
 			"version": "1.44.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
@@ -6084,15 +5987,6 @@
 			"integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
 			"dev": true
 		},
-		"randombytes": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-			"integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-			"dev": true,
-			"requires": {
-				"safe-buffer": "^5.1.0"
-			}
-		},
 		"read-pkg": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -6273,6 +6167,29 @@
 			"integrity": "sha512-zUPGitW4usmZcVa0nKecRvw3odtXgnxdCben9Hx1kxVoR3demek8RU9tmRG/R35hnRPQTb7wEsYEe3GUcjxIMA==",
 			"dev": true
 		},
+		"rollup-plugin-esbuild": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/rollup-plugin-esbuild/-/rollup-plugin-esbuild-2.5.2.tgz",
+			"integrity": "sha512-E4q3ac1AlMd0m0ZRYffdiorOt2eZcxfbdPaqBLs7JLnPE8krgIAihOD6cTUc54UJjoOMA9WcY63TR+JKWLzYNw==",
+			"dev": true,
+			"requires": {
+				"@rollup/pluginutils": "^4.0.0",
+				"joycon": "^2.2.5",
+				"strip-json-comments": "^3.1.1"
+			},
+			"dependencies": {
+				"@rollup/pluginutils": {
+					"version": "4.1.0",
+					"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz",
+					"integrity": "sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==",
+					"dev": true,
+					"requires": {
+						"estree-walker": "^2.0.1",
+						"picomatch": "^2.2.2"
+					}
+				}
+			}
+		},
 		"rollup-plugin-postcss": {
 			"version": "3.1.8",
 			"resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-3.1.8.tgz",
@@ -6459,18 +6376,6 @@
 				}
 			}
 		},
-		"rollup-plugin-terser": {
-			"version": "7.0.2",
-			"resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
-			"integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
-			"dev": true,
-			"requires": {
-				"@babel/code-frame": "^7.10.4",
-				"jest-worker": "^26.2.1",
-				"serialize-javascript": "^4.0.0",
-				"terser": "^5.0.0"
-			}
-		},
 		"rollup-plugin-vue": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-4.2.0.tgz",
@@ -6613,15 +6518,6 @@
 			"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
 			"dev": true
 		},
-		"serialize-javascript": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
-			"integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
-			"dev": true,
-			"requires": {
-				"randombytes": "^2.1.0"
-			}
-		},
 		"set-blocking": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@@ -6687,24 +6583,6 @@
 				"amdefine": ">=0.0.4"
 			}
 		},
-		"source-map-support": {
-			"version": "0.5.19",
-			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
-			"integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
-			"dev": true,
-			"requires": {
-				"buffer-from": "^1.0.0",
-				"source-map": "^0.6.0"
-			},
-			"dependencies": {
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				}
-			}
-		},
 		"sourcemap-codec": {
 			"version": "1.4.8",
 			"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
@@ -6908,6 +6786,12 @@
 				"get-stdin": "^4.0.1"
 			}
 		},
+		"strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"dev": true
+		},
 		"style-inject": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/style-inject/-/style-inject-0.3.0.tgz",
@@ -7230,25 +7114,6 @@
 				"inherits": "2"
 			}
 		},
-		"terser": {
-			"version": "5.3.8",
-			"resolved": "https://registry.npmjs.org/terser/-/terser-5.3.8.tgz",
-			"integrity": "sha512-zVotuHoIfnYjtlurOouTazciEfL7V38QMAOhGqpXDEg6yT13cF4+fEP9b0rrCEQTn+tT46uxgFsTZzhygk+CzQ==",
-			"dev": true,
-			"requires": {
-				"commander": "^2.20.0",
-				"source-map": "~0.7.2",
-				"source-map-support": "~0.5.19"
-			},
-			"dependencies": {
-				"source-map": {
-					"version": "0.7.3",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-					"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-					"dev": true
-				}
-			}
-		},
 		"timsort": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",

package.json

@@ -33,15 +33,16 @@
 		"@rollup/plugin-commonjs": "^16.0.0",
 		"@rollup/plugin-node-resolve": "^10.0.0",
 		"@rollup/plugin-replace": "^2.3.4",
+		"esbuild": "^0.8.3",
 		"node-sass": "^4.14.1",
 		"npm-run-all": "^4.1.5",
 		"postcss": "^8.1.4",
 		"rimraf": "^3.0.2",
 		"rollup": "^2.32.1",
 		"rollup-plugin-analyzer": "^3.3.0",
+		"rollup-plugin-esbuild": "^2.5.2",
 		"rollup-plugin-postcss": "^3.1.8",
 		"rollup-plugin-svg": "^2.0.0",
-		"rollup-plugin-terser": "^7.0.2",
 		"rollup-plugin-vue": "^4.2.0",
 		"sass": "^1.27.0",
 		"tailwindcss": "^1.9.6",

rollup.config.js

@@ -1,5 +1,4 @@
 import resolve from '@rollup/plugin-node-resolve'
-import { terser } from 'rollup-plugin-terser'
 import commonjs from '@rollup/plugin-commonjs'
 import replace from '@rollup/plugin-replace'
 import alias from '@rollup/plugin-alias'
@@ -7,11 +6,10 @@ import analyze from 'rollup-plugin-analyzer'
 import vue from 'rollup-plugin-vue'
 import svg from 'rollup-plugin-svg'
 import postcss from 'rollup-plugin-postcss'
+import esbuild from 'rollup-plugin-esbuild'
 
-// 'rollup -c' 		-> 'production' is false
+const isProduction = !process.env.ROLLUP_WATCH
-// 'rollup -c -w' -> 'production' is true
+process.env.NODE_ENV = isProduction ? 'production' : 'development'
-const production = !process.env.ROLLUP_WATCH
-process.env.NODE_ENV = production ? 'production' : 'development'
 
 export default {
 	input: 'src/app.js',
@@ -19,7 +17,7 @@ export default {
 		{
 			file: 'public/js/bundle.js',
 			format: 'module',
-			sourcemap: !production
+			sourcemap: !isProduction
 		}
 	],
 	plugins: [
@@ -48,7 +46,11 @@ export default {
 		svg(),
 		vue(),
 		postcss(),
-		production && terser(), // Minify, but only in production
+		esbuild({
-		production && analyze({ showExports: true, limit: 15 }) // Show useful information about bundles, only in production
+			sourceMap: false,
+			minify: isProduction,
+			target: 'es2015'
+		}),
+		isProduction && analyze({ showExports: true, limit: 15 }) // Show useful information about bundles, only in production
 	]
 }

src/components/pages/Settings.vue

@@ -54,7 +54,7 @@
 				<span
 					v-for="locale in locales"
 					:key="locale"
-					class="flex items-center locale-flag"
+					class="inline-flex items-center locale-flag"
 					:class="{ 'locale-flag--current': currentLocale === locale }"
 					@click="changeLocale(locale)"
 					v-html="flags[locale]"
@@ -723,8 +723,8 @@ export default {
 				this.slimSidebar = wantSlimSidebar
 				document.getElementById('sidebar').classList.toggle('slim', wantSlimSidebar)
 				// Moves all toast messages when the option changes
-				Array.from(document.getElementsByClassName('toastify')).forEach((toast)=>{
+				Array.from(document.getElementsByClassName('toastify')).forEach(toast => {
-					toast.style.transform = `translate(${wantSlimSidebar ? '3rem' : '14rem'}, 0)`;
+					toast.style.transform = `translate(${wantSlimSidebar ? '3rem' : '14rem'}, 0)`
 				})
 				localStorage.setItem('slimSidebar', wantSlimSidebar)
 			}