@u-devtools/core 0.1.5 → 0.2.0

package/dist/vite/vite.config.base.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("vite"),d=require("@vitejs/plugin-vue"),x=require("vite-plugin-dts"),n=require("node:path"),f=require("node:fs");function T(r){return{name:"clean-timestamp-files",buildStart(){try{f.readdirSync(r).forEach(t=>{if(t.includes(".timestamp-")&&t.endsWith(".mjs"))try{f.unlinkSync(n.join(r,t))}catch{}})}catch{}}}}function E({entry:r,name:u,dir:t,external:c=[],clearScreen:p=!1,useVue:l=!0,formats:m=["es","cjs"],fileName:j,dtsOptions:i={},additionalPlugins:v=[],resolveAlias:a,cssCodeSplit:y}){const o=[];l&&o.push(d()),o.push(x({rollupTypes:i.rollupTypes??!(i.insertTypesEntry??!1),insertTypesEntry:i.insertTypesEntry??!1,exclude:i.exclude,copyDtsFiles:i.copyDtsFiles,tsconfigPath:n.resolve(t,"tsconfig.json"),outDir:n.resolve(t,"dist"),compilerOptions:{removeComments:!1}})),o.push(T(t)),o.push(...v);const h=typeof r=="string"?n.resolve(t,r):Object.fromEntries(Object.entries(r).map(([e,s])=>[e,n.resolve(t,s)])),b=(e,s)=>s&&s!=="index"?`${s}.${e==="es"?"js":"cjs"}`:`index.${e==="es"?"es":"cjs"}.js`;return g.defineConfig({clearScreen:p,plugins:o,define:{"import.meta.hot":"import.meta.hot"},resolve:{extensions:[".mjs",".js",".mts",".ts",".jsx",".tsx",".json",".vue"],...a?{alias:Object.fromEntries(Object.entries(a).map(([e,s])=>[e,n.resolve(t,s)]))}:{}},build:{lib:{entry:h,name:u,fileName:j??b,formats:m},cssCodeSplit:y,rollupOptions:{external:e=>!!(e==="vite"||l&&e==="vue"||e.startsWith("@u-devtools/")||e.startsWith("node:")||c.includes(e)),output:{globals:l?{vue:"Vue"}:{}}}}})}exports.createViteConfig=E;

package/dist/vite/vite.config.base.d.ts

