@dcl/react-ecs 7.0.6-3807227301.commit-1045452 → 7.0.6-3808564125.commit-7a2650b

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

@@ -0,0 +1,7 @@
+import { ReactEcs } from '../../react-ecs';
+import { EntityPropTypes } from '../types';
+import { UiButtonProps } from './types';
+/**
+ * @public
+ */
+export declare function Button(props: EntityPropTypes & UiButtonProps): ReactEcs.JSX.Element;

package/dist/components/Button/index.js

@@ -0,0 +1,39 @@
+import { ReactEcs } from '../../react-ecs';
+import { parseUiBackground } from '../uiBackground';
+import { parseUiTransform } from '../uiTransform';
+function getButtonProps(props) {
+    if (props.type === 'primary') {
+        return {
+            uiBackground: { color: { r: 0.98, g: 0.17, b: 0.33, a: 1 } },
+            uiText: { color: { r: 1, g: 1, b: 1, a: 1 } }
+        };
+    }
+    if (props.type === 'secondary') {
+        return {
+            uiBackground: { color: { r: 1, g: 1, b: 1, a: 1 } },
+            uiText: { color: { r: 0.98, g: 0.17, b: 0.33, a: 1 } }
+        };
+    }
+    return {};
+}
+/**
+ * @public
+ */
+/*#__PURE__*/
+export function Button(props) {
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...uiTextProps } = props;
+    const buttonProps = getButtonProps(props);
+    const uiBackgroundProps = parseUiBackground({
+        ...buttonProps.uiBackground,
+        ...uiBackground
+    });
+    const textProps = {
+        ...buttonProps.uiText,
+        ...uiTextProps
+    };
+    const uiTransformProps = parseUiTransform({
+        height: 36,
+        ...uiTransform
+    });
+    return (ReactEcs.createElement("entity", { onMouseDown: onMouseDown, onMouseUp: onMouseUp, uiTransform: uiTransformProps, uiText: textProps, uiBackground: uiBackgroundProps }));
+}

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

@@ -0,0 +1,7 @@
+import { PBUiText } from '@dcl/ecs';
+/**
+ * @public
+ */
+export declare type UiButtonProps = PBUiText & {
+    type?: 'primary' | 'secondary';
+};

package/dist/components/Button/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+import { ReactEcs } from '../../react-ecs';
+import { EntityPropTypes } from '../types';
+import { UiDropdownProps } from './types';
+/**
+ * @public
+ */
+export declare function Dropdown(props: EntityPropTypes & UiDropdownProps): ReactEcs.JSX.Element;

package/dist/components/Dropdown/index.js

@@ -0,0 +1,26 @@
+import { parseProps } from '../utils';
+import { ReactEcs } from '../../react-ecs';
+function parseUiDropdown(props) {
+    return {
+        acceptEmpty: false,
+        options: [],
+        selectedIndex: props.acceptEmpty ? -1 : 0,
+        disabled: false,
+        ...props
+    };
+}
+/**
+ * @public
+ */
+/*#__PURE__*/
+export function Dropdown(props) {
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...otherProps } = props;
+    const dropdownProps = parseUiDropdown(otherProps);
+    const commonProps = parseProps({
+        uiTransform,
+        uiBackground,
+        onMouseDown,
+        onMouseUp
+    });
+    return ReactEcs.createElement("entity", { ...commonProps, uiDropdown: dropdownProps });
+}

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

@@ -0,0 +1,7 @@
+import { PBUiDropdown } from '@dcl/ecs';
+/**
+ * @public
+ */
+export declare type UiDropdownProps = Partial<PBUiDropdown> & {
+    onChange?(value: number): void;
+};

package/dist/components/Dropdown/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+import { ReactEcs } from '../../react-ecs';
+import { EntityPropTypes } from '../types';
+import { UiInputProps } from './types';
+/**
+ * @public
+ */
+export declare function Input(props: EntityPropTypes & Partial<UiInputProps>): ReactEcs.JSX.Element;

package/dist/components/Input/index.js

@@ -0,0 +1,24 @@
+import { parseProps } from '../utils';
+import { ReactEcs } from '../../react-ecs';
+function parseUiInput(props) {
+    return {
+        disabled: false,
+        placeholder: '',
+        ...props
+    };
+}
+/**
+ * @public
+ */
+/*#__PURE__*/
+export function Input(props) {
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...otherProps } = props;
+    const inputProps = parseUiInput(otherProps);
+    const commonProps = parseProps({
+        uiTransform,
+        uiBackground,
+        onMouseDown,
+        onMouseUp
+    });
+    return ReactEcs.createElement("entity", { ...commonProps, uiInput: inputProps });
+}

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

