feat: devtools

package.json

@@ -9,8 +9,8 @@
   },
   "scripts": {
     "release": "node scripts/release.mjs",
-    "stub": "pnpm run -r --filter './packages/{core,vite-plugin-vue-termui,cli}' stub",
-    "build": "pnpm run -r --filter './packages/{core,vite-plugin-vue-termui,cli}' build",
+    "stub": "pnpm run -r --filter './packages/{core,vite-plugin-vue-termui,cli,devtools}' stub",
+    "build": "pnpm run -r --filter './packages/{core,vite-plugin-vue-termui,cli,devtools}' build",
     "play:dev": "pnpm run --filter  './packages/playground' dev",
     "lint": "prettier --check packages README.md",
     "lint:fix": "prettier --write packages README.md",

packages/devtools/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@vue-termui/devtools",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "stub": "unbuild --stub",
+    "build": "tsup",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path . -l @vue-termui/devtools -r 1"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": "./*"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "vtui-devtools": "./node_modules/.bin/vue-devtools"
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.mjs",
+    "dist/**/*.cjs",
+    "dist/**/*.d.ts",
+    "vtui.mjs"
+  ],
+  "keywords": [
+    "devtools",
+    "@vue/devtools"
+  ],
+  "funding": "https://github.com/vue-terminal/vue-termui?sponsor=1",
+  "license": "MIT",
+  "author": "webfansplz",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vue-terminal/vue-termui.git",
+    "directory": "packages/devtools"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "bugs": {
+    "url": "https://github.com/vue-terminal/vue-termui/issues"
+  },
+  "homepage": "https://github.com/vue-terminal/vue-termui#readme",
+  "dependencies": {
+    "@vue/devtools": "^6.4.5",
+    "express": "^4.18.2",
+    "launch-editor-middleware": "^2.6.0"
+  },
+  "unbuild": {
+    "entries": [
+      "src/index"
+    ],
+    "rollup": {
+      "emitCJS": true
+    },
+    "clean": true
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.14"
+  }
+}

packages/devtools/src/global.d.ts

@@ -0,0 +1,13 @@
+declare global {
+  var document: {
+    title: string
+    createElement: () => {}
+    querySelector: () => {}
+    querySelectorAll: () => []
+  }
+  var VUE_DEVTOOLS_CONFIG: {
+    openInEditorHost: string
+  }
+}
+
+export {}

packages/devtools/src/index.ts

@@ -0,0 +1,44 @@
+import devtools from '@vue/devtools'
+import express from 'express'
+// @ts-ignore
+import launchMiddleware from 'launch-editor-middleware'
+
+export interface DevtoolsOptions {
+  title?: string
+  host?: string
+  openInEditor?: boolean
+}
+
+const SERVER_PORT = 8098
+
+export function createDevtools(options: DevtoolsOptions = {}) {
+  const {
+    host = 'http://localhost',
+    openInEditor = true,
+    title = 'vue-termui devtools',
+  } = options
+
+  // workaround for @vue/devtools
+  global.document = {
+    title,
+    createElement: () => ({}),
+    querySelector: () => ({}),
+    querySelectorAll: () => [],
+  }
+
+  if (openInEditor) {
+    global.VUE_DEVTOOLS_CONFIG = {
+      openInEditorHost: `${host}:${SERVER_PORT}/`,
+    }
+    const app = express()
+    app.use('/__open-in-editor', launchMiddleware())
+    app.listen(SERVER_PORT)
+  }
+
+  return {
+    devtools,
+    connect() {
+      devtools.connect(host, SERVER_PORT)
+    },
+  }
+}

packages/devtools/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "sourceMap": true,
+    "lib": ["esnext"]
+  },
+  "include": ["src/*.ts", "src/*.d.ts"]
+}

packages/devtools/tsup.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'tsup'
+import { dependencies } from './package.json'
+
+export default defineConfig({
+  clean: true,
+  target: 'node14',
+  format: ['esm', 'cjs'],
+  dts: true,
+  esbuildOptions(options) {
+    if (options.format === 'esm') options.outExtension = { '.js': '.mjs' }
+  },
+  entry: ['src/index.ts'],
+  external: [...Object.keys(dependencies)],
+})

packages/playground/components.d.ts

@@ -7,13 +7,6 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    Box: typeof import('vue-termui')['TuiBox']
-    Br: typeof import('vue-termui')['TuiNewline']
-    Div: typeof import('vue-termui')['TuiBox']
-    Input: typeof import('./src/components/Input.vue')['default']
-    Link: typeof import('vue-termui')['TuiLink']
-    Newline: typeof import('vue-termui')['TuiNewline']
-    Progressbar: typeof import('vue-termui')['TuiProgressBar']
     Text: typeof import('vue-termui')['TuiText']
   }
 }

packages/playground/package.json

@@ -4,7 +4,8 @@
   "type": "module",
   "scripts": {
     "dev": "vtui dev",
-    "build": "vtui build"
+    "build": "vtui build",
+    "devtools": "vtui-devtools"
   },
   "license": "MIT",
   "engines": {
@@ -14,6 +15,7 @@
     "@vue-termui/cli": "workspace:*",
     "@vue/runtime-core": "^3.2.41",
     "vite-plugin-vue-termui": "workspace:*",
-    "vue-termui": "workspace:*"
+    "vue-termui": "workspace:*",
+    "@vue-termui/devtools": "workspace:*"
   }
 }

packages/playground/src/main.ts

@@ -1,5 +1,8 @@
-// import devtools from '@vue/devtools'
-// import devtools from '@vue/devtools/node'
+if (process.env.NODE_ENV === 'development') {
+  import('@vue-termui/devtools').then(({ createDevtools }) => {
+    createDevtools().connect()
+  })
+}
 import { createApp } from 'vue-termui'
 // import App from './Focusables.vue'
 // import App from './Fragments.vue'

packages/playground/vite.config.cjs

@@ -34,6 +34,7 @@ export default defineConfig({
     alias: {
       // Use development version instead of dist
       'vue-termui': resolve('../core/src/index.ts'),
+      '@vue-termui/devtools': resolve('../devtools/src/index.ts'),
     },
   },