@cloudbase/cals 1.1.14-alpha.1 → 1.2.0

package/lib/esm/parser/cals/utils/template.js

@@ -0,0 +1,221 @@
+import template from 'lodash/template';
+import { ECodeType } from '../../../types';
+const TEMPLATES = {
+    /* ========== 低代码简化类型代码 ========== */
+    // 应用生命周期
+    appLifeCycle: `/**
+ * 可通过 app 获取或修改全局应用的 变量 状态 等信息
+ * 具体可以console.info 在编辑器Console面板查看更多信息
+ * 如果需要 async-await，请在方法前 async
+ **/
+export default {
+  onAppLaunch(launchOpts) {
+    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
+  },
+  onAppShow(appShowOpts) {
+    //console.log('---------> LifeCycle onAppShow', appShowOpts)
+  },
+  onAppHide() {
+    //console.log('---------> LifeCycle onAppHide')
+  },
+  onAppError(options) {
+    //console.log('---------> LifeCycle onAppError', options)
+  },
+  onAppPageNotFound(options) {
+    //console.log('---------> LifeCycle onAppPageNotFound', options)
+  },
+  onAppUnhandledRejection(options) {
+    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
+  }
+}`,
+    // 页面生命周期
+    pageLifeCycle: `/*
+* 可通过 $page 获取或修改当前页面的 变量 状态 handler lifecycle 等信息
+* 可通过 app 获取或修改全局应用的 变量 状态 等信息
+* 具体可以 console.info 在编辑器Console面板查看更多信息
+* 如果需要 async-await，请在方法前 async
+*/
+
+export default {
+  onPageLoad(query) {
+    //console.log('---------> LifeCycle onPageLoad', query)
+  },
+  onPageShow() {
+    //console.log('---------> LifeCycle onPageShow')
+  },
+  onPageReady() {
+    //console.log('---------> LifeCycle onPageReady')
+  },
+  onPageHide() {
+    //console.log('---------> LifeCycle onPageHide')
+  },
+  onPageUnload() {
+    //console.log('---------> LifeCycle onPageUnload')
+  },
+}`,
+    // 组件生命周期
+    compLifeCycle: `export default {
+  onAttached() {
+    //console.log('---------> LifeCycle onAttached')
+  },
+  onDetached() {
+    //console.log('---------> LifeCycle onDetached')
+  },
+}`,
+    // 以下为用户可增加的代码类型，所以需要与代码类型一一对应
+    // 状态
+    [ECodeType.STATE]: `/*
+* <% if (type === 'app') { %>可通过 app.state.xxx 访问这里定义的状态<% } %><% if (type === 'page') { %>可通过 $page.state.xxx 访问这里定义的状态<% } %><% if (type === 'component') { %>可通过 $comp.state.xxx 访问这里定义的状态<% } %>
+* <% if (type === 'page') { %>注意：页面级别的状态仅在所属的页面有效<% } %>
+* 修改状态时，直接赋值即可。如：<% if (type === 'app') { %>$app.state.xxx = 'xxx'<% } %><% if (type === 'page') { %>$page.state.xxx = 'xxx'<% } %><% if (type === 'component') { %>$comp.state.xxx = 'xxx'<% } %>
+* 请注意：避免在页面处于后台状态时state，页面在后台时对全局state的修改会丢失！
+*/
+
+<% if (type !== 'component') { %>
+export default {
+  name: 'LowCode'
+}
+
+/* 在这里定义页面变量。
+*  页面变量区别于 state 的是：页面变量不会作响应处理，不可被绑定
+*  <% if (type === 'page') { %>在 handler 中使用的例子：import { data } from '../state'<% } %>
+*  <% if (type === 'app') { %>在 common 中使用的例子：import { data } from '../state'<% } %>
+*/
+export const data = {
+
+}
+<% } %>
+<% if (type === 'component') { %>
+export default function() {
+  return {
+    name: 'LowCode'
+  }
+}
+<% } %>
+`,
+    // 计算属性
+    [ECodeType.COMPUTEDN]: `
+/*
+* <% if (type === 'app') { %>可通过 app.computed.xxx 访问这里定义的计算状态<% } %><% if (type === 'page') { %>可通过 $page.computed.xxx 访问这里定义的计算状态<% } %><% if (type === 'component') { %>可通过 $comp.computed.xxx 访问这里定义的计算状态<% } %>
+* <% if (type === 'page') { %>注意：页面级别的计算状态仅在所属的页面有效<% } %>
+*/
+
+export default {
+  name() { return 'LowCode' }
+}`,
+    // 处理方法-有上下文的方法，相当于小程序的methods，可获取 state，computed 等信息
+    [ECodeType.HANDLER_FN]: `/**
+ * <% if (type === 'component') { %>可通过 $comp.handler.xxx 访问这里定义的方法<% } %>
+ * <% if (type === 'page') { %>可通过 $page 获取或修改当前页面的 变量 状态 handler lifecycle 等信息<% } %>
+ * <% if (type === 'page') { %>可通过 app 获取或修改全局应用的 变量 状态 等信息<% } %>
+ * <% if (type === 'page') { %>具体可以console.info 在编辑器Console面板查看更多信息<% } %>
+ * <% if (type === 'page') { %>注意：该方法仅在所属的页面有效<% } %>
+ * 如果需要 async-await，请修改成 export default async function() {}
+ * 帮助文档 https://cloud.tencent.com/document/product/1301/57912
+ **/
+
+/**
+ * @param {Object} event - 事件对象
+ * @param {string} event.type - 事件名
+ * @param {any} event.detail - 事件携带自定义数据
+ *
+ * @param {Object} data
+ * @param {any} data.target - 获取事件传参的数据
+ **/
+export default function({event, data}) {
+
+}`,
+    // 普通模块-没有上下文，无法直接获取 state 信息
+    [ECodeType.NORMAL_MODULE]: `
+/*
+* 函数里面访问：通过 app.common.[name] 访问这里定义的方法或值
+* 函数外面访问：通过 import（如在页面的 handler 引用的例子：import sayHi from '../../common/[name]'）
+*/
+
+export default function sayHi() {
+  console.log('Hi LowCode')
+}
+`,
+    // 样式
+    [ECodeType.STYLE]: `
+  <% if (type !== 'component') { %>
+    /**
+     * 可以使用theme中定义的 mixin 和 定义变量
+     **/
+  <% } else {%>
+    /**
+     * 使用less书写样式
+     * */
+  <% } %>
+<%= type === 'component' ? '&':'' %>.<%= type === 'component' ? type: id%>-class-name {
+  <% if (type === 'app') { %>// 使用样式变量<% } %>
+  // 使用theme中的变量
+  // color: <% if (type === 'app' || type === 'page') { %>@example-primary-color<% } %><% if (type === 'component') { %>blue<% } %>;
+
+  // <%= version[0] === '4' ? '默认 rpx 会转换成 动态cals实现，px/PX/Px 均代表传统一样上的px':'默认 px 会转换成 rem，含大写字母 PX 和 Px 则不会转换' %>
+  // margin-top: 20px;
+  // 使用theme中的混合（mixins）
+  // <%= type === 'component' ? '':'.mixins();' %>
+  // 可写嵌套样式
+  .<%= type === 'component' ? type: id%>-nest-class {
+    // color: #fff;
+    // 使用theme中的混合（mixins）
+    // <%= type === 'component' ? '':'.mixins(green);' %>
+  }
+}
+`,
+    [ECodeType.THEME]: `@example-primary-color: blue;`,
+    [ECodeType.MPCONFIG]: `export default {
+  appJson: {
+    // 小程序接口权限相关设置，可选
+    /* permission: {
+      'scope.userLocation': {
+        desc: '你的位置信息将用于小程序位置接口的效果展示',
+      },
+    }, */
+  },
+}
+  `,
+    [ECodeType.RENDERER]: `/**
+ * 可通过 $page 获取或修改当前页面的 变量 状态 handler lifecycle 等信息
+ * 可通过 app 获取或修改全局应用的 变量 状态 等信息
+ * 具体可以console.info 在编辑器Console面板查看更多信息
+ * 注意：该方法仅在所属的页面有效
+**/
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+export default function(props) {
+  return <div>自定义渲染</div>
+}`,
+};
+export function generateDefaultCode(ctx, type, scope) {
+    const { id, version = '' } = ctx;
+    const data = {
+        type: scope,
+        id,
+        version,
+    };
+    switch (type) {
+        case ECodeType.LIFECYCLE: {
+            let tpl = '';
+            switch (scope) {
+                case 'component':
+                    tpl = TEMPLATES.compLifeCycle;
+                    break;
+                case 'page':
+                    tpl = TEMPLATES.pageLifeCycle;
+                    break;
+                case 'app':
+                    tpl = TEMPLATES.appLifeCycle;
+                    break;
+            }
+            return template(tpl)(data);
+        }
+        default: {
+            const tpl = TEMPLATES[type] || 'epxort default {}';
+            return template(tpl)(data);
+        }
+    }
+}

