From e5a26d68097b6254a3004ce3495ed79f35857423 Mon Sep 17 00:00:00 2001
From: Jeff Fairley <jfairley@gmail.com>
Date: Mon, 21 Aug 2023 11:48:30 -0600
Subject: [PATCH] feat: support initially opened overlay for errors (#259)

---
 .changeset/clean-bottles-swim.md              |  5 +
 docs/configuration/config.md                  |  8 +-
 packages/runtime/src/App.ce.vue               | 27 +++++-
 packages/runtime/src/components/Badge.ce.vue  |  2 +-
 packages/runtime/src/useChecker.ts            |  4 +-
 packages/runtime/src/ws.ts                    |  4 +-
 .../__snapshots__/logger.spec.ts.snap         |  2 +-
 .../__snapshots__/vlsConfig.spec.ts.snap      |  2 +-
 packages/vite-plugin-checker/src/types.ts     |  2 +-
 .../.eslintrc.json                            |  4 +
 .../__tests__/test.spec.ts                    | 44 +++++++++
 .../index.html                                | 13 +++
 .../package.json                              | 26 +++++
 .../src/main.ts                               |  8 ++
 .../src/text.ts                               |  1 +
 .../tsconfig.json                             | 19 ++++
 .../vite.config.js                            | 15 +++
 .../.eslintrc.json                            |  4 +
 .../__tests__/test.spec.ts                    | 31 ++++++
 .../index.html                                | 13 +++
 .../package.json                              | 26 +++++
 .../src/main.ts                               |  6 ++
 .../src/text.ts                               |  1 +
 .../tsconfig.json                             | 19 ++++
 .../vite.config.js                            | 15 +++
 .../config-initialIsOpen-error/.eslintrc.json |  4 +
 .../__tests__/__snapshots__/test.spec.ts.snap | 17 ++++
 .../__tests__/test.spec.ts                    | 31 ++++++
 .../config-initialIsOpen-error/index.html     | 13 +++
 .../config-initialIsOpen-error/package.json   | 26 +++++
 .../config-initialIsOpen-error/src/main.ts    |  8 ++
 .../config-initialIsOpen-error/src/text.ts    |  1 +
 .../config-initialIsOpen-error/tsconfig.json  | 19 ++++
 .../config-initialIsOpen-error/vite.config.js | 15 +++
 pnpm-lock.yaml                                | 97 +++++++++++++++++--
 35 files changed, 511 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/clean-bottles-swim.md
 create mode 100644 playground/config-initialIsOpen-error-clean/.eslintrc.json
 create mode 100644 playground/config-initialIsOpen-error-clean/__tests__/test.spec.ts
 create mode 100644 playground/config-initialIsOpen-error-clean/index.html
 create mode 100644 playground/config-initialIsOpen-error-clean/package.json
 create mode 100644 playground/config-initialIsOpen-error-clean/src/main.ts
 create mode 100644 playground/config-initialIsOpen-error-clean/src/text.ts
 create mode 100644 playground/config-initialIsOpen-error-clean/tsconfig.json
 create mode 100644 playground/config-initialIsOpen-error-clean/vite.config.js
 create mode 100644 playground/config-initialIsOpen-error-warnings/.eslintrc.json
 create mode 100644 playground/config-initialIsOpen-error-warnings/__tests__/test.spec.ts
 create mode 100644 playground/config-initialIsOpen-error-warnings/index.html
 create mode 100644 playground/config-initialIsOpen-error-warnings/package.json
 create mode 100644 playground/config-initialIsOpen-error-warnings/src/main.ts
 create mode 100644 playground/config-initialIsOpen-error-warnings/src/text.ts
 create mode 100644 playground/config-initialIsOpen-error-warnings/tsconfig.json
 create mode 100644 playground/config-initialIsOpen-error-warnings/vite.config.js
 create mode 100644 playground/config-initialIsOpen-error/.eslintrc.json
 create mode 100644 playground/config-initialIsOpen-error/__tests__/__snapshots__/test.spec.ts.snap
 create mode 100644 playground/config-initialIsOpen-error/__tests__/test.spec.ts
 create mode 100644 playground/config-initialIsOpen-error/index.html
 create mode 100644 playground/config-initialIsOpen-error/package.json
 create mode 100644 playground/config-initialIsOpen-error/src/main.ts
 create mode 100644 playground/config-initialIsOpen-error/src/text.ts
 create mode 100644 playground/config-initialIsOpen-error/tsconfig.json
 create mode 100644 playground/config-initialIsOpen-error/vite.config.js

diff --git a/.changeset/clean-bottles-swim.md b/.changeset/clean-bottles-swim.md
new file mode 100644
index 00000000..81931d1f
--- /dev/null
+++ b/.changeset/clean-bottles-swim.md
@@ -0,0 +1,5 @@
+---
+'vite-plugin-checker': patch
+---
+
+feat: support initially open overlay for errors
diff --git a/docs/configuration/config.md b/docs/configuration/config.md
index 78193555..52120ac9 100644
--- a/docs/configuration/config.md
+++ b/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
diff --git a/packages/runtime/src/App.ce.vue b/packages/runtime/src/App.ce.vue
index 884d7530..65536b33 100644
--- a/packages/runtime/src/App.ce.vue
+++ b/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>
diff --git a/packages/runtime/src/components/Badge.ce.vue b/packages/runtime/src/components/Badge.ce.vue
index 3765adbd..5d4324d4 100644
--- a/packages/runtime/src/components/Badge.ce.vue
+++ b/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
diff --git a/packages/runtime/src/useChecker.ts b/packages/runtime/src/useChecker.ts
index d2c942eb..8de9a8ae 100644
--- a/packages/runtime/src/useChecker.ts
+++ b/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 {
diff --git a/packages/runtime/src/ws.ts b/packages/runtime/src/ws.ts
index 7e4f1540..7c77ed0d 100644
--- a/packages/runtime/src/ws.ts
+++ b/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)
 }
 
