feat(runtime): refactor runtime with vue3 (#241)

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": ["@vite-plugin-checker/runtime", "@playground/*"]
 }

.changeset/thin-eagles-begin.md

@@ -0,0 +1,5 @@
+---
+'vite-plugin-checker': patch
+---
+
+Migrate runtime UI from svelte to vue, user should not aware this.

.eslintrc.js

@@ -11,13 +11,6 @@ module.exports = {
     __dirname: 'off',
     __filename: 'off',
   },
-  plugins: ['svelte3'],
-  overrides: [
-    {
-      files: ['*.svelte'],
-      processor: 'svelte3/svelte3',
-    },
-  ],
   rules: {
     'max-nested-callbacks': 'off',
     '@typescript-eslint/consistent-type-assertions': 'off',

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node_version: [14, 16, 18]
+        node_version: [16, 18, 20]
         include:
           # Active LTS + other OS
           - os: macos-latest

.prettierrc.js

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

docs/configuration/config.md

@@ -29,15 +29,15 @@ Shared configuration to control the checker behaviors of the plugin.
         position?: 'tl' | 'tr' | 'bl' | 'br'
         /**
          * Use this to add extra style string to the badge button, the string format is
-         * [Svelte style](https://svelte.dev/docs#template-syntax-element-directives-style-property)
+         * [HTML element's style property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)
          * For example, if you want to hide the badge,
          * you can pass `display: none;` to the badgeStyle property
          * @default no default value
          */
         badgeStyle?: string
         /**
          * Use this to add extra style string to the diagnostic panel, the string format is
-         * [Svelte style](https://svelte.dev/docs#template-syntax-element-directives-style-property)
+         * [HTML element's style property:](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)
          * For example, if you want to change the opacity of the panel,
          * you can pass `opacity: 0.8;` to the panelStyle property
          * @default no default value

package.json

@@ -6,15 +6,40 @@
     "yarn": "forbidden, use pnpm",
     "npm": "forbidden, use pnpm"
   },
+  "pnpm": {
+    "packageExtensions": {
+      "@unplugin-vue-ce/sub-style": {
+        "dependencies": {
+          "@babel/parser": "^7.21.8",
+          "@babel/types": "^7.21.5"
+        }
+      },
+      "@baiwusanyu/utils-log": {
+        "dependencies": {
+          "ansi-colors": "^4.1.3"
+        }
+      },
+      "@baiwusanyu/utils-task": {
+        "dependencies": {
+          "@baiwusanyu/utils-log": "*"
+        }
+      },
+      "@baiwusanyu/utils-com": {
+        "dependencies": {
+          "hash-sum": "*"
+        }
+      }
+    }
+  },
   "packageManager": "[email protected]",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "pnpm -r --filter=./packages/** --parallel run dev",
     "build": "pnpm -r --filter=./packages/** run build",
     "build:test": "pnpm -r --filter=./packages/** run build:test",
     "clean": "pnpm -r --filter=./packages/** run clean",
-    "format": "prettier --check \"packages/*/src/**/*.{ts,js,svelte}\"",
-    "lint": "eslint \"packages/*/src/**/*.{ts,js,svelte}\"",
+    "format": "prettier --check \"packages/*/src/**/*.{ts,js,vue}\"",
+    "lint": "eslint \"packages/*/src/**/*.{ts,js}\"",
     "publint": "pnpm -r --filter='vite-plugin-checker' exec publint",
     "test": "run-s test-unit test-serve test-build",
     "test-unit": "vitest run",
@@ -59,7 +84,6 @@
     "cross-env": "^7.0.3",
     "eslint": "^8.11.0",
     "eslint-config-alloy": "^4.5.1",
-    "eslint-plugin-svelte3": "^3.4.0",
     "execa": "^5.1.1",
     "fast-glob": "^3.2.7",
     "fast-json-stable-stringify": "^2.1.0",
@@ -71,15 +95,13 @@
     "npm-run-all": "^4.1.5",
     "playwright-chromium": "^1.24.0",
     "prettier": "^2.3.2",
-    "prettier-plugin-svelte": "^2.6.0",
     "prompts": "^2.4.1",
     "publint": "^0.1.9",
     "rimraf": "^3.0.2",
     "semver": "^7.5.0",
     "simple-git-hooks": "^2.8.0",
     "sort-deep-object-arrays": "^1.1.2",
     "strip-ansi": "^7.0.0",
-    "svelte": "^3.46.4",
     "tiny-invariant": "^1.1.0",
     "typescript": "^5.0.4",
     "vite": "^4.3.0",

packages/runtime/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

packages/runtime/package.json

@@ -4,18 +4,20 @@
   "description": "Runtime code for vite-plugin-checker",
   "version": "0.0.0",
   "type": "module",
+  "main": "dist/main.js",
+  "sideEffects": [
+    "*.ts"
+  ],
   "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"
+    "dev": "vite build --watch",
+    "build": "vue-tsc --noEmit && vite build",
+    "build:test": "pnpm run build"
   },
   "devDependencies": {
-    "esbuild": "^0.14.27",
-    "esbuild-svelte": "^0.6.3",
-    "has-flag": "^5.0.1",
-    "sirv-cli": "^2.0.0"
+    "@unplugin-vue-ce/sub-style": "1.0.0-beta.6",
+    "@vitejs/plugin-vue": "^2.0.1",
+    "vite": "^4.3.0",
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.6.1"
   }
 }

packages/runtime/src/App.ce.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import Badge from './components/Badge.ce.vue'
+import List from './components/List.ce.vue'
+import { useChecker } from './useChecker'
+
+const props = withDefaults(
+  defineProps<{
+    checkerResults: any[]
+    overlayConfig: any
+    base: string
+  }>(),
+  {
+    overlayConfig: {},
+  }
+)
+
+const { checkerResults } = useChecker()
+
+const shouldRender = computed(() => {
+  return checkerResults.value.some((p) => p.diagnostics.length > 0)
+})
+
+const collapsed = ref<boolean>(!(props?.overlayConfig?.initialIsOpen ?? true))
+const toggle = () => {
+  collapsed.value = !collapsed.value
+}
+</script>
+
+<template>
+  <template v-if="shouldRender">
+    <Badge
+      :collapsed="collapsed"
+      :checker-results="checkerResults"
+      :position="overlayConfig.position"
+      :badgeStyle="overlayConfig.badgeStyle"
+      @click="toggle"
+    >
+    </Badge>
+    <main
+      :class="['window', `${collapsed ? 'window-collapsed' : ''}`]"
+      style="{overlayConfig?.panelStyle}"
+    >
+      <div class="list-scroll">
+        <List :checkerResults="checkerResults" :base="base" ulStyle="margin-bottom: 36px;" />
+      </div>
+    </main>
+  </template>
+</template>
+
+<style>
+:host {
+  --monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  --red: #ff5555;
+  --yellow: #e2aa53;
+  --purple: #cfa4ff;
+  --blue: #a4c1ff;
+  --cyan: #2dd9da;
+  --dim: #c9c9c9;
+}
+
+.window {
+  font-family: sans-serif;
+  background-color: rgba(11, 21, 33, 0.85);
+  backdrop-filter: blur(1px);
+  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);
+}
+
+.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);
+}
+
+.list-scroll {
+  height: 100%;
+  overflow-y: auto;
+  flex-grow: 1;
+}
+
+main {
+  padding: 16px;
+  width: 100%;
+  box-sizing: border-box;
+}
+</style>