refactor: beautify highlight style

Author: linzhe141

examples/components/TodoList.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="todo-list">
     <h2>My To-Do List</h2>
+    <div style="margin-bottom: 10px">
+      <a href="https://github.com/linzhe141/vue-change-marker"
+        >how to use vue-change-marker</a
+      >
+    </div>
     <input v-model="newTodo" @keyup.enter="addTodo" placeholder="New task" />
     <div v-for="todo in todos" :key="todo.text">
       <TodoItem :todo="todo" @delete="deleteTodo" />

examples/vite.config.ts

@@ -20,7 +20,7 @@ export default defineConfig({
       },
       {
         find: 'vue-change-marker',
-        replacement: join(__dirname, '../packages/core/index.ts'),
+        replacement: join(__dirname, '../packages/core/src/index.ts'),
       },
     ],
   },

packages/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # vue-change-marker
 
+## 0.0.2
+
+### Patch Changes
+
+- refactor: beautify highlight style
+
 ## 0.0.1
 
 ### Patch Changes

packages/core/index.ts

@@ -1,6 +1,6 @@
 {
   "name": "vue-change-marker",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Highlight updated vue components",
   "publishConfig": {
     "access": "public"

packages/core/package.json

@@ -0,0 +1,105 @@
+import { ComponentInternalInstance } from 'vue'
+
+export let ctx: CanvasRenderingContext2D | null = null
+const updateCounters = new WeakMap<HTMLElement, number>()
+const elements = new Set<HTMLElement>()
+
+export function initCanvas() {
+  const canvas = document.createElement('canvas')
+  canvas.id = 'vue-change-marker-canvas'
+  canvas.style.position = 'fixed'
+  canvas.style.top = '0'
+  canvas.style.left = '0'
+  canvas.style.width = '100vw'
+  canvas.style.height = '100vh'
+  canvas.style.pointerEvents = 'none'
+  canvas.style.zIndex = '2147483646'
+  canvas.setAttribute('aria-hidden', 'true')
+
+  const canvasCtx = canvas.getContext('2d')!
+  ctx = canvasCtx
+
+  document.documentElement.appendChild(canvas)
+
+  const dpi = window.devicePixelRatio || 1
+  canvasCtx.canvas.width = dpi * window.innerWidth
+  canvasCtx.canvas.height = dpi * window.innerHeight
+  canvas.style.width = `${window.innerWidth}px`
+  canvas.style.height = `${window.innerHeight}px`
+  canvasCtx.resetTransform()
+  canvasCtx.scale(dpi, dpi)
+}
+
+export function clearCanvas(ctx: CanvasRenderingContext2D) {
+  ctx.save()
+  ctx.setTransform(1, 0, 0, 1, 0, 0)
+  const width = ctx.canvas.width
+  const height = ctx.canvas.height
+  ctx.clearRect(0, 0, width, height)
+  ctx.restore()
+}
+export function resetCounters() {
+  elements.forEach((el) => {
+    updateCounters.set(el, 0)
+  })
+}
+
+export function highlight(
+  ctx: CanvasRenderingContext2D,
+  el: HTMLElement,
+  updatedInstance: ComponentInternalInstance,
+) {
+  clearCanvas(ctx!)
+
+  let updateCounter = updateCounters.get(el) || 0
+  updateCounter++
+
+  updateCounters.set(el, updateCounter)
+  elements.add(el)
+
+  const opacity = Math.min(0.9, updateCounter * 0.2)
+  const rect = el.getBoundingClientRect()
+
+  const componentName =
+    updatedInstance.type.__name || updatedInstance.type.__file || ''
+
+  ctx.save()
+  ctx.fillStyle = `rgba(255, 0, 0, ${opacity})`
+  ctx.fillRect(rect.x, rect.y - 40, Math.max(250, rect.width), 40)
+  ctx.fillStyle = `white`
+  ctx.font = '14px Arial'
+  ctx.fillText('updated component: ' + componentName, rect.x, rect.y - 25)
+  ctx.fillText('updated times: ' + updateCounter, rect.x, rect.y - 5)
+  ctx.restore()
+
+  ctx.save()
+  ctx.strokeStyle = `rgba(255, 0, 0, ${opacity})`
+  ctx.lineWidth = 1
+  ctx.strokeRect(rect.x, rect.y, rect.width, rect.height)
+  ctx.restore()
+}
+
+export const getRect = (domNode: Element): DOMRect | null => {
+  const style = window.getComputedStyle(domNode)
+  if (
+    style.display === 'none' ||
+    style.visibility === 'hidden' ||
+    style.opacity === '0'
+  ) {
+    return null
+  }
+
+  const rect = domNode.getBoundingClientRect()
+
+  const isVisible =
+    rect.bottom > 0 &&
+    rect.right > 0 &&
+    rect.top < window.innerHeight &&
+    rect.left < window.innerWidth
+
+  if (!isVisible || !rect.width || !rect.height) {
+    return null
+  }
+
+  return rect
+}

packages/core/src/canvas.ts

@@ -0,0 +1,41 @@
+import { type ComponentInternalInstance } from 'vue'
+import { getRect, initCanvas } from './canvas'
+import { queueflush, scheduledDom } from './scheduler'
+
+export function VueChangeMarker() {
+  initCanvas()
+  registerDevtoolsHook()
+}
+
+function emit(event: string, ...payload: any[]) {
+  if (event === 'component:updated') {
+    const updatedInstance = payload[3] as ComponentInternalInstance
+    // 不考虑fragment
+    const type = updatedInstance.vnode.type?.toString()
+    if (type === 'Symbol(v-fgt)') return
+
+    const el = updatedInstance.vnode.el! as HTMLElement | null
+    if (!el) return
+    // 注释节点之类的 transition 这类组件
+    if (!el.getBoundingClientRect) return
+    const rect = getRect(el)
+    if (rect) {
+      scheduledDom.push({ dom: el, updatedInstance })
+    }
+    queueflush()
+  }
+}
+
+function registerDevtoolsHook() {
+  if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__?.id !== 'vue-change-marker') {
+    const oldEmit = window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit
+    window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit = function (...args: any[]) {
+      oldEmit.call(window.__VUE_DEVTOOLS_GLOBAL_HOOK__, ...args)
+      // @ts-expect-error
+      emit(...args)
+    }
+  }
+  if (!window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+    window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = { id: 'vue-change-marker', emit }
+  }
+}

packages/core/src/index.ts

@@ -0,0 +1,37 @@
+import { ComponentInternalInstance } from 'vue'
+import { clearCanvas, ctx, highlight, resetCounters } from './canvas'
+
+let isPending = false
+let timer: number = 0
+export const scheduledDom: {
+  dom: HTMLElement
+  updatedInstance: ComponentInternalInstance
+}[] = []
+
+function flush() {
+  const item = scheduledDom[0]
+  if (item) {
+    const { dom, updatedInstance } = item
+    requestAnimationFrame(() => {
+      highlight(ctx!, dom, updatedInstance)
+      scheduledDom.shift()
+      if (scheduledDom.length) {
+        requestAnimationFrame(flush)
+      } else {
+        isPending = false
+        clearTimeout(timer)
+        timer = window.setTimeout(() => {
+          clearCanvas(ctx!)
+          resetCounters()
+        }, 300)
+      }
+    })
+  }
+}
+
+export const queueflush = async () => {
+  if (!isPending) {
+    isPending = true
+    flush()
+  }
+}

packages/core/src/scheduler.ts

@@ -3,7 +3,7 @@ import { resolve } from 'path'
 export default defineConfig({
   build: {
     lib: {
-      entry: './index.ts',
+      entry: './src/index.ts',
     },
     minify: false,
     rollupOptions: {

packages/core/vite.config.ts

@@ -19,7 +19,7 @@
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
-      "vue-change-marker": ["./packages/core/index.ts"]
+      "vue-change-marker": ["packages/core/src/index.ts"]
     }
   }
 }