@fluidframework/react 0.41.4 → 2.63.0-358419

package/lib/simpleIdentifier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"simpleIdentifier.js","sourceRoot":"","sources":["../src/simpleIdentifier.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,IAAI,OAAO,GAAG,CAAC,CAAC;AAEhB,MAAM,KAAK,GAAG,IAAI,OAAO,EAAkB,CAAC;AAE5C;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,cAAc,CAAC,MAAc;IAC5C,MAAM,EAAE,GAAG,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;QACtB,OAAO,EAAE,CAAC;IACX,CAAC;IACD,OAAO,EAAE,CAAC;IACV,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3B,OAAO,OAAO,CAAC;AAChB,CAAC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nlet counter = 0;\n\nconst idMap = new WeakMap<object, number>();\n\n/**\n * Associates a unique number with an object.\n * @remarks\n * The ID number is tied to the object identity, not the object's contents; modifying the object will not cause it to get a different ID.\n *\n * This can be handy for generating {@link https://react.dev/learn/rendering-lists#where-to-get-your-key | keys for React lists} from TreeNodes.\n *\n * Most cases which could use this function should just use the objects themselves instead of getting IDs from them, since the objects will have the same equality as the IDs.\n * For example, if storing data associated with the objects in a map, using the object as the key is more efficient than getting an ID from it and using that.\n * This functions exists to deal with the edge case where you would like to use object identity, but you can't.\n * React keys are an examples of such a case, since React does not allow objects as keys.\n * @alpha\n */\nexport function objectIdNumber(object: object): number {\n\tconst id = idMap.get(object);\n\tif (id !== undefined) {\n\t\treturn id;\n\t}\n\tcounter++;\n\tidMap.set(object, counter);\n\treturn counter;\n}\n"]}

package/lib/test/propNode.spec.js

@@ -0,0 +1,120 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import { strict as assert } from "node:assert";
+import { SchemaFactory } from "@fluidframework/tree";
+import { allowUnused } from "@fluidframework/tree/internal";
+import { toPropTreeNode, toPropTreeRecord, unwrapPropTreeNode, } from "../propNode.js";
+describe("propNode", () => {
+    it("PropTreeNode", () => {
+        const builder = new SchemaFactory("tree-react-api");
+        class Inventory extends builder.object("Inventory", {
+            nuts: builder.number,
+        }) {
+        }
+        const node = new Inventory({ nuts: 5 });
+        const prop = toPropTreeNode(node);
+        // @ts-expect-error Read access should be removed
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const nuts = prop.nuts;
+        const node2 = unwrapPropTreeNode(prop);
+        assert.equal(node2, node);
+    });
+    it("PropTreeNode value", () => {
+        const value = 5;
+        // toPropTreeNode leaves leaves alone
+        const prop = toPropTreeNode(value);
+        const node2 = unwrapPropTreeNode(prop);
+        assert.equal(node2, value);
+    });
+    it("NodeRecord", () => {
+        const builder = new SchemaFactory("tree-react-api");
+        class Inventory extends builder.object("Inventory", { nuts: builder.number }) {
+        }
+        const record = toPropTreeRecord({ num: 5, node: new Inventory({ nuts: 5 }) });
+        const prop = record.node;
+        // @ts-expect-error Read access should be removed
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const nuts = prop.nuts;
+        const node = unwrapPropTreeNode(prop);
+        assert.equal(node, prop);
+    });
+    it("WrapPropTreeNodeRecord", () => {
+        const builder = new SchemaFactory("tree-react-api");
+        class Node extends builder.object("Node", {}) {
+        }
+        allowUnused();
+    });
+    it("IsMappableObjectType", () => {
+        allowUnused();
+        allowUnused();
+        allowUnused();
+        allowUnused();
+        // Interestingly, maps are not nominally typed:
+        allowUnused();
+        // Constructors are not mappable:
+        allowUnused();
+        // Nor are functions
+        allowUnused();
+        class Nominal {
+            constructor(x) {
+                this._nominal = undefined;
+            }
+        }
+        // Instances of classes with private or protected fields are also not mappable:
+        allowUnused();
+        // TreeNode is nominally type so not mappable:
+        allowUnused();
+        // Primitives are mappable since mapping over them leaves them unchanged in a generic context:
+        allowUnused();
+        allowUnused();
+        allowUnused();
+        // @ts-expect-error MappedNumberDirect is not a number:
+        allowUnused();
+        allowUnused();
+        allowUnused();
+        allowUnused();
+        // @ts-expect-error Union is lossy when mapped due to having lossy members:
+        allowUnused();
+        allowUnused();
+        allowUnused();
+    });
+    it("WrapNodes", () => {
+        const builder = new SchemaFactory("tree-react-api");
+        class Node extends builder.object("Node", {}) {
+        }
+        class Nominal {
+            constructor(x) {
+                this._nominal = undefined;
+            }
+        }
+        allowUnused();
+        allowUnused();
+        allowUnused();
+        allowUnused();
+        // Must not break existing PropTreeNode types:
+        allowUnused();
+        allowUnused();
+        // Does not break maps
+        allowUnused();
+        // Avoids breaking nominal types while recursing into objects:
+        allowUnused();
+        class Nominal2 {
+            constructor() {
+                this._nominal = undefined;
+                this.child = new Node({});
+            }
+        }
+        allowUnused();
+        // Does not break unions
+        allowUnused();
+        // DeepWrappedMixed removed the nominal typing! Thats bad!
+        allowUnused();
+        // Child transformed correctly:
+        allowUnused();
+        // But lost the nominal typing:
+        allowUnused();
+    });
+});
+//# sourceMappingURL=propNode.spec.js.map

