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

Author: jfairley

.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"]
+}