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(cli,data-source,runtime): 数据源支持动态按需加载

Browse Source
This commit is contained in:
roymondchen 2024-04-12 16:52:58 +08:00
parent 872c978b9b
commit 006133102f
11 changed files with 83 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/cli/src/utils/prepareEntryFile.ts
View File

@ -22,6 +22,13 @@ export const prepareEntryFile = async (app: App) => {
'value-entry': generateContent(useTs, EntryType.VALUE, moduleMainFilePath.valueMap),
'event-entry': generateContent(useTs, EntryType.EVENT, moduleMainFilePath.eventMap),
'datasource-entry': generateContent(useTs, EntryType.DATASOURCE, moduleMainFilePath.datasourceMap),
'async-datasource-entry': generateContent(
useTs,
EntryType.DATASOURCE,
moduleMainFilePath.datasourceMap,
'',
dynamicImport,
),
'ds-config-entry': generateContent(useTs, EntryType.DS_CONFIG, moduleMainFilePath.dsConfigMap),
'ds-value-entry': generateContent(useTs, EntryType.DS_VALUE, moduleMainFilePath.dsValueMap),
'ds-event-entry': generateContent(useTs, EntryType.DS_EVENT, moduleMainFilePath.dsEventMap),
@ -43,7 +50,7 @@ export const prepareEntryFile = async (app: App) => {
});
};
const generateContent = (
export const generateContent = (
useTs: boolean,
type: EntryType,
map: Record<string, string> = {},

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

@ -1,6 +1,7 @@
import type { AppCore, DataSourceSchema, HttpOptions, RequestFunction } from '@tmagic/schema';
import HttpDataSource from './data-sources/Http';
import type DataSource from './data-sources/Base';
import type HttpDataSource from './data-sources/Http';
export interface DataSourceOptions<T extends DataSourceSchema = DataSourceSchema> {
schema: T;
@ -42,3 +43,7 @@ export interface ChangeEvent {
path?: string;
updateData: any;
}
export type AsyncDataSourceResolveResult<T = typeof DataSource> = {
default: T;
};

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

@ -13,7 +13,7 @@ import {
replaceChildNode,
} from '@tmagic/utils';
import type { DataSourceManagerData } from './types';
import type { AsyncDataSourceResolveResult, DataSourceManagerData } from './types';
export const compliedConditions = (node: MNode, data: DataSourceManagerData) => {
if (!node.displayConds || !Array.isArray(node.displayConds) || !node.displayConds.length) return true;
@ -151,3 +151,34 @@ export const compliedIteratorItems = (itemData: any, items: MNode[], dsId: strin
);
});
};
export const registerDataSourceOnDemand = async (
dsl: MApp,
dataSourceModules: Record<string, () => Promise<AsyncDataSourceResolveResult>>,
) => {
const { dataSourceCondDeps = {}, dataSourceDeps = {}, dataSources = [] } = dsl;
const dsModuleMap: Record<string, () => Promise<AsyncDataSourceResolveResult>> = {};
dataSources.forEach((ds) => {
let dep = dataSourceCondDeps[ds.id] || {};
if (!Object.keys(dep).length) {
dep = dataSourceDeps[ds.id] || {};
}
if (Object.keys(dep).length && dataSourceModules[ds.type]) {
dsModuleMap[ds.type] = dataSourceModules[ds.type];
}
});
const modules = await Promise.all(Object.values(dsModuleMap).map((asyncModule) => asyncModule()));
const moduleMap: Record<string, any> = {};
modules.forEach((module, index) => {
const type = Object.keys(dsModuleMap)[index];
moduleMap[type] = module.default;
});
return moduleMap;
};

4
runtime/react/page/main.tsx
View File

@ -25,7 +25,7 @@ import { AppContent } from '@tmagic/ui-react';
import { getUrlParam } from '@tmagic/utils';
import components from '../.tmagic/comp-entry';
import datasources from '../.tmagic/datasource-entry';
import dataSources from '../.tmagic/datasource-entry';
import plugins from '../.tmagic/plugin-entry';
import App from './App';
@ -53,7 +53,7 @@ const getLocalConfig = (): MApp[] => {
window.magicDSL = [];
Object.entries(datasources).forEach(([type, ds]: [string, any]) => {
Object.entries(dataSources).forEach(([type, ds]: [string, any]) => {
DataSourceManager.register(type, ds);
});

6
runtime/react/playground/main.tsx
View File

@ -28,7 +28,7 @@ import { AppContent } from '@tmagic/ui-react';
import { replaceChildNode } from '@tmagic/utils';
import components from '../.tmagic/comp-entry';
import datasources from '../.tmagic/datasource-entry';
import dataSources from '../.tmagic/datasource-entry';
import plugins from '../.tmagic/plugin-entry';
import App from './App';
@ -41,8 +41,8 @@ declare global {
}
}
Object.entries(datasources).forEach(([type, ds]: [string, any]) => {
DataSourceManager.registe(type, ds);
Object.entries(dataSources).forEach(([type, ds]: [string, any]) => {
DataSourceManager.register(type, ds);
});
const app = new Core({

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

@ -23,7 +23,7 @@ import { DataSourceManager } from '@tmagic/data-source';
import { getUrlParam } from '@tmagic/utils';
import components from '../.tmagic/comp-entry';
import datasources from '../.tmagic/datasource-entry';
import dataSources from '../.tmagic/datasource-entry';
import plugins from '../.tmagic/plugin-entry';
import request from './utils/request';
@ -38,7 +38,7 @@ Object.keys(components).forEach((type: string) => {
Vue.component(`magic-ui-${type}`, components[type]);
});
Object.entries(datasources).forEach(([type, ds]: [string, any]) => {
Object.entries(dataSources).forEach(([type, ds]: [string, any]) => {
DataSourceManager.register(type, ds);
});

6
runtime/vue2/playground/main.ts
View File

@ -29,13 +29,13 @@ Promise.all([
import('../.tmagic/comp-entry'),
import('../.tmagic/plugin-entry'),
import('../.tmagic/datasource-entry'),
]).then(([components, plugins, datasources]) => {
]).then(([components, plugins, dataSources]) => {
Object.entries(components.default).forEach(([type, component]: [string, any]) => {
Vue.component(`magic-ui-${type}`, component);
});
Object.entries(datasources).forEach(([type, ds]: [string, any]) => {
DataSourceManager.registe(type, ds);
Object.entries(dataSources).forEach(([type, ds]: [string, any]) => {
DataSourceManager.register(type, ds);
});
Object.values(plugins.default).forEach((plugin: any) => {

2
runtime/vue3/page/index.html
View File

@ -23,7 +23,7 @@
display: none;
}
</style>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.21/vue.global.prod.min.js"></script>
</head>
<body style="font-size: 14px">
<div id="app"></div>

40
runtime/vue3/page/main.ts
View File

@ -19,11 +19,11 @@
import { createApp, defineAsyncComponent } from 'vue';
import Core from '@tmagic/core';
import { DataSourceManager } from '@tmagic/data-source';
import { DataSourceManager, registerDataSourceOnDemand } from '@tmagic/data-source';
import { getUrlParam } from '@tmagic/utils';
import components from '../.tmagic/async-comp-entry';
import datasources from '../.tmagic/datasource-entry';
import asyncDataSources from '../.tmagic/async-datasource-entry';
import plugins from '../.tmagic/plugin-entry';
import request from './utils/request';
@ -40,24 +40,28 @@ Object.entries(components).forEach(([type, component]: [string, any]) => {
magicApp.component(`magic-ui-${type}`, defineAsyncComponent(component));
});
Object.entries(datasources).forEach(([type, ds]: [string, any]) => {
DataSourceManager.register(type, ds);
});
Object.values(plugins).forEach((plugin: any) => {
magicApp.use(plugin);
});
const app = new Core({
ua: window.navigator.userAgent,
config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
curPage: getUrlParam('page'),
useMock: Boolean(getUrlParam('useMock')),
const dsl = ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {};
registerDataSourceOnDemand(dsl, asyncDataSources).then((dataSources) => {
Object.entries(dataSources).forEach(([type, ds]: [string, any]) => {
DataSourceManager.register(type, ds);
});
const app = new Core({
ua: window.navigator.userAgent,
config: dsl,
curPage: getUrlParam('page'),
useMock: Boolean(getUrlParam('useMock')),
});
app.setDesignWidth(app.env.isWeb ? window.document.documentElement.getBoundingClientRect().width : 375);
magicApp.config.globalProperties.app = app;
magicApp.provide('app', app);
magicApp.mount('#app');
});
app.setDesignWidth(app.env.isWeb ? window.document.documentElement.getBoundingClientRect().width : 375);
magicApp.config.globalProperties.app = app;
magicApp.provide('app', app);
magicApp.mount('#app');

2
runtime/vue3/playground/index.html
View File

@ -42,7 +42,7 @@
<div id="app" class="in-editor"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.21/vue.global.prod.min.js"></script>
<script type="module" src="./main.ts"></script>
</body>

6
runtime/vue3/playground/main.ts
View File

@ -29,15 +29,15 @@ Promise.all([
import('../.tmagic/comp-entry'),
import('../.tmagic/plugin-entry'),
import('../.tmagic/datasource-entry'),
]).then(([components, plugins, datasources]) => {
]).then(([components, plugins, dataSources]) => {
const magicApp = createApp(App);
Object.entries(components.default).forEach(([type, component]: [string, any]) => {
magicApp.component(`magic-ui-${type}`, component);
});
Object.entries(datasources).forEach(([type, ds]: [string, any]) => {
DataSourceManager.registe(type, ds);
Object.entries(dataSources.default).forEach(([type, ds]: [string, any]) => {
DataSourceManager.register(type, ds);
});
Object.values(plugins.default).forEach((plugin: any) => {