react-native-fxview 1.0.1 → 1.0.2-beta12

package/{FXViewCategoryController.d.ts → FXCategoryController.d.ts}

@@ -1,6 +1,6 @@
 import React from "react";
-import { ComponentItem, ComponentController } from "./types";
-export declare class FXViewCategoryController {
+import { FXComponentItem, FXComponentController } from "./types";
+export declare class FXCategoryController {
     fxViewId: string;
     categoryId: string;
     private updateCallback?;
@@ -13,14 +13,14 @@ export declare class FXViewCategoryController {
      * @param componentId 可选的组件 ID
      * @returns 组件控制器
      */
-    add(component: React.ReactNode, componentId?: string): ComponentController;
+    add(component: React.ReactNode, componentId?: string): FXComponentController;
     /**
      * 创建但不显示组件
      * @param component 要创建的组件
      * @param componentId 可选的组件 ID
      * @returns 组件控制器
      */
-    build(component: React.ReactNode, componentId?: string): ComponentController;
+    build(component: React.ReactNode, componentId?: string): FXComponentController;
     /**
      * 显示已存在的组件
      * @param componentId 组件 ID
@@ -59,7 +59,7 @@ export declare class FXViewCategoryController {
      * 获取组件列表
      * @returns 组件列表
      */
-    getComponents(): ComponentItem[];
+    getComponents(): FXComponentItem[];
     /**
      * 获取组件数量
      * @returns 组件数量

package/{FXViewCategoryController.js → FXCategoryController.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FXViewCategoryController = void 0;
+exports.FXCategoryController = void 0;
 const PriorityQueue_1 = require("./queue/PriorityQueue");
-class FXViewCategoryController {
+class FXCategoryController {
     constructor(fxViewId, categoryId, triggerUpdate) {
         // 存储组件的 Map 和优先队列
         this.componentMap = new Map();
@@ -267,4 +267,4 @@ class FXViewCategoryController {
             .substring(2, 9)}`;
     }
 }
-exports.FXViewCategoryController = FXViewCategoryController;
+exports.FXCategoryController = FXCategoryController;

package/{FXViewCategoryController.ts → FXCategoryController.ts}

@@ -1,15 +1,15 @@
 import React from "react";
-import { ComponentItem, ComponentController } from "./types";
+import { FXComponentItem, FXComponentController } from "./types";
 import { HeapType, PriorityOrder, PriorityQueue } from "./queue/PriorityQueue";
 
-export class FXViewCategoryController {
+export class FXCategoryController {
   public fxViewId: string;
   public categoryId: string;
   private updateCallback?: () => void;
 
   // 存储组件的 Map 和优先队列
-  private componentMap: Map<string, ComponentItem> = new Map();
-  private componentQueue: PriorityQueue<ComponentItem> = new PriorityQueue(
+  private componentMap: Map<string, FXComponentItem> = new Map();
+  private componentQueue: PriorityQueue<FXComponentItem> = new PriorityQueue(
     HeapType.MAX_HEAP,
     PriorityOrder.FIFO,
   );
@@ -32,7 +32,7 @@ export class FXViewCategoryController {
    * @param componentId 可选的组件 ID
    * @returns 组件控制器
    */
-  add(component: React.ReactNode, componentId?: string): ComponentController {
+  add(component: React.ReactNode, componentId?: string): FXComponentController {
     console.log(
       `FXViewCategoryController.add`,
       `[${this.categoryId}]`,
@@ -49,7 +49,7 @@ export class FXViewCategoryController {
       this.remove(finalComponentId);
     }
 
-    const componentItem: ComponentItem = {
+    const componentItem: FXComponentItem = {
       componentId: finalComponentId,
       component,
       visible: true, // add 方法默认可见
@@ -68,7 +68,10 @@ export class FXViewCategoryController {
    * @param componentId 可选的组件 ID
    * @returns 组件控制器
    */
-  build(component: React.ReactNode, componentId?: string): ComponentController {
+  build(
+    component: React.ReactNode,
+    componentId?: string,
+  ): FXComponentController {
     console.log(
       `FXViewCategoryController.build`,
       `[${this.categoryId}]`,
@@ -85,7 +88,7 @@ export class FXViewCategoryController {
       this.remove(finalComponentId);
     }
 
-    const componentItem: ComponentItem = {
+    const componentItem: FXComponentItem = {
       componentId: finalComponentId,
       component,
       visible: false, // build 方法默认不可见
@@ -270,7 +273,7 @@ export class FXViewCategoryController {
    * 获取组件列表
    * @returns 组件列表
    */
-  getComponents(): ComponentItem[] {
+  getComponents(): FXComponentItem[] {
     return this.componentQueue.getAll();
   }
 
@@ -331,7 +334,7 @@ export class FXViewCategoryController {
    * @param componentId 组件 ID
    * @returns 组件控制器
    */
-  private createController(componentId: string): ComponentController {
+  private createController(componentId: string): FXComponentController {
     console.log(
       `FXViewCategoryController.createController`,
       `[${this.categoryId}]`,

package/FXView.d.ts

@@ -1,11 +1,11 @@
 import React, { Component } from "react";
 import { ViewProps } from "react-native";
-import { ComponentItem } from "./types";
+import { FXComponentItem } from "./types";
 interface FXViewProps extends ViewProps {
     fxViewId?: string;
 }
 interface FXViewState {
-    components: ComponentItem[];
+    components: FXComponentItem[];
 }
 export default class FXView extends Component<FXViewProps, FXViewState> {
     state: FXViewState;

package/FXView.js

@@ -74,6 +74,7 @@ class FXView extends react_1.Component {
         const newViewId = this.props.fxViewId || this.viewId;
         if (newViewId !== this.viewId) {
             // ID 变化时重新注册
+            console.log("FXView updated changed", this.viewId);
             FXViewManager_1.FXViewManager.getInstance().unregisterView(this.viewId);
             this.viewId = newViewId;
             FXViewManager_1.FXViewManager.getInstance().registerView(this.viewId, this.updateComponents);

package/FXView.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { View, ViewProps } from "react-native";
-import { ComponentItem } from "./types";
+import { FXComponentItem } from "./types";
 import { FXViewManager } from "./FXViewManager";
 
 interface FXViewProps extends ViewProps {
@@ -8,7 +8,7 @@ interface FXViewProps extends ViewProps {
 }
 
 interface FXViewState {
-  components: ComponentItem[];
+  components: FXComponentItem[];
 }
 
 export default class FXView extends Component<FXViewProps, FXViewState> {
@@ -43,8 +43,8 @@ export default class FXView extends Component<FXViewProps, FXViewState> {
 
     if (newViewId !== this.viewId) {
       // ID 变化时重新注册
+      console.log("FXView updated changed", this.viewId);
       FXViewManager.getInstance().unregisterView(this.viewId);
-
       this.viewId = newViewId;
 
       FXViewManager.getInstance().registerView(

package/FXViewController.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentController, ComponentItem } from "./types";
+import { FXComponentController, FXComponentItem } from "./types";
 export declare class FXViewController {
     fxViewId: string;
     updateCallback?: () => void;
@@ -12,7 +12,7 @@ export declare class FXViewController {
      * @param componentId 组件 ID（可选，自动生成）
      * @returns 组件控制器
      */
-    add(component: React.ReactNode, categoryId?: string, componentId?: string): ComponentController;
+    add(component: React.ReactNode, categoryId?: string, componentId?: string): FXComponentController;
     /**
      * 创建但不显示组件
      * @param component 组件内容
@@ -20,7 +20,7 @@ export declare class FXViewController {
      * @param componentId 组件 ID（可选，自动生成）
      * @returns 组件控制器
      */
-    build(component: React.ReactNode, categoryId?: string, componentId?: string): ComponentController;
+    build(component: React.ReactNode, categoryId?: string, componentId?: string): FXComponentController;
     /**
      * 显示已存在的组件
      * @param componentId 组件 ID
@@ -70,7 +70,7 @@ export declare class FXViewController {
      * @param filterOptions 过滤选项
      * @returns 组件列表
      */
-    getComponents(categoryId?: string): ComponentItem[];
+    getComponents(categoryId?: string): FXComponentItem[];
     /**
      * 获取总组件数量
      * @returns 组件数量

package/FXViewController.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FXViewController = void 0;
-const FXViewCategoryController_1 = require("./FXViewCategoryController");
+const FXCategoryController_1 = require("./FXCategoryController");
 class FXViewController {
     constructor(fxViewId) {
         // 存储各分类的控制器
@@ -140,6 +140,7 @@ class FXViewController {
             controller.clearAll();
         });
         this.categoryControllerMap.clear();
+        console.log("FXViewController.clearAll done", this.categoryControllerMap.size);
     }
     /**
      * 清空指定分类的所有组件
@@ -268,7 +269,7 @@ class FXViewController {
         const finalCategoryId = categoryId || "default";
         let categoryController = this.categoryControllerMap.get(finalCategoryId);
         if (!categoryController) {
-            categoryController = new FXViewCategoryController_1.FXViewCategoryController(this.fxViewId, finalCategoryId, this.updateCallback);
+            categoryController = new FXCategoryController_1.FXCategoryController(this.fxViewId, finalCategoryId, this.updateCallback);
             this.categoryControllerMap.set(finalCategoryId, categoryController);
         }
         return categoryController;

package/FXViewController.ts

@@ -1,14 +1,13 @@
 import React from "react";
-import { ComponentController, ComponentItem } from "./types";
-import { FXViewCategoryController } from "./FXViewCategoryController";
+import { FXComponentController, FXComponentItem } from "./types";
+import { FXCategoryController } from "./FXCategoryController";
 
 export class FXViewController {
   public fxViewId: string;
   public updateCallback?: () => void;
 
   // 存储各分类的控制器
-  private categoryControllerMap: Map<string, FXViewCategoryController> =
-    new Map();
+  private categoryControllerMap: Map<string, FXCategoryController> = new Map();
 
   constructor(fxViewId: string) {
     this.fxViewId = fxViewId;
@@ -27,7 +26,7 @@ export class FXViewController {
     component: React.ReactNode,
     categoryId?: string,
     componentId?: string,
-  ): ComponentController {
+  ): FXComponentController {
     console.log("FXViewController.add", `[${this.fxViewId}]`, {
       categoryId,
       componentId,
@@ -48,7 +47,7 @@ export class FXViewController {
     component: React.ReactNode,
     categoryId?: string,
     componentId?: string,
-  ): ComponentController {
+  ): FXComponentController {
     console.log("FXViewController.build", `[${this.fxViewId}]`, {
       categoryId,
       componentId,
@@ -191,6 +190,10 @@ export class FXViewController {
       controller.clearAll();
     });
     this.categoryControllerMap.clear();
+    console.log(
+      "FXViewController.clearAll done",
+      this.categoryControllerMap.size,
+    );
   }
 
   /**
@@ -233,8 +236,8 @@ export class FXViewController {
    * @param filterOptions 过滤选项
    * @returns 组件列表
    */
-  getComponents(categoryId?: string): ComponentItem[] {
-    const result: ComponentItem[] = [];
+  getComponents(categoryId?: string): FXComponentItem[] {
+    const result: FXComponentItem[] = [];
 
     this.categoryControllerMap.forEach((categoryController, category) => {
       // 如果指定了类别，只处理指定类别
@@ -325,7 +328,7 @@ export class FXViewController {
    */
   private getCategoryController(
     categoryId?: string,
-  ): FXViewCategoryController | null {
+  ): FXCategoryController | null {
     const finalCategoryId = categoryId || "default";
     return this.categoryControllerMap.get(finalCategoryId) || null;
   }
@@ -337,13 +340,13 @@ export class FXViewController {
    */
   private getCategoryControllerOrCreate(
     categoryId?: string,
-  ): FXViewCategoryController {
+  ): FXCategoryController {
     const finalCategoryId = categoryId || "default";
 
     let categoryController = this.categoryControllerMap.get(finalCategoryId);
 
     if (!categoryController) {
-      categoryController = new FXViewCategoryController(
+      categoryController = new FXCategoryController(
         this.fxViewId,
         finalCategoryId,
         this.updateCallback,

package/FXViewManager.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-import { ComponentController, ComponentItem } from "./types";
+import { FXComponentController, FXComponentItem, FXLifecycleCallbacks } from "./types";
 import { FXViewController } from "./FXViewController";
 export declare class FXViewManager {
     private static instance;
     private viewControllerMap;
-    private viewControllerQueue;
+    private fxViewIdQueue;
+    private viewLifecycleCallbacks;
     static getInstance(): FXViewManager;
     /**
      * 创建并显示组件
@@ -14,7 +15,7 @@ export declare class FXViewManager {
      * @param componentId 组件 ID（可选，自动生成）
      * @returns 组件控制器
      */
-    add(component: React.ReactNode, fxViewId?: string, categoryId?: string, componentId?: string): ComponentController;
+    add(component: React.ReactNode, fxViewId?: string, categoryId?: string, componentId?: string): FXComponentController;
     /**
      * 创建但不显示组件
      * @param component 组件内容
@@ -23,7 +24,7 @@ export declare class FXViewManager {
      * @param componentId 组件 ID（可选，自动生成）
      * @returns 组件控制器
      */
-    build(component: React.ReactNode, fxViewId?: string, categoryId?: string, componentId?: string): ComponentController;
+    build(component: React.ReactNode, fxViewId?: string, categoryId?: string, componentId?: string): FXComponentController;
     /**
      * 显示已存在的组件
      * @param componentId 组件 ID
@@ -83,6 +84,8 @@ export declare class FXViewManager {
      * @returns 是否成功注销
      */
     unregisterView(fxViewId: string): boolean;
+    registerLifecycleCallbacks(callbacks: FXLifecycleCallbacks): void;
+    unregisterLifecycleCallbacks(callbacks: FXLifecycleCallbacks): void;
     /**
      * 获取最近使用的视图 ID（栈顶）
      * @returns 最近的视图 ID 或 null
@@ -94,7 +97,7 @@ export declare class FXViewManager {
      * @param categoryId 分类 ID（可选）
      * @returns 组件列表
      */
-    getComponents(fxViewId?: string, categoryId?: string): ComponentItem[];
+    getComponents(fxViewId?: string, categoryId?: string): FXComponentItem[];
     /**
      * 获取组件数量
      * @param fxViewId 视图 ID（可选，使用最近的视图）

package/FXViewManager.js

@@ -7,7 +7,8 @@ class FXViewManager {
     constructor() {
         // 存储视图控制器
         this.viewControllerMap = new Map();
-        this.viewControllerQueue = new PriorityQueue_1.PriorityQueue(PriorityQueue_1.HeapType.MAX_HEAP, PriorityQueue_1.PriorityOrder.LIFO);
+        this.fxViewIdQueue = new PriorityQueue_1.PriorityQueue(PriorityQueue_1.HeapType.MAX_HEAP, PriorityQueue_1.PriorityOrder.LIFO);
+        this.viewLifecycleCallbacks = [];
         //#endregion
     }
     static getInstance() {
@@ -196,14 +197,12 @@ class FXViewManager {
         }
         // 注册更新回调
         viewController.registerUpdateCallback(updateCallback);
-        // 更新视图栈（移除旧的引用，添加新的）
-        const existingController = this.viewControllerQueue
-            .getAll()
-            .find((vc) => vc.fxViewId === fxViewId);
-        if (existingController) {
-            this.viewControllerQueue.remove(existingController);
-        }
-        this.viewControllerQueue.enqueue(viewController);
+        this.fxViewIdQueue.remove(fxViewId);
+        this.fxViewIdQueue.enqueue(fxViewId);
+        this.viewLifecycleCallbacks.forEach((callback) => {
+            var _a;
+            (_a = callback.didMount) === null || _a === void 0 ? void 0 : _a.call(callback, fxViewId);
+        });
         return viewController;
     }
     /**
@@ -223,18 +222,29 @@ class FXViewManager {
         // 清空所有组件
         viewController.clearAll();
         // 从队列中移除
-        this.viewControllerQueue.remove(viewController);
+        this.fxViewIdQueue.remove(fxViewId);
         // 从 Map 中删除
         this.viewControllerMap.delete(fxViewId);
+        this.viewLifecycleCallbacks.forEach((callback) => {
+            var _a;
+            (_a = callback.willUnmount) === null || _a === void 0 ? void 0 : _a.call(callback, fxViewId);
+        });
         return true;
     }
+    registerLifecycleCallbacks(callbacks) {
+        console.log("FXViewManager.registerLifecycleCallbacks");
+        this.viewLifecycleCallbacks.push(callbacks);
+    }
+    unregisterLifecycleCallbacks(callbacks) {
+        console.log("FXViewManager.unregisterLifecycleCallbacks");
+        this.viewLifecycleCallbacks = this.viewLifecycleCallbacks.filter((callback) => callback !== callbacks);
+    }
     /**
      * 获取最近使用的视图 ID（栈顶）
      * @returns 最近的视图 ID 或 null
      */
     getLatestFXViewId() {
-        var _a;
-        return ((_a = this.viewControllerQueue.peek()) === null || _a === void 0 ? void 0 : _a.fxViewId) || null;
+        return this.fxViewIdQueue.peek() || null;
     }
     /**
      * 获取组件列表
@@ -327,7 +337,7 @@ class FXViewManager {
             console.warn(`FXViewController ${finalFXViewId} not registered, creating a temporary one`);
             viewController = new FXViewController_1.FXViewController(finalFXViewId);
             this.viewControllerMap.set(finalFXViewId, viewController);
-            this.viewControllerQueue.enqueue(viewController);
+            this.fxViewIdQueue.enqueue(finalFXViewId);
         }
         return viewController;
     }

package/FXViewManager.ts

@@ -1,5 +1,9 @@
 import React from "react";
-import { ComponentController, ComponentItem } from "./types";
+import {
+  FXComponentController,
+  FXComponentItem,
+  FXLifecycleCallbacks,
+} from "./types";
 import { FXViewController } from "./FXViewController";
 import { HeapType, PriorityOrder, PriorityQueue } from "./queue/PriorityQueue";
 
@@ -8,8 +12,11 @@ export class FXViewManager {
 
   // 存储视图控制器
   private viewControllerMap: Map<string, FXViewController> = new Map();
-  private viewControllerQueue: PriorityQueue<FXViewController> =
-    new PriorityQueue(HeapType.MAX_HEAP, PriorityOrder.LIFO);
+  private fxViewIdQueue: PriorityQueue<string> = new PriorityQueue(
+    HeapType.MAX_HEAP,
+    PriorityOrder.LIFO,
+  );
+  private viewLifecycleCallbacks: Array<FXLifecycleCallbacks> = [];
 
   static getInstance(): FXViewManager {
     if (!FXViewManager.instance) {
@@ -33,7 +40,7 @@ export class FXViewManager {
     fxViewId?: string,
     categoryId?: string,
     componentId?: string,
-  ): ComponentController {
+  ): FXComponentController {
     console.log("FXViewManager.add", {
       fxViewId,
       categoryId,
@@ -57,7 +64,7 @@ export class FXViewManager {
     fxViewId?: string,
     categoryId?: string,
     componentId?: string,
-  ): ComponentController {
+  ): FXComponentController {
     console.log("FXViewManager.build", {
       fxViewId,
       categoryId,
@@ -242,16 +249,11 @@ export class FXViewManager {
 
     // 注册更新回调
     viewController.registerUpdateCallback(updateCallback);
-
-    // 更新视图栈（移除旧的引用，添加新的）
-    const existingController = this.viewControllerQueue
-      .getAll()
-      .find((vc) => vc.fxViewId === fxViewId);
-    if (existingController) {
-      this.viewControllerQueue.remove(existingController);
-    }
-    this.viewControllerQueue.enqueue(viewController);
-
+    this.fxViewIdQueue.remove(fxViewId);
+    this.fxViewIdQueue.enqueue(fxViewId);
+    this.viewLifecycleCallbacks.forEach((callback) => {
+      callback.didMount?.(fxViewId);
+    });
     return viewController;
   }
 
@@ -276,20 +278,36 @@ export class FXViewManager {
     viewController.clearAll();
 
     // 从队列中移除
-    this.viewControllerQueue.remove(viewController);
+    this.fxViewIdQueue.remove(fxViewId);
 
     // 从 Map 中删除
     this.viewControllerMap.delete(fxViewId);
 
+    this.viewLifecycleCallbacks.forEach((callback) => {
+      callback.willUnmount?.(fxViewId);
+    });
+
     return true;
   }
 
+  registerLifecycleCallbacks(callbacks: FXLifecycleCallbacks): void {
+    console.log("FXViewManager.registerLifecycleCallbacks");
+    this.viewLifecycleCallbacks.push(callbacks);
+  }
+
+  unregisterLifecycleCallbacks(callbacks: FXLifecycleCallbacks): void {
+    console.log("FXViewManager.unregisterLifecycleCallbacks");
+    this.viewLifecycleCallbacks = this.viewLifecycleCallbacks.filter(
+      (callback) => callback !== callbacks,
+    );
+  }
+
   /**
    * 获取最近使用的视图 ID（栈顶）
    * @returns 最近的视图 ID 或 null
    */
   getLatestFXViewId(): string | null {
-    return this.viewControllerQueue.peek()?.fxViewId || null;
+    return this.fxViewIdQueue.peek() || null;
   }
 
   /**
@@ -298,7 +316,7 @@ export class FXViewManager {
    * @param categoryId 分类 ID（可选）
    * @returns 组件列表
    */
-  getComponents(fxViewId?: string, categoryId?: string): ComponentItem[] {
+  getComponents(fxViewId?: string, categoryId?: string): FXComponentItem[] {
     console.log("FXViewManager.getComponents", { fxViewId, categoryId });
 
     const finalFXViewId = fxViewId || this.getLatestFXViewId();
@@ -403,7 +421,7 @@ export class FXViewManager {
       );
       viewController = new FXViewController(finalFXViewId);
       this.viewControllerMap.set(finalFXViewId, viewController);
-      this.viewControllerQueue.enqueue(viewController);
+      this.fxViewIdQueue.enqueue(finalFXViewId);
     }
 
     return viewController;