@latticexyz/react 2.0.0-alpha.1.12 → 2.0.0-alpha.1.120
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +2 -128
- package/dist/index.js.map +1 -1
- package/package.json +23 -32
- package/src/useComponentValue.test.ts +88 -0
- package/src/useComponentValue.ts +48 -0
- package/src/useDeprecatedComputedValue.ts +14 -0
- package/src/useEntityQuery.test.ts +163 -0
- package/src/useEntityQuery.ts +37 -0
- package/src/useObservableValue.ts +17 -0
- package/src/utils/useDeepMemo.ts +15 -0
- package/dist/useComponentValue.d.ts +0 -3
- package/dist/useComponentValue.test.d.ts +0 -1
- package/dist/useDeprecatedComputedValue.d.ts +0 -5
- package/dist/useEntityQuery.d.ts +0 -12
- package/dist/useEntityQuery.test.d.ts +0 -1
- package/dist/useObservableValue.d.ts +0 -3
- package/dist/utils/useDeepMemo.d.ts +0 -1
- /package/{dist/index.d.ts → src/index.ts} +0 -0
package/dist/index.js
CHANGED
|
@@ -1,128 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import { map, distinctUntilChanged } from 'rxjs';
|
|
4
|
-
|
|
5
|
-
function useComponentValue(component, entityIndex, defaultValue) {
|
|
6
|
-
const [value, setValue] = useState(entityIndex != null ? getComponentValue(component, entityIndex) : undefined);
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
// component or entityIndex changed, update state to latest value
|
|
9
|
-
setValue(entityIndex != null ? getComponentValue(component, entityIndex) : undefined);
|
|
10
|
-
if (entityIndex == null)
|
|
11
|
-
return;
|
|
12
|
-
const queryResult = defineQuery([Has(component)], { runOnInit: false });
|
|
13
|
-
const subscription = queryResult.update$.subscribe((update) => {
|
|
14
|
-
if (isComponentUpdate(update, component) && update.entity === entityIndex) {
|
|
15
|
-
const [nextValue] = update.value;
|
|
16
|
-
setValue(nextValue);
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
return () => subscription.unsubscribe();
|
|
20
|
-
}, [component, entityIndex]);
|
|
21
|
-
return value ?? defaultValue;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/** @deprecated See https://github.com/latticexyz/mud/issues/339 */
|
|
25
|
-
const useDeprecatedComputedValue = (computedValue) => {
|
|
26
|
-
const [value, setValue] = useState(computedValue.get());
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
const unsubscribe = computedValue.observe_(() => setValue(computedValue.get()));
|
|
29
|
-
return () => unsubscribe();
|
|
30
|
-
}, [computedValue]);
|
|
31
|
-
return value;
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
// do not edit .js files directly - edit src/index.jst
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
var fastDeepEqual = function equal(a, b) {
|
|
39
|
-
if (a === b) return true;
|
|
40
|
-
|
|
41
|
-
if (a && b && typeof a == 'object' && typeof b == 'object') {
|
|
42
|
-
if (a.constructor !== b.constructor) return false;
|
|
43
|
-
|
|
44
|
-
var length, i, keys;
|
|
45
|
-
if (Array.isArray(a)) {
|
|
46
|
-
length = a.length;
|
|
47
|
-
if (length != b.length) return false;
|
|
48
|
-
for (i = length; i-- !== 0;)
|
|
49
|
-
if (!equal(a[i], b[i])) return false;
|
|
50
|
-
return true;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
|
|
56
|
-
if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
|
|
57
|
-
if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
|
|
58
|
-
|
|
59
|
-
keys = Object.keys(a);
|
|
60
|
-
length = keys.length;
|
|
61
|
-
if (length !== Object.keys(b).length) return false;
|
|
62
|
-
|
|
63
|
-
for (i = length; i-- !== 0;)
|
|
64
|
-
if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
|
|
65
|
-
|
|
66
|
-
for (i = length; i-- !== 0;) {
|
|
67
|
-
var key = keys[i];
|
|
68
|
-
|
|
69
|
-
if (!equal(a[key], b[key])) return false;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
return true;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
// true if both NaN, false otherwise
|
|
76
|
-
return a!==a && b!==b;
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
const useDeepMemo = (currentValue) => {
|
|
80
|
-
const [stableValue, setStableValue] = useState(currentValue);
|
|
81
|
-
useEffect(() => {
|
|
82
|
-
if (!fastDeepEqual(currentValue, stableValue)) {
|
|
83
|
-
setStableValue(currentValue);
|
|
84
|
-
}
|
|
85
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
86
|
-
}, [currentValue]);
|
|
87
|
-
return stableValue;
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
// This does a little more rendering than is necessary when arguments change,
|
|
91
|
-
// but at least it's giving correct results now. Will optimize later!
|
|
92
|
-
/**
|
|
93
|
-
* Returns all matching `EntityIndex`es for a given entity query,
|
|
94
|
-
* and triggers a re-render as new query results come in.
|
|
95
|
-
*
|
|
96
|
-
* @param fragments Query fragments to match against, executed from left to right.
|
|
97
|
-
* @param options.updateOnValueChange False - re-renders only on entity array changes. True (default) - also on component value changes.
|
|
98
|
-
* @returns Set of entities matching the query fragments.
|
|
99
|
-
*/
|
|
100
|
-
function useEntityQuery(fragments, options) {
|
|
101
|
-
const updateOnValueChange = options?.updateOnValueChange ?? true;
|
|
102
|
-
const stableFragments = useDeepMemo(fragments);
|
|
103
|
-
const query = useMemo(() => defineQuery(stableFragments, { runOnInit: true }), [stableFragments]);
|
|
104
|
-
const [entities, setEntities] = useState([...query.matching]);
|
|
105
|
-
useEffect(() => {
|
|
106
|
-
setEntities([...query.matching]);
|
|
107
|
-
let observable = query.update$.pipe(map(() => [...query.matching]));
|
|
108
|
-
if (!updateOnValueChange) {
|
|
109
|
-
// re-render only on entity array changes
|
|
110
|
-
observable = observable.pipe(distinctUntilChanged((a, b) => fastDeepEqual(a, b)));
|
|
111
|
-
}
|
|
112
|
-
const subscription = observable.subscribe((entities) => setEntities(entities));
|
|
113
|
-
return () => subscription.unsubscribe();
|
|
114
|
-
}, [query, updateOnValueChange]);
|
|
115
|
-
return entities;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
function useObservableValue(observable, defaultValue) {
|
|
119
|
-
const [value, setValue] = useState(defaultValue);
|
|
120
|
-
useEffect(() => {
|
|
121
|
-
const subscription = observable.subscribe(setValue);
|
|
122
|
-
return () => subscription.unsubscribe();
|
|
123
|
-
}, [observable]);
|
|
124
|
-
return value;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
export { useComponentValue, useDeprecatedComputedValue, useEntityQuery, useObservableValue };
|
|
128
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
import{defineQuery as b,getComponentValue as f,Has as c,isComponentUpdate as d}from"@latticexyz/recs";import{useEffect as C,useState as S}from"react";function k(e,t,n){let[o,u]=S(t!=null?f(e,t):void 0);return C(()=>{if(u(t!=null?f(e,t):void 0),t==null)return;let s=b([c(e)],{runOnInit:!1}).update$.subscribe(r=>{if(d(r,e)&&r.entity===t){let[a]=r.value;u(a)}});return()=>s.unsubscribe()},[e,t]),o??n}import{useEffect as V,useState as x}from"react";var A=e=>{let[t,n]=x(e.get());return V(()=>{let o=e.observe_(()=>n(e.get()));return()=>o()},[e]),t};import{defineQuery as E}from"@latticexyz/recs";import{useEffect as O,useMemo as h,useState as y}from"react";import{useEffect as T,useState as v}from"react";import g from"fast-deep-equal";var p=e=>{let[t,n]=v(e);return T(()=>{g(e,t)||n(e)},[e]),t};import M from"fast-deep-equal";import{distinctUntilChanged as q,map as Q}from"rxjs";function Z(e,t){let n=t?.updateOnValueChange??!0,o=p(e),u=h(()=>E(o,{runOnInit:!0}),[o]),[m,s]=y([...u.matching]);return O(()=>{s([...u.matching]);let r=u.update$.pipe(Q(()=>[...u.matching]));n||(r=r.pipe(q((i,l)=>M(i,l))));let a=r.subscribe(i=>s(i));return()=>a.unsubscribe()},[u,n]),m}import{useEffect as I,useState as D}from"react";function ne(e,t){let[n,o]=D(t);return I(()=>{let u=e.subscribe(o);return()=>u.unsubscribe()},[e]),n}export{k as useComponentValue,A as useDeprecatedComputedValue,Z as useEntityQuery,ne as useObservableValue};
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../src/useComponentValue.ts","../src/useDeprecatedComputedValue.ts","../src/useEntityQuery.ts","../src/utils/useDeepMemo.ts","../src/useObservableValue.ts"],"sourcesContent":["import {\n Component,\n ComponentValue,\n defineQuery,\n Entity,\n getComponentValue,\n Has,\n isComponentUpdate,\n Metadata,\n Schema,\n} from \"@latticexyz/recs\";\nimport { useEffect, useState } from \"react\";\n\nexport function useComponentValue<S extends Schema>(\n component: Component<S, Metadata, undefined>,\n entity: Entity | undefined,\n defaultValue: ComponentValue<S>\n): ComponentValue<S>;\n\nexport function useComponentValue<S extends Schema>(\n component: Component<S, Metadata, undefined>,\n entity: Entity | undefined\n): ComponentValue<S> | undefined;\n\nexport function useComponentValue<S extends Schema>(\n component: Component<S, Metadata, undefined>,\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"],"mappings":"AAAA,OAGE,eAAAA,EAEA,qBAAAC,EACA,OAAAC,EACA,qBAAAC,MAGK,mBACP,OAAS,aAAAC,EAAW,YAAAC,MAAgB,QAa7B,SAASC,EACdC,EACAC,EACAC,EACA,CACA,GAAM,CAACC,EAAOC,CAAQ,EAAIN,EAASG,GAAU,KAAOP,EAAkBM,EAAWC,CAAM,EAAI,MAAS,EAEpG,OAAAJ,EAAU,IAAM,CAGd,GADAO,EAASH,GAAU,KAAOP,EAAkBM,EAAWC,CAAM,EAAI,MAAS,EACtEA,GAAU,KAAM,OAGpB,IAAMI,EADcZ,EAAY,CAACE,EAAIK,CAAS,CAAC,EAAG,CAAE,UAAW,EAAM,CAAC,EACrC,QAAQ,UAAWM,GAAW,CAC7D,GAAIV,EAAkBU,EAAQN,CAAS,GAAKM,EAAO,SAAWL,EAAQ,CACpE,GAAM,CAACM,CAAS,EAAID,EAAO,MAC3BF,EAASG,CAAS,EAEtB,CAAC,EACD,MAAO,IAAMF,EAAa,YAAY,CACxC,EAAG,CAACL,EAAWC,CAAM,CAAC,EAEfE,GAASD,CAClB,CC9CA,OAAS,aAAAM,EAAW,YAAAC,MAAgB,QAG7B,IAAMC,EAAiCC,GAAyD,CACrG,GAAM,CAACC,EAAOC,CAAQ,EAAIJ,EAAYE,EAAc,IAAI,CAAC,EAEzD,OAAAH,EAAU,IAAM,CACd,IAAMM,EAAcH,EAAc,SAAS,IAAME,EAASF,EAAc,IAAI,CAAC,CAAC,EAC9E,MAAO,IAAMG,EAAY,CAC3B,EAAG,CAACH,CAAa,CAAC,EAEXC,CACT,ECbA,OAAS,eAAAG,MAAkC,mBAC3C,OAAS,aAAAC,EAAW,WAAAC,EAAS,YAAAC,MAAgB,QCD7C,OAAS,aAAAC,EAAW,YAAAC,MAAgB,QACpC,OAAOC,MAAa,kBAEb,IAAMC,EAAkBC,GAAuB,CACpD,GAAM,CAACC,EAAaC,CAAc,EAAIL,EAASG,CAAY,EAE3D,OAAAJ,EAAU,IAAM,CACTE,EAAQE,EAAcC,CAAW,GACpCC,EAAeF,CAAY,CAG/B,EAAG,CAACA,CAAY,CAAC,EAEVC,CACT,EDXA,OAAOE,MAAa,kBACpB,OAAS,wBAAAC,EAAsB,OAAAC,MAAW,OAanC,SAASC,EAAeC,EAA4BC,EAA6C,CACtG,IAAMC,EAAsBD,GAAS,qBAAuB,GAEtDE,EAAkBC,EAAYJ,CAAS,EACvCK,EAAQC,EAAQ,IAAMC,EAAYJ,EAAiB,CAAE,UAAW,EAAK,CAAC,EAAG,CAACA,CAAe,CAAC,EAC1F,CAACK,EAAUC,CAAW,EAAIC,EAAS,CAAC,GAAGL,EAAM,QAAQ,CAAC,EAE5D,OAAAM,EAAU,IAAM,CACdF,EAAY,CAAC,GAAGJ,EAAM,QAAQ,CAAC,EAC/B,IAAIO,EAAaP,EAAM,QAAQ,KAAKP,EAAI,IAAM,CAAC,GAAGO,EAAM,QAAQ,CAAC,CAAC,EAC7DH,IAEHU,EAAaA,EAAW,KAAKf,EAAqB,CAACgB,EAAGC,IAAMlB,EAAQiB,EAAGC,CAAC,CAAC,CAAC,GAE5E,IAAMC,EAAeH,EAAW,UAAWJ,GAAaC,EAAYD,CAAQ,CAAC,EAC7E,MAAO,IAAMO,EAAa,YAAY,CACxC,EAAG,CAACV,EAAOH,CAAmB,CAAC,EAExBM,CACT,CEpCA,OAAS,aAAAQ,EAAW,YAAAC,MAAgB,QAO7B,SAASC,GAAsBC,EAA2BC,EAAkB,CACjF,GAAM,CAACC,EAAOC,CAAQ,EAAIL,EAASG,CAAY,EAE/C,OAAAJ,EAAU,IAAM,CACd,IAAMO,EAAeJ,EAAW,UAAUG,CAAQ,EAClD,MAAO,IAAMC,EAAa,YAAY,CACxC,EAAG,CAACJ,CAAU,CAAC,EAERE,CACT","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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@latticexyz/react",
|
|
3
|
-
"version": "2.0.0-alpha.1.
|
|
3
|
+
"version": "2.0.0-alpha.1.120+a16a0d2c",
|
|
4
4
|
"description": "React tools for MUD client.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -8,49 +8,40 @@
|
|
|
8
8
|
"directory": "packages/react"
|
|
9
9
|
},
|
|
10
10
|
"license": "MIT",
|
|
11
|
-
"
|
|
12
|
-
"
|
|
11
|
+
"type": "module",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": "./dist/index.js"
|
|
14
|
+
},
|
|
15
|
+
"types": "src/index.ts",
|
|
13
16
|
"scripts": {
|
|
14
|
-
"build": "
|
|
17
|
+
"build": "pnpm run build:js",
|
|
18
|
+
"build:js": "tsup",
|
|
19
|
+
"clean": "pnpm run clean:js",
|
|
20
|
+
"clean:js": "rimraf dist",
|
|
21
|
+
"dev": "tsup --watch",
|
|
15
22
|
"docs": "rimraf API && typedoc src && find API -type f -name '*.md' -exec sed -E -i \"\" \"s/(#.*)(<.*>)/\\1/\" {} \\;",
|
|
16
|
-
"prepack": "mv package.json package.json.bak && jq \".main = \\\"dist/index.js\\\"\" package.json.bak > package.json ",
|
|
17
|
-
"postpack": "mv package.json.bak package.json || echo 'no package.json.bak'",
|
|
18
|
-
"release": "npm publish --access=public",
|
|
19
23
|
"test": "tsc --noEmit && jest"
|
|
20
24
|
},
|
|
21
25
|
"dependencies": {
|
|
22
|
-
"
|
|
26
|
+
"@latticexyz/recs": "2.0.0-alpha.1.120+a16a0d2c",
|
|
27
|
+
"fast-deep-equal": "^3.1.3",
|
|
28
|
+
"mobx": "^6.7.0",
|
|
29
|
+
"react": "^18.2.0",
|
|
30
|
+
"rxjs": "^7.5.5"
|
|
23
31
|
},
|
|
24
32
|
"devDependencies": {
|
|
25
|
-
"@latticexyz/recs": "2.0.0-alpha.1.12+711df0ae",
|
|
26
|
-
"@rollup/plugin-json": "^4.1.0",
|
|
27
|
-
"@rollup/plugin-node-resolve": "^13.1.3",
|
|
28
|
-
"@rollup/plugin-typescript": "^11.0.0",
|
|
29
33
|
"@testing-library/react-hooks": "^8.0.1",
|
|
30
34
|
"@types/jest": "^27.4.1",
|
|
31
|
-
"@types/react": "^18.
|
|
32
|
-
"eslint-plugin-react": "
|
|
33
|
-
"eslint-plugin-react-hooks": "
|
|
35
|
+
"@types/react": "^18.2.6",
|
|
36
|
+
"eslint-plugin-react": "7.31.11",
|
|
37
|
+
"eslint-plugin-react-hooks": "4.6.0",
|
|
34
38
|
"jest": "^29.3.1",
|
|
35
|
-
"
|
|
36
|
-
"react": "^18.2.0",
|
|
39
|
+
"jest-environment-jsdom": "^29.3.1",
|
|
37
40
|
"react-test-renderer": "^18.2.0",
|
|
38
|
-
"rimraf": "^3.0.2",
|
|
39
|
-
"rollup": "^2.69.0",
|
|
40
|
-
"rollup-plugin-commonjs": "^10.1.0",
|
|
41
|
-
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
42
|
-
"rxjs": "^7.5.5",
|
|
43
41
|
"ts-jest": "^29.0.5",
|
|
44
|
-
"
|
|
42
|
+
"tsup": "^6.7.0",
|
|
45
43
|
"typedoc": "0.23.21",
|
|
46
|
-
"typedoc-plugin-markdown": "^3.13.6"
|
|
47
|
-
"typescript": "^4.9.5"
|
|
48
|
-
},
|
|
49
|
-
"peerDependencies": {
|
|
50
|
-
"@latticexyz/recs": "latest",
|
|
51
|
-
"mobx": "^6.4.2",
|
|
52
|
-
"react": "^18.2.0",
|
|
53
|
-
"rxjs": "^7.5.5"
|
|
44
|
+
"typedoc-plugin-markdown": "^3.13.6"
|
|
54
45
|
},
|
|
55
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "a16a0d2c67e035160d62d817f4abd46b292e0232"
|
|
56
47
|
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { renderHook, act } from "@testing-library/react-hooks";
|
|
2
|
+
import {
|
|
3
|
+
World,
|
|
4
|
+
Type,
|
|
5
|
+
createWorld,
|
|
6
|
+
defineComponent,
|
|
7
|
+
Component,
|
|
8
|
+
createEntity,
|
|
9
|
+
withValue,
|
|
10
|
+
setComponent,
|
|
11
|
+
removeComponent,
|
|
12
|
+
} from "@latticexyz/recs";
|
|
13
|
+
import { useComponentValue } from "./useComponentValue";
|
|
14
|
+
|
|
15
|
+
describe("useComponentValue", () => {
|
|
16
|
+
let world: World;
|
|
17
|
+
let Position: Component<{
|
|
18
|
+
x: Type.Number;
|
|
19
|
+
y: Type.Number;
|
|
20
|
+
}>;
|
|
21
|
+
|
|
22
|
+
beforeEach(() => {
|
|
23
|
+
world = createWorld();
|
|
24
|
+
Position = defineComponent(world, { x: Type.Number, y: Type.Number }, { id: "Position" });
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it("should return Position value for entity", () => {
|
|
28
|
+
const entity = createEntity(world, [withValue(Position, { x: 1, y: 1 })]);
|
|
29
|
+
|
|
30
|
+
const { result } = renderHook(() => useComponentValue(Position, entity));
|
|
31
|
+
expect(result.current).toEqual({ x: 1, y: 1 });
|
|
32
|
+
|
|
33
|
+
act(() => {
|
|
34
|
+
setComponent(Position, entity, { x: 0, y: 0 });
|
|
35
|
+
});
|
|
36
|
+
expect(result.current).toEqual({ x: 0, y: 0 });
|
|
37
|
+
|
|
38
|
+
act(() => {
|
|
39
|
+
removeComponent(Position, entity);
|
|
40
|
+
});
|
|
41
|
+
expect(result.current).toBe(undefined);
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
it("should re-render only when Position changes for entity", () => {
|
|
45
|
+
const entity = createEntity(world, [withValue(Position, { x: 1, y: 1 })]);
|
|
46
|
+
const otherEntity = createEntity(world, [withValue(Position, { x: 2, y: 2 })]);
|
|
47
|
+
|
|
48
|
+
const { result } = renderHook(() => useComponentValue(Position, entity));
|
|
49
|
+
expect(result.all.length).toBe(2);
|
|
50
|
+
expect(result.current).toEqual({ x: 1, y: 1 });
|
|
51
|
+
|
|
52
|
+
act(() => {
|
|
53
|
+
setComponent(Position, entity, { x: 0, y: 0 });
|
|
54
|
+
});
|
|
55
|
+
expect(result.all.length).toBe(3);
|
|
56
|
+
expect(result.current).toEqual({ x: 0, y: 0 });
|
|
57
|
+
|
|
58
|
+
act(() => {
|
|
59
|
+
setComponent(Position, otherEntity, { x: 0, y: 0 });
|
|
60
|
+
removeComponent(Position, otherEntity);
|
|
61
|
+
});
|
|
62
|
+
expect(result.all.length).toBe(3);
|
|
63
|
+
expect(result.current).toEqual({ x: 0, y: 0 });
|
|
64
|
+
|
|
65
|
+
act(() => {
|
|
66
|
+
removeComponent(Position, entity);
|
|
67
|
+
});
|
|
68
|
+
expect(result.all.length).toBe(4);
|
|
69
|
+
expect(result.current).toBe(undefined);
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
it("should return default value when Position is not set", () => {
|
|
73
|
+
const entity = createEntity(world);
|
|
74
|
+
|
|
75
|
+
const { result } = renderHook(() => useComponentValue(Position, entity, { x: -1, y: -1 }));
|
|
76
|
+
expect(result.current).toEqual({ x: -1, y: -1 });
|
|
77
|
+
|
|
78
|
+
act(() => {
|
|
79
|
+
setComponent(Position, entity, { x: 0, y: 0 });
|
|
80
|
+
});
|
|
81
|
+
expect(result.current).toEqual({ x: 0, y: 0 });
|
|
82
|
+
|
|
83
|
+
act(() => {
|
|
84
|
+
removeComponent(Position, entity);
|
|
85
|
+
});
|
|
86
|
+
expect(result.current).toEqual({ x: -1, y: -1 });
|
|
87
|
+
});
|
|
88
|
+
});
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Component,
|
|
3
|
+
ComponentValue,
|
|
4
|
+
defineQuery,
|
|
5
|
+
Entity,
|
|
6
|
+
getComponentValue,
|
|
7
|
+
Has,
|
|
8
|
+
isComponentUpdate,
|
|
9
|
+
Metadata,
|
|
10
|
+
Schema,
|
|
11
|
+
} from "@latticexyz/recs";
|
|
12
|
+
import { useEffect, useState } from "react";
|
|
13
|
+
|
|
14
|
+
export function useComponentValue<S extends Schema>(
|
|
15
|
+
component: Component<S, Metadata, undefined>,
|
|
16
|
+
entity: Entity | undefined,
|
|
17
|
+
defaultValue: ComponentValue<S>
|
|
18
|
+
): ComponentValue<S>;
|
|
19
|
+
|
|
20
|
+
export function useComponentValue<S extends Schema>(
|
|
21
|
+
component: Component<S, Metadata, undefined>,
|
|
22
|
+
entity: Entity | undefined
|
|
23
|
+
): ComponentValue<S> | undefined;
|
|
24
|
+
|
|
25
|
+
export function useComponentValue<S extends Schema>(
|
|
26
|
+
component: Component<S, Metadata, undefined>,
|
|
27
|
+
entity: Entity | undefined,
|
|
28
|
+
defaultValue?: ComponentValue<S>
|
|
29
|
+
) {
|
|
30
|
+
const [value, setValue] = useState(entity != null ? getComponentValue(component, entity) : undefined);
|
|
31
|
+
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
// component or entity changed, update state to latest value
|
|
34
|
+
setValue(entity != null ? getComponentValue(component, entity) : undefined);
|
|
35
|
+
if (entity == null) return;
|
|
36
|
+
|
|
37
|
+
const queryResult = defineQuery([Has(component)], { runOnInit: false });
|
|
38
|
+
const subscription = queryResult.update$.subscribe((update) => {
|
|
39
|
+
if (isComponentUpdate(update, component) && update.entity === entity) {
|
|
40
|
+
const [nextValue] = update.value;
|
|
41
|
+
setValue(nextValue);
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
return () => subscription.unsubscribe();
|
|
45
|
+
}, [component, entity]);
|
|
46
|
+
|
|
47
|
+
return value ?? defaultValue;
|
|
48
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { IComputedValue } from "mobx";
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
|
|
4
|
+
/** @deprecated See https://github.com/latticexyz/mud/issues/339 */
|
|
5
|
+
export const useDeprecatedComputedValue = <T>(computedValue: IComputedValue<T> & { observe_: any }) => {
|
|
6
|
+
const [value, setValue] = useState<T>(computedValue.get());
|
|
7
|
+
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
const unsubscribe = computedValue.observe_(() => setValue(computedValue.get()));
|
|
10
|
+
return () => unsubscribe();
|
|
11
|
+
}, [computedValue]);
|
|
12
|
+
|
|
13
|
+
return value;
|
|
14
|
+
};
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { renderHook, act } from "@testing-library/react-hooks";
|
|
2
|
+
import {
|
|
3
|
+
World,
|
|
4
|
+
Type,
|
|
5
|
+
createWorld,
|
|
6
|
+
defineComponent,
|
|
7
|
+
Component,
|
|
8
|
+
createEntity,
|
|
9
|
+
withValue,
|
|
10
|
+
Has,
|
|
11
|
+
setComponent,
|
|
12
|
+
HasValue,
|
|
13
|
+
removeComponent,
|
|
14
|
+
} from "@latticexyz/recs";
|
|
15
|
+
import { useEntityQuery } from "./useEntityQuery";
|
|
16
|
+
|
|
17
|
+
describe("useEntityQuery", () => {
|
|
18
|
+
let world: World;
|
|
19
|
+
let Position: Component<{
|
|
20
|
+
x: Type.Number;
|
|
21
|
+
y: Type.Number;
|
|
22
|
+
}>;
|
|
23
|
+
let OwnedBy: Component<{ value: Type.Entity }>;
|
|
24
|
+
|
|
25
|
+
beforeEach(() => {
|
|
26
|
+
world = createWorld();
|
|
27
|
+
Position = defineComponent(world, { x: Type.Number, y: Type.Number }, { id: "Position" });
|
|
28
|
+
OwnedBy = defineComponent(world, { value: Type.Entity }, { id: "OwnedBy" });
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
it("should find entities with Position component", () => {
|
|
32
|
+
const entity1 = createEntity(world, [withValue(Position, { x: 1, y: 1 })]);
|
|
33
|
+
const entity2 = createEntity(world, [withValue(Position, { x: 2, y: 2 })]);
|
|
34
|
+
const entity3 = createEntity(world, []);
|
|
35
|
+
|
|
36
|
+
const { result } = renderHook(() => useEntityQuery([Has(Position)], { updateOnValueChange: false }));
|
|
37
|
+
const { result: resultOnValueChange } = renderHook(() =>
|
|
38
|
+
useEntityQuery([Has(Position)], { updateOnValueChange: true })
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
expect(result.current.length).toBe(2);
|
|
42
|
+
expect(result.current).toContain(entity1);
|
|
43
|
+
expect(result.current).toContain(entity2);
|
|
44
|
+
expect(result.current).not.toContain(entity3);
|
|
45
|
+
expect(resultOnValueChange.current).toEqual(result.current);
|
|
46
|
+
|
|
47
|
+
act(() => {
|
|
48
|
+
setComponent(Position, entity3, { x: 0, y: 0 });
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
expect(result.current.length).toBe(3);
|
|
52
|
+
expect(result.current).toContain(entity1);
|
|
53
|
+
expect(result.current).toContain(entity2);
|
|
54
|
+
expect(result.current).toContain(entity3);
|
|
55
|
+
expect(resultOnValueChange.current).toEqual(result.current);
|
|
56
|
+
|
|
57
|
+
act(() => {
|
|
58
|
+
removeComponent(Position, entity1);
|
|
59
|
+
removeComponent(Position, entity3);
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
expect(result.current.length).toBe(1);
|
|
63
|
+
expect(result.current).not.toContain(entity1);
|
|
64
|
+
expect(result.current).toContain(entity2);
|
|
65
|
+
expect(result.current).not.toContain(entity3);
|
|
66
|
+
expect(resultOnValueChange.current).toEqual(result.current);
|
|
67
|
+
|
|
68
|
+
act(() => {
|
|
69
|
+
removeComponent(Position, entity2);
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
expect(result.current.length).toBe(0);
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
it("should re-render only when Position changes", () => {
|
|
76
|
+
const entity1 = createEntity(world, [withValue(Position, { x: 1, y: 1 })]);
|
|
77
|
+
const entity2 = createEntity(world, [withValue(Position, { x: 2, y: 2 })]);
|
|
78
|
+
const entity3 = createEntity(world, []);
|
|
79
|
+
|
|
80
|
+
const { result } = renderHook(() => useEntityQuery([Has(Position)], { updateOnValueChange: false }));
|
|
81
|
+
const { result: resultOnValueChange } = renderHook(() =>
|
|
82
|
+
useEntityQuery([Has(Position)], { updateOnValueChange: true })
|
|
83
|
+
);
|
|
84
|
+
|
|
85
|
+
expect(result.all).toHaveLength(2);
|
|
86
|
+
expect(result.current).toHaveLength(2);
|
|
87
|
+
expect(result.current).toContain(entity1);
|
|
88
|
+
expect(result.current).toContain(entity2);
|
|
89
|
+
expect(result.current).not.toContain(entity3);
|
|
90
|
+
|
|
91
|
+
// Changing an entity's component value should NOT re-render,
|
|
92
|
+
// unless updateOnValueChange === true
|
|
93
|
+
act(() => {
|
|
94
|
+
setComponent(Position, entity2, { x: 0, y: 0 });
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
expect(result.all).toHaveLength(2);
|
|
98
|
+
expect(resultOnValueChange.all).toHaveLength(3);
|
|
99
|
+
|
|
100
|
+
// Changing a different component value should NOT re-render
|
|
101
|
+
act(() => {
|
|
102
|
+
setComponent(OwnedBy, entity2, { value: entity1 });
|
|
103
|
+
setComponent(OwnedBy, entity3, { value: entity1 });
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
expect(result.all).toHaveLength(2);
|
|
107
|
+
expect(resultOnValueChange.all).toHaveLength(3);
|
|
108
|
+
|
|
109
|
+
// Changing which entities have the component should re-render
|
|
110
|
+
act(() => {
|
|
111
|
+
setComponent(Position, entity3, { x: 0, y: 0 });
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
expect(result.all).toHaveLength(3);
|
|
115
|
+
expect(resultOnValueChange.all).toHaveLength(4);
|
|
116
|
+
expect(result.current).toHaveLength(3);
|
|
117
|
+
expect(result.current).toContain(entity1);
|
|
118
|
+
expect(result.current).toContain(entity2);
|
|
119
|
+
expect(result.current).toContain(entity3);
|
|
120
|
+
|
|
121
|
+
// Changing which entities have the component should re-render
|
|
122
|
+
act(() => {
|
|
123
|
+
removeComponent(Position, entity1);
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
expect(result.all).toHaveLength(4);
|
|
127
|
+
expect(resultOnValueChange.all).toHaveLength(5);
|
|
128
|
+
expect(result.current).toHaveLength(2);
|
|
129
|
+
expect(result.current).toContain(entity2);
|
|
130
|
+
expect(result.current).toContain(entity3);
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
it("should re-render as hook arguments change", () => {
|
|
134
|
+
// TODO: reduce re-renders during argument changes?
|
|
135
|
+
|
|
136
|
+
const entity1 = createEntity(world, [withValue(Position, { x: 1, y: 1 })]);
|
|
137
|
+
const entity2 = createEntity(world, [withValue(Position, { x: 2, y: 2 })]);
|
|
138
|
+
const entity3 = createEntity(world, [withValue(Position, { x: 2, y: 2 })]);
|
|
139
|
+
|
|
140
|
+
const { result, rerender } = renderHook(({ x, y }) => useEntityQuery([HasValue(Position, { x, y })]), {
|
|
141
|
+
initialProps: { x: 1, y: 1 },
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
expect(result.all).toHaveLength(2);
|
|
145
|
+
expect(result.current).toHaveLength(1);
|
|
146
|
+
expect(result.current).toContain(entity1);
|
|
147
|
+
|
|
148
|
+
rerender({ x: 1, y: 1 });
|
|
149
|
+
expect(result.all).toHaveLength(3);
|
|
150
|
+
expect(result.current).toHaveLength(1);
|
|
151
|
+
expect(result.current).toContain(entity1);
|
|
152
|
+
|
|
153
|
+
rerender({ x: 2, y: 2 });
|
|
154
|
+
expect(result.all).toHaveLength(6);
|
|
155
|
+
expect(result.current).toHaveLength(2);
|
|
156
|
+
expect(result.current).toContain(entity2);
|
|
157
|
+
expect(result.current).toContain(entity3);
|
|
158
|
+
|
|
159
|
+
rerender({ x: -1, y: -1 });
|
|
160
|
+
expect(result.all).toHaveLength(9);
|
|
161
|
+
expect(result.current).toHaveLength(0);
|
|
162
|
+
});
|
|
163
|
+
});
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { defineQuery, QueryFragment } from "@latticexyz/recs";
|
|
2
|
+
import { useEffect, useMemo, useState } from "react";
|
|
3
|
+
import { useDeepMemo } from "./utils/useDeepMemo";
|
|
4
|
+
import isEqual from "fast-deep-equal";
|
|
5
|
+
import { distinctUntilChanged, map } from "rxjs";
|
|
6
|
+
|
|
7
|
+
// This does a little more rendering than is necessary when arguments change,
|
|
8
|
+
// but at least it's giving correct results now. Will optimize later!
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Returns all matching entities for a given entity query,
|
|
12
|
+
* and triggers a re-render as new query results come in.
|
|
13
|
+
*
|
|
14
|
+
* @param fragments Query fragments to match against, executed from left to right.
|
|
15
|
+
* @param options.updateOnValueChange False - re-renders only on entity array changes. True (default) - also on component value changes.
|
|
16
|
+
* @returns Set of entities matching the query fragments.
|
|
17
|
+
*/
|
|
18
|
+
export function useEntityQuery(fragments: QueryFragment[], options?: { updateOnValueChange?: boolean }) {
|
|
19
|
+
const updateOnValueChange = options?.updateOnValueChange ?? true;
|
|
20
|
+
|
|
21
|
+
const stableFragments = useDeepMemo(fragments);
|
|
22
|
+
const query = useMemo(() => defineQuery(stableFragments, { runOnInit: true }), [stableFragments]);
|
|
23
|
+
const [entities, setEntities] = useState([...query.matching]);
|
|
24
|
+
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
setEntities([...query.matching]);
|
|
27
|
+
let observable = query.update$.pipe(map(() => [...query.matching]));
|
|
28
|
+
if (!updateOnValueChange) {
|
|
29
|
+
// re-render only on entity array changes
|
|
30
|
+
observable = observable.pipe(distinctUntilChanged((a, b) => isEqual(a, b)));
|
|
31
|
+
}
|
|
32
|
+
const subscription = observable.subscribe((entities) => setEntities(entities));
|
|
33
|
+
return () => subscription.unsubscribe();
|
|
34
|
+
}, [query, updateOnValueChange]);
|
|
35
|
+
|
|
36
|
+
return entities;
|
|
37
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
import { Observable } from "rxjs";
|
|
3
|
+
|
|
4
|
+
export function useObservableValue<T>(observable: Observable<T>, defaultValue: T): T;
|
|
5
|
+
|
|
6
|
+
export function useObservableValue<T>(observable: Observable<T>): T | undefined;
|
|
7
|
+
|
|
8
|
+
export function useObservableValue<T>(observable: Observable<T>, defaultValue?: T) {
|
|
9
|
+
const [value, setValue] = useState(defaultValue);
|
|
10
|
+
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
const subscription = observable.subscribe(setValue);
|
|
13
|
+
return () => subscription.unsubscribe();
|
|
14
|
+
}, [observable]);
|
|
15
|
+
|
|
16
|
+
return value;
|
|
17
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
import isEqual from "fast-deep-equal";
|
|
3
|
+
|
|
4
|
+
export const useDeepMemo = <T>(currentValue: T): T => {
|
|
5
|
+
const [stableValue, setStableValue] = useState(currentValue);
|
|
6
|
+
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (!isEqual(currentValue, stableValue)) {
|
|
9
|
+
setStableValue(currentValue);
|
|
10
|
+
}
|
|
11
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12
|
+
}, [currentValue]);
|
|
13
|
+
|
|
14
|
+
return stableValue;
|
|
15
|
+
};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { Component, ComponentValue, EntityIndex, Metadata, Schema } from "@latticexyz/recs";
|
|
2
|
-
export declare function useComponentValue<S extends Schema>(component: Component<S, Metadata, undefined>, entityIndex: EntityIndex | undefined, defaultValue: ComponentValue<S>): ComponentValue<S>;
|
|
3
|
-
export declare function useComponentValue<S extends Schema>(component: Component<S, Metadata, undefined>, entityIndex: EntityIndex | undefined): ComponentValue<S> | undefined;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/dist/useEntityQuery.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { QueryFragment } from "@latticexyz/recs";
|
|
2
|
-
/**
|
|
3
|
-
* Returns all matching `EntityIndex`es for a given entity query,
|
|
4
|
-
* and triggers a re-render as new query results come in.
|
|
5
|
-
*
|
|
6
|
-
* @param fragments Query fragments to match against, executed from left to right.
|
|
7
|
-
* @param options.updateOnValueChange False - re-renders only on entity array changes. True (default) - also on component value changes.
|
|
8
|
-
* @returns Set of entities matching the query fragments.
|
|
9
|
-
*/
|
|
10
|
-
export declare function useEntityQuery(fragments: QueryFragment[], options?: {
|
|
11
|
-
updateOnValueChange?: boolean;
|
|
12
|
-
}): import("@latticexyz/recs").EntityIndex[];
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const useDeepMemo: <T>(currentValue: T) => T;
|
|
File without changes
|