@microsoft/live-share-react 2.0.0-internal.1 → 2.0.0-internal.11

package/bin/cjs/providers/AzureProvider.d.ts

@@ -0,0 +1,113 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Microsoft Live Share SDK License.
+ */
+import { ContainerSchema, IFluidContainer } from "fluid-framework";
+import React from "react";
+import { AzureClientProps, AzureContainerServices } from "@fluidframework/azure-client";
+import { IAzureContainerResults } from "../types/index.js";
+import { ISharedStateRegistryResponse } from "../shared-hooks/index.js";
+import { BaseLiveShareClient } from "@microsoft/live-share/internal";
+/**
+ * React Context provider values for `<AzureProvider>` and `<LiveShareProvider>`.
+ *
+ * @remarks
+ * To get the latest values, use the {@link useFluidObjectsContext} hook.
+ */
+export interface IFluidContext extends ISharedStateRegistryResponse {
+    /**
+     * The Fluid Turbo client used for connecting to the Fluid container.
+     */
+    clientRef: React.MutableRefObject<BaseLiveShareClient>;
+    /**
+     * Stateful Fluid container.
+     */
+    container: IFluidContainer | undefined;
+    /**
+     * The Azure container services (e.g., audience).
+     */
+    services: AzureContainerServices | undefined;
+    /**
+     * A stateful error object that is set if there was an error connecting to the Fluid container.
+     */
+    joinError: Error | undefined;
+    /**
+     * React callback function to connect to an existing Fluid container.
+     *
+     * @remarks
+     * The results will also be set to their stateful counterparts for `container` and `services`.
+     *
+     * @param containerId the containerId to connect to.
+     * @param initialObjects Optional. initial object schema, which should match that passed to `createContainer()`.
+     * @returns promise that returns a results object once complete (e.g., container, services, etc.)
+     */
+    getContainer: (containerId: string, fluidContainerSchema?: ContainerSchema) => Promise<IAzureContainerResults>;
+    /**
+     * React callback function to create and connect to a new Fluid container.
+     *
+     * @remarks
+     * The results will also be set to their stateful counterparts for `container` and `services`.
+     *
+     * @param initialObjects Optional. The initial object schema to apply to the container.
+     * @param onInitializeContainer Optional. A callback for when the container is first initialized, which is useful for setting default values to objects in `initialObjects`.
+     * @returns promise that returns a results object once complete (e.g., container, services, etc.)
+     */
+    createContainer: (fluidContainerSchema?: ContainerSchema, onInitializeContainer?: (container: IFluidContainer) => void) => Promise<IAzureContainerResults>;
+}
+/**
+ * @hidden
+ */
+export declare const FluidContext: React.Context<IFluidContext>;
+/**
+ * Hook to get the latest React context state for `FluidContext`.
+ *
+ * @remarks
+ * This hook can only be used in a child component of `<LiveShareProvider>` or `<AzureProvider>`.
+ *
+ * @returns current state of `LiveShareContext`
+ */
+export declare const useFluidObjectsContext: () => IFluidContext;
+/**
+ * Prop types for {@link AzureProvider} component.
+ */
+export interface IAzureProviderProps {
+    /**
+     * Optional. React children node for the React Context Provider.
+     */
+    children?: React.ReactNode;
+    /**
+     * Props for initializing a new `AzureClient` instance.
+     */
+    clientOptions: AzureClientProps;
+    /**
+     * The `containerId` to connect to when {@link joinOnLoad} is true.
+     *
+     * @remarks
+     * If you pass in an `undefined` value when {@link createOnLoad} is true, a new container will be created.
+     */
+    containerId?: string;
+    /**
+     * Flag to control whether or not a new container should be created on first mount.
+     *
+     * @remarks
+     * If no {@link containerId} is set when the component first mounts, setting this to `true` will automatically create a new container.
+     * This prop does not do anything if you are using `<LiveShareProvider>` instead of `<AzureProvider>`.
+     */
+    createOnLoad?: boolean;
+    /**
+     * The initial schema to use when {@link joinOnLoad} or {@link createOnLoad} is true.
+     */
+    fluidContainerSchema?: ContainerSchema;
+    /**
+     * Flag to control whether or not to connect to an existing container on first mount.
+     *
+     * @remarks
+     * Setting this to true will connect to the container if {@link containerId} is provided as a prop.
+     */
+    joinOnLoad?: boolean;
+}
+/**
+ * React Context provider component for using Fluid data objects & joining/creating a Fluid document `AzureClient`.
+ */
+export declare const AzureProvider: React.FC<IAzureProviderProps>;
+//# sourceMappingURL=AzureProvider.d.ts.map

