@fluidframework/react 0.41.4 → 2.62.0

package/src/reactView.tsx

@@ -1,108 +0,0 @@
-/*!
- * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
- * Licensed under the MIT License.
- */
-
-import * as React from "react";
-import {
-    IFluidProps,
-    IFluidState,
-    IViewState,
-    IFluidConverter,
-    IViewConverter,
-    IFluidDataProps,
-    ISyncedState,
-} from "./interface";
-import { syncState, initializeState } from "./helpers";
-
-/**
- * A React view with a synced state, initial props, and a Fluid-to-view state two-way mapping
- */
-export abstract class FluidReactView<SV extends IViewState,
-    SF extends IFluidState> extends React.Component<IFluidProps<SV, SF>, SV> {
-    private readonly _syncedStateId: string;
-    private readonly _syncedState: ISyncedState;
-    private readonly _dataProps: IFluidDataProps;
-    private readonly _viewToFluid: Map<keyof SV, IFluidConverter<SV, SF>>;
-    private readonly _fluidToView: Map<keyof SF, IViewConverter<SV, SF>>;
-    constructor(props: IFluidProps<SV, SF>) {
-        super(props);
-        const {
-            syncedStateId,
-            syncedDataObject,
-        } = props;
-        const config = syncedDataObject.getConfig(syncedStateId);
-        if (config === undefined) {
-            throw Error(`Failed to find configuration for synced state ID: ${syncedStateId}`);
-        }
-        this._viewToFluid = config.viewToFluid as any;
-        this._fluidToView = config.fluidToView as any;
-        this._syncedStateId = syncedStateId;
-        this._syncedState = syncedDataObject.syncedState;
-        this._dataProps = syncedDataObject.dataProps;
-        this.state = config.defaultViewState;
-    }
-
-    public async componentDidMount() {
-        await initializeState(
-            this._syncedStateId,
-            this._syncedState,
-            this._dataProps,
-            this.state,
-            this._setState.bind(this),
-            this._fluidToView,
-            this._viewToFluid,
-        );
-    }
-
-    /**
-     * Function to update the state from both synced state updates or local ones. Only updates the synced state
-     * on local updates
-     * @param newState - the new state to be set
-     * @param fromRootUpdate - is this update coming locally or from a synced state value change
-     * @param isLocal - should this update be applied only locally
-     */
-    private _setState(
-        newState: SV,
-        fromRootUpdate?: boolean,
-        isLocal?: boolean,
-    ) {
-        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        if (isLocal) {
-            super.setState(newState);
-        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        } else if (fromRootUpdate) {
-            syncState(
-                true,
-                this._syncedStateId,
-                this._syncedState,
-                this._dataProps.runtime,
-                newState,
-                this._setState.bind(this),
-                this._dataProps.fluidObjectMap,
-                this._fluidToView,
-                this._viewToFluid,
-            );
-        } else {
-            this.setState(newState);
-        }
-    }
-
-    /**
-     * Function to update the current state. It overloads the React setState function
-     * @param newState - New state to be set both locally and on the synced state
-     */
-    public setState(newState: SV) {
-        syncState(
-            false,
-            this._syncedStateId,
-            this._syncedState,
-            this._dataProps.runtime,
-            newState,
-            this._setState.bind(this),
-            this._dataProps.fluidObjectMap,
-            this._fluidToView,
-            this._viewToFluid,
-        );
-    }
-}

package/src/syncedDataObject.ts

