@zakijs/plugin-compiler-alipay
Version:
mor complier plugin for alipay mini program
336 lines • 12.5 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const utils_1 = require("@morjs/utils");
const path_1 = __importDefault(require("path"));
const constants_1 = require("../constants");
/**
* 转换 配置 函数
*/
function transform(config, rules, options) {
const props = Object.keys(config);
const next = { ...config };
// 遍历配置并转换, 配置中如已有转换之后的值, 则优先使用用户配置的值
for (const prop of props) {
if (prop in rules) {
const originValue = config[prop];
const propRule = rules[prop];
// propRule 为 字符串代表直接重命名
if (typeof propRule === 'string') {
next[propRule] = next[propRule] == null ? originValue : next[propRule];
if (prop !== propRule)
delete next[prop];
}
// propRule 中的 to 为字符串时
// fn 的结果直接覆盖新的属性
else if (typeof propRule.to === 'string') {
next[propRule.to] = propRule.fn(originValue, next, options);
if (prop !== propRule.to)
delete next[prop];
}
// propRule 中的 to 不存在时
// fn 返回对象
else {
const record = propRule.fn(originValue, next, options);
for (const k in record) {
next[k] = next[k] == null ? record[k] : next[k];
}
if (!(prop in record))
delete next[prop];
}
}
}
return next;
}
/**
* ================================
* 以下为 支付宝转其他小程序配置映射 👇🏻
* ================================
*/
const WINDOW_RULES_TO_OTHER = {
defaultTitle: 'navigationBarTitleText',
transparentTitle: {
to: null,
fn: (value, config, options) => {
var _a;
// 针对字节转端单独适配
if (((_a = options === null || options === void 0 ? void 0 : options.userConfig) === null || _a === void 0 ? void 0 : _a.target) === 'bytedance') {
return {
navigationStyle: (config === null || config === void 0 ? void 0 : config.navigationStyle) || 'default',
transparentTitle: value
};
}
// 其他端统一转换为 navigationStyle
else {
if (value === 'none') {
return { navigationStyle: 'default' };
}
return { navigationStyle: 'custom' };
}
}
},
pageScroll: {
to: 'disableScroll',
fn(val) {
return !val;
}
},
pullRefresh: {
to: 'enablePullDownRefresh',
fn(val, config, options) {
if (val && config.allowsBounceVertical === 'NO') {
utils_1.logger.warn('支付宝小程序中，如果在页面对应的 .json 配置文件中配置了 pullRefresh 为 true，' +
'则需要同时在 app.json 的 window 选项中配置 allowsBounceVertical 为 YES，' +
'才可开启页面下拉刷新事件。\n' +
`文件地址: ${options.fileInfo.path}`);
}
// 去除无用的配置项
delete config.allowsBounceVertical;
return val;
}
},
titleBarColor: {
to: null,
fn(val, config) {
let navigationBarTextStyle = config.navigationBarTextStyle || '';
if (!navigationBarTextStyle) {
const rgb = (0, utils_1.hexToRgb)(val);
if (rgb) {
navigationBarTextStyle = (0, utils_1.isLightColor)(rgb.r, rgb.g, rgb.b)
? 'black'
: 'white';
}
}
// 移除支付宝的配置
// 原因: 字节未在文档中标明支持该配置, 但缺会生效，所以这里转换后直接移除
delete config.titleBarColor;
return {
navigationBarBackgroundColor: val,
navigationBarTextStyle
};
}
}
};
const TAB_BAR_ITEM_RULES_TO_OTHER = {
pagePath: 'pagePath',
name: 'text',
icon: 'iconPath',
activeIcon: 'selectedIconPath'
};
const TAB_BAR_RULES_TO_OTHER = {
textColor: 'color',
items: {
to: 'list',
fn(items, config, options) {
return items.map((item) => transform(item, TAB_BAR_ITEM_RULES_TO_OTHER, options));
}
}
};
const APP_RULES_TO_OTHER = {
subPackages: 'subPackages',
window: {
to: 'window',
fn(window, config, options) {
return transform(window, WINDOW_RULES_TO_OTHER, options);
}
},
tabBar: {
to: 'tabBar',
fn(tabBar, config, options) {
return transform(tabBar, TAB_BAR_RULES_TO_OTHER, options);
}
}
};
const PAGE_RULES_TO_OTHER = {
...WINDOW_RULES_TO_OTHER
};
/**
* ================================
* 以上 为 支付宝转其他小程序配置映射 👆🏻
* ================================
*/
/**
* ================================
* 以下为 其他小程序转支付宝配置映射 👇🏻
* ================================
*/
const WINDOW_RULES_TO_ALIPAY = {
navigationBarTitleText: 'defaultTitle',
navigationStyle: {
to: 'transparentTitle',
fn: (value, config) => {
if (value === 'custom') {
config.titlePenetrate = 'YES';
return 'always';
}
return 'none';
}
},
enablePullDownRefresh: {
to: 'pullRefresh',
fn(val, config) {
config.allowsBounceVertical = 'YES';
return val;
}
},
navigationBarBackgroundColor: 'titleBarColor',
navigationBarTextStyle: {
to: null,
fn(val, config) {
delete config.navigationBarTextStyle;
return {};
}
}
};
const TAB_BAR_ITEM_RULES_TO_ALIPAY = {
pagePath: 'pagePath',
text: 'name',
iconPath: 'icon',
selectedIconPath: 'activeIcon'
};
const TAB_BAR_RULES_TO_ALIPAY = {
color: 'textColor',
list: {
to: 'items',
fn(items, config, options) {
return items.map((item) => transform(item, TAB_BAR_ITEM_RULES_TO_ALIPAY, options));
}
}
};
const APP_RULES_TO_ALIPAY = {
subPackages: 'subPackages',
window: {
to: 'window',
fn(window, config, options) {
return transform(window, WINDOW_RULES_TO_ALIPAY, options);
}
},
tabBar: {
to: 'tabBar',
fn(tabBar, config, options) {
return transform(tabBar, TAB_BAR_RULES_TO_ALIPAY, options);
}
}
};
const PAGE_RULES_TO_ALIPAY = {
...WINDOW_RULES_TO_ALIPAY
};
/**
* ================================
* 以上 为 其他小程序转支付宝配置映射 👆🏻
* ================================
*/
/**
* 多端编译的配置解析和转换
* 这里仅提供通用的处理, 端的差异由编译插件来解决
*/
class AlipayCompilerConfigParserPlugin {
constructor() {
this.name = 'AlipayCompilerConfigParserPlugin';
}
apply(runner) {
runner.hooks.beforeRun.tap(this.name, () => {
this.runner = runner;
const { sourceType, target } = this.runner.userConfig;
const isAlipaySource = sourceType === utils_1.SourceTypes.alipay;
const isAlipaySimilarTarget = (0, constants_1.isSimilarTarget)(target);
// 如果源码和目标是同一个 则无需转换
if (sourceType === target)
return;
// 如果源码类型为 支付宝小程序 且 目标平台为支付宝小程序类似平台 则无需转换
if (isAlipaySource && isAlipaySimilarTarget)
return;
// 仅 微信DSL 转 支付宝或类似平台需要转换
if (!isAlipaySource && !isAlipaySimilarTarget)
return;
this.runner.hooks.configParser.tapPromise(this.name, async (config, options) => {
// 支付宝不支持大写的标签名，这里统一转换为小写
if (isAlipaySimilarTarget && config.usingComponents) {
for (const componentName in config.usingComponents || {}) {
const newComponentName = componentName.toLowerCase();
if (newComponentName !== componentName) {
config.usingComponents[newComponentName] =
config.usingComponents[componentName];
delete config.usingComponents[componentName];
}
}
}
// 支付宝不支持 subpackages，仅支持 subPackages
if (isAlipaySimilarTarget &&
config.subpackages &&
!config.subPackages) {
config.subPackages = config.subpackages;
}
// plugin.json 转换
config = this.transformPluginJson(config, options);
// app 或 page 配置转换
config = this.transformAppAndPageJson(config, options);
// 非阿里系小程序转支付宝小程序需要开启 component2 和 enableAppxNg
// 原因: 部分运行时接口抹平方式依赖上述两个功能开关
if (!isAlipaySource &&
isAlipaySimilarTarget &&
options.fileInfo.entryType === utils_1.EntryType.project) {
if (!config.component2 || !config.enableAppxNg) {
config.component2 = true;
config.enableAppxNg = true;
const fileName = path_1.default.basename(options.fileInfo.path);
utils_1.logger.warnOnce(`需要开启支付宝小程序的 \`component2\` 和 \`enableAppxNg\` 支持\n` +
`已在文件 ${fileName} 中自动开启`);
}
}
return config;
});
});
}
/**
* 转换 plugin.json 文件
*/
transformPluginJson(config, options) {
const { target } = this.runner.userConfig;
// 插件配置修改
// 除 支付宝之外的其他平台都和微信一样
// pages 都是对象
if (options.fileInfo.entryFileType === utils_1.EntryFileType.config &&
options.fileInfo.entryType === utils_1.EntryType.plugin) {
const isAlipayLike = (0, constants_1.isSimilarTarget)(target);
// 如果是支付宝
if (isAlipayLike) {
config.publicPages = config.pages;
config.pages = Object.values(config.publicPages);
}
// 如果不是 支付宝
else {
const pages = config.publicPages;
// 删除
delete config.publicPages;
if (utils_1.lodash.isPlainObject(config.pages)) {
return config;
}
else {
if (pages)
config.pages = pages;
}
}
}
return config;
}
/**
* 转换 app.json 和 页面的 json 文件
*/
transformAppAndPageJson(config, options) {
const isAlipayToOther = options.userConfig.sourceType === utils_1.SourceTypes.alipay;
if (options.fileInfo.entryFileType === utils_1.EntryFileType.config) {
if (options.fileInfo.entryType === utils_1.EntryType.app) {
return transform(config, isAlipayToOther ? APP_RULES_TO_OTHER : APP_RULES_TO_ALIPAY, options);
}
else if (options.fileInfo.entryType === utils_1.EntryType.page) {
return transform(config, isAlipayToOther ? PAGE_RULES_TO_OTHER : PAGE_RULES_TO_ALIPAY, options);
}
}
return config;
}
}
exports.default = AlipayCompilerConfigParserPlugin;
//# sourceMappingURL=ConfigParserPlugin.js.map