// @ts-nocheck
import { IPlugin } from '@alib/build-scripts';
const fs = require('fs');
const path = require('path');
const appendPreFetchScript = (version: any) => ``;
const compineStyle = (style) => {
return Object.keys(style).map((key) => {
return key + ":" + style[key] + ";"
}).join('')
}
const plugin = ({ onHook, log }, options): IPlugin => {
const { id, url, type, imgUrl, pathname, style, version, template }: any = options;
if (!id || !url || !imgUrl || !pathname || !version) {
log.error("插件骨架屏配置参数配置缺少配置参数");
return;
}
const applyHideSkeletionScript = () => `
`
const factorySkeleton = () => {
return ``
}
const appendSkeleton = (content: any) => {
const skeletonDom = new RegExp(`([\\s\\S]*]*>[\\s\\S]*
)([\\s\\S]*)`);
content = content.replace(skeletonDom, (match: any, p1: any, p2) => {
if (match) {
const _t = factorySkeleton();
return [p1, _t, p2,].join("")
}
});
return content;
}
const appendSkeletonCss = (content) => {
const skeletonRex = new RegExp(`([\\s\\S]*]*)([\\s\\S]*)`);
content = content.replace(skeletonRex, (match, p1, p2, p3) => {
if (match) {
const defaultStyle = {
"background-color": "#F7F8F9",
"position": "absolute",
"top": "0",
"bottom": "0",
"left": "0",
"right": "0",
"z-index": "999999",
"width": "100%",
"box-sizing": "border-box",
"margin": "0",
}
const style2 = style ? style : defaultStyle;
const _style = compineStyle(style2);
const appendStyle = ` style="${_style}"`;
return [p1, p2, appendStyle, p3].join("");
}
})
return content;
}
const appendHideSkeletion = (content) => {
const bodyStart = /([\\s\\S]*)(]*>)([\\s\\S]*)/;
content = content.replace(bodyStart, (match: any, p1: any, p2: any, p3: any) => {
if (match) {
const _t = applyHideSkeletionScript();
return [p1, p2, _t, p3].join("")
}
});
return content;
}
const appendPreFetch = (content) => {
//
const head = /([\\s\\S]*)(<\/head>)([\\s\\S]*)/;
let modifyContent = content.replace(head, (match: any, p1: any, p2: any, p3: any) => {
if (match) {
const _script = appendPreFetchScript(version);
return [p1, _script, p2, p3].join("")
}
})
return modifyContent;
}
onHook("after.build.compile", (stats) => {
//html 里注入我们script代码
const cwd = process.cwd();
const distPath = template ? path.resolve(cwd, template) : path.resolve(cwd, "build/index.html");
let content = fs.readFileSync(distPath, { encoding: "utf-8" });
const hasDataPrefetch = /assets\.zjzwfw\.gov\.cn\/assets\/assets\/0\.2\.0\/data-prefetch\/(([0-9]|([1-9]([0-9]*))).){2}([0-9]|([1-9]([0-9]*)))\/index\.js/;
//preFetch
if (!hasDataPrefetch.test(content)) {
content = appendPreFetch(content);
}
//添加骨架屏html
content = appendSkeleton(content);
//增加骨架图css样式
content = appendSkeletonCss(content);
//增加骨架图隐藏逻辑
content = appendHideSkeletion(content);
fs.writeFileSync(distPath, content);
log.info("plugin-gff-skeletons 插件安装完成");
})
};
export default plugin;