@dcl/react-ecs 0.0.1-3548419522.commit-ddcf4b7 → 7.0.0

package/dist/react-ecs.d.ts

@@ -0,0 +1,29 @@
+import { EventSystemCallback } from '@dcl/ecs';
+import { PBUiBackground, PBUiText, PBUiTransform } from '@dcl/ecs/dist/components';
+import { CommonProps } from './components/types';
+export declare type EcsElements = {
+    entity: Partial<Omit<EntityComponents, 'onClick'> & CommonProps>;
+};
+export declare type EntityComponents = {
+    uiTransform: PBUiTransform;
+    uiText: PBUiText;
+    uiBackground: PBUiBackground;
+    onClick: EventSystemCallback;
+};
+export declare namespace JSX {
+    interface Element {
+    }
+    type IntrinsicElements = EcsElements;
+    interface Component {
+    }
+}
+export declare namespace ReactEcs {
+    namespace JSX {
+        interface Element {
+        }
+        type IntrinsicElements = EcsElements;
+        interface Component {
+        }
+    }
+    const createElement: any;
+}

package/dist/react-ecs.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export var ReactEcs;
+(function (ReactEcs) {
+    ReactEcs.createElement = React.createElement;
+})(ReactEcs || (ReactEcs = {}));

package/dist/reconciler/index.d.ts

@@ -0,0 +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): {
+    update: (component: JSX.Element) => number;
+    getEntities: () => unknown[];
+};

package/dist/reconciler/index.js

@@ -0,0 +1,198 @@
+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';
+// TODO: export InputAction types.
+const IA_POINTER = 0;
+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 = {};
+    // TODO: array and object types. For now only primitives
+    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 };
+}
+export function createReconciler(engine, pointerEvents) {
+    const entities = new Set();
+    const UiTransform = components.UiTransform(engine);
+    const UiText = components.UiText(engine);
+    const UiBackground = components.UiBackground(engine);
+    const getComponentId = {
+        uiTransform: UiTransform._id,
+        uiText: UiText._id,
+        uiBackground: UiBackground._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);
+            return;
+        }
+        if (update.props) {
+            pointerEvents.onPointerDown(instance.entity, update.props, {
+                button: IA_POINTER,
+                hoverText: ''
+            });
+        }
+    }
+    function removeComponent(instance, component) {
+        const Component = engine.getComponent(getComponentId[component]);
+        Component.deleteFrom(instance.entity);
+    }
+    function upsertComponent(instance, props, componentName) {
+        const componentId = getComponentId[componentName];
+        const Component = engine.getComponent(componentId);
+        const component = Component.getMutableOrNull(instance.entity) ||
+            Component.create(instance.entity);
+        for (const key in props) {
+            const keyProp = key;
+            component[keyProp] = props[keyProp];
+        }
+    }
+    function removeChildEntity(instance) {
+        engine.removeEntity(instance.entity);
+        for (const child of instance._child) {
+            removeChildEntity(child);
+        }
+    }
+    function appendChild(parent, child) {
+        if (!child || !Object.keys(parent).length)
+            return;
+        const isReorder = parent._child.find((c) => c.entity === child.entity);
+        // If its a reorder its seems that its a mutation of an array with key prop
+        // We need to move the child to the end of the array
+        // And update the order of the parent_.child array
+        // child.rightOf => Latest entity of the array
+        // childThatWasAtRightOfEntity = childEntity.rightOf
+        if (isReorder) {
+            const rightOfChild = parent._child.find((c) => c.rightOf === child.entity);
+            if (rightOfChild) {
+                rightOfChild.rightOf = child.rightOf;
+                // Re-order parent._child array
+                parent._child = parent._child.filter((c) => c.entity !== child.entity);
+                parent._child.push(child);
+                updateTree(rightOfChild, { rightOf: rightOfChild.rightOf });
+            }
+            // Its a re-order. We are the last element, so we need to fetch the element before us.
+            child.rightOf = parent._child[parent._child.length - 2]?.entity;
+        }
+        else {
+            // Its an append. Put it at the end
+            child.rightOf = parent._child[parent._child.length - 1]?.entity;
+            parent._child.push(child);
+        }
+        child.parent = parent.entity;
+        updateTree(child, { rightOf: child.rightOf, parent: parent.entity });
+    }
+    function removeChild(parentInstance, child) {
+        const childIndex = parentInstance._child.findIndex((c) => c.entity === child.entity);
+        const childToModify = parentInstance._child[childIndex + 1];
+        if (childToModify) {
+            childToModify.rightOf = child.rightOf;
+            updateTree(childToModify, { rightOf: child.rightOf });
+        }
+        // Mutate 💀
+        parentInstance._child.splice(childIndex, 1);
+        removeChildEntity(child);
+    }
+    const hostConfig = {
+        ...noopConfig,
+        createInstance(type, props) {
+            const entity = engine.addEntity();
+            entities.add(entity);
+            const instance = {
+                entity,
+                _child: [],
+                parent: CANVAS_ROOT_ENTITY,
+                rightOf: undefined
+            };
+            for (const key in props) {
+                const keyTyped = key;
+                if (keyTyped === 'children' || keyTyped === 'key') {
+                    continue;
+                }
+                if (isListener(keyTyped)) {
+                    upsertListener(instance, {
+                        type: 'add',
+                        props: props[keyTyped],
+                        component: keyTyped
+                    });
+                }
+                else {
+                    upsertComponent(instance, props[keyTyped], keyTyped);
+                }
+            }
+            return instance;
+        },
+        appendChild,
+        appendChildToContainer: appendChild,
+        appendInitialChild: appendChild,
+        removeChild: removeChild,
+        prepareUpdate(_instance, _type, oldProps, newProps) {
+            return componentKeys
+                .map((component) => propsChanged(component, oldProps[component], newProps[component]))
+                .filter(isNotUndefined);
+        },
+        commitUpdate(instance, updatePayload, _type, _prevPropsProps, _nextProps, _internalHandle) {
+            for (const update of updatePayload) {
+                if (isListener(update.component)) {
+                    upsertListener(instance, update);
+                    continue;
+                }
+                if (update.type === 'delete') {
+                    removeComponent(instance, update.component);
+                }
+                else {
+                    upsertComponent(instance, update.props, update.component);
+                }
+            }
+        },
+        insertBefore(parentInstance, child, beforeChild) {
+            const beforeChildIndex = parentInstance._child.findIndex((c) => c.entity === beforeChild.entity);
+            parentInstance._child = [
+                ...parentInstance._child.slice(0, beforeChildIndex),
+                child,
+                ...parentInstance._child.slice(beforeChildIndex)
+            ];
+            child.rightOf = beforeChild.rightOf;
+            beforeChild.rightOf = child.entity;
+            child.parent = parentInstance.entity;
+            updateTree(child, { rightOf: child.rightOf, parent: child.parent });
+            updateTree(beforeChild, { rightOf: beforeChild.rightOf });
+        }
+    };
+    const reconciler = Reconciler(hostConfig);
+    const root = reconciler.createContainer({}, 0, null, false, null, '', 
+    /* istanbul ignore next */
+    function () { }, null);
+    return {
+        update: function (component) {
+            return reconciler.updateContainer(component, root, null);
+        },
+        getEntities: () => Array.from(entities)
+    };
+}

