@u-devtools/core 0.1.6 → 0.2.0

package/src/transports/websocket-transport.ts

@@ -0,0 +1,158 @@
+import { Transport } from '../transport';
+import type { RpcMessage } from '../index';
+
+/**
+ * Transport based on WebSocket
+ * Used for communication between client and server when HMR is unavailable
+ * (e.g., for remote debugging or production builds)
+ */
+export class WebSocketTransport extends Transport {
+  private ws: WebSocket | null = null;
+
+  // Reconnection
+  private reconnectAttempts = 0;
+  private maxReconnectAttempts = 5;
+  private reconnectDelay = 1000;
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null; // For cleanup
+  private isManualClose = false;
+
+  // Message queue (buffer)
+  private messageQueue: string[] = [];
+
+  constructor(private url: string) {
+    super();
+    this.connect();
+  }
+
+  private connect() {
+    // Clear old socket if exists
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+
+    try {
+      this.ws = new WebSocket(this.url);
+
+      this.ws.onopen = () => {
+        this.reconnectAttempts = 0;
+        console.log('[WebSocketTransport] Connected');
+        this.flushQueue(); // Send queued messages
+      };
+
+      this.ws.onmessage = (e) => {
+        try {
+          const data = JSON.parse(e.data);
+          // Call base class method for message routing
+          this.handleMessage(data);
+        } catch (err) {
+          console.error('[WebSocketTransport] Failed to parse message:', err);
+        }
+      };
+
+      this.ws.onerror = (error) => {
+        // Connection errors often lead to onclose, so just log here
+        console.error('[WebSocketTransport] Socket error:', error);
+      };
+
+      this.ws.onclose = (e) => {
+        if (this.isManualClose) return;
+
+        console.warn(`[WebSocketTransport] Closed (code: ${e.code}). Attempting reconnect...`);
+        this.scheduleReconnect();
+      };
+    } catch (err) {
+      console.error('[WebSocketTransport] Failed to create socket:', err);
+      this.scheduleReconnect();
+    }
+  }
+
+  private scheduleReconnect() {
+    if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
+
+    if (this.reconnectAttempts < this.maxReconnectAttempts) {
+      this.reconnectAttempts++;
+      const delay = this.reconnectDelay * this.reconnectAttempts; // Exponential backoff (simple)
+
+      console.log(`[WebSocketTransport] Reconnecting in ${delay}ms...`);
+
+      this.reconnectTimer = setTimeout(() => {
+        this.connect();
+      }, delay);
+    } else {
+      console.error('[WebSocketTransport] Max reconnect attempts reached');
+    }
+  }
+
+  protected sendMessage(type: string, data: unknown): void {
+    // Improvement 3: Form message more safely.
+    // Assume Base Transport passes payload that needs to be wrapped,
+    // OR Base Transport already passes a ready structure.
+    // Better to standardize: Transport should pass a ready object for sending.
+
+    // Let's form the packet here, as in original, but safer:
+    const rawData = data as any;
+
+    const message: RpcMessage = {
+      id: rawData.id || '', // Fallback
+      type: type as 'request' | 'event' | 'response', // Cast type safely
+      method: rawData.method,
+      payload: type === 'request' ? rawData.payload : rawData,
+      error: rawData.error, // Don't forget errors
+    };
+
+    const serialized = JSON.stringify(message);
+
+    if (this.isConnected()) {
+      this.ws!.send(serialized);
+    } else {
+      // Improvement 2: Buffering
+      this.messageQueue.push(serialized);
+    }
+  }
+
+  private flushQueue() {
+    if (!this.isConnected()) return;
+
+    while (this.messageQueue.length > 0) {
+      const msg = this.messageQueue.shift();
+      if (msg) this.ws!.send(msg);
+    }
+  }
+
+  // Subscription methods not needed, as WS is a "pipe".
+  // Base Transport class manages listener map itself,
+  // and handleMessage distributes data.
+  protected subscribe(_type: string, _handler: (data: unknown) => void): () => void {
+    return () => {};
+  }
+
+  protected unsubscribe(_type: string, _handler: (data: unknown) => void): void {
+    // No-op
+  }
+
+  override dispose() {
+    this.isManualClose = true;
+
+    // Improvement 1: Clear timer
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+
+    this.messageQueue = []; // Clear memory
+    super.dispose();
+  }
+
+  /**
+   * Check connection status
+   */
+  isConnected(): boolean {
+    return this.ws !== null && this.ws.readyState === WebSocket.OPEN;
+  }
+}

package/vite/vite.config.base.ts

@@ -1,10 +1,36 @@
-import { defineConfig, type PluginOption } from 'vite';
+import { defineConfig, type Plugin, type PluginOption } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import dts from 'vite-plugin-dts';
-import { resolve } from 'node:path';
-import { cleanTimestampFiles } from './clean-timestamp-plugin';
+import { join, resolve } from 'node:path';
+import { readdirSync, unlinkSync } from 'node:fs';
 