package/lib/test/propNode.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"propNode.spec.js","sourceRoot":"","sources":["../../src/test/propNode.spec.ts"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport { strict as assert } from \"node:assert\";\n\nimport { SchemaFactory, type TreeNode } from \"@fluidframework/tree\";\nimport { allowUnused } from \"@fluidframework/tree/internal\";\nimport type { requireAssignableTo } from \"@fluidframework/tree/internal\";\n\nimport {\n\ttoPropTreeNode,\n\ttoPropTreeRecord,\n\tunwrapPropTreeNode,\n\ttype IsMappableObjectType,\n\ttype PropTreeNode,\n\ttype WrapNodes,\n\ttype WrapPropTreeNodeRecord,\n} from \"../propNode.js\";\n\ndescribe(\"propNode\", () => {\n\tit(\"PropTreeNode\", () => {\n\t\tconst builder = new SchemaFactory(\"tree-react-api\");\n\n\t\tclass Inventory extends builder.object(\"Inventory\", {\n\t\t\tnuts: builder.number,\n\t\t}) {}\n\n\t\tconst node = new Inventory({ nuts: 5 });\n\n\t\tconst prop = toPropTreeNode(node);\n\n\t\t// @ts-expect-error Read access should be removed\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\tconst nuts = prop.nuts;\n\n\t\tconst node2 = unwrapPropTreeNode(prop);\n\n\t\tassert.equal(node2, node);\n\t});\n\n\tit(\"PropTreeNode value\", () => {\n\t\tconst value = 5;\n\n\t\t// toPropTreeNode leaves leaves alone\n\t\tconst prop: 5 = toPropTreeNode(value);\n\n\t\tconst node2: 5 = unwrapPropTreeNode(prop);\n\n\t\tassert.equal(node2, value);\n\t});\n\n\tit(\"NodeRecord\", () => {\n\t\tconst builder = new SchemaFactory(\"tree-react-api\");\n\n\t\tclass Inventory extends builder.object(\"Inventory\", { nuts: builder.number }) {}\n\n\t\tconst record = toPropTreeRecord({ num: 5, node: new Inventory({ nuts: 5 }) });\n\t\tconst prop = record.node;\n\n\t\t// @ts-expect-error Read access should be removed\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\tconst nuts = prop.nuts;\n\n\t\tconst node = unwrapPropTreeNode(prop);\n\n\t\tassert.equal(node, prop);\n\t});\n\n\tit(\"WrapPropTreeNodeRecord\", () => {\n\t\tconst builder = new SchemaFactory(\"tree-react-api\");\n\t\tclass Node extends builder.object(\"Node\", {}) {}\n\n\t\ttype Wrapped = WrapPropTreeNodeRecord<{ a: 1; b: Node }>;\n\t\tallowUnused<requireAssignableTo<Wrapped, { a: 1; b: PropTreeNode<Node> }>>();\n\t});\n\n\tit(\"IsMappableObjectType\", () => {\n\t\tallowUnused<requireAssignableTo<IsMappableObjectType<{ x: number }>, true>>();\n\t\tallowUnused<requireAssignableTo<IsMappableObjectType<{ readonly x: number }>, true>>();\n\t\tallowUnused<requireAssignableTo<IsMappableObjectType<Record<string, number>>, true>>();\n\t\tallowUnused<requireAssignableTo<IsMappableObjectType<number[]>, true>>();\n\n\t\t// Interestingly, maps are not nominally typed:\n\t\tallowUnused<requireAssignableTo<IsMappableObjectType<Map<number, number>>, true>>();\n\t\t// Constructors are not mappable:\n\t\tallowUnused<requireAssignableTo<IsMappableObjectType<typeof Map>, false>>();\n\t\t// Nor are functions\n\t\tallowUnused<requireAssignableTo<IsMappableObjectType<() => number>, false>>();\n\n\t\tclass Nominal {\n\t\t\tpublic constructor(x: number) {}\n\t\t\tprotected readonly _nominal = undefined;\n\t\t}\n\n\t\t// Instances of classes with private or protected fields are also not mappable:\n\t\tallowUnused<requireAssignableTo<IsMappableObjectType<Nominal>, false>>();\n\t\t// TreeNode is nominally type so not mappable:\n\t\tallowUnused<requireAssignableTo<IsMappableObjectType<TreeNode>, false>>();\n\n\t\t// Primitives are mappable since mapping over them leaves them unchanged in a generic context:\n\t\tallowUnused<requireAssignableTo<IsMappableObjectType<number>, true>>();\n\n\t\ttype Mapped<T> = {\n\t\t\t[P in keyof T]: T[P];\n\t\t};\n\n\t\ttype MappedNumberGeneric = Mapped<number>;\n\n\t\tallowUnused<requireAssignableTo<MappedNumberGeneric, number>>();\n\t\tallowUnused<requireAssignableTo<number, MappedNumberGeneric>>();\n\n\t\t// Oddly, mapping over a primitive type does change its type if done non-generically\n\n\t\ttype MappedNumberDirect = {\n\t\t\t[P in keyof number]: number[P];\n\t\t};\n\n\t\t// @ts-expect-error MappedNumberDirect is not a number:\n\t\tallowUnused<requireAssignableTo<MappedNumberDirect, number>>();\n\n\t\t// Unions:\n\t\t// True Case: All members are mappable\n\t\ttype SimpleUnion = { a: 1 } | { b: 2 };\n\t\ttype MappedSimpleUnion = Mapped<SimpleUnion>;\n\t\tallowUnused<requireAssignableTo<MappedSimpleUnion, SimpleUnion>>();\n\t\tallowUnused<requireAssignableTo<SimpleUnion, MappedSimpleUnion>>();\n\t\tallowUnused<requireAssignableTo<IsMappableObjectType<SimpleUnion>, true>>();\n\n\t\t// False Case: Not all members are mappable\n\t\ttype Union = { a: 1 } | { b: 2 } | number | Nominal;\n\t\ttype MappedUnion = Mapped<Union>;\n\n\t\t// @ts-expect-error Union is lossy when mapped due to having lossy members:\n\t\tallowUnused<requireAssignableTo<MappedUnion, Union>>();\n\t\tallowUnused<requireAssignableTo<Union, MappedUnion>>();\n\t\tallowUnused<requireAssignableTo<IsMappableObjectType<Union>, false>>();\n\t});\n\n\tit(\"WrapNodes\", () => {\n\t\tconst builder = new SchemaFactory(\"tree-react-api\");\n\n\t\tclass Node extends builder.object(\"Node\", {}) {}\n\n\t\tclass Nominal {\n\t\t\tpublic constructor(x: number) {}\n\t\t\tprotected readonly _nominal = undefined;\n\t\t}\n\n\t\tallowUnused<requireAssignableTo<WrapNodes<Set<number>>, Set<number>>>();\n\t\tallowUnused<requireAssignableTo<WrapNodes<Nominal>, Nominal>>();\n\t\tallowUnused<requireAssignableTo<WrapNodes<Node>, PropTreeNode<Node>>>();\n\t\tallowUnused<\n\t\t\trequireAssignableTo<WrapNodes<{ a: 1; b: Node }>, { a: 1; b: PropTreeNode<Node> }>\n\t\t>();\n\t\t// Must not break existing PropTreeNode types:\n\t\tallowUnused<requireAssignableTo<WrapNodes<PropTreeNode<Node>>, PropTreeNode<Node>>>();\n\n\t\t// Does not break maps, though also doesn't wrap the values:\n\t\t// Note: WrappedMap intentionally preserves the named type here: intellisense for this should be `type WrappedMap = Map<number, Node>`.\n\t\t// We have no known way to test that is preserved, since a flattened mapped type would assignable in both directions.\n\t\ttype WrappedMap = WrapNodes<Map<number, Node>>;\n\t\tallowUnused<requireAssignableTo<WrappedMap, Map<number, Node>>>();\n\n\t\t// Does not break maps\n\t\tallowUnused<requireAssignableTo<WrapNodes<Map<number, number>>, Map<number, number>>>();\n\n\t\t// Avoids breaking nominal types while recursing into objects:\n\t\tallowUnused<\n\t\t\trequireAssignableTo<\n\t\t\t\tWrapNodes<{ a: 1; b: Node; c: Nominal; d: typeof Nominal; e: { inner: Node } }>,\n\t\t\t\t{\n\t\t\t\t\ta: 1;\n\t\t\t\t\tb: PropTreeNode<Node>;\n\t\t\t\t\tc: Nominal;\n\t\t\t\t\td: typeof Nominal;\n\t\t\t\t\te: { inner: PropTreeNode<Node> };\n\t\t\t\t}\n\t\t\t>\n\t\t>();\n\n\t\tclass Nominal2 {\n\t\t\tprotected readonly _nominal = undefined;\n\t\t\tpublic readonly child: Node = new Node({});\n\t\t}\n\n\t\ttype WrappedNominal2 = WrapNodes<Nominal2>;\n\t\tallowUnused<requireAssignableTo<WrappedNominal2, Nominal2>>();\n\n\t\t// Does not break unions\n\t\tallowUnused<\n\t\t\trequireAssignableTo<\n\t\t\t\tWrapNodes<{ a: 1 } | { b: Node } | number | Nominal | Node>,\n\t\t\t\t{ a: 1 } | { b: PropTreeNode<Node> } | number | Nominal | PropTreeNode<Node>\n\t\t\t>\n\t\t>();\n\n\t\t/**\n\t\t * Example deep mapped type which wraps TreeNodes in PropTreeNodes:\n\t\t * this causes issues which is why its not used in WrapNodes.\n\t\t *\n\t\t * Note that this doesn't handle all cases as it still fails to handle methods/properties that read from nodes (handling that is impossible),\n\t\t * and methods which return nodes (handling that is possible if they include TreeNode in the return type, but impossible if not).\n\t\t */\n\t\ttype MappedDeep<T> = T extends TreeNode\n\t\t\t? PropTreeIfNode<T>\n\t\t\t: T extends object\n\t\t\t\t? {\n\t\t\t\t\t\treadonly [P in keyof T]: MappedDeep<T[P]>;\n\t\t\t\t\t}\n\t\t\t\t: T;\n\t\ttype PropTreeIfNode<T> = T extends TreeNode ? PropTreeNode<T> : T;\n\n\t\ttype MappedDeepMixed = MappedDeep<{ a: 1; b: Node; c: Nominal; d: typeof Nominal }>;\n\n\t\t// DeepWrappedMixed removed the nominal typing! Thats bad!\n\t\tallowUnused<requireAssignableTo<MappedDeepMixed[\"c\"], { unrelated?: unknown }>>();\n\n\t\t// @ts-expect-error The fact that \"d\" was a constructor was erased. Thats bad!\n\t\ttype Y = ConstructorParameters<MappedDeepMixed[\"d\"]>;\n\n\t\t// This correctly transforms the child field, but destroys the nominal typing of Nominal2\n\t\ttype MappedDeepNominal2 = MappedDeep<Nominal2>;\n\n\t\t// Child transformed correctly:\n\t\tallowUnused<\n\t\t\trequireAssignableTo<MappedDeepNominal2, { readonly child: PropTreeNode<Node> }>\n\t\t>();\n\t\t// But lost the nominal typing:\n\t\tallowUnused<\n\t\t\trequireAssignableTo<{ readonly child: PropTreeNode<Node> }, MappedDeepNominal2>\n\t\t>();\n\t});\n});\n"]}

