JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-05 19:41:40 +08:00
Code Issues Projects Releases Wiki Activity

feat: 完善迭代器嵌套使用问题，重构事件配置处理代码

Browse Source 
* feat(editor,core,data-source,dep,schema,ui,utils,vue-runtime-help): 完善迭代器

* test: 完善测试用例

* chore: 构建

* feat: 迭代器嵌套事件传递数据

---------

Co-authored-by: roymondchen <roymondchen@tencent.com>
This commit is contained in:
roymondchen 2024-08-08 15:52:29 +08:00
parent 5e7ac69929
commit de47514f69
44 changed files with 1530 additions and 948 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/cli/src/utils/allowTs.ts
View File

@ -10,7 +10,7 @@ export const transformTsFileToCodeSync = (filename: string): string =>
loader: 'ts',
sourcefile: filename,
sourcemap: 'inline',
target: 'node14',
target: 'node18',
}).code;
/**

17
packages/cli/tests/Core.spec.ts Normal file
View File

@ -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'));
});
});

274
packages/core/src/App.ts
View File

@ -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<string, any>) => Record<string, any>;
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<string, EventCache[]> = {};
public pageFragmentContainerType = new Set(['page-fragment-container']);
public iteratorContainerType = new Set(['iterator-container']);
public request?: RequestFunction;
public transformStyle: (style: Record<string, any>) => Record<string, any>;
public eventHelper?: EventHelper;
public flexible?: Flexible;
private eventList = new Map<(fromCpt: Node, ...args: any[]) => void, string>();
private dataSourceEventList = new Map<string, Map<string, (...args: any[]) => 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<string, any>) => 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<T extends Node = Node>(id: Id, iteratorContainerId?: Id[], iteratorIndex?: number[]) {
return this.page?.getNode<T>(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<string, any>, 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<string, any>, 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<string, (args: any) => 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();
}
}

260
packages/core/src/EventHelper.ts Normal file
View File

@ -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<string, Map<string, (...args: any[]) => 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<string, (args: any) => 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);
}
};
}

104
packages/core/src/IteratorContainer.ts Normal file
View File

@ -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<Id, TMagicNode>[] = [];
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<Id, TMagicNode>) {
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;

38
packages/core/src/Node.ts
View File

@ -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<string, symbol>();
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<string, any>; dataSource?: DataSource } = {
const functionParams: { app: TMagicApp; params: Record<string, any>; dataSource?: DataSource } = {
app: this.app,
params,
};

46
packages/core/src/Page.ts
View File

@ -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<Id, Node>();
public nodes = new Map<Id, TMagicNode>();
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<T extends TMagicNode = TMagicNode>(
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);
}

118
packages/core/src/events.ts
View File

@ -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;
}
};

4
packages/core/src/index.ts
View File

@ -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;

51
packages/core/src/utils.ts
View File

@ -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, any> | 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[] = [];

239
packages/core/tests/App.spec.ts Normal file
View File

@ -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);
});
});

99
packages/data-source/src/DataSourceManager.ts
View File

@ -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<string, typeof DataSource>();
@ -37,13 +39,6 @@ class DataSourceManager extends EventEmitter {
DataSourceManager.dataSourceClassMap.set(type, dataSource);
}
/**
* @deprecated
*/
public static registe<T extends typeof DataSource = typeof DataSource>(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<string, DataSource>();
@ -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<TMagicIteratorContainer>(
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() {

12
packages/data-source/src/createDataSourceManager.ts
View File

@ -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;

5
packages/data-source/src/data-sources/Base.ts
View File

@ -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<T extends DataSourceSchema = DataSourceSchema> e
public isInit = false;
/** @tmagic/core 实例 */
public app: AppCore;
public app: TMagicApp;
protected mockData?: Record<string | number, any>;

47
packages/data-source/src/depsCache.ts Normal file
View File

@ -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;
};

13
packages/data-source/src/types.ts
View File

@ -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<T extends DataSourceSchema = DataSourceSchema> {
schema: T;
app: AppCore;
app: TMagicApp;
initialData?: Record<string, any>;
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<HttpOptions> }) => any);
| ((response: any, content: { app: TMagicApp; dataSource: HttpDataSource; options: Partial<HttpOptions> }) => any);
}
export interface DataSourceManagerOptions {
app: AppCore;
app: TMagicApp;
/** 初始化数据，ssr数据可以由此传入 */
initialData?: DataSourceManagerData;
/** 是否使用mock数据 */

182
packages/data-source/src/utils.ts
View File

@ -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<string, any> = 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,

14
packages/data-source/tests/DataSource.spec.ts
View File

@ -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();

21
packages/data-source/tests/DataSourceMenager.spec.ts
View File

@ -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);
});

