Personal finance tracker
chore: migrate frontend to vite-plus
+80
-70
-18
frontend/.oxfmtrc.json
-18
frontend/.oxfmtrc.json
···
1
-
{
2
-
"$schema": "./node_modules/oxfmt/configuration_schema.json",
3
-
"ignorePatterns": [],
4
-
"singleQuote": true,
5
-
"proseWrap": "always",
6
-
"sortImports": {
7
-
"groups": [
8
-
"type-import",
9
-
"value-builtin",
10
-
"value-external",
11
-
"type-internal",
12
-
"value-internal",
13
-
["type-parent", "type-sibling", "type-index"],
14
-
["value-parent", "value-sibling", "value-index"],
15
-
"unknown"
16
-
]
17
-
}
18
-
}
-10
frontend/.oxlintrc.json
-10
frontend/.oxlintrc.json
+4
-14
frontend/package.json
+4
-14
frontend/package.json
···
4
4
"private": true,
5
5
"type": "module",
6
6
"scripts": {
7
-
"dev": "vite",
8
-
"build": "vite build",
9
-
"preview": "vite preview",
10
-
"test-unit": "vitest",
11
7
"test-e2e": "playwright test",
12
-
"typecheck": "vue-tsc --build",
13
-
"lint": "oxlint .",
14
-
"lint-fix": "oxlint . --fix",
15
-
"fmt": "oxfmt .",
16
-
"fmt-check": "oxfmt . --check"
8
+
"typecheck": "vue-tsc --build"
17
9
},
18
10
"dependencies": {
19
11
"@jeffydc/ruta-vue": "jsr:0.0.1772081898",
···
26
18
"@vue/tsconfig": "0.8.1",
27
19
"openapi-fetch": "0.17.0",
28
20
"openapi-typescript": "7.13.0",
29
-
"oxfmt": "0.35.0",
30
-
"oxlint": "1.50.0",
31
21
"tailwindcss": "4.2.1",
32
22
"typescript": "5.9.3",
33
-
"vite": "7.3.1",
34
23
"vite-plugin-vue-devtools": "8.0.6",
35
-
"vitest": "4.0.18",
24
+
"vite-plus": "catalog:",
36
25
"vue": "3.5.29",
37
26
"vue-router": "5.0.3",
38
27
"vue-tsc": "3.2.5"
39
28
},
40
29
"engines": {
41
30
"node": ">=22.12.0"
42
-
}
31
+
},
32
+
"packageManager": "pnpm@10.32.1"
43
33
}
+14
frontend/pnpm-workspace.yaml
+14
frontend/pnpm-workspace.yaml
···
1
1
onlyBuiltDependencies:
2
2
- esbuild
3
3
- vue-demi
4
+
catalog:
5
+
vite: npm:@voidzero-dev/vite-plus-core@latest
6
+
vitest: npm:@voidzero-dev/vite-plus-test@latest
7
+
vite-plus: latest
8
+
overrides:
9
+
vite: 'catalog:'
10
+
vitest: 'catalog:'
11
+
peerDependencyRules:
12
+
allowAny:
13
+
- vite
14
+
- vitest
15
+
allowedVersions:
16
+
vite: '*'
17
+
vitest: '*'
+2
-2
frontend/src/api/client.ts
+2
-2
frontend/src/api/client.ts
+2
-2
frontend/src/api/wallet.ts
+2
-2
frontend/src/api/wallet.ts
···
1
+
import type { components } from './schema';
2
+
1
3
import { queryOptions, useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
2
4
import { proxyRefs, toValue, type MaybeRef } from 'vue';
3
-
4
-
import type { components } from './schema';
5
5
6
6
import { openAPIClient } from './client';
7
7
+7
-3
frontend/src/main.ts
+7
-3
frontend/src/main.ts
···
1
1
import './main.css';
2
+
import type { components } from './api/schema';
3
+
2
4
import { redirect, RutaVue } from '@jeffydc/ruta-vue';
3
5
import nuxtUI from '@nuxt/ui/vue-plugin';
4
6
import { VueQueryPlugin } from '@tanstack/vue-query';
5
7
import { createApp } from 'vue';
6
-
7
-
import type { components } from './api/schema';
8
8
9
9
import { routes } from './+routes.gen';
10
10
import { meQueryOpts } from './api/user';
···
39
39
.use(router)
40
40
.use(nuxtUI)
41
41
.use(VueQueryPlugin, { queryClient: router.context.qc, enableDevtoolsV6Plugin: true });
42
-
router.navigate().then(() => app.mount('#app'));
42
+
43
+
router
44
+
.navigate()
45
+
.then(() => app.mount('#app'))
46
+
.catch(() => {});
+1
frontend/src/routes/+root-error.vue
+1
frontend/src/routes/+root-error.vue
+3
-1
frontend/src/routes/+root-layout.vue
+3
-1
frontend/src/routes/+root-layout.vue
···
1
1
<script setup lang="ts">
2
2
import type { NavigationMenuItem } from '@nuxt/ui';
3
-
import { RouteTyped } from './+route.gen';
3
+
4
4
import { useMe } from '../api/user';
5
+
import { RouteTyped } from './+route.gen';
5
6
6
7
const router = RouteTyped.useRouter();
7
8
const me = useMe();
9
+
8
10
9
11
const links: NavigationMenuItem[] = [
10
12
{
+1
frontend/src/routes/wallets/+wallets-error.vue
+1
frontend/src/routes/wallets/+wallets-error.vue
+4
-1
frontend/src/routes/wallets/+wallets-page.vue
+4
-1
frontend/src/routes/wallets/+wallets-page.vue
···
1
1
<script setup lang="ts">
2
-
import { ref, shallowReactive, shallowRef } from 'vue';
2
+
import { shallowReactive, shallowRef } from 'vue';
3
+
3
4
import { useNewWallet, useWallets } from '../../api/wallet';
4
5
import { RouteTyped } from './+route.gen';
5
6
···
9
10
});
10
11
const dialogOpened = shallowRef(false);
11
12
13
+
12
14
const router = RouteTyped.useRouter();
13
15
const wallets = useWallets();
14
16
const newWallet = useNewWallet();
17
+
15
18
16
19
function handleNewWallet() {
17
20
newWallet.mutate(walletForm, {
+3
frontend/src/routes/wallets/walletID/+walletID-page.vue
+3
frontend/src/routes/wallets/walletID/+walletID-page.vue
···
1
1
<script setup lang="ts">
2
2
import { shallowReactive, shallowRef, toRef } from 'vue';
3
+
3
4
import { useNewTransaction, useTransactions, useWallet } from '../../../api/wallet';
4
5
import { RouteTyped } from './+route.gen';
5
6
···
11
12
walletID: -1,
12
13
});
13
14
15
+
14
16
const route = RouteTyped.usePageRoute();
15
17
const walletID = toRef(() => route.params.walletID);
16
18
const wallet = useWallet(walletID);
17
19
const transactions = useTransactions(walletID);
18
20
const newTransaction = useNewTransaction();
21
+
19
22
20
23
function handleNewTransaction() {
21
24
transactionForm.walletID = route.params.walletID;
+39
-3
frontend/vite.config.ts
+39
-3
frontend/vite.config.ts
···
1
+
import type { Plugin } from 'vite-plus';
2
+
1
3
import fsp from 'node:fs/promises';
4
+
import { fileURLToPath } from 'node:url';
2
5
3
6
import { ruta } from '@jeffydc/ruta-vue/vite';
4
7
import nuxtUI from '@nuxt/ui/vite';
5
8
import vue from '@vitejs/plugin-vue';
6
9
import openAPITS, { astToString } from 'openapi-typescript';
7
-
import { defineConfig, Plugin } from 'vite';
8
10
import vueDevTools from 'vite-plugin-vue-devtools';
11
+
import { defineConfig } from 'vite-plus';
9
12
10
13
const SERVER_HOST = '127.0.0.1';
11
14
const BACKEND_TARGET = `http://${SERVER_HOST}:50837`;
12
15
13
-
// https://vite.dev/config/
16
+
// https://viteplus.dev/guide/
14
17
export default defineConfig({
15
18
plugins: [
16
19
vue(),
···
40
43
},
41
44
},
42
45
},
46
+
test: {
47
+
environment: 'jsdom',
48
+
exclude: ['e2e/**'],
49
+
root: fileURLToPath(new URL('./', import.meta.url)),
50
+
},
51
+
fmt: {
52
+
ignorePatterns: [],
53
+
singleQuote: true,
54
+
proseWrap: 'always',
55
+
sortImports: {
56
+
groups: [
57
+
['type-import', 'type-internal', 'type-parent', 'type-sibling', 'type-index'],
58
+
'value-builtin',
59
+
'value-external',
60
+
'value-internal',
61
+
['value-parent', 'value-sibling', 'value-index'],
62
+
'unknown',
63
+
],
64
+
},
65
+
},
66
+
lint: {
67
+
plugins: ['eslint', 'typescript', 'unicorn', 'oxc', 'vue'],
68
+
env: {
69
+
browser: true,
70
+
},
71
+
categories: {
72
+
correctness: 'error',
73
+
},
74
+
options: {
75
+
typeAware: true,
76
+
typeCheck: true,
77
+
},
78
+
},
43
79
});
44
80
45
81
function openAPI(): Plugin {
···
49
85
async buildStart() {
50
86
const ast = await openAPITS(url);
51
87
const contents = astToString(ast);
52
-
fsp.writeFile(new URL('./src/api/schema.d.ts', import.meta.url), contents);
88
+
await fsp.writeFile(new URL('./src/api/schema.d.ts', import.meta.url), contents);
53
89
},
54
90
};
55
91
}
-16
frontend/vitest.config.ts
-16
frontend/vitest.config.ts
···
1
-
import { fileURLToPath } from 'node:url';
2
-
3
-
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config';
4
-
5
-
import viteConfig from './vite.config';
6
-
7
-
export default mergeConfig(
8
-
viteConfig,
9
-
defineConfig({
10
-
test: {
11
-
environment: 'jsdom',
12
-
exclude: [...configDefaults.exclude, 'e2e/**'],
13
-
root: fileURLToPath(new URL('./', import.meta.url)),
14
-
},
15
-
}),
16
-
);