package/lib/test/reactSharedTreeView.spec.js

@@ -0,0 +1,71 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import { strict as assert } from "node:assert";
+import { TinyliciousClient } from "@fluidframework/tinylicious-client";
+import { SchemaFactory, TreeViewConfiguration } from "@fluidframework/tree";
+import { independentView } from "@fluidframework/tree/internal";
+import { render } from "@testing-library/react";
+import globalJsdom from "global-jsdom";
+import * as React from "react";
+import { treeDataObject, TreeViewComponent } from "../reactSharedTreeView.js";
+describe("reactSharedTreeView", () => {
+    it("treeDataObject", async () => {
+        const builder = new SchemaFactory("tree-react-api");
+        class Inventory extends builder.object("Contoso:InventoryItem-1.0.0", {
+            nuts: builder.number,
+            bolts: builder.number,
+        }) {
+        }
+        const containerSchema = {
+            initialObjects: {
+                // TODO: it seems odd that DataObjects in container schema need both a key under initialObjects where they are,
+                // as well as a key under the root data object, and SharedObjects only need one key.
+                // Maybe we can default the shared object's key to be derived from the data objects key by default?
+                tree: treeDataObject(new TreeViewConfiguration({ schema: Inventory }), () => new Inventory({ nuts: 5, bolts: 6 })),
+            },
+        };
+        // TODO: Ideally we would use a local-server service-client, but one does not appear to exist.
+        const tinyliciousClient = new TinyliciousClient();
+        const { container } = await tinyliciousClient.createContainer(containerSchema, "2");
+        const dataObject = container.initialObjects.tree;
+        assert.equal(dataObject.treeView.root.nuts, 5);
+        dataObject.treeView.root.nuts += 1;
+        assert.equal(dataObject.treeView.root.bolts, 6);
+    });
+    describe("dom tests", () => {
+        let cleanup;
+        before(() => {
+            cleanup = globalJsdom();
+        });
+        after(() => {
+            cleanup();
+        });
+        // Run without strict mode to make sure it works in a normal production setup.
+        // Run with strict mode to potentially detect additional issues.
+        // Note that React's strict mode is not more strict,
+        // but instead drastically changes when the component code and its effects run to exercise more edge cases and detect certain kinds of bugs.
+        for (const reactStrictMode of [false, true]) {
+            describe(`StrictMode: ${reactStrictMode}`, () => {
+                const builder = new SchemaFactory("tree-react-api");
+                class Item extends builder.object("Item", {}) {
+                }
+                const View = ({ root }) => (React.createElement("span", null, "View"));
+                it("TreeViewComponent", () => {
+                    const view = independentView(new TreeViewConfiguration({ schema: Item }), {});
+                    const content = React.createElement(TreeViewComponent, { viewComponent: View, tree: { treeView: view } });
+                    const rendered = render(content, { reactStrictMode });
+                    // Ensure that viewing an incompatible document displays an error.
+                    assert.match(rendered.baseElement.textContent ?? "", /Document is incompatible/);
+                    // Ensure that changes in compatibility are detected and invalidate the view,
+                    // and that compatible documents show the content from `viewComponent`
+                    view.initialize(new Item({}));
+                    rendered.rerender(content);
+                    assert.equal(rendered.baseElement.textContent, "View");
+                });
+            });
+        }
+    });
+});
+//# sourceMappingURL=reactSharedTreeView.spec.js.map