68
packages/data-source/tests/utils.spec.ts Normal file
View File

@ -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);
});
});

209
packages/dep/src/utils.ts
View File

@ -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<DataSourceSchema, 'id' | 'fields'>, 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<DataSourceSchema, 'id' | 'fields'>
* @returns boolean
*/
export const isDataSourceTemplateNotIncludeArrayField = (value: string, ds: DataSourceSchema): boolean => {
export const isDataSourceTemplateNotIncludeArrayField = (
value: string,
ds: Pick<DataSourceSchema, 'id' | 'fields'>,
): 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<DataSourceSchema, 'id' | 'fields'>,
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<DataSourceSchema, 'id' | 'fields'>,
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<DataSourceSchema, 'id' | 'fields'>, 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<DataSourceSchema, 'id' | 'fields'>, 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<DataSourceSchema, 'id' | 'fields'>, 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;
},

16
packages/dep/tests/utils.spec.ts
View File

@ -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();
});

4
packages/editor/src/fields/DataSourceInput.vue
View File

@ -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();

103
packages/editor/src/initService.ts
View File

@ -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) => {

46
packages/editor/src/utils/data-source/index.ts
View File

@ -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<DataSourceSchema>): P
* context：上下文对象
*
* interface Content {
* app: AppCore;
* app: TMagicApp;
* dataSource: HttpDataSource;
* }
*
@ -135,7 +140,7 @@ export const getFormValue = (type: string, values: Partial<DataSourceSchema>): 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',

3
packages/editor/src/utils/props.ts
View File

@ -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: [],
},

1
packages/schema/package.json
View File

@ -38,6 +38,7 @@
"vite": "^5.3.5"
},
"peerDependencies": {
"@types/events": "^3.0.0",
"typescript": "*"
},
"peerDependenciesMeta": {

31
packages/schema/src/index.ts
View File

@ -35,18 +35,6 @@ export type RequestFunction = <T = any>(options: HttpOptions) => Promise<T>;
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<string, any>;
}
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<string, string | number>;
};
}
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 {
/** 代码块钩子标识 */

3
packages/stage/package.json
View File

@ -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",

2
packages/ui/package.json
View File

@ -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": "*"
},

30
packages/ui/src/container/src/Container.vue
View File