@@ -1,337 +0,0 @@
-/*!
- * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
- * Licensed under the MIT License.
- */
-import { DataObject } from "@fluidframework/aqueduct";
-import {
-    IFluidObject,
-    IFluidHandle,
-} from "@fluidframework/core-interfaces";
-import { IEvent } from "@fluidframework/common-definitions";
-import { SharedMap, ISharedMap } from "@fluidframework/map";
-import { IFluidHTMLView } from "@fluidframework/view-interfaces";
-import type { IFluidDataStoreRuntime } from "@fluidframework/datastore-definitions";
-
-import {
-    FluidObjectMap,
-    SyncedStateConfig,
-    ISyncedStateConfig,
-    IViewState,
-    IFluidState,
-    ISyncedState,
-} from "./interface";
-import {
-    generateFluidObjectSchema,
-    setSchema,
-    getSchema,
-} from "./helpers";
-
-/**
- * SyncedDataObject is a base class for Fluid data objects with views. It extends DataObject.
- * In addition to the root and task manager, the SyncedDataObject also provides a syncedStateConfig
- * and assures that the syncedState will be initialized according the config by the time the view
- * is rendered.
- *
- * As this is used for views, it also implements the IFluidHTMLView interface, and requires
- * the render function to be filled in.
- */
-export abstract class SyncedDataObject<
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    P extends IFluidObject = object,
-    S = undefined,
-    E extends IEvent = IEvent
-    > extends DataObject<P, S, E> implements IFluidHTMLView {
-    private readonly syncedStateConfig: SyncedStateConfig = new Map();
-    private readonly fluidObjectMap: FluidObjectMap = new Map();
-    private readonly syncedStateDirectoryId = "syncedState";
-    private internalSyncedState: ISharedMap | undefined;
-
-    public get IFluidHTMLView() {
-        return this;
-    }
-
-    /**
-     * Runs the first time the SyncedDataObject is generated and sets up all necessary data structures for the view
-     * To extend this function, please call super() prior to adding to functionality to ensure correct initializing
-     */
-    protected async initializingFirstTime(): Promise<void> {
-        // Initialize our synced state map for the first time using our
-        // syncedStateConfig values
-        await this.initializeStateFirstTime();
-    }
-
-    /**
-     * Runs any time the SyncedDataObject is rendered again. It sets up all necessary data structures for the view,
-     * along with any additional ones that may have been added due to user behavior
-     * To extend this function, please call super() prior to adding to functionality to ensure correct initializing
-     */
-    protected async initializingFromExisting(): Promise<void> {
-        // Load our existing state values to be ready for the render lifecycle
-        await this.initializeStateFromExisting();
-    }
-
-    /**
-     * Returns an interface to interact with the stored synced state for the SyncedDataObject.
-     * Views can get and fetch values from it based on their syncedStateId to retrieve their view-specific information.
-     * They can also attach listeners using the addValueChangedListener
-     */
-    public get syncedState(): ISyncedState {
-        if (this.internalSyncedState === undefined) {
-            throw new Error(this.getUninitializedErrorString(`syncedState`));
-        }
-        return {
-            set: this.internalSyncedState.set.bind(this.internalSyncedState),
-            get: this.internalSyncedState.get.bind(this.internalSyncedState),
-            addValueChangedListener: (callback) => {
-                if (this.internalSyncedState === undefined) {
-                    throw new Error(
-                        this.getUninitializedErrorString(`syncedState`),
-                    );
-                }
-                this.internalSyncedState.on("valueChanged", callback);
-            },
-        };
-    }
-
-    /**
-     * Returns the data props used by the view to manage the different DDSes and add any new ones
-     */
-    public get dataProps() {
-        return {
-            // The return type is defined explicitly here to prevent TypeScript from generating dynamic imports
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-            runtime: this.runtime as IFluidDataStoreRuntime,
-            fluidObjectMap: this.fluidObjectMap,
-        };
-    }
-
-    /**
-     * Set values to the syncedStateConfig where the view and Fluid states have the same values defined by S.
-     * Each view with a unique syncedStateId needs its own value in the syncedStateConfig.
-     * @param key - The syncedStateId that maps to the view that will be using these definitions
-     * @param value - The config value containing the syncedStateId and the fluidToView and viewToFluid maps
-     */
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    public setConfig<S>(key: string, value: ISyncedStateConfig<S, S>) {
-        this.syncedStateConfig.set(key, value);
-    }
-
-    /**
-     * Set values to the syncedStateConfig with different view and Fluid state definitions.
-     * Each view with a unique syncedStateId needs its own value in the syncedStateConfig,
-     * with SV being the view state definition and SF being the Fluid state definition.
-     * @param key - The syncedStateId that maps to the view that will be using these definitions
-     * @param value - The config value containing the syncedStateId and the fluidToView and viewToFluid maps
-     * that establish the relationship between SV and SF
-     */
-    public setFluidConfig<
-        SV extends IViewState,
-        SF extends IFluidState
-    >(key: string, value: ISyncedStateConfig<SV, SF>) {
-        this.syncedStateConfig.set(key, value);
-    }
-
-    /**
-     * Get a config for a specific view with the key as its syncedStateId
-     * @param key - The syncedStateId to get the config for
-     */
-    public getConfig(key: string) {
-        return this.syncedStateConfig.get(key);
-    }
-
-    /**
-     * Returns a view. This function need to be implemented for any consumer of SyncedDataObject
-     * to render values that have been initialized using the syncedStateConfig
-     * @param element - The document that the rendered value will be displayed in
-     */
-    public render(element: HTMLElement) {
-        throw Error("Render function was not implemented");
-    }
-
-    private async initializeStateFirstTime() {
-        this.internalSyncedState = SharedMap.create(
-            this.runtime,
-            this.syncedStateDirectoryId,
-        );
-        this.internalSyncedState.bindToContext();
-        for (const stateConfig of this.syncedStateConfig.values()) {
-            const {
-                syncedStateId,
-                fluidToView,
-                viewToFluid,
-                defaultViewState,
-            } = stateConfig;
-            // Add the SharedMap to store the Fluid state
-            const storedFluidState = SharedMap.create(this.runtime);
-            // Add it to the Fluid object map so that it will have a listener added to it once
-            // we enter the render lifecycle
-            this.fluidObjectMap.set(storedFluidState.handle.absolutePath, {
-                fluidObject: storedFluidState,
-                isRuntimeMap: true,
-            });
-            // Add the state to our map of synced states so that we can load it later for persistence
-            this.syncedState.set(
-                `syncedState-${syncedStateId}`,
-                storedFluidState.handle,
-            );
-            // Initialize any DDSes needed for the state or fetch any values from the root if they are stored
-            // on the root under a different key
-            for (const [key, value] of fluidToView.entries()) {
-                const fluidKey = key as string;
-                const rootKey = value.rootKey;
-                const createCallback = value.sharedObjectCreate;
-                if (createCallback !== undefined) {
-                    const sharedObject = createCallback(this.runtime);
-                    this.fluidObjectMap.set(sharedObject.handle.absolutePath, {
-                        fluidObject: sharedObject,
-                        listenedEvents: value.listenedEvents ?? ["valueChanged"],
-                    });
-                    storedFluidState.set(fluidKey, sharedObject.handle);
-                    if (rootKey !== undefined) {
-                        this.root.set(rootKey, sharedObject.handle);
-                    }
-                } else if (rootKey !== undefined) {
-                    storedFluidState.set(fluidKey, this.root.get(rootKey));
-                }
-            }
-
-            // Generate our schema and store it, so that we don't need to parse our maps each time
-            const schema = generateFluidObjectSchema(
-                this.runtime,
-                defaultViewState,
-                fluidToView,
-                viewToFluid,
-            );
-            const schemaHandles = {
-                fluidMatchingMapHandle: schema.fluidMatchingMap
-                    .handle as IFluidHandle<SharedMap>,
-                viewMatchingMapHandle: schema.viewMatchingMap
-                    .handle as IFluidHandle<SharedMap>,
-                storedHandleMapHandle: schema.storedHandleMap
-                    .handle as IFluidHandle<SharedMap>,
-            };
-            this.fluidObjectMap.set(
-                schema.fluidMatchingMap.handle.absolutePath,
-                {
-                    fluidObject: schema.fluidMatchingMap,
-                    isRuntimeMap: true,
-                },
-            );
-            this.fluidObjectMap.set(
-                schema.viewMatchingMap.handle.absolutePath,
-                {
-                    fluidObject: schema.viewMatchingMap,
-                    isRuntimeMap: true,
-                },
-            );
-            this.fluidObjectMap.set(
-                schema.storedHandleMap.handle.absolutePath,
-                {
-                    fluidObject: schema.storedHandleMap,
-                    isRuntimeMap: true,
-                },
-            );
-
-            setSchema(
-                syncedStateId,
-                this.syncedState,
-                schemaHandles,
-            );
-        }
-    }
-
-    private async initializeStateFromExisting() {
-        // Fetch our synced state that stores all of our information to re-initialize the view state
-        this.internalSyncedState = (await this.runtime.getChannel(
-            this.syncedStateDirectoryId,
-        )) as ISharedMap;
-        // Reload the stored state for each config provided
-        for (const stateConfig of this.syncedStateConfig.values()) {
-            const { syncedStateId, fluidToView } = stateConfig;
-            // Fetch this specific view's state using the syncedStateId
-            const storedFluidStateHandle = this.syncedState.get<
-                IFluidHandle<ISharedMap>
-            >(`syncedState-${syncedStateId}`);
-            if (storedFluidStateHandle === undefined) {
-                throw new Error(
-                    this.getUninitializedErrorString(
-                        `syncedState-${syncedStateId}`,
-                    ),
-                );
-            }
-            const storedFluidState = await storedFluidStateHandle.get();
-            // Add it to the Fluid object map so that it will have a listener added to it once
-            // we enter the render lifecycle
-            this.fluidObjectMap.set(storedFluidStateHandle.absolutePath, {
-                fluidObject: storedFluidState,
-                isRuntimeMap: true,
-            });
-            // If the view is using any Fluid data stores or SharedObjects, asynchronously fetch them
-            // from their stored handles
-            for (const [key, value] of fluidToView.entries()) {
-                const fluidKey = key as string;
-                const rootKey = value.rootKey;
-                const createCallback = value.sharedObjectCreate;
-                if (createCallback !== undefined) {
-                    const handle = rootKey !== undefined
-                        ? this.root.get(rootKey)
-                        : storedFluidState.get(fluidKey);
-                    if (handle === undefined) {
-                        throw new Error(
-                            `Failed to find ${fluidKey} in synced state`,
-                        );
-                    }
-                    this.fluidObjectMap.set(handle.absolutePath, {
-                        fluidObject: await handle.get(),
-                        listenedEvents: value.listenedEvents ?? ["valueChanged"],
-                    });
-                } else {
-                    const storedValue = rootKey !== undefined
-                        ? this.root.get(rootKey)
-                        : storedFluidState.get(fluidKey);
-                    const handle = storedValue?.IFluidHandle;
-                    if (handle !== undefined) {
-                        this.fluidObjectMap.set(handle.absolutePath, {
-                            fluidObject: await handle.get(),
-                            listenedEvents: value.listenedEvents ?? [
-                                "valueChanged",
-                            ],
-                        });
-                    }
-                }
-            }
-            const schemaHandles = getSchema(
-                syncedStateId,
-                this.syncedState,
-            );
-            if (schemaHandles === undefined) {
-                throw new Error(
-                    this.getUninitializedErrorString(
-                        `schema-${syncedStateId}`,
-                    ),
-                );
-            }
-            this.fluidObjectMap.set(
-                schemaHandles.fluidMatchingMapHandle.absolutePath,
-                {
-                    fluidObject: await schemaHandles.fluidMatchingMapHandle.get(),
-                    isRuntimeMap: true,
-                },
-            );
-            this.fluidObjectMap.set(
-                schemaHandles.viewMatchingMapHandle.absolutePath,
-                {
-                    fluidObject: await schemaHandles.viewMatchingMapHandle.get(),
-                    isRuntimeMap: true,
-                },
-            );
-            this.fluidObjectMap.set(
-                schemaHandles.storedHandleMapHandle.absolutePath,
-                {
-                    fluidObject: await schemaHandles.storedHandleMapHandle.get(),
-                    isRuntimeMap: true,
-                },
-            );
-        }
-    }
-}