@@ -0,0 +1,7 @@
+import { PBUiInput } from '@dcl/ecs';
+/**
+ * @public
+ */
+export declare type UiInputProps = PBUiInput & {
+    onChange?(value: string): void;
+};

package/dist/components/Input/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+import { ReactEcs } from '../../react-ecs';
+import { EntityPropTypes } from '../types';
+import { UiTextProps } from './types';
+/**
+ * @public
+ */
+export declare function Label(props: EntityPropTypes & UiTextProps): ReactEcs.JSX.Element;

package/dist/components/Label/index.js

@@ -0,0 +1,16 @@
+import { parseProps } from '../utils';
+import { ReactEcs } from '../../react-ecs';
+/**
+ * @public
+ */
+/*#__PURE__*/
+export function Label(props) {
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...uiTextProps } = props;
+    const commonProps = parseProps({
+        uiTransform,
+        uiBackground,
+        onMouseDown,
+        onMouseUp
+    });
+    return ReactEcs.createElement("entity", { ...commonProps, uiText: uiTextProps });
+}

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

@@ -0,0 +1,5 @@
+import { PBUiText } from '@dcl/ecs';
+/**
+ * @public
+ */
+export declare type UiTextProps = PBUiText;

package/dist/components/Label/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -5,9 +5,16 @@ export * from './types';
 export { CANVAS_ROOT_ENTITY };
 export * from './uiTransform/types';
 export * from './listeners/types';
+export * from './Input/types';
+export * from './uiBackground/types';
+export * from './Dropdown/types';
+export * from './Label/types';
+export * from './Button/types';
+export { Dropdown } from './Dropdown';
+export { Input } from './Input';
+export { Label } from './Label';
+export { Button } from './Button';
 /**
  * @public
  */
 export declare function UiEntity(props: EntityPropTypes & Partial<CommonProps>): ReactEcs.JSX.Element;
-export declare type ContainerPropTypes = Partial<CommonProps> & EntityPropTypes['uiTransform'];
-export declare function Container({ width, height, children }: ContainerPropTypes): ReactEcs.JSX.Element;

package/dist/components/index.js

@@ -1,17 +1,23 @@
 import { ReactEcs } from '../react-ecs';
-import { parseUiTransform, CANVAS_ROOT_ENTITY } from './uiTransform';
+import { CANVAS_ROOT_ENTITY } from './uiTransform';
+import { parseProps } from './utils';
 export * from './types';
 export { CANVAS_ROOT_ENTITY };
 export * from './uiTransform/types';
 export * from './listeners/types';
+export * from './Input/types';
+export * from './uiBackground/types';
+export * from './Dropdown/types';
+export * from './Label/types';
+export * from './Button/types';
+export { Dropdown } from './Dropdown';
+export { Input } from './Input';
+export { Label } from './Label';
+export { Button } from './Button';
 /**
  * @public
  */
+/*#__PURE__*/
 export function UiEntity(props) {
-    const { uiTransform, ...otherProps } = props;
-    const uiTransformProps = parseUiTransform(uiTransform);
-    return ReactEcs.createElement("entity", { uiTransform: uiTransformProps, ...otherProps });
-}
-export function Container({ width, height, children }) {
-    return (ReactEcs.createElement(UiEntity, { uiTransform: { width, height, display: 0 /* YGDisplay.YGD_FLEX */ } }, children));
+    return ReactEcs.createElement("entity", { ...parseProps(props) });
 }

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

@@ -1,5 +1,6 @@
-import type { EventSystemCallback } from '@dcl/ecs';
+export declare type Callback = () => void;
 export declare type Listeners = {
-    onClick?: EventSystemCallback;
+    onMouseDown?: Callback;
+    onMouseUp?: Callback;
 };
-export declare const isListener: (key: string) => key is "onClick";
+export declare const isListener: (key: string) => key is keyof Listeners;

package/dist/components/listeners/types.js

@@ -1,5 +1,6 @@
 const listeners = {
-    onClick: undefined
+    onMouseDown: undefined,
+    onMouseUp: undefined
 };
 const listenersKey = Object.keys(listeners);
 export const isListener = (key) => listenersKey.includes(key);

