chore: update applet playground

Author: webfansplz

package.json

@@ -56,6 +56,7 @@
     "prepare": "simple-git-hooks",
     "test": "vitest --environment jsdom",
     "play": "turbo dev --filter=./packages/playground/basic",
+    "play:applet": "turbo dev --filter=./packages/playground/applet",
     "play:ui": "turbo dev --filter=./packages/playground/ui",
     "play:multi-app": "turbo dev --filter=./packages/playground/multi-app",
     "play:webpack": "turbo dev --filter=./packages/playground/webpack",

packages/playground/applet/package.json

@@ -6,6 +6,7 @@
     "dev": "vite"
   },
   "dependencies": {
+    "@iconify/json": "^2.2.191",
     "@vueuse/core": "^10.7.2",
     "pinia": "^2.1.7",
     "unplugin-auto-import": "^0.17.5",
@@ -15,6 +16,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/devtools-applet": "workspace:*",
+    "@vue/devtools-core": "workspace:*",
     "@vue/devtools-kit": "workspace:*",
     "sass": "^1.70.0",
     "serve": "^14.2.1",

packages/playground/applet/src/App.vue

@@ -1,14 +1,67 @@
 <script setup lang="ts">
-import { useColorMode } from '@vueuse/core'
+import { useColorMode, useDark } from '@vueuse/core'
 import { Pinia } from '@vue/devtools-applet'
+import '@vue/devtools-applet/style.css'
+import { HandShakeServer, getDevToolsState, initDevToolsSeparateWindow, initDevToolsSeparateWindowBridge, onDevToolsStateUpdated, setupDevToolsBridge } from '@vue/devtools-core'
+import { useCounterStore } from './stores'
+
+const isDark = useDark()
+// user app
+const counterStore = useCounterStore()
+
+// devtools
+const appConnected = ref(false)
+const clientConnected = ref(false)
+const connected = computed(() => appConnected.value && clientConnected.value)
+
+initDevToolsSeparateWindow({
+  onConnected(channel) {
+    const bridge = initDevToolsSeparateWindowBridge(channel)
+    setupDevToolsBridge(bridge)
+    new HandShakeServer(bridge).onnConnect().then(() => {
+      bridge.emit('devtools:client-ready')
+      initVueDevToolsState()
+    })
+    bridge.on('disconnect', () => {
+      channel.close()
+      initDevToolsSeparateWindow()
+    })
+  },
+})
+
+function initVueDevToolsState() {
+  getDevToolsState().then((data) => {
+    if (data)
+      return
+    appConnected.value = data!.connected
+    clientConnected.value = data!.clientConnected
+  })
+
+  onDevToolsStateUpdated((data) => {
+    if (!data)
+      return
+    appConnected.value = data!.connected
+    clientConnected.value = data!.clientConnected
+  })
+}
 
 useColorMode()
 </script>
 
 <template>
   <div class="h-screen w-screen flex flex-col items-center justify-center">
+    <div i-carbon-sun dark:i-carbon-moon translate-y--1px @click="isDark = !isDark" />
+
+    <div select-none>
+      Count:{{ counterStore.count }}
+      <span @click="counterStore.increment">➕</span>
+      <span @click="counterStore.decrement">➖</span>
+    </div>
     <div h-150 w-200 border="1 green solid">
-      <Pinia />
+      <Pinia v-if="connected" />
+      <div v-else class="h-full flex items-center justify-center">
+        Connecting...
+      </div>
     </div>
   </div>
 </template>

packages/playground/applet/src/main.ts

@@ -1,8 +1,12 @@
+import { createPinia } from 'pinia'
 import App from './App.vue'
 
 import './style.css'
 import 'uno.css'
 import '@vue/devtools-applet/style.css'
 
+const pinia = createPinia()
 const app = createApp(App)
+app.use(pinia)
+
 app.mount('#app')

packages/playground/applet/src/stores/index.ts

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const useAppStore = defineStore('app', () => {
+  const count = ref(120)
+  const map = ref(new Map([['a', 1], ['b', 2]]))
+  const set = ref(new Set([1, 2, 3]))
+  function increment() {
+    count.value++
+  }
+  const doubledCount = computed(() => count.value * 2)
+
+  return { count, doubledCount, increment, map, set }
+})
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(10)
+  const name = ref('webfansplz!!!')
+  function increment() {
+    count.value++
+  }
+  function decrement() {
+    count.value--
+  }
+
+  return { count, name, increment, decrement }
+})

packages/playground/applet/uno.config.ts

@@ -1,6 +1,7 @@
 import {
   defineConfig,
   presetAttributify,
+  presetIcons,
   presetTypography,
   presetUno,
   transformerDirectives,
@@ -12,6 +13,12 @@ export default defineConfig({
     presetUno(),
     presetAttributify(),
     presetTypography(),
+    presetIcons({
+      prefix: ['i-', ''],
+      collections: {},
+      cdn: 'https://esm.sh/',
+      scale: 1.2,
+    }),
   ],
   transformers: [
     transformerDirectives(),