feat: rewrite overlay

fi3ework · Feb 6, 2022 · bdbe7f7 · bdbe7f7
1 parent 256ba5a
commit bdbe7f7
Show file tree

Hide file tree

Showing 12 changed files with 307 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "build": "pnpm -r --filter ./packages run build",
     "build:test": "pnpm -r --filter ./packages run build:test",
     "format": "prettier --check \"packages/*/src/**/*.{ts,js,svelte}\"",
-    "lint": "eslint --ext .js,.ts,.svelte packages/*/src/**",
+    "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",

diff --git a/packages/runtime/README.md b/packages/runtime/README.md
@@ -0,0 +1,21 @@
+# @vite-plugin-checker/runtime
+
+Runtime code for vite-plugin-checker, this package will be directly bundled into the vite-plugin-checker package in building process and hasn't be released to NPM for now.
+
+## Development
+
+### local
+
+Watch and compile code with mock diagnostics and html without vite-plugin-checker.
+
+```sh
+pnpm dev-local
+```
+
+### with vite-plugin-checker
+
+Watch and compile bundled JS to `../vite-plugin-checker/lib/@runtime/main.js`. Run `pnpm dev` in monorepo root will invoke below scripts.
+
+```sh
+pnpm dev
+```
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
@@ -1,13 +1,15 @@
 {
   "name": "@vite-plugin-checker/runtime",
-  "description": "This is the runtime UI code for vite-plugin-checker, it will be directly bundled into the vite-plugin-checker package in building process and wont' be released to NPM for now.",
   "private": true,
+  "description": "Runtime code for vite-plugin-checker",
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "build": "node ./scripts/build.js",
+    "build-local": "node ./scripts/build.js --local",
     "build:test": "pnpm run build",
     "dev": "node ./scripts/build.js --watch",
+    "dev-local": "node ./scripts/build.js --watch --local",
     "preview": "sirv public --no-clear"
   },
   "devDependencies": {

diff --git a/packages/runtime/public/index.html b/packages/runtime/public/index.html
@@ -1,18 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width,initial-scale=1'>
-
-	<title>Svelte app</title>
-
-	<link rel='icon' type='image/png' href='/favicon.png'>
-	<link rel='stylesheet' href='/global.css'>
-	<link rel='stylesheet' href='/build/bundle.css'>
-
-	<script defer src='/build/bundle.js'></script>
-</head>
-
-<body>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Svelte app</title>
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="stylesheet" href="/global.css" />
+    <script defer type="module" src="/build/bundle.js"></script>
+  </head>
+
+  <body></body>
 </html>
diff --git a/packages/runtime/scripts/build.js b/packages/runtime/scripts/build.js
@@ -3,14 +3,25 @@ import sveltePlugin from 'esbuild-svelte'
 import hasFlag from 'has-flag'
 
 const isWatch = hasFlag('watch')
+const isLocal = hasFlag('local')
+
+const config = isLocal
+  ? {
+      entryPoints: ['./src/main-local.js'],
+      outfile: './public/build/bundle.js',
+    }
+  : {
+      entryPoints: ['./src/main.js'],
+      outfile: '../vite-plugin-checker/lib/@runtime/main.js',
+    }
 
 esbuild
   .build({
-    entryPoints: ['./src/main.js'],
+    entryPoints: config.entryPoints,
     bundle: true,
     format: 'esm',
     watch: isWatch,
-    outfile: '../vite-plugin-checker/lib/@runtime/main.js',
+    outfile: config.outfile,
     plugins: [sveltePlugin({ compilerOptions: { css: true } })],
     logLevel: 'info',
   })

diff --git a/packages/runtime/src/App.svelte b/packages/runtime/src/App.svelte
@@ -1,27 +1,23 @@
 <script>
   import List from './components/List.svelte'
+  import Badge from './components/Badge.svelte'
+  let collapsed = false
+  const toggle = () => {
+    collapsed = !collapsed
+  }
+
   export let checkerResults
 </script>
 
-<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>
+<Badge {checkerResults} {collapsed} onClick={toggle} />
+<main class={`window ${collapsed ? 'window-collapsed' : ''}`} on:click|stopPropagation>
+  <div class="list-scroll">
+    <List {checkerResults} ulStyle="margin-bottom: 48px;" />
   </div>
 </main>
 
 <style>
   :global(:host) {
-    position: fixed;
-    z-index: 9999;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow-y: scroll;
-    margin: 0;
-    background: rgba(0, 0, 0, 0.66);
     --monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
     --red: #ff5555;
     --yellow: #e2aa53;
@@ -32,7 +28,25 @@
   }
 
   .window {
-    font-family: var(--monospace);
+    font-family: sans-serif;
+    background-color: rgb(11, 21, 33);
+    color: white;
+    position: fixed;
+    bottom: 0px;
+    right: 0px;
+    z-index: 99998;
+    width: 100%;
+    height: 500px;
+    max-height: 90%;
+    box-shadow: rgb(0 0 0 / 30%) 0px 0px 20px;
+    border-top: 1px solid rgb(63, 78, 96);
+    transform-origin: center top;
+    visibility: visible;
+    transition: all 0.2s ease 0s;
+    opacity: 1;
+    pointer-events: all;
+    transform: translateY(0px) scale(1);
+    /* font-family: var(--monospace);
     line-height: 1.5;
     width: 800px;
     color: #d8d8d8;
@@ -45,24 +59,31 @@
     overflow: scroll;
     direction: ltr;
     text-align: left;
-    max-height: 80vh;
+    max-height: 80vh; */
   }
 
-  main {
-    text-align: center;
-    padding: 1em;
-    max-width: 240px;
-    margin: 0 auto;
+  .window-collapsed {
+    transform: translateY(0px) scale(1);
+    visibility: hidden;
+    transition: all 0.2s ease 0s;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(15px) scale(1.02);
   }
 
-  .tip {
-    font-size: 12px;
-    color: #999;
-    padding-top: 13px;
+  .list-scroll {
+    height: 100%;
+    overflow: scroll;
+    flex-grow: 1;
   }
 
-  code {
-    color: var(--yellow);
+  main {
+    /* text-align: center; */
+    padding: 16px;
+    max-width: 240px;
+    width: 100%;
+    box-sizing: border-box;
+    /* margin: 0 auto; */
   }
 
   @media (min-width: 640px) {

diff --git a/packages/runtime/src/components/Badge.svelte b/packages/runtime/src/components/Badge.svelte
@@ -0,0 +1,90 @@
+<script>
+  export let collapsed
+  export let checkerResults
+  export let onClick
+
+  function calcSummary(results) {
+    let errorCount = 0
+    let warningCount = 0
+    results.forEach((result) => {
+      result.diagnostics.forEach((d) => {
+        if (d.level === 1) errorCount++
+        if (d.level === 0) warningCount++
+      })
+    })
+    return { errorCount, warningCount }
+  }
+
+  $: summary = calcSummary(checkerResults)
+
+  $: calcBgColorClass = () => {
+    if (!summary) return ''
+    if (summary.errorCount > 0) return 'summary-error'
+    if (summary.warningCount > 0) return 'summary-warning'
+    return 'summary-success'
+  }
+
+  $: bgColorClass = calcBgColorClass()
+</script>
+
+<button
+  class={`badge-button ${collapsed ? `to-uncollpase ${bgColorClass}` : 'to-collpase'}`}
+  on:click|stopPropagation={onClick}
+>
+  {#if collapsed}
+    {#if summary.errorCount + summary.warningCount > 0}
+      <span class="summary"><span class="emoji">❗️</span>{summary.errorCount}</span>
+      <span class="summary"><span class="emoji">⚠️</span>{summary.warningCount}</span>
+    {/if}
+  {:else}
+    <span>Close</span>
+  {/if}
+</button>
+
+<style>
+  .badge-button {
+    appearance: none;
+    font-size: 0.9em;
+    font-weight: bold;
+    border: 0px;
+    border-radius: 0.3em;
+    padding: 0.5em;
+    cursor: pointer;
+    position: fixed;
+    z-index: 99999;
+    margin: 0.5em;
+    bottom: 0px;
+    left: 0px;
+  }
+
+  .to-collpase {
+    color: white;
+    background: rgb(63, 78, 96);
+  }
+
+  .to-uncollpase {
+    color: white;
+  }
+
+  .emoji {
+    margin-right: 0.5ch;
+    font-family: 'apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol';
+  }
+
+  .summary {
+    font-family: var(--monospace);
+    margin-right: 1ch;
+  }
+
+  .summary:last-of-type {
+    margin-right: 0;
+  }
+
+  .summary-error {
+    background: var(--red);
+  }
+
+  .summary-warning {
+    background: var(--yellow);
+  }
+</style>
diff --git a/packages/runtime/src/components/List.svelte b/packages/runtime/src/components/List.svelte
@@ -1,9 +1,10 @@
 <script>
   import Checker from './Checker.svelte'
   export let checkerResults
+  export let ulStyle
 </script>
 
-<ul>
+<ul style={ulStyle}>
   {#each checkerResults as checkerResult, index}
     <li>
       {(console.log(checkerResult), '')}