feat(devtools): can dev devtools hmr with demo

demo/custom/valaxy-theme-custom/package.json

@@ -2,7 +2,7 @@
   "name": "valaxy-theme-custom",
   "version": "0.0.0",
   "private": true,
-  "packageManager": "pnpm@9.15.0",
+  "packageManager": "pnpm@9.15.1",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",

demo/yun/.env

@@ -0,0 +1 @@
+VITE_VALAXY_DEVTOOLS_DEV=true

demo/yun/valaxy.config.ts

@@ -6,8 +6,6 @@ import { addonBangumi } from 'valaxy-addon-bangumi'
 import { addonComponents } from 'valaxy-addon-components'
 import { addonLightGallery } from 'valaxy-addon-lightgallery'
 import { addonTest } from 'valaxy-addon-test'
-import { addonTwikoo } from 'valaxy-addon-twikoo'
-import { addonWaline } from 'valaxy-addon-waline'
 
 // import { addonMeting } from 'valaxy-addon-meting'
 
@@ -90,14 +88,15 @@ export default defineValaxyConfig<ThemeConfig>({
     addonComponents(),
 
     // comments
-    addonWaline({
-      serverURL: 'https://waline.yunyoujun.cn',
-      pageview: true,
-      comment: true,
-    }),
-    addonTwikoo({
-      envId: 'https://twikoo.vercel.app',
-    }),
+    // addonWaline({
+    //   serverURL: 'https://waline.yunyoujun.cn',
+    //   pageview: true,
+    //   comment: true,
+    // }),
+
+    // addonTwikoo({
+    //   envId: 'https://twikoo.vercel.app',
+    // }),
 
     addonLightGallery(),
     // addonMeting({

docs/package.json

@@ -17,7 +17,7 @@
     "valaxy": "link:../packages/valaxy",
     "valaxy-addon-algolia": "link:../packages/valaxy-addon-algolia",
     "valaxy-addon-components": "workspace:*",
-    "valaxy-addon-git-log": "^0.1.1",
+    "valaxy-addon-git-log": "^0.2.0",
     "valaxy-theme-press": "link:../packages/valaxy-theme-press"
   },
   "devDependencies": {

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.22.4",
   "private": true,
-  "packageManager": "pnpm@9.15.0",
+  "packageManager": "pnpm@9.15.1",
   "description": "📄 Vite & Vue powered static blog generator.",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -95,7 +95,6 @@
     "@types/resolve": "^1.20.6",
     "bumpp": "^9.9.1",
     "cross-env": "^7.0.3",
-    "decap-cms-app": "^3.4.0",
     "eslint": "^9.17.0",
     "https-localhost": "^4.7.1",
     "husky": "^9.1.7",

packages/devtools/README.md

@@ -11,3 +11,12 @@ pnpm dev
 # in root
 pnpm devtools
 ```
+
+```bash
+# 启动 demo，查看 devtools（代理至开发 devtools 的端口以获取热更新）
+pnpm demo:vite
+```
+
+```bash [.env]
+VITE_VALAXY_DEVTOOLS_DEV=true
+```

packages/devtools/build.config.ts

@@ -8,9 +8,12 @@ export default defineBuildConfig({
   declaration: true,
   externals: [
     // in valaxy
+    'valaxy',
     'vite',
     'gray-matter',
     'fs-extra',
+    'fast-glob',
+    'consola',
   ],
   rollup: {
     dts: {

packages/devtools/package.json

@@ -19,7 +19,7 @@
     "build": "rimraf dist && run-s build:*",
     "build:client": "vite build src/client",
     "build:node": "unbuild",
-    "dev": "npm run stub && npm run dev:client",
+    "dev": "npm run dev:client",
     "dev:client": "vite dev src/client --port 5001",
     "watch:client": "vite build src/client --watch",
     "stub": "unbuild --stub",
@@ -30,21 +30,26 @@
     "@rollup/pluginutils": "^5.1.4",
     "axios": "^1.7.9",
     "body-parser": "^2.0.2",
+    "cors": "^2.8.5",
     "http-proxy-middleware": "^3.0.3",
     "js-yaml": "^4.1.0",
     "picocolors": "^1.1.1",
-    "sirv": "^3.0.0"
+    "sirv": "^3.0.0",
+    "vite-dev-rpc": "^0.1.7"
   },
   "devDependencies": {
     "@advjs/gui": "0.0.7-beta.1",
     "@iconify-json/ri": "catalog:",
     "@types/body-parser": "^1.19.5",
     "@types/splitpanes": "^2.2.6",
+    "@types/wicg-file-system-access": "^2023.10.5",
     "gray-matter": "^4.0.3",
     "splitpanes": "^3.1.5",
     "typescript": "catalog:",
     "unbuild": "catalog:",
     "unplugin-vue-router": "^0.10.9",
-    "vite": "catalog:"
+    "vite": "catalog:",
+    "vue-i18n": "^10.0.5",
+    "zod": "^3.24.1"
   }
 }

packages/devtools/src/client/App.vue

@@ -1,20 +1,3 @@
-<script lang="ts" setup>
-import { onMounted } from 'vue'
-import VDHeader from './components/VDHeader.vue'
-import { initDevtoolsClient } from './utils'
-
-onMounted(() => {
-  initDevtoolsClient()
-})
-</script>
-
 <template>
-  <main class="h-full" flex="~ col" text="gray-700 dark:gray-200">
-    <VDHeader />
-    <!-- <RouterLink to="/about">About</RouterLink> -->
-
-    <div style="height: calc(100% - 32px)" overflow="auto">
-      <RouterView />
-    </div>
-  </main>
+  <ValaxyDevtools />
 </template>

packages/devtools/src/client/components/MenuBarBtn.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  tag?: string
+}>()
+</script>
+
+<template>
+  <component
+    :is="tag || 'button'"
+    class="bg-white dark:bg-gray-900 inline-flex justify-center items-center size-8 hover:bg-gray-200 dark:hover:bg-gray-800"
+  >
+    <slot />
+  </component>
+</template>

packages/devtools/src/client/components/ToggleDark.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { toggleDark } from '../composables/dark'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <MenuBarBtn :title="t('button.toggle_dark')" @click="toggleDark()">
+    <div i="carbon-sun dark:carbon-moon" />
+  </MenuBarBtn>
+</template>

packages/devtools/src/client/components/VDHeader.vue

@@ -47,11 +47,13 @@ const routeMenus = [
 
     <div flex="1" />
 
-    <a
+    <SelectRootDir />
+    <ToggleDark />
+    <MenuBarBtn
+      tag="a"
       href="https://valaxy.site" target="_blank"
-      class="bg-white dark:bg-gray-900 inline-flex justify-center items-center w-8 h-8 hover:bg-gray-200"
     >
       <div i-ri-book-line />
-    </a>
+    </MenuBarBtn>
   </div>
 </template>

packages/devtools/src/client/components/VDPostList.vue

@@ -16,10 +16,10 @@ function onClickPost(post: any) {
 
 <template>
   <ul class="h-full" overflow="auto" pl="12" pr="4" py="4">
-    <li v-for="post in postList" :key="post.path" class="list-decimal">
+    <li v-for="post in postList" :key="post.path" class="list-decimal text-sm">
       <div flex>
         <span
-          class="inline-flex flex-grow cursor-pointer hover:text-blue-500 text-xs"
+          class="inline-flex flex-grow cursor-pointer hover:text-blue-500"
           :class="{ 'text-blue-500': activePath === post.path }"
           @click="onClickPost(post)"
         >

packages/devtools/src/client/components/ValaxyDevtools.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { initDevtoolsClient } from '../utils'
+import 'splitpanes/dist/splitpanes.css'
+
+import '../styles/index.scss'
+
+onMounted(() => {
+  initDevtoolsClient()
+})
+</script>
+
+<template>
+  <main class="h-full" flex="~ col" text="gray-700 dark:gray-200">
+    <VDHeader />
+    <!-- <RouterLink to="/about">About</RouterLink> -->
+    <div style="height: calc(100% - 32px)" overflow="auto">
+      <PageIndex />
+    </div>
+  </main>>
+</template>

packages/devtools/src/client/components/ValaxyDevtoolsEntry.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useDraggable } from '@vueuse/core'
+import { ref } from 'vue'
+import { useAppStore } from '../stores/app'
+
+const entryRef = ref()
+const { style } = useDraggable(entryRef, {
+  initialValue: {
+    x: 12,
+    y: window.innerHeight - 60,
+  },
+})
+
+const app = useAppStore()
+</script>
+
+<template>
+  <div ref="entryRef" :style="style" class="fixed z-9999999999 valaxy-devtools-entry">
+    <button
+      class="bg-white size-10 rounded-full shadow hover:shadow-lg transition p-1 z-1 cursor-pointer"
+      @click="app.isDevtoolsVisible = !app.isDevtoolsVisible"
+    >
+      <ValaxySvgLogo />
+    </button>
+  </div>
+
+  <template v-if="app.isDevtoolsVisible">
+    <ValaxyOverlay
+      class="z-9999999998! op-50"
+      :show="app.isDevtoolsVisible"
+      @click="app.isDevtoolsVisible = !app.isDevtoolsVisible"
+    />
+    <div
+      v-if="app.isDevtoolsVisible"
+      class="valaxy-devtools-container fixed left-0 right-0 bottom-1 z-9999999999 shadow-xl rounded overflow-hidden m-auto"
+      bg-white dark:bg-dark-800
+    >
+      <ValaxyDevtools />
+    </div>
+  </template>
+</template>
+
+<style lang="scss" scoped>
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+.valaxy-devtools-entry {
+  position: fixed;
+}
+
+.valaxy-devtools-container {
+  animation-timing-function: map.get($cubic-bezier, "ease-in");
+  width: min(80vw, -48px + 100vw);
+  height: min(60vh, -48px + 100vh);
+  transform: translate(0, 0);
+}
+</style>

packages/devtools/src/client/components/controls/SelectRootDir.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useAppStore } from '../../stores/app'
+
+const app = useAppStore()
+</script>
+
+<template>
+  <MenuBarBtn @click="app.getDir">
+    <div i-vscode-icons:default-root-folder-opened />
+  </MenuBarBtn>
+</template>

packages/devtools/src/client/pages/index.vue → packages/devtools/src/client/components/pages/PageIndex.vue

@@ -1,11 +1,16 @@
 <script lang="ts" setup>
+import consola from 'consola'
 import { Pane, Splitpanes } from 'splitpanes'
 import { onMounted } from 'vue'
-import { isStaticMode } from '../utils'
+import { rpc } from '../../rpc'
+import { isStaticMode } from '../../utils'
 
-onMounted(() => {
+onMounted(async () => {
   if (isStaticMode)
     document.title = 'Valaxy DevTools (Production)'
+
+  const data = await rpc.getPostList()
+  consola.log('data', data)
 })
 </script>
 

packages/devtools/src/client/composables/dark.ts

@@ -0,0 +1,5 @@
+import { useDark, usePreferredDark, useToggle } from '@vueuse/core'
+// these APIs are auto-imported from @vueuse/core
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)
+export const preferredDark = usePreferredDark()

packages/devtools/src/client/locales/en.yml

@@ -0,0 +1,7 @@
+button:
+  about: About
+  back: Back
+  go: GO
+  home: Home
+  toggle_dark: Toggle dark mode
+  toggle_langs: Change languages

packages/devtools/src/client/locales/zh-CN.yml

@@ -0,0 +1,7 @@
+button:
+  about: 关于
+  back: 返回
+  go: 确定
+  home: 首页
+  toggle_dark: 切换深色模式
+  toggle_langs: 切换语言

packages/devtools/src/client/main.ts

@@ -1,14 +1,17 @@
+import { createPinia } from 'pinia'
+
 // register vue composition api globally
 import { createApp, ref } from 'vue'
-
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { handleHotUpdate, routes } from 'vue-router/auto-routes'
+
 import App from './App.vue'
+import { installI18n } from './modules/i18n'
 
 import '@unocss/reset/tailwind.css'
 import 'uno.css'
-
 import './styles/index.css'
+
 import 'splitpanes/dist/splitpanes.css'
 
 const app = createApp(App)
@@ -33,5 +36,9 @@ if (import.meta.hot) {
   handleHotUpdate(router)
 }
 
+const pinia = createPinia()
+
+app.use(pinia)
 app.use(router)
+installI18n(app)
 app.mount('#app')