package/dist/reconciler/types.d.ts

@@ -0,0 +1,28 @@
+import type { Entity } from '@dcl/ecs';
+import { CommonProps, Listeners } from '../components';
+import type { EntityComponents } from '../react-ecs';
+export declare type EngineComponents = Omit<EntityComponents, keyof Listeners>;
+export declare type OpaqueHandle = any;
+export declare type Type = 'entity';
+export declare type Props = EntityComponents & CommonProps;
+export declare type Container = Document | Instance | any;
+export declare type Instance = {
+    entity: Entity;
+    parent?: Entity;
+    rightOf?: Entity;
+    _child: Instance[];
+};
+export declare type TextInstance = never;
+export declare type SuspenseInstance = never;
+export declare type HydratableInstance = never;
+export declare type PublicInstance = Instance;
+export declare type HostContext = null;
+export declare type UpdatePayload = Changes[];
+export declare type _ChildSet = never;
+export declare type TimeoutHandle = any;
+export declare type NoTimeout = number;
+export declare type Changes<K extends keyof EntityComponents = keyof EntityComponents> = {
+    type: 'delete' | 'add' | 'put';
+    props?: Partial<EntityComponents[K]>;
+    component: K;
+};

package/dist/reconciler/types.js

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

package/dist/reconciler/utils.d.ts