package/lib/test/reactSharedTreeView.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactSharedTreeView.spec.js","sourceRoot":"","sources":["../../src/test/reactSharedTreeView.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport { strict as assert } from \"node:assert\";\n\nimport type { ContainerSchema } from \"@fluidframework/fluid-static\";\nimport { TinyliciousClient } from \"@fluidframework/tinylicious-client\";\nimport { SchemaFactory, TreeViewConfiguration } from \"@fluidframework/tree\";\nimport { independentView } from \"@fluidframework/tree/internal\";\nimport { render } from \"@testing-library/react\";\nimport globalJsdom from \"global-jsdom\";\nimport * as React from \"react\";\n\nimport type { PropTreeNode } from \"../propNode.js\";\nimport { treeDataObject, TreeViewComponent } from \"../reactSharedTreeView.js\";\n\ndescribe(\"reactSharedTreeView\", () => {\n\tit(\"treeDataObject\", async () => {\n\t\tconst builder = new SchemaFactory(\"tree-react-api\");\n\n\t\tclass Inventory extends builder.object(\"Contoso:InventoryItem-1.0.0\", {\n\t\t\tnuts: builder.number,\n\t\t\tbolts: builder.number,\n\t\t}) {}\n\n\t\tconst containerSchema = {\n\t\t\tinitialObjects: {\n\t\t\t\t// TODO: it seems odd that DataObjects in container schema need both a key under initialObjects where they are,\n\t\t\t\t// as well as a key under the root data object, and SharedObjects only need one key.\n\t\t\t\t// Maybe we can default the shared object's key to be derived from the data objects key by default?\n\t\t\t\ttree: treeDataObject(\n\t\t\t\t\tnew TreeViewConfiguration({ schema: Inventory }),\n\t\t\t\t\t() => new Inventory({ nuts: 5, bolts: 6 }),\n\t\t\t\t),\n\t\t\t},\n\t\t} satisfies ContainerSchema;\n\n\t\t// TODO: Ideally we would use a local-server service-client, but one does not appear to exist.\n\t\tconst tinyliciousClient = new TinyliciousClient();\n\n\t\tconst { container } = await tinyliciousClient.createContainer(containerSchema, \"2\");\n\t\tconst dataObject = container.initialObjects.tree;\n\t\tassert.equal(dataObject.treeView.root.nuts, 5);\n\t\tdataObject.treeView.root.nuts += 1;\n\t\tassert.equal(dataObject.treeView.root.bolts, 6);\n\t});\n\n\tdescribe(\"dom tests\", () => {\n\t\tlet cleanup: () => void;\n\n\t\tbefore(() => {\n\t\t\tcleanup = globalJsdom();\n\t\t});\n\n\t\tafter(() => {\n\t\t\tcleanup();\n\t\t});\n\n\t\t// Run without strict mode to make sure it works in a normal production setup.\n\t\t// Run with strict mode to potentially detect additional issues.\n\t\t// Note that React's strict mode is not more strict,\n\t\t// but instead drastically changes when the component code and its effects run to exercise more edge cases and detect certain kinds of bugs.\n\t\tfor (const reactStrictMode of [false, true]) {\n\t\t\tdescribe(`StrictMode: ${reactStrictMode}`, () => {\n\t\t\t\tconst builder = new SchemaFactory(\"tree-react-api\");\n\n\t\t\t\tclass Item extends builder.object(\"Item\", {}) {}\n\n\t\t\t\tconst View = ({ root }: { root: PropTreeNode<Item> }): React.JSX.Element => (\n\t\t\t\t\t<span>View</span>\n\t\t\t\t);\n\n\t\t\t\tit(\"TreeViewComponent\", () => {\n\t\t\t\t\tconst view = independentView(new TreeViewConfiguration({ schema: Item }), {});\n\t\t\t\t\tconst content = <TreeViewComponent viewComponent={View} tree={{ treeView: view }} />;\n\t\t\t\t\tconst rendered = render(content, { reactStrictMode });\n\n\t\t\t\t\t// Ensure that viewing an incompatible document displays an error.\n\t\t\t\t\tassert.match(rendered.baseElement.textContent ?? \"\", /Document is incompatible/);\n\t\t\t\t\t// Ensure that changes in compatibility are detected and invalidate the view,\n\t\t\t\t\t// and that compatible documents show the content from `viewComponent`\n\t\t\t\t\tview.initialize(new Item({}));\n\t\t\t\t\trendered.rerender(content);\n\t\t\t\t\tassert.equal(rendered.baseElement.textContent, \"View\");\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t});\n});\n"]}