package/bin/cjs/providers/AzureProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AzureProvider.d.ts","sourceRoot":"","sources":["../../../src/providers/AzureProvider.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,gBAAgB,EAChB,sBAAsB,EACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EACH,4BAA4B,EAE/B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAErE;;;;;GAKG;AACH,MAAM,WAAW,aAAc,SAAQ,4BAA4B;IAC/D;;OAEG;IACH,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;IACvD;;OAEG;IACH,SAAS,EAAE,eAAe,GAAG,SAAS,CAAC;IACvC;;OAEG;IACH,QAAQ,EAAE,sBAAsB,GAAG,SAAS,CAAC;IAC7C;;OAEG;IACH,SAAS,EAAE,KAAK,GAAG,SAAS,CAAC;IAC7B;;;;;;;;;OASG;IACH,YAAY,EAAE,CACV,WAAW,EAAE,MAAM,EACnB,oBAAoB,CAAC,EAAE,eAAe,KACrC,OAAO,CAAC,sBAAsB,CAAC,CAAC;IACrC;;;;;;;;;OASG;IACH,eAAe,EAAE,CACb,oBAAoB,CAAC,EAAE,eAAe,EACtC,qBAAqB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,KAC3D,OAAO,CAAC,sBAAsB,CAAC,CAAC;CACxC;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,8BAExB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,QAAO,aAQzC,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,EAAE,gBAAgB,CAAC;IAChC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,oBAAoB,CAAC,EAAE,eAAe,CAAC;IACvC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAoHvD,CAAC"}

package/bin/cjs/providers/AzureProvider.js