@@ -0,0 +1,40 @@
+import { EntityComponents } from '../react-ecs';
+import { Container, HostContext, Instance, OpaqueHandle, Props, PublicInstance, SuspenseInstance, TextInstance, TimeoutHandle, Type } from './types';
+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;
+export declare const noopConfig: {
+    supportsMutation: boolean;
+    supportsPersistence: boolean;
+    noTimeout: number;
+    isPrimaryRenderer: boolean;
+    supportsHydration: boolean;
+    insertInContainerBefore(_container: Container, _child: Instance | TextInstance, _beforeChild: Instance | TextInstance | SuspenseInstance): void;
+    detachDeletedInstance(_node: Instance): void;
+    hideInstance(_instance: Instance): void;
+    hideTextInstance(_textInstance: TextInstance): void;
+    unhideInstance(_instance: Instance, _props: Props): void;
+    unhideTextInstance(_textInstance: TextInstance, _text: string): void;
+    clearContainer(_container: Container): void;
+    getCurrentEventPriority(): number;
+    getInstanceFromNode(_node: Instance): null | undefined;
+    beforeActiveInstanceBlur(): void;
+    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;
+    prepareForCommit(_containerInfo: Container): Record<string, any> | null;
+    resetAfterCommit(_containerInfo: Container): void;
+    preparePortalMount(_containerInfo: Container): void;
+    createTextInstance(_text: string, _rootContainer: Container, _hostContext: HostContext, _internalHandle: OpaqueHandle): TextInstance;
+    scheduleTimeout(_fn: any, _delay?: number): TimeoutHandle;
+    cancelTimeout(_id: TimeoutHandle): void;
+    shouldSetTextContent(_type: Type, _props: Props): boolean;
+    getRootHostContext(_rootContainer: Container): HostContext | null;
+    getChildHostContext(_parentHostContext: HostContext, _type: Type, _rootContainer: Container): HostContext;
+    getPublicInstance(instance: Instance): PublicInstance;
+    finalizeInitialChildren(_instance: Instance, _type: Type, _props: Props, _rootContainer: Container, _hostContext: HostContext): boolean;
+};

package/dist/reconciler/utils.js

@@ -0,0 +1,127 @@
+const entityComponent = {
+    uiText: undefined,
+    uiBackground: undefined,
+    uiTransform: undefined,
+    onClick: undefined
+};
+export const componentKeys = Object.keys(entityComponent);
+export function isEqual(val1, val2) {
+    if (!val1 && !val2) {
+        return true;
+    }
+    if (!val1 || !val2) {
+        return val1 === val2;
+    }
+    if (val1 === val2) {
+        return true;
+    }
+    if (typeof val1 !== typeof val2) {
+        return false;
+    }
+    if (typeof val1 !== 'object') {
+        return val1 === val2;
+    }
+    if (Array.isArray(val1) && Array.isArray(val2)) {
+        if (val1.length !== val2.length) {
+            return false;
+        }
+    }
+    if (Object.keys(val1).length !== Object.keys(val2).length) {
+        return false;
+    }
+    if (JSON.stringify(val1) === JSON.stringify(val2)) {
+        return true;
+    }
+    for (const key in val1) {
+        if (!isEqual(val1[key], val2[key])) {
+            return false;
+        }
+    }
+    /* istanbul ignore next */
+    return true;
+}
+export const isNotUndefined = (val) => {
+    return !!val;
+};
+export const noopConfig = {
+    supportsMutation: true,
+    supportsPersistence: false,
+    noTimeout: -1,
+    isPrimaryRenderer: true,
+    supportsHydration: false,
+    /* istanbul ignore next */
+    insertInContainerBefore(_container, _child, _beforeChild) { },
+    detachDeletedInstance(_node) { },
+    /* istanbul ignore next */
+    hideInstance(_instance) { },
+    /* istanbul ignore next */
+    hideTextInstance(_textInstance) { },
+    /* istanbul ignore next */
+    unhideInstance(_instance, _props) { },
+    /* istanbul ignore next */
+    unhideTextInstance(_textInstance, _text) { },
+    /* istanbul ignore next */
+    clearContainer(_container) { },
+    /* istanbul ignore next */
+    getCurrentEventPriority() {
+        /* istanbul ignore next */
+        return 0;
+    },
+    /* istanbul ignore next */
+    getInstanceFromNode(_node) {
+        /* istanbul ignore next */
+        return null;
+    },
+    /* istanbul ignore next */
+    beforeActiveInstanceBlur() { },
+    /* istanbul ignore next */
+    afterActiveInstanceBlur() { },
+    /* istanbul ignore next */
+    prepareScopeUpdate() { },
+    /* istanbul ignore next */
+    getInstanceFromScope() {
+        /* istanbul ignore next */
+        return null;
+    },
+    /* istanbul ignore next */
+    removeChildFromContainer() { },
+    /* istanbul ignore next */
+    commitMount(_instance, _type, _props, _internalInstanceHandle) { },
+    /* istanbul ignore next */
+    resetTextContent(_instance) { },
+    /* istanbul ignore next */
+    commitTextUpdate(_textInstance, _oldText, _newText) { },
+    prepareForCommit(_containerInfo) {
+        return null;
+    },
+    resetAfterCommit(_containerInfo) { },
+    /* istanbul ignore next */
+    preparePortalMount(_containerInfo) { },
+    /* istanbul ignore next */
+    createTextInstance(_text, _rootContainer, _hostContext, _internalHandle) {
+        /* istanbul ignore next */
+        return {};
+    },
+    /* istanbul ignore next */
+    scheduleTimeout(_fn, _delay) { },
+    /* istanbul ignore next */
+    cancelTimeout(_id) { },
+    shouldSetTextContent(_type, _props) {
+        return false;
+    },
+    getRootHostContext(_rootContainer) {
+        return null;
+    },
+    getChildHostContext(_parentHostContext, _type, _rootContainer) {
+        /* istanbul ignore next */
+        return null;
+    },
+    /* istanbul ignore next */
+    getPublicInstance(instance) {
+        /* istanbul ignore next */
+        return instance;
+    },
+    finalizeInitialChildren(_instance, _type, _props, _rootContainer, _hostContext) {
+        return false;
+    }
+};