package/lib/test/simpleIdentifier.spec.js

@@ -0,0 +1,18 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import { strict as assert } from "node:assert";
+import { objectIdNumber } from "../simpleIdentifier.js";
+describe("simpleIdentifier", () => {
+    it("objectIdNumber", () => {
+        const a = {};
+        const b = {};
+        const aId = objectIdNumber(a);
+        const bId = objectIdNumber(b);
+        assert.equal(aId, objectIdNumber(a));
+        assert.equal(bId, objectIdNumber(b));
+        assert.notEqual(aId, bId);
+    });
+});
+//# sourceMappingURL=simpleIdentifier.spec.js.map

package/lib/test/simpleIdentifier.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"simpleIdentifier.spec.js","sourceRoot":"","sources":["../../src/test/simpleIdentifier.spec.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,gBAAgB,EAAE,GAAG,EAAE;QACzB,MAAM,CAAC,GAAW,EAAE,CAAC;QACrB,MAAM,CAAC,GAAW,EAAE,CAAC;QACrB,MAAM,GAAG,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;QAC9B,MAAM,GAAG,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;QAC9B,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;QACrC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;QACrC,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport { strict as assert } from \"node:assert\";\n\nimport { objectIdNumber } from \"../simpleIdentifier.js\";\n\ndescribe(\"simpleIdentifier\", () => {\n\tit(\"objectIdNumber\", () => {\n\t\tconst a: object = {};\n\t\tconst b: object = {};\n\t\tconst aId = objectIdNumber(a);\n\t\tconst bId = objectIdNumber(b);\n\t\tassert.equal(aId, objectIdNumber(a));\n\t\tassert.equal(bId, objectIdNumber(b));\n\t\tassert.notEqual(aId, bId);\n\t});\n});\n"]}

package/lib/test/useObservation.spec.js

@@ -0,0 +1,162 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import { strict as assert } from "node:assert";
+import { render } from "@testing-library/react";
+import globalJsdom from "global-jsdom";
+import * as React from "react";
+import { useObservation, useObservationStrict, useObservationWithEffects, } from "../useObservation.js";
+// There is much more coverage of useObservation via useTree tests.
+describe("useObservation", () => {
+    describe("dom tests", () => {
+        let cleanup;
+        before(() => {
+            cleanup = globalJsdom();
+        });
+        after(() => {
+            cleanup();
+        });
+        const observationHooks = [
+            useObservation,
+            useObservationStrict,
+            useObservationWithEffects,
+        ];
+        for (const useObservationHook of observationHooks) {
+            // eslint-disable-next-line @typescript-eslint/ban-types
+            describe(useObservationHook.name, () => {
+                for (const reactStrictMode of [false, true]) {
+                    /**
+                     * Check then clear the contents of `log`.
+                     *
+                     * @remarks When in StrictMode, React may double render, so that case is not checked for an exact match.
+                     */
+                    // eslint-disable-next-line no-inner-declarations
+                    function checkRenderLog(log, expected) {
+                        if (reactStrictMode) {
+                            assert.deepEqual(new Set(log), new Set(expected));
+                        }
+                        else {
+                            assert.deepEqual(log, expected);
+                        }
+                        log.length = 0;
+                    }
+                    describe(`StrictMode: ${reactStrictMode}`, () => {
+                        it("useObservation", async () => {
+                            const log = [];
+                            const unsubscribe = () => {
+                                log.push("unsubscribe");
+                            };
+                            function TestComponent() {
+                                log.push("render");
+                                return useObservationHook((invalidate) => {
+                                    log.push(`useObservation`);
+                                    return {
+                                        result: (React.createElement("button", { onClick: () => {
+                                                // In real usage, this would unsubscribe from any events.
+                                                log.push("click");
+                                                invalidate();
+                                            } }, "Invalidate")),
+                                        unsubscribe,
+                                    };
+                                }, { onInvalidation: () => log.push("invalidated") });
+                            }
+                            const content = React.createElement(TestComponent, null);
+                            const rendered = render(content, { reactStrictMode });
+                            checkRenderLog(log, ["render", "useObservation"]);
+                            rendered.rerender(content);
+                            assertLogEmpty(log);
+                            const button = rendered.baseElement.querySelector("button") ??
+                                assert.fail("button not found");
+                            button.click();
+                            checkRenderLog(log, ["click", "invalidated"]);
+                            rendered.rerender(content);
+                            checkRenderLog(log, [
+                                "render",
+                                ...(reactStrictMode && useObservationHook !== useObservationWithEffects
+                                    ? ["unsubscribe"]
+                                    : []),
+                                "useObservation",
+                            ]);
+                        });
+                        // This requires waiting for finalizers.
+                        // Forcing two async GCs seems to work robustly, so this is enabled, but if it becomes flakey, it can be tweaked and/or skipped.
+                        it(`unsubscribe on unmount`, async () => {
+                            assert(global.gc);
+                            const log = [];
+                            const unsubscribe = () => {
+                                log.push("unsubscribe");
+                            };
+                            function TestComponent() {
+                                return useObservationHook((invalidate) => ({
+                                    result: React.createElement("br", null),
+                                    unsubscribe,
+                                }));
+                            }
+                            const rendered = render(React.createElement(TestComponent, null), { reactStrictMode });
+                            assertLogEmpty(log);
+                            rendered.unmount();
+                            // Unsubscribe on unmount is done via FinalizationRegistry, so force a GC and wait for it.
+                            // For this to pass on NodeJs experimentally is has been found that this must either do:
+                            // 1. a sync GC then a wait of 8 seconds (but this sometimes fails after multiple runs unless a debugger takes a heap snapshot, possible due to some JIT optimization that breaks it).
+                            // 2. two async GCs in a row.
+                            // Since the second option is both more robust and faster, that is what is used here.
+                            for (let index = 0; index < 2; index++) {
+                                await global.gc({ type: "major", execution: "async" });
+                                if (log.length > 0) {
+                                    break;
+                                }
+                            }
+                            checkRenderLog(log, ["unsubscribe"]);
+                        });
+                        it("invalidate after unmount", () => {
+                            const log = [];
+                            let logUnsubscribe = true;
+                            const unsubscribe = () => {
+                                if (logUnsubscribe)
+                                    log.push("unsubscribe");
+                            };
+                            const invalidateCallbacks = [];
+                            function TestComponent() {
+                                log.push("render");
+                                return useObservationHook((invalidate) => {
+                                    invalidateCallbacks.push(invalidate);
+                                    return {
+                                        result: React.createElement("br", null),
+                                        unsubscribe,
+                                    };
+                                }, { onInvalidation: () => log.push("invalidated") });
+                            }
+                            const rendered = render(React.createElement(TestComponent, null), { reactStrictMode });
+                            checkRenderLog(log, ["render"]);
+                            // After unmount, unsubscribe could happen at any time due to finalizer,so suppress logging it to prevent the test from possibly becoming flaky.
+                            logUnsubscribe = false;
+                            rendered.unmount();
+                            assert(invalidateCallbacks.length === (reactStrictMode ? 2 : 1));
+                            // Invalidate after unmount.
+                            // Since this can happen in real use, due to unsubscribe delay while waiting for finalizer, ensure it does not cause issues.
+                            // This should be a no-op, but since it does a React SetState after unmount, React could object to it.
+                            for (const callback of invalidateCallbacks) {
+                                callback();
+                            }
+                            // Confirm the invalidation happened..
+                            // If we didn't suppress unsubscribe logging, and the finalizer had run, this could fail (which is why we suppress it).
+                            checkRenderLog(log, ["invalidated"]);
+                        });
+                    });
+                }
+            });
+        }
+    });
+});
+/**
+ * Assert that an array is empty.
+ *
+ * @remarks
+ * Not inlined because doing so causes TypeScript to infer the array type as never[] afterwards and breaks push.
+ * Better than asserting length is 0 as this gets a better error message on failure.
+ */
+function assertLogEmpty(log) {
+    assert.deepEqual(log, []);
+}
+//# sourceMappingURL=useObservation.spec.js.map

