@u-devtools/core

Core types and interfaces for Universal DevTools Kit. This package provides the foundational TypeScript types, interfaces, and utilities used throughout the DevTools ecosystem.

Installation

npm install @u-devtools/core
# or
pnpm add @u-devtools/core
# or
yarn add @u-devtools/core

What's Included

Type Definitions

• RPC Interfaces - Types for client-server communication
• Plugin Interfaces - Types for creating DevTools plugins
• API Interfaces - Types for ClientApi, StorageApi, SettingsApi, etc.
• Utility Types - Common types used across the ecosystem

Core Classes

• AppBridge - Typed communication bridge between App context and Client context
• SyncedState - Universal state synchronization class with React useSyncExternalStore support
• Control - DevTools control utilities

Vite Configuration

• vite.config.base - Base Vite configuration for building DevTools packages

Usage

Importing Types

import type {
  DevToolsPlugin,
  PluginClientInstance,
  ClientApi,
  RpcServerInterface,
  ServerContext,
} from '@u-devtools/core';

Using AppBridge with Typed Protocol

import { AppBridge } from '@u-devtools/core';

// Define your protocol
interface MyPluginProtocol {
  'element-selected': (data: { id: string }) => void;
  'toggle-inspector': (data: { state: boolean }) => void;
}

// Create typed bridge
const bridge = new AppBridge<MyPluginProtocol>('my-plugin');

// ✅ Full type safety
bridge.send('element-selected', { id: 'el-1' });
bridge.on('toggle-inspector', ({ state }) => {
  // state is automatically typed as { state: boolean }
});

Using SyncedState

import { AppBridge, SyncedState } from '@u-devtools/core';

const bridge = new AppBridge('my-plugin');

// Create synced state
const isOpen = bridge.state('isOpen', false);

// Read value
console.log(isOpen.value);

// Update value (automatically syncs)
isOpen.value = true;

// Subscribe to changes
const unsub = isOpen.subscribe((val) => {
  console.log('Changed:', val);
});

// Use with React useSyncExternalStore
import { useSyncExternalStore } from 'react';
const enabled = useSyncExternalStore(
  isOpen.subscribe,
  isOpen.getSnapshot
);

Using Vite Config Base

import { createViteConfig } from '@u-devtools/core/vite.config.base';

export default createViteConfig({
  name: 'MyPackage',
  entry: 'src/index.ts',
  dir: __dirname,
  // ... other options
});

License

MIT