tessl/npm-umi

Enterprise-level, plugin-based React application framework with out-of-the-box functionality including routing, building, deployment, testing, and linting capabilities

—

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

Name: tessl/npm-umi
Author: tessl

Umi is an enterprise-level, plugin-based React application framework designed to provide a simple and enjoyable web development experience. It offers out-of-the-box functionality including built-in routing, building, deployment, testing, and linting capabilities. The framework is battle-tested in enterprise environments, being used by 10,000+ applications at companies like Alibaba, Tencent, ByteDance, NetEase, and Meituan.

Package Information

Package Name: umi
Package Type: npm
Language: TypeScript
Installation: npm install umi

Core Imports

import { defineConfig, defineMock, run, Service, RUNTIME_TYPE_FILE_NAME } from "umi";

For CommonJS:

const { defineConfig, defineMock, run, Service, RUNTIME_TYPE_FILE_NAME } = require("umi");

Client-side plugin imports:

import { PluginManager, ApplyPluginsType } from "umi/client";

Testing utilities:

import { configUmiAlias, getUmiAlias } from "umi/test";

Basic Usage

import { defineConfig } from "umi";

// Define configuration with TypeScript support
export default defineConfig({
  routes: [
    { path: "/", component: "@/pages/index" },
    { path: "/users", component: "@/pages/users" },
  ],
  plugins: ["@umijs/plugin-react"],
  devServer: {
    port: 3000,
  },
});

Architecture

Umi is built around several key components:

Core Service: Central service class that manages the application lifecycle, plugins, and configuration
Plugin System: Extensible plugin architecture with both server-side and client-side plugin management
CLI Interface: Command-line tools for development, building, and deployment
Configuration System: Type-safe configuration with helper functions
Testing Integration: Built-in testing utilities with alias resolution and Jest configuration
Build System: Dual build engines (Vite and Webpack) with performance optimizations

Capabilities

Configuration Management

Type-safe configuration system with helper functions for defining app configuration and mock data. Essential for setting up routing, plugins, build options, and development settings.

function defineConfig(config: ConfigType): ConfigType;
function defineMock(mockData: { [key: string]: MockDeclare }): typeof mockData;

Configuration

CLI and Service Management

Command-line interface and service management for running development servers, building applications, and executing framework commands.

function run(opts?: IOpts): Promise<void>;

class Service extends CoreService {
  constructor(opts?: any);
  run2(opts: { name: string; args?: any }): Promise<any>;
}

CLI and Service

Plugin System

Comprehensive plugin system supporting both server-side and client-side plugins with hook management, plugin registration, and execution control.

enum ApplyPluginsType {
  compose = "compose",
  modify = "modify", 
  event = "event"
}

class PluginManager {
  constructor(opts: { validKeys: string[] });
  register(plugin: IPlugin): void;
  applyPlugins(opts: ApplyPluginsOpts): any;
  static create(opts: { validKeys: string[]; plugins: IPlugin[] }): PluginManager;
}

Plugin System

Testing Utilities

Testing integration utilities for Jest configuration, alias resolution, and umi-specific testing setup.

function configUmiAlias(config: Config.InitialOptions): Promise<Config.InitialOptions>;
function getUmiAlias(): Promise<Record<string, string>>;
function getAliasPathWithKey(alias: Record<string, string>, key: string): string;

Testing

Types

// Main plugin API interface
interface IApi extends PluginAPI, IServicePluginAPI {
  // Extensive plugin API with add, modify, and event methods
}

// Route configuration
interface IRoute {
  path: string;
  component?: string;
  routes?: IRoute[];
  exact?: boolean;
  [key: string]: any;
}

// API request/response classes for API routes
class UmiApiRequest {
  params: Record<string, string>;
  body: any;
  headers: Record<string, string>;
  method: string;
  query: Record<string, string | string[]>;
  cookies: Record<string, string>;
  url: string;
  pathName: string;
  readBody(): Promise<any>;
}

class UmiApiResponse {
  status(code: number): UmiApiResponse;
  header(key: string, value: string): UmiApiResponse;
  setCookie(key: string, value: string): UmiApiResponse;
  end(data?: string): void;
  text(data: string): void;
  html(data: string): void;
  json(data: any): void;
}

// Configuration types
type ConfigType = IConfigFromPlugins & IConfig;

// Mock data types
type MockDeclare = string | number | null | undefined | boolean | Record<string, any> | RequestHandler;

// CLI options
interface IOpts {
  presets?: string[];
}

// Plugin interfaces
interface IPlugin {
  path?: string;
  apply: Record<string, any>;
}

interface ApplyPluginsOpts {
  key: string;
  type: ApplyPluginsType;
  initialValue?: any;
  args?: object;
  async?: boolean;
}