Lego Modules 与 wrappers

组件内核按 Lego Modules 编写：state / listeners / render，可选 wrappers / intercepters / effects。对外仍导出常规 React 组件（ConfigProvider 外壳 + 公开 Props）。

扩展路径

wrappers：换皮、槽位装饰、外层布局皮肤——不改内核 props。
intercepters：改写 listeners（埋点、权限拦截等）。
effects：DOM 适配（Escape 关闭等）；业务副作用尽量放适配层。

import {
  createComponent,
  createButtonWithWrappers,
  createHeroWithWrappers,
} from '@kotodama/lego-react';

const BadgeButton = createButtonWithWrappers([
  (node) => (
    <span className="my-wrap">
      <span className="badge">New</span>
      {node}
    </span>
  ),
]);

const BrandHero = createHeroWithWrappers([
  (node) => <div className="brand-hero-skin">{node}</div>,
]);

也可直接用 createComponent 自建模块，再 wrap 成业务组件。

可运行示例

Button wrappers：注入 leading badge + 外层描边，不改 ButtonProps。

Hero wrappers：外层品牌皮肤，内核 props 不变。

Lego wrappers

换皮不改内核

通过 createComponent wrappers 替换槽位与皮肤。

ON THIS PAGE