package/lib/esm/parser/cals/utils/version/common.d.ts

@@ -0,0 +1,5 @@
+export declare function beforeCommonParse(comp: any): void;
+export declare function afterCommonParse(comp: any): void;
+export declare function addFormItem(comp: any, key: any, parent: any, isOnlySlot?: boolean): void;
+export declare function renameRepeatId(json: any): void;
+//# sourceMappingURL=common.d.ts.map

package/lib/esm/parser/cals/utils/version/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../../../src/parser/cals/utils/version/common.ts"],"names":[],"mappings":"AAiBA,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,GAAG,QAE1C;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,GAAG,QAYzC;AA2LD,wBAAgB,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,UAAQ,QAiJ/E;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,GAAG,QAsCvC"}

package/lib/esm/parser/cals/utils/version/common.js

@@ -0,0 +1,375 @@
+import { isComplexComponent, getId, isPlainObject, isEmptyObject, isWeAppId, getComponentChildren, isGsdH5ReactComponent, } from './utils';
+import get from 'lodash/get';
+import set from 'lodash/set';
+import cloneDeep from 'lodash/cloneDeep';
+import merge from 'lodash/merge';
+import { deepParse } from './index';
+import { isEmptyObj } from '../common';
+import { OFFICIAL_COMPONENT_LIB_NAME, OFFICIAL_LIB_KEY } from '../../../../utils';
+export function beforeCommonParse(comp) {
+    addDefaultXIndex(comp);
+}
+export function afterCommonParse(comp) {
+    translateClassList(comp);
+    translateStyleBinding(comp);
+    translateComponentModuleName(comp);
+    translateListeners(comp);
+    translateStyleToCommonStyle(comp);
+    translateSlot(comp);
+}
+// 复合组件 slot 属性配置迁移，从 xProps.data.content.value 里取
+function translateSlot(comp) {
+    if (comp['xComponent'].name === 'Slot' && comp['xProps'].data.content) {
+        comp['xProps'].data.name = {
+            value: comp['xProps'].data.content.value,
+        };
+        delete comp['xProps'].data.content;
+    }
+}
+function translateListeners(comp) {
+    const { xProps } = comp;
+    // 处理click 转 tap
+    if (xProps === null || xProps === void 0 ? void 0 : xProps.listeners) {
+        const { listeners = [] } = xProps;
+        listeners.forEach((listenerItem) => {
+            const { handler } = listenerItem;
+            if (listenerItem.trigger === 'click' || listenerItem.trigger === '__weapps_action_trigger_click') {
+                listenerItem.trigger = 'tap';
+            }
+            if (handler.moduleName === 'gsd-kbone') {
+                handler.moduleName = OFFICIAL_LIB_KEY;
+            }
+        });
+    }
+}
+function translateComponentModuleName(comp) {
+    const { xComponent } = comp;
+    if (xComponent) {
+        const { name } = xComponent;
+        const complexName = isComplexComponent(name);
+        const gsdH5ReactName = isGsdH5ReactComponent(name);
+        if (complexName) {
+            xComponent.moduleName = OFFICIAL_COMPONENT_LIB_NAME;
+            xComponent.name = complexName;
+        }
+        else if (gsdH5ReactName) {
+            xComponent.moduleName = OFFICIAL_LIB_KEY;
+            xComponent.name = gsdH5ReactName;
+        }
+        else {
+            xComponent.moduleName = OFFICIAL_COMPONENT_LIB_NAME;
+        }
+        switch (name) {
+            case 'Wx-map':
+                xComponent.name = 'Map';
+                break;
+            case 'Telephone':
+                xComponent.name = 'telephone';
+            default:
+                break;
+        }
+        if (xComponent.moduleName === OFFICIAL_COMPONENT_LIB_NAME) {
+            switch (xComponent.name) {
+                case 'Cell': {
+                    xComponent.name = 'Item';
+                    let xprops = comp.xProps;
+                    if (xprops === null || xprops === void 0 ? void 0 : xprops.data) {
+                        xprops.data.value = {
+                            value: '',
+                        };
+                        xprops.data.detail = {
+                            value: false,
+                        };
+                        xprops.data.description = {
+                            value: '',
+                        };
+                        if (xprops.data.label) {
+                            xprops.data.title = xprops.data.label;
+                            delete xprops.data.label;
+                        }
+                    }
+                    break;
+                }
+                case 'NavBar': {
+                    let xprops = comp.xProps;
+                    if (xprops === null || xprops === void 0 ? void 0 : xprops.data) {
+                        if (xprops.data.text) {
+                            xprops.data.title = xprops.data.text;
+                            delete xprops.data.text;
+                        }
+                    }
+                    break;
+                }
+                case 'TabBar':
+                case 'Tabbar': {
+                    xComponent.name = 'TabBar';
+                    let xprops = comp.xProps;
+                    if (xprops === null || xprops === void 0 ? void 0 : xprops.data) {
+                        if (xprops.data.itemList) {
+                            let dynamicValue = xprops.data.itemList;
+                            if (dynamicValue.type === 'static' || !dynamicValue.type) {
+                                xprops.data.tabs = {
+                                    value: (dynamicValue.value || []).map((item) => {
+                                        return Object.assign({ name: item.value }, item);
+                                    }),
+                                };
+                            }
+                            else {
+                                xprops.data.tabs = xprops.data.itemList;
+                            }
+                            delete xprops.data.itemList;
+                        }
+                    }
+                    break;
+                }
+            }
+        }
+    }
+}
+function translateClassList(comp) {
+    const { xProps } = comp;
+    if (!xProps) {
+        return;
+    }
+    if (xProps['classNameList']) {
+        // @ts-ignore
+        xProps['classList'] = xProps['classList'] || xProps.classNameList;
+        // @ts-ignore
+        delete xProps.classNameList;
+    }
+    if (xProps['classNameListBind']) {
+        // @ts-ignore
+        xProps['classListBind'] = xProps['classListBind'] || xProps.classNameListBind;
+        // @ts-ignore
+        xProps.classListBind.value = xProps.classListBind.bindDataPath;
+        // @ts-ignore
+        delete xProps['classListBind'].propertyPath;
+        // @ts-ignore
+        delete xProps['classListBind'].bindDataPath;
+        // @ts-ignore
+        delete xProps.classNameListBind;
+    }
+}
+function translateStyleBinding(comp) {
+    const { xProps } = comp;
+    if (!xProps) {
+        return;
+    }
+    if (xProps['styleBind']) {
+        // @ts-ignore
+        if (xProps['styleBind'].bindDataPath) {
+            xProps['styleBind'] = {
+                type: xProps['styleBind'].type,
+                // @ts-ignore
+                value: xProps['styleBind'].bindDataPath,
+            };
+        }
+    }
+}
+function translateStyleToCommonStyle(comp) {
+    const { xProps } = comp;
+    if (xProps === null || xProps === void 0 ? void 0 : xProps.style) {
+        xProps.commonStyle = xProps.commonStyle || {};
+        xProps.commonStyle.self = xProps.commonStyle.self || {};
+        xProps.commonStyle.self = merge(xProps.style, xProps.commonStyle.self);
+        delete xProps.style;
+    }
+}
+function addDefaultXIndex(comp) {
+    const { properties } = comp;
+    if (!properties) {
+        return;
+    }
+    let xIndex = 1;
+    Object.values(properties).map((_comp) => {
+        let comp = _comp;
+        if (comp.xIndex === undefined) {
+            comp.xIndex = xIndex;
+        }
+        else {
+            xIndex = comp.xIndex + 1;
+        }
+    });
+}
+export function addFormItem(comp, key, parent, isOnlySlot = false) {
+    const { properties, xIndex, xProps } = comp;
+    const defaultValue = get(xProps, 'data.defaultValue');
+    if (defaultValue) {
+        set(xProps, 'data.value', defaultValue);
+        delete xProps.data.defaultValue;
+    }
+    const rulesValue = get(xProps, 'data.rules') || {
+        value: [],
+    };
+    if (!rulesValue.type || rulesValue.type === 'static') {
+        rulesValue.value = (rulesValue.value || []).filter((meta) => {
+            return meta && !isEmptyObj(meta);
+        });
+    }
+    if (isPlainObject(rulesValue.value)) {
+        if (isEmptyObject(rulesValue.value)) {
+            rulesValue.value = [];
+        }
+        else {
+            rulesValue.value = [rulesValue.value];
+        }
+    }
+    const layoutValue = get(xProps, 'data.layout') || {
+        value: 'vertical',
+    };
+    const requireValue = get(xProps, 'data.required') || {
+        value: false,
+    };
+    const requiredTextValue = {
+        value: (requireValue === null || requireValue === void 0 ? void 0 : requireValue.value) ? '该项为必填项' : false,
+    };
+    const nameValue = get(xProps, 'data.name') || {
+        value: 'uniqueFormKey',
+    };
+    let labelText = get(xProps, 'data.label.value') || '';
+    let isShowTitleSlot = false;
+    if (properties) {
+        Object.keys(properties).map((subKey) => {
+            if (isWeAppId(subKey)) {
+                delete properties[subKey];
+            }
+            if (subKey === 'label') {
+                const targetLabelSlot = properties[subKey];
+                getComponentChildren(targetLabelSlot).map(([key, item]) => {
+                    labelText = get(item, 'xProps.data.text.value');
+                    const cloneItem = cloneDeep(item);
+                    deepParse(cloneItem, key, comp);
+                    isShowTitleSlot = true;
+                });
+                delete comp.properties.label;
+            }
+        });
+    }
+    const titleSlot = {
+        [getId()]: {
+            xComponent: {
+                moduleName: OFFICIAL_LIB_KEY,
+                name: 'Text',
+            },
+            xProps: {
+                data: {
+                    text: {
+                        value: labelText,
+                    },
+                    decode: {
+                        value: false,
+                    },
+                    selectable: {
+                        value: false,
+                    },
+                },
+                listeners: [],
+            },
+            xIndex: 0,
+        },
+    };
+    try {
+        delete xProps.data.layout;
+        delete xProps.data.required;
+        delete xProps.data.rules;
+        delete xProps.data.requiredText;
+        delete xProps.data.label;
+        delete xProps.data.name;
+    }
+    catch (e) { }
+    if (parent) {
+        if (!parent.xComponent || (parent.xComponent && parent.xComponent.name !== 'FormItem')) {
+            // add FormItem
+            const newFormItemId = getId();
+            // @ts-ignore
+            parent.properties[newFormItemId] = {
+                xComponent: {
+                    moduleName: OFFICIAL_COMPONENT_LIB_NAME,
+                    name: 'FormItem',
+                },
+                // @ts-ignore
+                xProps: {
+                    data: {
+                        name: nameValue,
+                        rules: rulesValue,
+                        layout: layoutValue,
+                        required: requireValue,
+                        requiredMsg: requiredTextValue,
+                        requiredFlag: true,
+                        labelVisible: { value: true },
+                        validateStatus: {
+                            value: 'success',
+                        },
+                        validateTrigger: {
+                            value: 'onChange',
+                        },
+                    },
+                },
+                xIndex,
+                properties: {
+                    labelSlot: {
+                        properties: Object.assign({}, titleSlot),
+                    },
+                    contentSlot: {
+                        properties: {
+                            [key]: comp,
+                        },
+                    },
+                },
+            };
+            try {
+                // 删除原来组件
+                delete parent.properties[key];
+            }
+            catch (e) {
+                console.error('删除组件多余属性失败 parseGsdKboneInput', e, comp);
+            }
+            return;
+        }
+    }
+    delete xProps.data.rules;
+    delete xProps.data.defaultValue;
+    delete xProps.data.layout;
+    delete xProps.data.require;
+}
+export function renameRepeatId(json) {
+    const { pageInstanceList = [] } = json;
+    pageInstanceList.forEach((instance, index) => {
+        const { componentInstances } = instance;
+        const _compIds = {};
+        const comps = [];
+        for (const i in componentInstances) {
+            const comp = componentInstances[i];
+            if (_compIds[i] && i.startsWith('id')) {
+                const newId = getId();
+                componentInstances[newId] = comp;
+                delete componentInstances[i];
+            }
+            else {
+                _compIds[i] = i;
+            }
+            comps.push(comp);
+        }
+        while (true) {
+            const topComp = comps.pop();
+            if (!topComp) {
+                break;
+            }
+            const keys = Object.keys(topComp['properties'] || {});
+            if (keys.length > 0) {
+                keys.forEach((key) => {
+                    const _comp = topComp['properties'][key];
+                    if (_compIds[key] && key.startsWith('id')) {
+                        const newId = getId();
+                        topComp['properties'][newId] = _comp;
+                        delete topComp['properties'][key];
+                    }
+                    else {
+                        _compIds[key] = key;
+                    }
+                    comps.push(_comp);
+                });
+            }
+        }
+    });
+}