@@ -0,0 +1,127 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AzureProvider = exports.useFluidObjectsContext = exports.FluidContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const index_js_1 = require("../shared-hooks/index.js");
+const live_share_1 = require("@microsoft/live-share");
+/**
+ * @hidden
+ */
+exports.FluidContext = react_1.default.createContext({});
+/**
+ * Hook to get the latest React context state for `FluidContext`.
+ *
+ * @remarks
+ * This hook can only be used in a child component of `<LiveShareProvider>` or `<AzureProvider>`.
+ *
+ * @returns current state of `LiveShareContext`
+ */
+const useFluidObjectsContext = () => {
+    const context = react_1.default.useContext(exports.FluidContext);
+    if (!isFluidObjectsContext(context)) {
+        throw new Error("@microsoft/live-share-react: attempting to use `useFluidObjectsContext()` from a component that is not a child of `<LiveShareProvider>` or `<AzureProvider>`.\nTo fix this error, ensure that you are only using Live Share hooks (e.g., `useLiveState`) from a child component of `<LiveShareProvider>` or `<AzureProvider>`.");
+    }
+    return context;
+};
+exports.useFluidObjectsContext = useFluidObjectsContext;
+/**
+ * React Context provider component for using Fluid data objects & joining/creating a Fluid document `AzureClient`.
+ */
+const AzureProvider = (props) => {
+    var _a;
+    const startedRef = react_1.default.useRef(false);
+    const clientRef = react_1.default.useRef(new live_share_1.AzureLiveShareClient(props.clientOptions));
+    const [results, setResults] = react_1.default.useState();
+    const [joinError, setJoinError] = react_1.default.useState();
+    const stateRegistryCallbacks = (0, index_js_1.useSharedStateRegistry)(results);
+    /**
+     * Get the container for a given containerId using AzureClient
+     */
+    const getContainer = react_1.default.useCallback((containerId, fluidContainerSchema) => __awaiter(void 0, void 0, void 0, function* () {
+        return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const results = yield clientRef.current.getContainer(containerId, fluidContainerSchema);
+                setResults(results);
+                resolve(results);
+            }
+            catch (error) {
+                if (error instanceof Error) {
+                    setJoinError(error);
+                }
+                reject(error);
+            }
+        }));
+    }), [props.containerId, setResults]);
+    /**
+     * Create container callback to create a new container using AzureClient
+     */
+    const createContainer = react_1.default.useCallback((fluidContainerSchema, onInitializeContainer) => __awaiter(void 0, void 0, void 0, function* () {
+        return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const results = yield clientRef.current.createContainer(fluidContainerSchema);
+                if (onInitializeContainer) {
+                    onInitializeContainer(results.container);
+                }
+                const containerId = yield results.container.attach();
+                window.location.hash = containerId;
+                setResults(results);
+                resolve(results);
+            }
+            catch (error) {
+                if (error instanceof Error) {
+                    setJoinError(error);
+                }
+                reject(error);
+            }
+        }));
+    }), [props.containerId, setResults]);
+    /**
+     * Joins a container if `props.joinOnLoad` is true and `props.containerId` is known. Creates a new container if `props.createOnLoad` is true
+     * and `props.containerId` is not known.
+     */
+    react_1.default.useEffect(() => {
+        var _a;
+        // This hook should only be called once, so we use a ref to track if it has been called.
+        // This is a workaround for the fact that useEffect is called twice on initial render in React V18.
+        // We are not doing this here for backwards compatibility. View the README for more information.
+        if (((_a = results === null || results === void 0 ? void 0 : results.container) === null || _a === void 0 ? void 0 : _a.connectionState) !== undefined ||
+            startedRef.current)
+            return;
+        startedRef.current = true;
+        if (props.containerId && props.joinOnLoad) {
+            getContainer(props.containerId, props.fluidContainerSchema);
+        }
+        else if (!props.containerId && props.createOnLoad) {
+            createContainer(props.fluidContainerSchema);
+        }
+    }, [
+        (_a = results === null || results === void 0 ? void 0 : results.container) === null || _a === void 0 ? void 0 : _a.connectionState,
+        props.containerId,
+        props.createOnLoad,
+        props.joinOnLoad,
+        props.fluidContainerSchema,
+        getContainer,
+        createContainer,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(exports.FluidContext.Provider, { value: Object.assign({ clientRef, container: results === null || results === void 0 ? void 0 : results.container, services: results === null || results === void 0 ? void 0 : results.services, joinError,
+            createContainer,
+            getContainer }, stateRegistryCallbacks), children: props.children }));
+};
+exports.AzureProvider = AzureProvider;
+function isFluidObjectsContext(value) {
+    return !!(value === null || value === void 0 ? void 0 : value.clientRef);
+}
+//# sourceMappingURL=AzureProvider.js.map

