build: add lint and format for Svelte

.eslintrc.js

@@ -8,6 +8,13 @@ module.exports = {
     page: 'readable',
     globalThis: 'readable',
   },
+  plugins: ['svelte3'],
+  overrides: [
+    {
+      files: ['*.svelte'],
+      processor: 'svelte3/svelte3',
+    },
+  ],
   rules: {
     '@typescript-eslint/consistent-type-assertions': 'off',
     '@typescript-eslint/no-require-imports': 'off',

.prettierrc.js

@@ -4,4 +4,5 @@ module.exports = {
   semi: false,
   singleQuote: true,
   trailingComma: 'es5',
+  plugins: [require('prettier-plugin-svelte')],
 }

package.json

@@ -5,13 +5,13 @@
     "dev": "pnpm -r --filter ./packages --parallel run dev",
     "build": "pnpm -r --filter ./packages run build",
     "build:test": "pnpm -r --filter ./packages run build:test",
-    "format": "prettier --check \"packages/*/src/**/*.{ts,js}\"",
-    "lint": "eslint --ext .js,.ts packages/*/src/**",
+    "format": "prettier --check \"packages/*/src/**/*.{ts,js,svelte}\"",
+    "lint": "eslint --ext .js,.ts,.svelte packages/*/src/**",
     "test": "jest --clearCache && cross-env jest --runInBand",
     "test:coverage": "jest --clearCache && jest --runInBand --coverage=true",
     "changelog": "pnpm -r --filter ./packages run changelog",
     "test:watch": "jest -w",
-    "type-check": "pnpm -r --parallel --filter ./packages exec -- tsc --noEmit -p tsconfig.build.json",
+    "type-check": "pnpm -r --parallel --filter ./packages/vite-plugin-checker exec -- tsc --noEmit -p tsconfig.build.json",
     "ci:publish": "zx scripts/publish.mjs"
   },
   "husky": {
@@ -20,7 +20,7 @@
     }
   },
   "lint-staged": {
-    "{packages}/vite-plugin-checker/*.{js,ts}": [
+    "{packages}/**/*.{js,ts}": [
       "eslint --fix",
       "prettier --write",
       "git add"
@@ -42,6 +42,7 @@
     "cross-env": "^7.0.3",
     "eslint": "^7.20.0",
     "eslint-config-alloy": "^3.10.0",
+    "eslint-plugin-svelte3": "^3.4.0",
     "execa": "^5.1.1",
     "fast-json-stable-stringify": "^2.1.0",
     "fs-extra": "^10.0.0",
@@ -54,10 +55,12 @@
     "nodemon": "^2.0.15",
     "playwright-chromium": "^1.12.3",
     "prettier": "^2.3.2",
+    "prettier-plugin-svelte": "^2.6.0",
     "prompts": "^2.4.1",
     "rimraf": "^3.0.2",
     "semver": "^7.3.5",
     "strip-ansi": "^7.0.0",
+    "svelte": "^3.46.3",
     "ts-jest": "^27.1.3",
     "typescript": "^4.2.2",
     "vite": "^2.7.13",

packages/runtime/package.json

@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "build": "node ./scripts/build.js",
+    "build:test": "pnpm run build",
     "dev": "node ./scripts/build.js --watch",
     "preview": "sirv public --no-clear"
   },

packages/runtime/src/App.svelte

@@ -5,6 +5,10 @@
 
 <main class="window" on:click|stopPropagation>
   <List {checkerResults} />
+  <div class="tip">
+    Click outside or fix the code to dismiss. You can also disable this overlay by setting
+    <code>config.overlay</code> to <code>false</code> in <code>vite.config.js.</code>
+  </div>
 </main>
 
 <style>
@@ -32,9 +36,9 @@
     width: 800px;
     color: #d8d8d8;
     margin: 40px auto;
-    padding: 32px 32px;
+    padding: 16px 32px 32px;
     position: relative;
-    background: #0d1117;
+    background: #24272e;
     border-radius: 6px 6px 8px 8px;
     box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
     overflow: scroll;
@@ -50,6 +54,13 @@
     margin: 0 auto;
   }
 
+  .tip {
+    font-size: 12px;
+    color: #999;
+    border-top: 1px dotted #999;
+    padding-top: 13px;
+  }
+
   @media (min-width: 640px) {
     main {
       max-width: none;

packages/runtime/src/components/Diagnostic.svelte

@@ -8,7 +8,7 @@
   $: message = hasFrame ? diagnostic.message.replace(codeframeRE, '') : diagnostic.message
   // TODO: stackLinks not used
   $: stackLinks = calcLink(diagnostic.stack)
-  $: [file] = (diagnostic.loc?.file || err.id || 'unknown file').split(`?`)
+  $: [file] = (diagnostic.loc?.file || diagnostic.id || 'unknown file').split(`?`)
 
   $: errorSource = diagnostic.loc
     ? { ...calcLink(`${file}:${diagnostic.loc.line}:${diagnostic.loc.column}`)[0], linkFiles: true }
@@ -53,7 +53,11 @@
     {/if}
   </pre>
   {#if hasFrame}
-    <pre class="frame">{diagnostic.frame.trim()}</pre>
+    <pre class="frame">
+      <code>
+         {diagnostic.frame}
+      </code>
+    </pre>
   {/if}
   <pre class="stack">{diagnostic.stack}</pre>
 </li>
@@ -64,13 +68,12 @@
   }
 
   .message-item {
-    border-top: 1px dotted #666;
+    border-bottom: 1px dotted #666;
     padding: 12px 0 0 0;
   }
 
   .message {
-    line-height: 1.3;
-    font-weight: 600;
+    font-size: 1.1em;
     white-space: initial;
   }
 
@@ -83,6 +86,13 @@
     scrollbar-width: none;
   }
 
+  .frame {
+    padding: 6px 8px;
+    background: #16181d;
+    margin-top: 4px;
+    border-radius: 8px;
+  }
+
   pre::-webkit-scrollbar {
     display: none;
   }

packages/runtime/src/components/List.svelte

@@ -4,10 +4,10 @@
 </script>
 
 <ul>
-  {#each checkerResults as checkerResult}
+  {#each checkerResults as checkerResult, index}
     <li>
       {(console.log(checkerResult), '')}
-      <Checker diagnostics={checkerResult.errors} />
+      <Checker diagnostics={checkerResult.errors} {index} />
     </li>
   {/each}
 </ul>

packages/runtime/src/main.js

@@ -38,7 +38,8 @@ function updateErrorOverlay(payloads) {
   const hasErrorToShowInOverlay = checkerResultsStore.some((p) => p.errors.length)
 
   if (!hasErrorToShowInOverlay) {
-    overlayEle.close()
+    overlayEle?.close() // TODO: remove optional chaining
+    overlayEle = null
     app = null
     return
   }

packages/vite-plugin-checker/package.json

@@ -15,8 +15,8 @@
     "watch:runtime": "esbuild src/@runtime/main.ts --outfile=./lib/@runtime/main.js --bundle --format=esm --watch",
     "dev": "run-p watch:node watch:runtime",
     "build:runtime": "esbuild src/@runtime/main.ts --outfile=./lib/@runtime/main.js --bundle --format=esm",
-    "build": "tsc -p tsconfig.build.json && pnpm run build:runtime",
-    "build:test": "tsc -p tsconfig.test.json && pnpm run build:runtime",
+    "build": "tsc -p tsconfig.build.json",
+    "build:test": "tsc -p tsconfig.test.json",
     "prepublishOnly": "rimraf lib && npm run build",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path . --lerna-package vite-plugin-checker",
     "release": "zx ../../scripts/release.mjs"