github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-02-28 04:40:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: rewrite demo & export plugins and utils

Browse Source
This commit is contained in:
春希 2020-07-01 10:03:39 +08:00
parent 3bfe7580db
commit 6cf7c3d337
24 changed files with 421 additions and 1394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
packages/code-generator/demo/demo.js Normal file
View File

@ -0,0 +1,53 @@
const fs = require('fs');
const CodeGenerator = require('../lib').default;
function flatFiles(rootName, dir) {
const dirRoot = rootName ? `${rootName}/${dir.name}` : dir.name;
const files = dir.files.map(file => ({
name: `${dirRoot}/${file.name}.${file.ext}`,
content: file.content,
ext: '',
}));
const filesInSub = dir.dirs.map(subDir => flatFiles(`${dirRoot}`, subDir));
const result = files.concat.apply(files, filesInSub);
return result;
}
function displayResultInConsole(root, fileName) {
const files = flatFiles('.', root);
files.forEach(file => {
if (!fileName || fileName === file.name) {
console.log(`========== ${file.name} Start ==========`);
console.log(file.content);
console.log(`========== ${file.name} End ==========`);
}
});
}
async function writeResultToDisk(root, path) {
const publisher = CodeGenerator.publishers.disk();
return publisher.publish({
project: root,
outputPath: path,
projectSlug: 'demo-project',
createProjectFolder: true,
});
}
function main() {
const schemaJson = fs.readFileSync('./demo/sampleSchema.json', { encoding: 'utf8' });
const createIceJsProjectBuilder = CodeGenerator.solutions.icejs;
const builder = createIceJsProjectBuilder();
builder.generateProject(schemaJson).then(result => {
displayResultInConsole(result);
writeResultToDisk(result, 'output/lowcodeDemo').then(response =>
console.log('Write to disk: ', JSON.stringify(response)),
);
return result;
});
}
main();

243
packages/code-generator/demo/sampleSchema.json Normal file
View File

@ -0,0 +1,243 @@
{
"version": "1.0.0",
"componentsMap": [
{
"componentName": "Button",
"package": "@alifd/next",
"version": "1.19.18",
"destructuring": true,
"exportName": "Button"
},
{
"componentName": "Button.Group",
"package": "@alifd/next",
"version": "1.19.18",
"destructuring": true,
"exportName": "Button",
"subName": "Group"
},
{
"componentName": "Input",
"package": "@alifd/next",
"version": "1.19.18",
"destructuring": true,
"exportName": "Input"
},
{
"componentName": "Form",
"package": "@alifd/next",
"version": "1.19.18",
"destructuring": true,
"exportName": "Form"
},
{
"componentName": "Form.Item",
"package": "@alifd/next",
"version": "1.19.18",
"destructuring": true,
"exportName": "Form",
"subName": "Item"
},
{
"componentName": "NumberPicker",
"package": "@alifd/next",
"version": "1.19.18",
"destructuring": true,
"exportName": "NumberPicker"
},
{
"componentName": "Select",
"package": "@alifd/next",
"version": "1.19.18",
"destructuring": true,
"exportName": "Select"
}
],
"componentsTree": [
{
"componentName": "Page",
"id": "node$1",
"meta": {
"title": "测试",
"router": "/"
},
"props": {
"ref": "outterView",
"autoLoading": true
},
"fileName": "test",
"state": {
"text": "outter"
},
"lifeCycles": {
"componentDidMount": {
"type": "JSExpression",
"value": "function() { this.utils.request(this.props.url); }"
}
},
"children": [
{
"componentName": "Form",
"id": "node$2",
"props": {
"labelCol": {
"type": "JSExpression",
"value": "this.state.colNum"
},
"style": {},
"ref": "testForm"
},
"children": [
{
"componentName": "Form.Item",
"id": "node$3",
"props": {
"label": "姓名：",
"name": "name",
"initValue": "李雷"
},
"children": [
{
"componentName": "Input",
"id": "node$4",
"props": {
"placeholder": "请输入",
"size": "medium",
"style": {
"width": 320
}
}
}
]
},
{
"componentName": "Form.Item",
"id": "node$5",
"props": {
"label": "年龄：",
"name": "age",
"initValue": "22"
},
"children": [
{
"componentName": "NumberPicker",
"id": "node$6",
"props": {
"size": "medium",
"type": "normal"
}
}
]
},
{
"componentName": "Form.Item",
"id": "node$7",
"props": {
"label": "职业：",
"name": "profession"
},
"children": [
{
"componentName": "Select",
"id": "node$8",
"props": {
"dataSource": [
{
"label": "教师",
"value": "t"
},
{
"label": "医生",
"value": "d"
},
{
"label": "歌手",
"value": "s"
}
]
}
}
]
},
{
"componentName": "Div",
"id": "node$9",
"props": {
"style": {
"textAlign": "center"
}
},
"children": [
{
"componentName": "Button.Group",
"id": "node$a",
"props": {},
"children": [
{
"componentName": "Button",
"id": "node$b",
"props": {
"type": "primary",
"style": {
"margin": "0 5px 0 5px"
},
"htmlType": "submit"
},
"children": [
"提交"
]
},
{
"componentName": "Button",
"id": "node$d",
"props": {
"type": "normal",
"style": {
"margin": "0 5px 0 5px"
},
"htmlType": "reset"
},
"children": [
"重置"
]
}
]
}
]
}
]
}
]
}
],
"constants": {
"ENV": "prod",
"DOMAIN": "xxx.alibaba-inc.com"
},
"css": "body {font-size: 12px;} .table { width: 100px;}",
"config": {
"sdkVersion": "1.0.3",
"historyMode": "hash",
"targetRootID": "J_Container",
"layout": {
"componentName": "BasicLayout",
"props": {
"logo": "...",
"name": "测试网站"
}
},
"theme": {
"package": "@alife/theme-fusion",
"version": "^0.1.0",
"primary": "#ff9966"
}
},
"meta": {
"name": "demo应用",
"git_group": "appGroup",
"project_name": "app_demo",
"description": "这是一个测试应用",
"spma": "spa23d",
"creator": "月飞"
}
}

3
packages/code-generator/package.json
View File

@ -8,8 +8,7 @@
],
"scripts": {
"build": "rimraf lib && tsc",
"demo": "ts-node -r tsconfig-paths/register ./src/demo/main.ts",
"demo:exp": "ts-node -r tsconfig-paths/register ./src/demo/expressionTest.ts",
"demo": "node ./demo/demo.js",
"test": "ava",
"template": "node ./tools/createTemplate.js"
},

