import { ContainerViewRuntimeFactory } from "@fluid-example/example-utils" ; import { DataObjectFactory , } from "@fluidframework/aqueduct" ; import { IViewState , createContextFluid , IFluidDataProps , IFluidState , IFluidContextProps , SyncedDataObject , } from "@fluid-experimental/react" ; import * as React from "react" ; interface ICounterState { value : number ; } interface ICounterFunctionalViewState extends IViewState , ICounterState { } interface ICounterFunctionalFluidState extends IFluidState , ICounterState { } function CounterReactFunctionalContext ( props ) { const { Provider , Consumer , state , setState } = createContextFluid ( props , { value : 0 } ) ; return ( < div > < Provider value = { { state , setState , reactContext : { } } } > < div > < Consumer > { ( context ) => ( < div > < span className = "value" > { context . state . value } < /span> < button onClick = { ( ) => { context . setState ( { ... state , value : context . state . value + 1 } ) ; } } > { "+" } < /button> < /div>)} < /Consumer> < /div> < /Provider> < /div>); } /**
 * Basic ClickerContext example using createContextFluid hook.
 */ export class ClickerContext extends SyncedDataObject { constructor ( props ) { super ( props ) ; this . setConfig < ICounterState > ( "counter-context" , { syncedStateId : "counter-context" , fluidToView : new Map ( [ [ "value" , { type : "number" , viewKey : "value" } , ] , ] ) , defaultViewState : { value : 0 } } ) ; } } export const ClickerContextInstantiationFactory = new DataObjectFactory ( "clicker-context" , ClickerContext , [ ] , { } ) ; const clickerViewCallback = ( clicker ) => < CounterReactFunctionalContext syncedStateId = { "counter-context" } syncedDataObject = { clicker } / > ; export const fluidExport = new ContainerViewRuntimeFactory < ClickerContext > ( ClickerContextInstantiationFactory , clickerViewCallback ) ;