@valaxyjs/devtools 0.0.1 → 0.18.0-beta.3

package/src/client/pages/index.vue

@@ -1,5 +1,31 @@
+<script lang="ts" setup>
+import { Pane, Splitpanes } from 'splitpanes'
+import { onMounted } from 'vue'
+import { isStaticMode } from '../utils'
+
+onMounted(() => {
+  if (isStaticMode)
+    document.title = 'Valaxy DevTools (Production)'
+})
+</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" 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>
+
+    <div style="height: calc(100% - 32px)" overflow="auto">
+      <Splitpanes class="h-full">
+        <Pane>
+          <VDPostList />
+        </Pane>
+        <Pane>
+          <PostPanel />
+        </Pane>
+      </Splitpanes>
+    </div>
+  </main>
 </template>

package/src/client/pages/tags.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Tags
+  </div>
+</template>

package/src/client/styles/index.css

@@ -0,0 +1,8 @@
+html,
+body {
+  height: 100%;
+}
+
+.dark {
+  background-color: rgba(12, 16, 21);
+}

package/src/client/typed-routes.d.ts

@@ -39,6 +39,10 @@ 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>>,
+    '/categories': RouteRecordInfo<'/categories', '/categories', Record<never, never>, Record<never, never>>,
+    '/tags': RouteRecordInfo<'/tags', '/tags', Record<never, never>, Record<never, never>>,
   }
 }
 

package/src/client/types/index.ts

@@ -0,0 +1,3 @@
+export interface BlogWindow {
+  $frontmatter: any
+}

package/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)
+  }
+}

package/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]
+}

package/src/client/utils/index.ts

@@ -1 +1,5 @@
+export * from './init'
+export * from './api'
+export * from './get'
+
 export const isStaticMode = document.body.getAttribute('data-valaxy-devtools-mode') === 'BUILD'

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

@@ -1,9 +1,11 @@
 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 { componentsDir } from '@advjs/gui/node'
+import { unoConfig } from '../../../../uno.config'
 
 export default defineConfig({
   base: './',
@@ -48,22 +50,18 @@ export default defineConfig({
       },
     },
 
-    Vue({
-      script: {
-        defineModel: true,
-      },
-    }),
-
-    Router({
-      routesFolder: ['pages'],
+    VueRouter({
+      routesFolder: join(__dirname, 'pages'),
       dts: join(__dirname, 'typed-routes.d.ts'),
     }),
-
-    Components({
-      dirs: ['components'],
+    Vue({
+      include: [/\.vue$/, /\.md$/],
+    }),
+    VueComponents({
+      dirs: ['components', componentsDir],
       dts: join(__dirname, 'components.d.ts'),
     }),
-    Unocss(),
+    Unocss(unoConfig),
   ],
 
   optimizeDeps: {

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,22 +1,35 @@
 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'
 
-export default function ValaxyDevtools(options: ValaxyDevtoolsOptions): Plugin {
+// import.meta.env.VITE_DEV_VALAXY_DEVTOOLS = 'true'
+
+export default function ValaxyDevtools(options: ValaxyDevtoolsOptions = {}): Plugin {
   let config: ResolvedConfig
 
   function configureServer(server: ViteDevServer) {
     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): Plugin {
       // 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
     },

package/uno.config.ts

@@ -1,3 +0,0 @@
-import unoConfig from '../../uno.config'
-
-export default unoConfig