22
packages/code-generator/src/demo/expressionTest.ts
View File

@ -1,22 +0,0 @@
import traverse from '@babel/traverse';
import * as parser from '@babel/parser';
function test(functionBody: string) {
console.log(functionBody);
console.log('---->');
try {
const parseResult = parser.parse(functionBody);
console.log(JSON.stringify(parseResult));
traverse(parseResult, {
enter(path) {
console.log('path: ', path.type, path);
}
});
} catch (error) {
console.log('Error');
console.log(error.message);
}
console.log('=====================');
}
test('function main() { state.fff = 1; }');

59
packages/code-generator/src/demo/main.ts
View File

@ -1,59 +0,0 @@
import { IResultDir, IResultFile } from '../types';
import codeGenerator from '../index';
import { createDiskPublisher } from '../publisher/disk';
// import demoSchema from './simpleDemo';
import demoSchema from './recoreDemo';
function flatFiles(rootName: string | null, dir: IResultDir): IResultFile[] {
const dirRoot: string = rootName ? `${rootName}/${dir.name}` : dir.name;
const files: IResultFile[] = dir.files.map(file => ({
name: `${dirRoot}/${file.name}.${file.ext}`,
content: file.content,
ext: '',
}));
const filesInSub = dir.dirs.map(subDir => flatFiles(`${dirRoot}`, subDir));
const result: IResultFile[] = files.concat.apply(files, filesInSub);
return result;
}
function displayResultInConsole(root: IResultDir, fileName?: string): void {
const files = flatFiles('.', root);
files.forEach(file => {
if (!fileName || fileName === file.name) {
console.log(`========== ${file.name} Start ==========`);
console.log(file.content);
console.log(`========== ${file.name} End ==========`);
}
});
}
async function writeResultToDisk(root: IResultDir, path: string): Promise<any> {
const publisher = createDiskPublisher();
return publisher.publish({
project: root,
outputPath: path,
projectSlug: 'demo-project',
createProjectFolder: true,
});
}
function main() {
// const createIceJsProjectBuilder = codeGenerator.solutions.icejs;
// const builder = createIceJsProjectBuilder();
const createRecoreProjectBuilder = codeGenerator.solutions.recore;
const builder = createRecoreProjectBuilder();
builder.generateProject(demoSchema).then(result => {
displayResultInConsole(result);
// writeResultToDisk(result, '/Users/armslave/lowcodeDemo').then(response =>
// console.log('Write to disk: ', JSON.stringify(response)),
// );
return result;
});
}
main();

815
packages/code-generator/src/demo/recoreDemo.ts
View File

