chore: change vite to webpack

frontend/package.json

@@ -18,7 +18,6 @@
   "dependencies": {
     "@bytetrade/core": "^0.3.53",
 		"@bytetrade/ui": "^0.1.12",
-    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
     "@quasar/extras": "^1.16.9",
     "axios": "^0.21.1",
     "fetch": "1.1.0",
@@ -40,7 +39,9 @@
     "vue-router": "^4.0.0"
   },
   "devDependencies": {
-    "@quasar/app-vite": "^1.4.3",
+		"css-minimizer-webpack-plugin": "^7.0.0",
+		"terser-webpack-plugin": "^5.3.10",
+		"@quasar/app-webpack": "^3.0.0",
     "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
@@ -51,9 +52,8 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.0.0",
     "prettier": "^3.2.5",
-    "sass": "1.32.12",
+    "sass": "1.33.0",
     "typescript": "^4.5.4",
-    "vite-plugin-env-command": "^1.0.7",
     "workbox-build": "^6.5.0",
     "workbox-cacheable-response": "^6.5.0",
     "workbox-core": "^6.5.0",

frontend/quasar.config.js

@@ -10,20 +10,23 @@
 
 const { configure } = require('quasar/wrappers');
 const dotenv = require('dotenv');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 dotenv.config();
 
 const path = require('path');
 
 module.exports = configure(function (/* ctx */) {
 	return {
-		eslint: {
-			// fix: true,
-			// include = [],
-			// exclude = [],
-			// rawOptions = {},
-			warnings: true,
-			errors: true
+		// https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
+		supportTS: {
+			tsCheckerConfig: {
+				eslint: {
+					enabled: true,
+					files: './src/**/*.{ts,tsx,js,jsx,vue}'
+				}
+			}
 		},
 
 		// https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
@@ -66,8 +69,13 @@ module.exports = configure(function (/* ctx */) {
 				LOGIN_USERNAME: process.env.LOGIN_USERNAME,
 				LOGIN_PASSWORD: process.env.LOGIN_PASSWORD
 			},
+			// analyze: true,
 
 			vueRouterMode: 'history', // available values: 'hash', 'history'
+			extractCSS: true,
+			gzip: true,
+			sourcemap: false,
+			minify: true,
 			// vueRouterBase,
 			// vueDevtools,
 			// vueOptionsAPI: false,
@@ -85,27 +93,59 @@ module.exports = configure(function (/* ctx */) {
 
 			// extendViteConf (viteConf) {},
 			// viteVuePluginOptions: {},
-			extendViteConf(viteConf) {
-				Object.assign(viteConf.resolve.alias, {
-					'@': path.join(__dirname, 'src'),
-					assets: path.join(__dirname, 'src/assets'),
-					statics: path.join(__dirname, 'src/statics'),
-					components: path.join(__dirname, 'src/components')
+			chainWebpack(chain, { isClient, isServer }) {
+				chain.resolve.alias
+					.set('assets', path.resolve('src/assets'))
+					.set('statics', path.resolve('src/statics'))
+					.set('components', path.resolve('src/components'));
+				if (isClient) {
+					chain.plugin('optimize-css').use(CssMinimizerPlugin, [
+						{
+							minimizerOptions: {
+								preset: [
+									'default',
+									{
+										mergeLonghand: false,
+										cssDeclarationSorter: false
+									}
+								]
+							}
+						}
+					]);
+				}
+				chain.plugin('terser').use(TerserPlugin, [
+					{
+						terserOptions: {
+							compress: {
+								drop_console: true,
+								pure_funcs: ['console.log']
+							}
+						}
+					}
+				]);
+				chain.optimization.splitChunks({
+					chunks: 'all', // The type of chunk that requires code segmentation
+					minSize: 20000, // Minimum split file size
+					minRemainingSize: 0, // Minimum remaining file size after segmentation
+					minChunks: 1, // The number of times it has been referenced before it is split
+					maxAsyncRequests: 30, // Maximum number of asynchronous requests
+					maxInitialRequests: 30, // Maximum number of initialization requests
+					enforceSizeThreshold: 50000,
+					cacheGroups: {
+						// Cache Group configuration
+						defaultVendors: {
+							test: /[\\/]node_modules[\\/]/,
+							priority: -10,
+							reuseExistingChunk: true
+						},
+						default: {
+							minChunks: 2,
+							priority: -20,
+							reuseExistingChunk: true // Reuse the chunk that has been split
+						}
+					}
 				});
 			}
-
-			// vitePlugins: [
-			// 	[
-			// 		'@intlify/vite-plugin-vue-i18n',
-			// 		{
-			// 			// if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
-			// 			// compositionOnly: false,
-			//
-			// 			// you need to set i18n resource including paths !
-			// 			include: path.resolve(__dirname, './src/i18n/**')
-			// 		}
-			// 	]
-			// ]
 		},
 		devServer: {
 			https: true,

frontend/src/api/private/operations.ts

@@ -97,7 +97,7 @@ export async function uploadDevFile(
 	try {
 		const formData = new FormData();
 		formData.append('name', file);
-		const response = await axios.post(
+		const response: any = await axios.post(
 			'/app-store/v1/applications/dev-upload',
 			formData,
 			{

frontend/src/api/private/user.ts

@@ -1,13 +1,13 @@
 import {
 	APP_STATUS,
-	AppInfo,
 	AppStoreInfo,
 	TerminusResource,
 	UserResource
 } from 'src/constants/constants';
 import axios from 'axios';
+import { TerminusApp } from '@bytetrade/core';
 
-export async function getMyApps(): Promise<AppInfo[]> {
+export async function getMyApps(): Promise<TerminusApp[]> {
 	try {
 		const { data }: any = await axios.get('/app-store/v1/myapps');
 		console.log('get_my_apps');

frontend/src/components/appcard/VersionRecordItem.vue

@@ -1,11 +1,11 @@
 <template>
-	<div v-if="skeleton" class="version-record-root column justify-start">
+	<div v-if="skeleton" class="version-record-root q-py-lg column justify-start">
 		<div class="row justify-between items-center">
 			<q-skeleton width="50px" height="20px" />
 			<q-skeleton width="40px" height="20px" />
 		</div>
-		<q-skeleton class="version-record-desc" width="200px" height="20px" />
-		<q-skeleton style="margin-top: 2px" width="300px" height="20px" />
+		<q-skeleton class="q-mt-md" width="200px" height="20px" />
+		<q-skeleton class="q-mt-xs" width="300px" height="20px" />
 	</div>
 	<div v-else class="version-record-root q-py-lg column justify-start">
 		<div class="row justify-between items-center">

frontend/src/components/appintro/InstallConfiguration.vue

@@ -31,11 +31,10 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import { getRequireImage } from 'src/utils/imageUtils';
+import { ref } from 'vue';
 import { useColor } from '@bytetrade/ui';
 
-const props = defineProps({
+defineProps({
 	name: {
 		type: String,
 		default: '',
@@ -58,12 +57,6 @@ const props = defineProps({
 
 const imageRef = ref();
 const { color: separator } = useColor('separator');
-
-onMounted(() => {
-	if (props.src) {
-		imageRef.value = getRequireImage(props.src);
-	}
-});
 </script>
 
 <style scoped lang="scss">

frontend/src/env.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+declare namespace NodeJS {
+	interface ProcessEnv {
+		NODE_ENV: string;
+		VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined;
+		VUE_ROUTER_BASE: string | undefined;
+	}
+}

frontend/src/index.template.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html
+	class="theme--light"
+	style="
+		--reading-editable-font-family: 'Source Serif VF', serif;
+		--reading-editable-font-size: 16;
+		--reading-editable-line-height: 1.7;
+		--reading-editable-line-length: 648px;
+	"
+>
+<head>
+	<title><%= productName %></title>
+
+	<meta charset="utf-8"/>
+	<meta name="description" content="<%= productDescription %>"/>
+	<meta name="format-detection" content="telephone=no"/>
+	<meta name="referrer" content="no-referrer"/>
+	<meta name="msapplication-tap-highlight" content="no"/>
+	<meta
+		name="viewport"
+		content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
+	/>
+
+	<link
+		rel="icon"
+		type="image/png"
+		sizes="128x128"
+		href="icons/market-128*128.png"
+	/>
+	<link
+		rel="icon"
+		type="image/png"
+		sizes="96x96"
+		href="icons/market-96*96.png"
+	/>
+	<link
+		rel="icon"
+		type="image/png"
+		sizes="32x32"
+		href="icons/market-32*32.png"
+	/>
+	<link
+		rel="icon"
+		type="image/png"
+		sizes="16x16"
+		href="icons/market-16*16.png"
+	/>
+	<link rel="icon" type="image/ico" href="wise.ico"/>
+</head>
+<body>
+<!-- DO NOT touch the following DIV -->
+<div id="q-app"></div>
+</body>
+</html>

frontend/src/quasar.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+// Forces TS to apply `@quasar/app-webpack` augmentations of `quasar` package
+// Removing this would break `quasar/wrappers` imports as those typings are declared
+//  into `@quasar/app-webpack`
+// As a side effect, since `@quasar/app-webpack` reference `quasar` to augment it,
+//  this declaration also apply `quasar` own
+//  augmentations (eg. adds `$q` into Vue component context)
+/// <reference types="@quasar/app-webpack" />

frontend/src/shims-vue.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+// Mocks all files ending in `.vue` showing them as plain Vue instances
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}

frontend/src/utils/imageUtils.ts

@@ -6,7 +6,7 @@ export function getRequireImage(path: string): string {
 		return path;
 	}
 	// webpack
-	// return require(`../assets/${path}`);
+	return require(`../assets/${path}`);
 	// vite
-	return new URL(`../assets/${path}`, import.meta.url).href;
+	// return new URL(`../assets/${path}`, import.meta.url).href;
 }