@fluidframework/react 2.62.0 → 2.63.0-359286

package/dist/reactSharedTreeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"reactSharedTreeView.js","sourceRoot":"","sources":["../src/reactSharedTreeView.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 {\n\tPureDataObjectFactory,\n\tTreeDataObject,\n\tcreateDataObjectKind,\n} from \"@fluidframework/aqueduct/internal\";\nimport type { IFluidLoadable } from \"@fluidframework/core-interfaces\";\nimport type { IFluidDataStoreFactory } from \"@fluidframework/runtime-definitions/internal\";\nimport type { SharedObjectKind } from \"@fluidframework/shared-object-base\";\nimport type {\n\tSchemaCompatibilityStatus,\n\tTreeViewConfiguration,\n\tTreeFieldFromImplicitField,\n\tTreeView,\n\tImplicitFieldSchema,\n\tInsertableTreeFieldFromImplicitField,\n} from \"@fluidframework/tree\";\nimport { configuredSharedTree, FormatValidatorBasic } from \"@fluidframework/tree/internal\";\nimport * as React from \"react\";\n\nimport { toPropTreeNode, type PropTreeValue } from \"./propNode.js\";\n\n/**\n * Opt into extra validation to detect encoding bugs and data corruption.\n * As long as this is an experimental package, opting into extra validation (at a small perf and bundle size cost) seems reasonable.\n */\nconst SharedTree = configuredSharedTree({\n\tjsonValidator: FormatValidatorBasic,\n});\n\n/**\n * Defines a DataObject for a {@link @fluidframework/tree#SharedTree} with a built in {@link @fluidframework/tree#TreeViewConfiguration}.\n * @param treeConfiguration - See {@link IReactTreeDataObject.config}.\n * @param createInitialTree - Function which populates the tree with initial data on document create.\n * @returns A {@link @fluidframework/fluid-static#DataObjectClass} to allow easy use of a SharedTree in a ContainerSchema.\n * @alpha\n */\nexport function treeDataObject<TSchema extends ImplicitFieldSchema>(\n\ttreeConfiguration: TreeViewConfiguration<TSchema>,\n\tcreateInitialTree: () => InsertableTreeFieldFromImplicitField<TSchema>,\n): SharedObjectKind<IReactTreeDataObject<TSchema> & IFluidLoadable> {\n\treturn treeDataObjectInternal(treeConfiguration, createInitialTree);\n}\n\n/**\n * Defines a DataObject for a {@link @fluidframework/tree#SharedTree} with a built in {@link @fluidframework/tree#TreeViewConfiguration}.\n * @param treeConfiguration - See {@link IReactTreeDataObject.config}.\n * @param createInitialTree - Function which populates the tree with initial data on document create.\n * @returns A {@link @fluidframework/fluid-static#DataObjectClass} to allow easy use of a SharedTree in a ContainerSchema.\n * @internal\n */\nexport function treeDataObjectInternal<TSchema extends ImplicitFieldSchema>(\n\ttreeConfiguration: TreeViewConfiguration<TSchema>,\n\tcreateInitialTree: () => InsertableTreeFieldFromImplicitField<TSchema>,\n): SharedObjectKind<IReactTreeDataObject<TSchema> & IFluidLoadable & TreeDataObject> & {\n\treadonly factory: IFluidDataStoreFactory;\n} {\n\tclass SchemaAwareTreeDataObject extends ReactTreeDataObject<TSchema> {\n\t\tpublic override readonly config = treeConfiguration;\n\n\t\tpublic static readonly factory = new PureDataObjectFactory<ReactTreeDataObject<TSchema>>(\n\t\t\t`TreeDataObject`,\n\t\t\tSchemaAwareTreeDataObject,\n\t\t\t[SharedTree.getFactory()],\n\t\t\t{},\n\t\t);\n\n\t\t#treeView: TreeView<TSchema> | undefined;\n\n\t\t/**\n\t\t * The schema-aware view of the tree.\n\t\t */\n\t\tpublic get treeView(): TreeView<TSchema> {\n\t\t\tif (this.#treeView === undefined) {\n\t\t\t\tthrow new Error(\"treeView has not been initialized.\");\n\t\t\t}\n\t\t\treturn this.#treeView;\n\t\t}\n\n\t\t/**\n\t\t * Converts the underlying ITree into a typed TreeView using the provided schema configuration.\n\t\t *\n\t\t * @param tree - The ITree instance to view.\n\t\t * @returns A typed TreeView using the TodoList schema.\n\t\t */\n\t\tprivate initializeView(): void {\n\t\t\tthis.#treeView = this.tree.viewWith(this.config);\n\t\t}\n\n\t\tprotected override async initializingFirstTime(): Promise<void> {\n\t\t\tthis.initializeView();\n\t\t\tthis.treeView.initialize(createInitialTree());\n\t\t}\n\n\t\tprotected override async initializingFromExisting(): Promise<void> {\n\t\t\tthis.initializeView();\n\t\t}\n\t}\n\treturn createDataObjectKind(SchemaAwareTreeDataObject);\n}\n\n/**\n * A schema-aware tree-backed DataObject, extended with a React Component to view the tree.\n * @remarks Allows for the Tree's schema to be baked into the container schema.\n * @sealed @alpha\n */\nexport interface IReactTreeDataObject<TSchema extends ImplicitFieldSchema> {\n\t/**\n\t * The configuration used to initialize new documents, as well as to interpret (schematize) existing ones.\n\t *\n\t * @remarks\n\t * The fact that a single view schema is provided here (on the data object) makes it impossible to try and apply multiple different schema.\n\t * Since the view schema currently does not provide any adapters for handling differences between view and stored schema,\n\t * it's also impossible for this single view schema to handle multiple different stored schema.\n\t * Therefore, with this current API, two different applications (or different versions of the same application)\n\t * with differing stored schema requirements (as implied by their view schema) can not collaborate on the same tree.\n\t * The only schema evolution that's currently possible is upgrading the schema to one that supports a superset of what the old schema allowed,\n\t * and collaborating between clients which have view schema that exactly correspond to that stored schema.\n\t * Future work on tree as well as these utilities should address this limitation.\n\t */\n\treadonly config: TreeViewConfiguration<TSchema>;\n\n\t/**\n\t * The schema-aware view of the tree.\n\t */\n\treadonly treeView: TreeView<TSchema>;\n\n\t/**\n\t * React component which handles schematizing trees.\n\t * This includes displaying errors when the document can not be viewed using the view schema.\n\t *\n\t * @privateRemarks\n\t * This is exposed as a member rather than a free function since type inference for the schema doesn't work when used as a free function,\n\t * and thus making it a member avoids the user of this from having to explicitly provide the type parameter.\n\t * This is an arrow function not a method so it gets the correct this when not called as a member.\n\t */\n\treadonly TreeViewComponent: (props: TreeViewProps<TSchema>) => React.JSX.Element;\n}\n\n/**\n * React props for viewing a tree.\n * @input @alpha\n */\nexport interface TreeViewProps<TSchema extends ImplicitFieldSchema> {\n\t/**\n\t * Component to display the tree content.\n\t */\n\treadonly viewComponent: React.FC<{\n\t\troot: PropTreeValue<TreeFieldFromImplicitField<TSchema>>;\n\t}>;\n\n\t/**\n\t * Component to display instead of the {@link TreeViewProps.viewComponent}\n\t * when tree content is not compatible with the {@link @fluidframework/tree#TreeViewConfiguration}.\n\t *\n\t * @defaultValue Component which describes the situation (in English) and allows the user to upgrade the schema to match the {@link @fluidframework/tree#TreeViewConfiguration} if possible.\n\t */\n\treadonly errorComponent?: React.FC<SchemaIncompatibleProps>;\n\n\t// TODO: Once its possible to query the status of individual schema upgrades, provide more options here for handling such cases.\n}\n\n/**\n * Generic DataObject for shared trees.\n * @internal\n */\nexport abstract class ReactTreeDataObject<\n\t\tTSchema extends ImplicitFieldSchema = ImplicitFieldSchema,\n\t>\n\textends TreeDataObject\n\timplements IReactTreeDataObject<TSchema>\n{\n\tpublic abstract readonly config: TreeViewConfiguration<TSchema>;\n\n\t#treeView: TreeView<TSchema> | undefined;\n\n\t/**\n\t * The schema-aware view of the tree.\n\t */\n\tpublic get treeView(): TreeView<TSchema> {\n\t\tif (this.#treeView === undefined) {\n\t\t\tthrow new Error(\"treeView has not been initialized.\");\n\t\t}\n\t\treturn this.#treeView;\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\n\tpublic readonly TreeViewComponent = ({\n\t\tviewComponent,\n\t\terrorComponent,\n\t}: TreeViewProps<TSchema>) =>\n\t\tTreeViewComponent<TSchema>({\n\t\t\ttree: this,\n\t\t\tviewComponent,\n\t\t\terrorComponent,\n\t\t});\n}\n\nfunction useViewCompatibility<TSchema extends ImplicitFieldSchema>(\n\tview: TreeView<TSchema>,\n): SchemaCompatibilityStatus {\n\tconst [compatibility, setCompatibility] = React.useState<SchemaCompatibilityStatus>(\n\t\tview.compatibility,\n\t);\n\n\tReact.useEffect(() => {\n\t\tconst updateCompatibility = (): void => {\n\t\t\tsetCompatibility(view.compatibility);\n\t\t};\n\n\t\tupdateCompatibility();\n\t\treturn view.events.on(\"schemaChanged\", updateCompatibility);\n\t}, [view]);\n\n\treturn compatibility;\n}\n\nfunction useViewRoot<TSchema extends ImplicitFieldSchema>(\n\tview: TreeView<TSchema>,\n): TreeFieldFromImplicitField<TSchema> | undefined {\n\tconst [root, setRoot] = React.useState<TreeFieldFromImplicitField<TSchema> | undefined>(\n\t\tundefined,\n\t);\n\n\tReact.useEffect(() => {\n\t\tconst updateRoot = (): void => {\n\t\t\tif (view.compatibility.canView) {\n\t\t\t\tsetRoot(view.root);\n\t\t\t} else {\n\t\t\t\tsetRoot(undefined);\n\t\t\t}\n\t\t};\n\n\t\tupdateRoot();\n\t\treturn view.events.on(\"rootChanged\", updateRoot);\n\t}, [view]);\n\n\treturn root;\n}\n\n/**\n * React component which handles schematizing trees.\n * This includes displaying errors when the document can not be schematized.\n * @alpha\n */\nexport function TreeViewComponent<TSchema extends ImplicitFieldSchema>({\n\ttree,\n\tviewComponent: ViewComponent,\n\terrorComponent,\n}: TreeViewProps<TSchema> & {\n\ttree: Pick<IReactTreeDataObject<TSchema>, \"treeView\">;\n}): React.JSX.Element {\n\tconst view = tree.treeView;\n\n\tconst compatibility = useViewCompatibility(view);\n\tconst root = useViewRoot(view);\n\tconst upgradeSchema = React.useCallback((): void => view.upgradeSchema(), [view]);\n\n\t// Note: this policy is on the stricter side and ensures that clients will only be able to submit edits when their view schema\n\t// supports exactly the same documents as the stored schema.\n\t// A realistic production application using this strategy would need to take steps to attempt to open the document using\n\t// several different view schemas in order to ensure that their users don't temporarily lose access to documents while\n\t// code rollout is in progress.\n\t// Alternative policies can be implemented, see \"Schema Evolvability\" in SharedTree's README for more information.\n\tif (!compatibility.isEquivalent) {\n\t\tconst Error = errorComponent ?? TreeErrorComponent;\n\t\treturn <Error compatibility={compatibility} upgradeSchema={upgradeSchema} />;\n\t}\n\n\tif (root === undefined) {\n\t\treturn <div>View not set</div>;\n\t}\n\n\treturn <ViewComponent root={toPropTreeNode(root)} />;\n}\n\n/**\n * React Props for displaying when the opened document is incompatible with the required view schema.\n * @alpha\n */\nexport interface SchemaIncompatibleProps {\n\t/**\n\t * Information about the view schema's compatibility with the stored schema.\n\t */\n\treadonly compatibility: SchemaCompatibilityStatus;\n\t/**\n\t * Callback to request that the stored schema in the document be upgraded.\n\t */\n\treadonly upgradeSchema: () => void;\n}\n\n/**\n * React component which displays schema errors and allows upgrading schema when possible.\n */\nfunction TreeErrorComponent({\n\tcompatibility,\n\tupgradeSchema,\n}: {\n\tcompatibility: SchemaCompatibilityStatus;\n\tupgradeSchema: () => void;\n}): React.JSX.Element {\n\t// eslint-disable-next-line unicorn/prefer-ternary\n\tif (compatibility.canUpgrade) {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<div>\n\t\t\t\t\tDocument is incompatible with current version of the application, but the document\n\t\t\t\t\tformat can be updated. This may prevent other versions of the application from\n\t\t\t\t\topening this document.\n\t\t\t\t</div>\n\t\t\t\t<button onClick={upgradeSchema}>Upgrade</button>;\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\tDocument is incompatible with current version of the application, and the document\n\t\t\t\tformat cannot be updated. The document is likely from a newer or otherwise incompatible\n\t\t\t\tversion of the application, or a different application.\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"reactSharedTreeView.js","sourceRoot":"","sources":["../src/reactSharedTreeView.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 {\n\tPureDataObjectFactory,\n\tTreeDataObject,\n\tcreateDataObjectKind,\n} from \"@fluidframework/aqueduct/internal\";\nimport type { IFluidLoadable } from \"@fluidframework/core-interfaces\";\nimport type { IFluidDataStoreFactory } from \"@fluidframework/runtime-definitions/internal\";\nimport type { SharedObjectKind } from \"@fluidframework/shared-object-base\";\nimport type {\n\tSchemaCompatibilityStatus,\n\tTreeViewConfiguration,\n\tTreeFieldFromImplicitField,\n\tTreeView,\n\tImplicitFieldSchema,\n\tInsertableTreeFieldFromImplicitField,\n} from \"@fluidframework/tree\";\nimport { configuredSharedTree, FormatValidatorBasic } from \"@fluidframework/tree/internal\";\nimport * as React from \"react\";\n\nimport { toPropTreeNode, type PropTreeValue } from \"./propNode.js\";\n\n/**\n * Opt into extra validation to detect encoding bugs and data corruption.\n * As long as this is an experimental package, opting into extra validation (at a small perf and bundle size cost) seems reasonable.\n */\nconst SharedTree = configuredSharedTree({\n\tjsonValidator: FormatValidatorBasic,\n});\n\n/**\n * Defines a DataObject for a {@link @fluidframework/tree#SharedTree} with a built in {@link @fluidframework/tree#TreeViewConfiguration}.\n * @param treeConfiguration - See {@link IReactTreeDataObject.config}.\n * @param createInitialTree - Function which populates the tree with initial data on document create.\n * @returns A {@link @fluidframework/fluid-static#DataObjectClass} to allow easy use of a SharedTree in a ContainerSchema.\n * @alpha\n */\nexport function treeDataObject<TSchema extends ImplicitFieldSchema>(\n\ttreeConfiguration: TreeViewConfiguration<TSchema>,\n\tcreateInitialTree: () => InsertableTreeFieldFromImplicitField<TSchema>,\n): SharedObjectKind<IReactTreeDataObject<TSchema> & IFluidLoadable> {\n\treturn treeDataObjectInternal(treeConfiguration, createInitialTree);\n}\n\n/**\n * Defines a DataObject for a {@link @fluidframework/tree#SharedTree} with a built in {@link @fluidframework/tree#TreeViewConfiguration}.\n * @param treeConfiguration - See {@link IReactTreeDataObject.config}.\n * @param createInitialTree - Function which populates the tree with initial data on document create.\n * @returns A {@link @fluidframework/fluid-static#DataObjectClass} to allow easy use of a SharedTree in a ContainerSchema.\n * @internal\n */\nexport function treeDataObjectInternal<TSchema extends ImplicitFieldSchema>(\n\ttreeConfiguration: TreeViewConfiguration<TSchema>,\n\tcreateInitialTree: () => InsertableTreeFieldFromImplicitField<TSchema>,\n): SharedObjectKind<IReactTreeDataObject<TSchema> & IFluidLoadable & TreeDataObject> & {\n\treadonly factory: IFluidDataStoreFactory;\n} {\n\tclass SchemaAwareTreeDataObject extends ReactTreeDataObject<TSchema> {\n\t\tpublic override readonly config = treeConfiguration;\n\n\t\tpublic static readonly factory = new PureDataObjectFactory<ReactTreeDataObject<TSchema>>(\n\t\t\t`TreeDataObject`,\n\t\t\tSchemaAwareTreeDataObject,\n\t\t\t[SharedTree.getFactory()],\n\t\t\t{},\n\t\t);\n\n\t\t#treeView: TreeView<TSchema> | undefined;\n\n\t\t/**\n\t\t * The schema-aware view of the tree.\n\t\t */\n\t\tpublic get treeView(): TreeView<TSchema> {\n\t\t\tif (this.#treeView === undefined) {\n\t\t\t\tthrow new Error(\"treeView has not been initialized.\");\n\t\t\t}\n\t\t\treturn this.#treeView;\n\t\t}\n\n\t\t/**\n\t\t * Converts the underlying ITree into a typed TreeView using the provided schema configuration.\n\t\t *\n\t\t * @param tree - The ITree instance to view.\n\t\t * @returns A typed TreeView using the TodoList schema.\n\t\t */\n\t\tprivate initializeView(): void {\n\t\t\tthis.#treeView = this.tree.viewWith(this.config);\n\t\t}\n\n\t\tprotected override async initializingFirstTime(): Promise<void> {\n\t\t\tthis.initializeView();\n\t\t\tthis.treeView.initialize(createInitialTree());\n\t\t}\n\n\t\tprotected override async initializingFromExisting(): Promise<void> {\n\t\t\tthis.initializeView();\n\t\t}\n\t}\n\treturn createDataObjectKind(SchemaAwareTreeDataObject);\n}\n\n/**\n * A schema-aware tree-backed DataObject, extended with a React Component to view the tree.\n * @remarks Allows for the Tree's schema to be baked into the container schema.\n * @sealed @alpha\n */\nexport interface IReactTreeDataObject<TSchema extends ImplicitFieldSchema> {\n\t/**\n\t * The configuration used to initialize new documents, as well as to interpret (schematize) existing ones.\n\t *\n\t * @remarks\n\t * The fact that a single view schema is provided here (on the data object) makes it impossible to try and apply multiple different schema.\n\t * Since the view schema currently does not provide any adapters for handling differences between view and stored schema,\n\t * it's also impossible for this single view schema to handle multiple different stored schema.\n\t * Therefore, with this current API, two different applications (or different versions of the same application)\n\t * with differing stored schema requirements (as implied by their view schema) can not collaborate on the same tree.\n\t * The only schema evolution that's currently possible is upgrading the schema to one that supports a superset of what the old schema allowed,\n\t * and collaborating between clients which have view schema that exactly correspond to that stored schema.\n\t * Future work on tree as well as these utilities should address this limitation.\n\t */\n\treadonly config: TreeViewConfiguration<TSchema>;\n\n\t/**\n\t * The schema-aware view of the tree.\n\t */\n\treadonly treeView: TreeView<TSchema>;\n\n\t/**\n\t * React component which handles schematizing trees.\n\t * This includes displaying errors when the document can not be viewed using the view schema.\n\t *\n\t * @privateRemarks\n\t * This is exposed as a member rather than a free function since type inference for the schema doesn't work when used as a free function,\n\t * and thus making it a member avoids the user of this from having to explicitly provide the type parameter.\n\t * This is an arrow function not a method so it gets the correct this when not called as a member.\n\t */\n\treadonly TreeViewComponent: (props: TreeViewProps<TSchema>) => React.JSX.Element;\n}\n\n/**\n * React props for viewing a tree.\n * @input @alpha\n */\nexport interface TreeViewProps<TSchema extends ImplicitFieldSchema> {\n\t/**\n\t * Component to display the tree content.\n\t */\n\treadonly viewComponent: React.FC<{\n\t\troot: PropTreeValue<TreeFieldFromImplicitField<TSchema>>;\n\t}>;\n\n\t/**\n\t * Component to display instead of the {@link TreeViewProps.viewComponent}\n\t * when tree content is not compatible with the {@link @fluidframework/tree#TreeViewConfiguration}.\n\t *\n\t * @defaultValue Component which describes the situation (in English) and allows the user to upgrade the schema to match the {@link @fluidframework/tree#TreeViewConfiguration} if possible.\n\t */\n\treadonly errorComponent?: React.FC<SchemaIncompatibleProps>;\n\n\t// TODO: Once its possible to query the status of individual schema upgrades, provide more options here for handling such cases.\n}\n\n/**\n * Generic DataObject for shared trees.\n * @internal\n */\nexport abstract class ReactTreeDataObject<\n\t\tTSchema extends ImplicitFieldSchema = ImplicitFieldSchema,\n\t>\n\textends TreeDataObject\n\timplements IReactTreeDataObject<TSchema>\n{\n\tpublic abstract readonly config: TreeViewConfiguration<TSchema>;\n\n\treadonly #treeView: TreeView<TSchema> | undefined;\n\n\t/**\n\t * The schema-aware view of the tree.\n\t */\n\tpublic get treeView(): TreeView<TSchema> {\n\t\tif (this.#treeView === undefined) {\n\t\t\tthrow new Error(\"treeView has not been initialized.\");\n\t\t}\n\t\treturn this.#treeView;\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\n\tpublic readonly TreeViewComponent = ({\n\t\tviewComponent,\n\t\terrorComponent,\n\t}: TreeViewProps<TSchema>) =>\n\t\tTreeViewComponent<TSchema>({\n\t\t\ttree: this,\n\t\t\tviewComponent,\n\t\t\terrorComponent,\n\t\t});\n}\n\nfunction useViewCompatibility<TSchema extends ImplicitFieldSchema>(\n\tview: TreeView<TSchema>,\n): SchemaCompatibilityStatus {\n\tconst [compatibility, setCompatibility] = React.useState<SchemaCompatibilityStatus>(\n\t\tview.compatibility,\n\t);\n\n\tReact.useEffect(() => {\n\t\tconst updateCompatibility = (): void => {\n\t\t\tsetCompatibility(view.compatibility);\n\t\t};\n\n\t\tupdateCompatibility();\n\t\treturn view.events.on(\"schemaChanged\", updateCompatibility);\n\t}, [view]);\n\n\treturn compatibility;\n}\n\nfunction useViewRoot<TSchema extends ImplicitFieldSchema>(\n\tview: TreeView<TSchema>,\n): TreeFieldFromImplicitField<TSchema> | undefined {\n\tconst [root, setRoot] = React.useState<TreeFieldFromImplicitField<TSchema> | undefined>(\n\t\tundefined,\n\t);\n\n\tReact.useEffect(() => {\n\t\tconst updateRoot = (): void => {\n\t\t\tif (view.compatibility.canView) {\n\t\t\t\tsetRoot(view.root);\n\t\t\t} else {\n\t\t\t\tsetRoot(undefined);\n\t\t\t}\n\t\t};\n\n\t\tupdateRoot();\n\t\treturn view.events.on(\"rootChanged\", updateRoot);\n\t}, [view]);\n\n\treturn root;\n}\n\n/**\n * React component which handles schematizing trees.\n * This includes displaying errors when the document can not be schematized.\n * @alpha\n */\nexport function TreeViewComponent<TSchema extends ImplicitFieldSchema>({\n\ttree,\n\tviewComponent: ViewComponent,\n\terrorComponent,\n}: TreeViewProps<TSchema> & {\n\ttree: Pick<IReactTreeDataObject<TSchema>, \"treeView\">;\n}): React.JSX.Element {\n\tconst view = tree.treeView;\n\n\tconst compatibility = useViewCompatibility(view);\n\tconst root = useViewRoot(view);\n\tconst upgradeSchema = React.useCallback((): void => view.upgradeSchema(), [view]);\n\n\t// Note: this policy is on the stricter side and ensures that clients will only be able to submit edits when their view schema\n\t// supports exactly the same documents as the stored schema.\n\t// A realistic production application using this strategy would need to take steps to attempt to open the document using\n\t// several different view schemas in order to ensure that their users don't temporarily lose access to documents while\n\t// code rollout is in progress.\n\t// Alternative policies can be implemented, see \"Schema Evolvability\" in SharedTree's README for more information.\n\tif (!compatibility.isEquivalent) {\n\t\tconst Error = errorComponent ?? TreeErrorComponent;\n\t\treturn <Error compatibility={compatibility} upgradeSchema={upgradeSchema} />;\n\t}\n\n\tif (root === undefined) {\n\t\treturn <div>View not set</div>;\n\t}\n\n\treturn <ViewComponent root={toPropTreeNode(root)} />;\n}\n\n/**\n * React Props for displaying when the opened document is incompatible with the required view schema.\n * @alpha\n */\nexport interface SchemaIncompatibleProps {\n\t/**\n\t * Information about the view schema's compatibility with the stored schema.\n\t */\n\treadonly compatibility: SchemaCompatibilityStatus;\n\t/**\n\t * Callback to request that the stored schema in the document be upgraded.\n\t */\n\treadonly upgradeSchema: () => void;\n}\n\n/**\n * React component which displays schema errors and allows upgrading schema when possible.\n */\nfunction TreeErrorComponent({\n\tcompatibility,\n\tupgradeSchema,\n}: {\n\tcompatibility: SchemaCompatibilityStatus;\n\tupgradeSchema: () => void;\n}): React.JSX.Element {\n\t// eslint-disable-next-line unicorn/prefer-ternary\n\tif (compatibility.canUpgrade) {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<div>\n\t\t\t\t\tDocument is incompatible with current version of the application, but the document\n\t\t\t\t\tformat can be updated. This may prevent other versions of the application from\n\t\t\t\t\topening this document.\n\t\t\t\t</div>\n\t\t\t\t<button onClick={upgradeSchema}>Upgrade</button>;\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\tDocument is incompatible with current version of the application, and the document\n\t\t\t\tformat cannot be updated. The document is likely from a newer or otherwise incompatible\n\t\t\t\tversion of the application, or a different application.\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/lib/reactSharedTreeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"reactSharedTreeView.js","sourceRoot":"","sources":["../src/reactSharedTreeView.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 {\n\tPureDataObjectFactory,\n\tTreeDataObject,\n\tcreateDataObjectKind,\n} from \"@fluidframework/aqueduct/internal\";\nimport type { IFluidLoadable } from \"@fluidframework/core-interfaces\";\nimport type { IFluidDataStoreFactory } from \"@fluidframework/runtime-definitions/internal\";\nimport type { SharedObjectKind } from \"@fluidframework/shared-object-base\";\nimport type {\n\tSchemaCompatibilityStatus,\n\tTreeViewConfiguration,\n\tTreeFieldFromImplicitField,\n\tTreeView,\n\tImplicitFieldSchema,\n\tInsertableTreeFieldFromImplicitField,\n} from \"@fluidframework/tree\";\nimport { configuredSharedTree, FormatValidatorBasic } from \"@fluidframework/tree/internal\";\nimport * as React from \"react\";\n\nimport { toPropTreeNode, type PropTreeValue } from \"./propNode.js\";\n\n/**\n * Opt into extra validation to detect encoding bugs and data corruption.\n * As long as this is an experimental package, opting into extra validation (at a small perf and bundle size cost) seems reasonable.\n */\nconst SharedTree = configuredSharedTree({\n\tjsonValidator: FormatValidatorBasic,\n});\n\n/**\n * Defines a DataObject for a {@link @fluidframework/tree#SharedTree} with a built in {@link @fluidframework/tree#TreeViewConfiguration}.\n * @param treeConfiguration - See {@link IReactTreeDataObject.config}.\n * @param createInitialTree - Function which populates the tree with initial data on document create.\n * @returns A {@link @fluidframework/fluid-static#DataObjectClass} to allow easy use of a SharedTree in a ContainerSchema.\n * @alpha\n */\nexport function treeDataObject<TSchema extends ImplicitFieldSchema>(\n\ttreeConfiguration: TreeViewConfiguration<TSchema>,\n\tcreateInitialTree: () => InsertableTreeFieldFromImplicitField<TSchema>,\n): SharedObjectKind<IReactTreeDataObject<TSchema> & IFluidLoadable> {\n\treturn treeDataObjectInternal(treeConfiguration, createInitialTree);\n}\n\n/**\n * Defines a DataObject for a {@link @fluidframework/tree#SharedTree} with a built in {@link @fluidframework/tree#TreeViewConfiguration}.\n * @param treeConfiguration - See {@link IReactTreeDataObject.config}.\n * @param createInitialTree - Function which populates the tree with initial data on document create.\n * @returns A {@link @fluidframework/fluid-static#DataObjectClass} to allow easy use of a SharedTree in a ContainerSchema.\n * @internal\n */\nexport function treeDataObjectInternal<TSchema extends ImplicitFieldSchema>(\n\ttreeConfiguration: TreeViewConfiguration<TSchema>,\n\tcreateInitialTree: () => InsertableTreeFieldFromImplicitField<TSchema>,\n): SharedObjectKind<IReactTreeDataObject<TSchema> & IFluidLoadable & TreeDataObject> & {\n\treadonly factory: IFluidDataStoreFactory;\n} {\n\tclass SchemaAwareTreeDataObject extends ReactTreeDataObject<TSchema> {\n\t\tpublic override readonly config = treeConfiguration;\n\n\t\tpublic static readonly factory = new PureDataObjectFactory<ReactTreeDataObject<TSchema>>(\n\t\t\t`TreeDataObject`,\n\t\t\tSchemaAwareTreeDataObject,\n\t\t\t[SharedTree.getFactory()],\n\t\t\t{},\n\t\t);\n\n\t\t#treeView: TreeView<TSchema> | undefined;\n\n\t\t/**\n\t\t * The schema-aware view of the tree.\n\t\t */\n\t\tpublic get treeView(): TreeView<TSchema> {\n\t\t\tif (this.#treeView === undefined) {\n\t\t\t\tthrow new Error(\"treeView has not been initialized.\");\n\t\t\t}\n\t\t\treturn this.#treeView;\n\t\t}\n\n\t\t/**\n\t\t * Converts the underlying ITree into a typed TreeView using the provided schema configuration.\n\t\t *\n\t\t * @param tree - The ITree instance to view.\n\t\t * @returns A typed TreeView using the TodoList schema.\n\t\t */\n\t\tprivate initializeView(): void {\n\t\t\tthis.#treeView = this.tree.viewWith(this.config);\n\t\t}\n\n\t\tprotected override async initializingFirstTime(): Promise<void> {\n\t\t\tthis.initializeView();\n\t\t\tthis.treeView.initialize(createInitialTree());\n\t\t}\n\n\t\tprotected override async initializingFromExisting(): Promise<void> {\n\t\t\tthis.initializeView();\n\t\t}\n\t}\n\treturn createDataObjectKind(SchemaAwareTreeDataObject);\n}\n\n/**\n * A schema-aware tree-backed DataObject, extended with a React Component to view the tree.\n * @remarks Allows for the Tree's schema to be baked into the container schema.\n * @sealed @alpha\n */\nexport interface IReactTreeDataObject<TSchema extends ImplicitFieldSchema> {\n\t/**\n\t * The configuration used to initialize new documents, as well as to interpret (schematize) existing ones.\n\t *\n\t * @remarks\n\t * The fact that a single view schema is provided here (on the data object) makes it impossible to try and apply multiple different schema.\n\t * Since the view schema currently does not provide any adapters for handling differences between view and stored schema,\n\t * it's also impossible for this single view schema to handle multiple different stored schema.\n\t * Therefore, with this current API, two different applications (or different versions of the same application)\n\t * with differing stored schema requirements (as implied by their view schema) can not collaborate on the same tree.\n\t * The only schema evolution that's currently possible is upgrading the schema to one that supports a superset of what the old schema allowed,\n\t * and collaborating between clients which have view schema that exactly correspond to that stored schema.\n\t * Future work on tree as well as these utilities should address this limitation.\n\t */\n\treadonly config: TreeViewConfiguration<TSchema>;\n\n\t/**\n\t * The schema-aware view of the tree.\n\t */\n\treadonly treeView: TreeView<TSchema>;\n\n\t/**\n\t * React component which handles schematizing trees.\n\t * This includes displaying errors when the document can not be viewed using the view schema.\n\t *\n\t * @privateRemarks\n\t * This is exposed as a member rather than a free function since type inference for the schema doesn't work when used as a free function,\n\t * and thus making it a member avoids the user of this from having to explicitly provide the type parameter.\n\t * This is an arrow function not a method so it gets the correct this when not called as a member.\n\t */\n\treadonly TreeViewComponent: (props: TreeViewProps<TSchema>) => React.JSX.Element;\n}\n\n/**\n * React props for viewing a tree.\n * @input @alpha\n */\nexport interface TreeViewProps<TSchema extends ImplicitFieldSchema> {\n\t/**\n\t * Component to display the tree content.\n\t */\n\treadonly viewComponent: React.FC<{\n\t\troot: PropTreeValue<TreeFieldFromImplicitField<TSchema>>;\n\t}>;\n\n\t/**\n\t * Component to display instead of the {@link TreeViewProps.viewComponent}\n\t * when tree content is not compatible with the {@link @fluidframework/tree#TreeViewConfiguration}.\n\t *\n\t * @defaultValue Component which describes the situation (in English) and allows the user to upgrade the schema to match the {@link @fluidframework/tree#TreeViewConfiguration} if possible.\n\t */\n\treadonly errorComponent?: React.FC<SchemaIncompatibleProps>;\n\n\t// TODO: Once its possible to query the status of individual schema upgrades, provide more options here for handling such cases.\n}\n\n/**\n * Generic DataObject for shared trees.\n * @internal\n */\nexport abstract class ReactTreeDataObject<\n\t\tTSchema extends ImplicitFieldSchema = ImplicitFieldSchema,\n\t>\n\textends TreeDataObject\n\timplements IReactTreeDataObject<TSchema>\n{\n\tpublic abstract readonly config: TreeViewConfiguration<TSchema>;\n\n\t#treeView: TreeView<TSchema> | undefined;\n\n\t/**\n\t * The schema-aware view of the tree.\n\t */\n\tpublic get treeView(): TreeView<TSchema> {\n\t\tif (this.#treeView === undefined) {\n\t\t\tthrow new Error(\"treeView has not been initialized.\");\n\t\t}\n\t\treturn this.#treeView;\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\n\tpublic readonly TreeViewComponent = ({\n\t\tviewComponent,\n\t\terrorComponent,\n\t}: TreeViewProps<TSchema>) =>\n\t\tTreeViewComponent<TSchema>({\n\t\t\ttree: this,\n\t\t\tviewComponent,\n\t\t\terrorComponent,\n\t\t});\n}\n\nfunction useViewCompatibility<TSchema extends ImplicitFieldSchema>(\n\tview: TreeView<TSchema>,\n): SchemaCompatibilityStatus {\n\tconst [compatibility, setCompatibility] = React.useState<SchemaCompatibilityStatus>(\n\t\tview.compatibility,\n\t);\n\n\tReact.useEffect(() => {\n\t\tconst updateCompatibility = (): void => {\n\t\t\tsetCompatibility(view.compatibility);\n\t\t};\n\n\t\tupdateCompatibility();\n\t\treturn view.events.on(\"schemaChanged\", updateCompatibility);\n\t}, [view]);\n\n\treturn compatibility;\n}\n\nfunction useViewRoot<TSchema extends ImplicitFieldSchema>(\n\tview: TreeView<TSchema>,\n): TreeFieldFromImplicitField<TSchema> | undefined {\n\tconst [root, setRoot] = React.useState<TreeFieldFromImplicitField<TSchema> | undefined>(\n\t\tundefined,\n\t);\n\n\tReact.useEffect(() => {\n\t\tconst updateRoot = (): void => {\n\t\t\tif (view.compatibility.canView) {\n\t\t\t\tsetRoot(view.root);\n\t\t\t} else {\n\t\t\t\tsetRoot(undefined);\n\t\t\t}\n\t\t};\n\n\t\tupdateRoot();\n\t\treturn view.events.on(\"rootChanged\", updateRoot);\n\t}, [view]);\n\n\treturn root;\n}\n\n/**\n * React component which handles schematizing trees.\n * This includes displaying errors when the document can not be schematized.\n * @alpha\n */\nexport function TreeViewComponent<TSchema extends ImplicitFieldSchema>({\n\ttree,\n\tviewComponent: ViewComponent,\n\terrorComponent,\n}: TreeViewProps<TSchema> & {\n\ttree: Pick<IReactTreeDataObject<TSchema>, \"treeView\">;\n}): React.JSX.Element {\n\tconst view = tree.treeView;\n\n\tconst compatibility = useViewCompatibility(view);\n\tconst root = useViewRoot(view);\n\tconst upgradeSchema = React.useCallback((): void => view.upgradeSchema(), [view]);\n\n\t// Note: this policy is on the stricter side and ensures that clients will only be able to submit edits when their view schema\n\t// supports exactly the same documents as the stored schema.\n\t// A realistic production application using this strategy would need to take steps to attempt to open the document using\n\t// several different view schemas in order to ensure that their users don't temporarily lose access to documents while\n\t// code rollout is in progress.\n\t// Alternative policies can be implemented, see \"Schema Evolvability\" in SharedTree's README for more information.\n\tif (!compatibility.isEquivalent) {\n\t\tconst Error = errorComponent ?? TreeErrorComponent;\n\t\treturn <Error compatibility={compatibility} upgradeSchema={upgradeSchema} />;\n\t}\n\n\tif (root === undefined) {\n\t\treturn <div>View not set</div>;\n\t}\n\n\treturn <ViewComponent root={toPropTreeNode(root)} />;\n}\n\n/**\n * React Props for displaying when the opened document is incompatible with the required view schema.\n * @alpha\n */\nexport interface SchemaIncompatibleProps {\n\t/**\n\t * Information about the view schema's compatibility with the stored schema.\n\t */\n\treadonly compatibility: SchemaCompatibilityStatus;\n\t/**\n\t * Callback to request that the stored schema in the document be upgraded.\n\t */\n\treadonly upgradeSchema: () => void;\n}\n\n/**\n * React component which displays schema errors and allows upgrading schema when possible.\n */\nfunction TreeErrorComponent({\n\tcompatibility,\n\tupgradeSchema,\n}: {\n\tcompatibility: SchemaCompatibilityStatus;\n\tupgradeSchema: () => void;\n}): React.JSX.Element {\n\t// eslint-disable-next-line unicorn/prefer-ternary\n\tif (compatibility.canUpgrade) {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<div>\n\t\t\t\t\tDocument is incompatible with current version of the application, but the document\n\t\t\t\t\tformat can be updated. This may prevent other versions of the application from\n\t\t\t\t\topening this document.\n\t\t\t\t</div>\n\t\t\t\t<button onClick={upgradeSchema}>Upgrade</button>;\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\tDocument is incompatible with current version of the application, and the document\n\t\t\t\tformat cannot be updated. The document is likely from a newer or otherwise incompatible\n\t\t\t\tversion of the application, or a different application.\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"reactSharedTreeView.js","sourceRoot":"","sources":["../src/reactSharedTreeView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;;;;;;;;;;;;;AAEH,OAAO,EACN,qBAAqB,EACrB,cAAc,EACd,oBAAoB,GACpB,MAAM,mCAAmC,CAAC;AAY3C,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC3F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAsB,MAAM,eAAe,CAAC;AAEnE;;;GAGG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC;IACvC,aAAa,EAAE,oBAAoB;CACnC,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAC7B,iBAAiD,EACjD,iBAAsE;IAEtE,OAAO,sBAAsB,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;AACrE,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,sBAAsB,CACrC,iBAAiD,EACjD,iBAAsE;;IAItE,MAAM,yBAA0B,SAAQ,mBAA4B;QAApE;;YAC0B,WAAM,GAAG,iBAAiB,CAAC;YASpD,sDAAyC;QA8B1C,CAAC;QA5BA;;WAEG;QACH,IAAW,QAAQ;YAClB,IAAI,uBAAA,IAAI,2CAAU,KAAK,SAAS,EAAE,CAAC;gBAClC,MAAM,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC;YACvD,CAAC;YACD,OAAO,uBAAA,IAAI,2CAAU,CAAC;QACvB,CAAC;QAED;;;;;WAKG;QACK,cAAc;YACrB,uBAAA,IAAI,uCAAa,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,MAAA,CAAC;QAClD,CAAC;QAEkB,KAAK,CAAC,qBAAqB;YAC7C,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC,CAAC;QAC/C,CAAC;QAEkB,KAAK,CAAC,wBAAwB;YAChD,IAAI,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC;;;IApCsB,iCAAO,GAAG,IAAI,qBAAqB,CACzD,gBAAgB,EAChB,yBAAyB,EACzB,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC,EACzB,EAAE,CACF,AAL6B,CAK5B;IAiCH,OAAO,oBAAoB,CAAC,yBAAyB,CAAC,CAAC;AACxD,CAAC;AA+DD;;;GAGG;AACH,MAAM,OAAgB,mBAGrB,SAAQ,cAAc;IAHvB;;QAQU,gDAAyC;QAYlD,+HAA+H;QAC/G,sBAAiB,GAAG,CAAC,EACpC,aAAa,EACb,cAAc,GACU,EAAE,EAAE,CAC5B,iBAAiB,CAAU;YAC1B,IAAI,EAAE,IAAI;YACV,aAAa;YACb,cAAc;SACd,CAAC,CAAC;IACL,CAAC;IApBA;;OAEG;IACH,IAAW,QAAQ;QAClB,IAAI,uBAAA,IAAI,qCAAU,KAAK,SAAS,EAAE,CAAC;YAClC,MAAM,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC;QACvD,CAAC;QACD,OAAO,uBAAA,IAAI,qCAAU,CAAC;IACvB,CAAC;CAYD;;AAED,SAAS,oBAAoB,CAC5B,IAAuB;IAEvB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CACvD,IAAI,CAAC,aAAa,CAClB,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,MAAM,mBAAmB,GAAG,GAAS,EAAE;YACtC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACtC,CAAC,CAAC;QAEF,mBAAmB,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAC;IAC7D,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,aAAa,CAAC;AACtB,CAAC;AAED,SAAS,WAAW,CACnB,IAAuB;IAEvB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CACrC,SAAS,CACT,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,MAAM,UAAU,GAAG,GAAS,EAAE;YAC7B,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;gBAChC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACP,OAAO,CAAC,SAAS,CAAC,CAAC;YACpB,CAAC;QACF,CAAC,CAAC;QAEF,UAAU,EAAE,CAAC;QACb,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,IAAI,CAAC;AACb,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAsC,EACtE,IAAI,EACJ,aAAa,EAAE,aAAa,EAC5B,cAAc,GAGd;IACA,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC;IAE3B,MAAM,aAAa,GAAG,oBAAoB,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,GAAS,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAElF,8HAA8H;IAC9H,4DAA4D;IAC5D,wHAAwH;IACxH,sHAAsH;IACtH,+BAA+B;IAC/B,kHAAkH;IAClH,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,CAAC;QACjC,MAAM,KAAK,GAAG,cAAc,IAAI,kBAAkB,CAAC;QACnD,OAAO,oBAAC,KAAK,IAAC,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,GAAI,CAAC;IAC9E,CAAC;IAED,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACxB,OAAO,gDAAuB,CAAC;IAChC,CAAC;IAED,OAAO,oBAAC,aAAa,IAAC,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,GAAI,CAAC;AACtD,CAAC;AAiBD;;GAEG;AACH,SAAS,kBAAkB,CAAC,EAC3B,aAAa,EACb,aAAa,GAIb;IACA,kDAAkD;IAClD,IAAI,aAAa,CAAC,UAAU,EAAE,CAAC;QAC9B,OAAO,CACN;YACC,4NAIM;YACN,gCAAQ,OAAO,EAAE,aAAa,cAAkB;gBAC3C,CACN,CAAC;IACH,CAAC;SAAM,CAAC;QACP,OAAO,CACN,sQAIM,CACN,CAAC;IACH,CAAC;AACF,CAAC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport {\n\tPureDataObjectFactory,\n\tTreeDataObject,\n\tcreateDataObjectKind,\n} from \"@fluidframework/aqueduct/internal\";\nimport type { IFluidLoadable } from \"@fluidframework/core-interfaces\";\nimport type { IFluidDataStoreFactory } from \"@fluidframework/runtime-definitions/internal\";\nimport type { SharedObjectKind } from \"@fluidframework/shared-object-base\";\nimport type {\n\tSchemaCompatibilityStatus,\n\tTreeViewConfiguration,\n\tTreeFieldFromImplicitField,\n\tTreeView,\n\tImplicitFieldSchema,\n\tInsertableTreeFieldFromImplicitField,\n} from \"@fluidframework/tree\";\nimport { configuredSharedTree, FormatValidatorBasic } from \"@fluidframework/tree/internal\";\nimport * as React from \"react\";\n\nimport { toPropTreeNode, type PropTreeValue } from \"./propNode.js\";\n\n/**\n * Opt into extra validation to detect encoding bugs and data corruption.\n * As long as this is an experimental package, opting into extra validation (at a small perf and bundle size cost) seems reasonable.\n */\nconst SharedTree = configuredSharedTree({\n\tjsonValidator: FormatValidatorBasic,\n});\n\n/**\n * Defines a DataObject for a {@link @fluidframework/tree#SharedTree} with a built in {@link @fluidframework/tree#TreeViewConfiguration}.\n * @param treeConfiguration - See {@link IReactTreeDataObject.config}.\n * @param createInitialTree - Function which populates the tree with initial data on document create.\n * @returns A {@link @fluidframework/fluid-static#DataObjectClass} to allow easy use of a SharedTree in a ContainerSchema.\n * @alpha\n */\nexport function treeDataObject<TSchema extends ImplicitFieldSchema>(\n\ttreeConfiguration: TreeViewConfiguration<TSchema>,\n\tcreateInitialTree: () => InsertableTreeFieldFromImplicitField<TSchema>,\n): SharedObjectKind<IReactTreeDataObject<TSchema> & IFluidLoadable> {\n\treturn treeDataObjectInternal(treeConfiguration, createInitialTree);\n}\n\n/**\n * Defines a DataObject for a {@link @fluidframework/tree#SharedTree} with a built in {@link @fluidframework/tree#TreeViewConfiguration}.\n * @param treeConfiguration - See {@link IReactTreeDataObject.config}.\n * @param createInitialTree - Function which populates the tree with initial data on document create.\n * @returns A {@link @fluidframework/fluid-static#DataObjectClass} to allow easy use of a SharedTree in a ContainerSchema.\n * @internal\n */\nexport function treeDataObjectInternal<TSchema extends ImplicitFieldSchema>(\n\ttreeConfiguration: TreeViewConfiguration<TSchema>,\n\tcreateInitialTree: () => InsertableTreeFieldFromImplicitField<TSchema>,\n): SharedObjectKind<IReactTreeDataObject<TSchema> & IFluidLoadable & TreeDataObject> & {\n\treadonly factory: IFluidDataStoreFactory;\n} {\n\tclass SchemaAwareTreeDataObject extends ReactTreeDataObject<TSchema> {\n\t\tpublic override readonly config = treeConfiguration;\n\n\t\tpublic static readonly factory = new PureDataObjectFactory<ReactTreeDataObject<TSchema>>(\n\t\t\t`TreeDataObject`,\n\t\t\tSchemaAwareTreeDataObject,\n\t\t\t[SharedTree.getFactory()],\n\t\t\t{},\n\t\t);\n\n\t\t#treeView: TreeView<TSchema> | undefined;\n\n\t\t/**\n\t\t * The schema-aware view of the tree.\n\t\t */\n\t\tpublic get treeView(): TreeView<TSchema> {\n\t\t\tif (this.#treeView === undefined) {\n\t\t\t\tthrow new Error(\"treeView has not been initialized.\");\n\t\t\t}\n\t\t\treturn this.#treeView;\n\t\t}\n\n\t\t/**\n\t\t * Converts the underlying ITree into a typed TreeView using the provided schema configuration.\n\t\t *\n\t\t * @param tree - The ITree instance to view.\n\t\t * @returns A typed TreeView using the TodoList schema.\n\t\t */\n\t\tprivate initializeView(): void {\n\t\t\tthis.#treeView = this.tree.viewWith(this.config);\n\t\t}\n\n\t\tprotected override async initializingFirstTime(): Promise<void> {\n\t\t\tthis.initializeView();\n\t\t\tthis.treeView.initialize(createInitialTree());\n\t\t}\n\n\t\tprotected override async initializingFromExisting(): Promise<void> {\n\t\t\tthis.initializeView();\n\t\t}\n\t}\n\treturn createDataObjectKind(SchemaAwareTreeDataObject);\n}\n\n/**\n * A schema-aware tree-backed DataObject, extended with a React Component to view the tree.\n * @remarks Allows for the Tree's schema to be baked into the container schema.\n * @sealed @alpha\n */\nexport interface IReactTreeDataObject<TSchema extends ImplicitFieldSchema> {\n\t/**\n\t * The configuration used to initialize new documents, as well as to interpret (schematize) existing ones.\n\t *\n\t * @remarks\n\t * The fact that a single view schema is provided here (on the data object) makes it impossible to try and apply multiple different schema.\n\t * Since the view schema currently does not provide any adapters for handling differences between view and stored schema,\n\t * it's also impossible for this single view schema to handle multiple different stored schema.\n\t * Therefore, with this current API, two different applications (or different versions of the same application)\n\t * with differing stored schema requirements (as implied by their view schema) can not collaborate on the same tree.\n\t * The only schema evolution that's currently possible is upgrading the schema to one that supports a superset of what the old schema allowed,\n\t * and collaborating between clients which have view schema that exactly correspond to that stored schema.\n\t * Future work on tree as well as these utilities should address this limitation.\n\t */\n\treadonly config: TreeViewConfiguration<TSchema>;\n\n\t/**\n\t * The schema-aware view of the tree.\n\t */\n\treadonly treeView: TreeView<TSchema>;\n\n\t/**\n\t * React component which handles schematizing trees.\n\t * This includes displaying errors when the document can not be viewed using the view schema.\n\t *\n\t * @privateRemarks\n\t * This is exposed as a member rather than a free function since type inference for the schema doesn't work when used as a free function,\n\t * and thus making it a member avoids the user of this from having to explicitly provide the type parameter.\n\t * This is an arrow function not a method so it gets the correct this when not called as a member.\n\t */\n\treadonly TreeViewComponent: (props: TreeViewProps<TSchema>) => React.JSX.Element;\n}\n\n/**\n * React props for viewing a tree.\n * @input @alpha\n */\nexport interface TreeViewProps<TSchema extends ImplicitFieldSchema> {\n\t/**\n\t * Component to display the tree content.\n\t */\n\treadonly viewComponent: React.FC<{\n\t\troot: PropTreeValue<TreeFieldFromImplicitField<TSchema>>;\n\t}>;\n\n\t/**\n\t * Component to display instead of the {@link TreeViewProps.viewComponent}\n\t * when tree content is not compatible with the {@link @fluidframework/tree#TreeViewConfiguration}.\n\t *\n\t * @defaultValue Component which describes the situation (in English) and allows the user to upgrade the schema to match the {@link @fluidframework/tree#TreeViewConfiguration} if possible.\n\t */\n\treadonly errorComponent?: React.FC<SchemaIncompatibleProps>;\n\n\t// TODO: Once its possible to query the status of individual schema upgrades, provide more options here for handling such cases.\n}\n\n/**\n * Generic DataObject for shared trees.\n * @internal\n */\nexport abstract class ReactTreeDataObject<\n\t\tTSchema extends ImplicitFieldSchema = ImplicitFieldSchema,\n\t>\n\textends TreeDataObject\n\timplements IReactTreeDataObject<TSchema>\n{\n\tpublic abstract readonly config: TreeViewConfiguration<TSchema>;\n\n\treadonly #treeView: TreeView<TSchema> | undefined;\n\n\t/**\n\t * The schema-aware view of the tree.\n\t */\n\tpublic get treeView(): TreeView<TSchema> {\n\t\tif (this.#treeView === undefined) {\n\t\t\tthrow new Error(\"treeView has not been initialized.\");\n\t\t}\n\t\treturn this.#treeView;\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\n\tpublic readonly TreeViewComponent = ({\n\t\tviewComponent,\n\t\terrorComponent,\n\t}: TreeViewProps<TSchema>) =>\n\t\tTreeViewComponent<TSchema>({\n\t\t\ttree: this,\n\t\t\tviewComponent,\n\t\t\terrorComponent,\n\t\t});\n}\n\nfunction useViewCompatibility<TSchema extends ImplicitFieldSchema>(\n\tview: TreeView<TSchema>,\n): SchemaCompatibilityStatus {\n\tconst [compatibility, setCompatibility] = React.useState<SchemaCompatibilityStatus>(\n\t\tview.compatibility,\n\t);\n\n\tReact.useEffect(() => {\n\t\tconst updateCompatibility = (): void => {\n\t\t\tsetCompatibility(view.compatibility);\n\t\t};\n\n\t\tupdateCompatibility();\n\t\treturn view.events.on(\"schemaChanged\", updateCompatibility);\n\t}, [view]);\n\n\treturn compatibility;\n}\n\nfunction useViewRoot<TSchema extends ImplicitFieldSchema>(\n\tview: TreeView<TSchema>,\n): TreeFieldFromImplicitField<TSchema> | undefined {\n\tconst [root, setRoot] = React.useState<TreeFieldFromImplicitField<TSchema> | undefined>(\n\t\tundefined,\n\t);\n\n\tReact.useEffect(() => {\n\t\tconst updateRoot = (): void => {\n\t\t\tif (view.compatibility.canView) {\n\t\t\t\tsetRoot(view.root);\n\t\t\t} else {\n\t\t\t\tsetRoot(undefined);\n\t\t\t}\n\t\t};\n\n\t\tupdateRoot();\n\t\treturn view.events.on(\"rootChanged\", updateRoot);\n\t}, [view]);\n\n\treturn root;\n}\n\n/**\n * React component which handles schematizing trees.\n * This includes displaying errors when the document can not be schematized.\n * @alpha\n */\nexport function TreeViewComponent<TSchema extends ImplicitFieldSchema>({\n\ttree,\n\tviewComponent: ViewComponent,\n\terrorComponent,\n}: TreeViewProps<TSchema> & {\n\ttree: Pick<IReactTreeDataObject<TSchema>, \"treeView\">;\n}): React.JSX.Element {\n\tconst view = tree.treeView;\n\n\tconst compatibility = useViewCompatibility(view);\n\tconst root = useViewRoot(view);\n\tconst upgradeSchema = React.useCallback((): void => view.upgradeSchema(), [view]);\n\n\t// Note: this policy is on the stricter side and ensures that clients will only be able to submit edits when their view schema\n\t// supports exactly the same documents as the stored schema.\n\t// A realistic production application using this strategy would need to take steps to attempt to open the document using\n\t// several different view schemas in order to ensure that their users don't temporarily lose access to documents while\n\t// code rollout is in progress.\n\t// Alternative policies can be implemented, see \"Schema Evolvability\" in SharedTree's README for more information.\n\tif (!compatibility.isEquivalent) {\n\t\tconst Error = errorComponent ?? TreeErrorComponent;\n\t\treturn <Error compatibility={compatibility} upgradeSchema={upgradeSchema} />;\n\t}\n\n\tif (root === undefined) {\n\t\treturn <div>View not set</div>;\n\t}\n\n\treturn <ViewComponent root={toPropTreeNode(root)} />;\n}\n\n/**\n * React Props for displaying when the opened document is incompatible with the required view schema.\n * @alpha\n */\nexport interface SchemaIncompatibleProps {\n\t/**\n\t * Information about the view schema's compatibility with the stored schema.\n\t */\n\treadonly compatibility: SchemaCompatibilityStatus;\n\t/**\n\t * Callback to request that the stored schema in the document be upgraded.\n\t */\n\treadonly upgradeSchema: () => void;\n}\n\n/**\n * React component which displays schema errors and allows upgrading schema when possible.\n */\nfunction TreeErrorComponent({\n\tcompatibility,\n\tupgradeSchema,\n}: {\n\tcompatibility: SchemaCompatibilityStatus;\n\tupgradeSchema: () => void;\n}): React.JSX.Element {\n\t// eslint-disable-next-line unicorn/prefer-ternary\n\tif (compatibility.canUpgrade) {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<div>\n\t\t\t\t\tDocument is incompatible with current version of the application, but the document\n\t\t\t\t\tformat can be updated. This may prevent other versions of the application from\n\t\t\t\t\topening this document.\n\t\t\t\t</div>\n\t\t\t\t<button onClick={upgradeSchema}>Upgrade</button>;\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\tDocument is incompatible with current version of the application, and the document\n\t\t\t\tformat cannot be updated. The document is likely from a newer or otherwise incompatible\n\t\t\t\tversion of the application, or a different application.\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluidframework/react",
-  "version": "2.62.0",
+  "version": "2.63.0-359286",
   "description": "Utilities for integrating content powered by the Fluid Framework into React applications",
   "homepage": "https://fluidframework.com",
   "repository": {
@@ -79,24 +79,24 @@
     "temp-directory": "nyc/.nyc_output"
   },
   "dependencies": {
-    "@fluidframework/aqueduct": "~2.62.0",
-    "@fluidframework/core-interfaces": "~2.62.0",
-    "@fluidframework/datastore-definitions": "~2.62.0",
-    "@fluidframework/fluid-static": "~2.62.0",
-    "@fluidframework/runtime-definitions": "~2.62.0",
-    "@fluidframework/shared-object-base": "~2.62.0",
-    "@fluidframework/tree": "~2.62.0",
+    "@fluidframework/aqueduct": "2.63.0-359286",
+    "@fluidframework/core-interfaces": "2.63.0-359286",
+    "@fluidframework/datastore-definitions": "2.63.0-359286",
+    "@fluidframework/fluid-static": "2.63.0-359286",
+    "@fluidframework/runtime-definitions": "2.63.0-359286",
+    "@fluidframework/shared-object-base": "2.63.0-359286",
+    "@fluidframework/tree": "2.63.0-359286",
     "react": "^18.3.1"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.17.1",
     "@biomejs/biome": "~1.9.3",
-    "@fluid-internal/mocha-test-setup": "~2.62.0",
+    "@fluid-internal/mocha-test-setup": "2.63.0-359286",
     "@fluid-tools/build-cli": "^0.58.3",
     "@fluidframework/build-common": "^2.0.3",
     "@fluidframework/build-tools": "^0.58.3",
     "@fluidframework/eslint-config-fluid": "^6.0.0",
-    "@fluidframework/tinylicious-client": "~2.62.0",
+    "@fluidframework/tinylicious-client": "2.63.0-359286",
     "@microsoft/api-extractor": "7.52.11",
     "@testing-library/react": "^16.3.0",
     "@types/mocha": "^10.0.10",

package/src/reactSharedTreeView.tsx

@@ -176,7 +176,7 @@ export abstract class ReactTreeDataObject<
 {
 	public abstract readonly config: TreeViewConfiguration<TSchema>;
 
-	#treeView: TreeView<TSchema> | undefined;
+	readonly #treeView: TreeView<TSchema> | undefined;
 
 	/**
 	 * The schema-aware view of the tree.