feat(react): add react package #294

frolic · 2022-12-12T23:48:14Z

Adds official React MUD package! This will replace the React usages sprinkled into other packages (I'll do a clean up in a breaking follow up).

frolic · 2022-12-12T23:52:55Z

packages/mud-react/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@latticexyz/mud-react",


wasn't sure what to call this! @latticexyz/react felt incorrect and I think what I actually want is something like @mud/react

alvrs

Looking good!

Let's add a short README.md - this show up on npm's package overview page when releasing this package (like here: https://www.npmjs.com/package/@latticexyz/solecs)

packages/std-client/src/hooks.ts

alvrs · 2023-01-11T12:49:07Z

packages/react/src/useDeprecatedComputedValue.ts

+import { IComputedValue } from "mobx";
+import { useEffect, useState } from "react";
+
+// TODO: migrate the rest of the mobx stuff to rxjs


Opened an issue to track this, let's add a link to the code comment: #339

alvrs · 2023-01-11T12:54:41Z

packages/react/src/useComponentValue.ts

+  component: Component<S, Metadata, undefined>,
+  defaultValue?: ComponentValue<S>
+) {
+  const entities = useEntityQuery([Has(component)]);


would this hook cause a react rerender every time any value in the component changes or only if the value of the entity specified in the entityIndex param changes?

Ohh this is a great point. It'd currently reevaluate for anything matching the query (Has(component)). I may rewrite this to not depend on useEntityQuery and be more mindful of rendering only when the single entity value changes.

Co-authored-by: alvarius <89248902+alvrs@users.noreply.github.com>

…'s value changes

frolic · 2023-01-12T01:09:53Z

packages/react/README.md

+Returns the value of the component for the entity, and triggers a re-render as the component is added/removed/updated.
+
+```
+const position = useComponentValue(entity, Position);


While building Emojimon, I was thinking about ECS in terms of entity-first, where "entity" is often the thing to key off of, and components are bits of data on an entity.

However, I noticed our internal APIs (setComponent, removeComponent), etc. all have components first, then entities. I wonder if this is because we internally model a component as a mapping of entities <> values.

How do you feel about the position of the arguments here?

Yes that's mostly the reason - when thinking of components as tables and entities as rows in that table, it felt more natural to first specify which table to modify and then which row in that table. In general I don't feel strongly about the order of arguments, can totally see how putting entity first is more intuitive when thinking about entities as objects and components as parameters on that object. My main argument for changing the order here to also put component first would be consistency with existing functions.

Chatted with @alvrs some more and here's what I got out of the convo:

Data modeling with MUD can be thought of in one of two ways

Entity-first, where the entity is the focus and data (components/values) are "attached" to an entity. I was thinking about it like this, where my "get component value" operation is more like a "get this value of this key from the entity object"

Component/Table-first, where it's more like a relational database and the entity ID is a primary key. In the future, we may want more complicated keys (tuples) that would expand past just an entity ID. So asking for a component value is more like "get the value in the component table for this primary key aka entity ID".

Sounds like we want to guide folks towards the latter mental model, esp. as we push further into SQL-like capability.

Will update these hooks!

frolic · 2023-01-12T01:21:42Z

Quickly wired this into Emojimon to make sure it works and to see what the diff looks like:
latticexyz/emojimon@74629a8

alvrs

Looks great! Just a some minor comments and a minor preference for changing the order of parameters for consistency.

alvrs · 2023-01-12T10:37:35Z

packages/react/README.md

+Returns the value of the component for the entity, and triggers a re-render as the component is added/removed/updated.
+
+```
+const position = useComponentValue(entity, Position);


Yes that's mostly the reason - when thinking of components as tables and entities as rows in that table, it felt more natural to first specify which table to modify and then which row in that table. In general I don't feel strongly about the order of arguments, can totally see how putting entity first is more intuitive when thinking about entities as objects and components as parameters on that object. My main argument for changing the order here to also put component first would be consistency with existing functions.

alvrs · 2023-01-12T10:38:56Z

packages/react/package.json

+    "jest": "^29.3.1",
+    "mobx": "^6.4.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",


is react-dom also required as peer dependency?

nope! will remove

alvrs · 2023-01-12T10:40:54Z

packages/react/src/useComponentValue.test.ts

+    expect(result.current).toBe(undefined);
+  });
+
+  it("should re-render only when Position changes for entity", () => {


love these tests!! 🔥

packages/react/src/useComponentValue.ts

alvrs · 2023-01-12T10:57:19Z

packages/react/tsconfig.json

+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  },
+  "exclude": ["dist", "**/*.test.ts", "packages"]


ooc why do we need to exclude packages here?

it's not needed, this was just copy pasta

alvrs · 2023-01-12T11:04:07Z

Should we add you as the codeowner for this package to auto-request reviews from? https://github.com/latticexyz/mud/blob/main/CODEOWNERS (Can also set the codeowner for ecs-browser to kooshaba while at it)

Co-authored-by: alvarius <89248902+alvrs@users.noreply.github.com>

alvrs

Amazing! 🚢

@deprecated

* feat: add mud-react * feat: rename mud-react to react * chore(react): clean up * chore(react): rename mobx-dependent module * feat(react): add useObservableValue hook * chore(react): add deprecation notice * chore(react): remove unused deps * fix(react): version * fix(react): use @deprecated tag Co-authored-by: alvarius <89248902+alvrs@users.noreply.github.com> * chore(react): more deprecated notices * test(react): set up test framework, add tests for useEntityQuery * test(react): add tests for useComponentValue * test(react): refactor useComponentValue to only re-render when entity's value changes * docs(react): add README * fix(react): use typed helper for checking if it's a component update Co-authored-by: alvarius <89248902+alvrs@users.noreply.github.com> * chore(react): add frolic to codeowners * refactor(react): change useComponentValue args ordering * style(react): simplify tsconfig * fix(react): remove unused dep Co-authored-by: alvarius <89248902+alvrs@users.noreply.github.com>

frolic force-pushed the holic/mud-react branch from f4a3d5e to dc923b0 Compare December 12, 2022 23:49

feat: add mud-react

07ec8f5

frolic force-pushed the holic/mud-react branch from dc923b0 to 07ec8f5 Compare December 12, 2022 23:51

frolic commented Dec 12, 2022

View reviewed changes

frolic added 2 commits January 10, 2023 14:53

Merge remote-tracking branch 'origin/main' into holic/mud-react

c24f302

feat: rename mud-react to react

91e3a75

frolic changed the title ~~feat: add mud-react~~ feat(react): add react package Jan 10, 2023

frolic added 5 commits January 10, 2023 15:08

chore(react): clean up

6af59e7

chore(react): rename mobx-dependent module

9e73061

feat(react): add useObservableValue hook

c391b52

chore(react): add deprecation notice

545756e

chore(react): remove unused deps

8ef60cd

frolic marked this pull request as ready for review January 10, 2023 23:49

frolic requested a review from alvrs as a code owner January 10, 2023 23:49

fix(react): version

d96e5e3

alvrs reviewed Jan 11, 2023

View reviewed changes

frolic and others added 5 commits January 11, 2023 09:16

fix(react): use @deprecated tag

d9f2ce5

Co-authored-by: alvarius <89248902+alvrs@users.noreply.github.com>

chore(react): more deprecated notices

92f4ef3

test(react): set up test framework, add tests for useEntityQuery

18f2433

test(react): add tests for useComponentValue

ba3695a

test(react): refactor useComponentValue to only re-render when entity…

1accd43

…'s value changes

frolic force-pushed the holic/mud-react branch from 057ff27 to 1accd43 Compare January 12, 2023 00:25

frolic requested a review from alvrs January 12, 2023 00:52

docs(react): add README

0a63018

frolic force-pushed the holic/mud-react branch from 85e2000 to 0a63018 Compare January 12, 2023 01:07

frolic commented Jan 12, 2023

View reviewed changes

alvrs reviewed Jan 12, 2023

View reviewed changes

fix(react): use typed helper for checking if it's a component update

8b38e05

Co-authored-by: alvarius <89248902+alvrs@users.noreply.github.com>

frolic force-pushed the holic/mud-react branch from 7dcdc60 to 8b38e05 Compare January 12, 2023 19:40

frolic added 4 commits January 12, 2023 11:43

chore(react): add myself to codeowners

0a3bdae

refactor(react): change useComponentValue args ordering

353f0d1

style(react): simplify tsconfig

d5f8a22

fix(react): remove unused dep

3544588

frolic requested a review from alvrs January 12, 2023 19:48

alvrs approved these changes Jan 12, 2023

View reviewed changes

alvrs merged commit f5ee290 into main Jan 12, 2023

alvrs deleted the holic/mud-react branch February 7, 2023 15:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react): add react package #294

