diff --git a/packages/cli/src/utils/allowTs.ts b/packages/cli/src/utils/allowTs.ts index 70da01f3..d8452bc1 100644 --- a/packages/cli/src/utils/allowTs.ts +++ b/packages/cli/src/utils/allowTs.ts @@ -10,7 +10,7 @@ export const transformTsFileToCodeSync = (filename: string): string => loader: 'ts', sourcefile: filename, sourcemap: 'inline', - target: 'node14', + target: 'node18', }).code; /** diff --git a/packages/cli/tests/Core.spec.ts b/packages/cli/tests/Core.spec.ts new file mode 100644 index 00000000..3c42899f --- /dev/null +++ b/packages/cli/tests/Core.spec.ts @@ -0,0 +1,17 @@ +import { describe, expect, test } from 'vitest'; +import path from 'node:path'; + +import Core from '../src/Core'; + +describe('Core', () => { + test('instance', () => { + const core = new Core({ + packages: [], + source: './a', + temp: './b', + }); + expect(core).toBeInstanceOf(Core); + + expect(core.dir.temp()).toBe(path.join(process.cwd(), './a/b')); + }); +}); diff --git a/packages/core/src/App.ts b/packages/core/src/App.ts index e615f145..4e11aedf 100644 --- a/packages/core/src/App.ts +++ b/packages/core/src/App.ts @@ -18,27 +18,13 @@ import { EventEmitter } from 'events'; -import { has, isArray, isEmpty } from 'lodash-es'; +import { isEmpty } from 'lodash-es'; -import { createDataSourceManager, DataSource, DataSourceManager, ObservedDataClass } from '@tmagic/data-source'; -import { - ActionType, - type AppCore, - type CodeBlockDSL, - type CodeItemConfig, - type CompItemConfig, - type DataSourceItemConfig, - type EventActionItem, - type EventConfig, - type Id, - type JsEngine, - type MApp, - type RequestFunction, -} from '@tmagic/schema'; -import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils'; +import { createDataSourceManager, DataSourceManager, ObservedDataClass } from '@tmagic/data-source'; +import type { CodeBlockDSL, Id, JsEngine, MApp, RequestFunction } from '@tmagic/schema'; import Env from './Env'; -import { bindCommonEventListener, isCommonMethod, triggerCommonMethod } from './events'; +import EventHelper from './EventHelper'; import Flexible from './Flexible'; import Node from './Node'; import Page from './Page'; @@ -52,39 +38,30 @@ interface AppOptionsConfig { designWidth?: number; curPage?: Id; useMock?: boolean; + pageFragmentContainerType?: string | string[]; + iteratorContainerType?: string | string[]; transformStyle?: (style: Record) => Record; request?: RequestFunction; DataSourceObservedData?: ObservedDataClass; } -interface EventCache { - eventConfig: CompItemConfig; - fromCpt: any; - args: any[]; -} - -class App extends EventEmitter implements AppCore { +class App extends EventEmitter { public env: Env = new Env(); public dsl?: MApp; public codeDsl?: CodeBlockDSL; public dataSourceManager?: DataSourceManager; - public page?: Page; - public useMock = false; public platform = 'mobile'; public jsEngine: JsEngine = 'browser'; - public request?: RequestFunction; - public components = new Map(); - - public eventQueueMap: Record = {}; + public pageFragmentContainerType = new Set(['page-fragment-container']); + public iteratorContainerType = new Set(['iterator-container']); + public request?: RequestFunction; public transformStyle: (style: Record) => Record; + public eventHelper?: EventHelper; - public flexible?: Flexible; - - private eventList = new Map<(fromCpt: Node, ...args: any[]) => void, string>(); - private dataSourceEventList = new Map void>>(); + private flexible?: Flexible; constructor(options: AppOptionsConfig) { super(); @@ -95,6 +72,24 @@ class App extends EventEmitter implements AppCore { options.platform && (this.platform = options.platform); options.jsEngine && (this.jsEngine = options.jsEngine); + if (options.pageFragmentContainerType) { + const pageFragmentContainerType = Array.isArray(options.pageFragmentContainerType) + ? options.pageFragmentContainerType + : [options.pageFragmentContainerType]; + pageFragmentContainerType.forEach((type) => { + this.pageFragmentContainerType.add(type); + }); + } + + if (options.iteratorContainerType) { + const iteratorContainerType = Array.isArray(options.iteratorContainerType) + ? options.iteratorContainerType + : [options.iteratorContainerType]; + iteratorContainerType.forEach((type) => { + this.iteratorContainerType.add(type); + }); + } + if (typeof options.useMock === 'boolean') { this.useMock = options.useMock; } @@ -103,6 +98,10 @@ class App extends EventEmitter implements AppCore { this.flexible = new Flexible({ designWidth: options.designWidth }); } + if (this.platform !== 'editor') { + this.eventHelper = new EventHelper({ app: this }); + } + this.transformStyle = options.transformStyle || ((style: Record) => defaultTransformStyle(style, this.jsEngine)); @@ -113,8 +112,6 @@ class App extends EventEmitter implements AppCore { if (options.config) { this.setConfig(options.config, options.curPage); } - - bindCommonEventListener(this); } public setEnv(ua?: string) { @@ -145,24 +142,16 @@ class App extends EventEmitter implements AppCore { this.codeDsl = config.codeBlocks; this.setPage(curPage || this.page?.data?.id); - } - /** - * 留着为了兼容，不让报错 - * @deprecated - */ - public addPage() { - console.info('addPage 已经弃用'); + const dataSourceList = Array.from(this.dataSourceManager!.dataSourceMap.values()); + this.eventHelper?.bindDataSourceEvents(dataSourceList); } public setPage(id?: Id) { const pageConfig = this.dsl?.items.find((page) => `${page.id}` === `${id}`); if (!pageConfig) { - if (this.page) { - this.page.destroy(); - this.page = undefined; - } + this.deletePage(); super.emit('page-change'); return; @@ -170,21 +159,24 @@ class App extends EventEmitter implements AppCore { if (pageConfig === this.page?.data) return; - if (this.page) { - this.page.destroy(); - } + this.page?.destroy(); this.page = new Page({ config: pageConfig, app: this, }); - super.emit('page-change', this.page); + this.eventHelper?.removeNodeEvents(); + this.page.nodes.forEach((node) => { + this.eventHelper?.bindNodeEvents(node); + }); - this.bindEvents(); + super.emit('page-change', this.page); } public deletePage() { + this.page?.destroy(); + this.eventHelper?.removeNodeEvents(); this.page = undefined; } @@ -200,6 +192,10 @@ class App extends EventEmitter implements AppCore { } } + public getNode(id: Id, iteratorContainerId?: Id[], iteratorIndex?: number[]) { + return this.page?.getNode(id, iteratorContainerId, iteratorIndex); + } + public registerComponent(type: string, Component: any) { this.components.set(type, Component); } @@ -212,43 +208,15 @@ class App extends EventEmitter implements AppCore { return this.components.get(type) as T; } - public bindEvents() { - Array.from(this.eventList.keys()).forEach((handler) => { - const name = this.eventList.get(handler); - name && this.off(name, handler); - }); - - this.eventList.clear(); - - if (!this.page) return; - - for (const [, value] of this.page.nodes) { - value.events?.forEach((event, index) => { - let eventName = `${event.name}_${value.data.id}`; - let eventHandler = (fromCpt: Node, ...args: any[]) => { - this.eventHandler(index, fromCpt, args); - }; - - // 页面片容器可以配置页面片内组件的事件，形式为“${nodeId}.${eventName}” - const eventNames = event.name.split('.'); - if (eventNames.length > 1) { - eventName = `${eventNames[1]}_${eventNames[0]}`; - eventHandler = (fromCpt: Node, ...args: any[]) => { - this.eventHandler(index, value, args); - }; - } - - this.eventList.set(eventHandler, eventName); - this.on(eventName, eventHandler); - }); - } - this.bindDataSourceEvents(); - } - public emit(name: string | symbol, ...args: any[]): boolean { const [node, ...otherArgs] = args; - if (node instanceof Node && node?.data?.id) { - return super.emit(`${String(name)}_${node.data.id}`, node, ...otherArgs); + if ( + this.eventHelper && + node instanceof Node && + node.data?.id && + node.eventKeys.has(`${String(name)}_${node.data.id}`) + ) { + return this.eventHelper?.emit(node.eventKeys.get(`${String(name)}_${node.data.id}`)!, node, ...otherArgs); } return super.emit(name, ...args); } @@ -258,8 +226,7 @@ class App extends EventEmitter implements AppCore { * @param eventConfig 代码动作的配置 * @returns void */ - public async codeActionHandler(eventConfig: CodeItemConfig, args: any[]) { - const { codeId = '', params = {} } = eventConfig; + public async runCode(codeId: Id, params: Record, args: any[]) { if (!codeId || isEmpty(this.codeDsl)) return; const content = this.codeDsl?.[codeId]?.content; if (typeof content === 'function') { @@ -267,48 +234,10 @@ class App extends EventEmitter implements AppCore { } } - /** - * 执行联动组件动作 - * @param eventConfig 联动组件的配置 - * @returns void - */ - public async compActionHandler(eventConfig: CompItemConfig, fromCpt: Node | DataSource, args: any[]) { - if (!this.page) throw new Error('当前没有页面'); + public async runDataSourceMethod(dsId: string, methodName: string, params: Record, args: any[]) { + if (!dsId || !methodName) return; - let { method: methodName, to } = eventConfig; - - if (isArray(methodName)) { - [to, methodName] = methodName; - } - - const toNode = this.page.getNode(to); - if (!toNode) throw `ID为${to}的组件不存在`; - - if (isCommonMethod(methodName)) { - return triggerCommonMethod(methodName, toNode); - } - - if (toNode.instance) { - if (typeof toNode.instance[methodName] === 'function') { - await toNode.instance[methodName](fromCpt, ...args); - } - } else { - this.addEventToMap({ - eventConfig, - fromCpt, - args, - }); - } - } - - public async dataSourceActionHandler(eventConfig: DataSourceItemConfig, args: any[]) { - const { dataSourceMethod = [], params = {} } = eventConfig; - - const [id, methodName] = dataSourceMethod; - - if (!id || !methodName) return; - - const dataSource = this.dataSourceManager?.get(id); + const dataSource = this.dataSourceManager?.get(dsId); if (!dataSource) return; @@ -329,89 +258,8 @@ class App extends EventEmitter implements AppCore { this.flexible?.destroy(); this.flexible = undefined; - } - private bindDataSourceEvents() { - if (this.platform === 'editor') return; - - // 先清掉之前注册的事件，重新注册 - Array.from(this.dataSourceEventList.keys()).forEach((dataSourceId) => { - const dataSourceEvent = this.dataSourceEventList.get(dataSourceId)!; - Array.from(dataSourceEvent.keys()).forEach((eventName) => { - const [prefix, ...path] = eventName.split('.'); - if (prefix === DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX) { - this.dataSourceManager?.offDataChange(dataSourceId, path.join('.'), dataSourceEvent.get(eventName)!); - } else { - this.dataSourceManager?.get(dataSourceId)?.off(prefix, dataSourceEvent.get(eventName)!); - } - }); - }); - - (this.dsl?.dataSources || []).forEach((dataSource) => { - const dataSourceEvent = this.dataSourceEventList.get(dataSource.id) ?? new Map void>(); - (dataSource.events || []).forEach((event) => { - const [prefix, ...path] = event.name?.split('.') || []; - if (!prefix) return; - const handler = (...args: any[]) => { - this.eventHandler(event, this.dataSourceManager?.get(dataSource.id), args); - }; - dataSourceEvent.set(event.name, handler); - if (prefix === DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX) { - // 数据源数据变化 - this.dataSourceManager?.onDataChange(dataSource.id, path.join('.'), handler); - } else { - // 数据源自定义事件 - this.dataSourceManager?.get(dataSource.id)?.on(prefix, handler); - } - }); - this.dataSourceEventList.set(dataSource.id, dataSourceEvent); - }); - } - - private async actionHandler(actionItem: EventActionItem, fromCpt: Node | DataSource, args: any[]) { - if (actionItem.actionType === ActionType.COMP) { - // 组件动作 - await this.compActionHandler(actionItem as CompItemConfig, fromCpt, args); - } else if (actionItem.actionType === ActionType.CODE) { - // 执行代码块 - await this.codeActionHandler(actionItem as CodeItemConfig, args); - } else if (actionItem.actionType === ActionType.DATA_SOURCE) { - await this.dataSourceActionHandler(actionItem as DataSourceItemConfig, args); - } - } - - /** - * 事件联动处理函数 - * @param eventsConfigIndex 事件配置索引，可以通过此索引从node.event中获取最新事件配置 - * @param fromCpt 触发事件的组件 - * @param args 事件参数 - */ - private async eventHandler(config: EventConfig | number, fromCpt: Node | DataSource | undefined, args: any[]) { - const eventConfig = typeof config === 'number' ? (fromCpt as Node).events[config] : config; - if (has(eventConfig, 'actions')) { - // EventConfig类型 - const { actions } = eventConfig as EventConfig; - for (let i = 0; i < actions.length; i++) { - if (typeof config === 'number') { - // 事件响应中可能会有修改数据源数据的，会更新dsl，所以这里需要重新获取 - const actionItem = ((fromCpt as Node).events[config] as EventConfig).actions[i]; - this.actionHandler(actionItem, fromCpt as Node, args); - } else { - this.actionHandler(actions[i], fromCpt as DataSource, args); - } - } - } else { - // 兼容DeprecatedEventConfig类型 组件动作 - await this.compActionHandler(eventConfig as unknown as CompItemConfig, fromCpt as Node, args); - } - } - - private addEventToMap(event: EventCache) { - if (this.eventQueueMap[event.eventConfig.to]) { - this.eventQueueMap[event.eventConfig.to].push(event); - } else { - this.eventQueueMap[event.eventConfig.to] = [event]; - } + this.eventHelper?.destroy(); } } diff --git a/packages/core/src/EventHelper.ts b/packages/core/src/EventHelper.ts new file mode 100644 index 00000000..7ff163da --- /dev/null +++ b/packages/core/src/EventHelper.ts @@ -0,0 +1,260 @@ +/* + * Tencent is pleased to support the open source community by making TMagicEditor available. + * + * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * 通用的事件处理 + */ +import { EventEmitter } from 'events'; + +import { has } from 'lodash-es'; + +import type { DataSource } from '@tmagic/data-source'; +import { + ActionType, + type CodeItemConfig, + type CompItemConfig, + type DataSourceItemConfig, + type EventActionItem, + type EventConfig, +} from '@tmagic/schema'; +import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils'; + +import type { default as TMagicApp } from './App'; +import type { default as TMagicNode } from './Node'; +import { COMMON_EVENT_PREFIX, isCommonMethod, triggerCommonMethod } from './utils'; + +const getCommonEventName = (commonEventName: string) => { + if (commonEventName.startsWith(COMMON_EVENT_PREFIX)) return commonEventName; + return `${COMMON_EVENT_PREFIX}${commonEventName}`; +}; + +// 点击在组件内的某个元素上，需要向上寻找到当前组件 +const getDirectComponent = (element: HTMLElement | null, app: TMagicApp): TMagicNode | undefined => { + if (!element) { + return; + } + + if (!element.id) { + return getDirectComponent(element.parentElement, app); + } + + const node = app.getNode( + element.id, + element.dataset.iteratorContainerId?.split(','), + element.dataset.iteratorIndex?.split(',').map((i) => globalThis.parseInt(i, 10)), + ); + + return node; +}; + +export default class EventHelper extends EventEmitter { + public app: TMagicApp; + + private nodeEventList = new Map<(fromCpt: TMagicNode, ...args: any[]) => void, symbol>(); + private dataSourceEventList = new Map void>>(); + + constructor({ app }: { app: TMagicApp }) { + super(); + + this.app = app; + + globalThis.document.body.addEventListener('click', this.commonClickEventHandler); + } + + public destroy() { + this.removeNodeEvents(); + this.removeAllListeners(); + + globalThis.document.body.removeEventListener('click', this.commonClickEventHandler); + } + + public bindNodeEvents(node: TMagicNode) { + node.events?.forEach((event, index) => { + let eventNameKey = `${event.name}_${node.data.id}`; + + // 页面片容器可以配置页面片内组件的事件，形式为“${nodeId}.${eventName}” + const eventNames = event.name.split('.'); + if (eventNames.length > 1) { + eventNameKey = `${eventNames[1]}_${eventNames[0]}`; + } + + let eventName = Symbol(eventNameKey); + if (node.eventKeys.has(eventNameKey)) { + eventName = node.eventKeys.get(eventNameKey)!; + } else { + node.eventKeys.set(eventNameKey, eventName); + } + + const eventHandler = (fromCpt: TMagicNode, ...args: any[]) => { + this.eventHandler(index, node, args); + }; + + this.nodeEventList.set(eventHandler, eventName); + this.on(eventName, eventHandler); + }); + } + + public removeNodeEvents() { + Array.from(this.nodeEventList.keys()).forEach((handler) => { + const name = this.nodeEventList.get(handler); + name && this.off(name, handler); + }); + + this.nodeEventList.clear(); + } + + public bindDataSourceEvents(dataSourceList: DataSource[]) { + this.removeDataSourceEvents(dataSourceList); + + dataSourceList.forEach((dataSource) => { + const dataSourceEvent = this.dataSourceEventList.get(dataSource.id) ?? new Map void>(); + + (dataSource.schema.events || []).forEach((event) => { + const [prefix, ...path] = event.name?.split('.') || []; + if (!prefix) return; + const handler = (...args: any[]) => { + this.eventHandler(event, dataSource, args); + }; + dataSourceEvent.set(event.name, handler); + if (prefix === DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX) { + // 数据源数据变化 + dataSource?.onDataChange(path.join('.'), handler); + } else { + // 数据源自定义事件 + dataSource.on(prefix, handler); + } + }); + this.dataSourceEventList.set(dataSource.id, dataSourceEvent); + }); + } + + public removeDataSourceEvents(dataSourceList: DataSource[]) { + if (!this.dataSourceEventList.size) { + return; + } + + // 先清掉之前注册的事件，重新注册 + dataSourceList.forEach((dataSource) => { + const dataSourceEvent = this.dataSourceEventList.get(dataSource.id)!; + + if (!dataSourceEvent) return; + + Array.from(dataSourceEvent.keys()).forEach((eventName) => { + const [prefix, ...path] = eventName.split('.'); + if (prefix === DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX) { + dataSource.offDataChange(path.join('.'), dataSourceEvent.get(eventName)!); + } else { + dataSource.off(prefix, dataSourceEvent.get(eventName)!); + } + }); + }); + + this.dataSourceEventList.clear(); + } + + /** + * 事件联动处理函数 + * @param eventsConfigIndex 事件配置索引，可以通过此索引从node.event中获取最新事件配置 + * @param fromCpt 触发事件的组件 + * @param args 事件参数 + */ + private async eventHandler(config: EventConfig | number, fromCpt: TMagicNode | DataSource | undefined, args: any[]) { + const eventConfig = typeof config === 'number' ? (fromCpt as TMagicNode).events[config] : config; + if (has(eventConfig, 'actions')) { + // EventConfig类型 + const { actions } = eventConfig as EventConfig; + for (let i = 0; i < actions.length; i++) { + if (typeof config === 'number') { + // 事件响应中可能会有修改数据源数据的，会更新dsl，所以这里需要重新获取 + const actionItem = ((fromCpt as TMagicNode).events[config] as EventConfig).actions[i]; + this.actionHandler(actionItem, fromCpt as TMagicNode, args); + } else { + this.actionHandler(actions[i], fromCpt as DataSource, args); + } + } + } else { + // 兼容DeprecatedEventConfig类型 组件动作 + await this.compActionHandler(eventConfig as unknown as CompItemConfig, fromCpt as TMagicNode, args); + } + } + + private async actionHandler(actionItem: EventActionItem, fromCpt: TMagicNode | DataSource, args: any[]) { + if (actionItem.actionType === ActionType.COMP) { + const compActionItem = actionItem as CompItemConfig; + // 组件动作 + await this.compActionHandler(compActionItem, fromCpt, args); + } else if (actionItem.actionType === ActionType.CODE) { + const codeActionItem = actionItem as CodeItemConfig; + // 执行代码块 + await this.app.runCode(codeActionItem.codeId, codeActionItem.params || {}, args); + } else if (actionItem.actionType === ActionType.DATA_SOURCE) { + const dataSourceActionItem = actionItem as DataSourceItemConfig; + + const [dsId, methodName] = dataSourceActionItem.dataSourceMethod; + + await this.app.runDataSourceMethod(dsId, methodName, dataSourceActionItem.params || {}, args); + } + } + + /** + * 执行联动组件动作 + * @param eventConfig 联动组件的配置 + * @returns void + */ + private async compActionHandler(eventConfig: CompItemConfig, fromCpt: TMagicNode | DataSource, args: any[]) { + if (!this.app.page) throw new Error('当前没有页面'); + + let { method: methodName, to } = eventConfig; + + if (Array.isArray(methodName)) { + [to, methodName] = methodName; + } + + const toNode = this.app.getNode(to); + if (!toNode) throw `ID为${to}的组件不存在`; + + if (isCommonMethod(methodName)) { + return triggerCommonMethod(methodName, toNode); + } + + if (toNode.instance) { + if (typeof toNode.instance[methodName] === 'function') { + await toNode.instance[methodName](fromCpt, ...args); + } + } else { + toNode.addEventToQueue({ + method: methodName, + fromCpt, + args, + }); + } + } + + private commonClickEventHandler = (e: MouseEvent) => { + if (!e.target) { + return; + } + + const node = getDirectComponent(e.target as HTMLElement, this.app); + + const eventName = `${getCommonEventName('click')}_${node?.data.id}`; + if (node?.eventKeys.has(eventName)) { + this.emit(node.eventKeys.get(eventName)!, node); + } + }; +} diff --git a/packages/core/src/IteratorContainer.ts b/packages/core/src/IteratorContainer.ts new file mode 100644 index 00000000..3d0054bb --- /dev/null +++ b/packages/core/src/IteratorContainer.ts @@ -0,0 +1,104 @@ +/* + * Tencent is pleased to support the open source community by making TMagicEditor available. + * + * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { Id, MNode } from '@tmagic/schema'; + +import type { default as TMagicNode } from './Node'; +import Node from './Node'; + +class IteratorContainer extends Node { + public nodes: Map[] = []; + + public setData(data: MNode) { + this.resetNodes(); + + super.setData(data); + } + + public resetNodes() { + this.nodes?.forEach((nodeMap) => { + nodeMap.forEach((node) => { + node.destroy(); + }); + }); + + this.nodes = []; + } + + public initNode(config: MNode, parent: TMagicNode, map: Map) { + if (map.has(config.id)) { + map.get(config.id)?.destroy(); + } + + if (config.type && this.app.iteratorContainerType.has(config.type)) { + const iteratorContainer = new IteratorContainer({ + config, + parent, + page: this.page, + app: this.app, + }); + map.set(config.id, iteratorContainer); + + this.app.eventHelper?.bindNodeEvents(iteratorContainer); + return; + } + + const node = new Node({ + config, + parent, + page: this.page, + app: this.app, + }); + + this.app.eventHelper?.bindNodeEvents(node); + + map.set(config.id, node); + + if (config.type && this.app.pageFragmentContainerType.has(config.type) && config.pageFragmentId) { + const pageFragment = this.app.dsl?.items?.find((page) => page.id === config.pageFragmentId); + if (pageFragment) { + config.items = [pageFragment]; + } + } + + config.items?.forEach((element: MNode) => { + this.initNode(element, node, map); + }); + } + + public setNodes(nodes: MNode[], index: number) { + const map = this.nodes[index] || new Map(); + + nodes.forEach((node) => { + this.initNode(node, this, map); + }); + + this.nodes[index] = map; + } + + public getNode(id: Id, index: number) { + return this.nodes[index]?.get(id); + } + + public destroy(): void { + super.destroy(); + this.resetNodes(); + } +} + +export default IteratorContainer; diff --git a/packages/core/src/Node.ts b/packages/core/src/Node.ts index f44c2afc..3b066795 100644 --- a/packages/core/src/Node.ts +++ b/packages/core/src/Node.ts @@ -19,19 +19,26 @@ import { EventEmitter } from 'events'; import { DataSource } from '@tmagic/data-source'; -import type { AppCore, EventConfig, MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema'; +import type { EventConfig, MNode } from '@tmagic/schema'; import { HookCodeType, HookType } from '@tmagic/schema'; -import type App from './App'; +import type { default as TMagicApp } from './App'; import type Page from './Page'; import Store from './Store'; -interface NodeOptions { +interface EventCache { + method: string; + fromCpt: any; + args: any[]; +} + +export interface NodeOptions { config: MNode; page?: Page; parent?: Node; - app: App; + app: TMagicApp; } + class Node extends EventEmitter { public data!: MNode; public style!: { @@ -41,8 +48,11 @@ class Node extends EventEmitter { public instance?: any; public page?: Page; public parent?: Node; - public app: App; + public app: TMagicApp; public store = new Store(); + public eventKeys = new Map(); + + private eventQueue: EventCache[] = []; constructor(options: NodeOptions) { super(); @@ -54,12 +64,16 @@ class Node extends EventEmitter { this.listenLifeSafe(); } - public setData(data: MComponent | MContainer | MPage | MPageFragment) { + public setData(data: MNode) { this.data = data; const { events, style } = data; this.events = events || []; this.style = style || {}; - this.emit('update-data'); + this.emit('update-data', data); + } + + public addEventToQueue(event: EventCache) { + this.eventQueue.push(event); } public destroy() { @@ -84,10 +98,10 @@ class Node extends EventEmitter { this.once('mounted', async (instance: any) => { this.instance = instance; - const eventConfigQueue = this.app.eventQueueMap[instance.config.id] || []; - - for (let eventConfig = eventConfigQueue.shift(); eventConfig; eventConfig = eventConfigQueue.shift()) { - this.app.compActionHandler(eventConfig.eventConfig, eventConfig.fromCpt, eventConfig.args); + for (let eventConfig = this.eventQueue.shift(); eventConfig; eventConfig = this.eventQueue.shift()) { + if (typeof instance[eventConfig.method] === 'function') { + await instance[eventConfig.method](eventConfig.fromCpt, ...eventConfig.args); + } } await this.runHookCode('mounted'); @@ -120,7 +134,7 @@ class Node extends EventEmitter { const { codeType = HookCodeType.CODE, codeId, params = {} } = item; let functionContent: ((...args: any[]) => any) | string | undefined; - const functionParams: { app: AppCore; params: Record; dataSource?: DataSource } = { + const functionParams: { app: TMagicApp; params: Record; dataSource?: DataSource } = { app: this.app, params, }; diff --git a/packages/core/src/Page.ts b/packages/core/src/Page.ts index 2b439bfa..ab657c7c 100644 --- a/packages/core/src/Page.ts +++ b/packages/core/src/Page.ts @@ -19,6 +19,8 @@ import type { Id, MComponent, MContainer, MPage, MPageFragment } from '@tmagic/schema'; import type App from './App'; +import IteratorContainer from './IteratorContainer'; +import type { default as TMagicNode } from './Node'; import Node from './Node'; interface ConfigOptions { config: MPage | MPageFragment; @@ -26,7 +28,7 @@ interface ConfigOptions { } class Page extends Node { - public nodes = new Map(); + public nodes = new Map(); constructor(options: ConfigOptions) { super(options); @@ -37,7 +39,20 @@ class Page extends Node { }); } - public initNode(config: MComponent | MContainer, parent: Node) { + public initNode(config: MComponent | MContainer, parent: TMagicNode) { + if (config.type && this.app.iteratorContainerType.has(config.type)) { + this.setNode( + config.id, + new IteratorContainer({ + config, + parent, + page: this, + app: this.app, + }), + ); + return; + } + const node = new Node({ config, parent, @@ -47,7 +62,7 @@ class Page extends Node { this.setNode(config.id, node); - if (config.type === 'page-fragment-container' && config.pageFragmentId) { + if (config.type && this.app.pageFragmentContainerType.has(config.type) && config.pageFragmentId) { const pageFragment = this.app.dsl?.items?.find((page) => page.id === config.pageFragmentId); if (pageFragment) { config.items = [pageFragment]; @@ -59,11 +74,30 @@ class Page extends Node { }); } - public getNode(id: Id) { - return this.nodes.get(id); + public getNode( + id: Id, + iteratorContainerId?: Id[], + iteratorIndex?: number[], + ): T | undefined { + if (this.nodes.has(id)) { + return this.nodes.get(id) as T; + } + + if (Array.isArray(iteratorContainerId) && iteratorContainerId.length && Array.isArray(iteratorIndex)) { + let iteratorContainer = this.nodes.get(iteratorContainerId[0]) as IteratorContainer; + + for (let i = 1, l = iteratorContainerId.length; i < l; i++) { + iteratorContainer = iteratorContainer?.getNode( + iteratorContainerId[i], + iteratorIndex[i - 1], + ) as IteratorContainer; + } + + return iteratorContainer?.getNode(id, iteratorIndex[iteratorIndex.length - 1]) as T; + } } - public setNode(id: Id, node: Node) { + public setNode(id: Id, node: TMagicNode) { this.nodes.set(id, node); } diff --git a/packages/core/src/events.ts b/packages/core/src/events.ts deleted file mode 100644 index 1bb12260..00000000 --- a/packages/core/src/events.ts +++ /dev/null @@ -1,118 +0,0 @@ -/* - * Tencent is pleased to support the open source community by making TMagicEditor available. - * - * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** - * 通用的事件处理 - */ - -import App from './App'; -import Node from './Node'; - -export interface EventOption { - label: string; - value: string; -} - -const COMMON_EVENT_PREFIX = 'magic:common:events:'; -const COMMON_METHOD_PREFIX = 'magic:common:actions:'; -const CommonMethod = { - SHOW: 'show', - HIDE: 'hide', - SCROLL_TO_VIEW: 'scrollIntoView', - SCROLL_TO_TOP: 'scrollToTop', -}; - -export const DEFAULT_EVENTS: EventOption[] = [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }]; - -export const DEFAULT_METHODS: EventOption[] = []; - -export const getCommonEventName = (commonEventName: string) => { - if (commonEventName.startsWith(COMMON_EVENT_PREFIX)) return commonEventName; - return `${COMMON_EVENT_PREFIX}${commonEventName}`; -}; - -export const isCommonMethod = (methodName: string) => methodName.startsWith(COMMON_METHOD_PREFIX); - -// 点击在组件内的某个元素上，需要向上寻找到当前组件 -const getDirectComponent = (element: HTMLElement | null, app: App): Node | Boolean => { - if (!element) { - return false; - } - - if (!element.id) { - return getDirectComponent(element.parentElement, app); - } - - const node = app.page?.getNode(element.id); - if (!node) { - return false; - } - - return node; -}; - -const commonClickEventHandler = (app: App, eventName: string, e: any) => { - const node = getDirectComponent(e.target, app); - - if (node) { - app.emit(getCommonEventName(eventName), node); - } -}; - -export const bindCommonEventListener = (app: App) => { - if (app.jsEngine !== 'browser') return; - - window.document.body.addEventListener('click', (e: any) => { - commonClickEventHandler(app, 'click', e); - }); - - window.document.body.addEventListener( - 'click', - (e: any) => { - commonClickEventHandler(app, 'click:capture', e); - }, - true, - ); -}; - -export const triggerCommonMethod = (methodName: string, node: Node) => { - const { instance } = node; - - if (!instance) return; - - switch (methodName.replace(COMMON_METHOD_PREFIX, '')) { - case CommonMethod.SHOW: - instance.show(); - break; - - case CommonMethod.HIDE: - instance.hide(); - break; - - case CommonMethod.SCROLL_TO_VIEW: - instance.$el?.scrollIntoView({ behavior: 'smooth' }); - break; - - case CommonMethod.SCROLL_TO_TOP: - window.scrollTo({ top: 0, behavior: 'smooth' }); - break; - - default: - break; - } -}; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 175c5065..c6d9da90 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -18,10 +18,12 @@ import App from './App'; -export * from './events'; +export { default as EventHelper } from './EventHelper'; +export * from './utils'; export { default as Env } from './Env'; export { default as Page } from './Page'; export { default as Node } from './Node'; +export { default as IteratorContainer } from './IteratorContainer'; export default App; diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts index 5c89ec70..f350a8fd 100644 --- a/packages/core/src/utils.ts +++ b/packages/core/src/utils.ts @@ -15,9 +15,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - import { JsEngine } from '@tmagic/schema'; +import type { default as TMagicNode } from './Node'; + export const style2Obj = (style: string) => { if (typeof style !== 'string') { return style; @@ -115,3 +116,51 @@ export const transformStyle = (style: Record | string, jsEngine: Js return results; }; + +export const COMMON_EVENT_PREFIX = 'magic:common:events:'; +export const COMMON_METHOD_PREFIX = 'magic:common:actions:'; + +export const CommonMethod = { + SHOW: 'show', + HIDE: 'hide', + SCROLL_TO_VIEW: 'scrollIntoView', + SCROLL_TO_TOP: 'scrollToTop', +}; + +export const isCommonMethod = (methodName: string) => methodName.startsWith(COMMON_METHOD_PREFIX); + +export const triggerCommonMethod = (methodName: string, node: TMagicNode) => { + const { instance } = node; + + if (!instance) return; + + switch (methodName.replace(COMMON_METHOD_PREFIX, '')) { + case CommonMethod.SHOW: + instance.show(); + break; + + case CommonMethod.HIDE: + instance.hide(); + break; + + case CommonMethod.SCROLL_TO_VIEW: + instance.$el?.scrollIntoView({ behavior: 'smooth' }); + break; + + case CommonMethod.SCROLL_TO_TOP: + window.scrollTo({ top: 0, behavior: 'smooth' }); + break; + + default: + break; + } +}; + +export interface EventOption { + label: string; + value: string; +} + +export const DEFAULT_EVENTS: EventOption[] = [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }]; + +export const DEFAULT_METHODS: EventOption[] = []; diff --git a/packages/core/tests/App.spec.ts b/packages/core/tests/App.spec.ts new file mode 100644 index 00000000..f3925933 --- /dev/null +++ b/packages/core/tests/App.spec.ts @@ -0,0 +1,239 @@ +import { describe, expect, test } from 'vitest'; + +import { MApp, NodeType, TMagicIteratorContainer } from '@tmagic/schema'; + +import App from '../src/App'; + +const createAppDsl = (pageLength: number, nodeLength = 0) => { + const dsl: MApp = { + type: NodeType.ROOT, + id: 'app_1', + dataSources: [ + { + id: 'ds_1', + fields: [ + { + type: 'array', + name: 'array', + title: 'array', + enable: true, + fields: [ + { + type: 'array', + name: 'arr', + title: 'arr', + defaultValue: [], + enable: true, + fields: [], + }, + ], + }, + ], + events: [], + methods: [], + type: 'base', + }, + ], + dataSourceDeps: {}, + dataSourceCondDeps: {}, + items: [ + ...new Array(pageLength) + .fill({ + type: NodeType.PAGE, + items: new Array(nodeLength) + .fill({ + type: 'text', + }) + .map((node, index) => ({ + ...node, + id: `text_${index}`, + })), + }) + .map((page, index) => ({ + ...page, + id: `page_${index}`, + })), + { + type: NodeType.PAGE_FRAGMENT, + id: 'page_fragment_1', + items: [ + { + type: 'text', + id: 'text_page_fragment', + text: 'text_page_fragment', + }, + ], + }, + ], + }; + + return dsl; +}; + +describe('App', () => { + test('instance', () => { + const app = new App({}); + expect(app).toBeInstanceOf(App); + }); + + test('page', () => { + const app = new App({ + config: createAppDsl(2), + }); + expect(app.getNode('page_0')?.data.id).toBe('page_0'); + expect(app.page?.data.id).toBe('page_0'); + + app.setConfig(createAppDsl(3), 'page_1'); + expect(app.page?.data.id).toBe('page_1'); + + app.setPage('page_2'); + expect(app.page?.data.id).toBe('page_2'); + }); + + test('node', () => { + const app = new App({ + config: createAppDsl(1, 10), + }); + + expect(app.getNode('text_1')?.data.id).toBe('text_1'); + }); + + test('iterator-container', () => { + const dsl = createAppDsl(1, 10); + + dsl.items[0].items.push({ + type: 'iterator-container', + id: 'iterator-container_1', + items: [ + { + type: 'text', + id: 'text', + }, + ], + }); + + const app = new App({ + config: dsl, + }); + + const ic = app.getNode('iterator-container_1') as unknown as TMagicIteratorContainer; + + expect(ic?.data.id).toBe('iterator-container_1'); + + ic?.setNodes( + [ + { + type: 'text', + id: 'text', + text: '1', + }, + { + type: 'page-fragment-container', + id: 'page_fragment_container_1', + pageFragmentId: 'page_fragment_1', + }, + { + type: 'iterator-container', + id: 'iterator-container_11', + items: [ + { + type: 'text', + id: 'text', + }, + ], + }, + ], + 0, + ); + + ic?.setNodes( + [ + { + type: 'text', + id: 'text', + text: '2', + }, + { + type: 'iterator-container', + id: 'iterator-container_11', + items: [ + { + type: 'text', + id: 'text', + }, + ], + }, + ], + 1, + ); + + expect(app.getNode('text', ['iterator-container_1'], [0])?.data.text).toBe('1'); + expect(app.getNode('text', ['iterator-container_1'], [1])?.data.text).toBe('2'); + expect(app.getNode('text_page_fragment', ['iterator-container_1'], [0])?.data.text).toBe('text_page_fragment'); + + const ic1 = app.getNode( + 'iterator-container_11', + ['iterator-container_1'], + [0], + ) as unknown as TMagicIteratorContainer; + + ic1?.setNodes( + [ + { + type: 'text', + id: 'text', + text: '111', + }, + ], + 0, + ); + + ic1?.setNodes( + [ + { + type: 'text', + id: 'text', + text: '222', + }, + ], + 1, + ); + + const ic2 = app.getNode( + 'iterator-container_11', + ['iterator-container_1'], + [1], + ) as unknown as TMagicIteratorContainer; + + ic2?.setNodes( + [ + { + type: 'text', + id: 'text', + text: '11', + }, + ], + 0, + ); + + ic2?.setNodes( + [ + { + type: 'text', + id: 'text', + text: '22', + }, + ], + 1, + ); + + expect(app.getNode('text', ['iterator-container_1', 'iterator-container_11'], [0, 0])?.data.text).toBe('111'); + expect(app.getNode('text', ['iterator-container_1', 'iterator-container_11'], [0, 1])?.data.text).toBe('222'); + expect(app.getNode('text', ['iterator-container_1', 'iterator-container_11'], [1, 0])?.data.text).toBe('11'); + expect(app.getNode('text', ['iterator-container_1', 'iterator-container_11'], [1, 1])?.data.text).toBe('22'); + + ic.resetNodes(); + + expect(ic2?.nodes.length).toBe(0); + }); +}); diff --git a/packages/data-source/src/DataSourceManager.ts b/packages/data-source/src/DataSourceManager.ts index 962a0e1d..4007c961 100644 --- a/packages/data-source/src/DataSourceManager.ts +++ b/packages/data-source/src/DataSourceManager.ts @@ -20,13 +20,15 @@ import EventEmitter from 'events'; import { cloneDeep } from 'lodash-es'; -import type { AppCore, DataSourceSchema, DisplayCond, Id, MNode } from '@tmagic/schema'; +import type { default as TMagicApp, IteratorContainer as TMagicIteratorContainer } from '@tmagic/core'; +import type { DataSourceSchema, DisplayCond, Id, MNode, NODE_CONDS_KEY } from '@tmagic/schema'; import { compiledNode } from '@tmagic/utils'; import { SimpleObservedData } from './observed-data/SimpleObservedData'; import { DataSource, HttpDataSource } from './data-sources'; +import { getDeps } from './depsCache'; import type { ChangeEvent, DataSourceManagerData, DataSourceManagerOptions, ObservedDataClass } from './types'; -import { compiledNodeField, compliedConditions, compliedIteratorItemConditions, compliedIteratorItems } from './utils'; +import { compiledNodeField, compliedConditions, compliedIteratorItem, createIteratorContentData } from './utils'; class DataSourceManager extends EventEmitter { private static dataSourceClassMap = new Map(); @@ -37,13 +39,6 @@ class DataSourceManager extends EventEmitter { DataSourceManager.dataSourceClassMap.set(type, dataSource); } - /** - * @deprecated - */ - public static registe(type: string, dataSource: T) { - DataSourceManager.register(type, dataSource); - } - public static getDataSourceClass(type: string) { return DataSourceManager.dataSourceClassMap.get(type); } @@ -52,7 +47,7 @@ class DataSourceManager extends EventEmitter { DataSourceManager.ObservedDataClass = ObservedDataClass; } - public app: AppCore; + public app: TMagicApp; public dataSourceMap = new Map(); @@ -167,6 +162,10 @@ class DataSourceManager extends EventEmitter { this.dataSourceMap.delete(id); } + /** + * 更新数据源dsl，在编辑器中修改配置后需要更新，一般在其他环境下不需要更新dsl + * @param {DataSourceSchema[]} schemas 所有数据源配置 + */ public updateSchema(schemas: DataSourceSchema[]) { schemas.forEach((schema) => { const ds = this.get(schema.id); @@ -184,6 +183,13 @@ class DataSourceManager extends EventEmitter { }); } + /** + * 将组件dsl中所有key中数据源相关的配置编译成对应的值 + * @param {MNode} node 组件dsl + * @param {string | number} sourceId 数据源ID + * @param {boolean} deep 是否编译子项（items)，默认为false + * @returns {MNode} 编译后的组件dsl + */ public compiledNode({ items, ...node }: MNode, sourceId?: Id, deep = false) { const newNode = cloneDeep(node); @@ -195,6 +201,7 @@ class DataSourceManager extends EventEmitter { if (node.condResult === false) return newNode; if (node.visible === false) return newNode; + // 编译函数这里作为参数，方便后续支持自定义编译 return compiledNode( (value: any) => compiledNodeField(value, this.data), newNode, @@ -203,19 +210,75 @@ class DataSourceManager extends EventEmitter { ); } - public compliedConds(node: MNode) { + /** + * 编译组件条件组配置（用于配置组件显示时机） + * @param {{ [NODE_CONDS_KEY]?: DisplayCond[] }} node 显示条件组配置 + * @returns {boolean} 是否显示 + */ + public compliedConds(node: { [NODE_CONDS_KEY]?: DisplayCond[] }) { return compliedConditions(node, this.data); } - public compliedIteratorItemConds(itemData: any, displayConds: DisplayCond[] = []) { - return compliedIteratorItemConditions(displayConds, itemData); - } - - public compliedIteratorItems(itemData: any, items: MNode[], dataSourceField: string[] = []) { + /** + * 编译迭代器容器的迭代项的显示条件 + * @param {any[]} itemData 迭代数据 + * @param {{ [NODE_CONDS_KEY]?: DisplayCond[] }} node 显示条件组配置 + * @param {string[]} dataSourceField 迭代数据在数据源中的字段，格式如['dsId', 'key1', 'key2'] + * @returns {boolean}是否显示 + */ + public compliedIteratorItemConds( + itemData: any[], + node: { [NODE_CONDS_KEY]?: DisplayCond[] }, + dataSourceField: string[] = [], + ) { const [dsId, ...keys] = dataSourceField; const ds = this.get(dsId); - if (!ds) return items; - return compliedIteratorItems(itemData, items, dsId, keys, this.data, this.app.platform === 'editor'); + if (!ds) return true; + + const ctxData = createIteratorContentData(itemData, ds.id, keys, this.data); + return compliedConditions(node, ctxData); + } + + public compliedIteratorItems( + nodeId: Id, + itemData: any, + nodes: MNode[], + dataSourceField: string[] = [], + dataIteratorContainerId?: Id[], + dataIteratorIndex?: number[], + ) { + const iteratorContainer = this.app.getNode( + nodeId, + dataIteratorContainerId, + dataIteratorIndex, + ); + + const [dsId, ...keys] = dataSourceField; + const ds = this.get(dsId); + if (!ds || !iteratorContainer) return nodes; + + const ctxData = createIteratorContentData(itemData, ds.id, keys, this.data); + + const { deps = {}, condDeps = {} } = getDeps(ds.schema, nodes); + + if (!Object.keys(deps).length && !Object.keys(condDeps).length) { + return nodes; + } + + return nodes.map((item) => { + const node = compliedIteratorItem({ + compile: (value: any) => compiledNodeField(value, ctxData), + dsId: ds.id, + item, + deps, + }); + + if (condDeps[node.id]?.keys.length && this.app.platform !== 'editor') { + node.condResult = compliedConditions(node, ctxData); + } + + return node; + }); } public destroy() { diff --git a/packages/data-source/src/createDataSourceManager.ts b/packages/data-source/src/createDataSourceManager.ts index 78b506ae..62cb9229 100644 --- a/packages/data-source/src/createDataSourceManager.ts +++ b/packages/data-source/src/createDataSourceManager.ts @@ -17,7 +17,7 @@ */ import { union } from 'lodash-es'; -import type { AppCore } from '@tmagic/schema'; +import type { default as TMagicApp } from '@tmagic/core'; import { getDepNodeIds, getNodes, isPage } from '@tmagic/utils'; import DataSourceManager from './DataSourceManager'; @@ -26,12 +26,12 @@ import { updateNode } from './utils'; /** * 创建数据源管理器 - * @param app AppCore - * @param useMock 是否使用mock数据 - * @param initialData 初始化数据，ssr数据可以由此传入 - * @returns DataSourceManager | undefined + * @param {TMagicApp} app + * @param {boolean} useMock 是否使用mock数据 + * @param {DataSourceManagerData} initialData 初始化数据，ssr数据可以由此传入 + * @returns {DataSourceManager | undefined} */ -export const createDataSourceManager = (app: AppCore, useMock?: boolean, initialData?: DataSourceManagerData) => { +export const createDataSourceManager = (app: TMagicApp, useMock?: boolean, initialData?: DataSourceManagerData) => { const { dsl, platform } = app; if (!dsl?.dataSources) return; diff --git a/packages/data-source/src/data-sources/Base.ts b/packages/data-source/src/data-sources/Base.ts index 2e1808ab..b4344e98 100644 --- a/packages/data-source/src/data-sources/Base.ts +++ b/packages/data-source/src/data-sources/Base.ts @@ -19,7 +19,8 @@ import EventEmitter from 'events'; import { cloneDeep } from 'lodash-es'; -import type { AppCore, CodeBlockContent, DataSchema, DataSourceSchema } from '@tmagic/schema'; +import type { default as TMagicApp } from '@tmagic/core'; +import type { CodeBlockContent, DataSchema, DataSourceSchema } from '@tmagic/schema'; import { getDefaultValueFromFields } from '@tmagic/utils'; import { ObservedData } from '@data-source/observed-data/ObservedData'; @@ -33,7 +34,7 @@ export default class DataSource e public isInit = false; /** @tmagic/core 实例 */ - public app: AppCore; + public app: TMagicApp; protected mockData?: Record; diff --git a/packages/data-source/src/depsCache.ts b/packages/data-source/src/depsCache.ts new file mode 100644 index 00000000..45c69618 --- /dev/null +++ b/packages/data-source/src/depsCache.ts @@ -0,0 +1,47 @@ +import { isDataSourceCondTarget, isDataSourceTarget, Target, Watcher } from '@tmagic/dep'; +import type { DataSourceSchema, MNode } from '@tmagic/schema'; +import { DSL_NODE_KEY_COPY_PREFIX } from '@tmagic/utils'; + +const cache = new Map(); + +export const getDeps = (ds: DataSourceSchema, nodes: MNode[]) => { + const cacheKey = `${ds.id}:${nodes.map((node) => node.id).join(':')}`; + + if (cache.has(cacheKey)) { + return cache.get(cacheKey); + } + + const watcher = new Watcher(); + watcher.addTarget( + new Target({ + id: ds.id, + type: 'data-source', + isTarget: (key: string | number, value: any) => { + if (`${key}`.includes(DSL_NODE_KEY_COPY_PREFIX)) { + return false; + } + + return isDataSourceTarget(ds, key, value, true); + }, + }), + ); + + watcher.addTarget( + new Target({ + id: ds.id, + type: 'cond', + isTarget: (key, value) => isDataSourceCondTarget(ds, key, value, true), + }), + ); + + watcher.collect(nodes, {}, true); + + const { deps } = watcher.getTarget(ds.id, 'data-source'); + const { deps: condDeps } = watcher.getTarget(ds.id, 'cond'); + + const result = { deps, condDeps }; + + cache.set(cacheKey, result); + + return result; +}; diff --git a/packages/data-source/src/types.ts b/packages/data-source/src/types.ts index be4c7486..47ada219 100644 --- a/packages/data-source/src/types.ts +++ b/packages/data-source/src/types.ts @@ -1,14 +1,15 @@ -import type { AppCore, DataSourceSchema, HttpOptions, RequestFunction } from '@tmagic/schema'; +import type { default as TMagicApp } from '@tmagic/core'; +import type { DataSourceSchema, HttpOptions, RequestFunction } from '@tmagic/schema'; import type DataSource from './data-sources/Base'; import type HttpDataSource from './data-sources/Http'; -import { ObservedData } from './observed-data/ObservedData'; +import type { ObservedData } from './observed-data/ObservedData'; export type ObservedDataClass = new (...args: any[]) => ObservedData; export interface DataSourceOptions { schema: T; - app: AppCore; + app: TMagicApp; initialData?: Record; useMock?: boolean; request?: RequestFunction; @@ -25,14 +26,14 @@ export interface HttpDataSourceSchema extends DataSourceSchema { autoFetch?: boolean; beforeRequest: | string - | ((options: HttpOptions, content: { app: AppCore; dataSource: HttpDataSource }) => HttpOptions); + | ((options: HttpOptions, content: { app: TMagicApp; dataSource: HttpDataSource }) => HttpOptions); afterResponse: | string - | ((response: any, content: { app: AppCore; dataSource: HttpDataSource; options: Partial }) => any); + | ((response: any, content: { app: TMagicApp; dataSource: HttpDataSource; options: Partial }) => any); } export interface DataSourceManagerOptions { - app: AppCore; + app: TMagicApp; /** 初始化数据，ssr数据可以由此传入 */ initialData?: DataSourceManagerData; /** 是否使用mock数据 */ diff --git a/packages/data-source/src/utils.ts b/packages/data-source/src/utils.ts index f720bf74..a6931e8c 100644 --- a/packages/data-source/src/utils.ts +++ b/packages/data-source/src/utils.ts @@ -1,12 +1,12 @@ -import { cloneDeep, template } from 'lodash-es'; +import { cloneDeep } from 'lodash-es'; -import { isDataSourceTemplate, isUseDataSourceField, Target, Watcher } from '@tmagic/dep'; import type { DepData, DisplayCond, DisplayCondItem, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema'; +import { NODE_CONDS_KEY } from '@tmagic/schema'; import { compiledCond, compiledNode, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, - DSL_NODE_KEY_COPY_PREFIX, + dataSourceTemplateRegExp, getValueByKeyPath, isPage, isPageFragment, @@ -32,11 +32,15 @@ export const compiledCondition = (cond: DisplayCondItem[], data: DataSourceManag break; } - const fieldValue = getValueByKeyPath(fields.join('.'), dsData); + try { + const fieldValue = getValueByKeyPath(fields.join('.'), dsData); - if (!compiledCond(op, fieldValue, value, range)) { - result = false; - break; + if (!compiledCond(op, fieldValue, value, range)) { + result = false; + break; + } + } catch (e) { + console.warn(e); } } @@ -49,10 +53,10 @@ export const compiledCondition = (cond: DisplayCondItem[], data: DataSourceManag * @param data 数据源数据 * @returns boolean */ -export const compliedConditions = (node: { displayConds?: DisplayCond[] }, data: DataSourceManagerData) => { - if (!node.displayConds || !Array.isArray(node.displayConds) || !node.displayConds.length) return true; +export const compliedConditions = (node: { [NODE_CONDS_KEY]?: DisplayCond[] }, data: DataSourceManagerData) => { + if (!node[NODE_CONDS_KEY] || !Array.isArray(node[NODE_CONDS_KEY]) || !node[NODE_CONDS_KEY].length) return true; - for (const { cond } of node.displayConds) { + for (const { cond } of node[NODE_CONDS_KEY]) { if (!cond) continue; if (compiledCondition(cond, data)) { @@ -63,36 +67,6 @@ export const compliedConditions = (node: { displayConds?: DisplayCond[] }, data: return false; }; -/** - * 编译迭代器容器子项显示条件 - * @param displayConds 条件组配置 - * @param data 迭代器容器的迭代数据项 - * @returns boolean - */ -export const compliedIteratorItemConditions = (displayConds: DisplayCond[] = [], data: DataSourceManagerData) => { - if (!displayConds || !Array.isArray(displayConds) || !displayConds.length) return true; - - for (const { cond } of displayConds) { - if (!cond) continue; - - let result = true; - for (const { op, value, range, field } of cond) { - const fieldValue = getValueByKeyPath(field.join('.'), data); - - if (!compiledCond(op, fieldValue, value, range)) { - result = false; - break; - } - } - - if (result) { - return result; - } - } - - return false; -}; - export const updateNode = (node: MNode, dsl: MApp) => { if (isPage(node) || isPageFragment(node)) { const index = dsl.items?.findIndex((child: MNode) => child.id === node.id); @@ -115,16 +89,30 @@ export const createIteratorContentData = ( fields: string[] = [], dsData: DataSourceManagerData = {}, ) => { - const data = { + const data: DataSourceManagerData = { ...dsData, [dsId]: {}, }; - fields.reduce((obj: any, field, index) => { - obj[field] = index === fields.length - 1 ? itemData : {}; + let rawData = cloneDeep(dsData[dsId]); + let obj: Record = data[dsId]; - return obj[field]; - }, data[dsId]); + fields.forEach((key, index) => { + Object.assign(obj, rawData); + + if (index === fields.length - 1) { + obj[key] = itemData; + return; + } + + if (Array.isArray(rawData[key])) { + rawData[key] = {}; + obj[key] = {}; + } + + rawData = rawData[key]; + obj = obj[key]; + }); return data; }; @@ -149,12 +137,25 @@ export const compliedDataSourceField = (value: any, data: DataSourceManagerData) if (!dsData) return value; - return getValueByKeyPath(fields.join('.'), dsData); + try { + return getValueByKeyPath(fields.join('.'), dsData); + } catch (e) { + return value; + } } return value; }; +export const template = (value: string, data?: DataSourceManagerData) => + value.replaceAll(dataSourceTemplateRegExp, (match, $1) => { + try { + return getValueByKeyPath($1, data); + } catch (e: any) { + return match; + } + }); + /** * 编译通过tmagic-editor的数据源源选择器（data-source-input，data-source-select，data-source-field-select）配置出来的数据，或者其他符合规范的配置 * @param value dsl节点中的数据源配置 @@ -164,7 +165,7 @@ export const compliedDataSourceField = (value: any, data: DataSourceManagerData) export const compiledNodeField = (value: any, data: DataSourceManagerData) => { // 使用data-source-input等表单控件配置的字符串模板，如：`xxx${id.field}xxx` if (typeof value === 'string') { - return template(value)(data); + return template(value, data); } // 使用data-source-select等表单控件配置的数据源，如：{ isBindDataSource: true, dataSourceId: 'xxx'} @@ -174,7 +175,7 @@ export const compiledNodeField = (value: any, data: DataSourceManagerData) => { // 指定数据源的字符串模板，如：{ isBindDataSourceField: true, dataSourceId: 'id', template: `xxx${field}xxx`} if (value?.isBindDataSourceField && value.dataSourceId && typeof value.template === 'string') { - return template(value.template)(data[value.dataSourceId]); + return template(value.template, data[value.dataSourceId]); } // 使用data-source-field-select等表单控件的数据源字段，如：[`${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${id}`, 'field'] @@ -185,105 +186,32 @@ export const compiledNodeField = (value: any, data: DataSourceManagerData) => { return value; }; -export const compliedIteratorItems = ( - itemData: any, - items: MNode[], - dsId: string, - keys: string[] = [], - data: DataSourceManagerData, - inEditor = false, -) => { - const watcher = new Watcher(); - watcher.addTarget( - new Target({ - id: dsId, - type: 'data-source', - isTarget: (key: string | number, value: any) => { - if (`${key}`.startsWith(DSL_NODE_KEY_COPY_PREFIX)) { - return false; - } - - return isDataSourceTemplate(value, dsId) || isUseDataSourceField(value, dsId); - }, - }), - ); - - watcher.addTarget( - new Target({ - id: dsId, - type: 'cond', - isTarget: (key, value) => { - // 使用data-source-field-select value: 'key' 可以配置出来 - if (!Array.isArray(value) || value[0] !== dsId || !`${key}`.startsWith('displayConds')) return false; - return true; - }, - }), - ); - - watcher.collect(items, {}, true); - - const { deps } = watcher.getTarget(dsId, 'data-source'); - const { deps: condDeps } = watcher.getTarget(dsId, 'cond'); - - if (!Object.keys(deps).length && !Object.keys(condDeps).length) { - return items; - } - - return items.map((item) => compliedIteratorItem({ itemData, data, dsId, keys, inEditor, condDeps, item, deps })); -}; - -const compliedIteratorItem = ({ - itemData, - data, +export const compliedIteratorItem = ({ + compile, dsId, - keys, - inEditor, - condDeps, item, deps, }: { - itemData: any; - data: DataSourceManagerData; + compile: (value: any) => any; dsId: string; - keys: string[]; - inEditor: boolean; - condDeps: DepData; item: MNode; deps: DepData; }) => { const { items, ...node } = item; const newNode = cloneDeep(node); - if (items && !item.iteratorData) { - newNode.items = Array.isArray(items) - ? items.map((item) => compliedIteratorItem({ itemData, data, dsId, keys, inEditor, condDeps, item, deps })) - : items; - } - if (Array.isArray(items) && items.length) { - if (item.iteratorData) { - newNode.items = items; - } else { - newNode.items = items.map((item) => - compliedIteratorItem({ itemData, data, dsId, keys, inEditor, condDeps, item, deps }), - ); - } - } else { + newNode.items = items.map((item) => compliedIteratorItem({ compile, dsId, item, deps })); + } else if (items) { newNode.items = items; } - const ctxData = createIteratorContentData(itemData, dsId, keys, data); - - if (condDeps[newNode.id]?.keys.length && !inEditor) { - newNode.condResult = compliedConditions(newNode, ctxData); - } - if (!deps[newNode.id]?.keys.length) { return newNode; } return compiledNode( - (value: any) => compiledNodeField(value, ctxData), + compile, newNode, { [dsId]: deps, diff --git a/packages/data-source/tests/DataSource.spec.ts b/packages/data-source/tests/DataSource.spec.ts index b3f55e85..2a6d4669 100644 --- a/packages/data-source/tests/DataSource.spec.ts +++ b/packages/data-source/tests/DataSource.spec.ts @@ -1,5 +1,7 @@ import { describe, expect, test } from 'vitest'; +import App from '@tmagic/core'; + import { DataSource } from '@data-source/index'; describe('DataSource', () => { @@ -10,8 +12,9 @@ describe('DataSource', () => { id: '1', fields: [{ name: 'name' }], methods: [], + events: [], }, - app: {}, + app: new App({}), }); expect(ds).toBeInstanceOf(DataSource); @@ -25,8 +28,9 @@ describe('DataSource', () => { id: '1', fields: [{ name: 'name' }], methods: [], + events: [], }, - app: {}, + app: new App({}), }); ds.init(); @@ -43,8 +47,9 @@ describe('DataSource setData', () => { id: '1', fields: [{ name: 'name', defaultValue: 'name' }], methods: [], + events: [], }, - app: {}, + app: new App({}), }); ds.init(); @@ -74,8 +79,9 @@ describe('DataSource setData', () => { }, ], methods: [], + events: [], }, - app: {}, + app: new App({}), }); ds.init(); diff --git a/packages/data-source/tests/DataSourceMenager.spec.ts b/packages/data-source/tests/DataSourceMenager.spec.ts index 4acd261b..db57f63a 100644 --- a/packages/data-source/tests/DataSourceMenager.spec.ts +++ b/packages/data-source/tests/DataSourceMenager.spec.ts @@ -1,18 +1,11 @@ import { describe, expect, test } from 'vitest'; -import { type MApp, NodeType } from '@tmagic/schema'; +import App from '@tmagic/core'; +import { NodeType } from '@tmagic/schema'; import { DataSource, DataSourceManager } from '@data-source/index'; -class Core { - public dsl?: MApp; - - constructor(options: any) { - this.dsl = options.config; - } -} - -const app = new Core({ +const app = new App({ config: { type: NodeType.ROOT, id: '1', @@ -23,12 +16,14 @@ const app = new Core({ id: '1', fields: [{ name: 'name' }], methods: [], + events: [], }, { type: 'http', id: '2', fields: [{ name: 'name' }], methods: [], + events: [], }, ], }, @@ -45,10 +40,10 @@ describe('DataSourceManager', () => { expect(dsm.dataSourceMap.get('2')?.type).toBe('http'); }); - test('registe', () => { + test('register', () => { class TestDataSource extends DataSource {} - DataSourceManager.registe('test', TestDataSource as any); + DataSourceManager.register('test', TestDataSource as any); expect(DataSourceManager.getDataSourceClass('test')).toBe(TestDataSource); }); @@ -72,6 +67,7 @@ describe('DataSourceManager', () => { id: '1', fields: [{ name: 'name1' }], methods: [], + events: [], }, ]); const ds = dsm.get('1'); @@ -89,6 +85,7 @@ describe('DataSourceManager', () => { id: '1', fields: [{ name: 'name' }], methods: [], + events: [], }); expect(dsm.get('1')).toBeInstanceOf(DataSource); }); diff --git a/packages/data-source/tests/utils.spec.ts b/packages/data-source/tests/utils.spec.ts new file mode 100644 index 00000000..b9ca2666 --- /dev/null +++ b/packages/data-source/tests/utils.spec.ts @@ -0,0 +1,68 @@ +import { describe, expect, test } from 'vitest'; + +import { compiledCondition, createIteratorContentData, template } from '@data-source/utils'; + +describe('compiledCondition', () => { + test('=,true', () => { + const result = compiledCondition( + [ + { + field: ['a', 'b'], + op: '=', + value: 1, + }, + ], + { a: { b: 1 } }, + ); + + expect(result).toBeTruthy(); + }); + + test('=,false', () => { + const result = compiledCondition( + [ + { + field: ['a', 'b'], + op: '=', + value: 2, + }, + ], + { a: { b: 1 } }, + ); + + expect(result).toBeFalsy(); + }); +}); + +describe('template', () => { + test('template', () => { + const value = template('xxx${aa.bb}123${aa1.bb1}dsf', { aa: { bb: 1 }, aa1: { bb1: 2 } }); + expect(value).toBe('xxx11232dsf'); + }); +}); + +describe('createIteratorContentData', () => { + test('createIteratorContentData', () => { + const ctxData: any = createIteratorContentData({ b: 1 }, 'ds', ['a'], { ds: { a: [{ b: 1 }] } }); + expect(ctxData.ds.a.b).toBe(1); + }); + test('混用', () => { + const ctxData: any = createIteratorContentData({ b: 1 }, 'ds', ['a'], { ds: { a: [{ b: 1 }], b: 2 } }); + expect(ctxData.ds.b).toBe(2); + }); + + test('二维数组', () => { + const ctxData: any = createIteratorContentData({ a: 1 }, 'ds', ['a', 'c'], { + ds: { + a: [ + { + b: 0, + c: [{ a: 1 }], + }, + ], + b: 2, + }, + }); + expect(ctxData.ds.a.c.a).toBe(1); + }); +}); diff --git a/packages/dep/src/utils.ts b/packages/dep/src/utils.ts index 8446f8b0..469f6b9e 100644 --- a/packages/dep/src/utils.ts +++ b/packages/dep/src/utils.ts @@ -6,8 +6,14 @@ import { type HookData, HookType, type Id, + NODE_CONDS_KEY, } from '@tmagic/schema'; -import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils'; +import { + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, + dataSourceTemplateRegExp, + getKeysArray, + isObject, +} from '@tmagic/utils'; import Target from './Target'; import { DepTargetType, type TargetList } from './types'; @@ -40,33 +46,67 @@ export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent, initi * @returns boolean */ export const isIncludeArrayField = (keys: string[], fields: DataSchema[]) => { - let includeArray = false; + let f = fields; - keys.reduce((accumulator: DataSchema[], currentValue: string, currentIndex: number) => { - const field = accumulator.find(({ name }) => name === currentValue); - if ( + return keys.some((key, index) => { + const field = f.find(({ name }) => name === key); + + f = field?.fields || []; + + // 字段类型为数组并且后面没有数字索引 + return ( field && field.type === 'array' && // 不是整数 - /^(?!\d+$).*$/.test(`${keys[currentIndex + 1]}`) && - currentIndex < keys.length - 1 - ) { - includeArray = true; - } - return field?.fields || []; - }, fields); - - return includeArray; + /^(?!\d+$).*$/.test(`${keys[index + 1]}`) && + index < keys.length - 1 + ); + }); }; /** * 判断模板(value)是不是使用数据源Id(dsId)，如：`xxx${dsId.field}xxx${dsId.field}` * @param value any * @param dsId string | number + * @param hasArray boolean true: 一定要包含有需要迭代的模板; false: 一定要包含普通模板; * @returns boolean */ -export const isDataSourceTemplate = (value: any, dsId: string | number) => - typeof value === 'string' && value.includes(`${dsId}`) && /\$\{([\s\S]+?)\}/.test(value); +export const isDataSourceTemplate = (value: any, ds: Pick, hasArray = false) => { + // 模板中可能会存在多个表达式，将表达式从模板中提取出来 + const templates: string[] = value.match(dataSourceTemplateRegExp) || []; + + if (templates.length <= 0) { + return false; + } + + const arrayFieldTemplates = []; + const fieldTemplates = []; + + templates.forEach((tpl) => { + // 将${dsId.xxxx} 转成 dsId.xxxx + const expression = tpl.substring(2, tpl.length - 1); + const keys = getKeysArray(expression); + const dsId = keys.shift(); + + if (!dsId || dsId !== ds.id) { + return; + } + + // ${dsId.array} ${dsId.array[0]} ${dsId.array[0].a} 这种是依赖 + // ${dsId.array.a} 这种不是依赖，这种需要再迭代器容器中的组件才能使用，依赖由迭代器处理 + if (isIncludeArrayField(keys, ds.fields)) { + arrayFieldTemplates.push(tpl); + } else { + fieldTemplates.push(tpl); + } + }); + + if (hasArray) { + return arrayFieldTemplates.length > 0; + } + + return fieldTemplates.length > 0; +}; /** * 指定数据源的字符串模板,如：{ isBindDataSourceField: true, dataSourceId: 'id', template: `xxx${field}xxx`} @@ -83,11 +123,11 @@ export const isSpecificDataSourceTemplate = (value: any, dsId: string | number) /** * 关联数据源字段，格式为 [前缀+数据源ID, 字段名] * 使用data-source-field-select value: 'value' 可以配置出来 - * @param value any + * @param value any[] * @param id string | number * @returns boolean */ -export const isUseDataSourceField = (value: any, id: string | number) => { +export const isUseDataSourceField = (value: any[], id: string | number) => { if (!Array.isArray(value) || typeof value[0] !== 'string') { return false; } @@ -107,20 +147,21 @@ export const isUseDataSourceField = (value: any, id: string | number) => { /** * 判断是否不包含${dsId.array.a} * @param value any - * @param ds DataSourceSchema + * @param ds Pick * @returns boolean */ -export const isDataSourceTemplateNotIncludeArrayField = (value: string, ds: DataSourceSchema): boolean => { +export const isDataSourceTemplateNotIncludeArrayField = ( + value: string, + ds: Pick, +): boolean => { // 模板中可能会存在多个表达式，将表达式从模板中提取出来 - const templates = value.match(/\$\{([\s\S]+?)\}/g) || []; + const templates = value.match(dataSourceTemplateRegExp) || []; + let result = false; for (const tpl of templates) { - const keys = tpl - // 将${dsId.xxxx} 转成 dsId.xxxx - .substring(2, tpl.length - 1) - // 将 array[0] 转成 array.0 - .replaceAll(/\[(\d+)\]/g, '.$1') - .split('.'); + // 将${dsId.xxxx} 转成 dsId.xxxx + const expression = tpl.substring(2, tpl.length - 1); + const keys = getKeysArray(expression); const dsId = keys.shift(); if (!dsId || dsId !== ds.id) { @@ -132,62 +173,108 @@ export const isDataSourceTemplateNotIncludeArrayField = (value: string, ds: Data if (isIncludeArrayField(keys, ds.fields)) { return false; } + result = true; } - return true; + return result; }; -export const createDataSourceTarget = (ds: DataSourceSchema, initialDeps: DepData = {}) => +export const isDataSourceTarget = ( + ds: Pick, + key: string | number, + value: any, + hasArray = false, +) => { + if (`${key}`.startsWith(NODE_CONDS_KEY)) { + return false; + } + + // 或者在模板在使用数据源 + if (typeof value === 'string') { + return isDataSourceTemplate(value, ds, hasArray); + } + + // 关联数据源对象,如：{ isBindDataSource: true, dataSourceId: 'xxx'} + // 使用data-source-select value: 'value' 可以配置出来 + if (isObject(value) && value?.isBindDataSource && value.dataSourceId && value.dataSourceId === ds.id) { + return true; + } + + if (isSpecificDataSourceTemplate(value, ds.id)) { + return true; + } + + if (isUseDataSourceField(value, ds.id)) { + const [, ...keys] = value; + const includeArray = isIncludeArrayField(keys, ds.fields); + if (hasArray) { + return includeArray; + } + return !includeArray; + } + + return false; +}; + +export const isDataSourceCondTarget = ( + ds: Pick, + key: string | number, + value: any, + hasArray = false, +) => { + if (!Array.isArray(value) || !ds) { + return false; + } + + const [dsId, ...keys] = value; + // 使用data-source-field-select value: 'key' 可以配置出来 + if (dsId !== ds.id || !`${key}`.startsWith(NODE_CONDS_KEY)) { + return false; + } + + if (ds.fields?.find((field) => field.name === keys[0])) { + const includeArray = isIncludeArrayField(keys, ds.fields); + if (hasArray) { + return includeArray; + } + return true; + } + + return false; +}; + +export const createDataSourceTarget = (ds: Pick, initialDeps: DepData = {}) => new Target({ type: DepTargetType.DATA_SOURCE, id: ds.id, initialDeps, - isTarget: (key: string | number, value: any) => { - // 关联数据源对象,如：{ isBindDataSource: true, dataSourceId: 'xxx'} - // 使用data-source-select value: 'value' 可以配置出来 - - if (value?.isBindDataSource && value.dataSourceId && value.dataSourceId === ds.id) { - return true; - } - - // 或者在模板在使用数据源 - if (isDataSourceTemplate(value, ds.id)) { - return isDataSourceTemplateNotIncludeArrayField(value, ds); - } - - if (isSpecificDataSourceTemplate(value, ds.id)) { - return true; - } - - if (isUseDataSourceField(value, ds.id)) { - const [, ...keys] = value; - return !isIncludeArrayField(keys, ds.fields); - } - - return false; - }, + isTarget: (key: string | number, value: any) => isDataSourceTarget(ds, key, value), }); -export const createDataSourceCondTarget = (ds: DataSourceSchema, initialDeps: DepData = {}) => +export const createDataSourceCondTarget = (ds: Pick, initialDeps: DepData = {}) => new Target({ type: DepTargetType.DATA_SOURCE_COND, id: ds.id, initialDeps, - isTarget: (key: string | number, value: any) => { - // 使用data-source-field-select value: 'key' 可以配置出来 - if (!Array.isArray(value) || value[0] !== ds.id || !`${key}`.startsWith('displayConds')) return false; - return Boolean(ds?.fields?.find((field) => field.name === value[1])); - }, + isTarget: (key: string | number, value: any) => isDataSourceCondTarget(ds, key, value), }); -export const createDataSourceMethodTarget = (ds: DataSourceSchema, initialDeps: DepData = {}) => +export const createDataSourceMethodTarget = (ds: Pick, initialDeps: DepData = {}) => new Target({ type: DepTargetType.DATA_SOURCE_METHOD, id: ds.id, initialDeps, isTarget: (key: string | number, value: any) => { // 使用data-source-method-select 可以配置出来 - if (!Array.isArray(value) || value[0] !== ds.id) return false; + if (!Array.isArray(value) || !ds) { + return false; + } + + const [dsId, ...keys] = value; + + if (dsId !== ds.id || ds.fields?.find((field) => field.name === keys[0])) { + return false; + } return true; }, diff --git a/packages/dep/tests/utils.spec.ts b/packages/dep/tests/utils.spec.ts index b268b6da..6a00e9c0 100644 --- a/packages/dep/tests/utils.spec.ts +++ b/packages/dep/tests/utils.spec.ts @@ -70,11 +70,11 @@ describe('utils', () => { }); test('isDataSourceTemplate', () => { - expect(utils.isDataSourceTemplate('xxx${dsId.field}xxx${dsId.field}', 'dsId')).toBeTruthy(); - expect(utils.isDataSourceTemplate('${dsId.field}', 'dsId')).toBeTruthy(); - expect(utils.isDataSourceTemplate('${dsId}', 'dsId')).toBeTruthy(); - expect(utils.isDataSourceTemplate('${dsId.field}', 'dsId1')).toBeFalsy(); - expect(utils.isDataSourceTemplate('${dsId.field', 'dsId')).toBeFalsy(); + expect(utils.isDataSourceTemplate('xxx${dsId.field}xxx${dsId.field}', { id: 'dsId', fields: [] })).toBeTruthy(); + expect(utils.isDataSourceTemplate('${dsId.field}', { id: 'dsId', fields: [] })).toBeTruthy(); + expect(utils.isDataSourceTemplate('${dsId}', { id: 'dsId', fields: [] })).toBeTruthy(); + expect(utils.isDataSourceTemplate('${dsId.field}', { id: 'dsId1', fields: [] })).toBeFalsy(); + expect(utils.isDataSourceTemplate('${dsId.field', { id: 'dsId', fields: [] })).toBeFalsy(); }); test('isSpecificDataSourceTemplate', () => { @@ -139,6 +139,7 @@ describe('utils', () => { id: 'dsId', methods: [], fields: arrayFields, + events: [], }), ).toBeTruthy(); @@ -148,6 +149,7 @@ describe('utils', () => { id: 'dsId', methods: [], fields: [...arrayFields, ...objectFields], + events: [], }), ).toBeTruthy(); @@ -157,6 +159,7 @@ describe('utils', () => { id: 'dsId', methods: [], fields: [...arrayFields, ...objectFields], + events: [], }), ).toBeFalsy(); @@ -166,6 +169,7 @@ describe('utils', () => { id: 'dsId', methods: [], fields: arrayFields, + events: [], }), ).toBeFalsy(); @@ -175,6 +179,7 @@ describe('utils', () => { id: 'dsId', methods: [], fields: arrayFields, + events: [], }), ).toBeFalsy(); @@ -184,6 +189,7 @@ describe('utils', () => { id: 'dsId', methods: [], fields: arrayFields, + events: [], }), ).toBeTruthy(); }); diff --git a/packages/editor/src/fields/DataSourceInput.vue b/packages/editor/src/fields/DataSourceInput.vue index 55b8e23e..51f78a1a 100644 --- a/packages/editor/src/fields/DataSourceInput.vue +++ b/packages/editor/src/fields/DataSourceInput.vue @@ -54,7 +54,7 @@ import { Coin } from '@element-plus/icons-vue'; import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design'; import type { FieldProps, FormItem } from '@tmagic/form'; import type { DataSchema, DataSourceSchema } from '@tmagic/schema'; -import { isNumber } from '@tmagic/utils'; +import { getKeysArray, isNumber } from '@tmagic/utils'; import Icon from '@editor/components/Icon.vue'; import type { Services } from '@editor/type'; @@ -218,7 +218,7 @@ const fieldQuerySearch = ( const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex); // 可能是xx.xx.xx，存在链式调用 - const keys = dsKey.replaceAll(/\[(\d+)\]/g, '.$1').split('.'); + const keys = getKeysArray(dsKey); // 最前的是数据源id const dsId = keys.shift(); diff --git a/packages/editor/src/initService.ts b/packages/editor/src/initService.ts index e252bfc7..5cae4236 100644 --- a/packages/editor/src/initService.ts +++ b/packages/editor/src/initService.ts @@ -192,6 +192,54 @@ export const initServiceEvents = ( ((event: 'update:modelValue', value: MApp | null) => void), { editorService, codeBlockService, dataSourceService, depService }: Services, ) => { + const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => { + if (!value) return; + + value.codeBlocks = value.codeBlocks || {}; + value.dataSources = value.dataSources || []; + + codeBlockService.setCodeDsl(value.codeBlocks); + dataSourceService.set('dataSources', value.dataSources); + + depService.removeTargets(DepTargetType.CODE_BLOCK); + + Object.entries(value.codeBlocks).forEach(([id, code]) => { + depService.addTarget(createCodeBlockTarget(id, code)); + }); + + dataSourceService.get('dataSources').forEach((ds) => { + initDataSourceDepTarget(ds); + }); + + if (Array.isArray(value.items)) { + collectIdle(value.items, true); + } else { + depService.clear(); + delete value.dataSourceDeps; + delete value.dataSourceCondDeps; + } + + const nodeId = editorService.get('node')?.id || props.defaultSelected; + let node; + if (nodeId) { + node = editorService.getNodeById(nodeId); + } + + if (node && node !== value) { + await editorService.select(node.id); + } else if (value.items?.length) { + await editorService.select(value.items[0]); + } else if (value.id) { + editorService.set('nodes', [value]); + editorService.set('parent', null); + editorService.set('page', null); + } + + if (toRaw(value) !== toRaw(preValue)) { + emit('update:modelValue', value); + } + }; + const getApp = () => { const stage = editorService.get('stage'); return stage?.renderer.runtime?.getApp?.(); @@ -292,55 +340,6 @@ export const initServiceEvents = ( depService.addTarget(createDataSourceCondTarget(ds, reactive({}))); }; - const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => { - if (!value) return; - - value.codeBlocks = value.codeBlocks || {}; - value.dataSources = value.dataSources || []; - - codeBlockService.setCodeDsl(value.codeBlocks); - dataSourceService.set('dataSources', value.dataSources); - - depService.removeTargets(DepTargetType.CODE_BLOCK); - - Object.entries(value.codeBlocks).forEach(([id, code]) => { - depService.addTarget(createCodeBlockTarget(id, code)); - }); - - dataSourceService.get('dataSources').forEach((ds) => { - initDataSourceDepTarget(ds); - }); - - if (Array.isArray(value.items)) { - value.items.forEach((page) => { - depService.collectIdle([page], { pageId: page.id }, true); - }); - } else { - depService.clear(); - delete value.dataSourceDeps; - } - - const nodeId = editorService.get('node')?.id || props.defaultSelected; - let node; - if (nodeId) { - node = editorService.getNodeById(nodeId); - } - - if (node && node !== value) { - await editorService.select(node.id); - } else if (value.items?.length) { - await editorService.select(value.items[0]); - } else if (value.id) { - editorService.set('nodes', [value]); - editorService.set('parent', null); - editorService.set('page', null); - } - - if (toRaw(value) !== toRaw(preValue)) { - emit('update:modelValue', value); - } - }; - const collectIdle = (nodes: MNode[], deep: boolean) => { nodes.forEach((node) => { let pageId: Id | undefined; @@ -372,7 +371,7 @@ export const initServiceEvents = ( // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖 const historyChangeHandler = (page: MPage | MPageFragment) => { - depService.collectIdle([page], { pageId: page.id }, true); + collectIdle([page], true); }; editorService.on('history-change', historyChangeHandler); @@ -407,9 +406,7 @@ export const initServiceEvents = ( removeDataSourceTarget(config.id); initDataSourceDepTarget(config); - (root?.items || []).forEach((page) => { - depService.collectIdle([page], { pageId: page.id }, true); - }); + collectIdle(root?.items || [], true); }; const removeDataSourceTarget = (id: string) => { diff --git a/packages/editor/src/utils/data-source/index.ts b/packages/editor/src/utils/data-source/index.ts index 2d17618e..5c1aa974 100644 --- a/packages/editor/src/utils/data-source/index.ts +++ b/packages/editor/src/utils/data-source/index.ts @@ -1,6 +1,11 @@ import { CascaderOption, FormConfig, FormState } from '@tmagic/form'; import { DataSchema, DataSourceFieldType, DataSourceSchema } from '@tmagic/schema'; -import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, isNumber } from '@tmagic/utils'; +import { + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, + dataSourceTemplateRegExp, + getKeysArray, + isNumber, +} from '@tmagic/utils'; import BaseFormConfig from './formConfigs/base'; import HttpFormConfig from './formConfigs/http'; @@ -118,7 +123,7 @@ export const getFormValue = (type: string, values: Partial): P * context：上下文对象 * * interface Content { - * app: AppCore; + * app: TMagicApp; * dataSource: HttpDataSource; * } * @@ -135,7 +140,7 @@ export const getFormValue = (type: string, values: Partial): P * context：上下文对象 * * interface Content { - * app: AppCore; + * app: TMagicApp; * dataSource: HttpDataSource; * } * @@ -152,7 +157,7 @@ export const getDisplayField = (dataSources: DataSourceSchema[], key: string) => const displayState: { value: string; type: 'var' | 'text' }[] = []; // 匹配es6字符串模块 - const matches = key.matchAll(/\$\{([\s\S]+?)\}/g); + const matches = key.matchAll(dataSourceTemplateRegExp); let index = 0; for (const match of matches) { if (typeof match.index === 'undefined') break; @@ -167,25 +172,22 @@ export const getDisplayField = (dataSources: DataSourceSchema[], key: string) => let ds: DataSourceSchema | undefined; let fields: DataSchema[] | undefined; // 将模块解析成数据源对应的值 - match[1] - .replaceAll(/\[(\d+)\]/g, '.$1') - .split('.') - .forEach((item, index) => { - if (index === 0) { - ds = dataSources.find((ds) => ds.id === item); - dsText += ds?.title || item; - fields = ds?.fields; - return; - } + getKeysArray(match[1]).forEach((item, index) => { + if (index === 0) { + ds = dataSources.find((ds) => ds.id === item); + dsText += ds?.title || item; + fields = ds?.fields; + return; + } - if (isNumber(item)) { - dsText += `[${item}]`; - } else { - const field = fields?.find((field) => field.name === item); - fields = field?.fields; - dsText += `.${field?.title || item}`; - } - }); + if (isNumber(item)) { + dsText += `[${item}]`; + } else { + const field = fields?.find((field) => field.name === item); + fields = field?.fields; + dsText += `.${field?.title || item}`; + } + }); displayState.push({ type: 'var', diff --git a/packages/editor/src/utils/props.ts b/packages/editor/src/utils/props.ts index e5521856..c9ac6ca6 100644 --- a/packages/editor/src/utils/props.ts +++ b/packages/editor/src/utils/props.ts @@ -18,6 +18,7 @@ */ import type { FormConfig, FormState, TabPaneConfig } from '@tmagic/form'; +import { NODE_CONDS_KEY } from '@tmagic/schema'; export const arrayOptions = [ { text: '包含', value: 'include' }, @@ -359,7 +360,7 @@ export const displayTabConfig: TabPaneConfig = { items: [ { type: 'display-conds', - name: 'displayConds', + name: NODE_CONDS_KEY, titlePrefix: '条件组', defaultValue: [], }, diff --git a/packages/schema/package.json b/packages/schema/package.json index 92d9a3ef..87c2b486 100644 --- a/packages/schema/package.json +++ b/packages/schema/package.json @@ -38,6 +38,7 @@ "vite": "^5.3.5" }, "peerDependencies": { + "@types/events": "^3.0.0", "typescript": "*" }, "peerDependenciesMeta": { diff --git a/packages/schema/src/index.ts b/packages/schema/src/index.ts index b20ded1b..0974ba97 100644 --- a/packages/schema/src/index.ts +++ b/packages/schema/src/index.ts @@ -35,18 +35,6 @@ export type RequestFunction = (options: HttpOptions) => Promise; export type JsEngine = 'browser' | 'hippy' | 'nodejs'; -export interface AppCore { - /** 页面配置描述 */ - dsl?: MApp; - /** 允许平台，editor: 编辑器中，mobile: 手机端，tv: 电视端, pc: 电脑端 */ - platform?: 'editor' | 'mobile' | 'tv' | 'pc' | string; - /** 代码运行环境 */ - jsEngine?: JsEngine | string; - /** 网络请求函数 */ - request?: RequestFunction; - [key: string]: any; -} - export enum NodeType { /** 容器 */ CONTAINER = 'container', @@ -58,6 +46,8 @@ export enum NodeType { PAGE_FRAGMENT = 'page-fragment', } +export const NODE_CONDS_KEY = 'displayConds'; + export type Id = string | number; // 事件联动的动作类型 @@ -97,7 +87,7 @@ export interface CodeItemConfig { /** 代码ID */ codeId: Id; /** 代码参数 */ - params?: object; + params?: Record; } export interface CompItemConfig { @@ -139,7 +129,7 @@ export interface MComponent { style?: { [key: string]: any; }; - displayConds?: DisplayCond[]; + [NODE_CONDS_KEY]?: DisplayCond[]; [key: string]: any; } @@ -150,6 +140,17 @@ export interface MContainer extends MComponent { items: (MComponent | MContainer)[]; } +export interface MIteratorContainer extends MContainer { + type: 'iterator-container'; + iteratorData: any[]; + dsField: string[]; + itemConfig: { + layout: string; + [NODE_CONDS_KEY]: DisplayCond[]; + style: Record; + }; +} + export interface MPage extends MContainer { /** 页面类型 */ type: NodeType.PAGE; @@ -203,7 +204,7 @@ export interface PastePosition { top?: number; } -export type MNode = MComponent | MContainer | MPage | MApp | MPageFragment; +export type MNode = MComponent | MContainer | MIteratorContainer | MPage | MApp | MPageFragment; export enum HookType { /** 代码块钩子标识 */ diff --git a/packages/stage/package.json b/packages/stage/package.json index bf1d3bfd..e59b123c 100644 --- a/packages/stage/package.json +++ b/packages/stage/package.json @@ -38,7 +38,8 @@ "keycon": "^1.4.0", "lodash-es": "^4.17.21", "moveable": "^0.53.0", - "moveable-helper": "^0.4.0" + "moveable-helper": "^0.4.0", + "scenejs": "^1.10.3" }, "devDependencies": { "@types/events": "^3.0.0", diff --git a/packages/ui/package.json b/packages/ui/package.json index 94d83eb9..6bb63147 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -33,7 +33,7 @@ "@tmagic/core": "workspace:*", "@tmagic/schema": "workspace:*", "@tmagic/utils": "workspace:*", - "@tmagic/vue-runtime-help": ">=0.0.7", + "@tmagic/vue-runtime-help": "workspace:*", "vue": ">=3.4.27", "typescript": "*" }, diff --git a/packages/ui/src/container/src/Container.vue b/packages/ui/src/container/src/Container.vue index 150569da..1d08c5c5 100644 --- a/packages/ui/src/container/src/Container.vue +++ b/packages/ui/src/container/src/Container.vue @@ -1,12 +1,22 @@