From c04ec1255d5ad531656deace0f032057b9c30ad3 Mon Sep 17 00:00:00 2001 From: "humphry.hy" Date: Mon, 13 Dec 2021 16:14:08 +0800 Subject: [PATCH 1/9] =?UTF-8?q?docs:=20=E4=BC=98=E5=8C=96=20types=20?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89=EF=BC=8C=E4=BD=BF=E5=BE=97?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E6=B3=A8=E9=87=8A=E8=83=BD=E5=9C=A8=20VSCode?= =?UTF-8?q?=20=E4=B8=AD=E6=AD=A3=E7=A1=AE=E8=A2=AB=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/types/src/assets.ts | 96 ++++++++++++++--- packages/types/src/field-config.ts | 10 +- packages/types/src/metadata.ts | 149 +++++++++++++++++++-------- packages/types/src/schema.ts | 51 +++++++-- packages/types/src/setting-target.ts | 58 ++++++++--- packages/types/src/value-type.ts | 24 +++-- 6 files changed, 288 insertions(+), 100 deletions(-) diff --git a/packages/types/src/assets.ts b/packages/types/src/assets.ts index 3afed1221..082e85cf7 100644 --- a/packages/types/src/assets.ts +++ b/packages/types/src/assets.ts @@ -2,34 +2,100 @@ import { NpmInfo } from './npm'; import { PropConfig } from './prop-config'; import { Snippet, ComponentMetadata } from './metadata'; -export interface Package { // 应该被编辑器默认加载，定义组件大包及external资源的信息 - package: string; // 包名 - version: string; // 包版本号 - urls?: string[] | any; // 组件渲染态视图打包后的 CDN url 列表，包含 js 和 css - editUrls?: string[] | any; // 组件编辑态视图打包后的 CDN url 列表，包含 js 和 css - library: string; // 作为全局变量引用时的名称，和webpack output.library字段含义一样，用来定义全局变量名 - async?: boolean, +/** + * 应该被编辑器默认加载，定义组件大包及external资源的信息 + */ +export interface Package { + /** + * 包名 + */ + package: string; + /** + * 包版本号 + */ + version: string; + /** + * 组件渲染态视图打包后的 CDN url 列表，包含 js 和 css + */ + urls?: string[] | any; + /** + * 组件编辑态视图打包后的 CDN url 列表，包含 js 和 css + */ + editUrls?: string[] | any; + /** + * 作为全局变量引用时的名称，和webpack output.library字段含义一样，用来定义全局变量名 + */ + library: string; + /** + * 待补充文档 + */ + async?: boolean; + /** + * 待补充文档 + */ exportName?: string; } -export interface ComponentCategory { // 组件分类 - title: string; // 组件分类title - icon?: string; // 组件分类icon - children?: ComponentItem[] | ComponentCategory[]; // 可能有子分类 +/** + * 组件分类 + */ +export interface ComponentCategory { + /** + * 组件分类title + */ + title: string; + /** + * 组件分类icon + */ + icon?: string; + /** + * 可能有子分类 + */ + children?: ComponentItem[] | ComponentCategory[]; } -export interface ComponentItem { // 组件 - title: string; // 组件title - componentName?: string; // 组件名 - icon?: string; // 组件icon +/** + * 组件 + */ +export interface ComponentItem { + /** + * 组件title + */ + title: string; + /** + * 组件名 + */ + componentName?: string; + /** + * 组件icon + */ + icon?: string; + /** + * 待补充文档 + */ snippets?: Snippet[]; } +/** + * 本地物料描述 + */ export interface ComponentDescription extends ComponentMetadata { + /** + * 待补充文档 + */ keywords: string[]; } +/** + * 远程物料描述 + */ export interface RemoteComponentDescription { + /** + * 待补充文档 + */ exportName: string; + /** + * 待补充文档 + */ url: string; } diff --git a/packages/types/src/field-config.ts b/packages/types/src/field-config.ts index d5cb88bc5..3ae48e3df 100644 --- a/packages/types/src/field-config.ts +++ b/packages/types/src/field-config.ts @@ -1,6 +1,7 @@ import { TitleContent } from './title'; import { SetterType, DynamicSetter } from './setter-config'; import { SettingTarget } from './setting-target'; +import { LiveTextEditingConfig } from './metadata'; export interface FieldExtraProps { /** @@ -49,13 +50,8 @@ export interface FieldExtraProps { * compatiable vision display */ display?: 'accordion' | 'inline' | 'block' | 'plain' | 'popup' | 'entry'; - liveTextEditing?: { - selector: string; - // 编辑模式 纯文本|段落编辑|文章编辑（默认纯文本，无跟随工具条） - mode?: 'plaintext' | 'paragraph' | 'article'; - // 从 contentEditable 获取内容并设置到属性 - onSaveContent?: (content: string, prop: any) => any; - }; + // todo 这个 omit 是否合理？ + liveTextEditing?: Omit; } export interface FieldConfig extends FieldExtraProps { diff --git a/packages/types/src/metadata.ts b/packages/types/src/metadata.ts index 3d6670322..d8fa1c18c 100644 --- a/packages/types/src/metadata.ts +++ b/packages/types/src/metadata.ts @@ -11,15 +11,25 @@ import { I18nData } from './i18n'; export type NestingFilter = (testNode: any, currentNode: any) => boolean; export interface NestingRule { - // 子级白名单 + /** + * 子级白名单 + */ childWhitelist?: string[] | string | RegExp | NestingFilter; - // 父级白名单 + /** + * 父级白名单 + */ parentWhitelist?: string[] | string | RegExp | NestingFilter; - // 后裔白名单 + /** + * 后裔白名单 + */ descendantWhitelist?: string[] | string | RegExp | NestingFilter; - // 后裔黑名单 + /** + * 后裔黑名单 + */ descendantBlacklist?: string[] | string | RegExp | NestingFilter; - // 祖先白名单 可用来做区域高亮 + /** + * 祖先白名单 可用来做区域高亮 + */ ancestorWhitelist?: string[] | string | RegExp | NestingFilter; } @@ -33,15 +43,18 @@ export interface ComponentConfigure { isMinimalRenderUnit?: boolean; rootSelector?: string; - // copy, move, remove | * + /** + * copy, move, remove | * + */ disableBehaviors?: string[] | string; actions?: ComponentAction[]; } export interface Snippet { - screenshot: string; - label: string; - schema: NodeSchema; + title?: string; + screenshot?: string; + label?: string; + schema?: NodeSchema; } export interface InitialItem { @@ -62,47 +75,65 @@ export interface Experimental { context?: { [contextInfoName: string]: any }; snippets?: Snippet[]; view?: ComponentType; - transducers?: any; // ? should support + transducers?: any; + /** + * @deprecated + */ initials?: InitialItem[]; filters?: FilterItem[]; autoruns?: AutorunItem[]; callbacks?: Callbacks; initialChildren?: NodeData[] | ((target: SettingTarget) => NodeData[]); - isAbsoluteLayoutContainer: boolean; + isAbsoluteLayoutContainer?: boolean; hideSelectTools?: boolean; - // 样式 及 位置，handle上必须有明确的标识以便事件路由判断，或者主动设置事件独占模式 - // NWSE 是交给引擎计算放置位置，ReactElement 必须自己控制初始位置 + /** + * 样式 及 位置，handle上必须有明确的标识以便事件路由判断，或者主动设置事件独占模式 + * NWSE 是交给引擎计算放置位置，ReactElement 必须自己控制初始位置 + * - hover 时控制柄高亮 + * - mousedown 时请求独占 + * - dragstart 请求通用 resizing 控制 请求 hud 显示 + * - drag 时 计算并设置效果，更新控制柄位置 + */ getResizingHandlers?: ( currentNode: any, - ) => - | Array<{ - type: 'N' | 'W' | 'S' | 'E' | 'NW' | 'NE' | 'SE' | 'SW'; - content?: ReactElement; - propTarget?: string; - appearOn?: 'mouse-enter' | 'mouse-hover' | 'selected' | 'always'; - }> - | ReactElement[]; - // hover时 控制柄高亮 - // mousedown 时请求独占 - // dragstart 请求 通用 resizing 控制 - // 请求 hud 显示 - // drag 时 计算 并 设置效果 - // 更新控制柄位置 + ) => ( + | Array<{ + type: 'N' | 'W' | 'S' | 'E' | 'NW' | 'NE' | 'SE' | 'SW'; + content?: ReactElement; + propTarget?: string; + appearOn?: 'mouse-enter' | 'mouse-hover' | 'selected' | 'always'; + }> + | ReactElement[] + ); - // 纯文本编辑：如果 children 内容是 - // 文本编辑：配置 + /** + * Live Text Editing：如果 children 内容是纯文本，支持双击直接编辑 + */ liveTextEditing?: LiveTextEditingConfig[]; isTopFixed?: boolean; } // thinkof Array +/** + * Live Text Editing（如果 children 内容是纯文本，支持双击直接编辑）的可配置项目 + */ export interface LiveTextEditingConfig { + /** + * 待补充文档 + */ propTarget: string; + /** + * 待补充文档 + */ selector?: string; - // 编辑模式 纯文本|段落编辑|文章编辑（默认纯文本，无跟随工具条） + /** + * 编辑模式 纯文本|段落编辑|文章编辑（默认纯文本，无跟随工具条） + */ mode?: 'plaintext' | 'paragraph' | 'article'; - // 从 contentEditable 获取内容并设置到属性 + /** + * 从 contentEditable 获取内容并设置到属性 + */ onSaveContent?: (content: string, prop: any) => any; } @@ -129,24 +160,41 @@ export interface Configure { } export interface ActionContentObject { - // 图标 + /** + * 图标 + */ icon?: IconType; - // 描述 + /** + * 描述 + */ title?: TipContent; - // 执行动作 + /** + * 执行动作 + */ action?: (currentNode: any) => void; } export interface ComponentAction { - // behaviorName + /** + * behaviorName + */ name: string; - // 菜单名称 + /** + * 菜单名称 + */ content: string | ReactNode | ActionContentObject; - // 子集 + /** + * 子集 + */ items?: ComponentAction[]; - // 显示与否，always: 无法禁用 + /** + * 显示与否 + * always: 无法禁用 + */ condition?: boolean | ((currentNode: any) => boolean) | 'always'; - // 显示在工具条上 + /** + * 显示在工具条上 + */ important?: boolean; } @@ -188,21 +236,32 @@ export interface TransformedComponentMetadata extends ComponentMetadata { configure: Configure & { combined?: FieldConfig[] }; } -// handleResizing +/** + * handleResizing + */ -// hooks & events +/** + * hooks & events + */ export interface Callbacks { - // hooks + /** + * hooks + */ + + onMouseDownHook?: (e: MouseEvent, currentNode: any) => any; onDblClickHook?: (e: MouseEvent, currentNode: any) => any; onClickHook?: (e: MouseEvent, currentNode: any) => any; // onLocateHook?: (e: any, currentNode: any) => any; // onAcceptHook?: (currentNode: any, locationData: any) => any; - onMoveHook?: (currentNode: any) => boolean; // thinkof 限制性拖拽 + onMoveHook?: (currentNode: any) => boolean; + // thinkof 限制性拖拽 onHoverHook?: (currentNode: any) => boolean; onChildMoveHook?: (childNode: any, currentNode: any) => boolean; - // events + /** + * events + */ onNodeRemove?: (removedNode: any, currentNode: any) => void; onNodeAdd?: (addedNode: any, currentNode: any) => void; onSubtreeModified?: (currentNode: any, options: any) => void; @@ -230,4 +289,4 @@ export interface Callbacks { }, currentNode: any, ) => void; -} \ No newline at end of file +} diff --git a/packages/types/src/schema.ts b/packages/types/src/schema.ts index 8ca0f2b5f..fb015a041 100644 --- a/packages/types/src/schema.ts +++ b/packages/types/src/schema.ts @@ -11,20 +11,48 @@ import { I18nMap } from './i18n'; import { UtilsMap } from './utils'; import { AppConfig } from './app-config'; -// 搭建基础协议 - 单个组件树节点描述 // 转换成一个 .jsx 文件内 React Class 类 render 函数返回的 jsx 代码 +/** + * 搭建基础协议 - 单个组件树节点描述 + */ export interface NodeSchema { id?: string; - componentName: string; // 组件名称 必填、首字母大写 - props?: PropsMap | PropsList; // 组件属性对象 + /** + * 组件名称 必填、首字母大写 + */ + componentName: string; + /** + * 组件属性对象 + */ + props?: PropsMap | PropsList; + /** + * 组件属性对象 + */ leadingComponents?: string; - condition?: CompositeValue; // 渲染条件 - loop?: CompositeValue; // 循环数据 - loopArgs?: [string, string]; // 循环迭代对象、索引名称 ["item", "index"] - children?: NodeData | NodeData[]; // 子节点 - isLocked?: boolean; // 是否锁定 + /** + * 渲染条件 + */ + condition?: CompositeValue; + /** + * 循环数据 + */ + loop?: CompositeValue; + /** + * 循环迭代对象、索引名称 ["item", "index"] + */ + loopArgs?: [string, string]; + /** + * 子节点 + */ + children?: NodeData | NodeData[]; + /** + * 是否锁定 + */ + isLocked?: boolean; - // ------- future support ----- + /** + * ------- future support ----- + */ conditionGroup?: string; title?: string; ignore?: boolean; @@ -50,7 +78,10 @@ export function isDOMText(data: any): data is DOMText { export type DOMText = string; export interface ContainerSchema extends NodeSchema { - componentName: string; // 'Block' | 'Page' | 'Component'; + /** + * 'Block' | 'Page' | 'Component'; + */ + componentName: string; fileName: string; meta?: Record; state?: { diff --git a/packages/types/src/setting-target.ts b/packages/types/src/setting-target.ts index 571ea8022..cccc170f7 100644 --- a/packages/types/src/setting-target.ts +++ b/packages/types/src/setting-target.ts @@ -31,31 +31,55 @@ export interface SettingTarget { */ readonly top: SettingTarget; - // 父级 + /** + * 父级 + */ readonly parent: SettingTarget; - // 获取当前值 - getValue(): any; + /** + * 获取当前值 + */ + getValue: () => any; - // 设置当前值 - setValue(value: any): void; + /** + * 设置当前值 + */ + setValue: (value: any) => void; - // 取得子项 - get(propName: string | number): SettingTarget | null; + /** + * 取得子项 + */ + get: (propName: string | number) => SettingTarget | null; - // 获取子项属性值 - getPropValue(propName: string | number): any; + /** + * 获取子项属性值 + */ + getPropValue: (propName: string | number) => any; - // 设置子项属性值 - setPropValue(propName: string | number, value: any): void; + /** + * 设置子项属性值 + */ + setPropValue: (propName: string | number, value: any) => void; - // 清除已设置值 - clearPropValue(propName: string | number): void; + /** + * 清除已设置值 + */ + clearPropValue: (propName: string | number) => void; - // 获取顶层附属属性值 - getExtraPropValue(propName: string): any; + /** + * 获取顶层附属属性值 + */ + getExtraPropValue: (propName: string) => any; - // 设置顶层附属属性值 - setExtraPropValue(propName: string, value: any): void; + /** + * 设置顶层附属属性值 + */ + setExtraPropValue: (propName: string, value: any) => void; + + // todo 补充 node 定义 + /** + * 获取 node 中的第一项 + */ + getNode: () => any; } diff --git a/packages/types/src/value-type.ts b/packages/types/src/value-type.ts index 98a970704..c475ebf96 100644 --- a/packages/types/src/value-type.ts +++ b/packages/types/src/value-type.ts @@ -1,6 +1,8 @@ import { NodeSchema, NodeData } from './schema'; -// 表达式 +/** + * 表达式 + */ export interface JSExpression { type: 'JSExpression'; /** @@ -15,7 +17,9 @@ export interface JSExpression { compiled?: string; } -// 函数 +/** + * 函数 + */ export interface JSFunction { type: 'JSFunction'; /** @@ -40,7 +44,9 @@ export interface JSFunction { compiled?: string; } -// 函数 +/** + * 函数 + */ export interface JSFunction { type: 'JSFunction'; /** @@ -60,7 +66,9 @@ export interface JSFunction { export interface JSSlot { type: 'JSSlot'; title?: string; - // 函数的入参 + /** + * 函数的入参 + */ params?: string[]; value?: NodeData[] | NodeData; name?: string; @@ -71,7 +79,9 @@ export interface JSBlock { value: NodeSchema; } -// JSON 基本类型 +/** + * JSON 基本类型 + */ export type JSONValue = | boolean | string @@ -85,7 +95,9 @@ export interface JSONObject { [key: string]: JSONValue; } -// 复合类型 +/** + * 复合类型 + */ export type CompositeValue = | JSONValue | JSExpression From 43a2a2ffbd88e4c5e6e5dff20d4bd1d7dde517f5 Mon Sep 17 00:00:00 2001 From: "humphry.hy" Date: Mon, 13 Dec 2021 16:40:30 +0800 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E7=89=A9?= =?UTF-8?q?=E6=96=99=E8=A7=84=E8=8C=83=E5=B7=B2=E7=BB=8F=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E7=9A=84=E9=83=A8=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../designer/src/designer/setting/setting-entry.ts | 2 +- packages/types/src/field-config.ts | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/designer/src/designer/setting/setting-entry.ts b/packages/designer/src/designer/setting/setting-entry.ts index 6db545c70..9a2600546 100644 --- a/packages/designer/src/designer/setting/setting-entry.ts +++ b/packages/designer/src/designer/setting/setting-entry.ts @@ -13,5 +13,5 @@ export interface SettingEntry extends SettingTarget { // 父级 readonly parent: SettingEntry; - get(propName: string | number): SettingEntry | null; + get: (propName: string | number) => SettingEntry | null; } diff --git a/packages/types/src/field-config.ts b/packages/types/src/field-config.ts index 3ae48e3df..1474cb54b 100644 --- a/packages/types/src/field-config.ts +++ b/packages/types/src/field-config.ts @@ -52,6 +52,10 @@ export interface FieldExtraProps { display?: 'accordion' | 'inline' | 'block' | 'plain' | 'popup' | 'entry'; // todo 这个 omit 是否合理？ liveTextEditing?: Omit; + /** + * 待文档定义 + */ + onChange?: (value: any, field: SettingTarget) => void; } export interface FieldConfig extends FieldExtraProps { @@ -77,4 +81,12 @@ export interface FieldConfig extends FieldExtraProps { * extra props for field */ extraProps?: FieldExtraProps; + /** + * 待文档定义 + */ + description?: TitleContent; + /** + * 待文档定义 + */ + isExtends?: boolean; } From 1a2f82154b328eeaacb35adf5a6a942d32fe71da Mon Sep 17 00:00:00 2001 From: "humphry.hy" Date: Mon, 13 Dec 2021 17:33:45 +0800 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/types/src/assets.ts | 36 ++++++++++++++++++++++-------- packages/types/src/field-config.ts | 8 ++----- packages/types/src/metadata.ts | 7 +++--- 3 files changed, 32 insertions(+), 19 deletions(-) diff --git a/packages/types/src/assets.ts b/packages/types/src/assets.ts index 082e85cf7..abd963d67 100644 --- a/packages/types/src/assets.ts +++ b/packages/types/src/assets.ts @@ -3,7 +3,7 @@ import { PropConfig } from './prop-config'; import { Snippet, ComponentMetadata } from './metadata'; /** - * 应该被编辑器默认加载，定义组件大包及external资源的信息 + * 定义组件大包及external资源的信息，应该被编辑器默认加载 */ export interface Package { /** @@ -27,11 +27,11 @@ export interface Package { */ library: string; /** - * 待补充文档 + * todo 待补充文档 */ async?: boolean; /** - * 待补充文档 + * 组件描述导出名字，可以通过 window[exportName] 获取到组件描述的 Object 内容； */ exportName?: string; } @@ -71,9 +71,21 @@ export interface ComponentItem { */ icon?: string; /** - * 待补充文档 + * 可用片段 */ snippets?: Snippet[]; + /** + * 一级分组 + */ + group?: string; + /** + * 二级分组 + */ + category?: string; + /** + * 组件优先级排序 + */ + priority?: number; } /** @@ -81,7 +93,7 @@ export interface ComponentItem { */ export interface ComponentDescription extends ComponentMetadata { /** - * 待补充文档 + * todo 待补充文档 */ keywords: string[]; } @@ -91,11 +103,17 @@ export interface ComponentDescription extends ComponentMetadata { */ export interface RemoteComponentDescription { /** - * 待补充文档 + * 组件描述导出名字，可以通过 window[exportName] 获取到组件描述的 Object 内容； */ - exportName: string; + exportName?: string; /** - * 待补充文档 + * 组件描述的资源链接； */ - url: string; + url?: string; + /** + * 组件(库)的 npm 信息； + */ + package?: { + npm?: string; + }; } diff --git a/packages/types/src/field-config.ts b/packages/types/src/field-config.ts index 1474cb54b..c193a8ff0 100644 --- a/packages/types/src/field-config.ts +++ b/packages/types/src/field-config.ts @@ -52,10 +52,6 @@ export interface FieldExtraProps { display?: 'accordion' | 'inline' | 'block' | 'plain' | 'popup' | 'entry'; // todo 这个 omit 是否合理？ liveTextEditing?: Omit; - /** - * 待文档定义 - */ - onChange?: (value: any, field: SettingTarget) => void; } export interface FieldConfig extends FieldExtraProps { @@ -82,11 +78,11 @@ export interface FieldConfig extends FieldExtraProps { */ extraProps?: FieldExtraProps; /** - * 待文档定义 + * todo 待补充文档 */ description?: TitleContent; /** - * 待文档定义 + * todo 待补充文档 */ isExtends?: boolean; } diff --git a/packages/types/src/metadata.ts b/packages/types/src/metadata.ts index d8fa1c18c..75164872a 100644 --- a/packages/types/src/metadata.ts +++ b/packages/types/src/metadata.ts @@ -120,15 +120,16 @@ export interface Experimental { */ export interface LiveTextEditingConfig { /** - * 待补充文档 + * todo 待补充文档 */ propTarget: string; /** - * 待补充文档 + * todo 待补充文档 */ selector?: string; /** * 编辑模式 纯文本|段落编辑|文章编辑（默认纯文本，无跟随工具条） + * @default 'plaintext' */ mode?: 'plaintext' | 'paragraph' | 'article'; /** @@ -247,8 +248,6 @@ export interface Callbacks { /** * hooks */ - - onMouseDownHook?: (e: MouseEvent, currentNode: any) => any; onDblClickHook?: (e: MouseEvent, currentNode: any) => any; onClickHook?: (e: MouseEvent, currentNode: any) => any; From 820f8c046cda27eebdc75006793ec92a9a1f5089 Mon Sep 17 00:00:00 2001 From: "humphry.hy" Date: Mon, 13 Dec 2021 19:47:11 +0800 Subject: [PATCH 4/9] =?UTF-8?q?docs:=20=E5=8F=82=E7=85=A7=E5=8D=8F?= =?UTF-8?q?=E8=AE=AE=E8=A7=84=E8=8C=83=EF=BC=8C=E5=AE=8C=E5=96=84=E6=89=80?= =?UTF-8?q?=E6=9C=89=20schema=20=E5=92=8C=20asset=20=E7=9B=B8=E5=85=B3?= =?UTF-8?q?=E6=8F=8F=E8=BF=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/types/src/assets.ts | 11 +- packages/types/src/field-config.ts | 15 +- packages/types/src/metadata.ts | 198 +++++++++++++++++++++++++-- packages/types/src/npm.ts | 24 ++++ packages/types/src/prop-config.ts | 18 +++ packages/types/src/schema.ts | 77 ++++++++++- packages/types/src/setting-target.ts | 2 +- packages/types/src/value-type.ts | 29 +--- 8 files changed, 327 insertions(+), 47 deletions(-) diff --git a/packages/types/src/assets.ts b/packages/types/src/assets.ts index abd963d67..b7f11f646 100644 --- a/packages/types/src/assets.ts +++ b/packages/types/src/assets.ts @@ -1,6 +1,7 @@ import { NpmInfo } from './npm'; import { PropConfig } from './prop-config'; import { Snippet, ComponentMetadata } from './metadata'; +import { I18nData } from './i18n'; /** * 定义组件大包及external资源的信息，应该被编辑器默认加载 @@ -27,7 +28,7 @@ export interface Package { */ library: string; /** - * todo 待补充文档 + * @todo 待补充文档 */ async?: boolean; /** @@ -77,11 +78,13 @@ export interface ComponentItem { /** * 一级分组 */ - group?: string; + group?: string | I18nData; + /** * 二级分组 */ - category?: string; + category?: string | I18nData; + /** * 组件优先级排序 */ @@ -93,7 +96,7 @@ export interface ComponentItem { */ export interface ComponentDescription extends ComponentMetadata { /** - * todo 待补充文档 + * @todo 待补充文档 */ keywords: string[]; } diff --git a/packages/types/src/field-config.ts b/packages/types/src/field-config.ts index c193a8ff0..3ad842ed8 100644 --- a/packages/types/src/field-config.ts +++ b/packages/types/src/field-config.ts @@ -50,11 +50,20 @@ export interface FieldExtraProps { * compatiable vision display */ display?: 'accordion' | 'inline' | 'block' | 'plain' | 'popup' | 'entry'; - // todo 这个 omit 是否合理？ + // @todo 这个 omit 是否合理？ + /** + * @todo 待补充文档 + */ liveTextEditing?: Omit; } +/** + * 属性面板配置 + */ export interface FieldConfig extends FieldExtraProps { + /** + * @todo 待补充文档 + */ type?: 'field' | 'group'; /** * the name of this setting field, which used in quickEditor @@ -78,11 +87,11 @@ export interface FieldConfig extends FieldExtraProps { */ extraProps?: FieldExtraProps; /** - * todo 待补充文档 + * @todo 待补充文档 */ description?: TitleContent; /** - * todo 待补充文档 + * @todo 待补充文档 */ isExtends?: boolean; } diff --git a/packages/types/src/metadata.ts b/packages/types/src/metadata.ts index 75164872a..eb86910b5 100644 --- a/packages/types/src/metadata.ts +++ b/packages/types/src/metadata.ts @@ -9,7 +9,14 @@ import { NodeSchema, NodeData, ComponentSchema } from './schema'; import { SettingTarget } from './setting-target'; import { I18nData } from './i18n'; +/** + * 嵌套控制函数 + */ export type NestingFilter = (testNode: any, currentNode: any) => boolean; +/** + * 嵌套控制 + * 防止错误的节点嵌套，比如 a 嵌套 a, FormField 只能在 Form 容器下，Column 只能在 Table 下等 + */ export interface NestingRule { /** * 子级白名单 @@ -33,26 +40,64 @@ export interface NestingRule { ancestorWhitelist?: string[] | string | RegExp | NestingFilter; } +/** + * 组件能力配置 + */ export interface ComponentConfigure { + /** + * 是否容器组件 + */ isContainer?: boolean; + /** + * 组件是否带浮层，浮层组件拖入设计器时会遮挡画布区域，此时应当辅助一些交互以防止阻挡 + */ isModal?: boolean; + /** + * 是否存在渲染的根节点 + */ isNullNode?: boolean; + /** + * 组件树描述信息 + */ descriptor?: string; + /** + * 嵌套控制：防止错误的节点嵌套 + * 比如 a 嵌套 a, FormField 只能在 Form 容器下，Column 只能在 Table 下等 + */ nestingRule?: NestingRule; + /** + * 是否是最小渲染单元 + * 最小渲染单元下的组件渲染和更新都从单元的根节点开始渲染和更新。如果嵌套了多层最小渲染单元，渲染会从最外层的最小渲染单元开始渲染。 + */ isMinimalRenderUnit?: boolean; + /** + * 组件选中框的 cssSelector + */ rootSelector?: string; /** - * copy, move, remove | * + * 禁用的行为，可以为 `'copy'`, `'move'`, `'remove'` 或它们组成的数组 */ disableBehaviors?: string[] | string; + /** + * 用于详细配置上述操作项的内容 + */ actions?: ComponentAction[]; } export interface Snippet { + /** + * 组件分类title + */ title?: string; + /** + * snippet 截图 + */ screenshot?: string; + /** + * @todo snippet 打标 + */ label?: string; schema?: NodeSchema; } @@ -70,26 +115,61 @@ export interface AutorunItem { autorun: (target: SettingTarget) => any; } - +/** + * 试验特性配置 + */ export interface Experimental { + /** + * @todo 待补充文档 + */ context?: { [contextInfoName: string]: any }; + /** + * @todo 待补充文档 + */ snippets?: Snippet[]; + /** + * @todo 待补充文档 + */ view?: ComponentType; + /** + * @todo 待补充文档 + */ transducers?: any; /** - * @deprecated + * @deprecated 用于动态初始化拖拽到设计器里的组件的 prop 的值 */ initials?: InitialItem[]; + /** + * @todo 待补充文档 + */ filters?: FilterItem[]; + /** + * @todo 待补充文档 + */ autoruns?: AutorunItem[]; + /** + * 配置 callbacks 可捕获引擎抛出的一些事件，例如 onNodeAdd、onResize 等 + */ callbacks?: Callbacks; + /** + * @todo 待补充文档 + */ initialChildren?: NodeData[] | ((target: SettingTarget) => NodeData[]); + /** + * @todo 待补充文档 + */ isAbsoluteLayoutContainer?: boolean; + /** + * @todo 待补充文档 + */ hideSelectTools?: boolean; /** * 样式 及 位置，handle上必须有明确的标识以便事件路由判断，或者主动设置事件独占模式 * NWSE 是交给引擎计算放置位置，ReactElement 必须自己控制初始位置 + */ + /** + * 用于配置设计器中组件 resize 操作工具的样式和内容 * - hover 时控制柄高亮 * - mousedown 时请求独占 * - dragstart 请求通用 resizing 控制 请求 hud 显示 @@ -111,6 +191,10 @@ export interface Experimental { * Live Text Editing：如果 children 内容是纯文本，支持双击直接编辑 */ liveTextEditing?: LiveTextEditingConfig[]; + + /** + * @todo 待补充文档 + */ isTopFixed?: boolean; } @@ -120,11 +204,11 @@ export interface Experimental { */ export interface LiveTextEditingConfig { /** - * todo 待补充文档 + * @todo 待补充文档 */ propTarget: string; /** - * todo 待补充文档 + * @todo 待补充文档 */ selector?: string; /** @@ -144,22 +228,58 @@ export type ConfigureSupportEvent = string | { description?: string; }; -export type ConfigureSupport = { +/** + * 通用扩展面板支持性配置 + */ +export interface ConfigureSupport { + /** + * 支持事件列表 + */ events?: ConfigureSupportEvent[]; + /** + * 支持 className 设置 + */ className?: boolean; + /** + * 支持样式设置 + */ style?: boolean; + /** + * 支持生命周期设置 + */ lifecycles?: any[]; // general?: boolean; + /** + * 支持循环设置 + */ loop?: boolean; + /** + * 支持条件式渲染设置 + */ condition?: boolean; -}; +} +/** + * 编辑体验配置 + */ export interface Configure { + /** + * 属性面板配置 + */ props?: FieldConfig[]; + /** + * 组件能力配置 + */ component?: ComponentConfigure; + /** + * 通用扩展面板支持性配置 + */ supports?: ConfigureSupport; } +/** + * 动作描述 + */ export interface ActionContentObject { /** * 图标 @@ -175,6 +295,9 @@ export interface ActionContentObject { action?: (currentNode: any) => void; } +/** + * @todo 工具条动作 + */ export interface ComponentAction { /** * behaviorName @@ -203,7 +326,13 @@ export function isActionContentObject(obj: any): obj is ActionContentObject { return obj && typeof obj === 'object'; } +/** + * 组件 meta 配置 + */ export interface ComponentMetadata { + /** + * 组件名 + */ componentName: string; /** * unique id @@ -217,22 +346,67 @@ export interface ComponentMetadata { * svg icon for component */ icon?: IconType; + /** + * 组件标签 + */ tags?: string[]; + /** + * 组件描述 + */ description?: string; + /** + * 组件文档链接 + */ docUrl?: string; + /** + * 组件快照 + */ screenshot?: string; + /** + * 组件研发模式 + */ devMode?: 'procode' | 'lowcode'; + /** + * npm 源引入完整描述对象 + */ npm?: NpmInfo; + /** + * 组件属性信息 + */ props?: PropConfig[]; + /** + * 编辑体验增强 + */ configure?: FieldConfig[] | Configure; + /** + * 试验特性配置 + */ experimental?: Experimental; + /** + * @todo 待补充文档 + */ schema?: ComponentSchema; + /** + * 可用片段 + */ snippets?: Snippet[]; + /** + * 一级分组 + */ group?: string | I18nData; + /** + * 二级分组 + */ category?: string | I18nData; + /** + * 组件优先级排序 + */ priority?: number; } +/** + * @todo 待补充文档 + */ export interface TransformedComponentMetadata extends ComponentMetadata { configure: Configure & { combined?: FieldConfig[] }; } @@ -242,12 +416,10 @@ export interface TransformedComponentMetadata extends ComponentMetadata { */ /** - * hooks & events + * 配置 callbacks 可捕获引擎抛出的一些事件，例如 onNodeAdd、onResize 等 */ export interface Callbacks { - /** - * hooks - */ + // hooks onMouseDownHook?: (e: MouseEvent, currentNode: any) => any; onDblClickHook?: (e: MouseEvent, currentNode: any) => any; onClickHook?: (e: MouseEvent, currentNode: any) => any; @@ -258,9 +430,7 @@ export interface Callbacks { onHoverHook?: (currentNode: any) => boolean; onChildMoveHook?: (childNode: any, currentNode: any) => boolean; - /** - * events - */ + // events onNodeRemove?: (removedNode: any, currentNode: any) => void; onNodeAdd?: (addedNode: any, currentNode: any) => void; onSubtreeModified?: (currentNode: any, options: any) => void; diff --git a/packages/types/src/npm.ts b/packages/types/src/npm.ts index 3683e40da..837dc18d0 100644 --- a/packages/types/src/npm.ts +++ b/packages/types/src/npm.ts @@ -1,10 +1,34 @@ +/** + * npm 源引入完整描述对象 + */ export interface NpmInfo { + /** + * 源码组件名称 + */ componentName?: string; + /** + * 源码组件库名 + */ package: string; + /** + * 源码组件版本号 + */ version?: string; + /** + * 是否解构 + */ destructuring?: boolean; + /** + * 源码组件名称 + */ exportName?: string; + /** + * 子组件名 + */ subName?: string; + /** + * 组件路径 + */ main?: string; } diff --git a/packages/types/src/prop-config.ts b/packages/types/src/prop-config.ts index ba97b4396..5029ba2b3 100644 --- a/packages/types/src/prop-config.ts +++ b/packages/types/src/prop-config.ts @@ -38,10 +38,28 @@ export interface Exact { isRequired?: boolean; } +/** + * 组件属性信息 + */ export interface PropConfig { + /** + * 属性名称 + */ name: string; + /** + * 属性类型 + */ propType: PropType; + /** + * 属性描述 + */ description?: string; + /** + * 属性默认值 + */ defaultValue?: any; + /** + * @todo 待补充文档 + */ setter?: any; } diff --git a/packages/types/src/schema.ts b/packages/types/src/schema.ts index fb015a041..c4cb728f5 100644 --- a/packages/types/src/schema.ts +++ b/packages/types/src/schema.ts @@ -12,6 +12,7 @@ import { UtilsMap } from './utils'; import { AppConfig } from './app-config'; // 转换成一个 .jsx 文件内 React Class 类 render 函数返回的 jsx 代码 + /** * 搭建基础协议 - 单个组件树节点描述 */ @@ -50,9 +51,7 @@ export interface NodeSchema { */ isLocked?: boolean; - /** - * ------- future support ----- - */ + // ------- future support ----- conditionGroup?: string; title?: string; ignore?: boolean; @@ -77,25 +76,53 @@ export function isDOMText(data: any): data is DOMText { export type DOMText = string; +/** + * 容器结构描述 + */ export interface ContainerSchema extends NodeSchema { /** * 'Block' | 'Page' | 'Component'; */ componentName: string; + /** + * 文件名称 + */ fileName: string; + /** + * @todo 待文档定义 + */ meta?: Record; + /** + * 容器初始数据 + */ state?: { [key: string]: CompositeValue; }; + /** + * 自定义方法设置 + */ methods?: { [key: string]: JSExpression | JSFunction; }; + /** + * 生命周期对象 + */ lifeCycles?: { [key: string]: JSExpression | JSFunction; }; + /** + * 样式文件 + */ css?: string; + /** + * 异步数据源配置 + */ dataSource?: DataSource; + /** + * 低代码业务组件默认属性 + */ defaultProps?: CompositeObject; + // @todo propDefinitions } /** @@ -122,25 +149,69 @@ export interface BlockSchema extends ContainerSchema { componentName: 'Block'; } +/** + * @todo + */ export type RootSchema = PageSchema | ComponentSchema | BlockSchema; +/** + * Slot schema 描述 + */ export interface SlotSchema extends NodeSchema { componentName: 'Slot'; name?: string; params?: string[]; } +/** + * 应用描述 + */ export interface ProjectSchema { + /** + * 当前应用协议版本号 + */ version: string; + /** + * 当前应用所有组件映射关系 + */ componentsMap: ComponentsMap; + /** + * 描述应用所有页面、低代码组件的组件树 + * 低代码业务组件树描述 + * 是长度固定为1的数组, 即数组内仅包含根容器的描述（低代码业务组件容器类型） + */ componentsTree: RootSchema[]; + /** + * 国际化语料 + */ i18n?: I18nMap; + /** + * 应用范围内的全局自定义函数或第三方工具类扩展 + */ utils?: UtilsMap; + /** + * @todo 待文档定义 + */ constants?: JSONObject; + /** + * 应用范围内的全局样式 + */ css?: string; + /** + * 当前应用的公共数据源 + */ dataSource?: DataSource; + /** + * 当前应用配置信息 + */ config?: AppConfig | Record; + /** + * @todo 待补充文档 + */ id?: string; + /** + * 当前应用元数据信息 + */ meta?: Record; } diff --git a/packages/types/src/setting-target.ts b/packages/types/src/setting-target.ts index cccc170f7..917225eb5 100644 --- a/packages/types/src/setting-target.ts +++ b/packages/types/src/setting-target.ts @@ -77,7 +77,7 @@ export interface SettingTarget { */ setExtraPropValue: (propName: string, value: any) => void; - // todo 补充 node 定义 + // @todo 补充 node 定义 /** * 获取 node 中的第一项 */ diff --git a/packages/types/src/value-type.ts b/packages/types/src/value-type.ts index c475ebf96..210954c17 100644 --- a/packages/types/src/value-type.ts +++ b/packages/types/src/value-type.ts @@ -17,24 +17,12 @@ export interface JSExpression { compiled?: string; } -/** - * 函数 - */ -export interface JSFunction { - type: 'JSFunction'; - /** - * 表达式字符串 - */ - value: string; -} - /** * 事件函数类型 * @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#feHTW */ export interface JSFunction { type: 'JSFunction'; - /** * 函数定义，或直接函数表达式 */ @@ -42,27 +30,21 @@ export interface JSFunction { /** 源码 */ compiled?: string; -} -/** - * 函数 - */ -export interface JSFunction { - type: 'JSFunction'; - /** - * 函数字符串 - */ - value: string; /** * 模拟值 */ mock?: any; + /** * 额外扩展属性，如 extType、events */ [key: string]: any; } +/** + * Slot 函数类型 + */ export interface JSSlot { type: 'JSSlot'; title?: string; @@ -74,6 +56,9 @@ export interface JSSlot { name?: string; } +/** + * @todo 待文档描述 + */ export interface JSBlock { type: 'JSBlock'; value: NodeSchema; From 0ac42471c8256bdd5cdcbfa920ceaacb742072e1 Mon Sep 17 00:00:00 2001 From: "humphry.hy" Date: Mon, 13 Dec 2021 20:12:42 +0800 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E7=89=A9?= =?UTF-8?q?=E6=96=99=E5=8D=8F=E8=AE=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/types/src/assets.ts | 7 ++++--- packages/types/src/field-config.ts | 7 +++++++ packages/types/src/schema.ts | 1 + packages/types/src/setter-config.ts | 14 +++++++------- packages/types/src/value-type.ts | 4 +++- 5 files changed, 22 insertions(+), 11 deletions(-) diff --git a/packages/types/src/assets.ts b/packages/types/src/assets.ts index b7f11f646..3c09e7343 100644 --- a/packages/types/src/assets.ts +++ b/packages/types/src/assets.ts @@ -1,10 +1,9 @@ -import { NpmInfo } from './npm'; -import { PropConfig } from './prop-config'; import { Snippet, ComponentMetadata } from './metadata'; import { I18nData } from './i18n'; /** - * 定义组件大包及external资源的信息，应该被编辑器默认加载 + * 定义组件大包及 external 资源的信息 + * 应该被编辑器默认加载 */ export interface Package { /** @@ -39,6 +38,7 @@ export interface Package { /** * 组件分类 + * @deprecated 已被 ComponentMetadata 替代 */ export interface ComponentCategory { /** @@ -57,6 +57,7 @@ export interface ComponentCategory { /** * 组件 + * @deprecated 已被 ComponentMetadata 替代 */ export interface ComponentItem { /** diff --git a/packages/types/src/field-config.ts b/packages/types/src/field-config.ts index 3ad842ed8..4a662a9c8 100644 --- a/packages/types/src/field-config.ts +++ b/packages/types/src/field-config.ts @@ -3,6 +3,9 @@ import { SetterType, DynamicSetter } from './setter-config'; import { SettingTarget } from './setting-target'; import { LiveTextEditingConfig } from './metadata'; +/** + * extra props for field + */ export interface FieldExtraProps { /** * 是否必填参数 @@ -16,6 +19,9 @@ export interface FieldExtraProps { * get value for field */ getValue?: (target: SettingTarget, fieldValue: any) => any; + /** + * set value for field + */ setValue?: (target: SettingTarget, value: any) => void; /** * the field conditional show, is not set always true @@ -84,6 +90,7 @@ export interface FieldConfig extends FieldExtraProps { items?: FieldConfig[]; /** * extra props for field + * 其他配置属性（不做流通要求） */ extraProps?: FieldExtraProps; /** diff --git a/packages/types/src/schema.ts b/packages/types/src/schema.ts index c4cb728f5..10efdd9ef 100644 --- a/packages/types/src/schema.ts +++ b/packages/types/src/schema.ts @@ -51,6 +51,7 @@ export interface NodeSchema { */ isLocked?: boolean; + // @todo // ------- future support ----- conditionGroup?: string; title?: string; diff --git a/packages/types/src/setter-config.ts b/packages/types/src/setter-config.ts index aa8695e5b..bae7738ff 100644 --- a/packages/types/src/setter-config.ts +++ b/packages/types/src/setter-config.ts @@ -15,10 +15,12 @@ export type CustomView = ReactElement | ComponentType; export type DynamicProps = (target: SettingTarget) => Record; export type DynamicSetter = (target: SettingTarget) => string | SetterConfig | CustomView; +/** + * 设置器配置 + * @todo + */ export interface SetterConfig { - /** - * if *string* passed must be a registered Setter Name - */ + // if *string* passed must be a registered Setter Name componentName: string | CustomView; /** * the props pass to Setter Component @@ -27,15 +29,13 @@ export interface SetterConfig { children?: any; isRequired?: boolean; initialValue?: any | ((target: SettingTarget) => any); - /* for MixedSetter */ + // for MixedSetter title?: TitleContent; // for MixedSetter check this is available condition?: (target: SettingTarget) => boolean; } -/** - * if *string* passed must be a registered Setter Name, future support blockSchema - */ +// if *string* passed must be a registered Setter Name, future support blockSchema export type SetterType = SetterConfig | SetterConfig[] | string | CustomView; export function isSetterConfig(obj: any): obj is SetterConfig { diff --git a/packages/types/src/value-type.ts b/packages/types/src/value-type.ts index 210954c17..201bef9da 100644 --- a/packages/types/src/value-type.ts +++ b/packages/types/src/value-type.ts @@ -13,7 +13,9 @@ export interface JSExpression { * 模拟值 */ mock?: any; - /** 源码 */ + /** + * 源码 + */ compiled?: string; } From 5f65901447f3a45eb8bc6cbb21ad0ff3f95e7893 Mon Sep 17 00:00:00 2001 From: "humphry.hy" Date: Tue, 14 Dec 2021 11:38:07 +0800 Subject: [PATCH 6/9] =?UTF-8?q?docs:=20=E9=92=88=E5=AF=B9=E6=A0=87?= =?UTF-8?q?=E5=87=86=E8=A1=A5=E5=AE=8C=20value-type=20=E5=92=8C=20seter-co?= =?UTF-8?q?nfig=20=E7=9A=84=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor-skeleton/src/types.ts | 6 ++--- packages/types/src/assets.ts | 4 +-- packages/types/src/field-config.ts | 4 ++- packages/types/src/metadata.ts | 8 ++++++ packages/types/src/setter-config.ts | 31 ++++++++++++++++++++++ packages/types/src/value-type.ts | 37 ++++++++++++++++++++++++--- 6 files changed, 81 insertions(+), 9 deletions(-) diff --git a/packages/editor-skeleton/src/types.ts b/packages/editor-skeleton/src/types.ts index 569737534..cac404f7b 100644 --- a/packages/editor-skeleton/src/types.ts +++ b/packages/editor-skeleton/src/types.ts @@ -18,9 +18,9 @@ export interface IWidgetBaseConfig { name: string; /** * 停靠位置： - * 当 type 为 'Panel' 时自动为 'leftFloatArea'； - * 当 type 为 'Widget' 时自动为 'mainArea'； - * 其他时候自动为 'leftArea'； + * - 当 type 为 'Panel' 时自动为 'leftFloatArea'； + * - 当 type 为 'Widget' 时自动为 'mainArea'； + * - 其他时候自动为 'leftArea'； */ area?: IWidgetConfigArea; props?: Record; diff --git a/packages/types/src/assets.ts b/packages/types/src/assets.ts index 3c09e7343..e6f326513 100644 --- a/packages/types/src/assets.ts +++ b/packages/types/src/assets.ts @@ -27,7 +27,7 @@ export interface Package { */ library: string; /** - * @todo 待补充文档 + * @todo 待补充文档 @jinchan */ async?: boolean; /** @@ -97,7 +97,7 @@ export interface ComponentItem { */ export interface ComponentDescription extends ComponentMetadata { /** - * @todo 待补充文档 + * @todo 待补充文档 @jinchan */ keywords: string[]; } diff --git a/packages/types/src/field-config.ts b/packages/types/src/field-config.ts index 4a662a9c8..f8e47fa19 100644 --- a/packages/types/src/field-config.ts +++ b/packages/types/src/field-config.ts @@ -68,7 +68,7 @@ export interface FieldExtraProps { */ export interface FieldConfig extends FieldExtraProps { /** - * @todo 待补充文档 + * 面板配置隶属于单个 field 还是分组 */ type?: 'field' | 'group'; /** @@ -81,6 +81,8 @@ export interface FieldConfig extends FieldExtraProps { */ title?: TitleContent; /** + * 单个属性的 setter 配置 + * * the field body contains when .type = 'field' */ setter?: SetterType | DynamicSetter; diff --git a/packages/types/src/metadata.ts b/packages/types/src/metadata.ts index eb86910b5..e8fef4cf6 100644 --- a/packages/types/src/metadata.ts +++ b/packages/types/src/metadata.ts @@ -86,6 +86,11 @@ export interface ComponentConfigure { actions?: ComponentAction[]; } +/** + * 可用片段 + * + * 内容为组件不同状态下的低代码 schema (可以有多个)，用户从组件面板拖入组件到设计器时会向页面 schema 中插入 snippets 中定义的组件低代码 schema + */ export interface Snippet { /** * 组件分类title @@ -99,6 +104,9 @@ export interface Snippet { * @todo snippet 打标 */ label?: string; + /** + * @todo 待补充文档 + */ schema?: NodeSchema; } diff --git a/packages/types/src/setter-config.ts b/packages/types/src/setter-config.ts index bae7738ff..75088ed62 100644 --- a/packages/types/src/setter-config.ts +++ b/packages/types/src/setter-config.ts @@ -1,6 +1,7 @@ import { ComponentClass, Component, ComponentType, ReactElement, isValidElement } from 'react'; import { TitleContent } from './title'; import { SettingTarget } from './setting-target'; +import { CompositeValue } from './value-type'; function isReactClass(obj: any): obj is ComponentClass { return obj && obj.prototype && (obj.prototype.isReactComponent || obj.prototype instanceof Component); @@ -21,18 +22,48 @@ export type DynamicSetter = (target: SettingTarget) => string | SetterConfig | C */ export interface SetterConfig { // if *string* passed must be a registered Setter Name + /** + * 配置设置器用哪一个 setter + */ componentName: string | CustomView; /** + * 传递给 setter 的属性 + * * the props pass to Setter Component */ props?: Record | DynamicProps; + /** + * @deprecated + */ children?: any; + /** + * 是否必填？ + * + * ArraySetter 里有个快捷预览，可以在不打开面板的情况下直接编辑 + */ isRequired?: boolean; + /** + * Setter 的初始值 + * + * @todo initialValue 可能要和 defaultValue 二选一 + */ initialValue?: any | ((target: SettingTarget) => any); // for MixedSetter + /** + * 给 MixedSetter 时切换 Setter 展示用的 + */ title?: TitleContent; // for MixedSetter check this is available + /** + * 给 MixedSetter 用于判断优先选中哪个 + */ condition?: (target: SettingTarget) => boolean; + /** + * 给 MixedSetter，切换值时声明类型 + * + * @todo 物料协议推进 + */ + valueType?: CompositeValue[]; } // if *string* passed must be a registered Setter Name, future support blockSchema diff --git a/packages/types/src/value-type.ts b/packages/types/src/value-type.ts index 201bef9da..390133f44 100644 --- a/packages/types/src/value-type.ts +++ b/packages/types/src/value-type.ts @@ -1,7 +1,9 @@ import { NodeSchema, NodeData } from './schema'; /** - * 表达式 + * 变量表达式 + * + * 表达式内通过 this 对象获取上下文 */ export interface JSExpression { type: 'JSExpression'; @@ -11,10 +13,14 @@ export interface JSExpression { value: string; /** * 模拟值 + * + * @todo 待标准描述 */ mock?: any; /** * 源码 + * + * @todo 待标准描述 */ compiled?: string; } @@ -22,6 +28,8 @@ export interface JSExpression { /** * 事件函数类型 * @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#feHTW + * + * 保留与原组件属性、生命周期( React / 小程序)一致的输入参数，并给所有事件函数 binding 统一一致的上下文（当前组件所在容器结构的 this 对象） */ export interface JSFunction { type: 'JSFunction'; @@ -30,35 +38,58 @@ export interface JSFunction { */ value: string; - /** 源码 */ + /** + * 源码 + * + * @todo 待标准描述 + */ compiled?: string; /** * 模拟值 + * + * @todo 待标准描述 */ mock?: any; /** * 额外扩展属性，如 extType、events + * + * @todo 待标准描述 */ [key: string]: any; } /** * Slot 函数类型 + * + * 通常用于描述组件的某一个属性为 ReactNode 或 Function return ReactNode 的场景。 */ export interface JSSlot { type: 'JSSlot'; + /** + * @todo 待标准描述 + */ title?: string; /** - * 函数的入参 + * 组件的某一个属性为 Function return ReactNode 时，函数的入参 + * + * 其子节点可以通过this[参数名] 来获取对应的参数。 */ params?: string[]; + /** + * 具体的值。 + */ value?: NodeData[] | NodeData; + /** + * @todo 待标准描述 + */ name?: string; } /** + * @deprecated + * * @todo 待文档描述 */ export interface JSBlock { From d82f3f587f61107356d517068b98e5a4dc5c0888 Mon Sep 17 00:00:00 2001 From: "humphry.hy" Date: Tue, 14 Dec 2021 14:53:27 +0800 Subject: [PATCH 7/9] =?UTF-8?q?docs:=20=E8=A1=A5=E5=AE=8C=20ts=20=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/types/src/assets.ts | 4 +++- packages/types/src/field-config.ts | 4 ++-- packages/types/src/metadata.ts | 12 +++++++----- packages/types/src/prop-config.ts | 2 +- packages/types/src/schema.ts | 7 ++----- packages/types/src/setter-config.ts | 1 - packages/types/src/title.ts | 18 ++++++++++++++++++ 7 files changed, 33 insertions(+), 15 deletions(-) diff --git a/packages/types/src/assets.ts b/packages/types/src/assets.ts index e6f326513..b3420ee27 100644 --- a/packages/types/src/assets.ts +++ b/packages/types/src/assets.ts @@ -27,7 +27,9 @@ export interface Package { */ library: string; /** - * @todo 待补充文档 @jinchan + * @deprecated + * + * @todo 需推进提案 @度城 */ async?: boolean; /** diff --git a/packages/types/src/field-config.ts b/packages/types/src/field-config.ts index f8e47fa19..70a881fde 100644 --- a/packages/types/src/field-config.ts +++ b/packages/types/src/field-config.ts @@ -96,11 +96,11 @@ export interface FieldConfig extends FieldExtraProps { */ extraProps?: FieldExtraProps; /** - * @todo 待补充文档 + * @deprecated */ description?: TitleContent; /** - * @todo 待补充文档 + * @deprecated */ isExtends?: boolean; } diff --git a/packages/types/src/metadata.ts b/packages/types/src/metadata.ts index e8fef4cf6..c6b5559a8 100644 --- a/packages/types/src/metadata.ts +++ b/packages/types/src/metadata.ts @@ -101,11 +101,13 @@ export interface Snippet { */ screenshot?: string; /** - * @todo snippet 打标 + * snippet 打标 + * + * @deprecated 暂未使用 */ label?: string; /** - * @todo 待补充文档 + * 待插入的 schema */ schema?: NodeSchema; } @@ -132,7 +134,7 @@ export interface Experimental { */ context?: { [contextInfoName: string]: any }; /** - * @todo 待补充文档 + * @deprecated 使用组件 metadata 上的 snippets 字段即可 */ snippets?: Snippet[]; /** @@ -160,7 +162,7 @@ export interface Experimental { */ callbacks?: Callbacks; /** - * @todo 待补充文档 + * 拖入容器时，自动带入 children 列表 */ initialChildren?: NodeData[] | ((target: SettingTarget) => NodeData[]); /** @@ -201,7 +203,7 @@ export interface Experimental { liveTextEditing?: LiveTextEditingConfig[]; /** - * @todo 待补充文档 + * @deprecated 暂未使用 */ isTopFixed?: boolean; } diff --git a/packages/types/src/prop-config.ts b/packages/types/src/prop-config.ts index 5029ba2b3..502a23ce7 100644 --- a/packages/types/src/prop-config.ts +++ b/packages/types/src/prop-config.ts @@ -59,7 +59,7 @@ export interface PropConfig { */ defaultValue?: any; /** - * @todo 待补充文档 + * @deprecated 已被弃用 */ setter?: any; } diff --git a/packages/types/src/schema.ts b/packages/types/src/schema.ts index 10efdd9ef..2cfd1f7a9 100644 --- a/packages/types/src/schema.ts +++ b/packages/types/src/schema.ts @@ -168,6 +168,7 @@ export interface SlotSchema extends NodeSchema { * 应用描述 */ export interface ProjectSchema { + id?: string; /** * 当前应用协议版本号 */ @@ -191,7 +192,7 @@ export interface ProjectSchema { */ utils?: UtilsMap; /** - * @todo 待文档定义 + * 应用范围内的全局常量 */ constants?: JSONObject; /** @@ -206,10 +207,6 @@ export interface ProjectSchema { * 当前应用配置信息 */ config?: AppConfig | Record; - /** - * @todo 待补充文档 - */ - id?: string; /** * 当前应用元数据信息 */ diff --git a/packages/types/src/setter-config.ts b/packages/types/src/setter-config.ts index 75088ed62..060bff991 100644 --- a/packages/types/src/setter-config.ts +++ b/packages/types/src/setter-config.ts @@ -18,7 +18,6 @@ export type DynamicSetter = (target: SettingTarget) => string | SetterConfig | C /** * 设置器配置 - * @todo */ export interface SetterConfig { // if *string* passed must be a registered Setter Name diff --git a/packages/types/src/title.ts b/packages/types/src/title.ts index bdb641503..a4ac36614 100644 --- a/packages/types/src/title.ts +++ b/packages/types/src/title.ts @@ -3,11 +3,29 @@ import { I18nData, isI18nData } from './i18n'; import { TipContent } from './tip'; import { IconType } from './icon'; +/** + * 描述 props 的 setter title + */ export interface TitleConfig { + /** + * 文字描述 + */ label?: I18nData | ReactNode; + /** + * hover 后的展现内容 + */ tip?: TipContent; + /** + * 文档链接，暂未实现 + */ docUrl?: string; + /** + * 图标 + */ icon?: IconType; + /** + * CSS 类 + */ className?: string; } From e46d371dcde4fb425b8a508d7100b6e520fa6569 Mon Sep 17 00:00:00 2001 From: "humphry.hy" Date: Tue, 14 Dec 2021 15:06:04 +0800 Subject: [PATCH 8/9] =?UTF-8?q?feat:=20=E5=B0=86=20assets=20=E8=B5=84?= =?UTF-8?q?=E4=BA=A7=E5=8C=85=E5=AE=9A=E4=B9=89=E6=94=B9=E5=88=B0=20types?= =?UTF-8?q?=20=E9=87=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/types/src/assets.ts | 80 ++++++++++++++++++++++++++++++++++++ packages/utils/src/asset.ts | 77 +++++----------------------------- 2 files changed, 91 insertions(+), 66 deletions(-) diff --git a/packages/types/src/assets.ts b/packages/types/src/assets.ts index b3420ee27..d3bede636 100644 --- a/packages/types/src/assets.ts +++ b/packages/types/src/assets.ts @@ -1,6 +1,86 @@ import { Snippet, ComponentMetadata } from './metadata'; import { I18nData } from './i18n'; +export interface AssetItem { + type: AssetType; + content?: string | null; + device?: string; + level?: AssetLevel; + id?: string; +} + +export enum AssetLevel { + // 环境依赖库 比如 react, react-dom + Environment = 1, + // 基础类库，比如 lodash deep fusion antd + Library = 2, + // 主题 + Theme = 3, + // 运行时 + Runtime = 4, + // 业务组件 + Components = 5, + // 应用 & 页面 + App = 6, +} + +export const AssetLevels = [ + AssetLevel.Environment, + AssetLevel.Library, + AssetLevel.Theme, + AssetLevel.Runtime, + AssetLevel.Components, + AssetLevel.App, +]; + +export type URL = string; + +export enum AssetType { + JSUrl = 'jsUrl', + CSSUrl = 'cssUrl', + CSSText = 'cssText', + JSText = 'jsText', + Bundle = 'bundle', +} + +export interface AssetBundle { + type: AssetType.Bundle; + level?: AssetLevel; + assets?: Asset | AssetList | null; +} + +export type Asset = AssetList | AssetBundle | AssetItem | URL; + +export type AssetList = Array; + +/** + * 资产包协议 + */ +export interface AssetsJson { + /** + * 资产包协议版本号 + */ + version: string; + /** + * 大包列表，external与package的概念相似，融合在一起 + */ + packages?: Package[]; + /** + * 所有组件的描述协议列表所有组件的列表 + */ + components: Array; + /** + * 组件分类列表，用来描述物料面板 + * @deprecated 最新版物料面板已不需要此描述 + */ + componentList?: ComponentCategory[]; + /** + * 业务组件分类列表，用来描述物料面板 + * @deprecated 最新版物料面板已不需要此描述 + */ + bizComponentList?: ComponentCategory[]; +} + /** * 定义组件大包及 external 资源的信息 * 应该被编辑器默认加载 diff --git a/packages/utils/src/asset.ts b/packages/utils/src/asset.ts index 5e428ae7c..6bddf2a8f 100644 --- a/packages/utils/src/asset.ts +++ b/packages/utils/src/asset.ts @@ -1,67 +1,10 @@ -import { Package, ComponentCategory, ComponentDescription, RemoteComponentDescription } from '@ali/lowcode-types'; +import { AssetItem, AssetType, AssetLevels, Asset, AssetList, AssetBundle, AssetLevel, AssetsJson } from '@ali/lowcode-types'; import { isCSSUrl } from './is-css-url'; import { createDefer } from './create-defer'; import { load, evaluate } from './script'; -export interface AssetItem { - type: AssetType; - content?: string | null; - device?: string; - level?: AssetLevel; - id?: string; -} - -export enum AssetLevel { - // 环境依赖库 比如 react, react-dom - Environment = 1, - // 基础类库，比如 lodash deep fusion antd - Library = 2, - // 主题 - Theme = 3, - // 运行时 - Runtime = 4, - // 业务组件 - Components = 5, - // 应用 & 页面 - App = 6, -} - -export const AssetLevels = [ - AssetLevel.Environment, - AssetLevel.Library, - AssetLevel.Theme, - AssetLevel.Runtime, - AssetLevel.Components, - AssetLevel.App, -]; - -export type URL = string; - -export enum AssetType { - JSUrl = 'jsUrl', - CSSUrl = 'cssUrl', - CSSText = 'cssText', - JSText = 'jsText', - Bundle = 'bundle', -} - -export interface AssetBundle { - type: AssetType.Bundle; - level?: AssetLevel; - assets?: Asset | AssetList | null; -} - -export type Asset = AssetList | AssetBundle | AssetItem | URL; - -export type AssetList = Array; - -export interface AssetsJson { - version: string; // 资产包协议版本号 - packages?: Package[]; // 大包列表，external与package的概念相似，融合在一起 - components: Array; // 所有组件的描述协议列表所有组件的列表 - componentList?: ComponentCategory[]; // 组件分类列表，用来描述物料面板 - bizComponentList?: ComponentCategory[]; // 业务组件分类列表，用来描述物料面板 -} +// API 向下兼容 +export { AssetItem, AssetType, AssetLevels, Asset, AssetList, AssetBundle, AssetLevel, AssetsJson } from '@ali/lowcode-types'; export function isAssetItem(obj: any): obj is AssetItem { return obj && obj.type; @@ -104,7 +47,7 @@ export function assetItem(type: AssetType, content?: string | null, level?: Asse export function megreAssets(assets: AssetsJson, incrementalAssets: AssetsJson): AssetsJson { if (incrementalAssets.packages) { - assets.packages = [...assets.packages, ...incrementalAssets.packages]; + assets.packages = [...(assets.packages || []), ...incrementalAssets.packages]; } if (incrementalAssets.components) { @@ -122,9 +65,9 @@ function megreAssetsComponentList(assets: AssetsJson, incrementalAssets: AssetsJ if (incrementalAssets[listName]) { if (assets[listName]) { // 根据title进行合并 - incrementalAssets[listName].map((item) => { + incrementalAssets[listName]?.map((item) => { let matchFlag = false; - assets[listName].map((assetItem) => { + assets[listName]?.map((assetItem) => { if (assetItem.title === item.title) { assetItem.children = assetItem.children.concat(item.children); matchFlag = true; @@ -133,7 +76,7 @@ function megreAssetsComponentList(assets: AssetsJson, incrementalAssets: AssetsJ return assetItem; }); - !matchFlag && assets[listName].push(item); + !matchFlag && assets[listName]?.push(item); return item; }); } @@ -319,8 +262,10 @@ export class AssetLoader { return isUrl ? load(content) : evaluate(content); } - private async loadAsyncLibrary(asyncLibraryMap) { - const promiseList = []; const libraryKeyList = []; + // todo 补充类型 + private async loadAsyncLibrary(asyncLibraryMap: Record) { + const promiseList: any[] = []; + const libraryKeyList: any[] = []; for (const key in asyncLibraryMap) { // 需要异步加载 if (asyncLibraryMap[key].async) { From 1a03a8c78e9f8394a6263488087c616cf3888c6b Mon Sep 17 00:00:00 2001 From: "humphry.hy" Date: Tue, 14 Dec 2021 15:18:35 +0800 Subject: [PATCH 9/9] =?UTF-8?q?docs:=20=E8=B7=9F=E9=9A=8F=E7=89=A9?= =?UTF-8?q?=E6=96=99=E8=A7=84=E8=8C=83=EF=BC=8C=E8=BF=BD=E5=8A=A0=20Compon?= =?UTF-8?q?entSort=20=E6=A0=87=E8=AF=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/types/src/assets.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/types/src/assets.ts b/packages/types/src/assets.ts index d3bede636..b39c73763 100644 --- a/packages/types/src/assets.ts +++ b/packages/types/src/assets.ts @@ -79,6 +79,24 @@ export interface AssetsJson { * @deprecated 最新版物料面板已不需要此描述 */ bizComponentList?: ComponentCategory[]; + /** + * 用于描述组件面板中的 tab 和 category + */ + sort?: ComponentSort; +} + +/** + * 用于描述组件面板中的 tab 和 category + */ +export interface ComponentSort { + /** + * 用于描述组件面板的 tab 项及其排序，例如：["精选组件", "原子组件"] + */ + groupList?: string[]; + /** + * 组件面板中同一个 tab 下的不同区间用 category 区分，category 的排序依照 categoryList 顺序排列； + */ + categoryList?: string[]; } /**