package/lib/esm/parser/cals/utils/version/config.d.ts

@@ -0,0 +1,16 @@
+/**
+ 备注：登录 WeApps v2，在任一页面控制台输入以下代码（需要修改相应的分类名称），以获取指定分类的 COMPLEX_COMPONENT_KEYS
+
+fetch(`http://dev.weapps.woa.com/api/compositeComp/list?pageIndex=0&category=${encodeURI('审批系统')}&keyword=&pageSize=500`).then(function(response) {
+  return response.json();
+}).then(function(json) {
+  console.log(JSON.stringify(json.data.rows.map(item => item.name), null, 2))
+});
+
+ */
+export declare const COMPLEX_COMPONENT_KEYS: string[];
+export declare const FORM_COMPONENT_KEYS: string[];
+export declare const GSD_H5_REACT_COMPONENT_KEYS: string[];
+export declare const COMPONENT_SELECTABLEBLOCK_WHITELIST: string[];
+export declare const MODULE_SELECTABLEBLOCK_REGEX: RegExp;
+//# sourceMappingURL=config.d.ts.map

package/lib/esm/parser/cals/utils/version/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../../../src/parser/cals/utils/version/config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAyKH,eAAO,MAAM,sBAAsB,UAMlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAgB/B,CAAC;AAEF,eAAO,MAAM,2BAA2B,UAgDvC,CAAC;AAGF,eAAO,MAAM,mCAAmC,UAA8D,CAAC;AAG/G,eAAO,MAAM,4BAA4B,QAA6B,CAAC"}