Merge pull request #30 from IT4Change/package-updates2

chore(frontend): package updates

.eslintrc.cjs

@@ -12,7 +12,7 @@ module.exports = {
     'plugin:import/recommended',
     'plugin:import/typescript',
     'plugin:promise/recommended',
-    'plugin:security/recommended',
+    'plugin:security/recommended-legacy',
     'plugin:vue/vue3-recommended',
     'plugin:@intlify/vue-i18n/recommended',
     'plugin:storybook/recommended',
@@ -43,7 +43,7 @@ module.exports = {
     'vue/multi-word-component-names': [
       'error',
       {
-        ignores: ['default', 'index.page'],
+        ignores: ['+Page'],
       },
     ],
     // Optional eslint-comments rule

package.json

@@ -58,82 +58,82 @@
     "update": "npx npm-check-updates"
   },
   "dependencies": {
-    "@intlify/unplugin-vue-i18n": "^1.5.0",
-    "@mdi/font": "^7.3.67",
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
+    "@mdi/font": "^7.4.47",
     "@types/compression": "^1.7.5",
     "@types/express": "^4.17.21",
-    "@types/node": "^20.9.4",
-    "@vitejs/plugin-vue": "^4.5.0",
-    "@vue/compiler-sfc": "^3.3.8",
-    "@vue/server-renderer": "^3.3.8",
+    "@types/node": "^20.10.5",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/compiler-sfc": "^3.3.13",
+    "@vue/server-renderer": "^3.3.13",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "express": "^4.18.2",
     "pinia": "^2.1.7",
-    "pinia-plugin-persistedstate": "^3.2.0",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "sass": "^1.69.5",
-    "sass-loader": "^13.3.2",
-    "sirv": "^2.0.3",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.3.2",
-    "vike": "^0.4.147",
-    "vite": "^5.0.2",
-    "vue": "^3.3.8",
-    "vue-i18n": "^9.7.1",
-    "vuetify": "^3.4.3"
+    "sass-loader": "^13.3.3",
+    "sirv": "^2.0.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3",
+    "vike": "^0.4.152",
+    "vite": "^5.0.10",
+    "vue": "^3.3.13",
+    "vue-i18n": "^9.8.0",
+    "vuetify": "^3.4.8"
   },
   "devDependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "^4.1.0",
     "@intlify/eslint-plugin-vue-i18n": "^2.0.0",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/test-runner": "^0.15.2",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/vue3": "^7.5.3",
-    "@storybook/vue3-vite": "^7.5.3",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
-    "@vitest/coverage-v8": "^0.34.6",
-    "@vue/test-utils": "^2.4.2",
+    "@storybook/vue3": "^7.6.6",
+    "@storybook/vue3-vite": "^7.6.6",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "@vitest/coverage-v8": "^1.1.0",
+    "@vue/test-utils": "^2.4.3",
     "@vuepress/bundler-vite": "^2.0.0-rc.0",
-    "chromatic": "^9.1.0",
-    "eslint": "^8.54.0",
-    "eslint-config-prettier": "^9.0.0",
+    "chromatic": "^10.2.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-security": "^1.7.1",
+    "eslint-plugin-security": "^2.1.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-vitest": "^0.3.10",
-    "eslint-plugin-vue": "^9.18.1",
-    "eslint-plugin-vuetify": "^2.1.0",
-    "eslint-plugin-yml": "^1.10.0",
+    "eslint-plugin-vitest": "^0.3.20",
+    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-vuetify": "^2.1.1",
+    "eslint-plugin-yml": "^1.11.0",
     "happy-dom": "^12.10.3",
-    "prettier": "^3.1.0",
+    "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remark-cli": "^12.0.0",
     "remark-gfm": "^4.0.0",
     "remark-preset-lint-consistent": "^5.1.2",
     "remark-preset-lint-markdown-style-guide": "^5.1.3",
     "remark-preset-lint-recommended": "^6.1.3",
-    "storybook": "^7.5.3",
-    "stylelint": "^15.11.0",
-    "stylelint-config-css-modules": "^4.3.0",
+    "storybook": "^7.6.6",
+    "stylelint": "^16.1.0",
+    "stylelint-config-css-modules": "^4.4.0",
     "stylelint-config-recess-order": "^4.4.0",
     "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-config-standard-scss": "^11.1.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard-scss": "^12.0.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",
+    "vite-plugin-vuetify": "^2.0.1",
+    "vitest": "^1.1.0",
+    "vue-tsc": "^1.8.27",
     "vuepress": "^2.0.0-rc.0"
   },
   "imports": {
@@ -147,10 +147,5 @@
     "#context/*": "./renderer/context/*",
     "#types/*": "./types/*",
     "#root/*": "./*"
-  },
-  "overrides": {
-    "vite-plugin-vuetify": {
-      "vite": "$vite"
-    }
   }
 }