package/dist/system.d.ts

@@ -0,0 +1,8 @@
+import { IEngine, PointerEventsSystem } from '@dcl/ecs';
+import type { JSX } from './react-ecs';
+export declare type UiComponent = () => JSX.Element;
+export declare type ReactBasedUiSystem = {
+    destroy(): void;
+    setUiRenderer(ui: UiComponent): void;
+};
+export declare function createReactBasedUiSystem(engine: IEngine, pointerSystem: PointerEventsSystem): ReactBasedUiSystem;

package/dist/system.js

@@ -0,0 +1,21 @@
+import { createReconciler } from './reconciler';
+export function createReactBasedUiSystem(engine, pointerSystem) {
+    const renderer = createReconciler(engine, pointerSystem);
+    let uiComponent = undefined;
+    function ReactBasedUiSystem() {
+        if (uiComponent)
+            renderer.update(uiComponent());
+    }
+    engine.addSystem(ReactBasedUiSystem, 100e3, '@dcl/react-ecs');
+    return {
+        destroy() {
+            engine.removeSystem(ReactBasedUiSystem);
+            for (const entity of renderer.getEntities()) {
+                engine.removeEntity(entity);
+            }
+        },
+        setUiRenderer(ui) {
+            uiComponent = ui;
+        }
+    };
+}

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@dcl/react-ecs",
-  "version": "0.0.1-3548419522.commit-ddcf4b7",
-  "decentralandLibrary": {},
+  "version": "7.0.0",
   "description": "Decentraland ECS",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "./../dcl-rollup/node_modules/.bin/rollup -c ./../dcl-rollup/dist/libs.config.js"
+    "build": "tsc -p tsconfig.json"
   },
   "repository": {
     "type": "git",
@@ -26,18 +25,16 @@
   "homepage": "https://github.com/decentraland/js-sdk-toolchain#readme",
   "devDependencies": {
     "@types/react": "^18.0.18",
-    "@types/react-reconciler": "^0.28.0",
-    "@dcl/ecs": "file:../ecs"
+    "@types/react-reconciler": "^0.28.0"
   },
   "dependencies": {
+    "@dcl/ecs": "file:../ecs",
     "react": "^18.2.0",
     "react-reconciler": "^0.29.0"
   },
   "files": [
-    "dist/index.js",
-    "dist/index.d.ts",
-    "dist/index.min.js",
-    "dist/index.min.js.map"
+    "dist",
+    "tsconfig.json"
   ],
-  "commit": "ddcf4b77178942be973faca9ef4e58267727c4d8"
+  "commit": "5420eac2bc4215f214136d8b1331864a19118824"
 }

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "stripInternal": true,
+    "downlevelIteration": true,
+    "preserveConstEnums": true,
+    "outDir": "dist",
+    "jsx": "react",
+    "jsxFactory": "ReactEcs.createElement",
+    "rootDir": "src",
+    "types": []
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "dist"
+  ]
+}