Ib improvements (#4)

* add vite config support

* Add defineConfig() util

* Add tsup config in backend plugins

* Move manifest settings from package.json to config

* Fix manifest creation

* Add process define

* Add websocket messages

* Fix tests

* Upgrade version

package.json

@@ -1,8 +1,11 @@
 {
   "name": "@caido-community/dev",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Development tools for building Caido plugins",
   "type": "module",
+  "exports": {
+    ".": "./dist/index.js"
+  },
   "bin": {
     "caido-dev": "./dist/cli.js"
   },
@@ -32,19 +35,21 @@
     "express": "5.0.0",
     "jiti": "2.4.2",
     "jszip": "3.10.1",
-    "tsup": "8.3.5",
-    "vite": "6.0.6",
-    "vitest": "2.1.8",
     "ws": "8.18.0",
     "zod": "3.24.1"
   },
+  "peerDependencies": {
+    "vite": "^6.0.0",
+    "tsup": "^8.0.0"
+  },
   "devDependencies": {
     "@types/express": "5.0.0",
     "@types/node": "22.10.2",
     "@types/ws": "8.5.13",
-    "prettier": "3.4.2",
     "tsup": "8.3.5",
     "tsx": "4.19.2",
-    "typescript": "5.7.2"
+    "typescript": "5.7.2",
+    "vitest": "2.1.8",
+    "vite": "6.0.6"
   }
 }

playgrounds/build-backend/__tests__/build-backend.spec.ts

