@jhongxu/components

React 组件库。

安装

pnpm add @jhongxu/components

Peer dependencies：react、react-dom、antd。

使用

推荐按子路径导入：

import { DialogProvider, useDialog, useFormDialog } from "@jhongxu/components/dialog";

根入口：

import { DialogProvider, useDialog, useFormDialog } from "@jhongxu/components";

在应用根部挂载 DialogProvider，再在子组件中使用 useDialog 或 useFormDialog 打开确认框 / 表单弹窗。

ErrorBoundary

import { ErrorBoundary } from "@jhongxu/components/error-boundary";

<ErrorBoundary>
  <LazyWidget />
</ErrorBoundary>;

• 默认 fallback 为 antd Result，含「重试」按钮
• 可通过 fallback / fallbackRender 覆盖
• 错误自动记录到 @jhongxu/utils/logging（tag: error-boundary）

能力边界：仅捕获子树 render / 生命周期 / 构造函数错误；不捕获事件处理器、async 或未 await 的 Promise 错误。

开发

vp install
vp test
vp pack

Storybook 位于 apps/storybook，stories 与组件同目录。

Tree-shaking 约定

本包已配置 unbundle 多入口构建、sideEffects: false 与 devExports（monorepo 开发时解析到源码）。

1. 按功能拆文件：UI、状态管理、hooks 分开（如 dialog-provider.tsx、dialog.store.ts、dialog.hook.tsx）。
2. 新公开模块加入 pack.entry：否则不会生成独立 dist 文件和 subpath export。
3. 禁止模块顶层副作用：不要在文件加载时创建单例、注册全局 listener 或 import 带副作用的 CSS。
4. 类型用 export type：确保类型在编译后被擦除，不进入运行时 bundle。
5. peer 依赖不要打进包：react、antd 等保持在 peerDependencies。
6. Stories 走源码 alias：Storybook 通过 alias 指向 src/，与 npm 消费 dist/ 的路径不同；发版前务必 vp pack 并在应用中验证 subpath 导入。
7. 消费方写法：import { useDialog } from "@jhongxu/components/dialog"；只用类型时写 import type { ... }。