@latticexyz/react 2.2.18-9fa07c8489f1fbf167d0db01cd9aaa645a29c8e2 → 2.2.18-c2ad22c7feb566e1731ff16e8be291746bdffb3e

package/dist/index.js

@@ -1,103 +1,2 @@
-// src/useComponentValue.ts
-import {
-  defineQuery,
-  getComponentValue,
-  Has,
-  isComponentUpdate
-} from "@latticexyz/recs";
-import { useEffect, useState } from "react";
-function useComponentValue(component, entity, defaultValue) {
-  const [value, setValue] = useState(entity != null ? getComponentValue(component, entity) : void 0);
-  useEffect(() => {
-    setValue(entity != null ? getComponentValue(component, entity) : void 0);
-    if (entity == null) return;
-    const queryResult = defineQuery([Has(component)], { runOnInit: true });
-    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;
-}
-
-// src/useEntityQuery.ts
-import { defineQuery as defineQuery2 } from "@latticexyz/recs";
-import { useEffect as useEffect3, useMemo, useState as useState3 } from "react";
-
-// src/utils/useDeepMemo.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import isEqual from "fast-deep-equal";
-var useDeepMemo = (currentValue) => {
-  const [stableValue, setStableValue] = useState2(currentValue);
-  useEffect2(() => {
-    if (!isEqual(currentValue, stableValue)) {
-      setStableValue(currentValue);
-    }
-  }, [currentValue]);
-  return stableValue;
-};
-
-// src/useEntityQuery.ts
-import isEqual2 from "fast-deep-equal";
-import { distinctUntilChanged, map } from "rxjs";
-function useEntityQuery(fragments, options) {
-  const updateOnValueChange = options?.updateOnValueChange ?? true;
-  const stableFragments = useDeepMemo(fragments);
-  const query = useMemo(() => defineQuery2(stableFragments, { runOnInit: true }), [stableFragments]);
-  const [entities, setEntities] = useState3([...query.matching]);
-  useEffect3(() => {
-    setEntities([...query.matching]);
-    let observable = query.update$.pipe(map(() => [...query.matching]));
-    if (!updateOnValueChange) {
-      observable = observable.pipe(distinctUntilChanged((a, b) => isEqual2(a, b)));
-    }
-    const subscription = observable.subscribe((entities2) => setEntities(entities2));
-    return () => subscription.unsubscribe();
-  }, [query, updateOnValueChange]);
-  return entities;
-}
-
-// src/useObservableValue.ts
-import { useEffect as useEffect4, useState as useState4 } from "react";
-function useObservableValue(observable, defaultValue) {
-  const [value, setValue] = useState4(defaultValue);
-  useEffect4(() => {
-    const subscription = observable.subscribe(setValue);
-    return () => subscription.unsubscribe();
-  }, [observable]);
-  return value;
-}
-
-// src/usePromise.ts
-import { useEffect as useEffect5, useRef, useState as useState5 } from "react";
-function usePromise(promise) {
-  const promiseRef = useRef(promise);
-  const [result, setResult] = useState5(
-    promise == null ? { status: "idle" } : { status: "pending" }
-  );
-  useEffect5(() => {
-    if (promise !== promiseRef.current) {
-      promiseRef.current = promise;
-      setResult(promise == null ? { status: "idle" } : { status: "pending" });
-    }
-  }, [promise]);
-  useEffect5(() => {
-    if (promise == null) return;
-    Promise.allSettled([promise]).then(([settled]) => {
-      if (promise === promiseRef.current) {
-        setResult(settled);
-      }
-    });
-  }, [promise]);
-  return result;
-}
-export {
-  useComponentValue,
-  useEntityQuery,
-  useObservableValue,
-  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/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","useEffect","useState","useEffect","useState","isEqual","defineQuery","useState","useEffect","entities","useEffect","useState","useEffect","useState"]}
+{"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":"AAAA,OAGE,eAAAA,EAEA,qBAAAC,EACA,OAAAC,EACA,qBAAAC,MAEK,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,EAAK,CAAC,EACpC,QAAQ,UAAWM,GAAW,CAC7D,GAAIV,EAAkBU,EAAQN,CAAS,GAAKM,EAAO,SAAWL,EAAQ,CACpE,GAAM,CAACM,CAAS,EAAID,EAAO,MAC3BF,EAASG,CAAS,CACpB,CACF,CAAC,EACD,MAAO,IAAMF,EAAa,YAAY,CACxC,EAAG,CAACL,EAAWC,CAAM,CAAC,EAEfE,GAASD,CAClB,CC9CA,OAAS,eAAAM,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,CAAC,EAAGgB,IAAMjB,EAAQ,EAAGiB,CAAC,CAAC,CAAC,GAE5E,IAAMC,EAAeF,EAAW,UAAWJ,GAAaC,EAAYD,CAAQ,CAAC,EAC7E,MAAO,IAAMM,EAAa,YAAY,CACxC,EAAG,CAACT,EAAOH,CAAmB,CAAC,EAExBM,CACT,CEpCA,OAAS,aAAAO,EAAW,YAAAC,MAAgB,QAO7B,SAASC,EAAsBC,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,CChBA,OAAS,aAAAG,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QAMrC,SAASC,GAAcC,EAA4C,CACxE,IAAMC,EAAaJ,EAAOG,CAAO,EAC3B,CAACE,EAAQC,CAAS,EAAIL,EAC1BE,GAAW,KAAO,CAAE,OAAQ,MAAO,EAAI,CAAE,OAAQ,SAAU,CAC7D,EAEA,OAAAJ,EAAU,IAAM,CACVI,IAAYC,EAAW,UACzBA,EAAW,QAAUD,EACrBG,EAAUH,GAAW,KAAO,CAAE,OAAQ,MAAO,EAAI,CAAE,OAAQ,SAAU,CAAC,EAE1E,EAAG,CAACA,CAAO,CAAC,EAEZJ,EAAU,IAAM,CACVI,GAAW,MAEf,QAAQ,WAAW,CAACA,CAAO,CAAC,EAAE,KAAK,CAAC,CAACI,CAAO,IAAM,CAC5CJ,IAAYC,EAAW,SACzBE,EAAUC,CAAO,CAErB,CAAC,CACH,EAAG,CAACJ,CAAO,CAAC,EAELE,CACT","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.2.18-9fa07c8489f1fbf167d0db01cd9aaa645a29c8e2",
+  "version": "2.2.18-c2ad22c7feb566e1731ff16e8be291746bdffb3e",
   "description": "React tools for MUD client.",
   "repository": {
     "type": "git",
@@ -10,16 +10,7 @@
   "license": "MIT",
   "type": "module",
   "exports": {
-    ".": {
-      "import": {
-        "import": "./dist/index.js",
-        "types": "./dist/index.d.ts"
-      },
-      "require": {
-        "require": "./dist/index.cjs",
-        "types": "./dist/index.d.cts"
-      }
-    }
+    ".": "./dist/index.js"
   },
   "typesVersions": {
     "*": {
@@ -36,8 +27,8 @@
     "mobx": "^6.7.0",
     "react": "^18.2.0",
     "rxjs": "7.5.5",
-    "@latticexyz/recs": "2.2.18-9fa07c8489f1fbf167d0db01cd9aaa645a29c8e2",
-    "@latticexyz/store": "2.2.18-9fa07c8489f1fbf167d0db01cd9aaa645a29c8e2"
+    "@latticexyz/recs": "2.2.18-c2ad22c7feb566e1731ff16e8be291746bdffb3e",
+    "@latticexyz/store": "2.2.18-c2ad22c7feb566e1731ff16e8be291746bdffb3e"
   },
   "devDependencies": {
     "@testing-library/react-hooks": "^8.0.1",
@@ -47,7 +38,8 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "jsdom": "^22.1.0",
     "react-test-renderer": "^18.2.0",
-    "vite": "^4.3.6"
+    "vite": "^4.3.6",
+    "vitest": "0.34.6"
   },
   "scripts": {
     "build": "pnpm run build:js",

package/dist/index.cjs

@@ -1,138 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  useComponentValue: () => useComponentValue,
-  useEntityQuery: () => useEntityQuery,
-  useObservableValue: () => useObservableValue,
-  usePromise: () => usePromise
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/useComponentValue.ts
-var import_recs = require("@latticexyz/recs");
-var import_react = require("react");
-function useComponentValue(component, entity, defaultValue) {
-  const [value, setValue] = (0, import_react.useState)(entity != null ? (0, import_recs.getComponentValue)(component, entity) : void 0);
-  (0, import_react.useEffect)(() => {
-    setValue(entity != null ? (0, import_recs.getComponentValue)(component, entity) : void 0);
-    if (entity == null) return;
-    const queryResult = (0, import_recs.defineQuery)([(0, import_recs.Has)(component)], { runOnInit: true });
-    const subscription = queryResult.update$.subscribe((update) => {
-      if ((0, import_recs.isComponentUpdate)(update, component) && update.entity === entity) {
-        const [nextValue] = update.value;
-        setValue(nextValue);
-      }
-    });
-    return () => subscription.unsubscribe();
-  }, [component, entity]);
-  return value ?? defaultValue;
-}
-
-// src/useEntityQuery.ts
-var import_recs2 = require("@latticexyz/recs");
-var import_react3 = require("react");
-
-// src/utils/useDeepMemo.ts
-var import_react2 = require("react");
-var import_fast_deep_equal = __toESM(require("fast-deep-equal"), 1);
-var useDeepMemo = (currentValue) => {
-  const [stableValue, setStableValue] = (0, import_react2.useState)(currentValue);
-  (0, import_react2.useEffect)(() => {
-    if (!(0, import_fast_deep_equal.default)(currentValue, stableValue)) {
-      setStableValue(currentValue);
-    }
-  }, [currentValue]);
-  return stableValue;
-};
-
-// src/useEntityQuery.ts
-var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"), 1);
-var import_rxjs = require("rxjs");
-function useEntityQuery(fragments, options) {
-  const updateOnValueChange = options?.updateOnValueChange ?? true;
-  const stableFragments = useDeepMemo(fragments);
-  const query = (0, import_react3.useMemo)(() => (0, import_recs2.defineQuery)(stableFragments, { runOnInit: true }), [stableFragments]);
-  const [entities, setEntities] = (0, import_react3.useState)([...query.matching]);
-  (0, import_react3.useEffect)(() => {
-    setEntities([...query.matching]);
-    let observable = query.update$.pipe((0, import_rxjs.map)(() => [...query.matching]));
-    if (!updateOnValueChange) {
-      observable = observable.pipe((0, import_rxjs.distinctUntilChanged)((a, b) => (0, import_fast_deep_equal2.default)(a, b)));
-    }
-    const subscription = observable.subscribe((entities2) => setEntities(entities2));
-    return () => subscription.unsubscribe();
-  }, [query, updateOnValueChange]);
-  return entities;
-}
-
-// src/useObservableValue.ts
-var import_react4 = require("react");
-function useObservableValue(observable, defaultValue) {
-  const [value, setValue] = (0, import_react4.useState)(defaultValue);
-  (0, import_react4.useEffect)(() => {
-    const subscription = observable.subscribe(setValue);
-    return () => subscription.unsubscribe();
-  }, [observable]);
-  return value;
-}
-
-// src/usePromise.ts
-var import_react5 = require("react");
-function usePromise(promise) {
-  const promiseRef = (0, import_react5.useRef)(promise);
-  const [result, setResult] = (0, import_react5.useState)(
-    promise == null ? { status: "idle" } : { status: "pending" }
-  );
-  (0, import_react5.useEffect)(() => {
-    if (promise !== promiseRef.current) {
-      promiseRef.current = promise;
-      setResult(promise == null ? { status: "idle" } : { status: "pending" });
-    }
-  }, [promise]);
-  (0, import_react5.useEffect)(() => {
-    if (promise == null) return;
-    Promise.allSettled([promise]).then(([settled]) => {
-      if (promise === promiseRef.current) {
-        setResult(settled);
-      }
-    });
-  }, [promise]);
-  return result;
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useComponentValue,
-  useEntityQuery,
-  useObservableValue,
-  usePromise
-});
-//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.ts","../src/useComponentValue.ts","../src/useEntityQuery.ts","../src/utils/useDeepMemo.ts","../src/useObservableValue.ts","../src/usePromise.ts"],"sourcesContent":["export * from \"./useComponentValue\";\nexport * from \"./useEntityQuery\";\nexport * from \"./useObservableValue\";\nexport * from \"./usePromise\";\n","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":["import_recs","import_react","import_react","isEqual","import_fast_deep_equal","isEqual","entities","import_react","import_react"]}

package/dist/index.d.cts

@@ -1,30 +0,0 @@
-import * as _latticexyz_recs from '@latticexyz/recs';
-import { Schema, Component, Entity, ComponentValue, QueryFragment } from '@latticexyz/recs';
-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;
-
-/**
- * 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.
- */
-declare function useEntityQuery(fragments: QueryFragment[], options?: {
-    updateOnValueChange?: boolean;
-}): _latticexyz_recs.Entity[];
-
-declare function useObservableValue<T>(observable: Observable<T>, defaultValue: T): T;
-declare function useObservableValue<T>(observable: Observable<T>): T | undefined;
-
-type UsePromiseResult<T> = PromiseSettledResult<Awaited<T>> | {
-    status: "pending";
-} | {
-    status: "idle";
-};
-declare function usePromise<T>(promise: PromiseLike<T> | null | undefined): UsePromiseResult<T>;
-
-export { type UsePromiseResult, useComponentValue, useEntityQuery, useObservableValue, usePromise };