forked from opentiny/tiny-vue
354 lines
9.4 KiB
JavaScript
354 lines
9.4 KiB
JavaScript
|
import gulp from 'gulp'
|
|||
|
|
import minimist from 'minimist'
|
|||
|
|
import shell from 'shelljs'
|
|||
|
|
import path from 'path'
|
|||
|
|
import { generateKey } from 'crypto'
|
|||
|
|
|
|||
|
|
const build = gulp.series(init, read, write, clean)
|
|||
|
|
build.description = '将本地文档的组件api, 转换为低代码需要的bundle.json 格式'
|
|||
|
|
build.flags = {
|
|||
|
|
'--apiPath': '设置api文档路径，默认为： examples/sites/demos/pc',
|
|||
|
|
'--tinyVer': '设置生成中，tinyVer的版本号，默认为 3.11.0'
|
|||
|
|
}
|
|||
|
|
export default build
|
|||
|
|
|
|||
|
|
const rootPath = process.cwd()
|
|||
|
|
let apiPath = 'examples/sites/demos/pc'
|
|||
|
|
let tinyVer = '3.11.0'
|
|||
|
|
let guid = 1
|
|||
|
|
let menus = []
|
|||
|
|
|
|||
|
|
const ignoreKeys = ['color', 'font', 'icon']
|
|||
|
|
const mixinKeys = {
|
|||
|
|
'form': [{ key: 'form-item', nameCn: '表单项', desc: '表单中的一行表单域对象' }],
|
|||
|
|
'layout': [
|
|||
|
|
{ key: 'row', nameCn: '行元素', desc: '行元素' },
|
|||
|
|
{ key: 'col', nameCn: '列元素', desc: '列元素' }
|
|||
|
|
],
|
|||
|
|
'breadcrumb': [{ key: 'breadcrumb-item', nameCn: '面包屑项', desc: '面包屑的层级对象' }],
|
|||
|
|
'timeline': [{ key: 'timeline-item', nameCn: '时间线数据项', desc: '时间线数据项' }],
|
|||
|
|
'dropdown': [
|
|||
|
|
{ key: 'dropdown-menu', nameCn: '下拉菜单', desc: '下拉菜单' },
|
|||
|
|
{ key: 'dropdown-item', nameCn: '下拉菜单项', desc: '下拉菜单项' }
|
|||
|
|
],
|
|||
|
|
'carousel': [{ key: 'carousel-item', nameCn: '走马灯数据项', desc: '走马灯数据项' }],
|
|||
|
|
'checkbox': [
|
|||
|
|
{ key: 'checkbox-group', nameCn: '复选框组', desc: '复选框组' },
|
|||
|
|
{ key: 'checkbox-button', nameCn: '复选框按钮', desc: '复选框按钮' }
|
|||
|
|
],
|
|||
|
|
'radio': [
|
|||
|
|
{ key: 'radio-group', nameCn: '单选框组', desc: '单选框组' },
|
|||
|
|
{ key: 'radio-button', nameCn: '单选框按钮', desc: '单选框按钮' }
|
|||
|
|
],
|
|||
|
|
'grid': [
|
|||
|
|
{ key: 'grid-column', nameCn: '表格列对象', desc: '表格列对象' },
|
|||
|
|
{ key: 'grid-toolbar', nameCn: '表格工具栏', desc: '表格工具栏' }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const result = {
|
|||
|
|
'data': {
|
|||
|
|
'framework': 'Vue',
|
|||
|
|
'materials': {
|
|||
|
|
'components': [],
|
|||
|
|
'snippets': [],
|
|||
|
|
'blocks': []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 1. 初始化
|
|||
|
|
function init(cb) {
|
|||
|
|
const argv = minimist(process.argv.slice(2))
|
|||
|
|
if (argv.apiPath) {
|
|||
|
|
apiPath = argv.apiPath
|
|||
|
|
}
|
|||
|
|
if (argv.tinyVer) {
|
|||
|
|
tinyVer = argv.tinyVer
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 读菜单
|
|||
|
|
shell.cp(path.join(apiPath, '/menus.js'), 'gulp/menus.mjs')
|
|||
|
|
shell.sed('-i', 'import.meta.env.VITE_BUILD_TARGET', 'false', 'gulp/menus.mjs')
|
|||
|
|
import('./menus.mjs').then((res) => {
|
|||
|
|
menus = res.cmpMenus
|
|||
|
|
cb()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 2. 遍历菜单，处理每一个组件
|
|||
|
|
function read(cb) {
|
|||
|
|
menus.forEach((group) => {
|
|||
|
|
const snippetItem = {
|
|||
|
|
'group': group.label,
|
|||
|
|
'children': []
|
|||
|
|
}
|
|||
|
|
group.children.forEach((component) => {
|
|||
|
|
if (ignoreKeys.includes(component.key)) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (component.key.startsWith('grid-') || component.key.startsWith('chart-')) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const componentInfo = _readOneComp(component)
|
|||
|
|
const componentItem = genComp(componentInfo)
|
|||
|
|
const snipItem = genSnip(componentInfo)
|
|||
|
|
|
|||
|
|
result.data.materials.components.push(componentItem)
|
|||
|
|
snippetItem.children.push(snipItem)
|
|||
|
|
|
|||
|
|
// 特殊的混合组件判断, 比如遍历到form时，要插入 form-item的定义
|
|||
|
|
if (mixinKeys[component.key]) {
|
|||
|
|
mixinKeys[component.key].forEach((mixin) => {
|
|||
|
|
const componentInfo = _readOneComp(component, mixin)
|
|||
|
|
const componentItem = genComp(componentInfo)
|
|||
|
|
const snipItem = genSnip(componentInfo)
|
|||
|
|
|
|||
|
|
result.data.materials.components.push(componentItem)
|
|||
|
|
snippetItem.children.push(snipItem)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
result.data.materials.snippets.push(snippetItem)
|
|||
|
|
})
|
|||
|
|
cb()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function _readOneComp(component, mixin = '') {
|
|||
|
|
if (!mixin) {
|
|||
|
|
shell.echo('---正在读取组件', component.key)
|
|||
|
|
const key = component.key
|
|||
|
|
const camelizeKey = camelize(key)
|
|||
|
|
const cmpName = component.nameCn
|
|||
|
|
const desc = readMdDesc(key)
|
|||
|
|
const jsStr = shell.cat(`${apiPath}/app/${key}/webdoc/${key}.js`).replace('export default', '(') + ')'
|
|||
|
|
const api = eval(jsStr).apis.filter((item) => item.name === key)[0]
|
|||
|
|
const props = api?.props || api?.properties || []
|
|||
|
|
const events = api?.events || []
|
|||
|
|
const slots = api?.slots || []
|
|||
|
|
guid++
|
|||
|
|
const componentInfo = { id: guid, version: tinyVer, key, camelizeKey, cmpName, desc, props, events, slots }
|
|||
|
|
|
|||
|
|
return componentInfo
|
|||
|
|
} else {
|
|||
|
|
shell.echo('---正在读取混入的组件', component.key, mixin.key)
|
|||
|
|
const key = mixin.key
|
|||
|
|
const camelizeKey = camelize(key)
|
|||
|
|
const cmpName = mixin.nameCn
|
|||
|
|
const desc = mixin.desc
|
|||
|
|
const jsStr =
|
|||
|
|
shell.cat(`${apiPath}/app/${component.key}/webdoc/${component.key}.js`).replace('export default', '(') + ')'
|
|||
|
|
const api = eval(jsStr).apis.filter((item) => item.name === mixin.key)[0]
|
|||
|
|
const props = api?.props || api?.properties || []
|
|||
|
|
const events = api?.events || []
|
|||
|
|
const slots = api?.slots || []
|
|||
|
|
guid++
|
|||
|
|
const componentInfo = { id: guid, version: tinyVer, key, camelizeKey, cmpName, desc, props, events, slots }
|
|||
|
|
|
|||
|
|
return componentInfo
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 3. 将结果写bundle.json
|
|||
|
|
function write(cb) {
|
|||
|
|
shell.ShellString(JSON.stringify(result, null, ' ')).to('gulp/bundle.json')
|
|||
|
|
cb()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 4. 清除
|
|||
|
|
function clean(cb) {
|
|||
|
|
shell.rm('gulp/menus.mjs')
|
|||
|
|
cb()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 以下辅助方法
|
|||
|
|
|
|||
|
|
// 转换：button-group ==> ButtonGroup
|
|||
|
|
const camelize = (str) => {
|
|||
|
|
return str
|
|||
|
|
.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
|
|||
|
|
.replace(/^(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
|
|||
|
|
}
|
|||
|
|
// 从标签中，提取文字。 <div>常用的操作按钮。</div> ==> 常用的操作按钮。
|
|||
|
|
const readMdDesc = (key) => {
|
|||
|
|
const mdStr = shell.cat(`${apiPath}/app/${key}/webdoc/${key}.cn.md`)
|
|||
|
|
const matched = mdStr.match(/<div>([\w|\s|\u4e00-\u9fa5]*)<\/div>/i)
|
|||
|
|
return matched ? matched[1] || '' : ''
|
|||
|
|
}
|
|||
|
|
const genComp = ({ id, version, key, camelizeKey, cmpName, desc, props, events, slots }) => {
|
|||
|
|
const item = {
|
|||
|
|
'id': id,
|
|||
|
|
'version': version,
|
|||
|
|
'name': {
|
|||
|
|
'zh_CN': cmpName
|
|||
|
|
},
|
|||
|
|
'component': 'Tiny' + camelizeKey,
|
|||
|
|
'icon': '',
|
|||
|
|
'description': desc,
|
|||
|
|
'doc_url': '',
|
|||
|
|
'screenshot': '',
|
|||
|
|
'tags': '',
|
|||
|
|
'keywords': '',
|
|||
|
|
'dev_mode': 'proCode',
|
|||
|
|
'npm': {
|
|||
|
|
'package': '@opentiny/vue',
|
|||
|
|
'exportName': camelizeKey,
|
|||
|
|
'version': version,
|
|||
|
|
'destructuring': true
|
|||
|
|
},
|
|||
|
|
'group': 'component',
|
|||
|
|
'configure': {
|
|||
|
|
'loop': true,
|
|||
|
|
'condition': true,
|
|||
|
|
'styles': true,
|
|||
|
|
'isContainer': false,
|
|||
|
|
'isModal': false,
|
|||
|
|
'nestingRule': {
|
|||
|
|
'childWhitelist': '',
|
|||
|
|
'parentWhitelist': '',
|
|||
|
|
'descendantBlacklist': '',
|
|||
|
|
'ancestorWhitelist': ''
|
|||
|
|
},
|
|||
|
|
'isNullNode': false,
|
|||
|
|
'isLayout': false,
|
|||
|
|
'rootSelector': '',
|
|||
|
|
'shortcuts': {
|
|||
|
|
'properties': []
|
|||
|
|
},
|
|||
|
|
'contextMenu': {
|
|||
|
|
'actions': [],
|
|||
|
|
'disable': []
|
|||
|
|
},
|
|||
|
|
'framework': 'Vue'
|
|||
|
|
},
|
|||
|
|
'schema': {
|
|||
|
|
'properties': [
|
|||
|
|
{
|
|||
|
|
'label': {
|
|||
|
|
'zh_CN': '基础信息'
|
|||
|
|
},
|
|||
|
|
'description': {
|
|||
|
|
'zh_CN': '基础信息'
|
|||
|
|
},
|
|||
|
|
'collapse': {
|
|||
|
|
'number': 6,
|
|||
|
|
'text': {
|
|||
|
|
'zh_CN': '显示更多'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
'content': props.map((prop) => genProp(prop))
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
'events': {
|
|||
|
|
...events.map((event) => genEvent(event)).reduce((pre, curr) => ({ ...pre, ...curr }), {})
|
|||
|
|
},
|
|||
|
|
'slots': {
|
|||
|
|
...slots.map((slot) => genSlot(slot)).reduce((pre, curr) => ({ ...pre, ...curr }), {})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return item
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const genProp = ({ name, type, defaultValue, desc }) => {
|
|||
|
|
const typeMap = {
|
|||
|
|
string: {
|
|||
|
|
component: 'MetaInput',
|
|||
|
|
props: {}
|
|||
|
|
},
|
|||
|
|
boolean: {
|
|||
|
|
component: 'MetaSwitch',
|
|||
|
|
props: {}
|
|||
|
|
},
|
|||
|
|
number: {
|
|||
|
|
component: 'MetaNumberic',
|
|||
|
|
props: {}
|
|||
|
|
},
|
|||
|
|
object: {
|
|||
|
|
component: 'MetaCodeEditor',
|
|||
|
|
props: {
|
|||
|
|
language: 'json'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
array: {
|
|||
|
|
component: 'MetaCodeEditor',
|
|||
|
|
props: {
|
|||
|
|
language: 'json'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
function: {
|
|||
|
|
component: 'MetaCodeEditor',
|
|||
|
|
props: {
|
|||
|
|
language: 'javascript'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const normalizeType = type.trim().toLowerCase()
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
'property': name,
|
|||
|
|
'type': type,
|
|||
|
|
'defaultValue': defaultValue == '--' ? '' : defaultValue,
|
|||
|
|
'label': {
|
|||
|
|
'text': {
|
|||
|
|
'zh_CN': desc['zh-CN']
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
'cols': 12,
|
|||
|
|
'rules': [],
|
|||
|
|
'hidden': false,
|
|||
|
|
'required': true,
|
|||
|
|
'readOnly': true,
|
|||
|
|
'disabled': true,
|
|||
|
|
'widget': typeMap[normalizeType]
|
|||
|
|
? typeMap[normalizeType] //
|
|||
|
|
: { 'component': '', 'props': {} },
|
|||
|
|
'description': {
|
|||
|
|
'zh_CN': desc['zh-CN']
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const genEvent = ({ name, type, defaultValue, desc }) => {
|
|||
|
|
return {
|
|||
|
|
['on' + camelize(name)]: {
|
|||
|
|
'label': {
|
|||
|
|
'zh_CN': desc['zh-CN']
|
|||
|
|
},
|
|||
|
|
'description': {
|
|||
|
|
'zh_CN': desc['zh-CN']
|
|||
|
|
},
|
|||
|
|
'type': 'event',
|
|||
|
|
'functionInfo': {
|
|||
|
|
'params': [],
|
|||
|
|
'returns': {}
|
|||
|
|
},
|
|||
|
|
'defaultValue': ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const genSlot = ({ name, type, defaultValue, desc }) => {
|
|||
|
|
return {
|
|||
|
|
[name]: {
|
|||
|
|
'label': {
|
|||
|
|
'zh_CN': desc['zh-CN']
|
|||
|
|
},
|
|||
|
|
'description': {
|
|||
|
|
'zh_CN': desc['zh-CN']
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const genSnip = ({ id, version, key, camelizeKey, cmpName, desc, props, events, slots }) => {
|
|||
|
|
return {
|
|||
|
|
'name': {
|
|||
|
|
'zh_CN': cmpName
|
|||
|
|
},
|
|||
|
|
'icon': key,
|
|||
|
|
'screenshot': '',
|
|||
|
|
'snippetName': 'Tiny' + camelizeKey,
|
|||
|
|
'schema': {}
|
|||
|
|
}
|
|||
|
|
}
|