feat: add wip devtools

posva · Feb 7, 2025 · 8f98773 · 8f98773
1 parent da5b00c
commit 8f98773
Show file tree

Hide file tree

Showing 4 changed files with 326 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -101,6 +101,9 @@
   "peerDependencies": {
     "pinia": "^2.2.6"
   },
+  "dependencies": {
+    "@vue/devtools-api": "^7.7.1"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "^3.12.0",
     "@pinia/colada": "workspace:*",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/devtools/DevtoolsPane.vue b/src/devtools/DevtoolsPane.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const count = ref(0)
+
+onMounted(async () => {
+  console.log('WEWEWE FROM_DEVTOOLS')
+  const id = 'pinia-colada-devtools'
+  window.top?.postMessage({ id, type: 'FROM_DEVTOOLS', payload: 'Hello from devtools' })
+})
+</script>
+
+<template>
+  <div class="h-full w-full flex flex-col items-center justify-center">
+    <pre>{{ $route.fullPath }}</pre>
+    <div>HELLO {{ count }}</div>
+    <button class="btn" @click="count++">increment</button>
+  </div>
+</template>
+
+<style scoped>
+.btn {
+  background-color: #4c51bf;
+  color: #fff;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  border: none;
+  cursor: pointer;
+}
+</style>