@fluidframework/react 2.90.0-378676 → 2.91.0

package/dist/useTree.js

@@ -1,137 +0,0 @@
-"use strict";
-/*!
- * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
- * Licensed under the MIT License.
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePropTreeRecord = exports.usePropTreeNode = exports.useTreeObservations = exports.withMemoizedTreeObservations = exports.withTreeObservations = exports.useTree = void 0;
-const tree_1 = require("@fluidframework/tree");
-const internal_1 = require("@fluidframework/tree/internal");
-const React = __importStar(require("react"));
-const propNode_js_1 = require("./propNode.js");
-const useObservation_js_1 = require("./useObservation.js");
-/**
- * Custom hook which invalidates a React Component when there is a change in the subtree defined by `subtreeRoot`.
- * This includes changes to the tree's content, but not changes to its parentage.
- * See {@link @fluidframework/tree#TreeChangeEvents.treeChanged} for details.
- * @remarks
- * Consider using {@link useTreeObservations} instead which tracks what was observed and only invalidates if it changes.
- * @alpha
- */
-function useTree(subtreeRoot) {
-    // Use a React effect hook to invalidate this component when the subtreeRoot changes.
-    // We do this by incrementing a counter, which is passed as a dependency to the effect hook.
-    const [invalidations, setInvalidations] = React.useState(0);
-    // React effect hook that increments the 'invalidation' counter whenever subtreeRoot or any of its children change.
-    React.useEffect(() => {
-        // Returns the cleanup function to be invoked when the component unmounts.
-        return tree_1.Tree.on(subtreeRoot, "treeChanged", () => {
-            setInvalidations((i) => i + 1);
-        });
-    }, [invalidations, subtreeRoot]);
-    return invalidations;
-}
-exports.useTree = useTree;
-/**
- * Higher order component which wraps a component to use {@link useTreeObservations}.
- *
- * @remarks
- * When passing TreeNodes in props, care must be taken to not observe their content outside of a context which does observation tracking (or manual invalidation).
- * This wraps a component in such tracking.
- *
- * It is recommended that sub-components which take in TreeNodes, if not defined using this higher order components, take the nodes in as {@link PropTreeNode}s.
- * Components defined using this higher order component can take in either raw TreeNodes or {@link PropTreeNode}s: the latter will be automatically unwrapped.
- * @privateRemarks
- * `React.FC` does not seem to be covariant over its input type, so to make use of this more ergonomic,
- * the return type intersects the various ways this could be used (with or without PropTreeNode wrapping).
- * @alpha
- */
-function withTreeObservations(component, options) {
-    return (props) => useTreeObservations(() => component(props), options);
-}
-exports.withTreeObservations = withTreeObservations;
-/**
- * {@link withTreeObservations} wrapped with React.memo.
- * @remarks
- * There is no special logic here, just a convenience wrapper.
- * @alpha
- */
-function withMemoizedTreeObservations(component, options) {
-    return React.memo(withTreeObservations(component, options), options?.propsAreEqual);
-}
-exports.withMemoizedTreeObservations = withMemoizedTreeObservations;
-/**
- * Custom hook which invalidates a React Component when there is a change in tree content observed during `trackDuring`.
- *
- * @param trackDuring - Called synchronously, and will have its tree observations tracked.
- *
- * @remarks
- * This includes changes to the tree's content.
- * Currently this will throw if observing a node's parentage to be undefined,
- * and node status changes will not cause invalidation.
- *
- * For additional type safety to help avoid observing TreeNode content outside of this hook, see {@link PropTreeNode}.
- * @alpha
- */
-function useTreeObservations(trackDuring, options) {
-    return (0, useObservation_js_1.useObservation)((invalidate) => internal_1.TreeAlpha.trackObservationsOnce(invalidate, trackDuring), options);
-}
-exports.useTreeObservations = useTreeObservations;
-/**
- * Custom hook for using a prop tree node.
- *
- * @param propNode - Input, automatically unwrapped TreeNode from a {@link PropTreeNode} if needed.
- * @param trackDuring - Callback which reads from the node and returns a result.
- * If the result is a TreeNode or {@link NodeRecord} it will be wrapped as a {@link PropTreeNode} or {@link PropTreeNodeRecord}, see {@link WrapNodes}.
- *
- * It is recommended that when returning data containing TreeNodes,
- * use a format supported by {@link WrapNodes} or wrap the nodes manually using {@link toPropTreeNode}.
- * This improves the type safety, reducing the risk of invalidation bugs due to untracked access of tree content contained in the return value.
- *
- * Note that is is fine to observe any node inside the callback, not just the provided node: all accesses will be tracked.
- * The input node is just provided as a way to automatically unwrap the {@link PropTreeNode}
- *
- * @remarks
- * Reads content using {@link useTreeObservations} to track dependencies.
- * @alpha
- */
-function usePropTreeNode(propNode, trackDuring) {
-    const node = (0, propNode_js_1.unwrapPropTreeNode)(propNode);
-    const result = useTreeObservations(() => trackDuring(node));
-    return result;
-}
-exports.usePropTreeNode = usePropTreeNode;
-/**
- * {@link usePropTreeNode} but takes in a {@link PropTreeNodeRecord}.
- * @alpha
- */
-function usePropTreeRecord(props, f) {
-    const record = (0, propNode_js_1.unwrapPropTreeRecord)(props);
-    const result = useTreeObservations(() => f(record));
-    return result;
-}
-exports.usePropTreeRecord = usePropTreeRecord;
-//# sourceMappingURL=useTree.js.map

