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

Overview

Eval results

Files

Configuration Management

Name: tessl/npm-umi
Author: tessl

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.

Capabilities

Define Configuration

Creates type-safe configuration for umi applications with full TypeScript support.

/**
 * Type-safe configuration helper that provides TypeScript intellisense
 * @param config - Configuration object with all umi options
 * @returns The same configuration object with type checking
 */
function defineConfig(config: ConfigType): ConfigType;

type ConfigType = IConfigFromPlugins & IConfig;

Usage Examples:

import { defineConfig } from "umi";

// Basic configuration
export default defineConfig({
  routes: [
    { path: "/", component: "@/pages/index" },
    { path: "/about", component: "@/pages/about" },
  ],
  plugins: ["@umijs/plugin-react"],
});

// Advanced configuration with build and dev options
export default defineConfig({
  routes: [
    {
      path: "/",
      component: "@/layouts/index",
      routes: [
        { path: "/", component: "@/pages/index" },
        { path: "/users", component: "@/pages/users" },
      ],
    },
  ],
  plugins: [
    "@umijs/plugin-react",
    "@umijs/plugin-antd",
  ],
  antd: {
    dark: true,
  },
  devServer: {
    port: 3000,
    https: false,
  },
  build: {
    target: "es2017",
    minify: true,
  },
  alias: {
    "@/components": "./src/components",
    "@/utils": "./src/utils",
  },
});

Define Mock Data

Creates mock data configuration for development server API mocking.

/**
 * Type-safe mock data helper for API endpoint mocking
 * @param mockData - Object mapping API paths to mock responses
 * @returns The same mock data object with type checking
 */
function defineMock(mockData: { [key: string]: MockDeclare }): { [key: string]: MockDeclare };

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

Usage Examples:

import { defineMock } from "umi";

// Simple mock responses
export default defineMock({
  "GET /api/users": [
    { id: 1, name: "Alice", email: "alice@example.com" },
    { id: 2, name: "Bob", email: "bob@example.com" },
  ],
  "POST /api/users": { success: true, message: "User created" },
  "GET /api/status": "OK",
});

// Dynamic mock with Express middleware function
export default defineMock({
  "GET /api/users": (req, res) => {
    const { page = 1, limit = 10 } = req.query;
    res.json({
      data: generateUsers(Number(limit)),
      pagination: {
        page: Number(page),
        limit: Number(limit),
        total: 100,
      },
    });
  },
  "POST /api/login": (req, res) => {
    const { username, password } = req.body;
    if (username === "admin" && password === "password") {
      res.json({ token: "mock-jwt-token", user: { id: 1, username } });
    } else {
      res.status(401).json({ error: "Invalid credentials" });
    }
  },
});

Configuration Constants

Framework Configuration

Core configuration constants used throughout the framework.

// Minimum required Node.js version
const MIN_NODE_VERSION: 14;

// Development command name
const DEV_COMMAND: "dev";

// Framework name (configurable via environment)
const FRAMEWORK_NAME: string; // process.env.FRAMEWORK_NAME || 'umi'

// Default configuration file patterns
const DEFAULT_CONFIG_FILES: string[]; // ['.umirc.ts', '.umirc.js', 'config/config.ts', 'config/config.js']

// Runtime type definition filename
const RUNTIME_TYPE_FILE_NAME: "runtimeConfig.d.ts";

Type Definitions

// Complete configuration interface combining plugin and core config
type ConfigType = IConfigFromPlugins & IConfig;

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

// Express request handler type for dynamic mocks
type RequestHandler = (
  req: Request,
  res: Response,
  next: NextFunction
) => void;

Install with Tessl CLI