@valaxyjs/devtools 0.18.0-beta.2 → 0.18.0

package/src/client/components.d.ts

@@ -7,9 +7,58 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AGUIAccordion: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/accordion/AGUIAccordion.vue')['default']
+    AGUIAccordionItem: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/accordion/AGUIAccordionItem.vue')['default']
+    AGUIApp: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/AGUIApp.vue')['default']
+    AGUIAssetsExplorer: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/explorer/AGUIAssetsExplorer.vue')['default']
+    AGUIBreadcrumb: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/breadcrumb/AGUIBreadcrumb.vue')['default']
+    AGUIButton: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/button/AGUIButton.vue')['default']
+    AGUICheckbox: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/AGUICheckbox.vue')['default']
+    AGUIColorPicker: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/AGUIColorPicker.vue')['default']
+    AGUIContextMenu: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/context-menu/AGUIContextMenu.vue')['default']
+    AGUIContextMenuItem: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/context-menu/AGUIContextMenuItem.vue')['default']
+    AGUIDetails: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/AGUIDetails.vue')['default']
+    AGUIExplorerControls: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/explorer/AGUIExplorerControls.vue')['default']
+    AGUIFileHandler: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/file/AGUIFileHandler.vue')['default']
+    AGUIFileItem: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/explorer/AGUIFileItem.vue')['default']
+    AGUIFileList: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/explorer/AGUIFileList.vue')['default']
+    AGUIForm: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/form/AGUIForm.vue')['default']
+    AGUIFormItem: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/form/AGUIFormItem.vue')['default']
+    AGUIHr: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/common/AGUIHr.vue')['default']
+    AGUIIcon: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/icon/AGUIIcon.vue')['default']
+    AGUIIconButton: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/button/AGUIIconButton.vue')['default']
+    AGUIInnerInput: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/input/AGUIInnerInput.vue')['default']
+    AGUIInput: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/input/AGUIInput.vue')['default']
+    AGUIInputNumber: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/input/AGUIInputNumber.vue')['default']
+    AGUIInputVector: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/input/AGUIInputVector.vue')['default']
+    AGUILayout: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/layout/AGUILayout.vue')['default']
+    AGUIMenubar: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/menu/AGUIMenubar.vue')['default']
+    AGUIMenubarMenu: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/menu/AGUIMenubarMenu.vue')['default']
+    AGUINumberField: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/AGUINumberField.vue')['default']
+    AGUINumberSlider: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/AGUINumberSlider.vue')['default']
+    AGUIOpenDirectory: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/explorer/AGUIOpenDirectory.vue')['default']
+    AGUIOverlay: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/AGUIOverlay.vue')['default']
+    AGUIPanel: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/AGUIPanel.vue')['default']
+    AGUIPropertiesForm: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/panel/AGUIPropertiesForm.vue')['default']
+    AGUIPropertiesPanel: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/panel/AGUIPropertiesPanel.vue')['default']
+    AGUIProperty: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/AGUIProperty.vue')['default']
+    AGUISelect: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/select/AGUISelect.vue')['default']
+    AGUISlider: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/AGUISlider.vue')['default']
+    AGUITabPanel: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/tabs/AGUITabPanel.vue')['default']
+    AGUITabs: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/tabs/AGUITabs.vue')['default']
+    AGUIToast: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/toast/AGUIToast.vue')['default']
+    AGUIToggleIcon: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/button/AGUIToggleIcon.vue')['default']
+    AGUIToolbar: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/toolbar/AGUIToolbar.vue')['default']
+    AGUITree: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/tree/AGUITree.vue')['default']
+    AGUITreeNode: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/tree/AGUITreeNode.vue')['default']
+    BIconChevronLeft: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/icons/BIconChevronLeft.vue')['default']
+    BIconChevronRight: typeof import('./../../../../node_modules/.pnpm/@advjs+gui@0.0.5-beta.0_vue@3.4.19/node_modules/@advjs/gui/client/components/icons/BIconChevronRight.vue')['default']
     PageFrontmatter: typeof import('./components/PageFrontmatter.vue')['default']
+    PostPanel: typeof import('./components/PostPanel.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    VDPostCategories: typeof import('./components/VDPostCategories.vue')['default']
     VDPostList: typeof import('./components/VDPostList.vue')['default']
+    VDTag: typeof import('./components/VDTag.vue')['default']
   }
 }

package/src/client/composables/app.ts

@@ -1,3 +1,10 @@
+import type { PageData, PostFrontMatter } from 'valaxy'
 import { ref } from 'vue'
 
-export const frontmatter = ref<object>({})
+import type { Router } from 'vue-router'
+
+export const devtoolsRouter = ref<Router>()
+export const activePath = ref('')
+
+export const frontmatter = ref<PostFrontMatter>()
+export const pageData = ref<PageData>()

package/src/client/pages/index.vue

@@ -1,25 +1,18 @@
 <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'
+import { isStaticMode } from '../utils'
 
 onMounted(() => {
   if (isStaticMode)
     document.title = 'Valaxy DevTools (Production)'
-
-  const $frontmatter = getWindowProperty('$frontmatter') as BlogWindow['$frontmatter']
-  if ($frontmatter)
-    frontmatter.value = $frontmatter
 })
 </script>
 
 <template>
   <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 class="w-full border-b shadow flex justify-end" dark="border-b-black">
+      <a href="https://valaxy.site" target="_blank" class="bg-gray-100 dark:bg-gray-900 inline-flex justify-center items-center w-8 h-8">
         <div i-ri-book-line />
       </a>
     </div>
