@latticexyz/react 2.0.0-transaction-context-324984c5 → 2.0.0

package/CHANGELOG.md

@@ -1,14 +1,14 @@
 # Change Log
 
-## 2.0.0-transaction-context-324984c5
+## 2.0.0
 
 ### 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.
+- e3de1a338: 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).
+- 939916bcd: 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);
@@ -29,107 +29,144 @@
 
 ### Patch Changes
 
-- 59054203: TS packages now generate their respective `.d.ts` type definition files for better compatibility when using MUD with `moduleResolution` set to `bundler` or `node16` and fixes issues around missing type declarations for dependent packages.
-- 9ef3f9a7: Fixed an issue where `useComponentValue` would not detect a change and re-render if the component value was immediately removed.
-- Updated dependencies [7ce82b6f]
-- Updated dependencies [d8c8f66b]
-- Updated dependencies [c6c13f2e]
-- Updated dependencies [1b86eac0]
-- Updated dependencies [a35c05ea]
-- Updated dependencies [c963b46c]
-- Updated dependencies [05b3e888]
-- Updated dependencies [ce7125a1]
-- Updated dependencies [aea67c58]
-- Updated dependencies [07dd6f32]
-- Updated dependencies [c14f8bf1]
-- Updated dependencies [90e4161b]
-- Updated dependencies [aabd3076]
-- Updated dependencies [331dbfdc]
-- Updated dependencies [1d60930d]
-- Updated dependencies [f9f9609e]
-- Updated dependencies [904fd7d4]
-- Updated dependencies [e6c03a87]
-- Updated dependencies [1077c7f5]
-- 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 [37c228c6]
-- Updated dependencies [ae340b2b]
-- Updated dependencies [1bf2e908]
-- 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 [37c228c6]
-- Updated dependencies [37c228c6]
-- Updated dependencies [44a5432a]
-- Updated dependencies [6e66c5b7]
-- Updated dependencies [8d51a034]
-- Updated dependencies [1e2ad78e]
-- Updated dependencies [65c9546c]
-- Updated dependencies [48909d15]
-- Updated dependencies [7b28d32e]
-- Updated dependencies [59054203]
-- Updated dependencies [48c51b52]
-- Updated dependencies [9f8b84e7]
-- Updated dependencies [66cc35a8]
-- Updated dependencies [672d05ca]
-- Updated dependencies [55a05fd7]
-- Updated dependencies [63831a26]
-- Updated dependencies [6db95ce1]
-- Updated dependencies [5d737cf2]
-- Updated dependencies [a7b30c79]
-- Updated dependencies [92de5998]
-- Updated dependencies [22ee4470]
-- Updated dependencies [ad4ac445]
-- Updated dependencies [be313068]
-- Updated dependencies [ac508bf1]
-- Updated dependencies [bb91edaa]
-- Updated dependencies [5ac4c97f]
-- Updated dependencies [bfcb293d]
-- Updated dependencies [1890f1a0]
-- Updated dependencies [e4817174]
-- Updated dependencies [9b43029c]
-- Updated dependencies [37c228c6]
-- Updated dependencies [55ab88a6]
-- Updated dependencies [37c228c6]
-- 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 [37c228c6]
-- Updated dependencies [708b49c5]
-- Updated dependencies [3ac68ade]
-- Updated dependencies [22ba7b67]
-- Updated dependencies [5e71e1cb]
-- Updated dependencies [5c52bee0]
-- Updated dependencies [8025c350]
-- Updated dependencies [745485cd]
-- Updated dependencies [afdba793]
-- Updated dependencies [37c228c6]
-- Updated dependencies [cea754dd]
-- Updated dependencies [cc2c8da0]
-- Updated dependencies [103f635e]
-  - @latticexyz/store@2.0.0-transaction-context-324984c5
-  - @latticexyz/recs@2.0.0-transaction-context-324984c5
+- 01e46d99: Removed some unused files, namely `curry` in `@latticexyz/common` and `useDeprecatedComputedValue` from `@latticexyz/react`.
+- 590542030: TS packages now generate their respective `.d.ts` type definition files for better compatibility when using MUD with `moduleResolution` set to `bundler` or `node16` and fixes issues around missing type declarations for dependent packages.
+- 9ef3f9a7c: Fixed an issue where `useComponentValue` would not detect a change and re-render if the component value was immediately removed.
+- Updated dependencies [7ce82b6fc]
+- Updated dependencies [d8c8f66bf]
+- Updated dependencies [c6c13f2ea]
+- Updated dependencies [1b86eac05]
+- Updated dependencies [a35c05ea9]
+- Updated dependencies [c9ee5e4a]
+- Updated dependencies [c963b46c7]
+- Updated dependencies [05b3e8882]
+- Updated dependencies [ce7125a1b]
+- Updated dependencies [aea67c580]
+- Updated dependencies [07dd6f32c]
+- Updated dependencies [c14f8bf1e]
+- Updated dependencies [90e4161bb]
+- Updated dependencies [aabd30767]
+- Updated dependencies [331dbfdcb]
+- Updated dependencies [1d60930d6]
+- Updated dependencies [f9f9609ef]
+- Updated dependencies [904fd7d4e]
+- Updated dependencies [e6c03a87a]
+- Updated dependencies [1077c7f53]
+- Updated dependencies [2c920de7]
+- Updated dependencies [b9e562d8f]
+- Updated dependencies [44236041f]
+- Updated dependencies [759514d8b]
+- Updated dependencies [952cd5344]
+- Updated dependencies [d5094a242]
+- Updated dependencies [a25881160]
+- Updated dependencies [c4d5eb4e4]
+- Updated dependencies [f62c767e7]
+- Updated dependencies [9aa5e786]
+- Updated dependencies [de151fec0]
+- Updated dependencies [37c228c63]
+- Updated dependencies [c991c71a]
+- Updated dependencies [ae340b2bf]
+- Updated dependencies [1bf2e9087]
+- Updated dependencies [211be2a1e]
+- Updated dependencies [0f3e2e02b]
+- Updated dependencies [d08789282]
+- Updated dependencies [5c965a919]
+- Updated dependencies [f99e88987]
+- Updated dependencies [d5b73b126]
+- Updated dependencies [190fdd11]
+- Updated dependencies [433078c54]
+- Updated dependencies [b2d2aa715]
+- Updated dependencies [83583a505]
+- Updated dependencies [5e723b90e]
+- Updated dependencies [6573e38e9]
+- Updated dependencies [afaf2f5ff]
+- Updated dependencies [37c228c63]
+- Updated dependencies [37c228c63]
+- Updated dependencies [44a5432ac]
+- Updated dependencies [6e66c5b74]
+- Updated dependencies [8d51a0348]
+- Updated dependencies [1e2ad78e2]
+- Updated dependencies [65c9546c4]
+- Updated dependencies [48909d151]
+- Updated dependencies [7b28d32e5]
+- Updated dependencies [590542030]
+- Updated dependencies [48c51b52a]
+- Updated dependencies [9f8b84e73]
+- Updated dependencies [66cc35a8c]
+- Updated dependencies [672d05ca1]
+- Updated dependencies [55a05fd7a]
+- Updated dependencies [63831a264]
+- Updated dependencies [6db95ce15]
+- Updated dependencies [8193136a9]
+- Updated dependencies [5d737cf2e]
+- Updated dependencies [a7b30c79b]
+- Updated dependencies [92de59982]
+- Updated dependencies [22ee44700]
+- Updated dependencies [ad4ac4459]
+- Updated dependencies [be313068b]
+- Updated dependencies [ac508bf18]
+- Updated dependencies [93390d89]
+- Updated dependencies [bb91edaa0]
+- Updated dependencies [144c0d8d]
+- Updated dependencies [5ac4c97f4]
+- Updated dependencies [bfcb293d1]
+- Updated dependencies [1890f1a06]
+- Updated dependencies [e48171741]
+- Updated dependencies [9b43029c3]
+- Updated dependencies [37c228c63]
+- Updated dependencies [55ab88a60]
+- Updated dependencies [c58da9ad]
+- Updated dependencies [37c228c63]
+- Updated dependencies [535229984]
+- Updated dependencies [af639a264]
+- Updated dependencies [5e723b90e]
+- Updated dependencies [99ab9cd6f]
+- Updated dependencies [0d12db8c2]
+- Updated dependencies [c049c23f4]
+- Updated dependencies [80dd6992e]
+- Updated dependencies [60cfd089f]
+- Updated dependencies [24a6cd536]
+- Updated dependencies [37c228c63]
+- Updated dependencies [708b49c50]
+- Updated dependencies [3ac68ade6]
+- Updated dependencies [22ba7b675]
+- Updated dependencies [3042f86e]
+- Updated dependencies [5e71e1cb5]
+- Updated dependencies [d7b1c588a]
+- Updated dependencies [5c52bee09]
+- Updated dependencies [8025c3505]
+- Updated dependencies [745485cda]
+- Updated dependencies [afdba793f]
+- Updated dependencies [37c228c63]
+- Updated dependencies [3e7d83d0]
+- Updated dependencies [cea754dde]
+- Updated dependencies [cc2c8da00]
+- Updated dependencies [252a1852]
+- Updated dependencies [103f635eb]
+  - @latticexyz/store@2.0.0
+  - @latticexyz/recs@2.0.0
+
+## 2.0.0-next.18
+
+### Patch Changes
+
+- 01e46d99: Removed some unused files, namely `curry` in `@latticexyz/common` and `useDeprecatedComputedValue` from `@latticexyz/react`.
+- Updated dependencies [c9ee5e4a]
+- Updated dependencies [2c920de7]
+- Updated dependencies [44236041]
+- Updated dependencies [9aa5e786]
+- Updated dependencies [c991c71a]
+- Updated dependencies [190fdd11]
+- Updated dependencies [8193136a9]
+- Updated dependencies [93390d89]
+- Updated dependencies [144c0d8d]
+- Updated dependencies [c58da9ad]
+- Updated dependencies [3042f86e]
+- Updated dependencies [d7b1c588a]
+- Updated dependencies [3e7d83d0]
+- Updated dependencies [252a1852]
+  - @latticexyz/store@2.0.0-next.18
+  - @latticexyz/recs@2.0.0-next.18
 
 ## 2.0.0-next.17
 