-interface ConfigOptions {
+function cleanTimestampFiles(dir: string): Plugin {
+  return {
+    name: 'clean-timestamp-files',
+    buildStart() {
+      try {
+        const files = readdirSync(dir);
+        files.forEach((file) => {
+          if (file.includes('.timestamp-') && file.endsWith('.mjs')) {
+            try {
+              unlinkSync(join(dir, file));
+            } catch (_e) {
+              // Ignore deletion errors
+            }
+          }
+        });
+      } catch (_e) {
+        // Ignore directory read errors
+      }
+    },
+  };
+}
+
+/**
+ * Configuration options for createViteConfig
+ * @internal
+ */
+export interface ConfigOptions {
   entry: string | Record<string, string>;
   name: string;
   dir: string;
@@ -24,6 +50,40 @@ interface ConfigOptions {
   cssCodeSplit?: boolean;
 }
 
+/**
+ * Creates a Vite configuration optimized for building DevTools packages.
+ * 
+ * This function generates a Vite config with proper TypeScript declaration file generation,
+ * preserving JSDoc comments in .d.ts files for better IDE autocomplete.
+ * 
+ * @param options - Configuration options for the Vite build
+ * @param options.entry - Entry point(s) for the library (string or record of entry points)
+ * @param options.name - Library name (used for UMD builds)
+ * @param options.dir - Package directory (usually __dirname)
+ * @param options.external - Array of module IDs to externalize
+ * @param options.clearScreen - Whether to clear screen on build (default: false)
+ * @param options.useVue - Whether to include Vue plugin (default: true)
+ * @param options.formats - Output formats: 'es' and/or 'cjs' (default: ['es', 'cjs'])
+ * @param options.fileName - Custom file naming function or string
+ * @param options.dtsOptions - Options for TypeScript declaration file generation
+ * @param options.additionalPlugins - Additional Vite plugins to include
+ * @param options.resolveAlias - Path aliases for module resolution
+ * @param options.cssCodeSplit - Whether to enable CSS code splitting
+ * @returns Vite configuration object
+ * 
+ * @example
+ * ```ts
+ * import { createViteConfig } from '@u-devtools/core/vite.config.base';
+ * 
+ * export default createViteConfig({
+ *   name: 'MyPackage',
+ *   entry: 'src/index.ts',
+ *   dir: __dirname,
+ * });
+ * ```
+ * 
+ * @public
+ */
 export function createViteConfig({
   entry,
   name,
@@ -51,6 +111,10 @@ export function createViteConfig({
       exclude: dtsOptions.exclude,
       copyDtsFiles: dtsOptions.copyDtsFiles,
       tsconfigPath: resolve(dir, 'tsconfig.json'),
+      outDir: resolve(dir, 'dist'),
+      compilerOptions: {
+        removeComments: false, // Explicitly preserve JSDoc comments
+      },
     })
   );
 
@@ -72,19 +136,22 @@ export function createViteConfig({
   return defineConfig({
     clearScreen,
     plugins,
-    // ВАЖНО: Это предотвращает замену import.meta.hot на false при сборке
-    // Теперь код в dist будет содержать проверку if (import.meta.hot)
-    // и HMR будет работать даже в собранной версии
+    // IMPORTANT: This prevents replacing import.meta.hot with false during build
+    // Now code in dist will contain check if (import.meta.hot)
+    // and HMR will work even in built version
     define: {
       'import.meta.hot': 'import.meta.hot',
     },
-    resolve: resolveAlias
-      ? {
-          alias: Object.fromEntries(
-            Object.entries(resolveAlias).map(([key, value]) => [key, resolve(dir, value)])
-          ),
-        }
-      : undefined,
+    resolve: {
+      extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+      ...(resolveAlias
+        ? {
+            alias: Object.fromEntries(
+              Object.entries(resolveAlias).map(([key, value]) => [key, resolve(dir, value)])
+            ),
+          }
+        : {}),
+    },
     build: {
       lib: {
         entry: entryResolved,

package/vite/clean-timestamp-plugin.ts

@@ -1,28 +0,0 @@
-import type { Plugin } from 'vite';
-import { readdirSync, unlinkSync } from 'node:fs';
-import { join } from 'node:path';
-
-/**
- * Плагин для очистки временных timestamp файлов, создаваемых Vite
- */
-export function cleanTimestampFiles(dir: string): Plugin {
-  return {
-    name: 'clean-timestamp-files',
-    buildStart() {
-      try {
-        const files = readdirSync(dir);
-        files.forEach((file) => {
-          if (file.includes('.timestamp-') && file.endsWith('.mjs')) {
-            try {
-              unlinkSync(join(dir, file));
-            } catch (_e) {
-              // Игнорируем ошибки удаления
-            }
-          }
-        });
-      } catch (_e) {
-        // Игнорируем ошибки чтения директории
-      }
-    },
-  };
-}