CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-umi-types

TypeScript type definitions for the Umi framework plugin development and configuration

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Umi Types

Umi Types provides comprehensive TypeScript type definitions for the Umi framework, a React-based frontend development framework. It enables full type safety and IntelliSense support for Umi plugin development, configuration, UI components, routing, webpack configuration, and internationalization.

Package Information

  • Package Name: umi-types
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install umi-types

Core Imports

import { IApi } from 'umi-types';

For configuration types:

import { IConfig, IPlugin, IRoute } from 'umi-types';

For UI development:

import { IUi } from 'umi-types';

For internationalization:

import { IApi, IModifyHTMLWithASTFunc } from 'umi-types';

Basic Usage

The most common usage is for plugin development using the main IApi interface:

import { IApi } from 'umi-types';

export default function(api: IApi) {
  // Register a new command
  api.registerCommand('my-command', {
    description: 'My custom command',
    usage: 'umi my-command [options]',
  }, (args) => {
    api.log.success('Command executed successfully');
  });

  // Modify webpack configuration
  api.modifyWebpackConfig((config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': api.paths.absSrcPath,
    };
    return config;
  });

  // Add HTML modifications
  api.modifyHTMLWithAST(($, { route, getChunkPath }) => {
    $('head').append(`<script src="${getChunkPath('custom.js')}"></script>`);
  });
}

Architecture

Umi Types is organized around several key areas:

  • Plugin API: Core IApi interface providing system-level, tool, event, and application APIs
  • Configuration System: Type definitions for Umi and webpack configuration options
  • UI Framework: Components and interfaces for Umi's plugin UI system
  • Type System: Complete TypeScript definitions with generic type preservation
  • Event System: Lifecycle hooks and event handlers for plugin development

Capabilities

Plugin Development API

Core plugin development interface providing system-level APIs, tool utilities, event handlers, and application modification methods. Essential for all Umi plugin development.

interface IApi {
  // System level variables
  API_TYPE: typeof API_TYPE;
  config: IConfig;
  cwd: string;
  pkg: IPkg;
  webpackConfig: IWebpack.Configuration;
  service: any;
  locale: any;
  paths: {
    cwd: string;
    outputPath: string;
    absOutputPath: string;
    absNodeModulesPath: string;
    pagesPath: string;
    absPagesPath: string;
    absSrcPath: string;
    tmpDirPath: string;
    absTmpDirPath: string;
  };
  routes: IRoute[];

  // System level API methods
  register: IRegister;
  registerPlugin: IRegisterPlugin;
  registerMethod: IRegisterMethod;
  applyPlugins: IApplyPlugins;
  restart: IReDo<string>;
  rebuildTmpFiles: IReDo<string>;
  refreshBrowser: IReDo<void>;
  rebuildHTML: IReDo<void>;
  changePluginOption: IChangePluginOption;
  registerCommand: IRegisterCommand;
  _registerConfig: IRegisterConfig;
  _modifyCommand: IModifyCommand;
  _modifyHelpInfo: IModify<IModifyHelpInfoOpts>;

  // Tool class API methods
  log: { [key in DefaultMethods]: ILog<any> };
  _: typeof lodash;
  winPath: IWinPath;
  relativeToTmp: IRelativeToTmp;
  debug: ILog;
  writeTmpFile: IWriteTmpFile;
  getRoutes: IGetRoutes;
  getRouteComponents: IGetRouteComponents;
  findJS: IFind;
  findCSS: IFind;
  compatDirname: ICompatDirname;
  UmiError: any;

  // Event class API methods  
  beforeDevServer: IBeforeDevServer;
  _beforeDevServerAsync: IBeforeDevServerAsync;
  afterDevServer: IAfterDevServer;
  beforeBlockWriting: IBeforeBlockWriting;
  onStart: IOnStart;
  onPrintUmiError: onPrintUmiError;
  onStartAsync: IEventAsync;
  onDevCompileDone: IOnDevCompileDone;
  onOptionChange: IOnOptionChange;
  onBuildSuccess: IOnBuildSuccess;
  onBuildSuccessAsync: IOnBuildSuccessAsync;
  onBuildFail: IOnBuildFail;
  onHTMLRebuild: IOnHTMLRebuild;
  onGenerateFiles: IOnGenerateFiles;
  onPatchRoute: IOnPatchRoute;
  onUISocket: IOnUISocket;
  onRouteChange: (callback: () => void) => void;

