chore(vue): use Ionic lint and Prettier configs and replace Cypress with Playwright

vue-vite/base/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

vue-vite/base/.gitignore

@@ -30,3 +30,9 @@ npm-debug.log*
 /platforms
 /plugins
 /www
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

vue-vite/base/.prettierignore

@@ -0,0 +1,5 @@
+# Prettier only reads the root .gitignore, not the ones inside the native
+# projects, so ignore them here to skip Capacitor's copied web build and
+# Gradle's build output.
+android/
+ios/

vue-vite/base/.vscode/extensions.json

@@ -1,5 +1,8 @@
 {
-    "recommendations": [
-        "Webnative.webnative"
-    ]
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "Vue.volar",
+    "Webnative.webnative"
+  ]
 }

vue-vite/base/eslint.config.js

@@ -0,0 +1,41 @@
+import js from '@eslint/js';
+import ionic from '@ionic/eslint-config/recommended.js';
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
+import pluginVue from 'eslint-plugin-vue';
+import globals from 'globals';
+
+export default [
+  ...defineConfigWithVueTs(
+    {
+      ignores: ['dist/**', 'android/**', 'ios/**', 'playwright-report/**', 'test-results/**', 'blob-report/**'],
+    },
+    js.configs.recommended,
+    pluginVue.configs['flat/essential'],
+    vueTsConfigs.recommended,
+  ),
+  // Kept outside defineConfigWithVueTs: it treats `consistent-type-imports` as
+  // type-aware and would turn on project-based parsing for every .ts file.
+  // Note: @ionic/eslint-config only targets .ts/.tsx files, so <script> blocks in
+  // .vue files get the Vue and TypeScript rules above but not the Ionic ones.
+  ...ionic,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+    },
+    rules: {
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'vue/no-deprecated-slot-attribute': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+  {
+    files: ['tests/unit/**/*.spec.{js,ts}'],
+    languageOptions: {
+      globals: globals.vitest,
+    },
+  },
+];

vue-vite/base/package.json

@@ -7,9 +7,14 @@
     "dev": "vite",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
-    "test:e2e": "cypress run",
-    "test:unit": "vitest",
-    "lint": "eslint ."
+    "lint": "npm run eslint && npm run prettier -- --check",
+    "lint:fix": "npm run eslint -- --fix && npm run prettier -- --write",
+    "eslint": "eslint --max-warnings 0",
+    "prettier": "prettier \"**/*.{ts,vue}\"",
+    "test": "npm run test:unit && npm run test:e2e",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@ionic/vue": "^9.0.0",
@@ -19,18 +24,24 @@
     "vue-router": "^5.0.0"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@ionic/eslint-config": "^0.5.0",
+    "@ionic/prettier-config": "^4.0.0",
+    "@playwright/test": "^1.64.1",
     "@vitejs/plugin-legacy": "^8.0.0",
     "@vitejs/plugin-vue": "^6.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-typescript": "^14.9.0",
     "@vue/test-utils": "^2.3.0",
-    "cypress": "^13.5.0",
-    "eslint": "^8.35.0",
-    "eslint-plugin-vue": "^9.9.0",
-    "jsdom": "^22.1.0",
+    "eslint": "^10.13.0",
+    "eslint-plugin-vue": "^10.11.1",
+    "globals": "^17.13.0",
+    "jsdom": "^30.1.3",
+    "prettier": "^3.9.10",
     "terser": "^5.16.0",
     "typescript": "~5.9.0",
     "vite": "^8.0.0",
-    "vitest": "~4.0.18",
-    "vue-tsc": "^2.1.10"
-  }
+    "vitest": "~5.0.5",
+    "vue-tsc": "^3.3.5"
+  },
+  "prettier": "@ionic/prettier-config"
 }

vue-vite/base/playwright.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const baseURL = 'http://localhost:5173';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? [['github'], ['html', { open: 'never' }]] : 'list',
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 7'] },
+    },
+  ],
+  webServer: {
+    command: 'npm run dev -- --port 5173 --strictPort',
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});

vue-vite/base/src/main.ts

@@ -1,8 +1,8 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router';
-
 import { IonicVue } from '@ionic/vue';
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import router from './router';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/vue/css/core.css';
@@ -34,9 +34,7 @@ import '@ionic/vue/css/palettes/dark.system.css';
 /* Theme variables */
 import './theme/variables.css';
 
-const app = createApp(App)
-  .use(IonicVue)
-  .use(router);
+const app = createApp(App).use(IonicVue).use(router);
 
 router.isReady().then(() => {
   app.mount('#app');

vue-vite/base/vite.config.ts

@@ -1,23 +1,20 @@
-/// <reference types="vitest" />
-
-import legacy from '@vitejs/plugin-legacy'
-import vue from '@vitejs/plugin-vue'
-import path from 'path'
-import { defineConfig } from 'vite'
+import legacy from '@vitejs/plugin-legacy';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { defineConfig } from 'vitest/config';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    legacy()
-  ],
+  plugins: [vue(), legacy()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
     },
   },
   test: {
     globals: true,
-    environment: 'jsdom'
-  }
-})
+    environment: 'jsdom',
+    // Playwright e2e specs live in tests/e2e.
+    include: ['tests/unit/**/*.spec.{js,ts}'],
+  },
+});

vue-vite/official/blank/ionic.starter.json

@@ -7,6 +7,6 @@
     "www"
   ],
   "scripts": {
-    "test": "npm run build && npm run test:unit -- --watch=false && npm i --no-save concurrently && ./node_modules/.bin/concurrently \"npm run dev\" \"npm run test:e2e\" --kill-others --success first"
+    "test": "npm run lint && npm run build && npm run test:unit && npx playwright install --with-deps chromium && npm run test:e2e"
   }
 }

vue-vite/official/blank/src/router/index.ts

@@ -1,22 +1,23 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
-import HomePage from '../views/HomePage.vue'
+import type { RouteRecordRaw } from 'vue-router';
 
-const routes: Array<RouteRecordRaw> = [
+import HomePage from '../views/HomePage.vue';
+
+const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    redirect: '/home'
+    redirect: '/home',
   },
   {
     path: '/home',
     name: 'Home',
-    component: HomePage
-  }
-]
+    component: HomePage,
+  },
+];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;