@foxglove/embed-react 0.1.0

package/README.md

@@ -0,0 +1,9 @@
+# @foxglove/embed-react
+
+This package provides the `<FoxgloveViewer />` component. It wraps the [`FoxgloveViewer` class](https://docs.foxglove.dev/docs/embed/foxglove-embed) to provide a React API for embedding [Foxglove](https://foxglove.dev/) in your application.
+
+See https://docs.foxglove.dev/docs/embed/foxglove-embed-react
+
+## Stay in touch
+
+Join us in [Discord](https://foxglove.dev/chat) to ask questions, share feedback, and stay up to date on what our team is working on.

package/dist/cjs/FoxgloveViewer.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+import { type DataSource, type OpaqueLayoutData } from "@foxglove/embed";
+type Props = {
+    /** The URL where the Foxglove app is hosted. Defaults to `https://embed.foxglove.dev/`. */
+    src?: string;
+    /**
+     * The Foxglove organization the user should be signed into. Passing this parameter is
+     * recommended so the user can be prompted to switch to the correct org if necessary.
+     */
+    orgSlug?: string;
+    /** The data source to visualize in the Foxglove app. */
+    data?: DataSource;
+    /** The layout to use in the Foxglove app. */
+    layoutData?: OpaqueLayoutData;
+    /**
+     * The extensions to install in the Foxglove app.
+     *
+     * This property is not supported by all Foxglove versions and plans, so it may result in an `onError` callback.
+     */
+    extensions?: Array<string | File>;
+    /** The color scheme to use in the Foxglove app. "auto" will use the system color scheme. */
+    colorScheme?: "light" | "dark" | "auto";
+    /** The style to apply to the container. */
+    style?: React.CSSProperties;
+    /** The class name to apply to the container. */
+    className?: string;
+    /** A callback function that is called when the Foxglove app is ready. */
+    onReady?: () => void;
+    /**
+     * A callback function that is called when the Foxglove app encounters an error when trying to
+     * update the data source, layout, or extensions.
+     * */
+    onError?: (errorMsg: string) => void;
+};
+/**
+ * A component that renders an iframe with the Foxglove app.
+ *
+ * This component is a wrapper around the `FoxgloveViewer` class that provides a more
+ * convenient API for embedding the Foxglove app in a React application.
+ */
+export declare function FoxgloveViewer(props: Props): ReactNode;
+export {};
+//# sourceMappingURL=FoxgloveViewer.d.ts.map

package/dist/cjs/FoxgloveViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FoxgloveViewer.d.ts","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,gBAAgB,EACtB,MAAM,iBAAiB,CAAC;AAIzB,KAAK,KAAK,GAAG;IACX,2FAA2F;IAC3F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAClC,4FAA4F;IAC5F,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;SAGK;IACL,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAiGtD"}

package/dist/cjs/FoxgloveViewer.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FoxgloveViewer = FoxgloveViewer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const embed_1 = require("@foxglove/embed");
+const useShouldNotChangeOften_1 = require("./useShouldNotChangeOften");
+/**
+ * A component that renders an iframe with the Foxglove app.
+ *
+ * This component is a wrapper around the `FoxgloveViewer` class that provides a more
+ * convenient API for embedding the Foxglove app in a React application.
+ */
+function FoxgloveViewer(props) {
+    const { src, orgSlug, className, style, data, layoutData, extensions, colorScheme } = props;
+    // eslint-disable-next-line no-restricted-syntax
+    const elem = (0, react_1.useRef)(null);
+    const frame = (0, react_1.useRef)();
+    // Store the callbacks in refs to avoid re-rendering the component when the callbacks change.
+    const onReady = (0, react_1.useRef)(props.onReady ?? undefined);
+    const onError = (0, react_1.useRef)(props.onError ?? undefined);
+    (0, useShouldNotChangeOften_1.useShouldNotChangeOften)(data, () => {
+        console.warn(`[FoxgloveViewer] "data" is changing too frequently. This may cause performance issues, consider memoizing this value.`);
+    });
+    (0, useShouldNotChangeOften_1.useShouldNotChangeOften)(layoutData, () => {
+        console.warn(`[FoxgloveViewer] "layoutData" is changing too frequently. This may cause performance issues, consider memoizing this value.`);
+    });
+    (0, useShouldNotChangeOften_1.useShouldNotChangeOften)(extensions, () => {
+        console.warn(`[FoxgloveViewer] "extensions" is changing too frequently. This may cause performance issues, consider memoizing this value.`);
+    });
+    // Update onReady and onError refs when the props change.
+    (0, react_1.useEffect)(() => {
+        onReady.current = props.onReady;
+    }, [props.onReady]);
+    (0, react_1.useEffect)(() => {
+        onError.current = props.onError;
+    }, [props.onError]);
+    (0, react_1.useEffect)(() => {
+        if (!elem.current) {
+            return;
+        }
+        const handleReady = () => {
+            onReady.current?.();
+        };
+        const handleError = (errorMsg) => {
+            onError.current?.(errorMsg.detail);
+        };
+        frame.current = new embed_1.FoxgloveViewer({
+            parent: elem.current,
+            src,
+            orgSlug,
+        });
+        frame.current.addEventListener("ready", handleReady);
+        frame.current.addEventListener("error", handleError);
+        return () => {
+            frame.current?.removeEventListener("ready", handleReady);
+            frame.current?.removeEventListener("error", handleError);
+            frame.current?.destroy();
+        };
+    }, [src, orgSlug]);
+    (0, react_1.useEffect)(() => {
+        if (data == undefined || frame.current == undefined) {
+            return;
+        }
+        frame.current.setDataSource(data);
+    }, [data]);
+    (0, react_1.useEffect)(() => {
+        if (layoutData == undefined || frame.current == undefined) {
+            return;
+        }
+        frame.current.setLayoutData(layoutData);
+    }, [layoutData]);
+    (0, react_1.useEffect)(() => {
+        if (extensions == undefined || frame.current == undefined) {
+            return;
+        }
+        frame.current.installExtensions(extensions);
+    }, [extensions]);
+    (0, react_1.useEffect)(() => {
+        if (colorScheme == undefined || frame.current == undefined) {
+            return;
+        }
+        frame.current.setColorScheme(colorScheme);
+    }, [colorScheme]);
+    return (0, jsx_runtime_1.jsx)("div", { ref: elem, style: style, className: className });
+}
+//# sourceMappingURL=FoxgloveViewer.js.map

package/dist/cjs/FoxgloveViewer.js.map

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

package/dist/cjs/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FoxgloveViewer";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

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

package/dist/cjs/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FoxgloveViewer"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,2DAAiC"}

package/dist/cjs/tsconfig.build.cjs.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../../src/FoxgloveViewer.tsx","../../src/index.ts","../../src/useShouldNotChangeOften.ts"],"version":"5.9.2"}

package/dist/cjs/useShouldNotChangeOften.d.ts

@@ -0,0 +1,3 @@
+/** Call _warn_ if a given value changes twice within 200 ms */
+export declare function useShouldNotChangeOften<T>(value: T, warn: () => void): T;
+//# sourceMappingURL=useShouldNotChangeOften.d.ts.map

package/dist/cjs/useShouldNotChangeOften.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShouldNotChangeOften.d.ts","sourceRoot":"","sources":["../../src/useShouldNotChangeOften.ts"],"names":[],"mappings":"AAKA,+DAA+D;AAC/D,wBAAgB,uBAAuB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,CAAC,CAexE"}

package/dist/cjs/useShouldNotChangeOften.js

@@ -0,0 +1,22 @@
+"use strict";
+// This file is copied from @foxglove/viz/hooks/useShouldNotChangeOften.ts
+// We copy the file to avoid depending on the viz package.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useShouldNotChangeOften = useShouldNotChangeOften;
+const react_1 = require("react");
+/** Call _warn_ if a given value changes twice within 200 ms */
+function useShouldNotChangeOften(value, warn) {
+    const prev = (0, react_1.useRef)(value);
+    const prevPrev = (0, react_1.useRef)(value);
+    const lastTime = (0, react_1.useRef)(Date.now());
+    if (value !== prev.current &&
+        prev.current !== prevPrev.current &&
+        Date.now() - lastTime.current < 200) {
+        warn();
+    }
+    prevPrev.current = prev.current;
+    prev.current = value;
+    lastTime.current = Date.now();
+    return value;
+}
+//# sourceMappingURL=useShouldNotChangeOften.js.map

package/dist/cjs/useShouldNotChangeOften.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShouldNotChangeOften.js","sourceRoot":"","sources":["../../src/useShouldNotChangeOften.ts"],"names":[],"mappings":";AAAA,0EAA0E;AAC1E,0DAA0D;;AAK1D,0DAeC;AAlBD,iCAA+B;AAE/B,+DAA+D;AAC/D,SAAgB,uBAAuB,CAAI,KAAQ,EAAE,IAAgB;IACnE,MAAM,IAAI,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAC3B,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAC/B,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAS,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5C,IACE,KAAK,KAAK,IAAI,CAAC,OAAO;QACtB,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,OAAO;QACjC,IAAI,CAAC,GAAG,EAAE,GAAG,QAAQ,CAAC,OAAO,GAAG,GAAG,EACnC,CAAC;QACD,IAAI,EAAE,CAAC;IACT,CAAC;IACD,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAChC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IAC9B,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/esm/FoxgloveViewer.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+import { type DataSource, type OpaqueLayoutData } from "@foxglove/embed";
+type Props = {
+    /** The URL where the Foxglove app is hosted. Defaults to `https://embed.foxglove.dev/`. */
+    src?: string;
+    /**
+     * The Foxglove organization the user should be signed into. Passing this parameter is
+     * recommended so the user can be prompted to switch to the correct org if necessary.
+     */
+    orgSlug?: string;
+    /** The data source to visualize in the Foxglove app. */
+    data?: DataSource;
+    /** The layout to use in the Foxglove app. */
+    layoutData?: OpaqueLayoutData;
+    /**
+     * The extensions to install in the Foxglove app.
+     *
+     * This property is not supported by all Foxglove versions and plans, so it may result in an `onError` callback.
+     */
+    extensions?: Array<string | File>;
+    /** The color scheme to use in the Foxglove app. "auto" will use the system color scheme. */
+    colorScheme?: "light" | "dark" | "auto";
+    /** The style to apply to the container. */
+    style?: React.CSSProperties;
+    /** The class name to apply to the container. */
+    className?: string;
+    /** A callback function that is called when the Foxglove app is ready. */
+    onReady?: () => void;
+    /**
+     * A callback function that is called when the Foxglove app encounters an error when trying to
+     * update the data source, layout, or extensions.
+     * */
+    onError?: (errorMsg: string) => void;
+};
+/**
+ * A component that renders an iframe with the Foxglove app.
+ *
+ * This component is a wrapper around the `FoxgloveViewer` class that provides a more
+ * convenient API for embedding the Foxglove app in a React application.
+ */
+export declare function FoxgloveViewer(props: Props): ReactNode;
+export {};
+//# sourceMappingURL=FoxgloveViewer.d.ts.map

package/dist/esm/FoxgloveViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FoxgloveViewer.d.ts","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,gBAAgB,EACtB,MAAM,iBAAiB,CAAC;AAIzB,KAAK,KAAK,GAAG;IACX,2FAA2F;IAC3F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAClC,4FAA4F;IAC5F,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;SAGK;IACL,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAiGtD"}

package/dist/esm/FoxgloveViewer.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { FoxgloveViewer as FoxgloveViewerClass, } from "@foxglove/embed";
+import { useShouldNotChangeOften } from "./useShouldNotChangeOften";
+/**
+ * A component that renders an iframe with the Foxglove app.
+ *
+ * This component is a wrapper around the `FoxgloveViewer` class that provides a more
+ * convenient API for embedding the Foxglove app in a React application.
+ */
+export function FoxgloveViewer(props) {
+    const { src, orgSlug, className, style, data, layoutData, extensions, colorScheme } = props;
+    // eslint-disable-next-line no-restricted-syntax
+    const elem = useRef(null);
+    const frame = useRef();
+    // Store the callbacks in refs to avoid re-rendering the component when the callbacks change.
+    const onReady = useRef(props.onReady ?? undefined);
+    const onError = useRef(props.onError ?? undefined);
+    useShouldNotChangeOften(data, () => {
+        console.warn(`[FoxgloveViewer] "data" is changing too frequently. This may cause performance issues, consider memoizing this value.`);
+    });
+    useShouldNotChangeOften(layoutData, () => {
+        console.warn(`[FoxgloveViewer] "layoutData" is changing too frequently. This may cause performance issues, consider memoizing this value.`);
+    });
+    useShouldNotChangeOften(extensions, () => {
+        console.warn(`[FoxgloveViewer] "extensions" is changing too frequently. This may cause performance issues, consider memoizing this value.`);
+    });
+    // Update onReady and onError refs when the props change.
+    useEffect(() => {
+        onReady.current = props.onReady;
+    }, [props.onReady]);
+    useEffect(() => {
+        onError.current = props.onError;
+    }, [props.onError]);
+    useEffect(() => {
+        if (!elem.current) {
+            return;
+        }
+        const handleReady = () => {
+            onReady.current?.();
+        };
+        const handleError = (errorMsg) => {
+            onError.current?.(errorMsg.detail);
+        };
+        frame.current = new FoxgloveViewerClass({
+            parent: elem.current,
+            src,
+            orgSlug,
+        });
+        frame.current.addEventListener("ready", handleReady);
+        frame.current.addEventListener("error", handleError);
+        return () => {
+            frame.current?.removeEventListener("ready", handleReady);
+            frame.current?.removeEventListener("error", handleError);
+            frame.current?.destroy();
+        };
+    }, [src, orgSlug]);
+    useEffect(() => {
+        if (data == undefined || frame.current == undefined) {
+            return;
+        }
+        frame.current.setDataSource(data);
+    }, [data]);
+    useEffect(() => {
+        if (layoutData == undefined || frame.current == undefined) {
+            return;
+        }
+        frame.current.setLayoutData(layoutData);
+    }, [layoutData]);
+    useEffect(() => {
+        if (extensions == undefined || frame.current == undefined) {
+            return;
+        }
+        frame.current.installExtensions(extensions);
+    }, [extensions]);
+    useEffect(() => {
+        if (colorScheme == undefined || frame.current == undefined) {
+            return;
+        }
+        frame.current.setColorScheme(colorScheme);
+    }, [colorScheme]);
+    return _jsx("div", { ref: elem, style: style, className: className });
+}
+//# sourceMappingURL=FoxgloveViewer.js.map

package/dist/esm/FoxgloveViewer.js.map

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

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FoxgloveViewer";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

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

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from "./FoxgloveViewer";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/esm/tsconfig.build.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../../src/FoxgloveViewer.tsx","../../src/index.ts","../../src/useShouldNotChangeOften.ts"],"version":"5.9.2"}

package/dist/esm/useShouldNotChangeOften.d.ts

@@ -0,0 +1,3 @@
+/** Call _warn_ if a given value changes twice within 200 ms */
+export declare function useShouldNotChangeOften<T>(value: T, warn: () => void): T;
+//# sourceMappingURL=useShouldNotChangeOften.d.ts.map

package/dist/esm/useShouldNotChangeOften.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShouldNotChangeOften.d.ts","sourceRoot":"","sources":["../../src/useShouldNotChangeOften.ts"],"names":[],"mappings":"AAKA,+DAA+D;AAC/D,wBAAgB,uBAAuB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,CAAC,CAexE"}

package/dist/esm/useShouldNotChangeOften.js

@@ -0,0 +1,19 @@
+// This file is copied from @foxglove/viz/hooks/useShouldNotChangeOften.ts
+// We copy the file to avoid depending on the viz package.
+import { useRef } from "react";
+/** Call _warn_ if a given value changes twice within 200 ms */
+export function useShouldNotChangeOften(value, warn) {
+    const prev = useRef(value);
+    const prevPrev = useRef(value);
+    const lastTime = useRef(Date.now());
+    if (value !== prev.current &&
+        prev.current !== prevPrev.current &&
+        Date.now() - lastTime.current < 200) {
+        warn();
+    }
+    prevPrev.current = prev.current;
+    prev.current = value;
+    lastTime.current = Date.now();
+    return value;
+}
+//# sourceMappingURL=useShouldNotChangeOften.js.map

package/dist/esm/useShouldNotChangeOften.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShouldNotChangeOften.js","sourceRoot":"","sources":["../../src/useShouldNotChangeOften.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,0DAA0D;AAE1D,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,+DAA+D;AAC/D,MAAM,UAAU,uBAAuB,CAAI,KAAQ,EAAE,IAAgB;IACnE,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3B,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/B,MAAM,QAAQ,GAAG,MAAM,CAAS,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5C,IACE,KAAK,KAAK,IAAI,CAAC,OAAO;QACtB,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,OAAO;QACjC,IAAI,CAAC,GAAG,EAAE,GAAG,QAAQ,CAAC,OAAO,GAAG,GAAG,EACnC,CAAC;QACD,IAAI,EAAE,CAAC;IACT,CAAC;IACD,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAChC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IAC9B,OAAO,KAAK,CAAC;AACf,CAAC"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@foxglove/embed-react",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": {
+    "name": "Foxglove Technologies",
+    "email": "support@foxglove.dev"
+  },
+  "keywords": [
+    "foxglove",
+    "robotics",
+    "ros",
+    "visualization",
+    "react"
+  ],
+  "homepage": "https://foxglove.dev/",
+  "module": "dist/esm/index.js",
+  "main": "dist/cjs/index.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "prepack": "yarn build",
+    "build": "yarn workspace @foxglove/embed build && tsc -b tsconfig.build.json tsconfig.build.cjs.json"
+  },
+  "dependencies": {
+    "@foxglove/embed": "workspace:*",
+    "tslib": "2.8.1"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@foxglove/tsconfig": "2.0.0",
+    "@types/react": "18.3.5",
+    "typescript": "5.9.2"
+  }
+}