feat(react): add react package #294

frolic commented Dec 12, 2022 •

edited

Loading

frolic Dec 12, 2022

alvrs left a comment

alvrs Jan 11, 2023

alvrs Jan 11, 2023

frolic Jan 11, 2023 •

edited

Loading

frolic Jan 12, 2023 •

edited

Loading

alvrs Jan 12, 2023

frolic Jan 12, 2023

frolic commented Jan 12, 2023

alvrs left a comment

alvrs Jan 12, 2023

alvrs Jan 12, 2023

frolic Jan 12, 2023

alvrs Jan 12, 2023

alvrs Jan 12, 2023

frolic Jan 12, 2023

alvrs commented Jan 12, 2023

alvrs left a comment

feat(react): add react package #294

feat(react): add react package #294

Conversation

frolic commented Dec 12, 2022 • edited Loading

Choose a reason for hiding this comment

alvrs left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frolic Jan 11, 2023 • edited Loading

Choose a reason for hiding this comment

frolic Jan 12, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frolic commented Jan 12, 2023

alvrs left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alvrs commented Jan 12, 2023

alvrs left a comment

Choose a reason for hiding this comment

frolic commented Dec 12, 2022 •

edited

Loading

frolic Jan 11, 2023 •

edited

Loading

frolic Jan 12, 2023 •

edited

Loading