feat: improve react UI engine, refactor component browser

packages/ecs-browser/package.json

@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "@latticexyz/recs": "^0.1.8",
+    "@latticexyz/std-client": "^0.1.8",
     "@latticexyz/utils": "^0.1.8",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.1",
@@ -40,6 +41,7 @@
   },
   "peerDependencies": {
     "@latticexyz/recs": "^0.1.8",
+    "@latticexyz/std-client": "^0.1.8",
     "@latticexyz/utils": ">=0.1.4",
     "lodash": "^4.17.21",
     "mobx": "^6.4.2",

packages/ecs-browser/src/Browser.tsx

@@ -1,47 +1,62 @@
 import React, { useState } from "react";
-import { Layers, Type, AnyComponent, Component, EntityIndex, Schema, World } from "@latticexyz/recs";
-import { BrowserContainer } from "./StyledComponents";
+import { Layers, Type, Component, Schema, World, EntityID } from "@latticexyz/recs";
+import { BrowserContainer, SmallHeadline } from "./StyledComponents";
 import { SetContractComponentFunction } from "./types";
 import { EntityEditor } from "./EntityEditor";
 import { QueryBuilder } from "./QueryBuilder";
+import { useClearDevHighlights } from "./hooks";
+import { observer } from "mobx-react-lite";
 
 /**
  * An Entity Browser for viewing/editiing Component values.
  */
-export const Browser = ({
-  entities,
-  layers,
-  setContractComponentValue,
-  devHighlightComponent,
-  world,
-}: {
-  entities: [EntityIndex, Set<AnyComponent>][];
-  layers: Layers;
-  setContractComponentValue: SetContractComponentFunction<Schema>;
-  devHighlightComponent: Component<{ value: Type.OptionalNumber }>;
-  world: World;
-}) => {
-  const [filteredEntities, setFilteredEntities] = useState(entities);
+export const Browser = observer(
+  ({
+    entities,
+    layers,
+    setContractComponentValue,
+    devHighlightComponent,
+    hoverHighlightComponent,
+    world,
+  }: {
+    entities: EntityID[];
+    layers: Layers;
+    setContractComponentValue: SetContractComponentFunction<Schema>;
+    devHighlightComponent: Component<{ value: Type.OptionalNumber }>;
+    hoverHighlightComponent: Component<{ x: Type.OptionalNumber; y: Type.OptionalNumber }>;
+    world: World;
+  }) => {
+    const [filteredEntities, setFilteredEntities] = useState<EntityID[]>([]);
+    const [overflow, setOverflow] = useState(0);
+    const clearDevHighlights = useClearDevHighlights(devHighlightComponent);
 
-  return (
-    <BrowserContainer>
-      <QueryBuilder
-        devHighlightComponent={devHighlightComponent}
-        allEntities={entities}
-        setFilteredEntities={setFilteredEntities}
-        layers={layers}
-      />
-      {filteredEntities.map(([entity, components]) => (
-        <EntityEditor
-          world={world}
-          key={`entity-editor-${entity}`}
-          entity={entity}
-          components={components}
-          layers={layers}
-          setContractComponentValue={setContractComponentValue}
+    return (
+      <BrowserContainer>
+        <QueryBuilder
           devHighlightComponent={devHighlightComponent}
+          hoverHighlightComponent={hoverHighlightComponent}
+          allEntities={entities}
+          setFilteredEntities={setFilteredEntities}
+          layers={layers}
+          world={world}
+          clearDevHighlights={clearDevHighlights}
+          setOverflow={setOverflow}
         />
-      ))}
-    </BrowserContainer>
-  );
-};
+        <SmallHeadline>
+          Showing {filteredEntities.length} of {filteredEntities.length + overflow} entities
+        </SmallHeadline>
+        {filteredEntities.map((entity) => (
+          <EntityEditor
+            world={world}
+            key={`entity-editor-${entity}`}
+            entityId={entity}
+            layers={layers}
+            setContractComponentValue={setContractComponentValue}
+            devHighlightComponent={devHighlightComponent}
+            clearDevHighlights={clearDevHighlights}
+          />
+        ))}
+      </BrowserContainer>
+    );
+  }
+);

packages/ecs-browser/src/ComponentEditor.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { getComponentValue, Layers, removeComponent } from "@latticexyz/recs";
+import { Layers, removeComponent } from "@latticexyz/recs";
 import { AnyComponent, EntityIndex, Schema } from "@latticexyz/recs/src/types";
 import { ComponentBrowserButton, ComponentEditorContainer, ComponentTitle } from "./StyledComponents";
 import { ComponentValueEditor } from "./ComponentValueEditor";
 import { SetContractComponentFunction } from "./types";
+import { useComponentValueStream } from "@latticexyz/std-client";
 
 export const ComponentEditor = ({
   entity,
@@ -16,8 +17,8 @@ export const ComponentEditor = ({
   layers: Layers;
   setContractComponentValue: SetContractComponentFunction<Schema>;
 }) => {
-  const currentValue = getComponentValue(component, entity);
-  if (!currentValue) return <></>;
+  const value = useComponentValueStream(component, entity);
+  if (!value) return null;
 
   return (
     <ComponentEditorContainer>
@@ -28,7 +29,7 @@ export const ComponentEditor = ({
       <ComponentValueEditor
         entity={entity}
         component={component}
-        componentValue={currentValue}
+        componentValue={value}
         layers={layers}
         setContractComponentValue={setContractComponentValue}
       />

packages/ecs-browser/src/EntityEditor.tsx

@@ -1,68 +1,78 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Layers,
-  removeComponent,
   setComponent,
   Type,
   AnyComponent,
   Component,
-  EntityIndex,
   Schema,
   World,
+  EntityID,
+  getEntityComponents,
 } from "@latticexyz/recs";
 import { Collapse } from "react-collapse";
 import { ComponentBrowserButton, EntityEditorContainer } from "./StyledComponents";
 import { SetContractComponentFunction } from "./types";
 import { ComponentEditor } from "./ComponentEditor";
+import { observer } from "mobx-react-lite";
 
-export const EntityEditor = ({
-  entity,
-  components,
-  layers,
-  setContractComponentValue,
-  devHighlightComponent,
-  world,
-}: {
-  entity: EntityIndex;
-  components: Set<AnyComponent>;
-  layers: Layers;
-  setContractComponentValue: SetContractComponentFunction<Schema>;
-  devHighlightComponent: Component<{ value: Type.OptionalNumber }>;
-  world: World;
-}) => {
-  const [opened, setOpened] = useState(false);
+export const EntityEditor = observer(
+  ({
+    entityId,
+    layers,
+    setContractComponentValue,
+    devHighlightComponent,
+    world,
+    clearDevHighlights,
+  }: {
+    entityId: EntityID;
+    layers: Layers;
+    setContractComponentValue: SetContractComponentFunction<Schema>;
+    devHighlightComponent: Component<{ value: Type.OptionalNumber }>;
+    world: World;
+    clearDevHighlights: () => void;
+  }) => {
+    const [opened, setOpened] = useState(false);
+    const entity = world.entityToIndex.get(entityId);
+    if (!entity) return null;
 
-  return (
-    <EntityEditorContainer
-      onMouseEnter={() => {
-        [...layers.phaser.world.entityToIndex.values()].forEach((e) => removeComponent(devHighlightComponent, e));
-        setComponent(devHighlightComponent, entity, {
-          value: null,
-        });
-      }}
-      onMouseLeave={() => {
-        removeComponent(devHighlightComponent, entity);
-      }}
-    >
-      <div onClick={() => setOpened(!opened)} style={{ cursor: "pointer" }}>
-        <h3 style={{ color: "white" }}>{world.entities[entity]}</h3>
-        <ComponentBrowserButton onClick={() => setOpened(!opened)}>
-          {opened ? <>&#9660;</> : <>&#9654;</>}
-        </ComponentBrowserButton>
-      </div>
-      <Collapse isOpened={opened}>
-        {[...components.values()]
-          .filter((c) => c.id !== devHighlightComponent.id)
-          .map((c) => (
-            <ComponentEditor
-              key={`component-editor-${entity}-${c.id}`}
-              entity={entity}
-              component={c}
-              layers={layers}
-              setContractComponentValue={setContractComponentValue}
-            />
-          ))}
-      </Collapse>
-    </EntityEditorContainer>
-  );
-};
+    const [entityComponents, setEntityComponents] = useState<AnyComponent[]>([]);
+    useEffect(() => {
+      if (opened) {
+        const components = getEntityComponents(world, entity);
+        setEntityComponents(components);
+      }
+    }, [opened, world, entity, setEntityComponents]);
+
+    return (
+      <EntityEditorContainer
+        onMouseEnter={() => {
+          clearDevHighlights();
+          setComponent(devHighlightComponent, entity, {
+            value: null,
+          });
+        }}
+      >
+        <div onClick={() => setOpened(!opened)} style={{ cursor: "pointer" }}>
+          <h3 style={{ color: "white" }}>{world.entities[entity]}</h3>
+          <ComponentBrowserButton onClick={() => setOpened(!opened)}>
+            {opened ? <>&#9660;</> : <>&#9654;</>}
+          </ComponentBrowserButton>
+        </div>
+        <Collapse isOpened={opened}>
+          {[...entityComponents.values()]
+            .filter((c) => c.id !== devHighlightComponent.id)
+            .map((c) => (
+              <ComponentEditor
+                key={`component-editor-${entity}-${c.id}`}
+                entity={entity}
+                component={c}
+                layers={layers}
+                setContractComponentValue={setContractComponentValue}
+              />
+            ))}
+        </Collapse>
+      </EntityEditorContainer>
+    );
+  }
+);