@splicetree/plugin-lazy-load 0.3.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @splicetree/plugin-lazy-load
 
+## 1.1.0
+
+### Minor Changes
+
+- 为懒加载插件新增“加载中”状态与渲染联动：
+  - 新增 `loadingKeys: Set<string>` 与 `isLoading(id)` 实例方法；节点新增 `isLoading()`。
+  - 在 `load(id)` 开始/结束时派发 `visibility` 事件，触发适配层刷新，便于 UI 立刻显示 Loading。
+  - 文档示例在加载中禁用展开按钮，并以旋转图标显示 Loading。
+
+  此为向后兼容更新；如需在加载中禁止交互，请在 UI 侧判断 `item.isLoading()`。
+
+## 1.0.0
+
 ## 0.3.0
 
 ## 0.2.0

package/dist/index.d.ts

@@ -19,7 +19,9 @@ declare module '@splicetree/core' {
   /**
    * 实例扩展（Lazy-Load）
    * - loadedKeys：已加载集合
+   * - loadingKeys：加载中的集合
    * - isLoaded：查询是否已加载
+   * - isLoading：查询是否正在加载
    * - load：加载指定节点的子节点
    */
   interface SpliceTreeInstance {
@@ -27,10 +29,18 @@ declare module '@splicetree/core' {
      * 已完成加载的节点 id 集合
      */
     loadedKeys: Set<string>;
+    /**
+     * 正在加载的节点 id 集合
+     */
+    loadingKeys: Set<string>;
     /**
      * 查询指定节点是否已完成子节点加载
      */
     isLoaded: (id: string) => boolean;
+    /**
+     * 查询指定节点是否正在加载
+     */
+    isLoading: (id: string) => boolean;
     /**
      * 加载指定节点的子节点并追加到树中
      * @param id 目标节点 id
@@ -43,6 +53,7 @@ declare module '@splicetree/core' {
    */
   interface SpliceTreeNode {
     isLoaded: () => boolean;
+    isLoading: () => boolean;
   }
 }
 declare const lazyLoad: SpliceTreePlugin;

package/dist/index.js

@@ -4,7 +4,9 @@ const lazyLoad = {
 	setup(ctx) {
 		const { loadChildren } = ctx.options?.configuration?.lazyLoad ?? {};
 		const loadedKeys = /* @__PURE__ */ new Set();
+		const loadingKeys = /* @__PURE__ */ new Set();
 		const isLoaded = (id) => loadedKeys.has(id);
+		const isLoading = (id) => loadingKeys.has(id);
 		/**
 		* 为节点应用懒加载相关的覆盖方法
 		* - isLoaded：读取实例的已加载状态
@@ -12,6 +14,7 @@ const lazyLoad = {
 		*/
 		const applyLazyOverrides = (node) => {
 			node.isLoaded = () => ctx.tree.isLoaded?.(node.id);
+			node.isLoading = () => ctx.tree.isLoading?.(node.id);
 			node.hasChildren = () => {
 				if (!ctx.tree.isLoaded?.(node.id)) return true;
 				return !!node.getChildren()?.length;
@@ -29,6 +32,12 @@ const lazyLoad = {
 			if (loadedKeys.has(id)) return;
 			const node = ctx.tree.getNode(id);
 			if (!node) return;
+			if (loadingKeys.has(id)) return;
+			loadingKeys.add(id);
+			ctx.events.emit({
+				name: "visibility",
+				keys: ctx.tree.expandedKeys()
+			});
 			const children = await loadChildren(node);
 			if (children?.length) {
 				ctx.tree.appendChildren(id, children);
@@ -39,6 +48,11 @@ const lazyLoad = {
 				}
 			}
 			loadedKeys.add(id);
+			loadingKeys.delete(id);
+			ctx.events.emit({
+				name: "visibility",
+				keys: ctx.tree.expandedKeys()
+			});
 			ctx.events.emit({
 				name: "lazyload",
 				keys: Array.from(loadedKeys)
@@ -70,7 +84,9 @@ const lazyLoad = {
 		};
 		return {
 			loadedKeys,
+			loadingKeys,
 			isLoaded,
+			isLoading,
 			load,
 			expand,
 			toggleExpand
@@ -78,6 +94,7 @@ const lazyLoad = {
 	},
 	extendNode(node, ctx) {
 		node.isLoaded = () => ctx.tree.isLoaded?.(node.id);
+		node.isLoading = () => ctx.tree.isLoading?.(node.id);
 		node.hasChildren = () => {
 			if (!ctx.tree.isLoaded?.(node.id)) return true;
 			return !!node.getChildren()?.length;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@splicetree/plugin-lazy-load",
   "type": "module",
-  "version": "0.3.0",
+  "version": "1.1.0",
   "author": {
     "email": "michael.cocova@gmail.com",
     "name": "Michael Cocova"
@@ -23,7 +23,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@splicetree/core": "0.3.0"
+    "@splicetree/core": "1.1.0"
   },
   "scripts": {
     "dev": "tsdown --watch",

package/src/index.ts

@@ -19,7 +19,9 @@ declare module '@splicetree/core' {
   /**
    * 实例扩展（Lazy-Load）
    * - loadedKeys：已加载集合
+   * - loadingKeys：加载中的集合
    * - isLoaded：查询是否已加载
+   * - isLoading：查询是否正在加载
    * - load：加载指定节点的子节点
    */
   interface SpliceTreeInstance {
@@ -27,10 +29,18 @@ declare module '@splicetree/core' {
      * 已完成加载的节点 id 集合
      */
     loadedKeys: Set<string>
+    /**
+     * 正在加载的节点 id 集合
+     */
+    loadingKeys: Set<string>
     /**
      * 查询指定节点是否已完成子节点加载
      */
     isLoaded: (id: string) => boolean
+    /**
+     * 查询指定节点是否正在加载
+     */
+    isLoading: (id: string) => boolean
     /**
      * 加载指定节点的子节点并追加到树中
      * @param id 目标节点 id
@@ -44,6 +54,7 @@ declare module '@splicetree/core' {
    */
   interface SpliceTreeNode {
     isLoaded: () => boolean
+    isLoading: () => boolean
   }
 }
 
@@ -61,7 +72,9 @@ export const lazyLoad: SpliceTreePlugin = {
     }
     const { loadChildren } = cfg
     const loadedKeys = new Set<string>()
+    const loadingKeys = new Set<string>()
     const isLoaded = (id: string) => loadedKeys.has(id)
+    const isLoading = (id: string) => loadingKeys.has(id)
 
     /**
      * 为节点应用懒加载相关的覆盖方法
@@ -70,6 +83,7 @@ export const lazyLoad: SpliceTreePlugin = {
      */
     const applyLazyOverrides = (node: any) => {
       node.isLoaded = () => ctx.tree.isLoaded?.(node.id)
+      node.isLoading = () => ctx.tree.isLoading?.(node.id)
       node.hasChildren = () => {
         const loaded = ctx.tree.isLoaded?.(node.id)
         if (!loaded) {
@@ -97,6 +111,11 @@ export const lazyLoad: SpliceTreePlugin = {
       if (!node) {
         return
       }
+      if (loadingKeys.has(id)) {
+        return
+      }
+      loadingKeys.add(id)
+      ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
       const children = await loadChildren(node)
       if (children?.length) {
         ctx.tree.appendChildren(id, children)
@@ -109,6 +128,8 @@ export const lazyLoad: SpliceTreePlugin = {
         }
       }
       loadedKeys.add(id)
+      loadingKeys.delete(id)
+      ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
       ctx.events.emit({ name: 'lazyload', keys: Array.from(loadedKeys) })
     }
 
@@ -148,7 +169,9 @@ export const lazyLoad: SpliceTreePlugin = {
 
     return {
       loadedKeys,
+      loadingKeys,
       isLoaded,
+      isLoading,
       load,
       expand,
       toggleExpand,
@@ -161,6 +184,7 @@ export const lazyLoad: SpliceTreePlugin = {
    */
   extendNode(node, ctx) {
     node.isLoaded = () => ctx.tree.isLoaded?.(node.id)
+    node.isLoading = () => ctx.tree.isLoading?.(node.id)
     node.hasChildren = () => {
       const loaded = ctx.tree.isLoaded?.(node.id)
       if (!loaded) {