Refactor to use TypeScript

.devcontainer/devcontainer.json

@@ -12,13 +12,14 @@
     "customizations": {
         "vscode": {
             "extensions": [
-                "ms-azuretools.vscode-docker",
                 "eamodio.gitlens",
                 "esbenp.prettier-vscode",
                 "mikestead.dotenv",
                 "streetsidesoftware.code-spell-checker",
                 "hollowtree.vue-snippets",
                 "Vue.volar",
+                "dbaeumer.vscode-eslint",
+                "EditorConfig.EditorConfig",
                 "bradlc.vscode-tailwindcss",
                 "shd101wyy.markdown-preview-enhanced",
                 "formulahendry.auto-rename-tag",

.editorconfig

@@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 120

.env.example

@@ -1,3 +1,3 @@
-VITE_PORT=5173
+VITE_APP_PORT=5173
 VITE_BASE_PATH=/
 VITE_API_BASE_URL=http://api.vue-spa.localhost

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.gitignore

@@ -8,23 +8,25 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.DS_Store
 dist
 dist-ssr
+coverage
 *.local
-!Dockerfile.local
+.env
 components.d.ts
 
+/cypress/videos/
+/cypress/screenshots/
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
-.DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
 
-.env
-.env.local
-.env.production
+*.tsbuildinfo

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["Vue.volar"]
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig"
+  ]
 }

docker-compose.local.yml

@@ -12,7 +12,7 @@ services:
     labels:
       - "traefik.enable=true"
       - "traefik.http.routers.vue-spa.rule=Host(`vue-spa.localhost`)"
-      - "traefik.http.services.vue-spa.loadbalancer.server.port=${VITE_PORT}"
+      - "traefik.http.services.vue-spa.loadbalancer.server.port=${VITE_APP_PORT}"
     networks:
       - proxy
 

env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+declare module "envConfig";

eslint.config.js → eslint.config.ts

@@ -1,10 +1,5 @@
-import vue from 'eslint-plugin-vue';
-import {
-    defineConfigWithVueTs,
-    vueTsConfigs,
-} from '@vue/eslint-config-typescript';
-import eslint from '@eslint/js';
-import globals from 'globals';
+import vue from 'eslint-plugin-vue'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
 
 export default [
     // Global ignores
@@ -15,23 +10,6 @@ export default [
             'public',
         ],
     },
-    // JavaScript files
-    {
-        files: ['**/*.js'],
-        ...eslint.configs.recommended,
-        languageOptions: {
-            ecmaVersion: 'latest',
-            sourceType: 'module',
-            globals: {
-                ...globals.browser,
-                ...globals.node,
-                process: 'readonly',
-                module: 'readonly',
-                require: 'readonly',
-                window: 'readonly',
-            },
-        },
-    },
     // Vue and TypeScript files
     ...defineConfigWithVueTs(
         vue.configs['flat/recommended'],
@@ -42,14 +20,13 @@ export default [
                 'vue/attribute-hyphenation': 'off',
                 'vue/v-on-event-hyphenation': 'off',
                 'vue/multi-word-component-names': 'off',
-                'vue/block-lang': 'off',
                 'vue/no-v-html': 'off',
                 'vue/html-indent': ['error', 4],
                 '@typescript-eslint/no-explicit-any': 'off',
                 indent: ['error', 4],
-                semi: ['error', 'always'],
+                semi: ['error', 'never'],
                 'linebreak-style': ['error', 'unix'],
             },
-        }
+        },
     ),
-];
+]

index.html

@@ -30,7 +30,7 @@
         <div id="app"></div>
         <script
             type="module"
-            src="/src/app.js"
+            src="/src/main.ts"
         ></script>
     </body>
 </html>