@dcl/react-ecs 7.17.1-21043804740.commit-3c928e0 → 7.17.1-21217092165.commit-1c2ff72

package/dist/system.d.ts

@@ -1,4 +1,4 @@
-import type { IEngine, PointerEventsSystem } from '@dcl/ecs';
+import { type Entity, type IEngine, type PointerEventsSystem } from '@dcl/ecs';
 import type { ReactEcs } from './react-ecs';
 /**
  * @public
@@ -10,6 +10,25 @@ export type UiComponent = () => ReactEcs.JSX.ReactNode;
 export interface ReactBasedUiSystem {
     destroy(): void;
     setUiRenderer(ui: UiComponent): void;
+    /**
+     * Add a UI renderer associated with an entity. The UI will be automatically cleaned up
+     * when the entity is removed from the engine.
+     *
+     * If a renderer is already associated with the given entity, it will be replaced.
+     *
+     * This allows dynamically adding UI Renderers that are rendered alongside the main
+     * UI set via setUiRenderer().
+     *
+     * @param entity - The entity to associate with this UI renderer. When the entity is removed,
+     *                 the UI renderer is automatically cleaned up.
+     * @param ui - The UI component to render
+     */
+    addUiRenderer(entity: Entity, ui: UiComponent): void;
+    /**
+     * Remove a previously added UI renderer by its associated entity.
+     * @param entity - The entity whose UI renderer should be removed
+     */
+    removeUiRenderer(entity: Entity): void;
 }
 /**
  * @public

package/dist/system.js

@@ -1,3 +1,4 @@
+import { EntityState } from '@dcl/ecs';
 import React from 'react';
 import { createReconciler } from './reconciler';
 /**
@@ -6,9 +7,34 @@ import { createReconciler } from './reconciler';
 export function createReactBasedUiSystem(engine, pointerSystem) {
     const renderer = createReconciler(engine, pointerSystem);
     let uiComponent = undefined;
+    const additionalRenderers = new Map();
     function ReactBasedUiSystem() {
-        if (uiComponent)
-            renderer.update(React.createElement(uiComponent));
+        const components = [];
+        // Add main UI component
+        if (uiComponent) {
+            components.push(React.createElement(uiComponent, { key: '__main__' }));
+        }
+        const entitiesToRemove = [];
+        for (const [entity, component] of additionalRenderers) {
+            // Check for entity-based cleanup
+            if (engine.getEntityState(entity) === EntityState.Removed) {
+                entitiesToRemove.push(entity);
+            }
+            else {
+                components.push(React.createElement(component, { key: `__entity_${entity}__` }));
+            }
+        }
+        // Entity-based cleanup
+        for (const entity of entitiesToRemove) {
+            additionalRenderers.delete(entity);
+        }
+        // Always update the renderer - pass null when empty to clear the UI
+        if (components.length > 0) {
+            renderer.update(React.createElement(React.Fragment, null, ...components));
+        }
+        else {
+            renderer.update(null);
+        }
     }
     engine.addSystem(ReactBasedUiSystem, 100e3, '@dcl/react-ecs');
     return {
@@ -20,6 +46,12 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
         },
         setUiRenderer(ui) {
             uiComponent = ui;
+        },
+        addUiRenderer(entity, ui) {
+            additionalRenderers.set(entity, ui);
+        },
+        removeUiRenderer(entity) {
+            additionalRenderers.delete(entity);
         }
     };
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dcl/react-ecs",
   "description": "Decentraland ECS",
-  "version": "7.17.1-21043804740.commit-3c928e0",
+  "version": "7.17.1-21217092165.commit-1c2ff72",
   "author": "DCL",
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
-    "@dcl/ecs": "7.17.1-21043804740.commit-3c928e0",
+    "@dcl/ecs": "7.17.1-21217092165.commit-1c2ff72",
     "react": "^18.2.0",
     "react-reconciler": "^0.29.0"
   },
@@ -40,5 +40,5 @@
     "tsconfig": "./tsconfig.json"
   },
   "types": "./dist/index.d.ts",
-  "commit": "3c928e0a4e46c8020bd70368e02a57efb6f5788c"
+  "commit": "1c2ff7242cd11eb981666a8318f670c0b302813b"
 }