@latticexyz/react 2.0.0-alpha.94 → 2.0.0-foundry-js-c7b0289b

package/CHANGELOG.md

@@ -1,8 +1,264 @@
 # Change Log
 
+## 2.0.0-foundry-js-c7b0289b
+
+### Major Changes
+
+- e3de1a33: Removes `useRow` and `useRows` hooks, previously powered by `store-cache`, which is now deprecated. Please use `recs` and the corresponding `useEntityQuery` and `useComponentValue` hooks. We'll have more hooks soon for SQL.js sync backends.
+
+### Minor Changes
+
+- 939916bc: Adds a `usePromise` hook that returns a [native `PromiseSettledResult` object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled).
+
+  ```tsx
+  const promise = fetch(url);
+  const result = usePromise(promise);
+
+  if (result.status === "idle" || result.status === "pending") {
+    return <>fetching</>;
+  }
+
+  if (result.status === "rejected") {
+    return <>error fetching: {String(result.reason)}</>;
+  }
+
+  if (result.status === "fulfilled") {
+    return <>fetch status: {result.value.status}</>;
+  }
+  ```
+
+### Patch Changes
+
+- Updated dependencies [7ce82b6f]
+- Updated dependencies [c963b46c]
+- Updated dependencies [ce7125a1]
+- Updated dependencies [aea67c58]
+- Updated dependencies [07dd6f32]
+- Updated dependencies [c14f8bf1]
+- Updated dependencies [90e4161b]
+- Updated dependencies [331dbfdc]
+- Updated dependencies [1d60930d]
+- Updated dependencies [f9f9609e]
+- Updated dependencies [904fd7d4]
+- Updated dependencies [b9e562d8]
+- Updated dependencies [759514d8]
+- Updated dependencies [952cd534]
+- Updated dependencies [d5094a24]
+- Updated dependencies [a2588116]
+- Updated dependencies [c4d5eb4e]
+- Updated dependencies [f62c767e]
+- Updated dependencies [de151fec]
+- Updated dependencies [ae340b2b]
+- Updated dependencies [211be2a1]
+- Updated dependencies [0f3e2e02]
+- Updated dependencies [d0878928]
+- Updated dependencies [5c965a91]
+- Updated dependencies [f99e8898]
+- Updated dependencies [d5b73b12]
+- Updated dependencies [433078c5]
+- Updated dependencies [b2d2aa71]
+- Updated dependencies [83583a50]
+- Updated dependencies [5e723b90]
+- Updated dependencies [6573e38e]
+- Updated dependencies [afaf2f5f]
+- Updated dependencies [44a5432a]
+- Updated dependencies [6e66c5b7]
+- Updated dependencies [8d51a034]
+- Updated dependencies [1e2ad78e]
+- Updated dependencies [65c9546c]
+- Updated dependencies [48909d15]
+- Updated dependencies [48c51b52]
+- Updated dependencies [66cc35a8]
+- Updated dependencies [672d05ca]
+- Updated dependencies [63831a26]
+- Updated dependencies [a7b30c79]
+- Updated dependencies [92de5998]
+- Updated dependencies [22ee4470]
+- Updated dependencies [be313068]
+- Updated dependencies [ac508bf1]
+- Updated dependencies [bb91edaa]
+- Updated dependencies [bfcb293d]
+- Updated dependencies [1890f1a0]
+- Updated dependencies [9b43029c]
+- Updated dependencies [55ab88a6]
+- Updated dependencies [53522998]
+- Updated dependencies [af639a26]
+- Updated dependencies [5e723b90]
+- Updated dependencies [99ab9cd6]
+- Updated dependencies [0d12db8c]
+- Updated dependencies [c049c23f]
+- Updated dependencies [80dd6992]
+- Updated dependencies [60cfd089]
+- Updated dependencies [24a6cd53]
+- Updated dependencies [708b49c5]
+- Updated dependencies [22ba7b67]
+- Updated dependencies [5e71e1cb]
+- Updated dependencies [8025c350]
+- Updated dependencies [afdba793]
+- Updated dependencies [cea754dd]
+- Updated dependencies [cc2c8da0]
+  - @latticexyz/store@2.0.0-foundry-js-c7b0289b
+  - @latticexyz/recs@2.0.0-foundry-js-c7b0289b
+
+## 2.0.0-next.14
+
+### Patch Changes
+
+- Updated dependencies [b2d2aa71]
+- Updated dependencies [bb91edaa]
+  - @latticexyz/store@2.0.0-next.14
+  - @latticexyz/recs@2.0.0-next.14
+
+## 2.0.0-next.13
+
+### Patch Changes
+
+- @latticexyz/recs@2.0.0-next.13
+- @latticexyz/store@2.0.0-next.13
+
+## 2.0.0-next.12
+
+### Patch Changes
+
+- Updated dependencies [7ce82b6f]
+- Updated dependencies [f62c767e]
+  - @latticexyz/store@2.0.0-next.12
+  - @latticexyz/recs@2.0.0-next.12
+
+## 2.0.0-next.11
+
+### Patch Changes
+
+- Updated dependencies [f99e8898]
+  - @latticexyz/store@2.0.0-next.11
+  - @latticexyz/recs@2.0.0-next.11
+
+## 2.0.0-next.10
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @latticexyz/recs@2.0.0-next.10
+  - @latticexyz/store@2.0.0-next.10
+
+## 2.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies [[`aea67c58`](https://github.com/latticexyz/mud/commit/aea67c5804efb2a8b919f5aa3a053d9b04184e84), [`07dd6f32`](https://github.com/latticexyz/mud/commit/07dd6f32c9bb9f0e807bac3586c5cc9833f14ab9), [`90e4161b`](https://github.com/latticexyz/mud/commit/90e4161bb8574a279d9edb517ce7def3624adaa8), [`331dbfdc`](https://github.com/latticexyz/mud/commit/331dbfdcbbda404de4b0fd4d439d636ae2033853), [`f9f9609e`](https://github.com/latticexyz/mud/commit/f9f9609ef69d7fa58cad6a9af3fe6d2eed6d8aa2), [`759514d8`](https://github.com/latticexyz/mud/commit/759514d8b980fa5fe49a4ef919d8008b215f2af8), [`d5094a24`](https://github.com/latticexyz/mud/commit/d5094a2421cf2882a317e3ad9600c8de004b20d4), [`de151fec`](https://github.com/latticexyz/mud/commit/de151fec07b63a6022483c1ad133c556dd44992e), [`ae340b2b`](https://github.com/latticexyz/mud/commit/ae340b2bfd98f4812ed3a94c746af3611645a623), [`211be2a1`](https://github.com/latticexyz/mud/commit/211be2a1eba8600ad53be6f8c70c64a8523113b9), [`0f3e2e02`](https://github.com/latticexyz/mud/commit/0f3e2e02b5114e08fe700c18326db76816ffad3c), [`d0878928`](https://github.com/latticexyz/mud/commit/d08789282c8b8d4c12897e2ff5a688af9115fb1c), [`83583a50`](https://github.com/latticexyz/mud/commit/83583a5053de4e5e643572e3b1c0f49467e8e2ab), [`5e723b90`](https://github.com/latticexyz/mud/commit/5e723b90e6b18bc70d357ff4b0a1b217611236ae), [`6573e38e`](https://github.com/latticexyz/mud/commit/6573e38e9064121540aa46ce204d8ca5d61ed847), [`44a5432a`](https://github.com/latticexyz/mud/commit/44a5432acb9c5af3dca1447c50219a00894c45a9), [`6e66c5b7`](https://github.com/latticexyz/mud/commit/6e66c5b745a036c5bc5422819de9c518a6f6cc96), [`65c9546c`](https://github.com/latticexyz/mud/commit/65c9546c4ee8a410b21d032f02b0050442152e7e), [`672d05ca`](https://github.com/latticexyz/mud/commit/672d05ca130649bd90df337c2bf03204a5878840), [`63831a26`](https://github.com/latticexyz/mud/commit/63831a264b6b09501f380a4601f82ba7bf07a619), [`92de5998`](https://github.com/latticexyz/mud/commit/92de59982fb9fc4e00e50c4a5232ed541f3ce71a), [`22ee4470`](https://github.com/latticexyz/mud/commit/22ee4470047e4611a3cae62e9d0af4713aa1e612), [`be313068`](https://github.com/latticexyz/mud/commit/be313068b158265c2deada55eebfd6ba753abb87), [`ac508bf1`](https://github.com/latticexyz/mud/commit/ac508bf189b098e66b59a725f58a2008537be130), [`bfcb293d`](https://github.com/latticexyz/mud/commit/bfcb293d1931edde7f8a3e077f6f555a26fd1d2f), [`1890f1a0`](https://github.com/latticexyz/mud/commit/1890f1a0603982477bfde1b7335969f51e2dce70), [`9b43029c`](https://github.com/latticexyz/mud/commit/9b43029c3c888f8e82b146312f5c2e92321c28a7), [`55ab88a6`](https://github.com/latticexyz/mud/commit/55ab88a60adb3ad72ebafef4d50513eb71e3c314), [`af639a26`](https://github.com/latticexyz/mud/commit/af639a26446ca4b689029855767f8a723557f62c), [`5e723b90`](https://github.com/latticexyz/mud/commit/5e723b90e6b18bc70d357ff4b0a1b217611236ae), [`99ab9cd6`](https://github.com/latticexyz/mud/commit/99ab9cd6fff1a732b47d63ead894292661682380), [`c049c23f`](https://github.com/latticexyz/mud/commit/c049c23f48b93ac7881fb1a5a8417831611d5cbf), [`80dd6992`](https://github.com/latticexyz/mud/commit/80dd6992e98c90a91d417fc785d0d53260df6ce2), [`24a6cd53`](https://github.com/latticexyz/mud/commit/24a6cd536f0c31cab93fb7644751cb9376be383d), [`708b49c5`](https://github.com/latticexyz/mud/commit/708b49c50e05f7b67b596e72ebfcbd76e1ff6280), [`22ba7b67`](https://github.com/latticexyz/mud/commit/22ba7b675bd50d1bb18b8a71c0de17c6d70d78c7), [`cea754dd`](https://github.com/latticexyz/mud/commit/cea754dde0d8abf7392e93faa319b260956ae92b)]:
+  - @latticexyz/store@2.0.0-next.9
+  - @latticexyz/recs@2.0.0-next.9
+
+## 2.0.0-next.8
+
+### Patch Changes
+
+- Updated dependencies [[`1d60930d`](https://github.com/latticexyz/mud/commit/1d60930d6d4c9a0bda262e5e23a5f719b9dd48c7), [`b9e562d8`](https://github.com/latticexyz/mud/commit/b9e562d8f7a6051bb1a7262979b268fd2c83daac), [`5e71e1cb`](https://github.com/latticexyz/mud/commit/5e71e1cb541b0a18ee414e18dd80f1dd24a92b98)]:
+  - @latticexyz/store@2.0.0-next.8
+  - @latticexyz/recs@2.0.0-next.8
+
+## 2.0.0-next.7
+
+### Patch Changes
+
+- Updated dependencies [[`c4d5eb4e`](https://github.com/latticexyz/mud/commit/c4d5eb4e4e4737112b981a795a9c347e3578cb15)]:
+  - @latticexyz/store@2.0.0-next.7
+  - @latticexyz/recs@2.0.0-next.7
+
+## 2.0.0-next.6
+
+### Patch Changes
+
+- Updated dependencies [[`8025c350`](https://github.com/latticexyz/mud/commit/8025c3505a7411d8539b1cfd72265aed27e04561)]:
+  - @latticexyz/store@2.0.0-next.6
+  - @latticexyz/recs@2.0.0-next.6
+
+## 2.0.0-next.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @latticexyz/recs@2.0.0-next.5
+  - @latticexyz/store@2.0.0-next.5
+
+## 2.0.0-next.4
+
+### Major Changes
+
+- [#1343](https://github.com/latticexyz/mud/pull/1343) [`e3de1a33`](https://github.com/latticexyz/mud/commit/e3de1a338fe110ac33ba9fb833366541e4cf4cf1) Thanks [@holic](https://github.com/holic)! - Removes `useRow` and `useRows` hooks, previously powered by `store-cache`, which is now deprecated. Please use `recs` and the corresponding `useEntityQuery` and `useComponentValue` hooks. We'll have more hooks soon for SQL.js sync backends.
+
+### Patch Changes
+
+- Updated dependencies [[`ce7125a1`](https://github.com/latticexyz/mud/commit/ce7125a1b97efd3db47c5ea1593d5a37ba143f64), [`c14f8bf1`](https://github.com/latticexyz/mud/commit/c14f8bf1ec8c199902c12899853ac144aa69bb9c)]:
+  - @latticexyz/recs@2.0.0-next.4
+  - @latticexyz/store@2.0.0-next.4
+
+## 2.0.0-next.3
+
+### Patch Changes
+
+- Updated dependencies [[`952cd534`](https://github.com/latticexyz/mud/commit/952cd534447d08e6231ab147ed1cc24fb49bbb57), [`d5b73b12`](https://github.com/latticexyz/mud/commit/d5b73b12666699c442d182ee904fa8747b78fefd), [`433078c5`](https://github.com/latticexyz/mud/commit/433078c54c22fa1b4e32d7204fb41bd5f79ca1db), [`afaf2f5f`](https://github.com/latticexyz/mud/commit/afaf2f5ffb36fe389a3aba8da2f6d8c84bdb26ab), [`0d12db8c`](https://github.com/latticexyz/mud/commit/0d12db8c2170905f5116111e6bc417b6dca8eb61)]:
+  - @latticexyz/store@2.0.0-next.3
+  - @latticexyz/store-cache@2.0.0-next.3
+  - @latticexyz/recs@2.0.0-next.3
+
+## 2.0.0-next.2
+
+### Minor Changes
+
+- [#1284](https://github.com/latticexyz/mud/pull/1284) [`939916bc`](https://github.com/latticexyz/mud/commit/939916bcd5c9f3caf0399e9ab7689e77e6bef7ad) Thanks [@holic](https://github.com/holic)! - Adds a `usePromise` hook that returns a [native `PromiseSettledResult` object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled).
+
+  ```tsx
+  const promise = fetch(url);
+  const result = usePromise(promise);
+
+  if (result.status === "idle" || result.status === "pending") {
+    return <>fetching</>;
+  }
+
+  if (result.status === "rejected") {
+    return <>error fetching: {String(result.reason)}</>;
+  }
+
+  if (result.status === "fulfilled") {
+    return <>fetch status: {result.value.status}</>;
+  }
+  ```
+
+### Patch Changes
+
+- Updated dependencies [[`a2588116`](https://github.com/latticexyz/mud/commit/a25881160cb3283e11d218be7b8a9fe38ee83062), [`48c51b52`](https://github.com/latticexyz/mud/commit/48c51b52acab147a2ed97903c43bafa9b6769473)]:
+  - @latticexyz/store@2.0.0-next.2
+  - @latticexyz/store-cache@2.0.0-next.2
+  - @latticexyz/recs@2.0.0-next.2
+
+## 2.0.0-next.1
+
+### Patch Changes
+
+- Updated dependencies [[`c963b46c`](https://github.com/latticexyz/mud/commit/c963b46c7eaceebc652930936643365b8c48a021), [`5c965a91`](https://github.com/latticexyz/mud/commit/5c965a919355bf98d7ea69463890fe605bcde206), [`60cfd089`](https://github.com/latticexyz/mud/commit/60cfd089fc7a17b98864b631d265f36718df35a9), [`afdba793`](https://github.com/latticexyz/mud/commit/afdba793fd84abf17eef5ef59dd56fabe353c8bd), [`cc2c8da0`](https://github.com/latticexyz/mud/commit/cc2c8da000c32c02a82a1a0fd17075d11eac56c3)]:
+  - @latticexyz/store@2.0.0-next.1
+  - @latticexyz/recs@2.0.0-next.1
+  - @latticexyz/store-cache@2.0.0-next.1
+
+## 2.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`904fd7d4`](https://github.com/latticexyz/mud/commit/904fd7d4ee06a86e481e3e02fd5744224376d0c9), [`8d51a034`](https://github.com/latticexyz/mud/commit/8d51a03486bc20006d8cc982f798dfdfe16f169f), [`1e2ad78e`](https://github.com/latticexyz/mud/commit/1e2ad78e277b551dd1b8efb0e4438fb10441644c), [`48909d15`](https://github.com/latticexyz/mud/commit/48909d151b3dfceab128c120bc6bb77de53c456b), [`66cc35a8`](https://github.com/latticexyz/mud/commit/66cc35a8ccb21c50a1882d6c741dd045acd8bc11), [`a7b30c79`](https://github.com/latticexyz/mud/commit/a7b30c79bcc78530d2d01858de46a0fb87954fda), [`53522998`](https://github.com/latticexyz/mud/commit/535229984565539e6168042150b45fe0f9b48b0f)]:
+  - @latticexyz/store@2.0.0-next.0
+  - @latticexyz/recs@2.0.0-next.0
+  - @latticexyz/store-cache@2.0.0-next.0
+
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.42.0](https://github.com/latticexyz/mud/compare/v1.41.0...v1.42.0) (2023-04-13)
+
+### Features
+
+- v2 event decoding ([#415](https://github.com/latticexyz/mud/issues/415)) ([374ed54](https://github.com/latticexyz/mud/commit/374ed542c3387a4ec2b36ab68ae534419aa58763))
+
 # [1.41.0](https://github.com/latticexyz/mud/compare/v1.40.0...v1.41.0) (2023-03-09)
 
 ### Features

package/README.md

@@ -2,11 +2,13 @@
 
 React hooks (and more) for building MUD clients.
 
+## Hooks for `recs`
+
 ### useComponentValue
 
 Returns the value of the component for the entity, and triggers a re-render as the component is added/removed/updated.
 
-```
+```typescript
 const position = useComponentValue(Position, entity);
 ```
 
@@ -14,7 +16,7 @@ const position = useComponentValue(Position, entity);
 
 Returns all matching `EntityIndex`es for a given entity query, and triggers a re-render as new query results come in.
 
-```
+```typescript
 const entities = useEntityQuery([Has(Position)]);
 const playersAtPosition = useEntityQuery([Has(Player), HasValue(Position, { x: 0, y: 0 })]);
 ```

package/dist/index.js

@@ -1,128 +1,2 @@
-import { getComponentValue, defineQuery, Has, isComponentUpdate } from '@latticexyz/recs';
-import { useState, useEffect, useMemo } from 'react';
-import { map, distinctUntilChanged } from 'rxjs';
-
-function useComponentValue(component, entityIndex, defaultValue) {
-    const [value, setValue] = useState(entityIndex != null ? getComponentValue(component, entityIndex) : undefined);
-    useEffect(() => {
-        // component or entityIndex changed, update state to latest value
-        setValue(entityIndex != null ? getComponentValue(component, entityIndex) : undefined);
-        if (entityIndex == null)
-            return;
-        const queryResult = defineQuery([Has(component)], { runOnInit: false });
-        const subscription = queryResult.update$.subscribe((update) => {
-            if (isComponentUpdate(update, component) && update.entity === entityIndex) {
-                const [nextValue] = update.value;
-                setValue(nextValue);
-            }
-        });
-        return () => subscription.unsubscribe();
-    }, [component, entityIndex]);
-    return value ?? defaultValue;
-}
-
-/** @deprecated See https://github.com/latticexyz/mud/issues/339 */
-const useDeprecatedComputedValue = (computedValue) => {
-    const [value, setValue] = useState(computedValue.get());
-    useEffect(() => {
-        const unsubscribe = computedValue.observe_(() => setValue(computedValue.get()));
-        return () => unsubscribe();
-    }, [computedValue]);
-    return value;
-};
-
-// do not edit .js files directly - edit src/index.jst
-
-
-
-var fastDeepEqual = function equal(a, b) {
-  if (a === b) return true;
-
-  if (a && b && typeof a == 'object' && typeof b == 'object') {
-    if (a.constructor !== b.constructor) return false;
-
-    var length, i, keys;
-    if (Array.isArray(a)) {
-      length = a.length;
-      if (length != b.length) return false;
-      for (i = length; i-- !== 0;)
-        if (!equal(a[i], b[i])) return false;
-      return true;
-    }
-
-
-
-    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
-    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
-    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
-
-    keys = Object.keys(a);
-    length = keys.length;
-    if (length !== Object.keys(b).length) return false;
-
-    for (i = length; i-- !== 0;)
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
-
-    for (i = length; i-- !== 0;) {
-      var key = keys[i];
-
-      if (!equal(a[key], b[key])) return false;
-    }
-
-    return true;
-  }
-
-  // true if both NaN, false otherwise
-  return a!==a && b!==b;
-};
-
-const useDeepMemo = (currentValue) => {
-    const [stableValue, setStableValue] = useState(currentValue);
-    useEffect(() => {
-        if (!fastDeepEqual(currentValue, stableValue)) {
-            setStableValue(currentValue);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [currentValue]);
-    return stableValue;
-};
-
-// This does a little more rendering than is necessary when arguments change,
-// but at least it's giving correct results now. Will optimize later!
-/**
- * Returns all matching `EntityIndex`es for a given entity query,
- * and triggers a re-render as new query results come in.
- *
- * @param fragments Query fragments to match against, executed from left to right.
- * @param options.updateOnValueChange False - re-renders only on entity array changes. True (default) - also on component value changes.
- * @returns Set of entities matching the query fragments.
- */
-function useEntityQuery(fragments, options) {
-    const updateOnValueChange = options?.updateOnValueChange ?? true;
-    const stableFragments = useDeepMemo(fragments);
-    const query = useMemo(() => defineQuery(stableFragments, { runOnInit: true }), [stableFragments]);
-    const [entities, setEntities] = useState([...query.matching]);
-    useEffect(() => {
-        setEntities([...query.matching]);
-        let observable = query.update$.pipe(map(() => [...query.matching]));
-        if (!updateOnValueChange) {
-            // re-render only on entity array changes
-            observable = observable.pipe(distinctUntilChanged((a, b) => fastDeepEqual(a, b)));
-        }
-        const subscription = observable.subscribe((entities) => setEntities(entities));
-        return () => subscription.unsubscribe();
-    }, [query, updateOnValueChange]);
-    return entities;
-}
-
-function useObservableValue(observable, defaultValue) {
-    const [value, setValue] = useState(defaultValue);
-    useEffect(() => {
-        const subscription = observable.subscribe(setValue);
-        return () => subscription.unsubscribe();
-    }, [observable]);
-    return value;
-}
-
-export { useComponentValue, useDeprecatedComputedValue, useEntityQuery, useObservableValue };
-//# sourceMappingURL=index.js.map
+import{defineQuery as b,getComponentValue as f,Has as d,isComponentUpdate as S}from"@latticexyz/recs";import{useEffect as C,useState as T}from"react";function H(e,t,n){let[s,u]=T(t!=null?f(e,t):void 0);return C(()=>{if(u(t!=null?f(e,t):void 0),t==null)return;let r=b([d(e)],{runOnInit:!1}).update$.subscribe(o=>{if(S(o,e)&&o.entity===t){let[a]=o.value;u(a)}});return()=>r.unsubscribe()},[e,t]),s??n}import{useEffect as x,useState as V}from"react";var z=e=>{let[t,n]=V(e.get());return x(()=>{let s=e.observe_(()=>n(e.get()));return()=>s()},[e]),t};import{defineQuery as h}from"@latticexyz/recs";import{useEffect as y,useMemo as O,useState as R}from"react";import{useEffect as g,useState as v}from"react";import E from"fast-deep-equal";var m=e=>{let[t,n]=v(e);return g(()=>{E(e,t)||n(e)},[e]),t};import P from"fast-deep-equal";import{distinctUntilChanged as q,map as Q}from"rxjs";function te(e,t){let n=t?.updateOnValueChange??!0,s=m(e),u=O(()=>h(s,{runOnInit:!0}),[s]),[l,r]=R([...u.matching]);return y(()=>{r([...u.matching]);let o=u.update$.pipe(Q(()=>[...u.matching]));n||(o=o.pipe(q((i,c)=>P(i,c))));let a=o.subscribe(i=>r(i));return()=>a.unsubscribe()},[u,n]),l}import{useEffect as I,useState as U}from"react";function se(e,t){let[n,s]=U(t);return I(()=>{let u=e.subscribe(s);return()=>u.unsubscribe()},[e]),n}import{useEffect as p,useRef as D,useState as F}from"react";function ae(e){let t=D(e),[n,s]=F(e==null?{status:"idle"}:{status:"pending"});return p(()=>{e!==t.current&&(t.current=e,s(e==null?{status:"idle"}:{status:"pending"}))},[e]),p(()=>{e!=null&&Promise.allSettled([e]).then(([u])=>{e===t.current&&s(u)})},[e]),n}export{H as useComponentValue,z as useDeprecatedComputedValue,te as useEntityQuery,se as useObservableValue,ae as usePromise};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/useComponentValue.ts","../src/useDeprecatedComputedValue.ts","../../../node_modules/.pnpm/fast-deep-equal@3.1.3/node_modules/fast-deep-equal/index.js","../src/utils/useDeepMemo.ts","../src/useEntityQuery.ts","../src/useObservableValue.ts"],"sourcesContent":[null,null,"'use strict';\n\n// do not edit .js files directly - edit src/index.jst\n\n\n\nmodule.exports = function equal(a, b) {\n  if (a === b) return true;\n\n  if (a && b && typeof a == 'object' && typeof b == 'object') {\n    if (a.constructor !== b.constructor) return false;\n\n    var length, i, keys;\n    if (Array.isArray(a)) {\n      length = a.length;\n      if (length != b.length) return false;\n      for (i = length; i-- !== 0;)\n        if (!equal(a[i], b[i])) return false;\n      return true;\n    }\n\n\n\n    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;\n    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();\n    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();\n\n    keys = Object.keys(a);\n    length = keys.length;\n    if (length !== Object.keys(b).length) return false;\n\n    for (i = length; i-- !== 0;)\n      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;\n\n    for (i = length; i-- !== 0;) {\n      var key = keys[i];\n\n      if (!equal(a[key], b[key])) return false;\n    }\n\n    return true;\n  }\n\n  // true if both NaN, false otherwise\n  return a!==a && b!==b;\n};\n",null,null,null],"names":["isEqual"],"mappings":"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"}
+{"version":3,"sources":["../src/useComponentValue.ts","../src/useDeprecatedComputedValue.ts","../src/useEntityQuery.ts","../src/utils/useDeepMemo.ts","../src/useObservableValue.ts","../src/usePromise.ts"],"sourcesContent":["import {\n  Component,\n  ComponentValue,\n  defineQuery,\n  Entity,\n  getComponentValue,\n  Has,\n  isComponentUpdate,\n  Schema,\n} from \"@latticexyz/recs\";\nimport { useEffect, useState } from \"react\";\n\nexport function useComponentValue<S extends Schema>(\n  component: Component<S>,\n  entity: Entity | undefined,\n  defaultValue: ComponentValue<S>\n): ComponentValue<S>;\n\nexport function useComponentValue<S extends Schema>(\n  component: Component<S>,\n  entity: Entity | undefined\n): ComponentValue<S> | undefined;\n\nexport function useComponentValue<S extends Schema>(\n  component: Component<S>,\n  entity: Entity | undefined,\n  defaultValue?: ComponentValue<S>\n) {\n  const [value, setValue] = useState(entity != null ? getComponentValue(component, entity) : undefined);\n\n  useEffect(() => {\n    // component or entity changed, update state to latest value\n    setValue(entity != null ? getComponentValue(component, entity) : undefined);\n    if (entity == null) return;\n\n    const queryResult = defineQuery([Has(component)], { runOnInit: false });\n    const subscription = queryResult.update$.subscribe((update) => {\n      if (isComponentUpdate(update, component) && update.entity === entity) {\n        const [nextValue] = update.value;\n        setValue(nextValue);\n      }\n    });\n    return () => subscription.unsubscribe();\n  }, [component, entity]);\n\n  return value ?? defaultValue;\n}\n","import { IComputedValue } from \"mobx\";\nimport { useEffect, useState } from \"react\";\n\n/** @deprecated See https://github.com/latticexyz/mud/issues/339 */\nexport const useDeprecatedComputedValue = <T>(computedValue: IComputedValue<T> & { observe_: any }) => {\n  const [value, setValue] = useState<T>(computedValue.get());\n\n  useEffect(() => {\n    const unsubscribe = computedValue.observe_(() => setValue(computedValue.get()));\n    return () => unsubscribe();\n  }, [computedValue]);\n\n  return value;\n};\n","import { defineQuery, QueryFragment } from \"@latticexyz/recs\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useDeepMemo } from \"./utils/useDeepMemo\";\nimport isEqual from \"fast-deep-equal\";\nimport { distinctUntilChanged, map } from \"rxjs\";\n\n// This does a little more rendering than is necessary when arguments change,\n// but at least it's giving correct results now. Will optimize later!\n\n/**\n * Returns all matching entities for a given entity query,\n * and triggers a re-render as new query results come in.\n *\n * @param fragments Query fragments to match against, executed from left to right.\n * @param options.updateOnValueChange False - re-renders only on entity array changes. True (default) - also on component value changes.\n * @returns Set of entities matching the query fragments.\n */\nexport function useEntityQuery(fragments: QueryFragment[], options?: { updateOnValueChange?: boolean }) {\n  const updateOnValueChange = options?.updateOnValueChange ?? true;\n\n  const stableFragments = useDeepMemo(fragments);\n  const query = useMemo(() => defineQuery(stableFragments, { runOnInit: true }), [stableFragments]);\n  const [entities, setEntities] = useState([...query.matching]);\n\n  useEffect(() => {\n    setEntities([...query.matching]);\n    let observable = query.update$.pipe(map(() => [...query.matching]));\n    if (!updateOnValueChange) {\n      // re-render only on entity array changes\n      observable = observable.pipe(distinctUntilChanged((a, b) => isEqual(a, b)));\n    }\n    const subscription = observable.subscribe((entities) => setEntities(entities));\n    return () => subscription.unsubscribe();\n  }, [query, updateOnValueChange]);\n\n  return entities;\n}\n","import { useEffect, useState } from \"react\";\nimport isEqual from \"fast-deep-equal\";\n\nexport const useDeepMemo = <T>(currentValue: T): T => {\n  const [stableValue, setStableValue] = useState(currentValue);\n\n  useEffect(() => {\n    if (!isEqual(currentValue, stableValue)) {\n      setStableValue(currentValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [currentValue]);\n\n  return stableValue;\n};\n","import { useEffect, useState } from \"react\";\nimport { Observable } from \"rxjs\";\n\nexport function useObservableValue<T>(observable: Observable<T>, defaultValue: T): T;\n\nexport function useObservableValue<T>(observable: Observable<T>): T | undefined;\n\nexport function useObservableValue<T>(observable: Observable<T>, defaultValue?: T) {\n  const [value, setValue] = useState(defaultValue);\n\n  useEffect(() => {\n    const subscription = observable.subscribe(setValue);\n    return () => subscription.unsubscribe();\n  }, [observable]);\n\n  return value;\n}\n","import { useEffect, useRef, useState } from \"react\";\n\n// TODO: narrow type so `null`/`undefined` always return `{status: \"idle\"}`?\n\nexport type UsePromiseResult<T> = PromiseSettledResult<Awaited<T>> | { status: \"pending\" } | { status: \"idle\" };\n\nexport function usePromise<T>(promise: PromiseLike<T> | null | undefined) {\n  const promiseRef = useRef(promise);\n  const [result, setResult] = useState<UsePromiseResult<T>>(\n    promise == null ? { status: \"idle\" } : { status: \"pending\" }\n  );\n\n  useEffect(() => {\n    if (promise !== promiseRef.current) {\n      promiseRef.current = promise;\n      setResult(promise == null ? { status: \"idle\" } : { status: \"pending\" });\n    }\n  }, [promise]);\n\n  useEffect(() => {\n    if (promise == null) return;\n    // TODO: do we need to check if result is already populated?\n    Promise.allSettled([promise]).then(([settled]) => {\n      if (promise === promiseRef.current) {\n        setResult(settled);\n      }\n    });\n  }, [promise]);\n\n  return result;\n}\n"],"mappings":"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","names":["defineQuery","getComponentValue","Has","isComponentUpdate","useEffect","useState","useComponentValue","component","entity","defaultValue","value","setValue","subscription","update","nextValue","useEffect","useState","useDeprecatedComputedValue","computedValue","value","setValue","unsubscribe","defineQuery","useEffect","useMemo","useState","useEffect","useState","isEqual","useDeepMemo","currentValue","stableValue","setStableValue","isEqual","distinctUntilChanged","map","useEntityQuery","fragments","options","updateOnValueChange","stableFragments","useDeepMemo","query","useMemo","defineQuery","entities","setEntities","useState","useEffect","observable","a","b","subscription","useEffect","useState","useObservableValue","observable","defaultValue","value","setValue","subscription","useEffect","useRef","useState","usePromise","promise","promiseRef","result","setResult","settled"]}

package/package.json

@@ -1,57 +1,46 @@
 {
   "name": "@latticexyz/react",
-  "version": "2.0.0-alpha.94+010740d0",
+  "version": "2.0.0-foundry-js-c7b0289b",
   "description": "React tools for MUD client.",
-  "license": "MIT",
-  "source": "src/index.ts",
-  "main": "dist/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/latticexyz/mud.git",
     "directory": "packages/react"
   },
-  "scripts": {
-    "prepare": "pnpm build",
-    "docs": "rimraf API && typedoc src && find API -type f -name '*.md' -exec sed -E -i \"\" \"s/(#.*)(<.*>)/\\1/\" {} \\; && echo 'label: API' > API/index.yml",
-    "test": "tsc --noEmit && jest",
-    "prepack": "mv package.json package.json.bak && jq \".main = \\\"dist/index.js\\\"\" package.json.bak > package.json ",
-    "postpack": "mv package.json.bak package.json || echo 'no package.json.bak'",
-    "build": "rimraf dist && rollup -c rollup.config.js",
-    "release": "npm publish --access=public"
-  },
-  "peerDependencies": {
-    "@latticexyz/recs": "latest",
-    "mobx": "^6.4.2",
-    "react": "^18.2.0",
-    "rxjs": "^7.5.5"
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js"
   },
+  "types": "src/index.ts",
   "dependencies": {
-    "fast-deep-equal": "^3.1.3"
+    "fast-deep-equal": "^3.1.3",
+    "mobx": "^6.7.0",
+    "react": "^18.2.0",
+    "rxjs": "7.5.5",
+    "@latticexyz/recs": "2.0.0-foundry-js-c7b0289b",
+    "@latticexyz/store": "2.0.0-foundry-js-c7b0289b"
   },
   "devDependencies": {
-    "@latticexyz/recs": "2.0.0-alpha.94+010740d0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^11.0.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^27.4.1",
-    "@types/react": "^18.0.12",
-    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.3.1",
-    "mobx": "^6.4.2",
-    "react": "^18.2.0",
+    "@types/react": "18.2.22",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint-plugin-react": "7.31.11",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "jsdom": "^22.1.0",
     "react-test-renderer": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.69.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rxjs": "^7.5.5",
-    "ts-jest": "^29.0.5",
-    "tslib": "^2.5.0",
-    "typedoc": "0.23.21",
-    "typedoc-plugin-markdown": "^3.13.6",
-    "typescript": "^4.9.5"
+    "tsup": "^6.7.0",
+    "vite": "^4.3.6",
+    "vitest": "0.31.4"
   },
-  "gitHead": "010740d09d40d4ff6d95538d498a513fbb65ca45"
-}
+  "gitHead": "914a1e0ae4a573d685841ca2ea921435057deb8f",
+  "scripts": {
+    "build": "pnpm run build:js",
+    "build:js": "tsup",
+    "clean": "pnpm run clean:js",
+    "clean:js": "rimraf dist",
+    "dev": "tsup --watch",
+    "test": "tsc --noEmit && vitest --run",
+    "test:ci": "pnpm run test"
+  }
+}

package/{dist/index.d.ts → src/index.ts}

@@ -2,3 +2,4 @@ export * from "./useComponentValue";
 export * from "./useDeprecatedComputedValue";
 export * from "./useEntityQuery";
 export * from "./useObservableValue";
+export * from "./usePromise";

package/src/useComponentValue.test.ts

@@ -0,0 +1,89 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import {
+  World,
+  Type,
+  createWorld,
+  defineComponent,
+  Component,
+  createEntity,
+  withValue,
+  setComponent,
+  removeComponent,
+} from "@latticexyz/recs";
+import { useComponentValue } from "./useComponentValue";
+import { describe, it, expect, beforeEach } from "vitest";
+
+describe("useComponentValue", () => {
+  let world: World;
+  let Position: Component<{
+    x: Type.Number;
+    y: Type.Number;
+  }>;
+
+  beforeEach(() => {
+    world = createWorld();
+    Position = defineComponent(world, { x: Type.Number, y: Type.Number }, { id: "Position" });
+  });
+
+  it("should return Position value for entity", () => {
+    const entity = createEntity(world, [withValue(Position, { x: 1, y: 1 })]);
+
+    const { result } = renderHook(() => useComponentValue(Position, entity));
+    expect(result.current).toEqual({ x: 1, y: 1 });
+
+    act(() => {
+      setComponent(Position, entity, { x: 0, y: 0 });
+    });
+    expect(result.current).toEqual({ x: 0, y: 0 });
+
+    act(() => {
+      removeComponent(Position, entity);
+    });
+    expect(result.current).toBe(undefined);
+  });
+
+  it("should re-render only when Position changes for entity", () => {
+    const entity = createEntity(world, [withValue(Position, { x: 1, y: 1 })]);
+    const otherEntity = createEntity(world, [withValue(Position, { x: 2, y: 2 })]);
+
+    const { result } = renderHook(() => useComponentValue(Position, entity));
+    expect(result.all.length).toBe(2);
+    expect(result.current).toEqual({ x: 1, y: 1 });
+
+    act(() => {
+      setComponent(Position, entity, { x: 0, y: 0 });
+    });
+    expect(result.all.length).toBe(3);
+    expect(result.current).toEqual({ x: 0, y: 0 });
+
+    act(() => {
+      setComponent(Position, otherEntity, { x: 0, y: 0 });
+      removeComponent(Position, otherEntity);
+    });
+    expect(result.all.length).toBe(3);
+    expect(result.current).toEqual({ x: 0, y: 0 });
+
+    act(() => {
+      removeComponent(Position, entity);
+    });
+    expect(result.all.length).toBe(4);
+    expect(result.current).toBe(undefined);
+  });
+
+  it("should return default value when Position is not set", () => {
+    const entity = createEntity(world);
+
+    const { result } = renderHook(() => useComponentValue(Position, entity, { x: -1, y: -1 }));
+    expect(result.current).toEqual({ x: -1, y: -1 });
+
+    act(() => {
+      setComponent(Position, entity, { x: 0, y: 0 });
+    });
+    expect(result.current).toEqual({ x: 0, y: 0 });
+
+    act(() => {
+      removeComponent(Position, entity);
+    });
+    expect(result.current).toEqual({ x: -1, y: -1 });
+  });
+});

package/src/useComponentValue.ts

@@ -0,0 +1,47 @@
+import {
+  Component,
+  ComponentValue,
+  defineQuery,
+  Entity,
+  getComponentValue,
+  Has,
+  isComponentUpdate,
+  Schema,
+} from "@latticexyz/recs";
+import { useEffect, useState } from "react";
+
+export function useComponentValue<S extends Schema>(
+  component: Component<S>,
+  entity: Entity | undefined,
+  defaultValue: ComponentValue<S>
+): ComponentValue<S>;
+
+export function useComponentValue<S extends Schema>(
+  component: Component<S>,
+  entity: Entity | undefined
+): ComponentValue<S> | undefined;
+
+export function useComponentValue<S extends Schema>(
+  component: Component<S>,
+  entity: Entity | undefined,
+  defaultValue?: ComponentValue<S>
+) {
+  const [value, setValue] = useState(entity != null ? getComponentValue(component, entity) : undefined);
+
+  useEffect(() => {
+    // component or entity changed, update state to latest value
+    setValue(entity != null ? getComponentValue(component, entity) : undefined);
+    if (entity == null) return;
+
+    const queryResult = defineQuery([Has(component)], { runOnInit: false });
+    const subscription = queryResult.update$.subscribe((update) => {
+      if (isComponentUpdate(update, component) && update.entity === entity) {
+        const [nextValue] = update.value;
+        setValue(nextValue);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [component, entity]);
+
+  return value ?? defaultValue;
+}

package/src/useDeprecatedComputedValue.ts

@@ -0,0 +1,14 @@
+import { IComputedValue } from "mobx";
+import { useEffect, useState } from "react";
+
+/** @deprecated See https://github.com/latticexyz/mud/issues/339 */
+export const useDeprecatedComputedValue = <T>(computedValue: IComputedValue<T> & { observe_: any }) => {
+  const [value, setValue] = useState<T>(computedValue.get());
+
+  useEffect(() => {
+    const unsubscribe = computedValue.observe_(() => setValue(computedValue.get()));
+    return () => unsubscribe();
+  }, [computedValue]);
+
+  return value;
+};

package/src/useEntityQuery.test.ts

@@ -0,0 +1,164 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import {
+  World,
+  Type,
+  createWorld,
+  defineComponent,
+  Component,
+  createEntity,
+  withValue,
+  Has,
+  setComponent,
+  HasValue,
+  removeComponent,
+} from "@latticexyz/recs";
+import { useEntityQuery } from "./useEntityQuery";
+import { describe, beforeEach, it, expect } from "vitest";
+
+describe("useEntityQuery", () => {
+  let world: World;
+  let Position: Component<{
+    x: Type.Number;
+    y: Type.Number;
+  }>;
+  let OwnedBy: Component<{ value: Type.Entity }>;
+
+  beforeEach(() => {
+    world = createWorld();
+    Position = defineComponent(world, { x: Type.Number, y: Type.Number }, { id: "Position" });
+    OwnedBy = defineComponent(world, { value: Type.Entity }, { id: "OwnedBy" });
+  });
+
+  it("should find entities with Position component", () => {
+    const entity1 = createEntity(world, [withValue(Position, { x: 1, y: 1 })]);
+    const entity2 = createEntity(world, [withValue(Position, { x: 2, y: 2 })]);
+    const entity3 = createEntity(world, []);
+
+    const { result } = renderHook(() => useEntityQuery([Has(Position)], { updateOnValueChange: false }));
+    const { result: resultOnValueChange } = renderHook(() =>
+      useEntityQuery([Has(Position)], { updateOnValueChange: true })
+    );
+
+    expect(result.current.length).toBe(2);
+    expect(result.current).toContain(entity1);
+    expect(result.current).toContain(entity2);
+    expect(result.current).not.toContain(entity3);
+    expect(resultOnValueChange.current).toEqual(result.current);
+
+    act(() => {
+      setComponent(Position, entity3, { x: 0, y: 0 });
+    });
+
+    expect(result.current.length).toBe(3);
+    expect(result.current).toContain(entity1);
+    expect(result.current).toContain(entity2);
+    expect(result.current).toContain(entity3);
+    expect(resultOnValueChange.current).toEqual(result.current);
+
+    act(() => {
+      removeComponent(Position, entity1);
+      removeComponent(Position, entity3);
+    });
+
+    expect(result.current.length).toBe(1);
+    expect(result.current).not.toContain(entity1);
+    expect(result.current).toContain(entity2);
+    expect(result.current).not.toContain(entity3);
+    expect(resultOnValueChange.current).toEqual(result.current);
+
+    act(() => {
+      removeComponent(Position, entity2);
+    });
+
+    expect(result.current.length).toBe(0);
+  });
+
+  it("should re-render only when Position changes", () => {
+    const entity1 = createEntity(world, [withValue(Position, { x: 1, y: 1 })]);
+    const entity2 = createEntity(world, [withValue(Position, { x: 2, y: 2 })]);
+    const entity3 = createEntity(world, []);
+
+    const { result } = renderHook(() => useEntityQuery([Has(Position)], { updateOnValueChange: false }));
+    const { result: resultOnValueChange } = renderHook(() =>
+      useEntityQuery([Has(Position)], { updateOnValueChange: true })
+    );
+
+    expect(result.all).toHaveLength(2);
+    expect(result.current).toHaveLength(2);
+    expect(result.current).toContain(entity1);
+    expect(result.current).toContain(entity2);
+    expect(result.current).not.toContain(entity3);
+
+    // Changing an entity's component value should NOT re-render,
+    // unless updateOnValueChange === true
+    act(() => {
+      setComponent(Position, entity2, { x: 0, y: 0 });
+    });
+
+    expect(result.all).toHaveLength(2);
+    expect(resultOnValueChange.all).toHaveLength(3);
+
+    // Changing a different component value should NOT re-render
+    act(() => {
+      setComponent(OwnedBy, entity2, { value: entity1 });
+      setComponent(OwnedBy, entity3, { value: entity1 });
+    });
+
+    expect(result.all).toHaveLength(2);
+    expect(resultOnValueChange.all).toHaveLength(3);
+
+    // Changing which entities have the component should re-render
+    act(() => {
+      setComponent(Position, entity3, { x: 0, y: 0 });
+    });
+
+    expect(result.all).toHaveLength(3);
+    expect(resultOnValueChange.all).toHaveLength(4);
+    expect(result.current).toHaveLength(3);
+    expect(result.current).toContain(entity1);
+    expect(result.current).toContain(entity2);
+    expect(result.current).toContain(entity3);
+
+    // Changing which entities have the component should re-render
+    act(() => {
+      removeComponent(Position, entity1);
+    });
+
+    expect(result.all).toHaveLength(4);
+    expect(resultOnValueChange.all).toHaveLength(5);
+    expect(result.current).toHaveLength(2);
+    expect(result.current).toContain(entity2);
+    expect(result.current).toContain(entity3);
+  });
+
+  it("should re-render as hook arguments change", () => {
+    // TODO: reduce re-renders during argument changes?
+
+    const entity1 = createEntity(world, [withValue(Position, { x: 1, y: 1 })]);
+    const entity2 = createEntity(world, [withValue(Position, { x: 2, y: 2 })]);
+    const entity3 = createEntity(world, [withValue(Position, { x: 2, y: 2 })]);
+
+    const { result, rerender } = renderHook(({ x, y }) => useEntityQuery([HasValue(Position, { x, y })]), {
+      initialProps: { x: 1, y: 1 },
+    });
+
+    expect(result.all).toHaveLength(2);
+    expect(result.current).toHaveLength(1);
+    expect(result.current).toContain(entity1);
+
+    rerender({ x: 1, y: 1 });
+    expect(result.all).toHaveLength(3);
+    expect(result.current).toHaveLength(1);
+    expect(result.current).toContain(entity1);
+
+    rerender({ x: 2, y: 2 });
+    expect(result.all).toHaveLength(6);
+    expect(result.current).toHaveLength(2);
+    expect(result.current).toContain(entity2);
+    expect(result.current).toContain(entity3);
+
+    rerender({ x: -1, y: -1 });
+    expect(result.all).toHaveLength(9);
+    expect(result.current).toHaveLength(0);
+  });
+});

package/src/useEntityQuery.ts

@@ -0,0 +1,37 @@
+import { defineQuery, QueryFragment } from "@latticexyz/recs";
+import { useEffect, useMemo, useState } from "react";
+import { useDeepMemo } from "./utils/useDeepMemo";
+import isEqual from "fast-deep-equal";
+import { distinctUntilChanged, map } from "rxjs";
+
+// This does a little more rendering than is necessary when arguments change,
+// but at least it's giving correct results now. Will optimize later!
+
+/**
+ * Returns all matching entities for a given entity query,
+ * and triggers a re-render as new query results come in.
+ *
+ * @param fragments Query fragments to match against, executed from left to right.
+ * @param options.updateOnValueChange False - re-renders only on entity array changes. True (default) - also on component value changes.
+ * @returns Set of entities matching the query fragments.
+ */
+export function useEntityQuery(fragments: QueryFragment[], options?: { updateOnValueChange?: boolean }) {
+  const updateOnValueChange = options?.updateOnValueChange ?? true;
+
+  const stableFragments = useDeepMemo(fragments);
+  const query = useMemo(() => defineQuery(stableFragments, { runOnInit: true }), [stableFragments]);
+  const [entities, setEntities] = useState([...query.matching]);
+
+  useEffect(() => {
+    setEntities([...query.matching]);
+    let observable = query.update$.pipe(map(() => [...query.matching]));
+    if (!updateOnValueChange) {
+      // re-render only on entity array changes
+      observable = observable.pipe(distinctUntilChanged((a, b) => isEqual(a, b)));
+    }
+    const subscription = observable.subscribe((entities) => setEntities(entities));
+    return () => subscription.unsubscribe();
+  }, [query, updateOnValueChange]);
+
+  return entities;
+}

package/src/useObservableValue.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+import { Observable } from "rxjs";
+
+export function useObservableValue<T>(observable: Observable<T>, defaultValue: T): T;
+
+export function useObservableValue<T>(observable: Observable<T>): T | undefined;
+
+export function useObservableValue<T>(observable: Observable<T>, defaultValue?: T) {
+  const [value, setValue] = useState(defaultValue);
+
+  useEffect(() => {
+    const subscription = observable.subscribe(setValue);
+    return () => subscription.unsubscribe();
+  }, [observable]);
+
+  return value;
+}

package/src/usePromise.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from "react";
+
+// TODO: narrow type so `null`/`undefined` always return `{status: "idle"}`?
+
+export type UsePromiseResult<T> = PromiseSettledResult<Awaited<T>> | { status: "pending" } | { status: "idle" };
+
+export function usePromise<T>(promise: PromiseLike<T> | null | undefined) {
+  const promiseRef = useRef(promise);
+  const [result, setResult] = useState<UsePromiseResult<T>>(
+    promise == null ? { status: "idle" } : { status: "pending" }
+  );
+
+  useEffect(() => {
+    if (promise !== promiseRef.current) {
+      promiseRef.current = promise;
+      setResult(promise == null ? { status: "idle" } : { status: "pending" });
+    }
+  }, [promise]);
+
+  useEffect(() => {
+    if (promise == null) return;
+    // TODO: do we need to check if result is already populated?
+    Promise.allSettled([promise]).then(([settled]) => {
+      if (promise === promiseRef.current) {
+        setResult(settled);
+      }
+    });
+  }, [promise]);
+
+  return result;
+}

package/src/utils/useDeepMemo.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+import isEqual from "fast-deep-equal";
+
+export const useDeepMemo = <T>(currentValue: T): T => {
+  const [stableValue, setStableValue] = useState(currentValue);
+
+  useEffect(() => {
+    if (!isEqual(currentValue, stableValue)) {
+      setStableValue(currentValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentValue]);
+
+  return stableValue;
+};

package/src/utils/useMountedState.ts

@@ -0,0 +1,23 @@
+import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Use in place of useState when the component may be unmounted before the state is updated.
+ */
+export function useMountedState<T>(initialState: T | (() => T)): [T, Dispatch<SetStateAction<T>>] {
+  const [state, setState] = useState<T>(initialState);
+  const mountedRef = useRef(false);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  });
+  const mountedSetState: typeof setState = useCallback((...args) => {
+    if (mountedRef.current) {
+      setState(...args);
+    } else {
+      console.warn("Ignoring `setState` call because component unmounted", ...args);
+    }
+  }, []);
+  return [state, mountedSetState];
+}

package/dist/useComponentValue.d.ts

@@ -1,3 +0,0 @@
-import { Component, ComponentValue, EntityIndex, Metadata, Schema } from "@latticexyz/recs";
-export declare function useComponentValue<S extends Schema>(component: Component<S, Metadata, undefined>, entityIndex: EntityIndex | undefined, defaultValue: ComponentValue<S>): ComponentValue<S>;
-export declare function useComponentValue<S extends Schema>(component: Component<S, Metadata, undefined>, entityIndex: EntityIndex | undefined): ComponentValue<S> | undefined;

package/dist/useComponentValue.test.d.ts

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

package/dist/useDeprecatedComputedValue.d.ts

@@ -1,5 +0,0 @@
-import { IComputedValue } from "mobx";
-/** @deprecated See https://github.com/latticexyz/mud/issues/339 */
-export declare const useDeprecatedComputedValue: <T>(computedValue: IComputedValue<T> & {
-    observe_: any;
-}) => T;

package/dist/useEntityQuery.d.ts

@@ -1,12 +0,0 @@
-import { QueryFragment } from "@latticexyz/recs";
-/**
- * Returns all matching `EntityIndex`es for a given entity query,
- * and triggers a re-render as new query results come in.
- *
- * @param fragments Query fragments to match against, executed from left to right.
- * @param options.updateOnValueChange False - re-renders only on entity array changes. True (default) - also on component value changes.
- * @returns Set of entities matching the query fragments.
- */
-export declare function useEntityQuery(fragments: QueryFragment[], options?: {
-    updateOnValueChange?: boolean;
-}): import("@latticexyz/recs").EntityIndex[];

package/dist/useEntityQuery.test.d.ts

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

package/dist/useObservableValue.d.ts

@@ -1,3 +0,0 @@
-import { Observable } from "rxjs";
-export declare function useObservableValue<T>(observable: Observable<T>, defaultValue: T): T;
-export declare function useObservableValue<T>(observable: Observable<T>): T | undefined;

package/dist/utils/useDeepMemo.d.ts

@@ -1 +0,0 @@
-export declare const useDeepMemo: <T>(currentValue: T) => T;