feat: devtools api package (#88)

package.json

@@ -30,6 +30,7 @@
     "stub:overlay": "nr -C packages/overlay stub",
     "stub:client": "nr -C packages/client stub",
     "stub:vite": "nr -C packages/vite stub",
+    "stub:devtools-api": "nr -C packages/devtools-api stub",
     "build:shared": "nr -C packages/shared build",
     "build:core": "nr -C packages/core build",
     "build:devtools-kit": "nr -C packages/devtools-kit build",
@@ -40,12 +41,13 @@
     "build:electron": "nr -C packages/electron build",
     "build:ui": "nr -C packages/ui build",
     "build:vite": "nr -C packages/vite build",
+    "build:devtools-api": "nr -C packages/devtools-api build",
     "dev:browser-extension": "nr -C packages/browser-extension dev",
     "dev:ui-story": "nr -C packages/ui story:dev",
     "dev:ui-play": "nr -C packages/ui-playground dev",
     "prepare:type": "pnpm -r --filter='./packages/**' run prepare:type",
     "dev": "NODE_OPTIONS=\"--max-old-space-size=8192\" nr prepare:type && nr build:ui && pnpm -r --parallel --filter='./packages/**' run stub",
-    "build": "pnpm -r --filter='./packages/{schema,shared,core,ui,devtools-kit,vite}' run build && pnpm build:client && pnpm build:overlay && pnpm build:browser-extension & pnpm build:electron && pnpm build:devtools",
+    "build": "pnpm -r --filter='./packages/{schema,shared,core,ui,devtools-kit,vite}' run build && pnpm build:client && pnpm build:overlay && pnpm build:browser-extension & pnpm build:electron && pnpm build:devtools&& pnpm build:devtools-api",
     "build:browser-extension": "nr -C packages/browser-extension build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",

packages/devtools-api/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@vue/devtools-next-api",
+  "type": "module",
+  "version": "0.0.0",
+  "author": "webfansplz",
+  "license": "MIT",
+  "repository": {
+    "directory": "packages/devtools-api",
+    "type": "git",
+    "url": "git+https://github.com/vuejs/vue-devtools-next.git"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup --clean",
+    "prepare:type": "tsup --dts-only",
+    "stub": "tsup --watch --onSuccess 'tsup --dts-only'"
+  },
+  "dependencies": {
+    "@vue-devtools-next/kit": "workspace:^"
+  }
+}

packages/devtools-api/src/index.ts

@@ -0,0 +1,7 @@
+import { addCustomTab, onDevToolsConnected, setupDevToolsPlugin } from '@vue-devtools-next/kit'
+
+export {
+  onDevToolsConnected,
+  addCustomTab,
+  setupDevToolsPlugin,
+}

packages/devtools-api/tsup.config.ts

@@ -0,0 +1,18 @@
+import type { Options } from 'tsup'
+
+export default <Options>{
+  entryPoints: [
+    'src/index.ts',
+  ],
+  esbuildOptions(options) {
+    if (options.format === 'esm')
+      options.outExtension = { '.js': '.mjs' }
+  },
+  external: [
+    'vue',
+  ],
+  clean: true,
+  format: ['esm', 'cjs'],
+  dts: true,
+  shims: true,
+}

packages/devtools-kit/src/index.ts

@@ -1,5 +1,6 @@
 import { devtoolsContext, devtoolsState, hook, initDevTools, onDevToolsConnected } from './core/general'
 import { addCustomTab } from './core/custom-tab'
+import { setupDevToolsPlugin } from './api/plugin'
 
 export type * from './core/component/types'
 export type * from './core/timeline/types'
@@ -24,4 +25,5 @@ export const devtools = {
 export {
   onDevToolsConnected,
   addCustomTab,
+  setupDevToolsPlugin,
 }

packages/playground/package.json

@@ -18,6 +18,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue/devtools-next": "workspace:*",
+    "@vue/devtools-next-api": "workspace:*",
     "sass": "^1.69.5",
     "serve": "^14.2.1",
     "typescript": "^5.3.3",