chore(resolver): add resolver floder

This commit is contained in:
就眠儀式
2022-03-13 00:43:34 +08:00
parent 1e18564352
commit e572539ead

205
src/resolver/index.ts Normal file
View File

@@ -0,0 +1,205 @@
/**
* Layui Vue Resolver
* √ On-demand import components for @layui/layui-vue
* √ component and style resolver for @layui/icons-vue
* √ layer API
* TODO On-demand import style
*/
// TODO 待 css 完善,以下除特殊注释的外, styleDir: '' 为未拆分的
const matchComponents = [
{
pattern: /^LayAvatarList$/,
styleDir: "avatar",
},
{
pattern: /^(LayBreadcrumb|LayBreadcrumbItem)$/,
styleDir: "",
},
{
pattern: /^(LayCarousel|LayCarouselItem)$/,
styleDir: "",
},
{
pattern: /^(LayCheckbox|LayCheckboxGroup)$/,
styleDir: "",
},
{
pattern: /^LayCol$/,
styleDir: "",
},
{
pattern: /^(LayCollapse|LayCollapseItem)$/,
styleDir: "",
},
// 无 css
{
pattern: /^LayCountUp$/,
styleDir: "",
},
{
pattern: /^(LayDropdown|LayDropdownItem)$/,
styleDir: "",
},
// 可能有未拆分的
{
pattern: /^(LayForm|LayFormItem)$/,
styleDir: "formItem",
},
{
pattern: /^(LayHeader)$/,
styleDir: "",
},
{
pattern: /^LayLine$/,
styleDir: "",
},
{
pattern: /^LayLogo$/,
styleDir: "",
},
{
pattern: /^(LayMenuItem|LaySubMenu)$/,
styleDir: "menu",
},
{
pattern: /^LayPage$/,
styleDir: "",
},
{
pattern: /^LayProgress$/,
styleDir: "",
},
{
pattern: /^LayRadio$/,
styleDir: "",
},
{
pattern: /^LayScroll$/,
styleDir: "",
},
{
pattern: /^LaySelectOption$/,
styleDir: "select",
},
{
pattern: /^LaySkeletonItem$/,
styleDir: "skeleton",
},
{
pattern: /^LaySplitPanelItem$/,
styleDir: "splitPanel",
},
{
pattern: /^LayStepItem$/,
styleDir: "step",
},
{
pattern: /^LaySwitch$/,
styleDir: "",
},
{
pattern: /^(LayTab|LayTabItem)$/,
styleDir: "",
},
{
pattern: /^LayTimelineItem$/,
styleDir: "timeline",
},
{
pattern: /^LayTolltip$/,
styleDir: "popper",
},
];
export interface LayuiVueResolverOptions {
/**
* import style along with components
*
* @default 'css'
*/
importStyle?: boolean | "css";
/**
* resolve `@layui/layui-vue' icons
* requires package `@layui/icons-vue`
*
* @default false
*/
resolveIcons?: boolean;
/**
* exclude components that do not require automatic import
* @default []
*
*/
exclude?: string[];
}
const libRE = /^Lay[A-Z]/;
const layerRE = /^(layer|LayLayer)$/;
const iconsRE = /^([A-Z][\w]+Icon|LayIcon)$/;
const esComponentsFolder = "@layui/layui-vue/es";
function lowerCamelCase(str: string) {
return str.charAt(0).toLowerCase() + str.slice(1);
}
function getSideEffects(importName: string, options: LayuiVueResolverOptions) {
const { importStyle = true } = options;
if (!importStyle) return;
let styleDir: string | undefined = undefined;
if (importName.match(iconsRE)) {
return `@layui/icons-vue/lib/index.css`;
} else if (importName.match(layerRE)) {
return `@layui/layer-vue/lib/index.css`;
} else if (importName.match(libRE)) {
styleDir = lowerCamelCase(importName.slice(3)); // LayBackTop -> backTop
for (const item of matchComponents) {
if (item.pattern.test(importName)) {
styleDir = item.styleDir;
break;
}
}
// FIXME 临时方案,部分组件样式未拆分
// return styleDir ? `${esComponentsFolder}/${styleDir}/index.css` : `@layui/layui-vue/lib/index.css`
return styleDir ? `${esComponentsFolder}/${styleDir}/index.css` : undefined;
}
}
function resolveComponent(name: string, options: LayuiVueResolverOptions) {
let importName: string | undefined = undefined;
let path: string = `@layui/layui-vue`;
let sideEffects: string | string[] | undefined;
if (options.resolveIcons && name.match(iconsRE)) {
importName = name;
path = `@layui/icons-vue`;
sideEffects = getSideEffects(name, options);
} else if (name.match(layerRE)) {
importName = name;
path = `@layui/layer-vue`;
sideEffects = getSideEffects(name, options);
} else if (name.match(libRE) && !options?.exclude?.includes(name)) {
importName = name;
path = `@layui/layui-vue`;
sideEffects = getSideEffects(name, options);
}
return importName ? { importName, path, sideEffects } : null;
}
/**
* Resolver for layui-vue
* Requires @layui/layui-vue@v0.3.X(版本待定) or later
* @param options
* @returns
*/
export function LayuiVueResolver(options: LayuiVueResolverOptions = {}) {
return {
type: "component",
resolve: (name: string) => {
return resolveComponent(name, options);
},
};
}