@@ -0,0 +1,59 @@
+import { type PluginOption } from 'vite';
+/**
+ * Configuration options for createViteConfig
+ * @internal
+ */
+export interface ConfigOptions {
+    entry: string | Record<string, string>;
+    name: string;
+    dir: string;
+    external?: string[];
+    clearScreen?: boolean;
+    useVue?: boolean;
+    formats?: ('es' | 'cjs')[];
+    fileName?: string | ((format: string, entryName?: string) => string);
+    dtsOptions?: {
+        insertTypesEntry?: boolean;
+        exclude?: string[];
+        rollupTypes?: boolean;
+        copyDtsFiles?: boolean;
+    };
+    additionalPlugins?: PluginOption[];
+    resolveAlias?: Record<string, string>;
+    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 declare function createViteConfig({ entry, name, dir, external, clearScreen, useVue, formats, fileName, dtsOptions, additionalPlugins, resolveAlias, cssCodeSplit, }: ConfigOptions): import("vite").UserConfig;

package/dist/vite/vite.config.base.js

@@ -0,0 +1,91 @@
+import { defineConfig as x } from "vite";
+import b from "@vitejs/plugin-vue";
+import g from "vite-plugin-dts";
+import { resolve as o, join as E } from "node:path";
+import { readdirSync as T, unlinkSync as d } from "node:fs";
+function F(r) {
+  return {
+    name: "clean-timestamp-files",
+    buildStart() {
+      try {
+        T(r).forEach((t) => {
+          if (t.includes(".timestamp-") && t.endsWith(".mjs"))
+            try {
+              d(E(r, t));
+            } catch {
+            }
+        });
+      } catch {
+      }
+    }
+  };
+}
+function O({
+  entry: r,
+  name: u,
+  dir: t,
+  external: c = [],
+  clearScreen: m = !1,
+  useVue: l = !0,
+  formats: p = ["es", "cjs"],
+  fileName: a,
+  dtsOptions: n = {},
+  additionalPlugins: j = [],
+  resolveAlias: f,
+  cssCodeSplit: h
+}) {
+  const i = [];
+  l && i.push(b()), i.push(
+    g({
+      rollupTypes: n.rollupTypes ?? !(n.insertTypesEntry ?? !1),
+      insertTypesEntry: n.insertTypesEntry ?? !1,
+      exclude: n.exclude,
+      copyDtsFiles: n.copyDtsFiles,
+      tsconfigPath: o(t, "tsconfig.json"),
+      outDir: o(t, "dist"),
+      compilerOptions: {
+        removeComments: !1
+        // Explicitly preserve JSDoc comments
+      }
+    })
+  ), i.push(F(t)), i.push(...j);
+  const y = typeof r == "string" ? o(t, r) : Object.fromEntries(Object.entries(r).map(([e, s]) => [e, o(t, s)])), v = (e, s) => s && s !== "index" ? `${s}.${e === "es" ? "js" : "cjs"}` : `index.${e === "es" ? "es" : "cjs"}.js`;
+  return x({
+    clearScreen: m,
+    plugins: i,
+    // 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: {
+      extensions: [".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json", ".vue"],
+      ...f ? {
+        alias: Object.fromEntries(
+          Object.entries(f).map(([e, s]) => [e, o(t, s)])
+        )
+      } : {}
+    },
+    build: {
+      lib: {
+        entry: y,
+        name: u,
+        fileName: a ?? v,
+        formats: p
+      },
+      cssCodeSplit: h,
+      rollupOptions: {
+        external: (e) => !!(e === "vite" || l && e === "vue" || e.startsWith("@u-devtools/") || e.startsWith("node:") || c.includes(e)),
+        output: {
+          globals: l ? {
+            vue: "Vue"
+          } : {}
+        }
+      }
+    }
+  });
+}
+export {
+  O as createViteConfig
+};

package/dist/vite.config.base.d.ts

@@ -0,0 +1,42 @@
+import { PluginOption } from 'vite';
+import { UserConfig } from 'vite';
+
+/* Excluded from this release type: ConfigOptions */
+
+/**
+ * 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 declare function createViteConfig({ entry, name, dir, external, clearScreen, useVue, formats, fileName, dtsOptions, additionalPlugins, resolveAlias, cssCodeSplit, }: ConfigOptions): UserConfig;
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@u-devtools/core",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Core types and interfaces for Universal DevTools",
   "keywords": [
     "devtools",
@@ -22,32 +22,40 @@
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./vite/vite.config.base": {
+      "types": "./dist/vite/vite.config.base.d.ts",
+      "import": "./dist/vite/vite.config.base.js"
+    },
+    "./vite.config.base": {
+      "types": "./dist/vite/vite.config.base.d.ts",
+      "import": "./dist/vite/vite.config.base.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "dist",
     "src",
-    "vite"
+    "vite",
+    "README.md",
+    "LICENSE"
   ],
   "devDependencies": {
     "@types/node": "^20.19.27",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0"
+  },
+  "dependencies": {
+    "zod": "^4.3.5",
+    "@u-devtools/utils": "^0.2.0"
   },
   "scripts": {
     "build": "vite build",
     "typecheck": "tsc --noEmit"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js"
-    },
-    "./vite.config.base": {
-      "types": "./vite/vite.config.base.ts",
-      "import": "./vite/vite.config.base.ts"
-    },
-    "./clean-timestamp-plugin": {
-      "types": "./vite/clean-timestamp-plugin.ts",
-      "import": "./vite/clean-timestamp-plugin.ts"
-    }
   }
 }

package/src/bridge-app.ts

@@ -1,67 +1,214 @@
+import { BroadcastTransport } from './transports/broadcast-transport';
+
 /**
- * AppBridge provides a standardized way for plugins to communicate
- * between the application runtime (window) and the DevTools iframe.
+ * Universal state class with automatic synchronization between App and Client contexts.
+ * Implements "Handshake" protocol for getting current data on initialization.
+ * 
+ * Use this for state that needs to be shared between App context (main window) 
+ * and Client context (DevTools iframe). Changes are automatically synchronized.
+ * 
+ * @template T - Type of the state value
+ * 
+ * @example
+ * ```typescript
+ * import { AppBridge } from '@u-devtools/core';
+ * 
+ * // Create bridge
+ * const bridge = new AppBridge('my-plugin');
+ * 
+ * // Create synced state
+ * const isOpen = bridge.state('isOpen', false);
+ * const count = bridge.state('count', 0);
+ * 
+ * // Update value (automatically syncs to Client)
+ * isOpen.value = true;
+ * count.value = 42;
+ * 
+ * // Subscribe to changes
+ * const unsubscribe = isOpen.subscribe((value) => {
+ *   console.log('State changed:', value);
+ * });
+ * 
+ * // Cleanup
+ * unsubscribe();
+ * ```
  */
