Ant Design Management Fast Framework

Common errors

• Module not found: Can't resolve 'antd-management-fast-framework'

  cause The package is not installed or incorrectly referenced in your `package.json`.
  fix Run `npm install antd-management-fast-framework` or `yarn add antd-management-fast-framework`.

• TypeError: Cannot read properties of undefined (reading 'Provider')

  cause This error typically indicates that a context provider expected by the framework or Ant Design itself is missing or incorrectly rendered higher up in the component tree.
  fix Ensure that `FrameworkApp` (or any equivalent top-level component) and `ConfigProvider` from Ant Design are correctly rendered at the root of your application, wrapping all components that rely on their contexts.

• Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

  cause A React hook provided by the framework (e.g., `useFrameworkContext`) is being called outside of a functional React component or a custom hook.
  fix Ensure all calls to `useFrameworkContext` or similar hooks are made strictly within the body of a functional React component or another custom hook following React's Rules of Hooks.

Warnings

• gotcha The framework's documentation is primarily in Chinese, which can be a significant barrier for non-Chinese speaking developers trying to understand its API, features, and advanced usage patterns. Relying on machine translation may lead to inaccuracies or misunderstandings.
  Fix: Consult the original Chinese documentation and use translation tools cautiously, cross-referencing with code examples if available. Consider contributing to community efforts for English documentation if possible.
• breaking As a comprehensive framework, `antd-management-fast-framework` might introduce breaking changes between minor or major versions without explicit English release notes. This can lead to unexpected runtime errors or build failures after updating.
  Fix: Carefully review the project's GitHub release history and commit messages (even if in Chinese) before upgrading. Test new versions thoroughly in a staging environment. Pin exact package versions to prevent unintended upgrades.
• gotcha Integrating `antd-management-fast-framework` with a pre-existing Ant Design setup or other React UI libraries can lead to styling conflicts, theme inconsistencies, or duplicate dependencies (e.g., multiple Ant Design versions), resulting in unexpected visual behavior or increased bundle size.
  Fix: Ensure a consistent Ant Design version across all dependencies. Utilize Ant Design's `ConfigProvider` for global theme management and ensure the framework integrates cleanly. Use bundler tools like Webpack or Rollup to deduplicate dependencies if conflicts arise.
• gotcha The framework likely bundles a significant amount of code due to its comprehensive nature, potentially leading to a large initial bundle size and slower load times for web applications if not properly optimized.
  Fix: Implement code splitting and lazy loading for routes and less frequently used components. Utilize tree-shaking features of modern bundlers. Analyze bundle size with tools like Webpack Bundle Analyzer to identify and optimize large chunks.

Install

• npm install antd-management-fast-framework npm
• yarn add antd-management-fast-framework yarn
• pnpm add antd-management-fast-framework pnpm

Imports

• FrameworkApp
  wrong:

  const FrameworkApp = require('antd-management-fast-framework').FrameworkApp;

  correct:

  import { FrameworkApp } from 'antd-management-fast-framework';

  Main application entry point. CommonJS `require` might not work correctly in modern bundlers without specific configuration or for ESM-only builds.
• useFrameworkContext
  wrong:

  import useFrameworkContext from 'antd-management-fast-framework/hooks/useFrameworkContext';

  correct:

  import { useFrameworkContext } from 'antd-management-fast-framework';

  A typical hook for accessing framework-wide context. Specific sub-paths for hooks are less common in modern libraries unless explicitly documented.
• FrameworkConfig
  wrong:

  import { FrameworkConfig } from 'antd-management-fast-framework';

  correct:

  import type { FrameworkConfig } from 'antd-management-fast-framework';

  Imports for TypeScript types should use `import type` for clarity and better tree-shaking, especially in newer TypeScript versions. Default named import is for values, not types.

Quickstart

Demonstrates the basic setup and rendering of the `FrameworkApp` with mock routes and configuration within a React application, integrating with Ant Design's `ConfigProvider`.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { FrameworkApp } from 'antd-management-fast-framework';
import { ConfigProvider } from 'antd';

// Minimal configuration for the framework
const frameworkConfig = {
  appName: 'My Admin Dashboard',
  logo: 'https://example.com/logo.svg',
  footerText: '© 2023 My Company',
  routes: [
    {
      path: '/',
      name: 'Dashboard',
      component: () => <div>Welcome to the Dashboard!</div>,
    },
    {
      path: '/settings',
      name: 'Settings',
      component: () => <div>User Settings Page</div>,
    },
  ],
  // Assume some authentication/authorization setup
  authProvider: {
    login: async (credentials: any) => { /* ... */ return { success: true }; },
    logout: async () => { /* ... */ return { success: true }; },
    checkAuth: async () => { /* ... */ return { authenticated: true }; },
  },
  // Theme configuration via Ant Design's ConfigProvider
  theme: {
    token: {
      colorPrimary: '#1890ff',
    },
  },
};

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <ConfigProvider theme={frameworkConfig.theme}>
      <FrameworkApp {...frameworkConfig} />
    </ConfigProvider>
  </React.StrictMode>
);