package/src/syncedObjects/array/fluidSyncedArray.ts

@@ -1,126 +0,0 @@
-/*!
- * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
- * Licensed under the MIT License.
- */
-
-import { SharedObjectSequence } from "@fluidframework/sequence";
-import {
-    IViewState,
-    IFluidState,
-    SyncedDataObject,
-    ICombinedState,
-    IFluidDataProps,
-    useReducerFluid,
-} from "../..";
-import { IFluidSyncedArrayReducer } from "./interface";
-
-export function setFluidSyncedArrayConfig<
-    SV extends IViewState,
-    SF extends IFluidState
->(
-    syncedDataObject: SyncedDataObject,
-    syncedStateId: string,
-    viewKey: keyof SV,
-    fluidKey: keyof SF,
-    defaultViewState: SV,
-    sharedObjectCreate = SharedObjectSequence.create,
-) {
-    syncedDataObject.setFluidConfig<SV, SF>(syncedStateId, {
-        syncedStateId,
-        fluidToView: new Map([
-            [
-                fluidKey,
-                {
-                    type: SharedObjectSequence.name,
-                    viewKey,
-                    viewConverter: (viewState, fluidState) => {
-                        if (fluidState[fluidKey] === undefined) {
-                            throw Error("Fluid state was not initialized");
-                        }
-                        viewState[viewKey] = (fluidState[
-                            fluidKey
-                        ] as any).getItems(0);
-                        return viewState;
-                    },
-                    sharedObjectCreate,
-                    listenedEvents: ["valueChanged"],
-                },
-            ],
-        ]),
-        viewToFluid: new Map([
-            [
-                viewKey,
-                {
-                    type: "array",
-                    fluidKey,
-                    fluidConverter: (viewState, fluidState) => {
-                        if (fluidState[fluidKey] === undefined) {
-                            throw Error("Fluid state was not initialized");
-                        }
-                        viewState[viewKey] = (fluidState[
-                            fluidKey
-                        ] as any).getItems(0);
-                        return fluidState;
-                    },
-                },
-            ],
-        ]),
-        defaultViewState,
-    });
-}
-
-export function generateSyncedArrayReducer<
-    SV extends IViewState,
-    SF extends IFluidState
->(viewKey: keyof SV, fluidKey: keyof SF): IFluidSyncedArrayReducer<SV, SF> {
-    const syncedArrayReducer = {
-        add: {
-            function: (state, value: any) => {
-                if (state?.fluidState?.[fluidKey] === undefined) {
-                    throw Error(
-                        "State was not initialized prior to dispatch call",
-                    );
-                }
-                state.fluidState[fluidKey].insert(
-                    state.fluidState[fluidKey].getLength(),
-                    [{ ...value }],
-                );
-                state.viewState[viewKey] = state.fluidState[fluidKey].getItems(
-                    0,
-                );
-                return { state };
-            },
-        },
-    };
-    return syncedArrayReducer;
-}
-
-export function useSyncedArrayReducerFluid<
-    SV extends IViewState,
-    SF extends IFluidState
->(
-    syncedDataObject: SyncedDataObject,
-    syncedStateId: string,
-    viewKey: keyof SV,
-    fluidKey: keyof SF,
-    defaultViewState: SV,
-// eslint-disable-next-line @typescript-eslint/ban-types
-): [ICombinedState<SV, SF, IFluidDataProps>, IFluidSyncedArrayReducer<SV, SF>, {}] {
-    const syncedArrayReducer = generateSyncedArrayReducer(viewKey, fluidKey);
-    return useReducerFluid<
-        SV,
-        SF,
-        IFluidSyncedArrayReducer<SV, SF>,
-        // eslint-disable-next-line @typescript-eslint/ban-types
-        {},
-        IFluidDataProps
-    >(
-        {
-            syncedDataObject,
-            syncedStateId,
-            reducer: syncedArrayReducer,
-            selector: {},
-        },
-        defaultViewState,
-    );
-}