@ -1,815 +0,0 @@
import { IProjectSchema } from '../types';
const demoData: IProjectSchema = {
version: '1.0.0',
componentsMap: [
{
componentName: 'Button',
'package': 'alife/next',
version: '1.0.0',
destructuring: true,
exportName: 'Select',
subName: 'Button',
},
],
componentsTree: [
{
condition: true,
css: 'body{background-color:#f2f3f5}',
children: [
{
condition: true,
children: [
{
condition: true,
children: [
{
condition: true,
componentName: 'TextField',
id: 'node_k1nd576k',
props: {
fieldName: 'name',
hasClear: false,
autoFocus: false,
tips: {
en_US: '',
zh_CN: '',
type: 'JSExpression',
value: 'this.utils.getLocale() === \'en_US\' ? \'\' : \'\'',
extType: 'i18n',
},
trim: false,
labelTextAlign: 'right',
placeholder: {
use: 'zh_CN',
en_US: 'please input',
zh_CN: '请输入',
type: 'JSExpression',
value: '"请输入"',
extType: 'i18n',
},
state: '',
behavior: 'NORMAL',
value: {
use: 'zh_CN',
zh_CN: '',
type: 'JSExpression',
value: '""',
extType: 'i18n',
},
addonBefore: {
use: 'zh_CN',
zh_CN: '',
type: 'JSExpression',
value: '""',
extType: 'i18n',
},
validation: [
{
type: 'required',
},
],
hasLimitHint: false,
cutString: false,
__style__: {},
fieldId: 'textField_k1nd576w',
htmlType: 'input',
autoHeight: false,
labelColOffset: 0,
label: {
use: 'zh_CN',
en_US: 'TextField',
zh_CN: '活动名称',
type: 'JSExpression',
value: '"活动名称"',
extType: 'i18n',
},
__category__: 'form',
labelColSpan: 4,
wrapperColSpan: 0,
rows: 4,
addonAfter: {
use: 'zh_CN',
zh_CN: '',
type: 'JSExpression',
value: '""',
extType: 'i18n',
},
wrapperColOffset: 0,
size: 'medium',
labelAlign: 'top',
},
},
{
condition: true,
componentName: 'SelectField',
id: 'node_k1nd576l',
props: {
fieldName: 'type',
hasClear: false,
tips: {
en_US: '',
zh_CN: '',
type: 'JSExpression',
value: 'this.utils.getLocale() === \'en_US\' ? \'\' : \'\'',
extType: 'i18n',
},
mode: 'single',
showSearch: false,
autoWidth: true,
labelTextAlign: 'right',
placeholder: {
use: 'zh_CN',
en_US: 'please select',
zh_CN: '请选择',
type: 'JSExpression',
value: '"请选择"',
extType: 'i18n',
},
hasBorder: true,
behavior: 'NORMAL',
value: '',
validation: [
{
type: 'required',
},
],
__style__: {},
fieldId: 'select_k1nd576x',
notFoundContent: {
use: 'zh_CN',
type: 'JSExpression',
value: 'null',
extType: 'i18n',
},
labelColOffset: 0,
label: {
use: 'zh_CN',
en_US: 'SelectField',
zh_CN: '活动类型',
type: 'JSExpression',
value: '"活动类型"',
extType: 'i18n',
},
__category__: 'form',
labelColSpan: 4,
wrapperColSpan: 0,
wrapperColOffset: 0,
hasSelectAll: false,
hasArrow: true,
size: 'medium',
labelAlign: 'top',
filterLocal: true,
dataSource: [
{
defaultChecked: false,
text: {
en_US: 'Option 1',
zh_CN: '虚拟',
type: 'JSExpression',
__sid__: 'param_k1nd5lrz',
value: 'this.utils.getLocale() === \'en_US\' ? \'Option 1\' : \'虚拟\'',
extType: 'i18n',
},
__sid__: 'serial_k1nd576v',
value: '虚拟',
sid: 'opt_k1ofrjfz',
},
{
defaultChecked: false,
text: {
en_US: 'Option 2',
zh_CN: '营销',
type: 'JSExpression',
__sid__: 'param_k1nd5ls3',
value: 'this.utils.getLocale() === \'en_US\' ? \'Option 2\' : \'营销\'',
extType: 'i18n',
},
__sid__: 'serial_k1nd576w',
value: '营销',
sid: 'opt_k1ofrjg0',
},
{
defaultChecked: false,
text: {
en_US: 'Option 3',
zh_CN: '线下',
type: 'JSExpression',
__sid__: 'param_k1nd5ls7',
value: 'this.utils.getLocale() === \'en_US\' ? \'Option 3\' : \'线下\'',
extType: 'i18n',
},
__sid__: 'serial_k1nd576x',
value: '线下',
sid: 'opt_k1ofrjg1',
},
],
},
},
],
componentName: 'Form',
id: 'node_k1nd576j',
props: {
size: 'medium',
labelAlign: 'top',
autoValidate: true,
scrollToFirstError: true,
autoUnmount: true,
behavior: 'NORMAL',
dataSource: {
type: 'JSExpression',
value: 'state.formData',
extType: 'variable',
},
__style__: {},
fieldId: 'form',
},
},
],
componentName: 'Dialog',
id: 'node_k1nd576i',
props: {
hasMask: true,
closeable: 'esc',
visible: false,
footer: true,
footerActions: 'ok,cancel',
footerAlign: 'right',
title: {
rawValue: {
use: 'zh_CN',
zh_CN: '新增活动',
type: 'JSExpression',
value: '"新增活动"',
extType: 'i18n',
},
type: 'JSExpression',
value: '(state.formData ? \'编辑\' : \'新增\') + \'活动\'',
extType: 'variable',
},
fieldId: 'dialog',
onOk: {
rawType: 'events',
type: 'JSExpression',
value: 'this.utils.legaoBuiltin.execEventFlow.bind(this, [this.submit])',
events: [
{
name: 'submit',
id: 'submit',
params: {},
type: 'actionRef',
uuid: '1570937968144_0',
},
],
},
},
},
{
condition: true,
children: [
{
condition: true,
children: [],
componentName: 'PageHeader',
id: 'node_k1nd576c',
props: {
__slot__title: true,
extraContent: '',
__slot__extraContent: false,
__slot__action: false,
title: {
type: 'JSBlock',
value: {
condition: true,
children: [
{
condition: true,
componentName: 'Text',
id: 'node_k1nd576e',
props: {
showTitle: false,
behavior: 'NORMAL',
content: {
use: 'zh_CN',
en_US: 'Title',
zh_CN: '基础表格',
type: 'JSExpression',
value: '"基础表格"',
extType: 'i18n',
},
__style__: {},
fieldId: 'text_k1nd576t',
},
},
],
componentName: 'Slot',
id: 'node_k1nd576d',
props: {
slotName: 'title',
slotTitle: '标题区域',
},
},
},
content: '',
__slot__logo: false,
__slot__crumb: false,
crumb: '',
tab: '',
logo: '',
action: '',
__slot__tab: false,
__style__: {},
__slot__content: false,
fieldId: 'pageHeader_k1nd576s',
},
},
],
componentName: 'RootHeader',
id: 'node_k1hjb043',
props: {},
},
{
condition: true,
children: [
{
condition: true,
componentName: 'TablePc',
id: 'node_k1hjb046',
props: {
actionWidth: 0,
isTree: false,
showJump: true,
data: {
rawValue: {
data: [
{
contractDate: {
start: 1534942658570,
end: 1534944858570,
},
entryDate: 1534942658570,
name: '小王',
id: '1',
salary: 35000,
email: 'xw@abc.com',
moneyRange: {
lower: 108,
upper: 944,
},
},
{
contractDate: {
start: 1534942658570,
end: 1534944858570,
},
entryDate: 1534942658570,
name: '小李',
id: '2',
salary: 25000,
email: 'xl@abc.com',
moneyRange: {
lower: 214,
upper: 1077,
},
},
],
currentPage: 1,
totalCount: 2,
},
type: 'JSExpression',
value: 'state.table_list_basic',
extType: 'variable',
},
actionTitle: {
use: 'zh_CN',
en_US: 'Action',
zh_CN: '操作',
type: 'JSExpression',
value: '"操作"',
extType: 'i18n',
},
indent: 16,
columns: [
{
dataKey: 'name',
hidden: false,
dataType: 'text',
width: '300px',
lock: 'none',
sortable: false,
align: 'left',
title: {
en_US: 'Name',
use: 'zh_CN',
zh_CN: '活动名称',
type: 'JSExpression',
value: '"活动名称"',
extType: 'i18n',
},
timeFormatter: 'YYYY-MM-DD HH:mm:ss',
},
{
dataKey: 'type',
hidden: false,
dataType: 'text',
width: '150px',
lock: 'none',
sortable: false,
align: 'left',
title: {
en_US: 'Date',
use: 'zh_CN',
zh_CN: '活动类型',
type: 'JSExpression',
value: '"活动类型"',
extType: 'i18n',
},
timeFormatter: 'YYYY-MM-DD',
},
{
dataKey: 'created_at',
hidden: false,
dataType: 'timestamp',
width: 200,
lock: 'none',
sortable: false,
align: 'left',
title: {
en_US: 'contractDate',
use: 'zh_CN',
zh_CN: '创建时间',
type: 'JSExpression',
value: '"创建时间"',
extType: 'i18n',
},
timeFormatter: 'YYYY-MM-DD',
},
],
rowSelector: 'checkboxSelector',
pageSizeSelector: false,
pageSize: 10,
setLoadingComponent: false,
showRowSelector: false,
showLinkBar: true,
searchBarPlaceholder: {
use: 'zh_CN',
en_US: 'Please Input',
zh_CN: '请搜索',
type: 'JSExpression',
value: '"请搜索"',
extType: 'i18n',
},
type: 'normal',
pageSizePosition: 'end',
pageSizeList: '5,10,20',
fixedHeader: false,
showActionBar: true,
showSearch: true,
stickyHeader: false,
theme: 'split',
setEmptyContent: false,
actionFixed: 'none',
fieldId: 'tablePc_k1hjb4dl',
isPagination: true,
actionColumn: [
{
pageMode: '',
callback: {
type: 'JSExpression',
value: 'edit.bind(this)',
},
title: {
en_US: 'Detail',
use: 'zh_CN',
zh_CN: '编辑',
type: 'JSExpression',
value: '"编辑"',
extType: 'i18n',
},
option: 'callback',
},
{
pageMode: '',
callback: {
type: 'JSExpression',
value: 'del.bind(this)',
},
title: {
use: 'zh_CN',
en_US: 'action',
zh_CN: '删除',
type: 'JSExpression',
value: '"删除"',
extType: 'i18n',
},
option: 'callback',
},
],
hasHeader: true,
hideOnlyOnePage: false,
shape: 'arrow-only',
paginationPosition: 'right',
actionBar: [
{
callback: {
type: 'JSExpression',
value: 'add.bind(this)',
},
title: {
en_US: 'Action 1',
use: 'zh_CN',
zh_CN: '新增',
type: 'JSExpression',
value: '"新增"',
extType: 'i18n',
},
option: 'callback',
},
],
actionType: 'link',
__router: {
type: 'JSExpression',
value: 'this.utils.router',
},
linkBar: [],
size: 'medium',
onLoadData: {
rawType: 'events',
type: 'JSExpression',
value: 'this.utils.legaoBuiltin.execEventFlow.bind(this, [this.onLoadData])',
events: [
{
name: 'onLoadData',
id: 'onLoadData',
params: {},
type: 'actionRef',
uuid: '1570938442689_4',
},
],
},
actionHidden: false,
dataSourceType: 'data',
primaryKey: 'id',
},
},
],
componentName: 'RootContent',
id: 'node_k1hjb044',
props: {
contentBgColor: 'white',
contentPadding: '20',
},
},
{
condition: true,
children: [],
componentName: 'RootFooter',
id: 'node_k1hjb045',
props: {},
},
],
methods: {
__initMethods__: {
type: 'JSExpression',
value: 'function (exports, module) { \'use strict\';\n\nexports.__esModule = true;\nexports.hellGlobal = hellGlobal;\n/**\n* 全局函数，可以被应用内所有页面调用\n*/\nfunction hellGlobal() {\n console.log(\'hello, global\');\n}\'use strict\';\n\nexports.__esModule = true;\nexports.add = add;\nexports.submit = submit;\nexports.onLoadData = onLoadData;\nexports.edit = edit;\nexports.del = del;\n// 点击新增\nfunction add() {\n this.state.formData = null;\n this.$(\'dialog\').show();\n}\n\n/**\n* 点击弹框的“确认”\n*/\nfunction submit() {\n const _this = this;\n\n this.$(\'form\').submit(function (data, error) {\n if (data) {\n _this.dataSourceMap[\'table_submit\'].load(data).then(function (res) {\n _this.utils.toast({\n type: \'success\',\n title: \'提交成功\'\n });\n _this.$(\'dialog\').hide();\n _this.dataSourceMap[\'table_list_basic\'].load();\n });\n }\n });\n}\n\n/**\n* tablePc onLoadData\n* @param currentPage 当前页码\n* @param pageSize 每页显示条数\n* @param searchKey 搜索关键字\n* @param orderColumn 排序列\n* @param orderType 排序方式（desc,asc）\n* @param from 触发来源（order,search,pagination）\n*/\nfunction onLoadData(currentPage, pageSize, searchKey, orderColumn, orderType, from) {\n const tableParams = {\n currentPage: from === \'search\' ? 1 : currentPage,\n pageSize: pageSize,\n searchKey: searchKey,\n orderColumn: orderColumn,\n orderType: orderType\n };\n this.setState({ tableParams: tableParams });\n}\n\n// 点击编辑\nfunction edit(rowData) {\n this.state.formData = rowData;\n this.$(\'dialog\').show();\n}\n\n// 点击删除\nfunction del(rowData) {\n const _this2 = this;\n\n this.utils.dialog({\n method: \'confirm\',\n title: \'提示\',\n content: \'确认删除该条目吗？\',\n onOk: function onOk() {\n _this2.dataSourceMap[\'table_delete\'].load({ id: rowData.id }).then(function () {\n _this2.utils.toast({\n type: \'success\',\n title: \'删除成功\'\n });\n _this2.dataSourceMap[\'table_list_basic\'].load();\n });\n }\n });\n} }',
},
},
componentName: 'Page',
fileName: 'page_index',
meta: {
title: '首页',
router: '/',
spmb: 'abef21',
},
id: 'node_k1hjb042',
state: {
urlParams: {
type: 'JSExpression',
value: 'this.utils.legaoBuiltin.getUrlParams()',
},
designUrlPrefix: {
type: 'JSExpression',
value: '"https://pre-go.alibaba-inc.com/fusion_developer/0.1.0/design"',
},
tableParams: {
type: 'JSExpression',
value: '',
},
},
dataSource: {
offline: [],
globalConfig: {
fit: {
type: 'JSExpression',
value: '',
extType: 'function',
},
},
online: [],
list: [
{
dataHandler: {
type: 'JSExpression',
value: 'function(data, err) { this.setState({table_list_basic: data}); return data; }',
extType: 'function',
},
requestHandler: {
type: 'JSExpression',
value: 'this.utils.legaoBuiltin.dataSourceHandler',
},
options: {
shouldFetch: true,
method: 'GET',
params: {
rawValue: [],
type: 'JSExpression',
value: 'state.tableParams',
extType: 'variable',
},
isSync: false,
url: 'https://mocks.alibaba-inc.com/mock/legao_template/api/activity/list.json',
},
id: 'table_list_basic',
type: 'legao',
isInit: true,
},
{
dataHandler: {
type: 'JSExpression',
value: 'function(data, err) { this.setState({table_submit: data}); return data; }',
extType: 'function',
},
requestHandler: {
type: 'JSExpression',
value: 'this.utils.legaoBuiltin.dataSourceHandler',
},
options: {
shouldFetch: true,
method: 'POST',
params: [],
isSync: false,
url: 'https://mocks.alibaba-inc.com/mock/legao_template/api/activity/update.json',
},
id: 'table_submit',
type: 'legao',
isInit: false,
},
{
dataHandler: {
type: 'JSExpression',
value: 'function(data, err) { this.setState({table_delete: data}); return data; }',
extType: 'function',
},
requestHandler: {
type: 'JSExpression',
value: 'this.utils.legaoBuiltin.dataSourceHandler',
},
options: {
shouldFetch: true,
method: 'POST',
params: [],
isSync: true,
url: 'https://mocks.alibaba-inc.com/mock/legao_template/api/activity/delete.json',
},
id: 'table_delete',
type: 'legao',
isInit: false,
},
],
sync: true,
},
lifeCycles: {
'init': {
type: 'JSExpression',
value: 'function constructor() {\nconst module = { exports: {} };\nconst _this = this;\nthis.__initMethods__(module.exports, module);\nObject.keys(module.exports).forEach(function(item) {\n if(typeof module.exports[item] === \'function\'){\n _this[item] = module.exports[item];\n }\n});\n\n}',
extType: 'function',
},
didMount: {
type: 'JSExpression',
value: 'function main(){\n \'use strict\';\n\nconst __compiledFunc__ = function didMount() {\n // 页面节点加载渲染完毕\n console.log(\'这是个 function didMount\', this);\n};\n return __compiledFunc__.apply(this, arguments);\n}',
extType: 'function',
},
},
props: {
extensions: {
'启用页头': true,
},
pageStyle: {
backgroundColor: '#f2f3f5',
},
containerStyle: {},
className: 'page_k1v3nkx7',
},
},
],
utils: [
{
name: 'clone',
type: 'npm',
content: {
'package': 'lodash',
version: '0.0.1',
exportName: 'clone',
subName: '',
destructuring: false,
main: '/lib/clone',
},
},
{
name: 'beforeRequestHandler',
type: 'function',
content: {
type: 'JSExpression',
value: 'function(){\n ... \n}',
},
},
],
constants: {
ENV: 'prod',
DOMAIN: 'xxx.alibaba-inc.com',
},
css: 'body {font-size: 12px;} .table { width: 100px;}',
config: {
sdkVersion: '1.0.3',
historyMode: 'hash',
targetRootID: 'J_Container',
layout: {
componentName: 'BasicLayout',
props: {
navConfig: {
showLanguageChange: true,
data: [
{
hidden: false,
navUuid: 'FORM-CP5669B1-3AW9DCLHZAY8EIY6WE6X1-GFZM3V1K-6',
children: [],
icon: '',
targetNew: false,
title: '测试基础表格',
inner: true,
relateUuid: 'FORM-CP5669B1-3AW9DCLHZAY8EIY6WE6X1-GFZM3V1K-6',
slug: 'qihfg',
},
{
hidden: false,
navUuid: 'FORM-CP5669B1-8AW9XCUT4PCH15SMDWUM3-ZPQP3V1K-1',
children: [],
icon: '',
targetNew: false,
title: '测试查询表格',
inner: true,
relateUuid: 'zqhej',
slug: 'zqhej',
},
],
systemLink: '/my_dev_center_code/0.1.0',
appName: '乐高转码测试',
isFoldHorizontal: 'n',
showAppTitle: true,
isFold: 'n',
searchBarType: 'icon',
singletons: {},
navTheme: 'default',
type: 'top_side_fold',
navStyle: 'orange',
layout: 'auto',
bgColor: 'white',
languageChangeUrl: '/common/account/changeAccountLanguage.json',
showSearch: 'n',
openSubMode: false,
showCrumb: true,
isFixed: 'y',
showIcon: false,
showNav: true,
},
},
},
theme: {
'package': '@alife/theme-fusion',
version: '^0.1.0',
primary: '#ff9966',
},
},
meta: {
name: 'demo应用',
git_group: 'appGroup',
project_name: 'app_demo',
description: '这是一个测试应用',
spma: 'spa23d',
creator: '月飞',
gmt_create: '2020-02-11 00:00:00',
gmt_modified: '2020-02-11 00:00:00',
},
i18n: {
'zh-CN': {
'i18n-jwg27yo4': '你好',
'i18n-jwg27yo3': '中国',
},
'en-US': {
'i18n-jwg27yo4': 'Hello',
'i18n-jwg27yo3': 'China',
},
},
};
export default demoData;