package/lib/test/useObservation.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useObservation.spec.js","sourceRoot":"","sources":["../../src/test/useObservation.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport { strict as assert } from \"node:assert\";\n\nimport { render } from \"@testing-library/react\";\nimport globalJsdom from \"global-jsdom\";\nimport * as React from \"react\";\n\nimport {\n\tuseObservation,\n\tuseObservationStrict,\n\tuseObservationWithEffects,\n} from \"../useObservation.js\";\n\n// There is much more coverage of useObservation via useTree tests.\n\ndescribe(\"useObservation\", () => {\n\tdescribe(\"dom tests\", () => {\n\t\tlet cleanup: () => void;\n\n\t\tbefore(() => {\n\t\t\tcleanup = globalJsdom();\n\t\t});\n\n\t\tafter(() => {\n\t\t\tcleanup();\n\t\t});\n\n\t\tconst observationHooks: (typeof useObservation)[] = [\n\t\t\tuseObservation,\n\t\t\tuseObservationStrict,\n\t\t\tuseObservationWithEffects,\n\t\t] as const;\n\n\t\tfor (const useObservationHook of observationHooks) {\n\t\t\t// eslint-disable-next-line @typescript-eslint/ban-types\n\t\t\tdescribe((useObservationHook as Function).name, () => {\n\t\t\t\tfor (const reactStrictMode of [false, true]) {\n\t\t\t\t\t/**\n\t\t\t\t\t * Check then clear the contents of `log`.\n\t\t\t\t\t *\n\t\t\t\t\t * @remarks When in StrictMode, React may double render, so that case is not checked for an exact match.\n\t\t\t\t\t */\n\t\t\t\t\t// eslint-disable-next-line no-inner-declarations\n\t\t\t\t\tfunction checkRenderLog(log: string[], expected: readonly string[]): void {\n\t\t\t\t\t\tif (reactStrictMode) {\n\t\t\t\t\t\t\tassert.deepEqual(new Set(log), new Set(expected));\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tassert.deepEqual(log, expected);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlog.length = 0;\n\t\t\t\t\t}\n\n\t\t\t\t\tdescribe(`StrictMode: ${reactStrictMode}`, () => {\n\t\t\t\t\t\tit(\"useObservation\", async () => {\n\t\t\t\t\t\t\tconst log: string[] = [];\n\n\t\t\t\t\t\t\tconst unsubscribe = (): void => {\n\t\t\t\t\t\t\t\tlog.push(\"unsubscribe\");\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\tfunction TestComponent(): JSX.Element {\n\t\t\t\t\t\t\t\tlog.push(\"render\");\n\t\t\t\t\t\t\t\treturn useObservationHook(\n\t\t\t\t\t\t\t\t\t(invalidate) => {\n\t\t\t\t\t\t\t\t\t\tlog.push(`useObservation`);\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\tresult: (\n\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t// In real usage, this would unsubscribe from any events.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlog.push(\"click\");\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tinvalidate();\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\tInvalidate\n\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\tunsubscribe,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{ onInvalidation: () => log.push(\"invalidated\") },\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst content = <TestComponent />;\n\n\t\t\t\t\t\t\tconst rendered = render(content, { reactStrictMode });\n\t\t\t\t\t\t\tcheckRenderLog(log, [\"render\", \"useObservation\"]);\n\n\t\t\t\t\t\t\trendered.rerender(content);\n\t\t\t\t\t\t\tassertLogEmpty(log);\n\n\t\t\t\t\t\t\tconst button =\n\t\t\t\t\t\t\t\trendered.baseElement.querySelector(\"button\") ??\n\t\t\t\t\t\t\t\tassert.fail(\"button not found\");\n\t\t\t\t\t\t\tbutton.click();\n\n\t\t\t\t\t\t\tcheckRenderLog(log, [\"click\", \"invalidated\"]);\n\n\t\t\t\t\t\t\trendered.rerender(content);\n\n\t\t\t\t\t\t\tcheckRenderLog(log, [\n\t\t\t\t\t\t\t\t\"render\",\n\t\t\t\t\t\t\t\t...(reactStrictMode && useObservationHook !== useObservationWithEffects\n\t\t\t\t\t\t\t\t\t? [\"unsubscribe\"]\n\t\t\t\t\t\t\t\t\t: []),\n\t\t\t\t\t\t\t\t\"useObservation\",\n\t\t\t\t\t\t\t]);\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\t// This requires waiting for finalizers.\n\t\t\t\t\t\t// Forcing two async GCs seems to work robustly, so this is enabled, but if it becomes flakey, it can be tweaked and/or skipped.\n\t\t\t\t\t\tit(`unsubscribe on unmount`, async () => {\n\t\t\t\t\t\t\tassert(global.gc);\n\n\t\t\t\t\t\t\tconst log: string[] = [];\n\n\t\t\t\t\t\t\tconst unsubscribe = (): void => {\n\t\t\t\t\t\t\t\tlog.push(\"unsubscribe\");\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\tfunction TestComponent(this: unknown): JSX.Element {\n\t\t\t\t\t\t\t\treturn useObservationHook((invalidate) => ({\n\t\t\t\t\t\t\t\t\tresult: <br />,\n\t\t\t\t\t\t\t\t\tunsubscribe,\n\t\t\t\t\t\t\t\t}));\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst rendered = render(<TestComponent />, { reactStrictMode });\n\n\t\t\t\t\t\t\tassertLogEmpty(log);\n\t\t\t\t\t\t\trendered.unmount();\n\n\t\t\t\t\t\t\t// Unsubscribe on unmount is done via FinalizationRegistry, so force a GC and wait for it.\n\t\t\t\t\t\t\t// For this to pass on NodeJs experimentally is has been found that this must either do:\n\t\t\t\t\t\t\t// 1. a sync GC then a wait of 8 seconds (but this sometimes fails after multiple runs unless a debugger takes a heap snapshot, possible due to some JIT optimization that breaks it).\n\t\t\t\t\t\t\t// 2. two async GCs in a row.\n\t\t\t\t\t\t\t// Since the second option is both more robust and faster, that is what is used here.\n\t\t\t\t\t\t\tfor (let index = 0; index < 2; index++) {\n\t\t\t\t\t\t\t\tawait global.gc({ type: \"major\", execution: \"async\" });\n\t\t\t\t\t\t\t\tif (log.length > 0) {\n\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tcheckRenderLog(log, [\"unsubscribe\"]);\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\tit(\"invalidate after unmount\", () => {\n\t\t\t\t\t\t\tconst log: string[] = [];\n\n\t\t\t\t\t\t\tlet logUnsubscribe = true;\n\n\t\t\t\t\t\t\tconst unsubscribe = (): void => {\n\t\t\t\t\t\t\t\tif (logUnsubscribe) log.push(\"unsubscribe\");\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\tconst invalidateCallbacks: (() => void)[] = [];\n\n\t\t\t\t\t\t\tfunction TestComponent(): JSX.Element {\n\t\t\t\t\t\t\t\tlog.push(\"render\");\n\t\t\t\t\t\t\t\treturn useObservationHook(\n\t\t\t\t\t\t\t\t\t(invalidate) => {\n\t\t\t\t\t\t\t\t\t\tinvalidateCallbacks.push(invalidate);\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\tresult: <br />,\n\t\t\t\t\t\t\t\t\t\t\tunsubscribe,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{ onInvalidation: () => log.push(\"invalidated\") },\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst rendered = render(<TestComponent />, { reactStrictMode });\n\n\t\t\t\t\t\t\tcheckRenderLog(log, [\"render\"]);\n\n\t\t\t\t\t\t\t// After unmount, unsubscribe could happen at any time due to finalizer,so suppress logging it to prevent the test from possibly becoming flaky.\n\t\t\t\t\t\t\tlogUnsubscribe = false;\n\n\t\t\t\t\t\t\trendered.unmount();\n\n\t\t\t\t\t\t\tassert(invalidateCallbacks.length === (reactStrictMode ? 2 : 1));\n\n\t\t\t\t\t\t\t// Invalidate after unmount.\n\t\t\t\t\t\t\t// Since this can happen in real use, due to unsubscribe delay while waiting for finalizer, ensure it does not cause issues.\n\t\t\t\t\t\t\t// This should be a no-op, but since it does a React SetState after unmount, React could object to it.\n\t\t\t\t\t\t\tfor (const callback of invalidateCallbacks) {\n\t\t\t\t\t\t\t\tcallback();\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t// Confirm the invalidation happened..\n\t\t\t\t\t\t\t// If we didn't suppress unsubscribe logging, and the finalizer had run, this could fail (which is why we suppress it).\n\t\t\t\t\t\t\tcheckRenderLog(log, [\"invalidated\"]);\n\t\t\t\t\t\t});\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t});\n});\n\n/**\n * Assert that an array is empty.\n *\n * @remarks\n * Not inlined because doing so causes TypeScript to infer the array type as never[] afterwards and breaks push.\n * Better than asserting length is 0 as this gets a better error message on failure.\n */\nfunction assertLogEmpty(log: string[]): void {\n\tassert.deepEqual(log, []);\n}\n"]}