@ -1,12 +1,22 @@
<template>
<div v-if="display(config)" :id="`${config.id}`" :class="className" :style="app?.transformStyle(config.style || {})">
<div
v-if="display(config)"
:id="`${config.id}`"
:data-iterator-index="iteratorIndex"
:data-iterator-container-id="iteratorContainerId"
:class="className"
:style="app?.transformStyle(config.style || {})"
>
<slot>
<template v-for="item in config.items">
<template v-for="(item, index) in config.items">
<component
v-if="display(item)"
:key="item.id"
:is="`magic-ui-${toLine(item.type)}`"
:id="item.id"
:data-container-index="index"
:data-iterator-index="iteratorIndex"
:data-iterator-container-id="iteratorContainerId"
:class="`${item.className || ''}`"
:style="app?.transformStyle(item.style || {})"
:config="{ ...item, [IS_DSL_NODE_KEY]: true }"
@ -19,13 +29,21 @@
<script lang="ts" setup>
import { computed } from 'vue';
import type { MContainer, UiComponentProps } from '@tmagic/schema';
import type { Id, MContainer, UiComponentProps } from '@tmagic/schema';
import { IS_DSL_NODE_KEY, toLine } from '@tmagic/utils';
import { useApp } from '@tmagic/vue-runtime-help';
const props = withDefaults(defineProps<UiComponentProps<MContainer>>(), {
model: () => ({}),
});
const props = withDefaults(
defineProps<
UiComponentProps<MContainer> & {
iteratorIndex?: number[];
iteratorContainerId?: Id[];
}
>(),
{
model: () => ({}),
},
);
const { display, app } = useApp({
config: props.config,

77
packages/ui/src/iterator-container/src/IteratorContainer.vue
View File

@ -1,30 +1,34 @@
<template>
<div class="magic-ui-iterator-container">
<Container v-for="(item, index) in configs" :key="index" :config="item"></Container>
<div
class="magic-ui-iterator-container"
:data-iterator-index="dataIteratorIndex"
:data-iterator-container-id="dataIteratorContainerId"
>
<Container
v-for="(item, index) in configs"
:iterator-index="[...(dataIteratorIndex || []), index]"
:iterator-container-id="[...(dataIteratorContainerId || []), config.id]"
:key="index"
:config="item"
></Container>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { computed, watch } from 'vue';
import { type DisplayCond, type MContainer, NodeType } from '@tmagic/schema';
import type { IteratorContainer as TMagicIteratorContainer } from '@tmagic/core';
import { type Id, type MIteratorContainer, NodeType } from '@tmagic/schema';
import { useApp } from '@tmagic/vue-runtime-help';
import Container from '../../container';
const props = withDefaults(
defineProps<{
config: MContainer & {
type: 'iterator-container';
iteratorData: any[];
dsField: string[];
itemConfig: {
layout: string;
displayConds: DisplayCond[];
style: Record<string, string | number>;
};
};
config: MIteratorContainer;
model?: any;
dataIteratorIndex?: number[];
dataIteratorContainerId?: Id[];
}>(),
{
model: () => ({}),
@ -33,11 +37,14 @@ const props = withDefaults(
const { app } = useApp({
config: props.config,
iteratorContainerId: props.dataIteratorContainerId,
iteratorIndex: props.dataIteratorIndex,
methods: {},
});
const configs = computed(() => {
let { iteratorData = [] } = props.config;
const { id, itemConfig, dsField, items } = props.config;
if (!Array.isArray(iteratorData)) {
iteratorData = [];
@ -50,18 +57,26 @@ const configs = computed(() => {
return iteratorData.map((itemData) => {
const condResult =
app?.platform !== 'editor'
? app?.dataSourceManager?.compliedIteratorItemConds(itemData, props.config.itemConfig.displayConds) ?? true
? app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true
: true;
const newItems =
app?.dataSourceManager?.compliedIteratorItems(
id,
itemData,
items,
dsField,
props.dataIteratorContainerId,
props.dataIteratorIndex,
) ?? items;
return {
items:
app?.dataSourceManager?.compliedIteratorItems(itemData, props.config.items, props.config.dsField) ??
props.config.items,
items: newItems,
id: '',
type: NodeType.CONTAINER,
condResult,
style: {
...props.config.itemConfig.style,
...itemConfig.style,
position: 'relative',
left: 0,
top: 0,
@ -69,4 +84,28 @@ const configs = computed(() => {
};
});
});
watch(
configs,
(configs) => {
const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(
props.config.id,
props.dataIteratorContainerId,
props.dataIteratorIndex,
);
if (!iteratorContainerNode) {
return;
}
iteratorContainerNode.resetNodes();
configs.forEach((config, index) => {
iteratorContainerNode.setNodes(config.items, index);
});
},
{
immediate: true,
},
);
</script>

4
packages/ui/src/iterator-container/src/formConfig.ts
View File

@ -15,6 +15,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { NODE_CONDS_KEY } from '@tmagic/schema';
import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
export default [
@ -45,9 +46,8 @@ export default [
items: [
{
type: 'display-conds',
name: 'displayConds',
name: NODE_CONDS_KEY,
titlePrefix: '条件组',
parentFields: (formState: any, { formValue }: any) => formValue.dsField,
defaultValue: [],
},
{

6
packages/ui/src/shims-vue.d.ts vendored
View File

@ -1,6 +0,0 @@
declare module '*.vue' {
import { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}

30
packages/utils/src/index.ts
View File

@ -163,18 +163,26 @@ export const guid = (digit = 8): string =>
return v.toString(16);
});
export const getKeysArray = (keys: string | number) =>
// 将 array[0] 转成 array.0
`${keys}`.replaceAll(/\[(\d+)\]/g, '.$1').split('.');
export const getValueByKeyPath = (
keys: number | string | string[] = '',
data: Record<string | number, any> = {},
): any => {
// 将 array[0] 转成 array.0
const keyArray = Array.isArray(keys) ? keys : `${keys}`.replaceAll(/\[(\d+)\]/g, '.$1').split('.');
const keyArray = Array.isArray(keys) ? keys : getKeysArray(keys);
return keyArray.reduce((accumulator, currentValue: any) => {
if (isObject(accumulator) || Array.isArray(accumulator)) {
if (isObject(accumulator)) {
return accumulator[currentValue];
}
return void 0;
if (Array.isArray(accumulator) && /^\d*$/.test(`${currentValue}`)) {
return accumulator[currentValue];
}
throw new Error(`${data}中不存在${keys}`);
}, data);
};
@ -267,7 +275,7 @@ export const compiledNode = (
}
keys.forEach((key) => {
const keys = `${key}`.replaceAll(/\[(\d+)\]/g, '.$1').split('.');
const keys = getKeysArray(key);
const cacheKey = keys.map((key, index) => {
if (index < keys.length - 1) {
@ -276,12 +284,16 @@ export const compiledNode = (
return `${DSL_NODE_KEY_COPY_PREFIX}${key}`;
});
const value = getValueByKeyPath(key, node);
let templateValue = getValueByKeyPath(cacheKey, node);
if (typeof templateValue === 'undefined') {
setValueByKeyPath(cacheKey.join('.'), value, node);
templateValue = value;
try {
const value = getValueByKeyPath(key, node);
setValueByKeyPath(cacheKey.join('.'), value, node);
templateValue = value;
} catch (e) {
console.warn(e);
return;
}
}
let newValue;
@ -435,3 +447,5 @@ export const addParamToUrl = (obj: Record<string, any>, global = globalThis, nee
global.history.pushState({}, '', url);
}
};
export const dataSourceTemplateRegExp = /\$\{([\s\S]+?)\}/g;

22
packages/utils/tests/unit/index.spec.ts
View File

@ -16,7 +16,7 @@
* limitations under the License.
*/
import { describe, expect, test } from 'vitest';
import { assert, describe, expect, test } from 'vitest';
import type { DataSchema } from '@tmagic/schema';
@ -354,17 +354,23 @@ describe('getValueByKeyPath', () => {
});
test('error', () => {
const value = util.getValueByKeyPath('a.b.c.d', {
a: {},
assert.throws(() => {
util.getValueByKeyPath('a.b.c.d', {
a: {},
});
});
expect(value).toBeUndefined();
const value1 = util.getValueByKeyPath('a.b.c', {
a: {},
assert.throws(() => {
util.getValueByKeyPath('a.b.c', {
a: {},
});
});
expect(value1).toBeUndefined();
assert.doesNotThrow(() => {
util.getValueByKeyPath('a', {
a: {},
});
});
});
});

199
pnpm-lock.yaml generated
View File

@ -481,6 +481,9 @@ importers:
packages/schema:
dependencies:
'@types/events':
specifier: ^3.0.0
version: 3.0.3
typescript:
specifier: '*'
version: 5.5.4
@ -524,6 +527,9 @@ importers:
moveable-helper:
specifier: ^0.4.0
version: 0.4.0(scenejs@1.10.3)
scenejs:
specifier: ^1.10.3
version: 1.10.3
typescript:
specifier: '*'
version: 5.5.4
@ -642,8 +648,8 @@ importers:
specifier: workspace:*
version: link:../utils
'@tmagic/vue-runtime-help':
specifier: '>=0.0.7'
version: 0.0.7(@tmagic/core@packages+core)(@tmagic/data-source@1.4.19(@tmagic/schema@packages+schema)(@tmagic/utils@packages+utils)(typescript@5.5.4))(@tmagic/schema@packages+schema)(@tmagic/stage@1.4.19(@tmagic/core@packages+core)(@tmagic/schema@packages+schema)(@tmagic/utils@packages+utils)(scenejs@1.10.3)(typescript@5.5.4))(@tmagic/utils@packages+utils)(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
specifier: workspace:*
version: link:../../runtime/vue-runtime-help
qrcode:
specifier: ^1.5.0
version: 1.5.3
@ -958,20 +964,20 @@ importers:
runtime/vue-runtime-help:
dependencies:
'@tmagic/core':
specifier: '>=1.4.16'
version: 1.4.16(@tmagic/data-source@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
specifier: workspace:*
version: link:../../packages/core
'@tmagic/data-source':
specifier: '>=1.4.16'
version: 1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
specifier: workspace:*
version: link:../../packages/data-source
'@tmagic/schema':
specifier: '>=1.4.16'
version: 1.4.16(typescript@5.5.4)
specifier: workspace:*
version: link:../../packages/schema
'@tmagic/stage':
specifier: '>=1.4.16'
version: 1.4.16(@tmagic/core@1.4.16(@tmagic/data-source@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(scenejs@1.10.3)(typescript@5.5.4)
specifier: workspace:*
version: link:../../packages/stage
'@tmagic/utils':
specifier: '>=1.4.16'
version: 1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4)
specifier: workspace:*
version: link:../../packages/utils
'@vue/composition-api':
specifier: '>=1.7.2'
version: 1.7.2(vue@3.4.35(typescript@5.5.4))
@ -2347,18 +2353,6 @@ packages:
typescript:
optional: true
'@tmagic/core@1.4.16':
resolution: {integrity: sha512-rXNMtENGI+1YUQxp7jqqrAfUZ87cuF16wwSccpz+9+E8KG6VLRks110IjF1jcTxfcVY7tLrdeWX8RLTTYTz1Pg==}
engines: {node: '>=18'}
peerDependencies:
'@tmagic/data-source': 1.4.16
'@tmagic/schema': 1.4.16
'@tmagic/utils': 1.4.16
typescript: '*'
peerDependenciesMeta:
typescript:
optional: true
'@tmagic/core@1.4.19':
resolution: {integrity: sha512-+bnuHypmODdbp4Wmwpu0eBMBo4mqkt8c8ysd2P0686KiYgoiWJq6Sq6L9vM9HoRugk8wliksGgmKpQD1f3f9MA==}
engines: {node: '>=18'}
@ -2371,17 +2365,6 @@ packages:
typescript:
optional: true
'@tmagic/data-source@1.4.16':
resolution: {integrity: sha512-gYUARAJ5IpJzh2R9nTsvpISTJk8uiEwGwiRfpErgD2OzX9a2uEKvDaFK3GWTUtg8LLlw+UUC/vIt3Qk/89aEGg==}
engines: {node: '>=18'}
peerDependencies:
'@tmagic/schema': 1.4.16
'@tmagic/utils': 1.4.16
typescript: '*'
peerDependenciesMeta:
typescript:
optional: true
'@tmagic/data-source@1.4.19':
resolution: {integrity: sha512-siBAN+N6TJqAHZ7sW6rX6p31tqGDl/lMntkBzK5HPv1MmgGyOiN9EmmuBZTF69O8JbqFcH3ErHep4zcJfVmF3w==}
engines: {node: '>=18'}
@ -2404,17 +2387,6 @@ packages:
typescript:
optional: true
'@tmagic/dep@1.4.16':
resolution: {integrity: sha512-wB7lE9wwODHPhOH/FvIyt5Gq/stuJ/0rw0H3uTDb3rkyI/R7tTxvGTjmTsUditV8xKiHmiql6IC/XjTvWOKiAw==}
engines: {node: '>=18'}
peerDependencies:
'@tmagic/schema': 1.4.16
'@tmagic/utils': 1.4.16
typescript: '*'
peerDependenciesMeta:
typescript:
optional: true
'@tmagic/dep@1.4.19':
resolution: {integrity: sha512-8nr+Bv4U9y/NjM1JpA4NyoVMbiKZhH05TCNTJpJs642g40Bn4yZQA6DY3UtMjXsjSIRB6VqC/jd89lfgv/wzqw==}
engines: {node: '>=18'}
@ -2514,15 +2486,6 @@ packages:
typescript:
optional: true
'@tmagic/schema@1.4.16':
resolution: {integrity: sha512-1aPNwOZcLEQMnnp7n8Azrbq2kamBnUW0i6CizC7LOGXzIDV7kNvHKP/SLjZoKc86i8XX863+8mRwop5gkn5W+g==}
engines: {node: '>=18'}
peerDependencies:
typescript: '*'
peerDependenciesMeta:
typescript:
optional: true
'@tmagic/schema@1.4.19':
resolution: {integrity: sha512-JvlqseW6WMGRQUPgiwZC8F1R4SMGwU2tgtGXijxwan6fNmEbXQlvTTfCqQbYnarzQlaVN/W0DIcdxp251lrXOw==}
engines: {node: '>=18'}
@ -2544,18 +2507,6 @@ packages:
typescript:
optional: true
'@tmagic/stage@1.4.16':
resolution: {integrity: sha512-/05Im0FkB6xH/PR/FOwf7TJc68fTWA7badJeBq2eL0ofctdBDMfJ/rlW6tcO/xCZ2KHFJH9v0XFWWW0UA+48ew==}
engines: {node: '>=18'}
peerDependencies:
'@tmagic/core': 1.4.16
'@tmagic/schema': 1.4.16
'@tmagic/utils': 1.4.16
typescript: '*'
peerDependenciesMeta:
typescript:
optional: true
'@tmagic/stage@1.4.19':
resolution: {integrity: sha512-d9w0Q1faJirv1iX8OCaXKpIPxNDODwpgdheUI2yGS44VGEY49F3lW+80KKHitldlpl9Jh4rlwMfb0bWww9Xehw==}
engines: {node: '>=18'}
@ -2658,16 +2609,6 @@ packages:
typescript:
optional: true
'@tmagic/utils@1.4.16':
resolution: {integrity: sha512-bljMgc6a9DvbvCc1yawgCOzMqml6K5qgw4OBYVcxr06d+fT2pWfwCNrwZ5o8I2w6i0YcDMmKBr4ADy2Zb+cr6Q==}
engines: {node: '>=18'}
peerDependencies:
'@tmagic/schema': 1.4.16
typescript: '*'
peerDependenciesMeta:
typescript:
optional: true
'@tmagic/utils@1.4.19':
resolution: {integrity: sha512-0jM+0UOiGmLWYj0cHTMqo1BawmA63oZDbanzNhEWhwhNJ+wUFbWadvCc8qOithXShVW9tw2BNCzbPyx5kr6eIQ==}
engines: {node: '>=18'}
@ -7575,16 +7516,6 @@ snapshots:
optionalDependencies:
typescript: 5.5.4
'@tmagic/core@1.4.16(@tmagic/data-source@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
dependencies:
'@tmagic/data-source': 1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
'@tmagic/schema': 1.4.16(typescript@5.5.4)
'@tmagic/utils': 1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4)
events: 3.3.0
lodash-es: 4.17.21
optionalDependencies:
typescript: 5.5.4
'@tmagic/core@1.4.19(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
dependencies:
'@tmagic/data-source': 1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
@ -7595,17 +7526,6 @@ snapshots:
optionalDependencies:
typescript: 5.5.4
'@tmagic/data-source@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
dependencies:
'@tmagic/dep': 1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
'@tmagic/schema': 1.4.16(typescript@5.5.4)
'@tmagic/utils': 1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4)
deep-state-observer: 5.5.13
events: 3.3.0
lodash-es: 4.17.21
optionalDependencies:
typescript: 5.5.4
'@tmagic/data-source@1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
dependencies:
'@tmagic/dep': 1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
@ -7628,17 +7548,6 @@ snapshots:
optionalDependencies:
typescript: 5.5.4
'@tmagic/data-source@1.4.19(@tmagic/schema@packages+schema)(@tmagic/utils@packages+utils)(typescript@5.5.4)':
dependencies:
'@tmagic/dep': 1.4.19(@tmagic/schema@packages+schema)(@tmagic/utils@packages+utils)(typescript@5.5.4)
'@tmagic/schema': link:packages/schema
'@tmagic/utils': link:packages/utils
deep-state-observer: 5.5.13
events: 3.3.0
lodash-es: 4.17.21
optionalDependencies:
typescript: 5.5.4
'@tmagic/dep@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
dependencies:
'@tmagic/schema': 1.4.15(typescript@5.5.4)
@ -7646,13 +7555,6 @@ snapshots:
optionalDependencies:
typescript: 5.5.4
'@tmagic/dep@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
dependencies:
'@tmagic/schema': 1.4.16(typescript@5.5.4)
'@tmagic/utils': 1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4)
optionalDependencies:
typescript: 5.5.4
'@tmagic/dep@1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
dependencies:
'@tmagic/schema': 1.4.15(typescript@5.5.4)
@ -7667,13 +7569,6 @@ snapshots:
optionalDependencies:
typescript: 5.5.4
'@tmagic/dep@1.4.19(@tmagic/schema@packages+schema)(@tmagic/utils@packages+utils)(typescript@5.5.4)':
dependencies:
'@tmagic/schema': link:packages/schema
'@tmagic/utils': link:packages/utils
optionalDependencies:
typescript: 5.5.4
'@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))':
dependencies:
vue: 3.4.35(typescript@5.5.4)
@ -7766,10 +7661,6 @@ snapshots:
optionalDependencies:
typescript: 5.5.4
'@tmagic/schema@1.4.16(typescript@5.5.4)':
optionalDependencies:
typescript: 5.5.4
'@tmagic/schema@1.4.19(typescript@5.5.4)':
optionalDependencies:
typescript: 5.5.4
@ -7790,22 +7681,6 @@ snapshots:
transitivePeerDependencies:
- scenejs
'@tmagic/stage@1.4.16(@tmagic/core@1.4.16(@tmagic/data-source@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(scenejs@1.10.3)(typescript@5.5.4)':
dependencies:
'@scena/guides': 0.29.2
'@tmagic/core': 1.4.16(@tmagic/data-source@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.16(typescript@5.5.4))(@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
'@tmagic/schema': 1.4.16(typescript@5.5.4)
'@tmagic/utils': 1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4)
events: 3.3.0
keycon: 1.4.0
lodash-es: 4.17.21
moveable: 0.53.0
moveable-helper: 0.4.0(scenejs@1.10.3)
optionalDependencies:
typescript: 5.5.4
transitivePeerDependencies:
- scenejs
'@tmagic/stage@1.4.19(@tmagic/core@1.4.19(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(scenejs@1.10.3)(typescript@5.5.4)':
dependencies:
'@scena/guides': 0.29.2
@ -7822,23 +7697,6 @@ snapshots:
transitivePeerDependencies:
- scenejs
'@tmagic/stage@1.4.19(@tmagic/core@packages+core)(@tmagic/schema@packages+schema)(@tmagic/utils@packages+utils)(scenejs@1.10.3)(typescript@5.5.4)':
dependencies:
'@scena/guides': 0.29.2
'@tmagic/core': link:packages/core
'@tmagic/schema': link:packages/schema
'@tmagic/utils': link:packages/utils
events: 3.3.0
keycon: 1.4.0
lodash-es: 4.17.21
moveable: 0.53.0
moveable-helper: 0.4.0(scenejs@1.10.3)
optionalDependencies:
typescript: 5.5.4
transitivePeerDependencies:
- scenejs
optional: true
'@tmagic/table@1.4.15(@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/form@1.4.15(@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))':
dependencies:
'@tmagic/design': 1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
@ -7910,14 +7768,6 @@ snapshots:
optionalDependencies:
typescript: 5.5.4
'@tmagic/utils@1.4.16(@tmagic/schema@1.4.16(typescript@5.5.4))(typescript@5.5.4)':
dependencies:
'@tmagic/schema': 1.4.16(typescript@5.5.4)
dayjs: 1.11.12
lodash-es: 4.17.21
optionalDependencies:
typescript: 5.5.4
'@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4)':
dependencies:
'@tmagic/schema': 1.4.19(typescript@5.5.4)
@ -7926,19 +7776,6 @@ snapshots:
optionalDependencies:
typescript: 5.5.4
'@tmagic/vue-runtime-help@0.0.7(@tmagic/core@packages+core)(@tmagic/data-source@1.4.19(@tmagic/schema@packages+schema)(@tmagic/utils@packages+utils)(typescript@5.5.4))(@tmagic/schema@packages+schema)(@tmagic/stage@1.4.19(@tmagic/core@packages+core)(@tmagic/schema@packages+schema)(@tmagic/utils@packages+utils)(scenejs@1.10.3)(typescript@5.5.4))(@tmagic/utils@packages+utils)(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))':
dependencies:
'@tmagic/core': link:packages/core
'@tmagic/data-source': 1.4.19(@tmagic/schema@packages+schema)(@tmagic/utils@packages+utils)(typescript@5.5.4)
'@tmagic/utils': link:packages/utils
vue: 3.4.35(typescript@5.5.4)
vue-demi: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
optionalDependencies:
'@tmagic/schema': link:packages/schema
'@tmagic/stage': 1.4.19(@tmagic/core@packages+core)(@tmagic/schema@packages+schema)(@tmagic/utils@packages+utils)(scenejs@1.10.3)(typescript@5.5.4)
'@vue/composition-api': 1.7.2(vue@3.4.35(typescript@5.5.4))
typescript: 5.5.4
'@tmagic/vue-runtime-help@0.0.7(iw6w6ghqwusnx4qxoselwthjvi)':
dependencies:
'@tmagic/core': 1.4.19(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)

10
runtime/vue-runtime-help/package.json
View File

@ -32,11 +32,11 @@
"vue-demi": "^0.14.7"
},
"peerDependencies": {
"@tmagic/core": ">=1.4.16",
"@tmagic/data-source": ">=1.4.16",
"@tmagic/schema": ">=1.4.16",
"@tmagic/stage": ">=1.4.16",
"@tmagic/utils": ">=1.4.16",
"@tmagic/core": "workspace:*",
"@tmagic/data-source": "workspace:*",
"@tmagic/schema": "workspace:*",
"@tmagic/stage": "workspace:*",
"@tmagic/utils": "workspace:*",
"@vue/composition-api": ">=1.7.2",
"typescript": "*",
"vue": ">=2.0.0 || >=3.0.0"

2
runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts
View File

@ -82,7 +82,7 @@ export const useEditorDsl = (app: Core | undefined, win = window) => {
const newNode = app.dataSourceManager?.compiledNode(config, undefined, true) || config;
replaceChildNode(reactive(newNode), [root.value], parentId);
const nodeInstance = app.page?.getNode(config.id);
const nodeInstance = app.getNode(config.id);
if (nodeInstance) {
nodeInstance.setData(newNode);
}

12
runtime/vue-runtime-help/src/useApp.ts
View File

@ -18,12 +18,14 @@
import { inject, onBeforeUnmount, onMounted } from 'vue-demi';
import type Core from '@tmagic/core';
import type { MNode } from '@tmagic/schema';
import type TMagicApp from '@tmagic/core';
import type { Id, MNode } from '@tmagic/schema';
import { IS_DSL_NODE_KEY } from '@tmagic/utils';
interface UseAppOptions<T extends MNode = MNode> {
config: T;
iteratorContainerId?: Id[];
iteratorIndex?: number[];
methods?: {
[key: string]: Function;
};
@ -31,8 +33,8 @@ interface UseAppOptions<T extends MNode = MNode> {
const isDslNode = (config: MNode) => typeof config[IS_DSL_NODE_KEY] === 'undefined' || config[IS_DSL_NODE_KEY] === true;
export default ({ methods, config }: UseAppOptions) => {
const app: Core | undefined = inject('app');
export default ({ methods, config, iteratorContainerId, iteratorIndex }: UseAppOptions) => {
const app: TMagicApp | undefined = inject('app');
const emitData = {
config,
@ -52,7 +54,7 @@ export default ({ methods, config }: UseAppOptions) => {
return displayCfg !== false;
};
const node = isDslNode(config) ? app?.page?.getNode(config.id || '') : undefined;
const node = isDslNode(config) ? app?.getNode(config.id || '', iteratorContainerId, iteratorIndex) : undefined;
if (node) {
node.emit('created', emitData);

2
runtime/vue2/page/main.ts
View File

@ -19,7 +19,7 @@
import Vue from 'vue';
import Core from '@tmagic/core';
import { DataSourceManager, DeepObservedData， registerDataSourceOnDemand } from '@tmagic/data-source';
import { DataSourceManager, DeepObservedData, registerDataSourceOnDemand } from '@tmagic/data-source';
import { getUrlParam } from '@tmagic/utils';
import asyncDataSources from '../.tmagic/async-datasource-entry';

36
scripts/build.mjs
View File

@ -5,27 +5,27 @@ const { type } = minimist(process.argv.slice(2));
const run = (bin, args, opts = {}) => execa(bin, args, { stdio: 'inherit', ...opts });
const build = (pkg) => run('pnpm', ['--filter', `@tmagic/${pkg}`, type ? 'build:type' : 'build']);
const main = async () => {
// 按照依赖顺序构建
const packages = [
'schema',
'utils',
'dep',
'data-source',
'core',
'design',
'element-plus-adapter',
'tdesign-vue-next-adapter',
'form',
'table',
'stage',
'editor',
'cli',
'ui',
];
build('cli');
for (const pkg of packages) {
await run('pnpm', ['--filter', `@tmagic/${pkg}`, type ? 'build:type' : 'build']);
await Promise.all([
(async () => {
for (const pkg of ['schema', 'utils', 'dep', 'data-source', 'core', 'stage']) {
await build(pkg);
}
})(),
(async () => {
for (const pkg of ['design', 'element-plus-adapter', 'tdesign-vue-next-adapter']) {
await build(pkg);
}
})(),
]);
for (const pkg of ['form', 'table', 'editor', 'vue-runtime-help', 'tmagic-form-runtime', 'ui']) {
await build(pkg);
}
};

1
tsconfig.json
View File

@ -20,6 +20,7 @@
// 内部模块都指向 src/index.ts, 会有更好的代码跳转体验.
"@tmagic/*": ["packages/*/src"],
"@tmagic/tmagic-form-runtime": ["runtime/tmagic-form/src"],
"@tmagic/vue-runtime-help": ["runtime/vue-runtime-help/src"],
"@editor/*": ["packages/editor/src/*"],
"@form/*": ["packages/form/src/*"],
"@data-source/*": ["packages/data-source/src/*"],

15
vitest.config.ts
View File

@ -11,7 +11,22 @@ export default defineConfig({
test: {
include: ['./packages/*/tests/**'],
environment: 'jsdom',
environmentMatchGlobs: [['packages/cli/**', 'node']],
coverage: {
exclude: [
'./runtime/**',
'./playground/**',
'./docs/**',
'./packages/*/types/**',
'./packages/*/tests/**',
'./packages/cli/lib/**',
'./packages/ui/**',
'./packages/ui-vue2/**',
'./packages/ui-react/**',
'./packages/design/**',
'./packages/element-plus-adapter/**',
'./packages/tdesign-vue-next-adapter/**',
],
extension: ['.ts', '.vue'],
},
},