package/src/syncedObjects/array/index.ts

@@ -1,7 +0,0 @@
-/*!
- * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
- * Licensed under the MIT License.
- */
-
-export * from "./syncedArray";
-export * from "./interface";

package/src/syncedObjects/array/interface.ts

@@ -1,45 +0,0 @@
-/*!
- * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
- * Licensed under the MIT License.
- */
-import { SharedObjectSequence } from "@fluidframework/sequence";
-import {
-    IViewState,
-    IFluidState,
-    IFluidReducer,
-    IFluidDataProps,
-    FluidStateUpdateFunction,
-} from "../..";
-
-/**
- * The state interface exposed to the view for the synced array
- */
-export interface ISyncedArrayViewState<T> extends IViewState {
-    values: T[];
-}
-
-/**
- * The state interface for the Fluid data source that powers the synced array
- */
-export interface ISyncedArrayFluidState<T> extends IFluidState {
-    values: SharedObjectSequence<T>;
-}
-
-/**
- * The reducer interface for modifying the synced array
- * TODO: Add more functions that further expose the SharedObjectSequence interface for use
- */
-export interface ISyncedArrayReducer<T> {
-    add: (value: T) => void;
-}
-
-/**
- * The underlying reducer interface passed to the useReducerFluid hook to bind the view and Fluid
- * state definitions together
- */
-export interface IFluidSyncedArrayReducer<
-    SV extends IViewState,
-    SF extends IFluidState
-    > extends IFluidReducer<SV, SF, IFluidDataProps> {
-    add: FluidStateUpdateFunction<SV, SF, IFluidDataProps>;
-}