package/bin/cjs/providers/AzureProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AzureProvider.js","sourceRoot":"","sources":["../../../src/providers/AzureProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAMA,kDAA0B;AAM1B,uDAGkC;AAClC,sDAA6D;AAwD7D;;GAEG;AACU,QAAA,YAAY,GAAG,eAAK,CAAC,aAAa,CAC3C,EAAmB,CACtB,CAAC;AAEF;;;;;;;GAOG;AACI,MAAM,sBAAsB,GAAG,GAAkB,EAAE;IACtD,MAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,oBAAY,CAAC,CAAC;IAC/C,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,CAAC;QAClC,MAAM,IAAI,KAAK,CACX,gUAAgU,CACnU,CAAC;IACN,CAAC;IACD,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC;AARW,QAAA,sBAAsB,0BAQjC;AA0CF;;GAEG;AACI,MAAM,aAAa,GAAkC,CAAC,KAAK,EAAE,EAAE;;IAClE,MAAM,UAAU,GAAG,eAAK,CAAC,MAAM,CAAU,KAAK,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,eAAK,CAAC,MAAM,CAC1B,IAAI,iCAAoB,CAAC,KAAK,CAAC,aAAa,CAAC,CAChD,CAAC;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,eAAK,CAAC,QAAQ,EAEzC,CAAC;IACJ,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,eAAK,CAAC,QAAQ,EAAqB,CAAC;IAEtE,MAAM,sBAAsB,GAAG,IAAA,iCAAsB,EAAC,OAAO,CAAC,CAAC;IAE/D;;OAEG;IACH,MAAM,YAAY,GAAG,eAAK,CAAC,WAAW,CAClC,CACI,WAAmB,EACnB,oBAAsC,EACP,EAAE;QACjC,OAAO,IAAI,OAAO,CAAC,CAAO,OAAO,EAAE,MAAM,EAAE,EAAE;YACzC,IAAI,CAAC;gBACD,MAAM,OAAO,GACT,MAAM,SAAS,CAAC,OAAO,CAAC,YAAY,CAChC,WAAW,EACX,oBAAoB,CACvB,CAAC;gBACN,UAAU,CAAC,OAAO,CAAC,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,CAAC;YACrB,CAAC;YAAC,OAAO,KAAU,EAAE,CAAC;gBAClB,IAAI,KAAK,YAAY,KAAK,EAAE,CAAC;oBACzB,YAAY,CAAC,KAAK,CAAC,CAAC;gBACxB,CAAC;gBACD,MAAM,CAAC,KAAK,CAAC,CAAC;YAClB,CAAC;QACL,CAAC,CAAA,CAAC,CAAC;IACP,CAAC,CAAA,EACD,CAAC,KAAK,CAAC,WAAW,EAAE,UAAU,CAAC,CAClC,CAAC;IAEF;;OAEG;IACH,MAAM,eAAe,GAAG,eAAK,CAAC,WAAW,CACrC,CACI,oBAAsC,EACtC,qBAA4D,EAC7B,EAAE;QACjC,OAAO,IAAI,OAAO,CAAC,CAAO,OAAO,EAAE,MAAM,EAAE,EAAE;YACzC,IAAI,CAAC;gBACD,MAAM,OAAO,GACT,MAAM,SAAS,CAAC,OAAO,CAAC,eAAe,CACnC,oBAAoB,CACvB,CAAC;gBACN,IAAI,qBAAqB,EAAE,CAAC;oBACxB,qBAAqB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;gBAC7C,CAAC;gBACD,MAAM,WAAW,GAAG,MAAM,OAAO,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;gBACrD,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,WAAW,CAAC;gBACnC,UAAU,CAAC,OAAO,CAAC,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,CAAC;YACrB,CAAC;YAAC,OAAO,KAAU,EAAE,CAAC;gBAClB,IAAI,KAAK,YAAY,KAAK,EAAE,CAAC;oBACzB,YAAY,CAAC,KAAK,CAAC,CAAC;gBACxB,CAAC;gBACD,MAAM,CAAC,KAAK,CAAC,CAAC;YAClB,CAAC;QACL,CAAC,CAAA,CAAC,CAAC;IACP,CAAC,CAAA,EACD,CAAC,KAAK,CAAC,WAAW,EAAE,UAAU,CAAC,CAClC,CAAC;IAEF;;;OAGG;IACH,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACjB,wFAAwF;QACxF,mGAAmG;QACnG,gGAAgG;QAChG,IACI,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,0CAAE,eAAe,MAAK,SAAS;YACjD,UAAU,CAAC,OAAO;YAElB,OAAO;QACX,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,IAAI,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YACxC,YAAY,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC;QAChE,CAAC;aAAM,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC;YAClD,eAAe,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;QAChD,CAAC;IACL,CAAC,EAAE;QACC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,0CAAE,eAAe;QACnC,KAAK,CAAC,WAAW;QACjB,KAAK,CAAC,YAAY;QAClB,KAAK,CAAC,UAAU;QAChB,KAAK,CAAC,oBAAoB;QAC1B,YAAY;QACZ,eAAe;KAClB,CAAC,CAAC;IAEH,OAAO,CACH,uBAAC,oBAAY,CAAC,QAAQ,IAClB,KAAK,kBACD,SAAS,EACT,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAC7B,QAAQ,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,EAC3B,SAAS;YACT,eAAe;YACf,YAAY,IACT,sBAAsB,aAG5B,KAAK,CAAC,QAAQ,GACK,CAC3B,CAAC;AACN,CAAC,CAAC;AApHW,QAAA,aAAa,iBAoHxB;AAEF,SAAS,qBAAqB,CAAC,KAAU;IACrC,OAAO,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,CAAA,CAAC;AAC9B,CAAC"}