package/src/FoxgloveViewer.tsx

@@ -0,0 +1,150 @@
+// foxglove-depcheck-used: tslib
+
+import type { ReactNode } from "react";
+import { useEffect, useRef } from "react";
+
+import {
+  type DataSource,
+  FoxgloveViewer as FoxgloveViewerClass,
+  type OpaqueLayoutData,
+} from "@foxglove/embed";
+
+import { useShouldNotChangeOften } from "./useShouldNotChangeOften";
+
+type Props = {
+  /** The URL where the Foxglove app is hosted. Defaults to `https://embed.foxglove.dev/`. */
+  src?: string;
+  /**
+   * The Foxglove organization the user should be signed into. Passing this parameter is
+   * recommended so the user can be prompted to switch to the correct org if necessary.
+   */
+  orgSlug?: string;
+  /** The data source to visualize in the Foxglove app. */
+  data?: DataSource;
+  /** The layout to use in the Foxglove app. */
+  layoutData?: OpaqueLayoutData;
+  /**
+   * The extensions to install in the Foxglove app.
+   *
+   * This property is not supported by all Foxglove versions and plans, so it may result in an `onError` callback.
+   */
+  extensions?: Array<string | File>;
+  /** The color scheme to use in the Foxglove app. "auto" will use the system color scheme. */
+  colorScheme?: "light" | "dark" | "auto";
+  /** The style to apply to the container. */
+  style?: React.CSSProperties;
+  /** The class name to apply to the container. */
+  className?: string;
+  /** A callback function that is called when the Foxglove app is ready. */
+  onReady?: () => void;
+  /**
+   * A callback function that is called when the Foxglove app encounters an error when trying to
+   * update the data source, layout, or extensions.
+   * */
+  onError?: (errorMsg: string) => void;
+};
+
+/**
+ * A component that renders an iframe with the Foxglove app.
+ *
+ * This component is a wrapper around the `FoxgloveViewer` class that provides a more
+ * convenient API for embedding the Foxglove app in a React application.
+ */
+export function FoxgloveViewer(props: Props): ReactNode {
+  const { src, orgSlug, className, style, data, layoutData, extensions, colorScheme } = props;
+
+  // eslint-disable-next-line no-restricted-syntax
+  const elem = useRef<HTMLIFrameElement | null>(null);
+  const frame = useRef<FoxgloveViewerClass>();
+
+  // Store the callbacks in refs to avoid re-rendering the component when the callbacks change.
+  const onReady = useRef<(() => void) | undefined>(props.onReady ?? undefined);
+  const onError = useRef<((errorMsg: string) => void) | undefined>(props.onError ?? undefined);
+
+  useShouldNotChangeOften(data, () => {
+    console.warn(
+      `[FoxgloveViewer] "data" is changing too frequently. This may cause performance issues, consider memoizing this value.`,
+    );
+  });
+
+  useShouldNotChangeOften(layoutData, () => {
+    console.warn(
+      `[FoxgloveViewer] "layoutData" is changing too frequently. This may cause performance issues, consider memoizing this value.`,
+    );
+  });
+
+  useShouldNotChangeOften(extensions, () => {
+    console.warn(
+      `[FoxgloveViewer] "extensions" is changing too frequently. This may cause performance issues, consider memoizing this value.`,
+    );
+  });
+
+  // Update onReady and onError refs when the props change.
+  useEffect(() => {
+    onReady.current = props.onReady;
+  }, [props.onReady]);
+  useEffect(() => {
+    onError.current = props.onError;
+  }, [props.onError]);
+
+  useEffect(() => {
+    if (!elem.current) {
+      return;
+    }
+
+    const handleReady = () => {
+      onReady.current?.();
+    };
+    const handleError = (errorMsg: CustomEvent<string>) => {
+      onError.current?.(errorMsg.detail);
+    };
+
+    frame.current = new FoxgloveViewerClass({
+      parent: elem.current,
+      src,
+      orgSlug,
+    });
+    frame.current.addEventListener("ready", handleReady);
+    frame.current.addEventListener("error", handleError);
+
+    return () => {
+      frame.current?.removeEventListener("ready", handleReady);
+      frame.current?.removeEventListener("error", handleError);
+      frame.current?.destroy();
+    };
+  }, [src, orgSlug]);
+
+  useEffect(() => {
+    if (data == undefined || frame.current == undefined) {
+      return;
+    }
+
+    frame.current.setDataSource(data);
+  }, [data]);
+
+  useEffect(() => {
+    if (layoutData == undefined || frame.current == undefined) {
+      return;
+    }
+
+    frame.current.setLayoutData(layoutData);
+  }, [layoutData]);
+
+  useEffect(() => {
+    if (extensions == undefined || frame.current == undefined) {
+      return;
+    }
+
+    frame.current.installExtensions(extensions);
+  }, [extensions]);
+
+  useEffect(() => {
+    if (colorScheme == undefined || frame.current == undefined) {
+      return;
+    }
+
+    frame.current.setColorScheme(colorScheme);
+  }, [colorScheme]);
+
+  return <div ref={elem} style={style} className={className} />;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./FoxgloveViewer";

package/src/useShouldNotChangeOften.ts

@@ -0,0 +1,22 @@
+// This file is copied from @foxglove/viz/hooks/useShouldNotChangeOften.ts
+// We copy the file to avoid depending on the viz package.
+
+import { useRef } from "react";
+
+/** Call _warn_ if a given value changes twice within 200 ms */
+export function useShouldNotChangeOften<T>(value: T, warn: () => void): T {
+  const prev = useRef(value);
+  const prevPrev = useRef(value);
+  const lastTime = useRef<number>(Date.now());
+  if (
+    value !== prev.current &&
+    prev.current !== prevPrev.current &&
+    Date.now() - lastTime.current < 200
+  ) {
+    warn();
+  }
+  prevPrev.current = prev.current;
+  prev.current = value;
+  lastTime.current = Date.now();
+  return value;
+}