diff --git a/packages/vite-plugin-checker/__tests__/__snapshots__/logger.spec.ts.snap b/packages/vite-plugin-checker/__tests__/__snapshots__/logger.spec.ts.snap
index 8c0c68d2..6dcbea1c 100644
--- a/packages/vite-plugin-checker/__tests__/__snapshots__/logger.spec.ts.snap
+++ b/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.
diff --git a/packages/vite-plugin-checker/__tests__/__snapshots__/vlsConfig.spec.ts.snap b/packages/vite-plugin-checker/__tests__/__snapshots__/vlsConfig.spec.ts.snap
index 801e4112..a0d7649d 100644
--- a/packages/vite-plugin-checker/__tests__/__snapshots__/vlsConfig.spec.ts.snap
+++ b/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`] = `
 {
diff --git a/packages/vite-plugin-checker/src/types.ts b/packages/vite-plugin-checker/src/types.ts
index c4afe2c8..eae1ec46 100644
--- a/packages/vite-plugin-checker/src/types.ts
+++ b/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
diff --git a/playground/config-initialIsOpen-error-clean/.eslintrc.json b/playground/config-initialIsOpen-error-clean/.eslintrc.json
new file mode 100644
index 00000000..cef19347
--- /dev/null
+++ b/playground/config-initialIsOpen-error-clean/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
+}
diff --git a/playground/config-initialIsOpen-error-clean/__tests__/test.spec.ts b/playground/config-initialIsOpen-error-clean/__tests__/test.spec.ts
new file mode 100644
index 00000000..e7a2c75d
--- /dev/null
+++ b/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'
+          )
+        }
+      }
+    })
+  })
+})
diff --git a/playground/config-initialIsOpen-error-clean/index.html b/playground/config-initialIsOpen-error-clean/index.html
new file mode 100644
index 00000000..5f4067d6
--- /dev/null
+++ b/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>
diff --git a/playground/config-initialIsOpen-error-clean/package.json b/playground/config-initialIsOpen-error-clean/package.json
new file mode 100644
index 00000000..c45e2631
--- /dev/null
+++ b/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:*"
+  }
+}
diff --git a/playground/config-initialIsOpen-error-clean/src/main.ts b/playground/config-initialIsOpen-error-clean/src/main.ts
new file mode 100644
index 00000000..7f871824
--- /dev/null
+++ b/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 {}
diff --git a/playground/config-initialIsOpen-error-clean/src/text.ts b/playground/config-initialIsOpen-error-clean/src/text.ts
new file mode 100644
index 00000000..e583889a
--- /dev/null
+++ b/playground/config-initialIsOpen-error-clean/src/text.ts
@@ -0,0 +1 @@
+export const text = 'Vanilla JS/TS'
diff --git a/playground/config-initialIsOpen-error-clean/tsconfig.json b/playground/config-initialIsOpen-error-clean/tsconfig.json
new file mode 100644
index 00000000..36f84d9e
--- /dev/null
+++ b/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"]
+}
diff --git a/playground/config-initialIsOpen-error-clean/vite.config.js b/playground/config-initialIsOpen-error-clean/vite.config.js
new file mode 100644
index 00000000..ddab80f7
--- /dev/null
+++ b/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',
+      },
+    }),
+  ],
+})
diff --git a/playground/config-initialIsOpen-error-warnings/.eslintrc.json b/playground/config-initialIsOpen-error-warnings/.eslintrc.json
new file mode 100644
index 00000000..cef19347
--- /dev/null
+++ b/playground/config-initialIsOpen-error-warnings/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
+}
diff --git a/playground/config-initialIsOpen-error-warnings/__tests__/test.spec.ts b/playground/config-initialIsOpen-error-warnings/__tests__/test.spec.ts
new file mode 100644
index 00000000..f09c0514
--- /dev/null
+++ b/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'
+          )
+        }
+      }
+    })
+  })
+})
diff --git a/playground/config-initialIsOpen-error-warnings/index.html b/playground/config-initialIsOpen-error-warnings/index.html
new file mode 100644
index 00000000..5f4067d6
--- /dev/null
+++ b/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>
diff --git a/playground/config-initialIsOpen-error-warnings/package.json b/playground/config-initialIsOpen-error-warnings/package.json
new file mode 100644
index 00000000..d3285612
--- /dev/null
+++ b/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:*"
+  }
+}
diff --git a/playground/config-initialIsOpen-error-warnings/src/main.ts b/playground/config-initialIsOpen-error-warnings/src/main.ts
new file mode 100644
index 00000000..e4ed1ac7
--- /dev/null
+++ b/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 {}
diff --git a/playground/config-initialIsOpen-error-warnings/src/text.ts b/playground/config-initialIsOpen-error-warnings/src/text.ts
new file mode 100644
index 00000000..e583889a
--- /dev/null
+++ b/playground/config-initialIsOpen-error-warnings/src/text.ts
@@ -0,0 +1 @@
+export const text = 'Vanilla JS/TS'
diff --git a/playground/config-initialIsOpen-error-warnings/tsconfig.json b/playground/config-initialIsOpen-error-warnings/tsconfig.json
new file mode 100644
index 00000000..36f84d9e
--- /dev/null
+++ b/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"]
+}
diff --git a/playground/config-initialIsOpen-error-warnings/vite.config.js b/playground/config-initialIsOpen-error-warnings/vite.config.js
new file mode 100644
index 00000000..ddab80f7
--- /dev/null
+++ b/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',
+      },
+    }),
+  ],
+})
diff --git a/playground/config-initialIsOpen-error/.eslintrc.json b/playground/config-initialIsOpen-error/.eslintrc.json
new file mode 100644
index 00000000..cef19347
--- /dev/null
+++ b/playground/config-initialIsOpen-error/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
+}
diff --git a/playground/config-initialIsOpen-error/__tests__/__snapshots__/test.spec.ts.snap b/playground/config-initialIsOpen-error/__tests__/__snapshots__/test.spec.ts.snap
new file mode 100644
index 00000000..f253558a
--- /dev/null
+++ b/playground/config-initialIsOpen-error/__tests__/__snapshots__/test.spec.ts.snap
@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`config-initialIsOpen-error > serve > should find overlay 1`] = `"Unexpected var, use let or const instead. (no-var)"`;
+
+exports[`config-initialIsOpen-error > serve > should find overlay 2`] = `"<PROJECT_ROOT>/playground-temp/config-initialIsOpen-error/src/main.ts:3:1"`;
+
+exports[`config-initialIsOpen-error > serve > should find overlay 3`] = `
+"    1 | import { text } from './text'
+    2 |
+  > 3 | var hello = 'Hello'
+      | ^^^^^^^^^^^^^^^^^^^
+    4 |
+    5 | const rootDom = document.querySelector('#root')! as HTMLElement
+    6 | rootDom.innerHTML = hello + text"
+`;
+
+exports[`config-initialIsOpen-error > serve > should find overlay 4`] = `""`;
diff --git a/playground/config-initialIsOpen-error/__tests__/test.spec.ts b/playground/config-initialIsOpen-error/__tests__/test.spec.ts
new file mode 100644
index 00000000..20c44c57
--- /dev/null
+++ b/playground/config-initialIsOpen-error/__tests__/test.spec.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+
+import { editFile, getHmrOverlay, getHmrOverlayText, isServe, pollingUntil, sleep, sleepForEdit, sleepForServerReady } from '../../testUtils'
+
+describe('config-initialIsOpen-error', () => {
+  describe.runIf(isServe)('serve', () => {
+    it('should find overlay', async () => {
+      if (isServe) {
+        await sleepForServerReady()
+        const [message1, file1, frame1] = await getHmrOverlayText()
+        expect(message1).toMatchSnapshot()
+        expect(file1).toMatchSnapshot()
+        expect(frame1).toMatchSnapshot()
+
+        console.log('-- overlay remains after fix error --')
+        editFile('src/main.ts', (code) => code.replace('var hello', `const hello`))
+        await sleepForEdit()
+        await pollingUntil(getHmrOverlay, (dom) => !!dom)
+        const [, , frame2] = await getHmrOverlayText()
+        expect(frame2).toMatchSnapshot()
+
+        console.log('-- overlay dismiss after fix warning --')
+        editFile('src/main.ts', (code) => code.replace('! as', ` as`))
+        await sleep(6000)
+        await expect(getHmrOverlayText()).rejects.toThrow(
+          'Invariant failed: .message-body is expected in shadow root'
+        )
+      }
+    })
+  })
+})
diff --git a/playground/config-initialIsOpen-error/index.html b/playground/config-initialIsOpen-error/index.html
new file mode 100644
index 00000000..5f4067d6
--- /dev/null
+++ b/playground/config-initialIsOpen-error/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>
diff --git a/playground/config-initialIsOpen-error/package.json b/playground/config-initialIsOpen-error/package.json
new file mode 100644
index 00000000..538100e5
--- /dev/null
+++ b/playground/config-initialIsOpen-error/package.json
@@ -0,0 +1,26 @@
+{
+  "private": true,
+  "name": "@playground/config-initial-is-open-error",
+  "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:*"
+  }
+}
diff --git a/playground/config-initialIsOpen-error/src/main.ts b/playground/config-initialIsOpen-error/src/main.ts
new file mode 100644
index 00000000..123f166c
--- /dev/null
+++ b/playground/config-initialIsOpen-error/src/main.ts
@@ -0,0 +1,8 @@
+import { text } from './text'
+
+var hello = 'Hello'
+
+const rootDom = document.querySelector('#root')! as HTMLElement
+rootDom.innerHTML = hello + text
+
+export {}
diff --git a/playground/config-initialIsOpen-error/src/text.ts b/playground/config-initialIsOpen-error/src/text.ts
new file mode 100644
index 00000000..e583889a
--- /dev/null
+++ b/playground/config-initialIsOpen-error/src/text.ts
@@ -0,0 +1 @@
+export const text = 'Vanilla JS/TS'
diff --git a/playground/config-initialIsOpen-error/tsconfig.json b/playground/config-initialIsOpen-error/tsconfig.json
new file mode 100644
index 00000000..36f84d9e
--- /dev/null
+++ b/playground/config-initialIsOpen-error/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"]
+}
diff --git a/playground/config-initialIsOpen-error/vite.config.js b/playground/config-initialIsOpen-error/vite.config.js
new file mode 100644
index 00000000..ddab80f7
--- /dev/null
+++ b/playground/config-initialIsOpen-error/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',
+      },
+    }),
+  ],
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 27457307..7fe6d855 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -116,7 +116,7 @@ importers:
       vue: ^3.3.4
       vue-tsc: ^1.6.1
     devDependencies:
-      '@unplugin-vue-ce/sub-style': 1.0.0-beta.6
+      '@unplugin-vue-ce/sub-style': 1.0.0-beta.6_vue@3.3.4
       '@vitejs/plugin-vue': 2.3.4_vite@4.3.1+vue@3.3.4
       vite: 4.3.1
       vue: 3.3.4
@@ -270,6 +270,81 @@ importers:
       vite: 4.3.1
       vite-plugin-checker: link:../../packages/vite-plugin-checker
 
+  playground/config-initialIsOpen-error:
+    specifiers:
+      '@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
+      react: ^17.0.0
+      react-dom: ^17.0.0
+      typescript: ^5.0.4
+      vite: ^4.3.0
+      vite-plugin-checker: workspace:*
+    dependencies:
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+    devDependencies:
+      '@types/react': 17.0.48
+      '@types/react-dom': 17.0.17
+      '@typescript-eslint/eslint-plugin': 5.59.0_7pjfh4zgwfx6xvatksnbmxnxiq
+      '@typescript-eslint/parser': 5.59.0_cy7zp3kcj75bmapcvvm43smuci
+      eslint: 8.22.0
+      typescript: 5.0.4
+      vite: 4.3.1
+      vite-plugin-checker: link:../../packages/vite-plugin-checker
+
+  playground/config-initialIsOpen-error-clean:
+    specifiers:
+      '@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
+      react: ^17.0.0
+      react-dom: ^17.0.0
+      typescript: ^5.0.4
+      vite: ^4.3.0
+      vite-plugin-checker: workspace:*
+    dependencies:
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+    devDependencies:
+      '@types/react': 17.0.48
+      '@types/react-dom': 17.0.17
+      '@typescript-eslint/eslint-plugin': 5.59.0_7pjfh4zgwfx6xvatksnbmxnxiq
+      '@typescript-eslint/parser': 5.59.0_cy7zp3kcj75bmapcvvm43smuci
+      eslint: 8.22.0
+      typescript: 5.0.4
+      vite: 4.3.1
+      vite-plugin-checker: link:../../packages/vite-plugin-checker
+
+  playground/config-initialIsOpen-error-warnings:
+    specifiers:
+      '@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
+      react: ^17.0.0
+      react-dom: ^17.0.0
+      typescript: ^5.0.4
+      vite: ^4.3.0
+      vite-plugin-checker: workspace:*
+    dependencies:
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+    devDependencies:
+      '@types/react': 17.0.48
+      '@types/react-dom': 17.0.17
+      '@typescript-eslint/eslint-plugin': 5.59.0_7pjfh4zgwfx6xvatksnbmxnxiq
+      '@typescript-eslint/parser': 5.59.0_cy7zp3kcj75bmapcvvm43smuci
+      eslint: 8.22.0
+      typescript: 5.0.4
+      vite: 4.3.1
+      vite-plugin-checker: link:../../packages/vite-plugin-checker
+
   playground/config-initialIsOpen-false:
     specifiers:
       '@types/react': ^17.0.0
