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

package/cjs/index.js

@@ -145,18 +145,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.3';
 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.3': 'sha384-I43R8H4FvLLkIXuBB7IuEflos7YyuglKuuyslDHH5LpLCUqVK78p1Rh01hbkBxg0',
+};
+
+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);