feat(devtools): add postList & open in editor

YunYouJun · Feb 12, 2024 · 719049b · 719049b
1 parent d2e4ca0
commit 719049b
Show file tree

Hide file tree

Showing 35 changed files with 370 additions and 254 deletions.
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "demo:yun": "pnpm -C demo/yun run dev",
     "dev:lib": "pnpm -C packages/valaxy run dev",
     "dev": "pnpm -r --filter=./packages/** --parallel run dev",
+    "devtools": "pnpm -C packages/devtools run dev",
     "docs": "pnpm -C docs run dev",
     "docs:dev": "pnpm -C docs run dev",
     "docs:build": "pnpm -C docs run build",

diff --git a/packages/devtools/README.md b/packages/devtools/README.md
@@ -0,0 +1,13 @@
+# @valaxyjs/devtools
+
+## Dev
+
+```bash
+# in packages/devtools
+pnpm dev
+```
+
+```bash
+# in root
+pnpm devtools
+```
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
@@ -22,6 +22,7 @@
     "build:node": "unbuild",
     "dev": "npm run stub && npm run dev:client",
     "dev:client": "vite build src/client --watch",
+    "dev:src": "vite dev src/client",
     "stub": "unbuild --stub",
     "prepublishOnly": "npm run build",
     "release": "bumpp && npm publish"
@@ -32,8 +33,12 @@
     "sirv": "^2.0.4"
   },
   "devDependencies": {
+    "@iconify-json/ri": "^1.1.19",
+    "@types/splitpanes": "^2.2.6",
+    "splitpanes": "^3.1.5",
     "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
+    "unplugin-vue-router": "^0.7.0",
     "vite": "^5.1.1"
   }
 }
diff --git a/packages/devtools/src/client/App.vue b/packages/devtools/src/client/App.vue
@@ -1,20 +1,3 @@
-<script setup lang="ts">
-import { onMounted } from 'vue'
-import { isStaticMode } from './utils'
-
-onMounted(() => {
-  if (isStaticMode)
-    document.title = 'Vite Inspect (Production)'
-})
-</script>
-
 <template>
-  <main grid="~ rows-[min-content_1fr]" size="h-screen w-screen" text="gray-700 dark:gray-200">
-    <Suspense>
-      <RouterView />
-      <template #fallback>
-        Loading...
-      </template>
-    </Suspense>
-  </main>
+  <RouterView />
 </template>
