feat: use Svelte to write runtime code

fi3ework · Feb 6, 2022 · 6960f3d · 6960f3d
1 parent db5f73c
commit 6960f3d
Show file tree

Hide file tree

Showing 15 changed files with 581 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     }
   },
   "lint-staged": {
-    "{packages}/**/*.{js,ts}": [
+    "{packages}/vite-plugin-checker/*.{js,ts}": [
       "eslint --fix",
       "prettier --write",
       "git add"

diff --git a/packages/runtime/.gitignore b/packages/runtime/.gitignore
@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
@@ -0,0 +1,18 @@
+{
+  "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,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "node ./scripts/build.js",
+    "dev": "node ./scripts/build.js --watch",
+    "preview": "sirv public --no-clear"
+  },
+  "devDependencies": {
+    "esbuild": "^0.14.13",
+    "esbuild-svelte": "^0.6.2",
+    "has-flag": "^5.0.1",
+    "sirv-cli": "^2.0.0"
+  }
+}
diff --git a/packages/runtime/public/favicon.png b/packages/runtime/public/favicon.png
diff --git a/packages/runtime/public/global.css b/packages/runtime/public/global.css
@@ -0,0 +1,63 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	-webkit-padding: 0.4em 0;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}
diff --git a/packages/runtime/public/index.html b/packages/runtime/public/index.html
@@ -0,0 +1,18 @@
+<!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>
+</html>
diff --git a/packages/runtime/scripts/build.js b/packages/runtime/scripts/build.js
@@ -0,0 +1,17 @@
+import esbuild from 'esbuild'
+import sveltePlugin from 'esbuild-svelte'
+import hasFlag from 'has-flag'
+
+const isWatch = hasFlag('watch')
+
+esbuild
+  .build({
+    entryPoints: ['./src/main.js'],
+    bundle: true,
+    format: 'esm',
+    watch: isWatch,
+    outfile: '../vite-plugin-checker/lib/@runtime/main.js',
+    plugins: [sveltePlugin({ compilerOptions: { css: true } })],
+    logLevel: 'info',
+  })
+  .catch(() => process.exit(1))
diff --git a/packages/runtime/src/App.svelte b/packages/runtime/src/App.svelte
@@ -0,0 +1,58 @@
+<script>
+  import List from './components/List.svelte'
+  export let checkerResults
+</script>
+
+<main class="window" on:click|stopPropagation>
+  <List {checkerResults} />
+</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;
+    --purple: #cfa4ff;
+    --cyan: #2dd9da;
+    --dim: #c9c9c9;
+  }
+
+  .window {
+    font-family: var(--monospace);
+    line-height: 1.5;
+    width: 800px;
+    color: #d8d8d8;
+    margin: 40px auto;
+    padding: 32px 32px;
+    position: relative;
+    background: #0d1117;
+    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;
+    direction: ltr;
+    text-align: left;
+    max-height: 80vh;
+  }
+
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+</style>
diff --git a/packages/runtime/src/components/Checker.svelte b/packages/runtime/src/components/Checker.svelte
@@ -0,0 +1,20 @@
+<script>
+  import Diagnostic from './Diagnostic.svelte'
+  export let diagnostics
+</script>
+
+<ul>
+  {#each diagnostics as diagnostic}
+    <Diagnostic {diagnostic} />
+  {/each}
+</ul>
+
+<style>
+  ul {
+    list-style: none;
+  }
+  ul {
+    padding-inline: 0;
+    margin-block: 0;
+  }
+</style>
diff --git a/packages/runtime/src/components/Diagnostic.svelte b/packages/runtime/src/components/Diagnostic.svelte
@@ -0,0 +1,119 @@
+<script>
+  export let diagnostic
+
+  const fileRE = /(?:[a-zA-Z]:\\|\/).*?:\d+:\d+/g
+  const codeframeRE = /^(?:>?\s+\d+\s+\|.*|\s+\|\s*\^.*)\r?\n/gm
+  codeframeRE.lastIndex = 0
+  $: hasFrame = diagnostic.frame && codeframeRE.test(diagnostic.frame)
+  $: 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(`?`)
+
+  $: errorSource = diagnostic.loc
+    ? { ...calcLink(`${file}:${diagnostic.loc.line}:${diagnostic.loc.column}`)[0], linkFiles: true }
+    : { text: file, linkFiles: false }
+
+  function calcLink(text) {
+    let curIndex = 0
+    let match
+    const links = []
+    while ((match = fileRE.exec(text))) {
+      const { 0: file, index } = match
+      if (index !== null) {
+        const frag = text.slice(curIndex, index)
+        const link = {}
+        link.textContent = file
+        link.onclick = () => {
+          fetch('/__open-in-editor?file=' + encodeURIComponent(file))
+        }
+        curIndex += frag.length + file.length
+        links.push(link)
+      }
+    }
+
+    return links
+  }
+</script>
+
+<li class="message-item">
+  <pre class="message">
+    <span class="plugin">{`[${diagnostic.plugin}] `}</span>
+    <span class="message-body">{message}</span>
+  </pre>
+  <pre class="file">
+    {#if errorSource.linkFiles}
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <a
+        class="file-link"
+        on:click={errorSource.onclick}>{errorSource.textContent}</a
+      >
+    {:else}
+      {errorSource.text}
+    {/if}
+  </pre>
+  {#if hasFrame}
+    <pre class="frame">{diagnostic.frame.trim()}</pre>
+  {/if}
+  <pre class="stack">{diagnostic.stack}</pre>
+</li>
+
+<style>
+  li {
+    list-style: none;
+  }
+
+  .message-item {
+    border-top: 1px dotted #666;
+    padding: 12px 0 0 0;
+  }
+
+  .message {
+    line-height: 1.3;
+    font-weight: 600;
+    white-space: initial;
+  }
+
+  pre {
+    font-family: var(--monospace);
+    font-size: 14px;
+    margin-top: 0;
+    margin-bottom: 0;
+    overflow-x: scroll;
+    scrollbar-width: none;
+  }
+
+  pre::-webkit-scrollbar {
+    display: none;
+  }
+
+  .message-body {
+    color: var(--red);
+  }
+
+  .plugin {
+    color: var(--purple);
+  }
+
+  .file {
+    color: var(--cyan);
+    margin-bottom: 0;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  .frame {
+    margin: 1em 0;
+    color: var(--yellow);
+  }
+
+  .stack {
+    font-size: 13px;
+    color: var(--dim);
+  }
+
+  .file-link {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+</style>
diff --git a/packages/runtime/src/components/List.svelte b/packages/runtime/src/components/List.svelte
@@ -0,0 +1,24 @@
+<script>
+  import Checker from './Checker.svelte'
+  export let checkerResults
+</script>
+
+<ul>
+  {#each checkerResults as checkerResult}
+    <li>
+      {(console.log(checkerResult), '')}
+      <Checker diagnostics={checkerResult.errors} />
+    </li>
+  {/each}
+</ul>
+
+<style>
+  ul,
+  li {
+    list-style: none;
+  }
+  ul {
+    padding-inline: 0;
+    margin-block: 0;
+  }
+</style>