package/bin/cjs/providers/LiveShareProvider.d.ts

@@ -0,0 +1,193 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Microsoft Live Share SDK License.
+ */
+import { ContainerSchema, IFluidContainer } from "fluid-framework";
+import React from "react";
+import { ILiveShareClientOptions, ILiveShareHost, ILiveShareJoinResults, ITimestampProvider } from "@microsoft/live-share";
+/**
+ * React Context provider values for `<LiveShareProvider>`.
+ *
+ * @remarks
+ * To get the latest values, use the {@link useLiveShareContext} hook.
+ * Use the {@link useFluidObjectsContext} hook for other relevant context values.
+ */
+export interface ILiveShareContext {
+    /**
+     * True if the local user created the Fluid container
+     */
+    created: boolean;
+    /**
+     * True if connected to the Live Share container
+     */
+    joined: boolean;
+    /**
+     * An error that will be defined if there was a problem joining the container, or undefined if not.
+     */
+    joinError: Error | undefined;
+    /**
+     * Live Share timestamp provider. Can be used to `.getTimestamp()` for a global clock value.
+     * This reference timestamp value should be fairly consistent for all users in the session.
+     */
+    timestampProvider: ITimestampProvider | undefined;
+    /**
+     * Join callback method for manually connecting to the Fluid container.
+     *
+     * @remarks
+     * Use this callback if `joinOnLoad` is `false` or `undefined` in {@link ILiveShareProviderProps}.
+     *
+     * @param initialObjects Optional. The initial objects for the Fluid container schema.
+     * @param onInitializeContainer Optional. Callback for when the container is first created.
+     * @returns Promise with `ILiveShareJoinResults`, which includes the Fluid container
+     */
+    join: (fluidContainerSchema?: ContainerSchema, onInitializeContainer?: (container: IFluidContainer) => void) => Promise<ILiveShareJoinResults>;
+}
+/**
+ * @hidden
+ */
+export declare const LiveShareContext: React.Context<ILiveShareContext>;
+/**
+ * Hook to get the latest React context state for `LiveShareContext`.
+ *
+ * @remarks
+ * This hook can only be used in a child component of `<LiveShareProvider>`.
+ * See `useFluidObjectsContext` for other information related to the Live Share session, such as the `container`.
+ *
+ * @returns current state of `LiveShareContext`
+ *
+ * @example
+ ```jsx
+// LiveShareApp.jsx
+import { LiveShareProvider } from "@microsoft/live-share-react";
+import { LiveShareHost } from "@microsoft/teams-js";
+
+const host = LiveShareHost.create();
+
+export function LiveShareApp() {
+    // Call app.initialize() from teams-js before rendering LiveShareProvider
+
+    return (
+        <LiveShareProvider
+            joinOnLoad={true}
+            host={host}
+        >
+            <LiveShareLoader>
+                <LiveCheckbox />
+            </LiveShareLoader>
+        </LiveShareProvider>
+    );
+}
+
+// LiveShareLoader.jsx
+import { useLiveShareContext } from "@microsoft/live-share-react";
+
+export function LiveShareLoader({ children }) {
+    const { joined, joinError } = useLiveShareContext();
+
+    if (joinError) return <>{joinError.message}</>;
+    if (!joined) return <>Joining Live Share session...</>;
+    return <>{children}</>
+}
+
+// LiveCheckbox.jsx
+import { useLiveState } from "@microsoft/live-share-react";
+
+export function LiveCheckbox() {
+    const [checked, setChecked] = useLiveState("MY-UNIQUE-ID", false);
+    return (
+        <input
+            type="checkbox"
+            checked={checked}
+            onChange={() => {
+                setChecked(!checked);
+            }}
+        />
+    );
+}
+ ```
+ */
+export declare const useLiveShareContext: () => ILiveShareContext;
+/**
+ * Prop types for {@link LiveShareProvider} component.
+ */
+export interface ILiveShareProviderProps {
+    /**
+     * Optional. React children node for the React Context Provider
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional. Options for initializing `LiveShareClient`.
+     */
+    clientOptions?: ILiveShareClientOptions;
+    /**
+     * Host to initialize `LiveShareClient` with.
+     *
+     * @remarks
+     * If using the `LiveShareClient` class from `@microsoft/teams-js`, you must ensure that you have first called `teamsJs.app.initialize()` before calling `LiveShareClient.create()`.
+     */
+    host: ILiveShareHost;
+    /**
+     * The schema to use when {@link joinOnLoad} is true.
+     */
+    fluidContainerSchema?: ContainerSchema;
+    /**
+     * Optional. Flag to determine whether to join Fluid container on load.
+     */
+    joinOnLoad?: boolean;
+}
+/**
+ * React Context provider component for using Live Share data objects & joining a Live Share session using `LiveShareClient`.
+ *
+ * @example
+ ```jsx
+// LiveShareApp.jsx
+import { LiveShareProvider } from "@microsoft/live-share-react";
+import { LiveShareHost } from "@microsoft/teams-js";
+
+const host = LiveShareHost.create();
+
+export function LiveShareApp() {
+    // Call app.initialize() from teams-js before rendering LiveShareProvider
+
+    return (
+        <LiveShareProvider
+            joinOnLoad={true}
+            host={host}
+        >
+            <LiveShareLoader>
+                <LiveCheckbox />
+            </LiveShareLoader>
+        </LiveShareProvider>
+    );
+}
+
+// LiveShareLoader.jsx
+import { useLiveShareContext } from "@microsoft/live-share-react";
+
+export function LiveShareLoader({ children }) {
+    const { joined, joinError } = useLiveShareContext();
+
+    if (joinError) return <>{joinError.message}</>;
+    if (!joined) return <>Joining Live Share session...</>;
+    return <>{children}</>
+}
+
+// LiveCheckbox.jsx
+import { useLiveState } from "@microsoft/live-share-react";
+
+export function LiveCheckbox() {
+    const [checked, setChecked] = useLiveState("MY-UNIQUE-ID", false);
+    return (
+        <input
+            type="checkbox"
+            checked={checked}
+            onChange={() => {
+                setChecked(!checked);
+            }}
+        />
+    );
+}
+ ```
+ */
+export declare const LiveShareProvider: React.FC<ILiveShareProviderProps>;
+//# sourceMappingURL=LiveShareProvider.d.ts.map