package/dist/components/types.d.ts

@@ -1,15 +1,15 @@
-import { PBUiBackground, PBUiText } from '@dcl/ecs/dist/components';
+import { Listeners } from './listeners/types';
+import { UiBackgroundProps } from './uiBackground/types';
 import { UiTransformProps } from './uiTransform/types';
 /**
  * @public
  */
 export declare type EntityPropTypes = {
     uiTransform?: UiTransformProps;
-    uiText?: PBUiText;
-    uiBackground?: PBUiBackground;
-};
+    uiBackground?: UiBackgroundProps;
+} & Listeners;
 export declare type Key = number | string;
-export declare type Children = any;
+export declare type Children = unknown;
 export declare type CommonProps = {
     key: Key;
     children: Children;

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

@@ -0,0 +1,6 @@
+import { PBUiBackground } from '@dcl/ecs';
+import { UiBackgroundProps } from './types';
+/**
+ * @public
+ */
+export declare function parseUiBackground(props: UiBackgroundProps | undefined): PBUiBackground | undefined;

package/dist/components/uiBackground/index.js

@@ -0,0 +1,40 @@
+function isAvatarTexture(props) {
+    return !!props.avatarTexture;
+}
+function isTexture(props) {
+    return !!props.texture;
+}
+function getTexture(props) {
+    if (isTexture(props) && props.texture) {
+        return {
+            tex: {
+                $case: 'texture',
+                texture: props.texture
+            }
+        };
+    }
+    if (isAvatarTexture(props) && props.avatarTexture) {
+        return {
+            tex: {
+                $case: 'avatarTexture',
+                avatarTexture: props.avatarTexture
+            }
+        };
+    }
+    return undefined;
+}
+/**
+ * @public
+ */
+/*#__PURE__*/
+export function parseUiBackground(props) {
+    if (!props || !Object.keys(props).length)
+        return undefined;
+    const texture = getTexture(props);
+    return {
+        ...props,
+        uvs: props.uvs ?? [],
+        texture,
+        textureMode: props.textureMode ?? 1 /* BackgroundTextureMode.CENTER */
+    };
+}

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

@@ -0,0 +1,21 @@
+import { PBUiBackground, Texture, AvatarTexture } from '@dcl/ecs';
+/**
+ * @public
+ */
+export declare type UiBackgroundProps = Partial<Omit<PBUiBackground, 'texture'>> & UiTextureUnion;
+/**
+ * @public
+ */
+export declare type UiTextureUnion = UiAvatarTexture | UiTexture;
+/**
+ * @public
+ */
+export declare type UiAvatarTexture = {
+    avatarTexture?: AvatarTexture;
+};
+/**
+ * @public
+ */
+export declare type UiTexture = {
+    texture?: Texture;
+};

package/dist/components/uiBackground/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/uiTransform/index.js

@@ -1,24 +1,5 @@
 import { parsePosition, parseSize } from './utils';
 export const CANVAS_ROOT_ENTITY = 0;
-/**
- * @public
- */
-export function parseUiTransform(props = {}) {
-    const { position, padding, margin, height, minHeight, maxHeight, width, maxWidth, minWidth, ...otherProps } = props;
-    return {
-        ...defaultUiTransform,
-        ...otherProps,
-        ...parsePosition(position, 'position'),
-        ...parsePosition(margin, 'margin'),
-        ...parsePosition(padding, 'padding'),
-        ...parseSize(height, 'height'),
-        ...parseSize(minHeight, 'minHeight'),
-        ...parseSize(maxHeight, 'maxHeight'),
-        ...parseSize(width, 'width'),
-        ...parseSize(minWidth, 'minWidth'),
-        ...parseSize(maxWidth, 'maxWidth')
-    };
-}
 const defaultUiTransform = {
     parent: CANVAS_ROOT_ENTITY,
     rightOf: 0,
@@ -68,3 +49,23 @@ const defaultUiTransform = {
     widthUnit: 0 /* YGUnit.YGU_UNDEFINED */,
     heightUnit: 0 /* YGUnit.YGU_UNDEFINED */
 };
+/**
+ * @public
+ */
+/*#__PURE__*/
+export function parseUiTransform(props = {}) {
+    const { position, padding, margin, height, minHeight, maxHeight, width, maxWidth, minWidth, ...otherProps } = props;
+    return {
+        ...defaultUiTransform,
+        ...otherProps,
+        ...parsePosition(position, 'position'),
+        ...parsePosition(margin, 'margin'),
+        ...parsePosition(padding, 'padding'),
+        ...parseSize(height, 'height'),
+        ...parseSize(minHeight, 'minHeight'),
+        ...parseSize(maxHeight, 'maxHeight'),
+        ...parseSize(width, 'width'),
+        ...parseSize(minWidth, 'minWidth'),
+        ...parseSize(maxWidth, 'maxWidth')
+    };
+}

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

@@ -1,4 +1,4 @@
-import { YGAlign, YGDisplay, YGFlexDirection, YGJustify, YGOverflow, YGPositionType, YGWrap } from '@dcl/ecs/dist/runtime/types';
+import { YGAlign, YGDisplay, YGFlexDirection, YGJustify, YGOverflow, YGPositionType, YGWrap } from '@dcl/ecs';
 export declare type PositionUnit = `${number}px` | `${number}%` | number;
 /**
  * @public

package/dist/components/utils.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/utils.js

@@ -0,0 +1,17 @@
+import { parseUiBackground } from './uiBackground';
+import { parseUiTransform } from './uiTransform';
+/**
+ * @internal
+ */
+export function parseProps(props) {
+    const { uiTransform, uiBackground, ...otherProps } = props;
+    const uiTransformProps = parseUiTransform(uiTransform);
+    const uiBackgroundProps = uiBackground
+        ? { uiBackground: parseUiBackground(uiBackground) }
+        : undefined;
+    return {
+        ...otherProps,
+        uiTransform: uiTransformProps,
+        ...uiBackgroundProps
+    };
+}

package/dist/react-ecs.d.ts

@@ -1,26 +1,27 @@
-import { EventSystemCallback } from '@dcl/ecs';
-import { PBUiBackground, PBUiText, PBUiTransform } from '@dcl/ecs/dist/components';
+import { PBUiBackground, PBUiText, PBUiTransform, PBUiInput, PBUiDropdown } from '@dcl/ecs';
+import { Callback } from './components';
 import { CommonProps } from './components/types';
 export declare type EcsElements = {
-    entity: Partial<Omit<EntityComponents, 'onClick'> & CommonProps>;
+    entity: Partial<EntityComponents & CommonProps>;
 };
 export declare type EntityComponents = {
     uiTransform: PBUiTransform;
     uiText: PBUiText;
     uiBackground: PBUiBackground;
-    onClick: EventSystemCallback;
+    uiInput: PBUiInput;
+    uiDropdown: PBUiDropdown;
+    onMouseDown: Callback;
+    onMouseUp: Callback;
 };
 export declare namespace JSX {
-    interface Element {
-    }
+    type Element = {} | null;
     type IntrinsicElements = EcsElements;
     interface Component {
     }
 }
 export declare namespace ReactEcs {
     namespace JSX {
-        interface Element {
-        }
+        type Element = {} | null;
         type IntrinsicElements = EcsElements;
         interface Component {
         }

package/dist/reconciler/index.d.ts

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

package/dist/reconciler/index.js

@@ -2,62 +2,56 @@ import * as components from '@dcl/ecs/dist/components';
 import Reconciler from 'react-reconciler';
 import { isListener } from '../components';
 import { CANVAS_ROOT_ENTITY } from '../components/uiTransform';
-import { componentKeys, isEqual, isNotUndefined, noopConfig } from './utils';
-function propsChanged(component, prevProps, nextProps) {
-    if (prevProps && !nextProps) {
-        return { type: 'delete', component };
-    }
-    if (!nextProps) {
-        return;
-    }
-    if (!prevProps && nextProps) {
-        return { type: 'add', props: nextProps, component };
-    }
-    if (isListener(component)) {
-        if (!isEqual(prevProps, nextProps)) {
-            return { type: 'put', component, props: nextProps };
-        }
-    }
-    const changes = {};
-    for (const k in prevProps) {
-        const propKey = k;
-        if (!isEqual(prevProps[propKey], nextProps[propKey])) {
-            changes[propKey] = nextProps[propKey];
-        }
-    }
-    if (!Object.keys(changes).length) {
-        return;
-    }
-    return { type: 'put', props: changes, component };
-}
+import { componentKeys, isNotUndefined, noopConfig, propsChanged } from './utils';
 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
+    const changeEvents = new Map();
+    // Initialize components
     const UiTransform = components.UiTransform(engine);
     const UiText = components.UiText(engine);
     const UiBackground = components.UiBackground(engine);
+    const UiInput = components.UiInput(engine);
+    const UiInputResult = components.UiInputResult(engine);
+    const UiDropdown = components.UiDropdown(engine);
+    const UiDropdownResult = components.UiDropdownResult(engine);
+    // Component ID Helper
     const getComponentId = {
         uiTransform: UiTransform._id,
         uiText: UiText._id,
-        uiBackground: UiBackground._id
+        uiBackground: UiBackground._id,
+        uiInput: UiInput._id,
+        uiDropdown: UiDropdown._id
     };
     function updateTree(instance, props) {
         upsertComponent(instance, props, 'uiTransform');
     }
     function upsertListener(instance, update) {
-        // TODO: This handles only onClick listener for the moment
         if (update.type === 'delete' || !update.props) {
-            pointerEvents.removeOnPointerDown(instance.entity);
+            if (update.component === 'onMouseDown') {
+                pointerEvents.removeOnPointerDown(instance.entity);
+            }
+            else if (update.component === 'onMouseUp') {
+                pointerEvents.removeOnPointerUp(instance.entity);
+            }
             return;
         }
         if (update.props) {
-            pointerEvents.onPointerDown(instance.entity, update.props, {
+            const pointerEvent = update.component === 'onMouseDown'
+                ? pointerEvents.onPointerDown
+                : pointerEvents.onPointerUp;
+            pointerEvent(instance.entity, update.props, {
                 button: 0 /* InputAction.IA_POINTER */,
-                hoverText: ''
+                // We add this showFeedBack so the pointerEventSystem creates a PointerEvent component with our entity
+                // This is needed for the renderer to know which entities are clickeables
+                showFeedback: true
             });
         }
     }
     function removeComponent(instance, component) {
-        const Component = engine.getComponent(getComponentId[component]);
+        const componentId = getComponentId[component];
+        const Component = engine.getComponent(componentId);
         Component.deleteFrom(instance.entity);
     }
     function upsertComponent(instance, props, componentName) {
@@ -67,10 +61,18 @@ export function createReconciler(engine, pointerEvents) {
             Component.create(instance.entity);
         for (const key in props) {
             const keyProp = key;
-            component[keyProp] = props[keyProp];
+            if (key === 'onChange') {
+                const onChange = props[keyProp];
+                updateOnChange(instance.entity, componentId, { fn: onChange });
+            }
+            else {
+                ;
+                component[keyProp] = props[keyProp];
+            }
         }
     }
     function removeChildEntity(instance) {
+        changeEvents.delete(instance.entity);
         engine.removeEntity(instance.entity);
         for (const child of instance._child) {
             removeChildEntity(child);
@@ -116,6 +118,14 @@ export function createReconciler(engine, pointerEvents) {
         parentInstance._child.splice(childIndex, 1);
         removeChildEntity(child);
     }
+    function updateOnChange(entity, componentId, state) {
+        const event = changeEvents.get(entity) ||
+            changeEvents.set(entity, new Map()).get(entity);
+        const oldState = event.get(componentId);
+        const fn = state?.fn;
+        const value = state?.value ?? oldState?.value;
+        event.set(componentId, { fn, value });
+    }
     const hostConfig = {
         ...noopConfig,
         createInstance(type, props) {
@@ -154,7 +164,7 @@ export function createReconciler(engine, pointerEvents) {
                 .map((component) => propsChanged(component, oldProps[component], newProps[component]))
                 .filter(isNotUndefined);
         },
-        commitUpdate(instance, updatePayload, _type, _prevPropsProps, _nextProps, _internalHandle) {
+        commitUpdate(instance, updatePayload, _type, _prevProps, _nextProps, _internalHandle) {
             for (const update of updatePayload) {
                 if (isListener(update.component)) {
                     upsertListener(instance, update);
@@ -180,14 +190,36 @@ export function createReconciler(engine, pointerEvents) {
             child.parent = parentInstance.entity;
             updateTree(child, { rightOf: child.rightOf, parent: child.parent });
             updateTree(beforeChild, { rightOf: beforeChild.rightOf });
+        },
+        removeChildFromContainer(parenInstance, child) {
+            removeChildEntity(child);
         }
     };
     const reconciler = Reconciler(hostConfig);
     const root = reconciler.createContainer({}, 0, null, false, null, '', 
     /* istanbul ignore next */
     function () { }, null);
+    // Maybe this could be something similar to Input system, but since we
+    // are going to use this only here, i prefer to scope it here.
+    function handleOnChange(componentId, resultComponent) {
+        for (const [entity, Result] of engine.getEntitiesWith(resultComponent)) {
+            const entityState = changeEvents.get(entity)?.get(componentId);
+            if (entityState?.fn && Result.value !== entityState.value) {
+                // Call onChange callback and update internal timestamp
+                entityState.fn(Result.value);
+                updateOnChange(entity, componentId, {
+                    fn: entityState.fn,
+                    value: Result.value
+                });
+            }
+        }
+    }
     return {
         update: function (component) {
+            if (changeEvents.size) {
+                handleOnChange(UiInput._id, UiInputResult);
+                handleOnChange(UiDropdown._id, UiDropdownResult);
+            }
             return reconciler.updateContainer(component, root, null);
         },
         getEntities: () => Array.from(entities)

package/dist/reconciler/utils.d.ts

@@ -1,5 +1,6 @@
 import { EntityComponents } from '../react-ecs';
-import { Container, HostContext, Instance, OpaqueHandle, Props, PublicInstance, SuspenseInstance, TextInstance, TimeoutHandle, Type } from './types';
+import { Changes, Container, HostContext, Instance, OpaqueHandle, Props, PublicInstance, SuspenseInstance, TextInstance, TimeoutHandle, Type } from './types';
+export declare function propsChanged<K extends keyof EntityComponents>(component: K, prevProps: Partial<EntityComponents[K]>, nextProps: Partial<EntityComponents[K]>): Changes<K> | undefined;
 export declare const componentKeys: (keyof EntityComponents)[];
 export declare function isEqual<T = unknown>(val1: T, val2: T): boolean;
 export declare const isNotUndefined: <T>(val: T | undefined) => val is T;
@@ -22,7 +23,6 @@ export declare const noopConfig: {
     afterActiveInstanceBlur(): void;
     prepareScopeUpdate(): void;
     getInstanceFromScope(): null;
-    removeChildFromContainer(): void;
     commitMount(_instance: Instance, _type: Type, _props: Props, _internalInstanceHandle: OpaqueHandle): void;
     resetTextContent(_instance: Instance): void;
     commitTextUpdate(_textInstance: TextInstance, _oldText: string, _newText: string): void;

package/dist/reconciler/utils.js

@@ -1,9 +1,40 @@
+import { isListener } from '../components';
+export function propsChanged(component, prevProps, nextProps) {
+    if (prevProps && !nextProps) {
+        return { type: 'delete', component };
+    }
+    if (!nextProps) {
+        return;
+    }
+    if (!prevProps && nextProps) {
+        return { type: 'add', props: nextProps, component };
+    }
+    if (isListener(component)) {
+        if (!isEqual(prevProps, nextProps)) {
+            return { type: 'put', component, props: nextProps };
+        }
+    }
+    const changes = {};
+    for (const k in prevProps) {
+        const propKey = k;
+        if (!isEqual(prevProps[propKey], nextProps[propKey])) {
+            changes[propKey] = nextProps[propKey];
+        }
+    }
+    if (!Object.keys(changes).length) {
+        return;
+    }
+    return { type: 'put', props: changes, component };
+}
 // as any HACK so every time we add a new component, we must add also the component here.
 const entityComponent = {
     uiText: undefined,
     uiBackground: undefined,
     uiTransform: undefined,
-    onClick: undefined
+    onMouseDown: undefined,
+    onMouseUp: undefined,
+    uiInput: undefined,
+    uiDropdown: undefined
 };
 export const componentKeys = Object.keys(entityComponent);
 export function isEqual(val1, val2) {
@@ -85,8 +116,6 @@ export const noopConfig = {
         return null;
     },
     /* istanbul ignore next */
-    removeChildFromContainer() { },
-    /* istanbul ignore next */
     commitMount(_instance, _type, _props, _internalInstanceHandle) { },
     /* istanbul ignore next */
     resetTextContent(_instance) { },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcl/react-ecs",
-  "version": "7.0.6-3807227301.commit-1045452",
+  "version": "7.0.6-3808564125.commit-7a2650b",
   "description": "Decentraland ECS",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -36,5 +36,5 @@
     "dist",
     "tsconfig.json"
   ],
-  "commit": "104545291581dd38595dbfc46135d0f573d306ff"
+  "commit": "7a2650b741ac5f5a5d3f00ac1c955e5f773d679a"
 }