@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

``bash
npm install @u-devtools/core


or

pnpm add @u-devtools/core

or

yarn add @u-devtools/core
`

What's Included

$3

- 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

$3

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

$3

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

Usage

$3

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

$3

`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('my-plugin');

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

$3

`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
);
`

$3

`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