@@ -30,7 +23,7 @@ onMounted(() => {
           <VDPostList />
         </Pane>
         <Pane>
-          <PageFrontmatter :frontmatter="frontmatter" />
+          <PostPanel />
         </Pane>
       </Splitpanes>
     </div>

package/src/client/styles/index.css

@@ -2,3 +2,7 @@ html,
 body {
   height: 100%;
 }
+
+.dark {
+  background-color: rgba(12, 16, 21);
+}

package/src/client/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './init'
 export * from './api'
 export * from './get'
 

package/src/client/utils/init.ts

@@ -0,0 +1,27 @@
+import { nextTick, onMounted } from 'vue'
+import type { Router } from 'vue-router'
+import { activePath, devtoolsRouter, frontmatter, pageData } from '../composables/app'
+import { getWindowProperty } from './get'
+
+export function initDevtoolsClient() {
+  const __VUE_DEVTOOLS_ROUTER__ = getWindowProperty('__VUE_DEVTOOLS_ROUTER__') as Router
+  devtoolsRouter.value = __VUE_DEVTOOLS_ROUTER__
+
+  devtoolsRouter.value.beforeEach((to, _from, next) => {
+    activePath.value = to.path
+    next()
+  })
+
+  // init $frontmatter and $pageData
+  onMounted(() => {
+    frontmatter.value = getWindowProperty('$frontmatter')
+    pageData.value = getWindowProperty('$pageData')
+  })
+
+  devtoolsRouter.value.afterEach(async () => {
+    await nextTick()
+    // get target post $frontmatter
+    frontmatter.value = getWindowProperty('$frontmatter')
+    pageData.value = getWindowProperty('$pageData')
+  })
+}

package/src/client/vite.config.ts

@@ -4,6 +4,7 @@ import Vue from '@vitejs/plugin-vue'
 import VueRouter from 'unplugin-vue-router/vite'
 import VueComponents from 'unplugin-vue-components/vite'
 import Unocss from 'unocss/vite'
+import { componentsDir } from '@advjs/gui/node'
 import { unoConfig } from '../../../../uno.config'
 
 export default defineConfig({
@@ -57,7 +58,7 @@ export default defineConfig({
       include: [/\.vue$/, /\.md$/],
     }),
     VueComponents({
-      dirs: ['components'],
+      dirs: ['components', componentsDir],
       dts: join(__dirname, 'components.d.ts'),
     }),
     Unocss(unoConfig),

package/src/node/api/index.ts

@@ -0,0 +1,35 @@
+import type { ResolvedConfig, ViteDevServer } from 'vite'
+import bodyParser from 'body-parser'
+
+import matter from 'gray-matter'
+import fs from 'fs-extra'
+
+const prefix = '/valaxy-devtools-api'
+
+export function registerApi(server: ViteDevServer, _viteConfig: ResolvedConfig) {
+  const app = server.middlewares
+
+  app.use(bodyParser.json())
+
+  app.use(`${prefix}/frontmatter`, async (req, _res) => {
+    // update
+    if (req.method === 'POST') {
+      const { pageData, frontmatter: newFm } = await (req as any).body
+      // filePath
+      const path = pageData.path
+      if (fs.existsSync(path)) {
+        const rawMd = await fs.readFile(path, 'utf-8')
+        const matterFile = matter(rawMd)
+
+        // update frontmatter
+        matterFile.data = newFm
+        const newMd = matter.stringify(matterFile.content, matterFile.data)
+        await fs.writeFile(path, newMd)
+      }
+    }
+
+    // console.log('update', url, frontmatter)
+
+    // console.log('frontmatter', req.url, res)
+  })
+}

package/src/node/index.ts

@@ -1,11 +1,15 @@
 import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
 import c from 'picocolors'
 import sirv from 'sirv'
+import { createProxyMiddleware } from 'http-proxy-middleware'
 import { DIR_CLIENT } from '../dir'
 import type { ValaxyDevtoolsOptions } from './types'
+import { registerApi } from './api'
 
 const NAME = 'valaxy:devtools'
 
+// import.meta.env.VITE_DEV_VALAXY_DEVTOOLS = 'true'
+
 export default function ValaxyDevtools(options: ValaxyDevtoolsOptions = {}): Plugin {
   let config: ResolvedConfig
 
@@ -13,10 +17,19 @@ export default function ValaxyDevtools(options: ValaxyDevtoolsOptions = {}): Plu
     const _print = server.printUrls
     const base = (options.base ?? server.config.base) || '/'
 
-    server.middlewares.use(`${base}__valaxy_devtools__`, sirv(DIR_CLIENT, {
-      single: true,
-      dev: true,
-    }))
+    const devtoolsUrl = `${base}__valaxy_devtools__/`
+    if (import.meta.env?.VITE_DEV_VALAXY_DEVTOOLS === 'true') {
+      server.middlewares.use(devtoolsUrl, createProxyMiddleware({
+        target: 'http://localhost:5001/#/',
+        changeOrigin: true,
+      }) as any)
+    }
+    else {
+      server.middlewares.use(devtoolsUrl, sirv(DIR_CLIENT, {
+        single: true,
+        dev: true,
+      }))
+    }
 
     server.printUrls = () => {
       let host = `${config.server.https ? 'https' : 'http'}://localhost:${config.server.port || '80'}`
@@ -39,11 +52,15 @@ export default function ValaxyDevtools(options: ValaxyDevtoolsOptions = {}): Plu
       // eslint-disable-next-line no-console
       console.log(`  ${c.green('➜')}  ${c.bold('Inspect')}: ${colorUrl(`${host}${base}__inspect/`)}`)
     }
+
+    registerApi(server, config)
   }
 
   const plugin = <Plugin>{
     name: NAME,
 
+    enforce: 'pre',
+
     configResolved(_config) {
       config = _config
     },