@veltdev/react
Version:
Velt is an SDK to add collaborative features to your product within minutes. Example: Comments like Figma, Frame.io, Google docs or sheets, Recording like Loom, Huddles like Slack and much more.
29 lines (28 loc) • 1.51 kB
TypeScript
/**
* 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)
*/
declare const loadVelt: (callback: Function, version?: string, staging?: boolean, develop?: boolean, proxyDomain?: string, integrity?: boolean, integrityValue?: string) => (() => void);
export default loadVelt;