  // Application class API methods
  modifyDefaultConfig: IModify<object>;
  addUmiExports: IAdd<object>;
  addPageWatcher: IAdd<string>;
  addHTMLMeta: IAdd<object, { route?: IRoute }>;
  addHTMLLink: IAdd<object, { route?: IRoute }>;
  addHTMLStyle: IAdd<object, { route?: IRoute }>;
  addHTMLScript: IAdd<object, { route?: IRoute }>;
  addHTMLHeadScript: IAdd<object, { route?: IRoute }>;
  modifyHTMLChunks: IModify<string[], { route?: IRoute }>;
  modifyHTMLWithAST: IModifyHTMLWithAST;
  modifyHTMLContext: IModify<object, { route?: IRoute }>;
  modifyPublicPathStr: IModify<string>;
  modifyRoutes: IModify<IRoute[]>;
  addEntryImportAhead: IAdd<IAddImportOpts>;
  addEntryPolyfillImports: IAdd<IAddImportOpts>;
  addEntryImport: IAdd<IAddImportOpts>;
  addEntryCodeAhead: IAdd<string>;
  addEntryCode: IAdd<string>;
  addUIPlugin: IAdd<string>;
  addRouterImport: IAdd<IAddImportOpts>;
  addRouterImportAhead: IAdd<IAddImportOpts>;
  addRendererWrapperWithComponent: IAdd<string, () => string>;
  addRendererWrapperWithModule: IAdd<string>;
  modifyEntryRender: IModify<string>;
  modifyEntryHistory: IModify<string>;
  modifyRouteComponent: IModify<string, IModifyRouteComponentArgs>;
  modifyRouterRootComponent: IModify<string>;
  modifyWebpackConfig: IModify<IWebpack.Configuration>;
  modifyAFWebpackOpts: IModify<IAFWebpackConfig>;
  chainWebpackConfig: IChangeWebpackConfig<IWebpackChainConfig, IAFWebpackConfig>;
  addMiddleware: IAdd<IMiddlewareFunction>;
  addMiddlewareAhead: IAdd<IMiddlewareFunction>;
  addMiddlewareBeforeMock: IAdd<IMiddlewareFunction>;
  addMiddlewareAfterMock: IAdd<IMiddlewareFunction>;
  addVersionInfo: IAdd<string>;
  addRuntimePlugin: IAdd<string>;
  addRuntimePluginKey: IAdd<string>;
  addBlockUIResource: IAdd<object>;
  modifyBlockUIResources: IModify<object[]>;
  _modifyBlockPackageJSONPath: IModify<string>;
  _modifyBlockDependencies: IModify<IBlockDependencies>;
  _modifyBlockFile: IModify<string, IModifyBlockFileArgs>;
  _modifyBlockTarget: IModify<string, IModifyBlockTargetArgs>;
  _modifyBlockNewRouteConfig: IModify<any>;
}

Plugin Development

Configuration Types

Type definitions for Umi configuration options, webpack settings, routing, and plugin configuration. Provides complete type safety for umi configuration files.

interface IConfig extends IAFWebpackConfig {
  // Basic config options
  block?: object;
  chainWebpack?: IChangeWebpackConfigFunc<IWebpackChainConfig, IAFWebpackConfig>;
  context?: object;
  disableRedirectHoist?: boolean;
  exportStatic?: boolean | IExportStaticOpts;
  outputPath?: string;
  plugins?: IPlugin[];
  routes?: IRoute[] | null;
  runtimePublicPath?: boolean | string;
  singular?: boolean;
  mock?: IMockOpts;
  treeShaking?: boolean;
  dva?: any;
  locale?: any;

  // Plugin-implemented options
  base?: string;
  history?: 'browser' | 'hash' | 'memory';
  mountElementId?: string;
  targets?: {
    [key: string]: number;
  };
  ssr?: IExportSSROpts;
}

type IPlugin<T = any> = string | [string, T];

interface IRoute {
  path?: string;
  component?: ReactNode;
  routes?: IRoute[];
  Routes?: string[];
  redirect?: string;
  [key: string]: any;
}

Configuration

UI Components and Dashboard

UI system types for Umi's plugin dashboard, panels, forms, and components. Used for developing Umi UI plugins and dashboard extensions.

interface IPanel extends IRoute {
  path: string;
  component: FunctionComponent | ComponentClass;
  icon: IconType | string;
  actions?: IPanelAction;
  beta?: boolean;
  headerTitle?: ReactNode;
  renderTitle?: (title: string) => ReactNode;
}

interface IDashboard {
  key: string;
  enable?: boolean;
  title: ReactNode;
  description: ReactNode;
  icon: ReactNode;
  right?: ReactNode;
  colClassName?: string;
  backgroundColor?: string;
  content: ReactNode | ReactNode[];
}

