跳转到内容
Chameleon

物料开发

物料开发交付三部分：React 组件、物料 Meta、浏览器可加载资源。缺任意一项都会造成“能编辑不能预览”或“能预览不能编辑”。

交付物

交付物消费方必要条件
React 组件Render 预览/发布页用 componentName 放入 components 映射
Meta 数组Engine 组件库/属性面板与组件同名，包含 snippets 和 props
UMD JS/CSSEngine iframe 设计态URL 可访问，globalName 与资源包一致

推荐目录

my-material/
├── src/components/Notice.tsx
├── src/meta/notice.ts
├── src/meta/index.ts
├── src/index.ts
└── src/umd.ts

src/index.ts 导出 React 组件；src/meta/index.ts 导出 Meta；UMD 入口以资源包约定 globalName 暴露组件集合。

接入 Engine

import { Engine, InnerComponentMeta, plugins } from '@chamn/engine';
import { materialMeta } from '@acme/chameleon-material/meta';
import materialJSUrl from '@acme/chameleon-material/umd?url';
import materialCSSUrl from '@acme/chameleon-material/style.css?url';


const assetPackagesList = [
  {
    package: '@acme/chameleon-material',
    globalName: 'AcmeMaterial',
    resources: [{ src: materialJSUrl }, { src: materialCSSUrl }],
  },
];


<Engine
  plugins={plugins.DEFAULT_PLUGIN_LIST}
  schema={schema}
  material={[...InnerComponentMeta, ...materialMeta]}
  assetPackagesList={assetPackagesList}
/>;

接入 Render

import { Render, ReactAdapter } from '@chamn/render';
import * as AcmeMaterial from '@acme/chameleon-material';


<Render page={page} adapter={ReactAdapter} components={AcmeMaterial} />;

发布前检查

  • Meta、UMD、React 导出使用同一组 componentName。
  • 每个 snippets 生成组件可接受的默认 props。
  • 容器组件声明 isContainer，否则编辑器不允许拖入子节点。
  • 用真实部署 URL 在 iframe 内验证 UMD JS 和 CSS。
  • 用已保存 Schema 打开 Render，验证组件、样式和事件。

复杂面板、DOM 选择和权限控制见高级物料开发。