package/dist/useTree.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTree.js","sourceRoot":"","sources":["../src/useTree.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;;;;;;;;;;;;;;;;;;;;;;;;AAGH,+CAA4C;AAC5C,4DAA0D;AAC1D,6CAA+B;AAE/B,+CAOuB;AACvB,2DAA8E;AAE9E;;;;;;;GAOG;AACH,SAAgB,OAAO,CAAC,WAAqB;IAC5C,qFAAqF;IACrF,4FAA4F;IAC5F,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE5D,mHAAmH;IACnH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,0EAA0E;QAC1E,OAAO,WAAI,CAAC,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,GAAG,EAAE;YAC/C,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjC,OAAO,aAAa,CAAC;AACtB,CAAC;AAdD,0BAcC;AAED;;;;;;;;;;;;;GAaG;AACH,SAAgB,oBAAoB,CACnC,SAAwB,EACxB,OAA4B;IAE5B,OAAO,CAAC,KAA2B,EAAmB,EAAE,CACvD,mBAAmB,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAY,CAAC,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC;AAND,oDAMC;AAED;;;;;GAKG;AACH,SAAgB,4BAA4B,CAC3C,SAAwB,EACxB,OAEC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC;AACrF,CAAC;AAPD,oEAOC;AAED;;;;;;;;;;;;GAYG;AACH,SAAgB,mBAAmB,CAClC,WAA0B,EAC1B,OAA4B;IAE5B,OAAO,IAAA,kCAAc,EACpB,CAAC,UAAU,EAAE,EAAE,CAAC,oBAAS,CAAC,qBAAqB,CAAC,UAAU,EAAE,WAAW,CAAC,EACxE,OAAO,CACP,CAAC;AACH,CAAC;AARD,kDAQC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAgB,eAAe,CAC9B,QAA8B,EAC9B,WAAiC;IAEjC,MAAM,IAAI,GAAM,IAAA,gCAAkB,EAAC,QAAQ,CAAC,CAAC;IAE7C,MAAM,MAAM,GAAG,mBAAmB,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;IAE5D,OAAO,MAA4B,CAAC;AACrC,CAAC;AATD,0CASC;AAED;;;GAGG;AACH,SAAgB,iBAAiB,CAChC,KAAQ,EACR,CAAiD;IAEjD,MAAM,MAAM,GAAG,IAAA,kCAAoB,EAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,MAAM,GAAG,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAEpD,OAAO,MAA4B,CAAC;AACrC,CAAC;AATD,8CASC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport type { TreeLeafValue, TreeNode } from \"@fluidframework/tree\";\nimport { Tree } from \"@fluidframework/tree\";\nimport { TreeAlpha } from \"@fluidframework/tree/internal\";\nimport * as React from \"react\";\n\nimport {\n\tunwrapPropTreeNode,\n\tunwrapPropTreeRecord,\n\ttype PropTreeNodeRecord,\n\ttype PropTreeValue,\n\ttype UnwrapPropTreeNodeRecord,\n\ttype WrapNodes,\n} from \"./propNode.js\";\nimport { useObservation, type ObservationOptions } from \"./useObservation.js\";\n\n/**\n * Custom hook which invalidates a React Component when there is a change in the subtree defined by `subtreeRoot`.\n * This includes changes to the tree's content, but not changes to its parentage.\n * See {@link @fluidframework/tree#TreeChangeEvents.treeChanged} for details.\n * @remarks\n * Consider using {@link useTreeObservations} instead which tracks what was observed and only invalidates if it changes.\n * @alpha\n */\nexport function useTree(subtreeRoot: TreeNode): number {\n\t// Use a React effect hook to invalidate this component when the subtreeRoot changes.\n\t// We do this by incrementing a counter, which is passed as a dependency to the effect hook.\n\tconst [invalidations, setInvalidations] = React.useState(0);\n\n\t// React effect hook that increments the 'invalidation' counter whenever subtreeRoot or any of its children change.\n\tReact.useEffect(() => {\n\t\t// Returns the cleanup function to be invoked when the component unmounts.\n\t\treturn Tree.on(subtreeRoot, \"treeChanged\", () => {\n\t\t\tsetInvalidations((i) => i + 1);\n\t\t});\n\t}, [invalidations, subtreeRoot]);\n\n\treturn invalidations;\n}\n\n/**\n * Higher order component which wraps a component to use {@link useTreeObservations}.\n *\n * @remarks\n * When passing TreeNodes in props, care must be taken to not observe their content outside of a context which does observation tracking (or manual invalidation).\n * This wraps a component in such tracking.\n *\n * It is recommended that sub-components which take in TreeNodes, if not defined using this higher order components, take the nodes in as {@link PropTreeNode}s.\n * Components defined using this higher order component can take in either raw TreeNodes or {@link PropTreeNode}s: the latter will be automatically unwrapped.\n * @privateRemarks\n * `React.FC` does not seem to be covariant over its input type, so to make use of this more ergonomic,\n * the return type intersects the various ways this could be used (with or without PropTreeNode wrapping).\n * @alpha\n */\nexport function withTreeObservations<TIn>(\n\tcomponent: React.FC<TIn>,\n\toptions?: ObservationOptions,\n): React.FC<TIn> & React.FC<WrapNodes<TIn>> & React.FC<TIn | WrapNodes<TIn>> {\n\treturn (props: TIn | WrapNodes<TIn>): React.ReactNode =>\n\t\tuseTreeObservations(() => component(props as TIn), options);\n}\n\n/**\n * {@link withTreeObservations} wrapped with React.memo.\n * @remarks\n * There is no special logic here, just a convenience wrapper.\n * @alpha\n */\nexport function withMemoizedTreeObservations<TIn>(\n\tcomponent: React.FC<TIn>,\n\toptions?: ObservationOptions & {\n\t\treadonly propsAreEqual?: Parameters<typeof React.memo>[1];\n\t},\n): React.MemoExoticComponent<ReturnType<typeof withTreeObservations<TIn>>> {\n\treturn React.memo(withTreeObservations(component, options), options?.propsAreEqual);\n}\n\n/**\n * Custom hook which invalidates a React Component when there is a change in tree content observed during `trackDuring`.\n *\n * @param trackDuring - Called synchronously, and will have its tree observations tracked.\n *\n * @remarks\n * This includes changes to the tree's content.\n * Currently this will throw if observing a node's parentage to be undefined,\n * and node status changes will not cause invalidation.\n *\n * For additional type safety to help avoid observing TreeNode content outside of this hook, see {@link PropTreeNode}.\n * @alpha\n */\nexport function useTreeObservations<TResult>(\n\ttrackDuring: () => TResult,\n\toptions?: ObservationOptions,\n): TResult {\n\treturn useObservation(\n\t\t(invalidate) => TreeAlpha.trackObservationsOnce(invalidate, trackDuring),\n\t\toptions,\n\t);\n}\n\n/**\n * Custom hook for using a prop tree node.\n *\n * @param propNode - Input, automatically unwrapped TreeNode from a {@link PropTreeNode} if needed.\n * @param trackDuring - Callback which reads from the node and returns a result.\n * If the result is a TreeNode or {@link NodeRecord} it will be wrapped as a {@link PropTreeNode} or {@link PropTreeNodeRecord}, see {@link WrapNodes}.\n *\n * It is recommended that when returning data containing TreeNodes,\n * use a format supported by {@link WrapNodes} or wrap the nodes manually using {@link toPropTreeNode}.\n * This improves the type safety, reducing the risk of invalidation bugs due to untracked access of tree content contained in the return value.\n *\n * Note that is is fine to observe any node inside the callback, not just the provided node: all accesses will be tracked.\n * The input node is just provided as a way to automatically unwrap the {@link PropTreeNode}\n *\n * @remarks\n * Reads content using {@link useTreeObservations} to track dependencies.\n * @alpha\n */\nexport function usePropTreeNode<T extends TreeNode | TreeLeafValue, TResult>(\n\tpropNode: PropTreeValue<T> | T,\n\ttrackDuring: (node: T) => TResult,\n): WrapNodes<TResult> {\n\tconst node: T = unwrapPropTreeNode(propNode);\n\n\tconst result = useTreeObservations(() => trackDuring(node));\n\n\treturn result as WrapNodes<TResult>;\n}\n\n/**\n * {@link usePropTreeNode} but takes in a {@link PropTreeNodeRecord}.\n * @alpha\n */\nexport function usePropTreeRecord<const T extends PropTreeNodeRecord, TResult>(\n\tprops: T,\n\tf: (node: UnwrapPropTreeNodeRecord<T>) => TResult,\n): WrapNodes<TResult> {\n\tconst record = unwrapPropTreeRecord(props);\n\n\tconst result = useTreeObservations(() => f(record));\n\n\treturn result as WrapNodes<TResult>;\n}\n"]}

package/tsconfig.cjs.json

@@ -1,7 +0,0 @@
-{
-	// This config must be used in a "type": "commonjs" environment. (Use `fluid-tsc commonjs`.)
-	"extends": "./tsconfig.json",
-	"compilerOptions": {
-		"outDir": "./dist",
-	},
-}