SyncedDataObject Class

Packages > @fluidframework/react > SyncedDataObject

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.

Signature:

export declare abstract class SyncedDataObject<P extends IFluidObject = object, S = undefined, E extends IEvent = IEvent> extends DataObject<P, S, E> implements IFluidHTMLView 

Extends: DataObject<P, S, E>

Implements: IFluidHTMLView

Properties

List of properties for this class
Property Modifiers Type Description
dataProps { runtime: IFluidDataStoreRuntime; fluidObjectMap: FluidObjectMap; } Returns the data props used by the view to manage the different DDSes and add any new ones
IFluidHTMLView this
syncedState ISyncedState 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

Methods

List of methods on this class
Method Modifiers Description
getConfig(key) Get a config for a specific view with the key as its syncedStateId
initializingFirstTime() 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
initializingFromExisting() 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
render(element) Returns a view. This function need to be implemented for any consumer of SyncedDataObject to render values that have been initialized using the syncedStateConfig
setConfig(key, value) 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.
setFluidConfig(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.

Properties

dataProps

Returns the data props used by the view to manage the different DDSes and add any new ones

Signature:

get dataProps(): {
        runtime: IFluidDataStoreRuntime;
        fluidObjectMap: FluidObjectMap;
    };

IFluidHTMLView

Signature:

get IFluidHTMLView(): this;

syncedState

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

Signature:

get syncedState(): ISyncedState;

Methods

getConfig

Get a config for a specific view with the key as its syncedStateId

Signature:

getConfig(key: string): ISyncedStateConfig<any, any> | undefined;

Parameters

List of parameters
Parameter Type Description
key string The syncedStateId to get the config for

Returns:

ISyncedStateConfig<any, any> | undefined

initializingFirstTime

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

Signature:

protected initializingFirstTime(): Promise<void>;

Returns:

Promise<void>

initializingFromExisting

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

Signature:

protected initializingFromExisting(): Promise<void>;

Returns:

Promise<void>

render

Returns a view. This function need to be implemented for any consumer of SyncedDataObject to render values that have been initialized using the syncedStateConfig

Signature:

render(element: HTMLElement): void;

Parameters

List of parameters
Parameter Type Description
element HTMLElement The document that the rendered value will be displayed in

Returns:

void

setConfig

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.

Signature:

setConfig<S>(key: string, value: ISyncedStateConfig<S, S>): void;

Parameters

List of parameters
Parameter Type Description
key string The syncedStateId that maps to the view that will be using these definitions
value ISyncedStateConfig The config value containing the syncedStateId and the fluidToView and viewToFluid maps

Returns:

void

setFluidConfig

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.

Signature:

setFluidConfig<SV extends IViewState, SF extends IFluidState>(key: string, value: ISyncedStateConfig<SV, SF>): void;

Parameters

List of parameters
Parameter Type Description
key string The syncedStateId that maps to the view that will be using these definitions
value ISyncedStateConfig The config value containing the syncedStateId and the fluidToView and viewToFluid maps that establish the relationship between SV and SF

Returns:

void