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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Umi Types

Name: tessl/npm-umi-types
Author: tessl

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;

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/umi-types@0.5.x
Publish Source: CLI
Badge