@@ -587,7 +662,7 @@ importers:
       vue: 2.7.8
       vue-class-component: 7.2.6_vue@2.7.8
       vue-property-decorator: 9.1.2_chk7q7rgeabwy64hfqmb36krqe
-      vue-router: 3.5.4
+      vue-router: 3.5.4_vue@2.7.8
       vuex: 3.6.2_vue@2.7.8
     devDependencies:
       '@types/node': 15.14.9
@@ -2277,12 +2352,14 @@ packages:
       eslint-visitor-keys: 3.4.0
     dev: true
 
-  /@unplugin-vue-ce/sub-style/1.0.0-beta.6:
+  /@unplugin-vue-ce/sub-style/1.0.0-beta.6_vue@3.3.4:
     resolution: {integrity: sha512-oRpm9xuFZmk28alsVCjMhV1A81ZlSpWckjezAWjQF/FNeoUUmI9hmEdQLvo+nJAoEDjxxCV+/qsetGWvKb5/mQ==}
+    peerDependencies:
+      vue: ^3.3.2
     dependencies:
       '@babel/parser': 7.22.4
       '@babel/types': 7.22.4
-      '@unplugin-vue-ce/utils': 1.0.0-beta.6
+      '@unplugin-vue-ce/utils': 1.0.0-beta.6_vue@3.3.4
       baiwusanyu-utils: 1.0.13
       estree-walker-ts: 1.0.0
       fast-glob: 3.2.12