renderer/+config.h.ts

@@ -0,0 +1,6 @@
+// See https://vike.dev/data-fetching
+export default {
+  clientRouting: true,
+  prefetchStaticAssets: 'viewport',
+  passToClient: ['pageProps', /* 'urlPathname', */ 'routeParams'],
+}

renderer/+onHydrationEnd.ts

@@ -0,0 +1,5 @@
+function onHydrationEnd() {
+  // console.log('Hydration finished; page is now interactive.')
+}
+
+export { onHydrationEnd }

renderer/+onPageTransitionEnd.ts

@@ -0,0 +1,6 @@
+function onPageTransitionEnd() {
+  // console.log('Page transition end')
+  // document.body.classList.remove('page-transition')
+}
+
+export { onPageTransitionEnd }

renderer/+onPageTransitionStart.ts

@@ -0,0 +1,6 @@
+function onPageTransitionStart() {
+  // console.log('Page transition start')
+  // document.body.classList.add('page-transition')
+}
+
+export { onPageTransitionStart }

renderer/+onRenderClient.ts

@@ -0,0 +1,15 @@
+import { createApp } from './app'
+
+import type { PageContext, VikePageContext } from '#types/PageContext'
+
+let instance: ReturnType<typeof createApp>
+/* async */ function render(pageContext: VikePageContext & PageContext) {
+  if (!instance) {
+    instance = createApp(pageContext)
+    instance.app.mount('#app')
+  } else {
+    instance.app.changePage(pageContext)
+  }
+}
+
+export default render

renderer/_default.page.server.ts → renderer/+onRenderHtml.ts

@@ -9,9 +9,6 @@ import { createApp } from './app'
 import type { PageContextServer, PageContext } from '#types/PageContext'
 import type { App } from 'vue'
 
-// See https://vike.dev/data-fetching
-export const passToClient = ['pageProps', /* 'urlPathname', */ 'routeParams']
-
 async function render(pageContext: PageContextServer & PageContext) {
   const { app, i18n } = createApp(pageContext, false)
 
@@ -57,4 +54,4 @@ async function renderToString(app: App) {
   return appHtml
 }
 
-export { render }
+export default render

renderer/plugins/vuetify.ts

@@ -1,13 +1,9 @@
 // eslint-disable-next-line import/no-unassigned-import
 import '@mdi/font/css/materialdesignicons.css'
 // eslint-disable-next-line import/no-unassigned-import
-import 'vuetify/lib/styles/main.sass'
+import 'vuetify/styles'
 import { I18n, useI18n } from 'vue-i18n'
 import { createVuetify } from 'vuetify'
-// eslint-disable-next-line import/no-namespace
-import * as components from 'vuetify/lib/components/index.mjs'
-// eslint-disable-next-line import/no-namespace
-import * as directives from 'vuetify/lib/directives/index.mjs'
 import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -16,6 +12,5 @@ export default (i18n: I18n<any, NonNullable<unknown>, NonNullable<unknown>, stri
     locale: {
       adapter: createVueI18nAdapter({ i18n, useI18n }),
     },
-    components,
-    directives,
+    ssr: true,
   })

src/pages/_error.page.test.ts → src/pages/_error/Page.test.ts

@@ -2,7 +2,7 @@ import { VueWrapper, mount } from '@vue/test-utils'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { ComponentPublicInstance } from 'vue'
 
-import ErrorPage from './_error.page.vue'
+import ErrorPage from './+Page.vue'
 
 describe('ErrorPage', () => {
   let wrapper: VueWrapper<unknown, ComponentPublicInstance<unknown, Omit<unknown, never>>>

src/pages/app/index.page.server.ts → src/pages/app/+onBeforeRender.ts

@@ -1,6 +1,6 @@
 import type { PageContextBuiltInServer } from 'vike/types'
 
-export { onBeforeRender }
+export default onBeforeRender
 
 /* async */ function onBeforeRender(pageContext: PageContextBuiltInServer) {
   return {

vite.config.ts

@@ -44,6 +44,7 @@ const config: UserConfig = {
       '#root': __dirname,
     },
   },
+  assetsInclude: isStorybook() ? ['/sb-preview/runtime.js'] : [],
 }
 
 export default config

vitest.config.ts

@@ -18,10 +18,12 @@ export default mergeConfig(
           '**/*{.,-}stories.?(c|m)[jt]s?(x)',
           'src/stories/**/*',
         ],
-        lines: 17,
-        // functions: 20, // has problems see https://github.com/vitest-dev/vitest/issues/3607
-        branches: 44,
-        statements: 17,
+        thresholds: {
+          lines: 17,
+          // functions: 20, // has problems see https://github.com/vitest-dev/vitest/issues/3607
+          branches: 44,
+          statements: 17,
+        },
       },
     },
   }),