@@ -11,13 +11,13 @@ describe('build-backend', () => {
 
     expect(manifestJsonContent).toEqual(JSON.stringify({
       "id": "build-backend",
-      "name": "build-backend",
+      "name": "Backend",
       "version": "1.0.0",
-      "description": "",
+      "description": "Backend plugin",
       "author": {
-        "name": "Caido Labs Inc.",
-        "email": "hello@caido.com",
-        "url": "https://caido.com"
+        "name": "John Doe",
+        "email": "john.doe@example.com",
+        "url": "https://example.com"
       },
       "plugins": [
         {

playgrounds/build-backend/caido.config.ts

@@ -1,7 +1,17 @@
 export default {
+  id: "build-backend",
+  name: "Backend",
+  description: "Backend plugin",
+  version: "1.0.0",
+  author: {
+    name: "John Doe",
+    email: "[email protected]",
+    url: "https://example.com",
+  },
   plugins: [
     {
       kind: "backend",
+      id: "backend",
       root: "./packages/backend",
     }
   ],

playgrounds/build-frontend/__tests__/build-frontend.spec.ts

@@ -11,21 +11,21 @@ describe('build-frontend', () => {
 
     expect(manifestJsonContent).toEqual(JSON.stringify({
       "id": "build-frontend",
-      "name": "build-frontend",
+      "name": "Frontend",
       "version": "1.0.0",
-      "description": "",
+      "description": "Frontend plugin",
       "author": {
-        "name": "Caido Labs Inc.",
-        "email": "hello@caido.com",
-        "url": "https://caido.com"
+        "name": "John Doe",
+        "email": "john.doe@example.com",
+        "url": "https://example.com"
       },
       "plugins": [
         {
           "id": "frontend",
           "kind": "frontend",
           "name": "frontend",
-          "js": "frontend/index.js",
-          "css": "frontend/index.css",
+          "entrypoint": "frontend/index.js",
+          "style": "frontend/index.css",
           "backend": null
         }
       ]

playgrounds/build-frontend/caido.config.ts

@@ -1,7 +1,17 @@
 export default {
+  id: "build-frontend",
+  name: "Frontend",
+  description: "Frontend plugin",
+  version: "1.0.0",
+  author: {
+    name: "John Doe",
+    email: "[email protected]",
+    url: "https://example.com",
+  },
   plugins: [
     {
       kind: "frontend",
+      id: "frontend",
       root: "./packages/frontend",
     }
   ],

src/build/backend.ts

@@ -1,7 +1,6 @@
 import path from 'path';
 import { defineConfig, build, Options } from 'tsup';
 import type { BackendPluginConfig, BackendBuildOutput } from '../types';
-import { getPluginPackageJson } from '../package';
 import { logInfo } from '../utils';
 import { builtinModules } from 'module';
 
@@ -28,8 +27,6 @@ function createTsupConfig(cwd: string, plugin: BackendPluginConfig) {
     clean: true,
     sourcemap: false,
     external: [/caido:.+/, ...builtinModules],
-
-
   }) as Options;
 } 
 
@@ -45,15 +42,12 @@ export async function buildBackendPlugin(cwd: string, pluginConfig: BackendPlugi
     logInfo(`Building backend plugin: ${pluginRoot}`);
     const tsupConfig = createTsupConfig(cwd, pluginConfig);
     await build(tsupConfig);
-
-    const packageJson = getPluginPackageJson(pluginRoot);
-
-    logInfo(`Frontend backend built successfully`);
+    logInfo(`Backend built successfully`);
 
     return {
       kind: 'backend',
-      id: packageJson.name,
-      name: pluginConfig.name ?? packageJson.name,
+      id: pluginConfig.id,
+      name: pluginConfig.name ?? "backend",
       fileName: path.join(pluginRoot, 'dist', 'index.js'),
     }
 }

src/build/frontend.ts

@@ -1,8 +1,7 @@
 import path from 'path';
-import { defineConfig, build } from 'vite';
+import { defineConfig, build, mergeConfig } from 'vite';
 import { existsSync } from 'fs';
 import type { FrontendBuildOutput, FrontendPluginConfig } from '../types';
-import { getPluginPackageJson } from '../package';
 import { logInfo } from '../utils';
 
 /**
@@ -14,7 +13,7 @@ import { logInfo } from '../utils';
 function createViteConfig(cwd: string, plugin: FrontendPluginConfig) {
   // Set the entry point
   const root = path.resolve(cwd, plugin.root);
-  return defineConfig({
+  const baseConfig = defineConfig({
     root,
     build: {
       outDir: 'dist',
@@ -25,11 +24,13 @@ function createViteConfig(cwd: string, plugin: FrontendPluginConfig) {
         fileName: () => 'index.js',
         cssFileName: 'index'
       },
-      rollupOptions: {
-        external: ['@caido/frontend-sdk']
-      }
+    },
+    define: {
+      'process.env.NODE_ENV': '"production"'
     }
   })
+
+  return mergeConfig(baseConfig, plugin.vite ?? {});
 } 
 
 /**
@@ -46,14 +47,12 @@ export async function buildFrontendPlugin(cwd: string, pluginConfig: FrontendPlu
     await build(viteConfig);
 
     const hasCss = existsSync(`${pluginRoot}/dist/index.css`);
-    const packageJson = getPluginPackageJson(pluginRoot);
-
     logInfo(`Frontend plugin built successfully`);
 
     return {
       kind: 'frontend',
-      id: packageJson.name,
-      name: pluginConfig.name ?? packageJson.name,
+      id: pluginConfig.id,
+      name: pluginConfig.name ?? "frontend",
       fileName: path.join(pluginRoot, 'dist', 'index.js'),
       cssFileName: hasCss ? path.join(pluginRoot, 'dist', 'index.css') : undefined,
       backendId: pluginConfig.backend?.id

src/bundle/frontend.ts

@@ -30,8 +30,8 @@ export function bundleFrontendPlugin(pluginPackageDir: string, buildOutput: Fron
     id: buildOutput.id,
     kind: 'frontend',
     name: buildOutput.name ?? buildOutput.id,
-    js: jsRelativePath,
-    css: cssRelativePath,
+    entrypoint: jsRelativePath,
+    style: cssRelativePath,
     backend: buildOutput.backendId ? {
       id: buildOutput.backendId,
     } : null

src/bundle/index.ts

@@ -2,8 +2,7 @@ import path from 'path';
 import fs from 'fs/promises';
 import { validateManifest } from '@caido/plugin-manifest';
 import { createManifest } from '../manifest';
-import { RootPackageJson } from '../types';
-import type { BuildOutput } from '../types';
+import type { BuildOutput, CaidoConfig } from '../types';
 import JSZip from 'jszip';
 import { addDirectoryToZip, logInfo, logSuccess } from '../utils';
 import { bundleFrontendPlugin } from './frontend';
@@ -34,17 +33,17 @@ async function createDistDirectories(cwd: string) {
  */
 export async function bundlePackage(options: {
     cwd: string,
-    packageJson: RootPackageJson,
-    buildOutputs: BuildOutput[]
+    buildOutputs: BuildOutput[],
+    config: CaidoConfig
 }): Promise<void> {
   logInfo('Bundling plugin package');
-  const { cwd, packageJson, buildOutputs } = options;
+  const { cwd, buildOutputs, config } = options;
 
   // Create dist directories
   const { distDir, pluginPackageDir } = await createDistDirectories(cwd);
 
   // Create manifest
-  const manifest = createManifest({ packageJson });
+  const manifest = createManifest({ config });
 
   // Copy build outputs to dist directory
   for (const buildOutput of buildOutputs) {

src/cli.ts

@@ -17,6 +17,7 @@ function runner(fn: (...args: any[]) => Promise<void>) {
         } catch (error) {
             const buildError = error instanceof Error ? error : new Error('Unknown error occurred');
             console.error(chalk.red(`\n${buildError.message}`));
+            console.error(chalk.red(`${buildError.stack}`));
             process.exit(1);
         }
     }

src/commands/build.ts

@@ -1,6 +1,5 @@
 import { loadConfig } from '../config';
 import { bundlePackage } from '../bundle';
-import { getRootPackageJson } from '../package';
 import { buildFrontendPlugin, buildBackendPlugin } from '../build';
 import type { BuildOutput } from '../types';
 import { logInfo, logSuccess } from '../utils';
@@ -29,11 +28,10 @@ export async function build(options: {
     }
 
     // Bundle the plugin
-    const packageJson = getRootPackageJson(cwd);
     await bundlePackage({ 
         cwd,
-        packageJson,
-        buildOutputs
+        buildOutputs,
+        config
     });
     logSuccess('Plugin package built successfully');
 }