165
packages/code-generator/src/demo/recoreDemo1.ts
View File

@ -1,165 +0,0 @@
import { IProjectSchema } from '../types';
const demoData: IProjectSchema = {
version: '1.0.0',
componentsMap: [
{
componentName: 'Button',
'package': 'alife/next',
version: '1.0.0',
destructuring: true,
exportName: 'Select',
subName: 'Button',
},
],
componentsTree: [{
componentName: 'Page',
id: 'node$1',
props: {
ref: 'outterView',
autoLoading: true,
style: {
padding: 20,
},
},
fileName: 'test',
dataSource: {
list: [],
},
state: {
text: 'outter',
},
children: [
{
componentName: 'Button',
id: 'node$l',
props: {},
},
{
componentName: 'Button',
id: 'node$n',
props: {
type: 'secondary',
baseIcon: 'set',
},
},
{
componentName: 'Calendar',
id: 'node$p',
props: {
shape: 'card',
},
},
],
}],
utils: [
{
name: 'clone',
type: 'npm',
content: {
'package': 'lodash',
version: '0.0.1',
exportName: 'clone',
subName: '',
destructuring: false,
main: '/lib/clone',
},
},
{
name: 'beforeRequestHandler',
type: 'function',
content: {
type: 'JSExpression',
value: 'function(){\n ... \n}',
},
},
],
constants: {
ENV: 'prod',
DOMAIN: 'xxx.alibaba-inc.com',
},
css: 'body {font-size: 12px;} .table { width: 100px;}',
config: {
sdkVersion: '1.0.3',
historyMode: 'hash',
targetRootID: 'J_Container',
layout: {
componentName: 'BasicLayout',
props: {
navConfig: {
showLanguageChange: true,
data: [
{
hidden: false,
navUuid: 'FORM-CP5669B1-3AW9DCLHZAY8EIY6WE6X1-GFZM3V1K-6',
children: [],
icon: '',
targetNew: false,
title: '测试基础表格',
inner: true,
relateUuid: 'FORM-CP5669B1-3AW9DCLHZAY8EIY6WE6X1-GFZM3V1K-6',
slug: 'qihfg',
},
{
hidden: false,
navUuid: 'FORM-CP5669B1-8AW9XCUT4PCH15SMDWUM3-ZPQP3V1K-1',
children: [],
icon: '',
targetNew: false,
title: '测试查询表格',
inner: true,
relateUuid: 'zqhej',
slug: 'zqhej',
},
],
systemLink: '/my_dev_center_code/0.1.0',
appName: '乐高转码测试',
isFoldHorizontal: 'n',
showAppTitle: true,
isFold: 'n',
searchBarType: 'icon',
singletons: {},
navTheme: 'default',
type: 'top_side_fold',
navStyle: 'orange',
layout: 'auto',
bgColor: 'white',
languageChangeUrl: '/common/account/changeAccountLanguage.json',
showSearch: 'n',
openSubMode: false,
showCrumb: true,
isFixed: 'y',
showIcon: false,
showNav: true,
},
},
},
theme: {
'package': '@alife/theme-fusion',
version: '^0.1.0',
primary: '#ff9966',
},
},
meta: {
name: 'demo应用',
git_group: 'appGroup',
project_name: 'app_demo',
description: '这是一个测试应用',
spma: 'spa23d',
creator: '月飞',
gmt_create: '2020-02-11 00:00:00',
gmt_modified: '2020-02-11 00:00:00',
},
i18n: {
'zh-CN': {
'i18n-jwg27yo4': '你好',
'i18n-jwg27yo3': '中国',
},
'en-US': {
'i18n-jwg27yo4': 'Hello',
'i18n-jwg27yo3': 'China',
},
},
};
export default demoData;

