feat: support initially opened overlay for errors (#259)

.changeset/clean-bottles-swim.md

@@ -0,0 +1,5 @@
+---
+'vite-plugin-checker': patch
+---
+
+feat: support initially open overlay for errors

docs/configuration/config.md

@@ -16,11 +16,13 @@ Shared configuration to control the checker behaviors of the plugin.
     | boolean
     | {
         /**
-         * Set this true if you want the overlay to default to being open if
-         * errors/warnings are found
+         * Whether to default the overlay to being open
+         * - Set `true` to initially open if errors/warnings are found
+         * - Set `error` to initially open if errors are found
+         * - Set `false` to initially collapse
          * @defaultValue `true`
          */
-        initialIsOpen?: boolean
+        initialIsOpen?: boolean | 'error'
         /**
          * The position of the vite-plugin-checker badge to open and close
          * the diagnostics panel

packages/runtime/src/App.ce.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import Badge from './components/Badge.ce.vue'
 import List from './components/List.ce.vue'
 import { useChecker } from './useChecker'
@@ -21,11 +21,32 @@ const shouldRender = computed(() => {
   return checkerResults.value.some((p) => p.diagnostics.length > 0)
 })
 
-const collapsed = ref<boolean>(!(props?.overlayConfig?.initialIsOpen ?? true))
+// collapsed state if requested (otherwise initially open)
+const initialCollapsed = ref<boolean>(
+  props?.overlayConfig?.initialIsOpen === false || props?.overlayConfig?.initialIsOpen === 'error'
+)
+
+// if initialIsOpen is 'error': watch for results and open if there are errors
+if (props?.overlayConfig?.initialIsOpen === 'error') {
+  // checker result is always initially empty, so need to watch for changes
+  const unwatch = watch(checkerResults, () => {
+    if (!checkerResults.value.length) return
+    // non-zero results length means the badge will appear. decide whether to open the overlay.
+    if (checkerResults.value.some((p) => p.diagnostics.some((d: any) => d.level === 1))) {
+      initialCollapsed.value = false
+    }
+    // stop watching and let the user control the overlay state
+    unwatch()
+  })
+}
+
+const userCollapsed = ref<boolean | undefined>(undefined)
 
 const toggle = () => {
-  collapsed.value = !collapsed.value
+  userCollapsed.value = !(userCollapsed.value ?? initialCollapsed.value)
 }
+
+const collapsed = computed<boolean>(() => userCollapsed.value ?? initialCollapsed.value)
 </script>
 
 <template>

packages/runtime/src/components/Badge.ce.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    checkerResults: any
+    checkerResults: any[]
     collapsed: boolean
     position?: string
     badgeStyle?: string

packages/runtime/src/useChecker.ts

@@ -22,8 +22,8 @@ function resumeErrorOverlay(data: any) {
 
 export function useChecker() {
   const ws = prepareListen()
-  listenToCustomMessage(updateErrorOverlay as any)
-  listenToReconnectMessage(resumeErrorOverlay as any)
+  listenToCustomMessage(updateErrorOverlay)
+  listenToReconnectMessage(resumeErrorOverlay)
   ws.startListening()
 
   return {

packages/runtime/src/ws.ts

@@ -12,11 +12,11 @@ export function listenToConfigMessage(cb: () => any) {
   onConfigMessage.push(cb)
 }
 
-export function listenToCustomMessage(cb: () => any) {
+export function listenToCustomMessage(cb: (data: any) => any) {
   onCustomMessage.push(cb)
 }
 
-export function listenToReconnectMessage(cb: () => any) {
+export function listenToReconnectMessage(cb: (data: any) => any) {
   onReconnectMessage.push(cb)
 }
 

packages/vite-plugin-checker/__tests__/__snapshots__/logger.spec.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`logger > diagnosticToTerminalLog > get error 1`] = `
 " ERROR(ESLint)  Unexpected var, use let or const instead.

packages/vite-plugin-checker/__tests__/__snapshots__/vlsConfig.spec.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`VLS config > customized config 1`] = `
 {

packages/vite-plugin-checker/src/types.ts

@@ -123,7 +123,7 @@ export interface SharedConfig {
          * errors/warnings are found
          * @defaultValue `true`
          */
-        initialIsOpen?: boolean
+        initialIsOpen?: boolean | 'error'
         /**
          * The position of the vite-plugin-checker badge to open and close
          * the diagnostics panel

playground/config-initialIsOpen-error-clean/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
+}

playground/config-initialIsOpen-error-clean/__tests__/test.spec.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  editFile,
+  getHmrOverlayText,
+  isServe,
+  sleepForEdit,
+  sleepForServerReady,
+} from '../../testUtils'
+
+describe('config-initialIsOpen-error-clean', () => {
+  describe.runIf(isServe)('serve', () => {
+    it('should not find overlay', async () => {
+      if (isServe) {
+        await sleepForServerReady()
+        await expect(getHmrOverlayText()).rejects.toThrow(
+          'Invariant failed: .message-body is expected in shadow root'
+        )
+
+        console.log('-- badge appears, but overlay remains collapsed after error introduced --')
+        editFile('src/main.ts', (code) => code.replace('const hello', 'var hello'))
+        await sleepForEdit()
+        try {
+          await getHmrOverlayText()
+        } catch (e) {
+          expect((e as any).toString()).toContain(
+            'Invariant failed: <vite-plugin-checker-error-overlay> shadow dom is expected to be found, but got null'
+          )
+        }
+
+        console.log('-- badge remains, overlay remains collapsed after warning introduced --')
+        editFile('src/main.ts', (code) => code.replace(' as', '! as'))
+        await sleepForEdit()
+        try {
+          await getHmrOverlayText()
+        } catch (e) {
+          expect((e as any).toString()).toContain(
+            'Invariant failed: <vite-plugin-checker-error-overlay> shadow dom is expected to be found, but got null'
+          )
+        }
+      }
+    })
+  })
+})

playground/config-initialIsOpen-error-clean/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

playground/config-initialIsOpen-error-clean/package.json

@@ -0,0 +1,26 @@
+{
+  "private": true,
+  "name": "@playground/config-initial-is-open-error-clean",
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint --ext .js,.ts ./src/**"
+  },
+  "dependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "eslint": "^8.11.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.0",
+    "vite-plugin-checker": "workspace:*"
+  }
+}

playground/config-initialIsOpen-error-clean/src/main.ts

@@ -0,0 +1,8 @@
+import { text } from './text'
+
+const hello = 'Hello'
+
+const rootDom = document.querySelector('#root') as HTMLElement
+rootDom.innerHTML = hello + text
+
+export {}

playground/config-initialIsOpen-error-clean/src/text.ts

@@ -0,0 +1 @@
+export const text = 'Vanilla JS/TS'

playground/config-initialIsOpen-error-clean/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["vite/client"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["./src"]
+}

playground/config-initialIsOpen-error-clean/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import checker from 'vite-plugin-checker'
+
+export default defineConfig({
+  plugins: [
+    checker({
+      overlay: {
+        initialIsOpen: 'error',
+      },
+      eslint: {
+        lintCommand: 'eslint ./src --ext .ts',
+      },
+    }),
+  ],
+})

playground/config-initialIsOpen-error-warnings/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
+}

playground/config-initialIsOpen-error-warnings/__tests__/test.spec.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+
+import { editFile, getHmrOverlayText, isServe, sleepForEdit, sleepForServerReady } from '../../testUtils'
+
+describe('config-initialIsOpen-error-warnings', () => {
+  describe.runIf(isServe)('serve', () => {
+    it('should not find overlay', async () => {
+      if (isServe) {
+        await sleepForServerReady()
+        try {
+          await getHmrOverlayText()
+        } catch (e) {
+          expect((e as any).toString()).toContain(
+            'Invariant failed: <vite-plugin-checker-error-overlay> shadow dom is expected to be found, but got null'
+          )
+        }
+
+        console.log('-- overlay remains closed after introduced error --')
+        editFile('src/main.ts', (code) => code.replace('! as', '! is'))
+        await sleepForEdit()
+        try {
+          await getHmrOverlayText()
+        } catch (e) {
+          expect((e as any).toString()).toContain(
+            'Invariant failed: <vite-plugin-checker-error-overlay> shadow dom is expected to be found, but got null'
+          )
+        }
+      }
+    })
+  })
+})

playground/config-initialIsOpen-error-warnings/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

playground/config-initialIsOpen-error-warnings/package.json

@@ -0,0 +1,26 @@
+{
+  "private": true,
+  "name": "@playground/config-initial-is-open-error-warnings",
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint --ext .js,.ts ./src/**"
+  },
+  "dependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "eslint": "^8.11.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.0",
+    "vite-plugin-checker": "workspace:*"
+  }
+}

playground/config-initialIsOpen-error-warnings/src/main.ts

@@ -0,0 +1,6 @@
+import { text } from './text'
+
+const rootDom = document.querySelector('#root')! as HTMLElement
+rootDom.innerHTML = text
+
+export {}

playground/config-initialIsOpen-error-warnings/src/text.ts

@@ -0,0 +1 @@
+export const text = 'Vanilla JS/TS'

playground/config-initialIsOpen-error-warnings/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["vite/client"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["./src"]
+}

playground/config-initialIsOpen-error-warnings/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import checker from 'vite-plugin-checker'
+
+export default defineConfig({
+  plugins: [
+    checker({
+      overlay: {
+        initialIsOpen: 'error',
+      },
+      eslint: {
+        lintCommand: 'eslint ./src --ext .ts',
+      },
+    }),
+  ],
+})

playground/config-initialIsOpen-error/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
+}