package/dist/index.d.ts

@@ -1,16 +1,10 @@
 import * as _latticexyz_recs from '@latticexyz/recs';
 import { Schema, Component, Entity, ComponentValue, QueryFragment } from '@latticexyz/recs';
-import { IComputedValue } from 'mobx';
 import { Observable } from 'rxjs';
 
 declare function useComponentValue<S extends Schema>(component: Component<S>, entity: Entity | undefined, defaultValue: ComponentValue<S>): ComponentValue<S>;
 declare function useComponentValue<S extends Schema>(component: Component<S>, entity: Entity | undefined): ComponentValue<S> | undefined;
 
-/** @deprecated See https://github.com/latticexyz/mud/issues/339 */
-declare const useDeprecatedComputedValue: <T>(computedValue: IComputedValue<T> & {
-    observe_: any;
-}) => T;
-
 /**
  * Returns all matching entities for a given entity query,
  * and triggers a re-render as new query results come in.
@@ -33,4 +27,4 @@ type UsePromiseResult<T> = PromiseSettledResult<Awaited<T>> | {
 };
 declare function usePromise<T>(promise: PromiseLike<T> | null | undefined): UsePromiseResult<T>;
 
-export { UsePromiseResult, useComponentValue, useDeprecatedComputedValue, useEntityQuery, useObservableValue, usePromise };
+export { UsePromiseResult, useComponentValue, useEntityQuery, useObservableValue, usePromise };

package/dist/index.js

@@ -1,2 +1,2 @@
-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 o=b([d(e)],{runOnInit:!0}).update$.subscribe(r=>{if(S(r,e)&&r.entity===t){let[a]=r.value;u(a)}});return()=>o.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,o]=R([...u.matching]);return y(()=>{o([...u.matching]);let r=u.update$.pipe(Q(()=>[...u.matching]));n||(r=r.pipe(q((i,c)=>P(i,c))));let a=r.subscribe(i=>o(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};
+import{defineQuery as d,getComponentValue as f,Has as b,isComponentUpdate as S}from"@latticexyz/recs";import{useEffect as V,useState as x}from"react";function A(e,t,u){let[s,n]=x(t!=null?f(e,t):void 0);return V(()=>{if(n(t!=null?f(e,t):void 0),t==null)return;let r=d([b(e)],{runOnInit:!0}).update$.subscribe(o=>{if(S(o,e)&&o.entity===t){let[i]=o.value;n(i)}});return()=>r.unsubscribe()},[e,t]),s??u}import{defineQuery as E}from"@latticexyz/recs";import{useEffect as h,useMemo as v,useState as O}from"react";import{useEffect as C,useState as T}from"react";import g from"fast-deep-equal";var m=e=>{let[t,u]=T(e);return C(()=>{g(e,t)||u(e)},[e]),t};import y from"fast-deep-equal";import{distinctUntilChanged as R,map as P}from"rxjs";function X(e,t){let u=t?.updateOnValueChange??!0,s=m(e),n=v(()=>E(s,{runOnInit:!0}),[s]),[l,r]=O([...n.matching]);return h(()=>{r([...n.matching]);let o=n.update$.pipe(P(()=>[...n.matching]));u||(o=o.pipe(R((a,c)=>y(a,c))));let i=o.subscribe(a=>r(a));return()=>i.unsubscribe()},[n,u]),l}import{useEffect as q,useState as Q}from"react";function _(e,t){let[u,s]=Q(t);return q(()=>{let n=e.subscribe(s);return()=>n.unsubscribe()},[e]),u}import{useEffect as p,useRef as U,useState as F}from"react";function ne(e){let t=U(e),[u,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(([n])=>{e===t.current&&s(n)})},[e]),u}export{A as useComponentValue,X as useEntityQuery,_ as useObservableValue,ne as usePromise};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"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: true });\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"]}
+{"version":3,"sources":["../src/useComponentValue.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: true });\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 { 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","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","b","subscription","useEffect","useState","useObservableValue","observable","defaultValue","value","setValue","subscription","useEffect","useRef","useState","usePromise","promise","promiseRef","result","setResult","settled"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latticexyz/react",
-  "version": "2.0.0-transaction-context-324984c5",
+  "version": "2.0.0",
   "description": "React tools for MUD client.",
   "repository": {
     "type": "git",
@@ -18,8 +18,8 @@
     "mobx": "^6.7.0",
     "react": "^18.2.0",
     "rxjs": "7.5.5",
-    "@latticexyz/recs": "2.0.0-transaction-context-324984c5",
-    "@latticexyz/store": "2.0.0-transaction-context-324984c5"
+    "@latticexyz/recs": "2.0.0",
+    "@latticexyz/store": "2.0.0"
   },
   "devDependencies": {
     "@testing-library/react-hooks": "^8.0.1",
@@ -33,7 +33,6 @@
     "vite": "^4.3.6",
     "vitest": "0.34.6"
   },
-  "gitHead": "914a1e0ae4a573d685841ca2ea921435057deb8f",
   "scripts": {
     "build": "pnpm run build:js",
     "build:js": "tsup",

package/src/index.ts

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

package/src/useComponentValue.ts

@@ -13,18 +13,18 @@ import { useEffect, useState } from "react";
 export function useComponentValue<S extends Schema>(
   component: Component<S>,
   entity: Entity | undefined,
-  defaultValue: ComponentValue<S>
+  defaultValue: ComponentValue<S>,
 ): ComponentValue<S>;
 
 export function useComponentValue<S extends Schema>(
   component: Component<S>,
-  entity: Entity | undefined
+  entity: Entity | undefined,
 ): ComponentValue<S> | undefined;
 
 export function useComponentValue<S extends Schema>(
   component: Component<S>,
   entity: Entity | undefined,
-  defaultValue?: ComponentValue<S>
+  defaultValue?: ComponentValue<S>,
 ) {
   const [value, setValue] = useState(entity != null ? getComponentValue(component, entity) : undefined);
 

package/src/useEntityQuery.test.ts

@@ -36,7 +36,7 @@ describe("useEntityQuery", () => {
 
     const { result } = renderHook(() => useEntityQuery([Has(Position)], { updateOnValueChange: false }));
     const { result: resultOnValueChange } = renderHook(() =>
-      useEntityQuery([Has(Position)], { updateOnValueChange: true })
+      useEntityQuery([Has(Position)], { updateOnValueChange: true }),
     );
 
     expect(result.current.length).toBe(2);
@@ -80,7 +80,7 @@ describe("useEntityQuery", () => {
 
     const { result } = renderHook(() => useEntityQuery([Has(Position)], { updateOnValueChange: false }));
     const { result: resultOnValueChange } = renderHook(() =>
-      useEntityQuery([Has(Position)], { updateOnValueChange: true })
+      useEntityQuery([Has(Position)], { updateOnValueChange: true }),
     );
 
     expect(result.all).toHaveLength(2);

package/src/usePromise.ts

@@ -7,7 +7,7 @@ export type UsePromiseResult<T> = PromiseSettledResult<Awaited<T>> | { status: "
 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" }
+    promise == null ? { status: "idle" } : { status: "pending" },
   );
 
   useEffect(() => {

package/src/useDeprecatedComputedValue.ts

@@ -1,14 +0,0 @@
-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;
-};