@veltdev/react 4.6.0-beta.1 → 4.6.0-beta.2

package/cjs/types/constants.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const VELT_SDK_VERSION = "4.6.0-beta.1";
+export declare const VELT_SDK_VERSION = "4.6.0-beta.2";
 export declare const VELT_SDK_INIT_EVENT = "onVeltInit";
 export declare const VELT_TAB_ID = "veltTabId";
 export declare const INTEGRITY_MAP: Record<string, string>;

package/cjs/types/utils/propUtils.d.ts

@@ -3,3 +3,10 @@ export declare const transformWireframeProps: (props: {
 }) => {
     [key: string]: any;
 };
+/**
+ * To deep compare two objects.
+ * @param arg1 object 1
+ * @param arg2 object 2
+ * @returns true if both objects are equal, false otherwise
+ */
+export declare const deepCompare: (arg1: any, arg2: any) => any;

package/esm/index.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect, useRef, useMemo } from 'react';
+import React, { createContext, useContext, useState, useRef, useEffect, useMemo } from 'react';
 import { flushSync } from 'react-dom';
 
 /******************************************************************************
@@ -137,18 +137,78 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain, integ
     }
 };
 
-var VELT_SDK_VERSION = '4.6.0-beta.1';
+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.6.0-beta.1': 'sha384-JTbW/nmhPvyQyQBXASPMBZ93/7NqYXcqb2pIV9ejr6jQHNQpSMR8rihlSRyZuorA',
+    '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 = useState(null), client = _a[0], setClient = _a[1];
+    var prevAuthProviderRef = useRef(undefined);
+    var prevUserDataProviderRef = useRef(undefined);
+    var prevDataProvidersRef = useRef(undefined);
+    var prevPermissionProviderRef = useRef(undefined);
     useEffect(function () {
         if (apiKey) {
             var staging = config === null || config === void 0 ? void 0 : config.staging;
@@ -174,16 +234,36 @@ var SnippylyProvider = function (props) {
         }
     }, []);
     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]);
     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]);
@@ -195,14 +275,34 @@ var SnippylyProvider = function (props) {
         }
     }, [client, encryptionProvider]);
     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]);
     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]);
@@ -1543,37 +1643,6 @@ var VeltWireframe = function (props) {
     return (React.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);