@latticexyz/react 1.33.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [1.33.0](https://github.com/latticexyz/mud/compare/v1.32.0...v1.33.0) (2023-01-12)
+
+### Features
+
+- **react:** add react package ([#294](https://github.com/latticexyz/mud/issues/294)) ([f5ee290](https://github.com/latticexyz/mud/commit/f5ee290e776276b2b0dd273705694df04a85f400))

package/README.md

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,59 @@
+import { getComponentValue, defineQuery, Has, isComponentUpdate } from '@latticexyz/recs';
+import { useState, useEffect, useMemo } from 'react';
+
+function useComponentValue(component, entityIndex, defaultValue) {
+    const [value, setValue] = useState(entityIndex != null ? getComponentValue(component, entityIndex) : undefined);
+    useEffect(() => {
+        // component or entityIndex changed, update state to latest value
+        setValue(entityIndex != null ? getComponentValue(component, entityIndex) : undefined);
+        if (entityIndex == null)
+            return;
+        const queryResult = defineQuery([Has(component)], { runOnInit: false });
+        const subscription = queryResult.update$.subscribe((update) => {
+            if (isComponentUpdate(update, component) && update.entity === entityIndex) {
+                const [nextValue] = update.value;
+                setValue(nextValue);
+            }
+        });
+        return () => subscription.unsubscribe();
+    }, [component, entityIndex]);
+    return value ?? defaultValue;
+}
+
+/** @deprecated See https://github.com/latticexyz/mud/issues/339 */
+const useDeprecatedComputedValue = (computedValue) => {
+    const [value, setValue] = useState(computedValue.get());
+    useEffect(() => {
+        const unsubscribe = computedValue.observe_(() => setValue(computedValue.get()));
+        return () => unsubscribe();
+    }, [computedValue]);
+    return value;
+};
+
+const defaultOptions = { runOnInit: true };
+function useEntityQuery(...args) {
+    const [fragments, options = defaultOptions] = args;
+    const queryResult = useMemo(() => defineQuery(fragments, options), [fragments, options]);
+    const [value, setValue] = useState([...queryResult.matching]);
+    useEffect(() => {
+        // If query changes, we need to update state (initialState is only set once)
+        if (options.runOnInit) {
+            setValue([...queryResult.matching]);
+        }
+        const subscription = queryResult.update$.subscribe(() => setValue([...queryResult.matching]));
+        return () => subscription.unsubscribe();
+    }, [queryResult, options.runOnInit]);
+    return value;
+}
+
+function useObservableValue(observable, defaultValue) {
+    const [value, setValue] = useState(defaultValue);
+    useEffect(() => {
+        const subscription = observable.subscribe(setValue);
+        return () => subscription.unsubscribe();
+    }, [observable]);
+    return value;
+}
+
+export { useComponentValue, useDeprecatedComputedValue, useEntityQuery, useObservableValue };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/useComponentValue.ts","../src/useDeprecatedComputedValue.ts","../src/useEntityQuery.ts","../src/useObservableValue.ts"],"sourcesContent":[null,null,null,null],"names":[],"mappings":"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"}

package/dist/useComponentValue.d.ts

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

package/dist/useDeprecatedComputedValue.d.ts

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

package/dist/useEntityQuery.d.ts

@@ -0,0 +1,4 @@
+import { defineQuery } from "@latticexyz/recs";
+declare type Args = Parameters<typeof defineQuery>;
+export declare function useEntityQuery(...args: Args): import("@latticexyz/recs").EntityIndex[];
+export {};

package/dist/useObservableValue.d.ts

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

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@latticexyz/react",
+  "version": "1.33.0",
+  "description": "React tools for MUD client.",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/latticexyz/mud.git",
+    "directory": "packages/react"
+  },
+  "scripts": {
+    "prepare": "yarn build",
+    "link": "yarn link",
+    "docs": "rimraf API && typedoc src && find API -type f -name '*.md' -exec sed -E -i \"\" \"s/(#.*)(<.*>)/\\1/\" {} \\; && echo 'label: API' > API/index.yml",
+    "test": "tsc && jest",
+    "prepack": "mv package.json package.json.bak && jq \".main = \\\"dist/index.js\\\"\" package.json.bak > package.json ",
+    "postpack": "mv package.json.bak package.json || echo 'no package.json.bak'",
+    "build": "rimraf dist && rollup -c rollup.config.js",
+    "release": "npm publish || echo 'version already published'"
+  },
+  "devDependencies": {
+    "@latticexyz/recs": "^1.33.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-typescript": "^8.3.1",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/react": "^18.0.12",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.3.1",
+    "mobx": "^6.4.2",
+    "react": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.69.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rxjs": "^7.5.5",
+    "ts-jest": "^29.0.3",
+    "tslib": "^2.3.1",
+    "typedoc": "0.23.21",
+    "typedoc-plugin-markdown": "^3.13.6",
+    "typescript": "^4.5.5"
+  },
+  "peerDependencies": {
+    "@latticexyz/recs": "^1.32.0",
+    "mobx": "^6.4.2",
+    "react": "^18.2.0",
+    "rxjs": "^7.5.5"
+  },
+  "gitHead": "2008fa7e8e5d6bd1009cafcf9cfae2ae68e2d28e"
+}