chore: improve playground

Author: antfu

package.json

@@ -60,6 +60,7 @@
     "unstorage": "catalog:deps",
     "vite": "catalog:build",
     "vite-plugin-inspect": "catalog:devtools",
+    "vite-plugin-vue-tracer": "catalog:playground",
     "vitest": "catalog:testing",
     "vue": "catalog:frontend",
     "vue-tsc": "catalog:devtools"

packages/core/playground/vite.config.ts

@@ -1,6 +1,8 @@
 import process from 'node:process'
 import Vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
 import { defineConfig } from 'vite'
+import Tracer from 'vite-plugin-vue-tracer'
 // eslint-disable-next-line ts/ban-ts-comment
 // @ts-ignore ignore the type error
 import { DevToolsViteUI } from '../../vite/src/node'
@@ -29,6 +31,8 @@ export default defineConfig({
       builtinDevTools: false,
     }),
     DevToolsViteUI(),
+    UnoCSS(),
+    Tracer(),
     {
       name: 'local',
       devtools: {

packages/core/src/client/webcomponents/components/ViewIframe.vue

@@ -3,7 +3,7 @@ import type { DevToolsViewIframe } from '@vitejs/devtools-kit'
 import type { CSSProperties } from 'vue'
 import type { DevToolsDockState } from './DockProps'
 import type { IframeManager } from './IframeManager'
-import { nextTick, onMounted, onUnmounted, useTemplateRef, watch, watchEffect } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
 
 const props = defineProps<{
   state?: DevToolsDockState
@@ -14,6 +14,7 @@ const props = defineProps<{
   iframeStyle?: CSSProperties
 }>()
 
+const isLoading = ref(true)
 const viewFrame = useTemplateRef<HTMLDivElement>('viewFrame')
 
 onMounted(() => {
@@ -26,6 +27,7 @@ onMounted(() => {
     holder.iframe.src = props.entry.url
 
   holder.mount(viewFrame.value!)
+  isLoading.value = false
   nextTick(() => {
     holder.update()
   })
@@ -57,7 +59,7 @@ onUnmounted(() => {
     ref="viewFrame"
     class="vite-devtools-view-iframe w-full h-full flex items-center justify-center"
   >
-    <div class="op50 z--1">
+    <div v-if="isLoading" class="op50 z--1">
       Loading iframe...
     </div>
   </div>

patches/@unocss__inspector.patch

@@ -0,0 +1,57 @@
+diff --git a/dist/index.d.cts b/dist/index.d.cts
+new file mode 100644
+index 0000000000000000000000000000000000000000..dfda43ac9d13b9797ecf6ba74f37372095adbd47
+--- /dev/null
++++ b/dist/index.d.cts
+@@ -0,0 +1,2 @@
++export * from "/Users/antfu/i/unocss/packages-integrations/inspector/src/index.js";
++export { default } from "/Users/antfu/i/unocss/packages-integrations/inspector/src/index.js";
+\ No newline at end of file
+diff --git a/dist/index.mjs b/dist/index.mjs
+index 0fb5d8feb0c3924850e0d1b01489aaf7099ec1e9..7dd9d9e00daf2ffc0e415f100d734fccfd28b622 100644
+--- a/dist/index.mjs
++++ b/dist/index.mjs
+@@ -820,9 +820,9 @@ async function analyzer(modules, ctx) {
+ 
+ const _dirname = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
+ function UnocssInspector(ctx) {
++  const baseUrl = "__unocss";
+   async function configureServer(server) {
+     await ctx.ready;
+-    const baseUrl = "__unocss";
+     server.middlewares.use(`/${baseUrl}`, sirv(resolve(_dirname, "../dist/client"), {
+       single: true,
+       dev: true
+@@ -915,7 +915,18 @@ function UnocssInspector(ctx) {
+   return {
+     name: "unocss:inspector",
+     apply: "serve",
+-    configureServer
++    configureServer,
++    devtools: {
++      setup(ctx2) {
++        ctx2.docks.register({
++          id: "unocss",
++          title: "UnoCSS",
++          icon: "https://unocss.dev/logo.svg",
++          type: "iframe",
++          url: `/${baseUrl}`
++        });
++      }
++    }
+   };
+ }
+ function getCircularReplacer() {
+diff --git a/package.json b/package.json
+index 7fcf740ef248ff716df3588302aa49e68839d9e3..28a9a284073fc89a17e5597813483424b4a2d8d0 100644
+--- a/package.json
++++ b/package.json
+@@ -48,5 +48,8 @@
+     "dev": "nr stub && vite",
+     "update-post": "vite build",
+     "test:attw": "attw --pack --config-path ../../.attw-esm-only.json"
++  },
++  "devDependencies": {
++    "@vitejs/devtools-kit": "^0.0.0-alpha.10"
+   }
+ }

pnpm-lock.yaml

@@ -2,10 +2,8 @@ packages:
   - packages/*
   - docs
 
-shamefullyHoist: true
-strictPeerDependencies: false
-shellEmulator: true
-ignoreWorkspaceRootCheck: true
+patchedDependencies:
+  '@unocss/inspector': patches/@unocss__inspector.patch
 
 catalogs:
   build:
@@ -17,7 +15,6 @@ catalogs:
     esbuild: ^0.25.11
     magic-string: ^0.30.21
     nitropack: ^2.12.9
-    # https://github.com/nuxt/nuxt/issues/33418
     nuxt: 4.1.2
     nuxt-mcp: ^0.2.5
     rolldown: ^1.0.0-beta.45
@@ -104,6 +101,8 @@ catalogs:
   inlined:
     '@antfu/utils': ^9.3.0
     stream-json: ^1.9.1
+  playground:
+    vite-plugin-vue-tracer: ^1.1.0
   testing:
     vitest: ^4.0.5
   types:
@@ -116,9 +115,18 @@ catalogs:
     '@types/split2': ^4.2.3
     '@types/stream-json': ^1.7.8
     '@types/ws': ^8.18.1
+
+ignoreWorkspaceRootCheck: true
+
 onlyBuiltDependencies:
   - '@parcel/watcher'
   - esbuild
   - rolldown
   - simple-git-hooks
   - unrs-resolver
+
+shamefullyHoist: true
+
+shellEmulator: true
+
+strictPeerDependencies: false