@veltdev/react 5.0.0-beta.1 → 5.0.0-beta.10

package/cjs/index.js

@@ -100,12 +100,44 @@ function useVeltClient() {
     return React.useContext(VeltContext);
 }
 
+/**
+ * Loads the Velt script dynamically and calls the callback when ready.
+ * Returns a cleanup function to remove the event listener if component unmounts.
+ *
+ * ## Issue (Rapid Mount/Unmount with Slow Network)
+ *
+ * When VeltProvider is rapidly mounted/unmounted (e.g., conditional rendering,
+ * React Strict Mode, or route changes) while the Velt script is still loading
+ * over a slow network, multiple issues can occur:
+ *
+ * 1. First component mount creates the script tag and starts loading
+ * 2. Component unmounts before script loads (script tag remains in DOM)
+ * 3. Second component mount finds existing script tag
+ * 4. OLD BEHAVIOR: Immediately triggered callback assuming script was loaded
+ * 5. PROBLEM: Script wasn't actually loaded yet (still loading due to network delay)
+ * 6. This caused initVelt to run with window.Velt = undefined
+ *
+ * ## Fix
+ *
+ * 1. Check if window.Velt exists before triggering callback for existing scripts
+ * 2. If script tag exists but window.Velt doesn't, attach a new load event listener
+ * 3. Return a cleanup function that removes the event listener when component unmounts
+ * 4. This prevents orphaned callbacks from firing on destroyed component instances
+ *
+ * @returns Cleanup function to remove event listener (call on component unmount)
+ */
 var loadVelt = function (callback, version, staging, develop, proxyDomain, integrity, integrityValue) {
     if (version === void 0) { version = 'latest'; }
     if (staging === void 0) { staging = false; }
     if (develop === void 0) { develop = false; }
     var existingScript = document.getElementById('veltScript');
+    // Store reference to the handler so we can remove it on cleanup.
+    // This is essential for proper cleanup - we need the exact same function
+    // reference to remove the event listener later.
+    var loadHandler = null;
+    var scriptElement = null;
     if (!existingScript) {
+        // No script tag exists - this is the first component to request Velt
         var script = document.createElement('script');
         if (staging) {
             script.src = "https://us-central1-snipply-sdk-staging.cloudfunctions.net/getprivatenpmpackagefile?packageName=sdk-staging&packageVersion=".concat((!version || version === 'latest') ? '1.0.1' : version, "&filePath=velt.js&orgName=@veltdev");
@@ -132,26 +164,61 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain, integ
             script.crossOrigin = 'anonymous';
         }
         document.body.appendChild(script);
-        script.onload = function () {
+        // Create handler and store reference for cleanup.
+        // We store the reference so we can remove this exact listener on cleanup.
+        loadHandler = function () {
             if (callback) {
                 callback();
             }
         };
+        scriptElement = script;
+        script.addEventListener('load', loadHandler);
     }
     else {
-        if (callback) {
-            callback();
+        // Script tag already exists in DOM (created by a previous component instance).
+        // We need to check if it's actually finished loading or still in progress.
+        if (window.Velt) {
+            // Script has finished loading - window.Velt is available.
+            // Trigger callback directly without attaching any event listener.
+            if (callback) {
+                callback();
+            }
+        }
+        else {
+            // IMPORTANT: Script tag exists but window.Velt is undefined.
+            // This means the script is still loading (slow network scenario).
+            // 
+            // Previous bug: We used to trigger callback immediately here,
+            // which caused initVelt to run with window.Velt = undefined.
+            // 
+            // Fix: Attach a load event listener to wait for the script to finish loading.
+            // Using addEventListener (not onload) to avoid overwriting existing handlers.
+            loadHandler = function () {
+                if (callback) {
+                    callback();
+                }
+            };
+            scriptElement = existingScript;
+            existingScript.addEventListener('load', loadHandler);
         }
     }
+    // Return cleanup function to remove event listener when component unmounts.
+    // This prevents the callback from firing on destroyed component instances,
+    // which would cause React state updates on unmounted components.
+    return function () {
+        if (loadHandler && scriptElement) {
+            scriptElement.removeEventListener('load', loadHandler);
+        }
+    };
 };
 
-var VELT_SDK_VERSION = '5.0.0-beta.1';
+var VELT_SDK_VERSION = '5.0.0-beta.10';
 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 = {
-    '5.0.0-beta.1': 'sha384-fMN3ZF/Xls6kPb0BgrFjPT+Vy4pbJf6UttL5aF1sfdY0xfdp/kSpxdLeirA6H3II',
+    '5.0.0-beta.10': 'sha384-lfrhhXJI+7qwt11axkvxSE3P5wrcprWI2qU28Y3nIiSlfZ9E9QV9zAUsXffx7e01',
 };
 
 var validProps = ['veltIf', 'veltClass', 'className', 'variant'];
@@ -217,7 +284,43 @@ var SnippylyProvider = function (props) {
     var prevUserDataProviderRef = React.useRef(undefined);
     var prevDataProvidersRef = React.useRef(undefined);
     var prevPermissionProviderRef = React.useRef(undefined);
+    /**
+     * Tracks whether the component is currently mounted.
+     * Used to prevent state updates and async operations on unmounted components.
+     *
+     * ## Issue (Rapid Mount/Unmount)
+     * When VeltProvider is rapidly mounted/unmounted (e.g., conditional rendering
+     * based on state changes, React Strict Mode, or route transitions), multiple
+     * component instances can have async operations (like Velt.init()) in flight.
+     * When these async operations complete, they try to call setClient() on
+     * unmounted component instances, causing React warnings and incorrect state.
+     *
+     * ## Fix
+     * Track mount state and check it before/after async operations to bail out
+     * if the component has been unmounted.
+     */
+    var isMountedRef = React.useRef(true);
+    React.useEffect(function () {
+        // IMPORTANT: Reset isMountedRef to true on every mount/remount.
+        // This is critical for React Strict Mode which simulates unmount/remount:
+        // 
+        // React Strict Mode sequence:
+        // 1. Mount → isMountedRef = true (initial value)
+        // 2. Effect runs
+        // 3. Strict Mode simulates unmount → cleanup sets isMountedRef = false
+        // 4. Strict Mode simulates remount → effect runs again
+        // 
+        // Without this reset, step 4 would still see isMountedRef = false from step 3,
+        // causing initVelt to skip even though the component is actually mounted.
+        isMountedRef.current = true;
+        // Cleanup: mark component as unmounted
+        return function () {
+            isMountedRef.current = false;
+        };
+    }, []);
     React.useEffect(function () {
+        // Store cleanup function returned from loadVelt to remove event listeners on unmount
+        var cleanupLoadVelt;
         if (apiKey) {
             var staging = config === null || config === void 0 ? void 0 : config.staging;
             var develop = config === null || config === void 0 ? void 0 : config.develop;
@@ -236,10 +339,34 @@ var SnippylyProvider = function (props) {
                     }
                 }
             }
-            loadVelt(function () {
+            // Rapid mount/unmount issue found in OpenEnvoy client code with slow network.
+            // 
+            // Scenario: VeltProvider is conditionally rendered and toggles rapidly while
+            // the Velt script is loading over a slow network connection.
+            // 
+            // We check if Velt is already loaded (window.Velt exists) and call initVelt
+            // directly. If not loaded, we call loadVelt which handles the script loading
+            // and returns a cleanup function to remove event listeners.
+            if (window === null || window === void 0 ? void 0 : window.Velt) {
                 initVelt();
-            }, version, staging, develop, config === null || config === void 0 ? void 0 : config.proxyDomain, integrity, integrityValue);
+            }
+            else {
+                // loadVelt returns a cleanup function that removes the load event listener.
+                // This prevents the callback from firing on destroyed component instances.
+                cleanupLoadVelt = loadVelt(function () {
+                    initVelt();
+                }, version, staging, develop, config === null || config === void 0 ? void 0 : config.proxyDomain, integrity, integrityValue);
+            }
         }
+        // Cleanup: remove event listener when component unmounts.
+        // This is critical for rapid mount/unmount scenarios - without this cleanup,
+        // the load callback would fire on destroyed component instances and try to
+        // call initVelt, which would then try to update state on an unmounted component.
+        return function () {
+            if (cleanupLoadVelt) {
+                cleanupLoadVelt();
+            }
+        };
     }, []);
     React.useEffect(function () {
         if (!deepCompare(prevUserDataProviderRef.current, userDataProvider)) {
@@ -314,12 +441,29 @@ var SnippylyProvider = function (props) {
             }
         }
     }, [client, permissionProvider]);
+    /**
+     * Initializes the Velt SDK with proper mount state checks.
+     *
+     * ## Async Safety Pattern
+     * This function contains async operations (Velt.init). During the await,
+     * the component might unmount. We must check isMountedRef:
+     * 1. BEFORE starting - skip if already unmounted
+     * 2. AFTER await completes - abort if unmounted during the wait
+     *
+     * Without these checks, setClient() would be called on unmounted components,
+     * causing React warnings and potential memory leaks.
+     */
     var initVelt = function () { return __awaiter(void 0, void 0, void 0, function () {
         var velt, event;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
+                    // CHECK 1: Skip initialization if component has already been unmounted.
+                    // This handles the case where cleanup ran before initVelt was called.
+                    if (!isMountedRef.current) {
+                        return [2 /*return*/];
+                    }
                     if (!config) return [3 /*break*/, 2];
                     if (config.staging) {
                         delete config.staging;
@@ -342,6 +486,13 @@ var SnippylyProvider = function (props) {
                     velt = _c.sent();
                     _c.label = 4;
                 case 4:
+                    // CHECK 2: Abort if component unmounted during the await.
+                    // Velt.init() is async and can take time. The component might have
+                    // been unmounted while we were waiting. Check again before proceeding
+                    // with state updates and side effects.
+                    if (!isMountedRef.current) {
+                        return [2 /*return*/];
+                    }
                     // Set language
                     if (language && (velt === null || velt === void 0 ? void 0 : velt.setLanguage)) {
                         velt === null || velt === void 0 ? void 0 : velt.setLanguage(language);
@@ -1625,8 +1776,8 @@ var VeltInlineReactionsSection = function (props) {
 };
 
 var VeltCommentComposer = function (props) {
-    var darkMode = props.darkMode, variant = props.variant, shadowDom = props.shadowDom, dialogVariant = props.dialogVariant, context = props.context, locationId = props.locationId, documentId = props.documentId, folderId = props.folderId;
-    return (React__default["default"].createElement("velt-comment-composer", { variant: variant, "dialog-variant": dialogVariant, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, context: context ? JSON.stringify(context) : undefined, "location-id": locationId, "document-id": documentId, "folder-id": folderId }));
+    var darkMode = props.darkMode, variant = props.variant, shadowDom = props.shadowDom, dialogVariant = props.dialogVariant, context = props.context, locationId = props.locationId, documentId = props.documentId, folderId = props.folderId, placeholder = props.placeholder, targetElementId = props.targetElementId;
+    return (React__default["default"].createElement("velt-comment-composer", { variant: variant, "dialog-variant": dialogVariant, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, context: context ? JSON.stringify(context) : undefined, "location-id": locationId, "document-id": documentId, "folder-id": folderId, placeholder: placeholder, "target-element-id": targetElementId }));
 };
 
 var VeltSingleEditorModePanel = function (props) {
@@ -1647,9 +1798,9 @@ var VeltVideoEditor = function (props) {
 };
 
 var VeltCommentDialog = function (props) {
-    var annotationId = props.annotationId, defaultCondition = props.defaultCondition, inlineCommentSectionMode = props.inlineCommentSectionMode, commentPinSelected = props.commentPinSelected, fullExpanded = props.fullExpanded, shadowDom = props.shadowDom, children = props.children;
+    var annotationId = props.annotationId, defaultCondition = props.defaultCondition, inlineCommentSectionMode = props.inlineCommentSectionMode, commentPinSelected = props.commentPinSelected, fullExpanded = props.fullExpanded, shadowDom = props.shadowDom, placeholder = props.placeholder, children = props.children;
     var ref = React.useRef(null);
-    return (React__default["default"].createElement("velt-comment-dialog", { ref: ref, "annotation-id": annotationId, "default-condition": [true, false].includes(defaultCondition) ? (defaultCondition ? 'true' : 'false') : undefined, "inline-comment-section-mode": [true, false].includes(inlineCommentSectionMode) ? (inlineCommentSectionMode ? 'true' : 'false') : undefined, "comment-pin-selected": [true, false].includes(commentPinSelected) ? (commentPinSelected ? 'true' : 'false') : undefined, "full-expanded": [true, false].includes(fullExpanded) ? (fullExpanded ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined }, children));
+    return (React__default["default"].createElement("velt-comment-dialog", { ref: ref, "annotation-id": annotationId, "default-condition": [true, false].includes(defaultCondition) ? (defaultCondition ? 'true' : 'false') : undefined, "inline-comment-section-mode": [true, false].includes(inlineCommentSectionMode) ? (inlineCommentSectionMode ? 'true' : 'false') : undefined, "comment-pin-selected": [true, false].includes(commentPinSelected) ? (commentPinSelected ? 'true' : 'false') : undefined, "full-expanded": [true, false].includes(fullExpanded) ? (fullExpanded ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, placeholder: placeholder }, children));
 };
 
 var VeltCommentDialogContextWrapper = function (props) {
@@ -2378,9 +2529,9 @@ var VeltCommentDialogSuggestionActionReject$1 = function (props) {
 };
 
 var VeltCommentDialogComposer$1 = function (props) {
-    var annotationId = props.annotationId, defaultCondition = props.defaultCondition, inlineCommentSectionMode = props.inlineCommentSectionMode, editMode = props.editMode, commentObj = props.commentObj, commentIndex = props.commentIndex, composerWireframe = props.composerWireframe, placeholder = props.placeholder, commentplaceholder = props.commentplaceholder, replyplaceholder = props.replyplaceholder, editplaceholder = props.editplaceholder, children = props.children;
+    var annotationId = props.annotationId, defaultCondition = props.defaultCondition, inlineCommentSectionMode = props.inlineCommentSectionMode, editMode = props.editMode, commentObj = props.commentObj, commentIndex = props.commentIndex, composerWireframe = props.composerWireframe, placeholder = props.placeholder, commentplaceholder = props.commentplaceholder, replyplaceholder = props.replyplaceholder, editplaceholder = props.editplaceholder, targetElementId = props.targetElementId, children = props.children;
     var ref = React.useRef(null);
-    return (React__default["default"].createElement("velt-comment-dialog-composer", { ref: ref, "annotation-id": annotationId, "default-condition": [true, false].includes(defaultCondition) ? (defaultCondition ? 'true' : 'false') : undefined, "inline-comment-section-mode": [true, false].includes(inlineCommentSectionMode) ? (inlineCommentSectionMode ? 'true' : 'false') : undefined, "edit-mode": [true, false].includes(editMode) ? (editMode ? 'true' : 'false') : undefined, "comment-obj": commentObj ? (typeof commentObj === 'string' ? commentObj : JSON.stringify(commentObj)) : undefined, "comment-index": commentIndex !== undefined ? commentIndex.toString() : undefined, "composer-wireframe": composerWireframe ? JSON.stringify(composerWireframe) : undefined, placeholder: placeholder, "comment-placeholder": commentplaceholder, "reply-placeholder": replyplaceholder, "edit-placeholder": editplaceholder }, children));
+    return (React__default["default"].createElement("velt-comment-dialog-composer", { ref: ref, "annotation-id": annotationId, "default-condition": [true, false].includes(defaultCondition) ? (defaultCondition ? 'true' : 'false') : undefined, "inline-comment-section-mode": [true, false].includes(inlineCommentSectionMode) ? (inlineCommentSectionMode ? 'true' : 'false') : undefined, "edit-mode": [true, false].includes(editMode) ? (editMode ? 'true' : 'false') : undefined, "comment-obj": commentObj ? (typeof commentObj === 'string' ? commentObj : JSON.stringify(commentObj)) : undefined, "comment-index": commentIndex !== undefined ? commentIndex.toString() : undefined, "composer-wireframe": composerWireframe ? JSON.stringify(composerWireframe) : undefined, placeholder: placeholder, "comment-placeholder": commentplaceholder, "reply-placeholder": replyplaceholder, "edit-placeholder": editplaceholder, "target-element-id": targetElementId }, children));
 };
 
 var VeltCommentDialogComposerActionButton$1 = function (props) {
@@ -7665,6 +7816,23 @@ function useCommentSidebarData() {
     }, [commentElement === null || commentElement === void 0 ? void 0 : commentElement.onCommentSidebarData]);
     return data;
 }
+function useSetContextProvider() {
+    var _a = React__default["default"].useState(undefined), data = _a[0], setData = _a[1];
+    var commentUtils = useCommentUtils();
+    React__default["default"].useEffect(function () {
+        if ((commentUtils === null || commentUtils === void 0 ? void 0 : commentUtils.setContextProvider) && data) {
+            commentUtils.setContextProvider(data);
+        }
+    }, [commentUtils === null || commentUtils === void 0 ? void 0 : commentUtils.setContextProvider, data]);
+    // Memoize the setContextProvider callback
+    var setContextProviderCallback = React__default["default"].useCallback(function (provider) {
+        // Wrap in arrow function to prevent React from treating provider as a functional update
+        setData(function () { return provider; });
+    }, []); // Empty dependency array since it only uses setState which is stable
+    return {
+        setContextProvider: setContextProviderCallback
+    };
+}
 
 function useAddCommentAnnotation() {
     var commentElement = useCommentUtils();
@@ -9419,6 +9587,7 @@ exports.useRecordings = useRecordings;
 exports.useRejectCommentAnnotation = useRejectCommentAnnotation;
 exports.useResolveCommentAnnotation = useResolveCommentAnnotation;
 exports.useServerConnectionStateChangeHandler = useServerConnectionStateChangeHandler;
+exports.useSetContextProvider = useSetContextProvider;
 exports.useSetDocument = useSetDocument;
 exports.useSetDocumentId = useSetDocumentId;
 exports.useSetDocuments = useSetDocuments;