From b55b10cf139797ccfbedf2fc353b42f6cd181d7b Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 27 Dec 2023 05:42:40 +0100 Subject: [PATCH 1/2] transfere optimization improvements, increase test coverage --- package-lock.json | 132 +++++++++++++++++++++++++++++++++---- package.json | 9 ++- server/index.ts | 23 ++++++- src/assets/sass/style.scss | 1 + src/env.test.ts | 12 ++++ vite.config.ts | 6 +- vitest.config.ts | 9 ++- 7 files changed, 170 insertions(+), 22 deletions(-) create mode 100644 src/assets/sass/style.scss create mode 100644 src/env.test.ts diff --git a/package-lock.json b/package-lock.json index c5d8b37..972be2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -81,6 +81,8 @@ "stylelint-config-standard": "^34.0.0", "stylelint-config-standard-scss": "^11.1.0", "vite-plugin-checker": "^0.6.2", + "vite-plugin-compression": "^0.5.1", + "vite-plugin-vuetify": "^1.0.2", "vitest": "^0.34.6", "vue-tsc": "^1.8.25", "vuepress": "^2.0.0-rc.0" @@ -10042,6 +10044,20 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@vuetify/loader-shared": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.7.1.tgz", + "integrity": "sha512-kLUvuAed6RCvkeeTNJzuy14pqnkur8lTuner7v7pNE/kVhPR97TuyXwBSBMR1cJeiLiOfu6SF5XlCYbXByEx1g==", + "devOptional": true, + "dependencies": { + "find-cache-dir": "^3.3.2", + "upath": "^2.0.1" + }, + "peerDependencies": { + "vue": "^3.0.0", + "vuetify": "^3.0.0-beta.4" + } + }, "node_modules/@vueuse/core": { "version": "10.6.1", "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.6.1.tgz", @@ -11819,7 +11835,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==", - "dev": true + "devOptional": true }, "node_modules/compressible": { "version": "2.0.18", @@ -14835,7 +14851,7 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz", "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==", - "dev": true, + "devOptional": true, "dependencies": { "commondir": "^1.0.1", "make-dir": "^3.0.2", @@ -14852,7 +14868,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, + "devOptional": true, "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" @@ -14865,7 +14881,7 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, + "devOptional": true, "dependencies": { "p-locate": "^4.1.0" }, @@ -14877,7 +14893,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dev": true, + "devOptional": true, "dependencies": { "p-try": "^2.0.0" }, @@ -14892,7 +14908,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dev": true, + "devOptional": true, "dependencies": { "p-limit": "^2.2.0" }, @@ -14904,7 +14920,7 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", - "dev": true, + "devOptional": true, "dependencies": { "find-up": "^4.0.0" }, @@ -19168,7 +19184,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "dev": true, + "devOptional": true, "dependencies": { "semver": "^6.0.0" }, @@ -22052,7 +22068,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", - "dev": true, + "devOptional": true, "engines": { "node": ">=6" } @@ -22147,7 +22163,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true, + "devOptional": true, "engines": { "node": ">=8" } @@ -31060,7 +31076,7 @@ "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", - "dev": true, + "devOptional": true, "bin": { "semver": "bin/semver.js" } @@ -34039,7 +34055,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz", "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==", - "dev": true, + "devOptional": true, "engines": { "node": ">=4", "yarn": "*" @@ -34707,6 +34723,98 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/vite-plugin-compression": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz", + "integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==", + "dev": true, + "dependencies": { + "chalk": "^4.1.2", + "debug": "^4.3.3", + "fs-extra": "^10.0.0" + }, + "peerDependencies": { + "vite": ">=2.0.0" + } + }, + "node_modules/vite-plugin-compression/node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/vite-plugin-compression/node_modules/fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite-plugin-compression/node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, + "node_modules/vite-plugin-vuetify": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-1.0.2.tgz", + "integrity": "sha512-MubIcKD33O8wtgQXlbEXE7ccTEpHZ8nPpe77y9Wy3my2MWw/PgehP9VqTp92BLqr0R1dSL970Lynvisx3UxBFw==", + "devOptional": true, + "dependencies": { + "@vuetify/loader-shared": "^1.7.1", + "debug": "^4.3.3", + "upath": "^2.0.1" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "vite": "^2.7.0 || ^3.0.0 || ^4.0.0", + "vuetify": "^3.0.0-beta.4" + } + }, + "node_modules/vite-plugin-vuetify/node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "devOptional": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/vite-plugin-vuetify/node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "devOptional": true + }, "node_modules/vite/node_modules/@esbuild/android-arm": { "version": "0.19.7", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.7.tgz", diff --git a/package.json b/package.json index cd16c6d..22c6431 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "docs:dev": "vuepress dev .", "docs:build": "vuepress build .", "chromatic": "npx chromatic --build-script-name storybook:build", - "update": "npx npm-check-update" + "update": "npx npm-check-updates" }, "dependencies": { "@intlify/unplugin-vue-i18n": "^1.5.0", @@ -130,6 +130,8 @@ "stylelint-config-standard": "^34.0.0", "stylelint-config-standard-scss": "^11.1.0", "vite-plugin-checker": "^0.6.2", + "vite-plugin-compression": "^0.5.1", + "vite-plugin-vuetify": "^1.0.2", "vitest": "^0.34.6", "vue-tsc": "^1.8.25", "vuepress": "^2.0.0-rc.0" @@ -145,5 +147,10 @@ "#context/*": "./renderer/context/*", "#types/*": "./types/*", "#root/*": "./*" + }, + "overrides": { + "vite-plugin-vuetify": { + "vite": "$vite" + } } } diff --git a/server/index.ts b/server/index.ts index 55b323e..9e8991c 100644 --- a/server/index.ts +++ b/server/index.ts @@ -24,14 +24,28 @@ void startServer() async function startServer() { const app = express() - app.use(compression()) - // Vite integration if (isProduction) { // In production, we need to serve our static assets ourselves. // (In dev, Vite's middleware serves our static assets.) const sirv = (await import('sirv')).default - app.use(sirv(`${root}/build/client`)) + // assets 1y caching + app.use( + '/assets', + sirv(`${root}/build/client/assets`, { + maxAge: 31536000, // 1Y + immutable: true, + gzip: true, + }), + ) + // cache things for 10min + app.use( + sirv(`${root}/build/client`, { + maxAge: 600, + immutable: true, + gzip: true, + }), + ) } else { // We instantiate Vite's development server and integrate its middleware to our server. // ⚠️ We instantiate it only in development. (It isn't needed in production and it @@ -44,6 +58,9 @@ async function startServer() { }) ).middlewares app.use(viteDevMiddleware) + + // on the fly compression + app.use(compression()) } // ... diff --git a/src/assets/sass/style.scss b/src/assets/sass/style.scss new file mode 100644 index 0000000..3d8a3f1 --- /dev/null +++ b/src/assets/sass/style.scss @@ -0,0 +1 @@ +/* stylelint-disable no-empty-source */ \ No newline at end of file diff --git a/src/env.test.ts b/src/env.test.ts new file mode 100644 index 0000000..a46f9c2 --- /dev/null +++ b/src/env.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from 'vitest' + +import { META } from './env' + +describe('env', () => { + it('has correct default values', () => { + expect(META).toEqual({ + DEFAULT_TITLE: 'IT4C', + DEFAULT_DESCRIPTION: 'IT4C Frontend Boilerplate', + }) + }) +}) diff --git a/vite.config.ts b/vite.config.ts index 34f13b2..d4672bc 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -5,6 +5,8 @@ import vue from '@vitejs/plugin-vue' import vike from 'vike/plugin' import { UserConfig } from 'vite' import { checker } from 'vite-plugin-checker' +import viteCompression from 'vite-plugin-compression' +import vuetify from 'vite-plugin-vuetify' const isStorybook = () => ['storybook', 'storybook:build'].includes(process.env.npm_lifecycle_event as string) @@ -12,7 +14,7 @@ const isStorybook = () => const config: UserConfig = { plugins: [ vue(), - !isStorybook() && vike(), // SSR only when storybook is not running + !isStorybook() && vike({ prerender: true }), // SSR only when storybook is not running vueI18n({ ssr: true, include: path.resolve(__dirname, './src/locales/**'), @@ -21,6 +23,8 @@ const config: UserConfig = { typescript: true, vueTsc: true, }), + vuetify({ styles: { configFile: './src/assets/sass/style.scss' } }), + viteCompression({ filter: /\.*$/i }), ], build: { outDir: './build', diff --git a/vitest.config.ts b/vitest.config.ts index 71608a0..e06963a 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -18,11 +18,10 @@ export default mergeConfig( '**/*{.,-}stories.?(c|m)[jt]s?(x)', 'src/stories/**/*', ], - lines: 14, - functions: 20, - branches: 40, - statements: 14, - // 100: true, + lines: 17, + // functions: 20, // has problems see https://github.com/vitest-dev/vitest/issues/3607 + branches: 44, + statements: 17, }, }, }), From 54368d1b81b215583630cb49bab5c34f1580ad5a Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 27 Dec 2023 05:42:57 +0100 Subject: [PATCH 2/2] include logo in readme --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index b1ae360..0517b96 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,8 @@ The IT4C Boilerplate for frontends +![](src/assets/it4c-logo2-clean-bg_alpha-128x128.png) + ## Requirements & Technology To be able to build this project you need `nodejs`, `npm` and optional `docker` and `jq`.