243
packages/code-generator/src/demo/simpleDemo.ts
View File

@ -1,243 +0,0 @@
import { IProjectSchema } from '../types';
const demoData: IProjectSchema = {
version: '1.0.0',
componentsMap: [
{
componentName: 'Button',
package: '@alifd/next',
version: '1.19.18',
destructuring: true,
exportName: 'Button',
},
{
componentName: 'Button.Group',
package: '@alifd/next',
version: '1.19.18',
destructuring: true,
exportName: 'Button',
subName: 'Group',
},
{
componentName: 'Input',
package: '@alifd/next',
version: '1.19.18',
destructuring: true,
exportName: 'Input',
},
{
componentName: 'Form',
package: '@alifd/next',
version: '1.19.18',
destructuring: true,
exportName: 'Form',
},
{
componentName: 'Form.Item',
package: '@alifd/next',
version: '1.19.18',
destructuring: true,
exportName: 'Form',
subName: 'Item',
},
{
componentName: 'NumberPicker',
package: '@alifd/next',
version: '1.19.18',
destructuring: true,
exportName: 'NumberPicker',
},
{
componentName: 'Select',
package: '@alifd/next',
version: '1.19.18',
destructuring: true,
exportName: 'Select',
},
],
componentsTree: [
{
componentName: 'Page',
id: 'node$1',
meta: {
title: '测试',
router: '/',
},
props: {
ref: 'outterView',
autoLoading: true,
},
fileName: 'test',
state: {
text: 'outter',
},
lifeCycles: {
componentDidMount: {
type: 'JSExpression',
value: 'function() { this.utils.request(this.props.url); }',
},
},
children: [
{
componentName: 'Form',
id: 'node$2',
props: {
labelCol: {
type: 'JSExpression',
value: 'this.state.colNum',
},
style: {},
ref: 'testForm',
},
children: [
{
componentName: 'Form.Item',
id: 'node$3',
props: {
label: '姓名：',
name: 'name',
initValue: '李雷',
},
children: [
{
componentName: 'Input',
id: 'node$4',
props: {
placeholder: '请输入',
size: 'medium',
style: {
width: 320,
},
},
},
],
},
{
componentName: 'Form.Item',
id: 'node$5',
props: {
label: '年龄：',
name: 'age',
initValue: '22',
},
children: [
{
componentName: 'NumberPicker',
id: 'node$6',
props: {
size: 'medium',
type: 'normal',
},
},
],
},
{
componentName: 'Form.Item',
id: 'node$7',
props: {
label: '职业：',
name: 'profession',
},
children: [
{
componentName: 'Select',
id: 'node$8',
props: {
dataSource: [
{
label: '教师',
value: 't',
},
{
label: '医生',
value: 'd',
},
{
label: '歌手',
value: 's',
},
],
},
},
],
},
{
componentName: 'Div',
id: 'node$9',
props: {
style: {
textAlign: 'center',
},
},
children: [
{
componentName: 'Button.Group',
id: 'node$a',
props: {},
children: [
{
componentName: 'Button',
id: 'node$b',
props: {
type: 'primary',
style: {
margin: '0 5px 0 5px',
},
htmlType: 'submit',
},
children: ['提交'],
},
{
componentName: 'Button',
id: 'node$d',
props: {
type: 'normal',
style: {
margin: '0 5px 0 5px',
},
htmlType: 'reset',
},
children: ['重置'],
},
],
},
],
},
],
},
],
},
],
constants: {
ENV: 'prod',
DOMAIN: 'xxx.alibaba-inc.com',
},
css: 'body {font-size: 12px;} .table { width: 100px;}',
config: {
sdkVersion: '1.0.3',
historyMode: 'hash',
targetRootID: 'J_Container',
layout: {
componentName: 'BasicLayout',
props: {
logo: '...',
name: '测试网站',
},
},
theme: {
package: '@alife/theme-fusion',
version: '^0.1.0',
primary: '#ff9966',
},
},
meta: {
name: 'demo应用',
git_group: 'appGroup',
project_name: 'app_demo',
description: '这是一个测试应用',
spma: 'spa23d',
creator: '月飞',
},
};
export default demoData;

