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,editor,playground,runtime): 支持自定义数据源

Browse Source
This commit is contained in:
roymondchen 2023-08-21 16:57:18 +08:00
parent 60e14fe53e
commit 573f1a2c17
28 changed files with 528 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -17,7 +17,6 @@
"playground:react": "pnpm --filter \"runtime-react\" --filter \"tmagic-playground\" dev:react",
"pg:react": "pnpm playground:react",
"build": "pnpm --filter \"@tmagic/*\" build",
"build:runtime:admin": "pnpm --filter \"runtime-*\" build:admin",
"build:playground": "pnpm --filter \"runtime-vue3\" build && pnpm --filter \"tmagic-playground\" build",
"docs:dev": "vitepress dev docs",
"docs:serve": "vitepress serve docs",

4
packages/cli/src/Core.ts
View File

@ -16,6 +16,10 @@ export default class Core {
configMap: {},
valueMap: {},
eventMap: {},
datasourceMap: {},
dsConfigMap: {},
dsValueMap: {},
dsEventMap: {},
};
public dir = {

12
packages/cli/src/types.ts
View File

@ -5,15 +5,20 @@ export type App = Core;
export enum EntryType {
CONFIG = 'config',
VALUE = 'value',
COMPONENT = 'component',
EVENT = 'event',
COMPONENT = 'component',
PLUGIN = 'plugin',
DS_CONFIG = 'dsConfig',
DS_VALUE = 'dsValue',
DS_EVENT = 'dsEvent',
DATASOURCE = 'datasource',
}
export enum PackageType {
COMPONENT = '1',
PLUGIN = '2',
COMPONENT_PACKAGE = '3',
DATASOURCE = '4',
}
export interface Entry {
@ -21,6 +26,7 @@ export interface Entry {
[EntryType.VALUE]?: string;
[EntryType.COMPONENT]?: string;
[EntryType.EVENT]?: string;
[EntryType.DATASOURCE]?: string;
}
export interface OptionEntry {
@ -52,6 +58,10 @@ export interface ModuleMainFilePath {
configMap: Record<string, string>;
valueMap: Record<string, string>;
eventMap: Record<string, string>;
datasourceMap: Record<string, string>;
dsConfigMap: Record<string, string>;
dsValueMap: Record<string, string>;
dsEventMap: Record<string, string>;
}
export interface UserConfig {

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

@ -4,39 +4,49 @@ import type App from '../Core';
import { EntryType } from '../types';
export const prepareEntryFile = async (app: App) => {
const { componentMap = {}, pluginMap = {}, configMap = {}, valueMap = {}, eventMap = {} } = app.moduleMainFilePath;
const { componentFileAffix, dynamicImport, hooks, useTs } = app.options;
const { moduleMainFilePath, options } = app;
const { componentFileAffix, dynamicImport, hooks, useTs } = options;
let contentMap: Record<string, string> = {
'comp-entry': generateContent(useTs, EntryType.COMPONENT, componentMap, componentFileAffix),
'async-comp-entry': generateContent(useTs, EntryType.COMPONENT, componentMap, componentFileAffix, dynamicImport),
'plugin-entry': generateContent(useTs, EntryType.PLUGIN, pluginMap),
'async-plugin-entry': generateContent(useTs, EntryType.PLUGIN, pluginMap, '', dynamicImport),
'config-entry': generateContent(useTs, EntryType.CONFIG, configMap),
'value-entry': generateContent(useTs, EntryType.VALUE, valueMap),
'event-entry': generateContent(useTs, EntryType.EVENT, eventMap),
'comp-entry': generateContent(useTs, EntryType.COMPONENT, moduleMainFilePath.componentMap, componentFileAffix),
'async-comp-entry': generateContent(
useTs,
EntryType.COMPONENT,
moduleMainFilePath.componentMap,
componentFileAffix,
dynamicImport,
),
'plugin-entry': generateContent(useTs, EntryType.PLUGIN, moduleMainFilePath.pluginMap),
'async-plugin-entry': generateContent(useTs, EntryType.PLUGIN, moduleMainFilePath.pluginMap, '', dynamicImport),
'config-entry': generateContent(useTs, EntryType.CONFIG, moduleMainFilePath.configMap),
'value-entry': generateContent(useTs, EntryType.VALUE, moduleMainFilePath.valueMap),
'event-entry': generateContent(useTs, EntryType.EVENT, moduleMainFilePath.eventMap),
'datasource-entry': generateContent(useTs, EntryType.DATASOURCE, moduleMainFilePath.datasourceMap),
'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),
};
if (typeof hooks?.beforeWriteEntry === 'function') {
contentMap = await hooks.beforeWriteEntry(contentMap, app);
}
Object.keys(contentMap).forEach((file: string) => {
Object.entries(contentMap).forEach(([file, content]) => {
let fileName = `${file}.ts`;
if (useTs) {
app.writeTemp(fileName, contentMap[file]);
app.writeTemp(fileName, content);
} else {
fileName = `${file}.js`;
app.writeTemp(`${file}.d.ts`, `const type: Record<string, any>;\n\nexport default type;`);
}
app.writeTemp(fileName, contentMap[file]);
app.writeTemp(fileName, content);
});
};
const generateContent = (
useTs: boolean,
type: EntryType,
map: Record<string, string>,
map: Record<string, string> = {},
componentFileAffix = '',
dynamicImport = false,
) => {

327
packages/cli/src/utils/resolveAppPackages.ts
View File

@ -6,134 +6,34 @@ import fs from 'fs-extra';
import * as recast from 'recast';
import type App from '../Core';
import { Entry, EntryType, ModuleMainFilePath, NpmConfig, PackageType } from '../types';
import { EntryType, ModuleMainFilePath, NpmConfig, PackageType } from '../types';
import { error, execInfo, info } from './logger';
type Ast = any;
interface TypeAssertion {
type: string;
imports: any[];
}
interface ParseEntryOption {
ast: any;
ast: Ast;
package: string;
indexPath: string;
}
interface TypeAssertionOption {
ast: Ast;
indexPath: string;
componentFileAffix?: string;
}
const isFile = (filePath: string) => fs.existsSync(filePath) && fs.lstatSync(filePath).isFile();
const isDirectory = (filePath: string) => fs.existsSync(filePath) && fs.lstatSync(filePath).isDirectory();
const getRelativePath = (str: string, base: string) => (path.isAbsolute(str) ? path.relative(base, str) : str);
export const resolveAppPackages = (app: App): ModuleMainFilePath => {
const componentMap: Record<string, string> = {};
const configMap: Record<string, string> = {};
const eventMap: Record<string, string> = {};
const valueMap: Record<string, string> = {};
const pluginMap: Record<string, string> = {};
const dependencies: Record<string, string> = {};
const setPackages = (cwd: string, tmp: string, packagePath: string, key?: string) => {
const { name: moduleName } = splitNameVersion(packagePath);
if (!moduleName) throw Error('packages中包含非法配置');
const indexPath = execSync(`node -e "console.log(require.resolve('${moduleName.replace(/\\/g, '/')}'))"`, { cwd })
.toString()
.replace('\n', '');
const indexCode = fs.readFileSync(indexPath, { encoding: 'utf-8', flag: 'r' });
const ast = recast.parse(indexCode, { parser: require('recast/parsers/typescript') });
const result = typeAssertion({ ast, indexPath });
const setItem = (key: string, entry: Entry) => {
if (entry.component) componentMap[key] = getRelativePath(entry.component, tmp);
if (entry.config) configMap[key] = getRelativePath(entry.config, tmp);
if (entry.event) eventMap[key] = getRelativePath(entry.event, tmp);
if (entry.value) valueMap[key] = getRelativePath(entry.value, tmp);
};
if (result.type === PackageType.COMPONENT && key) {
// 组件
setItem(key, parseEntry({ ast, package: moduleName, indexPath }));
} else if (result.type === PackageType.PLUGIN && key) {
// 插件
pluginMap[key] = moduleName;
} else if (result.type === PackageType.COMPONENT_PACKAGE) {
// 组件&插件包
result.imports.forEach((i) => {
const affixReg = new RegExp(`${app.options.componentFileAffix}$`);
if (affixReg.test(i.indexPath)) {
componentMap[i.type] = i.indexPath;
return;
}
const indexCode = fs.readFileSync(i.indexPath, { encoding: 'utf-8', flag: 'r' });
const ast = recast.parse(indexCode, { parser: require('recast/parsers/typescript') });
if (typeAssertion({ ast, indexPath }).type === PackageType.PLUGIN) {
// 插件
pluginMap[i.type] = i.indexPath;
} else {
// 组件
setItem(i.type, parseEntry({ ast, package: `${module} | ${i.name}`, indexPath: i.indexPath }));
}
});
}
};
const getDependencies = (packagePath: string) => {
if (fs.existsSync(packagePath)) return;
const { name: moduleName, version } = splitNameVersion(packagePath);
if (!moduleName) return;
dependencies[moduleName] = version;
};
const { packages = [], npmConfig = {} } = app.options;
packages.forEach((item) => {
if (typeof item === 'object') {
Object.entries(item).forEach(([, packagePath]) => {
getDependencies(packagePath);
});
} else {
getDependencies(item);
}
});
if (npmConfig.autoInstall && Object.keys(dependencies).length) {
if (!npmConfig.keepPackageJsonClean) {
npmInstall(dependencies, app.options.source, app.options.npmConfig);
} else {
const packageFile = path.join(app.options.source, 'package.json');
const packageBakFile = path.join(app.options.source, 'package.json.bak');
if (fs.existsSync(packageFile)) {
fs.copyFileSync(packageFile, packageBakFile);
}
npmInstall(dependencies, app.options.source, app.options.npmConfig);
if (fs.existsSync(packageBakFile)) {
fs.unlinkSync(packageFile);
fs.renameSync(packageBakFile, packageFile);
}
}
}
packages.forEach((item) => {
if (typeof item === 'object') {
Object.entries(item).forEach(([key, packagePath]) => {
setPackages(app.options.source, app.options.temp, packagePath, key);
});
} else {
setPackages(app.options.source, app.options.temp, item);
}
});
return {
componentMap,
configMap,
eventMap,
valueMap,
pluginMap,
};
};
const npmInstall = function (dependencies: Record<string, string>, cwd: string, npmConfig: NpmConfig = {}) {
try {
const { client = 'npm', registry } = npmConfig;
@ -162,28 +62,52 @@ const npmInstall = function (dependencies: Record<string, string>, cwd: string,
};
/**
* 1 判断是否组件&插件包
* 2 判断是组件还是插件
* 3 组件插件分开写入 comp-entry.ts
* 1 判断是否组件&插件&数据源包
* 2 判断是组件还是插件还是数据源
* 3 组件插件数据源分开写入 comp-entry.ts
*
* export default 是对象字面量并且有install方法则为插件
*
* export default 是类并且superClass为DataSource则为数据源
*
* 其他情况为组件或者包
*
* @param {*} ast
* @param {String} indexPath
* @return {Object} { type: '', imports: [] } 返回传入组件的类型。如果是组件包，imports 中包含所有子组件的入口文件路径
*/
const typeAssertion = function ({ ast, indexPath }: { ast: any; indexPath: string }): TypeAssertion {
const typeAssertion = function ({ ast, indexPath, componentFileAffix }: TypeAssertionOption): TypeAssertion {
const n = recast.types.namedTypes;
const result = {
const result: TypeAssertion = {
type: '',
imports: [],
};
const { importDeclarations, variableDeclarations, exportDefaultName, exportDefaultNode } =
const { importDeclarations, variableDeclarations, exportDefaultName, exportDefaultNode, exportDefaultClass } =
getAssertionTokenByTraverse(ast);
if (exportDefaultName) {
importDeclarations.every((node) => {
const [specifier] = node.specifiers;
const defaultFile = getIndexPath(path.resolve(path.dirname(indexPath), node.source.value));
if (componentFileAffix && !['.js', '.ts'].includes(componentFileAffix)) {
if (node.source.value?.endsWith(componentFileAffix) || isFile(`${defaultFile}${componentFileAffix}`)) {
result.type = PackageType.COMPONENT;
return false;
}
}
if (isFile(defaultFile)) {
const defaultCode = fs.readFileSync(defaultFile, { encoding: 'utf-8', flag: 'r' });
const ast = recast.parse(defaultCode, { parser: require('recast/parsers/typescript') });
if (isDatasource(ast.program.body.find((node: any) => node.type === 'ExportDefaultDeclaration')?.declaration)) {
result.type = PackageType.DATASOURCE;
return false;
}
}
// 从 import 语句中找到 export default 的变量，认为是组件
if (n.ImportDefaultSpecifier.check(specifier) && specifier.local?.name === exportDefaultName) {
result.type = PackageType.COMPONENT;
@ -230,6 +154,10 @@ const typeAssertion = function ({ ast, indexPath }: { ast: any; indexPath: strin
}
}
if (isDatasource(exportDefaultClass)) {
result.type = PackageType.DATASOURCE;
}
return result;
};
@ -240,6 +168,7 @@ const getAssertionTokenByTraverse = (ast: any) => {
let exportDefaultName = '';
let exportDefaultNode = undefined;
let exportDefaultClass = undefined;
recast.types.visit(ast, {
visitImportDeclaration(p) {
@ -264,6 +193,11 @@ const getAssertionTokenByTraverse = (ast: any) => {
exportDefaultNode = declaration;
}
// 导出的是类
if (n.ClassDeclaration.check(declaration)) {
exportDefaultClass = declaration;
}
this.traverse(p);
},
});
@ -273,6 +207,7 @@ const getAssertionTokenByTraverse = (ast: any) => {
variableDeclarations,
exportDefaultName,
exportDefaultNode,
exportDefaultClass,
};
};
@ -282,6 +217,8 @@ const isPlugin = function (properties: any[]) {
return !!match;
};
const isDatasource = (exportDefaultClass: any) => exportDefaultClass?.superClass?.name === 'DataSource';
const getComponentPackageImports = function ({
result,
properties,
@ -322,11 +259,14 @@ const getComponentPackageImports = function ({
};
const getIndexPath = function (entry: string) {
if (fs.lstatSync(entry).isFile()) {
return entry;
for (const affix of ['', '.js', '.ts']) {
const filePath = `${entry}${affix}`;
if (isFile(filePath)) {
return filePath;
}
}
if (fs.lstatSync(entry).isDirectory()) {
if (isDirectory(entry)) {
const files = fs.readdirSync(entry);
const [index] = files.filter((file) => file.split('.')[0] === 'index');
@ -346,16 +286,16 @@ const parseEntry = function ({ ast, package: module, indexPath }: ParseEntryOpti
let { config, value, event, component } = tokens;
if (!config) {
info(`${module} ${EntryType.CONFIG} 文件声明缺失`);
info(`${module} 表单配置文件声明缺失`);
}
if (!value) {
info(`${module} ${EntryType.VALUE} 文件声明缺失`);
info(`${module} 初始化数据文件声明缺失`);
}
if (!event) {
info(`${module} ${EntryType.EVENT} 文件声明缺失`);
info(`${module} 事件声明文件声明缺失`);
}
if (!component) {
info(`${module} ${EntryType.COMPONENT} 文件声明不合法`);
info(`${module} 组件或数据源文件声明不合法`);
exit(1);
}
@ -467,3 +407,136 @@ const splitNameVersion = function (str: string) {
version,
};
};
const getDependencies = (dependencies: Record<string, string>, packagePath: string) => {
if (fs.existsSync(packagePath)) return;
const { name: moduleName, version } = splitNameVersion(packagePath);
if (!moduleName) return;
dependencies[moduleName] = version;
};
const setPackages = (packages: ModuleMainFilePath, app: App, packagePath: string, key?: string) => {
const { options } = app;
const { temp, source, componentFileAffix } = options;
let { name: moduleName } = splitNameVersion(packagePath);
if (!moduleName) throw Error('packages中包含非法配置');
if (fs.lstatSync(moduleName).isDirectory()) {
if (!fs.existsSync(path.join(moduleName, './package.json'))) {
['index.js', 'index.ts'].forEach((index) => {
const indexFile = path.join(moduleName!, `./${index}`);
if (fs.existsSync(indexFile)) {
moduleName = indexFile;
return;
}
});
}
}
// 获取完整路径
const indexPath = execSync(`node -e "console.log(require.resolve('${moduleName.replace(/\\/g, '/')}'))"`, {
cwd: source,
})
.toString()
.replace('\n', '');
const indexCode = fs.readFileSync(indexPath, { encoding: 'utf-8', flag: 'r' });
const ast: Ast = recast.parse(indexCode, { parser: require('recast/parsers/typescript') });
const result = typeAssertion({ ast, indexPath, componentFileAffix });
// 组件&插件&数据源包
if (result.type === PackageType.COMPONENT_PACKAGE) {
result.imports.forEach((i) => {
setPackages(packages, app, i.indexPath, i.type);
});
return;
}
if (!key) return;
if (result.type === PackageType.COMPONENT) {
// 组件
const entry = parseEntry({ ast, package: moduleName, indexPath });
if (entry.component) packages.componentMap[key] = getRelativePath(entry.component, temp);
if (entry.config) packages.configMap[key] = getRelativePath(entry.config, temp);
if (entry.event) packages.eventMap[key] = getRelativePath(entry.event, temp);
if (entry.value) packages.valueMap[key] = getRelativePath(entry.value, temp);
} else if (result.type === PackageType.DATASOURCE) {
// 数据源
const entry = parseEntry({ ast, package: moduleName, indexPath });
if (entry.component) packages.datasourceMap[key] = getRelativePath(entry.component, temp);
if (entry.config) packages.dsConfigMap[key] = getRelativePath(entry.config, temp);
if (entry.event) packages.dsEventMap[key] = getRelativePath(entry.event, temp);
if (entry.value) packages.dsValueMap[key] = getRelativePath(entry.value, temp);
} else if (result.type === PackageType.PLUGIN) {
// 插件
packages.pluginMap[key] = getRelativePath(moduleName, temp);
}
};
const flattenPackagesConfig = (packages: (string | Record<string, string>)[]) => {
const packagesConfig: ([string] | [string, string])[] = [];
packages.forEach((item) => {
if (typeof item === 'object') {
Object.entries(item).forEach(([key, packagePath]) => {
packagesConfig.push([packagePath, key]);
});
} else if (typeof item === 'string') {
packagesConfig.push([item]);
}
});
return packagesConfig;
};
export const resolveAppPackages = (app: App): ModuleMainFilePath => {
const dependencies: Record<string, string> = {};
const { packages = [], npmConfig = {}, source } = app.options;
const packagePaths = flattenPackagesConfig(packages);
packagePaths.forEach(([packagePath]) => getDependencies(dependencies, packagePath));
if (npmConfig.autoInstall && Object.keys(dependencies).length) {
if (!npmConfig.keepPackageJsonClean) {
npmInstall(dependencies, source, npmConfig);
} else {
const packageFile = path.join(source, 'package.json');
const packageBakFile = path.join(source, 'package.json.bak');
if (fs.existsSync(packageFile)) {
fs.copyFileSync(packageFile, packageBakFile);
}
npmInstall(dependencies, source, npmConfig);
if (fs.existsSync(packageBakFile)) {
fs.unlinkSync(packageFile);
fs.renameSync(packageBakFile, packageFile);
}
}
}
const packagesMap: ModuleMainFilePath = {
componentMap: {},
configMap: {},
eventMap: {},
valueMap: {},
pluginMap: {},
datasourceMap: {},
dsConfigMap: {},
dsEventMap: {},
dsValueMap: {},
};
packagePaths.forEach(([packagePath, key]) => setPackages(packagesMap, app, packagePath, key));
return packagesMap;
};

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

@ -100,15 +100,21 @@ class DataSourceManager extends EventEmitter {
}
}
});
this.change(ds);
});
ds.on('change', () => {
Object.assign(this.data[ds.id], ds.data);
this.emit('change', ds.id);
this.change(ds);
});
}
public change(ds: DataSource) {
Object.assign(this.data[ds.id], ds.data);
this.emit('change', ds.id);
}
public removeDataSource(id: string) {
this.get(id)?.destroy();
delete this.data[id];

33
packages/editor/src/editorProps.ts
View File

@ -2,7 +2,7 @@ import type { PropType } from 'vue';
import type { EventOption } from '@tmagic/core';
import type { FormConfig, FormState } from '@tmagic/form';
import type { MApp, MNode } from '@tmagic/schema';
import type { DataSourceSchema, MApp, MNode } from '@tmagic/schema';
import StageCore, {
CONTAINER_HIGHLIGHT_CLASS_NAME,
ContainerHighlightType,
@ -11,7 +11,15 @@ import StageCore, {
UpdateDragEl,
} from '@tmagic/stage';
import type { ComponentGroup, MenuBarData, MenuButton, MenuComponent, SideBarData, StageRect } from './type';
import type {
ComponentGroup,
DatasourceTypeOption,
MenuBarData,
MenuButton,
MenuComponent,
SideBarData,
StageRect,
} from './type';
export default {
/** 页面初始值 */
@ -27,6 +35,12 @@ export default {
default: () => [],
},
/** 左侧面板中的组件列表 */
datasourceList: {
type: Array as PropType<DatasourceTypeOption[]>,
default: () => [],
},
/** 左侧面板配置 */
sidebar: {
type: Object as PropType<SideBarData>,
@ -69,7 +83,7 @@ export default {
/** 添加组件时的默认值 */
propsValues: {
type: Object as PropType<Record<string, MNode>>,
type: Object as PropType<Record<string, Partial<MNode>>>,
default: () => ({}),
},
@ -79,6 +93,19 @@ export default {
default: () => ({}),
},
/** 组件的属性配置表单的dsl */
datasourceConfigs: {
type: Object as PropType<Record<string, FormConfig>>,
default: () => ({}),
},
/** 添加数据源时的默认值 */
datasourceValues: {
type: Object as PropType<Record<string, Partial<DataSourceSchema>>>,
default: () => ({}),
},
/** 数据源的属性配置表单的dsl */
dataScourceConfigs: {
type: Object as PropType<Record<string, FormConfig>>,
default: () => ({}),

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

@ -31,6 +31,7 @@ export const initServiceState = (
uiService,
codeBlockService,
keybindingService,
dataSourceService,
}: Services,
) => {
// 初始值变化，重新设置节点信息
@ -52,6 +53,14 @@ export const initServiceState = (
},
);
watch(
() => props.datasourceList,
(datasourceList) => dataSourceService.set('datasourceTypeList', datasourceList),
{
immediate: true,
},
);
watch(
() => props.propsConfigs,
(configs) => propsService.setPropsConfigs(configs),
@ -87,6 +96,30 @@ export const initServiceState = (
},
);
watch(
() => props.datasourceConfigs,
(configs) => {
Object.entries(configs).forEach(([key, value]) => {
dataSourceService.setFormConfig(key, value);
});
},
{
immediate: true,
},
);
watch(
() => props.datasourceValues,
(values) => {
Object.entries(values).forEach(([key, value]) => {
dataSourceService.setFormValue(key, value);
});
},
{
immediate: true,
},
);
watch(
() => props.defaultSelected,
(defaultSelected) => defaultSelected && editorService.select(defaultSelected),

12
packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue
View File

@ -16,6 +16,7 @@
<script setup lang="ts">
import { computed, inject, ref, watchEffect } from 'vue';
import { cloneDeep, mergeWith } from 'lodash-es';
import { tMagicMessage } from '@tmagic/design';
import { MFormDrawer } from '@tmagic/form';
@ -56,7 +57,16 @@ const changeHandler = (value: Record<string, any>) => {
return;
}
type.value = value.type || 'base';
initValues.value = value;
initValues.value = mergeWith(
cloneDeep(value),
services?.dataSourceService.getFormValue(type.value) || {},
(objValue, srcValue) => {
if (Array.isArray(srcValue)) {
return srcValue;
}
},
);
};
const submitHandler = (values: any) => {

17
packages/editor/src/services/dataSource.ts
View File

@ -2,25 +2,30 @@ import { reactive } from 'vue';
import { cloneDeep } from 'lodash-es';
import type { FormConfig } from '@tmagic/form';
import { DataSourceSchema } from '@tmagic/schema';
import type { DataSourceSchema } from '@tmagic/schema';
import { guid } from '@tmagic/utils';
import type { DatasourceTypeOption } from '@editor/type';
import { getFormConfig } from '@editor/utils/data-source';
import BaseService from './BaseService';
interface State {
datasourceTypeList: DatasourceTypeOption[];
dataSources: DataSourceSchema[];
editable: boolean;
configs: Record<string, FormConfig>;
values: Record<string, Partial<DataSourceSchema>>;
}
type StateKey = keyof State;
class DataSource extends BaseService {
private state = reactive<State>({
datasourceTypeList: [],
dataSources: [],
editable: true,
configs: {},
values: {},
});
public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
@ -32,13 +37,21 @@ class DataSource extends BaseService {
}
public getFormConfig(type = 'base') {
return getFormConfig(type, this.get('configs'));
return getFormConfig(type, this.get('datasourceTypeList'), this.get('configs'));
}
public setFormConfig(type: string, config: FormConfig) {
this.get('configs')[type] = config;
}
public getFormValue(type = 'base') {
return this.get('values')[type];
}
public setFormValue(type: string, value: Partial<DataSourceSchema>) {
this.get('values')[type] = value;
}
public add(config: DataSourceSchema) {
const newConfig = {
...config,

4
packages/editor/src/services/props.ts
View File

@ -80,7 +80,7 @@ class Props extends BaseService {
return cloneDeep(this.state.propsConfigMap[type] || (await this.fillConfig([])));
}
public setPropsValues(values: Record<string, MNode>) {
public setPropsValues(values: Record<string, Partial<MNode>>) {
Object.keys(values).forEach((type: string) => {
this.setPropsValue(toLine(type), values[type]);
});
@ -91,7 +91,7 @@ class Props extends BaseService {
* @param type 组件类型
* @param value 组件初始值
*/
public async setPropsValue(type: string, value: MNode) {
public async setPropsValue(type: string, value: Partial<MNode>) {
this.state.propsValueMap[type] = value;
}

7
packages/editor/src/type.ts
View File

@ -93,7 +93,7 @@ export type StoreStateKey = keyof StoreState;
export interface PropsState {
propsConfigMap: Record<string, FormConfig>;
propsValueMap: Record<string, MNode>;
propsValueMap: Record<string, Partial<MNode>>;
}
export interface ComponentGroupState {
@ -520,3 +520,8 @@ export enum DepTargetType {
/** 数据源条件 */
DATA_SOURCE_COND = 'data-source-cond',
}
export interface DatasourceTypeOption {
type: string;
text: string;
}

65
packages/editor/src/utils/data-source/formConfigs/base.ts
View File

@ -1,32 +1,37 @@
import type { FormConfig } from '@tmagic/form';
export default [
{
name: 'id',
type: 'hidden',
},
{
name: 'type',
text: '类型',
type: 'select',
options: [
{ text: '基础', value: 'base' },
{ text: 'HTTP', value: 'http' },
],
defaultValue: 'base',
},
{
name: 'title',
text: '名称',
rules: [
{
required: true,
message: '请输入名称',
},
],
},
{
name: 'description',
text: '描述',
},
] as FormConfig;
import type { DatasourceTypeOption } from '@editor/type';
export default function (datasourceTypeList: DatasourceTypeOption[] = []): FormConfig {
return [
{
name: 'id',
type: 'hidden',
},
{
name: 'type',
text: '类型',
type: 'select',
options: [
{ text: '基础', value: 'base' },
{ text: 'HTTP', value: 'http' },
...datasourceTypeList.map((item) => ({ text: item.text, value: item.type })),
],
defaultValue: 'base',
},
{
name: 'title',
text: '名称',
rules: [
{
required: true,
message: '请输入名称',
},
],
},
{
name: 'description',
text: '描述',
},
];
}

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

@ -1,10 +1,12 @@
import { FormConfig } from '@tmagic/form';
import { DatasourceTypeOption } from '@editor/type';
import BaseFormConfig from './formConfigs/base';
import HttpFormConfig from './formConfigs/http';
const fillConfig = (config: FormConfig): FormConfig => [
...BaseFormConfig,
const fillConfig = (config: FormConfig, datasourceTypeList: DatasourceTypeOption[]): FormConfig => [
...BaseFormConfig(datasourceTypeList),
...config,
{
type: 'panel',
@ -30,13 +32,17 @@ const fillConfig = (config: FormConfig): FormConfig => [
},
];
export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {
export const getFormConfig = (
type: string,
datasourceTypeList: DatasourceTypeOption[],
configs: Record<string, FormConfig>,
): FormConfig => {
switch (type) {
case 'base':
return fillConfig([]);
return fillConfig([], datasourceTypeList);
case 'http':
return fillConfig(HttpFormConfig);
return fillConfig(HttpFormConfig, datasourceTypeList);
default:
return fillConfig(configs[type] || []);
return fillConfig(configs[type] || [], datasourceTypeList);
}
};

14
playground/src/pages/Editor.vue
View File

@ -8,7 +8,10 @@
:props-configs="propsConfigs"
:props-values="propsValues"
:event-method-list="eventMethodList"
:datasource-configs="datasourceConfigs"
:datasource-values="datasourceValues"
:component-group-list="componentGroupList"
:datasource-list="datasourceList"
:default-selected="defaultSelected"
:moveable-options="moveableOptions"
:auto-scroll-into-view="true"
@ -45,7 +48,7 @@ import { Coin, Connection, Document } from '@element-plus/icons-vue';
import serialize from 'serialize-javascript';
import { TMagicDialog, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
import { editorService, MenuBarData, MoveableOptions, TMagicEditor } from '@tmagic/editor';
import { DatasourceTypeOption, editorService, MenuBarData, MoveableOptions, TMagicEditor } from '@tmagic/editor';
import type { MContainer, MNode } from '@tmagic/schema';
import { NodeType } from '@tmagic/schema';
import { CustomizeMoveableOptionsCallbackConfig } from '@tmagic/stage';
@ -58,6 +61,7 @@ import { uaMap } from '../const';
const { VITE_RUNTIME_PATH, VITE_ENTRY_PATH } = import.meta.env;
const datasourceList: DatasourceTypeOption[] = [];
const runtimeUrl = `${VITE_RUNTIME_PATH}/playground/index.html`;
const router = useRouter();
const editor = ref<InstanceType<typeof TMagicEditor>>();
@ -69,6 +73,8 @@ const defaultSelected = ref(dsl.items[0].id);
const propsValues = ref<Record<string, any>>({});
const propsConfigs = ref<Record<string, any>>({});
const eventMethodList = ref<Record<string, any>>({});
const datasourceConfigs = ref<Record<string, any>>({});
const datasourceValues = ref<Record<string, any>>({});
const stageRect = ref({
width: 375,
height: 817,
@ -191,6 +197,12 @@ asyncLoadJs(`${VITE_ENTRY_PATH}/value/index.umd.cjs`).then(() => {
asyncLoadJs(`${VITE_ENTRY_PATH}/event/index.umd.cjs`).then(() => {
eventMethodList.value = (globalThis as any).magicPresetEvents;
});
asyncLoadJs(`${VITE_ENTRY_PATH}/ds-config/index.umd.cjs`).then(() => {
datasourceConfigs.value = (globalThis as any).magicPresetDsConfigs;
});
asyncLoadJs(`${VITE_ENTRY_PATH}/ds-value/index.umd.cjs`).then(() => {
datasourceValues.value = (globalThis as any).magicPresetDsValues;
});
save();

9
pnpm-lock.yaml generated
View File

@ -794,6 +794,9 @@ importers:
'@tmagic/core':
specifier: 1.3.0-alpha.19
version: link:../../packages/core
'@tmagic/data-source':
specifier: 1.3.0-alpha.19
version: link:../../packages/data-source
'@tmagic/schema':
specifier: 1.3.0-alpha.19
version: link:../../packages/schema
@ -858,6 +861,9 @@ importers:
'@tmagic/core':
specifier: 1.3.0-alpha.19
version: link:../../packages/core
'@tmagic/data-source':
specifier: 1.3.0-alpha.19
version: link:../../packages/data-source
'@tmagic/schema':
specifier: 1.3.0-alpha.19
version: link:../../packages/schema
@ -919,6 +925,9 @@ importers:
'@tmagic/core':
specifier: 1.3.0-alpha.19
version: link:../../packages/core
'@tmagic/data-source':
specifier: 1.3.0-alpha.19
version: link:../../packages/data-source
'@tmagic/schema':
specifier: 1.3.0-alpha.19
version: link:../../packages/schema

28
runtime/react/build.vite.config.ts
View File

@ -23,9 +23,14 @@ import legacy from '@vitejs/plugin-legacy';
import reactRefresh from '@vitejs/plugin-react-refresh';
export default defineConfig(({ mode }) => {
if (['value', 'config', 'event', 'value:admin', 'config:admin', 'event:admin'].includes(mode)) {
const [type, isAdmin] = mode.split(':');
const capitalToken = type.charAt(0).toUpperCase() + type.slice(1);
if (['value', 'config', 'event', 'ds:value', 'ds:config', 'ds:event'].includes(mode)) {
const capitalToken = mode
.split(':')
.map((word) => word[0].toUpperCase() + word.slice(1))
.join('');
const fileName = mode.replace(':', '-');
return {
publicDir: './.tmagic/public',
build: {
@ -33,10 +38,10 @@ export default defineConfig(({ mode }) => {
sourcemap: true,
minify: false,
target: 'esnext',
outDir: isAdmin ? `./dist/entry/${type}` : `../../playground/public/entry/react/${type}`,
outDir: `../../playground/public/entry/react/${fileName}`,
lib: {
entry: `.tmagic/${type}-entry.ts`,
entry: `.tmagic/${fileName}-entry.ts`,
name: `magicPreset${capitalToken}s`,
fileName: 'index',
formats: ['umd'],
@ -45,12 +50,7 @@ export default defineConfig(({ mode }) => {
};
}
if (['page', 'playground', 'page:admin', 'playground:admin'].includes(mode)) {
const [type, isAdmin] = mode.split(':');
const base = isAdmin ? `/static/react/runtime/${type}/` : `/tmagic-editor/playground/runtime/react/${type}`;
const outDir = isAdmin
? path.resolve(process.cwd(), `./dist/runtime/${type}`)
: path.resolve(process.cwd(), `../../playground/public/runtime/react/${type}`);
if (['page', 'playground'].includes(mode)) {
return {
plugins: [
reactRefresh(),
@ -59,16 +59,16 @@ export default defineConfig(({ mode }) => {
}),
],
root: `./${type}/`,
root: `./${mode}/`,
publicDir: '../public',
base,
base: `/tmagic-editor/playground/runtime/react/${mode}`,
build: {
emptyOutDir: true,
sourcemap: true,
outDir,
outDir: path.resolve(process.cwd(), `../../playground/public/runtime/react/${mode}`),
},
};
}

14
runtime/react/package.json
View File

@ -6,23 +6,21 @@
"scripts": {
"dev:react": "npm run build:libs && vite --config dev.vite.config.ts",
"build": "npm run build:libs && npm run build:page && npm run build:playground",
"build:admin": "npm run build:libs:admin && npm run build:page:admin && npm run build:playground:admin",
"build:page": "vite build --config build.vite.config.ts --mode page",
"build:playground": "vite build --config build.vite.config.ts --mode playground",
"build:page:admin": "vite build --config build.vite.config.ts --mode page:admin",
"build:playground:admin": "vite build --config build.vite.config.ts --mode playground:admin",
"build:libs": "tmagic entry && npm run build:config && npm run build:value && npm run build:event",
"build:libs:admin": "tmagic entry && npm run build:config:admin && npm run build:value:admin && npm run build:event:admin",
"build:libs": "tmagic entry && npm run build:config && npm run build:value && npm run build:event && npm run build:ds:libs",
"build:ds:libs": "npm run build:ds:config && npm run build:ds:value && npm run build:ds:event",
"build:config": "vite build --config build.vite.config.ts --mode config",
"build:value": "vite build --config build.vite.config.ts --mode value",
"build:event": "vite build --config build.vite.config.ts --mode event",
"build:config:admin": "vite build --config build.vite.config.ts --mode config:admin",
"build:value:admin": "vite build --config build.vite.config.ts --mode value:admin",
"build:event:admin": "vite build --config build.vite.config.ts --mode event:admin"
"build:ds:config": "vite build --config build.vite.config.ts --mode ds:config",
"build:ds:value": "vite build --config build.vite.config.ts --mode ds:value",
"build:ds:event": "vite build --config build.vite.config.ts --mode ds:event"
},
"dependencies": {
"@tmagic/cli": "1.3.0-alpha.19",
"@tmagic/core": "1.3.0-alpha.19",
"@tmagic/data-source": "1.3.0-alpha.19",
"@tmagic/ui-react": "1.3.0-alpha.19",
"@tmagic/schema": "1.3.0-alpha.19",
"@tmagic/stage": "1.3.0-alpha.19",

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

@ -19,11 +19,13 @@ import React from 'react';
import ReactDOM from 'react-dom';
import Core from '@tmagic/core';
import { DataSourceManager } from '@tmagic/data-source';
import type { MApp } from '@tmagic/schema';
import { AppContent } from '@tmagic/ui-react';
import { getUrlParam } from '@tmagic/utils';
import components from '../.tmagic/comp-entry';
import datasources from '../.tmagic/datasource-entry';
import plugins from '../.tmagic/plugin-entry';
import App from './App';
@ -51,6 +53,10 @@ const getLocalConfig = (): MApp[] => {
window.magicDSL = [];
Object.entries(datasources).forEach(([type, ds]: [string, any]) => {
DataSourceManager.registe(type, ds);
});
const app = new Core({
ua: window.navigator.userAgent,
config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
@ -60,6 +66,7 @@ const app = new Core({
app.setDesignWidth(app.env.isWeb ? window.document.documentElement.getBoundingClientRect().width : 375);
Object.keys(components).forEach((type: string) => app.registerComponent(type, components[type]));
Object.values(plugins).forEach((plugin: any) => {
plugin.install(app);
});

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

@ -21,12 +21,14 @@ import ReactDOM from 'react-dom';
import { cloneDeep } from 'lodash-es';
import Core from '@tmagic/core';
import { DataSourceManager } from '@tmagic/data-source';
import type { MApp } from '@tmagic/schema';
import type { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
import { AppContent } from '@tmagic/ui-react';
import { replaceChildNode } from '@tmagic/utils';
import components from '../.tmagic/comp-entry';
import datasources from '../.tmagic/datasource-entry';
import plugins from '../.tmagic/plugin-entry';
import App from './App';
@ -39,6 +41,10 @@ declare global {
}
}
Object.entries(datasources).forEach(([type, ds]: [string, any]) => {
DataSourceManager.registe(type, ds);
});
const app = new Core({
ua: window.navigator.userAgent,
platform: 'editor',

30
runtime/vue2/build.vite.config.ts
View File

@ -25,9 +25,14 @@ import vue from '@vitejs/plugin-vue2';
import externalGlobals from 'rollup-plugin-external-globals';
export default defineConfig(({ mode }) => {
if (['value', 'config', 'event', 'value:admin', 'config:admin', 'event:admin'].includes(mode)) {
const [type, isAdmin] = mode.split(':');
const capitalToken = type.charAt(0).toUpperCase() + type.slice(1);
if (['value', 'config', 'event', 'ds:value', 'ds:config', 'ds:event'].includes(mode)) {
const capitalToken = mode
.split(':')
.map((word) => word[0].toUpperCase() + word.slice(1))
.join('');
const fileName = mode.replace(':', '-');
return {
publicDir: './.tmagic/public',
build: {
@ -35,10 +40,10 @@ export default defineConfig(({ mode }) => {
sourcemap: true,
minify: false,
target: 'esnext',
outDir: isAdmin ? `./dist/entry/${type}` : `../../playground/public/entry/vue2/${type}`,
outDir: `../../playground/public/entry/vue2/${fileName}`,
lib: {
entry: `.tmagic/${type}-entry.ts`,
entry: `.tmagic/${fileName}-entry.ts`,
name: `magicPreset${capitalToken}s`,
fileName: 'index',
formats: ['umd'],
@ -47,31 +52,26 @@ export default defineConfig(({ mode }) => {
};
}
if (['page', 'playground', 'page:admin', 'playground:admin'].includes(mode)) {
const [type, isAdmin] = mode.split(':');
const base = isAdmin ? `/static/vue2/runtime/${type}/` : `/tmagic-editor/playground/runtime/vue2/${type}`;
const outDir = isAdmin
? path.resolve(process.cwd(), `./dist/runtime/${type}`)
: path.resolve(process.cwd(), `../../playground/public/runtime/vue2/${type}`);
if (['page', 'playground'].includes(mode)) {
return {
plugins: [
vue(),
legacy({
targets: ['defaults', 'not IE 11'],
}),
externalGlobals({ vue: 'Vue' }, { exclude: [`./${type}/index.html`] }),
externalGlobals({ vue: 'Vue' }, { exclude: [`./${mode}/index.html`] }),
],
root: `./${type}/`,
root: `./${mode}/`,
publicDir: '../public',
base,
base: `/tmagic-editor/playground/runtime/vue2/${mode}`,
build: {
emptyOutDir: true,
sourcemap: true,
outDir,
outDir: path.resolve(process.cwd(), `../../playground/public/runtime/vue2/${mode}`),
},
};
}

14
runtime/vue2/package.json
View File

@ -6,23 +6,21 @@
"scripts": {
"dev:vue2": "npm run build:libs && vite --config dev.vite.config.ts",
"build": "npm run build:libs && npm run build:page && npm run build:playground",
"build:admin": "npm run build:libs:admin && npm run build:page:admin && npm run build:playground:admin",
"build:page": "vite build --config build.vite.config.ts --mode page",
"build:playground": "vite build --config build.vite.config.ts --mode playground",
"build:page:admin": "vite build --config build.vite.config.ts --mode page:admin",
"build:playground:admin": "vite build --config build.vite.config.ts --mode playground:admin",
"build:libs": "tmagic entry && npm run build:config && npm run build:value && npm run build:event",
"build:libs:admin": "tmagic entry && npm run build:config:admin && npm run build:value:admin && npm run build:event:admin",
"build:libs": "tmagic entry && npm run build:config && npm run build:value && npm run build:event && npm run build:ds:libs",
"build:ds:libs": "npm run build:ds:config && npm run build:ds:value && npm run build:ds:event",
"build:config": "vite build --config build.vite.config.ts --mode config",
"build:value": "vite build --config build.vite.config.ts --mode value",
"build:event": "vite build --config build.vite.config.ts --mode event",
"build:config:admin": "vite build --config build.vite.config.ts --mode config:admin",
"build:value:admin": "vite build --config build.vite.config.ts --mode value:admin",
"build:event:admin": "vite build --config build.vite.config.ts --mode event:admin"
"build:ds:config": "vite build --config build.vite.config.ts --mode ds:config",
"build:ds:value": "vite build --config build.vite.config.ts --mode ds:value",
"build:ds:event": "vite build --config build.vite.config.ts --mode ds:event"
},
"dependencies": {
"@tmagic/cli": "1.3.0-alpha.19",
"@tmagic/core": "1.3.0-alpha.19",
"@tmagic/data-source": "1.3.0-alpha.19",
"@tmagic/ui-vue2": "1.3.0-alpha.19",
"@tmagic/schema": "1.3.0-alpha.19",
"@tmagic/stage": "1.3.0-alpha.19",

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

@ -19,9 +19,11 @@
import Vue from 'vue';
import Core from '@tmagic/core';
import { DataSourceManager } from '@tmagic/data-source';
import { getUrlParam } from '@tmagic/utils';
import components from '../.tmagic/comp-entry';
import datasources from '../.tmagic/datasource-entry';
import plugins from '../.tmagic/plugin-entry';
import request from './utils/request';
@ -32,6 +34,18 @@ import '@tmagic/utils/resetcss.css';
Vue.use(request);
Object.keys(components).forEach((type: string) => {
Vue.component(`magic-ui-${type}`, components[type]);
});
Object.entries(datasources).forEach(([type, ds]: [string, any]) => {
DataSourceManager.registe(type, ds);
});
Object.values(plugins).forEach((plugin: any) => {
Vue.use(plugin);
});
const app = new Core({
ua: window.navigator.userAgent,
config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
@ -40,14 +54,6 @@ const app = new Core({
app.setDesignWidth(app.env.isWeb ? window.document.documentElement.getBoundingClientRect().width : 375);
Object.keys(components).forEach((type: string) => {
Vue.component(`magic-ui-${type}`, components[type]);
});
Object.values(plugins).forEach((plugin: any) => {
Vue.use(plugin);
});
Vue.prototype.app = app;
const magicApp = new Vue({

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

@ -19,16 +19,25 @@
import Vue from 'vue';
import Core from '@tmagic/core';
import { DataSourceManager } from '@tmagic/data-source';
import App from './App.vue';
import '@tmagic/utils/resetcss.css';
Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]).then(([components, plugins]) => {
Promise.all([
import('../.tmagic/comp-entry'),
import('../.tmagic/plugin-entry'),
import('../.tmagic/datasource-entry'),
]).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.values(plugins.default).forEach((plugin: any) => {
Vue.use(plugin);
});

30
runtime/vue3/build.vite.config.ts
View File

@ -26,9 +26,14 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
import externalGlobals from 'rollup-plugin-external-globals';
export default defineConfig(({ mode }) => {
if (['value', 'config', 'event', 'value:admin', 'config:admin', 'event:admin'].includes(mode)) {
const [type, isAdmin] = mode.split(':');
const capitalToken = type.charAt(0).toUpperCase() + type.slice(1);
if (['value', 'config', 'event', 'ds:value', 'ds:config', 'ds:event'].includes(mode)) {
const capitalToken = mode
.split(':')
.map((word) => word[0].toUpperCase() + word.slice(1))
.join('');
const fileName = mode.replace(':', '-');
return {
publicDir: './.tmagic/public',
build: {
@ -36,10 +41,10 @@ export default defineConfig(({ mode }) => {
sourcemap: true,
minify: false,
target: 'esnext',
outDir: isAdmin ? `./dist/entry/${type}` : `../../playground/public/entry/vue3/${type}`,
outDir: `../../playground/public/entry/vue3/${fileName}`,
lib: {
entry: `.tmagic/${type}-entry.ts`,
entry: `.tmagic/${fileName}-entry.ts`,
name: `magicPreset${capitalToken}s`,
fileName: 'index',
formats: ['umd'],
@ -48,12 +53,7 @@ export default defineConfig(({ mode }) => {
};
}
if (['page', 'playground', 'page:admin', 'playground:admin'].includes(mode)) {
const [type, isAdmin] = mode.split(':');
const base = isAdmin ? `/static/vue3/runtime/${type}/` : `/tmagic-editor/playground/runtime/vue3/${type}`;
const outDir = isAdmin
? path.resolve(process.cwd(), `./dist/runtime/${type}`)
: path.resolve(process.cwd(), `../../playground/public/runtime/vue3/${type}`);
if (['page', 'playground'].includes(mode)) {
return {
plugins: [
vue(),
@ -61,19 +61,19 @@ export default defineConfig(({ mode }) => {
legacy({
targets: ['defaults', 'not IE 11'],
}),
externalGlobals({ vue: 'Vue' }, { exclude: [`./${type}/index.html`] }),
externalGlobals({ vue: 'Vue' }, { exclude: [`./${mode}/index.html`] }),
],
root: `./${type}/`,
root: `./${mode}/`,
publicDir: '../public',
base,
base: `/tmagic-editor/playground/runtime/vue3/${mode}`,
build: {
emptyOutDir: true,
sourcemap: true,
outDir,
outDir: path.resolve(process.cwd(), `../../playground/public/runtime/vue3/${mode}`),
},
};
}

14
runtime/vue3/package.json
View File

@ -6,22 +6,20 @@
"scripts": {
"dev": "npm run build:libs && vite --config dev.vite.config.ts",
"build": "npm run build:libs && npm run build:page && npm run build:playground",
"build:admin": "npm run build:libs:admin && npm run build:page:admin && npm run build:playground:admin",
"build:page": "vite build --config build.vite.config.ts --mode page",
"build:playground": "vite build --config build.vite.config.ts --mode playground",
"build:page:admin": "vite build --config build.vite.config.ts --mode page:admin",
"build:playground:admin": "vite build --config build.vite.config.ts --mode playground:admin",
"build:libs": "tmagic entry && npm run build:config && npm run build:value && npm run build:event",
"build:libs:admin": "tmagic entry && npm run build:config:admin && npm run build:value:admin && npm run build:event:admin",
"build:libs": "tmagic entry && npm run build:config && npm run build:value && npm run build:event && npm run build:ds:libs",
"build:ds:libs": "npm run build:ds:config && npm run build:ds:value && npm run build:ds:event",
"build:config": "vite build --config build.vite.config.ts --mode config",
"build:value": "vite build --config build.vite.config.ts --mode value",
"build:event": "vite build --config build.vite.config.ts --mode event",
"build:config:admin": "vite build --config build.vite.config.ts --mode config:admin",
"build:value:admin": "vite build --config build.vite.config.ts --mode value:admin",
"build:event:admin": "vite build --config build.vite.config.ts --mode event:admin"
"build:ds:config": "vite build --config build.vite.config.ts --mode ds:config",
"build:ds:value": "vite build --config build.vite.config.ts --mode ds:value",
"build:ds:event": "vite build --config build.vite.config.ts --mode ds:event"
},
"dependencies": {
"@tmagic/cli": "1.3.0-alpha.19",
"@tmagic/data-source": "1.3.0-alpha.19",
"@tmagic/core": "1.3.0-alpha.19",
"@tmagic/ui": "1.3.0-alpha.19",
"@tmagic/schema": "1.3.0-alpha.19",

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

@ -19,9 +19,11 @@
import { createApp, defineAsyncComponent } from 'vue';
import Core from '@tmagic/core';
import { DataSourceManager } from '@tmagic/data-source';
import { getUrlParam } from '@tmagic/utils';
import components from '../.tmagic/async-comp-entry';
import datasources from '../.tmagic/datasource-entry';
import plugins from '../.tmagic/plugin-entry';
import request from './utils/request';
@ -38,6 +40,10 @@ Object.entries(components).forEach(([type, component]: [string, any]) => {
magicApp.component(`magic-ui-${type}`, defineAsyncComponent(component));
});
Object.entries(datasources).forEach(([type, ds]: [string, any]) => {
DataSourceManager.registe(type, ds);
});
Object.values(plugins).forEach((plugin: any) => {
magicApp.use(plugin);
});

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

@ -19,18 +19,27 @@
import { createApp } from 'vue';
import Core from '@tmagic/core';
import { DataSourceManager } from '@tmagic/data-source';
import App from './App.vue';
import '@tmagic/utils/resetcss.css';
Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]).then(([components, plugins]) => {
Promise.all([
import('../.tmagic/comp-entry'),
import('../.tmagic/plugin-entry'),
import('../.tmagic/datasource-entry'),
]).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.values(plugins.default).forEach((plugin: any) => {
magicApp.use(plugin);
});