chore: modernize (#225)

* chore: bump deps

* refactor: ts config changes (WIP)

* fixed TS issues

* fix e2e tests

* fix component tests

* chore: removed firefox variant

* added build step for e2e tests

* add type checking

* chean up index page

* add coverage

* freeze lockfile

* docs: update docs

.eslintrc-auto-import.json

@@ -1,6 +1,13 @@
 {
   "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
     "EffectScope": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
     "acceptHMRUpdate": true,
     "computed": true,
     "createApp": true,
@@ -46,7 +53,6 @@
     "readonly": true,
     "ref": true,
     "resolveComponent": true,
-    "resolveDirective": true,
     "setActivePinia": true,
     "setMapStoreSuffix": true,
     "shallowReactive": true,

.eslintrc.js → .eslintrc.cjs

@@ -1,20 +1,17 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
 module.exports = {
   root: true,
-  env: {
-    node: true,
-  },
   extends: [
     'plugin:vue/vue3-recommended',
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting',
     'plugin:security/recommended',
-    'prettier',
     './.eslintrc-auto-import.json',
   ],
-  parser: 'vue-eslint-parser',
   parserOptions: {
-    parser: '@typescript-eslint/parser',
-    ecmaVersion: 2021,
+    ecmaVersion: 'latest',
   },
   rules: {
     'no-var': 'error',

.github/workflows/main.yml

@@ -44,14 +44,22 @@ jobs:
           node-version: 16
           cache: 'pnpm'
 
-      - name: Install Playwright browsers
-        run: npx playwright install --with-deps
+      - name: Type Check
+        run: pnpm type-check
 
       - name: Run unit tests
         run: pnpm test:ci
 
-      - name: Run component tests
-        run: pnpm test:ci-ct
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
 
       - name: Run e2e tests
-        run: pnpm test:ci-e2e
+        run: |
+          pnpm build
+          pnpm test:ci-e2e
+
+      - name: Coverage
+        uses: davelosert/[email protected]
+        if: ${{ always() }}
+        # with:
+        #   vite-config-path: ./vite.config.ts

CHANGES.md

@@ -1,9 +1,13 @@
 # Changelog
 
-## Unreleased
+## 4.0.0 (2023-04-13)
 
+- Feat: added coverage reporting to pull requests.
+- Refactor: converted component tests to Vitest. Thank You @WebPirat for the report (#223)
+- Refactor: updated configurations to match better `create vue` defaults.
+- Refactor: removed Tailwind Firefox rule.
 - Tooling: added eslint rules for variable length and usage. Use `i` and `j` for trivial loop indexes and `_` for unused variable.
-- Chore: bumped deps.
+- Chore: bumped all deps.
 
 ## 3.1.0 (2022-07-17)
 

README.md

@@ -10,17 +10,15 @@ Please [check out the homepage](https://vite-ts-tailwind-starter.vercel.app/) fo
 
 ## Features
 
-- Vue 3.2
-- Pinia store (fully typed Vuex store is available up to version 1.13)
+- Vue 3
+- Pinia store (fully typed Vuex store is available up to template version 1.13)
 - Routing using [vue-router 4](https://router.vuejs.org/)
-- TypeScript 4.7
+- TypeScript 5
 - Automatic package and component imports w/ [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) and [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
 - Tailwind CSS 3 w/ following plugins and configuration preinstalled:
   - `@tailwindcss/aspect-ratio`
-  - `@tailwindcss/line-clamp`
   - `@tailwindcss/typography`
   - `@tailwindcss/forms`
-  - `firefox`-variant
 - PostCSS 8 w/ `postcss-nesting` plugin and `cssnano` for minimizing production CSS
 - Eslint
 - Prettier
@@ -29,13 +27,12 @@ Please [check out the homepage](https://vite-ts-tailwind-starter.vercel.app/) fo
   - `VITE_APP_VERSION` is read from `package.json` version at build time
   - `VITE_APP_BUILD_EPOCH` is populated as `new Date().getTime()` at build time
 - Using newest `script setup` syntax w/ Ref sugar (see the official [Script Setup documentation](https://vuejs.org/api/sfc-script-setup.html) and [Ref Sugar RFC](https://github.com/vuejs/rfcs/discussions/369) discussion)
-- Vitest unit tests
-- Playwright e2e + component tests
+- Vitest unit + component tests
 - GitHub workflows
   - Renovatebot for keeping up with dependencies
-  - Automated unit tests
-  - Automated component tests
+  - Automated unit + component tests
   - Automated e2e tests
+  - Coverage reporting in PR comments ([example](https://github.com/Uninen/vite-ts-tailwind-starter/pull/225#issuecomment-1507477206))
 - GitLab CI config available up to versions 2.x
 
 ## Elsewhere

src/auto-imports.d.ts → auto-imports.d.ts

@@ -1,4 +1,7 @@
-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -47,7 +50,6 @@ declare global {
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
   const resolveComponent: typeof import('vue')['resolveComponent']
-  const resolveDirective: typeof import('vue')['resolveDirective']
   const setActivePinia: typeof import('pinia')['setActivePinia']
   const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
   const shallowReactive: typeof import('vue')['shallowReactive']
@@ -73,3 +75,8 @@ declare global {
   const watchPostEffect: typeof import('vue')['watchPostEffect']
   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+}

package.json

@@ -1,58 +1,65 @@
 {
   "name": "vite-ts-tailwind-starter",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite build && vite preview",
     "start": "pnpm dev & wait-on tcp:3000 -v",
     "test": "vitest",
     "coverage": "vitest run --coverage",
-    "test-ct": "playwright test -c playwright-ct.config.ts",
-    "test-e2e": "playwright test -c playwright.config.ts",
-    "test:ci": "vitest",
+    "test-e2e": "playwright test --headed",
+    "test:ci": "vitest run --coverage",
     "test:ci-e2e": "playwright test",
-    "test:ci-ct": "playwright test -c playwright-ct.config.ts"
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
   },
   "dependencies": {
-    "@vueuse/head": "1.1.19",
-    "pinia": "2.0.28",
-    "vue": "3.2.45",
+    "@vueuse/head": "1.1.23",
+    "pinia": "2.0.34",
+    "vue": "3.2.47",
     "vue-router": "4.1.6"
   },
   "devDependencies": {
-    "@pinia/testing": "0.0.14",
-    "@playwright/experimental-ct-vue": "1.31.2",
-    "@playwright/test": "1.31.2",
+    "@pinia/testing": "0.0.16",
+    "@playwright/experimental-ct-vue": "1.32.3",
+    "@playwright/test": "1.32.3",
+    "@rushstack/eslint-patch": "1.2.0",
     "@tailwindcss/aspect-ratio": "0.4.2",
     "@tailwindcss/forms": "0.5.3",
-    "@tailwindcss/line-clamp": "0.4.2",
-    "@tailwindcss/typography": "0.5.8",
-    "@types/node": "18.15.1",
-    "@typescript-eslint/eslint-plugin": "5.54.1",
-    "@typescript-eslint/parser": "5.54.1",
-    "@vitejs/plugin-vue": "4.0.0",
-    "@vue/test-utils": "2.3.1",
-    "autoprefixer": "10.4.13",
+    "@tailwindcss/line-clamp": "0.4.4",
+    "@tailwindcss/typography": "0.5.9",
+    "@types/jsdom": "21.1.1",
+    "@types/lodash-es": "4.17.7",
+    "@types/node": "18.15.11",
+    "@typescript-eslint/eslint-plugin": "5.58.0",
+    "@typescript-eslint/parser": "5.58.0",
+    "@vitejs/plugin-vue": "4.1.0",
+    "@vitest/coverage-c8": "0.30.1",
+    "@vue/eslint-config-prettier": "7.1.0",
+    "@vue/eslint-config-typescript": "11.0.2",
+    "@vue/test-utils": "2.3.2",
+    "@vue/tsconfig": "0.1.3",
+    "autoprefixer": "10.4.14",
     "c8": "7.13.0",
-    "cssnano": "5.1.14",
-    "eslint": "8.36.0",
-    "eslint-config-prettier": "8.7.0",
+    "cssnano": "6.0.0",
+    "eslint": "8.38.0",
+    "eslint-config-prettier": "8.8.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-security": "1.7.1",
-    "eslint-plugin-vue": "9.9.0",
-    "happy-dom": "8.9.0",
-    "postcss": "8.4.20",
+    "eslint-plugin-vue": "9.10.0",
+    "jsdom": "21.1.1",
+    "lodash-es": "4.17.21",
+    "postcss": "8.4.21",
     "postcss-import": "15.1.0",
-    "postcss-nesting": "11.2.1",
-    "tailwindcss": "3.2.4",
-    "typescript": "4.9.4",
-    "unplugin-auto-import": "0.15.1",
-    "unplugin-vue-components": "0.24.1",
-    "vite": "4.1.4",
-    "vitest": "0.29.2",
+    "postcss-nesting": "11.2.2",
+    "tailwindcss": "3.3.1",
+    "typescript": "5.0.4",
+    "unplugin-auto-import": "0.15.2",
+    "vite": "4.2.1",
+    "vitest": "0.30.1",
+    "vue-tsc": "^1.2.0",
     "wait-on": "7.0.1"
   }
 }

playwright.config.ts

@@ -1,16 +1,32 @@
-import { devices, type PlaywrightTestConfig } from '@playwright/test'
+import type { PlaywrightTestConfig } from '@playwright/test'
+import { devices } from '@playwright/test'
 
 const config: PlaywrightTestConfig = {
   testDir: './tests/e2e',
-  webServer: {
-    command: 'pnpm dev',
-    url: 'http://localhost:3000/',
-    timeout: 120 * 1000,
-    reuseExistingServer: !process.env.CI,
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
   },
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
   use: {
-    baseURL: 'http://localhost:3000',
+    actionTimeout: 0,
+    baseURL: 'http://localhost:5173',
     trace: 'on-first-retry',
+    // headless: !!process.env.CI,
+  },
+  webServer: {
+    command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
+    port: 5173,
+    reuseExistingServer: !process.env.CI,
   },
   projects: [
     {