package/bin/cjs/providers/LiveShareProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveShareProvider.d.ts","sourceRoot":"","sources":["../../../src/providers/LiveShareProvider.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACH,uBAAuB,EACvB,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EAErB,MAAM,uBAAuB,CAAC;AAI/B;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB;IAC9B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,SAAS,EAAE,KAAK,GAAG,SAAS,CAAC;IAC7B;;;OAGG;IACH,iBAAiB,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAClD;;;;;;;;;OASG;IACH,IAAI,EAAE,CACF,oBAAoB,CAAC,EAAE,eAAe,EACtC,qBAAqB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,KAC3D,OAAO,CAAC,qBAAqB,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,kCAE5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,eAAO,MAAM,mBAAmB,QAAO,iBAQtC,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC;;;;;OAKG;IACH,IAAI,EAAE,cAAc,CAAC;IACrB;;OAEG;IACH,oBAAoB,CAAC,EAAE,eAAe,CAAC;IACvC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkG/D,CAAC"}

package/bin/cjs/providers/LiveShareProvider.js

@@ -0,0 +1,205 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LiveShareProvider = exports.useLiveShareContext = exports.LiveShareContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const index_js_1 = require("../shared-hooks/index.js");
+const live_share_1 = require("@microsoft/live-share");
+const AzureProvider_js_1 = require("./AzureProvider.js");
+const index_js_2 = require("../internal/index.js");
+/**
+ * @hidden
+ */
+exports.LiveShareContext = react_1.default.createContext({});
+/**
+ * Hook to get the latest React context state for `LiveShareContext`.
+ *
+ * @remarks
+ * This hook can only be used in a child component of `<LiveShareProvider>`.
+ * See `useFluidObjectsContext` for other information related to the Live Share session, such as the `container`.
+ *
+ * @returns current state of `LiveShareContext`
+ *
+ * @example
+ ```jsx
+// LiveShareApp.jsx
+import { LiveShareProvider } from "@microsoft/live-share-react";
+import { LiveShareHost } from "@microsoft/teams-js";
+
+const host = LiveShareHost.create();
+
+export function LiveShareApp() {
+    // Call app.initialize() from teams-js before rendering LiveShareProvider
+
+    return (
+        <LiveShareProvider
+            joinOnLoad={true}
+            host={host}
+        >
+            <LiveShareLoader>
+                <LiveCheckbox />
+            </LiveShareLoader>
+        </LiveShareProvider>
+    );
+}
+
+// LiveShareLoader.jsx
+import { useLiveShareContext } from "@microsoft/live-share-react";
+
+export function LiveShareLoader({ children }) {
+    const { joined, joinError } = useLiveShareContext();
+
+    if (joinError) return <>{joinError.message}</>;
+    if (!joined) return <>Joining Live Share session...</>;
+    return <>{children}</>
+}
+
+// LiveCheckbox.jsx
+import { useLiveState } from "@microsoft/live-share-react";
+
+export function LiveCheckbox() {
+    const [checked, setChecked] = useLiveState("MY-UNIQUE-ID", false);
+    return (
+        <input
+            type="checkbox"
+            checked={checked}
+            onChange={() => {
+                setChecked(!checked);
+            }}
+        />
+    );
+}
+ ```
+ */
+const useLiveShareContext = () => {
+    const context = react_1.default.useContext(exports.LiveShareContext);
+    if (!isLiveShareContext(context)) {
+        throw new Error("@microsoft/live-share-react: attempting to use `useLiveShareContext()` from a component that is not a child of `<LiveShareProvider>`.\nTo fix this error, ensure that you are only using Live Share hooks (e.g., `useLiveState`) from a child component of `<LiveShareProvider>`.");
+    }
+    return context;
+};
+exports.useLiveShareContext = useLiveShareContext;
+/**
+ * React Context provider component for using Live Share data objects & joining a Live Share session using `LiveShareClient`.
+ *
+ * @example
+ ```jsx
+// LiveShareApp.jsx
+import { LiveShareProvider } from "@microsoft/live-share-react";
+import { LiveShareHost } from "@microsoft/teams-js";
+
+const host = LiveShareHost.create();
+
+export function LiveShareApp() {
+    // Call app.initialize() from teams-js before rendering LiveShareProvider
+
+    return (
+        <LiveShareProvider
+            joinOnLoad={true}
+            host={host}
+        >
+            <LiveShareLoader>
+                <LiveCheckbox />
+            </LiveShareLoader>
+        </LiveShareProvider>
+    );
+}
+
+// LiveShareLoader.jsx
+import { useLiveShareContext } from "@microsoft/live-share-react";
+
+export function LiveShareLoader({ children }) {
+    const { joined, joinError } = useLiveShareContext();
+
+    if (joinError) return <>{joinError.message}</>;
+    if (!joined) return <>Joining Live Share session...</>;
+    return <>{children}</>
+}
+
+// LiveCheckbox.jsx
+import { useLiveState } from "@microsoft/live-share-react";
+
+export function LiveCheckbox() {
+    const [checked, setChecked] = useLiveState("MY-UNIQUE-ID", false);
+    return (
+        <input
+            type="checkbox"
+            checked={checked}
+            onChange={() => {
+                setChecked(!checked);
+            }}
+        />
+    );
+}
+ ```
+ */
+const LiveShareProvider = (props) => {
+    const startedRef = react_1.default.useRef(false);
+    const clientRef = react_1.default.useRef(new live_share_1.LiveShareClient(props.host, props.clientOptions));
+    const [results, setResults] = react_1.default.useState();
+    const [joinError, setJoinError] = react_1.default.useState();
+    const stateRegistryCallbacks = (0, index_js_1.useSharedStateRegistry)(results);
+    /**
+     * Join container callback for joining the Live Share session
+     */
+    const join = react_1.default.useCallback((fluidContainerSchema, onInitializeContainer) => __awaiter(void 0, void 0, void 0, function* () {
+        startedRef.current = true;
+        const results = yield clientRef.current.join(fluidContainerSchema, onInitializeContainer);
+        setResults(results);
+        return results;
+    }), []);
+    /**
+     * Joins the container on load if `props.joinOnLoad` is true
+     */
+    react_1.default.useEffect(() => {
+        // This hook should only be called once, so we use a ref to track if it has been called.
+        // This is a workaround for the fact that useEffect is called twice on initial render in React V18.
+        // We are not doing this here for backwards compatibility. View the README for more information.
+        if (results !== undefined || startedRef.current || !props.joinOnLoad)
+            return;
+        join(props.fluidContainerSchema).catch((error) => {
+            var _a;
+            console.error(error);
+            if (error instanceof Error) {
+                setJoinError(error);
+            }
+            else if ((0, index_js_2.isITeamsJsSdkError)(error)) {
+                setJoinError(new Error(`[${error.errorCode}] ${(_a = error.message) !== null && _a !== void 0 ? _a : "An unknown error occurred while joining container."}`));
+            }
+            else if (typeof error == "string") {
+                setJoinError(new Error(error));
+            }
+            else {
+                setJoinError(new Error("LiveShareProvider: An unknown error occurred while joining container."));
+            }
+        });
+    }, [results, props.joinOnLoad, props.fluidContainerSchema, join]);
+    return ((0, jsx_runtime_1.jsx)(exports.LiveShareContext.Provider, { value: {
+            created: !!(results === null || results === void 0 ? void 0 : results.created),
+            timestampProvider: results === null || results === void 0 ? void 0 : results.timestampProvider,
+            joined: !!(results === null || results === void 0 ? void 0 : results.container),
+            joinError,
+            join,
+        }, children: (0, jsx_runtime_1.jsx)(AzureProvider_js_1.FluidContext.Provider, { value: Object.assign({ clientRef, container: results === null || results === void 0 ? void 0 : results.container, services: results === null || results === void 0 ? void 0 : results.services, joinError, getContainer: () => __awaiter(void 0, void 0, void 0, function* () {
+                    throw new Error("Cannot join new container through getContainer in LiveShareProvider");
+                }), createContainer: () => __awaiter(void 0, void 0, void 0, function* () {
+                    throw new Error("Cannot create new container through createContainer in LiveShareProvider");
+                }) }, stateRegistryCallbacks), children: props.children }) }));
+};
+exports.LiveShareProvider = LiveShareProvider;
+function isLiveShareContext(value) {
+    return (typeof (value === null || value === void 0 ? void 0 : value.created) === "boolean" && typeof (value === null || value === void 0 ? void 0 : value.join) === "function");
+}
+//# sourceMappingURL=LiveShareProvider.js.map

package/bin/cjs/providers/LiveShareProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveShareProvider.js","sourceRoot":"","sources":["../../../src/providers/LiveShareProvider.tsx"],"names":[],"mappings":"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"}

package/bin/cjs/providers/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./AzureProvider.js";
+export * from "./LiveShareProvider.js";
+//# sourceMappingURL=index.d.ts.map

package/bin/cjs/providers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC"}