Universal DevTools Kit

Appearance

Universal DevTools Kit SDK

Universal DevTools Kit SDK / @u-devtools/core

@u-devtools/core ​

npm versionnpm downloadsLicenseDonate

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

Installation ​

bash
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 ​

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

Using AppBridge with Typed Protocol ​

ts
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 ​

ts
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 ​

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

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

License ​

MIT

Classes ​

Interfaces ​

Type Aliases ​

Variables ​

Functions ​

Released under the MIT License.

Copyright © 2024 Universal DevTools Kit