switch to vite

brdgm · Jul 2, 2023 · ca4e009 · ca4e009
1 parent 87dd9b0
commit ca4e009
Show file tree

Hide file tree

Showing 40 changed files with 168 additions and 119 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -11,10 +11,6 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 2020
   },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  },
   overrides: [
     {
       files: [

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -28,6 +28,7 @@ jobs:
         cache: npm
 
     - run: npm install
+    - run: npm run lint
     - run: npm run test:coverage
     - run: npm run build
     - uses: SonarSource/sonarcloud-github-action@master

diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Joan of Arc: Orléans Solo Helper</title>
+    <meta name="description" content="Joan of Arc: Orléans Solo Helper">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="theme-color" content="#333">
+    <meta charset="utf-8">
+    <link rel="icon" sizes="any" href="/favicon.ico">
+    <link rel="icon" type="image/svg+xml" href="/img/icons/favicon.svg">
+    <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-180x180.png" sizes="180x180">
+    <link rel="mask-icon" href="/img/icons/maskable-icon-512x512.png" color="#fff">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@brdgm/joan-of-arc-orleans-solo-helper",
   "version": "1.1.2",
   "private": true,
-  "description": "Joan of Arc: Orléans Solo Helper",
+  "description": "Joan of Arc: Orléans Solo Helper",
   "appDeployName": "joan-of-arc-orleans",
   "scripts": {
     "dev": "vite",

diff --git a/public/img/icons/android-chrome-192x192.png b/public/img/icons/android-chrome-192x192.png
diff --git a/public/img/icons/android-chrome-512x512.png b/public/img/icons/android-chrome-512x512.png
diff --git a/public/img/icons/android-chrome-maskable-192x192.png b/public/img/icons/android-chrome-maskable-192x192.png
diff --git a/public/img/icons/android-chrome-maskable-512x512.png b/public/img/icons/android-chrome-maskable-512x512.png
diff --git a/public/img/icons/app-icon.png b/public/img/icons/app-icon.png
diff --git a/...ic/img/icons/joan-of-arc-orleans-icon.psd → public/img/icons/app-icon.psd b/...ic/img/icons/joan-of-arc-orleans-icon.psd → public/img/icons/app-icon.psd
diff --git a/public/img/icons/apple-touch-icon-120x120.png b/public/img/icons/apple-touch-icon-120x120.png
diff --git a/public/img/icons/apple-touch-icon-152x152.png b/public/img/icons/apple-touch-icon-152x152.png
diff --git a/public/img/icons/apple-touch-icon-180x180.png b/public/img/icons/apple-touch-icon-180x180.png
diff --git a/public/img/icons/apple-touch-icon-60x60.png b/public/img/icons/apple-touch-icon-60x60.png
diff --git a/public/img/icons/apple-touch-icon-76x76.png b/public/img/icons/apple-touch-icon-76x76.png
diff --git a/public/img/icons/apple-touch-icon.png b/public/img/icons/apple-touch-icon.png
diff --git a/public/img/icons/favicon-16x16.png b/public/img/icons/favicon-16x16.png
diff --git a/public/img/icons/favicon-32x32.png b/public/img/icons/favicon-32x32.png
diff --git a/public/img/icons/favicon.ico b/public/img/icons/favicon.ico
diff --git a/public/img/icons/maskable-icon-512x512.png b/public/img/icons/maskable-icon-512x512.png
diff --git a/public/img/icons/msapplication-icon-144x144.png b/public/img/icons/msapplication-icon-144x144.png
diff --git a/public/img/icons/mstile-150x150.png b/public/img/icons/mstile-150x150.png
diff --git a/public/img/icons/pwa-192x192.png b/public/img/icons/pwa-192x192.png
diff --git a/public/img/icons/pwa-512x512.png b/public/img/icons/pwa-512x512.png
diff --git a/public/img/icons/pwa-64x64.png b/public/img/icons/pwa-64x64.png
diff --git a/public/img/icons/safari-pinned-tab.svg b/public/img/icons/safari-pinned-tab.svg
diff --git a/public/index.html b/public/index.html
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/pwa-assets.config.ts b/pwa-assets.config.ts
@@ -0,0 +1,22 @@
+import { Preset, defineConfig } from '@vite-pwa/assets-generator/config'
+
+const minimalPreset: Preset = {
+  transparent: {
+    sizes: [64, 192, 512],
+    favicons: [[64, 'favicon.ico']]
+  },
+  maskable: {
+    sizes: [512]
+  },
+  apple: {
+    sizes: [60,76,120,152,180],
+    padding: 0
+  }
+}
+
+export default defineConfig({
+  preset: minimalPreset,
+  images: [
+    'public/img/icons/app-icon.png'
+  ]
+})
diff --git a/src/App.vue b/src/App.vue
@@ -18,7 +18,7 @@
       <p v-html="t('serviceWorkerUpdatedRefresh.notice')"></p>
     </template>
     <template #footer>
-      <button class="btn btn-primary" data-bs-dismiss="modal" @click="$router.go(0)">{{t('serviceWorkerUpdatedRefresh.title')}}</button>
+      <button class="btn btn-primary" data-bs-dismiss="modal" @click="updateServiceWorker()">{{t('serviceWorkerUpdatedRefresh.title')}}</button>
       <button class="btn btn-secondary" data-bs-dismiss="modal">{{t('action.close')}}</button>
     </template>
   </ModalDialog>
@@ -56,7 +56,9 @@ import AppHeader from 'brdgm-commons/src/components/structure/AppHeader.vue'
 import AppFooter from 'brdgm-commons/src/components/structure/AppFooter.vue'
 import ModalDialog from 'brdgm-commons/src/components/structure/ModalDialog.vue'
 import getErrorMessage from 'brdgm-commons/src/util/error/getErrorMessage'
-import showModal from 'brdgm-commons/src/util/modal/showModal'
+import showModal, { showModalIfExist } from 'brdgm-commons/src/util/modal/showModal'
+import { version, description } from '@/../package.json'
+import { registerSW } from 'virtual:pwa-register'
 
 export default defineComponent({
   name: 'App',
@@ -72,17 +74,24 @@ export default defineComponent({
     })
     const store = useStore()
 
+    // PWA refresh
+    const updateServiceWorker = registerSW({
+      onNeedRefresh() {
+        showModalIfExist('serviceWorkerUpdatedRefresh')
+      }
+    })
+
     store.commit('initialiseStore')
     locale.value = store.state.language
     
     const baseFontSize = ref(store.state.baseFontSize)
 
-    return { t, locale, baseFontSize }
+    return { t, locale, baseFontSize, updateServiceWorker }
   },
   data() {
     return {
-      buildNumber: process.env.VUE_APP_BUILD_NUMBER || '',
-      appTitle: process.env.VUE_APP_TITLE,
+      buildNumber: version,
+      appTitle: description,
       errorMessage: 'Error'
     }
   },
@@ -106,6 +115,7 @@ export default defineComponent({
 <style lang="scss">
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/utilities";
 #content-container {

diff --git a/src/components/structure/AppIcon.vue b/src/components/structure/AppIcon.vue
@@ -7,10 +7,6 @@ import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'AppIcon',
-  setup() {
-    const images = require.context('@/assets/icons', true, /\.png$/)
-    return { images }
-  },
   props: {
     type: {
       type: String,
@@ -24,10 +20,10 @@ export default defineComponent({
   computed: {
     imageUrl() : string {
       if (this.type) {
-        return this.images(`./${this.type}/${this.name}.png`)
+        return new URL(`/src/assets/icons/${this.type}/${this.name}.png`, import.meta.url).toString()
       }
       else {
-        return this.images(`./${this.name}.png`)
+        return new URL(`/src/assets/icons/${this.name}.png`, import.meta.url).toString()
       }
     }
   }

diff --git a/src/i18n.ts b/src/i18n.ts
@@ -1,9 +1,9 @@
 import { createI18n } from 'vue-i18n'
-import loadLocaleMessages from 'brdgm-commons/src/util/i18n/loadLocaleMessages'
+import messages from '@intlify/unplugin-vue-i18n/messages'
 
 export default createI18n({
   legacy: false,
-  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
-  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
-  messages: loadLocaleMessages()
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: messages
 })
diff --git a/src/main.ts b/src/main.ts
@@ -3,10 +3,9 @@ import { store, key } from './store'
 import router from './router'
 import i18n from './i18n'
 import App from './App.vue'
-import './registerServiceWorker'
 
-import "bootstrap/dist/css/bootstrap.min.css"
-import "bootstrap"
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap'
 
 createApp(App)
   .use(store, key)

diff --git a/src/registerServiceWorker.ts b/src/registerServiceWorker.ts
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -5,8 +5,9 @@ import SetupGame from '@/views/SetupGame.vue'
 import RoundTurn from '@/views/RoundTurn.vue'
 import EndOfGame from '@/views/EndOfGame.vue'
 import createRouter from 'brdgm-commons/src/util/router/createRouter'
+import { name } from '@/../package.json'
 
-const LOCALSTORAGE_KEY = process.env.VUE_APP_LOCALSTORAGE_KEY_PREFIX + "route"
+const LOCALSTORAGE_KEY = `${name}.route`
 
 const routes: Array<RouteRecordRaw> = [
   {

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -1,8 +1,9 @@
 import DifficultyLevel from '@/services/enum/DifficultyLevel'
 import { InjectionKey } from 'vue'
 import { createStore, useStore as baseUseStore, Store } from 'vuex'
+import { name } from '@/../package.json'
 
-const LOCALSTORAGE_KEY = process.env.VUE_APP_LOCALSTORAGE_KEY_PREFIX + "store"
+const LOCALSTORAGE_KEY = `${name}.store`
 
 export interface State {
   language: string

diff --git a/tsconfig.json b/tsconfig.json
@@ -7,14 +7,16 @@
     "importHelpers": true,
     "moduleResolution": "node",
     "skipLibCheck": true,
+    "resolveJsonModule": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
     "types": [
-      "webpack-env",
       "mocha",
-      "chai"
+      "chai",
+      "vite-plugin-pwa/client",
+      "@intlify/unplugin-vue-i18n/messages"
     ],
     "paths": {
       "@/*": [

diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,70 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+import path from 'path'
+import { description, appDeployName } from './package.json'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: `/${appDeployName}/`,
+  plugins: [
+    vue(),
+    VitePWA({
+      registerType: 'prompt',
+      manifestFilename: 'manifest.json',
+      filename: 'service-worker.js',
+      includeAssets: [
+        'favicon.ico',
+        'img/icons/favicon.ico',
+        'img/icons/favicon.svg',
+        'img/icons/apple-touch-icon-60x60.png',
+        'img/icons/apple-touch-icon-76x76.png',
+        'img/icons/apple-touch-icon-120x120.png',
+        'img/icons/apple-touch-icon-152x152.png',
+        'img/icons/apple-touch-icon-180x180.png',
+        'img/icons/maskable-icon-512x512.png'
+      ],
+      manifest: {
+        name: description,
+        short_name: description,
+        description: description,
+        theme_color: '#333',
+        background_color: '#000',
+        icons: [
+          {
+            src: 'img/icons/pwa-64x64.png',
+            sizes: '64x64',
+            type: 'image/png'
+          },
+          {
+            src: 'img/icons/pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'img/icons/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      }
+    }),
+    VueI18nPlugin({
+      include: [path.resolve(__dirname, './src/locales/**')],
+      strictMessage: false
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  server: {
+    port: 8080
+  },
+  preview: {
+    port: 8081
+  }
+})
diff --git a/vitest.config.ts b/vitest.config.ts
@@ -0,0 +1,22 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig } from 'vite'
+import { configDefaults, defineConfig } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+      transformMode: {
+        web: [/\.[jt]sx$/],
+      },
+      globals: true,
+      coverage: {
+        provider: 'istanbul'
+      }
+    }
+  })
+)