@cloudbase/lowcode-builder 1.2.1-alpha.1 → 1.2.2

package/lib/builder/core/index.js

@@ -15,6 +15,7 @@ const mixMode_1 = require("../mp/mixMode");
 const index_2 = require("../h5/index");
 const common_2 = require("../../utils/common");
 const postProcess_1 = require("../../utils/postProcess");
+const cals_1 = require("@cloudbase/cals");
 const net_1 = require("../util/net");
 const pkg = require('../../../package.json');
 async function buildWedaApp({ cals, subAppCalsList = [], dependencies = [], appKey = 'test', runtime = types_1.RUNTIME.NONE, ignoreInstall = false, buildTypeList = [common_1.BuildType.WEB], mode = common_1.WebpackModeType.PRODUCTION, devTool = 'webpack', deployOptions = { mode: types_1.DEPLOY_MODE.PREVIEW }, generateMpType = common_1.GenerateMpType.APP, plugins = [], extraData = {
@@ -58,6 +59,12 @@ async function buildWedaApp({ cals, subAppCalsList = [], dependencies = [], appK
                 ...buildContext,
                 projDir: (output === null || output === void 0 ? void 0 : output.path) || path_1.default.join(appBuildDir, 'mp'),
                 mainAppData: mainAppSerializeData,
+                processCssUnit: ([cals, ...subAppCalsList].find((cals) => {
+                    const FEATURE_MAP = (0, cals_1.parseVersion)(cals.schemaVersion);
+                    return !FEATURE_MAP.defaultDynamicCssUnit;
+                })
+                    ? 'px'
+                    : 'rpx'),
             };
             const result = await (0, index_1.generateWxMp)({
                 weapps: apps,
@@ -70,7 +77,6 @@ async function buildWedaApp({ cals, subAppCalsList = [], dependencies = [], appK
                     resourceAppId,
                 },
                 buildTypeList,
-                isBrowserMpBuilder,
                 ignoreInstall,
             });
             // 如果是混合模式，则将特定的目录复制到工程下

package/lib/builder/h5/material.js

@@ -143,31 +143,3 @@ async function handleNormalMaterial({ dependencies: normalDependencies, material
         };
     }));
 }
-// async function handleCompositeComponent({ dependencies, appBuildDir }) {
-//   console.time('handleCompositeComponent');
-//   const compositeDependencies: IMaterialItem[] = dependencies.filter(
-//     (item) => item.isComposite
-//   );
-//   const materialGroupInfoMap = {};
-//   dependencies.forEach(
-//     (item) =>
-//       (materialGroupInfoMap[item.name] = {
-//         isComposite: item.isComposite,
-//         version: item.version,
-//         entries: item.entries,
-//         schemaVersion: item.schemaVersion,
-//       })
-//   );
-//   const componentsMeta = await getComponentsInfo(
-//     path.join(appBuildDir, 'src'),
-//     dependencies
-//   );
-//   await writeLowCodeFilesForCompositeComp(compositeDependencies, appBuildDir);
-//   await genCompositeComponentLibraries(
-//     compositeDependencies,
-//     appBuildDir,
-//     materialGroupInfoMap,
-//     componentsMeta
-//   );
-//   console.timeEnd('handleCompositeComponent');
-// }

package/lib/builder/mp/BuildContext.d.ts

@@ -17,6 +17,7 @@ export interface IBuildContext {
     miniprogramPlugins?: IMiniprogramPlugin[];
     debugMode?: boolean;
     isBrowserMpBuilder?: boolean;
+    processCssUnit?: 'px' | 'rem' | 'rpx';
     /**
      * 是否是私有化的环境
      */

package/lib/builder/mp/index.d.ts

@@ -2,7 +2,7 @@ import { IWeAppData, IPlugin } from '@cloudbase/lowcode-generator/lib/weapps-cor
 import { IBuildContext } from './BuildContext';
 import { DEPLOY_MODE } from '../../types';
 import { BuildType, IAppUsedComp, IUsedComps } from '../types/common';
-export declare function generateWxMp({ buildContext, weapps, plugins, deployMode, options, buildTypeList, isBrowserMpBuilder, ignoreInstall, }: {
+export declare function generateWxMp({ buildContext, weapps, plugins, deployMode, options, buildTypeList, ignoreInstall, }: {
     buildContext: IBuildContext;
     weapps: IWeAppData[];
     plugins: IPlugin[];
@@ -13,12 +13,11 @@ export declare function generateWxMp({ buildContext, weapps, plugins, deployMode
         isCrossAccount: boolean;
     };
     buildTypeList: BuildType[];
-    isBrowserMpBuilder: boolean;
     ignoreInstall: boolean;
 }): Promise<{
     miniprogramRoot: string;
 }>;
-export declare function writeLowCodeFiles(appData: IWeAppData, outDir: string, ctx: IBuildContext): Promise<void>;
+export declare function writeLowCodeFiles(ctx: IBuildContext, appData: IWeAppData, outDir: string): Promise<void>;
 /**
  * TODO: 与 cals 里的实现进行整合
  * 关键点在于 appUsedComps 分组， 与 generic componen 的实现

package/lib/builder/mp/index.js

@@ -54,9 +54,9 @@ const cals_1 = require("@cloudbase/cals");
 const templateDir = `${config_1.appTemplateDir}/mp/`;
 const em = chalk_1.default.blue.bold;
 const error = chalk_1.default.redBright;
-async function generateWxMp({ buildContext, weapps, plugins, deployMode, options, buildTypeList, isBrowserMpBuilder = false, ignoreInstall = false, }) {
+async function generateWxMp({ buildContext, weapps, plugins, deployMode, options, buildTypeList, ignoreInstall = false, }) {
     var _a;
-    const { appId, projDir, materialLibs: materials, isProduction, mainAppData, domain, isPrivateMode = false, endpointType = '', } = buildContext;
+    const { appId, projDir, materialLibs: materials, isProduction, mainAppData, domain, isPrivateMode = false, endpointType = '', isBrowserMpBuilder = false, } = buildContext;
     const operationLabel = em('Wexin MiniProgram Generated');
     console.time(operationLabel);
     console.log(`Generating ${em('Wexin MiniProgram')} to ${projDir}`);
@@ -72,10 +72,10 @@ async function generateWxMp({ buildContext, weapps, plugins, deployMode, options
             'project.config.json': { content: projConfig },
         };
         console.log(`Generating ${em('project')} files`);
-        await (0, generateFiles_1.default)(projectFileData, templateDir, projDir, buildContext);
+        await (0, generateFiles_1.default)(buildContext, projectFileData, templateDir, projDir);
     }
     // #2 生成主包
-    await generatePkg(mainAppData, path_1.default.join(projDir, '/'), { ...buildContext, rootPath: mainAppData.rootPath }, pageConfigs[0]);
+    await generatePkg({ ...buildContext, rootPath: mainAppData.rootPath }, mainAppData, path_1.default.join(projDir, '/'), pageConfigs[0]);
     const projectConfigJsonPath = path_1.default.join(projDir, mainAppData.rootPath || '', 'project.config.json');
     let projectConfigJson = await fs.readJSON(projectConfigJsonPath);
     const miniprogramRoot = path_1.default.join(projDir, projectConfigJson.miniprogramRoot || '/');
@@ -155,7 +155,7 @@ async function generateWxMp({ buildContext, weapps, plugins, deployMode, options
         };
     }
     console.log(`Generating ${em('miniprogramRoot')} files`);
-    await (0, generateFiles_1.default)(appFileData, templateDir, miniprogramRoot, buildContext);
+    await (0, generateFiles_1.default)(buildContext, appFileData, templateDir, miniprogramRoot);
     // 若项目目录与小程序根目录不同，则拷贝素材到小程序根目录
     if (miniprogramRoot !== path_1.default.join(projDir, '/') && fs.existsSync(path_1.default.join(projDir, config_1.materialsDirName))) {
         console.log(`Move ${em(config_1.materialsDirName)} from` + `${projDir} to ${miniprogramRoot}`);
@@ -187,7 +187,7 @@ async function generateWxMp({ buildContext, weapps, plugins, deployMode, options
             },
         };
         console.log(`Generating ${em('datasources')} files`);
-        await (0, generateFiles_1.default)(datasourceFileData, templateDir, miniprogramRoot, buildContext);
+        await (0, generateFiles_1.default)(buildContext, datasourceFileData, templateDir, miniprogramRoot);
     }
     // 生成子包
     await Promise.all(weapps.map(async (app, index) => {
@@ -200,18 +200,18 @@ async function generateWxMp({ buildContext, weapps, plugins, deployMode, options
                 ...buildContext,
                 rootPath: app.rootPath,
             };
-            await generatePkg(app, subpackageRootPath, subpackageBuildCtx, pageConfigs[index]);
+            await generatePkg(subpackageBuildCtx, app, subpackageRootPath, pageConfigs[index]);
             await generateFramework(app, subpackageRootPath, subpackageBuildCtx);
             // 生成package.json
             let packageJsonPath = path_1.default.join(subpackageRootPath, 'package.json');
             if (!fs.existsSync(packageJsonPath)) {
-                await (0, generateFiles_1.default)({
+                await (0, generateFiles_1.default)(buildContext, {
                     'package.json': {
                         appId,
                         importJSSDK: endpointType === 'tcb-api',
                         extraDeps: resolveNpmDeps(),
                     },
-                }, templateDir, subpackageRootPath, buildContext);
+                }, templateDir, subpackageRootPath);
             }
         }
     }));
@@ -274,9 +274,10 @@ async function generateWxMp({ buildContext, weapps, plugins, deployMode, options
     }
 }
 exports.generateWxMp = generateWxMp;
-async function generatePkg(weapp, appRoot, ctx, pageConfigs) {
+async function generatePkg(ctx, weapp, appRoot, pageConfigs) {
     const wxmlDataPrefix = (0, mp_1.getWxmlDataPrefix)(!ctx.isProduction);
     console.log(`Generating ${em(weapp.rootPath ? 'subApp' : 'app')} to ${appRoot}`);
+    const { processCssUnit = 'rpx' } = ctx;
     if (weapp.mpPkgUrl) {
         // 清空历史文件，使用zip覆盖
         console.log(`Removing ${appRoot}`);
@@ -302,12 +303,12 @@ async function generatePkg(weapp, appRoot, ctx, pageConfigs) {
             const pageFileData = {
                 [`api.js|api.js`]: {},
                 [`index.js|${pageFileName}.js`]: {
-                    widgetProps: (0, util_2.createWidgetProps)(page.componentInstances, ctx),
+                    widgetProps: (0, util_2.createWidgetProps)(ctx, page.componentInstances),
                     pageUUID: rootPath ? `${rootPath}/${page.id}` : page.id,
                     pageName: page.id,
                     pageSource: page.data.src || '',
-                    eventHanlders: (0, util_2.createEventHanlders)(page.componentInstances, 'this', ctx, page),
-                    dataBinds: (0, util_2.createDataBinds)(page.componentInstances, ctx),
+                    eventHanlders: (0, util_2.createEventHanlders)(ctx, page.componentInstances, 'this', page),
+                    dataBinds: (0, util_2.createDataBinds)(ctx, page.componentInstances),
                     pageAttributes: {
                         ...(((_a = page.data) === null || _a === void 0 ? void 0 : _a.appShareMessage) ? { appShareMessage: page.data.appShareMessage.value } : {}),
                     },
@@ -330,17 +331,16 @@ async function generatePkg(weapp, appRoot, ctx, pageConfigs) {
                         ? `@import "${path_1.default.posix.relative(`/${rootPath}/pages/${page.id}`, '/lowcode')}/style.wxss";`
                         : '',
                     content: (0, weapps_core_1.toCssText)((0, cals_1.processCommonStyle2CSSProperties)(page.commonStyle, {
-                        toRem: false,
-                        toRpx: true,
+                        defaultUnit: processCssUnit,
                     }), 'page'),
                     pageWxss: importor.styles.length ? `@import "../../lowcode/${page.id}/style.wxss"` : '',
                 },
             };
             // Generating file by template and data
-            await (0, generateFiles_1.default)(pageFileData, `${templateDir}/page`, path_1.default.join(appRoot, 'pages', page.id), ctx);
+            await (0, generateFiles_1.default)(ctx, pageFileData, `${templateDir}/page`, path_1.default.join(appRoot, 'pages', page.id));
         }));
         // #3 writing lowcode files
-        await writeLowCodeFiles(weapp, appRoot, ctx);
+        await writeLowCodeFiles(ctx, weapp, appRoot);
     }
 }
 async function generateFramework(appData, outDir, ctx) {
@@ -408,9 +408,9 @@ async function generateFramework(appData, outDir, ctx) {
         }
     }
     console.log('Generate app framework');
-    await (0, generateFiles_1.default)(fileData, templateDir, outDir, ctx);
+    await (0, generateFiles_1.default)(ctx, fileData, templateDir, outDir);
 }
-async function writeLowCodeFiles(appData, outDir, ctx) {
+async function writeLowCodeFiles(ctx, appData, outDir) {
     console.log(`Writing ${em('lowcode')} files:`);
     const lowcodeRootDir = path_1.default.join(outDir, 'lowcode');
     const lowCodes = (0, cals_1.processRuntimeCodeResources)({ id: 'global' }, appData.lowCodes || appData.codeModules, 'app');
@@ -420,7 +420,7 @@ async function writeLowCodeFiles(appData, outDir, ctx) {
         await Promise.all(lowCodes
             .filter((mod) => mod.type !== cals_1.ECodeType.RENDERER)
             .map((m) => {
-            (0, lowcode_1.writeCode2file)(m, lowcodeRootDir, { appDir: outDir }, themeStyle.code);
+            (0, lowcode_1.writeCode2file)(ctx, m, lowcodeRootDir, { appDir: outDir }, themeStyle.code);
         }));
     }
     await Promise.all((0, weapps_core_1.loopDealWithFn)(appData.pageInstanceList, async (page) => {
@@ -428,7 +428,7 @@ async function writeLowCodeFiles(appData, outDir, ctx) {
         await codes
             .filter((mod) => mod.type !== cals_1.ECodeType.RENDERER)
             .forEach((m) => {
-            (0, lowcode_1.writeCode2file)(m, lowcodeRootDir, { pageId: page.id, appDir: outDir }, themeStyle.code, ctx);
+            (0, lowcode_1.writeCode2file)(ctx, m, lowcodeRootDir, { pageId: page.id, appDir: outDir }, themeStyle.code);
         });
     }));
 }

package/lib/builder/mp/lowcode.d.ts

@@ -1,9 +1,9 @@
 import { IWeAppCode, ICompositedComponent } from '@cloudbase/lowcode-generator/lib/weapps-core';
 import { IBuildContext } from './BuildContext';
-export declare function writeCode2file(mod: IWeAppCode, lowcodeRootDir: string, opts?: {
+export declare function writeCode2file(ctx: IBuildContext, mod: IWeAppCode, lowcodeRootDir: string, opts?: {
     pageId?: string;
     appDir?: string;
     comp?: ICompositedComponent;
-}, themeCode?: '', ctx?: IBuildContext): Promise<void>;
+}, themeCode?: ''): Promise<void>;
 export declare function handle$page(code: string): string;
 export declare function handle$comp(code: string): string;

package/lib/builder/mp/lowcode.js

@@ -9,7 +9,7 @@ const weapps_core_1 = require("@cloudbase/lowcode-generator/lib/weapps-core");
 const style_1 = require("@cloudbase/lowcode-generator/lib/generator/util/style");
 const generateFiles_1 = require("../util/generateFiles");
 const cals_1 = require("@cloudbase/cals");
-async function writeCode2file(mod, lowcodeRootDir, opts = {}, themeCode, ctx) {
+async function writeCode2file(ctx, mod, lowcodeRootDir, opts = {}, themeCode) {
     const { pageId = 'global', appDir, comp } = opts;
     const file = path_1.default.join(lowcodeRootDir, (0, weapps_core_1.getCodeModuleFilePath)(pageId || 'global', mod, { style: '.wxss' }));
     let { code } = mod;
@@ -40,7 +40,7 @@ async function writeCode2file(mod, lowcodeRootDir, opts = {}, themeCode, ctx) {
             code = `.${(0, weapps_core_1.getCompositedComponentClass)(comp)} {\n${code}\n}`;
         }
         try {
-            code = await (0, style_1.processLessToRpx)(`${code}`);
+            code = await (0, style_1.processMpLess)(`${code}`, ctx.processCssUnit);
         }
         catch (e) {
             console.error('processLess Error', e);

package/lib/builder/mp/materials.js

@@ -172,11 +172,12 @@ async function installMaterials(projDir, usedComps, weapps, ctx) {
         console.log(`Generate composited library ${lib.name}`);
         await (0, util_2.writeLibCommonRes2file)(lib, path.join(ctx.projDir, config_1.materialsDirName, lib.name, 'libCommonRes'));
         await Promise.all(lib.components.map(async (cmp) => {
-            return generateCompositeComponent(cmp, {
+            return generateCompositeComponent({
                 ...ctx,
+                processCssUnit: 'rpx',
                 // 只生成在主目录中，减少冗余
                 // rootPath: app.rootPath || '', // 主包是没有 rootPath 的
-            }, lib.compLibCommonResource);
+            }, cmp, lib.compLibCommonResource);
         }));
     }));
 }
@@ -231,18 +232,22 @@ async function downloadMaterial(zipUrl, dstFolder, isBrowser = false) {
         return;
     await (0, net_1.downloadZip)(zipUrl, dstFolder, isBrowser);
 }
-async function generateCompositeComponent(compositedComp, ctx, compLibCommonResource) {
+async function generateCompositeComponent(ctx, compositedComp, compLibCommonResource) {
+    const compositeCtx = {
+        ...ctx,
+        isPage: false,
+    };
     const { materialName } = compositedComp;
-    const outDir = path.join(ctx.projDir, ctx.rootPath || '', // 混合模式下，可能会有 rootPath
+    const outDir = path.join(compositeCtx.projDir, compositeCtx.rootPath || '', // 混合模式下，可能会有 rootPath
     config_1.materialsDirName, materialName, compositedComp.name);
     const LOWCODE_DIR_NAME = 'lowcode';
     console.log(`Generating composited component ${materialName}:${compositedComp.name} to ${outDir}`);
-    const wxmlDataPrefix = (0, mp_1.getWxmlDataPrefix)(!ctx.isProduction);
+    const wxmlDataPrefix = (0, mp_1.getWxmlDataPrefix)(!compositeCtx.isProduction);
     // # Generating page
     const usingComponents = {};
     const componentGenerics = {};
     const cmpContainer = Object.values(compositedComp.componentInstances)[0];
-    const wxml = (0, wxml_1.generateWxml)(compositedComp.componentInstances, `Component ${materialName}:${compositedComp.name}`, wxmlDataPrefix, { ...ctx, isPage: false }, usingComponents, componentGenerics, (cmp, node) => {
+    const wxml = (0, wxml_1.generateWxml)(compositedComp.componentInstances, `Component ${materialName}:${compositedComp.name}`, wxmlDataPrefix, compositeCtx, usingComponents, componentGenerics, (cmp, node) => {
         if (cmp === cmpContainer) {
             // Set className & style passed from parent for root component
             const { attributes } = node;
@@ -279,15 +284,15 @@ async function generateCompositeComponent(compositedComp, ctx, compLibCommonReso
             handlers: compositedComp.lowCodes
                 .filter((m) => m.type === cals_1.ECodeType.HANDLER_FN && m.name !== cals_1.ECodeName.PLACEHOLDER)
                 .map((m) => m.name),
-            eventHandlers: (0, util_3.createEventHanlders)(compositedComp.componentInstances, weapps_core_1.COMPONENT_API_PREFIX, ctx),
+            eventHandlers: (0, util_3.createEventHanlders)(compositeCtx, compositedComp.componentInstances, weapps_core_1.COMPONENT_API_PREFIX),
             // protectEventKeys: builtinMpEvents,
             emitEvents: compositedComp.emitEvents.map((evt) => evt.eventName),
-            widgetProps: (0, util_3.createWidgetProps)(compositedComp.componentInstances, ctx),
+            widgetProps: (0, util_3.createWidgetProps)(compositeCtx, compositedComp.componentInstances),
             compApi: weapps_core_1.COMPONENT_API_PREFIX,
             jsonSchemaType2jsClass: mp_1.jsonSchemaType2jsClass,
             key: `${compositedComp.materialName}:${compositedComp.name}`,
-            dataBinds: (0, util_3.createDataBinds)(compositedComp.componentInstances, ctx),
-            debug: !ctx.isProduction,
+            dataBinds: (0, util_3.createDataBinds)(compositeCtx, compositedComp.componentInstances),
+            debug: !compositeCtx.isProduction,
             stringifyObj: util_1.inspect,
             // dataPropNames: wxmlDataPrefix,
             formEvents: Object.keys(formEvents).length > 0 ? formEvents : null,
@@ -305,7 +310,7 @@ async function generateCompositeComponent(compositedComp, ctx, compLibCommonReso
         },
     };
     // Generating file by template and data
-    await (0, generateFiles_1.default)(pageFileData, `${templateDir}/component`, outDir, ctx);
+    await (0, generateFiles_1.default)(compositeCtx, pageFileData, `${templateDir}/component`, outDir);
     // #3 writing lowcode files
     /**
      * 低码没有开放 index 类别，直接去掉
@@ -333,7 +338,7 @@ async function generateCompositeComponent(compositedComp, ctx, compLibCommonReso
         if (mod.name === 'index') {
             return;
         }
-        return (0, lowcode_1.writeCode2file)(mod, path.join(outDir, LOWCODE_DIR_NAME), { comp: compositedComp }, themeCode, ctx);
+        return (0, lowcode_1.writeCode2file)(compositeCtx, mod, path.join(outDir, LOWCODE_DIR_NAME), { comp: compositedComp }, themeCode);
     });
     // await writeLowCodeFiles(weapp, appRoot)
     // await generateFramework(weapp, appRoot)

package/lib/builder/mp/util.d.ts

@@ -1,18 +1,17 @@
 import { IDynamicValue, IWeAppComponentInstance, ICompositedComponent, IWeAppPage } from '@cloudbase/lowcode-generator/lib/weapps-core';
 import { IBuildContext } from './BuildContext';
-export declare function extractWidgetProps(props: Required<IWeAppComponentInstance>['xProps'], compInfo: ICompositedComponent): any;
 export declare function generatedDynamicData(data: {
     [key: string]: IDynamicValue;
 }, compInfo?: ICompositedComponent): {
     staticProps: {};
     boundProps: {};
 };
-export declare function createWidgetProps(widgets: {
+export declare function createWidgetProps(ctx: IBuildContext, widgets: {
     [key: string]: IWeAppComponentInstance;
-}, ctx: IBuildContext): {};
-export declare function createEventHanlders(widgets: {
+}): {};
+export declare function createEventHanlders(ctx: IBuildContext, widgets: {
     [key: string]: IWeAppComponentInstance;
-}, componentApi: string, ctx: IBuildContext, page?: IWeAppPage): {};
-export declare function createDataBinds(widgets: {
+}, componentApi: string, page?: IWeAppPage): {};
+export declare function createDataBinds(ctx: IBuildContext, widgets: {
     [key: string]: IWeAppComponentInstance;
-}, ctx: IBuildContext): {};
+}): {};

package/lib/builder/mp/util.js

@@ -1,19 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createDataBinds = exports.createEventHanlders = exports.createWidgetProps = exports.generatedDynamicData = exports.extractWidgetProps = void 0;
+exports.createDataBinds = exports.createEventHanlders = exports.createWidgetProps = exports.generatedDynamicData = void 0;
 const weapps_core_1 = require("@cloudbase/lowcode-generator/lib/weapps-core");
 const lowcode_generator_1 = require("@cloudbase/lowcode-generator");
 const weapp_1 = require("@cloudbase/lowcode-generator/lib/generator/util/weapp");
 const wxml_1 = require("./wxml");
 const mp_1 = require("@cloudbase/lowcode-generator/lib/generator/config/mp");
 const cals_1 = require("@cloudbase/cals");
-function extractWidgetProps(props, compInfo) {
+function extractWidgetProps(props, compInfo, processCssUnit = 'rpx') {
     var _a, _b;
     const { classList } = props;
     const staticProps = {
         style: (0, cals_1.processCommonStyle2CSSProperties)(props.commonStyle, {
-            toRpx: true,
-            toRem: false,
+            defaultUnit: processCssUnit,
         }),
         classList: classList || [],
     };
@@ -24,7 +23,6 @@ function extractWidgetProps(props, compInfo) {
     }
     return staticProps;
 }
-exports.extractWidgetProps = extractWidgetProps;
 function generatedDynamicData(data, compInfo) {
     const staticProps = {};
     const boundProps = {};
@@ -108,7 +106,7 @@ function generateDataBindMeta(bind) {
     }
     return { imports, expression: expr };
 }
-function createWidgetProps(widgets, ctx) {
+function createWidgetProps(ctx, widgets) {
     const widgetProps = {};
     (0, weapp_1.walkThroughWidgets)(widgets, (id, widget, parentId) => {
         var _a;
@@ -129,7 +127,7 @@ function createWidgetProps(widgets, ctx) {
             console.error('Component not found in lib', widegetComp);
             return;
         }
-        widgetProps[id] = extractWidgetProps(xProps, widegetComp);
+        widgetProps[id] = extractWidgetProps(xProps, widegetComp, ctx.processCssUnit);
         widgetProps[id]._parentId = parentId;
         widgetProps[id]._order = widget.xIndex;
         widgetProps[id].widgetType = `${xComponent.moduleName}:${xComponent.name}`;
@@ -137,7 +135,7 @@ function createWidgetProps(widgets, ctx) {
     return widgetProps;
 }
 exports.createWidgetProps = createWidgetProps;
-function createEventHanlders(widgets, componentApi, ctx, page) {
+function createEventHanlders(ctx, widgets, componentApi, page) {
     let eventHandlers = {};
     const { listeners: pageListeners = [], id: pageId = '' } = page || {};
     (0, weapp_1.walkThroughWidgets)(widgets, (id, widget, parentId) => {
@@ -240,8 +238,9 @@ function getListenersHandlers(listeners, id, componentApi) {
     });
     return eventHandlers;
 }
-function createDataBinds(widgets, ctx) {
+function createDataBinds(ctx, widgets) {
     const dataBinds = {};
+    const { processCssUnit = 'rpx' } = ctx;
     (0, weapp_1.walkThroughWidgets)(widgets, (id, widget, parentId) => {
         var _a;
         const { xComponent } = widget;
@@ -268,13 +267,14 @@ function createDataBinds(widgets, ctx) {
         if (classList) {
             dataBinds[id].classList = {
                 ...classList,
-                expression: `concatClassList(${classList === null || classList === void 0 ? void 0 : classList.expression}, widgetProps.${id}.classList)`,
+                expression: `concatClassList(\n${classList === null || classList === void 0 ? void 0 : classList.expression}\n, widgetProps.${id}.classList)`,
             };
         }
         if (style) {
+            const styleExpression = `{...widgetProps.${id}.style, ...(\n${style === null || style === void 0 ? void 0 : style.expression}\n)}`;
             dataBinds[id].style = {
                 ...style,
-                expression: `px2rpx({...widgetProps.${id}.style, ...(${style === null || style === void 0 ? void 0 : style.expression})})`,
+                expression: processCssUnit === 'rpx' ? `px2rpx(${styleExpression})` : styleExpression,
             };
         }
         if (Object.keys(dataBinds[id]).length === 0) {

package/lib/builder/service/webpack.js

@@ -507,7 +507,6 @@ async function installDependencies(targetDir, options = {}) {
     if (installprocess.status) {
         throw new Error(`安装依赖失败 ${installprocess.error || ''}`);
     }
-    console.log('fixNodeModules(targetDir, options?.fixNodeModulesMap)');
     fixNodeModules(targetDir, options === null || options === void 0 ? void 0 : options.fixNodeModulesMap);
     try {
         await fs_extra_1.default.remove(path_1.default.join(path_1.default.join(targetDir, 'package-lock.json')));

package/lib/builder/util/generateFiles.d.ts

@@ -2,7 +2,7 @@
 import { IBuildContext } from '../mp/BuildContext';
 import { OutputType } from 'jszip';
 export declare const generatedFileContents: {};
-export default function generateFiles(appFileData: any, srcDir: string, dstDir: string, ctx: IBuildContext): Promise<string[]>;
+export default function generateFiles(ctx: IBuildContext, appFileData: any, srcDir: string, dstDir: string): Promise<string[]>;
 export declare function writeFile(outFile: string, content: string): Promise<boolean>;
 export declare function removeFile(file: string): void;
 /**

package/lib/builder/util/generateFiles.js

@@ -35,7 +35,7 @@ const glob_1 = __importDefault(require("glob"));
 const jszip_1 = __importDefault(require("jszip"));
 const buffer_1 = require("buffer");
 exports.generatedFileContents = {}; // generated files for incrmental build
-async function generateFiles(appFileData, srcDir, dstDir, ctx) {
+async function generateFiles(ctx, appFileData, srcDir, dstDir) {
     const filesGenerated = [];
     // Generating file by template and data
     for (const file in appFileData) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/lowcode-builder",
-  "version": "1.2.1-alpha.1",
+  "version": "1.2.2",
   "description": "云开发 Tencent CloudBase Framework Low Code Plugin，将低码配置生成完整项目并一键部署云开发资源。",
   "author": "yhsunshining@gmail.com",
   "homepage": "https://github.com/TencentCloudBase/cloudbase-framework#readme",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@cloudbase/cals": "^0.5.2",
-    "@cloudbase/lowcode-generator": "1.2.1-alpha.0",
+    "@cloudbase/lowcode-generator": "^1.2.2",
     "axios": "^0.21.0",
     "browserfs": "^1.4.3",
     "browserify-zlib": "^0.2.0",

package/template/html/index.html.ejs

@@ -475,7 +475,7 @@
       crossorigin
       src="<%=
         cdnEndpoints.cdngo
-      %>/lcap/lcap-resource-cdngo/-/0.1.4/_files/static/weda-render/main.90a1845eb61a012b3d66.bundle.js"
+      %>/lcap/lcap-resource-cdngo/-/0.1.4/_files/static/weda-render/main.278e23310078ecd6e0a8.bundle.js"
     ></script>
   </body>
 </html>

package/template/mp/common/util.js

@@ -44,10 +44,16 @@ export function generateDataContext(widget) {
 }
 
 /**
- *
  * @param evtListeners
+ * @param [options]
  */
-export function createEventHandlers(evtListeners) {
+export function createEventHandlers(
+  evtListeners,
+  options = {
+    looseError: false,
+  },
+) {
+  const { looseError = false } = options;
   const evtHandlers = {};
   for (const name in evtListeners) {
     const listeners = evtListeners[name];
@@ -60,45 +66,47 @@ export function createEventHandlers(evtListeners) {
       event.currentTarget = currentTarget;
       const [prefix = ''] = name.split('$');
       // The page event handler
-      const { lists = [], itemsById = {} } = !!currentTarget && findForItemsOfWidget(currentTarget) || {}
-      const dataContext = untracked(() => generateDataContext(currentTarget))
+      const { lists = [], itemsById = {} } = (!!currentTarget && findForItemsOfWidget(currentTarget)) || {};
+      const dataContext = untracked(() => generateDataContext(currentTarget));
 
-      listeners.forEach(async l => {
+      listeners.forEach(async (l) => {
         let { data = {}, boundData = {} } = l;
         data = { ...data };
         try {
           for (const k in boundData) {
-            set(data, k, boundData[k].call(owner, owner, lists, itemsById, event, dataContext))
+            set(data, k, boundData[k].call(owner, owner, lists, itemsById, event, dataContext));
           }
           let res = await l.handler.call(owner, { event, lists, forItems: itemsById, data });
           let eventName = prefix && l.key ? `${prefix}$${l.key}_success` : '';
-          self[eventName] && self[eventName]({
-            ...event,
-            detail: res
-          });
+          self[eventName] &&
+            self[eventName]({
+              ...event,
+              detail: res,
+            });
         } catch (e) {
           let eventName = l.key ? `${prefix}$${l.key}_fail` : '';
           if (self[eventName]) {
             console.error(`事件响应失败`, e);
             await self[eventName]({
               ...event,
-              detail: e
+              detail: e,
             });
           } else {
-            app.showToast({
-              icon: 'error',
-              title: `事件响应失败`
-            });
+            if (!looseError) {
+              app.showToast({
+                icon: 'error',
+                title: `事件响应失败`,
+              });
+            }
             throw e;
           }
         }
-      })
-    }
+      });
+    };
   }
 
-  return evtHandlers
+  return evtHandlers;
 }
-
 export function getDeep(target, key, keySeparator = '.') {
   if (key == null) {
     return target
@@ -290,24 +298,21 @@ async function getAccessPermission(app, appId, pageId) {
     return _AUTH_CACHE_MAP[cacheKey];
   }
 
-  let isAccess = false;
-  try {
-    const res = await app.cloud.callWedaApi({
-      action: 'DescribeResourcesPermission',
-      data: {
-        ResourceType: `<%= isAdminPortal? 'modelApp' : 'app'%>`,
-        ResourceIdList: [cacheKey],
-        AppResourceId: appId,
-      },
-    });
-    if (Array.isArray(res) && res.length > 0) {
-      isAccess = !!res[0].IsAccess;
-    }
+  const res = await app.cloud.callWedaApi({
+    action: 'DescribeResourcesPermission',
+    data: {
+      ResourceType: `<%= isAdminPortal? 'modelApp' : 'app'%>`,
+      ResourceIdList: [cacheKey],
+      AppResourceId: appId,
+    },
+  });
+  if (Array.isArray(res) && res.length > 0) {
+    const isAccess = !!res[0].IsAccess;
     _AUTH_CACHE_MAP[cacheKey] = isAccess;
-  } catch (e) {
-    console.warn('getAccessPermission', e);
+    return isAccess;
+  } else {
+    throw new Error(`鉴权接口返回参数不正确 - ${JSON.stringify(res)}`);
   }
-  return isAccess
 }
 
 export async function checkAnonymous() {
@@ -325,6 +330,16 @@ export async function checkAnonymous() {
   return isAnonymous;
 }
 
+export function formatErrorMsg(e) {
+  let msg = e?.errMsg || e?.error_description || e?.message;
+  const uri = e?.error_uri;
+  msg = `${msg}${uri ? '-' + uri : ''}`;
+  if (msg.startsWith('request:fail')) {
+    msg = `网络故障, 请检查本地网络连接是否正常(${msg})`;
+  }
+  return msg;
+}
+
 /**
  * 检查页面权限
  **/
@@ -339,31 +354,40 @@ export async function checkAuth(app, appId, $page) {
   if (loginPage) {
     requestList.push(getAuthConfig(app));
   }
-  const [isAccess, authConfig] = await Promise.all(requestList);
-  app.hideNavigationBarLoading();
+  try {
+    const [isAccess, authConfig] = await Promise.all(requestList);
+    app.hideNavigationBarLoading();
 
-  const isAnonymousUser = await checkAnonymous();
+    const isAnonymousUser = await checkAnonymous();
 
-  if (!isAccess) {
-    if (isAnonymousUser && loginPage && (authConfig.NeedLogin || authConfig.RejectStrategy == 'to_login')) {
-      redirectToLogin($page);
-    } else {
-      app.showToast({
-        title: '页面无访问权限',
-        icon: 'error',
-      });
-    }
-  } else if (loginPage && authConfig.NeedLogin) {
-    // 此分支逻辑本不应该前端判断是否登录，历史原因后端短期内搞不定，后续后端优化后删除
-    try {
-      if (isAnonymousUser) {
+    if (!isAccess) {
+      if (isAnonymousUser && loginPage && (authConfig.NeedLogin || authConfig.RejectStrategy == 'to_login')) {
+        redirectToLogin($page);
+      } else {
+        app.showToast({
+          title: '页面无访问权限',
+          icon: 'error',
+        });
+      }
+    } else if (loginPage && authConfig.NeedLogin) {
+      // 此分支逻辑本不应该前端判断是否登录，历史原因后端短期内搞不定，后续后端优化后删除
+      try {
+        if (isAnonymousUser) {
+          redirectToLogin($page);
+        }
+      } catch (e) {
         redirectToLogin($page);
       }
-    } catch (e) {
-      redirectToLogin($page);
     }
+    return isAccess;
+  } catch (e) {
+    app.showModal({
+      title: '页面鉴权失败',
+      content: formatErrorMsg(e),
+      showCancel: false,
+    });
+    return false;
   }
-  return isAccess;
 }
 
 export function redirectToLogin(currentPage) {
@@ -441,9 +465,8 @@ async function getGeneralOptions(optionName) {
 
 export function getMpEventHandlerName(widgetId, evtName, modifier = {}) {
   // Only builtin events have will bubble
-  return `on${widgetId}$${evtName.replace(/\./g, '_')}${modifier.isCapturePhase ? '$cap' : ''}${
-    modifier.noPropagation ? '$cat' : ''
-  }`;
+  return `on${widgetId}$${evtName.replace(/\./g, '_')}${modifier.isCapturePhase ? '$cap' : ''}${modifier.noPropagation ? '$cat' : ''
+    }`;
 }
 
 function isPlainObject(src) {

package/template/mp/common/weapp-component.js

@@ -122,7 +122,7 @@ export function createComponent(key, behaviors, properties, events, handler, dat
     },
 
     methods: {
-      ...createEventHandlers(evtListeners),
+      ...createEventHandlers(evtListeners, { looseError: true }),
       ...mergeRenderer,
       getWeAppInst() {
         const $comp = this.$WEAPPS_COMP

package/template/package.json

@@ -55,8 +55,8 @@
     "html-webpack-plugin": "^3.2.0",
     "ts-loader": "^8.3.0",
     "typescript": "^4.4.4",
-    "vue-loader": "14",
-    "vue-template-compiler": "^2.6.14",
+    "vue-loader": "15.9.8",
+    "vue-template-compiler": "2.6.14",
     "webpack": "^4.41.4",
     "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^3.11.0"

package/template/webpack/web.prod.js

@@ -5,6 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader');
 const themeVars = require('./themeVars');
 const getCSSModuleLocalIdent = require('./getCSSModuleLocalIdent');
 const HappyPack = require('happypack');
@@ -78,26 +79,6 @@ module.exports = function (options) {
   };
 
   let plugins = [
-    new HappyPack({
-      id: 'vue',
-      cache: true,
-      verbose: true,
-      loaders: [
-        babelLoader,
-        typescriptLoader,
-        {
-          loader: 'vue-loader',
-          options: {
-            threadMode: true,
-            loaders: {
-              js: [babelLoader],
-              ts: [babelLoader, typescriptLoader],
-            },
-          },
-        },
-      ],
-      threadPool: happyThreadPool,
-    }),
     new HappyPack({
       id: TS_LOADER_ID,
       loaders: [babelLoader, typescriptLoader],
@@ -145,6 +126,7 @@ module.exports = function (options) {
       SSR: false,
       WEBPACK_ENV: 'production',
     }),
+    new VueLoaderPlugin(),
   ];
 
   const commonCSSLoaders = [
@@ -159,24 +141,6 @@ module.exports = function (options) {
         importLoaders: 2,
       },
     },
-    {
-      loader: 'postcss-loader',
-      options: {
-        postcssOptions: {
-          plugins: [
-            [
-              'postcss-pxtorem',
-              {
-                rootValue: 14,
-                propList: ['*'],
-                // todo
-                selectorBlackList: ['.weui-picker__indicator'],
-              },
-            ],
-          ],
-        },
-      },
-    },
   ];
 
   return {
@@ -206,7 +170,7 @@ module.exports = function (options) {
       rules: [
         {
           test: /\.vue$/,
-          loader: 'happypack/loader?id=vue',
+          loader: require.resolve('vue-loader'),
         },
         {
           test: /\.tsx?$/,