From 83fe5ca70170c96b306bfb971b100b11076176d2 Mon Sep 17 00:00:00 2001 From: ThatOneCalculator Date: Tue, 10 Jan 2023 08:49:15 -0800 Subject: [PATCH] refactor: :wrench: vite config Co-authored-by: Syuilo --- package.json | 2 ++ packages/client/tsconfig.json | 2 +- packages/client/vite.config.ts | 57 +++++++++++++++++++++++++++------- packages/sw/tsconfig.json | 2 +- yarn.lock | 32 ++++++++++++++++--- 5 files changed, 77 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index c50e057a68..fb7992f43a 100644 --- a/package.json +++ b/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" } } diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json index 86109f600a..2586f899da 100644 --- a/packages/client/tsconfig.json +++ b/packages/client/tsconfig.json @@ -9,7 +9,7 @@ "noFallthroughCasesInSwitch": true, "declaration": false, "sourceMap": false, - "target": "es2017", + "target": "es2022", "module": "esnext", "moduleResolution": "node", "removeComments": false, diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts index d9b78c7793..15c8048ec1 100644 --- a/packages/client/vite.config.ts +++ b/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 }) => { - fs.mkdirSync(__dirname + '/../../built', { recursive: true }); - fs.writeFileSync(__dirname + '/../../built/meta.json', JSON.stringify({ version: meta.version }), 'utf-8'); +const hash = (str: string, seed = 0): number => { + let h1 = 0xdeadbeef ^ seed, + 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', - 'firefox100', - 'safari15', - 'es2021', // TODO: keep this up to date + 'chrome108', + 'firefox109', + 'safari16', ], 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', - reportCompressedSize: false, + sourcemap: process.env.NODE_ENV === 'development', + reportCompressedSize: true, }, optimizeDeps: { - auto: true + auto: true, }, }; }); diff --git a/packages/sw/tsconfig.json b/packages/sw/tsconfig.json index fad2ae5679..e512cc6ec0 100644 --- a/packages/sw/tsconfig.json +++ b/packages/sw/tsconfig.json @@ -9,7 +9,7 @@ "noFallthroughCasesInSwitch": true, "declaration": false, "sourceMap": false, - "target": "es2017", + "target": "es2022", "module": "esnext", "moduleResolution": "node", "removeComments": false, diff --git a/yarn.lock b/yarn.lock index 7020edd7d7..2e67561e56 100644 --- a/yarn.lock +++ b/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"