chore: add devtools build

package.json

@@ -68,6 +68,7 @@
     "@types/node": "^20.11.5",
     "@types/prompts": "^2.4.9",
     "@types/resolve": "^1.20.6",
+    "@valaxyjs/devtools": "workspace:*",
     "bumpp": "^9.3.0",
     "cross-env": "^7.0.3",
     "cypress": "^13.6.3",

packages/devtools/build.config.ts

@@ -2,7 +2,7 @@ import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
   entries: [
-    'src/index',
+    './src/index',
   ],
   clean: false,
   declaration: true,
@@ -11,7 +11,6 @@ export default defineBuildConfig({
   ],
   rollup: {
     emitCJS: true,
-    inlineDependencies: true,
     dts: {
       respectExternal: true,
     },

packages/devtools/package.json

@@ -1,8 +1,20 @@
 {
   "name": "@valaxyjs/devtools",
+  "type": "module",
   "version": "0.0.1",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "build": "run-s build:*",
+    "build": "rimraf dist && run-s build:*",
     "build:client": "vite build src/client",
     "build:node": "unbuild",
     "dev": "npm run stub && npm run dev:client",
@@ -12,6 +24,13 @@
     "release": "bumpp && npm publish"
   },
   "dependencies": {
+    "@rollup/pluginutils": "^5.1.0",
+    "picocolors": "^1.0.0",
     "sirv": "^2.0.4"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3",
+    "unbuild": "^2.0.0",
+    "vite": "^5.0.12"
   }
 }

packages/devtools/src/index.ts

@@ -1,2 +1,2 @@
-export * from './node'
+export * from './node/index'
 export { default } from './node/index'

packages/devtools/src/node/index.ts

@@ -2,13 +2,10 @@ import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
 import c from 'picocolors'
 import sirv from 'sirv'
 import { DIR_CLIENT } from '../dir'
+import type { ValaxyDevtoolsOptions } from './types'
 
 const NAME = 'valaxy:devtools'
 
-export interface ValaxyDevtoolsOptions {
-  base?: string
-}
-
 export default function ValaxyDevtools(options: ValaxyDevtoolsOptions): Plugin {
   let config: ResolvedConfig
 

packages/devtools/src/node/types.ts

@@ -0,0 +1,3 @@
+export interface ValaxyDevtoolsOptions {
+  base?: string
+}

packages/devtools/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "types": [
+      "vite/client"
+    ],
+    "strict": true,
+    "strictNullChecks": true,
+    "esModuleInterop": true,
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true
+  }
+}

packages/devtools/uno.config.ts

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

packages/valaxy/node/server.ts

@@ -15,7 +15,6 @@ export async function createServer(
 
   const plugins = await ViteValaxyPlugins(options, serverOptions)
   // dynamic import to avoid bundle it in build
-  const VueDevTools = (await import('vite-plugin-vue-devtools')).default
   const enableDevtools = options.mode === 'dev' && options.config.devtools
   const mergedViteConfig = mergeViteConfig(
     viteConfig,
@@ -24,8 +23,8 @@ export async function createServer(
         ...plugins,
 
         // only enable when dev
-        enableDevtools && VueDevTools(),
-        enableDevtools && (await import('./plugins/devtools/index')).default({ base: options.config.base }),
+        enableDevtools && (await import('vite-plugin-vue-devtools')).default,
+        enableDevtools && (await import('@valaxyjs/devtools')).default({ base: options.userRoot }),
       ],
     },
   )

packages/valaxy/package.json

@@ -73,6 +73,7 @@
     "@unhead/addons": "^1.8.10",
     "@unhead/schema-org": "^1.8.10",
     "@unhead/vue": "^1.8.10",
+    "@valaxyjs/devtools": "workspace:*",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/devtools-api": "^7.0.11",
     "@vueuse/core": "^10.7.2",

pnpm-lock.yaml

@@ -45,6 +45,9 @@ importers:
       '@types/resolve':
         specifier: ^1.20.6
         version: 1.20.6
+      '@valaxyjs/devtools':
+        specifier: workspace:*
+        version: link:packages/devtools
       bumpp:
         specifier: ^9.3.0
         version: 9.3.0
@@ -218,9 +221,25 @@ importers:
 
   packages/devtools:
     dependencies:
+      '@rollup/pluginutils':
+        specifier: ^5.1.0
+        version: 5.1.0(rollup@3.29.4)
+      picocolors:
+        specifier: ^1.0.0
+        version: 1.0.0
       sirv:
         specifier: ^2.0.4
         version: 2.0.4
+    devDependencies:
+      typescript:
+        specifier: ^5.3.3
+        version: 5.3.3
+      unbuild:
+        specifier: ^2.0.0
+        version: 2.0.0(typescript@5.3.3)
+      vite:
+        specifier: ^5.0.12
+        version: 5.0.12(@types/node@20.11.5)(sass@1.70.0)
 
   packages/valaxy:
     dependencies:
@@ -254,6 +273,9 @@ importers:
       '@unhead/vue':
         specifier: ^1.8.10
         version: 1.8.10(vue@3.4.15)
+      '@valaxyjs/devtools':
+        specifier: workspace:*
+        version: link:../devtools
       '@vitejs/plugin-vue':
         specifier: ^5.0.3
         version: 5.0.3(vite@5.0.12)(vue@3.4.15)

tsconfig.json

@@ -8,6 +8,7 @@
     "moduleResolution": "node",
     "paths": {
       "~/*": ["demo/yun/*"],
+      "@valaxyjs/devtools": ["packages/devtools/src/index.ts"],
       "valaxy/client/*": ["packages/valaxy/client/*"],
       "@valaxyjs/client/*": ["packages/valaxy/client/*"],
       "valaxy/package.json": ["packages/valaxy/package.json"],