@@ -2294,8 +2371,10 @@ packages:
       - ansi-colors
     dev: true
 
-  /@unplugin-vue-ce/utils/1.0.0-beta.6:
+  /@unplugin-vue-ce/utils/1.0.0-beta.6_vue@3.3.4:
     resolution: {integrity: sha512-b6w8UOaVTrJBFrzHKWETlCert3XiAQU5GREtdJqPdgPNy0PXi1StfxT5Z/6LAqHkHhQ7DIrYRJub73NJAlzHgw==}
+    peerDependencies:
+      vue: ^3.3.2
     dependencies:
       baiwusanyu-utils: 1.0.13
       estree-walker-ts: 1.0.0
@@ -2763,7 +2842,7 @@ packages:
       source-map: 0.6.1
       vue-template-es2015-compiler: 1.9.1
     optionalDependencies:
-      prettier: 2.7.1
+      prettier: 2.6.0
     transitivePeerDependencies:
       - arc-templates
       - atpl
@@ -8359,8 +8438,12 @@ packages:
       vue-class-component: 7.2.6_vue@2.7.8
     dev: false
 
-  /vue-router/3.5.4:
+  /vue-router/3.5.4_vue@2.7.8:
     resolution: {integrity: sha512-x+/DLAJZv2mcQ7glH2oV9ze8uPwcI+H+GgTgTmb5I55bCgY3+vXWIsqbYUzbBSZnwFHEJku4eoaH/x98veyymQ==}
+    peerDependencies:
+      vue: ^2
+    dependencies:
+      vue: 2.7.8
     dev: false
 
   /vue-template-compiler/2.7.14: