@dcl/react-ecs 7.7.10-13859848918.commit-407cb6b → 7.7.10-13934567813.commit-fb33ab1

package/README.md

@@ -1,131 +1 @@
-# @dcl/react-ecs
-
-React bindings for Decentraland's Entity Component System (ECS), providing a declarative way to build UIs in Decentraland scenes using React's component model and JSX syntax.
-
-## Features
-
-- **Flexbox-based Layout**: Implements a subset of CSS Flexbox for powerful and intuitive UI layouts
-- **React Components**: Familiar React-like component API for building UIs
-- **Type Safety**: Full TypeScript support with proper type definitions
-- **Event Handling**: Support for mouse events and user interactions
-- **Performance**: Optimized reconciliation for minimal runtime overhead
-- **Theme Support**: Built-in light and dark theme system with context-based switching
-
-## Component Guidelines
-
-All components in @dcl/react-ecs must:
-
-- Return JSX.Elements for consistency and composability
-- Support theme integration through context
-- Be reusable and composable with other components
-
-## Installation
-
-```bash
-npm install @dcl/react-ecs
-```
-
-## Basic Usage
-
-```tsx
-import { ReactEcs, UiEntity, Label, Button } from '@dcl/react-ecs'
-
-export function MyUI() {
-  return (
-    <UiEntity
-      uiTransform={{
-        width: 300,
-        height: 100,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      }}
-    >
-      <Label value="Hello Decentraland!" />
-      <Button value="Click Me!" onMouseDown={() => console.log('clicked!')} />
-    </UiEntity>
-  )
-}
-```
-
-## Theme System
-
-The package includes a theme system for consistent UI styling:
-
-```tsx
-import { ReactEcs, ThemeProvider, Button } from '@dcl/react-ecs'
-
-// Wrap your UI with ThemeProvider
-export function MyUI() {
-  return (
-    <ThemeProvider>
-      <Button value="Theme-Aware Button" />
-    </ThemeProvider>
-  )
-}
-
-// Use themes in custom components
-function CustomComponent() {
-  const { theme, toggleTheme } = React.useContext(ThemeContext)
-
-  return (
-    <UiEntity
-      uiBackground={{
-        color: theme === 'light' ? '#FFFFFF' : '#000000'
-      }}
-      onMouseDown={toggleTheme}
-    />
-  )
-}
-```
-
-## Components
-
-### Core Components
-
-- **UiEntity**: Base component for UI elements
-- **Label**: Text display component
-- **Button**: Interactive button component
-- **Input**: Text input field
-- **Dropdown**: Selection dropdown menu
-
-### Layout System
-
-The layout system is based on Flexbox and supports the following properties:
-
-- `display: 'flex'`
-- `flexDirection: 'row' | 'column'`
-- `justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around'`
-- `alignItems: 'flex-start' | 'center' | 'flex-end' | 'stretch'`
-- `width`, `height`
-- `margin`, `padding`
-- `positionType: 'absolute' | 'relative'`
-
-## Event Handling
-
-Components support the following mouse events:
-
-```tsx
-<Button onMouseDown={() => {}} onMouseUp={() => {}} onMouseEnter={() => {}} onMouseLeave={() => {}} />
-```
-
-## Technical Details
-
-The package implements a custom React reconciler that bridges React's component model with Decentraland's ECS. It:
-
-1. Translates JSX into ECS entities and components
-2. Manages component lifecycle and updates
-3. Handles event delegation and bubbling
-4. Provides a performant update mechanism
-
-## Related Documentation
-
-For more details about the UI system architecture and design decisions:
-
-- [ADR-124: Implementing Flexbox-based UI](https://adr.decentraland.org/adr/ADR-124)
-- [ADR-125: User Interface Components](https://adr.decentraland.org/adr/ADR-125)
-- [ADR-237: SDK 7 Custom UI Components](https://adr.decentraland.org/adr/ADR-237)
-
-## License
-
-Apache 2.0
+# React ECS

package/dist/components/Button/index.js

@@ -29,7 +29,7 @@ function getButtonProps(props) {
  */
 /* @__PURE__ */
 export function Button(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseDrag, onMouseDragLocked, onMouseDragEnd, ...otherProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props;
     const buttonProps = getButtonProps(props);
     const uiBackgroundProps = parseUiBackground({
         ...buttonProps.uiBackground,
@@ -54,5 +54,5 @@ export function Button(props) {
         if (uiBackgroundProps && uiBackgroundProps.color)
             uiBackgroundProps.color.a /= 2;
     }
-    return (ReactEcs.createElement("entity", { onMouseDown: !!props.disabled ? undefined : onMouseDown, onMouseUp: !!props.disabled ? undefined : onMouseUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDrag: onMouseDrag, onMouseDragLocked: onMouseDragLocked, onMouseDragEnd: onMouseDragEnd, uiTransform: uiTransformProps, uiText: textProps, uiBackground: uiBackgroundProps }));
+    return (ReactEcs.createElement("entity", { onMouseDown: !!props.disabled ? undefined : onMouseDown, onMouseUp: !!props.disabled ? undefined : onMouseUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, uiTransform: uiTransformProps, uiText: textProps, uiBackground: uiBackgroundProps }));
 }

package/dist/components/Dropdown/index.js

@@ -34,7 +34,7 @@ function parseUiDropdown(props) {
  */
 /* @__PURE__ */
 export function Dropdown(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseDrag, onMouseDragLocked, onMouseDragEnd, ...otherProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props;
     const dropdownProps = parseUiDropdown(otherProps);
     const commonProps = parseProps({
         uiTransform,
@@ -42,10 +42,7 @@ export function Dropdown(props) {
         onMouseDown,
         onMouseUp,
         onMouseEnter,
-        onMouseLeave,
-        onMouseDrag,
-        onMouseDragLocked,
-        onMouseDragEnd
+        onMouseLeave
     });
     return ReactEcs.createElement("entity", { ...commonProps, uiDropdown: dropdownProps });
 }

package/dist/components/Input/index.js

@@ -35,7 +35,7 @@ function parseUiInput(props) {
  * @category Component
  */ /* @__PURE__ */
 export function Input(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseDrag, onMouseDragLocked, onMouseDragEnd, ...otherProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props;
     const inputProps = parseUiInput(otherProps);
     const commonProps = parseProps({
         uiTransform,
@@ -43,10 +43,7 @@ export function Input(props) {
         onMouseDown,
         onMouseUp,
         onMouseEnter,
-        onMouseLeave,
-        onMouseDrag,
-        onMouseDragLocked,
-        onMouseDragEnd
+        onMouseLeave
     });
     return ReactEcs.createElement("entity", { ...commonProps, uiInput: inputProps });
 }

package/dist/components/Label/index.js

@@ -16,17 +16,14 @@ export { scaleFontSize } from './utils';
  */
 /* @__PURE__ */
 export function Label(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseDrag, onMouseDragLocked, onMouseDragEnd, ...uiTextProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...uiTextProps } = props;
     const commonProps = parseProps({
         uiTransform,
         uiBackground,
         onMouseDown,
         onMouseUp,
         onMouseEnter,
-        onMouseLeave,
-        onMouseDrag,
-        onMouseDragLocked,
-        onMouseDragEnd
+        onMouseLeave
     });
     const { font, textAlign, fontSize, textWrap, ...textProps } = uiTextProps;
     const uiText = {
@@ -34,9 +31,7 @@ export function Label(props) {
         ...getFont(font),
         ...getTextAlign(textAlign),
         ...getFontSize(fontSize),
-        ...getTextWrap(textWrap),
-        outlineWidth: props.outlineWidth,
-        outlineColor: props.outlineColor
+        ...getTextWrap(textWrap)
     };
     return ReactEcs.createElement("entity", { ...commonProps, uiText: uiText });
 }

package/dist/components/Label/types.d.ts

@@ -15,10 +15,6 @@ export interface UiLabelProps {
     textAlign?: TextAlignType | undefined;
     /** Label font type. @defaultValue 'sans-serif' */
     font?: UiFontType | undefined;
-    /** Outline width of the text. @defaultValue 0 */
-    outlineWidth?: number | undefined;
-    /** Outline color of the text. @defaultValue `{ r: 0, g: 0, b: 0, a: 1 }` */
-    outlineColor?: Color4 | undefined;
     /** Behaviour when text reached. @defaultValue 'wrap' */
     textWrap?: UiTextWrapType | undefined;
 }

package/dist/components/listeners/types.d.ts

@@ -16,10 +16,4 @@ export type Listeners = {
     onMouseEnter?: Callback;
     /** triggered on mouse leave event */
     onMouseLeave?: Callback;
-    /** triggered on mouse drag event */
-    onMouseDrag?: Callback;
-    /** triggered on mouse drag event */
-    onMouseDragLocked?: Callback;
-    /** triggered on mouse drag event */
-    onMouseDragEnd?: Callback;
 };

package/dist/components/listeners/types.js

@@ -2,10 +2,7 @@ const listeners = {
     onMouseDown: undefined,
     onMouseUp: undefined,
     onMouseEnter: undefined,
-    onMouseLeave: undefined,
-    onMouseDrag: undefined,
-    onMouseDragLocked: undefined,
-    onMouseDragEnd: undefined
+    onMouseLeave: undefined
 };
 const listenersKey = Object.keys(listeners);
 /**

package/dist/components/uiBackground/types.d.ts

@@ -1,4 +1,4 @@
-import { BorderRect, Entity } from '@dcl/ecs';
+import { BorderRect } from '@dcl/ecs';
 import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
 /**
  * @public
@@ -15,8 +15,6 @@ export interface UiBackgroundProps {
     uvs?: number[];
     /** AvatarTexture for the background */
     avatarTexture?: UiAvatarTexture;
-    /** VideoTexture for the background */
-    videoTexture?: UiVideoTexture;
     /** Texture for the background */
     texture?: UiTexture;
 }
@@ -29,15 +27,6 @@ export interface UiAvatarTexture {
     wrapMode?: TextureWrapType;
     filterMode?: TextureFilterType;
 }
-/**
- * Texture
- * @public
- */
-export interface UiVideoTexture {
-    videoPlayerEntity: Entity;
-    wrapMode?: TextureWrapType;
-    filterMode?: TextureFilterType;
-}
 /**
  * Texture
  * @public

package/dist/components/uiBackground/utils.js

@@ -30,14 +30,6 @@ export function getTexture(props) {
             }
         };
     }
-    if (props.videoTexture) {
-        return {
-            tex: {
-                $case: 'videoTexture',
-                videoTexture: parseTexture(props.videoTexture)
-            }
-        };
-    }
     return undefined;
 }
 function parseTexture(texture) {

package/dist/components/uiTransform/index.d.ts

@@ -1,5 +1,5 @@
-import { PBUiTransform } from '@dcl/ecs/dist/components';
 import { UiTransformProps } from './types';
+import { PBUiTransform } from '@dcl/ecs/dist/components';
 /**
  * @public
  */

package/dist/components/uiTransform/index.js

@@ -1,4 +1,4 @@
-import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, getScrollPosition, getScrollVisible, parsePosition, parseSize } from './utils';
+import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, parsePosition, parseSize } from './utils';
 /**
  * @internal
  */
@@ -51,16 +51,14 @@ const defaultUiTransform = {
     flexBasisUnit: 0 /* YGUnit.YGU_UNDEFINED */,
     widthUnit: 3 /* YGUnit.YGU_AUTO */,
     heightUnit: 0 /* YGUnit.YGU_UNDEFINED */,
-    pointerFilter: 0 /* PointerFilterMode.PFM_NONE */,
-    opacity: 1,
-    zIndex: 0
+    pointerFilter: 0 /* PointerFilterMode.PFM_NONE */
 };
 /**
  * @public
  */
 /* @__PURE__ */
 export function parseUiTransform(props = {}) {
-    const { scrollPosition, scrollVisible, height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, zIndex, ...otherProps } = props;
+    const { height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, ...otherProps } = props;
     return {
         ...defaultUiTransform,
         ...otherProps,
@@ -83,9 +81,6 @@ export function parseUiTransform(props = {}) {
         // Optional values
         ...(alignContent && getAlign('alignContent', alignContent)),
         ...(alignItems && getAlign('alignItems', alignItems)),
-        ...(flexWrap && getFlexWrap(flexWrap)),
-        ...(scrollPosition && getScrollPosition(scrollPosition)),
-        ...(scrollVisible && getScrollVisible(scrollVisible)),
-        ...(zIndex && { zIndex })
+        ...(flexWrap && getFlexWrap(flexWrap))
     };
 }

package/dist/components/uiTransform/types.d.ts

@@ -1,4 +1,3 @@
-import { Vector2 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/vectors.gen';
 import { ScaleUnit } from '../types';
 /**
  * unit value specified. i.e. 1 || '100%' || '1px' || '10vw'
@@ -63,11 +62,6 @@ export type PositionType = 'absolute' | 'relative';
  * The pointer filter property determines if the ui element blocks the pointer or not (elements with pointer events always block the pointer regardless of this property)
  */
 export type PointerFilterType = 'none' | 'block';
-/**
- * @public
- * The scroll-visible determines if the scrollbars are shown when the scroll overflow is enabled
- */
-export type ScrollVisibleType = 'horizontal' | 'vertical' | 'both' | 'hidden';
 /**
  * Layout props to position things in the canvas
  * @public
@@ -119,14 +113,4 @@ export interface UiTransformProps {
     overflow?: OverflowType;
     /** The pointer filter property determines if the ui element blocks the pointer or not (elements with pointer events always block the pointer regardless of this property) **/
     pointerFilter?: PointerFilterType;
-    /** The opacity property sets the opacity level for an element, it's accumulated across children @defaultValue 1 */
-    opacity?: number;
-    /** A reference value to identify the element, default empty */
-    elementId?: string;
-    /** default position=(0,0) if it aplies, a vector or a reference-id */
-    scrollPosition?: Vector2 | string;
-    /** default ShowScrollBar.SSB_BOTH */
-    scrollVisible?: ScrollVisibleType;
-    /** default 0 */
-    zIndex?: number;
 }

package/dist/components/uiTransform/utils.js

@@ -184,40 +184,3 @@ const parsePointerFilter = {
     none: 0 /* PointerFilterMode.PFM_NONE */,
     block: 1 /* PointerFilterMode.PFM_BLOCK */
 };
-/**
- * @internal
- */
-export function getScrollPosition(scrollPosition) {
-    if (typeof scrollPosition === 'string') {
-        return {
-            scrollPosition: {
-                value: {
-                    $case: 'reference',
-                    reference: scrollPosition
-                }
-            }
-        };
-    }
-    else {
-        return {
-            scrollPosition: {
-                value: {
-                    $case: 'position',
-                    position: scrollPosition
-                }
-            }
-        };
-    }
-}
-const parseScrollVisible = {
-    both: 0 /* ShowScrollBar.SSB_BOTH */,
-    hidden: 3 /* ShowScrollBar.SSB_HIDDEN */,
-    horizontal: 2 /* ShowScrollBar.SSB_ONLY_HORIZONTAL */,
-    vertical: 1 /* ShowScrollBar.SSB_ONLY_VERTICAL */
-};
-/**
- * @internal
- */
-export function getScrollVisible(scrollVisible) {
-    return { scrollVisible: parseScrollVisible[scrollVisible] };
-}

package/dist/react-ecs.d.ts

@@ -22,9 +22,6 @@ export type EntityComponents = {
     onMouseUp: Callback;
     onMouseEnter: Callback;
     onMouseLeave: Callback;
-    onMouseDrag: Callback;
-    onMouseDragLocked: Callback;
-    onMouseDragEnd: Callback;
 };
 /**
  * @hidden

package/dist/reconciler/index.d.ts

@@ -1,7 +1,6 @@
 import { Entity, IEngine, PointerEventsSystem } from '@dcl/ecs';
 import { ReactEcs } from '../react-ecs';
-export interface DclReconciler {
-    update: (component: ReactEcs.JSX.ReactNode) => void;
+export declare function createReconciler(engine: Pick<IEngine, 'getComponent' | 'addEntity' | 'removeEntity' | 'defineComponentFromSchema' | 'getEntitiesWith'>, pointerEvents: PointerEventsSystem): {
+    update: (component: ReactEcs.JSX.ReactNode) => number;
     getEntities: () => Entity[];
-}
-export declare function createReconciler(engine: Pick<IEngine, 'getComponent' | 'addEntity' | 'removeEntity' | 'defineComponentFromSchema' | 'getEntitiesWith'>, pointerEvents: PointerEventsSystem, rootEntity: Entity | undefined): DclReconciler;
+};

package/dist/reconciler/index.js

@@ -8,14 +8,11 @@ function getPointerEnum(pointerKey) {
         onMouseDown: 1 /* PointerEventType.PET_DOWN */,
         onMouseUp: 0 /* PointerEventType.PET_UP */,
         onMouseEnter: 2 /* PointerEventType.PET_HOVER_ENTER */,
-        onMouseLeave: 3 /* PointerEventType.PET_HOVER_LEAVE */,
-        onMouseDrag: 5 /* PointerEventType.PET_DRAG */,
-        onMouseDragLocked: 4 /* PointerEventType.PET_DRAG_LOCKED */,
-        onMouseDragEnd: 6 /* PointerEventType.PET_DRAG_END */
+        onMouseLeave: 3 /* PointerEventType.PET_HOVER_LEAVE */
     };
     return pointers[pointerKey];
 }
-export function createReconciler(engine, pointerEvents, rootEntity) {
+export function createReconciler(engine, pointerEvents) {
     // Store all the entities so when we destroy the UI we can also destroy them
     const entities = new Set();
     // Store the onChange callbacks to be runned every time a Result has changed
@@ -29,8 +26,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
     const UiInputResult = components.UiInputResult(engine);
     const UiDropdown = components.UiDropdown(engine);
     const UiDropdownResult = components.UiDropdownResult(engine);
-    const UiScrollResult = components.UiScrollResult(engine);
-    const Transform = components.Transform(engine);
     // Component ID Helper
     const getComponentId = {
         uiTransform: UiTransform.componentId,
@@ -63,15 +58,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
             else if (update.component === 'onMouseLeave') {
                 pointerEvents.removeOnPointerHoverLeave(instance.entity);
             }
-            else if (update.component === 'onMouseDrag') {
-                pointerEvents.removeOnPointerDrag(instance.entity);
-            }
-            else if (update.component === 'onMouseDragLocked') {
-                pointerEvents.removeOnPointerDragLocked(instance.entity);
-            }
-            else if (update.component === 'onMouseDragEnd') {
-                pointerEvents.removeOnPointerDragEnd(instance.entity);
-            }
             return;
         }
         if (update.props) {
@@ -87,13 +73,7 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
                     ? pointerEvents.onPointerUp
                     : update.component === 'onMouseEnter'
                         ? pointerEvents.onPointerHoverEnter
-                        : update.component === 'onMouseLeave'
-                            ? pointerEvents.onPointerHoverLeave
-                            : update.component === 'onMouseDrag'
-                                ? pointerEvents.onPointerDrag
-                                : update.component === 'onMouseDragLocked'
-                                    ? pointerEvents.onPointerDragLocked
-                                    : update.component === 'onMouseDragEnd' && pointerEvents.onPointerDragEnd;
+                        : update.component === 'onMouseLeave' && pointerEvents.onPointerHoverLeave;
             if (pointerEventSystem) {
                 pointerEventSystem({
                     entity: instance.entity,
@@ -144,7 +124,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
     }
     function removeChildEntity(instance) {
         changeEvents.delete(instance.entity);
-        clickEvents.delete(instance.entity);
         engine.removeEntity(instance.entity);
         for (const child of instance._child) {
             removeChildEntity(child);
@@ -191,32 +170,18 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
         removeChildEntity(child);
     }
     function updateOnChange(entity, componentId, state) {
-        const hasEvent = changeEvents.has(entity);
         const event = changeEvents.get(entity) || changeEvents.set(entity, new Map()).get(entity);
+        const oldState = event.get(componentId);
         const onChangeCallback = state?.onChangeCallback;
         const onSubmitCallback = state?.onSubmitCallback;
-        event.set(componentId, { onChangeCallback, onSubmitCallback });
-        // Create onChange callback if its the first callback event for this entity
-        if (!hasEvent) {
-            const resultComponentId = componentId === UiDropdown.componentId ? UiDropdownResult.componentId : UiInputResult.componentId;
-            engine.getComponent(resultComponentId).onChange(entity, (value) => {
-                if (value?.isSubmit) {
-                    const onSubmit = changeEvents.get(entity)?.get(componentId)?.onSubmitCallback;
-                    onSubmit && onSubmit(value?.value);
-                }
-                const onChange = changeEvents.get(entity)?.get(componentId)?.onChangeCallback;
-                onChange && onChange(value?.value);
-            });
-        }
+        const value = state?.value ?? oldState?.value;
+        const isSubmit = state?.isSubmit ?? oldState?.isSubmit;
+        event.set(componentId, { onChangeCallback, onSubmitCallback, value, isSubmit });
     }
     const hostConfig = {
         ...noopConfig,
         createInstance(type, props) {
             const entity = engine.addEntity();
-            // set root
-            if (rootEntity !== undefined) {
-                Transform.createOrReplace(entity, { parent: rootEntity });
-            }
             entities.add(entity);
             const instance = {
                 entity,
@@ -311,8 +276,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
             if (changeEvents.size) {
                 handleOnChange(UiInput.componentId, UiInputResult);
                 handleOnChange(UiDropdown.componentId, UiDropdownResult);
-                // TODO: maybe as componentId could be a virtual id since the scroll input doesn't exist
-                handleOnChange(UiTransform.componentId, UiScrollResult);
             }
             return reconciler.updateContainer(component, root, null);
         },

package/dist/reconciler/utils.js

@@ -35,9 +35,6 @@ const entityComponent = {
     onMouseUp: undefined,
     onMouseEnter: undefined,
     onMouseLeave: undefined,
-    onMouseDrag: undefined,
-    onMouseDragLocked: undefined,
-    onMouseDragEnd: undefined,
     uiInput: undefined,
     uiDropdown: undefined
 };

package/dist/system.d.ts

@@ -1,4 +1,3 @@
-import type { Entity, IEngine, PointerEventsSystem } from '@dcl/ecs';
 import type { ReactEcs } from './react-ecs';
 /**
  * @public
@@ -10,9 +9,4 @@ export type UiComponent = () => ReactEcs.JSX.ReactNode;
 export interface ReactBasedUiSystem {
     destroy(): void;
     setUiRenderer(ui: UiComponent): void;
-    setTextureRenderer(entity: Entity, ui: UiComponent): void;
 }
-/**
- * @public
- */
-export declare function createReactBasedUiSystem(engine: IEngine, pointerSystem: PointerEventsSystem): ReactBasedUiSystem;

package/dist/system.js

@@ -1,17 +1,13 @@
 import { createReconciler } from './reconciler';
 /**
- * @public
+ * @internal
  */
 export function createReactBasedUiSystem(engine, pointerSystem) {
-    const renderer = createReconciler(engine, pointerSystem, undefined);
+    const renderer = createReconciler(engine, pointerSystem);
     let uiComponent = undefined;
-    const textureRenderersAndUis = [];
     function ReactBasedUiSystem() {
         if (uiComponent)
             renderer.update(uiComponent());
-        for (const [textureRenderer, ui] of textureRenderersAndUis) {
-            textureRenderer.update(ui());
-        }
     }
     engine.addSystem(ReactBasedUiSystem, 100e3, '@dcl/react-ecs');
     return {
@@ -20,20 +16,9 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
             for (const entity of renderer.getEntities()) {
                 engine.removeEntity(entity);
             }
-            for (const [textureRenderer, _] of textureRenderersAndUis) {
-                for (const entity of textureRenderer.getEntities()) {
-                    engine.removeEntity(entity);
-                }
-            }
-            for (const entity of renderer.getEntities()) {
-                engine.removeEntity(entity);
-            }
         },
         setUiRenderer(ui) {
             uiComponent = ui;
-        },
-        setTextureRenderer(entity, ui) {
-            textureRenderersAndUis.push([createReconciler(engine, pointerSystem, entity), ui]);
         }
     };
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dcl/react-ecs",
   "description": "Decentraland ECS",
-  "version": "7.7.10-13859848918.commit-407cb6b",
+  "version": "7.7.10-13934567813.commit-fb33ab1",
   "author": "DCL",
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
-    "@dcl/ecs": "7.7.10-13859848918.commit-407cb6b",
+    "@dcl/ecs": "7.7.10-13934567813.commit-fb33ab1",
     "react": "^18.2.0",
     "react-reconciler": "^0.29.0"
   },
@@ -40,5 +40,5 @@
     "tsconfig": "./tsconfig.json"
   },
   "types": "./dist/index.d.ts",
-  "commit": "407cb6b9e6b0e16978d3806623bca41a268a3f1e"
+  "commit": "fb33ab1d245c23eac7eb4244af9355e455da1af4"
 }