package/src/syncedObjects/array/syncedArray.ts

@@ -1,65 +0,0 @@
-/*!
- * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
- * Licensed under the MIT License.
- */
-import { SharedObjectSequence } from "@fluidframework/sequence";
-import { SyncedDataObject } from "../..";
-import { ISyncedArrayViewState, ISyncedArrayFluidState, ISyncedArrayReducer } from "./interface";
-import { setFluidSyncedArrayConfig, useSyncedArrayReducerFluid } from "./fluidSyncedArray";
-
-/**
- * Function to set the config for a synced array on a syncedDataObject's SharedMap synced state. This
- * will initialize and provide a SharedObjectSequence<T> for the view to use through a T[] interface.
- * This SharedObjectSequence provided is automatically bound to the state update of the
- * functional view useSyncedArray is called in.
- * @param syncedDataObject - The Fluid data object on which the synced state config is being set
- * @param syncedStateId - The ID of the view state that this config schema is being set for
- * @param defaultValue - The default values in the view array prior to the SharedObjectSequence initializing
- * @param sharedObjectCreate - The creation function for the SharedObjectSequence. This can be set to
- * pre-increment the sequence with initial values.
- */
-export function setSyncedArrayConfig<T>(
-    syncedDataObject: SyncedDataObject,
-    syncedStateId: string,
-    defaultValue: T[] = [],
-    sharedObjectCreate = SharedObjectSequence.create,
-) {
-    setFluidSyncedArrayConfig<ISyncedArrayViewState<T>, ISyncedArrayFluidState<T>>(
-        syncedDataObject,
-        syncedStateId,
-        "values",
-        "values",
-        { values: defaultValue },
-        sharedObjectCreate,
-    );
-}
-
-/**
- * Function to use the synced array state powered by a SharedObjectSequence<T> that has been prepared for this view
- * @param syncedDataObject - The Fluid data object that holds the synced state config for this view
- * @param syncedStateId - The ID of this view state
- * @returns [
- *  the array of T objects currently in the SharedObjectSequence,
- *  the reducer to modify values on the SharedObjectSequence
- * ]
- */
-export function useSyncedArray<T>(
-    syncedDataObject: SyncedDataObject,
-    syncedStateId: string,
-    defaultValue = [] as T[],
-): [T[], ISyncedArrayReducer<T>] {
-    type viewState = ISyncedArrayViewState<T>;
-    type fluidState = ISyncedArrayFluidState<T>;
-    const [state, reducer] = useSyncedArrayReducerFluid<viewState, fluidState>(
-        syncedDataObject,
-        syncedStateId,
-        "values",
-        "values",
-        { values: defaultValue },
-    );
-    const pureReducer: ISyncedArrayReducer<T> = {
-        add: (value: T) => reducer.add.function(state, value),
-    };
-
-    return [state.viewState.values, pureReducer];
-}