@veltdev/react 4.5.9 → 4.6.0-beta.2

package/cjs/index.js

@@ -145,18 +145,78 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain, integ
     }
 };
 
-var VELT_SDK_VERSION = '4.5.9';
+var VELT_SDK_VERSION = '4.6.0-beta.2';
 var VELT_SDK_INIT_EVENT = 'onVeltInit';
 var VELT_TAB_ID = 'veltTabId';
 // integrity map for the Velt SDK
 // Note: generate integrity hashes with: https://www.srihash.org/
 var INTEGRITY_MAP = {
-    '4.5.9': 'sha384-dBr6zZx7nOz3mb9LWGSL9Oq67bjc55OcjEBXvUvKpLSDcc/QMohP7bn+KcBaPXZw',
+    '4.6.0-beta.2': 'sha384-41x97x3xSGab/Dq34QMkc5JBQo0LyNpWETn21C3UbdJO1qink0t99J3j/Xl3G3H9',
+};
+
+var validProps = ['veltIf', 'veltClass', 'className', 'variant'];
+var transformWireframeProps = function (props) {
+    try {
+        var transformedProps_1 = {};
+        Object.entries(props).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            if (key === 'children' || key === 'ref' || !validProps.includes(key)) {
+                transformedProps_1[key] = value;
+                return;
+            }
+            if (key === 'className') {
+                transformedProps_1['class'] = value;
+                return;
+            }
+            // Convert camelCase to dash-case
+            var dashKey = key.replace(/[A-Z]/g, function (letter) { return "-".concat(letter.toLowerCase()); });
+            transformedProps_1[dashKey] = value;
+            // // Handle boolean values - only convert if explicitly true/false
+            // if (typeof value === 'boolean') {
+            //     transformedProps[dashKey] = [true, false].includes(value) ? (value ? 'true' : 'false') : undefined;
+            // } else {
+            //     transformedProps[dashKey] = value;
+            // }
+        });
+        return transformedProps_1;
+    }
+    catch (error) {
+        return props;
+    }
+};
+/**
+ * To deep compare two objects.
+ * @param arg1 object 1
+ * @param arg2 object 2
+ * @returns true if both objects are equal, false otherwise
+ */
+var deepCompare = function (arg1, arg2) {
+    try {
+        if (Object.prototype.toString.call(arg1) === Object.prototype.toString.call(arg2)) {
+            if (Object.prototype.toString.call(arg1) === '[object Object]' || Object.prototype.toString.call(arg1) === '[object Array]') {
+                if (Object.keys(arg1).length !== Object.keys(arg2).length) {
+                    return false;
+                }
+                return (Object.keys(arg1).every(function (key) {
+                    return deepCompare(arg1[key], arg2[key]);
+                }));
+            }
+            return (arg1 === arg2);
+        }
+        return false;
+    }
+    catch (err) {
+        return false;
+    }
 };
 
 var SnippylyProvider = function (props) {
     var apiKey = props.apiKey, user = props.user, config = props.config, documentId = props.documentId, language = props.language, translations = props.translations, autoTranslation = props.autoTranslation, userDataProvider = props.userDataProvider, dataProviders = props.dataProviders, encryptionProvider = props.encryptionProvider, authProvider = props.authProvider, permissionProvider = props.permissionProvider, onClientLoad = props.onClientLoad, children = props.children;
     var _a = React.useState(null), client = _a[0], setClient = _a[1];
+    var prevAuthProviderRef = React.useRef(undefined);
+    var prevUserDataProviderRef = React.useRef(undefined);
+    var prevDataProvidersRef = React.useRef(undefined);
+    var prevPermissionProviderRef = React.useRef(undefined);
     React.useEffect(function () {
         if (apiKey) {
             var staging = config === null || config === void 0 ? void 0 : config.staging;
@@ -182,16 +242,36 @@ var SnippylyProvider = function (props) {
         }
     }, []);
     React.useEffect(function () {
-        if (client && userDataProvider) {
-            if (typeof (client === null || client === void 0 ? void 0 : client.setUserDataProvider) === "function") {
-                client === null || client === void 0 ? void 0 : client.setUserDataProvider(userDataProvider);
+        if (!deepCompare(prevUserDataProviderRef.current, userDataProvider)) {
+            if (client && userDataProvider) {
+                if (typeof (client === null || client === void 0 ? void 0 : client.setUserDataProvider) === "function") {
+                    client === null || client === void 0 ? void 0 : client.setUserDataProvider(userDataProvider);
+                }
+                prevUserDataProviderRef.current = userDataProvider;
+            }
+            else {
+                // Only update ref to undefined if client is available (to track removal)
+                // If client is not available, keep old ref so we can set provider when client becomes available
+                if (client) {
+                    prevUserDataProviderRef.current = userDataProvider;
+                }
             }
         }
     }, [client, userDataProvider]);
     React.useEffect(function () {
-        if (client && dataProviders) {
-            if (typeof (client === null || client === void 0 ? void 0 : client.setDataProviders) === "function") {
-                client === null || client === void 0 ? void 0 : client.setDataProviders(dataProviders);
+        if (!deepCompare(prevDataProvidersRef.current, dataProviders)) {
+            if (client && dataProviders) {
+                if (typeof (client === null || client === void 0 ? void 0 : client.setDataProviders) === "function") {
+                    client === null || client === void 0 ? void 0 : client.setDataProviders(dataProviders);
+                }
+                prevDataProvidersRef.current = dataProviders;
+            }
+            else {
+                // Only update ref to undefined if client is available (to track removal)
+                // If client is not available, keep old ref so we can set provider when client becomes available
+                if (client) {
+                    prevDataProvidersRef.current = dataProviders;
+                }
             }
         }
     }, [client, dataProviders]);
@@ -203,14 +283,34 @@ var SnippylyProvider = function (props) {
         }
     }, [client, encryptionProvider]);
     React.useEffect(function () {
-        if (client && authProvider && authProvider.user) {
-            client.setVeltAuthProvider(authProvider);
+        if (!deepCompare(prevAuthProviderRef.current, authProvider)) {
+            if (client && authProvider && authProvider.user) {
+                client.setVeltAuthProvider(authProvider);
+                prevAuthProviderRef.current = authProvider;
+            }
+            else {
+                // Only update ref to undefined if client is available (to track removal)
+                // If client is not available, keep old ref so we can set provider when client becomes available
+                if (client) {
+                    prevAuthProviderRef.current = authProvider;
+                }
+            }
         }
     }, [client, authProvider]);
     React.useEffect(function () {
-        if (client && permissionProvider) {
-            if (typeof (client === null || client === void 0 ? void 0 : client.setPermissionProvider) === "function") {
-                client === null || client === void 0 ? void 0 : client.setPermissionProvider(permissionProvider);
+        if (!deepCompare(prevPermissionProviderRef.current, permissionProvider)) {
+            if (client && permissionProvider) {
+                if (typeof (client === null || client === void 0 ? void 0 : client.setPermissionProvider) === "function") {
+                    client === null || client === void 0 ? void 0 : client.setPermissionProvider(permissionProvider);
+                }
+                prevPermissionProviderRef.current = permissionProvider;
+            }
+            else {
+                // Only update ref to undefined if client is available (to track removal)
+                // If client is not available, keep old ref so we can set provider when client becomes available
+                if (client) {
+                    prevPermissionProviderRef.current = permissionProvider;
+                }
             }
         }
     }, [client, permissionProvider]);
@@ -1551,37 +1651,6 @@ var VeltWireframe = function (props) {
     return (React__default["default"].createElement("velt-wireframe", { style: { display: 'none' } }, children));
 };
 
-var validProps = ['veltIf', 'veltClass', 'className', 'variant'];
-var transformWireframeProps = function (props) {
-    try {
-        var transformedProps_1 = {};
-        Object.entries(props).forEach(function (_a) {
-            var key = _a[0], value = _a[1];
-            if (key === 'children' || key === 'ref' || !validProps.includes(key)) {
-                transformedProps_1[key] = value;
-                return;
-            }
-            if (key === 'className') {
-                transformedProps_1['class'] = value;
-                return;
-            }
-            // Convert camelCase to dash-case
-            var dashKey = key.replace(/[A-Z]/g, function (letter) { return "-".concat(letter.toLowerCase()); });
-            transformedProps_1[dashKey] = value;
-            // // Handle boolean values - only convert if explicitly true/false
-            // if (typeof value === 'boolean') {
-            //     transformedProps[dashKey] = [true, false].includes(value) ? (value ? 'true' : 'false') : undefined;
-            // } else {
-            //     transformedProps[dashKey] = value;
-            // }
-        });
-        return transformedProps_1;
-    }
-    catch (error) {
-        return props;
-    }
-};
-
 var VeltCommentDialogAllComment = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     var transformedProps = transformWireframeProps(remainingProps);
@@ -6163,6 +6232,32 @@ function useUiState() {
         setUiState: setUiState
     };
 }
+function useHeartbeat(heartbeatConfig) {
+    var client = useVeltClient().client;
+    var _a = React__default["default"].useState({ data: null }), data = _a[0], setData = _a[1];
+    var memoizedConfig = React__default["default"].useMemo(function () { return heartbeatConfig; }, [JSON.stringify(heartbeatConfig)]);
+    var subscriptionRef = React__default["default"].useRef();
+    React__default["default"].useEffect(function () {
+        if (!(client === null || client === void 0 ? void 0 : client.getHeartbeat))
+            return;
+        // Unsubscribe from the previous subscription if it exists
+        if (subscriptionRef.current) {
+            subscriptionRef.current.unsubscribe();
+        }
+        var subscription = client.getHeartbeat(memoizedConfig).subscribe(function (res) {
+            setData(res);
+        });
+        // Store the new subscription
+        subscriptionRef.current = subscription;
+        // Cleanup function
+        return function () {
+            if (subscriptionRef.current) {
+                subscriptionRef.current.unsubscribe();
+            }
+        };
+    }, [client === null || client === void 0 ? void 0 : client.getHeartbeat, memoizedConfig]);
+    return data;
+}
 
 function useCommentUtils() {
     var _a = React__default["default"].useState(), commentElement = _a[0], setCommentElement = _a[1];
@@ -8023,6 +8118,7 @@ exports.useGetComment = useGetComment;
 exports.useGetCommentAnnotations = useGetCommentAnnotations;
 exports.useGetLink = useGetLink;
 exports.useGetRecording = useGetRecording;
+exports.useHeartbeat = useHeartbeat;
 exports.useHuddleUtils = useHuddleUtils;
 exports.useIdentify = useIdentify;
 exports.useLiveSelectionDataHandler = useLiveSelectionDataHandler;