refactor: 🔧 vite config

Co-authored-by: Syuilo <Syuilotan@yahoo.co.jp>

package.json

@@ -58,12 +58,14 @@
 	"devDependencies": {
 		"@types/gulp": "4.0.10",
 		"@types/gulp-rename": "2.0.1",
+		"@types/node": "^18.11.18",
 		"@typescript-eslint/parser": "5.46.1",
 		"cross-env": "7.0.3",
 		"cypress": "10.11.0",
 		"install-peers": "^1.0.4",
 		"start-server-and-test": "1.15.2",
 		"typescript": "4.9.4",
+		"vite-plugin-webfont-dl": "^3.4.3",
 		"vue-eslint-parser": "^9.1.0"
 	}
 }

packages/client/tsconfig.json

@@ -9,7 +9,7 @@
 		"noFallthroughCasesInSwitch": true,
 		"declaration": false,
 		"sourceMap": false,
-		"target": "es2017",
+		"target": "es2022",
 		"module": "esnext",
 		"moduleResolution": "node",
 		"removeComments": false,

packages/client/vite.config.ts

@@ -1,17 +1,43 @@
-import * as fs from 'fs';
 import pluginVue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vite';
 
+import webfontDownload from 'vite-plugin-webfont-dl';
 import locales from '../../locales';
 import meta from '../../package.json';
 import pluginJson5 from './vite.json5';
 
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue'];
 
