@blocklet/meta 1.15.17 → 1.16.0-beta-b16cb035

package/lib/parse-navigation-from-blocklet.js

@@ -0,0 +1,539 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitNavigationBySection = exports.flatternNavigation = exports.checkLink = exports.joinLink = exports.cleanOrphanNavigation = exports.filterNavigation = exports.nestNavigationList = exports.isMatchSection = exports.deepWalk = exports.parseNavigation = void 0;
+const unionWith_1 = __importDefault(require("lodash/unionWith"));
+const isEqual_1 = __importDefault(require("lodash/isEqual"));
+const pick_1 = __importDefault(require("lodash/pick"));
+const isNil_1 = __importDefault(require("lodash/isNil"));
+const omit_1 = __importDefault(require("lodash/omit"));
+const cloneDeep_1 = __importDefault(require("lodash/cloneDeep"));
+const url_join_1 = __importDefault(require("url-join"));
+const path_1 = __importDefault(require("path"));
+const is_absolute_url_1 = __importDefault(require("is-absolute-url"));
+const lodash_1 = require("lodash");
+const DEFAULT_SECTION = 'header';
+const BASE_PATH = '/';
+const DEFAULT_LINK = '/';
+const ID_SEPARATE = '/';
+/**
+ * 判断一个 url 是否为合法的 url 拼接路径
+ * /abc, /abc/bcd valid
+ * /abc, /abc//bcd invalid
+ * @param value 需要检查的 url path
+ * @returns boolean
+ */
+const checkUrlPath = (value) => {
+    return /^\/(?:[^/]+\/)*$/.test(value) || /^\/(?:[^/]+\/)*[^/]+$/.test(value);
+};
+const checkLink = (value) => {
+    if ((0, is_absolute_url_1.default)(value) || checkUrlPath(value)) {
+        return true;
+    }
+    return false;
+};
+exports.checkLink = checkLink;
+function deepWalk(tree, cb = () => { }, { key = 'children', order = 'first' } = {}) {
+    function walk(current, { index = 0, parent = null, level = 0 } = {}) {
+        if (Array.isArray(current)) {
+            current.forEach((item, i) => {
+                walk(item, { index: i, parent, level: level + 1 });
+            });
+        }
+        else if (current) {
+            if (order === 'first') {
+                cb(current, parent, { index, level });
+            }
+            walk(current[key], { parent: current, level });
+            if (order === 'last') {
+                cb(current, parent, { index, level });
+            }
+        }
+    }
+    walk(tree);
+}
+exports.deepWalk = deepWalk;
+/**
+ * 判断一个传入值是否属于一个 section
+ * @param {string | array} sections 需要判断的对象
+ * @param {string} section 目标 section
+ */
+function isMatchSection(sections, section) {
+    if (section === DEFAULT_SECTION && (0, isNil_1.default)(sections)) {
+        return true;
+    }
+    if (Array.isArray(sections)) {
+        return sections.includes(section);
+    }
+    return sections === section;
+}
+exports.isMatchSection = isMatchSection;
+function tryParseItem(item) {
+    try {
+        return JSON.parse(item);
+    }
+    catch {
+        return item;
+    }
+}
+function normalizeNavigationList(navigationList) {
+    return navigationList.map((item) => {
+        const tempData = { ...item };
+        if (tempData.role) {
+            tempData.role = tryParseItem(tempData.role);
+        }
+        if (tempData.section) {
+            tempData.section = tryParseItem(tempData.section);
+        }
+        if (tempData.title) {
+            tempData.title = tryParseItem(tempData.title);
+        }
+        if (tempData.link) {
+            tempData.link = tryParseItem(tempData.link);
+        }
+        return tempData;
+    });
+}
+function optionalJoin(prefix = '/', url = '') {
+    if ((0, is_absolute_url_1.default)(url || '')) {
+        return url;
+    }
+    // remove last slash
+    const resultUrl = path_1.default.join(prefix, url || DEFAULT_LINK);
+    if (resultUrl.length > 1 && resultUrl.endsWith('/')) {
+        return resultUrl.slice(0, resultUrl.length - 1);
+    }
+    return resultUrl;
+}
+function smartJoinLink(_parentLink, _childLink, { strict = true, } = {}) {
+    let parentLink = _parentLink;
+    let childLink = _childLink;
+    if (!strict) {
+        parentLink = parentLink || '/';
+        childLink = childLink || '/';
+    }
+    if ((0, lodash_1.isObject)(parentLink) && (0, lodash_1.isString)(childLink) && checkLink(childLink)) {
+        return Object.keys(parentLink).reduce((res, key) => {
+            res[key] = optionalJoin(parentLink[key], childLink);
+            return res;
+        }, {});
+    }
+    if ((0, lodash_1.isString)(parentLink) && checkLink(parentLink) && (0, lodash_1.isObject)(childLink)) {
+        return Object.keys(childLink).reduce((res, key) => {
+            res[key] = optionalJoin(parentLink, childLink[key]);
+            return res;
+        }, {});
+    }
+    if ((0, lodash_1.isString)(parentLink) && (0, lodash_1.isString)(childLink)) {
+        if (checkLink(parentLink) || checkLink(childLink)) {
+            return optionalJoin(parentLink, childLink);
+        }
+        return childLink;
+    }
+    if ((0, lodash_1.isObject)(parentLink) && (0, lodash_1.isObject)(childLink)) {
+        const keys = [...new Set([...Object.keys(parentLink), ...Object.keys(childLink)])];
+        return keys.reduce((res, key) => {
+            res[key] = optionalJoin(parentLink[key], childLink[key]);
+            return res;
+        }, {});
+    }
+    return childLink;
+}
+function joinLink(navigation, components) {
+    const copyNavigation = (0, cloneDeep_1.default)(navigation);
+    deepWalk(copyNavigation, (item, parent) => {
+        const component = item.component || item.child;
+        if (component) {
+            const findComponent = components.find((v) => v.name === component);
+            if (findComponent) {
+                item.link = smartJoinLink(findComponent.link, item.link, { strict: false });
+            }
+        }
+        else if (parent) {
+            item.link = smartJoinLink(parent.link, item.link);
+        }
+    }, { key: 'items' });
+    return copyNavigation;
+}
+exports.joinLink = joinLink;
+/**
+ * 将树状结构的导航列表进行扁平化处理
+ * @param {array} navigationList 树状结构的导航列表
+ * @param {object} params 配置参数
+ * @param {number} params.depth 扁平化的层级，默认为 1（全拍平）
+ * @param {function} params.transform 当发生拍平处理时
+ * @returns 扁平化后的导航列表
+ */
+function flatternNavigation(list = [], { depth = 1, transform = (v) => v } = {}) {
+    const copyList = (0, cloneDeep_1.default)(list);
+    const finalList = [];
+    deepWalk(copyList, (item, parent, { level }) => {
+        if (level >= depth) {
+            const { items = [] } = item;
+            if (items && Array.isArray(items) && items.length > 0) {
+                delete item.items;
+                const transformedItems = items.map((v) => transform(v, item));
+                if (parent) {
+                    parent.items.push(...transformedItems);
+                }
+                else {
+                    const tmpItem = transform((0, omit_1.default)(item, ['items']), parent);
+                    finalList.push(tmpItem, ...transformedItems);
+                }
+            }
+            else if (level === 1) {
+                const tmpItem = transform((0, omit_1.default)(item, ['items']), parent);
+                finalList.push(tmpItem);
+            }
+        }
+        else if (level === 1) {
+            finalList.push(item);
+        }
+    }, { key: 'items', order: 'last' });
+    return finalList;
+}
+exports.flatternNavigation = flatternNavigation;
+/**
+ * 将 blocklet 中的数据进行处理，获得当前应用的导航数据及组件数据
+ * @param {object} blocklet blocklet 应用实例对象
+ * @returns 导航数据及组件数据
+ */
+function parseBlockletNavigationList(blocklet = {}) {
+    const components = [];
+    /**
+     *
+     * @param {object} current 当前 blocklet 的数据
+     * @param {object} parent 当前 blocklet 的父组件数据
+     * @returns
+     */
+    function genNavigationListByBlocklet(current, parent = {}) {
+        const targetList = [];
+        const { children = [], meta = {} } = current;
+        const navigation = (0, cloneDeep_1.default)(meta?.navigation || []);
+        if (current.meta?.capabilities?.navigation !== false) {
+            targetList.push(...navigation);
+        }
+        const parentName = parent.name || '';
+        const parentBase = parent.mountPoint || BASE_PATH;
+        const currentName = current === blocklet ? '' : meta.name || '';
+        const currentBase = current === blocklet ? '' : current.mountPoint || BASE_PATH;
+        for (const child of children) {
+            const childName = child.meta.name;
+            const childBase = child.mountPoint;
+            const mergeName = [parentName, currentName, childName].filter(Boolean).join('.');
+            const childNavigation = child.meta.navigation || [];
+            const mergeBase = (0, url_join_1.default)(parentBase, currentBase, childBase);
+            if (child.meta?.capabilities?.navigation !== false) {
+                components.push({
+                    did: child.meta.did,
+                    name: mergeName,
+                    link: mergeBase,
+                    title: child.meta.title || '',
+                    navigation: childNavigation.map((item) => ({
+                        // 给每个 navigation 赋予一个 setion，用于在 autocomplete 提供依据 section 筛选的基础
+                        section: DEFAULT_SECTION,
+                        ...item,
+                    })),
+                });
+            }
+            // 在现有的 navigation 中判断是否存在 children
+            const matchNavigation = navigation.find((item) => {
+                if (item.component) {
+                    return item.component === childName;
+                }
+                return false;
+            });
+            // 如果存在，并且当前 navigation 未配置任何 link，则将 child mountpoint 给它
+            if (matchNavigation) {
+                if (!matchNavigation.link) {
+                    if (child.meta.navigation && child.meta.navigation.length > 0) {
+                        const items = genNavigationListByBlocklet(child, { mountPoint: currentBase, name: currentName });
+                        if (items.length > 0) {
+                            matchNavigation.items = matchNavigation.items ?? [];
+                            matchNavigation.items.push(...items);
+                        }
+                    }
+                    else {
+                        matchNavigation.link = DEFAULT_LINK;
+                    }
+                }
+            }
+            else if (child.meta?.capabilities?.navigation !== false) {
+                const childItems = genNavigationListByBlocklet(child, { mountPoint: currentBase, name: currentName });
+                // 否则动态注入一个 navigation
+                const tmpData = {
+                    title: child.meta.title,
+                    component: childName,
+                    // 动态注入的 navigation 需要一个默认的 id，blocklet.meta.id 是唯一的，可以用上这个值
+                    id: child.meta.did,
+                };
+                if (childItems.length > 0) {
+                    tmpData.items = childItems;
+                    tmpData.link = undefined;
+                }
+                else {
+                    tmpData.link = DEFAULT_LINK;
+                }
+                targetList.push(tmpData);
+            }
+        }
+        return targetList;
+    }
+    const navigationList = genNavigationListByBlocklet(blocklet);
+    return {
+        navigationList,
+        components,
+    };
+}
+function patchBuiltinNavigation(navigation) {
+    const copyNavigation = (0, cloneDeep_1.default)(navigation).filter((item) => item.id);
+    deepWalk(copyNavigation, (item, parent) => {
+        if (item.items && item.items.length) {
+            for (let i = item.items.length - 1; i >= 0; i--) {
+                if (!item.items[i].id) {
+                    item.items.splice(i, 1);
+                }
+            }
+            // 如果 items 全都不符合规范，保留 item 本身，为其增加一个默认的链接
+            if (item.items.length === 0) {
+                if (item.component) {
+                    item.link = item.link || DEFAULT_LINK;
+                }
+            }
+        }
+        if (parent) {
+            item.parent = parent.id;
+            // 由于默认设置的 id(在 blocklet.yml 中手动赋予的存在重复的可能性比较大，所以通过 `/` 拼接父节点的 id，可以大大降低重复的概率)
+            item.id = [parent.id, item.id].join(ID_SEPARATE);
+        }
+        item.from = item.from || 'yaml';
+        item.visible = item.visible ?? true;
+    }, { key: 'items' });
+    return copyNavigation;
+}
+/**
+ * 将多层结构的导航列表压缩至指定最大深度的树状结构
+ * @param {array} navigation 树状结构的导航列表数据
+ * @param {number} depth 压缩的层级
+ * @returns 压缩后的树状结构导航列表数据
+ */
+function compactNavigation(navigation, depth = 2) {
+    const copyNavigation = (0, cloneDeep_1.default)(navigation);
+    const resData = flatternNavigation(copyNavigation, {
+        depth,
+        transform: (item, parent) => {
+            if (parent) {
+                if (!item._parent) {
+                    item._parent = parent.id;
+                    if (!parent.component) {
+                        item.link = smartJoinLink(parent.link, item.link);
+                    }
+                }
+                item.section = item.section || parent.section || [DEFAULT_SECTION];
+                item.visible = item.visible ?? parent.visible;
+            }
+            item.component = [parent.component, item.component].filter(Boolean).join('.');
+            return item;
+        },
+    });
+    deepWalk(resData, (item) => {
+        if (item.items && item.items.length > 0) {
+            item.items.reduceRight((all, cur) => {
+                if (cur._parent) {
+                    const index = item.items.findIndex((v) => v.id === cur._parent);
+                    if (index >= 0) {
+                        item.items.splice(index, 1);
+                    }
+                    delete cur._parent;
+                }
+                return null;
+            }, null);
+        }
+    }, { key: 'items' });
+    return resData;
+}
+/**
+ * 返回指定的导航中的子菜单（属于指定 section）
+ * @param {object} navigationItem 指定的某一个导航数据
+ * @param {string} section 指定的 section 区域
+ * @returns
+ */
+function getNavigationListBySection(navigationItem, section) {
+    if (section && Array.isArray(navigationItem.items)) {
+        return navigationItem.items
+            .filter((item) => {
+            // 如果当前子菜单没有 section，它的 section 应该跟随父菜单的 section
+            if ((0, isNil_1.default)(item.section)) {
+                return isMatchSection(navigationItem.section, section);
+            }
+            if (isMatchSection(item.section, section)) {
+                return true;
+            }
+            return false;
+        })
+            .map((item) => ({ ...item, section }));
+    }
+    return [];
+}
+/**
+ * 根据导航中每一个子菜单所属的 section，将原由的导航数据分离为多个导航数据（此时每一个导航 item 只会包含一个 section）
+ * @param {array} navigation 导航列表数据（树状结构，目前只适用于两层的树状结构）
+ * @returns
+ */
+function splitNavigationBySection(navigation) {
+    const copyNavigation = (0, cloneDeep_1.default)(navigation);
+    const allNavigationList = [];
+    for (const navigationItem of copyNavigation) {
+        const baseNavigation = (0, cloneDeep_1.default)((0, omit_1.default)(navigationItem, ['items']));
+        const itemNavigationList = [];
+        // eslint-disable-next-line no-inner-declarations
+        function patchNavigationItem(item, section) {
+            const sectionNavigationList = getNavigationListBySection(item, section);
+            itemNavigationList.push({
+                ...baseNavigation,
+                section,
+                items: sectionNavigationList,
+            });
+        }
+        if (Array.isArray(navigationItem.section)) {
+            for (const section of navigationItem.section) {
+                patchNavigationItem(navigationItem, section);
+            }
+        }
+        else if (navigationItem.section) {
+            const { section } = navigationItem;
+            patchNavigationItem(navigationItem, section);
+        }
+        else if (navigationItem.items && navigationItem.items.length > 0) {
+            const allSectionList = navigationItem.items.reduce((list, currentValue) => {
+                const { section = [DEFAULT_SECTION] } = currentValue || {};
+                list.push(...section);
+                return list;
+            }, []);
+            const sectionList = [...new Set(allSectionList)];
+            for (const section of sectionList) {
+                patchNavigationItem(navigationItem, section);
+            }
+        }
+        else {
+            itemNavigationList.push({
+                ...navigationItem,
+                section: DEFAULT_SECTION,
+            });
+        }
+        allNavigationList.push(...itemNavigationList);
+    }
+    return allNavigationList;
+}
+exports.splitNavigationBySection = splitNavigationBySection;
+/**
+ * 将导航数据进行层叠处理
+ * @param {array} list 扁平化的导航数据
+ * @returns 处理后的导航
+ */
+function nestNavigationList(list = []) {
+    const cloneList = (0, cloneDeep_1.default)(list);
+    cloneList.reduceRight((res, item, index) => {
+        if (item.parent) {
+            const parent = cloneList.find((i) => {
+                if (item.section && i.section) {
+                    return i.section === item.section && i.id === item.parent;
+                }
+                return i.id === item.parent;
+            });
+            if (parent) {
+                if (!parent.items)
+                    parent.items = [];
+                // 由于 reduceRight 是从后向前遍历，所以后遍历到的其实顺序在前面
+                parent.items = [item, ...parent.items];
+            }
+            cloneList.splice(index, 1);
+        }
+        return null;
+    }, null);
+    return cloneList;
+}
+exports.nestNavigationList = nestNavigationList;
+function filterNavigation(navigationList, components = []) {
+    const nestedNavigation = nestNavigationList(navigationList);
+    deepWalk(nestedNavigation, (item) => {
+        if (item?.component) {
+            if (!components.some((x) => x.name === item.component)) {
+                item.visible = false;
+            }
+        }
+        if (item.items && item.items.length) {
+            for (let i = item.items.length - 1; i >= 0; i--) {
+                if (item.items[i].visible === false) {
+                    item.items.splice(i, 1);
+                }
+            }
+        }
+    }, { key: 'items' });
+    const filteredNavigation = nestedNavigation.filter((item) => {
+        if (item.visible === false)
+            return false;
+        // 如果某一菜单的 子菜单 均为隐藏状态，则一级菜单本身也不显示出来
+        if (item.items &&
+            Array.isArray(item.items) &&
+            item.items.length > 0 &&
+            item.items?.every((v) => v.visible === false))
+            return false;
+        return true;
+    });
+    return filteredNavigation;
+}
+exports.filterNavigation = filterNavigation;
+function cleanOrphanNavigation(list) {
+    // 将仅有一个 child 的菜单提升到上一级
+    return list.map((item) => {
+        if (item.items && Array.isArray(item.items) && item.items.length === 1) {
+            if (['header', 'footer', '', undefined, null].includes(item.section)) {
+                return item.items[0];
+            }
+        }
+        return item;
+    });
+}
+exports.cleanOrphanNavigation = cleanOrphanNavigation;
+function parseNavigation(blocklet = {}, options = {}) {
+    const { beforeProcess = (v) => v } = options;
+    const { navigationList: builtinNavigation, components } = parseBlockletNavigationList(blocklet);
+    const customNavigationList = blocklet?.settings?.navigations || [];
+    const compactedNavigation = compactNavigation(beforeProcess(builtinNavigation));
+    const patchedNavigation = patchBuiltinNavigation(compactedNavigation);
+    const splitNavigation = splitNavigationBySection(patchedNavigation);
+    // 将 footer-social, footer-bottom, sessionManager 的二级菜单提升为一级菜单
+    const levelUpNavigation = splitNavigation.reduce((all, cur) => {
+        if (['bottom', 'social', 'sessionManager'].includes(cur.section)) {
+            if (cur.items && cur.items.length > 0) {
+                all.push(...cur.items.map((x) => {
+                    const { section } = cur;
+                    const link = smartJoinLink(cur.link, x.link);
+                    const component = [cur.component, x.component].filter(Boolean).join('.');
+                    return { ...x, section, link, component, parent: '' };
+                }));
+                return all;
+            }
+        }
+        all.push(cur);
+        return all;
+    }, []);
+    const flatNavigation = flatternNavigation(levelUpNavigation, {
+        transform(item, parent) {
+            let { component } = item;
+            if (parent?.component) {
+                component = [parent.component, item.component].filter(Boolean).join('.');
+            }
+            return { ...item, component };
+        },
+    });
+    const rawNavigation = (0, unionWith_1.default)(normalizeNavigationList(customNavigationList), flatNavigation, (prev, next) => {
+        const keys = ['id', 'section'];
+        return (0, isEqual_1.default)((0, pick_1.default)(prev, keys), (0, pick_1.default)(next, keys));
+    });
+    return { navigationList: rawNavigation, components, builtinList: flatNavigation };
+}
+exports.parseNavigation = parseNavigation;

package/lib/parse-navigation.d.ts

@@ -0,0 +1,3 @@
+import { TNavigationItem } from './types';
+declare const parseNavigation: (...args: any[]) => TNavigationItem[];
+export = parseNavigation;