‏Devframe: یه بار DevTools بساز، همه‌جا اجراش کن

Anthony Fu تو این پست توضیح می‌ده که تیمش تا حالا کلی DevTools ساخته: UnoCSS Inspector، Vite Plugin Inspect، Vitest UI، Nuxt DevTools و ESLint Config Inspector. به گفتهٔ نویسنده همه‌شون یه کار می‌کنن: stateی که معمولاً دیده نمی‌شه رو نشون می‌دن. ولی هر کدوم RPC، همگام‌سازی state، سریال‌سازی و رابط وب رو جدا از صفر ساختن و به dev server یه فریم‌ورک خاص گره خوردن.

جوابشون Devframe هست، یه پایهٔ مستقل از فریم‌ورک برای ساختن DevTools. نویسنده می‌گه همون‌طور که Next.js فریم‌ورک ساختن اپ وبه، Devframe فریم‌ورک ساختن DevTools هست. و همون کاری که unplugin برای پلاگین‌های bundler کرد، Devframe برای DevToolsها می‌کنه. هر ابزار با defineDevframe() تعریف می‌شه و قابلیت‌ها و تابع‌های RPC خودشو ثبت می‌کنه:

export default defineDevframe({
  id: 'my-tool',
  name: 'My Tool',
  setup(ctx) {
    ctx.scope('my-tool').rpc.register(inspectProject)
  },
})

بعد initDevframe() از این تعریف یه handler استاندارد وب می‌سازه (یعنی تابعی که Request می‌گیره و Response برمی‌گردونه). SPA، RPC زنده، احراز هویت و endpoint اختیاری MCP همه پشت همین handler هستن. برای Vite و Rsbuild هم یه nodeMiddleware به سبک Connect داره. نویسنده می‌گه کل ترفند قابل‌حمل بودن همینه: هر ابزاری که handler استاندارد وب یا middleware سبک Connect رو قبول کنه، مثل Hono، Nitro، Next.js یا SvelteKit، می‌تونه Devframe رو سوار کنه.

روی این handler چندتا adapter آماده هست. با اون‌ها همون تعریف می‌تونه یه CLI مستقل، یه dev server جدا، یه پلاگین Vite DevTools، یه سرور MCP یا یه گزارش استاتیک برای CI بشه. Node Modules Inspector، ESLint Config Inspector و Vite Plugin Inspect الان روی Devframe کار می‌کنن. سمت مرورگر هم آزاده و هر ابزار UI خودشو با هر فریم‌ورکی که بخواد می‌سازه.

برای ایجنت‌های کدنویسی، تابع‌های RPC به‌طور پیش‌فرض خصوصی هستن و باید صریحاً expose بشن. adapter مربوط به MCP اون‌ها رو با توضیح و schema به ایجنت نشون می‌ده. Devframe با json-render شرکت Vercel هم ادغام شده، یعنی UI رو می‌شه به‌شکل دادهٔ JSON از یه کاتالوگ محدود کامپوننت توصیف کرد. اینجوری ایجنت‌ها راحت‌تر داشبورد می‌سازن و خروجی قابل پیش‌بینی می‌مونه.

چندتا devframe آماده هم همراهش اومده که عمداً با فریم‌ورک‌های مختلف ساخته شدن: Data Inspector با Vue برای کاوش objectهای زندهٔ Node، Terminals با Svelte برای ترمینال داخل مرورگر، و Accessibility Inspector با Solid که با axe-core خطاهای WCAG رو پیدا می‌کنه و ازشون prompt اصلاح برای ایجنت می‌سازه. تیم می‌گه هنوز دارن رو دسترسی‌ها و کشف‌پذیری ابزارها کار می‌کنن و از نظر جامعه استقبال می‌کنن.

نکات کلیدی:

• Devframe هر DevTools رو با یه defineDevframe() تعریف می‌کنه.
• initDevframe() یه handler استاندارد Request/Response و یه nodeMiddleware برای Vite و Rsbuild می‌ده.
• adapterها: CLI مستقل، dev server، پلاگین Vite DevTools، سرور MCP و گزارش استاتیک.
• تابع‌های RPC پیش‌فرض خصوصی‌ان و برای ایجنت باید صریحاً expose بشن.
• devframeهای آماده با Vue، Svelte، Solid، React و Next.js ساخته شدن.
• Node Modules Inspector و ESLint Config Inspector الان روی Devframe هستن.