-export default defineConfig(({ command, mode }) => {
+const hash = (str: string, seed = 0): number => {
-	fs.mkdirSync(__dirname + '/../../built', { recursive: true });
+	let h1 = 0xdeadbeef ^ seed,
-	fs.writeFileSync(__dirname + '/../../built/meta.json', JSON.stringify({ version: meta.version }), 'utf-8');
+		h2 = 0x41c6ce57 ^ seed;
+	for (let i = 0, ch; i < str.length; i++) {
+		ch = str.charCodeAt(i);
+		h1 = Math.imul(h1 ^ ch, 2654435761);
+		h2 = Math.imul(h2 ^ ch, 1597334677);
+	}
+	
+	h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+	h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+	
+	return 4294967296 * (2097151 & h2) + (h1 >>> 0);
+};
 
+const BASE62_DIGITS = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+function toBase62(n: number): string {
+	if (n === 0) {
+		return '0';
+	}
+	let result = ''; 
+	while (n > 0) {
+		result = BASE62_DIGITS[n % BASE62_DIGITS.length] + result;
+		n = Math.floor(n / BASE62_DIGITS.length);
+	}
+	
+	return result;
+}
+
+export default defineConfig(({ command, mode }) => {
 	return {
 		base: '/assets/',
 
@@ -20,6 +46,7 @@ export default defineConfig(({ command, mode }) => {
 				reactivityTransform: true,
 			}),
 			pluginJson5(),
+			webfontDownload(),
 		],
 
 		resolve: {
@@ -31,6 +58,14 @@ export default defineConfig(({ command, mode }) => {
 			},
 		},
 
+		css: {
+			modules: {
+				generateScopedName: (name, filename, css) => {
+					return 'x' + toBase62(hash(`${filename} ${name}`)).substring(0, 4);
+				},
+			},
+		},
+
 		define: {
 			_VERSION_: JSON.stringify(meta.version),
 			_LANGS_: JSON.stringify(Object.entries(locales).map(([k, v]) => [k, v._lang_])),
@@ -46,10 +81,9 @@ export default defineConfig(({ command, mode }) => {
 
 		build: {
 			target: [
-				'chrome100',
+				'chrome108',
-				'firefox100',
+				'firefox109',
-				'safari15',
+				'safari16',
-				'es2021', // TODO: keep this up to date
 			],
 			manifest: 'manifest.json',
 			rollupOptions: {
@@ -63,15 +97,14 @@ export default defineConfig(({ command, mode }) => {
 				},
 			},
 			cssCodeSplit: true,
-			assetsInlineLimit: 0,
 			outDir: __dirname + '/../../built/_client_dist_',
 			assetsDir: '.',
 			emptyOutDir: false,
-			sourcemap: process.env.NODE_ENV !== 'production',
+			sourcemap: process.env.NODE_ENV === 'development',
-			reportCompressedSize: false,
+			reportCompressedSize: true,
 		},
 		optimizeDeps: {
-			auto: true
+			auto: true,
 		},
 	};
 });

packages/sw/tsconfig.json

@@ -9,7 +9,7 @@
 		"noFallthroughCasesInSwitch": true,
 		"declaration": false,
 		"sourceMap": false,
-		"target": "es2017",
+		"target": "es2022",
 		"module": "esnext",
 		"moduleResolution": "node",
 		"removeComments": false,

yarn.lock

@@ -1804,7 +1804,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:18.11.18":
+"@types/node@npm:18.11.18, @types/node@npm:^18.11.18":
   version: 18.11.18
   resolution: "@types/node@npm:18.11.18"
   checksum: 03f17f9480f8d775c8a72da5ea7e9383db5f6d85aa5fefde90dd953a1449bd5e4ffde376f139da4f3744b4c83942166d2a7603969a6f8ea826edfb16e6e3b49d
@@ -3123,7 +3123,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^0.25.0":
+"axios@npm:^0.25, axios@npm:^0.25.0":
   version: 0.25.0
   resolution: "axios@npm:0.25.0"
   dependencies:
@@ -3834,6 +3834,7 @@ __metadata:
     "@tensorflow/tfjs": ^3.21.0
     "@types/gulp": 4.0.10
     "@types/gulp-rename": 2.0.1
+    "@types/node": ^18.11.18
     "@typescript-eslint/parser": 5.46.1
     calckey-js: ^0.0.20
     cross-env: 7.0.3
@@ -3852,6 +3853,7 @@ __metadata:
     seedrandom: ^3.0.5
     start-server-and-test: 1.15.2
     typescript: 4.9.4
+    vite-plugin-webfont-dl: ^3.4.3
     vue-eslint-parser: ^9.1.0
   languageName: unknown
   linkType: soft
@@ -4158,6 +4160,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clean-css@npm:^5.3":
+  version: 5.3.1
+  resolution: "clean-css@npm:5.3.1"
+  dependencies:
+    source-map: ~0.6.0
+  checksum: 860696c60503cbfec480b5f92f62729246304b55950571af7292f2687b57f86b277f2b9fefe6f64643d409008018b78383972b55c2cc859792dcc8658988fb16
+  languageName: node
+  linkType: hard
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -11815,7 +11826,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0":
+"picocolors@npm:^1.0, picocolors@npm:^1.0.0":
   version: 1.0.0
   resolution: "picocolors@npm:1.0.0"
   checksum: a2e8092dd86c8396bdba9f2b5481032848525b3dc295ce9b57896f931e63fc16f79805144321f72976383fc249584672a75cc18d6777c6b757603f372f745981
@@ -13925,7 +13936,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.1":
+"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
   checksum: 59ce8640cf3f3124f64ac289012c2b8bd377c238e316fb323ea22fbfe83da07d81e000071d7242cad7a23cd91c7de98e4df8830ec3f133cb6133a5f6e9f67bc2
@@ -15635,6 +15646,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-plugin-webfont-dl@npm:^3.4.3":
+  version: 3.4.3
+  resolution: "vite-plugin-webfont-dl@npm:3.4.3"
+  dependencies:
+    axios: ^0.25
+    clean-css: ^5.3
+    picocolors: ^1.0
+  peerDependencies:
+    vite: ^2 || ^3 || ^4
+  checksum: cc890e30765f05039414299afc0d9894c72d5b832510144c27abf535cc16d342f8e57f4a4a310e010a5eb69e361d9fd7a5f8002de5c8d01f9bdb4edffcd2b8a9
+  languageName: node
+  linkType: hard
+
 "vite@npm:^4.0.4":
   version: 4.0.4
   resolution: "vite@npm:4.0.4"