class IApiClass {
  addPanel: IAddPanel;
  addDashboard: IAddDashboard;
  TwoColumnPanel: FC<ITwoColumnPanel>;
  Terminal: FC<ITerminalProps>;
  DirectoryForm: FC<IDirectoryForm>;
  StepForm: IStepForm;
  ConfigForm: FC<IConfigFormProps>;
  Field: FC<IFieldProps>;
}

UI Components

Internationalization

React Intl type definitions and locale management functions for multi-language Umi applications. Provides formatting components and utility functions.

// Formatting functions
function formatMessage(
  messageDescriptor: MessageDescriptor,
  values?: { [key: string]: MessageValue }
): string;

function formatDate(value: DateSource, options?: DateTimeFormatProps): string;
function formatTime(value: DateSource, options?: DateTimeFormatProps): string;
function formatNumber(value: number, options?: FormattedNumberProps): string;

// Locale management
function setLocale(lang: string, reloadPage?: boolean): void;
function getLocale(): string;

// React components
class FormattedMessage extends React.Component<FormattedMessageProps> {}
class FormattedDate extends React.Component<FormattedDateProps> {}
class FormattedTime extends React.Component<FormattedTimeProps> {}
class FormattedNumber extends React.Component<FormattedNumberProps> {}

Internationalization

Types

Core Plugin Types

enum API_TYPE {
  ADD,
  MODIFY,
  EVENT,
}

interface IPluginMethodOpts {
  memo?: any;
  args?: any;
}

interface IPluginMethod {
  (opts: IPluginMethodOpts, ...args: any[]): any;
}

interface IRegisterMethodOpts {
  type?: API_TYPE;
  apply?: IPluginMethod;
}

interface IApplyPluginsOpts {
  args?: any;
  initialValue?: any;
}

interface ICommandOpts {
  description?: string;
  details?: string;
  hide?: boolean;
  options?: object;
  usage?: string;
  webpack?: boolean;
}

interface IPkg {
  name?: string;
  version?: string;
  dependencies?: {
    [prop: string]: string;
  };
  devDependencies?: {
    [prop: string]: string;
  };
}

interface IRegisterPluginOpts {
  id: string;
  apply: any;
  opts?: object;
}

interface IModifyHelpInfoOpts {
  scriptName: string;
  commands: {
    [commandName: string]: {
      opts: {
        hide: boolean;
        options: {
          [key: string]: string;
        };
      };
    };
  };
}

interface IAddImportOpts {
  source: string;
  specifier?: string;
}

interface IModifyRouteComponentArgs {
  importPath: string;
  webpackChunkName: string;
  component: string;
}

interface IBlockDependencies {
  conflicts: [string, string, string][];
  lacks: [string, string][];
  devConflicts: [string, string, string][];
  devLacks: [string, string][];
}

interface IModifyBlockFileArgs {
  targetPath: string;
}

interface IModifyBlockTargetArgs {
  sourceName: string;
}

interface IMiddlewareFunction {
  (req: any, res: any, next: any): void;
}

Function Interface Types

interface IRegister {
  (hook: string, handler: Function): void;
}

interface IRegisterPlugin {
  (plugin: IRegisterPluginOpts): void;
}

interface IRegisterMethod {
  (methodName: string, opts: IRegisterMethodOpts): void;
}

interface IApplyPlugins {
  (methodName: string, opts?: IApplyPluginsOpts): any[] | undefined | any;
}

interface IRegisterCommand {
  (commandName: string, opts: ICommandOpts, fn: (args: any) => any): void;
  (commandName: string, fn: (args: any) => any): void;
}

interface IReDo<T> {
  (message?: T): void;
}

interface IChangePluginOption {
  (pluginId: string, opts: any): void;
}

interface IRegisterConfig {
  (fn: IRegisterConfigFunc): void;
}

interface IRegisterConfigFunc {
  (api: IApi): IRegisterConfigOpts;
}

interface IRegisterConfigOpts<T = any> {
  name: string;
  validate?: (value: T) => void;
  onChange?: (newConfig: IConfig, oldConfig: IConfig) => void;
}

interface IModifyCommand {
  (fn: IModifyCommandFunc): void;
}

interface IModifyCommandFunc {
  (opts: IModifyCommandFuncOpts): IModifyCommandFuncOpts;
}

interface IModifyCommandFuncOpts {
  name: string;
  args?: any;
}

Tool Class API Types

interface ILog<T = string> {
  (message: T, ...messages: string[]): void;
}

interface IWriteTmpFile {
  (file: string, content: string): void;
}