-export class AppBridge {
-  private channel: BroadcastChannel;
-  private listeners = new Map<string, Set<(data: unknown) => void>>();
-
-  constructor(public namespace: string) {
-    // Автоматическое пространство имен
-    this.channel = new BroadcastChannel(`u-devtools:${namespace}`);
-
-    this.channel.onmessage = (e) => {
-      const { event, data } = e.data as { event: string; data: unknown };
-      const handlers = this.listeners.get(event);
-      if (handlers) {
-        handlers.forEach((fn) => {
-          fn(data);
-        });
+export class SyncedState<T> {
+  private _value: T;
+  private listeners = new Set<(val: T) => void>();
+  private isUpdating = false;
+
+  constructor(
+    private bridge: AppBridge<any>,
+    private key: string,
+    initialValue: T
+  ) {
+    this._value = initialValue;
+    
+    const syncEvent = `sync:${key}`;
+    const requestEvent = `request:${key}`; // Event for requesting current state
+
+    // 1. Listen for updates (SYNC)
+    this.bridge.on(syncEvent, ((data: unknown) => {
+      // Ignore echo (if we sent it ourselves)
+      if (this.isUpdating) return;
+
+      const newValue = data as T;
+      if (this._value !== newValue) {
+        this._value = newValue;
+        this.isUpdating = true; // Block sending back to prevent loop
+        this.notify();
+        this.isUpdating = false;
       }
-    };
+    }) as (data: unknown) => void);
+
+    // 2. Listen for state requests (HANDSHAKE RESPONSE)
+    // If the other side (e.g., panel) just opened, it will ask for current value.
+    // We must respond with our current value.
+    this.bridge.on(requestEvent, () => {
+      // Send current value to all who asked
+      this.bridge.send(syncEvent, this._value);
+    });
+
+    // 3. Request current state (HANDSHAKE REQUEST)
+    // Right after creation, ask: "Hey, what's the current value?"
+    // This is critical if we loaded later than the other side.
+    this.bridge.send(requestEvent, {});
   }
 
-  /**
-   * Отправить событие "на ту сторону".
-   */
-  send(event: string, data?: unknown): void {
-    try {
-      this.channel.postMessage({ event, data });
-    } catch (e) {
-      // Ignore errors if channel is closed
-      if (
-        e instanceof DOMException &&
-        (e.name === 'InvalidStateError' || e.message?.includes('closed'))
-      ) {
-        console.warn(`[AppBridge] Cannot send event "${event}": channel is closed`);
-        return;
-      }
-      throw e;
-    }
+  get value(): T {
+    return this._value;
   }
 
-  /**
-   * Слушать события "с той стороны".
-   */
-  on<T = unknown>(event: string, cb: (data: T) => void): () => void {
-    const eventStr = String(event);
-    if (!this.listeners.has(eventStr)) {
-      this.listeners.set(eventStr, new Set());
-    }
-    const handlers = this.listeners.get(eventStr);
-    const wrappedCb = cb as (data: unknown) => void;
-    if (handlers) {
-      handlers.add(wrappedCb);
+  set value(newValue: T) {
+    if (this._value !== newValue) {
+      this._value = newValue;
+      // Notify local subscribers
+      this.notify();
+      
+      // Send to bridge if this is not an "incoming" change
+      if (!this.isUpdating) {
+        this.bridge.send(`sync:${this.key}`, newValue);
+      }
     }
+  }
 
-    // Возвращаем функцию отписки
+  subscribe = (fn: (val: T) => void): () => void => {
+    this.listeners.add(fn);
+    fn(this._value);
     return () => {
-      this.listeners.get(eventStr)?.delete(wrappedCb);
+      this.listeners.delete(fn);
     };
   }
 
+  getSnapshot = (): T => {
+    return this._value;
+  }
+
+  private notify() {
+    this.listeners.forEach((fn) => {
+      fn(this._value);
+    });
+  }
+}
+
+/**
+ * AppBridge - Typed communication bridge between App context (main window) and Client context (DevTools iframe).
+ * 
+ * Communication: App ↔ Client via BroadcastChannel API
+ * 
+ * Provides type-safe event-based communication with automatic state synchronization.
+ * 
+ * @template Protocol - Type definition for events and their handlers
+ * 
+ * @example
+ * ```typescript
+ * import { AppBridge } from '@u-devtools/core';
+ * 
+ * // Define protocol for type-safe communication
+ * interface MyPluginProtocol {
+ *   'element-selected': (data: { id: string; html: string }) => void;
+ *   'toggle-inspector': (data: { state: boolean }) => void;
+ * }
+ * 
+ * const typedBridge = new AppBridge<MyPluginProtocol>('my-plugin');
+ * 
+ * // Send events (type-safe)
+ * typedBridge.send('element-selected', { id: 'el-1', html: '<div>...</div>' });
+ * 
+ * // Listen to events (type-safe)
+ * typedBridge.on('toggle-inspector', ({ state }) => {
+ *   // state is automatically typed as { state: boolean }
+ *   console.log('Inspector toggled:', state);
+ * });
+ * 
+ * // Create synced state
+ * const selectedElement = typedBridge.state<HTMLElement | null>('selectedElement', null);
+ * selectedElement.value = document.getElementById('my-element');
+ * ```
+ */
+export class AppBridge<Protocol = Record<string, (...args: any[]) => any>> {
+  private transport: BroadcastTransport;
+  public namespace: string; // Normalized name for bridge (lowercase)
+  public displayName: string; // Original name for UI
+
+  constructor(namespace: string) {
+    // Normalize namespace to lowercase and replace spaces with dashes for BroadcastChannel compatibility
+    // but keep original name for UI display
+    this.namespace = namespace.toLowerCase().replace(/\s+/g, '-');
+    this.displayName = namespace;
+    this.transport = new BroadcastTransport(this.namespace);
+  }
+
+  send<K extends keyof Protocol>(
+    event: K,
+    ...args: Protocol[K] extends (...args: infer P) => any ? P : []
+  ): void {
+    const payload = args.length === 1 ? args[0] : args.length > 1 ? args : undefined;
+    this.transport.send(event as string, payload);
+  }
+
+  on<K extends keyof Protocol>(
+    event: K,
+    cb: Protocol[K] extends (...args: any[]) => any
+      ? (data: Parameters<Protocol[K]>[0]) => void
+      : never
+  ): () => void {
+    return this.transport.on(event as string, cb as (data: unknown) => void);
+  }
+
+  request<RequestData, ResponseData>(
+    requestEvent: string,
+    requestData: RequestData,
+    responseEvent: string,
+    timeout = 5000,
+    responseFilter?: (request: RequestData, response: ResponseData) => boolean
+  ): Promise<ResponseData> {
+    return new Promise<ResponseData>((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        unsubscribe();
+        reject(new Error(`Request timeout: ${requestEvent} -> ${responseEvent}`));
+      }, timeout);
+
+      const unsubscribe = this.transport.on(responseEvent, (data: unknown) => {
+        const response = data as ResponseData;
+        if (responseFilter && !responseFilter(requestData, response)) {
+          return;
+        }
+        clearTimeout(timeoutId);
+        unsubscribe();
+        resolve(response);
+      });
+
+      this.transport.send(requestEvent, requestData);
+    });
+  }
+
   close() {
-    this.channel.close();
-    this.listeners.clear();
+    this.transport.close();
+  }
+
+  state<T>(key: string, initialValue: T): SyncedState<T> {
+    return new SyncedState(this, key, initialValue);
   }
 }