21
packages/code-generator/src/generator/ModuleBuilder.ts
View File

@ -1,18 +1,24 @@
import {
BuilderComponentPlugin,
CodeGeneratorError,
IBasicSchema,
ICodeChunk,
ICompiledModule,
IModuleBuilder,
IParseResult,
IResultDir,
IResultFile,
ISchemaParser,
PostProcessor,
} from '../types';
import { COMMON_SUB_MODULE_NAME } from '../const/generator';
import SchemaParser from '../parser/SchemaParser';
import ChunkBuilder from './ChunkBuilder';
import CodeBuilder from './CodeBuilder';
import ResultDir from '../model/ResultDir';
import ResultFile from '../model/ResultFile';
export function createModuleBuilder(
@ -66,6 +72,20 @@ export function createModuleBuilder(
};
};
const generateModuleCode = async (schema: IBasicSchema | string): Promise<IResultDir> => {
// Init
const schemaParser: ISchemaParser = new SchemaParser();
const parseResult: IParseResult = schemaParser.parse(schema);
const containerInfo = parseResult.containers[0];
const { files } = await generateModule(containerInfo);
const dir = new ResultDir(containerInfo.moduleName);
files.forEach(file => dir.addFile(file));
return dir;
}
const linkCodeChunks = (
chunks: Record<string, ICodeChunk[]>,
fileName: string,
@ -88,6 +108,7 @@ export function createModuleBuilder(
return {
generateModule,
generateModuleCode,
linkCodeChunks,
addPlugin: chunkGenerator.addPlugin.bind(chunkGenerator),
};

4
packages/code-generator/src/generator/ProjectBuilder.ts
View File

@ -57,8 +57,8 @@ export class ProjectBuilder implements IProjectBuilder {
this.postProcessors = postProcessors;
}
public async generateProject(schema: IProjectSchema): Promise<IResultDir> {
// Init working parts
public async generateProject(schema: IProjectSchema | string): Promise<IResultDir> {
// Init
const schemaParser: ISchemaParser = new SchemaParser();
const builders = this.createModuleBuilders();
const projectRoot = this.template.generateTemplate();

59
packages/code-generator/src/index.ts
View File

@ -3,14 +3,42 @@
*
*/
import { createProjectBuilder } from './generator/ProjectBuilder';
import { createModuleBuilder } from './generator/ModuleBuilder';
import { createDiskPublisher } from './publisher/disk';
import createIceJsProjectBuilder from './solutions/icejs';
import createRecoreProjectBuilder from './solutions/recore';
// 引入说明
import { REACT_CHUNK_NAME } from './plugins/component/react/const';
// 引入通用插件组
import esmodule from './plugins/common/esmodule';
import requireUtils from './plugins/common/requireUtils';
import containerClass from './plugins/component/react/containerClass';
import containerDataSource from './plugins/component/react/containerDataSource';
import containerInitState from './plugins/component/react/containerInitState';
import containerInjectUtils from './plugins/component/react/containerInjectUtils';
import containerLifeCycle from './plugins/component/react/containerLifeCycle';
import containerMethod from './plugins/component/react/containerMethod';
import jsx from './plugins/component/react/jsx';
import reactCommonDeps from './plugins/component/react/reactCommonDeps';
import css from './plugins/component/style/css';
import constants from './plugins/project/constants';
import i18n from './plugins/project/i18n';
import utils from './plugins/project/utils';
// 引入常用工具
import * as utilsCommon from './utils/common';
import * as utilsCompositeType from './utils/compositeType';
import * as utilsJsExpression from './utils/jsExpression';
import * as utilsNodeToJSX from './utils/nodeToJSX';
import * as utilsTemplateHelper from './utils/templateHelper';
export * from './types';
export default {
createProjectBuilder,
createModuleBuilder,
solutions: {
icejs: createIceJsProjectBuilder,
recore: createRecoreProjectBuilder,
@ -18,4 +46,35 @@ export default {
publishers: {
disk: createDiskPublisher,
},
plugins: {
common: {
esmodule,
requireUtils,
},
react: {
containerClass,
containerDataSource,
containerInitState,
containerInjectUtils,
containerLifeCycle,
containerMethod,
jsx,
reactCommonDeps,
},
style: {
css,
},
project: {
constants,
i18n,
utils,
},
},
utils: {
common: utilsCommon,
compositeType: utilsCompositeType,
jsExpression: utilsJsExpression,
nodeToJSX: utilsNodeToJSX,
templateHelper: utilsTemplateHelper,
},
};

13
packages/code-generator/src/parser/SchemaParser.ts
View File

@ -46,12 +46,23 @@ class SchemaParser implements ISchemaParser {
return true;
}
public parse(schema: IProjectSchema): IParseResult {
public parse(schemaSrc: IProjectSchema | string): IParseResult {
// TODO: collect utils depends in JSExpression
const compDeps: Record<string, IExternalDependency> = {};
const internalDeps: Record<string, IInternalDependency> = {};
let utilsDeps: IExternalDependency[] = [];
let schema: IProjectSchema;
if (typeof schemaSrc === 'string') {
try {
schema = JSON.parse(schemaSrc);
} catch (error) {
throw new CodeGeneratorError(`Parse schema failed: ${error.message || 'unknown reason'}`);
}
} else {
schema = schemaSrc;
}
// 解析三方组件依赖
schema.componentsMap.forEach(info => {
info.dependencyType = DependencyType.External;

2
packages/code-generator/src/plugins/common/esmodule.ts
View File

@ -123,7 +123,7 @@ function buildPackageImport(
return chunks;
}
interface PluginConfig {
type PluginConfig = {
fileType: string;
}

2
packages/code-generator/src/plugins/component/react/containerDataSource.ts
View File

@ -11,7 +11,7 @@ import {
IContainerInfo,
} from '../../../types';
interface PluginConfig {
type PluginConfig = {
fileType: string;
}

2
packages/code-generator/src/plugins/component/react/containerInitState.ts
View File

@ -11,7 +11,7 @@ import {
IContainerInfo,
} from '../../../types';
interface PluginConfig {
type PluginConfig = {
fileType: string;
implementType: 'inConstructor' | 'insMember' | 'hooks';
}

2
packages/code-generator/src/plugins/component/react/containerInjectUtils.ts
View File

@ -8,7 +8,7 @@ import {
ICodeStruct,
} from '../../../types';
interface PluginConfig {
type PluginConfig = {
fileType: string;
}

2
packages/code-generator/src/plugins/component/react/containerLifeCycle.ts
View File

@ -18,7 +18,7 @@ import {
IJSExpression,
} from '../../../types';
interface PluginConfig {
type PluginConfig = {
fileType: string;
exportNameMapping: Record<string, string>;
normalizeNameMapping: Record<string, string>;

2
packages/code-generator/src/plugins/component/react/containerMethod.ts
View File

@ -13,7 +13,7 @@ import {
IJSExpression,
} from '../../../types';
interface PluginConfig {
type PluginConfig = {
fileType: string;
}

2
packages/code-generator/src/plugins/component/react/jsx.ts
View File

@ -11,7 +11,7 @@ import { REACT_CHUNK_NAME } from './const';
import { createReactNodeGenerator } from '../../../utils/nodeToJSX';
interface PluginConfig {
type PluginConfig = {
fileType: string;
}

8
packages/code-generator/src/plugins/component/recore/pageDataSource.ts
View File

@ -31,25 +31,19 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
const { dataSource } = ir;
const {
list,
dataHandler,
...rest
} = dataSource;
let attrs: string[] = [];
const extConfigs = Object.keys(rest).map(extConfigName => {
const value = rest[extConfigName] as CompositeValue;
const value = (rest as Record<string, CompositeValue>)[extConfigName];
const [isString, valueStr] = generateCompositeType(value);
return `${extConfigName}: ${isString ? `'${valueStr}'` : valueStr}`;
});
attrs = [...attrs, ...extConfigs];
if (dataHandler) {
const handlerContent = packJsExpression(dataHandler);
attrs.push(`dataHandler: ${handlerContent}`);
}
const listProp = handleStringValueDefault(generateCompositeType(list as unknown as CompositeValue, {
expression: packJsExpression,
}));

2
packages/code-generator/src/plugins/component/style/css.ts
View File

@ -9,7 +9,7 @@ import {
IContainerInfo,
} from '../../../types';
interface PluginConfig {
type PluginConfig = {
fileType: string;
moduleFileType: string;
}

19
packages/code-generator/src/types/core.ts
View File

@ -78,12 +78,13 @@ export interface ICompiledModule {
}
export interface IModuleBuilder {
generateModule: (input: unknown) => Promise<ICompiledModule>;
linkCodeChunks: (
generateModule(input: unknown): Promise<ICompiledModule>;
generateModuleCode(schema: IBasicSchema | string): Promise<IResultDir>;
linkCodeChunks(
chunks: Record<string, ICodeChunk[]>,
fileName: string,
) => IResultFile[];
addPlugin: (plugin: BuilderComponentPlugin) => void;
): IResultFile[];
addPlugin(plugin: BuilderComponentPlugin): void;
}
/**
@ -105,7 +106,7 @@ export interface ICodeGenerator {
export interface ISchemaParser {
validate(schema: IBasicSchema): boolean;
parse(schema: IBasicSchema): IParseResult;
parse(schema: IBasicSchema | string): IParseResult;
}
export interface IProjectTemplate {
@ -136,7 +137,7 @@ export interface IProjectPlugins {
}
export interface IProjectBuilder {
generateProject(schema: IProjectSchema): Promise<IResultDir>;
generateProject(schema: IProjectSchema | string): Promise<IResultDir>;
}
export type PostProcessorFactory<T> = (config?: T) => PostProcessor;
@ -168,3 +169,9 @@ export interface HandlerSet<T> {
}
export type ExtGeneratorPlugin = (nodeItem: IComponentNodeItem) => CodePiece[];
// export interface InteratorScope {
// [$item: string]: string; // $item 默认取值 "item"
// [$index: string]: string | number; // $index 默认取值 "index"
// __proto__: BlockInstance;
// }

40
packages/code-generator/src/types/schema.ts
View File

@ -88,10 +88,6 @@ export interface IUtilItem {
content: IExternalDependency | IJSExpression;
}
export interface IInlineStyle {
[cssAttribute: string]: string | number | IJSExpression;
}
export type ChildNodeItem = string | IJSExpression | IComponentNodeItem;
export type ChildNodeType = ChildNodeItem | ChildNodeItem[];
@ -107,9 +103,7 @@ export interface IComponentNodeItem {
id?: string;
componentName: string; // 组件名称 必填、首字母大写
props: {
className?: string; // 组件样式类名
style?: IInlineStyle; // 组件内联样式
[propName: string]: any; // 业务属性
[propName: string]: CompositeValue; // 业务属性
}; // 组件属性对象
condition?: CompositeValue; // 渲染条件
loop?: CompositeValue; // 循环数据
@ -127,13 +121,10 @@ export interface IComponentNodeItem {
export interface IContainerNodeItem extends IComponentNodeItem {
componentName: 'Page' | 'Block' | 'Component'; // 'Page' | 'Block' | 'Component' 组件类型 必填、首字母大写
fileName: string; // 文件名称 必填、英文
defaultProps?: {
[propName: string]: any; // 业务属性
};
state?: {
[stateName: string]: any; // 容器初始数据
[stateName: string]: CompositeValue; // 容器初始数据
};
css: string; // 样式文件 用于描述容器组件内部节点的样式，对应生成一个独立的样式文件，在对应容器组件生成的 .jsx 文件中 import 引入；
css?: string; // 样式文件 用于描述容器组件内部节点的样式，对应生成一个独立的样式文件，在对应容器组件生成的 .jsx 文件中 import 引入；
/**
* LifeCycle
* • constructor(props, context)
@ -146,30 +137,13 @@ export interface IContainerNodeItem extends IComponentNodeItem {
* • componentDidCatch(error, info)
*/
lifeCycles?: Record<string, IJSExpression>; // 生命周期Hook方法
methods?: {
[methodName: string]: IJSExpression;
}; // 自定义方法设置
dataSource?: IDataSource; // 异步数据源配置
methods?: Record<string, IJSExpression>; // 自定义方法设置
dataSource?: {
list: IDataSourceConfig[];
}; // 异步数据源配置
meta?: IBasicMeta | IPageMeta;
}
/**
* 搭建基础协议 - 数据源
*
* @export
* @interface IDataSource
*/
export interface IDataSource {
list: IDataSourceConfig[]; // 成为为单个请求配置
/**
* 参数：为dataMap对象，key:数据id, value: 单个请求结果
* 返回值：数据对象data，将会在渲染引擎和schemaToCode中通过调用this.setState(...)将返回的数据对象生效到state中；
* 支持返回一个Promise，通过resolve(返回数据)，常用于串型发送请求场景，配合this.dataSourceMap[oneRequest.id].load()使用；
*/
dataHandler?: IJSExpression;
[extConfigName: string]: any;
}
/**
* 搭建基础协议 - 数据源单个配置
*

32
packages/code-generator/src/utils/nodeToJSX.ts
View File

@ -1,7 +1,6 @@
import {
ChildNodeType,
IComponentNodeItem,
IInlineStyle,
IJSExpression,
ChildNodeItem,
CodeGeneratorError,
@ -37,20 +36,6 @@ export function handleChildren<T>(
}
}
export function generateInlineStyle(style: IInlineStyle): string | null {
const attrLines = Object.keys(style).map((cssAttribute: string) => {
const [isString, valueStr] = generateCompositeType(style[cssAttribute]);
const valuePart = isString ? `'${valueStr}'` : valueStr;
return `${cssAttribute}: ${valuePart},`;
});
if (attrLines.length === 0) {
return null;
}
return `{ ${attrLines.join('')} }`;
}
export function generateAttr(attrName: string, attrValue: any): CodePiece[] {
if (attrName === 'initValue' || attrName === 'labelCol') {
return [];
@ -63,23 +48,8 @@ export function generateAttr(attrName: string, attrValue: any): CodePiece[] {
}
export function generateAttrs(nodeItem: IComponentNodeItem): CodePiece[] {
const { className, style, ...props } = nodeItem.props;
const { props } = nodeItem;
let pieces: CodePiece[] = [];
if (className) {
pieces.push({
value: `className="${className}"`,
type: PIECE_TYPE.ATTR,
});
}
if (style) {
const inlineStyle = generateInlineStyle(style);
if (inlineStyle !== null) {
pieces.push({
value: `style={${inlineStyle}}`,
type: PIECE_TYPE.ATTR,
});
}
}
Object.keys(props).forEach((propName: string) =>
pieces = pieces.concat(generateAttr(propName, props[propName])),