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",