diff --git a/packages/devtools/src/client/components/PageFrontmatter.vue b/packages/devtools/src/client/components/PageFrontmatter.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+defineProps<{
+  frontmatter?: object
+}>()
+</script>
+
+<template>
+  <div>
+    <ul v-if="frontmatter">
+      <li v-for="(value, key) in frontmatter" :key="key">
+        <strong>{{ key }}</strong>: {{ value }}
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/packages/devtools/src/client/components/VDPostList.vue b/packages/devtools/src/client/components/VDPostList.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import type { Router } from 'vue-router/auto'
+import { getGlobalValaxyProperty, getWindowProperty, openInEditor } from '../utils'
+import { frontmatter } from '../composables/app'
+
+const activePath = ref('')
+
+const __VUE_DEVTOOLS_ROUTER__ = getWindowProperty('__VUE_DEVTOOLS_ROUTER__') as Router
+__VUE_DEVTOOLS_ROUTER__.beforeEach((to, _from, next) => {
+  activePath.value = to.path
+  frontmatter.value = getWindowProperty('$frontmatter')
+  next()
+})
+
+const postList = ref()
+
+onMounted(() => {
+  postList.value = getGlobalValaxyProperty('postList').value
+})
+
+function onClickPost(post: any) {
+  __VUE_DEVTOOLS_ROUTER__.push(post.path)
+}
+
+function launchEditor() {
+  openInEditor({
+    file: getWindowProperty('$pageData').path,
+  })
+}
+</script>
+
+<template>
+  <ul class="h-full" overflow="auto" pl="12" pr="4" py="4">
+    {{ activePath }}
+    <li v-for="post in postList" :key="post.path" class="list-decimal">
+      <div flex>
+        <span
+          class="inline-flex flex-grow cursor-pointer underline hover:text-blue-500"
+          :class="{ 'text-blue-500': activePath === post.path }"
+          @click="onClickPost(post)"
+        >
+          {{ post.title }}
+        </span>
+        <button class="ml-2 text-xs" @click="launchEditor()">
+          <div i-vscode-icons:file-type-vscode />
+        </button>
+      </div>
+    </li>
+  </ul>
+</template>
diff --git a/packages/devtools/src/client/composables/app.ts b/packages/devtools/src/client/composables/app.ts
@@ -0,0 +1,3 @@
+import { ref } from 'vue'
+
+export const frontmatter = ref<object>({})
diff --git a/packages/devtools/src/client/index.html b/packages/devtools/src/client/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body data-vite-inspect-mode="DEV">
-  <div id="app"></div>
+  <div id="app" class="h-full"></div>
   <script>
     (function () {
       const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

diff --git a/packages/devtools/src/client/main.ts b/packages/devtools/src/client/main.ts
@@ -1,16 +1,19 @@
 // register vue composition api globally
 import { createApp } from 'vue'
-import { createRouter, createWebHashHistory } from 'vue-router'
-import { routes } from 'vue-router/auto/routes'
+import { createRouter, createWebHashHistory } from 'vue-router/auto'
 import App from './App.vue'
 
 import '@unocss/reset/tailwind.css'
 import 'uno.css'
 
+import './styles/index.css'
+import 'splitpanes/dist/splitpanes.css'
+
 const app = createApp(App)
+
 const router = createRouter({
   history: createWebHashHistory(),
-  routes,
 })
+
 app.use(router)
 app.mount('#app')
diff --git a/packages/devtools/src/client/pages/about.vue b/packages/devtools/src/client/pages/about.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    About
+  </div>
+</template>
diff --git a/packages/devtools/src/client/pages/categories.vue b/packages/devtools/src/client/pages/categories.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Categories
+  </div>
+</template>
diff --git a/packages/devtools/src/client/pages/index.vue b/packages/devtools/src/client/pages/index.vue
@@ -1,5 +1,38 @@
+<script lang="ts" setup>
+import { Pane, Splitpanes } from 'splitpanes'
+import { onMounted } from 'vue'
+import { getWindowProperty, isStaticMode } from '../utils'
+
+import type { BlogWindow } from '../types'
+import { frontmatter } from '../composables/app'
+
+onMounted(() => {
+  if (isStaticMode)
+    document.title = 'Valaxy DevTools (Production)'
+
+  const $frontmatter = getWindowProperty('$frontmatter') as BlogWindow['$frontmatter']
+  if ($frontmatter)
+    frontmatter.value = $frontmatter
+})
+</script>
+
 <template>
-  <div>
-    Index
-  </div>
+  <main class="h-full" flex="~ col" text="gray-700 dark:gray-200">
+    <div class="w-full border-b shadow flex justify-end">
+      <a href="https://valaxy.site" target="_blank" class="bg-gray-100 inline-flex justify-center items-center w-8 h-8">
+        <div i-ri-book-line />
+      </a>
+    </div>
+
+    <div style="height: calc(100% - 32px)" overflow="auto">
+      <Splitpanes class="h-full">
+        <Pane>
+          <VDPostList />
+        </Pane>
+        <Pane>
+          <PageFrontmatter :frontmatter="frontmatter" />
+        </Pane>
+      </Splitpanes>
+    </div>
+  </main>
 </template>
diff --git a/packages/devtools/src/client/pages/tags.vue b/packages/devtools/src/client/pages/tags.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Tags
+  </div>
+</template>
diff --git a/packages/devtools/src/client/styles/index.css b/packages/devtools/src/client/styles/index.css
@@ -0,0 +1,4 @@
+html,
+body {
+  height: 100%;
+}
diff --git a/packages/devtools/src/client/typed-routes.d.ts b/packages/devtools/src/client/typed-routes.d.ts
@@ -39,6 +39,8 @@ import type {
 
 declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
   }
 }
 

diff --git a/packages/devtools/src/client/types/index.ts b/packages/devtools/src/client/types/index.ts
@@ -0,0 +1,3 @@
+export interface BlogWindow {
+  $frontmatter: any
+}
diff --git a/packages/devtools/src/client/utils/api.ts b/packages/devtools/src/client/utils/api.ts
@@ -0,0 +1,18 @@
+// import from @vue/devtools-api not work
+import { getAppWindow } from './get'
+
+const target = getAppWindow()
+
+export interface OpenInEditorOptions {
+  file?: string
+  line?: number
+  column?: number
+}
+
+export function openInEditor(options: OpenInEditorOptions = {}) {
+  const { file, line = 0, column = 0 } = options
+  if (file) {
+    const baseUrl = window.location.origin
+    target?.__VUE_INSPECTOR__.openInEditor(baseUrl, file, line, column)
+  }
+}
diff --git a/packages/devtools/src/client/utils/get.ts b/packages/devtools/src/client/utils/get.ts
@@ -0,0 +1,19 @@
+export function getAppWindow() {
+  return window.parent.parent as unknown as {
+    __VUE_INSPECTOR__: {
+      openInEditor: (baseUrl: string, file: string, line: number, column: number) => void
+    }
+  }
+}
+
+/**
+ * window.parent.parent is the window object of the main app
+ */
+export function getWindowProperty(property: string) {
+  return (window.parent.parent as any)[property]
+}
+
+export function getGlobalValaxyProperty(property: string) {
+  const $valaxy = (window.parent.parent as any).$valaxy
+  return $valaxy[property]
+}
diff --git a/packages/devtools/src/client/utils/index.ts b/packages/devtools/src/client/utils/index.ts
@@ -1 +1,4 @@
+export * from './api'
+export * from './get'
+
 export const isStaticMode = document.body.getAttribute('data-valaxy-devtools-mode') === 'BUILD'
diff --git a/packages/devtools/src/client/vite.config.ts b/packages/devtools/src/client/vite.config.ts
@@ -1,9 +1,10 @@
 import { join, resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
-import Router from 'unplugin-vue-router/vite'
-import Components from 'unplugin-vue-components/vite'
+import VueRouter from 'unplugin-vue-router/vite'
+import VueComponents from 'unplugin-vue-components/vite'
 import Unocss from 'unocss/vite'
+import { unoConfig } from '../../../../uno.config'
 
 export default defineConfig({
   base: './',
@@ -48,22 +49,18 @@ export default defineConfig({
       },
     },
 
-    Vue({
-      script: {
-        defineModel: true,
-      },
-    }),
-
-    Router({
-      routesFolder: ['pages'],
+    VueRouter({
+      routesFolder: join(__dirname, 'pages'),
       dts: join(__dirname, 'typed-routes.d.ts'),
     }),
-
-    Components({
+    Vue({
+      include: [/\.vue$/, /\.md$/],
+    }),
+    VueComponents({
       dirs: ['components'],
       dts: join(__dirname, 'components.d.ts'),
     }),
-    Unocss(),
+    Unocss(unoConfig),
   ],
 
   optimizeDeps: {

diff --git a/packages/devtools/uno.config.ts b/packages/devtools/uno.config.ts
diff --git a/packages/valaxy/client/.gitignore b/packages/valaxy/client/.gitignore
@@ -3,3 +3,5 @@ components.d.ts
 
 # unplugin-vue-router
 typed-router.d.ts
+
+.env.local
diff --git a/packages/valaxy/client/main.ts b/packages/valaxy/client/main.ts
@@ -20,6 +20,7 @@ import '/@valaxyjs/styles'
 import 'uno.css'
 
 import setupMain from './setup/main'
+import { initDevToolsClientLogic } from './utils/dev'
 
 const valaxyConfig = initValaxyConfig()
 
@@ -58,6 +59,9 @@ const routesWithLayout = setupLayouts(import.meta.env.DEV
   : filterDraft(routes),
 )
 
+if (import.meta.env.DEV)
+  initDevToolsClientLogic()
+
 // https://github.com/antfu/vite-ssg
 export const createApp = ViteSSG(
   App,

diff --git a/packages/valaxy/client/modules/devtools.ts b/packages/valaxy/client/modules/devtools.ts
@@ -21,7 +21,7 @@ export async function addValaxyTabAndCommand() {
     // iframe view
     view: {
       type: 'iframe',
-      src: 'https://valaxy.site',
+      src: '/__valaxy_devtools__/',
     },
     // category: 'pinned',
     category: 'app',

diff --git a/packages/valaxy/client/modules/valaxy.ts b/packages/valaxy/client/modules/valaxy.ts
@@ -63,6 +63,9 @@ function handleHMR(router: Router): void {
   if (import.meta.hot) {
     import.meta.hot.on('valaxy:pageData', (payload: PageDataPayload) => {
       if (shouldHotReload(payload)) {
+        // @ts-expect-error $pageData
+        window.$pageData = payload.pageData
+
         // console.log(payload.pageData.headers)
         Object.assign(router.currentRoute.value.meta, payload.pageData)
       }