package/lib/test/useTree.spec.js

@@ -0,0 +1,165 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import { strict as assert } from "node:assert";
+import { SchemaFactory } from "@fluidframework/tree";
+import { render } from "@testing-library/react";
+import globalJsdom from "global-jsdom";
+import * as React from "react";
+import { toPropTreeNode } from "../propNode.js";
+import { objectIdNumber } from "../simpleIdentifier.js";
+import { usePropTreeNode, withMemoizedTreeObservations, withTreeObservations, } from "../useTree.js";
+describe("useTree", () => {
+    describe("dom tests", () => {
+        let cleanup;
+        before(() => {
+            cleanup = globalJsdom();
+        });
+        after(() => {
+            cleanup();
+        });
+        it("withTreeObservations example", () => {
+            const builder = new SchemaFactory("example");
+            class Item extends builder.object("Item", { text: SchemaFactory.string }) {
+            }
+            const ItemComponentBug = ({ item }) => (React.createElement("span", null, item.text) // Reading `text`, a mutable value from a React prop, causes an invalidation bug.
+            );
+            const ItemComponent = withTreeObservations(({ item }) => React.createElement("span", null, item.text));
+            const ItemParentComponent = ({ item }) => (React.createElement(ItemComponent, { item: item }));
+            const InvalidItemParentComponent = ({ item, }) => (
+            // @ts-expect-error PropTreeNode turns this invalidation bug into a compile error
+            React.createElement("span", null, item.text));
+        });
+        for (const reactStrictMode of [false, true]) {
+            /**
+             * Check then clear, the contents of `log`.
+             *
+             * When in StrictMode, React may double render, so that case is not checked for an exact match.
+             */
+            // eslint-disable-next-line no-inner-declarations
+            function checkRenderLog(log, expected) {
+                if (reactStrictMode) {
+                    assert.deepEqual(new Set(log), new Set(expected));
+                }
+                else {
+                    assert.deepEqual(log, expected);
+                }
+                log.length = 0;
+            }
+            describe(`StrictMode: ${reactStrictMode}`, () => {
+                it("usePropTreeNode", () => {
+                    const builder = new SchemaFactory("tree-react-api");
+                    class Point extends builder.object("Point", {
+                        x: builder.number,
+                        y: builder.number,
+                    }) {
+                    }
+                    const log = [];
+                    function PointComponent(props) {
+                        log.push("render");
+                        const { x, y } = usePropTreeNode(props.node, (node) => {
+                            log.push(`usePropTreeNode`);
+                            return {
+                                x: node.x,
+                                y: node.y,
+                            };
+                        });
+                        return React.createElement("span", null, `x: ${x}, y: ${y}`);
+                    }
+                    function ParentComponent(props) {
+                        log.push("parent");
+                        return React.createElement(PointComponent, { node: props.node });
+                    }
+                    const point = new Point({ x: 1, y: 1 });
+                    const propPoint = toPropTreeNode(point);
+                    const content = React.createElement(ParentComponent, { node: propPoint });
+                    const rendered = render(content, { reactStrictMode });
+                    assert.equal(rendered.baseElement.textContent, "x: 1, y: 1");
+                    checkRenderLog(log, ["parent", "render", "usePropTreeNode"]);
+                    rendered.rerender(content);
+                    assertLogEmpty(log);
+                    point.x = 2;
+                    assertLogEmpty(log);
+                    rendered.rerender(content);
+                    // Parent which passed node down did not rerender, but PointComponent which read from it did:
+                    checkRenderLog(log, ["render", "usePropTreeNode"]);
+                    assert.equal(rendered.baseElement.textContent, "x: 2, y: 1");
+                });
+            });
+            describe("withTreeObservations and array", () => {
+                const builder = new SchemaFactory("tree-react-api");
+                class Item extends builder.object("Item", {
+                    x: SchemaFactory.number,
+                }) {
+                }
+                class Collection extends builder.array("Collection", Item) {
+                }
+                beforeEach(() => {
+                    // Ensure the log starts empty for each test.
+                    log.length = 0;
+                });
+                const log = [];
+                const ItemComponent = withMemoizedTreeObservations((props) => {
+                    log.push(`Item: ${props.item.x}`);
+                    return React.createElement("span", null, `${props.item.x}`);
+                }, { onInvalidation: () => log.push("Item invalidated") });
+                const CollectionComponent = withTreeObservations((props) => {
+                    log.push("Collection");
+                    const items = props.collection.map((item) => (React.createElement(ItemComponent, { key: objectIdNumber(item), item: item })));
+                    return React.createElement("div", null, items);
+                }, { onInvalidation: () => log.push("Collection invalidated") });
+                const ParentComponent = withTreeObservations((props) => {
+                    log.push("Parent");
+                    return React.createElement(CollectionComponent, { collection: props.node });
+                }, { onInvalidation: () => log.push("Parent invalidated") });
+                it("empty", () => {
+                    const collection = new Collection([]);
+                    const content = React.createElement(ParentComponent, { node: collection });
+                    render(content, { reactStrictMode });
+                    checkRenderLog(log, ["Parent", "Collection"]);
+                });
+                // This confirms that modifying an array does not needlessly invalid parents and reuses children (if they use memo)
+                it("array editing: insertion", () => {
+                    const collection = new Collection([{ x: 1 }, { x: 2 }, { x: 3 }]);
+                    const content = React.createElement(ParentComponent, { node: collection });
+                    const rendered = render(content, { reactStrictMode });
+                    checkRenderLog(log, ["Parent", "Collection", "Item: 1", "Item: 2", "Item: 3"]);
+                    collection.insertAtEnd(new Item({ x: 4 }));
+                    checkRenderLog(log, ["Collection invalidated"]);
+                    rendered.rerender(content);
+                    checkRenderLog(log, ["Collection", "Item: 4"]);
+                    assert.equal(rendered.baseElement.textContent, "1234");
+                });
+                // This confirms the same as the above, but testes some harder cases.
+                // For example this one depends on stable keys to reusing children due to indexes changing.
+                it("array editing: general", () => {
+                    const collection = new Collection([{ x: 1 }, { x: 2 }, { x: 3 }]);
+                    const content = React.createElement(ParentComponent, { node: collection });
+                    const rendered = render(content, { reactStrictMode });
+                    checkRenderLog(log, ["Parent", "Collection", "Item: 1", "Item: 2", "Item: 3"]);
+                    collection.moveToEnd(0);
+                    checkRenderLog(log, ["Collection invalidated"]);
+                    rendered.rerender(content);
+                    checkRenderLog(log, ["Collection"]);
+                    collection.removeAt(1);
+                    collection.insertAtStart(new Item({ x: 4 }));
+                    checkRenderLog(log, ["Collection invalidated"]);
+                    rendered.rerender(content);
+                    checkRenderLog(log, ["Collection", "Item: 4"]);
+                    assert.equal(rendered.baseElement.textContent, "421");
+                });
+            });
+        }
+    });
+});
+/**
+ * Assert that an array is empty.
+ *
+ * Not inlined because doing so causes TypeScript to infer the array type as never[] afterwards and breaks push.
+ * Better than asserting length is 0 as this gets a better error message on failure.
+ */
+function assertLogEmpty(log) {
+    assert.deepEqual(log, []);
+}
+//# sourceMappingURL=useTree.spec.js.map