Skip to main content

Framework Adapter (ui)

Types & Interfaces​

ShadowRendererImport​

Description of where a framework's ShadowRenderer lives, used by the CLI's

import { ShadowRendererImport } from '@hexajs-dev/ui';
interface ShadowRendererImport {
    module: string;
    exportName: string;
}

UiFrameworkAdapter​

The contract every UI-framework integration must implement.

The adapter centralises framework-specific knowledge so the rest of the managed UI pipeline (popup/devtools/newtab builders, content

import { UiFrameworkAdapter } from '@hexajs-dev/ui';
interface UiFrameworkAdapter {
    name: UiFrameworkName;
    vitePluginPackage: string;
    loadVitePlugin(cwd: string): Plugin | Plugin[];
    shadowRendererImport: ShadowRendererImport;
    componentExtensions: readonly string[];
    dedupe: readonly string[];
}

UiFrameworkName​

Names of UI frameworks supported by HexaJS managed UI.

Adding a new framework (e.g. 'svelte') requires:

  • A new adapter implementation in src/core/adapters/<name>.adapter.ts
  • A new shadow renderer service exposed at
import { UiFrameworkName } from '@hexajs-dev/ui';
type UiFrameworkName = 'react' | 'vue';

Functions​

getAdapter​

Look up an adapter by framework name. Throws a clear, typed error for unsupported framework names so future contributors see exactly where to register a new framework.

import { getAdapter } from '@hexajs-dev/ui';
function getAdapter(name: UiFrameworkName | string): UiFrameworkAdapter