interface IGetRoutes {
  (): IRoute[];
}

interface IGetRouteComponents {
  (): string[];
}

interface IWinPath {
  (path: string): string;
}

type IRelativeToTmp = (path: string) => string;

interface IFind {
  (baseDir: string, fileNameWithoutExtname?: string): string | null;
}

interface ICompatDirname<T = any> {
  (path: string, cwd: string, fallback?: T): T | string;
}

Event Class API Types

interface IBeforeDevServerFunc {
  (args: { server: any }): void;
}

interface IAfterDevServerFunc {
  (args: { server: any; devServerPort: number }): void;
}

interface IBeforeBlockWritingFunc {
  (args: { service: any; sourcePath: string; blockPath: string }): void;
}

interface IBeforeDevServer {
  (fn: IBeforeDevServerFunc): void;
}

interface IBeforeDevServerAsync {
  (fn: IBeforeDevServerFunc): Promise<any>;
}

interface IAfterDevServer {
  (fn: IAfterDevServerFunc): void;
}

interface IBeforeBlockWriting {
  (fn: IBeforeBlockWritingFunc): void;
}

interface IOnStart {
  (fn: () => void): void;
}

interface onPrintUmiError {
  (args: { error: any; opts: object }): void;
}

interface IEventAsync {
  (fn: () => void): Promise<any>;
}

interface IOnDevCompileDoneFunc {
  (args: { isFirstCompile: boolean; stats: IWebpack.Stats }): void;
}

interface IOnDevCompileDone {
  (fn: IOnDevCompileDoneFunc): void;
}

interface IOnOptionChangeFunc<T = any> {
  (newOpts: T): void;
}

interface IOnOptionChange {
  (fn: IOnOptionChangeFunc): void;
}

interface IOnBuildSuccessFunc {
  (args: { stats: IWebpack.Stats[] }): void;
}

interface IOnBuildSuccess {
  (fn: IOnBuildSuccessFunc): void;
}

interface IOnBuildSuccessAsync {
  (fn: IOnBuildSuccessFunc): Promise<any>;
}

interface IOnBuildFailFunc {
  (args: { stats: IWebpack.Stats[]; err: Error }): void;
}

interface IOnBuildFail {
  (fn: IOnBuildFailFunc): void;
}

interface IOnHTMLRebuild {
  (fn: () => void): void;
}

interface IOnGenerateFilesFunc {
  (args: { isRebuild?: boolean }): void;
}

interface IOnGenerateFiles {
  (fn: IOnGenerateFilesFunc): void;
}

interface IOnPatchRouteFunc {
  (args: { route: IRoute }): void;
}

interface IOnPatchRoute {
  (fn: IOnPatchRouteFunc): void;
}

interface IOnUISocketFunc {
  (args: {
    action: IAction;
    send: ISend;
    success: ISuccess<{}>;
    failure: IFailure<{}>;
    log: IUiLog;
  }): void;
}

interface IOnUISocket {
  (fn: IOnUISocketFunc): void;
}

Application Class API Types

interface IModifyFunc<T, U> {
  (memo: T, args: U): T | T;
}

interface IModify<T, U = {}> {
  (fn: IModifyFunc<T, U> | T): void;
}

interface IAddFunc<T, U> {
  (memo: T[], args: U): T | T[];
}

interface IAdd<T, U = {}> {
  (fn: IAddFunc<T, U> | T | T[]): void;
}

interface IChangeWebpackConfigFunc<T, U> {
  (webpackConfig: T, AFWebpack: { webpack: U }): T | void;
}

interface IChangeWebpackConfig<T, U> {
  (fn: IChangeWebpackConfigFunc<T, U>): void;
}

interface IGetChunkPath {
  (fileName: string): string | null;
}

interface IModifyHTMLWithASTArgs {
  route: IRoute;
  getChunkPath: IGetChunkPath;
}

interface IModifyHTMLWithASTFunc {
  ($: CheerioStatic, args: IModifyHTMLWithASTArgs): CheerioStatic;
}

interface IModifyHTMLWithAST {
  (fn: IModifyHTMLWithASTFunc): void;
}

// UI Socket Types
interface IAction<T = object> {
  type: string;
  payload?: T;
  lang?: IUi.ILang;
}

type ISend = (action: IAction<{}>) => void;
type ISuccess<T = object> = (payload: T) => void;
type IFailure<T = object> = (payload: T) => void;
type IUiLogType = 'error' | 'info';
type IUiLog = (type: IUiLogType, payload: string) => void;

docs

configuration.md

index.md

internationalization.md

plugin-development.md

ui-components.md

tile.json